/* ============================================================
   TEMPLATE ONE - styles.css
   Global styles + homepage sections.
   Ported from reference/temp1-homepage-demo.html (approved demo).
   Variable names follow the skill spec (TEMP1-BUILD / SKILL.md);
   where the demo used short names, the skill names win.
   ============================================================ */

/* ---------- DESIGN TOKENS - SWAP THESE PER CLIENT ---------- */
:root{
  --color-accent:      #4BA0BF;   /* primary brand - Russ PT teal (decorative fills: no text sits directly on it) */
  --color-accent-dim:  #2A748F;   /* darker variant: light-background text + button hover. WCAG AA fix
                                      (2026-09 accessibility pass): was #2C7A96 (4.44:1 on --color-bg-light,
                                      just under the 4.5:1 AA text minimum, and only 4.26:1 against the
                                      slightly darker .sec-tint band); this shade clears both at 4.82:1 /
                                      4.62:1 with real margin for anti-aliasing, and reads as effectively the
                                      same brand teal. */
  --color-accent-btn:  #38768D;   /* WCAG AA fix (2026-09): white text/icons on --color-accent measured
                                      2.97:1 (fails even the 3:1 large-text minimum) wherever it was used as
                                      a fill behind white content (buttons, the floating dock CTA, active
                                      state chips). This shade clears it at 5.07:1 (picked with margin past
                                      the 4.5:1 floor since axe measured the live rendered button a shade
                                      lighter than the raw hex during its background-color transition);
                                      --color-accent itself is unchanged everywhere it's purely decorative
                                      (icons, progress bars, underlines) since those never had a contrast
                                      failure. */
  --color-accent-2:    #2C3D49;   /* secondary - Russ PT dark slate */
  --color-bg-light:    #F6F5F1;   /* warm light background */
  --color-bg-dark:     #11212A;   /* near-black slate-teal dark */
  --color-bg-darkest:  #0A171D;   /* footer */
  --color-ink-light:   #15242C;   /* text on light */
  --color-ink-dark:    #EEF3F5;   /* text on dark */
  /* brand-derived tints - re-derived from #4BA0BF = rgb(75,160,191) */
  /* Brand red, from the logo triangle (#EE1B22 -> #F69779 gradient). An ACCENT
     only: teal/blue + white stay primary. Measured contrast:
     --color-red       4.0:1 on bg-light, 3.8:1 on bg-dark -> lines, bars, dots only
     --color-red-text  4.8:1 on bg-light; white text on it 5.2:1 -> small text, hover fills
     --color-red-dark  5.4:1 on bg-dark -> text on dark sections */
  --color-red:         #EE1B22;
  --color-red-text:    #D7141B;
  --color-red-dark:    #F4636A;
  --red-glow:          rgba(238,27,34,.28);
  --accent-soft:       rgba(75,160,191,.12);  /* chips, active fills */
  --accent-glow:       rgba(75,160,191,.32);  /* button/card glow shadows */
  --offer-grad-2:      #1D5163;               /* offer gradient end */
  --offer-tint:        #9BD9EE;               /* offer accent text */
  --font-display:      'Fraunces', serif;
  --font-body:         'Hanken Grotesk', sans-serif;
  --font-heading:      'Questrial', sans-serif; /* every h1-h6, site-wide (single 400 weight) */
  --spring:            cubic-bezier(.34,1.56,.64,1);
  --section-pad-v:     clamp(70px, 10vw, 130px);
  --section-pad-h:     clamp(20px, 6vw, 100px);
  --max-width:         1240px;
  /* Logo scale. The mark is the client's main brand asset and they asked for it
     to read bigger, so the wide-desktop tier runs it at 84px and the bar grows
     with it. Below 1200px the full nav-links row + phone number leaves under
     20px of slack either side of the mark, so that tier holds the previous
     66px rather than colliding. Under 920px the links collapse to the burger,
     which frees the width again, so the phone tier can run larger than the
     narrow-desktop one. Every .logo img keys off these (inline height:var()). */
  --topbar-h:          36px;  /* location bar above the nav; scrolls away under the sticky header */
  --nav-h:             106px; /* sticky nav bar height; sticky offsets key off this */
  --logo-h:            84px;  /* header mark */
  --logo-h-foot:       96px;  /* footer mark, on the dark band */
}
@media(max-width:1199px){
  :root{--nav-h:88px;--logo-h:66px;--logo-h-foot:80px}
}
@media(max-width:920px){
  :root{--nav-h:96px;--logo-h:74px;--logo-h-foot:84px}
}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;
  /* in-page anchors (#appt etc.) land below the sticky nav, not under it */
  scroll-padding-top:calc(var(--nav-h) + 12px)}
body{font-family:var(--font-body);background:var(--color-bg-light);color:var(--color-ink-light);
  overflow-x:clip; /* clip, NOT hidden - hidden breaks position:sticky */
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shell{max-width:var(--max-width);margin:0 auto;padding:0 var(--section-pad-h)}
section{padding:var(--section-pad-v) 0;position:relative}
img{display:block;max-width:100%}
a{color:inherit}
/* Questrial ships one weight (400); pinning it stops the UA's bold default
   from synthesising a faux-bold. Headings that set their own weight keep it. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400}
h1,h2,h3{letter-spacing:-.012em}

/* ---------- TYPOGRAPHY SCALE (skill spec) ---------- */
.t-hero{font-size:clamp(2.8rem,8vw,6.5rem)}
.t-h1{font-size:clamp(2.6rem,6vw,5rem)}
.t-h2,h2{font-variation-settings:'opsz' 100,'wght' 480;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.07;max-width:22ch}
.t-h3,h3{font-variation-settings:'opsz' 70,'wght' 500;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.12}
.t-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.t-body,p{line-height:1.68}
.t-body{font-size:clamp(1rem,1.2vw,1.12rem)}
.muted{opacity:.72;font-weight:300}
/* QA Pass 6, item 18: the global reset zeroes h2/p margins, so a bare
   heading-then-paragraph(s) stack (no wrapping component of its own)
   otherwise reads as a flush, gapless wall of text. Scoped to a
   dedicated class rather than an inline-style attribute selector,
   since Template 1's scroll-reveal system rewrites the style
   attribute at runtime (reformatting it) which would silently break
   an attribute-selector match post-render. */
h2 + p.body-stack{margin-top:20px}
p.body-stack + p.body-stack{margin-top:20px}
.dark{background:var(--color-bg-dark);color:var(--color-ink-dark)}
.dark .muted{opacity:.7}

/* ---------- LOAD/REVEAL INITIAL STATES (gated on html.js so a
     JS failure never leaves content invisible) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(30px)}
.js [data-load]{opacity:0;transform:translateY(20px)}

/* ---------- SYSTEM 6: NUMBERED WAYFINDING ---------- */
.way{display:flex;align-items:center;gap:14px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--color-accent-dim)}
.dark .way{color:var(--color-accent)}
/* red chapter number + rule: the site-wide brand-red thread; the label stays teal */
.way .num{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 500;font-size:.86rem;
  color:var(--color-red-text)}
.dark .way .num{color:var(--color-red-dark)}
.way .rule{height:1px;background:var(--color-red);width:clamp(36px,5vw,80px)}
.js .way .rule{transform:scaleX(0);transform-origin:left}
.hud{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:11px;
  font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.14em;font-weight:600;
  color:rgba(255,255,255,.6);mix-blend-mode:difference}
