/* ─────────────────────────────────────────────
   Elite Spine Centres · Homepage v2
   Brand colours sampled directly from the ESC logo:
     · clinical teal (spine motif)
     · warm charcoal (ELITE SPINE word-mark)
     · soft mute (CENTRES sub-mark)
   ───────────────────────────────────────────── */
:root{
  /* ─── Colour ─── */
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #EBF1F7;     /* warm soft cream — HOVER-TINT ONLY (cond, compare-row, trust-edit-cell) + photo/skeleton placeholders. Banned from section-bg role since 2026-06-07 (Item 2 cream purge). Use --bg or --surface-cool for section backgrounds instead. */
  --surface-cool: #F6F7F9;     /* cool-grey alt — for callout components needing visual separation without warmth. Added 2026-06-07 (Item 2). */
  --surface-3:    #E0E6EC;     /* darker cream — emphasis bands */
  --ink:          #2A2A2A;     /* warm charcoal — ELITE SPINE colour */
  --ink-2:        #515355;     /* secondary body */
  --ink-3:        #686B6E;     /* tertiary — captions, axis, sub. WAS #83878A; bumped 2026-06-03 for WCAG AA (now 5.0:1 on white) */
  --teal:         #1880A8;     /* the spine swoosh — primary brand */
  --teal-deep:    #085470;     /* hover / pressed / body links (5.4:1 — AA) */
  --teal-soft:    #E1ECF0;     /* faint primary tint */
  --teal-darker:  #063E53;     /* dark band background */

  /* Semantic role tokens — alias --teal* by meaning so future palette
     swaps target one role at a time instead of all 14 sites at once. */
  --c-accent: var(--teal);        /* eyebrows, dots, tags, chips, badges */
  --c-link:   var(--teal-deep);   /* body links (AA on white) */
  --c-state:  var(--teal);        /* focus, hover, active */
  --c-meta:   var(--teal);        /* credentials, micro-labels, idx */
  --c-bg-deep:var(--teal-darker); /* dark band background */
  --rule:         #DADFE5;     /* warm hairline */
  --rule-strong:  #CAD0D5;
  --success:      #2E7D5F;
  --danger:       #C0354B;     /* error / "no" cell */
  --danger-soft:  rgba(192, 53, 75, 0.08);

  /* ─── Dark band palette (used on .fcm, .cta-final, footer, utility) ─── */
  --ink-on-deep:    #E8EEF4;
  --body-on-deep:   #ADC2C9;
  --meta-on-deep:   #91C5D8;
  --surface-deep:   #063E53;
  --surface-deep-hover: #0D3F51;
  --rule-on-deep:   rgba(255,255,255,0.10);

  /* ─── Spacing scale — 4pt base ─── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ─── Type scale — 8 sizes covering 90% of usage ─── */
  /* Type scale — bumped 2026-06-08 (Item 6 retro-fit). Body 16→18.5, lead 18→22,
     eyebrow 11→12, caption 13→14. Hero overrides locally; do not propagate. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-body: 18.5px;
  --fs-lg:   22px;
  --fs-xl:   22px;
  --fs-2xl:  36px;

  /* ─── Motion ─── */
  --ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ios:       cubic-bezier(0.32, 0.72, 0, 1);

  /* ─── Layout ─── */
  --container: 1280px;
  --pad-x: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 11vw, 150px);

  /* ─── z-index ladder ─── */
  --z-utility: 51;
  --z-nav:     50;
  --z-nav-sub: 55;
  --z-drawer:  60;
  --z-overlay: 65;
  --z-skip:    100;
}

*,*::before,*::after{ box-sizing:border-box; }
/* v25.3 (2026-06-10): overflow-x:hidden → overflow-x:clip. Same horizontal
   containment for the mobile-drawer off-canvas translateX, but `clip` does
   NOT create a scroll context — so position:sticky descendants (anatomy pin)
   work correctly. `hidden` was breaking sticky because it forced overflow-y
   to compute as `auto`, turning html/body into a scroll container. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip; }
body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:18.5px;  /* Item 6 retro-fit 2026-06-08: 16 → 18.5 */
  line-height:1.6;
  font-feature-settings:"ss01" 1, "cv11" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

/* ── Typography (Newsreader display · Inter body) ── */
.display{
  font-family:'Newsreader', Georgia, serif;
  font-weight:400;
  font-variation-settings:"opsz" 60;
  letter-spacing:-0.02em;
  line-height:1.08;
  color:var(--ink);
}
/* 2026-06-04: brought display weights to DESIGN-SYSTEM.md spec
   (was 500/500/600 — read as commercial; spec is editorial). */
h1.display{ font-size:clamp(40px, 6vw, 78px); font-weight:500; letter-spacing:-0.028em; line-height:1.02; font-variation-settings:"opsz" 72; }   /* 2026-06-22: 300→500, thicker for readability */
h2.display{ font-size:clamp(36px, 4vw, 50px); font-weight:500; letter-spacing:-0.02em; line-height:1.08; font-variation-settings:"opsz" 60; }   /* 2026-06-22: 400→500, thicker for readability */
h3.display{ font-size:clamp(20px, 2.2vw, 26px); font-weight:500; letter-spacing:-0.012em; line-height:1.2; font-variation-settings:"opsz" 30; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter', sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--c-accent);
}
.eyebrow::before{
  content:""; width:18px; height:1px;
  background:var(--c-accent);
}

.lead{
  font-size:clamp(19px, 1.55vw, 22px);  /* Item 6 retro-fit 2026-06-08: +12% */
  line-height:1.6;
  color:var(--ink-2);
  max-width:60ch;
}
.body{ color:var(--ink-2); }
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* ── Layout ── */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
}
section{ padding:var(--section-y) 0; position:relative; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-size:14px; font-weight:500; letter-spacing:0.01em;
  border-radius:2px;
  transition:background 220ms var(--ease-out-quart),
             color 220ms var(--ease-out-quart),
             transform 220ms var(--ease-out-quart),
             border-color 220ms var(--ease-out-quart);
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-deep); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--rule-strong); }
.btn-secondary:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* 2026-06-04 (emil-design-eng pass): tactile press feedback on every
   button. scale(0.97) on :active gives instant "I heard you" haptic. */
.btn:active{ transform:scale(0.97); transition-duration:120ms; }
.btn .arr{ font-size:16px; line-height:1; display:inline-block; transition:transform 280ms var(--ease-out-quart); }
.btn:hover .arr{ transform:translateX(4px); }

/* ═════════════════════════════════════════════
   NAV — two-tier (utility top, main nav below)
   ═════════════════════════════════════════════ */
/* v24 location strip (2026-06-10) — now STICKY, paired with .nav.
   Both elements stick to viewport top; .nav offsets by --strip-h so they
   stack instead of overlap. Both hide together via .nav-hidden class
   (toggled in lockstep by the shared scroll-direction JS). --strip-h is
   set at runtime from JS (load + resize) reading getBoundingClientRect. */
.location-strip{
  background:var(--ink);
  color:#BFC4C9;
  font-size:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky; top:0; left:0; right:0; z-index:52;
  transition:transform 280ms var(--ease-out-quart);
  will-change:transform;
}
.location-strip.nav-hidden{ transform:translateY(-100%); }
body.nav-open .location-strip{ transform:none !important; }
/* v25.2 (2026-06-10): force header hidden while anatomy pin is active.
   CSS-only override beats whatever the scroll handler does — avoids
   re-touching 33 inline scripts. Toggled by ScrollTrigger callbacks
   on index.html only; on other pages the class never gets added.
   v25.3: switched from translateY (which only moves by own height,
   leaving the nav partly visible because of its sticky top-offset)
   to opacity+visibility — fully hides regardless of sticky top values. */
body.pin-active .location-strip,
body.pin-active .nav{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition: opacity 200ms var(--ease-out-quart), visibility 0s 200ms;
}
.location-strip-row{
  display:flex; align-items:center; gap:24px;
  white-space:nowrap;
}
.location-strip-item{ flex-shrink:0; }
.location-strip-divider{
  width:1px; height:12px;
  background:rgba(255,255,255,0.18);
  flex-shrink:0;
}
@media (max-width:600px){
  .location-strip-row{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    white-space:normal;
  }
  .location-strip-divider{ display:none; }
  .location-strip-item{ font-size:11.5px; line-height:1.4; }
}

/* Legacy .utility — kept for any non-regenerated artifacts, but no longer in use. */
.utility{
  background:var(--ink);
  color:#BFC4C9;
  font-size:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky; top:0; left:0; right:0; z-index:51;       /* v21: now sticky alongside nav */
  white-space:nowrap;
  overflow:hidden;                                            /* defensive: never spill */
}
.utility-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:nowrap;                                 /* v21: forced single line */
  min-width:0;
}
.utility .l{ color:#787B7E; text-transform:uppercase; letter-spacing:0.14em; font-size:10px; font-weight:600; margin-right:8px; }
.utility-left{ display:flex; align-items:center; gap:24px; flex-wrap:nowrap; min-width:0; }
.utility-left > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.utility a{ color:#D5DAE0; transition:color 200ms; font-weight:500; white-space:nowrap; }
.utility a:hover{ color:#fff; }
.utility-right{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; min-width:0; }
.utility-divider{ width:1px; height:12px; background:rgba(255,255,255,0.18); flex-shrink:0; }

/* v21 narrow-width responsiveness — drop pieces in order: email → labels */
@media (max-width:1100px){
  .utility-right > a:last-of-type{ display:none; }            /* hide email */
  .utility-right > .utility-divider:last-of-type{ display:none; } /* hide preceding divider */
}
@media (max-width:768px){
  .utility .l{ display:none; }                                /* hide "Clinic" / "Hours" labels */
  .utility-left{ gap:16px; }
  .utility-right{ gap:14px; }
}

.nav{
  /* v24 (2026-06-10): top offset by --strip-h so .nav stacks below the
     now-sticky .location-strip instead of overlapping it. Fallback 32px
     matches strip height at desktop; JS resets the var on resize for
     mobile (multi-line strip ~60px). */
  position:sticky; top:var(--strip-h, 32px); left:0; right:0; z-index:50;
  background:#FFFFFF;
  border-bottom:1px solid var(--rule);
  padding:12px 0;
  transition:box-shadow 280ms var(--ease-out-quart),
             transform 280ms var(--ease-out-quart);
  will-change:transform;
}
.nav.scrolled{
  box-shadow:0 1px 0 var(--rule), 0 12px 36px -28px rgba(42,42,42,0.16);
}
.nav.nav-hidden{ transform:translateY(-100%); }
body.nav-open .nav{ transform:none !important; }
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:42px; width:auto; display:block; }
.nav-links{
  display:flex; align-items:center;
  gap:clamp(18px, 2.6vw, 36px);
  flex:1; justify-content:center;
}
.nav-links a{
  font-size:14px; color:var(--ink-2); font-weight:500;
  transition:color 200ms var(--ease-out-quart);
  position:relative; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--c-state); transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--ease-out-quart);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-mobile{ display:none; }

@media (max-width:1080px){
  .nav-links a:nth-child(5){ display:none; }
}
@media (max-width:920px){
  .utility{ display:none; }
  .nav-links{ display:none; }
  .nav-mobile{ display:flex; }
}

/* ═════════════════════════════════════════════
   HERO v10 — orthokinetics.sg structural replication
   Source: designlang-extract 2026-06-06.
   Structure: dark hero, text-left (eyebrow + H1 + body + 2 doctor mini-cards
   + CTA), 2 cutouts right, 3 bottom-bleed cards.
   ═════════════════════════════════════════════ */
.hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(560px, 72vh, 820px);   /* v14: taller — photo is the focal point now */
  background:var(--surface-deep);
  color:var(--ink-on-deep);
  overflow:hidden;
  padding:0;
}

/* v14 — Single founder photo, full-bleed, with gradient overlay for text legibility.
   object-position keeps Bryant's face visible across viewport widths: at wide viewports
   the photo crops symmetrically (object-position center); at narrow viewports the photo
   shifts right so the subject stays in frame even as text takes more horizontal space. */
.hero-bg-img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  object-position:100% 30%;               /* image canvas has dark left padding so Bryant sits in right ~70-94% of frame; anchor right keeps him visible at narrow viewports too */
  pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  /* Dark wash carries across the whole text zone (45-50%), then fades through
     a hard tail (50-72%) so the doctor reads clearly on the right.
     The vertical wash deepens top + bottom so the photo edges integrate. */
  /* 2026-08-04: overlay recoloured to --surface-deep #063E53 (the mobile band blue),
     more solid across the text zone so the left reads as a clean colour block. */
  background:
    linear-gradient(95deg, rgba(6,62,83,0.985) 0%, rgba(6,62,83,0.97) 46%, rgba(6,62,83,0.82) 56%, rgba(6,62,83,0.35) 74%, rgba(6,62,83,0.10) 92%, rgba(6,62,83,0.05) 100%),
    linear-gradient(180deg, rgba(6,62,83,0.32) 0%, rgba(6,62,83,0) 25%, rgba(6,62,83,0) 70%, rgba(6,62,83,0.55) 100%);
}

/* Layer 3 — main content row (text only — stage is a sibling).
   v12: align-items: flex-start so text sits near top (kills centered void).
   Padding-bottom trimmed (cards bleed past, no reserve needed). */
.hero-content{
  position:relative;
  z-index:3;
  min-height:inherit;
  padding-top:clamp(28px, 2.6vw, 48px);
  padding-bottom:clamp(28px, 3vw, 56px);
  display:flex;
  align-items:flex-start;
}

/* === Text zone — ~55% of container, anchored vertically === */
.hero-text{
  max-width:clamp(420px, 56%, 720px);
  width:100%;
}
.hero-eyebrow{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:clamp(12px, 0.85vw, 14px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--meta-on-deep);
  margin-bottom:clamp(20px, 1.8vw, 32px);
}
.hero-title{
  margin:0 0 clamp(20px, 1.8vw, 32px);
  color:var(--ink-on-deep);
  font-family:'Newsreader',serif;
  font-weight:300;
  font-variation-settings:"opsz" 72;
  font-size:clamp(36px, 3.2vw, 54px);     /* v11.2: slimmer to fit 3 lines */
  line-height:1.06;
  letter-spacing:-0.022em;
  max-width:24ch;                         /* wider so it wraps to 3 lines */
}
.hero-title .accent{
  color:var(--meta-on-deep);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 72;
}
.hero-body{
  font-family:'Inter',sans-serif;
  font-size:clamp(15px, 1.05vw, 18px);
  line-height:1.6;
  color:var(--body-on-deep);
  max-width:54ch;
  margin:0 0 clamp(28px, 2.6vw, 44px);
}

/* === Doctor mini-cards (replicating orthokinetics' "Dr. Sean Leo" card) === */
.hero-doctor-cards{
  display:flex; flex-direction:column;
  gap:clamp(14px, 1.2vw, 20px);
  margin:0 0 clamp(28px, 2.6vw, 44px);
}
.hero-doc-card{
  display:flex; align-items:center; gap:clamp(14px, 1.1vw, 20px);
}
.hero-doc-avatar{
  width:clamp(52px, 4.2vw, 68px);
  height:clamp(52px, 4.2vw, 68px);
  border-radius:50%;
  object-fit:cover;
  background:rgba(255,255,255,0.06);
  border:2px solid rgba(145,197,216,0.28);
  flex-shrink:0;
}
.hero-doc-card-text{ display:flex; flex-direction:column; gap:2px; }
.hero-doc-name{
  font-family:'Newsreader',serif; font-weight:500;
  font-variation-settings:"opsz" 30;
  font-size:clamp(17px, 1.25vw, 22px);
  color:var(--meta-on-deep);
  letter-spacing:-0.005em;
  line-height:1.2;
}
.hero-doc-title{
  font-family:'Inter',sans-serif;
  font-size:clamp(12px, 0.85vw, 14px);
  color:var(--body-on-deep);
  letter-spacing:0.02em;
  line-height:1.35;
}

/* === Hero CTA button (replicating orthokinetics' teal pill) === */
.hero-cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:clamp(14px, 1.1vw, 18px) clamp(24px, 2.2vw, 36px);
  background:var(--teal);
  color:var(--ink-on-deep);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(13px, 0.95vw, 15px);
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  transition:background 200ms var(--ease-out-quart), transform 140ms var(--ease-out-quart);
}
.hero-cta-btn:hover{ background:var(--teal-deep); }
.hero-cta-btn:active{ transform:scale(0.97); }
.hero-cta-icon{ font-size:1.1em; }

/* v14 (2026-06-08): all .hero-stage, .hero-doc-stage*, narrow-MQ, and stack-MQ
   rules removed. The two-cutout absolute-positioned layout went through v10-v13
   trying to fix horizontal collision and "floating photos" across viewport
   sizes. Replaced with single full-bleed founder photo (.hero-bg-img) + text
   overlay. object-fit:cover does what absolute positioning couldn't. */

/* === Bottom 3 cards (bleeding into next section) ===
   v11: now uses .container so left/right margins match site convention. */
.hero-bottom-cards{
  position:absolute;
  left:50%; transform:translate(-50%, 50%);  /* center horizontally + bleed down */
  bottom:0;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 1.8vw, 28px);
}
.bottom-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(20px, 1.8vw, 32px) clamp(24px, 2vw, 36px);
  background:rgba(7,33,42,0.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(145,197,216,0.22);
  border-radius:6px;
  color:var(--ink-on-deep);
  text-decoration:none;
  transition:border-color 200ms var(--ease-out-quart),
             background  200ms var(--ease-out-quart),
             transform   140ms var(--ease-out-quart);
  min-height:clamp(96px, 8vw, 130px);
}
.bottom-card:hover{
  border-color:var(--meta-on-deep);
  background:rgba(20,55,60,0.96);
}
.bottom-card:active{ transform:translateY(1px); }
.bottom-card-title{
  font-family:'Newsreader',serif;
  font-weight:500;
  font-size:clamp(20px, 1.55vw, 26px);
  line-height:1.15;
  color:var(--ink-on-deep);
}
.bottom-card-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.bottom-card-icon{
  font-size:clamp(22px, 1.8vw, 30px);
  opacity:0.9;
}
.bottom-card-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(34px, 2.6vw, 44px); height:clamp(34px, 2.6vw, 44px);
  border-radius:50%;
  border:1px solid rgba(145,197,216,0.32);
  font-size:1.05em;
}

/* Emphasis (filled teal) — replicates orthokinetics' "Have an Emergency" card */
.bottom-card--emphasis{
  background:var(--teal);
  border-color:var(--teal);
}
.bottom-card--emphasis:hover{
  background:var(--teal-deep);
  border-color:var(--teal-deep);
}
.bottom-card--emphasis .bottom-card-title,
.bottom-card--emphasis .bottom-card-emphasis-label,
.bottom-card--emphasis .bottom-card-phone{
  color:var(--ink-on-deep);
}
.bottom-card-emphasis-label{
  font-family:'Inter',sans-serif;
  font-size:clamp(11px, 0.8vw, 13px);
  letter-spacing:0.06em;
  text-transform:uppercase;
  opacity:0.85;
}
.bottom-card-phone{
  font-family:'Newsreader',serif; font-weight:500;
  font-size:clamp(20px, 1.55vw, 26px);
  letter-spacing:-0.005em;
}

/* v14: text width constraint for legibility — caps at 50% of viewport so the
   right half stays as photo. At narrow viewports (< 768px) the overlay covers
   the full hero and text spans the container — photo recedes to backdrop. */
@media (min-width:768px){
  .hero-text{ max-width:clamp(420px, 50%, 720px); }
  .hero-title{ max-width:18ch; }
}

/* v23 mobile hero — stacked layout: image top, text below on solid dark.
   Replaces the full-bleed-with-overlay approach (v14-v22) which buried Bryant's
   face under a heavy dark gradient. Now the face is unobstructed in the top half,
   text reads cleanly on solid dark in the bottom half. */
@media (max-width:767px){
  .hero{
    min-height:auto;
    display:flex; flex-direction:column;
    background:var(--surface-deep);
    padding:0;
    overflow:hidden;
  }
  .hero-bg-img{
    position:relative; inset:auto;
    width:100%;
    height:48vh;
    min-height:320px; max-height:440px;
    object-fit:cover;
    object-position:74% 25%;                /* Bryant's face at ~2/3 across on mobile (image subject sits in right 70-94% of frame) */
    z-index:auto;
  }
  .hero-overlay{ display:none; }            /* no overlay on stacked layout */
  .hero-content{
    position:relative;
    z-index:auto;
    /* 2026-06-10: restored horizontal padding to match .container convention
       (var(--pad-x)). Mobile MQ was wiping it to 0, causing the hero text
       to break out of the page's section margins. */
    padding:32px var(--pad-x) 40px;
    align-items:stretch;
    min-height:auto;
  }
  .hero-text{ max-width:none; width:100%; }
}

