/* ============================================================
   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:      #3158D8;   /* primary brand - Rutherford PT logo blue */
  --color-accent-dim:  #2448BC;   /* darker hover variant */
  --color-accent-light:#6985E2;   /* lighter tint for on-dark text - WCAG contrast on bg-dark/bg-darkest */
  --color-accent-2:    #133A5E;   /* secondary - deep navy default (already blue-hued, kept) */
  --color-bg-light:    #F6F5F1;   /* warm light background */
  --color-bg-dark:     #090E20;   /* near-black navy-tinted dark (re-derived from accent hue) */
  --color-bg-darkest:  #050812;   /* footer (re-derived from accent hue) */
  --color-ink-light:   #14231C;   /* text on light */
  --color-ink-dark:    #EFF2EF;   /* text on dark */
  /* brand-derived tints - re-derive from --color-accent per client */
  --accent-soft:       rgba(49,88,216,.12);   /* chips, active fills */
  --accent-glow:       rgba(49,88,216,.32);   /* button/card glow shadows */
  --offer-grad-2:      #121D91;               /* offer gradient end */
  --offer-tint:        #BEC9EF;               /* offer accent text */
  --font-display:      'Fraunces', serif;
  --font-body:         'Hanken Grotesk', sans-serif;
  --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;
}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
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}

/* ---------- ACCESSIBILITY: FOCUS VISIBILITY ----------
   No rule anywhere in this codebase removes the UA outline, but the
   default outline reads poorly against pill buttons, dark sections and
   photo backgrounds. This is an authorized visual exception (strengthen
   focus indicators) - a custom, high-contrast ring that meets 3:1 against
   every background this template uses, light and dark alike. */
:focus{outline:none}
:focus-visible{outline:3px solid var(--color-accent-dim);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.offer :focus-visible,footer :focus-visible{outline-color:#fff}
.btn:focus-visible,.dock a:focus-visible{outline-color:#fff;outline-offset:4px;box-shadow:0 0 0 3px var(--color-accent-2)}
/* sits over an arbitrary photograph, so a single-color ring can't guarantee
   3:1 against every background it lands on - a white+navy two-tone halo does */
.mdot:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--color-accent-2)}

/* ---------- ACCESSIBILITY: SKIP LINK ---------- */
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:var(--color-accent-2);color:#fff;
  padding:14px 22px;border-radius:10px;text-decoration:none;font-weight:700;font-size:.9rem;
  transition:top .2s ease-out}
.skip-link:focus{top:12px}

/* ---------- ACCESSIBILITY: SCREEN-READER-ONLY TEXT ---------- */
.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}
.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}
h1,h2,h3{font-family:var(--font-display);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}
.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-light)}
/* QA FIX (client-fix pass, item 11): Fraunces renders oldstyle (non-lining)
   figures by default at this weight/optical-size combo, so digits like
   0/2 sit at x-height while 1/3 carry ascenders/descenders - the numerals
   in a "01" / "02" / "03" sequence visibly differ in height even though
   font-size is identical. Forcing lining figures makes every digit share
   the same cap-height. Applies to every Fraunces display-numeral class
   sitewide (.way .num, .phase .pnum, .stat .odo, .bcard .bnum,
   .landing-grid .lnum). */
.way .num{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 500;font-size:.86rem;
  font-variant-numeric:lining-nums tabular-nums}
.way .rule{height:1px;background:currentColor;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);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-accent-dim);box-shadow:0 12px 36px var(--accent-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-light)}

