/* =============================================================================
   Dante Gonzales Orthodontics — homepage
   1. Tokens          6. Utility bar     11. Founder / reach
   2. Reset & base    7. Header & nav    12. Benefits / offered
   3. Typography      8. Hero            13. Testimonials
   4. Layout          9. Mission         14. Report / book / quiz
   5. Controls       10. Results         15. Visit / form / video / footer
   ========================================================================== */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
  /* colour ---------------------------------------------------------------- */
  --ink:            #14232e;
  --ink-2:          #3d5462;
  --ink-3:          #6f838f;
  --ink-inv:        #ffffff;

  --paper:          #ffffff;
  --ivory:          #fcfaf6;
  --cream:          #f6f0e7;
  --mist:           #f4f0e9;
  --line:           #e7e2d9;
  --line-soft:      #f0ece4;

  /* accent blue taken from the logo mark (#189AD6 / #154B93) */
  --brand-900:      #10375c;
  --brand-800:      #144d7c;
  --brand-700:      #17679d;
  --brand-600:      #1a80c0;
  --brand-500:      #189ad6;
  --brand-300:      #7dbde5;
  --brand-200:      #a9d3ee;
  --brand-100:      #dceaf7;
  --brand-50:       #eff6fc;

  /* light yellow sampled from the logo's warm gradient (#F3DA67 -> #F7A340) */
  --sun-50:         #fefaea;
  --sun-100:        #fbf1cd;
  --sun-200:        #f8e8ac;
  --sun-300:        #f6e08a;
  --sun-400:        #f3da67;
  --sun-500:        #edcb4a;
  --sun-600:        #e0b233;
  --sun-700:        #a87c18;   /* button edge: 3.3:1 on the palest warm band */

  --sun-900:        #6d4f0f;

  --sand-700:       #8a6329;
  --sand-600:       #a8792f;
  --sand-500:       #c08f3d;
  --sand-200:       #ecd9b7;
  --sand-100:       #f6ecdb;

  --focus:          #17679d;

  /* type ------------------------------------------------------------------ */
  --font-display:   "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:      "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display:     clamp(2.9rem, 1.55rem + 5.4vw, 5.75rem);
  --fs-h2:          clamp(2rem, 1.32rem + 2.7vw, 3.5rem);
  --fs-h2-sm:       clamp(1.65rem, 1.25rem + 1.7vw, 2.6rem);
  --fs-h3:          clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --fs-lede:        clamp(1.03rem, .98rem + .3vw, 1.2rem);
  --fs-body:        1rem;
  --fs-sm:          .9375rem;
  --fs-xs:          .8125rem;
  --fs-2xs:         .6875rem;
  --fs-label:       .72rem;

  --lh-tight:       1.06;
  --lh-snug:        1.24;
  --lh-body:        1.72;

  --ls-label:       .16em;

  /* space ----------------------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem;

  --section-y:      clamp(3.25rem, 2.1rem + 4.6vw, 6rem);
  --gutter:         clamp(1.15rem, .55rem + 2.4vw, 3rem);

  /* geometry -------------------------------------------------------------- */
  --w-page:         1240px;
  --w-narrow:       840px;
  --w-wide:         1420px;

  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 34px;  --r-2xl: 44px;  --r-pill: 999px;

  /* elevation ------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(20, 35, 46, .05);
  --sh-sm: 0 2px 10px rgba(20, 35, 46, .05), 0 1px 2px rgba(20, 35, 46, .04);
  --sh-md: 0 14px 34px -18px rgba(20, 35, 46, .22), 0 3px 10px -4px rgba(20, 35, 46, .06);
  --sh-lg: 0 34px 70px -34px rgba(52, 42, 26, .3), 0 8px 22px -14px rgba(20, 35, 46, .14);
  --sh-xl: 0 60px 110px -50px rgba(52, 42, 26, .4);

  /* motion ---------------------------------------------------------------- */
  --e-out:   cubic-bezier(.22, .61, .36, 1);
  --e-soft:  cubic-bezier(.33, 1, .68, 1);
  --e-pill:  cubic-bezier(.22, 1, .36, 1);   /* the bar's contract/expand */
  --t-fast:  .18s;
  --t-mid:   .32s;
  --t-slow:  .7s;

  --header-h: 58px;   /* bar height */
  --header-float: clamp(10px, 1.4vw, 18px);   /* floating gap from top edge */
  --header-inset-scrolled: clamp(14px, 3vw, 24px);
  /* the width the bar contracts to once the page scrolls */
  --w-bar-pill: 1180px;
  /* the bar's inner gutter; also the left edge the hero copy lines up on */
  --nav-pad: clamp(1rem, 2.6vw, 2.5rem);
  --nav-lift: 0 16px 40px -12px rgba(20, 35, 46, .2), 0 2px 8px -2px rgba(20, 35, 46, .06);
  --nav-lift-scrolled: 0 22px 50px -14px rgba(20, 35, 46, .26), 0 4px 12px -3px rgba(20, 35, 46, .1);
}

/* -------------------------------------------------------------- 2. RESET/BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--header-float) + 24px);
}

/* Lenis smooth scroll — the library's own stylesheet (v1.3.8), inlined rather
   than loaded as a second request, plus the scroll-behavior override below.
   All of it is scoped to .lenis, which Lenis stamps on <html> when it starts,
   so a reduced-motion visitor — or a page where the script failed to load —
   keeps the native `scroll-behavior: smooth` above and is unaffected. */
html.lenis,
html.lenis body { height: auto; }
/* Lenis 1.x never touches scroll-behavior itself, and native smooth scrolling
   fights its per-frame positioning, which makes anchor jumps stutter. Keyed on
   .lenis, not .lenis-smooth: the latter is only present *during* a scroll. */
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
address { font-style: normal; }
cite { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

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

::selection { background: var(--brand-100); color: var(--brand-900); }

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

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: var(--brand-700); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600;
  transition: transform var(--t-mid) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------- PRELOADER */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--brand-900);
  background:
    radial-gradient(58% 52% at 50% 40%, rgba(26, 128, 192, .12), transparent 72%),
    linear-gradient(186deg, #e8f1fb 0%, #f1f6fc 40%, #faf7f0 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              visibility .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1),
              filter .7s cubic-bezier(.16, 1, .3, 1);
}
/* faint grain, matching the article hero band */
.preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.03);
  filter: blur(6px);
}
.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 2rem;
  text-align: center;
}

/* ---- the smile arch ----
   Crooked teeth land along the arch, straighten together, then the archwire
   threads through. The animation lives inside the SVG so one 4KB cached file
   serves every page. */
.preloader__mark {
  width: clamp(158px, 22vw, 210px);
  height: auto;
}

/* the wordmark is wiped in left-to-right by a soft gradient mask, blur to crisp */
.preloader__logo {
  position: relative;
  width: clamp(190px, 30vw, 300px);
  height: auto;
  -webkit-mask-image: linear-gradient(100deg, #000 0 40%, transparent 62%);
          mask-image: linear-gradient(100deg, #000 0 40%, transparent 62%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: preloaderReveal 1.4s cubic-bezier(.22, 1, .36, 1) .35s both;
}
@keyframes preloaderReveal {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(8px);
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
  35% { opacity: 1; }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
}

/* generic inline icon (stroked) */
.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg[aria-hidden="true"]:not(.quote__stars svg):not(.benefit__icon svg):not(.consultation-modal__stars svg):not(.footer__stars svg):not(.proof-strip__stars svg):not(.proof-pill__stars svg) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit__icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.quote__stars svg,
.proof-pill__stars svg { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ 3. TYPOGRAPHY */
.eyebrow {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-700);
  line-height: 1.4;
}
.eyebrow--light { color: var(--brand-200); }
.eyebrow--dot { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow--dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sand-500); flex: none;
  box-shadow: 0 0 0 4px rgba(192, 143, 61, .16);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.section__title em { font-style: italic; color: var(--brand-700); }

/* Some section titles carry the old site's long, keyword-heavy headings. At the
   full display size those ran to three lines and swamped the content beneath,
   so titles inside the narrow reading column step down a size. */
.shell--narrow .section__title {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.4rem);
}

.section__lede {
  margin-top: var(--s-5);
  max-width: 58ch;
  font-size: var(--fs-lede);
  color: var(--ink-2);
}

/* `68ch` measured ~95 characters a line in this typeface — far past a
   comfortable measure, which is why interior body copy read as small text
   stranded in a wide column. A rem measure at the blog's body size lands at
   roughly 70 characters, matching the article pages. */
.prose {
  max-width: 38rem;
  font-size: 1.05rem;
  line-height: 1.72;
}
/* blog articles set their own measure via --article-measure on the grid column;
   re-capping here would narrow the column and leave a ragged right edge */
.article .prose { max-width: none; font-size: 1.08rem; line-height: 1.75; }
.prose p { margin-top: var(--s-5); color: var(--ink-2); }
.prose p:first-child { margin-top: 0; }

/* Subheadings inside body copy. Without these, `h1,h2,h3,h4 { margin: 0 }` from
   the reset leaves every prose heading at body size and welded to the paragraph
   below it — the blog got a treatment via `.article .prose`, the 21 interior
   pages built on bare `.prose` never did. Same scale, sitewide. */
.prose > h3,
.prose > h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 1.9em 0 .3em;
}
.prose > h3 { font-size: var(--fs-h3); }
.prose > h4 { font-size: 1.1rem; }
.prose > :first-child { margin-top: 0; }

/* Inline links in body copy: the reset strips colour and underline from every
   `a`, so unclassed prose links were invisible. Buttons keep their own styles. */
.prose a:not([class]) {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--e-out);
}
.prose a:not([class]):hover { color: var(--brand-800); }
.prose strong { color: var(--ink); font-weight: 600; }

/* The reset also clears list markers globally; restore them for unstyled lists
   in body copy without touching the component lists that opt out via a class. */
.prose ul:not([class]),
.prose ol:not([class]) {
  margin-top: var(--s-5);
  padding-left: 1.35rem;
  display: grid;
  gap: var(--s-2);
  color: var(--ink-2);
}
.prose ul:not([class]) { list-style: disc; }
.prose ol:not([class]) { list-style: decimal; }
.prose ul:not([class]) li::marker { color: var(--sand-500); }
.prose ol:not([class]) li::marker { color: var(--sand-600); font-weight: 600; }

/* Interior pages stack these blocks as plain siblings inside a `.shell`, and
   `.prose` carries no top margin of its own, so a tick list, table or button
   row butted straight into the paragraph after it. The blog already had this
   flow rule, scoped to `.article`; interior pages never got one. */
.ticks + .prose,        .prose + .ticks,
.table-scroll + .prose, .prose + .table-scroll,
.cta-row + .prose,      .prose + .cta-row,
.media-grid + .prose,   .prose + .media-grid,
.section__title + .prose { margin-top: var(--s-6); }

.pullquote {
  position: relative;
  margin: var(--s-7) 0;
  padding: var(--s-5) 0 var(--s-5) var(--s-6);
  border-left: 2px solid var(--sand-500);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.36;
  color: var(--ink);
}

/* Inline restored quote inside prose — smaller than a display pullquote */
.pullquote--inline p { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); }
.pullquote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-sans, inherit);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 600;
  color: var(--ink-2);
}

/* Pros / Cons group headings restored above their lists */
.proscons__heading {
  margin: var(--s-6) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg, 1.25rem);
  font-weight: 600;
  color: var(--ink);
}
.proscons__heading:first-of-type { margin-top: var(--s-5); }

.ticks { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.ticks li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--ink-2);
}
/* filled disc + a real stroked check icon, masked so the tick takes its colour
   from the rule rather than being drawn out of two rotated borders */
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: linear-gradient(145deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 0 0 3px var(--brand-50), 0 2px 5px -2px rgba(16, 55, 92, .5);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: .34rem; top: calc(.42em + .34rem);
  width: .62rem; height: .62rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-700);
  transition: gap var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.link-arrow svg { transition: transform var(--t-mid) var(--e-out); }
.link-arrow:hover { gap: .8rem; color: var(--brand-800); }

/* ---------------------------------------------------------------- 4. LAYOUT */
.shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--w-narrow); }

/* Text sections built on the narrow shell were left-aligned inside an 840px
   box, so the reading column sat noticeably left of the page centre with a
   wide void on its right. Centre the flow on its own measure; media keeps the
   full shell width so photographs read a touch wider than the prose. */
.shell--narrow > .section__head,
.shell--narrow > .prose,
.shell--narrow > .ticks,
.shell--narrow > .cta-row { max-width: 38rem; margin-inline: auto; }
.shell--wide   { max-width: var(--w-wide); }

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

.section__head { max-width: 720px; margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }
.section__head--center { max-width: 920px; margin-inline: auto; text-align: center; }
.section__head--center .section__lede { margin-inline: auto; }
.section__head--split {
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  align-items: end;
}
@media (min-width: 900px) {
  .section__head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-9); }
  .section__head--split .section__lede { margin-top: 0; }
}

.cards { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 820px)  { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -------------------------------------------------------------- 5. CONTROLS */
/* Two variants, no borders. Every button is either a primary (solid gold, the
   one action a section is asking for) or a secondary (soft sand, everything
   else). Both are filled, because with the border gone a fill is the only
   thing left to give a control an edge — an outline-less transparent button
   reads as a plain link. Size sits on separate --sm/--lg/--block modifiers so
   it never gets tangled up with identity. */
.btn {
  --btn-bg: var(--sun-400);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-mid) var(--e-out),
              background-color var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out);
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(255,255,255,.5), rgba(255,255,255,0) 58%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform var(--t-mid) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:hover .btn__arrow--down { transform: translateY(2px); }

/* PRIMARY — the logo's light yellow with charcoal type (11.5:1 contrast).
   The lift comes from a warm shadow now that the amber edge is gone. */
.btn--primary {
  --btn-bg: var(--sun-400);
  --btn-fg: var(--ink);
  box-shadow: 0 12px 26px -16px rgba(184, 138, 31, .7);
}
.btn--primary:hover {
  background: var(--sun-500);
  box-shadow: 0 18px 34px -18px rgba(184, 138, 31, .85);
}

/* SECONDARY — same warm family, a step quieter. Sand rather than white:
   sections here sit on white and ivory, so a white chip would need a border
   to be seen at all, which is the thing being removed. */
.btn--secondary {
  --btn-bg: var(--sand-100);
  --btn-fg: var(--ink);
  box-shadow: 0 10px 22px -18px rgba(20, 35, 46, .5);
}
.btn--secondary:hover {
  background: var(--sand-200);
  box-shadow: 0 16px 30px -20px rgba(20, 35, 46, .6);
}

.btn--sm  { padding: .62rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg  { padding: 1rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s-7); justify-content: center; }
.chips a {
  display: inline-flex; align-items: center;
  padding: .5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.chips a:hover { border-color: var(--brand-200); color: var(--brand-800); background: var(--brand-50); transform: translateY(-1px); }

/* --------------------------------------------------------- 6. HEADER & NAV */
/* Modelled on apple.com's global bar. Three things define that nav and all
   three are reproduced here:
     1. the bar is a slim translucent strip of CONSTANT height — it never
        shrinks, morphs or re-lays-out on scroll;
     2. a flyout does not float over the page, it GROWS OUT OF the bar: a
        curtain of the same glass below the strip animates its height while
        the panel content staggers in on top of it;
     3. everything behind is dimmed and blurred by a full-page scrim, and the
        panel is dismissed by Esc, an outside click, or the same top-level item.
   Desktop panels open on click only, as they do on apple.com. */

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--header-float) var(--header-float) 0;
  pointer-events: none;
  transition: padding .5s var(--e-pill), transform .3s var(--e-out);

  --flyout-h: 0px;                       /* set by JS from the open panel */
  --nav-glass: rgba(255, 255, 255, .92);
  --nav-blur: saturate(180%) blur(20px);
  --nav-hairline: rgba(20, 35, 46, .1);
  --e-nav: cubic-bezier(.32, .08, .24, 1);   /* Apple's flyout curve */
}
.header > * {
  pointer-events: auto;
}

.header__bar {
  position: relative;
  background: var(--nav-glass);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border: 1px solid var(--nav-hairline);
  border-radius: var(--r-xl, 24px);
  box-shadow: var(--nav-lift);
  /* The bar always fills whatever the header gives it. The contraction is the
     header's padding closing in, not the bar resizing itself: one animated
     layout property instead of two racing each other, and no percentage-to-
     length interpolation for the engine to resolve every frame. */
  max-width: 100%;
  margin-inline: auto;
  transition: border-radius .5s var(--e-pill),
              background .35s var(--e-out), border-color .35s var(--e-out),
              box-shadow .4s var(--e-out);
}

/* ---- the bar's own scroll behaviour ----
   At the top of a page the bar is edge to edge and invisible: the page runs
   under it and only the logo, the links and the button are on screen. Once
   the page scrolls it contracts into a centred pill and takes on its glass.
   Opening a menu at the top keeps the bar full width — it only lights up —
   so the panel that grows out of it is full-bleed too. */
.header:not(.is-scrolled) { padding: 0; }
.header:not(.is-scrolled) .header__bar {
  border-radius: 0;
  border-inline-color: transparent;
}
.header:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .header__bar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.header:not(.is-scrolled) .header__inner { padding-inline: var(--nav-pad); }
/* the inset that turns the full-bleed bar into the centred pill */
.header.is-scrolled {
  padding-top: calc(var(--header-float) * 0.75);
  padding-inline: max(var(--header-inset-scrolled), calc((100% - var(--w-bar-pill)) / 2));
}
.header__inner { transition: height .5s var(--e-pill), padding .5s var(--e-pill); }
.header__logo { transition: width .5s var(--e-pill); }
@media (min-width: 1181px) {
  .header.is-scrolled { --header-h: 56px; }
  .header.is-scrolled .header__bar {
    /* the contracted pill — the width comes from the header's inset above */
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--nav-lift-scrolled);
    border-color: rgba(20, 35, 46, .14);
  }
}

/* Over-banner variant: floating frosted glass pill on top of banner */
.header--over-banner .header__bar {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px -10px rgba(16, 55, 92, .14);
}
.header--over-banner .header__logo--dark { display: block; }
.header--over-banner .header__logo--light { display: none; }
.header--over-banner .nav__link {
  color: var(--ink-2);
  text-shadow: none;
}
.header--over-banner .nav__link:hover,
.header--over-banner .nav__link[aria-current] {
  color: var(--ink);
  text-shadow: none;
}
.header--over-banner .nav__chev {
  opacity: .45;
  color: inherit;
  filter: none;
}
.header--over-banner .burger span {
  background-color: var(--ink);
  box-shadow: none;
}

/* When scrolled, flyout open, or mobile sheet open: smooth transition to frosted bar */
.header--over-banner.is-scrolled .header__bar,
.header--over-banner.is-flyout-open .header__bar,
.header--over-banner.is-nav-open .header__bar {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-color: var(--nav-hairline);
  box-shadow: var(--nav-lift-scrolled);
}
.header--over-banner.is-scrolled .header__logo--dark,
.header--over-banner.is-flyout-open .header__logo--dark,
.header--over-banner.is-nav-open .header__logo--dark {
  display: block;
}
.header--over-banner.is-scrolled .header__logo--light,
.header--over-banner.is-flyout-open .header__logo--light,
.header--over-banner.is-nav-open .header__logo--light {
  display: none;
}
.header--over-banner.is-scrolled .nav__link,
.header--over-banner.is-flyout-open .nav__link,
.header--over-banner.is-nav-open .nav__link {
  color: var(--ink-2);
  text-shadow: none;
}
.header--over-banner.is-scrolled .nav__link:hover,
.header--over-banner.is-scrolled .nav__link[aria-current],
.header--over-banner.is-flyout-open .nav__link:hover,
.header--over-banner.is-flyout-open .nav__link[aria-current],
.header--over-banner.is-nav-open .nav__link:hover {
  color: var(--ink);
  text-shadow: none;
}

/* A dark banner slide underneath. The slider publishes the active slide's tone
   here, so the bar flips to the light wordmark and white links for as long as
   that slide is showing — but only while the bar is still transparent; once it
   frosts on scroll or opens a flyout, the rules above take it back to ink. */
.header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .header__logo--dark { display: none; }
.header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .header__logo--light { display: block; }
.header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .nav__link {
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 12px rgba(9, 18, 26, .5);
}
.header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .nav__link:hover,
.header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .nav__link[aria-current] {
  color: var(--ink-inv);
}
.header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .burger span {
  background-color: var(--ink-inv);
  box-shadow: 0 1px 8px rgba(9, 18, 26, .45);
}
.header--over-banner.is-scrolled .nav__chev,
.header--over-banner.is-flyout-open .nav__chev,
.header--over-banner.is-nav-open .nav__chev {
  color: inherit;
  opacity: .45;
  filter: none;
}
.header--over-banner.is-scrolled .burger span,
.header--over-banner.is-flyout-open .burger span,
.header--over-banner.is-nav-open .burger span {
  background-color: var(--ink);
  box-shadow: none;
}

/* Full-width container-fluid navbar bar */
.header__inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--header-h);
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: clamp(1rem, 2.2vw, 1rem);
}

.header__brand { flex: none; display: block; }
.header__logo {
  display: block;
  width: clamp(130px, 11vw, 156px);
  height: auto;
}
.header__logo--light { display: none; }

.header__actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.header__cta {
  padding: .5rem 1.05rem;
  font-size: .8125rem;
  border-radius: var(--r-pill);
}

/* Consultation pop-up ----------------------------------------------------- */
/* A split panel: a deep brand rail carrying the reasons to book, and the form
   itself on paper beside it. Under 860px the rail folds into a slim header. */
body.is-modal-open { overflow: hidden; }

.consultation-modal {
  position: fixed; z-index: 1000; inset: 0;
  display: grid; place-items: center;
  padding: clamp(.75rem, 2.5vw, 2rem);
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--e-out), visibility .3s;
}
.consultation-modal.is-open { visibility: visible; opacity: 1; }

.consultation-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 24, 35, .58);
}
/* The blur only exists while the dialog is up. Declared unconditionally it is
   a full-viewport compositing layer that every page carries and re-samples on
   every scrolled frame, for a backdrop nobody can see. */
