/* ============================================================
   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:      #3C2758;   /* primary brand - Wellsprings purple, from the logo wordmark */
  --color-accent-dim:  #2C1C41;   /* darker hover variant */
  --color-accent-2:    #3C2758;   /* secondary surfaces: top bar + offer gradient */
  --color-bg-light:    #F6F5F1;   /* warm light background */
  --color-bg-dark:     #150F1F;   /* near-black, purple-tinted */
  --color-bg-darkest:  #0C0714;   /* footer */
  --color-ink-light:   #1B1524;   /* text on light */
  --color-ink-dark:    #F2EFF5;   /* text on dark */
  /* brand-derived tints, re-derived from the purple accent */
  --accent-soft:       rgba(60,39,88,.12);   /* chips, active fills */
  --accent-glow:       rgba(60,39,88,.32);   /* button/card glow shadows */
  --offer-grad-2:      #1E1230;               /* offer gradient end */
  --offer-tint:        #CBB6E8;               /* offer accent text */
  /* QA Pass 6: --color-accent (#3C2758) on --color-bg-dark/--color-bg-darkest
     measures ~1.45:1 contrast, far under the 4.5:1 text minimum - both are
     dark purples of similar luminance. This is the same hue lightened to
     L~72% (HSL 266,42%,72%) for use as readable text/icon color on dark
     surfaces only; it measures ~7.6:1 against --color-bg-dark. Do not use
     it on light backgrounds - it is not legible there. */
  --color-accent-light: #B49AD6;
  --font-display:      'Fraunces', serif;
  --font-body:         'Hanken Grotesk', sans-serif;
  --spring:            cubic-bezier(.34,1.56,.64,1);
  /* nav height is referenced by the sticky anchor bar and the sticky
     causes-intro, so it lives here rather than as a magic number.
     84px sized to fit the two-line WELLSPRINGS / HEALTH lockup legibly. */
  --nav-h:             84px;
  --logo-h:            56px;
  --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}

/* ---------- FOCUS VISIBLE (WCAG 2.4.7 / 2.4.11) ----------
   No rule anywhere in this file may remove :focus without replacing it.
   :focus-visible keeps the ring off on mouse/touch clicks and shows it for
   keyboard use, matching every browser's own native heuristic. A plain
   :focus fallback covers the handful of older browsers without
   :focus-visible support so focus is never silently removed. */
a:focus,button:focus,input:focus,select:focus,textarea:focus,[tabindex]:focus{
  outline:2px solid var(--color-accent);outline-offset:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),
input:focus:not(:focus-visible),select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px}
/* light-on-dark surfaces: the default accent ring is too close in value to
   --color-bg-dark/--color-bg-darkest (same QA finding as --color-accent-light
   below); swap to the tuned light-purple token so the ring clears 3:1 on any
   dark section, topbar, nav dropdown-on-dark, footer or mobile-nav overlay. */
.dark a:focus-visible,.dark button:focus-visible,.dark input:focus-visible,
.dark select:focus-visible,.dark textarea:focus-visible,.dark [tabindex]:focus-visible,
footer a:focus-visible,footer button: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:var(--color-accent-light)}
/* the underline-draw link style already communicates "focused" partially via
   its own affordance, but still needs a real ring - the ring sits outside
   the expanded ::before hit area so it never clips against neighbouring text */
.tlink:focus-visible,.nav-phone:focus-visible,.crumb a:focus-visible,.logo:focus-visible{
  outline-offset:4px}

/* ---------- SKIP LINK (first focusable element on every page) ---------- */
.skip-link{position:absolute;top:-48px;left:8px;z-index:100;background:var(--color-accent);
  color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;padding:12px 20px;
  border-radius:10px;transition:top .2s ease-out}
.skip-link:focus{top:8px}

/* ---------- VISUALLY HIDDEN UNTIL FOCUSED ----------
   For controls WCAG requires (e.g. a pause control for >5s auto-moving
   content, SC 2.2.2) that the approved design has no visible affordance
   for. Fully invisible and out of the way for a sighted mouse user on a
   default browser (matches the prime directive's pixel-identical
   requirement); a real, visible, operable control for anyone who tabs to
   it. Same technique as .skip-link, generalized. */
.sr-only-focusable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:focus{position:static;display:inline-block;width:auto;height:auto;
  margin:1rem 0 0;overflow:visible;clip:auto;white-space:normal;
  background:var(--color-accent);color:#fff;font-family:var(--font-body);
  font-weight:700;font-size:.85rem;padding:10px 18px;border-radius:100px;cursor:pointer}
.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)}
.way .num{font-family:var(--font-display);font-variation-settings:'opsz' 40,'wght' 500;font-size:.86rem}
.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}
.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}}

/* ---------- 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:var(--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)}
/* Real client wordmark. The source export carried ~22% transparent padding,
   which is cropped out of the asset, so this height is all mark: the
   two-line WELLSPRINGS / HEALTH lockup needs the size to keep the second
   line legible. Sized here rather than inline so there is one place to
   change it. */
.logo img{height:var(--logo-h);width:auto;display:block;flex-shrink:0}
footer .logo img{height:calc(var(--logo-h) + 4px)}
.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:has(.view-all){margin-top:6px;padding-top:6px;border-top:1px solid rgba(20,35,28,.1)}
.nav-links .drop-menu a.view-all{color:var(--color-accent-dim);font-weight:700}
.nav-links .drop-menu a.view-all:hover{color:var(--color-accent)}
.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}
}
/* the bar and the wordmark step down together so the ratio holds */
@media(max-width:640px){
  :root{--nav-h:72px;--logo-h:46px}
}
@media(max-width:380px){
  :root{--logo-h:40px}
}
.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:safe center;padding:96px 32px 40px;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,.js .mnav-toggle{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.view-all{opacity:1;font-weight:700;margin-top:4px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.15)}
/* ---------- MOBILE NAV SUBMENUS (System 8 accordion, collapsed by default) ----------
   .mnav-toggle mirrors the top-level .mnav a look but as a real <button>
   (keyboard/AT operable); its sibling .mnav-sub starts collapsed and is
   expanded by systems.js the same way the FAQ accordion animates height. */