.hud .cur{color:#fff;font-size:.84rem}
.hud .hr{width:32px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hud .hr i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media(max-width:899px){.hud{display:none}}

/* ---------- SYSTEM 8: TOUCH VOCABULARY ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--color-accent-btn);color:#fff;
  text-decoration:none;border:0;cursor:pointer;font-family:var(--font-body);font-weight:700;
  font-size:.94rem;padding:16px 28px;border-radius:100px;user-select:none;
  transition:transform .5s var(--spring),box-shadow .4s,background .3s}
.btn:hover{background:var(--color-red-text);box-shadow:0 12px 36px var(--red-glow)}
.btn:active{transform:scale(.95);transition:transform .1s ease-out}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor;opacity:.85}
.btn.ghost:hover{box-shadow:none;opacity:1;background:rgba(0,0,0,.04)}
.dark .btn.ghost:hover{background:rgba(255,255,255,.06)}
.tlink{font-weight:600;text-decoration:none;font-size:.92rem;color:var(--color-accent-dim);
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:0% 1.5px;background-position:0 100%;padding-bottom:3px;
  transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.tlink:hover{background-size:100% 1.5px}
.dark .tlink{color:var(--color-accent)}

/* ---------- SYSTEM 4: IMAGE REVEAL LANGUAGE ---------- */
.img-reveal{position:relative;overflow:hidden;border-radius:22px}
.js .img-reveal{clip-path:inset(14% 16% 14% 16% round 22px)}
.img-reveal img{width:100%;height:100%;object-fit:cover}
.js .img-reveal img{transform:scale(1.28);will-change:transform}

/* ---------- TOP BAR (multi-location) ---------- */
.topbar{background:var(--color-accent-2);color:#fff;font-size:.78rem;
  height:var(--topbar-h);display:flex;align-items:center}
.topbar .shell{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar .loc{display:flex;align-items:center;gap:8px;font-weight:600}
.topbar select{background:transparent;border:0;color:#fff;font-family:var(--font-body);
  font-size:.78rem;font-weight:600;cursor:pointer;outline:none}
.topbar select:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.topbar select option{color:var(--color-ink-light)}
.topbar .locinfo{opacity:.85}
.topbar .right{display:flex;align-items:center;gap:18px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .soc{display:flex;gap:10px;opacity:.85}
@media(max-width:820px){.topbar .locinfo,.topbar .soc,.topbar .mail{display:none}}

/* ---------- STICKY HEADER ----------
   The sticky element is <header> (topbar + nav), not .nav: a sticky box only
   sticks inside its parent, and .nav's parent is <header>, which is exactly as
   tall as the two bars, so .nav used to scroll away with it. Offsetting the
   header by the topbar height lets the location bar scroll off while the nav
   pins at top:0, so every existing var(--nav-h) sticky offset still holds. */
header:has(>.nav){position:sticky;top:calc(-1*var(--topbar-h));z-index:50}

/* ---------- NAV ---------- */
.nav{position:relative;background:rgba(246,245,241,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(20,35,28,.08)}
.nav .shell{display:flex;justify-content:space-between;align-items:center;height:var(--nav-h)}
/* logo is set inline per page (height:66px); the bar grows with it so the
   mark never crowds the border. Sticky offsets below key off --nav-h. */
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--color-ink-light);
  font-family:var(--font-display);font-variation-settings:'opsz' 50,'wght' 620;font-size:1.2rem}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--color-accent);position:relative;flex-shrink:0}
.logo i::after{content:'';position:absolute;inset:7px;border:2.5px solid #fff;border-radius:50%;border-bottom-color:transparent;transform:rotate(45deg)}
.nav-links{display:flex;gap:26px;list-style:none;font-size:.9rem;font-weight:500}
.nav-links a{text-decoration:none}
.nav-links li{position:relative}
/* dropdowns */
.nav-links .drop>a::after{content:' ▾';font-size:.7em;opacity:.55}
.nav-links .drop-menu{position:absolute;top:100%;left:-14px;min-width:230px;background:#fff;
  border-radius:14px;box-shadow:0 18px 50px rgba(20,35,28,.16);padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,transform .3s,visibility .3s}
.nav-links .drop:hover .drop-menu,.nav-links .drop:focus-within .drop-menu{
  opacity:1;visibility:visible;transform:none}
.nav-links .drop-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:.86rem}
.nav-links .drop-menu a:hover{background:var(--accent-soft);color:var(--color-accent-dim)}
.nav-phone{font-weight:700;text-decoration:none;font-size:.92rem;color:var(--color-accent-dim)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--color-ink-light);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
@media(max-width:920px){
  .nav-links,.nav-phone{display:none}
  .burger{display:block;flex-shrink:0}
  /* long clinic names (and the unfilled master token) must never
     push the burger off-screen */
  .logo{min-width:0;overflow:hidden;white-space:nowrap;font-size:1.05rem}
}
/* Matching the old site's menu took this from ~28 entries to ~36, which is
   taller than a phone viewport. With justify-content:center a flex column that
   overflows spills past BOTH edges and the items above the centre line become
   unreachable by scrolling, so the menu starts at the top and pads instead. */
.mnav{position:fixed;inset:0;background:var(--color-bg-dark);color:var(--color-ink-dark);z-index:70;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:76px 32px 48px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mnav.open{transform:none}
/* Accordion menu: only the top-level rows show when it opens. A parent with a
   submenu is a <button> (aria-expanded) that reveals its list; initMobileNav
   keeps at most one open. Type runs at roughly half the old display size
   (32px/24px -> ~16px, subs ~14px) and stops there so it stays readable. */
.mnav .mlist,.mnav .msubmenu ul{list-style:none}
.mnav .mitem{border-bottom:1px solid rgba(255,255,255,.08)}
.mnav .mlink{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:48px;padding:8px 0;background:none;border:0;color:inherit;cursor:pointer;
  text-align:left;text-decoration:none;font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 480;font-size:clamp(1rem,2.8vw,1.1rem);line-height:1.25}
.mnav .mchev{flex-shrink:0;width:9px;height:9px;margin-right:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.7;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.mnav .mitem.open>.mlink .mchev{transform:translateY(2px) rotate(-135deg)}
.mnav .mitem.open>.mlink{color:var(--color-accent)}
/* collapsed = 0fr row + visibility:hidden, so closed links are also out of the
   tab order and the accessibility tree, not merely clipped */
.mnav .msubmenu{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
.mnav .mitem.open>.msubmenu{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1),visibility 0s}
.mnav .msubmenu>ul{overflow:hidden;min-height:0}
.mnav .msubmenu ul{padding:0 0 10px 16px}
.mnav .msub{display:flex;align-items:center;min-height:40px;padding:6px 0;text-decoration:none;
  font-family:var(--font-display);font-variation-settings:'opsz' 90,'wght' 480;
  font-size:.875rem;line-height:1.3;opacity:.8}
.mnav .mphone{color:var(--color-accent)}
.js .mnav .mitem{opacity:0;transform:translateY(24px)}
.mnav .close{position:absolute;top:20px;right:20px;background:none;border:0;color:var(--color-ink-dark);
  font-size:1.6rem;cursor:pointer;width:44px;height:44px}

/* ---------- 01 HERO ---------- */
.hero{padding:clamp(44px,6vw,80px) 0 var(--section-pad-v);overflow:hidden}
/* Desktop: [copy | photo] on top, the booking form spanning both below it.
   Tablet keeps the same two rows; below 768px copy, photo, form stack. Phone: the photo stays hidden (as before)
   so the form sits right under the copy. */
.hero .shell{display:grid;grid-template-columns:1.1fr .9fr;
  grid-template-areas:"copy photo" "form form";
  column-gap:clamp(30px,4.5vw,70px);row-gap:clamp(30px,3.6vw,48px);align-items:stretch}
.hero-text{grid-area:copy;min-width:0}
.hero .hero-photo{grid-area:photo}
.hero .hero-form{grid-area:form}
@media(max-width:767px){
  .hero .shell{grid-template-columns:1fr;grid-template-areas:"copy" "photo" "form"}
}
/* 2/3 of the previous clamp(2.8rem,8vw,6.5rem) */
.hero h1{font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8;
  font-size:clamp(1.87rem,5.33vw,4.33rem);line-height:1.04;margin-top:22px}
.hero h1 .word{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block}
.js .hero h1 .ch{opacity:0;transform:translateY(.5em);
  font-variation-settings:'opsz' 144,'wght' 200,'SOFT' 100,'WONK' 0}
.hero h1 .accent-word,.hero h1 .accent-word .ch{color:var(--color-accent-dim)}
.hero .tag{margin-top:16px;font-family:var(--font-display);font-style:italic;
  font-variation-settings:'opsz' 90,'wght' 440,'SOFT' 50;font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--color-accent-dim)}
.hero .sub{margin-top:18px;max-width:44ch}
/* the photo fills its column to the height of the copy beside it (no dead
   space under a short fixed-ratio frame); min-height keeps it substantial */
.hero-photo{min-height:340px}
/* the frame is portrait on tablet, so bias the crop left: keeps the patient's
   face and the therapist both in frame as the column narrows */
.hero-photo img{object-position:44% 50%}
@media(max-width:767px){.hero-photo{min-height:0;aspect-ratio:16/10}}
@media(max-width:640px){.hero-photo{display:none}}

/* ---------- HOME HERO: full-width horizontal booking form ----------
   Same multi-step form (System 7), laid out as a row: heading + progress on
   the left, the current step in the middle, Back/Continue on the right. */
@media(min-width:900px){
  .hero-form{display:grid;grid-template-columns:minmax(220px,.8fr) 2.2fr;
    column-gap:clamp(28px,3.5vw,56px);align-items:center;padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,40px)}
  .hero-form .fc-head{grid-column:1;grid-row:1;align-self:end}
  .hero-form .fm-progress{grid-column:1;grid-row:2;align-self:start;margin:16px 0 0}
  .hero-form form{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(20px,2.5vw,36px);align-items:end}
  .hero-form .ms-step,.hero-form .ms-done{grid-column:1}
  .hero-form .ms-nav{grid-column:2;grid-row:1;margin-top:0;align-self:end;padding-bottom:4px}
  .hero-form .ms-native-submit{grid-column:1/-1}
  .hero-form .ms-summary{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .hero-form .ms-done{padding:0}
}
.gbadge{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.86rem;font-weight:600}
.gbadge .stars,.stars{color:#F5B301;letter-spacing:2px}

/* ---------- SYSTEM 7: MULTI-STEP FORM CARD ---------- */
.form-card{background:#fff;border-radius:22px;padding:clamp(22px,3vw,34px);
  box-shadow:0 24px 70px rgba(20,35,28,.12);border:1px solid rgba(20,35,28,.06)}
.dark .form-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);
  box-shadow:none;color:var(--color-ink-dark)}
.form-card .fc-head{font-family:var(--font-display);font-variation-settings:'opsz' 70,'wght' 520;
  font-size:1.3rem;line-height:1.15}
.fm-progress{display:flex;align-items:center;gap:12px;margin:18px 0 22px}
.fm-progress .bar{flex:1;height:3px;background:rgba(20,35,28,.12);border-radius:3px;overflow:hidden}
.dark .fm-progress .bar{background:rgba(255,255,255,.14)}
.fm-progress .bar i{display:block;height:100%;width:20%;background:var(--color-red);border-radius:3px;
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.fm-progress .count{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}
.ms-step{display:none}
.ms-step.active{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.ms-step .q{font-weight:600;font-size:1.02rem;line-height:1.35}
.field{position:relative;margin-top:20px}
.field input{width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(20,35,28,.22);
  color:inherit;font-family:var(--font-body);font-size:1.08rem;padding:12px 2px 10px;outline:none}
.dark .field input{border-bottom-color:rgba(255,255,255,.25)}
.field label{position:absolute;left:2px;top:12px;opacity:.65;font-size:1rem;pointer-events:none;
  transition:all .35s cubic-bezier(.65,0,.35,1)}
.field .ul{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.field:focus-within .ul{transform:scaleX(1)}
.field:focus-within label,.field.filled label{top:-13px;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:1;color:var(--color-accent-dim);font-weight:700}
.dark .field:focus-within label,.dark .field.filled label{color:var(--color-accent)}
.field .err{position:absolute;left:2px;top:100%;padding-top:5px;font-size:.72rem;color:#C0472F;
  opacity:0;transition:opacity .3s}
.field.error .err{opacity:1}
.field.error input{border-bottom-color:#C0472F}
.ms-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.ms-back{background:none;border:0;font-family:var(--font-body);font-size:.84rem;font-weight:600;
  opacity:.65;cursor:pointer;color:inherit;padding:10px 4px;min-height:44px;visibility:hidden}
.ms-back.show{visibility:visible}
.ms-summary{margin-top:16px;display:grid;gap:4px}
.ms-summary .row{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;
  padding:9px 0;border-bottom:1px solid rgba(20,35,28,.1)}
.dark .ms-summary .row{border-bottom-color:rgba(255,255,255,.1)}
.ms-summary .row span:first-child{opacity:.65}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.74rem;
  line-height:1.5;opacity:.8;cursor:pointer;user-select:none}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--color-accent);flex-shrink:0;cursor:pointer}
.btn[disabled]{opacity:.45;pointer-events:none}
.ms-done{display:none;text-align:center;padding:18px 0 6px}
.ms-done.show{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
.ms-done .ok{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 14px}

/* ---------- 02/05/10 SPLITS ---------- */
.split .shell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:840px){.split .shell{grid-template-columns:1fr}}
.split h2{margin-top:18px}
.split p{margin-top:16px;max-width:48ch}
.split .cta{margin-top:26px}
.split .img-reveal{aspect-ratio:4/5;max-height:520px}
.taglinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.taglinks a{font-size:.8rem;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:100px;
  border:1px solid rgba(255,255,255,.25);transition:border-color .3s,background .3s,transform .5s var(--spring)}
.taglinks a:hover{border-color:var(--color-accent);background:var(--accent-soft)}
.taglinks a:active{transform:scale(.94);transition:transform .1s}

/* ---------- SYSTEM 2: SNAP CAROUSELS + CARDS ---------- */
.car-wrap{margin-top:clamp(32px,4vw,50px)}
.car{display:grid;gap:16px}
@media(min-width:768px){.car.cols-4{grid-template-columns:repeat(4,1fr)}.car.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){
  .car{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;padding:4px var(--section-pad-h) 8px;margin:0 calc(-1*var(--section-pad-h));
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* snap each card to the content edge: one whole card in view, the next
       one peeking in at the right as the swipe cue; the last card snaps fully
       into view because the track's end padding matches */
    scroll-padding-inline:var(--section-pad-h)}
  .car::-webkit-scrollbar{display:none}
  .car>*{scroll-snap-align:start}
}
/* Optional prev/next arrows, mobile only. Opt in with data-car-arrows on the
   .car-wrap; initCarousels builds the buttons, so no page carries the markup. */
.car-ctrl{display:flex;align-items:center;gap:14px;margin-top:18px}
.car-ctrl .car-progress{flex:1;margin-top:0}
.car-arrows{display:flex;gap:8px;flex-shrink:0}
.car-arrow{width:40px;height:40px;border-radius:50%;background:transparent;color:inherit;cursor:pointer;
  border:1px solid rgba(20,35,28,.2);display:flex;align-items:center;justify-content:center;
  transition:opacity .3s,background .3s,transform .5s var(--spring)}
.car-arrow svg{width:16px;height:16px}
.car-arrow:active{transform:scale(.92);transition:transform .1s}
.car-arrow[disabled]{opacity:.3;cursor:default}
.dark .car-arrow{border-color:rgba(255,255,255,.28)}
@media(min-width:768px){.car-ctrl{display:none}}
.car-progress{height:2px;background:rgba(20,35,28,.14);border-radius:2px;margin-top:18px;overflow:hidden}
.dark .car-progress{background:rgba(255,255,255,.14)}
.car-progress i{display:block;height:100%;width:18%;background:var(--color-red);border-radius:2px;transition:width .15s linear}
@media(min-width:768px){.car-progress{display:none}}
.tcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .5s var(--spring),border-color .4s;user-select:none}
.tcard:hover{transform:translateY(-6px);border-color:rgba(75,160,191,.5)}
.tcard:active{transform:scale(.965);transition:transform .1s}
.tcard .img-reveal{border-radius:0;aspect-ratio:4/3}
.js .tcard .img-reveal{clip-path:inset(14% 16% 14% 16% round 0)}
.tcard .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tcard .body h3{font-size:1.2rem}
.tcard .body p{font-size:.88rem;opacity:.7;line-height:1.55}
.tcard .go{margin-top:auto;padding-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent);
  display:flex;justify-content:space-between;align-items:center}

