/* ==========================================================================
   Smilo Family Dental — design system
   Palette and type derived from the existing Smilo brand (cream, Smilo
   orange, Comfortaa wordmark), refined for WCAG 2.2 AA contrast.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --cream: #fbf6f0;        /* page background */
  --sand: #f4e9dd;         /* alternate section background */
  --shell: #fffdfa;        /* card surface */
  --ink: #26221d;          /* primary text (warm near-black) */
  --stone: #625a50;        /* muted text — 6.3:1 on cream */
  --orange: #e66c0b;       /* Smilo orange — CTAs (with ink text), accents */
  --orange-bright: #f57e1f;
  --orange-deep: #9c4a06;  /* links / small orange text — 5.8:1 on cream */
  --deep: #e66c0b;       /* deep orange surface — footer, quiet sections */
  --deep-dark: #c25a08;
  --tint: #fdf0e4;         /* pale orange tint */
  --line: #e5d9cc;         /* hairline borders on cream */
  --success: #9c4a06;
  --error: #b3261e;

  /* type */
  --font-display: "Bricolage Grotesque", "Albert Sans", system-ui, sans-serif;
  --font-body: "Albert Sans", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Comfortaa", var(--font-body);

  /* scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
  --text-3xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.5rem, 1.8rem + 3.8vw, 4.4rem);

  /* space */
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --space-gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);

  /* shape */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-arch: 999px 999px 22px 22px; /* the smile arc, applied to imagery */

  --shadow-lift: 0 1px 2px rgb(38 34 29 / 0.05), 0 10px 28px -10px rgb(38 34 29 / 0.14);
  --shadow-float: 0 2px 4px rgb(38 34 29 / 0.06), 0 18px 44px -14px rgb(38 34 29 / 0.2);

  --header-h: 76px;

  /* One easing curve site-wide (power3.inOut); motion speed scales with size */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.22s;   /* small UI */
  --dur-base: 0.65s;   /* section reveals */
  --dur-slow: 1s;      /* large image reveals */
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: 1.25; }
h4 { font-size: var(--text-lg); line-height: 1.35; }

p,
li {
  max-width: 68ch;
}

a {
  color: var(--orange-deep);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

strong { font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--orange);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 3. Utilities ---------- */
.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2.5rem, 50rem);
}

.section {
  padding-block: var(--space-section);
}

.section--sand { background: var(--sand); }
.section--deep {
  background: var(--deep);
  color: #fff;
}
.section--deep h2,
.section--deep h3 { color: #fff; }
.section--deep a { color: #fff; }
.section--deep a:hover { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 0.9rem;
}

.section--deep .eyebrow { color: #fff; }

.lede {
  font-size: var(--text-lg);
  color: var(--stone);
  max-width: 60ch;
}

.section--deep .lede { color: #ffffff; }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 2rem + 2vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lede { margin-inline: auto; }

.section-head h2 + .lede { margin-top: 0.9rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  transform: translateY(-300%);
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.skip-link:focus-visible { transform: none; }

/* the smile-arc underline — signature motif */
.smile-underline {
  position: relative;
  white-space: nowrap;
}

/* Let the underlined phrase wrap on narrow screens instead of overflowing */
@media (max-width: 48em) {
  .smile-underline { white-space: normal; }
}

.smile-underline::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -0.1em;
  height: 0.26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 4 Q100 27 196 4' fill='none' stroke='%23E66C0B' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* arch-cropped imagery */
.arch {
  border-radius: var(--radius-arch);
  overflow: hidden;
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* scroll reveal — stagger with inline style="--d:.12s".
   Scoped to html.js so content is never hidden without JavaScript. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  transition-delay: var(--d, 0s);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* image mask reveal — curtain lifts as the image enters the viewport */
html.js .img-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease);
  transition-delay: var(--d, 0s);
}

html.js .img-reveal.is-visible {
  clip-path: inset(0 0 0% 0);
}

/* Reveal images that sit in the initial viewport (currently the reviews spotlight).
   A fully-clipped start makes them invisible to Largest Contentful Paint until the
   reveal runs, which cost ~1.4 s on /reviews/. These start mostly open so they paint
   on the first frame, then finish the reveal. */
html.js .img-reveal--eager {
  clip-path: inset(0 0 45% 0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .img-reveal {
    clip-path: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--orange);
  color: var(--ink);
}

.btn--primary:hover {
  background: var(--orange-bright);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
}

/* On orange panels the primary button flips to white so it still reads as
   the action: an orange-on-orange button would vanish. */
.section--deep .btn--primary,
.section--deep .btn--primary:hover,
.cta-banner .btn--primary,
.cta-banner .btn--primary:hover,
.google-card .btn--primary,
.google-card .btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--orange-deep);
}

.section--deep .btn--ghost {
  color: #fff;
  border-color: #fff;
}

.section--deep .btn--ghost:hover {
  background: var(--cream);
  color: var(--deep-dark);
}

.btn--lg {
  font-size: var(--text-lg);
  padding: 1.1rem 2.1rem;
}

.btn--sm {
  font-size: var(--text-sm);
  padding: 0.6rem 1.2rem;
  min-height: 40px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

/* ---------- 5. Announcement bar ---------- */
.utility-bar {
  background: var(--deep);
  color: #fff;
  font-size: var(--text-sm);
}

.utility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 0.5rem;
}

.utility-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.utility-bar a:hover { text-decoration: underline; }

.utility-bar__loc {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

@media (max-width: 40em) {
  .utility-bar__loc span { display: none; }
}

@media (max-width: 30em) {
  .utility-bar__loc { display: none; }
  .utility-bar .container { justify-content: center; }
}

/* ---------- 6. Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 18px -12px rgb(38 34 29 / 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

/* Official Smilo lockup — never stretched, clear space via padding */
.logo img {
  height: 58px;
  width: auto;
  display: block;
}

.site-footer .logo img { height: 54px; }

@media (max-width: 40em) {
  .logo img { height: 46px; }
}

.logo__mark { flex: none; }

.logo__word {
  font-family: var(--font-wordmark);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.logo__word small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav > ul {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 0.25rem;
}

.site-nav a,
.site-nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}

.site-nav a:hover,
.site-nav button:hover {
  background: var(--sand);
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  background: var(--sand);
  box-shadow: inset 0 -2px 0 var(--orange);
}

.nav-item--dropdown { position: relative; }

.nav-item--dropdown svg {
  transition: transform 0.18s ease;
}

.nav-item--dropdown button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  /* wide enough that every service name stays on one line — wrapping was
     what made the rows ragged and the two columns fall out of step */
  min-width: 34rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 0.7rem;
  display: none;
}

.dropdown.is-open {
  display: block;
  animation: dropdownIn 0.2s var(--ease) both;
}

/* `translate` handles the centring, so `transform` is free for the entrance */
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.35rem;
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.dropdown__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sand);
  color: var(--orange-deep);
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background: var(--tint);
  color: var(--orange-deep);
}

.dropdown a:hover .dropdown__icon,
.dropdown a:focus-visible .dropdown__icon {
  background: var(--orange);
  color: var(--ink);
}

/* current page reads as selected rather than borrowing the top-nav underline */
.dropdown a[aria-current="page"] {
  background: var(--tint);
  box-shadow: none;
  color: var(--orange-deep);
}

.dropdown a[aria-current="page"] .dropdown__icon {
  background: var(--orange);
  color: var(--ink);
}

.dropdown__all {
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
}

.dropdown__all a {
  gap: 0.45rem;
  color: var(--orange-deep);
  font-weight: 650;
}

.dropdown__all a:hover { background: var(--tint); }

.dropdown__all svg { transition: transform var(--dur-fast) var(--ease); }

.dropdown__all a:hover svg { transform: translateX(3px); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.header-phone {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover { color: var(--orange-deep); }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}

/* mobile nav */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--cream);
  padding: 1rem 0 1.5rem;
}