.consultation-modal.is-open .consultation-modal__backdrop {
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

.consultation-modal__panel {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  width: min(100%, 1040px);
  max-height: min(92vh, 820px);
  overflow: hidden;                 /* the columns scroll, not the panel */
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl), 0 2px 8px rgba(4, 17, 27, .18);
  transform: translateY(18px) scale(.985);
  transition: transform .34s var(--e-out);
}
.consultation-modal.is-open .consultation-modal__panel { transform: none; }
/* the warm hairline the buttons and the logo mark share */
.consultation-modal__panel::before {
  content: ""; position: absolute; z-index: 3; inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--sun-400) 0%, var(--sun-600) 38%, var(--brand-500) 100%);
}

/* -- the brand rail -- */
.consultation-modal__aside {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.9rem, 1.2rem + 1.7vw, 2.75rem);
  gap: 0;
  color: var(--ink-inv);
  /* a practice photograph carries the colour; the navy sits on top of it at
     the weight the copy needs to stay legible. */
  background-image:
    radial-gradient(115% 80% at 6% 100%, rgba(243, 218, 103, .2) 0%, rgba(243, 218, 103, 0) 60%),
    radial-gradient(85% 65% at 100% 0%, rgba(24, 154, 214, .34) 0%, rgba(24, 154, 214, 0) 64%),
    linear-gradient(168deg, rgba(20, 77, 124, .9) 0%, rgba(16, 55, 92, .95) 52%, rgba(9, 33, 55, .97) 100%),
    url("../assets/hero/home-family-kitchen.avif");
  background-size: cover;
  background-position: center;
}
/* a soft brand arc, the same gesture the hero badge makes */
.consultation-modal__aside::after {
  content: ""; position: absolute; right: -28%; bottom: -34%; z-index: 0;
  width: 74%; aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}
.consultation-modal__aside > * { position: relative; z-index: 1; }
.consultation-modal__logo { width: 148px; height: auto; margin-bottom: 1.35rem; }

.consultation-modal__rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.35rem;
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .8);
}
.consultation-modal__stars { display: inline-flex; gap: 2px; color: var(--sun-400); }
.consultation-modal__stars svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

.consultation-modal__eyebrow {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sun-300);
}
.consultation-modal__title {
  margin-top: .85rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.consultation-modal__lede {
  margin-top: .9rem;
  font-size: var(--fs-sm); line-height: 1.62;
  color: rgba(255, 255, 255, .76);
}
.consultation-modal__points {
  margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .7rem;
  list-style: none;
}
.consultation-modal__points li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem;
  font-size: var(--fs-xs); line-height: 1.45;
  color: rgba(255, 255, 255, .9);
}
.consultation-modal__points svg { width: 15px; height: 15px; margin-top: .12em; color: var(--sun-400); }

.consultation-modal__quote {
  position: relative;
  margin: auto 0 0; padding: 1.05rem 1.15rem 1.05rem 2.2rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
}
/* like the backdrop: only a layer while the dialog is actually up */
.consultation-modal.is-open .consultation-modal__quote {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.consultation-modal__quote::before {
  content: "\201C";
  position: absolute; left: .6rem; top: .1rem;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--sun-400); opacity: .75;
}
.consultation-modal__quote blockquote {
  margin: 0;
  font-size: var(--fs-xs); line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.consultation-modal__quote figcaption {
  margin-top: .5rem;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.consultation-modal__calls {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem;
  margin-top: 1.15rem; padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.consultation-modal__calls a {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  color: var(--ink-inv); text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.consultation-modal__calls a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); }
.consultation-modal__calls a > svg { width: 15px; height: 15px; flex: none; color: var(--sun-400); }
.consultation-modal__calls span { display: grid; gap: 1px; min-width: 0; }
.consultation-modal__calls em {
  font-style: normal;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.consultation-modal__calls strong { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* -- the form side -- */
.consultation-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.6rem, 1rem + 1.8vw, 2.6rem);
}
.consultation-modal__body-head { margin-bottom: 1.35rem; }
.consultation-modal__body-head h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; line-height: 1.15; color: var(--ink);
}
.consultation-modal__body-head p { margin-top: .3rem; font-size: var(--fs-xs); color: var(--ink-3); }

.consultation-modal__form { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.consultation-modal__form .form__grid { gap: 1.05rem var(--s-4); }
.consultation-modal__form .radios { gap: .5rem; }
.consultation-modal__form .form__foot {
  display: grid; gap: .75rem; justify-items: stretch;
  margin-top: var(--s-5);
}
.consultation-modal__form .form__note { max-width: none; text-align: center; }

.consultation-modal__assurances {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.1rem;
  margin-top: 1.15rem; padding-top: 1.05rem;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}
.consultation-modal__assurances li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
}
.consultation-modal__assurances svg { width: 14px; height: 14px; color: var(--brand-500); }

.consultation-modal__close {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem;
  padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.consultation-modal__close svg { width: 17px; height: 17px; }
.consultation-modal__close:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: rotate(90deg); }
.consultation-modal__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .consultation-modal__panel { transform: none; transition: none; }
  .consultation-modal__close:hover { transform: none; }
}

/* one column: the rail keeps its voice but gives the form the room */
@media (max-width: 859px) {
  .consultation-modal__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 94vh;
    border-radius: var(--r-lg);
  }
  .consultation-modal__aside { padding: 1.5rem 1.35rem 1.4rem; }
  .consultation-modal__aside::after { display: none; }
  .consultation-modal__logo { width: 118px; margin-bottom: .9rem; }
  .consultation-modal__rating { margin-bottom: .9rem; }
  .consultation-modal__quote { display: none; }
  .consultation-modal__title { font-size: 1.6rem; }
  .consultation-modal__lede { display: none; }
  .consultation-modal__points {
    grid-auto-flow: column; grid-auto-columns: max-content;
    gap: 1rem; margin-top: 1.1rem;
    overflow-x: auto; scrollbar-width: none;
  }
  .consultation-modal__points::-webkit-scrollbar { display: none; }
  .consultation-modal__points li { white-space: nowrap; }
  .consultation-modal__calls { display: none; }
  .consultation-modal__body { padding: 1.35rem 1.1rem 1.6rem; }
  .consultation-modal__close { top: .7rem; right: .7rem; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
  .consultation-modal__close:hover { transform: none; }
}

/* the panels are cards of their own now, so the glass the old panels grew
   out of stays in the markup unused */
.nav__curtain { display: none; }

/* top-level bar links ------------------------------------------------------
   On desktop each link is a soft pill: a faint tint answers the pointer, the
   item whose panel is open keeps a brand-blue tint for as long as it is open,
   a small chevron marks the items that open a panel, and a sun dot under the
   label marks the section you are in. aria-current is set by main.js from the
   URL, since every page carries the same copied header. */
.nav { flex: 1 1 auto; min-width: 0; }
.nav__list {
  display: flex; align-items: center;
  justify-content: center;
  gap: 0;   /* each pill carries its own padding, which does the spacing */
  padding-inline: clamp(.25rem, 1.2vw, 2rem);
}
.nav__item { position: static; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem 0;
  background: none; border: 0;
  font-family: inherit;
  font-size: clamp(.8rem, .735rem + .18vw, .875rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--e-out), background-color .2s var(--e-out);
}
.nav__link:hover,
.nav__link[aria-current],
.nav__item.is-open > .nav__link { color: var(--ink); }

@media (min-width: 1181px) {
  .nav__link {
    padding: .5rem clamp(.45rem, 1.6vw - .95rem, .85rem);
    border-radius: var(--r-pill);
  }
  /* the scrolled pill is a fixed 1180px whatever the window, so it always
     has the least room of any desktop state */
  .header.is-scrolled .nav__link { padding-inline: .45rem; }
  .nav__link:focus-visible { outline-offset: 1px; }
  @media (hover: hover) {
    .nav__link:hover { background-color: rgba(20, 35, 46, .05); }
  }
  .nav__item.is-open > .nav__link {
    background-color: var(--brand-50);
    color: var(--brand-800);
  }

  .nav__toggle::after {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    margin-left: .1rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .45;
    transition: transform .3s var(--e-nav), opacity .2s var(--e-out);
  }
  .nav__item.is-open > .nav__toggle::after {
    transform: translateY(1px) rotate(-135deg);
    opacity: .85;
  }

  /* centred under the label, not under label + chevron */
  .nav__link[aria-current]::before {
    content: "";
    position: absolute; left: 50%; bottom: 1px;
    width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%;
    background: var(--sun-600);
  }
  .nav__toggle[aria-current]::before { margin-left: calc(-2px - .35rem); }

  /* over a dark slide the tint turns to frost and the dot to bright sun */
  .header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .nav__link:hover {
    background-color: rgba(255, 255, 255, .14);
  }
  .header--over-banner.is-banner-dark:not(.is-scrolled):not(.is-flyout-open):not(.is-nav-open) .nav__link[aria-current]::before {
    background: var(--sun-400);
  }
}

.nav__chev {
  display: none !important;
}

/* dropdown panels ----------------------------------------------------------
   Each panel is a flat white card dropped just under the bar: a hairline
   border, a brand-blue stripe down its left edge and a soft shadow, fading up
   a few pixels as it opens. Every panel hangs from its own item; one that
   would run off the right edge of the window is slid back left just far
   enough by main.js when it opens. */
.mega__inner { display: grid; }

@media (min-width: 1181px) {
  /* items span the bar's full height, so "under the item" is "under the bar" */
  .nav { align-self: stretch; }
  .nav__list { height: 100%; align-items: stretch; }
  .nav__item { position: relative; display: flex; align-items: center; }

  .mega {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 2;
    width: max-content; min-width: 17rem;
    max-width: calc(100vw - 32px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--r-sm);
    box-shadow: 0 22px 44px -22px rgba(20, 35, 46, .32), 0 4px 12px -6px rgba(20, 35, 46, .08);
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s var(--e-out), transform .22s var(--e-out), visibility .18s;
  }
  /* a bridge over the gap, so the pointer can travel from link to card */
  .mega::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 100%;
    height: 10px;
  }
  .nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; }

  .mega__inner {
    align-items: start;
    gap: 1.25rem clamp(1.75rem, 2.6vw, 2.75rem);
    padding: 1.6rem 1.9rem 1.75rem 1.6rem;
    max-height: var(--panel-max-height, calc(100dvh - 100px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mega__inner--split { grid-template-columns: minmax(0, 16rem) minmax(0, 16rem) minmax(0, 15rem); }
  .mega__inner--wide  { grid-template-columns: repeat(3, minmax(0, 15rem)); }
}
.mega__col { min-width: 0; }

/* entries: plain lines led by a small chevron that steps right when pointed
   at; the page you are on is set in brand blue behind a sun chevron */
.mega__label {
  margin-bottom: .55rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-3);
}
.mega__col .mega__label + .mega__list + .mega__label { margin-top: var(--s-5); }

.mega__list { display: grid; gap: .1rem; }
.mega__list a {
  display: grid; grid-template-columns: .85rem minmax(0, 1fr);
  column-gap: .3rem;
  padding: .38rem .25rem;
  border-radius: var(--r-xs);
}
.mega__list a::before {
  content: "\203A";
  grid-row: 1 / span 2;
  font-size: 1.05rem; font-weight: 700; line-height: 1.25;
  color: var(--brand-500);
  transition: transform .15s var(--e-out), color .15s var(--e-out);
}
.mega__list span {
  display: block;
  font-size: .9375rem; font-weight: 500; line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
  transition: color .15s var(--e-out);
}
.mega__list em {
  grid-column: 2;
  display: block; margin-top: .1rem;
  font-style: normal; font-size: var(--fs-xs); line-height: 1.4;
  color: var(--ink-3);
}
/* hover only where there is one: a tap on a phone would otherwise leave the
   entry lit after the finger lifts */
@media (hover: hover) {
  .mega__list a:hover span { color: var(--brand-700); }
  .mega__list a:hover::before { transform: translateX(3px); color: var(--brand-700); }
}
.mega__list a:focus-visible { outline-offset: 0; }
.mega__list a[aria-current] span { color: var(--brand-800); font-weight: 600; }
.mega__list a[aria-current]::before { color: var(--sun-600); }
.mega__list--tight a { padding-block: .3rem; }

/* the card takes the height of the columns beside it rather than its photo's:
   a portrait would otherwise stretch the whole panel to its own height */
.mega__feature {
  position: relative; display: block;
  align-self: stretch;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--ink);
  min-height: 210px;
}
.mega__feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .82;
  transition: transform var(--t-slow) var(--e-soft), opacity var(--t-mid) var(--e-out);
}
.mega__feature:hover img { transform: scale(1.05); opacity: .95; }
.mega__feature-body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(9, 33, 40, .92), rgba(9, 33, 40, 0));
  color: #fff;
}
.mega__feature-body em { display: block; font-style: normal; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brand-200); }
.mega__feature-body strong { display: block; margin-top: .35rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }

/* burger ------------------------------------------------------------------- */
.burger {
  display: none;
  width: 40px; height: 40px; margin-right: -10px;
  padding: 0;
  background: none; border: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.burger span {
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--e-nav), opacity .2s var(--e-out);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* scrim — dims and blurs the page behind any open menu, desktop included --- */
/* A light wash rather than a dim: the panel is paper, and the page behind it
   should read as set back, not switched off. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(252, 250, 246, .62);
  opacity: 0;
  transition: opacity .3s var(--e-out);
}
.nav-scrim.is-visible {
  -webkit-backdrop-filter: blur(2px) saturate(.9);
  backdrop-filter: blur(2px) saturate(.9);
}
.nav-scrim.is-visible { opacity: 1; }

/* --------------------------------------------------------- mobile overlay --
   Apple drops the links and opens a full-height sheet out of the same bar,
   with the top-level rows staggering in and each one expanding in place. */
@media (max-width: 1180px) {
  :root {
    --header-h: 52px;
    --header-float: 10px;
  }

  .header__cta { display: none; }
  .burger { display: inline-flex; }
  .nav__curtain { display: none; }
  .header.is-flyout-open .header__bar { border-bottom-color: var(--nav-hairline); }
  .header.is-nav-open .header__bar {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }

  .nav {
    position: absolute; top: 100%; left: -1px; right: -1px; z-index: 1;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    background: rgba(255, 255, 255, .985);
    -webkit-backdrop-filter: var(--nav-blur);
    backdrop-filter: var(--nav-blur);
    border: 1px solid var(--nav-hairline);
    border-top: 0;
    border-radius: 0 0 var(--r-xl, 24px) var(--r-xl, 24px);
    box-shadow: var(--nav-lift-scrolled);
    transition: height .42s var(--e-nav), visibility .42s;
  }
  .nav.is-open {
    height: calc(100dvh - var(--header-h) - var(--header-float) * 3);
    visibility: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__list { display: block; padding: .35rem var(--nav-pad) 0; }
  .nav__item {
    position: relative;
    border-bottom: 1px solid var(--line-soft);
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s var(--e-out), transform .4s var(--e-nav);
  }
  .nav.is-open .nav__item { opacity: 1; transform: none; }
  .nav.is-open .nav__item:nth-child(1) { transition-delay: .08s; }
  .nav.is-open .nav__item:nth-child(2) { transition-delay: .12s; }
  .nav.is-open .nav__item:nth-child(3) { transition-delay: .16s; }
  .nav.is-open .nav__item:nth-child(4) { transition-delay: .20s; }
  .nav.is-open .nav__item:nth-child(5) { transition-delay: .24s; }
  .nav.is-open .nav__item:nth-child(6) { transition-delay: .28s; }
  .nav.is-open .nav__item:nth-child(7) { transition-delay: .32s; }

  .nav__link {
    width: 100%; justify-content: space-between;
    padding: 1.05rem .1rem;
    font-size: 1.0625rem;
    color: var(--ink);
    white-space: normal;
    text-align: left;
  }
  .nav__chev { opacity: .5; }

  /* a parent link carries a chevron so it reads as an expandable row */
  .nav__toggle::after {
    content: "";
    flex: none;
    width: 8px; height: 8px;
    margin-right: .35rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
    transition: transform .3s var(--e-nav);
  }
  .nav__item.is-open > .nav__toggle::after { transform: rotate(-135deg); }

  /* the section you are in reads in brand blue; an open row already says so
     with its chevron and its list, so it keeps the ink */
  .nav .nav__link[aria-current] { color: var(--brand-800); font-weight: 600; }

  /* the panel becomes an in-place accordion again */
  .mega {
    position: static;
    height: auto;
    overflow: hidden;
    opacity: 1; visibility: hidden;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .34s var(--e-nav), visibility .34s;
  }
  .nav__item.is-open > .mega { grid-template-rows: 1fr; visibility: visible; }
  .mega__inner {
    min-height: 0; overflow: hidden;
    grid-template-columns: 1fr !important;
    gap: var(--s-4);
    padding: 0;                 /* padding here would keep the 0fr row open */
  }
  .mega__col, .mega__feature { opacity: 1; transform: none; transition: none; }
  .mega__col { padding-bottom: var(--s-4); }
  .mega__feature { display: none; }
  .mega__label { margin-bottom: .35rem; padding-bottom: .35rem; }
  .mega__list a { min-height: 44px; padding-block: .65rem; }
  .mega__list span { font-size: .9375rem; }

  /* the foot holds the consultation button only — the phone/email list that
     used to sit under it was removed, so the deep bottom padding and the
     button's trailing margin went with it */
  .nav__drawer-foot {
    display: grid;
    margin: var(--s-6) var(--nav-pad) 0;
    padding: var(--s-5) 0 calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-soft);
  }
}

@media (min-width: 1181px) {
  .nav__drawer-foot { display: none; }
  /* a dropdown is a card on the page, not a modal: the page behind stays as it is */
  .nav-scrim { display: none; }
}


/* ------------------------------------------------------------------ 8. HERO */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  /* every slide is a light photograph carrying dark ink copy, so the base
     colour has to be light too — a dark base painted for the split second
     before the hero image decodes, leaving the headline unreadable. */
  background-color: #e8f1fb;
}

/* the banner photograph, cropped to whatever the viewport gives it */
.hero__still {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero__still picture {
  display: contents;
}
.hero__still img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Biased left: the copy sits on the near-white side of the frame, and a
     centred crop would slide the subject's dark hair under it. 22% suits a
     wide photograph whose subject is right of centre; a slide overrides it
     with --still-x when its own framing wants something else. */
  object-position: var(--still-x, 22%) center;
  filter: saturate(1.06) contrast(1.03);
}
/* A phone crops a landscape photograph hard enough that a left-biased window
   can land entirely on the empty side — a banner with no picture in it. A slide
   whose subject sits far from the copy opts out with data-crop="subject": on a
   phone its crop pulls back toward the subject (tune with --still-x-sm) and the
   wash turns from a side-lit gradient into a veil over the whole frame, since
   the copy no longer has an empty corner to sit in. Slides framed loosely
   enough to survive the default crop are left alone — the veil would only
   wash out a picture that was already readable. */
@media (max-width: 768px) {
  .hero__still img,
  .hero__slide[data-crop="subject"] .hero__still img {
    object-position: center center;
  }
  .hero__slide .hero__scrim,
  .hero__slide:not([data-tone="dark"]) .hero__scrim,
  .hero__slide[data-crop="subject"]:not([data-tone="dark"]) .hero__scrim {
    background: linear-gradient(180deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .82) 44%,
                                        rgba(255, 255, 255, .66) 64%, rgba(255, 255, 255, .86) 100%) !important;
  }
  .hero__slide[data-tone="dark"] .hero__scrim,
  .hero__slide[data-crop="subject"][data-tone="dark"] .hero__scrim {
    background: linear-gradient(180deg, rgba(9, 18, 26, .86) 0%, rgba(9, 18, 26, .68) 44%,
                                        rgba(9, 18, 26, .5) 64%, rgba(9, 18, 26, .78) 100%) !important;
  }
}

/* banner copy ---------------------------------------------------------------
   The standing block over the photograph. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  /* No darkening anywhere: this half of the photograph is already a near-white
     window (luminance ~247), so the copy is set in ink instead of white. The
     wash is white and invisible against that — it exists only so a darker
     banner swapped in later cannot strand the type. */
  background: linear-gradient(100deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .26) 38%, rgba(255, 255, 255, 0) 62%);
}

.hero__overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + var(--header-float) + 2rem) 8rem;
}
/* The copy lines up with the wordmark in the bar rather than with the page
   container, so the headline and the logo share a left edge. */
.hero__content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc(var(--header-float) + var(--nav-pad)));
  color: var(--ink);
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 var(--s-4);
  padding: .38rem .95rem;
  border: 1px solid rgba(20, 35, 46, .18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-2);
}
/* only the slide actually on screen carries the glass — the other three would
   be compositing layers for a badge sitting at opacity 0 */
.hero__slide.is-active .hero__eyebrow {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero__headline {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ink);
}

.hero__sub {
  max-width: 46ch;
  margin: var(--s-5) 0 0;
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--ink-2);
}

.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-7);
}
/* the sand secondary already separates from the near-white banner, so the
   hero needs no special case for it any more */


/* rotating banner -----------------------------------------------------------
   Every slide is the full hero box, stacked on the same spot; turning the
   banner is a crossfade rather than a slide, so nothing about the layout —
   the header over it, the foot under it — moves as it turns. The foot is
   outside the stage: the controls and the practice's facts stand still while
   the photographs change behind them. */
.hero--banner { --banner-interval: 7000ms; }

.hero__stage { position: absolute; inset: 0; z-index: 0; }

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  /* the visibility flip is deferred to the end of the fade going out, and
     immediate coming in, so a slide on its way out cannot catch a click */
  transition: opacity var(--t-slow) var(--e-soft), visibility 0s linear var(--t-slow);
}
.hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-slow) var(--e-soft), visibility 0s;
}

/* a slow settle on the photograph, run once per turn rather than looped */
@keyframes banner-drift {
  from { transform: scale(1.075); }
  to   { transform: scale(1); }
}
.hero__slide.is-active .hero__still img {
  animation: banner-drift 9s var(--e-soft) forwards;
}

/* the copy arrives a beat behind the photograph, line by line */
@keyframes banner-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero--banner .hero__eyebrow,
.hero--banner .hero__headline,
.hero--banner .hero__sub,
.hero--banner .hero__cta { opacity: 0; }
.hero__slide.is-active .hero__eyebrow  { animation: banner-rise .62s var(--e-out) .10s both; }
.hero__slide.is-active .hero__headline { animation: banner-rise .62s var(--e-out) .18s both; }
.hero__slide.is-active .hero__sub      { animation: banner-rise .62s var(--e-out) .28s both; }
.hero__slide.is-active .hero__cta      { animation: banner-rise .62s var(--e-out) .38s both; }