/* ---------- 4-PHASE PROGRAM ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,280px));
  justify-content:center;gap:clamp(18px,3vw,32px);margin-top:clamp(34px,5vw,54px)}
/* The home page's "4-Phase Recovery Program" is the only four-item .phases on
   the site. auto-fit sizes its tracks at the 280px maximum, which fits three
   across a 1240px shell and drops "Prevent" onto a row of its own. This
   modifier pins that one instance to a real 4-up row and steps down to 2-up
   then 1-up where four genuinely will not fit. Bare .phases is left alone so
   the 3-step "What to expect" blocks on every service/condition detail page
   keep rendering exactly as they do now. */
.phases.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:999px){.phases.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:619px){.phases.four{grid-template-columns:minmax(0,1fr)}}
.phase{border-top:2px solid rgba(20,35,28,.14);padding-top:20px}
.phase .pnum{font-family:var(--font-display);font-variation-settings:'opsz' 144,'wght' 300,'SOFT' 30;
  font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:.9;color:var(--color-accent-dim)}
.phase h3{margin-top:12px;font-size:1.35rem}
.phase p{margin-top:8px;font-size:.9rem;opacity:.7;line-height:1.6}

/* ---------- TEAM CARDS ---------- */
.mcard{background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--color-ink-light);
  box-shadow:0 8px 28px rgba(20,35,28,.08);display:flex;flex-direction:column;
  transition:transform .5s var(--spring),box-shadow .5s;user-select:none}