.mobile-nav.is-open { display: block; }

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav > .container > ul > li {
  border-bottom: 1px solid var(--line);
}

.mobile-nav a {
  display: block;
  padding: 0.9rem 0.25rem;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.mobile-nav a[aria-current="page"] { color: var(--orange-deep); }

.mobile-nav details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0.25rem;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
}

.mobile-nav details summary::-webkit-details-marker { display: none; }

.mobile-nav details[open] summary svg { transform: rotate(180deg); }

.mobile-nav details ul {
  padding: 0 0 0.75rem 1rem;
}

.mobile-nav details a {
  font-size: var(--text-base);
  font-weight: 500;
  padding: 0.5rem 0;
}

.mobile-nav .btn-row {
  margin-top: 1.25rem;
}

@media (max-width: 64em) {
  .site-nav { display: none; }
  .header-phone { display: none; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- 7. Hero ---------- */
.hero {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-section);
  overflow: clip;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  font-size: var(--text-hero);
  margin-bottom: 1.4rem;
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--stone);
  max-width: 52ch;
  margin-bottom: 2rem;
}

.hero__note {
  margin-top: 1.1rem;
  font-size: var(--text-sm);
  color: var(--stone);
}

.hero__media {
  position: relative;
}

.hero__media .arch {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-float);
}

.hero__badge {
  position: absolute;
  bottom: 1.4rem;
  left: -1.5rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 17rem;
}

.hero__badge strong {
  display: block;
  font-size: var(--text-base);
  line-height: 1.3;
}

.hero__badge span {
  font-size: var(--text-xs);
  color: var(--stone);
}

@media (max-width: 56em) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 26rem; }
  .hero__media .arch { aspect-ratio: 5 / 4; }
  .hero__badge { left: auto; right: -0.25rem; bottom: -1rem; }
}

/* ---------- 8. Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-gap);
}

/* balanced 2x2 for four-card groups (avoids a 3+1 orphan row) */
.card-grid--2x2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 40em) {
  .card-grid--2x2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--orange);
}

.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 999px 999px 12px 12px;
  background: var(--sand);
  color: var(--orange-deep);
  display: grid;
  place-items: center;
  margin-bottom: 0.35rem;
}

.service-card h3 { font-size: 1.25rem; }

.service-card p {
  color: var(--stone);
  font-size: var(--text-sm);
  flex-grow: 1;
}

.service-card__link {
  font-weight: 650;
  font-size: var(--text-sm);
  color: var(--orange-deep);
  text-decoration: none;
}

.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.service-card__link span { text-decoration: underline; text-underline-offset: 3px; }

/* value / why-us cards */
.value-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}

.value-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 999px 999px 10px 10px;
  background: var(--tint);
  color: var(--deep);
  display: grid;
  place-items: center;
}

.value-item h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }

.value-item p { color: var(--stone); font-size: var(--text-sm); }

/* team */
.team-card {
  text-align: left;
}

.team-card .arch {
  aspect-ratio: 3 / 4;
  background: var(--sand);
  margin-bottom: 1.1rem;
}

.team-card h3 { font-size: 1.3rem; }

.team-card__role {
  color: var(--orange-deep);
  font-size: var(--text-sm);
  font-weight: 650;
  margin: 0.2rem 0 0.6rem;
}

.team-card p { color: var(--stone); font-size: var(--text-sm); }

/* reviews */
.review-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
}

.review-card blockquote {
  font-size: var(--text-lg);
  line-height: 1.55;
  flex-grow: 1;
}

.review-card blockquote::before {
  content: "“";
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--orange);
  margin-bottom: 0.6rem;
}

.review-card figcaption strong { display: block; }

.review-card figcaption span {
  font-size: var(--text-sm);
  color: var(--stone);
}

.stars {
  color: var(--orange);
  letter-spacing: 0.1em;
  font-size: var(--text-sm);
}

/* ---------- 9. Trust bar ---------- */
.trust-bar {
  border-block: 1px solid var(--line);
  background: var(--shell);
}

.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem;
  padding-block: 2rem;
  text-align: center;
}

.trust-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 650;
}

.trust-bar span {
  font-size: var(--text-sm);
  color: var(--stone);
}

/* ---------- 10. Patient journey ---------- */
.journey {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-gap);
  list-style: none;
  padding: 0;
}

.journey li {
  counter-increment: step;
  position: relative;
  padding-top: 3.4rem;
}

.journey li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px 999px 10px 10px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  display: grid;
  place-items: center;
}

@media (min-width: 64em) {
  .journey { grid-template-columns: repeat(5, 1fr); }
}

.journey h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }

.journey p { font-size: var(--text-sm); color: var(--stone); }