.mnav-toggle{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;
  color:inherit;cursor:pointer;text-align:left;font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 480;font-size:clamp(1.8rem,7vw,2.6rem);padding:12px 0}
.mnav-toggle .mchev{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);color:var(--color-accent-light);font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .45s var(--spring)}
.mnav-item.open .mchev{transform:rotate(135deg)}
.mnav-sub{overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.js .mnav-sub{height:0}
.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}
.mnav .mnav-logo{position:absolute;top:20px;left:20px}
.mnav-logo img{height:36px;width:auto}

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

/* ---------- 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)}
.fm-progress .count{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  opacity:.6;white-space:nowrap;font-variant-numeric:tabular-nums}
/* No-JS fallback: every step stays visible and stacked (a flat, fully
   fillable form) so the booking form can still be submitted natively to
   Netlify without JavaScript. Only once .js confirms the multi-step script
   is actually running does it collapse to one-question-at-a-time. */
.ms-step{display:block}
.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}
.field input:focus-visible{outline-offset:3px}
.dark .field input{border-bottom-color:rgba(255,255,255,.25)}
.field label{position:absolute;left:2px;top:12px;opacity:.5;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)}
.dark .field .ul{background:var(--color-accent-light)}
.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}
.ms-back{background:none;border:0;font-family:var(--font-body);font-size:.84rem;font-weight:600;
  opacity:.55;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:.55}
.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-5{grid-template-columns:repeat(5,1fr)}.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}
  .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(60,39,88,.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-light);
  display:flex;justify-content:space-between;align-items:center}
.tcard.card-light .go{color:var(--color-accent-dim)}

/* ---------- 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)}
.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:.6;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;
  /* .mdot is a real <button> (keyboard operability); reset native button chrome */
  padding:0;font-family:inherit;-webkit-appearance:none;appearance:none}
/* 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(60,39,88,.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;
  /* .anum is a real <button> (keyboard trigger for the card/dot pairing);
     reset native button chrome. The rest of .acard stays a plain, non-
     interactive container - only this badge and the paired .mdot are
     focusable, so no interactive element ends up nested inside another. */
  border:0;padding:0;cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none}
.acard.active .anum{background:var(--color-accent);color:#fff}
.acard h3{font-size:1rem;font-variation-settings:'opsz' 50,'wght' 560}
.acard p{font-size:.79rem;line-height:1.55;opacity:.6;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:.6;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}
.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}
.recog-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3vw,40px);margin-top:32px}
.recog-card{width:clamp(180px,20vw,230px);display:flex;flex-direction:column;align-items:center;text-align:center}
.recog-card img{width:96px;height:96px;object-fit:contain;margin-bottom:14px}
.recog-card h3{font-size:1rem;margin-bottom:6px}
.recog-card p{font-size:.86rem;opacity:.7;line-height:1.5}
.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 ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,46px)}
.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:tabular-nums;color:var(--color-accent-dim)}
.stat .odo .slot{height:1em;overflow:hidden;line-height:1}
.stat .odo .col{display:block;will-change:transform}
/* Each .slot's width is set by the widest of the 10 stacked digits (0-9),
   since all ten sit in the same .col for the roll animation - a narrow
   glyph like "1" is left-aligned in that wider box by default, reading
   as a stray gap next to it. Centering each digit in its slot fixes this
   without touching the roll mechanics. */
.stat .odo .col span{display:block;height:1em;line-height:1;text-align:center}
.stat .odo .suffix{font-size:.5em;margin-left:2px;color:var(--color-accent)}
/* No-JS fallback: the plain final number ships in the HTML so the stat is
   never an empty element without JavaScript. JS hides it the instant it
   runs (html.js is added before first paint) and builds the animated
   rolling-digit columns in its place. */
.js .odo-fallback{display:none}
/* 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:.55;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: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:#241A33}
.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-family:var(--font-body);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:6px;margin-top:10px;margin-left:-8px;font-size:.8rem;opacity:.7}
.foot-soc a{text-decoration:none;display:inline-flex;align-items:center;padding:15px 8px;min-height:44px}
.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;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}}
/* "Book Now · " reads fine at desktop widths but wraps the button to two
   lines once it competes with 16px side padding under ~480px; mobile keeps
   just the actionable half of the label. */
@media(max-width:480px){.dock .dock-prefix{display:none}}

/* ============================================================
   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:28px;height:28px;background:url("/assets/images/favicon.svg") center/contain no-repeat;
  display:block}
.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(60,39,88,.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}
/* #8C8580 measured 3.63:1 on the card's white background - below the 4.5:1
   AA minimum for this small (.72rem) text. Not a brand token (component-
   local metadata gray only), so corrected directly per the prime directive:
   darkened to #6E6862, same warm-gray hue, 5.50:1 against #fff. */
.review-date{display:block;font-size:.72rem;color:#6E6862;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}
/* same under-contrast gray as .review-date above, same fix */
.review-read-more{display:block;font-size:.73rem;color:#6E6862;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,.js.gsap-off .mnav-toggle{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){
  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,.js .mnav-toggle{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%}
}