.mcard:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(20,35,28,.14)}
.mcard:active{transform:scale(.965);transition:transform .1s}
.mcard .img-reveal{border-radius:0;aspect-ratio:4/5}
.js .mcard .img-reveal{clip-path:inset(14% 16% 14% 16% round 0)}
.mcard .body{padding:20px 22px 22px}
.mcard .body h3{font-size:1.25rem}
.mcard .cred{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--color-accent-dim);margin-top:3px}
.mcard .pos{font-size:.86rem;opacity:.65;margin-top:5px}
.mcard .go{margin-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent-dim)}

/* ---------- 07 BODY AREAS (light, reference layout) ---------- */
.areas-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:16px}
@media(max-width:840px){.areas-head{grid-template-columns:1fr}}
.areas-head .sub-h{font-family:var(--font-display);font-variation-settings:'opsz' 60,'wght' 540;
  font-size:clamp(1.05rem,1.8vw,1.3rem);margin-top:16px;color:var(--color-accent-dim)}
.area-chips{display:flex;flex-wrap:wrap;gap:9px}
.area-chips a{font-size:.8rem;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:100px;
  background:#fff;box-shadow:0 3px 12px rgba(20,35,28,.07);min-height:40px;display:inline-flex;align-items:center;
  transition:transform .5s var(--spring),box-shadow .4s}
.area-chips a:hover{box-shadow:0 8px 22px rgba(20,35,28,.13)}
.area-chips a:active{transform:scale(.94);transition:transform .1s}
.areas-grid{display:grid;grid-template-columns:1fr minmax(230px,320px) 1fr;
  gap:clamp(16px,2.5vw,30px);align-items:center;margin-top:clamp(34px,5vw,54px)}
@media(max-width:920px){.areas-grid{grid-template-columns:1fr;justify-items:center}}
.model-wrap{position:relative;width:100%;max-width:320px}
.model-wrap img{width:100%;border-radius:20px}
.mdot{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;
  background:#fff;border:2px solid var(--color-accent-dim);color:var(--color-accent-dim);
  font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .35s var(--spring);
  box-shadow:0 4px 14px rgba(20,35,28,.2);z-index:2}
/* 44px hit target around the visible 26px dot */
.mdot::before{content:'';position:absolute;inset:-9px;border-radius:50%}
.mdot::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--color-red);opacity:0}
.mdot.active{background:var(--color-red-text);border-color:var(--color-red-text);color:#fff;
  transform:translate(-50%,-50%) scale(1.18)}
.mdot.active::after{opacity:1;animation:hsPulse 1.8s ease-out infinite}
@keyframes hsPulse{from{transform:scale(.55);opacity:.8}to{transform:scale(1.7);opacity:0}}
.area-col{display:grid;gap:14px;align-content:center}
@media(max-width:920px){.area-col{width:100%;max-width:520px}}
.acard{background:#fff;border-radius:18px;padding:18px 20px;border:1.5px solid transparent;cursor:pointer;
  box-shadow:0 4px 18px rgba(20,35,28,.06);user-select:none;
  transition:border-color .4s,box-shadow .4s,transform .5s var(--spring)}
.acard:active{transform:scale(.975);transition:transform .1s}
.acard.active{border-color:var(--color-accent);box-shadow:0 16px 40px rgba(75,160,191,.16)}
.acard .ahead{display:flex;align-items:center;gap:10px}
.acard .anum{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
  font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .3s,color .3s}