.section--deep .journey p { color: #ffffff; }
.section--deep .journey li::before {
  background: #fff;
  color: var(--orange-deep);
}

.section--deep .journey-track i { background: #fff; }

/* ---------- 11. FAQ ---------- */
.faq-list {
  display: grid;
  gap: 0.85rem;
}

.faq-item {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { background: var(--sand); }

.faq-item summary svg {
  flex: none;
  color: var(--orange-deep);
  transition: transform 0.2s ease;
}

.faq-item[open] summary svg { transform: rotate(45deg); }

.faq-item__body {
  padding: 0 1.4rem 1.3rem;
  color: var(--stone);
}

.faq-item__body p + p { margin-top: 0.7rem; }

/* ---------- 12. Location / contact ---------- */
.contact-card {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.contact-card h3,
.contact-card h2.h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--stone);
  margin-bottom: 0.8rem;
}

.contact-card address { font-style: normal; }

.contact-card a { font-weight: 600; }

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hours-table th,
.hours-table td {
  text-align: left;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.hours-table td { text-align: right; }

.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }

.hours-table .is-today th,
.hours-table .is-today td { font-weight: 700; color: var(--orange-deep); }

.map-embed {
  border: 0;
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius-lg);
  filter: saturate(0.85);
}

/* ---------- 13. CTA banner ---------- */
.cta-banner {
  background: var(--deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 2rem + 3vw, 4rem);
  display: grid;
  grid-template-columns: 1.2fr auto;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: auto -10% -68% -10%;
  height: 90%;
  border-radius: 50% 50% 0 0;
  background: rgb(255 255 255 / 0.05);
  pointer-events: none;
}

.cta-banner h2 { color: #fff; margin-bottom: 0.6rem; }

.cta-banner p { color: #ffffff; }

.cta-banner .btn--primary { background: #fff; color: var(--orange-deep); }

/* ghost buttons on the dark banner must be cream, not ink */
.cta-banner .btn--ghost {
  color: #fff;
  border-color: rgb(255 255 255 / 0.7);
}

.cta-banner .btn--ghost:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--deep-dark);
}

@media (max-width: 48em) {
  .cta-banner { grid-template-columns: 1fr; }
}

/* ---------- 14. Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.form-grid .field--full { grid-column: 1 / -1; }

@media (max-width: 40em) {
  .form-grid { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  font-weight: 650;
  font-size: var(--text-sm);
  margin-bottom: 0.4rem;
}

.field .hint {
  font-size: var(--text-xs);
  color: var(--stone);
  margin: -0.2rem 0 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--shell);
  border: 1.5px solid #cbbfae;
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  min-height: 48px;
}

.field textarea { resize: vertical; min-height: 7rem; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange-deep);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
}

.field-error {
  display: none;
  color: var(--error);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: 0.35rem;
}

.field.has-error .field-error { display: flex; gap: 0.35rem; align-items: center; }

.form-status {
  margin-top: 1.25rem;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  display: none;
}

.form-status.is-success {
  display: block;
  background: #fdf0e4;
  color: var(--success);
  border: 1px solid #f0d8bc;
}

.form-status.is-error {
  display: block;
  background: #f9e5e3;
  color: var(--error);
  border: 1px solid #ecc4c0;
}

/* ---------- 14b. Confirmation modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgb(38 34 29 / 0.55);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.modal-backdrop.is-open { opacity: 1; }

.modal {
  background: var(--shell);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  max-width: 26rem;
  width: 100%;
  padding: 2.25rem 2rem 2rem;
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform var(--dur-fast) var(--ease);
}

.modal-backdrop.is-open .modal { transform: none; }

.modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 999px 999px 16px 16px;
  background: var(--tint);
  color: var(--success);
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
}

.modal h2 { font-size: 1.45rem; margin-bottom: 0.6rem; }

.modal p {
  color: var(--stone);
  font-size: var(--text-sm);
  margin-inline: auto;
}

.modal .btn { margin-top: 1.5rem; }

/* ---------- 15. Breadcrumbs & page intro ---------- */
.breadcrumbs {
  padding-top: 1.5rem;
  font-size: var(--text-sm);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: var(--stone);
}

.breadcrumbs li:not(:first-child)::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--line);
}

.breadcrumbs a { color: var(--stone); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

.page-intro {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
}

.page-intro h1 { margin-bottom: 1rem; }

/* Medical-reviewer byline on treatment pages. Quiet by design — it's a trust signal for
   the reader (and for search engines assessing health content), not a headline. */
.med-review {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  font-size: 0.875rem;
  color: var(--stone);
}

.med-review svg { color: var(--orange); flex: none; }

.med-review a {
  color: inherit;
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
}

.med-review a:hover,
.med-review a:focus-visible { color: var(--orange-deep); }

.med-review span { opacity: 0.75; }

/* ---------- 16. Prose (long-form pages) ---------- */
.prose h2 { margin: 2.4rem 0 0.8rem; }
.prose h3 { margin: 1.8rem 0 0.6rem; }
.prose p + p { margin-top: 0.9rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }

/* ---------- 17. Footer ---------- */
.site-footer {
  background: var(--deep);
  color: #ffffff;
  margin-top: var(--space-section);
  padding-block: 3.5rem 2rem;
  font-size: var(--text-sm);
}

.site-footer a {
  color: #efe4d7;
  text-decoration: none;
}

.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.footer-grid h2 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  margin-bottom: 1rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li + li { margin-top: 0.55rem; }

.site-footer .logo { color: #fff; }
.site-footer .logo__word small { color: #ffffff; }

.footer-tagline { margin-top: 1rem; max-width: 26ch; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  color: #ffffff;
}

.footer-legal ul {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 56em) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 36em) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 18. Split layouts ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.split .arch { aspect-ratio: 4 / 5; }

.split--media-right .split__media { order: 2; }

@media (max-width: 56em) {
  .split { grid-template-columns: 1fr; }
  .split .arch { aspect-ratio: 16 / 10; }
  .split--media-right .split__media { order: 0; }
  .split .arch,
  .hero__media .arch {
    border-radius: var(--radius-lg);
  }
}

/* ==========================================================================
   19. V2 visual system — editorial sections, showcase, social, motion
   ========================================================================== */

/* ---- Hero v2: split editorial with floating proof ---- */
.hero-v2 {
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(3rem, 2.5rem + 3vw, 5.5rem);
  overflow: clip;
}

.hero-v2 .container {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.hero-v2 h1 {
  font-size: var(--text-hero);
  margin-bottom: 1.1rem;
}

.hero-v2__sub {
  font-size: var(--text-lg);
  color: var(--stone);
  max-width: 44ch;
  margin-bottom: 1.9rem;
}

.hero-v2__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-size: var(--text-sm);
  color: var(--stone);
}

.award-badges {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2rem;
}

.award-badges img {
  height: 84px;
  width: auto;
}

.award-badges span {
  font-size: var(--text-xs);
  color: var(--stone);
  max-width: 12ch;
  line-height: 1.4;
}

.hero-v2__media {
  position: relative;
}

.hero-v2__media .arch {
  aspect-ratio: 1 / 0.92;
  box-shadow: var(--shadow-float);
}

.hero-v2__media .arch img { object-position: 50% 30%; }

.float-card {
  position: absolute;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 0.9rem 1.15rem;
}

.hero-v2__media .float-card {
  bottom: 1.6rem;
  left: -1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 16.5rem;
}

.float-card strong { display: block; line-height: 1.3; }
.float-card small { font-size: var(--text-xs); color: var(--stone); }

@media (max-width: 56em) {
  .hero-v2 .container { grid-template-columns: 1fr; }
  .hero-v2__media { order: -1; }
  .hero-v2__media .arch { aspect-ratio: 5 / 4; }
  .hero-v2__media .float-card { left: auto; right: 0.5rem; bottom: -1.1rem; }
  .award-badges img { height: 66px; }
}

/* ---- Scroll cue ---- */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.25rem;
  font-weight: 650;
  font-size: var(--text-sm);
  color: var(--stone);
  text-decoration: none;
}

.scroll-cue:hover { color: var(--ink); }

.scroll-cue svg {
  color: var(--orange-deep);
  animation: cue-bob 2.2s var(--ease) infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- Stat band (deep) with count-up ---- */
.stat-band {
  background: var(--deep);
  color: #fff;
  padding-block: clamp(2.25rem, 2rem + 2vw, 3.5rem);
}

.stat-band .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.75rem;
  text-align: center;
}

.stat-band strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.stat-band strong span { font-size: inherit; }

.stat-band p > span {
  font-size: var(--text-sm);
  color: #ffffff;
}

@media (max-width: 40em) {
  .stat-band .container { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}

/* ---- Curved seam between sections (the smile arc, writ large) ---- */
.seam {
  display: block;
  width: 100%;
  height: clamp(34px, 6vw, 80px);
}

/* ---- Feature split: short editorial copy + chips ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.chip svg { color: var(--orange-deep); flex: none; }

/* ---- Service showcase: one featured + supporting, photo-led ---- */
.showcase {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: repeat(3, minmax(10.5rem, 1fr));
  gap: var(--space-gap);
}

.showcase__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  min-height: 15rem;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.showcase__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.showcase__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--dur-slow) var(--ease);
}