/* the non-headline slides carry the same weight as the h1 on slide 1 */
p.hero__headline {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ink);
}

/* dark-toned slides ---------------------------------------------------------
   Set data-tone="dark" on a slide whose photograph is dark where the copy
   sits. The wash turns to ink, the copy to white, and JS carries the same
   tone up to the header so the nav does not strand on it. */
.hero__slide[data-tone="dark"] .hero__scrim {
  background: linear-gradient(100deg, rgba(9, 18, 26, .78) 0%, rgba(9, 18, 26, .52) 40%, rgba(9, 18, 26, .08) 72%);
}
.hero__slide[data-tone="dark"] .hero__content { color: rgba(255, 255, 255, .88); }
.hero__slide[data-tone="dark"] .hero__headline { color: var(--ink-inv); }
.hero__slide[data-tone="dark"] .hero__sub { color: rgba(255, 255, 255, .84); }
.hero__slide[data-tone="dark"] .hero__eyebrow {
  color: var(--ink-inv);
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .34);
}
/* Dark slides are the one place a sand chip would fight the photography:
   the secondary goes translucent white instead, still borderless. */
.hero__slide[data-tone="dark"] .hero__cta .btn--secondary {
  --btn-fg: var(--ink-inv);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.hero__slide[data-tone="dark"] .hero__cta .btn--secondary:hover {
  background: rgba(255, 255, 255, .3);
  box-shadow: none;
}

/* banner foot ---------------------------------------------------------------
   The controls, held to the copy's left edge. */
.hero__foot {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: clamp(1.25rem, 3vh, 2.5rem);
  padding-inline: max(var(--gutter), calc(var(--header-float) + var(--nav-pad)));
  pointer-events: none;
}
.hero__foot-inner {
  display: grid; justify-items: start;
}
/* room under the copy for the control row the foot holds */
.hero--banner .hero__overlay { padding-block: calc(var(--header-h) + var(--header-float) + 2rem) 9rem; }

.hero__controls {
  display: flex; align-items: center; gap: .5rem;
  pointer-events: auto;
}

.hero__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid rgba(20, 35, 46, .18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out);
}
.hero__arrow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__arrow:hover { background: var(--sun-50); border-color: var(--sun-600); transform: translateY(-2px); }
.hero__arrow--play { margin-left: .35rem; }
.hero__icon-play { display: none; }
.hero--banner.is-stopped .hero__icon-pause { display: none; }
.hero--banner.is-stopped .hero__icon-play  { display: block; }

.hero__dots { display: flex; align-items: center; gap: .4rem; margin-inline: .35rem; }
/* Left at 9px deliberately. The obvious fix — padding plus background-clip to
   grow the hit area — squares the dot off, because the pill radius on a 9px
   box caps at 4.5px and the padding subtracts that to zero. The dots sit
   beside full-size prev/next/pause buttons that change the same slides, so
   the small target has a large equivalent control either way. */
.hero__dot {
  position: relative;
  width: 9px; height: 9px;
  padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: rgba(20, 35, 46, .26);
  overflow: hidden;
  cursor: pointer;
  transition: width var(--t-mid) var(--e-out), background var(--t-fast) var(--e-out);
}
.hero__dot:hover { background: rgba(20, 35, 46, .45); }
.hero__dot.is-active { width: 46px; background: rgba(20, 35, 46, .2); }
/* the active dot doubles as the timer: the fill runs the length of one turn */
@keyframes banner-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__dot.is-active::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left center;
  animation: banner-fill var(--banner-interval) linear forwards;
}
.hero--banner.is-paused .hero__dot.is-active::after { animation-play-state: paused; }
/* no timer running — reduced motion, a single slide, or no JS: show it filled */
.hero--banner.is-static .hero__dot.is-active::after { animation: none; transform: scaleX(1); }

/* the foot inverts along with the slide under it */
.hero--banner[data-active-tone="dark"] .hero__arrow {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  color: var(--ink-inv);
}
.hero--banner[data-active-tone="dark"] .hero__arrow:hover {
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .26);
}
.hero--banner[data-active-tone="dark"] .hero__dot { background: rgba(255, 255, 255, .34); }
.hero--banner[data-active-tone="dark"] .hero__dot.is-active { background: rgba(255, 255, 255, .26); }
.hero--banner[data-active-tone="dark"] .hero__dot.is-active::after { background: var(--ink-inv); }

@media (max-width: 700px) {
  .hero__foot { bottom: 1.15rem; }
  .hero--banner .hero__overlay { padding-block: calc(var(--header-h) + var(--header-float) + 1.5rem) 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity .01ms linear, visibility 0s; }
  .hero__slide.is-active .hero__still img { animation: none; }
  .hero--banner .hero__eyebrow,
  .hero--banner .hero__headline,
  .hero--banner .hero__sub,
  .hero--banner .hero__cta { opacity: 1; animation: none; }
  .hero__dot.is-active::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .hero__overlay { padding-block: calc(var(--header-h) + var(--header-float) + 1.5rem) 6.5rem; }
  .hero__headline { max-width: 18ch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

/* promises rail ------------------------------------------------------------ */
.section--promises {
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.section--promises .promises {
  margin-top: 0;
  border-top: 0;
}
.promises {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--line);
}
.promise { border-right: 1px solid var(--line); }
.promise:last-child { border-right: 0; }
.promise a {
  display: grid; gap: .4rem;
  height: 100%;
  padding: var(--s-5) var(--s-4) var(--s-4) 0;
  transition: transform var(--t-mid) var(--e-out);
}
.promise:not(:first-child) a { padding-left: var(--s-4); }
.promise a:hover { transform: translateY(-3px); }
.promise__n {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; color: var(--sand-500);
  letter-spacing: .04em;
}
.promise__title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.35; }
.promise__text { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }
.promise__more {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .3rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--brand-700);
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.promise a:hover .promise__more, .promise a:focus-visible .promise__more { opacity: 1; transform: translateY(0); }

.promises__dots { display: none; }

@media (max-width: 1040px) {
  .section--promises {
    padding-top: 2rem;
    padding-bottom: 2.25rem;
    background: var(--ivory);
    overflow: hidden;
  }
  .section--promises .promises {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.85rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    border-top: none;
  }
  .section--promises .promises::-webkit-scrollbar { display: none; }
  .section--promises .promise,
  .section--promises .promise:first-child,
  .section--promises .promise:last-child {
    flex: 0 0 clamp(250px, 78vw, 300px);
    max-width: 300px;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    padding: 0;
    transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  }
  .section--promises .promise a,
  .section--promises .promise:first-child a,
  .section--promises .promise:not(:first-child) a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem 1.25rem;
    gap: 0.35rem;
    text-decoration: none;
    transform: none;
  }
  .section--promises .promise:hover {
    box-shadow: var(--sh-md);
    border-color: var(--brand-200);
  }
  .section--promises .promise__n {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sand-600);
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
  }
  .section--promises .promise__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
  }
  .section--promises .promise__text {
    font-size: 0.88rem;
    color: var(--ink-2);
    line-height: 1.5;
    flex-grow: 1;
    margin-top: 0.2rem;
  }
  .section--promises .promise__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-700);
    margin-top: 0.85rem;
    opacity: 1;
    transform: none;
  }
  .promises__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.15rem;
  }
  .promises__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--sand-200);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--t-mid) var(--e-out);
  }
  /* invisible 24px hit area around an 8px dot — the visual stays as drawn */
  .promises__dot::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .promises__dot.is-active {
    width: 24px;
    background: var(--brand-700);
  }
}

/* --------------------------------------------------------------- 9. MISSION */
.mission {
  position: relative;
  padding-block: clamp(4rem, 2.6rem + 5.4vw, 7.5rem);
  background: var(--cream);
  text-align: center;
  overflow: hidden;
}
.mission::before, .mission::after {
  content: "";
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 163, 64, .12), transparent 68%);
  pointer-events: none;
}
.mission::before { top: -140px; left: -80px; }
.mission::after  { bottom: -170px; right: -90px; background: radial-gradient(circle, rgba(192, 143, 61, .13), transparent 68%); }
.mission__inner { position: relative; }
.mission__quote { position: relative; margin-top: var(--s-2); }
.mission__quote::before {
  content: "“";
  position: absolute; top: -.34em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 9rem; line-height: 1;
  color: rgba(184, 138, 31, .16);
  pointer-events: none;
}
.mission__quote p {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.7rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.mission__by {
  margin-top: var(--s-6);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------- 10. PATHWAYS */
.pathways { background: var(--paper); }
.intent {
  position: relative;
  display: grid; align-content: start; gap: var(--s-4);
  padding: var(--s-6) var(--s-5) var(--s-7);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
.intent::after {
  content: "";
  position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  height: 2px; background: var(--brand-700);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--e-soft);
}
.intent:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--brand-100); }
.intent:hover::after { transform: scaleX(1); }
.intent__n {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--sand-500);
}
.intent__text { font-size: 1.02rem; font-weight: 500; line-height: 1.5; color: var(--ink); }

/* Mobile carousel for pathways intents cards */
@media (max-width: 699px) {
  .pathways .cards.intents {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: max(1rem, calc((100vw - 320px) / 2));
    gap: 1rem;
    padding-inline: 1rem;
    margin-inline: -1rem;
    padding-bottom: 1.25rem;
    scrollbar-width: none;
  }
  .pathways .cards.intents::-webkit-scrollbar {
    display: none;
  }
  .pathways .cards.intents .intent {
    flex: 0 0 85%;
    max-width: 320px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

.pathways__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-4) var(--s-5);
  margin-top: clamp(2rem, 1.8rem + 2vw, 3.5rem);
  text-align: center;
}
.pathways__note { font-size: var(--fs-sm); color: var(--ink-3); }

/* ----------------------------------------------------------------- 11. QUIZ */
.quiz {
  position: relative;
  padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  background: linear-gradient(135deg, #fffdf6 0%, var(--sun-100) 58%, #fbe3bd 100%);
  color: var(--ink);
  overflow: hidden;
}
.quiz::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 420px at 12% 110%, rgba(247, 163, 64, .22), transparent 62%);
  pointer-events: none;
}
.quiz .eyebrow--light { color: var(--sand-700); }
.quiz__inner {
  position: relative;
  display: grid; gap: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) { .quiz__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }

.quiz__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.quiz__lede { margin-top: var(--s-4); font-size: var(--fs-lede); color: var(--ink-2); }

.quiz__steps { display: grid; gap: .7rem; margin-top: var(--s-6); }
.quiz__steps li {
  display: flex; align-items: center; gap: .8rem;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.quiz__steps span {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border: 1px solid rgba(20, 35, 46, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink);
}
.quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-7); }
.quiz__meta { font-size: var(--fs-xs); color: var(--ink-3); }

.quiz__media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); }
.quiz__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(120, 80, 20, 0) 45%, rgba(120, 80, 20, .22));
}
.quiz__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------- 12. RESULTS */
.results { background: var(--paper); }
.results__intro p { color: var(--ink-2); font-size: var(--fs-sm); }
.results__intro p + p { margin-top: var(--s-4); }

.ba { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .ba { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }

.ba__stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--sh-lg);
  touch-action: pan-y;
  user-select: none;
  aspect-ratio: 3 / 2;
}
.ba__pane { position: absolute; inset: 0; }
.ba__pane img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-drag: none; }
/* the before pane stays full size and is clipped, so the photo never squashes */
.ba__pane--before {
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
  will-change: clip-path;
}

.ba__tag {
  position: absolute; top: var(--s-4);
  padding: .32rem .8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.ba__tag--before { left: var(--s-4); background: rgba(20, 35, 46, .74); color: #fff; }
.ba__tag--after  { right: var(--s-4); background: rgba(255, 255, 255, .9); color: var(--brand-800); }

.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(9, 33, 40, .35);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-800);
  box-shadow: 0 6px 20px -6px rgba(9, 33, 40, .5);
  transition: transform var(--t-mid) var(--e-out);
}
.ba__stage:hover .ba__grip { transform: translate(-50%, -50%) scale(1.06); }

.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none; -webkit-appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100%; }
.ba__range::-moz-range-thumb { width: 1px; height: 100%; border: 0; }
/* pointer dragging is handled on the stage so the handle tracks the cursor exactly;
   the input stays in the tab order for keyboard users */
.ba__range { pointer-events: none; }
.ba__stage:has(.ba__range:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.ba__stage:has(.ba__range:focus-visible) .ba__grip { transform: translate(-50%, -50%) scale(1.12); }

.ba__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem var(--s-5) var(--s-4);
  background: linear-gradient(to top, rgba(9, 33, 40, .8), transparent);
  color: rgba(255,255,255,.9);
  font-size: var(--fs-xs);
  text-align: center;
  pointer-events: none;
}

.ba__side { display: grid; gap: var(--s-5); align-content: start; }
.ba__side-label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3);
}
.ba__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.ba__thumb {
  position: relative; display: block; width: 100%;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--mist);
  transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.ba__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-slow) var(--e-soft); }
.ba__thumb span {
  position: absolute; inset: auto 0 0 0;
  padding: .9rem .5rem .3rem;
  background: linear-gradient(to top, rgba(9,33,40,.75), transparent);
  color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.ba__thumb:hover { transform: translateY(-2px); }
.ba__thumb:hover img { transform: scale(1.06); }
.ba__thumb.is-active { border-color: var(--brand-600); }

.ba__cred {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
}
.ba__cred img { width: 46px; height: auto; flex: none; }
.ba__cred p { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-2); }
.ba__cred strong { display: block; font-size: var(--fs-sm); color: var(--ink); }

/* -------------------------------------------------------------- 13. FOUNDER */
.founder { background: var(--ivory); }
.founder__inner { display: grid; gap: clamp(2.5rem, 1.4rem + 4vw, 5rem); }
@media (min-width: 940px) { .founder__inner { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }

.founder__aside { align-self: start; }
@media (min-width: 940px) { .founder__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }

.founder__portrait {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5) 0;
  background: linear-gradient(170deg, var(--sun-100), var(--cream));
  overflow: hidden;
}
.founder__portrait::before {
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 78%; height: 62%;
  border-radius: 50% 50% 0 0;
  background: rgba(255, 255, 255, .5);
}
.founder__portrait img { position: relative; width: min(280px, 100%); margin-inline: auto; }

.founder__name {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; line-height: 1.2;
}
.founder__role { margin-top: .25rem; font-size: var(--fs-sm); color: var(--ink-3); }

.founder__facts {
  display: grid; gap: .1rem;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.founder__facts li { display: flex; align-items: baseline; gap: .75rem; padding-block: .4rem; }
.founder__facts strong {
  min-width: 5.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600; color: var(--brand-700); line-height: 1.1;
}
.founder__facts span { font-size: var(--fs-xs); color: var(--ink-3); }

.founder__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s-5); font-size: var(--fs-sm); font-weight: 600; color: var(--brand-700); }
.founder__link:hover { gap: .75rem; }
.founder__link svg { transition: transform var(--t-mid) var(--e-out); }

.founder__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  font-weight: 500; font-style: italic;
  line-height: 1.1;
  margin-bottom: var(--s-6);
}
.founder__sign { margin-top: var(--s-7); }
.founder__signoff { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: var(--ink-2); }
.founder__sign img { width: 190px; margin-top: .5rem; opacity: .9; }

/* Read more toggle for mobile view */
.founder__toggle-wrap { display: none; }
@media (max-width: 767px) {
  .founder__letter-collapsible {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--e-soft), opacity 0.3s var(--e-out), visibility 0.35s;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
  }
  .founder__letter-content {
    min-height: 0;
    overflow: hidden;
  }
  .founder__letter-collapsible.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    margin-top: var(--s-5);
  }
  .founder__toggle-wrap {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--s-5);
  }
  .founder__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }
  .founder__toggle-btn svg {
    transition: transform var(--t-fast) var(--e-out);
  }
  .founder__toggle-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}

/* ---------------------------------------------------------------- 14. REACH */
.reach {
  position: relative;
  padding-block: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  background:
    radial-gradient(880px 500px at 84% -8%, rgba(243, 218, 103, .38), transparent 62%),
    radial-gradient(760px 480px at 8% 106%, rgba(169, 211, 238, .45), transparent 64%),
    linear-gradient(158deg, var(--ivory) 0%, var(--cream) 48%, var(--brand-50) 100%);
  border-block: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
  text-align: center;
}
/* fine dot lattice — adds craft without noise */
.reach::before {
  content: "";
  position: absolute; inset: -1px;
  background-image: radial-gradient(rgba(20, 35, 46, .13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(700px 430px at 50% 42%, #000 10%, transparent 76%);
  mask-image: radial-gradient(700px 430px at 50% 42%, #000 10%, transparent 76%);
  opacity: .55;
  pointer-events: none;
}
/* soft warm bloom behind the headline */
.reach::after {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  width: min(1100px, 120%); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .82), transparent 70%);
  pointer-events: none;
}
.reach .eyebrow--light { color: var(--sand-700); }
.reach__inner { position: relative; z-index: 1; max-width: 940px; margin-inline: auto; }
.reach__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500; line-height: 1.18;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.reach__num {
  color: var(--sand-600);
  background: linear-gradient(96deg, var(--sand-700) 0%, var(--sun-700) 44%, var(--sand-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-inline: .04em;
}
@supports not (background-clip: text) {
  .reach__num { -webkit-text-fill-color: currentColor; }
}
.reach__lede {
  margin-top: var(--s-5);
  color: var(--ink-2);
  font-size: var(--fs-lede);
}
.reach__areas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem;
  margin-top: var(--s-7);
}
.reach__areas li {
  padding: .46rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  /* no backdrop-filter here: the ground behind these is flat, so a blur is
     invisible — and there are fourteen of them, each its own paint layer */
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  transition:
    background-color var(--t-fast) var(--e-out),
    border-color var(--t-fast) var(--e-out),
    box-shadow var(--t-fast) var(--e-out),
    color var(--t-fast) var(--e-out),
    transform var(--t-fast) var(--e-out);
}
.reach__areas li:hover {
  background: #fff;
  border-color: var(--sand-200);
  box-shadow: var(--sh-sm);
  color: var(--ink);
  transform: translateY(-2px);
}
.reach__state {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: var(--s-7);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sand-700);
}
.reach__state::before,
.reach__state::after {
  content: "";
  width: clamp(1.75rem, 5vw, 3.25rem); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 99, 41, .45));
}
.reach__state::after { background: linear-gradient(90deg, rgba(138, 99, 41, .45), transparent); }

/* ------------------------------------------------------------- 15. BENEFITS */
.benefits { background: var(--paper); }
.benefits .section__head { max-width: 640px; }
.benefit {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  background: linear-gradient(180deg, var(--paper), var(--ivory));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.benefit__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
}
.benefit__title { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; line-height: 1.2; }
.benefit__text { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; }
.benefit .link-arrow { margin-top: auto; padding-top: var(--s-2); }

/* -------------------------------------------------------------- 16. OFFERED */
.offered {
  padding-block: clamp(3rem, 2rem + 3.5vw, 5rem);
  background: var(--mist);
  border-block: 1px solid var(--line-soft);
}
.offered__head { text-align: center; max-width: 640px; margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3rem); }
.offered__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  font-weight: 500; line-height: 1.35; color: var(--ink-2);
  text-wrap: balance;
}
.offered__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 2vw, 2.5rem);
  align-items: center;
}
@media (min-width: 620px)  { .offered__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .offered__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.offered__grid li { display: grid; place-items: center; padding: var(--s-3); }
.offered__grid img {
  width: auto; max-height: 46px;
  filter: grayscale(1); opacity: .55;
  transition: filter var(--t-mid) var(--e-out), opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.offered__grid li:hover img { filter: none; opacity: 1; transform: scale(1.04); }

/* --------------------------------------------------------- 17. TESTIMONIALS */
.testimonials { background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%); }

/* ---- the wall panel and header ---- */
.wall-panel {
  position: relative;
  width: 100%;
}

.wall-panel__head {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
}
.wall-panel__head .section__title {
  margin-bottom: clamp(.75rem, .5rem + .8vw, 1.25rem);
}
.wall-panel__head .section__lede {
  margin-inline: auto;
  max-width: 720px;
}

/* ---- proof pill (header rating pill) ---- */
.proof-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .42rem 1.15rem;
  margin-bottom: clamp(1rem, .8rem + .8vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.proof-pill__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--sun-600);
}
.proof-pill__stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor !important;
  stroke: none !important;
}

@media (max-width: 480px) {
  .proof-pill {
    padding: .32rem .75rem;
    font-size: .75rem;
    gap: .4rem;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* ---- the proof strip (alternative / legacy layout) ----
   One line under the heading: the rating, the number, the platforms. */
.proof-strip {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--s-4) var(--s-5);
  margin-top: calc(var(--s-6) * -1 + .5rem);
  margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
.proof-strip__stars { display: inline-flex; gap: 3px; color: var(--sun-600); }
.proof-strip__stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.proof-strip__count { font-size: var(--fs-sm); color: var(--ink-3); }
.proof-strip__count strong { font-weight: 700; color: var(--ink); }
.proof-strip__badges {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.9rem, .6rem + 1.2vw, 1.75rem);
  padding-left: clamp(0px, 2vw, 1.25rem);
  border-left: 1px solid var(--line);
}
@media (max-width: 719px) { .proof-strip__badges { border-left: 0; padding-left: 0; } }
.proof-strip__badges li { display: flex; }
.proof-strip__badges img {
  height: clamp(30px, 2.4vw, 38px); width: auto;
  opacity: .9;
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-soft);
}
.proof-strip__badges img:hover { opacity: 1; transform: translateY(-2px); }

/* ---- the wall ----
   Two rows drifting past each other. The tracks are duplicated in JS and moved
   by exactly half their width, so the seam never lands on screen; the edges are
   masked so cards enter and leave rather than being chopped by the viewport. */