.acard.active .anum{background:var(--color-accent-btn);color:#fff}
.acard h3{font-size:1rem;font-variation-settings:'opsz' 50,'wght' 560}
.acard p{font-size:.79rem;line-height:1.55;opacity:.65;margin-top:8px}
.acard .tlink{font-size:.76rem;margin-top:10px;display:inline-block}
.bm-list{margin-top:clamp(30px,4vw,44px);display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:.84rem;justify-content:center}
.bm-list a{opacity:.65;text-decoration:none;transition:opacity .3s,color .3s}
.bm-list a:hover{opacity:1;color:var(--color-accent-dim)}

/* ---------- BANDS ---------- */
.band{padding:clamp(44px,6vw,70px) 0}
/* ---------- AWARD BADGES (home, band directly under the hero) ----------
   The badges the clinic actually holds, in a continuous marquee. The .logos
   row elsewhere caps art at 44px, which is why these read as miniscule on
   /careers/; here they are given a size a visitor can actually read the year
   off. 150px is the real source resolution, so the display height stops short
   of it rather than upscaling; width:auto keeps each badge's own proportions.
   Seamless loop: the track holds two identical .award-set blocks, each padded
   on the right by one gap, so translating the track by -50% lands on a frame
   identical to the start. */
.awards-band{padding:0 0 clamp(44px,6vw,70px);text-align:center}
.awards-title{font-family:var(--font-heading);font-size:.86rem;font-weight:600;line-height:1.5;
  letter-spacing:.02em;opacity:.65;max-width:52ch;margin:0 auto}
.award-marquee{--award-gap:clamp(28px,4vw,56px);margin-top:22px;overflow:hidden;
  /* soft fade at both edges so badges glide in and out rather than being cut */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.award-track{display:flex;width:max-content;animation:awardScroll 38s linear infinite}
.award-marquee:hover .award-track,.award-marquee:focus-within .award-track{animation-play-state:paused}
.award-set{display:flex;align-items:center;flex-shrink:0;gap:var(--award-gap);padding-right:var(--award-gap)}
.award-set img{height:clamp(76px,8vw,116px);width:auto;max-width:none;flex-shrink:0;display:block}
@keyframes awardScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .award-marquee{-webkit-mask-image:none;mask-image:none;padding:0 var(--section-pad-h)}
  .award-track{animation:none;width:auto}
  .award-set{flex-wrap:wrap;justify-content:center;flex-shrink:1;width:100%;padding-right:0}
  .award-set[aria-hidden]{display:none}
}

.logos{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);align-items:center;justify-content:center;
  margin-top:26px}
.logos span,.logos img{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 560;
  font-size:clamp(1rem,1.8vw,1.3rem);opacity:.42;white-space:nowrap}
.logos img{max-height:44px;width:auto}
.paper .shell{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,60px);align-items:center;
  background:#fff;border-radius:24px;padding:clamp(26px,4vw,48px);box-shadow:0 12px 40px rgba(20,35,28,.07)}
@media(max-width:760px){.paper .shell{grid-template-columns:1fr}}
.paper .img-reveal{aspect-ratio:4/3}

/* ---------- 08 OFFER ---------- */
.offer{background:linear-gradient(135deg,var(--color-accent-2),var(--offer-grad-2));color:#fff;text-align:center;overflow:hidden}
.offer .way{justify-content:center;color:var(--offer-tint)}
/* the slate-teal gradient is too dark for the standard reds; the logo coral holds 4-5:1 */
.offer .way .num{color:#F69779}
.offer .way .rule{background:#F69779}
.offer h2{margin:18px auto 0;font-size:clamp(2.1rem,5vw,4rem)}
.offer h2 em{font-style:italic;font-variation-settings:'opsz' 144,'wght' 440,'SOFT' 60;color:var(--offer-tint)}
.offer .gline{margin-top:20px;font-weight:600}
.offer .cta{margin-top:30px}
.offer .btn{background:#fff;color:var(--color-accent-2)}
.offer .btn:hover{background:#fff;box-shadow:0 14px 44px rgba(0,0,0,.3)}

/* ---------- MOVEMENT LINKS ---------- */
.movelinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.movelinks a{font-size:.86rem;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:100px;
  background:#fff;box-shadow:0 4px 16px rgba(20,35,28,.07);
  transition:transform .5s var(--spring),box-shadow .4s;min-height:44px;display:inline-flex;align-items:center}
.movelinks a:hover{box-shadow:0 10px 28px rgba(20,35,28,.13)}
.movelinks a:active{transform:scale(.94);transition:transform .1s}

/* ---------- 09 TESTIMONIALS ---------- */
.qcard{background:#fff;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 8px 28px rgba(20,35,28,.07);user-select:none;
  transition:transform .5s var(--spring)}
.qcard:active{transform:scale(.97);transition:transform .1s}
.qcard .stars{font-size:.86rem}
.qcard p{font-size:.94rem;line-height:1.6}
.qcard .who{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--color-accent-dim)}

/* ---------- 11 JOURNEY STATS ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,220px));
  justify-content:center;gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,46px)}
/* Number and label are centred on each other. Left-aligned, a single-figure
   stat ("2") sits hard against the left edge of a 220px cell while its label
   wraps to two full-width lines under it, so the digit reads as detached from
   what it is counting. */
.stat{text-align:center}
.stat .odo{display:flex;justify-content:center;align-items:baseline;font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'wght' 420;font-size:clamp(2.6rem,5vw,4rem);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--color-accent-dim)}
/* Fraunces ships no `tnum` feature, so font-variant-numeric:tabular-nums above
   is a no-op and its figures stay proportional. Each .slot is a 1ch box (the
   advance of "0" in this instance, 37.89px at 64px, the widest figure) with
   the rolling column centred inside it, so no digit can ever clip mid-roll.
   That alone is monospaced, not optically even: with a constant 1ch pitch the
   white space between two figures is 1ch minus half of each one's INK width,
   and Fraunces' ink widths run from 19.75px ("1") to 33.75px ("0"). In "2018"
   that produced gaps of 5.5 / 11.5 / 13.5px - measured off a 4x render, and
   exactly what the client is seeing around the "1".
   The margins below convert the constant pitch into a constant optical gap:
   a slot carrying digit d is pulled in by (1ch - inkWidth(d) - GAP) / 2 on
   each side, which makes the distance between any two neighbouring ink edges
   GAP, whatever the pair. GAP is 5.5px at 64px - the "2"-to-"0" gap the client
   already signed off on - and the whole table is in ch so it tracks the
   clamped font-size. The margins move the boxes, not the clip regions, so the
   full-width roll still cannot clip. Ink widths measured at 64px / opsz 144 /
   wght 420: 0 33.75, 1 19.75, 2 30.5, 3 29.25, 4 32.25, 5 28, 6 31, 7 28.5,
   8 29.75, 9 31.25. */
.stat .odo .slot{height:1em;overflow:hidden;line-height:1;
  width:1ch;flex:0 0 auto;letter-spacing:0}
.stat .odo .slot[data-d="0"]{margin-inline:.0179ch}
.stat .odo .slot[data-d="1"]{margin-inline:-.1668ch}
.stat .odo .slot[data-d="2"]{margin-inline:-.0249ch}
.stat .odo .slot[data-d="3"]{margin-inline:-.0414ch}
.stat .odo .slot[data-d="4"]{margin-inline:-.0018ch}
.stat .odo .slot[data-d="5"]{margin-inline:-.0579ch}
.stat .odo .slot[data-d="6"]{margin-inline:-.0183ch}
.stat .odo .slot[data-d="7"]{margin-inline:-.0513ch}
.stat .odo .slot[data-d="8"]{margin-inline:-.0348ch}
.stat .odo .slot[data-d="9"]{margin-inline:-.0150ch}
.stat .odo .col{display:block;will-change:transform;text-align:center}
.stat .odo .col span{display:block;height:1em;line-height:1}
.stat .odo .suffix{font-size:.5em;margin-left:2px;color:var(--color-red-text)}
/* unfilled master tokens render small and readable instead of at
   display size (they'd overlap adjacent stats) */
.stat .odo .static-token{font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.3;
  letter-spacing:0;word-break:break-word;font-variation-settings:'opsz' 40,'wght' 520}
.stat .odo[data-static]{align-items:center;min-height:1em}
.stat .odo[data-static] .suffix{font-size:1em}
.stat .slabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  opacity:.65;margin-top:8px}

/* ---------- 12 FAQ / SYSTEM 8 ACCORDION ---------- */
.faq-list{margin-top:30px;border-top:1px solid rgba(20,35,28,.12);max-width:820px}
.faq-item{border-bottom:1px solid rgba(20,35,28,.12)}
.dark .faq-list,.dark .faq-item{border-color:rgba(255,255,255,.12)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--font-body);
  font-size:1rem;font-weight:600;text-align:left;padding:20px 4px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;min-height:44px;user-select:none}
.faq-q:active{opacity:.7}
.faq-q .chev{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(20,35,28,.25);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--color-accent-dim);
  transition:transform .5s var(--spring),background .3s}