.showcase__item:hover img { transform: scale(1.045); }

.showcase__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(20 16 12 / 0.82) 0%, rgb(20 16 12 / 0.28) 55%, rgb(20 16 12 / 0.05) 100%);
}

.showcase__body {
  padding: 1.5rem;
  width: 100%;
}

.showcase__body h3 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
}

.showcase__body p {
  color: rgb(255 255 255 / 0.85);
  font-size: var(--text-sm);
  max-width: 40ch;
  margin-bottom: 0.15rem;
}

.showcase__body .showcase__cta {
  font-weight: 650;
  font-size: var(--text-sm);
  color: #ffc48d;
}

.showcase__item--featured {
  grid-column: 1;
  grid-row: 1 / 4;
  min-height: 30rem;
}

.showcase__item--featured h3 { font-size: var(--text-2xl); }

.showcase__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* mobile: intentional horizontal scroll with snap */
@media (max-width: 56em) {
  .showcase {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin-inline: -1.25rem;
    padding: 0.25rem 1.25rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) transparent;
  }

  .showcase__item {
    flex: 0 0 82%;
    max-width: 21rem;
    scroll-snap-align: center;
    min-height: 20rem;
  }

  .showcase__item--featured { min-height: 20rem; }
  .showcase__item--featured h3 { font-size: 1.35rem; }
}

/* ---- Visual tiles: image-led cards for service grids ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}

@media (max-width: 64em) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40em) {
  .tile-grid { grid-template-columns: 1fr; }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-float);
  border-color: var(--orange);
  color: inherit;
}

.tile__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sand);
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.tile:hover .tile__media img { transform: scale(1.05); }

.tile__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.4rem;
  padding: 1.35rem 1.5rem 1.5rem;
}

.tile__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.tile__body h3,
.tile__body h2 {
  font-size: 1.3rem;
}

.tile__body p {
  font-size: var(--text-sm);
  color: var(--stone);
}

.tile__cta {
  margin-top: auto;
  padding-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  font-size: var(--text-sm);
  color: var(--orange-deep);
}

.tile__cta svg { transition: transform var(--dur-fast) var(--ease); }

.tile:hover .tile__cta svg { transform: translateX(4px); }

/* ---- Mini tiles: compact icon + label chips for secondary links ---- */
.mini-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
  margin-top: var(--space-gap);
}

@media (max-width: 64em) {
  .mini-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 40em) {
  .mini-tiles { grid-template-columns: 1fr; gap: 0.7rem; }
}

.mini-tile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.05rem;
  font-weight: 650;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.mini-tile:hover,
.mini-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--orange);
  color: var(--ink);
}

.mini-tile__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px 999px 10px 10px;
  background: var(--sand);
  color: var(--orange-deep);
  display: grid;
  place-items: center;
}

.mini-tile svg.mini-tile__arrow {
  margin-left: auto;
  flex: none;
  color: var(--orange-deep);
  transition: transform var(--dur-fast) var(--ease);
}

.mini-tile:hover svg.mini-tile__arrow { transform: translateX(3px); }

/* ---- Full-bleed image band with parallax + floating card ---- */
.fullbleed {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 55vh, 34rem);
  display: grid;
  align-items: end;
}

.fullbleed > img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

.fullbleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(20 16 12 / 0.55), rgb(20 16 12 / 0.05) 55%);
}

.fullbleed .container {
  position: relative;
  z-index: 1;
  padding-block: 2.5rem;
}

.fullbleed .float-card {
  position: static;
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 24rem;
  padding: 1.4rem 1.6rem;
}

/* ---- Quote feature ---- */
.quote-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.75rem, 3vw, 3.5rem);
  align-items: center;
  max-width: 56rem;
  margin-inline: auto;
}

.quote-feature__photo {
  width: clamp(7rem, 14vw, 11rem);
  aspect-ratio: 1;
  border-radius: 999px 999px 999px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.quote-feature__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-feature blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.4;
}

.quote-feature figcaption {
  margin-top: 1rem;
  color: var(--stone);
  font-size: var(--text-sm);
}

.quote-feature figcaption strong { color: var(--ink); }

@media (max-width: 40em) {
  .quote-feature { grid-template-columns: 1fr; }
  .quote-feature__photo { width: 6.5rem; }
}

/* ---- Team strip ---- */
.team-strip__group {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}

.team-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gap);
  margin-top: var(--space-gap);
}

.team-strip__member {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem;
  text-align: center;
  box-shadow: var(--shadow-lift);
}

.team-strip__member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: 999px 999px 14px 14px;
  margin-bottom: 0.7rem;
}

.team-strip__member strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
}

.team-strip__member span {
  font-size: var(--text-xs);
  color: var(--stone);
}

@media (max-width: 56em) {
  .team-strip__row {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
  }
}

/* ---- Social section ---- */
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gap);
}

.social-grid a {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  display: block;
}

.social-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease);
}

.social-grid a:hover img { transform: scale(1.05); }

.social-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(230 108 11 / 0);
  transition: background var(--dur-fast) var(--ease);
}

.social-grid a:hover::after { background: rgb(230 108 11 / 0.18); }

.social-grid .social-grid__follow {
  background: var(--deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-decoration: none;
  font-weight: 650;
  text-align: center;
  padding: 1rem;
}

.social-grid .social-grid__follow:hover { background: var(--deep-dark); color: #fff; }
.social-grid .social-grid__follow::after { display: none; }

@media (max-width: 40em) {
  .social-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
}

/* ---- Social icons (official glyph shapes, inline SVG) ---- */
.social-icons {
  display: inline-flex;
  gap: 0.6rem;
}

.social-icons a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--ink);
  border: 1.5px solid var(--line);
  background: var(--shell);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.social-icons a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}

.utility-bar .social-icons a {
  width: 32px;
  height: 32px;
  background: transparent;
  border-color: rgb(255 255 255 / 0.25);
  color: #fff;
}

.utility-bar .social-icons a:hover { background: rgb(255 255 255 / 0.15); color: #fff; }

.site-footer .social-icons a {
  background: transparent;
  border-color: rgb(255 255 255 / 0.2);
  color: #efe4d7;
}

.site-footer .social-icons a:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }

/* mobile sticky action bar */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 48em) {
  .mobile-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--cream) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }

  body { padding-bottom: 4.6rem; }
}


/* ==========================================================================
   Motion layer — GSAP + ScrollTrigger (js/motion.js)
   html.gsap is present only when GSAP loaded AND reduced motion is off.
   Nothing in this block may hide content without that class.
   ========================================================================== */