.wall {
  display: grid;
  gap: clamp(.9rem, .7rem + .7vw, 1.35rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.wall__row {
  overflow: hidden;
  padding-block: .35rem;
}
.wall__track {
  display: flex;
  align-items: stretch;
  gap: clamp(.9rem, .7rem + .7vw, 1.35rem);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: wall-drift var(--wall-dur, 70s) linear infinite;
  will-change: transform;
}
.wall__row--back .wall__track { animation-direction: reverse; }
@keyframes wall-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--wall-pass, 50%)), 0, 0); }
}
/* reading one of them should not be a chase */
.wall:hover .wall__track,
.wall:focus-within .wall__track,
.wall:active .wall__track { animation-play-state: paused; }

/* ---- the card, in wall trim ---- */
.wall .quote {
  flex: 0 0 clamp(17.5rem, 25vw, 22rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 1.15rem + .6vw, 1.75rem);
  border-radius: var(--r-md);
  height: auto;
  align-self: stretch;
}
.wall .quote__body {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
}
.wall .quote__body p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-2);
}
.wall .quote--short .quote__body {
  align-items: flex-start;
}
.wall .quote--short .quote__body p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  font-weight: 450;
  color: var(--ink-2);
}
.wall .quote::before { font-size: 6rem; top: .1em; right: .05em; }
.wall .quote__stars { margin-bottom: .75rem; }
.wall .quote__stars svg { width: 15px; height: 15px; }
.wall .quote__by {
  margin-top: auto;
  padding-top: .85rem;
}
.wall .quote__avatar { width: 38px; height: 38px; font-size: .92rem; }
.wall .quote__name { font-size: .95rem; }

/* a drifting wall is motion for its own sake — hand it over as a plain rail */
@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none; }
  .wall__row { overflow-x: auto; overscroll-behavior-x: contain; }
}

/* ---- review badges below the wall ---- */
.wall-panel__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 1rem + 1.8vw, 3rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 0;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.wall-panel__badges li { display: flex; align-items: center; }
.wall-panel__badges img {
  height: clamp(32px, 2.5vw, 42px);
  width: auto;
  opacity: .92;
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-soft);
}
.wall-panel__badges img:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
}

.carousel { position: relative; }
.carousel__viewport { overflow: hidden; margin-inline: -.75rem; padding: .75rem; }
.carousel__track {
  display: flex;
  gap: var(--s-5);
  transition: transform var(--t-slow) var(--e-soft);
  will-change: transform;
}

/* ---- the review card ----
   Clean white card, generous radius, one soft diffuse shadow. The card opens
   with a round quote badge, closes with a hairline divider and the reviewer. */
.quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;                /* clips the watermark glyph */
  flex: 0 0 100%;
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem);
  background: linear-gradient(168deg, var(--paper) 0%, var(--paper) 55%, var(--ivory) 100%);
  border: 1px solid rgba(52, 42, 26, .07);
  border-radius: clamp(16px, 12px + .6vw, 22px);
  box-shadow:
    0 1px 2px rgba(20, 35, 46, .04),
    0 18px 38px -24px rgba(52, 42, 26, .28);
  transition: transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
/* The opening quote mark, set as a watermark behind the text rather than a
   pale badge above it: it gives the card its editorial voice without taking a
   whole row of height, which is what pushed the short reviews out of shape. */
.quote::before {
  content: "\201C";
  position: absolute; top: .14em; right: .07em; z-index: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 8.5rem; line-height: 1;
  color: var(--sand-200);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-soft);
}
/* the warm hairline that lights along the top edge on hover */
.quote::after {
  content: "";
  position: absolute; inset: 0 0 auto; z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--sun-400) 0%, var(--sand-500) 55%, var(--brand-300) 100%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--e-out);
}
.quote > * { position: relative; z-index: 1; }
.quote:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(20, 35, 46, .05),
    0 34px 60px -28px rgba(52, 42, 26, .36);
  border-color: rgba(52, 42, 26, .1);
}
.quote:hover::after { opacity: 1; }
.quote:hover::before { opacity: .8; transform: translateY(2px) rotate(-4deg); }

/* one card per view on phones: stretching every slide to the tallest quote left
   a dead gap under the short ones, so let each card hug its own text there.
   From 760px up the cards sit side by side and equal heights are what tidy. */
@media (max-width: 759px) {
  .carousel__track { align-items: flex-start; }
  .quote__body { flex: 0 1 auto; }
}

@media (min-width: 760px)  { .carousel__track > .quote { flex-basis: calc((100% - var(--s-5)) / 2); } }
/* beside the proof panel the rail is narrower, so two cards is the honest fit;
   the third peeks in from the right to show the track keeps going */
@media (min-width: 1000px) { .carousel__track > .quote { flex-basis: 24rem; } }
@media (min-width: 1400px) { .carousel__track > .quote { flex-basis: 26rem; } }

/* controls sit under the rail, aligned to its left edge rather than centred */
.testimonials__rail .carousel__controls { justify-content: flex-start; }

.quote__stars {
  display: flex; align-items: center; gap: 3px;
  margin-bottom: var(--s-4);
  color: var(--sun-600);
}
.quote__stars svg { width: 18px; height: 18px; }
.quote__stars img { height: 18px; width: auto; }

.quote__body { flex: 1; }
/* Equal-height cards are what tidy a row, but a two-line review top-aligned in
   a card sized for a six-line one reads as a hole — so the short ones centre
   in the space instead. Long reviews still start at the top, where you read. */
.quote--short .quote__body { display: flex; align-items: center; }
.quote__body p {
  font-size: clamp(1rem, .97rem + .16vw, 1.09rem);
  font-weight: 450;
  line-height: 1.62;
  letter-spacing: 0;
  color: var(--ink-2);
  text-wrap: pretty;
}
.quote--short .quote__body p {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.42rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -.008em;
}

/* attribution sits below a full-width hairline divider */
.quote__by {
  position: relative;
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex; align-items: center; gap: .8rem;
}
.quote__by::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
/* a struck monogram in the warm palette reads bespoke where a solid
   blue disc reads auto-generated */
.quote__avatar {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(152deg, var(--sun-300) 0%, var(--sand-500) 100%);
  border: 0;
  color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: .04em;
  box-shadow: 0 6px 14px -8px rgba(138, 99, 41, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.quote__meta { display: grid; gap: 1px; min-width: 0; }
.quote__name {
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  letter-spacing: .005em;
}
.quote__loc {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  color: var(--ink-3);
}

.carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-6); }
.carousel__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-2);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.carousel__btn:hover:not(:disabled) { background: var(--sun-400); border-color: var(--sun-500); color: var(--ink); transform: translateY(-2px); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__dots { display: flex; align-items: center; gap: .45rem; }
.carousel__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  transition: background-color var(--t-fast) var(--e-out), width var(--t-mid) var(--e-out);
}
/* invisible 24px hit area around an 8px dot — the visual stays as drawn */
.carousel__dot::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.carousel__dot.is-active { width: 26px; border-radius: var(--r-pill); background: var(--brand-700); }

/* the five-star badges that close the testimonials block ------------------- */
.review-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center; justify-items: start;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.review-badges li { display: flex; }
.review-badges img {
  height: clamp(34px, 2.6vw, 44px);
  width: auto;
  opacity: .92;
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-soft);
}
.review-badges img:hover { opacity: 1; transform: translateY(-3px) scale(1.03); }

/* --------------------------------------------------------------- 18. REPORT */
.report { background: var(--cream); }
.report__inner { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .report__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

.report__media { position: relative; justify-self: center; width: min(360px, 100%); }
.report__cover {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #fff, var(--sand-100));
  box-shadow: var(--sh-lg);
}
.report__cover img {
  width: 100%;
  border-radius: var(--r-xs);
  filter: drop-shadow(0 22px 30px rgba(20, 35, 46, .22));
  transform: rotate(-2.5deg);
  transition: transform var(--t-slow) var(--e-soft);
}
.report__cover:hover img { transform: rotate(0deg) scale(1.02); }
.report__flag {
  position: absolute; top: -12px; right: -8px;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: var(--brand-700);
  color: #fff;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  box-shadow: var(--sh-md);
}
.report__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-7); }
.report__meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* ----------------------------------------------------------------- 19. BOOK */
.book { background: var(--paper); }
.book__inner { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .book__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.book__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-sm);
  font-weight: 500; line-height: 1.14;
  letter-spacing: -.014em;
}
.book__title em {
  display: block; margin-top: .3rem;
  font-size: .58em; font-style: italic; font-weight: 400;
  line-height: 1.3; color: var(--ink-2);
}
.book__actions { margin-top: var(--s-7); }
.book__media { justify-self: center; width: min(380px, 100%); }
.book__media img {
  width: 100%;
  filter: drop-shadow(0 40px 55px rgba(20, 35, 46, .28));
  transition: transform var(--t-slow) var(--e-soft);
}
.book__media:hover img { transform: translateY(-8px) rotate(-1deg); }

/* -------------------------------------------------------- 20. RIGHT FOR YOU */
.right-for-you { background: var(--ivory); }
.rfy__inner { display: grid; gap: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .rfy__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.rfy__card {
  position: relative;
  max-width: 440px; justify-self: center; width: 100%;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.rfy__card::before {
  content: "";
  position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border-radius: var(--r-lg);
  background: var(--brand-100);
}
.rfy__card-head { display: flex; align-items: center; gap: var(--s-4); }
.rfy__pill {
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.rfy__progress { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.rfy__progress i { display: block; height: 100%; border-radius: inherit; background: var(--brand-600); }
.rfy__q { margin-top: var(--s-5); font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.3; }
.rfy__options { display: grid; gap: .55rem; margin-top: var(--s-5); }
.rfy__options li {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--e-out);
}
.rfy__options li:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.rfy__options li span {
  width: 17px; height: 17px; flex: none;
  border: 1.6px solid var(--line); border-radius: 50%;
  transition: all var(--t-fast) var(--e-out);
}
.rfy__options .is-picked { border-color: var(--brand-500); background: var(--brand-50); color: var(--ink); font-weight: 600; }
.rfy__options .is-picked span { border-color: var(--brand-600); box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--brand-600); }
.rfy__fake-btn {
  display: block; margin-top: var(--s-5);
  padding: .8rem 1rem;
  border-radius: var(--r-pill);
  background: var(--sun-400);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.rfy__fake-btn:hover {
  background: var(--sun-500);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- 21. VISIT */
.visit { background: var(--paper); }
.visit__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--sh-sm);
}
.visit__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--ivory); }
.visit__tab {
  flex: 1;
  padding: 1.05rem 1rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.visit__tab:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.visit__tab.is-active { color: var(--brand-800); border-bottom-color: var(--brand-700); background: var(--paper); }

.visit__pane { display: grid; }
@media (min-width: 860px) { .visit__pane { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.visit__info { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.visit__office { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.25; }
.visit__doc { margin-top: .2rem; font-size: var(--fs-sm); color: var(--ink-3); }
.visit__address { margin-top: var(--s-4); font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); }
.visit__contact { display: grid; gap: .6rem; margin-top: var(--s-5); }
.visit__contact li { display: flex; align-items: center; gap: .65rem; font-size: var(--fs-sm); }
.visit__contact .ico { color: var(--brand-600); }
.visit__contact a { color: var(--ink-2); transition: color var(--t-fast) var(--e-out); }
.visit__contact a:hover { color: var(--brand-700); }
.visit__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s-6); }
.visit__map { position: relative; min-height: 300px; background: var(--mist); }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.02); }
@media (max-width: 859px) { .visit__map { min-height: 260px; height: 260px; } }

.hours {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: var(--ivory);
}
.hours__title {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.hours__list {
  display: grid; gap: .1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .hours__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); } }
@media (min-width: 1180px) { .hours__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.4vw, 2.5rem); } }
.hours__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: .55rem;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.hours__list span { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.hours__list time { color: var(--ink); text-align: right; white-space: nowrap; }
.hours__list em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); }
.hours__list .is-closed time { color: var(--ink-3); }
.hours__note { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); }
.hours__office {
  margin-bottom: .25rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}
.hours__list + .hours__office { margin-top: var(--s-5); }

/* ---------------------------------------------------------- 22. APPOINTMENT */
.appointment { background: var(--mist); }
.appointment__inner { display: grid; gap: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .appointment__inner { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); } }
@media (min-width: 980px) { .appointment__copy { position: sticky; top: calc(var(--header-h) + 2rem); } }

.appointment__alt { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 520px) { .appointment__alt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.appointment__alt li {
  display: grid; gap: .2rem;
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.appointment__alt-label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3);
}
.appointment__alt a { font-weight: 600; color: var(--ink); transition: color var(--t-fast) var(--e-out); }
.appointment__alt a:hover { color: var(--brand-700); }
.appointment__alt-mail { font-size: var(--fs-xs); font-weight: 500 !important; color: var(--ink-3) !important; overflow-wrap: anywhere; }
.appointment__alt-mail:hover { color: var(--brand-700) !important; }
.appointment__video { display: flex; align-items: flex-start; gap: .6rem; margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--ink-2); }
.appointment__video .ico { color: var(--brand-600); margin-top: .18rem; }

/* form --------------------------------------------------------------------- */
.form {
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.form__grid { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: .4rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-2);
  padding: 0;
}
.field__label span { color: var(--brand-600); }
.field__input {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
  appearance: none;
}
.field__input::placeholder { color: #9aa9b2; }
.field__input:hover { border-color: #d6d0c6; }
.field__input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(24, 154, 214, .16);
}
.field__input--area { resize: vertical; min-height: 108px; line-height: 1.6; }
.field__select { position: relative; }
.field__select svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); }
.field__select select { padding-right: 2.4rem; cursor: pointer; }

/* iOS Safari zooms the whole page in when a focused control is set below 16px,
   and every form here — both contact pages and the quiz — sat at 15px. Hold
   the controls at 16px on phones; desktop keeps the tighter size. */
@media (max-width: 767px) {
  .field__input,
  input, select, textarea { font-size: 16px; }
}

.field__error { font-size: var(--fs-xs); color: #b23c2c; min-height: 0; }
.field__error:empty { display: none; }
.field.has-error .field__input { border-color: #d0674f; background: #fdf6f4; }
.field.has-error .field__input:focus { box-shadow: 0 0 0 4px rgba(208, 103, 79, .16); }

.radios { display: grid; gap: .6rem; }
@media (min-width: 480px) { .radios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.radio {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.radio:hover { border-color: var(--brand-200); }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio__mark {
  width: 19px; height: 19px; flex: none;
  border: 1.7px solid #c9c2b6; border-radius: 50%;
  transition: box-shadow var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.radio__text { display: grid; gap: 1px; line-height: 1.3; }
.radio__text strong { font-size: var(--fs-sm); font-weight: 600; }
.radio__text em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); }
.radio:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.radio input:checked + .radio__mark { border-color: var(--brand-600); box-shadow: inset 0 0 0 3.5px var(--paper), inset 0 0 0 10px var(--brand-600); }
.radio input:focus-visible + .radio__mark { outline: 2px solid var(--focus); outline-offset: 3px; }
.field.has-error .radio { border-color: #e0b0a4; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.form__note { font-size: var(--fs-xs); color: var(--ink-3); max-width: 34ch; }
.form__summary {
  margin-top: var(--s-4);
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  background: #fdf6f4;
  border: 1px solid #edd3cb;
  color: #96331f;
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- 23. VIDEO */
.video {
  position: relative;
  padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.video::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(820px 480px at 88% 10%, rgba(243, 218, 103, .2), transparent 62%);
}
.video__inner { position: relative; display: grid; gap: clamp(2.25rem, 1.4rem + 3vw, 4rem); align-items: center; }
@media (min-width: 980px) { .video__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.video__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  font-weight: 500; font-style: italic;
  line-height: 1.26;
  text-wrap: balance;
}
.video__by { margin-top: var(--s-5); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--sun-300); }

.video__player { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xl); background: #000; }
.video__facade { position: relative; aspect-ratio: 16 / 9; }
.video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform var(--t-slow) var(--e-soft), opacity var(--t-mid) var(--e-out); }
.video__facade:hover img { transform: scale(1.03); opacity: .92; }
.video__facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--sun-400);
  color: var(--ink);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
  transition: transform var(--t-mid) var(--e-out), background-color var(--t-mid) var(--e-out);
}
.video__play svg { fill: currentColor; stroke: none; margin-left: 3px; }
.video__play::before {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  animation: pulse 2.8s var(--e-soft) infinite;
}
.video__play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--sun-300); }
@keyframes pulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}
.video__fallback {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  background: rgba(9, 33, 40, .62);
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
  backdrop-filter: blur(4px);
  transition: background-color var(--t-fast) var(--e-out);
}
.video__fallback:hover { background: rgba(9, 33, 40, .85); }

/* ----------------------------------------------------------- 24. NEWSLETTER */
.newsletter {
  padding-block: clamp(3.25rem, 2.2rem + 4vw, 5.5rem);
  background: var(--cream);
  text-align: center;
}
.newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem);
  font-weight: 500; line-height: 1.28;
  text-wrap: balance;
  max-width: 22ch; margin-inline: auto;
}
.newsletter__form {
  display: flex; flex-direction: column; gap: .75rem;
  max-width: 520px; margin: var(--s-7) auto 0;
  width: 100%;
}
.newsletter__form .field__input {
  width: 100%;
  background: var(--paper);
  padding-block: .95rem;
  text-align: center;
}
.newsletter__form .btn {
  width: 100%;
  justify-content: center;
}
@media (min-width: 480px) {
  .newsletter__form {
    flex-direction: row;
    gap: .6rem;
  }
  .newsletter__form .field__input {
    flex: 1 1 240px;
    width: auto;
    text-align: left;
  }
  .newsletter__form .btn {
    flex: 0 0 auto;
    width: auto;
  }
}
.newsletter__status { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--brand-800); min-height: 1.2em; }
.newsletter__status.is-error { color: #b23c2c; }

/* --------------------------------------------------------------- 25. FOOTER */
/* Light footer: a flat card that floats clear of the page edges. */
.footer {
  position: relative;
  overflow: hidden;
  /* a card that floats clear of the page edges, matching the nav bar — but
     dark, so the light pages close on a deliberate full stop. The colour
     recipe is the consultation pop-up's rail, so the two read as one system. */
  margin: clamp(1rem, 2.4vw, 2.25rem);
  padding-top: clamp(3rem, 2.2rem + 3.4vw, 5rem);
  padding-bottom: var(--s-5);
  border-radius: clamp(var(--r-lg), 2.4vw, var(--r-xl));
  background-image:
    radial-gradient(90% 60% at 4% 100%, rgba(243, 218, 103, .16) 0%, rgba(243, 218, 103, 0) 62%),
    radial-gradient(70% 55% at 96% 0%, rgba(24, 154, 214, .3) 0%, rgba(24, 154, 214, 0) 66%),
    linear-gradient(168deg, #16507f 0%, var(--brand-900) 54%, #0a2842 100%);
  box-shadow: 0 34px 70px -42px rgba(9, 24, 35, .6), 0 3px 12px -6px rgba(9, 24, 35, .2);
  color: rgba(255, 255, 255, .72);
  font-size: var(--fs-sm);
}
/* the warm hairline the buttons, the logo mark and the pop-up all share */
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--sun-400) 0%, var(--sun-600) 36%, var(--brand-500) 100%);
}
/* a wide brand arc, drawn once and cropped by the card */
.footer::after {
  content: ""; position: absolute; right: -14%; bottom: -46%;
  width: 46%; aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  pointer-events: none;
}
.footer .shell { position: relative; z-index: 1; }
/* no tint behind the card — the lift alone carries the float */
.footer-bed { background: transparent; }

.footer__top {
  display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
}
@media (min-width: 700px)  { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .footer__top { grid-template-columns: 1.45fr .8fr .95fr 1.3fr; } }

.footer__logo { width: 200px; margin-bottom: var(--s-4); }

.footer__rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: var(--s-4);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
}
.footer__stars { display: inline-flex; gap: 2px; color: var(--sun-400); }
.footer__stars svg { fill: currentColor; stroke: none; }

.footer__about { max-width: 42ch; margin-bottom: var(--s-4); color: rgba(255, 255, 255, .6); }

.footer__report {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--sun-300);
  transition: gap var(--t-mid) var(--e-out), color var(--t-fast) var(--e-out);
}
.footer__report:hover { gap: .8rem; color: var(--sun-200); }

.footer__social { display: flex; gap: .6rem; margin-top: var(--s-5); }
.footer__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out),
              color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-soft), box-shadow var(--t-mid) var(--e-out);
}
.footer__social a:hover {
  background: var(--sun-400);
  border-color: var(--sun-400);
  color: var(--ink);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 22px -12px rgba(243, 218, 103, .8);
}

.footer__heading {
  position: relative;
  margin-bottom: var(--s-5); padding-bottom: .7rem;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: #fff;
}
.footer__heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sun-400), var(--brand-500));
}