.dark .faq-q .chev{border-color:rgba(255,255,255,.3);color:var(--color-accent)}
.faq-item.open .chev{transform:rotate(135deg);background:var(--accent-soft)}
.faq-a{overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.js .faq-a{height:0} /* JS-off renders answers open (auto height) */
.faq-a p{padding:0 4px 20px;font-weight:300;opacity:.75;max-width:62ch}

/* ---------- 13 APPOINTMENT (global booking section) ---------- */
.appt .shell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:840px){.appt .shell{grid-template-columns:1fr}}
.appt h2{margin-top:18px}
.hoursbox{margin-top:26px;display:grid;gap:10px;font-size:.92rem}
.hoursbox .row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.hoursbox .row span:first-child{opacity:.6}
.mapbox{margin-top:24px;height:180px;border-radius:16px;position:relative;overflow:hidden;background:#14312A}
.mapbox iframe{width:100%;height:100%;border:0;display:block}
/* both clinics get their own map here, as they do on the old site. Side by
   side on desktop, stacked once the column is too narrow to read them. */
.mapstack{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.mapstack{grid-template-columns:1fr}}
.mapstack .mapbox{margin-top:8px;height:170px}
.mapstack .maplabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;opacity:.6}

/* ---------- FOOTER ---------- */
footer{background:var(--color-bg-darkest);color:var(--color-ink-dark);padding:clamp(50px,7vw,80px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}
.foot-grid p{font-size:.88rem;opacity:.6;margin-top:14px;max-width:34ch}
.floc h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);font-weight:600}
.floc div{font-size:.88rem;line-height:1.75;opacity:.75;margin-top:12px}
.floc a{text-decoration:none}
/* wraps rather than overflowing the 1-col footer on the narrowest phones (320px) */
.foot-soc{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:18px;font-size:.8rem;opacity:.7}
.foot-soc a{text-decoration:none}
.foot-bottom{margin-top:clamp(36px,5vw,54px);padding:20px 0;border-top:1px solid rgba(255,255,255,.08);
  font-size:.76rem;opacity:.5;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- SYSTEM 1: THUMB-ZONE CTA DOCK ---------- */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:65;
  transform:translateX(-50%) translateY(180%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.dock.show{transform:translateX(-50%) translateY(0)}
.dock a{display:flex;align-items:center;gap:11px;white-space:nowrap;background:var(--color-accent-btn);color:#fff;text-decoration:none;
  font-weight:700;font-size:.93rem;padding:16px 28px;border-radius:100px;user-select:none;
  box-shadow:0 14px 44px rgba(0,0,0,.35),0 4px 18px var(--accent-glow);
  transition:transform .5s var(--spring)}
.dock a:active{transform:scale(.94);transition:transform .1s}
.dock .dot{width:8px;height:8px;border-radius:50%;background:#fff;position:relative}
.dock .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #fff;
  opacity:.45;animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:.5}to{transform:scale(1.5);opacity:0}}

/* ---------- BACK TO TOP ----------
   One button, injected by initBackToTop (systems.js) on every page. Bottom
   right, same accent fill and shadow as the dock; below 360px, where the
   centred dock reaches it, it rides above the dock so the two never overlap.
   Below the mobile menu (z 70). */
.to-top{position:fixed;right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));z-index:64;width:48px;height:48px;border-radius:50%;
  border:0;cursor:pointer;background:var(--color-accent-btn);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25),0 3px 12px var(--accent-glow);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .35s,transform .45s var(--spring),visibility 0s linear .35s,background .3s}
.to-top.show{opacity:1;visibility:visible;transform:none;
  transition:opacity .35s,transform .45s var(--spring),visibility 0s,background .3s}
.to-top:hover{background:var(--color-red-text)}
.to-top:active{transform:scale(.92);transition:transform .1s}
.to-top svg{width:20px;height:20px}
.to-top:focus-visible{outline:2.5px solid var(--color-accent-dim);outline-offset:3px}
@media(max-width:767px){.to-top{width:44px;height:44px;right:calc(14px + env(safe-area-inset-right))}}
@media(max-width:359px){.to-top{bottom:calc(86px + env(safe-area-inset-bottom))}}

/* ============================================================
   WP-ORIGINAL VISUAL LANGUAGE (waves, photo clusters, badges,
   tinted panels, photo band) - ported from temp1-2026 Divi CSS
   ============================================================ */

/* ---------- LAYERED WAVE SECTION DIVIDERS ----------
   Exact Divi 3-path wave. Colored via currentColor to match the
   ADJACENT section's background. Markup:
   <div class="wave wave-top" style="color:var(--color-bg-light)" aria-hidden="true"><svg>…</svg></div> */
.wave{position:absolute;left:0;right:0;height:clamp(40px,7vw,110px);pointer-events:none;z-index:1;overflow:hidden}
.wave svg{width:100%;height:100%;display:block}
.wave-top{top:-1px;transform:rotate(180deg)}
.wave-bottom{bottom:-1px}
section.has-wave-top{padding-top:calc(var(--section-pad-v) + clamp(20px,3.5vw,55px))}
section.has-wave-bottom{padding-bottom:calc(var(--section-pad-v) + clamp(20px,3.5vw,55px))}

/* ---------- PHOTO CLUSTER (split sections) ----------
   Main 4:5 photo + smaller overlapping landscape photo, framed in
   the section background color. Both use the System 4 reveal. */
.photo-cluster{position:relative;margin-bottom:clamp(28px,6vw,56px)}
.photo-cluster .pc-main{aspect-ratio:4/5;max-height:520px}
.photo-cluster .pc-sub{position:absolute;bottom:-9%;left:-6%;width:52%;aspect-ratio:4/3;
  border:6px solid var(--color-bg-light);border-radius:24px;box-shadow:0 18px 50px rgba(20,35,28,.18)}