/* ---------- 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;padding:9px 0}
.topbar .shell{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 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}
.topbar .soc a{position:relative;display:inline-block}
.topbar .soc a::before{content:'';position:absolute;top:-15px;bottom:-15px;left:-15px;right:-15px}
@media(max-width:820px){.topbar .locinfo,.topbar .soc,.topbar .mail{display:none}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;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:72px}
.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 img{height:64px;width:auto;display:block}
footer .logo img{height:50px}
.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-links .drop-menu li.drop-all{margin-top:6px;padding-top:8px;border-top:1px solid rgba(20,35,28,.1)}
.nav-links .drop-menu li.drop-all a{font-weight:700;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}
  .logo img{height:44px}
}
.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:center;padding:0 32px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mnav.open{transform:none}
.mnav a{display:block;text-decoration:none;font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 480;font-size:clamp(1.8rem,7vw,2.6rem);
  padding:12px 0}
.js .mnav a{opacity:0;transform:translateY(24px)}
.mnav .msub{font-size:clamp(1.05rem,4.5vw,1.3rem);opacity:.75;padding:8px 0 8px 22px}
.mnav .msub-all{opacity:1;color:var(--color-accent-light);font-weight:700}
.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}
.hero .shell{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,70px);align-items:start}
@media(max-width:880px){.hero .shell{grid-template-columns:1fr}}
.hero h1{font-variation-settings:'opsz' 144,'wght' 560,'SOFT' 8;
  font-size:clamp(2.8rem,8vw,6.5rem);line-height:1.02;margin-top:22px}
.hero h1 .word{display:inline-block;white-space:nowrap;margin-right:.24em}
.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}
.hero-photo{margin-top:30px;aspect-ratio:16/10;max-width:520px}
@media(max-width:640px){.hero-photo{display:none}}
.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}
.trust-badges{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:.84rem;font-weight:600;line-height:1.4}
.trust-badges img{height:92px;width:auto;display:block;flex-shrink:0}

/* ---------- 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-accent);border-radius:3px;
  transition:width .55s cubic-bezier(.22,1,.36,1)}
/* ACCESSIBILITY FIX: opacity .6 measured 4.36:1 on white (needs 4.5:1);
   .7 matches the site's existing .muted convention and passes at 6.05: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}
/* ACCESSIBILITY FIX: step-hiding must be gated on html.js like every other
   hidden-by-default state. Un-gated, a no-JS visitor saw only step 0 (the
   .active step baked into the markup) and had no way to reach phone, email,
   consent or the submit button - the highest-risk surface on the site was
   silently broken with JS off. With JS off, all five steps now render
   stacked as one flat form; the Continue/Back buttons remain but merely
   sit inert (see the real type="submit" button below for the no-JS path). */
.js .ms-step{display:none}
.js .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)}
/* ACCESSIBILITY FIX: opacity .5 measured 3.22:1 on white (needs 4.5:1) for
   the idle floating-label state; .65 passes at 5.12:1 with only a modest
   darkening, still clearly lighter than the focused/filled state below */
.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-light)}
.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}
/* ACCESSIBILITY FIX: opacity .55 measured 3.74:1 on the white form card
   (needs 4.5:1); .68 passes at 5.66:1 (also safe on the dark card variant) */
.ms-back{background:none;border:0;font-family:var(--font-body);font-size:.84rem;font-weight:600;
  opacity:.68;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)}
/* ACCESSIBILITY FIX: opacity .55 measured 3.74:1 on white (needs 4.5:1);
   .68 passes at 5.66:1 */
.ms-summary .row span:first-child{opacity:.68}
.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}
.lsvt-videos{display:flex;flex-direction:column;gap:16px}
.lsvt-videos video{width:100%;border-radius:24px;display:block;background:#000}
.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)}
  /* QA FIX (Pass 4 grid-integrity audit): .cols-3 used a fixed 3-column grid.
     Most .cols-3 rows are exactly 3 items (fine either way), but the homepage
     team preview and /staff/ team grid carry 7 providers/staff (team was
     resized from the template default of 3) - repeat(3,1fr) left-packed the
     7th card alone in a 3rd row with two phantom empty cells beside it. Flex
     + wrap + center sizes to the real item count and centers any remainder
     row regardless of how the team count changes later. */
  .car.cols-3{display:flex;flex-wrap:wrap;justify-content:center}
  .car.cols-3>*{flex:0 1 calc((100% - 32px)/3)}
}
@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}
  .car::-webkit-scrollbar{display:none}
  .car>*{scroll-snap-align:center}
}
.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-accent);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(49,88,216,.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}
.dark .tcard .go{color:var(--color-accent-light)}
.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,1fr));
  gap:clamp(18px,3vw,32px);margin-top:clamp(34px,5vw,54px)}
.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);
  font-variant-numeric:lining-nums tabular-nums}
.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}
/* ACCESSIBILITY FIX: opacity .6 measured 4.36:1 on white (needs 4.5:1);
   .7 matches the site's existing .muted convention and passes at 6.05:1 */
.mcard .pos{font-size:.86rem;opacity:.7;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-family:inherit;padding:0;line-height:1;
  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-accent);opacity:0}
.mdot.active{background:var(--color-accent);border-color:var(--color-accent);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(49,88,216,.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);color:#fff}
.acard h3{font-size:1rem;font-variation-settings:'opsz' 50,'wght' 560}
/* ACCESSIBILITY FIX: opacity .6 measured 4.36:1 on white (needs 4.5:1);
   .7 matches the site's existing .muted convention and passes at 6.05:1 */
.acard p{font-size:.79rem;line-height:1.55;opacity:.7;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}
/* ACCESSIBILITY FIX: opacity .6 measured 4.23:1 on this band's near-white
   background (needs 4.5:1); .7 passes at 4.95:1 */
.bm-list a{opacity:.7;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}
.logos{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);align-items:center;justify-content:center;
  margin-top:26px}
