/* ============================================================
   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:      #55B84D;   /* primary brand - sampled from client logo */
  --color-accent-dim:  #35792F;   /* darker hover/text variant - deepened past a naive HSL darken to clear 4.5:1 on --color-bg-light */
  --color-accent-2:    #134985;   /* secondary - sampled from client logo */
  --color-bg-light:    #F6F5F1;   /* warm light background */
  --color-bg-dark:     #0E1B0D;   /* near-black, re-hued to brand green (S/L kept from template default) */
  --color-bg-darkest:  #091008;   /* footer, re-hued to brand green (S/L kept from template default) */
  --color-ink-light:   #14231C;   /* text on light */
  --color-ink-dark:    #EFF2EF;   /* text on dark */
  /* brand-derived tints - re-derived from --color-accent */
  --accent-soft:       rgba(85,184,77,.12);   /* chips, active fills */
  --accent-glow:       rgba(85,184,77,.32);   /* button/card glow shadows */
  --offer-grad-2:      #145A0E;               /* offer gradient end */
  --offer-tint:        #95E08F;               /* 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;
  /* AA-safe strong-accent for small UI (focus underline, progress fills): accent-dim
     reads 4.90:1 on the light background but only 1.69:1 on the navy .dark background,
     so this token re-points to the .dark-scope accent override (already tuned to clear
     4.5:1 there) wherever a component can render in either context. */
  --ui-strong:         var(--color-accent-dim);
}

/* ---------- 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}
.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")}

/* ---------- ACCESSIBILITY UTILITIES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:16px;z-index:999;background:var(--color-accent-2);
  color:#fff;padding:14px 24px;border-radius:0 0 10px 10px;font-weight:700;font-size:.92rem;
  text-decoration:none;transition:top .25s ease}
.skip-link:focus{top:0}
.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}
/* client-requested: every dark section uses the logo's dark blue, not the
   default green-black. Lift --color-accent's lightness in this scope so
   green text/icons still clear 4.5:1 on navy (default accent is only 3.6:1).
   #85CC7F cleared the plain navy (4.72:1) but only reached 4.15:1 once a
   card's translucent white fill lightens the navy underneath it (e.g. the
   treatments cards' "Learn More" links), so this is a shade brighter. */
.dark{background:var(--color-accent-2);color:var(--color-ink-dark);--color-accent:#9BDA95;--ui-strong:#9BDA95}
.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)}
.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:var(--color-ink-light);
  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}
/* white-on-accent measured 2.52:1 (fails AA 4.5:1 for normal text); ink-light on the
   same accent fill measures 6.49:1. Fixes contrast without touching the brand swatch
   used everywhere else as a background/decorative color. */