.js .photo-cluster .pc-sub{clip-path:inset(14% 16% 14% 16% round 18px)}
.dark .photo-cluster .pc-sub{border-color:var(--color-bg-dark)}
@media(max-width:840px){.photo-cluster .pc-sub{left:0}}

/* ---------- CARD LOGO BADGE (treatment + team cards) ----------
   Circular brand badge bridging the photo and the card body,
   echoing the WP original's notch badge. */
.card-badge{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;
  border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(20,35,28,.18);
  display:flex;align-items:center;justify-content:center;z-index:2}
.card-badge i{width:24px;height:24px;border-radius:7px;background:var(--color-accent);position:relative}
.card-badge i::after{content:'';position:absolute;inset:6px;border:2px solid #fff;border-radius:50%;
  border-bottom-color:transparent;transform:rotate(45deg)}
.tcard .body,.mcard .body{position:relative}
.tcard .body.has-badge,.mcard .body.has-badge{padding-top:34px}

/* ---------- TINTED ROUNDED PANEL (07 body areas) ---------- */
.areas-panel{background:rgba(75,160,191,.07);border-radius:clamp(22px,3vw,36px);
  padding:clamp(22px,4vw,56px);margin-top:clamp(24px,3.5vw,44px)}
.areas-panel .areas-head{margin-top:0}

/* ---------- FULL-WIDTH PHOTO BAND (movement health) ---------- */
.photo-band{position:relative;border-radius:clamp(20px,2.5vw,28px);overflow:hidden;
  padding:clamp(44px,7vw,90px) clamp(24px,4.5vw,64px);color:var(--color-ink-dark)}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo-band::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,16,9,.82) 10%,rgba(8,16,9,.45) 60%,rgba(8,16,9,.25))}
.photo-band>*:not(img){position:relative;z-index:2}
.photo-band .movelinks a{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);box-shadow:none}
.photo-band .movelinks a:hover{background:rgba(255,255,255,.24)}

/* ============================================================
   GOOGLE REVIEWS WALL (light section; cards fed by
   assets/data/reviews.json via initReviews in app.js)
   ============================================================ */
.section-reviews{overflow:hidden}
.reviews-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,7rem);align-items:center}
.reviews-hero h2{margin-top:18px}
.reviews-hero .t-body{margin:1.4rem 0 2.4rem;max-width:40ch}
.reviews-aggregate{display:flex;align-items:center;gap:.75rem;margin-top:2rem;padding-top:1.6rem;
  border-top:1px solid rgba(20,35,28,.12)}
.reviews-agg-stars{display:inline-flex;gap:2px}
.rev-agg-star{width:14px;height:14px;fill:#FBBC04}
.reviews-agg-text{font-size:.85rem;opacity:1;font-weight:600}
.reviews-wall{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  height:clamp(560px,72vh,820px);overflow:hidden;position:relative;
  mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 93%,transparent 100%)}
.reviews-col{display:flex;flex-direction:column;gap:12px;will-change:transform}
.review-card{background:#fff;border-radius:18px;padding:1.1rem;flex:none;width:100%;
  font-family:var(--font-body);box-shadow:0 1px 6px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05)}