/* ═════════════════════════════════════════════
   MARQUEE — horizontal photo strip (under hero)
   ═════════════════════════════════════════════ */
.marquee{
  padding:0;
  background:var(--ink);
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.marquee-track{
  display:flex; gap:0;
  animation:marquee 50s linear infinite;
  width:max-content;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee-item{
  flex-shrink:0;
  width:clamp(280px, 28vw, 420px);
  height:clamp(220px, 22vw, 320px);
  position:relative;
  overflow:hidden;
}
.marquee-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1200ms var(--ease-out-quart); }
.marquee-item:hover img{ transform:scale(1.05); }
.marquee-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4));
}
.marquee-item .cap{
  position:absolute; left:20px; bottom:18px; right:20px;
  color:#fff; font-size:13px; font-weight:500; letter-spacing:0.04em; line-height:1.4;
  z-index:1;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ═════════════════════════════════════════════
   TRUST BAND
   ═════════════════════════════════════════════ */
.trust-band{
  padding:clamp(80px, 10vw, 130px) 0;
  background:var(--bg);
}
.trust-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0;
}
.trust-cell{
  padding:0 32px;
  border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:8px;
}
.trust-cell:first-child{ border-left:0; padding-left:0; }
.trust-cell .stat{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 72;
  font-size:clamp(38px, 4.2vw, 54px);
  line-height:1; letter-spacing:-0.025em;
  color:var(--ink);
}
.trust-cell .stat .suf{ font-size:0.5em; color:var(--teal); margin-left:2px; }
.trust-cell .label{
  margin-top:10px;
  font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal);
}
.trust-cell .sub{ font-size:13px; color:var(--ink-2); margin-top:2px; }

@media (max-width:880px){
  .trust-grid{ grid-template-columns: repeat(2, 1fr); gap:36px 0; }
  .trust-cell{ border-left:0; padding:0; }
  .trust-cell:nth-child(2n){ padding-left:32px; border-left:1px solid var(--rule); }
}

/* ═════════════════════════════════════════════
   PROBLEM FRAMING — split, photo right
   ═════════════════════════════════════════════ */
.problem{ background:var(--bg); }
.problem-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center;
}
.problem h2{ margin:24px 0 0; max-width:18ch; }
.problem-body p{ font-size:18.5px; line-height:1.65; color:var(--ink-2); margin:0 0 20px; }  /* Item 6 retro-fit 2026-06-08 */
.problem-body p:last-child{ margin-bottom:0; }
.problem-body .pull{
  /* 2026-06-04 update: hairline-left also removed (same AI-tell pattern as
     the .compare-anti line). Differentiation is typographic only —
     Newsreader display vs Inter body, larger size, generous margin. */
  margin:56px 0 0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  font-family:'Newsreader', serif; font-weight:400;
  font-variation-settings:"opsz" 48;
  font-size:clamp(22px, 2.4vw, 28px); line-height:1.32;
  color:var(--ink); letter-spacing:-0.014em;
  max-width:36ch;
}
.problem-photo{
  /* 2026-06-04: removed the floating .badge pill. Caption sits
     underneath the photo as a figure caption (italic Newsreader). */
  position:relative;
}
.problem-photo .photo-frame{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:0;
}
.problem-photo img{ width:100%; height:100%; object-fit:cover; }
.problem-photo .caption{
  display:block;
  margin-top:14px;
  font-family:'Newsreader', serif; font-style:italic; font-weight:400;
  font-size:14px; color:var(--ink-3); letter-spacing:0.005em;
  font-variation-settings:"opsz" 18;
}
.problem-photo .caption::before{ content:"\2014\00a0"; color:var(--teal); }
@media (max-width:920px){ .problem-grid{ grid-template-columns:1fr; gap:40px; } }

/* ═════════════════════════════════════════════
   FCM — dark teal band, feature photo + 5 cells
   ═════════════════════════════════════════════ */
.fcm{
  background:var(--teal-darker);
  color:#E9EFEF;
  overflow:hidden;
}
.fcm .eyebrow{ color:#91C5D8; }
.fcm .eyebrow::before{ background:#91C5D8; }
.fcm h2{ color:#E8EEF4; margin:24px 0 28px; max-width:22ch; }
.fcm-lead{ color:#ADC2C9; max-width:64ch; font-size:22px; line-height:1.55; margin:0; }  /* Item 6 retro-fit 2026-06-08: 18→22 */

.fcm-feature{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:48px;
  align-items:end;
  margin-bottom:64px;
}
.fcm-feature-photo{
  aspect-ratio:5/4;
  overflow:hidden;
  border-radius:0;
}
.fcm-feature-photo img{ width:100%; height:100%; object-fit:cover; }

/* FCM grid — Item 4 retro-fit 2026-06-07: 5-col strip → 4-col bento with cell 1
   ("Modern chiropractic") as a 2×2 feature card. Result: 1 large feature + 4 small
   cells in a 2×2 to its right. Breaks the identical-cell-grid anti-pattern. */
.fcm-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap:1px;
  background:rgba(255,255,255,0.08);
  border:0;
  border-radius:0;
  overflow:visible;
}
.fcm-cell{
  padding:36px 26px 40px;
  background:var(--teal-darker);
  position:relative;
  display:flex; flex-direction:column;
  min-height:280px;
  transition:background 320ms var(--ease-out-quart);
}
.fcm-cell:hover{ background:#0D3F51; }
/* FEATURE cell — first cell spans 2 cols × 2 rows, larger type, more padding */
.fcm-cell:first-child{
  grid-column: span 2;
  grid-row: span 2;
  padding:clamp(40px, 4vw, 60px) clamp(32px, 3vw, 48px);
  background:linear-gradient(155deg, #085470 0%, var(--teal-darker) 70%);
}
.fcm-cell:first-child:hover{ background:linear-gradient(155deg, #116280 0%, #0D3F51 70%); }
.fcm-cell .num{
  font-family:'Newsreader',serif; font-weight:300;
  font-variation-settings:"opsz" 14;
  font-size:13px; color:#5CA2BB;
  letter-spacing:0.04em;
  margin-bottom:36px;
  font-style:italic;
}
.fcm-cell:first-child .num{
  font-size:15px;
  margin-bottom:auto;  /* push title to bottom of feature cell */
}
.fcm-cell h3{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 24;
  font-size:21px; line-height:1.2; letter-spacing:-0.012em;
  color:#E8EEF4;
  margin:0 0 12px;
}
.fcm-cell:first-child h3{
  font-weight:300;
  font-variation-settings:"opsz" 48;
  font-size:clamp(28px, 2.8vw, 40px); line-height:1.06; letter-spacing:-0.022em;
  margin:32px 0 16px;
  max-width:18ch;
}
.fcm-cell p{
  font-size:14px; line-height:1.6; color:#95A7AD;
  margin:0;
}
.fcm-cell:first-child p{
  font-size:clamp(15px, 1.2vw, 17px); line-height:1.55;
  max-width:32ch;
  color:#ADC2C9;
}
@media (max-width:1080px){
  .fcm-feature{ grid-template-columns:1fr; gap:32px; }
  .fcm-grid{ grid-template-columns:repeat(2,1fr); }
  .fcm-cell:first-child{ grid-column: span 2; grid-row: auto; min-height:240px; }
}
@media (max-width:520px){
  .fcm-grid{ grid-template-columns:1fr; }
  .fcm-cell:first-child{ grid-column: auto; }
}

.fcm-cta-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  margin-top:64px; padding-top:40px;
  border-top:1px solid rgba(255,255,255,0.10);
  flex-wrap:wrap;
}
.fcm-cta-row p{ margin:0; color:#ADC2C9; max-width:56ch; font-size:15px; }
.fcm-cta-row .btn-secondary{
  color:#E8EEF4; border-color:rgba(244,240,232,0.30);
}
.fcm-cta-row .btn-secondary:hover{ background:#E8EEF4; color:var(--teal-darker); border-color:#E8EEF4; }

/* ═════════════════════════════════════════════
   FULL-BLEED PHOTO BAND
   ═════════════════════════════════════════════ */
.bleed{
  padding:0;
  position:relative;
}
.bleed-img{
  width:100%;
  height:clamp(280px, 38vw, 520px);
  object-fit:cover;
  display:block;
}
.bleed-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(42,42,42,0.55) 0%, rgba(42,42,42,0.20) 60%);
  display:flex; align-items:center;
}
.bleed-overlay .container{ width:100%; }
.bleed-quote{
  max-width:560px; color:#fff;
}
.bleed-quote .eyebrow{ color:#91C5D8; }
.bleed-quote .eyebrow::before{ background:#91C5D8; }
.bleed-quote h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 60;
  font-size:clamp(28px, 3.4vw, 44px); line-height:1.15; letter-spacing:-0.018em;
  color:#fff; margin:18px 0 0;
}

/* ═════════════════════════════════════════════
   CONDITIONS — grid with number prefix
   ═════════════════════════════════════════════ */
.conditions{ background:var(--bg); }
.conditions-head{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end;
  margin-bottom:56px;
}
.conditions-head h2{ margin:24px 0 0; max-width:16ch; }
.conditions-head .body{ font-size:18.5px; line-height:1.65; padding-bottom:8px; }  /* Item 6 retro-fit 2026-06-08 */

/* Conditions hub — Item 4 retro-fit 2026-06-07: 12-card uniform 4x3 grid →
   top-4 feature cards (2x2 large) + bottom-8 compact cards (4x2 small).
   Breaks the identical-cell-grid anti-pattern (audit item #21). */
.conditions-feature{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--rule);
  margin-bottom:clamp(48px, 5vw, 80px);
}
.conditions-compact{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--rule);
}
/* Legacy .conditions-grid kept for any other usage; in case any subpage still
   references it, it falls back to the original 4-col layout. */
.conditions-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--rule);
  border:0; border-radius:0; overflow:visible;
}
.cond{
  background:var(--surface);
  padding:30px 26px 32px;
  min-height:200px;
  display:flex; flex-direction:column; gap:8px;
  transition:background 240ms var(--ease-out-quart);
  position:relative;
}
/* FEATURE — top-4 large cards in the conditions hub */
.cond--feature{
  padding:clamp(36px, 3.4vw, 56px) clamp(28px, 2.8vw, 44px);
  min-height:clamp(280px, 26vw, 360px);
  gap:14px;
}
.cond--feature h3{ font-size:clamp(26px, 2.4vw, 34px); line-height:1.1; }
.cond--feature p{ font-size:15px; line-height:1.55; max-width:38ch; }
.cond--feature .idx{ font-size:14px; }
.cond--feature .ar{ font-size:18px; right:28px; top:32px; }
/* COMPACT — bottom-8 smaller cards */
.cond--compact{
  padding:22px 20px 24px;
  min-height:140px;
  gap:6px;
}
.cond--compact h3{ font-size:16.5px; line-height:1.2; }
.cond--compact p{ font-size:12.5px; line-height:1.45; max-width:30ch; }
.cond--compact .idx{ font-size:12px; }
.cond--compact .ar{ font-size:14px; right:18px; top:22px; }
.cond:hover{ background:var(--surface-2); }
.cond .idx{
  font-family:'Newsreader', serif; font-weight:300; font-style:italic;
  font-variation-settings:"opsz" 24;
  font-size:14px; color:var(--c-meta);
  letter-spacing:0.02em;
}
.cond h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 24;
  font-size:21px; line-height:1.2; letter-spacing:-0.012em;
  color:var(--ink); margin:0;
}
.cond p{ font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:auto 0 0; }
.cond .ar{
  position:absolute; right:22px; top:26px;
  font-size:16px; color:var(--ink-3);
  opacity:0; transform:translateX(-4px);
  transition:opacity 240ms var(--ease-out-quart), transform 240ms var(--ease-out-quart), color 240ms var(--ease-out-quart);
}
.cond:hover .ar{ opacity:1; transform:translateX(0); color:var(--c-state); }
@media (max-width:980px){
  .conditions-feature{ grid-template-columns:repeat(2,1fr); }
  .conditions-compact{ grid-template-columns:repeat(2,1fr); }
  .conditions-grid{ grid-template-columns:repeat(2,1fr); }
  .conditions-head{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:520px){
  .conditions-feature{ grid-template-columns:1fr; }
  .conditions-compact{ grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:0; }
  .conditions-grid{ grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:0; }
  .cond{ padding:18px 14px 22px; background:var(--bg); }
  .cond .idx{ font-size:11px; margin-bottom:8px; }
  .cond h3{ font-size:16px; line-height:1.2; }
  .cond p{ font-size:12.5px; line-height:1.45; }
  .cond .ar{ font-size:14px; }
  .cond--feature{ padding:28px 20px; min-height:200px; }
  .cond--feature h3{ font-size:22px; }
  .cond--feature p{ font-size:14px; }
  .cond--compact{ padding:16px 12px 18px; min-height:120px; }
  .cond--compact h3{ font-size:14.5px; }
  .cond--compact p{ font-size:11.5px; }
}

/* ═════════════════════════════════════════════
   SERVICES — photo cards
   ═════════════════════════════════════════════ */
.services{ background:var(--bg); }
.services-head{ margin-bottom:56px; max-width:760px; }
.services-head h2{ margin:24px 0 16px; }
/* Services grid — Item 4 retro-fit 2026-06-07: 3-col flat → alternating bento (2-1,1-2).
   Row 1: cell 1 wide-left (2 cols) + cell 2 narrow-right (1 col).
   Row 2: cell 3 narrow-left (1 col) + cell 4 wide-right (2 cols).
   Photos in wide cells get 16:9 aspect, narrow cells get 4:5 — visual rhythm. */
.services-grid{
  /* uniform 2x2 grid — equal cards + equal-aspect images so every photo and
     title aligns across rows (2026-06-22: retired the bento, which paired a
     16:9 cell with a 4:5 cell and left the titles at different heights). */
  display:grid; grid-template-columns:repeat(2, 1fr); gap:48px 32px;
}
.svc{ display:flex; flex-direction:column; gap:18px; text-decoration:none; color:inherit; }
a.svc:hover h3{ color:var(--teal); }
.svc-img{
  aspect-ratio:4/3; overflow:hidden; border-radius:0;
  background:var(--surface);
  position:relative;
}
.svc-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 900ms var(--ease-out-quart);
}
.svc:hover .svc-img img{ transform:scale(1.04); }
/* 2026-06-04: .svc-img .tag pill retired (floating white-bg chrome on photo
   read as AI tell). The service title + body copy is enough categorisation. */
.svc-img .tag{ display:none; }
.svc h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 28;
  font-size:22px; line-height:1.22; letter-spacing:-0.012em;
  color:var(--ink); margin:0;
}
.svc p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0; }

@media (max-width:880px){
  .services-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
  /* Tablet: drop the bento, all 4 cards equal-weight 2-col */
  .svc:nth-child(1), .svc:nth-child(2), .svc:nth-child(3), .svc:nth-child(4){ grid-column: span 1; }
  .svc:nth-child(1) .svc-img, .svc:nth-child(2) .svc-img,
  .svc:nth-child(3) .svc-img, .svc:nth-child(4) .svc-img{ aspect-ratio:4/3; }
}
@media (max-width:520px){ .services-grid{ grid-template-columns:1fr; } }
.services-more{ margin-top:36px; text-align:center; }
@media (max-width:520px){ .services-more{ margin-top:24px; } }

/* ═════════════════════════════════════════════
   DOCTORS
   ═════════════════════════════════════════════ */
.doctors{ background:var(--bg); }
.doctors-head{ max-width:760px; margin-bottom:56px; }
.doctors-head h2{ margin:24px 0 16px; }
.doctors-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
}
.doc{ display:flex; flex-direction:column; gap:20px; }
.doc-img{ aspect-ratio:4/5; overflow:hidden; border-radius:0; background:var(--surface-2); position:relative; }
.doc-img img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out-quart); }
.doc:hover .doc-img img{ transform:scale(1.03); }
.doc-meta{ display:flex; gap:6px 16px; flex-wrap:wrap; align-items:baseline; }
.doc-meta .name{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 36;
  font-size:28px; line-height:1.2; letter-spacing:-0.018em;
  color:var(--ink);
}
.doc-meta .creds{
  font-size:11px; font-weight:600; color:var(--teal);
  letter-spacing:0.14em; text-transform:uppercase;
}
/* creds always drop to their own line (consistent across doctor + team cards) */
.doc:not(.doc--compact) .doc-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
.doc-bio{ font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:48ch; }
.doc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
/* compact variant — image + name only */
.doc--compact{ gap:14px; }
.doc--compact .doc-img{ aspect-ratio:1/1; max-width:280px; border-radius:50%; margin:0 auto; }
.doc--compact .doc-img img{ object-position:50% 18%; }
/* Support-team grid (Meet the Team page) — 4 across, 2026-07-14 */
.staff-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 28px; margin-top:8px; }
@media (max-width:1024px){ .staff-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .staff-grid{ grid-template-columns:repeat(2,1fr); gap:20px 16px; } }
.doc--compact .doc-meta{ flex-direction:column; gap:4px; text-align:center; align-items:center; }
.doctors-more{ margin-top:36px; text-align:center; }
@media (max-width:520px){
  .doc--compact .doc-img{ max-width:180px; }
  .doctors-more{ margin-top:24px; }
}
.doc-tags span{
  font-size:11px; padding:5px 10px;
  background:var(--teal-soft);
  color:var(--c-accent);
  border-radius:2px; font-weight:500;
  letter-spacing:0.02em;
}
.doc-team-note{
  /* 2026-06-04: dropped border + radius. Now sits as a quiet cream band
     with typographic content, no card chrome. */
  margin-top:48px; padding:32px 0;
  background:none;
  border:0;
  border-top:1px solid var(--rule);
  border-radius:0;
  display:flex; gap:32px; align-items:center; flex-wrap:wrap;
}
.doc-team-note .l{ font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-meta); flex-shrink:0; }
.doc-team-note p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-2); flex:1; min-width:280px; }
@media (max-width:1024px){ .doctors-grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:680px){ .doctors-grid{ grid-template-columns:1fr; gap:48px; } }

/* v15 — Team roster placeholders (Patient-care & rehabilitative team) */
.team-roster{ margin-top:48px; padding-top:32px; border-top:1px solid var(--rule); }
.team-roster-eyebrow{ display:block; margin-bottom:24px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-meta); }
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 2.4vw, 40px) clamp(24px, 2vw, 36px);
}
.team-card{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.team-img{
  width:100%;
  aspect-ratio:4/5;
  background:var(--surface-2);
  border-radius:0;
  overflow:hidden;
  position:relative;
}
.team-img--placeholder{
  /* Diagonal-stripe placeholder pattern so it reads as "image to come" */
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 8px, rgba(0,0,0,0.07) 8px 16px),
    var(--surface-2);
  border:1px dashed rgba(0,0,0,0.12);
}
.team-img--placeholder::after{
  content:"Photo to come";
  position:absolute; inset:auto 0 16px;
  text-align:center;
  font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--c-meta); opacity:0.6;
}
.team-name{ font-family:'Newsreader',serif; font-weight:500; font-size:18px; color:var(--ink); }
.team-role{ font-size:13px; color:var(--c-meta); letter-spacing:0.02em; }
@media (max-width:880px){ .team-grid{ grid-template-columns:repeat(2, 1fr); gap:32px 20px; } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr 1fr; gap:24px 16px; } }

/* ═════════════════════════════════════════════
   VIDEO TESTIMONIALS — Item 7 retro-fit 2026-06-08
   Replaced 2-quote pull-quote section with 7-video gallery (1 featured + 6
   thumbs). Facade pattern: posters render on page load (lazy IMGs); iframes
   only spawn on user click. youtube-nocookie.com embed for privacy.
   ═════════════════════════════════════════════ */
.video-wall{ background:var(--bg); padding:clamp(72px, 8vw, 120px) 0; }
.video-wall-head{
  display:flex; justify-content:space-between; align-items:end;
  gap:32px; margin-bottom:48px; flex-wrap:wrap;
}
.video-wall-head h2{ margin:24px 0 0; max-width:20ch; }
.testi-rating{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  text-align:right;
}
.testi-rating .stars{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:24px; color:var(--c-accent); letter-spacing:0.06em; line-height:1;
}
.testi-rating .meta{ font-size:13px; color:var(--ink-2); }
.testi-rating .meta strong{ color:var(--ink); font-weight:600; }