/* GSAP owns reveals: neutralize the CSS-transition reveal system so the two
   engines never animate the same properties on the same elements. */
html.gsap .reveal,
html.gsap .img-reveal {
  transition: none;
}

/* Word-by-word hero headline (spans injected by motion.js) */
.hero-word { display: inline-block; }

/* The signature smile-arc underline draws itself once the headline lands */
html.gsap .smile-underline::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease) 0.05s;
}

html.gsap .smile-underline.is-drawn::after {
  clip-path: inset(0 0 0 0);
}

/* Scroll progress — a hairline of Smilo orange along the top edge */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-bright));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 200;
  pointer-events: none;
}

/* Header: cream glass + smaller logo once scrolled (.is-stuck from main.js) */
html.gsap .site-header {
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

html.gsap .site-header.is-stuck {
  background: rgb(251 246 240 / 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html.gsap .site-header .logo img {
  transition: transform 0.35s var(--ease);
  transform-origin: left center;
}

html.gsap .site-header.is-stuck .logo img { transform: scale(0.88); }

/* Journey progress line (injected on the homepage, 5-column layout only) */
.journey {
  position: relative;
  z-index: 0;
}

.journey-track { display: none; }

@media (min-width: 64em) {
  html.gsap .journey-track {
    display: block;
    position: absolute;
    z-index: -1;
    top: 20.5px;
    left: 22px;
    right: calc(20% - 0.8 * var(--space-gap) - 22px);
    height: 3px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.16);
  }

  .journey-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
}

/* Reveal utilities — authoring hooks for one-off elements:
   .reveal-up | .reveal-down | .reveal-left | .reveal-right | .reveal-scale | .reveal-fade
   motion.js maps these onto the same batched GSAP reveals as [data-anim];
   without the motion layer they are inert, so content is never hidden. */

/* ---- Cinematic treatment scenes (.txscene) ---- */
.txscene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 58%, var(--cream) 100%);
}

.txscene__stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 4.5rem 1.25rem 3rem;
  text-align: center;
}

.txscene__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.txscene__canvas {
  position: relative;
  width: min(46rem, 92vw);
  margin-top: 0.5rem;
}

.txscene__canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.txscene__labels {
  list-style: none;
  margin: 0;
  padding: 0;
}

.txscene__labels li {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  box-shadow: var(--shadow-lift);
  white-space: nowrap;
}

@media (min-width: 48em) {
  .txscene__labels li {
    position: absolute;
    left: var(--lx);
    top: var(--ly);
    translate: -50% 0;
  }
}

@media (max-width: 47.99em) {
  .txscene__labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
  }

  .txscene__labels li { white-space: normal; }
}

.txscene__hint {
  display: none;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.75;
  margin-top: 1.4rem;
}

/* The hint only means something when the scene is pinned (GSAP active).
   Its opacity belongs to GSAP; CSS only nudges transform. */
html.gsap .txscene__hint {
  display: block;
  animation: txhint 2s var(--ease) infinite;
}

@keyframes txhint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  html.gsap .txscene__hint { animation: none; }
  .scroll-progress { display: none; }
}


/* ==========================================================================
   Hero v3 — the smile overture (homepage only)
   Full-viewport hero: giant headline, self-drawing smile arc, floating proof
   chips, magnetic CTA, and a treatment teaser rail docked at the fold.
   ========================================================================== */
.hero-v3 {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.4rem, 4vh, 3rem);
}

.hero-v3__arc {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  width: 100%;
  height: 62%;
  pointer-events: none;
  z-index: 0;
}

.hero-v3__top {
  position: relative;
  z-index: 2;
}

.hero-v3 h1 {
  font-size: clamp(2.9rem, 2rem + 5.2vw, 5.9rem);
  line-height: 1;
  letter-spacing: -0.022em;
  margin-top: 0.45rem;
  max-width: 16ch;
}

.hero-v3__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  margin-top: clamp(1rem, 3vh, 2.2rem);
  padding-bottom: 1.2rem;
}

.hero-v3__sub {
  font-size: var(--text-lg);
  color: var(--stone);
  max-width: 44ch;
}

/* Two subheadlines: the full sentence on desktop, one line on phones */
.hero-v3__sub-short { display: none; }

.hero-v3__copy .btn-row { margin-top: 1.6rem; }

.hero-v3__copy .award-badges { margin-top: 1.8rem; }

.hero-v3__media { position: relative; }

.hero-v3__media .arch {
  aspect-ratio: 5 / 4;
  max-height: min(52vh, 460px);
  width: 100%;
}

/* Floating proof chips — outer element scatters on scroll, inner floats */
.hero-chip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.hero-chip__in {
  display: inline-block;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: var(--text-sm);
  color: var(--stone);
  box-shadow: var(--shadow-float);
  white-space: nowrap;
}

.hero-chip__in strong { color: var(--ink); }

.hero-chip--1 { top: 5%; left: -3%; }
.hero-chip--1 strong { color: var(--orange-deep); }
.hero-chip--2 { top: 42%; right: -2%; }
.hero-chip--3 { bottom: -3%; left: 7%; }

/* Treatment teaser rail — the scroll bait at the fold */
.hero-v3__rail {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 0.9rem 0 1.05rem;
  background: linear-gradient(180deg, rgb(251 246 240 / 0), rgb(244 233 221 / 0.6));
}

.hero-v3__rail .container {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.hero-v3__rail-label {
  font-size: var(--text-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--stone);
  white-space: nowrap;
}

.hero-v3__rail-track {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.25rem;
}

.hero-v3__rail-track::-webkit-scrollbar { display: none; }

.rail-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--shell);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.rail-item > svg:first-child { color: var(--orange-deep); flex: none; }

.rail-item .rail-arrow { transition: transform var(--dur-fast) var(--ease); }

.rail-item:hover,
.rail-item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: var(--shadow-lift);
}

.rail-item:hover .rail-arrow { transform: translateX(3px); }

.hero-v3__cue {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-deep);
  white-space: nowrap;
}

html.gsap .hero-v3__cue { display: inline-flex; }

html.gsap .cue-chev { animation: cuebob 1.6s ease-in-out infinite; }

@keyframes cuebob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* CTA micro-interactions: shine sweep on hover (magnetic pull is JS) */
.btn--shine {
  position: relative;
  overflow: hidden;
}

.btn--shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
  pointer-events: none;
}

.btn--shine:hover::after,
.btn--shine:focus-visible::after {
  animation: btnshine 0.8s var(--ease);
}

@keyframes btnshine {
  to { left: 130%; }
}

/* Phone hero: app-screen order — headline, outcome photo, one-line sub,
   one full-width CTA, teaser rail. No paragraphs, no button pile-up. */