.review-card-header{display:flex;align-items:center;gap:.7rem;margin-bottom:.65rem}
.review-avatar-wrap{position:relative;flex:none}
.review-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;background:#E0DDD8}
.review-avatar-initial{display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  font-weight:600;color:#fff;user-select:none}
.review-g-badge{position:absolute;bottom:-2px;right:-3px;width:16px;height:16px;background:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.review-g-badge svg{width:10px;height:10px}
.review-name{display:block;font-size:.88rem;font-weight:600;color:#1A1A1A;line-height:1.3}
.review-date{display:block;font-size:.72rem;color:#77716D;margin-top:.1rem}
.review-stars{display:flex;gap:2px;margin-bottom:.55rem}
.review-star{width:11px;height:11px;fill:#FBBC04}
.review-star-empty{fill:#D9D5D0}
.review-text{font-size:.84rem;line-height:1.55;color:#2A2520;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.4rem}
.review-read-more{display:block;font-size:.73rem;color:#77716D;cursor:default}
@media(max-width:1024px){
  .reviews-shell{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
  .reviews-wall{height:clamp(400px,52vh,520px)}
}
@media(max-width:600px){
  .reviews-wall{display:block;height:auto;padding:6px 0;
    mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%)}
  .reviews-col{flex-direction:row;gap:10px}
  .review-card{width:clamp(260px,78vw,300px);flex:none}
  #reviews-col-b{display:none}
}

/* ---------- ELFSIGHT EMBED (09 testimonials) ---------- */
.elfsight-wrap{margin-top:clamp(32px,4vw,50px);min-height:120px}
/* When the Elfsight script is blocked (ad/tracker blockers, strict browser
   privacy modes) or never renders, app.js fills the wrapper with the same
   Google-style review cards the chapter 03 wall uses, so the section is never
   an empty gap. Full cards here, not the wall's 2-line clamp. */
.reviews-fallback{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.reviews-fallback{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.reviews-fallback{grid-template-columns:minmax(0,1fr)}}
.reviews-fallback .review-card{width:auto}
.reviews-fallback .review-text{display:block;-webkit-line-clamp:unset;overflow:visible;margin-bottom:0}
.reviews-fallback .review-read-more{display:none}

/* ---------- GSAP-OFF FALLBACK ----------
   systems.js adds .gsap-off to <html> when the GSAP CDN fails to
   load; every .js-gated hidden state renders in its final position
   so content is never invisible. Mirrors the reduced-motion block. */
.js.gsap-off [data-reveal],.js.gsap-off [data-load]{opacity:1;transform:none}
.js.gsap-off .hero h1 .ch{opacity:1;transform:none;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8}
.js.gsap-off .way .rule{transform:scaleX(1)}
.js.gsap-off .img-reveal{clip-path:none}
.js.gsap-off .img-reveal img{transform:none}
.js.gsap-off .photo-cluster .pc-sub{clip-path:none}
.js.gsap-off .mnav .mitem{opacity:1;transform:none}
.js.gsap-off .inner-hero h1 .line-inner{transform:none}

/* ---------- EXPANDED HIT AREAS (44px tap targets) ----------
   Small chrome text links keep their visual size but gain an
   invisible touch area. position:relative is layout-neutral here. */
.topbar a,.crumb a,.tlink,.nav-phone,.logo{position:relative}
.topbar a::before,.crumb a::before,.tlink::before,.nav-phone::before,.logo::before{
  content:'';position:absolute;top:-12px;bottom:-12px;left:-6px;right:-6px}

/* ============================================================
   ACCESSIBILITY REMEDIATION (WCAG 2.1 AA pass)
   ============================================================ */

/* ---------- VISUALLY-HIDDEN UTILITY ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- SKIP LINK ---------- */
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--color-bg-dark);
  color:var(--color-ink-dark);padding:14px 22px;border-radius:0 0 10px 10px;
  font-weight:700;font-size:.92rem;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:0}

/* ---------- FOCUS-VISIBLE (every interactive element gets a visible indicator) ----------
   3:1 against both light and dark section backgrounds. Outline (not box-shadow) so it
   never gets clipped by overflow:hidden ancestors (.img-reveal, .car, .mnav, etc). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--color-accent-dim);outline-offset:3px;border-radius:3px}
.dark a:focus-visible,.dark button:focus-visible,.dark [tabindex]:focus-visible,
footer a:focus-visible,.mnav a:focus-visible,.mnav button:focus-visible,
.topbar a:focus-visible,.topbar select:focus-visible,.offer a:focus-visible,
.offer button:focus-visible{outline-color:#fff}
.btn:focus-visible{outline-offset:4px}
/* form field: the sliding underline already communicates focus, but an outline is
   required for keyboard users who don't have fine enough vision to track a 2px line */
.field input:focus-visible{outline:2.5px solid var(--color-accent-dim);outline-offset:2px;border-radius:4px}
.dark .field input:focus-visible{outline-color:var(--color-accent)}
/* burger / close / dots / cards: default outline can clip against their own border-radius */
.burger:focus-visible,.mnav .close:focus-visible{outline-offset:2px}
.mdot:focus-visible{outline:2.5px solid #fff;outline-offset:2px}
.acard:focus-visible,.tcard:focus-visible,.mcard:focus-visible,.bcard:focus-visible,
.pillar:focus-visible,.fav:focus-visible,.loc-card:focus-visible,.doc-card:focus-visible,
.qcard:focus-visible{outline:2.5px solid var(--color-accent-dim);outline-offset:2px}

/* ---------- NO-JS FALLBACKS ----------
   html.js is only added by the inline bootstrap script; if JS never runs (disabled,
   blocked, or fails before that point) these rules keep every page fully readable
   and operable. Scoped to :not(.js) so a working JS session renders pixel-identical
   to before this pass. */
html:not(.js) .burger{display:none}
html:not(.js) .nav-links{display:flex !important;flex-wrap:wrap;row-gap:8px;padding:12px 0}
html:not(.js) .nav-phone{display:inline-flex !important}
html:not(.js) .mnav{display:none}
/* multi-step form: without JS there is no click handler to advance steps or submit,
   so every step must render at once as a single flat form, with a real submit button
   in place of the JS-only Continue/Back controls. */
html:not(.js) .ms-step{display:block !important;animation:none !important}
html:not(.js) .ms-nav,html:not(.js) .fm-progress{display:none}
.ms-native-submit{display:none}
html:not(.js) .ms-native-submit{display:inline-flex}
/* odometer stats (home): JS builds the rolling digits: it's the only thing shown
   with .js. Without it, the plain figure below is what carries the value. */
.odo-fallback{display:block;font-family:var(--font-display);font-variation-settings:'opsz' 144,'wght' 420;
  font-size:clamp(2.6rem,5vw,4rem);font-variant-numeric:tabular-nums;color:var(--color-accent-dim)}
.js .odo-fallback{display:none}

/* ---------- CONTRAST FIXES (utility colors, not brand tokens - see report for the
   brand-derived tokens flagged for client approval instead of changed here) ---------- */
:root{--color-error:#C0472F;--color-error-dark:#CD6C59}
.field .err{color:var(--color-error)}
.dark .field .err{color:var(--color-error-dark)}
.dark .field.error input{border-bottom-color:var(--color-error-dark)}
/* .card-light reuses dark-card .go styling (light accent-on-dark) verbatim; on a
   white card that same accent fails 4.5:1, so it needs the same light-bg swap the
   rest of the card already gets (.tlink does this same accent -> accent-dim swap
   by background context elsewhere in this file). */
.card-light .go{color:var(--color-accent-dim)}

/* ---------- REDUCED MOTION (all seven systems fall back) ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-load]{opacity:1;transform:none}
  .js .hero h1 .ch{opacity:1;transform:none;font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8}
  .js .way .rule{transform:scaleX(1)}
  .js .img-reveal{clip-path:inset(0 0 0 0 round 22px)}
  .js .tcard .img-reveal,.js .mcard .img-reveal{clip-path:inset(0 0 0 0 round 0)}
  .js .img-reveal img{transform:none}
  .js .mnav .mitem{opacity:1;transform:none}
  .mdot.active::after{animation:none;opacity:.5}
  .dock,.dock .dot::after{transition:none;animation:none}
  .ms-step.active,.ms-done.show{animation:none}
  .faq-a{transition:none}
  .hud .hr i{transition:none}
  .js .photo-cluster .pc-sub{clip-path:inset(0 0 0 0 round 18px)}
  .reviews-col{will-change:auto;overflow-y:auto;max-height:100%}
  /* generic backstop: catches anything above missed and any future addition */
  *,*::before,*::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* ---------- HIRING BAR (above the header; scrolls away, header still sticks) ---------- */
.hiring-bar{display:block;background:var(--color-red-text);color:#fff;text-align:center;text-decoration:none;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;padding:8px var(--section-pad-h,16px);line-height:1.35}
.hiring-bar strong{font-weight:700}
.hiring-bar:hover,.hiring-bar:focus-visible{background:var(--color-accent-2)}
.hiring-bar:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* ---------- CHAT WIDGET vs MOBILE MENU / FORMS ----------
   initChatWidget (systems.js) adds .chat-off to <html> while the mobile
   menu is open, and on phones while a form's Continue / Submit is on
   screen; an active conversation is never hidden. */
html.chat-off chat-widget:not([data-active="true"]){display:none!important}

/* ---------- MOBILE READABILITY + TAP TARGETS (pre-launch QA 2026-10-14) ----------
   Phones only: sentence text at 16px minimum, and every chrome link/button
   at least 44px tall (WCAG 2.5.5 target size). Inline links inside running
   text are exempt and keep their size. */
@media (max-width:640px){
  :root{--topbar-h:44px}
  main p,.review-text,.acard p,.phase p,.bcard p,.callout p,.tcard .body p,.ecite,.avail-note span,
  .foot-grid p,.floc div,.floc a,.bm-list a,.trust-list li,.gbadge span{font-size:1rem!important;line-height:1.6}
  .field .err,.foot-bottom span,.crumb .cur{font-size:.875rem!important}
  .topbar .loc,.topbar select,.topbar .right a:not(.mail){min-height:44px;display:inline-flex;align-items:center}
  .topbar .right a{white-space:nowrap}
  /* the page's last row scrolls clear of the dock, back-to-top and chat launcher */
  footer{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .hiring-bar{min-height:44px;display:flex;align-items:center;justify-content:center}
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .floc a{display:inline-flex;align-items:center;min-height:44px}
  .floc div{line-height:1.5}
  .foot-soc a{display:inline-flex;align-items:center;min-height:44px}
  .foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
  .car-arrow{width:44px;height:44px}
  .taglinks a,.area-chips a{min-height:44px;display:inline-flex;align-items:center}
  .bm-list{gap:0 18px}
  .bm-list a{display:inline-flex;align-items:center;min-height:44px}
  a.tlink,.acard .tlink{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- MOBILE READABILITY + TAP TARGETS, round 2 (pre-launch QA 2026-11-07) ---------- */
/* breadcrumb links ("Home", "Blog", "Staff") are 24-32px wide: widen the
   invisible hit area to 44px everywhere (gap + separator keep them apart) */
.crumb a::before{left:-10px;right:-10px}
@media (max-width:640px){
  /* footer copyright, current-crumb title, booking-section hours, service chips, text links */
  .foot-bottom span,.crumb .cur,.hoursbox,.hoursbox .row span,.movelinks a,a.tlink{font-size:1rem!important}
  /* small uppercase section labels */
  .way{font-size:.8125rem}
  /* location-page phone / email / address links: 24px tall -> 44px */
  .loc-info a.li-val{min-height:44px!important}
}