.footer__hours { display: grid; gap: .55rem; }
.footer__hours + .footer__hours-office,
.footer__hours + .footer__hours { margin-top: 1.1rem; }
.footer__hours-office {
  margin-bottom: .55rem;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--sun-400);
}
.footer__hours li { display: grid; gap: 1px; }
.footer__hours span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); }
.footer__hours time { color: #fff; font-weight: 600; }

.footer__links { display: grid; gap: .55rem; }
.footer__links a {
  display: inline-flex; align-items: center; gap: 0;
  color: rgba(255, 255, 255, .74);
  transition: color var(--t-fast) var(--e-out), gap var(--t-mid) var(--e-out);
}
.footer__links a::before {
  content: ""; flex: none;
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sun-400), var(--brand-300));
  transition: width var(--t-mid) var(--e-out);
}
.footer__links a:hover { color: #fff; gap: .5rem; }
.footer__links a:hover::before { width: 14px; }

.footer__contact { display: grid; gap: var(--s-4); }
.footer__contact li { display: grid; gap: .2rem; }
.footer__label {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.footer__contact a {
  color: #fff; font-weight: 500;
  transition: color var(--t-fast) var(--e-out);
  overflow-wrap: anywhere;
}
.footer__contact a:hover { color: var(--sun-300); }

/* the two offices get the full width rather than a squeezed column */
.footer__offices {
  display: grid; gap: var(--s-4);
  padding-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 620px) { .footer__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer__office {
  padding: clamp(1.1rem, .9rem + .6vw, 1.5rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  transition: border-color var(--t-mid) var(--e-out), background-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-soft);
}
.footer__office:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .26);
  transform: translateY(-2px);
}
.footer__office-name {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sun-300);
}
.footer__office address {
  margin-top: .55rem;
  font-size: var(--fs-sm); line-height: 1.65; font-style: normal;
  color: rgba(255, 255, 255, .78);
}
.footer__directions {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .75rem;
  font-size: var(--fs-xs); font-weight: 600;
  color: rgba(255, 255, 255, .62);
  transition: color var(--t-fast) var(--e-out);
}
.footer__directions svg { color: var(--sun-400); }
.footer__directions:hover { color: #fff; }

.footer__accred {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  padding-block: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* the badges are other organisations' artwork, several of them opaque
   rectangles — so they sit on their own light chip rather than being
   recoloured, which would either erase them or misrepresent the mark. */
.footer__accred a {
  display: grid; place-items: center;
  padding: .6rem 1rem;
  background: #fff;
  border-radius: var(--r-md);
  transition: transform var(--t-mid) var(--e-soft), box-shadow var(--t-mid) var(--e-out);
}
.footer__accred a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .6);
}
.footer__accred img {
  height: 46px; width: auto;
  opacity: .82;
  transition: opacity var(--t-mid) var(--e-out);
}
.footer__accred a:hover img { opacity: 1; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .45);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.footer__legal a { transition: color var(--t-fast) var(--e-out); }
.footer__legal a:hover { color: #fff; }

/* back to top -------------------------------------------------------------- */
.to-top {
  /* clears the 58px WhatsApp button below it with a real gap, not a hairline */
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: calc(clamp(1rem, 2.5vw, 2rem) + 72px);
  z-index: 80;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand-800);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.to-top.is-visible { opacity: 1; transform: translateY(0); }
.to-top:hover { background: var(--sun-400); color: var(--ink); border-color: var(--sun-500); }

/* whatsapp fab -------------------------------------------------------------- */
/* A circle at rest that grows into a pill on hover, rather than a circle with
   a dark tooltip floating off its side. The label lives inside the button, so
   there is one shape on screen instead of two. */
.whatsapp-fab-wrap {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
}

.whatsapp-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 58px;
  /* 17 + 24 + 17 = 58 — a true circle until the label opens */
  padding-inline: 17px;
  border: 0;
  border-radius: var(--r-pill);
  background: #25d366;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(18, 140, 126, .65),
              0 2px 6px rgba(9, 24, 35, .16),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-color var(--t-fast) var(--e-out),
              box-shadow var(--t-mid) var(--e-out),
              transform var(--t-mid) var(--e-soft);
  outline: none;
}
.whatsapp-fab svg {
  width: 24px; height: 24px;
  flex: none;
  fill: currentColor;
}

/* the ring that breathes out of the button — a pseudo-element rather than a
   second box-shadow, so it never fights the hover shadow for the property */
.whatsapp-fab::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: #25d366;
  animation: waPulse 3.4s var(--e-out) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: .38; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: #1fbe5a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(18, 140, 126, .7),
              0 3px 10px rgba(9, 24, 35, .2),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.whatsapp-fab:hover::before,
.whatsapp-fab:focus-visible::before { animation: none; opacity: 0; }
.whatsapp-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.whatsapp-fab:active { transform: translateY(-2px) scale(.97); }

/* the label, which is what turns the circle into a pill */
.whatsapp-fab__label {
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  transition: max-width .4s var(--e-out), margin-right .4s var(--e-out), opacity .22s var(--e-out);
}
.whatsapp-fab:hover .whatsapp-fab__label,
.whatsapp-fab:focus-visible .whatsapp-fab__label {
  max-width: 12rem;
  margin-right: .62rem;
  opacity: 1;
}

/* the card carries its own dot; the fab never needs a second one */
.whatsapp-fab__pulse { display: none; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab::before { animation: none; opacity: 0; }
}

/* Office Chooser Popover Card */
.whatsapp-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 310px;
  max-width: calc(100vw - 2rem);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 45px -10px rgba(16, 55, 92, 0.28), 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line-soft, #ece7dd);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
.whatsapp-card.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.whatsapp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  color: #ffffff;
}
.whatsapp-card__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.whatsapp-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.whatsapp-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.whatsapp-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #ffffff;
}
.whatsapp-card__status {
  font-size: 0.72rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.whatsapp-card__status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25d366;
}
.whatsapp-card__close {
  background: transparent;
  border: none;
  color: #ffffff;
  opacity: 0.75;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: opacity 0.15s, background-color 0.15s;
}
.whatsapp-card__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

.whatsapp-card__body {
  padding: 1rem 1.15rem;
  background: #f8fafc;
}
.whatsapp-card__msg {
  font-size: 0.8125rem;
  color: var(--ink-2, #3d5462);
  line-height: 1.5;
  margin: 0 0 0.85rem 0;
}
.whatsapp-card__options {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.whatsapp-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink, #14232e);
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}
.whatsapp-card__link:hover {
  border-color: #25d366;
  background: #f0fdf4;
  transform: translateX(2px);
}
.whatsapp-card__link strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.whatsapp-card__link span {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-3, #6f838f);
}
.whatsapp-card__link svg {
  color: #25d366;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- 26. MOTION */
[data-reveal] { opacity: 1; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--e-soft), transform .8s var(--e-soft);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .video__play::before { display: none; }
  /* the flyout should snap open, not trickle in column by column */
  .mega__label, .mega__list li, .mega__feature, .nav__item { transition-delay: 0s !important; }
}

/* ------------------------------------------------------- 27. NO JAVASCRIPT */
/* Everything stays reachable when scripts do not run. */
/* The flyout height is measured in JS, so without scripts the bar un-sticks
   and the whole menu renders as one plain, fully expanded list. */
html:not(.js) .header { position: static; }
html:not(.js) .header__bar {
  background: var(--paper);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:not(.js) .header__inner {
  height: auto; flex-wrap: wrap;
  padding-block: var(--s-4);
}
html:not(.js) .header__cta { display: none; }
html:not(.js) .burger { display: none; }
html:not(.js) .nav__curtain { display: none; }
html:not(.js) .nav {
  position: static; width: 100%; height: auto;
  overflow: visible; visibility: visible; background: none; box-shadow: none;
}
html:not(.js) .nav__list { display: block; padding: 0; }
html:not(.js) .nav__item {
  opacity: 1; transform: none;
  border: 0; border-top: 1px solid var(--line-soft);
  padding-block: var(--s-4);
}
html:not(.js) .nav__link { padding: 0; }
html:not(.js) .nav__chev { display: none; }
html:not(.js) .mega {
  position: static; display: block;
  width: auto; height: auto; overflow: visible;
  opacity: 1; visibility: visible; transform: none;
  border: 0; box-shadow: none;
}
html:not(.js) .mega__inner {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  max-height: none;
  gap: var(--s-5);
  padding: var(--s-4) 0 0;
}
html:not(.js) .mega__col,
html:not(.js) .mega__feature { opacity: 1; transform: none; }
html:not(.js) .mega__feature { display: none; }
html:not(.js) .nav__drawer-foot { display: grid; }
html:not(.js) .hero { padding-top: clamp(1.5rem, 1rem + 2.5vw, 3rem); }

html:not(.js) .visit__tabs { display: none; }
html:not(.js) .visit__pane[hidden] { display: grid !important; }
html:not(.js) .visit__pane + .visit__pane { border-top: 1px solid var(--line); }
html:not(.js) .visit__map iframe[data-src] { display: none; }

/* Without JS the banner holds on slide 1: the controls would have nothing to
   drive, and the remaining slides are stacked behind it with no way through. */
html:not(.js) .hero__foot .hero__controls { display: none; }

html:not(.js) .carousel__track { flex-wrap: wrap; }
html:not(.js) .carousel__controls { display: none; }

@media (max-width: 1180px) {
  html:not(.js) .mega { grid-template-rows: 1fr; }
}

/* ------------------------------------------------------------------ 28. 404 ERROR PAGE */
.error-hero {
  min-height: 85vh;
  position: relative;
  padding-top: calc(82px + clamp(2.5rem, 2rem + 3vw, 5rem));
  padding-bottom: clamp(4rem, 3rem + 3vw, 6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.error-hero__wash {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1000px 520px at 50% 15%, rgba(243, 218, 103, .28), transparent 70%),
    radial-gradient(750px 500px at 80% 80%, rgba(24, 154, 214, .09), transparent 65%),
    linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%);
}
.error-hero__inner {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.error-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-800);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.error-hero__code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 3.5rem + 8vw, 10.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--brand-900) 25%, var(--brand-600) 65%, var(--sun-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--s-3);
}
.error-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.6rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.error-hero__desc {
  font-size: clamp(1.05rem, 1rem + .2vw, 1.22rem);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--s-7);
}
.error-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.error-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-7);
  text-align: left;
}
.error-card {
  padding: 1.2rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
  display: block;
}
.error-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-md);
  background: var(--brand-50);
}
.error-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .25rem;
}
.error-card__desc {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.4;
}

/* ------------------------------------------------------------------ 29. PRINT */
@media print {
  .header, .nav-scrim, .to-top, .video__play, .carousel__controls,
  .quiz__media, .ba__range, .ba__handle { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
}

/* ==========================================================================
   INTERIOR PAGES
   Components used by every page that is not the homepage: the page hero,
   breadcrumbs, split copy/media rows, comparison tables, FAQ accordions
   and the closing call-to-action band.
   ========================================================================== */

.section--alt { background: var(--ivory); }

/* ------------------------------------------------------------- page hero -- */
/* Interior-page hero: a contained brand-blue card. Deliberately plain — one
   soft gradient, a single light wash, and tight type. */
/* A light card: paper-and-sky gradient, cooling from blue into warm cream, with
   the photo panel masked so it dissolves into the field rather than butting
   against it. Shared by every interior page. */
.page-hero {
  position: relative;
  max-width: var(--w-wide);
  margin: calc(var(--header-h) + var(--header-float) + clamp(.75rem, .4rem + 1.2vw, 1.5rem)) auto 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(26, 128, 192, .1), transparent 72%),
    linear-gradient(158deg, #e8f1fb 0%, #f1f6fc 38%, #f7f4ec 74%, var(--sand-100) 100%);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(16, 55, 92, .04),
              0 30px 60px -40px rgba(16, 55, 92, .45);
  overflow: hidden;
}
/* depth: a cool bloom behind the photo, a warm one at the copy foot */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(54% 80% at 68% 4%, rgba(26, 128, 192, .16), transparent 68%),
    radial-gradient(46% 62% at 62% 108%, rgba(26, 128, 192, .14), transparent 68%),
    radial-gradient(38% 52% at 0% 100%, rgba(192, 143, 61, .14), transparent 72%);
  pointer-events: none;
}
/* copy column owns the vertical rhythm so the photo can bleed to the edges */
.page-hero__inner { padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }

/* photo panel — above the ::after glow layer, which would otherwise wash it */
.page-hero__media { position: relative; z-index: 1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Portrait sources crop the wrong way by default. The shared bias below is
   tuned for landscape stills (centre 28%); on a tall frame it fills the panel
   with headroom and pushes the face down behind the stat band. Bias down the
   frame instead, at every width — the stacked mobile panel crops hardest. */
/* the doubled class outranks the .page-hero__media img rule inside the 940px
   block below, which would otherwise win on source order */
.page-hero__media.page-hero__media--portrait img { object-position: center 70%; }

@media (min-width: 940px) {
  .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    align-items: center;
    min-height: 30rem;
  }
  .page-hero__inner { grid-column: 1; }
  .page-hero__media { grid-column: 2; align-self: stretch; }
  /* absolute so the photo fills the column instead of dictating its height */
  .page-hero__media img { position: absolute; inset: 0; object-position: center 28%; }
  /* Dissolve the photo into the field with a mask. A scrim painted over the
     seam can't hide it when the photo is lighter or darker than the ground —
     that join is what read as a hard band. */
  .page-hero__media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 20%, rgba(0, 0, 0, .82) 46%, #000 68%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 20%, rgba(0, 0, 0, .82) 46%, #000 68%);
  }
  /* lift the crop so it sits in the paper field instead of punching a hole in it */
  .page-hero__media img { filter: saturate(.9) contrast(.98) brightness(1.04); }
  /* paper wash, inside the mask so it fades out with the photo */
  .page-hero__media::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(90deg, rgba(241, 246, 252, .72) 0%, rgba(241, 246, 252, .18) 42%, transparent 70%),
      linear-gradient(0deg, rgba(247, 244, 236, .55) 0%, transparent 44%);
    pointer-events: none;
  }
}
@media (max-width: 939px) {
  .page-hero__media { aspect-ratio: 16 / 9; }
  .page-hero__media img { border-radius: 0; }
  /* Staff portraits need their own frame: a landscape cover crop cuts off
     heads. Keep the whole source visible and limit low-resolution upscaling. */
  .page-hero__media--profile,
  .page-hero__media:has(img[src*="braces-tracy-01"]),
  .page-hero__media:has(img[src*="dr-dante"]) {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    aspect-ratio: auto !important;
    padding-inline: var(--gutter);
  }
  .page-hero__media--profile img,
  .page-hero__media img[src*="braces-tracy-01"],
  .page-hero__media img[src*="dr-dante"] {
    width: auto;
    height: auto;
    max-width: min(100%, 280px);
    max-height: 420px;
    object-fit: contain !important;
    object-position: center bottom;
  }
}
@media (min-width: 1500px) { .page-hero { margin-inline: auto; } }
@media (max-width: 1480px) { .page-hero { margin-inline: var(--gutter); } }

.page-hero__wash {
  position: absolute; inset: 0; z-index: 0;
  background: none;
  pointer-events: none;
}
/* fine grain — a flat wash of colour at this size is what reads as cheap */
.page-hero__wash::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .38;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* keep the shell on the page grid, but hold the copy to a reading measure so
   it left-aligns with the rest of the page instead of floating centred */
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__inner > * { max-width: min(42rem, 100%); }

.page-hero__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 1.4rem + 2.4vw, 3.15rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.018em;
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero__title { color: var(--brand-900); }
.page-hero__title em { font-style: italic; color: var(--sand-700); }

.page-hero__meta {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sand-700);
}
.page-hero__serving {
  margin-top: var(--s-3);
  max-width: 60ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.page-hero__lede {
  margin-top: var(--s-4);
  max-width: 50ch;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-2);
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 599px) {
  .page-hero__actions { flex-direction: column; align-items: stretch; margin-top: var(--s-5); }
  .page-hero__actions .btn {
    width: 100%;
    min-height: 48px;
    padding: .85rem 1rem;
    font-size: .9375rem;
    line-height: 1.45;
  }
}

/* breadcrumb */
.page-hero .crumbs ol { letter-spacing: .1em; color: var(--ink-3); }
.page-hero .crumbs a { border-bottom-color: transparent; }
.page-hero .crumbs a:hover { color: var(--brand-700); border-bottom-color: var(--brand-200); }
.page-hero .crumbs [aria-current="page"] { color: var(--ink-2); }

/* When a stat-band card tucks up under the hero (negative margin-top, up to
   7rem), the hero needs enough bottom padding that the card overlaps empty
   space rather than the hero actions. Applies on every page with this
   pairing so the hero layout stays consistent site-wide. */
.page-hero:has(+ .stat-band) .page-hero__inner { padding-bottom: clamp(7.5rem, 5rem + 8vw, 11rem); }


/* ------------------------------------------- blog index hero (masthead) ----
   The blog landing page fronts 49 articles, so its hero gets masthead extras on
   top of the shared light field: an oversized display title, a kicker rule and
   a run of facts where the interior pages carry an eyebrow. */
.page-hero--index .page-hero__inner { z-index: 2; }

.page-hero--index .page-hero__kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand-700);
}
.page-hero--index .page-hero__kicker::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--sand-500), rgba(192, 143, 61, .12));
}
.page-hero--index .page-hero__title {
  margin-top: var(--s-3);
  font-size: clamp(2.9rem, 1.9rem + 4.4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.page-hero--index .page-hero__lede { max-width: 46ch; }

/* the run of facts, hung under a hairline where the date line used to sit */
.page-hero--index .page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-hero--index .page-hero__facts li { display: flex; align-items: center; gap: .5rem; }
.page-hero--index .page-hero__facts li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sand-500);
}
/* the display serif renders old-style figures, which set the numeral below the
   x-height and read as a typo at this size — keep the count in the UI face */
.page-hero--index .page-hero__facts strong {
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brand-800);
}

@media (min-width: 940px) {
  /* the family crop biases right — the mask eats the left of the column */
  .page-hero--index .page-hero__media img { object-position: 62% 32%; }
}

/* ============================================================ BLOG ARTICLE ==
   A dedicated editorial layout for <main class="article">: a light hero, a
   three-column reading view (contents rail / prose / share rail), a serif
   drop-cap opener, gold section headings, an inline CTA card and a
   "Keep reading" card row. Scoped so no other interior page is touched.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ----- */
/* A tinted editorial band. The lead image is pulled up so it emerges from the
   colour into the white reading area below. */
.page-hero--article {
  position: relative;
  isolation: isolate;
  /* opt out of the split copy/photo grid: the article hero is full-bleed and
     centred, with no .page-hero__media panel */
  display: block;
  max-width: none;
  margin: calc(var(--header-h) + var(--header-float)) 0 0;
  padding: clamp(2.75rem, 1.8rem + 3.5vw, 4.5rem) 0
           clamp(4.25rem, 2.75rem + 5vw, 7rem);
  background:
    radial-gradient(55% 60% at 85% -5%, rgba(26, 128, 192, .12), transparent 70%),
    linear-gradient(182deg, #e9f1fa 0%, #f1f6fc 34%, var(--paper) 72%);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* faint grain */
.page-hero--article::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .5;
  mix-blend-mode: multiply;
}
.page-hero--article::after { content: none; }
.page-hero--article .page-hero__wash,
.page-hero--article .page-hero__glow { display: none; }
.page-hero--article .page-hero__inner {
  position: relative;
  max-width: var(--article-measure, 44rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* thin gold hairline centred under the byline, tying the band together */
.page-hero--article .page-hero__inner::after {
  content: "";
  display: block;
  width: 3.5rem; height: 2px;
  margin-top: var(--s-6);
  background: var(--sand-500);
}

.page-hero__back {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-3);
  width: fit-content;
}
.page-hero__back::before { content: "\2190"; }
.page-hero__back:hover { color: var(--brand-700); }

.page-hero--article .page-hero__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s-6);
  padding: .4rem .95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-700);
  box-shadow: 0 6px 16px -8px rgba(23, 103, 157, .5);
}
.page-hero--article .page-hero__kicker::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--sand-300);
}
.page-hero--article .page-hero__kicker-rule { display: none; }

.page-hero--article .page-hero__title {
  margin-top: var(--s-5);
  font-size: clamp(2rem, 1.15rem + 3vw, 3.35rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.016em;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: balance;
}

.page-hero--article .page-hero__byline {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.page-hero--article .page-hero__byline::before {
  content: "";
  width: 2.1rem; height: 2.1rem;
  margin-right: .7rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand-50) url("../assets/team/dr-dante-gonzales.webp") center 15% / cover;
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(20, 35, 46, .25);
}
.page-hero--article .page-hero__byline span:not(:first-child)::before {
  content: "\00B7"; margin: 0 .5rem; opacity: .55;
}
.page-hero--article .page-hero__byline-name { color: var(--ink-2); font-weight: 600; }

.page-hero--article .page-hero__actions,
.page-hero--article .crumbs { display: none; }

/* the lead image — pulled up so its top third sits on the tinted band */
.article__figure {
  position: relative;
  z-index: 2;
  max-width: clamp(44rem, 40rem + 12vw, 56rem);
  margin: clamp(-3.5rem, -2.25rem - 4vw, -6rem) auto 0;
  padding-inline: var(--gutter);
}
.article__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 6px solid var(--paper);
  box-shadow: 0 2px 6px rgba(20, 35, 46, .06), 0 30px 60px -30px rgba(20, 35, 46, .4);
}

/* -------------------------------------------------------- reading layout --- */
.article { --article-measure: 44rem; }

.article-cols {
  display: grid;
  column-gap: 0;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] minmax(0, var(--article-measure))
    [main-end]   minmax(0, 1fr)
    [full-end];
  padding: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem) var(--gutter)
           clamp(3rem, 2rem + 4vw, 5rem);
}
.article-body { grid-column: main-start / main-end; min-width: 0; }

/* contents rail — hangs in the left gutter, aligned to the prose column */
.article-toc {
  grid-column: full-start / main-start;
  grid-row: 1 / -1;
  justify-self: end;
  width: min(13.5rem, 100%);
  padding-right: clamp(1.25rem, 0.4rem + 2.6vw, 3.5rem);
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.article-toc__label {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.article-toc ol { display: grid; gap: .6rem; counter-reset: none; }
.article-toc a {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-3);
  padding-left: .9rem;
  border-left: 2px solid var(--line);
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.article-toc a:hover { color: var(--ink-2); }
.article-toc a.is-active { color: var(--sand-700); border-left-color: var(--sand-500); font-weight: 600; }

/* share rail — hangs in the right gutter */
.article-share {
  grid-column: main-end / full-end;
  grid-row: 1 / -1;
  justify-self: start;
  padding-left: clamp(1rem, 0.4rem + 2vw, 2.75rem);
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
.article-share__label {
  writing-mode: vertical-rl;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.article-share a {
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.article-share a:hover {
  color: var(--brand-700); border-color: var(--brand-200);
  background: var(--brand-50); transform: translateY(-1px);
}
.article-share svg { width: 15px; height: 15px; fill: currentColor; }

/* ------------------------------------------------------------- prose ------- */
.article .section { padding-block: 0; background: none; }
.article .section .shell,
.article .section .shell--narrow { max-width: none; padding-inline: 0; }
.article .section + .section { padding-top: clamp(2rem, 1.5rem + 1.4vw, 2.85rem); }
.article .section__head { max-width: none; margin-bottom: var(--s-4); }

.article .section__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.28rem + .9vw, 1.95rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.005em;
  color: var(--sand-700);
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}
.article .split__copy > .section__title { margin-bottom: var(--s-4); }

.article .split { display: block; }
.article .split__media { margin-top: var(--s-6); }
.article .split__media img {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 35, 46, .05), 0 16px 34px -22px rgba(20, 35, 46, .26);
}

.article .prose { font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); }
.article .prose p { margin-top: 1.15em; }
.article .prose p:first-child { margin-top: 0; }
.article .prose > h3, .article .prose > h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.3;
  font-weight: 600;
  margin: 1.9em 0 .3em;
}
.article .prose > h3 { font-size: 1.32rem; }
.article .prose > h4 { font-size: 1.1rem; }
.article .prose a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article .prose a:hover { color: var(--brand-800); }
.article .prose strong { color: var(--ink); font-weight: 600; }

/* drop cap on the opening paragraph */
.article-body > .section:first-child .prose > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.5em;
  line-height: .78;
  margin: .04em .1em 0 0;
  color: var(--sand-700);
}