/* Self-hosted testimonial videos — replaced YouTube facades 2026-06-25 (client #2) */
.video-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.video-card{ display:flex; flex-direction:column; gap:10px; }
.video-el{ width:100%; aspect-ratio:16/9; display:block; background:#0c1416; border-radius:4px; border:1px solid var(--rule); }
.video-card-name{ font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--ink); }
/* Clinic film — full-width home video section (3rd section, client #2) */
.home-video{ padding:clamp(48px,6vw,96px) 0; }
.home-video-head{ margin-bottom:32px; }
.home-video-head h2{ margin:16px 0 0; max-width:24ch; }
.home-video-frame .video-el{ aspect-ratio:16/9; border-radius:6px; }
@media (max-width:720px){ .video-grid{ grid-template-columns:1fr; gap:20px; } }

/* Collapse doubled whitespace where two light (white) sections meet — the gap
   was 2× section padding (~300px) with no colour break to fill it (client #9).
   Colour-change boundaries (white↔dark) keep their full padding. */
.trust-band + .home-video,
.compare + .services,
.services + .doctors,
.doctors + .video-wall,
.video-wall + .faq{ padding-top:0; }

.video-wall-stage{
  margin-bottom:clamp(24px, 2vw, 36px);
}
.video-wall-thumbs{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.4vw, 24px);
}

/* Facade — universal button-style poster with play overlay */
.video-facade{
  position:relative;
  display:block; width:100%;
  aspect-ratio:16/9;
  padding:0; border:0; margin:0;
  background:var(--ink); cursor:pointer;
  border-radius:8px; overflow:hidden;
  box-shadow:0 4px 20px -6px rgba(31, 41, 55, 0.10), 0 1px 3px -1px rgba(31, 41, 55, 0.06);
  transition:transform 240ms var(--ease-out-quart), box-shadow 240ms var(--ease-out-quart);
}
.video-facade:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px -10px rgba(31, 41, 55, 0.18), 0 2px 6px -2px rgba(31, 41, 55, 0.08);
}
.video-facade:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.video-facade-poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  transition:transform 480ms var(--ease-out-quart), filter 240ms var(--ease-out-quart);
}
.video-facade:hover .video-facade-poster{ transform:scale(1.04); }
.video-facade-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:clamp(56px, 7vw, 84px); height:clamp(56px, 7vw, 84px);
  display:flex; align-items:center; justify-content:center;
  transition:transform 240ms var(--ease-out-quart);
  pointer-events:none;
}
.video-facade:hover .video-facade-play{ transform:translate(-50%, -50%) scale(1.08); }
.video-facade-play svg{ width:100%; height:100%; display:block; }
.video-facade-play circle{ fill:rgba(255,255,255,0.95); }
.video-facade-play path{ fill:var(--ink); }
.video-facade-label{
  position:absolute; left:24px; bottom:20px;
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,0.55);
  padding:6px 12px; border-radius:3px;
  backdrop-filter:blur(4px);
}
/* Featured slot — full-width 16:9 with bigger play button + label */
.video-facade--featured{
  border-radius:12px;
  box-shadow:0 18px 56px -20px rgba(31, 41, 55, 0.30), 0 2px 8px -2px rgba(31, 41, 55, 0.12);
}
.video-facade--featured:hover{
  box-shadow:0 24px 64px -22px rgba(31, 41, 55, 0.35), 0 3px 10px -2px rgba(31, 41, 55, 0.15);
}
.video-facade--featured .video-facade-play{
  width:clamp(80px, 9vw, 120px); height:clamp(80px, 9vw, 120px);
}
/* When playing — hide overlays, iframe fills the slot */
.video-facade.is-playing{ cursor:default; transform:none; }
.video-facade.is-playing:hover{ transform:none; }
.video-facade-iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}

@media (max-width:880px){
  .video-wall-thumbs{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (max-width:560px){
  .video-wall-thumbs{ grid-template-columns:1fr; gap:14px; }
  .video-wall-head{ flex-direction:column; align-items:flex-start; }
  .testi-rating{ align-items:flex-start; text-align:left; }
}

/* ═════════════════════════════════════════════
   FIRST VISIT — photo per step
   ═════════════════════════════════════════════ */
.first-visit{ background:var(--bg); }
.fv-head{ max-width:760px; margin-bottom:56px; }
.fv-head h2{ margin:24px 0 16px; }
.fv-steps{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:32px 24px;
}
.fv-step{ display:flex; flex-direction:column; gap:18px; position:relative; }
.fv-step .photo{
  aspect-ratio:4/5;
  overflow:hidden; border-radius:2px;
  background:var(--surface-2);
  position:relative;
}
.fv-step .photo img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out-quart); }
.fv-step:hover .photo img{ transform:scale(1.04); }
.fv-step .n{
  position:absolute; left:18px; top:14px;
  background:rgba(255,255,255,0.94);
  font-family:'Newsreader',serif; font-weight:300; font-style:italic;
  font-variation-settings:"opsz" 20;
  font-size:14px; color:var(--c-meta);
  padding:6px 12px;
  border-radius:2px;
  letter-spacing:0.02em;
}
.fv-step h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 28;
  font-size:22px; line-height:1.2; letter-spacing:-0.012em;
  color:var(--ink); margin:0;
}
.fv-step p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0; }
@media (max-width:880px){
  .fv-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .fv-steps{ grid-template-columns:1fr; }
}

/* ═════════════════════════════════════════════
   FAQ
   ═════════════════════════════════════════════ */
.faq{ background:var(--bg); }
.faq-grid{
  display:grid; grid-template-columns:1fr 1.6fr; gap:96px;
}
.faq-head h2{ margin:24px 0 16px; }
.faq-head .body{ font-size:15px; line-height:1.6; color:var(--ink-2); }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--rule); }
.faq-item:last-child{ border-bottom:1px solid var(--rule); }
.faq-q{
  display:flex; width:100%; justify-content:space-between; align-items:flex-start;
  padding:28px 0; gap:32px;
  text-align:left;
  transition:color 200ms var(--ease-out-quart);
}
.faq-q:hover{ color:var(--c-state); }
.faq-q .q-text{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 30;
  font-size:21px; line-height:1.3; letter-spacing:-0.012em;
  color:inherit;
}
.faq-q .q-icon{
  flex-shrink:0; width:24px; height:24px; position:relative; margin-top:6px;
}
.faq-q .q-icon::before, .faq-q .q-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:1px; background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform 320ms var(--ease-out-quart), background 200ms;
}
.faq-q .q-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.open .faq-q .q-icon::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-item.open .faq-q .q-icon::before,
.faq-item.open .faq-q .q-icon::after{ background:var(--teal); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 480ms var(--ease-out-quart); }
.faq-a-inner{
  padding:0 0 28px; font-size:15.5px; line-height:1.65; color:var(--ink-2);
  max-width:76ch;  /* Item 5 retro-fit 2026-06-08: intro-block widen 64ch → 76ch */
}
@media (max-width:980px){ .faq-grid{ grid-template-columns:1fr; gap:32px; } }

/* ═════════════════════════════════════════════
   FINAL CTA — bg photo with overlay
   ═════════════════════════════════════════════ */
.cta-final{
  background:var(--teal-darker);
  color:#E8EEF4;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background-image:url('images/clinic-wide-2.webp');
  background-size:cover; background-position:center;
  opacity:0.18; z-index:-2;
}
.cta-final::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(15,65,83,0.92) 0%, rgba(15,65,83,0.75) 100%);
  z-index:-1;
}
.cta-final .eyebrow{ color:#91C5D8; }
.cta-final .eyebrow::before{ background:#91C5D8; }
.cta-final h2{ color:#E8EEF4; margin:24px 0 24px; max-width:18ch; }
.cta-final .lead{ color:#C9DCDE; max-width:60ch; margin-bottom:48px; font-size:22px; }  /* Item 6 retro-fit 2026-06-08 */

.cta-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:64px;
}
.cta-actions{
  display:flex; flex-direction:column; gap:24px;
  border-left:1px solid rgba(244,240,232,0.20);
  padding-left:48px;
}
.cta-actions .row{ display:flex; flex-direction:column; gap:6px; }
.cta-actions .l{ font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#91C5D8; }
.cta-actions .v{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 36;
  font-size:30px; line-height:1.1; letter-spacing:-0.018em;
  color:#E8EEF4;
}
.cta-actions .v a{ color:inherit; transition:color 200ms; }
.cta-actions .v a:hover{ color:#fff; }
.cta-actions .v .sub{ display:block; font-family:'Inter',sans-serif; font-size:13px; color:#9ABAC5; font-weight:500; letter-spacing:0; margin-top:6px; }
.cta-actions .v.address{ font-family:'Inter',sans-serif; font-size:18px; font-weight:500; letter-spacing:0; }
.cta-btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.cta-final .btn-primary{ background:#E8EEF4; color:var(--teal-darker); }
.cta-final .btn-primary:hover{ background:#fff; }
.cta-final .btn-secondary{
  background:transparent; color:#E8EEF4; border-color:rgba(244,240,232,0.40);
}
.cta-final .btn-secondary:hover{ background:#E8EEF4; color:var(--teal-darker); border-color:#E8EEF4; }
@media (max-width:880px){
  .cta-grid{ grid-template-columns:1fr; gap:40px; }
  .cta-actions{ border-left:0; padding-left:0; border-top:1px solid rgba(244,240,232,0.20); padding-top:32px; }
}

/* ═════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════ */
.footer{ background:#1A1A1A; color:#979B9F; padding:80px 0 32px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; gap:48px; margin-bottom:64px; }  /* v22: 5 cols (added Visit) */
.footer h4{
  font-family:'Inter', sans-serif;
  font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:#91C5D8; margin:0 0 20px;
}
.footer a{ display:block; padding:5px 0; font-size:14px; color:#979B9F; transition:color 200ms; }
.footer a:hover{ color:#E8EEF4; }
.footer .brand-foot img{ height:42px; width:auto; filter:brightness(0) invert(1); opacity:0.85; margin-bottom:20px; }
.footer-about p{ font-size:14px; line-height:1.65; color:#787B7E; max-width:38ch; }
/* v22 Visit column — address + hours block above contact links */
.footer-address{
  font-size:14px; line-height:1.6; color:#979B9F;
  margin:0 0 14px;
}
/* Opening-hours list — full week, today's row highlighted via JS (.is-today) */
.footer-hours{
  list-style:none; margin:0 0 6px; padding:0;
}
.footer-hours li{
  display:flex; justify-content:space-between; gap:18px;
  font-size:14px; line-height:1.5; color:#979B9F; padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.footer-hours li:last-child{ border-bottom:0; }
.footer-hours li.is-today{ color:#E8EEF4; font-weight:600; position:relative; padding-bottom:20px; }
/* "Today" absolutely positioned below the row so the day/time flex line is never
   disturbed and times stay right-aligned (was " · Today" appended inline → on the
   ~206px footer column the longest days wrapped, knocking the time out of alignment) */
.footer-hours li.is-today::after{ content:"Today"; position:absolute; left:0; bottom:3px; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#91C5D8; }
.footer-hours-note{ font-size:12px; color:#787B7E; margin:0 0 14px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:#686B6E;
}
@media (max-width:1200px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; gap:36px; } }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ═════════════════════════════════════════════
   REVEAL ON SCROLL
   ═════════════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 800ms var(--ease-out-quart), transform 800ms var(--ease-out-quart); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart); }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:60ms; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:140ms; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:220ms; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:300ms; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:380ms; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:460ms; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:540ms; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:620ms; }
.reveal-stagger.in > *:nth-child(9){ transition-delay:700ms; }
.reveal-stagger.in > *:nth-child(10){ transition-delay:780ms; }
.reveal-stagger.in > *:nth-child(11){ transition-delay:860ms; }
.reveal-stagger.in > *:nth-child(12){ transition-delay:940ms; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  .hero h1 .word > span{ transform:none !important; }
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
}

/* ═════════════════════════════════════════════
   INNER PAGE — page hero, breadcrumb, prose body
   ═════════════════════════════════════════════ */
.page-hero{
  padding-top:clamp(56px, 7vw, 100px);
  padding-bottom:clamp(64px, 8vw, 100px);
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
.page-hero .crumb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:24px;
}
.page-hero .crumb a{ color:var(--ink-3); transition:color 200ms; }
.page-hero .crumb a:hover{ color:var(--teal); }
.page-hero .crumb .sep{ color:var(--ink-3); opacity:0.5; }
.page-hero .crumb .current{ color:var(--ink); }
.page-hero-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:64px; align-items:end;
}
.page-hero h1{ margin:0 0 20px; max-width:18ch; }
.page-hero .lede{ font-size:clamp(19px, 1.55vw, 22px); line-height:1.55; color:var(--ink-2); max-width:60ch; margin:0; }  /* Item 6 retro-fit 2026-06-08 */
.page-hero-meta{
  display:flex; flex-direction:column; gap:14px;
  padding:24px 28px;
  background:var(--surface);
  border:1px solid var(--rule); border-radius:2px;
}
.page-hero-meta .row{ display:flex; flex-direction:column; gap:4px; }
.page-hero-meta .l{ font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-meta); }
.page-hero-meta .v{ font-size:14.5px; color:var(--ink); font-weight:500; }
@media (max-width:880px){ .page-hero-grid{ grid-template-columns:1fr; gap:32px; } }

.prose{ max-width:76ch; }  /* Item 5 retro-fit 2026-06-08: prose widen 68ch → 76ch */
.prose h2{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 48;
  font-size:clamp(24px, 2.6vw, 34px); line-height:1.18; letter-spacing:-0.018em;
  color:var(--ink); margin:56px 0 18px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 30;
  font-size:clamp(20px, 2vw, 24px); line-height:1.25; letter-spacing:-0.012em;
  color:var(--ink); margin:40px 0 12px;
}
.prose p{ font-size:18.5px; line-height:1.72; color:var(--ink-2); margin:0 0 20px; }  /* Item 6 retro-fit 2026-06-08 */
.prose ul, .prose ol{ padding-left:22px; margin:0 0 22px; }
.prose li{ font-size:18.5px; line-height:1.72; color:var(--ink-2); margin-bottom:8px; }  /* Item 6 retro-fit 2026-06-08 */
.prose li::marker{ color:var(--teal); }
.prose a{ color:var(--teal-deep); border-bottom:1px solid var(--teal-soft); transition:border-color 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart); }
.prose a:hover{ color:var(--teal); border-bottom-color:var(--teal); }
.prose blockquote{
  /* 2026-06-04: cream-bg testimonial box retired. Editorial pull-quote
     with leading teal opening mark, no chrome. */
  margin:48px 0;
  padding:0;
  background:none;
  border-radius:0;
  font-family:'Newsreader',serif; font-weight:400;
  font-variation-settings:"opsz" 30;
  font-size:clamp(20px, 1.9vw, 24px); line-height:1.45; letter-spacing:-0.012em;
  color:var(--ink);
  max-width:42em;
}
.prose blockquote::before{
  content:"\201C";
  font-family:'Newsreader',serif; font-weight:400;
  font-variation-settings:"opsz" 72;
  font-size:1.6em; line-height:0;
  color:var(--teal);
  vertical-align:-0.18em;
  margin-right:0.08em;
  opacity:0.85;
}
/* attribution inside blockquote — swap back to Inter so the cite line reads as meta, not prose */
.prose blockquote strong,
.prose blockquote cite{
  display:block; margin-top:14px;
  font-family:'Inter', sans-serif;
  font-style:normal; font-weight:600;
  font-size:13.5px; letter-spacing:0.02em;
  color:var(--ink-2);
}
.prose strong{ color:var(--ink); font-weight:600; }
.prose .key-takeaways{
  /* 2026-06-04: teal-soft box retired. Now a typographic section —
     serif heading + clean list, no box chrome. */
  margin:48px 0 36px;
  padding:0;
  background:none;
  border-radius:0;
}
.prose .key-takeaways h4{
  font-family:'Newsreader',serif; font-weight:500;
  font-variation-settings:"opsz" 30;
  font-size:clamp(20px, 2vw, 24px); line-height:1.25; letter-spacing:-0.014em;
  color:var(--ink);
  margin:0 0 16px;
  text-transform:none;
}
.prose .key-takeaways ul{ margin:0; padding-left:20px; }
.prose .key-takeaways li{
  font-size:15.5px; line-height:1.6; color:var(--ink-2); margin-bottom:8px;
}
.prose .key-takeaways li::marker{ color:var(--teal); }

/* Article shell — left content + right sticky sidebar */
.article{ padding:clamp(60px, 8vw, 110px) 0; }
.article-grid{
  display:grid; grid-template-columns: 1fr 320px; gap:80px;
  align-items:start;
}
.article-side{ position:sticky; top:120px; display:flex; flex-direction:column; gap:24px; }
.article-side .card{
  /* 2026-06-04: cream-bg sidebar card chrome retired. Now a typographic
     block with hairline separators between sidebar sections. */
  padding:24px 0 0;
  background:none;
  border:0;
  border-top:1px solid var(--rule);
  border-radius:0;
}
.article-side .card:first-child{ border-top:0; padding-top:0; }
.article-side .card .l{ font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-meta); margin-bottom:10px; display:block; }
.article-side .card h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 28;
  font-size:20px; line-height:1.25; letter-spacing:-0.012em;
  color:var(--ink); margin:0 0 10px;
}
.article-side .card p{ font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 16px; }
.article-side .card .btn{ width:100%; justify-content:center; }
.article-side .toc{ display:flex; flex-direction:column; gap:0; }
.article-side .toc a{
  padding:10px 0;
  border-top:1px solid var(--rule);
  font-size:13.5px; color:var(--ink-2); font-weight:500;
  display:flex; justify-content:space-between; gap:12px;
  transition:color 200ms, padding 200ms;
}
.article-side .toc a:first-child{ border-top:0; }
.article-side .toc a:hover{ color:var(--teal); padding-left:6px; }
.article-side .toc a .num{ font-family:'Newsreader',serif; font-style:italic; color:var(--teal); font-size:13px; }
@media (max-width:1080px){
  .article-grid{ grid-template-columns:1fr; gap:40px; }
  .article-side{ position:static; }
}

/* Related — editorial "see also" list.
   2026-06-04: was a 3-col card grid (impeccable + taste-skill both
   explicitly ban "3 equal cards horizontally"). Now vertical rows
   with a hairline rule between, no surface bg, no border, no radius.
   Each row has 4 children — explicit grid placement so they land in
   the right cells (previous version auto-flowed and put .ar in col 1
   row 2 next to the eyebrow). */
/* ═════════════════════════════════════════════
   RELATED — Item 8 retro-fit 2026-06-08
   Replaced cream-bg text-only row-list with photo-backed card grid.
   Each card = full-bleed background photo + dark gradient overlay + white
   title + white arrow. Eyebrow + body copy hidden visually (kept in DOM
   for SEO). Slug-mapped backgrounds via attribute selectors with a 3-image
   rotation fallback for unmapped slugs (most condition pages).
   ═════════════════════════════════════════════ */
.related{ background:var(--bg); padding:clamp(72px, 8vw, 120px) 0; }
.related-head{ margin-bottom:clamp(40px, 4vw, 64px); max-width:680px; }
.related-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 1.5vw, 24px);
}
.related-card{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  padding:clamp(28px, 2.4vw, 36px);
  border:0; border-radius:8px;
  overflow:hidden;
  color:#fff;
  background-color:var(--ink);
  background-image:url('images/treatment-1.webp');
  background-size:cover;
  background-position:center;
  box-shadow:0 6px 24px -8px rgba(31, 41, 55, 0.12), 0 1px 4px -1px rgba(31, 41, 55, 0.06);
  transition:transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Dark gradient overlay — bottom-heavy so title at bottom stays legible */
.related-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,30,40,0.30) 0%, rgba(20,30,40,0.55) 55%, rgba(20,30,40,0.82) 100%);
  transition:background 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events:none;
}
.related-card:hover::before{
  background:linear-gradient(180deg, rgba(20,30,40,0.35) 0%, rgba(20,30,40,0.55) 50%, rgba(20,30,40,0.88) 100%);
}
.related-card > *{ position:relative; z-index:1; }

/* SEO content kept in DOM but visually hidden — title is what carries
   the link's meaning visually */
.related-card .l{
  position:absolute; left:0; top:0;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); pointer-events:none;
}
.related-card p{
  position:absolute; left:0; top:0;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); pointer-events:none;
}
.related-card h3{
  position:absolute; left:clamp(28px, 2.4vw, 36px); right:clamp(28px, 2.4vw, 36px);
  bottom:clamp(28px, 2.4vw, 36px);
  font-family:'Newsreader',serif; font-weight:500;
  font-variation-settings:"opsz" 30;
  font-size:clamp(22px, 2vw, 26px); line-height:1.18; letter-spacing:-0.014em;
  color:#fff; margin:0;
  max-width:18ch;
}
.related-card .ar{
  position:absolute;
  right:clamp(28px, 2.4vw, 36px); top:clamp(28px, 2.4vw, 36px);
  font-size:22px; color:#fff; font-weight:300; line-height:1;
  transition:transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.related-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px -12px rgba(31, 41, 55, 0.22), 0 2px 8px -2px rgba(31, 41, 55, 0.10);
}
.related-card:hover .ar{ transform:translateX(4px); }

/* Slug → photo mapping (uses href attribute matcher) */
.related-card[href*="chiropractic"]{ background-image:url('images/service-chiro.webp'); }
.related-card[href*="myofascial-release"]{ background-image:url('images/service-myofascial.webp'); }
.related-card[href*="osteopathy"]{ background-image:url('images/service-osteopathy.webp'); }  /* Item 8.1 photo fix 2026-06-08 */
.related-card[href*="rehabilitative"]{ background-image:url('images/service-rehab.webp'); }
.related-card[href*="sports-massage"]{ background-image:url('images/service-sports-massage.webp'); }  /* Item 8.1 photo fix 2026-06-08 */
.related-card[href*="pregnancy"]{ background-image:url('images/service-pregnancy.webp'); }  /* Item 8.1 photo fix 2026-06-08 */
.related-card[href*="spinal-decompression"]{ background-image:url('images/treatment-1.webp'); }
.related-card[href*="laser-therapy"]{ background-image:url('images/treatment-2.webp'); }
.related-card[href*="shockwave"]{ background-image:url('images/fcm-1.webp'); }  /* fix 2026-08-12: was treatment-2 (laser-image collision). Correct shockwave photo is fcm-1.webp (misnamed asset — same photo the services/index svc card uses). */
.related-card[href*="super-inductive"]{ background-image:url('images/service-super-inductive.webp'); }  /* Item 8.1 photo fix 2026-06-08 */
.related-card[href*="functional-correction"]{ background-image:url('images/fcm-feature.webp'); }
/* Condition related-card images — explicit per-condition (fix 2026-08-04, was position-based) */
.related-card[href*="sciatica"]{ background-image:url('images/cond-sciatica.webp'); }
.related-card[href*="backpain"]{ background-image:url('images/cond-backpain.webp'); }
.related-card[href*="neckpain"]{ background-image:url('images/cond-neckpain.webp'); }
.related-card[href*="headache"]{ background-image:url('images/cond-headache.webp'); }
.related-card[href*="frozen-shoulder"]{ background-image:url('images/cond-frozen-shoulder.webp'); }
.related-card[href*="shoulder-pain"]{ background-image:url('images/cond-shoulder-pain.webp'); }
.related-card[href*="kneepain"]{ background-image:url('images/cond-kneepain.webp'); }
.related-card[href*="neuropathy"]{ background-image:url('images/cond-neuropathy.webp'); }
.related-card[href*="spinal-stenosis"]{ background-image:url('images/cond-spinal-stenosis.webp'); }
.related-card[href*="footpain"]{ background-image:url('images/cond-footpain.webp'); }
.related-card[href*="scoliosis"]{ background-image:url('images/cond-scoliosis.webp'); }
/* Condition-page fallback rotation — :nth-child for varied bg across the 3 cards */
.related-grid > .related-card:not([href*="chiropractic"]):not([href*="myofascial"]):not([href*="osteopathy"]):not([href*="rehabilitative"]):not([href*="sports-massage"]):not([href*="pregnancy"]):not([href*="spinal-decompression"]):not([href*="laser-therapy"]):not([href*="shockwave"]):not([href*="super-inductive"]):not([href*="functional-correction"]):not([href*="sciatica"]):not([href*="backpain"]):not([href*="neckpain"]):not([href*="headache"]):not([href*="frozen-shoulder"]):not([href*="shoulder-pain"]):not([href*="kneepain"]):not([href*="neuropathy"]):not([href*="spinal-stenosis"]):not([href*="footpain"]):not([href*="scoliosis"]):nth-child(3n+1){
  background-image:url('images/treatment-1.webp');
}
.related-grid > .related-card:not([href*="chiropractic"]):not([href*="myofascial"]):not([href*="osteopathy"]):not([href*="rehabilitative"]):not([href*="sports-massage"]):not([href*="pregnancy"]):not([href*="spinal-decompression"]):not([href*="laser-therapy"]):not([href*="shockwave"]):not([href*="super-inductive"]):not([href*="functional-correction"]):not([href*="sciatica"]):not([href*="backpain"]):not([href*="neckpain"]):not([href*="headache"]):not([href*="frozen-shoulder"]):not([href*="shoulder-pain"]):not([href*="kneepain"]):not([href*="neuropathy"]):not([href*="spinal-stenosis"]):not([href*="footpain"]):not([href*="scoliosis"]):nth-child(3n+2){
  background-image:url('images/treatment-2.webp');
}
.related-grid > .related-card:not([href*="chiropractic"]):not([href*="myofascial"]):not([href*="osteopathy"]):not([href*="rehabilitative"]):not([href*="sports-massage"]):not([href*="pregnancy"]):not([href*="spinal-decompression"]):not([href*="laser-therapy"]):not([href*="shockwave"]):not([href*="super-inductive"]):not([href*="functional-correction"]):not([href*="sciatica"]):not([href*="backpain"]):not([href*="neckpain"]):not([href*="headache"]):not([href*="frozen-shoulder"]):not([href*="shoulder-pain"]):not([href*="kneepain"]):not([href*="neuropathy"]):not([href*="spinal-stenosis"]):not([href*="footpain"]):not([href*="scoliosis"]):nth-child(3n+3){
  background-image:url('images/fcm-feature.webp');
}

@media (max-width:880px){
  .related-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .related-grid{ grid-template-columns:1fr; }
  .related-card{ aspect-ratio:16/9; }
}

/* ═════════════════════════════════════════════
   DOCTOR PROFILE
   ═════════════════════════════════════════════ */
.doctor-hero{
  padding:clamp(60px, 7vw, 100px) 0;
  background:var(--bg);
}
.doctor-hero-grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:64px; align-items:center;
}
.doctor-hero .photo{ aspect-ratio:4/5; overflow:hidden; border-radius:0; background:var(--surface-2); }
.doctor-hero .photo img{ width:100%; height:100%; object-fit:cover; }
.doctor-hero .crumb{ margin-bottom:24px; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.doctor-hero .crumb a{ color:var(--ink-3); }
.doctor-hero .crumb a:hover{ color:var(--teal); }
.doctor-hero h1{
  margin:0 0 18px;
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 72;
  font-size:clamp(36px, 5vw, 64px); line-height:1.05; letter-spacing:-0.025em;
  color:var(--ink);
}
.doctor-hero .creds{
  font-size:12px; font-weight:600; color:var(--teal);
  letter-spacing:0.14em; text-transform:uppercase;
  margin-bottom:24px;
}
.doctor-hero .lede{ font-size:22px; line-height:1.55; color:var(--ink-2); margin:0 0 32px; max-width:50ch; }  /* Item 6 retro-fit 2026-06-08 */
.doctor-hero .stats{ display:flex; gap:32px; flex-wrap:wrap; margin-bottom:32px; padding-top:24px; border-top:1px solid var(--rule); }
.doctor-hero .stats .item{ display:flex; flex-direction:column; gap:4px; }
.doctor-hero .stats .v{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 36;
  font-size:22px; line-height:1; color:var(--ink); letter-spacing:-0.015em;
}
.doctor-hero .stats .l{ font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:920px){
  .doctor-hero-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ═════════════════════════════════════════════
   CONTACT
   ═════════════════════════════════════════════ */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:80px;
  align-items:start;
}
.contact-info{ display:flex; flex-direction:column; gap:0; }
.contact-row{
  padding:24px 0;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns: 130px 1fr; gap:24px;
}
.contact-row:last-child{ border-bottom:1px solid var(--rule); }
.contact-row .l{ font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-meta); padding-top:4px; }
.contact-row .v{ font-size:16px; color:var(--ink); line-height:1.55; }
.contact-row .v strong{ font-family:'Newsreader',serif; font-weight:600; font-variation-settings:"opsz" 28; font-size:22px; letter-spacing:-0.015em; display:block; margin-bottom:6px; }
.contact-row .v a{ color:var(--teal); transition:color 200ms; }
.contact-row .v a:hover{ color:var(--teal-deep); }
.contact-row .v .sub{ display:block; font-size:13px; color:var(--ink-3); margin-top:4px; }
.contact-map{
  aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  background:var(--surface-2);
  position:relative;
}
.contact-map iframe{ width:100%; height:100%; border:0; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } .contact-map{ aspect-ratio:4/3; } }