@media (max-width: 48em) {
  .hero-v3 { min-height: 0; padding-top: 1.1rem; }

  .hero-v3 h1 {
    font-size: clamp(2.3rem, 10.5vw, 2.9rem);
    line-height: 1.02;
    margin-top: 0.35rem;
  }

  .hero-v3__body {
    grid-template-columns: 1fr;
    gap: 1.15rem;
    margin-top: 1.1rem;
    padding-bottom: 0.6rem;
  }

  /* The outcome shot comes right after the headline */
  .hero-v3__media { order: -1; margin-top: 0.2rem; }

  .hero-v3__media .arch { aspect-ratio: 16 / 10; max-height: none; }

  .hero-v3__sub { font-size: var(--text-base); max-width: none; }

  .hero-v3__sub-full { display: none; }

  .hero-v3__sub-short { display: inline; }

  .hero-v3__copy .btn-row {
    margin-top: 0.9rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .hero-v3__copy .btn--primary {
    width: 100%;
    justify-content: center;
    padding-block: 1.05rem;
  }

  /* Secondary action demotes to a quiet centered link */
  .hero-v3__copy .btn--ghost {
    border: none;
    background: none;
    box-shadow: none;
    align-self: center;
    width: auto;
    padding: 0.6rem 1rem;
    color: var(--orange-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .hero-v3__copy .award-badges { display: none; }

  .hero-chip--2,
  .hero-chip--3 { display: none; }

  .hero-chip--1 { top: auto; bottom: 5%; left: 4%; }

  .hero-v3__rail { margin-top: 1rem; }

  .hero-v3__rail-label { display: none; }

  .rail-item { padding: 0.7rem 1.05rem; }

  /* Fading right edge signals "there's more — swipe" */
  .hero-v3__rail-track {
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    mask-image: linear-gradient(90deg, #000 80%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.gsap .cue-chev,
  .btn--shine:hover::after { animation: none; }
}


/* ClearCorrect journey — the tray-series strip under the scene canvas */
.cc-stages {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.cc-stages li {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--orange-deep);
  border: 1px solid var(--line);
  background: var(--shell);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
}


/* ==========================================================================
   Reviews proof hub
   ========================================================================== */

/* Proof strip under the page intro */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  color: var(--stone);
}

.proof-chip strong { color: var(--ink); }

.proof-chip--awards img { height: 34px; width: auto; }

/* Spotlight review */
.spotlight {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-lift);
}

.spotlight__photo {
  border-radius: var(--radius-arch);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-width: 300px;
}

.spotlight__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight__pull {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0.6rem 0 0.9rem;
}


.spotlight__body blockquote {
  font-size: var(--text-lg);
  color: var(--stone);
  line-height: 1.55;
}

.spotlight__body figcaption {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--stone);
}

.spotlight__body figcaption strong { color: var(--ink); }

@media (max-width: 48em) {
  .spotlight { grid-template-columns: 1fr; }

  .spotlight__photo { max-width: 200px; }

  .spotlight__pull { font-size: var(--text-2xl); }
}

/* Review cards: grid on desktop, snap slider on phones */
.review-slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  align-items: start; /* reviews vary a lot in length — don't stretch short cards */
}

.review-slider .review-card { height: auto; }
.review-slider .review-card blockquote { flex-grow: 0; }

/* ---- proof-hub card treatment: headline quote, tag, clamped body ---- */
.review-slider .review-card {
  gap: 0.9rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
  border: 1px solid #f0e2d0;
  box-shadow: 0 1px 0 rgba(90, 60, 30, 0.04), 0 14px 34px -22px rgba(90, 60, 30, 0.35);
  position: relative;
  overflow: hidden;
}

.review-slider .review-card::before {
  /* soft orange corner glow */
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(230, 108, 11, 0.12), rgba(230, 108, 11, 0));
  pointer-events: none;
}

.review-slider .review-card blockquote::before { display: none; }

.review-slider .review-card blockquote {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--stone);
}

.review-slider .review-card .review-card__pull {
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.42rem);
  line-height: 1.18;
  position: relative;
  padding-left: 0.85rem;
  border-left: 3px solid var(--orange);
}

.review-card__tag {
  margin-left: 0.7rem;
  margin-right: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--tint);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.review-card__body {
  position: relative;
}

.review-card__body.is-clamped blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.review-card__more {
  margin-top: -0.2rem;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--orange-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(194, 90, 8, 0.4);
}

.review-card__more:hover,
.review-card__more:focus-visible { text-decoration-color: currentColor; }

.review-slider .review-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid #f2e6d6;
}

.review-slider .review-card figcaption strong { color: var(--ink); }
.review-slider .review-card figcaption span { font-size: 0.8rem; color: var(--stone); }