.btn:hover{background:var(--color-accent-dim);color:#fff;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)}

/* ---------- 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}
/* clinic-wide.webp is a wide two-person establishing shot with Dr. Kavitha
   positioned at the left edge; center-cropping it into any narrower
   container (square gallery tiles, the homepage photo band) crops her
   out entirely. Bias the crop left wherever this specific photo is used. */
img[src$="clinic-wide.webp"]{object-position:left center}
.js .img-reveal img{transform:scale(1.28);will-change:transform}

/* ---------- TOP BAR (multi-location) ---------- */
.topbar{background:var(--color-accent-dim);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:12px;opacity:.85}
.topbar .soc a{display:flex;align-items:center}
.topbar .soc a:hover{opacity:.8}
@media(max-width:820px){.topbar .locinfo,.topbar .soc,.topbar .mail{display:none}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--color-accent-2);color:#fff}
.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 i{width:26px;height:26px;border-radius:8px;background:var(--color-accent);position:relative;flex-shrink:0}
.logo i::after{content:'';position:absolute;inset:7px;border:2.5px solid #fff;border-radius:50%;border-bottom-color:transparent;transform:rotate(45deg)}
.nav-links{display:flex;gap:26px;list-style:none;font-size:.9rem;font-weight:500}
.nav-links a{text-decoration:none}
.nav-links li{position:relative}
/* dropdowns */
.nav-links .drop>a::after,.nav-links .drop>.drop-toggle::after{content:' ▾';font-size:.7em;opacity:.55}
/* the "Patient Resources" head has no page of its own (WP nav did the same);
   a real <button> replaces the old dead href="#" link so it's not a no-op
   focusable link, while :focus-within below still reveals the menu on Tab */
.drop-toggle{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-align:left;display:inline}
.nav-links .drop-menu{position:absolute;top:100%;left:-14px;min-width:230px;background:#fff;
  color:var(--color-ink-light);border-radius:14px;box-shadow:0 18px 50px rgba(20,35,28,.16);padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,transform .3s,visibility .3s}
.nav-links .drop:hover .drop-menu,.nav-links .drop:focus-within .drop-menu{
  opacity:1;visibility:visible;transform:none}
.nav-links .drop-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:.86rem}
.nav-links .drop-menu a:hover{background:var(--accent-soft);color:var(--color-accent-dim)}
.nav-phone{font-weight:700;text-decoration:none;font-size:.92rem;color:#fff}
.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:#fff;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}
}
.mnav{position:fixed;inset:0;background:var(--color-bg-dark);color:var(--color-ink-dark);z-index:70;
  display:flex;flex-direction:column;justify-content:flex-start;padding:100px 32px 60px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
/* justify-content was center: centering a variable-height panel with
   overflow-y:auto leaves the content that overflows off the TOP
   permanently unreachable by scroll (equal overflow is pushed above and
   below viewport, but native scroll only ever reaches the bottom half).
   flex-start plus real top/bottom padding keeps the whole menu scrollable
   at any expanded height. */
.mnav.open{transform:none}
.mnav a,.mnav-label,.mnav-q{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-label,.js .mnav-q{opacity:0;transform:translateY(24px)}
.mnav .msub{font-size:clamp(1.05rem,4.5vw,1.3rem);opacity:.75;padding:8px 0 8px 22px}
.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}
/* mobile nav section headings reuse the System 8 accordion (.faq-item/
   .faq-q/.faq-a) so "Services" / "What We Treat" / "Patient Resources"
   collapse like FAQ questions instead of dumping every sublink on screen
   at once. Restyled here for the dark full-screen panel. */
.mnav .faq-item{border-bottom:1px solid rgba(255,255,255,.14)}
/* .faq-q's own font rules (1rem/600/body font) sit later in the stylesheet
   than .mnav-q's, and both are single-class selectors of equal specificity,
   so .faq-q was winning the cascade and shrinking these back down to FAQ-
   answer size instead of the large nav-heading size every other top-level
   item uses. Restate the heading font here, where .mnav .faq-q's two
   classes outrank a plain .faq-q regardless of source order. */
.mnav .faq-q{width:100%;padding:12px 0;font-family:var(--font-display);
  font-variation-settings:'opsz' 90,'wght' 480;font-size:clamp(1.8rem,7vw,2.6rem);
  font-weight:400;text-align:left}
/* filled circle + a drawn chevron-down instead of the FAQ page's outlined
   "+" -> "x": the "+" text is hidden (color:transparent) and a ::before
   corner draws the chevron instead, so no markup changes are needed across
   the 57 pages that carry this nav. The existing .faq-item.open .chev
   rotate(135deg) still fires on the same element, so the chevron still
   flips to point up when a section opens. */
.mnav .faq-q .chev{border:0;background:rgba(255,255,255,.1);color:transparent;
  width:44px;height:44px;position:relative;flex-shrink:0}
.mnav .faq-q .chev::before{content:'';position:absolute;inset:0;margin:auto;
  width:9px;height:9px;border-right:2px solid var(--color-ink-dark);
  border-bottom:2px solid var(--color-ink-dark);transform:translateY(-3px) rotate(45deg);
  transition:transform .5s var(--spring)}
/* the base .faq-item.open .chev rule rotates the whole span 135deg - fine
   for the FAQ page's "+" glyph, but here it would compound with (and throw
   off-center) our own ::before rotation. Cancel that on the span itself and
   flip only the drawn chevron, down to up, between the two states. */
.mnav .faq-item.open .chev{transform:none;background:rgba(255,255,255,.16)}
.mnav .faq-item.open .chev::before{transform:translateY(3px) rotate(225deg)}
.mnav .faq-a{display:flex;flex-direction:column}

/* ---------- 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:#8A6000;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}
/* Progressive enhancement: without JS there is no stepper, so the whole
   form renders flat (every .ms-step visible at once) and the step/progress
   chrome - which only ever makes sense once JS is driving it - stays
   hidden instead of showing a misleading "Step 1 of 5" over a flat form. */
.fm-progress{display:none;align-items:center;gap:12px;margin:18px 0 22px}
.js .fm-progress{display:flex}
.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(--ui-strong);border-radius:3px;
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.fm-progress .count{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}
.ms-step{display:block}
.js .ms-step{display:none}
.js .ms-step.active{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
.ms-step + .ms-step{margin-top:22px;padding-top:22px;border-top:1px solid rgba(20,35,28,.1)}
.dark .ms-step + .ms-step{border-top-color:rgba(255,255,255,.12)}
.js .ms-step + .ms-step{margin-top:0;padding-top:0;border-top:0}
@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,.55);
  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,.55)}