/* ═════════════════════════════════════════════
   BLOG
   ═════════════════════════════════════════════ */
.blog-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:48px 32px;
}
.post-card{ display:flex; flex-direction:column; gap:18px; }
.post-card .ph{ aspect-ratio:4/3; overflow:hidden; border-radius:2px; background:var(--surface-2); }
.post-card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out-quart); }
.post-card:hover .ph img{ transform:scale(1.04); }
.post-card .meta{ display:flex; gap:10px; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.post-card .meta .topic{ color:var(--c-meta); }
.post-card .meta .dot{ width:4px; height:4px; background:var(--ink-3); border-radius:50%; }
.post-card h3{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 30;
  font-size:22px; line-height:1.25; letter-spacing:-0.015em;
  color:var(--ink); margin:0;
  transition:color 240ms;
}
.post-card:hover h3{ color:var(--teal); }
.post-card p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; }
@media (max-width:880px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .blog-grid{ grid-template-columns:1fr; } }

.post-hero{
  padding:clamp(48px, 6vw, 90px) 0 clamp(32px, 4vw, 56px);
  border-bottom:1px solid var(--rule);
}
.post-hero .crumb{ margin-bottom:24px; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.post-hero .crumb a{ color:var(--ink-3); }
.post-hero h1{
  font-family:'Newsreader',serif; font-weight:600;
  font-variation-settings:"opsz" 72;
  font-size:clamp(34px, 4.6vw, 56px); line-height:1.08; letter-spacing:-0.022em;
  color:var(--ink); max-width:22ch; margin:0 0 24px;
}
.post-hero .meta{ display:flex; gap:16px; align-items:center; font-size:13px; color:var(--ink-2); }
.post-hero .meta .topic{ color:var(--c-meta); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; font-size:10.5px; }
.post-hero .feature-img{ aspect-ratio:16/8; overflow:hidden; border-radius:2px; margin-top:40px; }
.post-hero .feature-img img{ width:100%; height:100%; object-fit:cover; }

/* ═════════════════════════════════════════════
   NAV MEGA-MENU — added 2026-06-02
   ═════════════════════════════════════════════ */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a::after{
  content:""; display:inline-block;
  position:static; left:auto; right:auto; bottom:auto;
  background:transparent;
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  border-top-right-radius:1px;
  transform:rotate(45deg);
  transform-origin:center;
  margin:0 0 3px 8px;
  vertical-align:middle;
  transition:transform 240ms var(--ease-out-quart),
             opacity 200ms var(--ease-out-quart);
  opacity:0.55;
}
/* hover / open — pure rotation, no translate jitter */
.nav-links .has-sub > a:hover::after{ transform:rotate(225deg); opacity:1; }
.nav-links .has-sub:hover > a::after,
.nav-links .has-sub:focus-within > a::after{
  transform:rotate(225deg);
  opacity:1;
}
.nav-sub{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  background:#FFFFFF;
  border:1px solid var(--rule);
  border-radius:3px;
  padding:18px 18px;
  min-width:240px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 260ms var(--ease-out-quart),
             transform 260ms var(--ease-out-quart),
             visibility 0s linear 260ms;
  z-index:60;
  box-shadow:0 18px 56px -28px rgba(10,27,42,0.22),
             0 2px 8px -2px rgba(10,27,42,0.06);
}
/* invisible hover bridge — prevents flicker between trigger + dropdown */
.has-sub::before{
  content:""; position:absolute; left:0; right:0;
  top:100%; height:14px;
}
.nav-links .has-sub:hover .nav-sub,
.nav-links .has-sub:focus-within .nav-sub{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity 260ms var(--ease-out-quart),
             transform 260ms var(--ease-out-quart),
             visibility 0s linear 0s;
}
.nav-sub--wide{ min-width:520px; }
.nav-sub-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:2px 28px;
}
.nav-sub-list{ display:flex; flex-direction:column; gap:2px; }
.nav-sub a{
  display:block; padding:8px 8px;
  font-size:13.5px; font-weight:500;
  color:var(--ink-2);
  border-radius:2px;
  transition:background 180ms, color 180ms, padding 180ms;
  white-space:nowrap;
}
.nav-sub a:hover{
  background:var(--teal-soft);
  color:var(--teal-deep);
  padding-left:14px;
}
.nav-sub a::after{ display:none; }  /* override .nav-links a underline */
.nav-sub a.featured{
  background:var(--teal-darker);
  color:#E8EEF4;
  font-weight:600;
  padding:12px 14px;
  margin-bottom:8px;
  grid-column:1 / -1;
}
.nav-sub a.featured:hover{ background:var(--teal-deep); padding-left:18px; }
.nav-sub a.all{
  margin-top:8px;
  border-top:1px solid var(--rule);
  padding-top:14px;
  color:var(--teal);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.04em;
  grid-column:1 / -1;
}
.nav-sub a.all:hover{ background:transparent; padding-left:8px; color:var(--teal-deep); }

@media (max-width:1080px){
  .nav-sub--wide{ min-width:420px; }
}
@media (max-width:920px){
  /* mobile: dropdowns collapse — handled by nav-links display:none rule already */
  .nav-sub{ display:none; }
}

/* ═════════════════════════════════════════════
   INNER PAGE HERO — lighter, less display-heavy
   ═════════════════════════════════════════════ */
.page-hero h1.display{
  font-size:clamp(34px, 4.4vw, 54px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.02em;
  font-variation-settings:"opsz" 48;
  max-width:22ch;
}

/* Doctor profile hero */
.doctor-hero h1{
  font-size:clamp(34px, 4.4vw, 54px);
  font-weight:500;   /* 2026-06-22: 300→500, thicker for readability */
  font-variation-settings:"opsz" 48;
  letter-spacing:-0.02em;
}

/* Blog post hero — already 300 weight, tighten size */
.post-hero h1{
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.12;
}

/* ═════════════════════════════════════════════
   COMPARISON BAND — added 2026-06-02 (CRO pass)
   ═════════════════════════════════════════════ */
.compare{ background:var(--bg); }
.compare-head{ max-width:760px; margin-bottom:48px; }
.compare-head h2{ margin:24px 0 16px; }
/* ═════════════════════════════════════════════
   COMPARE — asymmetric card-comparison
   Replaced 5-col SaaS table with 1 ESC-dark-band-card (full width, with
   rationale paragraph) + 4 alternative cards in 1-big-3-small grid.
   Added 2026-06-07 (Item 3 retro-fit). Killed old .compare-table /
   .compare-row / .compare-cell rules.
   ═════════════════════════════════════════════ */
.compare-cards{
  display:flex; flex-direction:column;
  gap:clamp(20px, 2vw, 32px);
}

/* ESC card — full width, dark teal band, rationale + 4 attributes
   Bigger padding + stronger shadow than alt cards to dominate the comparison. */
.compare-card.compare-card--us{
  background:var(--surface-deep);
  color:var(--ink-on-deep);
  padding:clamp(44px, 5vw, 72px) clamp(40px, 5vw, 64px);
  border:0;
  border-radius:14px;
  box-shadow:0 18px 56px -20px rgba(31, 79, 83, 0.45), 0 2px 8px -2px rgba(31, 79, 83, 0.18);
  display:grid;
  grid-template-columns: 1.2fr 1.5fr;
  grid-template-rows:auto auto;
  column-gap:clamp(28px, 3vw, 56px);
  row-gap:clamp(28px, 3vw, 40px);
  align-items:start;
}
.compare-card.compare-card--us .compare-card-head{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; gap:10px;
}
.compare-card.compare-card--us .eyebrow{
  color:var(--meta-on-deep);
  margin-bottom:8px;
}
.compare-card.compare-card--us h3{
  font-family:'Newsreader', serif; font-weight:300;
  font-variation-settings:"opsz" 60;
  font-size:clamp(34px, 3.8vw, 52px); line-height:1.04; letter-spacing:-0.025em;
  color:var(--ink-on-deep);
  margin:0;
}
.compare-card.compare-card--us .compare-card-sub{
  font-size:13.5px; color:var(--meta-on-deep);
  letter-spacing:0.04em;
  font-style:italic;
}
.compare-card.compare-card--us .compare-card-rationale{
  grid-column:2; grid-row:1;
  font-family:'Newsreader', serif; font-weight:300;
  font-variation-settings:"opsz" 28;
  font-size:clamp(17px, 1.4vw, 20px); line-height:1.55; letter-spacing:-0.005em;
  color:var(--ink-on-deep);
  margin:0;
  max-width:54ch;
}
.compare-card.compare-card--us .compare-card-attrs{
  grid-column:1 / -1; grid-row:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px, 2vw, 32px);
  margin:0; padding:clamp(20px, 2vw, 28px) 0 0;
  border-top:1px solid var(--rule-on-deep);
}
.compare-card.compare-card--us .compare-card-attrs > div{
  display:flex; flex-direction:column; gap:8px;
}
.compare-card.compare-card--us .compare-card-attrs dt{
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--meta-on-deep);
  margin:0;
}
.compare-card.compare-card--us .compare-card-attrs dd{
  font-size:15.5px; line-height:1.35;
  color:var(--ink-on-deep);
  margin:0;
}

/* Alternatives grid — symmetric 4-col + CSS subgrid so all card rows align across cards.
   Parent owns the row tracks (1 title row + 1 sub row + 4 attr rows = 6 rows).
   Each card uses `grid-template-rows: subgrid` to inherit those rows — so the tallest
   title (e.g. "Painkillers / NSAIDs" wrapping to 2 lines) sets the title-row height for
   ALL 4 cards, and the attribute labels line up exactly across columns. */