.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--sand);
  color: var(--orange-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.review-card__pull {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* the pull-quote carries the drama, so drop the giant quote mark */
.review-card--pull blockquote::before { display: none; }

.review-card--pull blockquote {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--stone);
}

.google-card {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
}

.google-card__score {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.google-card__sub {
  color: #ffffff;
  font-size: var(--text-sm);
}

.google-card__ghost {
  color: #fff;
  border-color: #fff;
}

.review-note {
  margin-top: 1.4rem;
  font-size: var(--text-sm);
  color: var(--stone);
}

@media (max-width: 48em) {
  .review-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0.9rem;
    padding-bottom: 0.4rem;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .review-slider::-webkit-scrollbar { display: none; }

  .review-slider > * {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}


/* ==========================================================================
   Mobile compaction pass — tight, app-like phone layout.
   Token-level: shorter sections and gaps everywhere on phones, then
   per-component fixes for the blocks that stacked too tall.
   ========================================================================== */
@media (max-width: 48em) {
  :root {
    --space-section: 3rem;
    --space-gap: 1rem;
  }

  .section-head { margin-bottom: 1.3rem; }

  /* Hero: give the phone the desktop glow */
  .hero-v3__media { z-index: 0; }

  .hero-v3__media::before {
    content: "";
    position: absolute;
    inset: -10% -12%;
    z-index: -1;
    background: radial-gradient(62% 58% at 50% 45%, rgb(255 196 141 / 0.5), rgb(255 196 141 / 0));
    pointer-events: none;
  }

  .hero-v3__arc { top: 10%; height: 58%; }

  .hero-v3__arc path { opacity: 0.28; }

  /* Service showcase: uniform tile size, no mixed heights */
  .showcase__item,
  .showcase__item--featured {
    flex: 0 0 74%;
    max-width: 19rem;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .showcase__body { padding: 1.1rem; }

  .showcase__body h3,
  .showcase__item--featured h3 { font-size: 1.22rem; }

  /* Mini service tiles: two-up grid instead of a five-row stack */
  .mini-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .mini-tile {
    padding: 0.7rem 0.85rem;
    font-size: var(--text-sm);
    gap: 0.5rem;
  }

  .mini-tile:last-child { grid-column: 1 / -1; }

  /* Comfort split: shorter photo */
  .split { gap: 1.4rem; }

  .split .arch { aspect-ratio: 16 / 10; }

  /* Journey: horizontal snap cards instead of a five-block stack */
  .journey {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0.8rem;
    margin-inline: -1.25rem;
    padding: 0.25rem 1.25rem 0.5rem;
  }

  .journey::-webkit-scrollbar { display: none; }

  .journey li {
    flex: 0 0 62%;
    max-width: 15rem;
    scroll-snap-align: center;
    background: rgb(255 255 255 / 0.06);
    border-radius: var(--radius);
    padding: 3.2rem 1rem 1.1rem;
  }

  .journey li::before {
    top: 0.8rem;
    left: 0.9rem;
    width: 38px;
    height: 38px;
  }

  /* Full-bleed clinic band: banner, not a wall */
  .fullbleed { min-height: 15rem; }

  .fullbleed .container { padding-block: 1.5rem; }

  /* Quote feature: smaller photo, quicker read */
  .quote-feature { gap: 1.2rem; }

  .quote-feature__photo { max-width: 9.5rem; }

  /* Map: enough to orient, not a full screen */
  .map-embed {
    min-height: 240px !important;
    height: 240px !important;
  }

  /* CTA banner: tighter padding */
  .cta-banner { padding: 1.7rem 1.4rem; }

  /* Stat band: tighter rhythm */
  .stat-band .container { gap: 1.1rem; }
}


/* ==========================================================================
   2026-08-09 pass: hamburger nav, priority cards, 3D viewer facade,
   ClearCorrect tilt tray
   ========================================================================== */

/* Hamburger toggle (replaces the "Menu" text button) */
.nav-toggle {
  width: 46px;
  height: 46px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav: smooth open/close (was an instant display toggle) */
.mobile-nav {
  display: block;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  border-top-width: 0;
  transition:
    max-height 0.4s var(--ease),
    opacity 0.3s var(--ease),
    visibility 0s linear 0.4s;
}

.mobile-nav.is-open {
  max-height: min(80vh, 42rem);
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
  border-top-width: 1px;
  transition:
    max-height 0.4s var(--ease),
    opacity 0.35s var(--ease) 0.05s;
}

.mobile-nav > .container { padding-block: 1rem 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav.is-open,
  .nav-toggle__bar { transition: none; }
}

/* Priority strip: two symmetrical service cards. Same surface, same geometry;
   the icon chip and button colour carry the only distinction. */
.priority-strip { padding-block: clamp(2rem, 4vw, 3.25rem); }

.priority-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-gap);
  align-items: stretch;
}

.priority-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.priority-card:hover,
.priority-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

.priority-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.priority-card--urgent .priority-card__icon {
  background: var(--orange);
  color: var(--ink);
}

.priority-card--billing .priority-card__icon {
  background: var(--deep);
  color: #fff;
}

.priority-card h2 {
  font-size: var(--text-xl);
  line-height: 1.15;
}

/* flex-grow pins both buttons to the same baseline regardless of copy length */
.priority-card p {
  font-size: var(--text-sm);
  color: var(--stone);
  flex-grow: 1;
}

.priority-card .btn-row {
  width: 100%;
  margin-top: 0.4rem;
}

.priority-card .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 48em) {
  .priority-cards { grid-template-columns: 1fr; gap: 1rem; }

  .priority-card { padding: 1.5rem 1.3rem; }
}

/* Transient-overflow guard: reveal animations enter from x offsets, which can
   momentarily extend the page edge before they fire. Clip, never scroll. */
body { overflow-x: hidden; }

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* Scroll-driven aligner moment — original in-house SVG, scrubbed by scroll.
   Inline vector artwork: nothing to lazy-load, no CLS, no third-party assets. */
.align-scene {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) 0;
  overflow: hidden;
}

.align-scene__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.align-scene__copy h2 {
  font-size: var(--text-2xl);
  max-width: 18ch;
}

.align-scene__sub {
  color: var(--stone);
  max-width: 42ch;
  margin-top: 0.9rem;
}

.align-scene__stage {
  width: min(34rem, 100%);
  margin-inline: auto;
}

.align-scene__stage svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 48em) {
  .align-scene__grid { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Before/after poster in the homepage ClearCorrect teaser. Links through to
   the service page, where the same image is shown larger and readable. */
.align-scene__visual {
  justify-self: center;
  text-align: center;
}

.align-scene__poster {
  display: block;
  max-width: 23rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.align-scene__poster:hover,
.align-scene__poster:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.align-scene__poster img {
  display: block;
  width: 100%;
  height: auto;
}

.align-scene__note {
  margin-top: 0.7rem;
  font-size: var(--text-xs);
  color: var(--stone);
}

/* (ClearCorrect tilt-tray panel removed 2026-08-09 — the scroll-driven
   aligner scene below the hero is the homepage's single ClearCorrect moment.) */


/* ==========================================================================
   3D service grid (.svc-grid) — layered depth cards for the 9 services.
   Real perspective + preserve-3d; decorative layers carry the translateZ
   (text stays flat so it never blurs). GSAP drives pointer tilt and the
   scroll choreography; without GSAP the cards are static with a CSS hover.
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-gap);
  perspective: 1200px;
  align-items: stretch;
}

.svc-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  height: 100%;
}

/* deep shadow that fades in when the card lifts — opacity-only, cheap */
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.svc-card:hover::after,
.svc-card:focus-visible::after { opacity: 1; }

.svc-card:focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 4px;
}

.svc-card__tilt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  height: 100%;
  padding: 1.6rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: inherit;
  box-shadow: var(--shadow-lift);
  transform-style: preserve-3d;
  will-change: transform;
}

/* soft top-light sheen — appears as the card tips toward the viewer */
.svc-card__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 55%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  transform: translateZ(1px);
}

.svc-card:hover .svc-card__glow,
.svc-card:focus-visible .svc-card__glow { opacity: 0.55; }

/* the layered icon medallion — bevel via inset highlight + drop shadow */
.svc-card__medal {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 0.35rem;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(150deg, #ffffff, var(--sand));
  box-shadow:
    inset 0 1.5px 2px rgb(255 255 255 / 0.95),
    inset 0 -2px 4px rgb(38 34 29 / 0.08),
    0 10px 20px -10px rgb(38 34 29 / 0.35);
  color: var(--orange-deep);
  transform: translateZ(30px);
}

.svc-card__spark {
  position: absolute;
  top: -5px;
  right: -7px;
  color: var(--orange);
  transform: translateZ(14px);
}

.svc-card__label {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.svc-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.svc-card__desc {
  font-size: var(--text-sm);
  color: var(--stone);
  flex-grow: 1;
}

.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--orange-deep);
}

.svc-card__cta svg { transition: transform var(--dur-fast) var(--ease); }

.svc-card:hover .svc-card__cta svg,
.svc-card:focus-visible .svc-card__cta svg { transform: translateX(3px); }

/* fallback hover when GSAP is not running */
html:not(.gsap) .svc-card__tilt { transition: transform 0.3s var(--ease); }

html:not(.gsap) .svc-card:hover .svc-card__tilt,
html:not(.gsap) .svc-card:focus-visible .svc-card__tilt { transform: translateY(-5px); }

@media (max-width: 64em) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40em) {
  .svc-grid { grid-template-columns: 1fr; gap: 0.85rem; }

  .svc-card__tilt { padding: 1.25rem 1.3rem; }

  .svc-card__medal { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card::after,
  .svc-card__glow,
  .svc-card__cta svg,
  html:not(.gsap) .svc-card__tilt { transition: none; }
}


/* 3D services layer (services3d.js). html.m3d is set only after the GLB
   models load successfully — until then the SVG medallions remain. */
.svc-card__stage3d {
  display: none;
  width: 100%;
  aspect-ratio: 5 / 3;
  margin-bottom: 0.35rem;
}

html.m3d .svc-card__stage3d { display: block; }

html.m3d .svc-card__medal { display: none; }

.svc3d-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}