.article .ticks { margin-top: 1.4rem; gap: .7rem; }
.article .ticks a { color: var(--brand-700); }
.article .ticks a:hover { color: var(--brand-800); text-decoration: underline; text-underline-offset: 2px; }

.article .table-scroll { margin: 1.9rem 0 .4rem; }
.article .compare { min-width: 30rem; font-size: var(--fs-sm); }

.article .faq { margin-top: var(--s-5); }
.article .faq__q { font-size: 1rem; }
.article .section:has(.faq) .section__title { margin-bottom: var(--s-2); }

/* --------------------------------------------------------- inline CTA card - */
.article-cta {
  margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--brand-50), var(--paper) 70%);
  text-align: center;
}
.article-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
  font-weight: 500;
  color: var(--ink);
}
.article-cta__text {
  margin: var(--s-3) auto 0;
  max-width: 46ch;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.article-cta .btn { margin-top: var(--s-5); }

/* page-level use of the same card (primary CTA at the end of every page) */
.article-cta--page { margin-top: 0; }

.article__disclaimer {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

/* ------------------------------------------------------- keep reading ------ */
.related {
  border-top: 1px solid var(--line);
  background: var(--ivory);
  padding: clamp(2.75rem, 2rem + 3vw, 4.5rem) var(--gutter)
           clamp(3rem, 2.2rem + 3vw, 5rem);
}
.related__inner { max-width: var(--w-page); margin-inline: auto; }
.related__label {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-6);
}
.related__grid {
  display: grid;
  gap: clamp(1.25rem, .8rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* same system as the blog index .post-card, scaled for the narrower card */
.related-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 55, 92, .04),
              0 14px 30px -24px rgba(16, 55, 92, .55);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}
.related-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-200);
  box-shadow: 0 2px 4px rgba(16, 55, 92, .05),
              0 32px 60px -32px rgba(16, 55, 92, .45);
}
.related-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.related-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01);
  transition: transform .9s cubic-bezier(.2, .8, .25, 1);
}
.related-card:hover .related-card__media img { transform: scale(1.07); }
.related-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 40, 67, .34) 0%, transparent 32%,
                                      transparent 64%, rgba(11, 40, 67, .2) 100%);
  pointer-events: none;
}
.related-card__tag {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  padding: .34rem .72rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  background: rgba(11, 40, 67, .42);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
          backdrop-filter: blur(10px) saturate(1.5);
  color: #fff;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.related-card__body {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3); flex: 1;
  padding: clamp(1.15rem, 1rem + .8vw, 1.45rem);
}
.related-card__body::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--sand-500), var(--brand-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e-out);
}
.related-card:hover .related-card__body::before { transform: scaleX(1); }
.related-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -.012em;
  color: var(--ink);
  transition: color var(--t-fast) var(--e-out);
}
.related-card:hover .related-card__title { color: var(--brand-700); }
/* the meta line doubles as the card foot, so the arrow hangs off it */
.related-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.related-card__meta::after {
  content: "\2192";
  flex: none;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .95rem; color: var(--brand-700);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.related-card:hover .related-card__meta::after {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  transform: translateX(3px);
}

/* spacing when prose resumes after a list or table */
.article .ticks + .prose,
.article .table-scroll + .prose { margin-top: var(--s-5); }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1180px) {
  .article-share { display: none; }
  .article-cols { grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, var(--article-measure)) [main-end] minmax(0, 1fr) [full-end]; }
  .article-toc { width: min(12rem, 100%); }
}
@media (max-width: 940px) {
  .article-cols { display: block; max-width: var(--article-measure); margin-inline: auto; }
  .article-toc {
    position: static;
    width: auto;
    margin-bottom: var(--s-7);
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--ivory);
  }
  .article-toc ol { gap: .5rem; }
  .article__figure { max-width: var(--article-measure); }
}
@media (max-width: 560px) {
  .article .prose { font-size: 1.02rem; }
}

/* ----------------------------------------------------------- breadcrumbs -- */
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .55; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.crumbs a:hover { color: #fff; border-bottom-color: #fff; }
.crumbs [aria-current="page"] { color: #fff; }

/* --------------------------------------------------- split copy / media -- */
.split { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
/* grid items default to min-width:auto, so anything with a wide min-content —
   the 640px .compare table, a long unbroken string — stops the column
   shrinking and pushes the whole page sideways on a phone. The table's own
   .table-scroll can only do its job once the column is allowed to be narrow. */
.split__copy, .split__media { min-width: 0; }
.split__media { display: grid; gap: var(--s-4); }
.split__media img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .split--reverse .split__copy { order: 2; }
  .split--reverse .split__media { order: 1; }
}

.badge-figure { margin-top: var(--s-6); }
.badge-figure img { height: auto; max-width: 200px; }

/* Treatment pages share compact copy/photo rows. Short copy is centred next
   to the photograph; long copy starts at the same top edge as the image. */
.treatment-content .split { align-items: center; }
.treatment-content .split__copy > .section__title {
  font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.2;
  text-wrap: pretty;
}
.treatment-content .split__copy .prose { font-size: 1rem; line-height: 1.7; }
.treatment-content .split__copy > .prose { margin-top: var(--s-5); }
.treatment-content .split__copy > .prose:first-child { margin-top: 0; }
.treatment-content .split__media { align-self: start; }
.treatment-content .split__media:not(.badge-figure):not(.split__media--profile):not(:has(img[src*="braces-tracy-01"])):not(:has(img[src*="dr-dante"])) > img:not([src*="braces-tracy-01"]):not([src*="dr-dante"]) {
  aspect-ratio: 1;
  object-fit: cover;
}
@media (max-width: 859px) {
  .treatment-content .split { gap: var(--s-6); }
  .treatment-content .split__media:not(.badge-figure):not(.split__media--profile):not(:has(img[src*="braces-tracy-01"])):not(:has(img[src*="dr-dante"])) > img:not([src*="braces-tracy-01"]):not([src*="dr-dante"]) { aspect-ratio: 4 / 3; }
}

/* Doctor portrait in split section — preserve full figure */
.treatment-content .split__media--profile > img,
.treatment-content .split__media:has(img[src*="braces-tracy-01"]) > img,
.treatment-content .split__media:has(img[src*="dr-dante"]) > img,
.treatment-content .split__media > img[src*="braces-tracy-01"],
.treatment-content .split__media > img[src*="dr-dante"],
.split__media--profile > img,
.split__media:has(img[src*="braces-tracy-01"]) > img,
.split__media:has(img[src*="dr-dante"]) > img,
.split__media > img[src*="braces-tracy-01"],
.split__media > img[src*="dr-dante"] {
  aspect-ratio: 4 / 5 !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  background: linear-gradient(168deg, var(--brand-100) 0%, var(--brand-50) 100%) !important;
}

@media (max-width: 859px) {
  .split__media--profile,
  .split__media:has(img[src*="braces-tracy-01"]),
  .split__media:has(img[src*="dr-dante"]) {
    width: 100%;
    max-width: min(340px, 100%);
    margin-inline: auto;
  }
}


/* Longer checklists and supporting copy continue below the image row. */
.treatment-content .split--summary .split__media { align-self: center; }
.treatment-content .split--summary .split__media > img { aspect-ratio: 4 / 3; }
.section-details {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-soft);
}
.section-details__title {
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.25;
}
.section-details > .ticks { margin-top: 0; gap: var(--s-5) var(--s-8); }
.section-details > .prose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-5) var(--s-8);
  max-width: none;
  font-size: 1rem;
}
.section-details > .prose > * { margin: 0; }
.section-details > .prose > h3 { grid-column: 1 / -1; }
.section-details > .cta-row { margin-top: var(--s-6); }
.section-details + .table-scroll { margin-top: var(--s-7); }
.provider-inline {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-900);
}
.provider-inline img { flex: none; width: 32px; height: auto; }
.provider-inline__year { display: block; color: var(--ink-3); font-weight: 400; }
@media (min-width: 760px) {
  .section-details > .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Credential introductions use a compact award card, rather than reserving
   an entire photo column for a small badge. Supporting copy spans the row. */
.credential-intro__top {
  display: grid;
  align-items: center;
  gap: var(--s-6);
}
.credential-intro__lead { min-width: 0; }
.credential-intro .section__title {
  font-size: clamp(1.85rem, 1.25rem + 1.5vw, 2.6rem);
  line-height: 1.2;
  text-wrap: pretty;
}
.credential-intro .prose {
  max-width: none;
  font-size: 1rem;
  line-height: 1.75;
}
.credential-intro__lead > .prose { margin-top: var(--s-5); }
.provider-credential {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--brand-50), var(--paper) 75%);
  box-shadow: var(--sh-sm);
}
.provider-credential img { flex: none; width: 80px; height: auto; }
.provider-credential figcaption { min-width: 0; }
.provider-credential__label {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.provider-credential strong {
  display: block;
  margin-top: var(--s-2);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-900);
}
.provider-credential__year {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.credential-intro__details {
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-soft);
}
.credential-intro__details .prose { display: grid; gap: var(--s-5) var(--s-8); }
.credential-intro__details .prose > * { margin: 0; }
.credential-intro__details h3 { grid-column: 1 / -1; }
.credential-intro > .cta-row { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .credential-intro__top { grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2rem, 4vw, 4rem); }
  .credential-intro__details .prose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-intro__details .prose > p:last-child:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  .provider-credential { gap: var(--s-4); padding: var(--s-4); }
  .provider-credential img { width: 64px; }
}

/* Sleep apnea overview: symptom cards and a quieter supporting callout. */
.sleep-treatment__head { max-width: 760px; }
.sleep-treatment__link { margin-top: var(--s-6); }
.sleep-treatment .split__copy > .prose > h3:first-child { margin-top: 0; }
.sleep-signs { display: grid; gap: var(--s-4); }
.sleep-sign {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.sleep-sign__number {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.sleep-sign h3 { font-size: 1.05rem; line-height: 1.4; font-weight: 600; }
.sleep-sign p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); }
.sleep-impact {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 3px solid var(--brand-500);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--brand-50);
}
.sleep-impact h3 {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2;
}
.sleep-impact > p { color: var(--ink-2); }
.sleep-treatment__locations { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--ink-2); }
.sleep-treatment__locations a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 620px) {
  .sleep-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .sleep-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sleep-impact { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: var(--s-8); }
}

/* Tracy sleep apnea page: local navigation, treatment options and office. */
.sleep-page-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: var(--s-6); }
.sleep-page-nav a { font-size: var(--fs-xs); font-weight: 600; color: var(--brand-700); padding-block: .5rem; border-bottom: 1px solid var(--brand-100); }
.apnea-options { display: grid; gap: var(--s-5); }
.apnea-option {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line-soft); border-top: 3px solid var(--brand-500);
  border-radius: var(--r-lg); background: var(--paper);
}
.apnea-option h3 { margin-block: var(--s-4); font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; line-height: 1.2; }
.apnea-option > p { color: var(--ink-2); }
.apnea-option .apnea-option__result { margin-top: auto; padding-top: var(--s-5); }
.apnea-option__result span { display: block; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); font-weight: 600; color: var(--brand-700); }
.sleep-followup, .sleep-faq { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.sleep-followup .section__title, .sleep-faq .section__title { font-size: clamp(1.85rem, 1.25rem + 1.5vw, 2.6rem); }
.sleep-followup .prose { max-width: none; font-size: 1rem; }
.sleep-office { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg); }
.sleep-office h2 { margin-top: var(--s-4); font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.2; }
.sleep-office .prose { margin-top: var(--s-5); font-size: var(--fs-sm); }
.sleep-office address { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--brand-100); font-size: var(--fs-sm); color: var(--ink-2); }
.sleep-faq > .section__head { margin-bottom: 0; }
.sleep-faq > .faq { margin-top: 0; min-width: 0; }
@media (min-width: 900px) {
  .sleep-signs--three, .apnea-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sleep-followup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sleep-faq { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
}

/* Keep the free guide attached to the FAQ section with its own clear spacing. */
.report-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5); margin-top: var(--s-7); padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--brand-100); border-radius: var(--r-lg); background: var(--brand-50);
}
.report-callout > div { flex: 1 1 20rem; min-width: 0; }
.report-callout h3 { margin-top: var(--s-2); font-family: var(--font-display); font-size: 1.85rem; font-weight: 500; line-height: 1.2; }
.report-callout h3 + p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); }
.report-callout__format { font-size: .625rem; letter-spacing: .06em; padding: .15rem .35rem; border: 1px solid currentColor; border-radius: 4px; }
.teen-faq-section { padding-bottom: clamp(3rem, 4vw, 4rem); }
.teen-faq-section + .testimonials { padding-top: clamp(3rem, 4vw, 4rem); }
.promises--grid.teen-faq-grid .promise { flex: 0 1 100%; max-width: none; }
@media (min-width: 720px) {
  .promises--grid.teen-faq-grid .promise { flex-basis: calc((100% - var(--s-5)) / 2); }
}
@media (min-width: 1100px) {
  .promises--grid.teen-faq-grid .promise { flex-basis: calc((100% - var(--s-5) * 2) / 3); }
}

/* ------------------------------------------------------ comparison table -- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* a table set under prose or a photo row needs its own air, otherwise the
   header band butts straight against the block above it */
.prose + .table-scroll,
.split + .table-scroll,
.cta-row + .table-scroll,
.ticks + .table-scroll,
.media-grid + .table-scroll { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.compare {
  width: 100%; min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.compare thead th {
  background: var(--brand-700);
  color: var(--ink-inv);
  font-weight: 600;
  text-align: left;
  padding: var(--s-4) var(--s-5);
}
.compare tbody th,
.compare tbody td {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.compare tbody th { font-weight: 600; color: var(--ink); text-align: left; white-space: nowrap; }
.compare tbody tr:nth-child(even) { background: var(--ivory); }

/* ------------------------------------------------------ numbered benefits -- */
/* Centred flex rather than a grid: when the card count is not a multiple of
   the column count (Invisalign runs seven benefits), the remainder sits under
   the middle of the row above instead of stranding a lone card on the left. */
.promises--grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}
.promises--grid .promise { flex: 1 1 17rem; max-width: 24rem; }
.promises--grid .promise {
  border-right: 0;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.promises--grid .promise:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.promise__head { display: flex; align-items: baseline; gap: var(--s-3); }
.promises--grid .promise__text { margin-top: var(--s-4); font-size: var(--fs-sm); }

/* ---- multi-column tick lists ----
   A six- or eight-item checklist set as one column leaves the right half of a
   full-width section empty. Two columns fill the measure and halve the height. */
@media (min-width: 720px) {
  .ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
/* a long checklist (a dozen symptoms, say) reads better three abreast */
@media (min-width: 1000px) {
  .ticks--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
@media (min-width: 720px) and (max-width: 999px) {
  .ticks--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}

/* a closing statement that owns its section: centred block, centred lines */
.prose--center {
  margin-inline: auto;
  text-align: center;
}
/* a checklist under a centred head: the group centres, the items stay
   left-aligned so the ticks line up with each other */
.ticks--center { margin-inline: auto; width: fit-content; max-width: 100%; }
/* buttons under a centred head */
.cta-row--center { justify-content: center; }

/* it follows a grid of cards often enough to need its own air */
.journey-grid + .prose--center,
.path-grid + .prose--center,
.ticks + .prose--center { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }

/* ------------------------------------------------------------------- FAQ -- */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--brand-200); box-shadow: var(--sh-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
  font-weight: 600; color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none;
  width: .62rem; height: .62rem;
  border-right: 2px solid var(--brand-700);
  border-bottom: 2px solid var(--brand-700);
  transform: rotate(45deg) translateY(-.15rem);
  transition: transform var(--t-fast) var(--e-out);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-.15rem); }
.faq__q:hover { background: var(--brand-50); }
.faq__a { padding: 0 var(--s-5) var(--s-5); }
.faq__a p { color: var(--ink-2); }

/* ------------------------------------------------------------- CTA band -- */
.cta-band { text-align: center; background: var(--ivory); }
.cta-band .prose { margin-inline: auto; }
.cta-band__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-7);
}

/* ------------------------------------------------------------ quiz band -- */
.quiz--band { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.quiz--band .quiz__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
}
/* the copy takes the slack, the actions keep their natural width, so the two
   sit on one line instead of the copy pushing the button onto its own row */
.quiz--band .quiz__inner > :first-child { flex: 1 1 26rem; min-width: 0; }
.quiz--band .quiz__actions { margin-top: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .promises--grid .promise, .faq__q::after { transition: none; }
}

/* The bar is now always an opaque-enough light glass strip, so the interior
   pages' dark hero no longer needs an inverted logo or inverted nav links.
   The hero simply scrolls under the bar. */

/* --------------------------------------------- media grid (3+ images) ----- */
.media-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.media-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.media-grid img:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
@media (prefers-reduced-motion: reduce) {
  .media-grid img { transition: none; }
  .media-grid img:hover { transform: none; }
}

/* Opt-in even-height row. Only for grids of like-for-like photos whose source
   ratios disagree; the crop favours the top of the frame so faces survive it.
   Deliberately NOT applied to grids holding before/after comparisons (cropping
   the sides would cut the comparison in half) or wide UI graphics. */
.media-grid--even img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 25%;
}

/* ----------------------------------------- inline call-to-action buttons -- */
.cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

/* ------------------------------------------------ 27. ANIMATED CURSOR ----- */
/* Anything clickable says so. */
a[href], label[for], summary,
[role="button"], [role="tab"],
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}



/* ==========================================================================
   CONTACT PAGE REDESIGN
   ========================================================================== */

.contact-hero-cards {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: 1fr;
  margin-top: calc(-1 * clamp(1.5rem, 2.5vw, 3rem));
  position: relative;
  z-index: 2;
}
@media (min-width: 640px) {
  .contact-hero-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .contact-hero-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-quick-card {
  background: var(--paper);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  position: relative;
  overflow: hidden;
}
.contact-quick-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
}
.contact-quick-card--accent::before {
  background: linear-gradient(90deg, var(--sun-400), var(--sun-600));
}
.contact-quick-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-300);
}

.contact-quick-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.contact-quick-card--accent .contact-quick-card__icon {
  background: var(--sun-50);
  color: var(--sun-700);
}
.contact-quick-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.contact-quick-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
}
.contact-quick-card--accent .contact-quick-card__tag {
  color: var(--sun-800);
  background: var(--sun-100);
}

.contact-quick-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.contact-quick-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.contact-quick-card__action {
  margin-top: var(--s-2);
}

/* Location Switcher / Banner */
.contact-location-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.5rem;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  width: fit-content;
  margin: 0 auto var(--s-7);
}
.contact-location-switch__btn {
  padding: 0.6rem 1.4rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: all var(--t-fast) var(--e-out);
}
.contact-location-switch__btn:hover {
  color: var(--brand-700);
  background: var(--brand-50);
}
.contact-location-switch__btn.is-active {
  background: var(--brand-700);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(23, 103, 157, 0.3);
}

/* Office Details Card */
.contact-office-box {
  background: var(--paper);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  padding: clamp(1.75rem, 1.5rem + 2vw, 3rem);
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
}
@media (min-width: 900px) {
  .contact-office-box {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }
}

.contact-office-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  /* grid item: without this it refuses to shrink below its widest line and
     pushes the card past the screen edge on a 320px phone */
  min-width: 0;
}

.contact-office-header h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  color: var(--brand-900);
  margin-top: var(--s-2);
  margin-bottom: 0.35rem;
}
.contact-office-header p {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  margin: 0;
}

.contact-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-detail-item__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-detail-item__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.contact-detail-item__content {
  flex: 1;
  min-width: 0;
  /* the office email is a single 257px unbreakable token — on a 320px screen
     it has to be allowed to break mid-word or it drags the page sideways.
     `anywhere` (not `break-word`) is required: it also shrinks the min-content
     width, which is what lets the flex item narrow in the first place. */
  overflow-wrap: anywhere;
}
.contact-detail-item__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.contact-detail-item__val {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
}
.contact-detail-item__val a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--e-out);
}
.contact-detail-item__val a:hover {
  color: var(--brand-600);
}

/* Hours Table in contact page */
.contact-hours-table {
  background: var(--mist);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
}
.contact-hours-table__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.contact-hours-table__badge {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
}
.contact-hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.contact-hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.contact-hours-list li span {
  font-weight: 600;
  color: var(--ink);
}
.contact-hours-list li.is-highlight {
  color: var(--brand-700);
}
.contact-hours-list li.is-closed {
  color: var(--ink-3);
  opacity: 0.8;
}

/* Map frame inside contact */
.contact-map-frame {
  position: relative;
  min-height: 380px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  border: 1px solid var(--line);
  background: var(--mist);
  display: flex;
  flex-direction: column;
}
.contact-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Serving areas chips */
.serving-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s-3);
}
.serving-chip {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  transition: all var(--t-fast) var(--e-out);
}
.serving-chip:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}

/* Photo Gallery Grid for Offices */
.office-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: var(--s-6);
}
@media (max-width: 640px) {
  .office-photo-grid {
    grid-template-columns: 1fr;
  }
}
.office-photo-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--brand-50);
  aspect-ratio: 4/3;
}
.office-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--e-out);
}
.office-photo-card:hover img {
  transform: scale(1.05);
}
.office-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(16, 55, 92, 0.85));
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Enhanced section spacing & visual rhythm */
.appointment {
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) !important;
}
.section.testimonials,
.testimonials {
  padding-top: clamp(4rem, 3rem + 3.5vw, 6.5rem) !important;
  padding-bottom: clamp(4rem, 3rem + 3.5vw, 6.5rem) !important;
}
.section:not(.section--alt) + .testimonials,
.appointment + .testimonials {
  padding-top: clamp(4rem, 3rem + 3.5vw, 6.5rem) !important;
}