.compare-others{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  column-gap:clamp(16px, 1.5vw, 24px);
  row-gap:0;
}
.compare-card{
  background:var(--surface);
  border:1px solid transparent;
  border-radius:14px;
  padding:clamp(28px, 2.8vw, 40px);
  display:grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap:16px;
  box-shadow:0 4px 20px -6px rgba(31, 41, 55, 0.07), 0 1px 3px -1px rgba(31, 41, 55, 0.04);
  transition:box-shadow 240ms var(--ease-out-quart), transform 240ms var(--ease-out-quart), border-color 240ms var(--ease-out-quart);
}
.compare-card:hover{
  box-shadow:0 12px 36px -10px rgba(31, 41, 55, 0.12), 0 2px 6px -2px rgba(31, 41, 55, 0.06);
  transform:translateY(-2px);
}
.compare-card-title{
  font-family:'Newsreader', serif; font-weight:500;
  font-variation-settings:"opsz" 24;
  font-size:clamp(18px, 1.5vw, 22px); line-height:1.18; letter-spacing:-0.012em;
  color:var(--ink);
  margin:0;
  align-self:end;
}
.compare-card-sub{
  font-size:12.5px; color:var(--ink-3);
  font-style:italic;
  margin:0;
  align-self:start;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.compare-card-attr{
  display:flex; flex-direction:column; gap:6px;
  padding:12px 0;
  border-bottom:1px dotted var(--rule);
}
.compare-card-attr:last-child{ border-bottom:0; padding-bottom:0; }
.compare-card-attr-l{
  font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.compare-card-attr-v{
  font-size:15px; line-height:1.35;
  color:var(--ink);
}

/* Subgrid graceful fallback for older browsers (no subgrid support): cards still
   render fine, rows just won't perfectly align — acceptable degradation. */
@supports not (grid-template-rows: subgrid){
  .compare-card{
    grid-template-rows: none;
    grid-row: auto;
    display:flex; flex-direction:column;
    gap:14px;
  }
}

.yes{ color:var(--teal); font-size:16px; line-height:1; margin-right:4px; }
.no{ color:var(--danger); font-size:16px; line-height:1; margin-right:4px; font-weight:600; }
.part{ color:var(--ink-3); font-size:16px; line-height:1; margin-right:4px; }
/* On dark ESC card, status dots use on-deep tint */
.compare-card.compare-card--us .yes{ color:var(--meta-on-deep); }
.compare-card.compare-card--us .no{ color:#E89AA5; }
.compare-card.compare-card--us .part{ color:var(--body-on-deep); }
.compare-note{
  margin-top:24px;
  font-size:13.5px; color:var(--ink-3); font-style:italic;
  max-width:64ch;
}
/* compare-anti — editorial callout. Pure typography, NO box, NO line.
   2026-06-04 update: even the 1px hairline-left was still a single-stripe-on-
   solid-bg, which Bolun called out as the same AI tell as the original 3px
   teal stripe — just thinner. Differentiation now comes from typography
   (Newsreader 20px serif body vs Inter 14px elsewhere) + the eyebrow + the
   margin-top breathing room. Nothing else. */
.compare-anti{
  margin:64px 0 0;
  padding:0;
  max-width:680px;
}
.compare-anti .eyebrow{ color:var(--teal); display:block; margin-bottom:14px; }
.compare-anti p{
  font-family:'Newsreader', Georgia, serif;
  font-weight:400;
  font-size:20px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
  font-variation-settings:"opsz" 30;
  letter-spacing:-0.005em;
}
.compare-anti p strong{ color:var(--ink); font-weight:500; }
@media (max-width:520px){
  .compare-anti{ margin-top:32px; padding-left:20px; }
  .compare-anti p{ font-size:17px; }
}

/* Compare cards — responsive */
@media (max-width:1100px){
  /* Tablet: 4-col → 2x2 grid */
  .compare-others{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
  /* Mobile: everything stacks 1-col */
  .compare-others{ grid-template-columns: 1fr; }
  .compare-card.compare-card--us{
    grid-template-columns: 1fr;
    grid-template-rows:auto auto auto;
    padding:32px 24px;
  }
  .compare-card.compare-card--us .compare-card-head,
  .compare-card.compare-card--us .compare-card-rationale{
    grid-column:1; grid-row:auto;
  }
  .compare-card.compare-card--us .compare-card-attrs{
    grid-column:1; grid-row:auto;
    grid-template-columns: 1fr 1fr;
    gap:18px;
  }
  .compare-card{ padding:24px 22px; }
}

/* ═════════════════════════════════════════════
   RISK REVERSAL BAND
   ═════════════════════════════════════════════ */
.risk-reversal{
  padding:clamp(60px, 8vw, 110px) 0;
  background:var(--bg);
  border-top:1px solid var(--rule);
}
.risk-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:80px;
  align-items:center;
}
.risk-left h3{
  margin:24px 0 0;
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 60;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.15; letter-spacing:-0.02em;
  color:var(--ink); max-width:18ch;
}
.risk-right p{ font-size:16.5px; line-height:1.7; color:var(--ink-2); margin:0 0 18px; }
.risk-right p:last-child{ margin-bottom:0; }
@media (max-width:880px){ .risk-grid{ grid-template-columns:1fr; gap:32px; } }

/* ═════════════════════════════════════════════
   SYMPTOM RECOGNITION CHECKLIST — condition pages
   ═════════════════════════════════════════════ */
.symptom-check{
  background:var(--teal-soft);
  border-radius:3px;
  padding:32px 36px 36px;
  margin:0 0 56px;
}
.symptom-check .l{
  font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--c-meta); display:block; margin-bottom:14px;
}
.symptom-check h3{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 36;
  font-size:22px; line-height:1.25; letter-spacing:-0.012em;
  color:var(--ink); margin:0 0 20px;
}
.symptom-check ul{
  list-style:none; padding:0; margin:0 0 22px;
  display:flex; flex-direction:column; gap:10px;
}
.symptom-check li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:15.5px; line-height:1.5; color:var(--ink); padding:0;
}
.symptom-check li::marker{ display:none; }
.symptom-check li::before{
  content:"";
  flex-shrink:0;
  width:18px; height:18px;
  border:1.5px solid var(--teal);
  border-radius:3px;
  margin-top:2px;
  background:#fff;
}
.symptom-check .resolve{
  border-top:1px solid var(--teal);
  padding-top:20px;
  display:flex; gap:18px; align-items:center;
  flex-wrap:wrap;
}
.symptom-check .resolve p{
  margin:0; flex:1; min-width:240px;
  font-size:14.5px; line-height:1.55; color:var(--ink);
}
.symptom-check .resolve p strong{ color:var(--teal-deep); }

/* ═════════════════════════════════════════════
   "NOT FOR" trust block — service pages
   ═════════════════════════════════════════════ */
.not-for{
  background:var(--surface-cool);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:28px 32px;
  margin:32px 0;
}
.not-for .l{
  font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:12px;
}
.not-for h4{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 24;
  font-size:18px; line-height:1.25; letter-spacing:-0.01em;
  color:var(--ink); margin:0 0 12px;
}
.not-for p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }

/* ═════════════════════════════════════════════
   BOOKING FORM — contact page
   ═════════════════════════════════════════════ */
.booking-form{
  background:var(--surface-cool);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:36px 36px 32px;
  margin-top:48px;
}
.booking-form .l{
  font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--c-meta); display:block; margin-bottom:10px;
}
.booking-form h3{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 36;
  font-size:24px; line-height:1.2; letter-spacing:-0.018em;
  color:var(--ink); margin:0 0 8px;
}
.booking-form .form-sub{ font-size:14.5px; color:var(--ink-2); margin:0 0 24px; }
.bf-row{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:14px;
}
.bf-row.full{ grid-template-columns:1fr; }
.bf-field{ display:flex; flex-direction:column; gap:6px; }
.bf-field label{
  font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.bf-field input, .bf-field select, .bf-field textarea{
  border:1px solid var(--rule-strong);
  background:#fff;
  border-radius:2px;
  padding:12px 14px;
  font-family:'Inter', sans-serif;
  font-size:15px; color:var(--ink);
  transition:border-color 200ms, background 200ms;
}
.bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus{
  outline:none;
  border-color:var(--teal);
  background:#fff;
}
.bf-field textarea{ resize:vertical; min-height:80px; font-family:inherit; }
.bf-submit{ margin-top:10px; }
.bf-submit .btn{ width:100%; justify-content:center; }
.bf-foot{ font-size:12.5px; color:var(--ink-3); margin-top:14px; text-align:center; }
@media (max-width:520px){ .bf-row{ grid-template-columns:1fr; } }

/* Required asterisk — small red superscript, top-right of the field */
.bf-field{ position:relative; }
.bf-field label .req{
  position:absolute; top:0; right:1px;
  color:#e5484d; font-size:12px; line-height:1; font-weight:700;
  vertical-align:super;
}
/* Invalid state */
.bf-field input.bf-invalid, .bf-field select.bf-invalid, .bf-cal-trigger.bf-invalid{
  border-color:#e5484d;
}

/* WhatsApp — country selector + number */
.bf-tel{ display:flex; gap:8px; }
.bf-tel select{ flex:0 0 auto; width:auto; padding-right:8px; }
.bf-tel input{ flex:1 1 auto; min-width:0; }

/* Monday-first date picker */
.bf-cal-field{ }
.bf-cal-trigger{
  text-align:left; cursor:pointer;
  border:1px solid var(--rule-strong); background:#fff; border-radius:2px;
  padding:12px 14px; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink-3);
  transition:border-color 200ms;
}
.bf-cal-trigger.has-val{ color:var(--ink); }
.bf-cal-trigger:focus, .bf-cal-trigger[aria-expanded="true"]{ outline:none; border-color:var(--teal); }
.bf-cal{
  position:absolute; z-index:30; top:100%; left:0; margin-top:6px;
  width:280px; max-width:calc(100vw - 60px);
  background:#fff; border:1px solid var(--rule-strong); border-radius:4px;
  box-shadow:0 12px 32px rgba(20,25,40,.16); padding:14px;
}
.bf-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bf-cal-title{ font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--ink); }
.bf-cal-nav{
  width:30px; height:30px; border:1px solid var(--rule-strong); background:#fff; border-radius:3px;
  cursor:pointer; font-size:18px; line-height:1; color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.bf-cal-nav:hover:not(:disabled){ border-color:var(--teal); color:var(--teal); }
.bf-cal-nav:disabled{ opacity:.3; cursor:default; }
.bf-cal-dows{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.bf-cal-dows span{ text-align:center; font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:4px 0; }
.bf-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.bf-cal-pad{ }
.bf-cal-day{
  aspect-ratio:1/1; border:0; background:transparent; border-radius:3px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:background 150ms,color 150ms;
}
.bf-cal-day:hover:not(:disabled){ background:var(--teal); color:#fff; }
.bf-cal-day:disabled{ color:var(--rule-strong); cursor:default; }
.bf-cal-day.is-sel{ background:var(--ink); color:#fff; font-weight:700; }

/* ═════════════════════════════════════════════
   TRUST BAND — single editorial column
   2026-06-04 rebuild: dropped 2-col sticky-intro layout (only 3 stats so
   the sticky pattern had nothing to anchor against) AND the 2-col mini-
   grid per row (sparse meta col looked broken — see 1st screenshot from
   Bolun 2026-06-04). Now: intro at top, 3 stat blocks in one row below,
   no box, no chrome, no hairlines. Whitespace does all the work.
   ═════════════════════════════════════════════ */
.trust-band{
  padding:clamp(80px, 10vw, 130px) 0;
  background:var(--bg);
  border-top:1px solid var(--rule);
}
.trust-edit{
  display:flex;
  flex-direction:column;
  gap:clamp(64px, 7vw, 96px);
}
.trust-edit-intro{ max-width:760px; }
.trust-edit-intro h2{
  margin:22px 0 22px;
  font-family:'Newsreader', serif; font-weight:300;
  font-variation-settings:"opsz" 60;
  font-size:clamp(30px, 3.8vw, 48px); line-height:1.06; letter-spacing:-0.025em;
  color:var(--ink); max-width:22ch;
}
.trust-edit-intro p{
  font-size:16px; line-height:1.7; color:var(--ink-2);
  margin:0 0 28px; max-width:76ch;  /* Item 5 retro-fit 2026-06-08: intro-block widen 58ch → 76ch */
}
.trust-edit-cta a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal);
  padding-bottom:6px;
  border-bottom:1px solid var(--teal);
  transition:color 200ms, border-color 200ms, gap 240ms;
}
.trust-edit-cta a:hover{ color:var(--teal-deep); border-bottom-color:var(--teal-deep); gap:12px; }
.trust-edit-cta .arr{ font-size:16px; line-height:1; transition:transform 240ms var(--ease-out-quart); }
.trust-edit-cta a:hover .arr{ transform:translateX(3px); }

.trust-edit-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(40px, 5vw, 80px);
  align-items:start;
}
.trust-edit-cell{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  border:0;
}
.trust-edit-cell .v{
  font-family:'Newsreader', serif; font-weight:300;
  font-variation-settings:"opsz" 72;
  font-size:clamp(44px, 5vw, 68px);
  line-height:1; letter-spacing:-0.03em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  /* +/suffix centred on the number's optical middle (was baseline → suf sat ~7px low) */
  display:flex; align-items:center; gap:2px;
}
.trust-edit-cell .v .suf{ font-size:0.4em; color:var(--teal); letter-spacing:0; font-weight:300; transform:translateY(-0.23em); }  /* optical-centre the suffix to the digit ink (box-centre sat ~11px low from the comma/leading descender) */
.trust-edit-cell .v:not(.num){
  font-size:clamp(22px, 2.4vw, 32px);
  letter-spacing:-0.016em;
  line-height:1.15;
  white-space:normal;
  align-items:baseline;
}
.trust-edit-cell .l{
  margin-top:18px;
  font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
}
.trust-edit-cell .d{
  margin-top:6px;
  font-size:14px; line-height:1.6; color:var(--ink-2);
}
.trust-edit-cell--feature .stars{
  margin-top:12px;
  font-size:16px; color:var(--teal); letter-spacing:0.06em;
}

@media (max-width:880px){
  .trust-edit-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; }   /* v15: 2-col on tablet (was 1-col) */
  .trust-edit-cell--feature{ grid-column:1 / -1; }                     /* feature cell spans both columns — 2x2 shape with hero card on top */
  .trust-edit{ gap:56px; }
}

/* ═════════════════════════════════════════════
   TRUST AWARDS — featured-in badge row
   2026-06-22: client asked for all 10 badges in FULL COLOUR, single desktop
   row. Greyscale filter removed; badges alpha-trimmed to equal ink-height
   upstream (assets/images/trust/), so one uniform height balances the row.
   ═════════════════════════════════════════════ */
.trust-awards{
  margin-top:clamp(72px, 8vw, 110px);
  padding-top:clamp(40px, 4vw, 56px);
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-5);
}
.trust-awards-label{
  font-size:var(--fs-xs); font-weight:600; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-3);
}
.trust-awards-list{
  list-style:none; margin:0; padding:0;
  --logo-h:34px;                     /* responsive base height; per-logo multipliers scale off this */
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap;
  gap:clamp(14px, 1.7vw, 30px);      /* tightened so the enlarged logos still fit one desktop row */
  width:100%;
}
.trust-awards-list li{ display:flex; align-items:center; justify-content:center; flex:0 1 auto; }
.trust-awards-list img{
  display:block;
  height:var(--logo-h); width:auto;
  max-width:120px; object-fit:contain;
  opacity:0.92;
  transition:opacity 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
}
.trust-awards-list img:hover{ opacity:1; transform:translateY(-1px); }

/* Per-logo size multipliers (client 2026-06-22) — relative to --logo-h so they stay
   responsive. max-width:none on the enlarged ones so height drives the size. */
.trust-awards-list img[src*="channel-8"]{ height:calc(var(--logo-h) * 1.25); max-width:none; }
.trust-awards-list img[src*="expat-living"]{ height:calc(var(--logo-h) * 0.9); }
.trust-awards-list img[src*="expat-choice"]{ height:calc(var(--logo-h) * 1.5); max-width:none; }
.trust-awards-list img[src*="best-in-singapore"]{ height:calc(var(--logo-h) * 3); max-width:none; }
.trust-awards-list img[src*="great-new-places"]{ height:calc(var(--logo-h) * 2.5); max-width:none; }
.trust-awards-list img[src*="the-asian-entrepreneur"]{ height:calc(var(--logo-h) * 1.5); max-width:none; }
.trust-awards-list img[src*="seasoned-singapore-expat-women"]{ height:calc(var(--logo-h) * 1.25); max-width:none; }
.trust-awards-list img[src*="mirchelley"]{ height:calc(var(--logo-h) * 1.5); max-width:none; }

@media (max-width:1024px){
  .trust-awards-list{ flex-wrap:wrap; gap:clamp(24px,4vw,40px) clamp(28px,4vw,44px); }
}
@media (max-width:560px){
  .trust-awards-list{ gap:24px 28px; --logo-h:26px; }
  .trust-awards-list img{ max-width:96px; }
}

/* ═════════════════════════════════════════════
   TRUST REVIEWS — 4 verified Google reviews
   Added 2026-06-07 (Item 1 retro-fit). Card pattern: editorial — quotes
   in Newsreader serif, names in Inter caps, no SaaS-card chrome.
   Desktop = 4-col; tablet = 2x2; mobile = stack.
   ═════════════════════════════════════════════ */
.trust-reviews{
  margin-top:clamp(80px, 9vw, 120px);
}
.trust-reviews-head{
  max-width:760px;
  margin-bottom:clamp(40px, 4vw, 56px);
}
.trust-reviews-h{
  margin:18px 0 0;
  font-family:'Newsreader', serif; font-weight:300;
  font-variation-settings:"opsz" 48;
  font-size:clamp(24px, 2.8vw, 36px); line-height:1.12; letter-spacing:-0.02em;
  color:var(--ink); max-width:24ch;
}
.trust-reviews-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(28px, 3vw, 48px);
  align-items:stretch;
}
.trust-review{
  display:flex; flex-direction:column;
  gap:18px;
  padding:0;
  border-top:1px solid var(--rule);
  padding-top:28px;
}
.trust-review-stars{
  font-size:14px; color:var(--teal); letter-spacing:0.08em;
}
.trust-review blockquote{
  margin:0; padding:0;
  font-family:'Newsreader', serif; font-weight:300;
  font-variation-settings:"opsz" 28;
  font-size:clamp(17px, 1.3vw, 19px); line-height:1.5; letter-spacing:-0.005em;
  color:var(--ink);
  flex-grow:1;
}
.trust-review cite{
  font-style:normal;
  display:flex; flex-direction:row; align-items:center; gap:8px;
  margin-top:auto;
}
.trust-review-logo{ width:16px; height:16px; flex:0 0 auto; }
.trust-review-name{
  font-size:13px; font-weight:600; letter-spacing:0.04em;
  color:var(--ink);
}
.trust-review-meta{
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3, var(--ink-2));
}
.trust-reviews-foot{
  margin-top:clamp(40px, 4vw, 56px);
}
.trust-reviews-foot a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal);
  padding-bottom:6px;
  border-bottom:1px solid var(--teal);
  transition:color 200ms, border-color 200ms, gap 240ms;
}
.trust-reviews-foot a:hover{ color:var(--teal-deep); border-bottom-color:var(--teal-deep); gap:12px; }
.trust-reviews-foot .arr{ font-size:16px; line-height:1; transition:transform 240ms var(--ease-out-quart); }
.trust-reviews-foot a:hover .arr{ transform:translateX(3px); }

@media (max-width:1100px){
  .trust-reviews-grid{ grid-template-columns:repeat(2, 1fr); gap:40px; }
}
@media (max-width:560px){
  .trust-reviews-grid{ grid-template-columns:1fr; gap:36px; }
}

/* 2026-06-04: removed stale media queries that re-added the dropped
   sticky-grid layout + hairlines at smaller viewports. The new flex
   layout above is already responsive — single 880px breakpoint handles
   mobile via the .trust-edit-grid override. */

/* ═════════════════════════════════════════════
   PHOTO PLACEHOLDERS — added 2026-06-02
   Branded dashed boxes signalling where a real
   photo should land. Used on inner pages until
   the client supplies condition / service
   specific photography.
   ═════════════════════════════════════════════ */
.ph-band{
  padding:0;
  background:var(--surface-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.ph-band .container{ padding-top:32px; padding-bottom:32px; }

.placeholder{
  position:relative;
  width:100%;
  background:var(--surface-2);
  border:1px dashed var(--rule-strong);
  border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:var(--ink-3);
  overflow:hidden;
}
.placeholder::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 14px, rgba(12,61,91,0.025) 14px 15px);
  pointer-events:none;
}
.placeholder svg{
  width:32px; height:32px;
  stroke:var(--ink-3); opacity:0.45;
  position:relative; z-index:1;
}
.placeholder .l{
  position:relative; z-index:1;
  font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--c-accent);
}
.placeholder .ctx{
  position:relative; z-index:1;
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 24;
  font-size:17px; line-height:1.3; letter-spacing:-0.01em;
  color:var(--ink); text-align:center; max-width:30ch;
}
.placeholder .hint{
  position:relative; z-index:1;
  font-size:12px; color:var(--ink-3);
  margin-top:4px; text-align:center; max-width:36ch;
}

/* aspect variants */
.placeholder.wide{ aspect-ratio:21/9; }
.placeholder.banner{ aspect-ratio:16/9; }
.placeholder.tall{ aspect-ratio:4/5; }
.placeholder.square{ aspect-ratio:1/1; }

/* full-bleed band variant (between sections) */
.ph-band-bleed{
  width:100%;
  aspect-ratio:21/9;
  max-height:520px;
}
.ph-band-bleed.short{ aspect-ratio:21/7; max-height:380px; }

@media (max-width:768px){
  .placeholder.wide{ aspect-ratio:16/10; }
  .placeholder.banner{ aspect-ratio:4/3; }
}

/* ═════════════════════════════════════════════
   MOBILE — added 2026-06-02
   Hamburger + drawer, tighter spacing, table fixes
   ═════════════════════════════════════════════ */

/* tighter mobile root variables — override the desktop --section-y floor */
@media (max-width:768px){
  :root{
    --section-y: clamp(52px, 9vw, 110px);
    --pad-x: clamp(18px, 4.5vw, 56px);
  }
}