/* ACCESSIBILITY FIX: opacity .42 measured 2.54:1 on this band's near-white
   background (needs 4.5:1 - these are plan/carrier names, real information,
   not a logo-exempt wordmark). .65 is the minimum that clears 4.5:1 (4.95:1) */
.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:.65;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)}
.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 ----------
   QA FIX (Pass 4 grid-integrity audit): was repeat(auto-fit,minmax(160px,1fr)),
   a grid built for the template's default 3 stats. With the stats-row now
   legitimately holding 1 verified stat (Recovery Programs / Happy Patients
   removed, no verified counts in intake), auto-fit still allocated the extra
   empty tracks and left-packed the single stat with dead space to its right.
   flex sizes to the real item count with no phantom tracks, and reflows
   cleanly if verified stats are added back later. */
.stats-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,56px);margin-top:clamp(30px,4vw,46px)}
.stats-row .stat+.stat{padding-left:clamp(28px,5vw,56px);border-left:1px solid rgba(20,35,28,.14)}
@media(max-width:640px){
  .stats-row{flex-direction:column;align-items:flex-start;gap:22px}
  .stats-row .stat+.stat{padding-left:0;padding-top:22px;border-left:0;border-top:1px solid rgba(20,35,28,.14)}
}
.stat-badge{display:flex;flex-direction:row;align-items:center;gap:16px;text-align:left}
.stat-badge img{height:clamp(64px,8vw,88px);width:auto;flex-shrink:0}
.stat-badge .badge-text{font-family:var(--font-body);font-size:.86rem;font-weight:700;
  line-height:1.4;max-width:20ch;color:var(--color-ink-light)}
.stat-badge .badge-text .muted{display:block;font-weight:500;margin-top:3px}
.stat .odo{display:flex;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:lining-nums tabular-nums;letter-spacing:-.02em;color:var(--color-accent-dim)}
/* .odo-value is the real visible/AT-readable value; once JS builds the
   decorative rolling columns (.odo-built) it's visually hidden but stays
   in the accessible tree - the animated columns are aria-hidden instead */
.odo-built .odo-value{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stat .odo .slot{height:1em;overflow:hidden;line-height:1}
.stat .odo .slot+.slot{margin-left:-.18em}
.stat .odo .col{display:block;will-change:transform}
.stat .odo .col span{display:block;height:1em;line-height:1}
.stat .odo .suffix{font-size:.5em;margin-left:2px;color:var(--color-accent)}
/* 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}
/* ACCESSIBILITY FIX: opacity .55 measured 3.74:1 on white (needs 4.5:1);
   .68 passes at 5.66:1 */
.stat .slabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  opacity:.68;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-light)}
.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:2px;font-size:.92rem}
.hoursbox .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.12)}
.hoursbox .row span:first-child{opacity:.6;min-width:9ch;flex-shrink:0}
.hoursbox .row span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.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}

/* ---------- 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-light)}
.floc div{font-size:.88rem;line-height:1.75;opacity:.75;margin-top:12px}
.floc a{text-decoration:none}
.foot-soc{display:flex;gap:14px;margin-top:18px;font-size:.8rem;opacity:.7}
.foot-soc a{text-decoration:none;position:relative;display:inline-block}
.foot-soc a::before{content:'';position:absolute;top:-15px;bottom:-15px;left:-8px;right:-8px}
.foot-bottom{margin-top:clamp(36px,5vw,54px);padding:20px 0;border-top:1px solid rgba(255,255,255,.08);
  font-size:.76rem;opacity:.65;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot-bottom a{opacity:1}

/* ---------- 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;background:var(--color-accent);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}}

/* ============================================================
   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(49,88,216,.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:.75}
.reviews-agg-text strong{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}
/* ACCESSIBILITY FIX: #8C8580 measured 3.63:1 on the white card (needs 4.5:1
   at this size). Darkened to the nearest passing shade (5.17:1); brand
   color, not a token, so no client sign-off needed for this one. */
.review-date{display:block;font-size:.72rem;color:#736C66;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:#736C66;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}

/* ---------- 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 a{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}

/* ---------- REDUCED MOTION (all seven systems fall back) ---------- */
@media (prefers-reduced-motion: reduce){
  /* universal backstop: stops any animation/transition this stylesheet
     doesn't explicitly know about. The system-specific rules below are
     what actually reveals JS-hidden content; this alone is not enough. */
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  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 a{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%}
}