/* ==========================================================================
   BEFORE & AFTER GALLERY PAGE
   ========================================================================== */

.cases-grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: var(--s-7);
}
@media (min-width: 768px) {
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-card {
  background: var(--paper);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-300);
}
.case-card__visual {
  position: relative;
  background: #0f1c24;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.case-card__visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.5;
  object-fit: contain;
  display: block;
  background: #0d1a22;
  transition: transform var(--t-slow) var(--e-soft);
}
.case-card:hover .case-card__visual img {
  transform: scale(1.02);
}
.case-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.case-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.case-card__location {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 500;
}
.case-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.case-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

/* ---- treatment cards ----
   Three parallel descriptions that used to run as one column of prose with the
   photographs stranded in a row underneath. Each card now carries its own
   photograph, so the page can be scanned rather than read end to end. Same
   shell as `.case-card`, cropped to a consistent 4:3 so the row stays even
   despite the source images having different ratios. */
.treatments { align-items: stretch; }

.treatment {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
.treatment:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-300);
}

.treatment__visual { overflow: hidden; border-bottom: 1px solid var(--line); }
.treatment__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  transition: transform var(--t-slow) var(--e-soft);
}
.treatment:hover .treatment__visual img { transform: scale(1.04); }

.treatment__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.35rem, 1.1rem + .7vw, 1.7rem);
}
.treatment__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.treatment__text {
  margin: 0;
  font-size: .975rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* a chip above the title labels who the system suits; it must not stretch to
   the full width of the flex column */
.treatment__body .badge-chip { align-self: flex-start; }

/* a comparison table set directly under a row of treatment cards */
.treatments + .table-scroll { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  .treatment, .treatment__visual img { transition: none; }
  .treatment:hover { transform: none; }
  .treatment:hover .treatment__visual img { transform: none; }
}

/* Badge chip */
.badge-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
}
.badge-chip--gold {
  background: var(--sun-100);
  color: var(--sun-900);
  border-color: var(--sun-300);
}

/* Before & After — restored smile category labels */
.smile-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: var(--s-6) auto 0;
  padding: 0;
  list-style: none;
}
.smile-categories .badge-chip { font-size: var(--fs-xs); padding: .4rem .95rem; }

.section__lede--center { max-width: 920px; margin-inline: auto; text-align: center; }

/* 5 column cards grid */
.cards--5 {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Callout box */
.intro-callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--sh-sm);
}
.intro-callout__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  margin-bottom: 0.5rem;
}
.intro-callout__eyebrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}
.intro-callout__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* Feature card */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-600);
  display: grid;
  place-items: center;
}
.feature-card__icon svg {
  width: 24px;
  height: 24px;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.feature-card__body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* ---- treatment path cards ----
   The Braces & Invisalign hub indexes the five treatment pages. Five cards in a
   fixed three-column grid leave a hole in the second row, so the row is laid
   out with flex and centred instead: 3 + 2, with the pair sitting under the
   middle of the trio. */
.path-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.path-card {
  flex: 1 1 20rem;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
.path-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-200);
}
.path-card__media { overflow: hidden; border-bottom: 1px solid var(--line); }
.path-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--t-slow) var(--e-soft);
}
.path-card:hover .path-card__media img { transform: scale(1.04); }

.path-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.35rem, 1.1rem + .7vw, 1.7rem);
}
.path-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.path-card__text {
  margin: 0;
  font-size: .975rem;
  line-height: 1.65;
  color: var(--ink-2);
}
/* a price headline on a plain card */
.price-tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-800);
}
.price-tag--soft { color: var(--sand-700); }

/* a split that follows a row of cards inside the same section */
.split--after-cards { margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
/* a subheading introducing a checklist in a split column */
.split__subhead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* a text-only variant: no photo band, and tick lists sit comfortably inside */
.path-card--plain .path-card__body { gap: var(--s-4); }
.path-card--plain .ticks { margin-top: 0; gap: .6rem; }
.path-card--plain .ticks li { font-size: var(--fs-sm); }
.path-card--plain .path-card__text + .ticks { margin-top: 0; }

/* the link sits on the card foot so every card ends on the same line */
.path-card .link-arrow { margin-top: auto; padding-top: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .path-card, .path-card__media img { transition: none; }
  .path-card:hover { transform: none; }
  .path-card:hover .path-card__media img { transform: none; }
}

/* ==========================================================================
   BLOG INDEX REDESIGN
   ========================================================================== */

.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s-6);
  padding: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}
.blog-filter-btn {
  border: none;
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--e-out);
}
.blog-filter-btn:hover,
.blog-filter-btn.is-active {
  background: var(--brand-700);
  color: #ffffff;
}

/* Featured Lead Post */
.featured-post {
  display: grid;
  background: linear-gradient(135deg, var(--brand-900), var(--brand-800));
  border-radius: var(--r-2xl);
  color: #ffffff;
  overflow: hidden;
  box-shadow: var(--sh-xl);
  margin-bottom: var(--s-8);
  border: 1px solid var(--brand-700);
}
@media (min-width: 900px) {
  .featured-post {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
.featured-post__content {
  padding: clamp(1.75rem, 1.5rem + 2vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
}
.featured-post__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  background: rgba(243, 218, 103, 0.18);
  border: 1px solid rgba(243, 218, 103, 0.4);
  color: var(--sun-300);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: fit-content;
}
.featured-post__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
}
.featured-post__title a {
  color: inherit;
  text-decoration: none;
}
.featured-post__title a:hover {
  color: var(--sun-300);
}
.featured-post__excerpt {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
}
.featured-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--s-2);
}
.featured-post__visual {
  background: radial-gradient(circle at 30% 50%, rgba(243, 218, 103, 0.15), transparent 70%), #0c202d;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
}
.featured-post__visual svg {
  width: 120px;
  height: 120px;
  stroke: rgba(243, 218, 103, 0.4);
}

/* Post Cards */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  /* two-part shadow: a tight contact edge over a wide, very soft cast */
  box-shadow: 0 1px 2px rgba(16, 55, 92, .04),
              0 14px 30px -24px rgba(16, 55, 92, .55);
  overflow: hidden;
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}
.post-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-200);
  box-shadow: 0 2px 4px rgba(16, 55, 92, .05),
              0 32px 60px -32px rgba(16, 55, 92, .45);
}
.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.post-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--brand-50);
  overflow: hidden;
}
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .9s cubic-bezier(.2, .8, .25, 1);
}
.post-card:hover .post-card__thumb img { transform: scale(1.07); }
/* scrim: keeps the chip legible on light photos and grounds the crop */
.post-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 40, 67, .34) 0%, transparent 32%,
                                      transparent 64%, rgba(11, 40, 67, .2) 100%);
  pointer-events: none;
}
/* frosted chip rather than a solid navy slab */
.post-card__tag {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  padding: .34rem .72rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  background: rgba(11, 40, 67, .42);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
          backdrop-filter: blur(10px) saturate(1.5);
  /* --fs-2xs is not defined anywhere; the fallback is what actually applies */
  font-size: var(--fs-2xs, .72rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.post-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 1rem + 1vw, 1.65rem);
  gap: var(--s-3);
}
/* gold-to-blue hairline that draws in under the photo on hover */
.post-card__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--sand-500), var(--brand-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e-out);
}
.post-card:hover .post-card__body::before { transform: scaleX(1); }
.post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast) var(--e-out);
}
.post-card:hover .post-card__title { color: var(--brand-700); }
.post-card__excerpt {
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__foot {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.post-card__meta {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.post-card__cta {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .95rem;
  color: var(--brand-700);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.post-card:hover .post-card__cta {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  transform: translateX(3px);
}

/* ==========================================================================
   ABOUT PAGE
   A quieter, more editorial treatment than the card grids used elsewhere:
   hairlines instead of boxes, the display serif for anything numeric, and one
   warm accent spent sparingly against the brand blue.
   ========================================================================== */

/* -------------------------------------------------------------- 1. hero -- */
/* about-us runs its own two-column layout inside .page-hero__inner, so it
   opts out of the base split grid entirely */

/* --------------------------------------------------------- 2. stat band -- */
/* laps over the foot of the hero: no border, no chrome, just the numerals */
.stat-band { position: relative; z-index: 3; }
.stat-band__card {
  margin-top: clamp(-7rem, -8vw, -4rem);
  padding: clamp(2rem, 1.3rem + 2.4vw, 3.25rem) clamp(1.5rem, .5rem + 3.4vw, 3.5rem);
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-6);
  text-align: center;
}
@media (min-width: 860px) { .stat-band__grid { grid-template-columns: repeat(5, 1fr); } }
.stat-band__grid li { position: relative; display: grid; gap: .5rem; align-content: start; }
@media (min-width: 860px) {
  .stat-band__grid li + li::before {
    content: "";
    position: absolute; left: calc(var(--s-6) / -2); top: 6%; bottom: 6%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line) 22%, var(--line) 78%, transparent);
  }
}
.stat-band__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.15rem);
  font-weight: 500; line-height: .95;
  letter-spacing: -.015em;
  color: var(--brand-800);
}
.stat-band__label {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

/* ----------------------------------------------------------- 2b. mission -- */
/* the decorative open-quote is set 3rem above its block, which lands it on top
   of the eyebrow above. Drop it behind the quote instead of over the label.
   (The same collision exists on the homepage — left alone here on purpose.) */
.mission--about .mission__quote::before { top: .12em; z-index: 0; }
.mission--about .mission__quote p { z-index: 1; }

/* ------------------------------------------------------------- 3. story -- */
/* .section__title carries no margin of its own — it relies on .section__head
   for the gap, which this column does not use */
.story .section__title { margin-bottom: clamp(1.35rem, 1rem + 1vw, 2.1rem); }

/* one frame, given the whole column. Two half-width photos read as filler;
   a single tall one with a caption reads as a picture that was chosen. */
.story__figure { display: grid; gap: var(--s-4); margin: 0; }
.story__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.story__figure figcaption {
  padding-left: var(--s-4);
  border-left: 2px solid var(--sand-500);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

/* the founder's hand, closing the story column */
.signature {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  padding-top: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.signature img { flex: none; width: clamp(120px, 16vw, 160px); height: auto; opacity: .85; }
.signature__by { display: grid; gap: .1rem; }
.signature__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.signature__role { font-size: var(--fs-xs); color: var(--ink-3); }

/* ------------------------------------------------- 4. what sets us apart -- */
/* a numbered ledger. Six bordered cards read as a template; six hairline rows
   with a serif numeral read as an index. */
.ledger { display: grid; }
@media (min-width: 900px) {
  .ledger {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
  }
}
.ledger__item {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.ledger__num {
  flex: none;
  width: 2.1rem;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; line-height: 1.35;
  color: var(--sand-500);
  transition: color var(--t-mid) var(--e-out);
}
.ledger__item:hover .ledger__num { color: var(--brand-600); }
.ledger__body { display: grid; gap: .55rem; }
.ledger__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
  font-weight: 600; line-height: 1.2;
  color: var(--ink);
}
.ledger__text { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2); }
.ledger__body .link-arrow { margin-top: .2rem; }

/* ----------------------------------------------------------- 5. the team -- */
/* The team images are transparent cut-outs of one person, not photographs of
   a scene — so they are stood on a tinted ground with object-fit:contain
   rather than cropped edge to edge, which would slice off heads. */
.portraits { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 620px)  { .portraits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .portraits { grid-template-columns: repeat(4, 1fr); } }

.portrait {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.portrait:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.portrait__frame {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(168deg, var(--brand-100) 0%, var(--brand-50) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.portrait__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform var(--t-slow) var(--e-soft);
}
.portrait:hover .portrait__photo { transform: scale(1.04); }

.portrait__body {
  display: flex; flex: 1; flex-direction: column; gap: .3rem;
  padding: clamp(1.15rem, 2vw, 1.5rem);
}
.portrait__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .45vw, 1.4rem);
  font-weight: 600; line-height: 1.15;
  color: var(--ink);
}
.portrait__role { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); }
.portrait__link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: auto; padding-top: var(--s-4);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-700);
  transition: gap var(--t-fast) var(--e-out);
}
.portrait:hover .portrait__link { gap: .7rem; }

/* --------------------------------------------- team lineup (about page) --
   A flat four-up made the founder read exactly as loud as "Tracy team", and
   the square cut-out frames left a lot of empty tint. So the founder leads at
   feature size and the three supporting destinations sit beside him as
   compact rows — same links, real hierarchy, far less dead space. */
.team-lineup { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 900px) {
  .team-lineup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
}

/* ---- founder feature card ---- */
.team-lead {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.team-lead:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.team-lead__frame {
  position: relative; display: block; flex: none;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(168deg, var(--brand-100) 0%, var(--brand-50) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.team-lead__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  transition: transform var(--t-slow) var(--e-soft);
}
.team-lead:hover .team-lead__photo { transform: scale(1.04); }

.team-lead__badge {
  position: absolute; top: var(--s-4); left: var(--s-4);
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--sand-100);
  box-shadow: 0 1px 3px rgba(20, 35, 46, .1);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand-700);
}

.team-lead__body {
  display: flex; flex: 1; flex-direction: column; gap: .35rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.team-lead__name {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
  font-weight: 600; line-height: 1.12;
  color: var(--ink);
}
.team-lead__cred { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
.team-lead__link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto; padding-top: var(--s-5);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-700);
  transition: gap var(--t-fast) var(--e-out);
}
.team-lead:hover .team-lead__link { gap: .8rem; }

/* ---- supporting rows ---- */
/* equal-height rows so the stack lines up with the founder card beside it */
.team-rows { display: grid; gap: clamp(.75rem, 1.2vw, 1rem); }
@media (min-width: 900px) { .team-rows { grid-template-rows: repeat(3, 1fr); } }

.team-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  height: 100%;
  padding: clamp(.9rem, 1.5vw, 1.15rem);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.team-row:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }

.team-row__thumb {
  position: relative; display: block; flex: none;
  width: clamp(76px, 7.5vw, 104px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: linear-gradient(168deg, var(--brand-100) 0%, var(--brand-50) 100%);
}
.team-row__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  transition: transform var(--t-slow) var(--e-soft);
}
.team-row:hover .team-row__thumb img { transform: scale(1.06); }

.team-row__text { display: flex; flex-direction: column; gap: .2rem; }
.team-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem);
  font-weight: 600; line-height: 1.18;
  color: var(--ink);
}
.team-row__meta { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); }

.team-row__arrow {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--brand-700);
  transition: background-color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out),
              color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.team-row__arrow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.team-row:hover .team-row__arrow {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .team-lead, .team-lead__photo, .team-lead__link,
  .team-row, .team-row__thumb img, .team-row__arrow { transition: none; }
  .team-lead:hover, .team-row:hover { transform: none; }
  .team-lead:hover .team-lead__photo,
  .team-row:hover .team-row__thumb img,
  .team-row:hover .team-row__arrow { transform: none; }
}

/* ---------------------------------------------------------- 6. locations -- */
.offices { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 880px) { .offices { grid-template-columns: repeat(2, 1fr); } }
.office {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.office__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.office__body {
  display: grid; gap: var(--s-4);
  padding: clamp(1.6rem, 1rem + 2.2vw, 2.5rem);
}
.office__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.35rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
}
.office__meta { display: grid; gap: var(--s-3); }
.office__row { display: flex; gap: .7rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.office__row svg { flex: none; width: 18px; height: 18px; margin-top: .2rem; color: var(--sand-500); }
.office__row a { color: var(--brand-700); font-weight: 600; }
.office__hours {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.office__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ------------------------------------------------------ 7. accreditation -- */
.accred-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 5vw, 4rem);
  margin-top: clamp(3rem, 2rem + 3vw, 4.75rem);
  padding-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
  border-top: 1px solid var(--line);
}
.accred-strip img {
  height: clamp(52px, 6vw, 74px); width: auto;
  opacity: .6;
  filter: grayscale(1);
  transition: opacity var(--t-mid) var(--e-out), filter var(--t-mid) var(--e-out);
}
.accred-strip li:hover img { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .portrait, .portrait__photo, .portrait__link, .ledger__num, .accred-strip img { transition: none; }
  .portrait:hover .portrait__photo { transform: none; }
}

/* ==========================================================================
   MEET OUR FOUNDER PAGE
   Reuses the about-page furniture (page hero, stat band, story split, ledger,
   mission, portraits). Only two things are page-specific: the framed portrait,
   and a three-up team row.
   ========================================================================== */

/* the founder photo is a white-ground cut-out, not a scene — so it stands on
   a tint with object-fit:contain rather than being cropped like .story__figure */
.founder-portrait {
  display: grid;
  gap: var(--s-4);
  margin: 0;
}
.founder-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: bottom center;
  background: linear-gradient(168deg, var(--brand-100) 0%, var(--brand-50) 100%);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
@media (max-width: 859px) {
  .founder-portrait img {
    aspect-ratio: auto;
    height: auto;
    object-fit: unset;
    object-position: unset;
  }
}
.founder-portrait figcaption {
  padding-left: var(--s-4);
  border-left: 2px solid var(--sand-500);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

/* three cards, not four — keep them from stretching too wide on desktop */
@media (min-width: 1040px) {
  .founder-team .portraits { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   MEET OUR ORTHODONTISTS — doctor profile blocks
   Reuses .split + .founder-portrait; adds a credential line under the name
   and labelled groups of tick-listed qualifications.
   ========================================================================== */
.doc-cred {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--brand-700);
}
.split__copy > .prose { margin-top: var(--s-5); }
.split__copy > .prose:first-child { margin-top: 0; }
/* a subhead following the section title needs its own air, or the two
   display faces collide */
.split__copy > .section__title + .split__subhead { margin-top: var(--s-4); }
.cred-group { margin-top: var(--s-6); }
.cred-group__label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cred-group .ticks { margin-top: var(--s-3); }
p.cred-group { margin-top: var(--s-6); }

/* ==========================================================================
   BEFORE & AFTER SMILE GALLERY REDESIGN
   Luxury medical aesthetics, interactive clinical case viewer, filterable
   categories, journey steps, tech innovation grid & trust elements.
   ========================================================================== */

/* Case Viewer Layout */
.ba-showcase {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1040px) {
  .ba-showcase {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  }
}

/* Active Case Info Panel */
.ba-case-panel {
  background: var(--paper);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: all var(--t-mid) var(--e-out);
}
.ba-case-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ba-case-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
}
.ba-case-panel__duration {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ba-case-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  color: var(--brand-900);
  line-height: 1.2;
  margin: 0;
}
.ba-case-panel__desc {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}
.ba-case-panel__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1rem;
  background: var(--mist);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.ba-case-panel__spec-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 700;
  display: block;
  margin-bottom: 0.2rem;
}
.ba-case-panel__spec-val {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.ba-case-panel__wins {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ba-case-panel__win-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.45;
}
.ba-case-panel__win-item svg {
  color: #10b981;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Gallery Filter Pills */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: var(--s-7) 0 var(--s-6);
}
.gallery-filter-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--t-fast) var(--e-out);
}
.gallery-filter-btn:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-700);
  transform: translateY(-1px);
}
.gallery-filter-btn.is-active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 55, 92, 0.25);
}

/* Enhanced Case Cards */
.case-card--enhanced {
  background: var(--paper);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
}
.case-card--enhanced:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-xl);
  border-color: var(--brand-400);
}
.case-card__split-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f1c24;
  overflow: hidden;
  display: flex;
}
.case-card__split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--e-soft);
}
.case-card--enhanced:hover .case-card__split-visual img {
  transform: scale(1.03);
}
/* The gallery photos are single before/after composites with the BEFORE and
   AFTER captions burned in, so they must never be cropped. Contain them on a
   white ground instead of cover-cropping to 16/9. */