/* Showcase 3D treatment (services layout reverted to the original showcase
   format 2026-08-09; the tilt/lift/scrub animations now live on these tiles).
   Under GSAP, transform belongs to JS — CSS only transitions the shadow. */
.showcase { perspective: 1100px; }

html.gsap .showcase__item {
  transition: box-shadow var(--dur-fast) var(--ease);
  will-change: transform;
}

html.gsap .showcase__item:hover {
  transform: none; /* GSAP owns transforms; keep the CSS lift from fighting */
  box-shadow: var(--shadow-float);
}


/* 3D model mounts (services3d.js renders into these via the shared canvas).
   .is-on / html.m3d appear only after models load — until then mounts are
   invisible and the static fallbacks (SVG scene, plain prose) remain. */
.model3d { display: none; width: 100%; }

.model3d.is-on {
  display: block;
  aspect-ratio: 5 / 4;
  background: radial-gradient(circle at 50% 46%, #ffffff 0 56%, rgb(255 255 255 / 0) 60%);
}

/* homepage aligner stage: hide the SVG fallback once real 3D is running */
html.m3d .align-scene__stage > svg { display: none; }

/* framed 3D figure used in service-page prose */
.model3d-block {
  margin: 0 0 2.2rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.model3d-block .model3d.is-on {
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #ffffff, var(--cream));
}

.model3d-block figcaption {
  font-size: var(--text-xs);
  color: var(--stone);
  text-align: center;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--line);
}

/* if the 3D layer never activates, the whole figure stays out of the way */
html:not(.m3d) .model3d-block { display: none; }


/* Mobile 3D stills (services3d.js renders phones a one-shot image) */
.model3d.is-on img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Mobile inline 3D canvas — lives in page flow inside its mount */
.model3d { position: relative; }

.svc3d-inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}


/* ==========================================================================
   Preloader — spinning molar, first visit of a session only.
   Never shown without JS (html.js gate), and a pure-CSS keyframe fades it
   out on its own, so a failed script can never leave the page covered.
   ========================================================================== */
.preloader { display: none; }

html.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  /* backstop: fades itself away even if the dismiss script never runs */
  animation: preAuto 2s var(--ease) forwards;
}

/* JS dismiss path (window load) — wins whenever it fires first */
html.js .preloader.is-done {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}

@keyframes preAuto {
  0%, 78% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* the stage carries the perspective the tooth turns inside */
.preloader__stage {
  position: relative;
  width: 104px;
  height: 132px;
  perspective: 620px;
}

.preloader__tooth {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: preSpin 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Full turn, but it rests briefly at each face-on angle and moves quickly
   through the edge-on quarters — a flat shape has no thickness, so lingering
   at 90deg would read as the tooth blinking out. */
@keyframes preSpin {
  0%, 7% { transform: rotateY(0deg); }
  43%, 57% { transform: rotateY(180deg); }
  93%, 100% { transform: rotateY(360deg); }
}

/* soft contact shadow that tightens as the tooth turns edge-on */
.preloader__shadow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 74px;
  height: 12px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(38 34 29 / 0.16);
  filter: blur(3px);
  animation: preShadow 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* tracks the turn: narrow when the tooth is edge-on, full when face-on */
@keyframes preShadow {
  0%, 7% { transform: scaleX(1); opacity: 0.5; }
  25% { transform: scaleX(0.32); opacity: 0.26; }
  43%, 57% { transform: scaleX(1); opacity: 0.5; }
  75% { transform: scaleX(0.32); opacity: 0.26; }
  93%, 100% { transform: scaleX(1); opacity: 0.5; }
}

.preloader__word {
  font-family: var(--font-wordmark);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--orange);
}

/* indeterminate sweep — honest about progress, unlike a fake percentage */
.preloader__track {
  display: block;
  width: 132px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.preloader__track i {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), var(--orange-bright));
  animation: preSweep 1.4s var(--ease) infinite;
}

/* travel is kept just wide enough to clear the track, so the bar is on
   screen for most of the cycle rather than waiting in the wings */
@keyframes preSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(172%); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .preloader { animation-duration: 1.2s; }

  .preloader__tooth,
  .preloader__shadow,
  .preloader__track i { animation: none; }

  .preloader__track i { width: 100%; }
}


/* Photo figures in service-page prose — same frame language as the 3D blocks */
.photo-figure {
  margin: 0 0 2.2rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-figure figcaption {
  font-size: var(--text-xs);
  color: var(--stone);
  text-align: center;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}

/* tall infographics: hold them to a readable width instead of full bleed */
.photo-figure--poster {
  max-width: 32rem;
  margin-inline: auto;
}


/* ==========================================================================
   YouTube section — click-to-load facade ([data-yt] is reusable on any page)
   ========================================================================== */
.yt-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.yt-grid__sub {
  color: var(--stone);
  max-width: 42ch;
  margin-top: 0.9rem;
}

.yt-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lift);
}

.yt-embed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.94;
}

.yt-embed__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.yt-embed__play svg { margin-left: 3px; /* optical centring of the triangle */ }

.yt-embed__play:hover,
.yt-embed__play:focus-visible {
  transform: scale(1.08);
  background: var(--orange-bright);
}

.yt-embed__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 48em) {
  .yt-grid { grid-template-columns: 1fr; gap: 1.2rem; }

  /* video first on phones */
  .yt-embed { order: -1; }

  .yt-embed__play { width: 62px; height: 62px; }
}

/* ==========================================================================
   Watch-us cinematic band — full-bleed ambient background video
   ========================================================================== */
.yt-cine {
  --cine-h: clamp(26rem, 68vh, 44rem);
  position: relative;
  height: var(--cine-h);
  overflow: hidden;
  background: #241207;
}

.yt-cine__media {
  position: absolute;
  inset: 0;
}

.yt-cine__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02); /* hides the thumbnail's hairline letterbox edges */
  z-index: 1; /* covers the iframe until playback is confirmed */
  transition: opacity 0.9s ease;
}

.yt-cine.is-live .yt-cine__poster {
  opacity: 0;
}

/* native video fills the band; object-fit does the 16:9 cover crop */
.yt-cine__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

.yt-cine__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(20, 10, 4, 0.08) 40%, rgba(20, 10, 4, 0.72) 100%);
}

.yt-cine__content {
  padding-top: 2rem;
  padding-bottom: 2.6rem;
}

.yt-cine__content .eyebrow {
  color: #ffc48d;
}

.yt-cine__content h2 {
  color: #fff;
  margin-bottom: 1.2rem;
  max-width: 16ch;
}

@media (max-width: 48em) {
  .yt-cine {
    --cine-h: clamp(20rem, 58vh, 30rem);
  }

  .yt-cine__content {
    padding-bottom: 1.8rem;
  }

  .yt-cine__content .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yt-cine__frame {
    display: none; /* poster stays as a still image */
  }
}