/* HAMBURGER button */
.nav-mobile{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  border:1px solid var(--rule);
  border-radius:2px; background:transparent; cursor:pointer;
  transition:background 200ms, border-color 200ms;
}
.nav-mobile span{
  display:block; width:100%; height:1.5px;
  background:var(--ink);
  transform-origin:center;
  transition:transform 320ms var(--ease-out-quart), opacity 200ms;
}
.nav-mobile:hover{ background:var(--surface-2); }
body.nav-open .nav-mobile span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .nav-mobile span:nth-child(2){ opacity:0; }
body.nav-open .nav-mobile span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* MOBILE DRAWER */
.mobile-drawer{
  position:fixed; inset:0;
  z-index:60;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear 360ms;
}
body.nav-open{ overflow:hidden; }
body.nav-open .mobile-drawer{
  visibility:visible; pointer-events:auto;
  transition:visibility 0s linear 0s;
}
.mobile-drawer-bg{
  position:absolute; inset:0;
  background:rgba(10,27,42,0.45);
  opacity:0;
  transition:opacity 320ms var(--ease-out-quart);
}
body.nav-open .mobile-drawer-bg{ opacity:1; }
.mobile-drawer-inner{
  position:absolute; top:0; right:0; bottom:0;
  width:88%; max-width:380px;
  background:#FFFFFF;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.nav-open .mobile-drawer-inner{ transform:translateX(0); }

.mobile-drawer-top{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px;
  border-bottom:1px solid var(--rule);
  flex-shrink:0;
}
.mobile-drawer-top .brand img{ height:36px; width:auto; display:block; }
.mobile-drawer-close{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; cursor:pointer;
  color:var(--ink);
}
.mobile-drawer-close svg{ width:20px; height:20px; }

.mobile-drawer-nav{
  flex:1;
  padding:8px 24px 24px;
  display:flex; flex-direction:column; gap:0;
}
.mobile-drawer-nav .m-parent{
  display:block;
  padding:18px 0 14px;
  border-bottom:1px solid var(--rule);
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 30;
  font-size:22px; line-height:1.2; letter-spacing:-0.012em;
  color:var(--ink);
  transition:color 200ms;
}
.mobile-drawer-nav .m-parent:hover{ color:var(--teal); }
.mobile-drawer-nav .m-sub{
  display:flex; flex-direction:column; gap:0;
  padding:8px 0 12px;
}
.mobile-drawer-nav .m-sub a{
  display:block;
  padding:10px 0;
  font-size:14.5px; color:var(--ink-2);
  transition:color 200ms, padding-left 200ms;
}
.mobile-drawer-nav .m-sub a:hover{ color:var(--teal); padding-left:6px; }
.mobile-drawer-nav .m-sub a.featured{
  background:var(--teal-darker); color:#E8EEF4;
  padding:12px 14px; margin-bottom:8px; border-radius:2px;
  font-size:13.5px; font-weight:600;
}
.mobile-drawer-nav .m-sub a.all{
  margin-top:8px; padding-top:14px;
  border-top:1px solid var(--rule);
  color:var(--teal); font-weight:600;
  font-size:13px; letter-spacing:0.06em;
}

.mobile-drawer-cta{
  padding:24px;
  border-top:1px solid var(--rule);
  background:var(--surface-2);
  flex-shrink:0;
}
.mobile-drawer-cta .btn{ width:100%; justify-content:center; }
.mobile-drawer-meta{
  display:flex; flex-direction:column; gap:6px;
  margin-top:18px;
  text-align:center;
}
.mobile-drawer-meta a{
  font-size:13px; color:var(--ink-2);
  padding:6px 0;
}

/* breakpoint behaviour */
@media (max-width:920px){
  .nav-mobile{ display:flex; }
  .nav-cta-btn{ display:none; }     /* drawer holds the CTA on mobile */
  .nav-row{ gap:12px; }
  .brand img{ height:52px; }        /* 2026-06-10: bumped mobile logo for parity with desktop visual weight */
}

/* COMPARE TABLE — mobile = horizontal scroll, keep desktop column structure */
.compare-cell .mob-l{ display:none; }

/* MOBILE — hero adjustments */
@media (max-width:768px){
  .hero{ padding-top:80px; padding-bottom:60px; }
  .hero h1.display{ font-size:clamp(32px, 8vw, 48px); line-height:1.06; }
  .hero-sub{ font-size:16px; }
  .hero-ctas .btn{ flex:1; justify-content:center; padding:14px 18px; font-size:13.5px; }
  .hero-media{ gap:12px; }
  .hero-media .meta-card{ padding:18px 18px; }
  .hero-media .meta-card .v{ font-size:16px; }
}
@media (max-width:520px){
  .hero-media{ grid-template-columns:1fr; grid-template-rows:auto; }
  .hero-media .main-photo,
  .hero-media .sec-photo,
  .hero-media .meta-card{ grid-column:1; grid-row:auto; }
  .hero-media .main-photo{ aspect-ratio:4/3; }
  .hero-media .sec-photo{ aspect-ratio:16/10; }
  .hero-ctas{ flex-direction:column; gap:10px; }
  .hero-ctas .btn{ width:100%; }
  .hero-trust{ gap:20px; }
}

/* MOBILE — utility bar tightening */
@media (max-width:768px){
  .utility{ padding:8px 0; font-size:11px; }
  .utility-row{ gap:14px; }
  .utility-left, .utility-right{ gap:14px; }
  .utility .l{ display:none; }       /* drop "CLINIC / HOURS" labels on mobile */
  .utility-divider{ display:none; }
}

/* MOBILE — section padding tightening (already in :root override) */
/* MOBILE — page hero */
@media (max-width:768px){
  .page-hero{ padding-top:48px; padding-bottom:56px; }
  .page-hero h1.display{ font-size:clamp(28px, 7vw, 40px); }
  .page-hero .lede{ font-size:16px; }
  .page-hero-meta{ padding:18px 22px; }
}

/* MOBILE — trust editorial */
@media (max-width:768px){
  .trust-band{ padding:56px 0; }
  .trust-edit-intro h2{ font-size:clamp(24px, 6.5vw, 34px); }
  .trust-edit-cell{ padding:24px 22px 28px; }
  .trust-edit-cell .v{ font-size:clamp(30px, 8vw, 44px); }
}

/* MOBILE — FCM */
@media (max-width:768px){
  .fcm-feature{ gap:24px; }
  .fcm-cell{ padding:28px 22px 32px; min-height:0; }
  .fcm-cell .num{ margin-bottom:24px; }
  .fcm-cta-row{ margin-top:40px; padding-top:32px; gap:20px; }
}

/* MOBILE — conditions / services grid */
@media (max-width:768px){
  .cond{ min-height:0; padding:22px 20px 26px; }
  .cond p{ font-size:13px; }
  .conditions-head h2{ max-width:none; }
}

/* MOBILE — services photo cards */
@media (max-width:768px){
  .services-grid{ gap:24px 16px; }
  .svc-img .tag{ font-size:10px; padding:4px 8px; }
}

/* MOBILE — doctors */
@media (max-width:768px){
  .doctors-grid{ gap:40px; }
  .doc-meta .name{ font-size:24px; }
  .doc-team-note{ padding:22px 22px; gap:18px; }
}

/* MOBILE — testimonials */
@media (max-width:768px){
  .quote{ padding:32px 24px; }
  .quote p{ font-size:16.5px; }
}

/* MOBILE — first-visit */
@media (max-width:768px){
  .fv-steps{ gap:28px 16px; }
  .fv-step h3{ font-size:20px; }
}

/* MOBILE — FAQ */
@media (max-width:768px){
  .faq-q{ padding:22px 0; gap:18px; }
  .faq-q .q-text{ font-size:18px; }
  .faq-a-inner{ font-size:15px; padding-bottom:22px; }
}

/* MOBILE — final CTA */
@media (max-width:768px){
  .cta-final h2{ font-size:clamp(26px, 7vw, 38px); }
  .cta-final .lead{ font-size:16px; margin-bottom:36px; }
  .cta-actions .v{ font-size:22px; }
  .cta-actions .v.address{ font-size:16px; }
  .cta-btn-row .btn{ flex:1; justify-content:center; }
}

/* MOBILE — footer */
@media (max-width:768px){
  .footer{ padding:56px 0 24px; }
  .footer-grid{ gap:32px; margin-bottom:40px; }
  .footer-bottom{ flex-direction:column; gap:8px; padding-top:18px; }
}

/* MOBILE — placeholders */
@media (max-width:768px){
  .placeholder.wide,
  .placeholder.banner{ aspect-ratio:4/3; }
  .placeholder .ctx{ font-size:15px; padding:0 12px; }
  .placeholder .hint{ font-size:11.5px; padding:0 16px; }
  .ph-band .container{ padding-top:20px; padding-bottom:20px; }
}

/* MOBILE — comparison table head tighter */
@media (max-width:520px){
  .compare-head h2{ font-size:clamp(22px, 6vw, 32px); }
}

/* MOBILE — risk reversal */
@media (max-width:768px){
  .risk-reversal{ padding:48px 0; }
  .risk-left h3{ font-size:clamp(22px, 6vw, 30px); }
  .risk-right p{ font-size:15.5px; }
}

/* MOBILE — contact + booking form */
@media (max-width:768px){
  .contact-row{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .contact-row .l{ padding-top:0; }
  .booking-form{ padding:24px 22px 26px; }
  .booking-form h3{ font-size:22px; }
  .bf-row{ grid-template-columns:1fr; gap:12px; }
  .bf-field input, .bf-field select, .bf-field textarea{ font-size:16px; }  /* >=16px prevents iOS zoom */
  .bf-foot{ font-size:11.5px; }
}

/* MOBILE — article body */
@media (max-width:768px){
  .article{ padding:52px 0; }
  .article-side{ position:static; }
  .prose h2{ font-size:clamp(22px, 6vw, 30px); margin-top:40px; }
  .prose h3{ font-size:clamp(18px, 5vw, 22px); margin-top:30px; }
  .prose p, .prose li{ font-size:16px; line-height:1.65; }
  .prose blockquote{ font-size:17px; padding:20px 22px; }
  .symptom-check{ padding:24px 22px 26px; }
  .symptom-check h3{ font-size:20px; }
  .symptom-check li{ font-size:14.5px; }
  .symptom-check .resolve{ gap:14px; }
  .symptom-check .resolve .btn{ width:100%; justify-content:center; }
}

/* MOBILE — doctor profile hero */
@media (max-width:768px){
  .doctor-hero{ padding:48px 0 56px; }
  .doctor-hero h1{ font-size:clamp(32px, 8vw, 48px); }
  .doctor-hero .stats{ gap:22px; }
}

/* MOBILE — marquee tightening */
@media (max-width:768px){
  .marquee-item{
    width:clamp(220px, 60vw, 320px);
    height:clamp(180px, 40vw, 240px);
  }
  .marquee-item .cap{ font-size:11.5px; left:14px; right:14px; bottom:12px; }
}

/* prevent long words breaking layout */
.footer-about p, .prose p, .hero-sub, .lede, .page-hero .lede{
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
}

/* nested placeholder inside .fv-step .photo (first-visit cards) */
.fv-step .photo{ background:transparent; border:0; }
.fv-step .photo .placeholder{ width:100%; height:100%; aspect-ratio:auto; border-radius:2px; }
.fv-step .photo .n{ z-index:2; }

/* ═════════════════════════════════════════════
   BATCH 1 — a11y + broken links (2026-06-03)
   ═════════════════════════════════════════════ */

/* Global focus-visible ring */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible { outline-offset: 3px; }
.bf-field input:focus-visible,
.bf-field select:focus-visible,
.bf-field textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
}

/* Skip-to-content link — visually hidden until focused */
.skip-link{
  position:fixed;
  top:8px; left:8px;
  z-index:100;
  padding:10px 16px;
  background:var(--ink);
  color:#fff;
  font-size:13px; font-weight:600;
  letter-spacing:0.06em;
  border-radius:3px;
  transform:translateY(-200%);
  transition:transform 200ms var(--ease-out-quart);
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--teal);
  outline-offset:2px;
}

/* ═════════════════════════════════════════════
   BATCH 3 — micro-interactions polish (2026-06-03)
   ═════════════════════════════════════════════ */

/* CLINIC STRIP — static 4-up replacement for the auto-marquee */
.clinic-strip{
  background:var(--surface-deep);
  padding:0;
}
.clinic-strip-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--rule-on-deep);
}
.clinic-strip-item{
  margin:0;
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--surface-deep);
}
.clinic-strip-item img,
.clinic-strip-item video{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform 600ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
  .clinic-strip-item:hover img,
  .clinic-strip-item:hover video{ transform:scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .clinic-strip-item video{ display:none; }
  .clinic-strip-item video + img{ display:block; }
}
.clinic-strip-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45));
  pointer-events:none;
}
.clinic-strip-item figcaption{
  position:absolute; left:20px; bottom:18px; right:20px;
  font-size:13px; font-weight:500; letter-spacing:0.04em;
  color:#fff; z-index:1; line-height:1.4;
}
@media (max-width:880px){
  .clinic-strip-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .clinic-strip-grid{ grid-template-columns:1fr; }
  .clinic-strip-item{ aspect-ratio:16/10; }
}

/* BTN — split timing (item #25) */
.btn{
  transition:background 180ms var(--ease-out-quart),
             color 180ms var(--ease-out-quart),
             transform 140ms var(--ease-out-quart),
             border-color 180ms var(--ease-out-quart),
             box-shadow 180ms var(--ease-out-quart);
}
.btn-primary:active{ transform:scale(0.97); transition-duration:120ms; }
.btn .arr{
  transition:transform 200ms var(--ease-out-quart);
}

/* HOVER GUARDS — wrap interactive card hovers in pointer:fine (item #26) */
@media (hover: hover) and (pointer: fine){
  .cond:hover{ background:var(--surface-2); }
  .svc:hover .svc-img img{ transform:scale(1.04); }
  .doc:hover .doc-img img{ transform:scale(1.03); }
  .fcm-cell:hover{ background:var(--surface-deep-hover); }
  .fv-step:hover .photo img{ transform:scale(1.04); }
  .post-card:hover .ph img{ transform:scale(1.04); }
  .marquee-item:hover img{ transform:scale(1.05); }   /* kept for legacy css */
  .related-card:hover{ transform:translateY(-3px); border-color:var(--rule-strong); }
  .trust-edit-cell:hover{ background:var(--surface-2); }
  .btn-primary:hover{ transform:translateY(-1px); }
}
/* Strip the previous (un-guarded) hover rules where they'd fire on touch. */
@media not (hover: hover){
  .cond:hover, .svc:hover .svc-img img, .doc:hover .doc-img img,
  .fcm-cell:hover, .fv-step:hover .photo img, .post-card:hover .ph img,
  .related-card:hover, .trust-edit-cell:hover, .btn-primary:hover{
    background:revert; transform:revert; border-color:revert;
  }
}

/* FAQ — grid-template-rows technique replaces max-height (item #27) */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  max-height:none;
  transition:grid-template-rows 320ms var(--ease-out-quart);
}
.faq-a > .faq-a-inner{
  overflow:hidden;
  min-height:0;
  padding-bottom:0;  /* collapsed: no padding floor under the 0fr track (was leaking 28px / one line) */
}
.faq-item.open .faq-a{
  grid-template-rows:1fr;
}
.faq-item.open .faq-a > .faq-a-inner{
  padding-bottom:28px;  /* restore reading space only when open */
}
.faq-item:not(.open) .faq-a{
  transition-duration:220ms;
}

/* DRAWER — match curves + add backdrop blur (item #31) */
.mobile-drawer-bg{
  transition:opacity 360ms var(--ease-ios);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.mobile-drawer-inner{
  transition:transform 360ms var(--ease-ios);
}

/* HERO v3 retro-fit 2026-06-06 — .hero-media composition removed.
   Late-stage `.hero-media img` zoom override deleted (composition no longer
   exists). New hero is dark cinematic with twin doctor cutouts — see the
   primary HERO block above. */

/* EASING tokens — explicit on every fading transition (item #32) */
.utility a{ transition:color 200ms var(--ease-out-quart); }
.cta-actions .v a{ transition:color 200ms var(--ease-out-quart); }
.contact-row .v a{ transition:color 200ms var(--ease-out-quart); }
.footer a{ transition:color 200ms var(--ease-out-quart); }
.faq-q .q-icon::before,
.faq-q .q-icon::after{
  transition:transform 240ms var(--ease-out-quart),
             background 200ms var(--ease-out-quart);
}
/* 2026-06-04: .related-card no longer uses transform/border-color hover.
   The new editorial-list hover is padding-left + arrow translate,
   declared inline in the .related-card block above. */

/* LENIS hint — shorter scroll duration via inline override (handled in JS) */

/* ═════════════════════════════════════════════
   BATCH 4 — system refactor (2026-06-03)
   Inline-style migrations + symptom-check glyph + dropdown ARIA
   ═════════════════════════════════════════════ */

/* Utility class replacements (drop inline styles from build.py) */
.article--no-bottom{ padding-bottom:0; }
.services--bg-base{ background:var(--bg); }
.svc--feature{ grid-column:span 2; }  /* grid is 2-col; span 3 spawned a huge implicit 3rd column that crushed the others (services page misalignment) */
.svc-img--wide{ aspect-ratio:21/9; }
.fcm-grid--spaced{ margin-top:var(--s-8); }

/* Blog post lede paragraph (was an inline-styled <p>) */
.prose .prose-lede{
  font-size:var(--fs-lg);
  line-height:1.6;
  color:var(--ink-2);
  margin-bottom:var(--s-5);
}

/* Symptom-check glyph — swap from empty-checkbox squares to teal dots
   so the list reads as informational, not as an interactive todo. */
.symptom-check li::before{
  content:"";
  width:6px; height:6px;
  border:0; border-radius:50%;
  background:var(--c-accent);
  margin-top:11px; margin-right:14px;
  flex-shrink:0;
}
.symptom-check li{ align-items:flex-start; }

/* Dropdown ARIA — open via JS class .is-open in addition to :hover */
.has-sub.is-open .nav-sub{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity 260ms var(--ease-out-quart),
             transform 260ms var(--ease-out-quart),
             visibility 0s linear 0s;
}
.has-sub.is-open > a::after{
  transform:rotate(225deg);
  opacity:1;
}

/* ═════════════════════════════════════════════
   BATCH 5 — real form endpoint (2026-06-03)
   ═════════════════════════════════════════════ */

/* Honeypot — visually hidden, off-screen, kbd-skipped. Bots fill it,
   real users don't. Web3Forms drops any submission with botcheck set. */
.bf-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
}

/* Submit status messages */
.bf-status{
  margin-top:var(--s-4);
  padding:0;
  font-size:var(--fs-sm);
  line-height:1.5;
  min-height:1.2em;
}
.bf-status--ok{
  padding:var(--s-3) var(--s-4);
  background:var(--teal-soft);
  color:var(--teal-deep);
  border-radius:2px;
  font-weight:500;
}
.bf-status--err{
  padding:var(--s-3) var(--s-4);
  background:var(--danger-soft);
  color:var(--danger);
  border-radius:2px;
  font-weight:500;
}

/* Disabled submit during inflight */
.booking-form button[disabled]{
  opacity:0.7;
  cursor:wait;
}

/* ═════════════════════════════════════════════
   FINAL POLISH — tile-base + SVG glyphs (2026-06-03)
   ═════════════════════════════════════════════ */

/* TILE-BASE — shared chrome via grouped selector.
   Documents the canonical common foundation; specific classes layer on top. */
.cond, .svc, .doc, .related-card, .trust-edit-cell, .quote,
.fcm-cell, .fv-step, .post-card, .article-side .card,
.page-hero-meta, .doc-team-note, .placeholder, .symptom-check,
.not-for, .booking-form{
  border-radius:2px;
  transition:background 240ms var(--ease-out-quart),
             border-color 240ms var(--ease-out-quart),
             transform 240ms var(--ease-out-quart);
}

/* GLYPH SVG — replace Unicode chars with SVG mask so they render
   identically across font fallbacks (especially older Android). */

/* Arrow → for .btn .arr */
.btn .arr{
  width:0.78em; height:0.78em;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h10M9 4l4 4-4 4'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h10M9 4l4 4-4 4'/></svg>") no-repeat center / contain;
  vertical-align:-1px;
  font-size:0;          /* hide inline Unicode → fallback */
  color:transparent;
  overflow:hidden;
}