.case-card__split-visual--composite {
  aspect-ratio: 640 / 342;
  background: #fff;
}
.case-card__split-visual--composite img {
  object-fit: contain;
}
.case-card__pill-row {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.case-card__tag-pill {
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.case-card__tag-pill--before {
  background: rgba(15, 28, 36, 0.82);
  color: #fff;
}
.case-card__tag-pill--after {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-900);
}
.case-card__highlights {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.case-card__highlight-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.case-card__highlight-item svg {
  color: #10b981;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 4-Step Transformation Pathway */
.journey-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--s-7);
}
.journey-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.journey-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-300);
}
.journey-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.journey-card__step {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-300);
  line-height: 1;
}
.journey-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-700);
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-100);
}
.journey-card__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}
.journey-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.journey-card__text {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* Technology Innovation Grid */
.tech-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s-7);
}
.tech-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-xs);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
}
.tech-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-400);
  box-shadow: var(--sh-md);
}
.tech-card__icon-box {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--sun-50);
  border: 1px solid var(--sun-200);
  color: var(--sun-900);
  display: grid;
  place-items: center;
}
.tech-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.tech-card__body {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* Lifetime Guarantee Showcase Banner */
.guarantee-callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: grid;
  gap: 2rem;
  align-items: center;
  box-shadow: var(--sh-md);
  margin-top: var(--s-8);
  position: relative;
  overflow: hidden;
}
.guarantee-callout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--sun-400));
}
@media (min-width: 880px) {
  .guarantee-callout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  }
}
.guarantee-callout__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--sun-50);
  border: 1px solid var(--sun-300);
  color: var(--sun-900);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill);
  margin-bottom: 0.75rem;
  width: fit-content;
}
.guarantee-callout__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.85rem;
}
.guarantee-callout__text {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.guarantee-callout__points {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.guarantee-callout__point {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-weight: 500;
}
.guarantee-callout__point svg {
  color: #10b981;
  flex-shrink: 0;
}
.guarantee-callout__side {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.75rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.guarantee-callout__badge-img {
  width: 90px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(16, 55, 92, 0.08));
}
.guarantee-callout__side-text {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.guarantee-callout__side-text strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------- CTA BANNER */
.cta-banner {
  position: relative;
  background: radial-gradient(circle at 85% 20%, #13466e 0%, #0d2c46 45%, #071a28 100%);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 24px 60px -15px rgba(10, 31, 46, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: clamp(3rem, 2.2rem + 3.5vw, 5rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  text-align: center;
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 218, 103, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner::after {
  content: "";
  position: absolute;
  bottom: -100px; left: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 103, 157, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}
.cta-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(243, 218, 103, 0.14);
  border: 1px solid rgba(243, 218, 103, 0.45);
  color: #fcd34d;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 1rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.25rem;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.cta-banner__lede {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 auto 2.25rem;
}
.cta-banner__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.cta-banner__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
  backdrop-filter: blur(8px);
}
.cta-banner__btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  transform: translateY(-2px);
  color: #fff;
}
.cta-banner__btn-ghost svg {
  width: 16px;
  height: 16px;
  color: var(--sun-300);
}
.cta-banner__trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem clamp(1rem, 2vw, 2.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.5rem;
}
.cta-banner__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.cta-banner__trust-item svg {
  color: #34d399;
  flex-shrink: 0;
}



/* ==========================================================================
   TEAM PAGES — DUBLIN & TRACY
   A premium editorial treatment for the staff roster, in its own namespace
   (.team-*, .crew-*, .also-*). Both team pages now run on .crew; the older
   .roster block it replaced has been removed.

   The governing constraint is the photography: the practice's sources run
   from 150px transparent cut-outs to opaque 1200px studio shots, all mixed
   in one grid. The card leans on that rather than fighting it — every photo
   fills its frame and its foot is dissolved into the card, so the seams and
   the differing crops stop being visible at all.
   ========================================================================== */

/* ---------------------------------------------------------- centred hero -- */
/* The shared .page-hero is a two-column copy/photo grid. This page has no
   portrait worth a half-width column (the only banner is 1024x349, which
   crops to mush in a tall slot), so the hero runs centred and the banner is
   given its own full-width plate below at its native ratio. */
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__inner { padding-block: clamp(2.75rem, 1.8rem + 3.2vw, 4.5rem); }
.page-hero--center .page-hero__inner > * { max-width: min(46rem, 100%); margin-inline: auto; }
.page-hero--center .page-hero__actions { justify-content: center; }
.page-hero--center .crumbs ol { justify-content: center; }
@media (min-width: 940px) {
  .page-hero--center { display: block; min-height: 0; }
}

/* the hero lede on this page carries the practice's own welcome line, so it is
   set a touch larger and in the display face */
.page-hero__lede--display {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.05vw, 1.85rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.42;
  color: var(--brand-800);
}

/* ------------------------------------------------------------ team plate -- */
/* The group banner, framed rather than cropped: native 1024x349 ratio, a warm
   hairline, and a soft vignette so the JPEG's edges dissolve into the page. */
.team-plate { position: relative; padding-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }
.team-plate__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--brand-50);
}
.team-plate__frame::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6),
              inset 0 0 0 2px rgba(192, 143, 61, .18);
  pointer-events: none;
}
.team-plate__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1024 / 349;
  /* the banner is a full-width lockup: logo left, the whole team across the
     frame. Any crop loses people, so it is always shown at its native ratio. */
  object-fit: contain;
  background: var(--paper);
}

/* ----------------------------------------------------------- stat band ---- */
/* .stat-band already exists in the system but had no page using it. Give it the
   spacing it needs when it tucks under the plate rather than under a hero. */
.stat-band--plate { padding-bottom: 0; }
.stat-band--plate .stat-band__card {
  margin-top: clamp(-4.5rem, -5vw, -2.25rem);
  border: 1px solid var(--line-soft);
}

/* ------------------------------------------------------------ principles -- */
/* The practice's own three-sentence statement of how the team works, set as
   three cards so it scans instead of running as one long paragraph. */
.principles {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 860px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle {
  position: relative;
  padding: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.principle__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.4rem + .6vw, 2rem);
  font-weight: 500; line-height: 1;
  color: var(--sand-500);
}
.principle__num::after {
  content: "";
  display: block;
  width: 2.25rem; height: 1px;
  margin-top: .85rem;
  background: linear-gradient(90deg, var(--sand-500), transparent);
}
.principle__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600; line-height: 1.2;
  color: var(--brand-900);
}
.principle__body {
  margin-top: .6rem;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------- crew --- */
.crew {
  display: grid;
  gap: clamp(.85rem, 1.1vw, 1.25rem);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .crew { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .crew { grid-template-columns: repeat(3, 1fr); } }

/* borderless and rule-less: the portrait dissolves into the card instead of
   being boxed off by a divider, and a soft diffuse shadow does the lifting
   a hairline border used to do */
.crew__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 0;
  border-radius: var(--r-xl);
  box-shadow:
    0 18px 42px -26px rgba(20, 35, 46, .3),
    0 2px 8px rgba(20, 35, 46, .04);
  overflow: hidden;
  transition: transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out);
}
.crew__item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px -28px rgba(20, 35, 46, .38),
    0 4px 12px rgba(20, 35, 46, .06);
}

/* the portrait plate runs tall and its foot is dissolved into the card by the
   ::after wash below, so there is no seam between photo and copy — the body
   is then pulled back up over the tail of that fade */
.crew__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(78% 62% at 50% 6%, #fff 0%, var(--brand-50) 44%, var(--brand-100) 100%);
}
/* cover, not contain: the source crops run from near-square to 2:3, and
   contained they each ended at a different height, leaving the cut edge of
   the shorter ones stranded above the wash. Filling the frame puts every
   photo's own bottom edge outside it, so the wash always dissolves real
   image content. Anchored to the top so the crop takes torso, never faces. */
.crew__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
/* the dissolve: image at the top, card paper at the bottom, nothing in
   between to mark where one ends and the other starts */
.crew__frame::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: -1px;
  height: 44%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .5) 30%,
    rgba(255, 255, 255, .9) 60%,
    var(--paper) 82%);
  pointer-events: none;
}

.crew__body {
  position: relative;
  z-index: 1;
  margin-top: clamp(-3.25rem, -3vw, -2rem);
  padding: 0 clamp(1.35rem, 1rem + 1.1vw, 1.75rem) clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem);
}

.crew__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + .45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--brand-900);
}
.crew__meta { margin-top: .35rem; }
.crew__role {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sand-700);
}
.crew__since {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--ink-3);
}
/* clamped to a fixed number of lines so a two-sentence bio and a
   nine-sentence bio still produce the same compact card height; the full
   text stays in the DOM for assistive tech and search, only the on-screen
   box is capped, and the Read more button lifts the cap */
.crew__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .85rem;
  font-size: var(--fs-xs);
  line-height: 1.68;
  color: var(--ink-3);
}
.crew__item.is-expanded .crew__bio {
  display: block;
  -webkit-line-clamp: unset;
}

/* set as a quiet text link with a trailing arrow rather than a button, and
   hidden until the script confirms the bio actually overflows — a short bio
   needs no toggle, so it only appears where text is really being cut */
.crew__more {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(1.1rem, 1.4vw, 1.4rem);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  transition: color var(--t-fast) var(--e-out), gap var(--t-fast) var(--e-out);
}
.crew__more.is-available { display: inline-flex; }
.crew__more:hover { color: var(--brand-700); gap: .7rem; }
.crew__more svg { transition: transform var(--t-mid) var(--e-out); }
.crew__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ------------------------------------------------------------- also meet -- */
/* Bridge to the two doctor pages, which patients look for from here. */
.also { display: grid; gap: clamp(1rem, 1.5vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 800px) { .also { grid-template-columns: repeat(2, 1fr); } }
.also__card {
  display: grid;
  grid-template-columns: clamp(76px, 9vw, 104px) 1fr;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  text-decoration: none;
  transition: transform var(--t-mid) var(--e-out),
              box-shadow var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
.also__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-100);
}
.also__photo {
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  /* full-frame portraits, not cut-outs: crop to the face rather than letting
     `contain` shrink a 2:3 photo into a strip the circle then clips */
  object-fit: cover;
  object-position: center 16%;
  background: radial-gradient(70% 70% at 50% 22%, #fff, var(--brand-50) 55%, var(--brand-100));
  box-shadow: 0 0 0 1px var(--brand-100), 0 0 0 5px var(--paper), 0 0 0 6px var(--sand-200);
}
/* the card is an <a>, so its inner text nodes are spans — give them blocks */
.also__body { display: block; }
.also__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.also__name {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--brand-900);
}
.also__meta { display: block; margin-top: .35rem; font-size: var(--fs-sm); color: var(--ink-2); }
.also__go {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-700);
  transition: gap var(--t-fast) var(--e-out);
}
.also__card:hover .also__go { gap: .8rem; }


/* ==========================================================================
   CUSTOM CURSOR
   A halo around the native cursor, which stays visible throughout. A warm
   bloom lags far behind the pointer and a brand-blue ring eases in just
   behind it. The ring responds to what is underneath by changing its own
   size and colour only — it never draws a border around the element, so
   buttons and cards keep exactly the hover treatment their own CSS gives
   them and nothing gains an outline it was not designed with.

   Every layer is centred on its own point with translate(-50%, -50%) inside
   the transform the script writes, so size can change without any margin
   bookkeeping and the press scale composes into the same transform.

   Injected by js/main.js, and only activated on a device with a real pointer
   that has not asked for reduced motion — touch, keyboard and reduced-motion
   users keep the native cursor and the module never runs.
   ========================================================================== */

.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 100000;
    pointer-events: none;
    display: block;
    opacity: 0;
    transition: opacity var(--t-mid) var(--e-out);
  }
  .cursor.is-awake { opacity: 1; }

  /* The native cursor stays visible and keeps all of its own semantics — the
     arrow, the hand over a link, the caret in a field. These layers ride
     around it as a halo rather than replacing it, so nothing is lost if the
     script fails and there is never a moment with no pointer on screen.
     (.has-cursor is still set on <html> as a "module is live" hook.) */

  .cursor__glow,
  .cursor__ring,
  .cursor__dot {
    position: absolute;
    top: 0; left: 0;
    border-radius: 50%;
    will-change: transform;
  }

  /* --- the lagging warm bloom -------------------------------------------- */
  .cursor__glow {
    width: 240px; height: 240px;
    background: radial-gradient(closest-side,
                rgba(26, 128, 192, .13) 0%,
                rgba(243, 218, 103, .09) 45%,
                transparent 72%);
    transition: opacity var(--t-mid) var(--e-out);
  }

  /* --- the ring, which also does the snapping ---------------------------- */
  .cursor__ring {
    width: 34px; height: 34px;
    border: 1.5px solid rgba(26, 128, 192, .55);
    background: transparent;
    transition:
      width         var(--t-mid) var(--e-soft),
      height        var(--t-mid) var(--e-soft),
      border-radius var(--t-mid) var(--e-soft),
      border-color  var(--t-fast) var(--e-out),
      background-color var(--t-fast) var(--e-out),
      box-shadow    var(--t-fast) var(--e-out);
  }

  /* --- the dot, riding at the centre of the ring -------------------------- */
  .cursor__dot {
    width: 6px; height: 6px;
    background: rgba(26, 128, 192, .85);
    transition: width var(--t-fast) var(--e-out), height var(--t-fast) var(--e-out),
                background-color var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
  }

  /* --- over any interactive target --------------------------------------- */
  /* opens a little and warms to gold — feedback that sits around the arrow,
     not around the button */
  .cursor.is-hot .cursor__ring {
    width: 50px; height: 50px;
    border-color: rgba(192, 143, 61, .75);
    background: rgba(26, 128, 192, .07);
  }
  .cursor.is-hot .cursor__dot {
    width: 8px; height: 8px;
    background: rgba(192, 143, 61, .95);
  }

  /* --- over a photo or a portrait medallion ------------------------------ */
  /* A real lens rather than a tinted disc: the backdrop filter lifts whatever
     is underneath, and the white border is carried by a dark outer hairline
     so the ring stays visible over a pale photo as well as a dark one. */
  .cursor.is-media .cursor__ring {
    width: 76px; height: 76px;
    border-color: rgba(255, 255, 255, .9);
    background: transparent;
    box-shadow: 0 0 0 1px rgba(16, 55, 92, .2),
                0 12px 30px -16px rgba(16, 55, 92, .5);
    -webkit-backdrop-filter: saturate(1.3) contrast(1.04) brightness(1.03);
            backdrop-filter: saturate(1.3) contrast(1.04) brightness(1.03);
  }

  /* the lens is a window onto the photograph — a dot in the middle of it
     would only be a speck on the picture, so it steps out */
  .cursor.is-media .cursor__dot { opacity: 0; }

  /* --- on a dark ground, invert so the ring stays visible ---------------- */
  .cursor.is-dark .cursor__ring { border-color: rgba(255, 255, 255, .7); }
  .cursor.is-dark .cursor__dot { background: rgba(255, 255, 255, .82); }
  .cursor.is-dark.is-hot .cursor__dot { background: var(--sun-400); }
}

/* a pointer device that has asked for less motion gets the native cursor alone */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
}

/* ==========================================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   Comprehensive fixes for small screens (≤767px and ≤480px).
   Organised by component, cascading from 767px down to 360px.
   ========================================================================== */

/* ---- global overflow guard ---- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ---- footer — prevent horizontal overflow on narrow viewports ---- */
@media (max-width: 600px) {
  .footer {
    margin: .5rem;
    border-radius: var(--r-lg);
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
  .footer__logo { width: clamp(140px, 50vw, 200px); }
  .footer__offices { grid-template-columns: 1fr; }
  .footer__accred {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .footer__accred img { height: 36px; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .footer__legal { flex-wrap: wrap; }
}

/* ---- hero — stack CTA buttons on mobile ---- */
@media (max-width: 640px) {
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__headline {
    max-width: 20ch;
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }
  .hero__sub { max-width: 100%; }
}

/* ---- mission quote — prevent oversized decorative glyph from overflowing ---- */
@media (max-width: 600px) {
  .mission__quote::before {
    font-size: 6rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: .12;
  }
  .mission {
    overflow: hidden;
    padding-inline: var(--gutter);
  }
}

/* ---- before/after results section ---- */
@media (max-width: 700px) {
  .ba {
    grid-template-columns: 1fr;
  }
  .ba__stage { aspect-ratio: 4 / 3; }
  .ba__thumbs { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .ba__cred {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .ba__cred strong {
    margin-bottom: 2px;
  }
}

/* ---- founder section ---- */
@media (max-width: 700px) {
  .founder__inner {
    grid-template-columns: 1fr;
  }
  .founder__portrait img {
    width: min(220px, 80%);
  }
  .founder__facts strong { min-width: 4rem; font-size: 1.25rem; }
}

/* ---- reach / service area chips ---- */
@media (max-width: 480px) {
  .reach__areas {
    gap: .4rem;
  }
  .reach__areas li {
    font-size: .7rem;
    padding: .35rem .75rem;
  }
}

/* ---- benefits cards grid ---- */
@media (max-width: 500px) {
  .cards--3 {
    grid-template-columns: 1fr;
  }
  .cards--4 {
    grid-template-columns: 1fr;
  }
  .benefit { padding: var(--s-5); }
}

/* ---- report / book sections — stack and center media ---- */
@media (max-width: 700px) {
  .report__inner,
  .book__inner {
    grid-template-columns: 1fr;
  }
  .report__media,
  .book__media {
    width: min(280px, 80%);
    margin-inline: auto;
  }
  .report__actions,
  .book__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .report__actions .btn,
  .book__actions .btn { width: 100%; justify-content: center; }
}

/* ---- right-for-you widget ---- */
@media (max-width: 700px) {
  .rfy__inner { grid-template-columns: 1fr; }
  .rfy__card { max-width: 100%; }
}

/* ---- visit (office tabs + map) ---- */
@media (max-width: 500px) {
  .visit__tabs {
    flex-direction: column;
  }
  .visit__tab {
    border-bottom: 1px solid var(--line-soft);
    border-right: 0;
    text-align: left;
  }
  .visit__tab.is-active {
    border-bottom-color: var(--brand-700);
  }
  .visit__map { min-height: 220px; height: 220px; }
  .visit__actions {
    flex-direction: column;
  }
  .visit__actions .btn { width: 100%; justify-content: center; }
}

/* ---- appointment section ---- */
@media (max-width: 700px) {
  .appointment__inner { grid-template-columns: 1fr; }
  .appointment__alt { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; justify-content: center; }
}

/* ---- consultation modal on very small screens ---- */
@media (max-width: 400px) {
  .consultation-modal {
    padding: .5rem;
  }
  .consultation-modal__panel {
    border-radius: var(--r-md);
  }
  .consultation-modal__aside { padding: 1.15rem 1rem 1.1rem; }
  .consultation-modal__body { padding: 1.1rem .9rem 1.4rem; }
  .consultation-modal__title { font-size: 1.4rem; }
}

/* ---- quiz section ---- */
@media (max-width: 700px) {
  .quiz__inner { grid-template-columns: 1fr; }
  .quiz__media { display: none; } /* hide decorative image on small screens */
  .quiz__actions { flex-direction: column; align-items: stretch; }
  .quiz__actions .btn { width: 100%; justify-content: center; }
}

/* ---- testimonials (wall + carousel) ---- */
@media (max-width: 480px) {
  .wall .quote {
    flex-basis: clamp(14rem, 80vw, 18rem);
  }
  .wall-panel__badges {
    gap: 1rem;
  }
  .wall-panel__badges img { height: 28px; }
  .proof-pill {
    font-size: .72rem;
    padding: .28rem .65rem;
  }
}

/* ---- video section ---- */
@media (max-width: 700px) {
  .video__inner { grid-template-columns: 1fr; }
  .video__play { width: 64px; height: 64px; }
}

/* ---- newsletter — keep input and button stacked on small screens ---- */
@media (max-width: 479px) {
  .newsletter__form {
    flex-direction: column;
  }
  .newsletter__form .field__input,
  .newsletter__form .btn { width: 100%; }
}

/* ---- section headings — ensure long words break on tiny screens ---- */
@media (max-width: 420px) {
  .section__title,
  .hero__headline,
  p.hero__headline,
  .reach__title,
  .quiz__title,
  .book__title,
  .video__title,
  .founder__title,
  .newsletter__title {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ---- page hero (interior pages) ---- */
@media (max-width: 600px) {
  .page-hero {
    margin-top: calc(var(--header-h) + var(--header-float) + .5rem);
    margin-inline: .5rem;
    border-radius: var(--r-md);
  }
  .page-hero__inner { padding-block: 1.75rem; }
  .page-hero__title { font-size: clamp(1.75rem, 6.5vw, 2.4rem); }
  .page-hero__media:not(.page-hero__media--profile) { aspect-ratio: 3 / 2; }
  .page-hero__media--profile,
  .page-hero__media:has(img[src*="braces-tracy-01"]),
  .page-hero__media:has(img[src*="dr-dante"]) {
    aspect-ratio: auto !important;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .page-hero__media--profile img,
  .page-hero__media img[src*="braces-tracy-01"],
  .page-hero__media img[src*="dr-dante"] {
    width: auto;
    height: auto;
    max-width: min(100%, 280px);
    max-height: 420px;
    object-fit: contain !important;
    object-position: center bottom;
  }
}

/* ---- stat band (about / orthodontists pages) ---- */
@media (max-width: 500px) {
  .stat-band__card {
    padding: 1.5rem 1rem;
  }
  .stat-band__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-4);
  }
}

/* ---- blog filter bar ---- */
@media (max-width: 600px) {
  .blog-filter-bar {
    width: 100%;
    border-radius: var(--r-lg);
    justify-content: flex-start;
  }
  .blog-filter-btn {
    font-size: .72rem;
    padding: .4rem .8rem;
  }
}

/* ---- before-after gallery page — case cards ---- */
@media (max-width: 480px) {
  .gallery-filters { gap: .4rem; }
  .gallery-filter-btn { font-size: .72rem; padding: .5rem .9rem; }
}

/* ---- team lineup / portrait grids ---- */
@media (max-width: 480px) {
  .portraits {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
  .team-lineup { grid-template-columns: 1fr; }
}

/* ---- contact page ---- */
@media (max-width: 480px) {
  .contact-location-switch {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: var(--r-lg);
    padding: .35rem;
  }
  .contact-location-switch__btn {
    padding: .5rem 1rem;
    font-size: var(--fs-xs);
  }
  .contact-office-box { padding: 1.25rem 1rem; }
  .contact-hero-cards { grid-template-columns: 1fr; }
}

/* ---- WhatsApp FAB — tighten on very small screens ---- */
@media (max-width: 400px) {
  .whatsapp-fab-wrap {
    right: .65rem;
    bottom: .65rem;
  }
  .to-top {
    right: .65rem;
    bottom: calc(.65rem + 72px);
    width: 40px;
    height: 40px;
  }
}

/* ---- header bar — tighter padding on very small screens ---- */
@media (max-width: 380px) {
  .header__inner {
    padding-inline: .75rem;
  }
  .header__logo {
    width: clamp(110px, 35vw, 140px);
  }
}

/* ---- overall section vertical padding reduction on tiny screens ---- */
@media (max-width: 400px) {
  :root {
    --section-y: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
    --gutter: 1rem;
  }
}

/* ---- promises rail — cards sized well on small phones ---- */
@media (max-width: 380px) {
  .section--promises .promise,
  .section--promises .promise:first-child,
  .section--promises .promise:last-child {
    flex: 0 0 clamp(220px, 88vw, 280px);
  }
}

/* ---- hours grid ---- */
@media (max-width: 480px) {
  .hours { padding: 1.25rem 1rem; }
  .hours__list { grid-template-columns: 1fr; }
}

/* ---- shell — ensure no child breaks viewport ---- */
.shell > * { min-width: 0; }

/* ---- visit / appointment map caption / address ---- */
@media (max-width: 480px) {
  .visit__address { font-size: .9375rem; }
  .visit__office { font-size: 1.25rem; }
  .visit__info { padding: 1.25rem 1rem; }
}

/* ---- FAQ on mobile ---- */
@media (max-width: 480px) {
  .faq__q { padding: var(--s-4); font-size: .9375rem; }
  .faq__a { padding: 0 var(--s-4) var(--s-4); }
}

/* ---- promise intents (pathways) — improve card size ---- */
@media (max-width: 400px) {
  .pathways .cards.intents .intent {
    flex: 0 0 92%;
    max-width: 300px;
  }
}

/* ---- hero foot controls ---- */
@media (max-width: 400px) {
  .hero__arrow {
    width: 36px;
    height: 36px;
  }
  .hero__dot.is-active { width: 36px; }
}

/* ---- radios on very small screens ---- */
@media (max-width: 479px) {
  .radios { grid-template-columns: 1fr; }
}

/* ---- featured blog post ---- */
@media (max-width: 600px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post__visual { display: none; }
}