.field label{position:absolute;left:2px;top:12px;opacity:.75;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(--ui-strong);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.field:focus-within .ul{transform:scaleX(1)}
.field:focus-within label,.field.filled label{top:-13px;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:1;color:var(--color-accent-dim);font-weight:700}
.dark .field:focus-within label,.dark .field.filled label{color:var(--color-accent)}
.field .err{position:absolute;left:2px;top:100%;padding-top:5px;font-size:.72rem;color:#C0472F;
  opacity:0;transition:opacity .3s}
.field.error .err{opacity:1}
.field.error input{border-bottom-color:#C0472F}
.ms-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.ms-back{background:none;border:0;font-family:var(--font-body);font-size:.84rem;font-weight:600;
  opacity:.7;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-dim);flex-shrink:0;cursor:pointer}
.btn[disabled]{opacity:.45;pointer-events:none}
.ms-done{display:none;text-align:center;padding:18px 0 6px}
.ms-done.show{display:block;animation:stepIn .5s cubic-bezier(.22,1,.36,1)}
.ms-done .ok{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--color-accent-dim);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 14px}

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

/* ---------- SYSTEM 2: SNAP CAROUSELS + CARDS ---------- */
.car-wrap{margin-top:clamp(32px,4vw,50px)}
.car{display:grid;gap:16px}
@media(min-width:768px){.car.cols-4{grid-template-columns:repeat(4,1fr)}.car.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){
  .car{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;padding:4px var(--section-pad-h) 8px;margin:0 calc(-1*var(--section-pad-h));
    scrollbar-width:none}
  .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(--ui-strong);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(85,184,77,.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:.8;line-height:1.55}
.tcard .go{margin-top:auto;padding-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent);
  display:flex;justify-content:space-between;align-items:center}

/* ---------- 4-PHASE PROGRAM ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,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:.7;margin-top:5px}
.mcard .go{margin-top:12px;font-size:.82rem;font-weight:700;color:var(--color-accent-dim)}

/* ---------- SOLO PROVIDER FEATURE CARD ----------
   Dedicated layout for single-provider clients: one wide, centered
   card, portrait beside the bio (not the multi-provider .mcard
   shrunk and centered). Internal content stays centered too. */
.solo-card{display:grid;grid-template-columns:minmax(240px,320px) 1fr;align-items:stretch;
  max-width:820px;margin:clamp(32px,4vw,50px) auto 0;background:#fff;border-radius:26px;overflow:hidden;
  text-decoration:none;color:var(--color-ink-light);box-shadow:0 24px 60px rgba(20,35,28,.12);
  transition:transform .5s var(--spring),box-shadow .5s;user-select:none}
.solo-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(20,35,28,.18)}
.solo-card:active{transform:scale(.985);transition:transform .1s}
.solo-card .solo-photo{border-radius:0;aspect-ratio:4/5}
.solo-card .solo-photo img{width:100%;height:100%;object-fit:cover}
.solo-card .solo-body{padding:clamp(28px,4vw,46px) clamp(24px,4vw,40px);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.solo-card .solo-body h3{font-size:clamp(1.4rem,2.2vw,1.7rem)}
.solo-card .solo-body .cred{font-size:.84rem;font-weight:700;letter-spacing:.06em;
  color:var(--color-accent-dim);margin-top:8px}
.solo-card .solo-body .pos{font-size:.94rem;opacity:.65;margin-top:6px}
.solo-card .solo-tag{margin-top:18px;font-size:.98rem;opacity:.8;max-width:34ch;line-height:1.55}
.solo-card .solo-body .go{margin-top:20px;font-size:.88rem;font-weight:700;color:var(--color-accent-dim)}
@media(max-width:680px){
  .solo-card{grid-template-columns:1fr;max-width:420px}
  .solo-card .solo-photo{aspect-ratio:1/1}
}
/* portrait headshot: skip the wide-photo reveal zoom/crop so the
   face isn't cut off by the generic .img-reveal treatment */
.js .solo-card .solo-photo{clip-path:none}
.js .solo-card .solo-photo img{transform:none}

/* ---------- 07 BODY AREAS (light, reference layout) ---------- */
.areas-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:16px}
@media(max-width:840px){.areas-head{grid-template-columns:1fr}}
.areas-head .sub-h{font-family:var(--font-display);font-variation-settings:'opsz' 60,'wght' 540;
  font-size:clamp(1.05rem,1.8vw,1.3rem);margin-top:16px;color:var(--color-accent-dim)}