/* Quote mark — SVG fills via mask, hides the inline Unicode char */
.quote .mark{
  width:42px; height:30px;
  background-color:var(--c-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><path d='M0 32V18C0 8 6 2 14 0l2 6c-5 2-8 6-8 12h6v14H0zm26 0V18c0-10 6-16 14-18l2 6c-5 2-8 6-8 12h6v14H26z' fill='black'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><path d='M0 32V18C0 8 6 2 14 0l2 6c-5 2-8 6-8 12h6v14H0zm26 0V18c0-10 6-16 14-18l2 6c-5 2-8 6-8 12h6v14H26z' fill='black'/></svg>") no-repeat center / contain;
  opacity:0.6;
  display:block;
  text-indent:-9999px;   /* hides the inline Unicode " fallback */
  overflow:hidden;
}

/* Star strip — repeat a single SVG star horizontally x5 */
.stars--svg{
  display:inline-block;
  width:120px; height:24px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 2 14.5 9 22 9.5 16.5 14 18 21 12 17.5 6 21 7.5 14 2 9.5 9.5 9 Z' fill='%231880A8'/></svg>") repeat-x left center / 24px 24px;
  text-indent:-9999px; overflow:hidden;
}

/* ═════════════════════════════════════════════
   STICKY CTA bar (2026-06-03)
   ═════════════════════════════════════════════ */
.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:55;          /* below drawer (60), above content */
  background:var(--surface);
  border-top:1px solid var(--rule);
  box-shadow:0 -12px 32px -16px rgba(10,27,42,0.14);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  opacity:0;
  transform:translateY(100%);
  transition:opacity 320ms var(--ease-out-quart),
             transform 360ms var(--ease-ios);
  pointer-events:none;
}
.sticky-cta.is-visible{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.sticky-cta-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.sticky-cta-msg{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.sticky-cta-msg .l{
  font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--c-meta);
}
.sticky-cta-msg .v{
  font-size:14.5px; color:var(--ink); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-cta-msg .v strong{
  font-family:'Newsreader', serif; font-weight:600;
  font-variation-settings:"opsz" 24;
  font-size:18px; color:var(--ink); margin-right:6px;
  letter-spacing:-0.01em;
}
.sticky-cta-actions{
  display:flex; gap:8px;
  flex-shrink:0;
}
.sticky-cta .btn{
  padding:12px 22px;
  font-size:13.5px;
  letter-spacing:0.01em;
  border-radius:3px;
  white-space:nowrap;               /* 2026-06-10: enforce 1-line CTAs at all widths */
}
.sticky-cta .btn-wa{
  background:#128C7E;
  color:#fff;
  border:0;
  display:inline-flex; align-items:center;
  transition:background 180ms var(--ease-out-quart),
             transform 140ms var(--ease-out-quart);
}
.sticky-cta .btn-wa:hover{ background:#0D6E63; }
.sticky-cta .btn-wa:active{ transform:scale(0.97); }
.sticky-cta .wa-icon{
  width:14px; height:14px;
  margin-right:8px;
  fill:currentColor;
  flex-shrink:0;
}

/* Mobile — drop the left message, stretch buttons full-width */
@media (max-width:880px){
  .sticky-cta{ padding:10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .sticky-cta-inner{ padding:0 12px; gap:8px; }
  .sticky-cta-msg{ display:none; }
  .sticky-cta-actions{ width:100%; gap:8px; }
  .sticky-cta-actions .btn{
    flex:1;
    justify-content:center;
    padding:13px 10px;                /* 2026-06-10: tighter mobile padding to fit "Book now — $88" */
    font-size:12.5px;
  }
}

/* Hide while mobile drawer is open */
body.nav-open .sticky-cta{
  opacity:0 !important;
  pointer-events:none;
  transform:translateY(100%);
}

/* Push page footer above the bar so its last row stays reachable */
body{ padding-bottom:0; }
.sticky-cta.is-visible ~ .footer{ /* no-op; bar auto-hides near footer via JS */ }

/* ═══════════════════════ ANATOMY (scroll-bound) ═══════════════════════ */
/* ═══════════════════════ ANATOMY — v20 rebuild (2026-06-09) ═══════════════════════
   Replaces v15-v19. Spec:
     - Desktop (≥768): 65/35 grid. Text left, sticky 3:4 video (720×960 master,
       all-keyframes) right. GSAP+ScrollTrigger pin over 300vh. Body-state
       cross-fade (200ms) driven by video currentTime via JS.
     - Mobile  (<768): scroll-scrub killed. Eyebrow+headline once at top, then
       3 stacked cards (still + sub + body + link), anchor below.
     - Frame top aligns with eyebrow; frame bottom aligns with .anatomy-foot.
*/
.anatomy{
  background:#01010b;
  color:#fff;
  position:relative;
  padding:0;
}
.anatomy-pin{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:clamp(48px, 6vw, 96px) 0;
}
.anatomy-grid{
  display:grid;
  grid-template-columns: 65fr 35fr;
  gap:clamp(40px, 5vw, 96px);
  align-items:stretch;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
}

/* === LEFT column === */
.anatomy-copy{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
  justify-content:space-between;
}
.anatomy-copy .eyebrow{ color:rgba(255,255,255,0.55); }
.anatomy-copy .display{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(36px, 3.4vw, 64px);
  line-height:1.05;
}

.anatomy-states{
  position:relative;
  flex:1 0 auto;
  min-height:260px;
}
.anatomy-state{
  position:absolute; inset:0;
  opacity:0;
  transform:translateY(8px);
  transition: opacity 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
  pointer-events:none;
}
.anatomy-state.is-active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.anatomy-state h3{
  font-family:var(--font-display, "Newsreader", serif);
  font-size:clamp(28px, 2.4vw, 44px);
  font-weight:500;
  margin:0 0 14px;
  color:#fff;
  line-height:1.15;
}
.anatomy-state p{
  font-size:clamp(15px, 1.05vw, 19px);
  line-height:1.6;
  color:rgba(255,255,255,0.72);
  margin:0 0 20px;
}

.anatomy-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:500;
  color:#59ADCC;
  text-decoration:none;
  letter-spacing:0.01em;
  transition:gap 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart);
}
.anatomy-link:hover{ gap:10px; color:#8CCBE2; }
.anatomy-link .arr{ transition:transform 200ms var(--ease-out-quart); }

.anatomy-progress{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.anatomy-dot{
  width:32px; height:2px;
  background:rgba(255,255,255,0.18);
  border-radius:2px;
  transition:background 300ms var(--ease-out-quart), width 300ms var(--ease-out-quart);
}
.anatomy-dot.is-active{
  background:#59ADCC;
  width:48px;
}
.anatomy-foot{
  font-size:13px;
  color:rgba(255,255,255,0.55);
  margin:8px 0 0;
}
.anatomy-foot a{
  color:rgba(255,255,255,0.92);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* === RIGHT column: sticky 3:4 video === */
.anatomy-stage{
  position:relative;
  aspect-ratio: 3 / 4;
  width:100%;
  max-width:680px;
  justify-self:end;
  align-self:stretch;
  overflow:hidden;
  background:#01010b;
}
.anatomy-video,
.anatomy-fallback{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.anatomy-fallback{ opacity:0; pointer-events:none; }
.anatomy-video[hidden] + .anatomy-fallback{ opacity:1; }

/* v25 mobile-only still frames — hidden on desktop */
.anatomy-still{ display:none; }

/* Mobile cards hidden on desktop */
.anatomy-cards{ display:none; }

/* === Desktop typography scale (width inherited from var(--container)) === */
@media (min-width:1800px){
  .anatomy-state h3{ font-size:42px; }
  .anatomy-state p{ font-size:19px; line-height:1.65; }
}
@media (min-width:2400px){
  .anatomy-state h3{ font-size:48px; }
  .anatomy-state p{ font-size:22px; }
  .anatomy-copy .display{ font-size:80px; }
}

/* === Tablet landscape — 768-1100 === */
@media (min-width:768px) and (max-width:1100px){
  .anatomy-grid{
    grid-template-columns: 60fr 40fr;
    gap:32px;
    padding:0 24px;
  }
  .anatomy-stage{ max-width:440px; }
  .anatomy-copy .display{ font-size:34px; }
  .anatomy-state h3{ font-size:26px; }
  .anatomy-state p{ font-size:15px; }
}

/* === Short viewport (≥768 width, <760 height) — laptops, landscape phones === */
@media (max-height:760px) and (min-width:768px){
  .anatomy-pin{
    min-height:auto;
    padding:32px 0;
  }
  .anatomy-stage{ max-width:480px; }
  .anatomy-copy{ gap:16px; }
  .anatomy-copy .display{ font-size:32px; line-height:1.1; }
  .anatomy-states{ min-height:200px; }
  .anatomy-state h3{ font-size:26px; }
  .anatomy-state p{ font-size:15px; line-height:1.5; margin-bottom:14px; }
}

/* === Mobile (<768) MORPH (2026-06-10) ===
   Default: GSAP pin .anatomy-pin for 300vh; single-column 100vh frame.
            Video on top (50vh), copy below (50vh). State cross-fades
            driven by scroll progress via the desktop scrub handler
            (mobile guard removed in index.html JS).
   Fallback: prefers-reduced-motion → revert to the 3-stacked-card layout.
*/
@media (max-width:767px){
  /* v25.3 (2026-06-10): NATIVE position:sticky replaces GSAP ScrollTrigger
     pin on mobile. Eliminates both the engagement snap (page jumping the
     user into the pinned frame) and the release snap (page jumping out
     to next section). Native sticky has no transform → no single-frame
     layout swap → no perceived snap.
     .anatomy is now 400vh tall (100vh visible + 300vh of morph scroll-through).
     .anatomy-pin sticks to top:0 while .anatomy is scrolling past.
     State swap timing is driven by a plain scroll listener on the document
     (NOT GSAP) computing progress through .anatomy bounds. */
  .anatomy{
    padding:0;
    min-height:400vh;
  }
  .anatomy-pin{
    position:sticky;
    top:0;
    height:100vh;
    padding:16px 0 0 0;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
  }
  /* v25.2: grid → flex column. Stage fills available, copy hugs its
     content. Eliminates the ~22vh black void below the copy. Image height
     becomes ~60-66vh (varies ~30px per state with copy length — acceptable). */
  .anatomy-grid{
    display:flex;
    flex-direction:column;
    grid-template-columns:unset;
    grid-template-rows:unset;
    gap:0;
    padding:0;
    max-width:none;
    width:100%;
    flex:1;
  }

  /* Stage on TOP — v25.2: flex:1 so it fills space above the copy.
     v25.2b: order:1 forces image-on-top in flex context (HTML source has
     .anatomy-copy first, which without `order` puts it at the top). */
  .anatomy-stage{
    display:block;
    flex:1;
    order:1;
    min-height:0;
    max-width:none;
    width:100%;
    aspect-ratio:auto;
    background:#01010b;
  }
  /* Hide video + fallback on mobile (replaced by .anatomy-still cross-fade) */
  .anatomy-video,
  .anatomy-fallback{ display:none; }
  /* 3 cross-faded still frames — discrete swap, no scrub.
     v25.4: 500ms duration. v25.5: easing var(--ease-out-quart) → linear.
     ease-out-quart had both images at ~6% opacity around the midpoint,
     letting the dark .anatomy-stage background dominate (fade-to-black
     feel). Linear keeps oldOpacity + newOpacity ≈ 1 throughout = true
     constant-brightness crossfade. */
  .anatomy-still{
    display:block;
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition: opacity 800ms linear;
    pointer-events:none;
  }
  .anatomy-still.is-active{ opacity:1; }
  .anatomy-still[data-state="headaches"]{ object-position: center 28%; }
  .anatomy-still[data-state="neck"]    { object-position: center 38%; }
  .anatomy-still[data-state="shoulder"]{ object-position: center 48%; }

  /* Copy on BOTTOM — v25.2: flex:none so it hugs its content; no void below.
     order:2 forces copy under the image in flex context (HTML has copy first). */
  .anatomy-copy{
    flex:none;
    order:2;
    padding:20px var(--pad-x) 24px;
    gap:12px;
    height:auto;
    overflow:hidden;
    justify-content:flex-start;
  }
  .anatomy-copy .eyebrow{ font-size:11px; letter-spacing:0.16em; }
  .anatomy-copy .display{
    font-size:22px;
    line-height:1.18;
    margin:0 0 4px;
    max-width:24ch;
  }

  /* Cross-fading state text (was hidden on mobile pre-v24).
     v25.2: transition tightened 200→130ms to match the JS sequential-swap
     timer, ensuring fade-out fully completes before fade-in begins.
     No overlap = no ghost-text doubling during state transitions.
     v25.2c: min-height set to hold tallest state (shoulder ~165px) because
     children are position:absolute and collapse to 0 without explicit size. */
  .anatomy-states{
    display:block;
    min-height:170px;
    flex:none;
    position:relative;
  }
  /* v25.4: 130→220ms to match the longer image fade. JS swap timer
     synced (see index.html anatomy handler). */
  .anatomy-state{ transition: opacity 220ms var(--ease-out-quart); }
  .anatomy-dot{ transition: background 220ms var(--ease-out-quart), width 220ms var(--ease-out-quart); }
  .anatomy-state h3{ font-size:22px; margin:0 0 8px; }
  .anatomy-state p{ font-size:14.5px; line-height:1.5; margin:0 0 12px; }
  .anatomy-state .anatomy-link{ font-size:13px; }

  /* Progress dots stay visible during morph */
  .anatomy-progress{ display:flex; margin-top:auto; padding-top:8px; }
  .anatomy-foot{ display:none; }   /* "Scroll to explore" footer redundant during pin */

  /* Hide stacked cards (default morph mode) */
  .anatomy-cards{ display:none; }

  /* Reduced-motion: revert to 2026-06-09 stacked-cards layout */
  @media (prefers-reduced-motion: reduce){
    .anatomy-pin{
      min-height:0;
      padding:clamp(48px, 12vw, 80px) 0;
      display:flex; align-items:center;
    }
    .anatomy-grid{
      grid-template-rows:none;
      height:auto;
      gap:32px;
      padding:0 20px;
      max-width:560px;
    }
    .anatomy-copy{
      grid-row:auto;
      padding:0;
      height:auto;
      overflow:visible;
      gap:18px;
    }
    .anatomy-copy .display{ font-size:30px; line-height:1.12; margin:0; max-width:none; }
    .anatomy-stage{ display:none; }
    .anatomy-states{ display:none; }
    .anatomy-progress{ display:none; }
    .anatomy-foot{ display:block; font-size:13px; margin:8px 0 0; text-align:center; }
    .anatomy-cards{
      display:flex;
      flex-direction:column;
      gap:48px;
      margin-top:8px;
    }
    .anatomy-card{ display:flex; flex-direction:column; gap:16px; }
    .anatomy-card img{
      width:100%;
      aspect-ratio:3 / 4;
      object-fit:cover;
      background:#01010b;
      display:block;
    }
    .anatomy-card h3{
      font-family:var(--font-display, "Newsreader", serif);
      font-size:26px; font-weight:500; margin:0; color:#fff; line-height:1.15;
    }
    .anatomy-card p{
      font-size:15px; line-height:1.55; color:rgba(255,255,255,0.72); margin:0;
    }
    .anatomy-card .anatomy-link{ align-self:flex-start; }
  }
}

@media (max-width:380px){
  .anatomy-grid{ padding:0 16px; gap:24px; }
  .anatomy-copy .display{ font-size:26px; }
  .anatomy-cards{ gap:40px; }
  .anatomy-card h3{ font-size:22px; }
  .anatomy-card p{ font-size:14px; line-height:1.5; }
}

@media (prefers-reduced-motion: reduce){
  .anatomy-state{ transition:none; }
  .anatomy-link, .anatomy-link .arr, .anatomy-dot, .anatomy-foot a{ transition:none; }
  .anatomy-video{ display:none; }
  .anatomy-video + .anatomy-fallback{ opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROMOTIONS PAGE + PAYNOW CHECKOUT — added 2026-06-22
   Tokens only. White surfaces, teal accents, hairline rules, 2px radius.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.promo-hero{ padding:var(--section-y) 0 var(--s-8); }
.promo-hero-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--s-8); align-items:center; }
.promo-hero-copy h1.display{ margin:var(--s-3) 0 var(--s-4); }
.promo-hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.promo-hero-trust{ margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.promo-hero-card{ background:var(--surface); border:1px solid var(--rule); border-radius:2px; padding:var(--s-7); display:flex; flex-direction:column; gap:var(--s-2); position:relative; }
/* Subtle voucher cues (client 2026-06-25): anchor badge + perforation tear-line.
   Notch cut-outs aren't usable here (--bg = --surface = #fff, no contrast), so the
   "deal" signal is the quantified saving + a refined dashed perforation with punch holes. */
.promo-card-save{
  position:absolute; top:-13px; right:var(--s-6); z-index:1;
  background:var(--teal); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px;
  box-shadow:0 6px 16px rgba(24,128,168,.22);
}
.promo-card-perf{
  display:block; height:0; position:relative;
  margin:var(--s-5) calc(-1 * var(--s-7)) var(--s-5);
  border-top:1.5px dashed var(--rule);
}
.promo-card-perf::before, .promo-card-perf::after{
  content:""; position:absolute; top:50%; width:14px; height:14px;
  background:var(--bg); border:1px solid var(--rule); border-radius:50%;
  transform:translate(-50%,-50%);
}
.promo-card-perf::before{ left:0; }
.promo-card-perf::after{ left:100%; }
.promo-card-l{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.promo-price-line{ display:flex; align-items:baseline; gap:var(--s-3); margin-top:var(--s-2); }
.promo-price{ font-family:'Newsreader',serif; font-size:clamp(48px,6vw,68px); font-weight:300; color:var(--ink); line-height:1; }
.promo-price::before{ content:"$"; font-size:.55em; vertical-align:super; color:var(--ink-2); }
.promo-price-was{ font-size:var(--fs-md); color:var(--ink-3); text-decoration:line-through; }
.promo-price-sub{ font-size:var(--fs-sm); color:var(--ink-2); }
.promo-price-meta{ font-size:var(--fs-sm); color:var(--ink-3); margin-top:var(--s-1); }
.promo-card-btn{ margin-top:0; width:100%; justify-content:center; }  /* perforation provides the gap */

/* Section heads */
.promo-sec-head{ max-width:60ch; margin-bottom:var(--s-7); }
.promo-sec-head .display{ margin-top:var(--s-3); }

/* Includes */
.promo-include{ padding:var(--s-9) 0; background:var(--surface-cool); }
.promo-inc-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:2px; }
.promo-inc-item{ background:var(--surface); padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-2); }
.promo-inc-h{ font-family:'Newsreader',serif; font-size:var(--fs-xl); font-weight:500; color:var(--ink); }
.promo-inc-d{ font-size:var(--fs-md); color:var(--ink-2); line-height:1.6; }
.promo-context{ margin-top:var(--s-6); max-width:70ch; font-size:var(--fs-md); color:var(--ink-3); }

/* What-you-get rebuilt as a scannable checklist + distinct bonus card (client #14/#15) */
.promo-inc-wrap{ display:grid; grid-template-columns:1.55fr 1fr; gap:var(--s-5); align-items:start; }
.promo-inc-group-l{ display:block; font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:var(--s-3); }
.promo-inc-list{ list-style:none; margin:0; padding:0; }
.promo-inc-list li{ display:flex; gap:var(--s-3); padding:var(--s-4) 0; border-bottom:1px solid var(--rule); }
.promo-inc-list li:last-child{ border-bottom:0; padding-bottom:0; }
.promo-inc-tick{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:flex; align-items:center; justify-content:center; margin-top:3px; }
.promo-inc-tick svg{ width:14px; height:14px; }
.promo-inc-list .promo-inc-h{ display:block; font-family:'Newsreader',serif; font-size:var(--fs-lg); font-weight:500; color:var(--ink); line-height:1.25; margin-bottom:3px; }
.promo-inc-list .promo-inc-d{ display:block; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55; }
.promo-inc-bonus{ background:var(--teal); color:#fff; border-radius:4px; padding:var(--s-7); display:flex; flex-direction:column; gap:var(--s-2); }
.promo-inc-bonus-tag{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.promo-inc-bonus-plus{ font-family:'Newsreader',serif; font-size:clamp(44px,6vw,60px); font-weight:300; line-height:1; margin-top:var(--s-1); }
.promo-inc-bonus-h{ font-family:'Newsreader',serif; font-size:var(--fs-2xl); font-weight:500; line-height:1.1; }
.promo-inc-bonus-d{ font-size:var(--fs-sm); color:rgba(255,255,255,.92); line-height:1.6; }

/* $88 online box — filled brand colour + white button to drive conversion (client #12).
   Prefixed with .promo-pay-grid so it beats the later base .promo-pay-card background. */
.promo-pay-grid .promo-pay-card--online{ background:var(--teal); border-color:var(--teal); }
.promo-pay-card--online .promo-pay-l{ color:#fff; }
.promo-pay-card--online .promo-pay-amt,
.promo-pay-card--online .promo-pay-amt::before{ color:#fff; }
.promo-pay-card--online .promo-pay-was{ color:rgba(255,255,255,.75); }
.promo-pay-card--online .promo-pay-desc{ color:rgba(255,255,255,.92); }
.promo-pay-card--online .promo-pay-fine{ color:rgba(255,255,255,.8); }
.promo-pay-card--online .promo-pay-tag{ background:#fff; color:var(--teal); }
.promo-pay-card--online .btn-primary{ background:#fff; color:var(--teal); border-color:#fff; }
.promo-pay-card--online .btn-primary:hover{ background:rgba(255,255,255,.88); border-color:rgba(255,255,255,.88); }
.promo-pay-card--online .btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.promo-pay-card--online .btn-secondary:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* Checkout */
.promo-checkout{ padding:var(--s-9) 0; }
.promo-pay-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); align-items:start; }
.promo-pay-card{ position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:2px; padding:var(--s-7); display:flex; flex-direction:column; gap:var(--s-3); }
.promo-pay-card--online{ border-color:var(--teal); }
.promo-pay-tag{ position:absolute; top:0; right:var(--s-6); transform:translateY(-50%); background:var(--teal); color:var(--ink-on-deep); font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:var(--s-1) var(--s-3); border-radius:2px; }
.promo-pay-l{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.promo-pay-price{ display:flex; align-items:baseline; gap:var(--s-3); }
.promo-pay-amt{ font-family:'Newsreader',serif; font-size:clamp(40px,5vw,56px); font-weight:300; color:var(--ink); line-height:1; }
.promo-pay-amt::before{ content:"$"; font-size:.55em; vertical-align:super; color:var(--ink-2); }
.promo-pay-was{ font-size:var(--fs-sm); color:var(--ink-3); text-decoration:line-through; }
.promo-pay-desc{ font-size:var(--fs-md); color:var(--ink-2); line-height:1.6; }
.promo-pay-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-2); }
.promo-pay-actions .btn{ flex:1 1 auto; justify-content:center; }
.promo-pay-fine{ font-size:var(--fs-sm); color:var(--ink-3); }
.promo-tnc{ margin-top:var(--s-7); max-width:80ch; font-size:var(--fs-sm); color:var(--ink-3); line-height:1.6; }

/* PayNow modal */
body.paynow-open{ overflow:hidden; }
.paynow-modal{ position:fixed; inset:0; z-index:var(--z-overlay); display:flex; align-items:center; justify-content:center; padding:var(--s-4); }
.paynow-modal[hidden]{ display:none; }
.paynow-backdrop{ position:absolute; inset:0; background:rgba(20,32,33,.55); }
.paynow-sheet{ position:relative; background:var(--surface); border-radius:4px; max-width:560px; width:100%; max-height:92vh; overflow-y:auto; padding:var(--s-7); display:flex; flex-direction:column; gap:var(--s-3); animation:paynow-in .36s var(--ease-ios); }
@keyframes paynow-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.paynow-x{ position:absolute; top:var(--s-3); right:var(--s-4); background:none; border:none; font-size:28px; line-height:1; color:var(--ink-3); cursor:pointer; }
.paynow-steps{ font-size:var(--fs-md); color:var(--ink-2); line-height:1.6; }
.paynow-qr-wrap{ display:flex; gap:var(--s-5); align-items:center; padding:var(--s-4); background:var(--surface-cool); border:1px solid var(--rule); border-radius:2px; }
.paynow-qr{ width:200px; height:auto; flex:0 0 auto; background:var(--surface); border:1px solid var(--rule); }
.paynow-meta{ display:flex; flex-direction:column; gap:var(--s-2); font-size:var(--fs-sm); }
.paynow-meta .row{ display:flex; flex-direction:column; }
.paynow-meta .l{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.paynow-meta .v{ color:var(--ink); font-variant-numeric:tabular-nums; }
.paynow-after{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-2); }
.paynow-after .btn{ justify-content:center; }
.paynow-note{ font-size:var(--fs-sm); line-height:1.55; color:var(--ink); background:var(--surface-cool); border-left:3px solid var(--teal); padding:var(--s-3) var(--s-4); border-radius:2px; }
.paynow-form{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-2); }
.paynow-form label{ display:flex; flex-direction:column; gap:var(--s-1); font-size:var(--fs-sm); color:var(--ink-2); }
.paynow-form input{ font-size:var(--fs-body); padding:var(--s-3); border:1px solid var(--rule-strong); border-radius:2px; background:var(--surface); color:var(--ink); }
.paynow-form input:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; box-shadow:0 0 0 4px var(--teal-soft); }
.paynow-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.paynow-form .btn{ justify-content:center; margin-top:var(--s-2); }
.paynow-status{ font-size:var(--fs-sm); }
.paynow-status--ok{ color:var(--success); }
.paynow-status--err{ color:var(--danger); }
.paynow-help{ font-size:var(--fs-sm); color:var(--ink-3); }

@media (max-width:860px){
  .promo-hero-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .promo-inc-grid{ grid-template-columns:1fr; }
  .promo-inc-wrap{ grid-template-columns:1fr; }
  .promo-pay-grid{ grid-template-columns:1fr; }
  .paynow-qr-wrap{ flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .paynow-sheet{ animation:none; }
}


/* ════ X-RAY ANATOMY (staging A/B test — 2026-06-22) ════ */
.anatomy-x{
  position:relative; overflow:hidden;
  padding-block:var(--section-y);
  background:#000000;   /* match the X-ray video background — pure black */
  color:var(--ink-on-deep);
}
.anatomy-x > .container{position:relative;z-index:1;}
.anatomy-x .eyebrow{display:inline-flex;align-items:center;gap:var(--s-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--meta-on-deep);}
.anatomy-x .eyebrow::before{content:"";width:18px;height:1px;background:var(--meta-on-deep);display:inline-block;}
.anatomy-x h2.display{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-0.01em;margin:var(--s-4) 0 0;color:var(--ink-on-deep);}
.anatomy-x-head{max-width:60ch;}
.anatomy-x-head p{font-size:var(--fs-lg);font-weight:400;color:var(--body-on-deep);line-height:1.45;margin:var(--s-5) 0 0;max-width:52ch;}

.anatomy-x-grid{display:grid;grid-template-columns:1fr minmax(400px,0.92fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:var(--s-8);}

/* ── LEFT: copy + reveal panel stacked ─────────────────────── */
.anatomy-x-left{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);min-width:0;}

/* ── RIGHT: BODY (radiograph image) — enlarged ─────────────── */
.anatomy-x-body{position:relative;width:100%;max-width:520px;margin-inline:auto;}
.anatomy-x-svg{display:block;width:100%;height:auto;}

/* hotspots */
.anatomy-x-spots{position:absolute;inset:0;}
.anatomy-x-spot{
  position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  border:0;padding:0;margin:0;cursor:pointer;background:transparent;border-radius:50%;
  display:grid;place-items:center;
}
.anatomy-x-spot::after{content:"";position:absolute;inset:-9px;border-radius:50%;}
.anatomy-x-dot{
  position:relative;width:16px;height:16px;border-radius:50%;
  background:rgba(8,30,33,0.6);border:2px solid #25A8D8;
  box-shadow:0 0 10px rgba(37,168,216,0.7);
  transition:transform 200ms var(--ease-out-quart),background 200ms var(--ease-out-quart),box-shadow 200ms var(--ease-out-quart);
}
.anatomy-x-dot::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #25A8D8;
  opacity:0;animation:anatomyXPulse 2600ms var(--ease-out-quart) infinite;
}
@keyframes anatomyXPulse{0%{transform:scale(.7);opacity:.6}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.anatomy-x-spot:hover .anatomy-x-dot{transform:scale(1.28);box-shadow:0 0 16px rgba(37,168,216,0.95);}
.anatomy-x-spot[aria-expanded="true"] .anatomy-x-dot{background:#25A8D8;transform:scale(1.22);box-shadow:0 0 18px rgba(37,168,216,1);}
.anatomy-x-spot[aria-expanded="true"] .anatomy-x-dot::before{display:none;}
.anatomy-x-spot:focus-visible{outline:none;}
.anatomy-x-spot:focus-visible .anatomy-x-dot{outline:2px solid #25A8D8;outline-offset:3px;}
.anatomy-x-tip{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-on-deep);
  background:rgba(8,30,33,0.85);padding:3px 9px;border:1px solid rgba(145,197,216,0.3);border-radius:2px;
  opacity:0;pointer-events:none;transition:opacity 180ms var(--ease-out-quart);
}
.anatomy-x-spot.is-left .anatomy-x-tip{left:auto;right:24px;}
.anatomy-x-spot:hover .anatomy-x-tip,.anatomy-x-spot:focus-visible .anatomy-x-tip{opacity:1;}

/* ── REVEAL PANEL ──────────────────────────────────────────── */
.anatomy-x-panel{
  border:1px solid rgba(145,197,216,0.18);border-radius:2px;
  background:rgba(8,30,33,0.45);backdrop-filter:blur(4px);
  padding:clamp(24px,3vw,40px);min-height:300px;position:relative;
  display:flex;flex-direction:column;justify-content:center;
}
.anatomy-x-panel .placeholder-state{color:var(--body-on-deep);font-size:var(--fs-body);max-width:38ch;line-height:1.6;}
.anatomy-x-panel .placeholder-state strong{color:var(--ink-on-deep);font-weight:600;}
.anatomy-x-region{font-size:var(--fs-xs);font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--meta-on-deep);display:flex;align-items:center;gap:var(--s-3);}
.anatomy-x-region::before{content:"";width:18px;height:1px;background:var(--meta-on-deep);}
.anatomy-x-panel h3{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.1;margin:var(--s-4) 0 0;color:var(--ink-on-deep);}
.anatomy-x-panel .lede{font-size:var(--fs-body);line-height:1.6;color:var(--body-on-deep);margin:var(--s-4) 0 0;}
.anatomy-x-link{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-6);font-size:var(--fs-base);font-weight:600;color:var(--meta-on-deep);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 240ms var(--ease-out-quart);width:fit-content;}
.anatomy-x-link .arr{transition:transform 200ms var(--ease-out-quart);}
.anatomy-x-link:hover{border-color:var(--meta-on-deep);}
.anatomy-x-link:hover .arr{transform:translateX(3px);}
.anatomy-x-link:focus-visible{outline:2px solid #25A8D8;outline-offset:2px;border-radius:2px;}
.anatomy-x-content{opacity:0;transform:translateY(8px);}
.anatomy-x-content.is-in{opacity:1;transform:none;transition:opacity 800ms var(--ease-out-expo),transform 800ms var(--ease-out-expo);}

.anatomy-x-foot{margin-top:var(--s-7);font-size:var(--fs-sm);color:var(--meta-on-deep);}
.anatomy-x-foot a{color:var(--ink-on-deep);text-decoration:none;border-bottom:1px solid rgba(145,197,216,0.35);}
.anatomy-x-foot a:hover{border-color:var(--ink-on-deep);}

@media (max-width:880px){
  .anatomy-x-grid{grid-template-columns:1fr;gap:var(--s-7);}
  .anatomy-x-body{max-width:300px;}
}
/* Mobile: anatomy body ONLY — tap a dot to open the condition page. Panel + tips hidden. */
@media (max-width:767px){
  .anatomy-x-grid{justify-items:center;}
  .anatomy-x-panel{display:none;}
  .anatomy-x-tip{display:none;}
  .anatomy-x-body{max-width:min(94vw,460px);}   /* enlarge so the staggered dots have room */
}
@media (prefers-reduced-motion:reduce){
  .anatomy-x-dot::before{animation:none;}
  .anatomy-x-dot,.anatomy-x-spot:hover .anatomy-x-dot,.anatomy-x-link .arr{transition:none;transform:none;}
  .anatomy-x-content.is-in{transition:none;transform:none;}
  .anatomy-x-content{opacity:1;transform:none;}
}

/* ════════════════════════════════════════════════════════════════════
   /iterate v27 (2026-06-22) — trust-stat hierarchy, Google lockup, FCM tight row
   ════════════════════════════════════════════════════════════════════ */

/* (1) 12,000+ = dominant anchor stat. Middle column widened to 1.5fr so the
   enlarged number fits (measured: 1fr col ~373px overflows; 1.5fr ~487px fits 96px). */
.trust-edit-grid{ grid-template-columns:1.5fr 1fr 1fr; align-items:center; }   /* 12,000+ hero on the LEFT, then the other two */
.trust-edit-cell--hero{ align-items:flex-start; text-align:left; }
.trust-edit-cell--hero .v{ font-size:clamp(56px,7vw,96px); justify-content:flex-start; }
.trust-edit-cell--hero .v .suf{ font-size:0.5em; font-weight:400; }
.trust-edit-cell--feature .v{ font-size:clamp(40px,4vw,60px); }   /* 4.9 steps down below the hero */
@media (max-width:880px){
  .trust-edit-grid{ grid-template-columns:1fr 1fr; }
  .trust-edit-cell--hero{ grid-column:1 / -1; order:-1; }          /* 12,000 spans full, on top — never bottom */
  .trust-edit-cell--feature{ grid-column:auto; }
  .trust-edit-cell--hero .v{ font-size:clamp(60px,13vw,104px); }
}

/* (2) Google reviews branding lockup (logo colours are intentional brand fidelity,
   the one sanctioned exception to the no-raw-hex / no-gold rule). */
.trust-google{ display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.trust-google-g{ flex:0 0 auto; display:block; }
.trust-google-name{ font-family:'Inter',sans-serif; font-size:15px; font-weight:600; color:var(--ink); }
.trust-google-rating{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.trust-google-rating strong{ color:var(--ink); font-weight:700; }
.trust-google-stars{ color:var(--teal); letter-spacing:0.04em; }
.trust-google-count{ color:var(--ink-3); }

/* (3) FCM — feature block stays the hero; the 5 cells compress to one tight,
   clearly-subordinate row (kills the old 2×2 bento feature card). */
.fcm-grid{ grid-template-columns:repeat(5,1fr); }
.fcm-cell, .fcm-cell:first-child{
  grid-column:auto; grid-row:auto; min-height:0;
  padding:22px 18px 26px;
  background:var(--teal-darker);
}
.fcm-cell:first-child{ background:linear-gradient(155deg,#085470 0%,var(--teal-darker) 70%); }
.fcm-cell .num, .fcm-cell:first-child .num{ font-size:13px; margin-bottom:14px; margin-top:0; font-style:italic; }
.fcm-cell h3, .fcm-cell:first-child h3{
  font-family:'Newsreader',serif; font-weight:600; font-variation-settings:"opsz" 24;
  font-size:17px; line-height:1.2; letter-spacing:-0.012em; margin:0 0 8px; max-width:none;
}
.fcm-cell p, .fcm-cell:first-child p{ font-size:13px; line-height:1.55; max-width:none; color:#95A7AD; }
@media (max-width:1080px){ .fcm-grid{ grid-template-columns:repeat(3,1fr); } .fcm-cell:last-child{ grid-column:span 2; } }  /* fill orphan slot: 5 cells in 3 cols */
@media (max-width:620px){ .fcm-grid{ grid-template-columns:repeat(2,1fr); } .fcm-cell:last-child{ grid-column:span 2; } }  /* fill orphan slot: 5 cells in 2 cols (2026-08-12) */

/* Real-photo hero band (service detail pages with a brand photo) — 2026-06-22 */
.ph-band--photo .ph-photo{ aspect-ratio:16/9; overflow:hidden; border-radius:2px; background:var(--surface-2); }
.ph-band--photo .ph-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* FCM cards are now links to their service pages (2026-06-22) */
a.fcm-cell{ text-decoration:none; color:inherit; }
a.fcm-cell::after{ content:"→"; position:absolute; right:18px; bottom:16px; color:var(--meta-on-deep); opacity:0; transform:translateX(-4px); transition:opacity 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart); }
a.fcm-cell:hover::after{ opacity:1; transform:translateX(0); }

/* ════ All H1/H2 headings thicker for readability (client 2026-06-22) ════
   Section-specific rules previously forced some headings to 300/400; this
   explicit list lifts every heading to 500 (stat NUMBERS .v + doctor-name
   displays keep their light weight — they are not headings). */
.hero-title,
h1.display, h2.display,
.page-hero h1, .doctor-hero h1, .post-hero h1,
.prose h2,
.trust-edit-intro h2, .trust-reviews-h,
.problem h2, .services-head h2, .conditions-head h2, .doctors-head h2,
.video-wall-head h2, .fv-head h2, .faq-head h2, .compare-head h2,
.fcm h2, .cta-final h2, .anatomy-x h2.display{
  font-weight:500;
}

/* Clinic-wide photo collage (conditions index) — 2026-07-14 */
.ph-band--collage .container{ padding-top:32px; padding-bottom:32px; }
.clinic-collage{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.clinic-collage figure{ margin:0; overflow:hidden; border-radius:2px; background:var(--surface-2); aspect-ratio:4/5; }
.clinic-collage figure.wide{ grid-column:span 2; aspect-ratio:auto; }
.clinic-collage img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:720px){ .clinic-collage{ grid-template-columns:repeat(2,1fr); gap:8px; } .clinic-collage figure.wide{ grid-column:span 2; } }

/* About — alternating story bands (2026-07-14) */
.story{ padding:clamp(56px,8vw,104px) 0; }
.story-band{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(32px,5vw,72px); align-items:center; }
.story-band + .story-band{ margin-top:clamp(52px,8vw,104px); }
.story-band--rev .story-media{ order:-1; }
.story-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; }
.story-band h2{ font-family:'Newsreader',serif; font-weight:500; font-size:clamp(25px,3.1vw,37px); line-height:1.14; letter-spacing:-0.015em; color:var(--ink); margin:0 0 18px; }
.story-band p{ font-size:17px; line-height:1.72; color:var(--ink-2); margin:0 0 16px; }
.story-band p:last-child{ margin-bottom:0; }
.story-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; display:block; background:var(--surface-2); }
.story-full{ max-width:820px; margin:clamp(52px,8vw,104px) auto 0; text-align:center; }
.story-full h2{ font-family:'Newsreader',serif; font-weight:500; font-size:clamp(25px,3.1vw,37px); line-height:1.14; letter-spacing:-0.015em; color:var(--ink); margin:0 0 16px; }
.story-full > p{ font-size:17px; line-height:1.72; color:var(--ink-2); max-width:62ch; margin:0 auto 40px; }
.story-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left; }
.story-value{ padding-top:20px; border-top:2px solid var(--teal); }
.story-value h3{ font-size:16px; font-weight:700; color:var(--ink); margin:0 0 8px; letter-spacing:-0.01em; }
.story-value p{ font-size:14.5px; line-height:1.62; color:var(--ink-2); margin:0; }
@media (max-width:820px){
  .story-band{ grid-template-columns:1fr; gap:22px; }
  .story-band--rev .story-media{ order:0; }
  .story-media img{ aspect-ratio:16/10; }
  .story-values{ grid-template-columns:1fr; gap:18px; }
}

/* Condition cards -> image-top tiles (2026-07-14) */
.cond{ padding:0; min-height:0; overflow:hidden; }
.cond--feature, .cond--compact{ padding:0; min-height:0; }
.cond-img{ display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
.cond-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 900ms var(--ease-out-quart); }
.cond:hover .cond-img img{ transform:scale(1.04); }
.cond-body{ position:relative; display:flex; flex-direction:column; gap:8px; flex:1; padding:22px 22px 26px; }
.cond--feature .cond-body{ padding:clamp(24px,2.2vw,32px) clamp(24px,2.2vw,32px) clamp(26px,2.4vw,34px); gap:10px; }
.cond--compact .cond-body{ padding:18px 18px 20px; gap:6px; }
.cond-body p{ margin:6px 0 0; }
.cond .ar{ top:auto; bottom:20px; right:20px; }
@media (max-width:520px){
  .cond, .cond--feature, .cond--compact{ padding:0; background:var(--surface); }
  .cond-body{ padding:16px 14px 20px; }
  .cond-img{ aspect-ratio:16/9; }
}