.area-chips{display:flex;flex-wrap:wrap;gap:9px}
.area-chips a{font-size:.8rem;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:100px;
  background:#fff;box-shadow:0 3px 12px rgba(20,35,28,.07);min-height:40px;display:inline-flex;align-items:center;
  transition:transform .5s var(--spring),box-shadow .4s}
.area-chips a:hover{box-shadow:0 8px 22px rgba(20,35,28,.13)}
.area-chips a:active{transform:scale(.94);transition:transform .1s}
.areas-grid{display:grid;grid-template-columns:1fr minmax(230px,320px) 1fr;
  gap:clamp(16px,2.5vw,30px);align-items:center;margin-top:clamp(34px,5vw,54px)}
@media(max-width:920px){.areas-grid{grid-template-columns:1fr;justify-items:center}}
.model-wrap{position:relative;width:100%;max-width:320px}
.model-wrap img{width:100%;border-radius:20px}
.mdot{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;
  background:#fff;border:2px solid var(--color-accent-dim);color:var(--color-accent-dim);
  font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .35s var(--spring);
  box-shadow:0 4px 14px rgba(20,35,28,.2);z-index:2}
/* 44px hit target around the visible 26px dot */
.mdot::before{content:'';position:absolute;inset:-9px;border-radius:50%}
.mdot::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--color-accent);opacity:0}
.mdot.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-ink-light);
  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(85,184,77,.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:var(--color-ink-light)}
.acard h3{font-size:1rem;font-variation-settings:'opsz' 50,'wght' 560}
.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}
.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{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}
/* award photo needs to actually read, so it gets full opacity and real size,
   unlike the plain-text items in this row which lean deliberately quiet.
   No card/box around it - just the image, plus a caption to match the
   other items' label-under-icon rhythm. */
.award-badge{display:flex;flex-direction:column;align-items:center;gap:10px}
.award-badge img{max-height:180px;width:auto;opacity:1}
.award-badge span{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}
@media(max-width:600px){.award-badge img{max-height:140px}}
@media(max-width:600px){.logos img{max-height:104px}}
.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;letter-spacing:-.02em;color:var(--color-accent-dim)}
.stat .odo .slot{height:1em;overflow:hidden;line-height:1}
.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-dim)}
/* 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:.7;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,.55);
  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,.55);color:var(--color-accent)}
.faq-item.open .chev{transform:rotate(135deg);background:var(--accent-soft)}
.faq-a{overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.js .faq-a{height:0} /* JS-off renders answers open (auto height) */
.faq-a p{padding:0 4px 20px;font-weight:300;opacity:.75;max-width:62ch}

/* ---------- 13 APPOINTMENT (global booking section) ---------- */
.appt{background:var(--color-accent-2);--color-accent:#85CC7F}
.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:.75}
.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 h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent)}
.floc div{font-size:.88rem;line-height:1.75;opacity:.75;margin-top:12px}
.floc a{text-decoration:none}
.footlist{list-style:none;margin-top:12px}
.footlist li{margin-top:10px}
.footlist a{font-size:.88rem;opacity:.75;text-decoration:none}
.footlist a:hover{opacity:1;text-decoration:underline}
.foot-soc{display:flex;gap:14px;margin-top:18px;font-size:.8rem;opacity:.7}
.foot-soc a{text-decoration:none;display:inline-flex;align-items:center;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:var(--color-ink-light);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:var(--color-ink-light);position:relative}
.dock .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--color-ink-light);
  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 img{width:30px;height:30px;object-fit:contain}
.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(85,184,77,.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}
.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}
.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-label,.js.gsap-off .mnav-q{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}

/* ---------- KEYBOARD FOCUS INDICATOR (all interactive elements) ----------
   No visual change for mouse/touch users (:focus-visible only triggers for
   keyboard/programmatic focus). A dark ring + a light halo means at least
   one ring reads at >=3:1 against ANY section background in this template
   (light, dark, or accent-tinted), rather than picking one color that
   would fail on half the site. Placed last so it wins over the handful of
   component rules that set outline:none (.field input, .topbar select). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-ink-light);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,255,255,.9);
}
:focus:not(:focus-visible){outline:none}
/* the floating label above .field inputs lives just 13px above the input's
   own top edge; the ring above draws OUTSIDE the box by offset+width and
   would otherwise paint straight over that label whenever the field is
   focused. Pull it inside the input instead, there's no label to protect
   down there. */
.field input:focus-visible{outline-offset:-3px;box-shadow:none}

/* ---------- 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-label,.js .mnav-q{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%}
}