/* typescale-v1 applied 2026-08-21 */
/* Nourd (titles) - self-hosted. Bold for headings, Heavy for the biggest/hero headings. Falls back to Montserrat. */
@font-face{font-family:'Nord Bold';src:url('../fonts/nourd_bold.woff2') format('woff2'),url('../fonts/nourd_bold.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Nord Bold';src:url('../fonts/nourd_heavy.woff2') format('woff2'),url('../fonts/nourd_heavy.ttf') format('truetype');font-weight:800 900;font-style:normal;font-display:swap;}
:root{
  --ink:#0C0E0B;            /* near-black green-tinted */
  --ink2:#14180F;
  --green:#8BD600;          /* bright lime */
  --green2:#4F9A00;         /* deep green */
  --green-deep:#1f3d0a;
  --cream:#F5F3ED;          /* light section bg */
  --cream2:#ECEAE1;
  --paper:#FFFFFF;
  --txt-dark:#14180F;
  --muted:#5b6555;          /* muted on light */
  --muted-d:#9aa896;        /* muted on dark */
  --line-d:rgba(255,255,255,.10);
  --line-l:#E3E6E0;
  --maxw:1200px;
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--cream);color:var(--txt-dark);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Nord Bold','Montserrat',sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
.eyebrow{font-family:'Montserrat';font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green2)}
.eyebrow.on-dark{color:var(--green)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat';font-weight:700;font-size:15px;padding:14px 26px;border-radius:99px;cursor:pointer;border:1.5px solid transparent;transition:.22s ease;white-space:nowrap}
.btn .ar{transition:.22s}
.btn:hover .ar{transform:translateX(4px)}
.btn-green{background:var(--green);color:#0c1a00;box-shadow:0 6px 24px rgba(139,214,0,.28)}
.btn-green:hover{background:#9ae814;box-shadow:0 10px 32px rgba(139,214,0,.4);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1d2417;transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--line-l);color:var(--txt-dark)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(0,0,0,.03)}
.btn-ghost-d{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost-d:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
.no-js [data-reveal]{opacity:1!important;transform:none!important}

/* ===== ANNOUNCEMENT BAR =====
   W2-1: topbar is position:fixed at the top so the fixed pill nav can sit
   below it without overlap. Body padding-top (set from JS) equals
   topbar height + nav height, so in-flow content clears both. */
.topbar{background:var(--ink);color:#dfeccf;font-size:13px;font-weight:600;text-align:center;padding:9px 16px;position:fixed;top:0;left:0;right:0;z-index:60}
.topbar a{color:var(--green);font-weight:700}
.topbar .dot{color:var(--green);margin:0 8px}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;transition:.3s ease}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line-l)}
.nav.scrolled .nav-links a{color:var(--txt-dark)}
.nav.scrolled .logo-txt{color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green2));display:grid;place-items:center;font-family:'Nord Bold','Montserrat';font-weight:600;color:#0c1a00;font-size:18.6px;box-shadow:0 4px 14px rgba(139,214,0,.35)}
.logo-txt{font-family:'Nord Bold','Montserrat';font-weight:600;font-size:19.5px;color:#fff;letter-spacing:-.02em;transition:.3s}
.logo-txt b{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86);transition:.2s}
.nav-links a:hover{color:var(--green)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{font-weight:700;font-size:14.5px;color:#fff;transition:.3s}
.nav.scrolled .nav-phone{color:var(--txt-dark)}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamb span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.nav.scrolled .hamb span{background:var(--ink)}
.mobile-menu{display:none}

/* ===== HERO ===== */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:88px 0 90px}
.hero .glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.hero .g1{width:760px;height:760px;top:-280px;right:-160px;background:radial-gradient(circle,rgba(139,214,0,.42),rgba(79,154,0,.12) 45%,transparent 70%);animation:drift1 14s ease-in-out infinite alternate}
.hero .g2{width:560px;height:560px;bottom:-260px;left:-160px;background:radial-gradient(circle,rgba(79,154,0,.3),transparent 70%);animation:drift2 16s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-60px,50px) scale(1.12)}}
@keyframes drift2{to{transform:translate(50px,-40px) scale(1.1)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(139,214,0,.12);border:1px solid rgba(139,214,0,.3);color:var(--green);font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:7px 14px;border-radius:99px;margin-bottom:22px}
.hero-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(139,214,0,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,214,0,.5)}70%{box-shadow:0 0 0 10px rgba(139,214,0,0)}100%{box-shadow:0 0 0 0 rgba(139,214,0,0)}}
.hero h1{font-size:clamp(34.4px,4.9vw,57.1px);font-weight:600;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--green)}
.hero .sub{font-size:clamp(13.8px,1.4vw,16px);color:#c9d3c0;max-width:520px;margin:22px 0 30px;font-weight:500;line-height:1.6}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;margin-top:40px;flex-wrap:wrap}
.hero-trust .t{display:flex;flex-direction:column;gap:3px}
.hero-trust .t b{font-family:'Nord Bold','Montserrat';font-size:21.1px;font-weight:600;color:#fff}
.hero-trust .t span{font-size:12.5px;color:var(--muted-d);font-weight:600}
.hero-trust .t .stars{color:var(--green);font-size:15px;letter-spacing:1px}
/* hero visual */
.hero-visual{position:relative}
.hero-card{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.55);aspect-ratio:4/4.4}
.hero-card img{width:100%;height:100%;object-fit:cover}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,14,11,.75));}
.hero-float{position:absolute;background:rgba(20,24,15,.82);backdrop-filter:blur(10px);border:1px solid rgba(139,214,0,.25);border-radius:16px;padding:13px 16px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.hero-float.f1{top:22px;left:-26px;animation:floaty 5s ease-in-out infinite}
.hero-float.f2{bottom:26px;right:-22px;animation:floaty 6s ease-in-out infinite .8s}
@keyframes floaty{50%{transform:translateY(-12px)}}
.hero-float .lab{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);font-weight:700}
.hero-float .val{font-family:'Nord Bold','Montserrat';font-size:19.4px;color:var(--green);font-weight:600;line-height:1.1}
.hero-float .val small{font-size:12px;color:#cdd8c3;font-weight:600}
.hero-float .bar{height:5px;width:120px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:7px;overflow:hidden}
.hero-float .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green2),var(--green))}

/* ===== CREDIBILITY MARQUEE ===== */
.cred{background:var(--ink);color:#fff;padding:0 0 8px;border-top:1px solid var(--line-d)}
.cred-row{display:flex;align-items:center;justify-content:center;gap:14px 40px;flex-wrap:wrap;padding:26px 24px;max-width:var(--maxw);margin:0 auto}
.cred-row .ci{display:flex;align-items:center;gap:10px;color:#b9c4ad;font-weight:600;font-size:14px}
.cred-row .ci svg{width:19px;height:19px;flex-shrink:0}
.cred-row .ci b{color:#fff}

/* ===== SECTION HEADERS ===== */
.sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(25.8px,3.2vw,38.6px);margin:14px 0 0}
.sec-head p{color:var(--muted);font-size:15.8px;margin-top:16px;font-weight:500}
.pad{padding:96px 0}
.pad-sm{padding:74px 0}
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-ink{background:var(--ink);color:#fff}
.bg-ink .sec-head p{color:var(--muted-d)}

/* ===== HOW IT WORKS ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:26px 22px;position:relative;transition:.25s;overflow:hidden}
.step:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,24,15,.10);border-color:rgba(79,154,0,.35)}
.step .n{font-family:'Nord Bold','Montserrat';font-size:15px;font-weight:600;color:#0c1a00;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--green2));display:grid;place-items:center;margin-bottom:18px}
.step h3{font-size:19.5px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px;font-weight:500}
.step .pho{height:150px;border-radius:13px;overflow:hidden;margin-top:18px}
.step .pho img{width:100%;height:100%;object-fit:cover}

/* ===== STICKY FEATURE ===== */
.feat{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:start}
.feat-sticky{position:sticky;top:96px;border-radius:26px;overflow:hidden;border:1px solid var(--line-d);background:var(--ink2);aspect-ratio:1/1.04;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.feat-sticky .fimg{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;transform:scale(1.04)}
.feat-sticky .fimg.on{opacity:1;transform:scale(1)}
.feat-sticky .fimg img{width:100%;height:100%;object-fit:cover}
.feat-sticky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.15),rgba(12,14,11,.65));pointer-events:none;z-index:2}
.feat-sticky .glowf{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(139,214,0,.34),transparent 70%);filter:blur(40px);bottom:-120px;left:-90px;z-index:1}
.feat-list{display:flex;flex-direction:column;gap:18px}
.fblock{padding:30px 30px;border-radius:var(--r);border:1px solid var(--line-d);background:rgba(255,255,255,.025);transition:.35s ease}
.fblock.active{background:rgba(139,214,0,.07);border-color:rgba(139,214,0,.34)}
.fblock .ic{width:46px;height:46px;border-radius:13px;background:rgba(139,214,0,.12);border:1px solid rgba(139,214,0,.28);display:grid;place-items:center;margin-bottom:16px}
.fblock .ic svg{width:23px;height:23px;stroke:var(--green)}
.fblock h3{font-size:21.1px;color:#fff;margin-bottom:9px}
.fblock p{color:var(--muted-d);font-size:15px;font-weight:500;line-height:1.6}
.fblock .more{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:700;font-size:14px;margin-top:14px;opacity:0;max-height:0;overflow:hidden;transition:.35s}
.fblock.active .more{opacity:1;max-height:30px}

/* ===== COMPARE ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:980px;margin:0 auto}
.comp-card{border-radius:var(--r);padding:34px 32px;border:1px solid var(--line-l)}
.comp-card.bad{background:#fbf1ee;border-color:#f3d9d1}
.comp-card.good{background:var(--ink);color:#fff;border-color:rgba(139,214,0,.3);box-shadow:0 24px 60px rgba(20,24,15,.18)}
.comp-card .tag{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;display:inline-block}
.comp-card.bad .tag{color:#c05a3f}
.comp-card.good .tag{color:var(--green)}
.comp-card h3{font-size:20.2px;margin-bottom:20px}
.comp-card.good h3{color:#fff}
.comp-list{display:flex;flex-direction:column;gap:14px}
.comp-list li{display:flex;gap:12px;font-size:15px;font-weight:500;list-style:none;line-height:1.5}
.comp-card.bad li{color:#7a5147}
.comp-card.good li{color:#d4ddc9}
.comp-list .ix{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.comp-card.bad .ix{background:#f0c9bd;color:#b1462b}
.comp-card.good .ix{background:rgba(139,214,0,.18);color:var(--green)}

/* ===== SERVICES ===== */
.svc-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:38px}
.svc-tab{padding:10px 20px;border-radius:99px;border:1px solid var(--line-l);background:var(--paper);font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;transition:.2s}
.svc-tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.svc:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(20,24,15,.12);border-color:rgba(79,154,0,.34)}
.svc .pho{height:188px;overflow:hidden;position:relative}
.svc .pho img{width:100%;height:100%;object-fit:cover;transition:.5s}
.svc:hover .pho img{transform:scale(1.06)}
.svc .pho .cat{position:absolute;top:12px;left:12px;background:rgba(12,14,11,.78);backdrop-filter:blur(6px);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:99px}
.svc .body{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:19.5px;margin-bottom:6px}
.svc p{color:var(--muted);font-size:14px;font-weight:500;flex:1}
.svc .pricerow{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:10px}
.svc .price{font-family:'Nord Bold','Montserrat';font-weight:600;font-size:19.4px;color:var(--txt-dark)}
.svc .price small{font-size:12.5px;color:var(--muted);font-weight:600;font-family:'Montserrat'}
.svc .go{font-weight:700;font-size:14px;color:var(--green2);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.svc:hover .go{gap:10px}
.svc-hide{display:none}

/* ===== PROTOCOL FLAGSHIP ===== */
.proto{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;background:var(--ink);border-radius:30px;padding:54px;position:relative;overflow:hidden;color:#fff}
.proto .glowp{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(139,214,0,.26),transparent 70%);filter:blur(60px);top:-200px;right:-160px}
.proto .l{position:relative;z-index:2}
.proto .pill{display:inline-block;background:var(--green);color:#0c1a00;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:99px;margin-bottom:18px}
.proto h2{font-size:clamp(25.8px,3.1vw,37px);color:#fff;margin-bottom:14px}
.proto h2 em{font-style:italic;color:var(--green)}
.proto .pp{color:#c9d3c0;font-size:16px;font-weight:500;margin-bottom:26px;max-width:480px}
.proto-incl{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;margin-bottom:30px;position:relative;z-index:2}
.proto-incl li{display:flex;gap:11px;font-size:14.5px;font-weight:600;color:#e3ead9;list-style:none;line-height:1.4}
.proto-incl .ck{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(139,214,0,.16);display:grid;place-items:center;color:var(--green);font-weight:800;font-size:12px;margin-top:1px}
.proto-price{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.proto-price .big{font-family:'Nord Bold','Montserrat';font-size:42px;font-weight:600;color:#fff;line-height:.9}
.proto-price .meta{font-size:13.5px;color:var(--muted-d);font-weight:600;padding-bottom:6px}
.proto-r{position:relative;z-index:2}
.proto-card{background:rgba(255,255,255,.05);border:1px solid rgba(139,214,0,.28);border-radius:22px;padding:28px;backdrop-filter:blur(6px)}
.proto-card h4{font-family:'Montserrat';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.proto-card .mtitle{font-family:'Nord Bold','Montserrat';font-size:23.8px;color:#fff;margin-bottom:6px}
.proto-card .mprice{font-family:'Nord Bold','Montserrat';font-size:28.6px;color:var(--green);font-weight:600;margin-bottom:4px}
.proto-card .mprice small{font-size:15px;color:#cdd8c3;font-family:'Montserrat';font-weight:600}
.proto-card .mdesc{color:#c9d3c0;font-size:14px;font-weight:500;margin-bottom:20px}
.proto-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.proto-card li{display:flex;gap:10px;font-size:14px;color:#e3ead9;font-weight:600}
.proto-card li .ck{flex-shrink:0;color:var(--green);font-weight:800}

/* ===== STATS ===== */
.statband{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:920px;margin:0 auto;text-align:center}
.statband .s b{font-family:'Nord Bold','Montserrat';font-size:clamp(37.8px,5.4vw,57.1px);font-weight:600;color:var(--green);display:block;line-height:1}
.statband .s p{color:var(--muted-d);font-weight:600;font-size:15px;margin-top:12px;max-width:240px;margin-left:auto;margin-right:auto}

/* ===== REVIEWS ===== */
.rev-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}
.rev-head .g{font-family:'Nord Bold','Montserrat';font-size:25.2px;font-weight:600}
.rev-head .stars{color:#f5b301;font-size:18.6px;letter-spacing:2px}
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px}
.vid{border-radius:18px;overflow:hidden;position:relative;aspect-ratio:9/15;border:1px solid var(--line-l);background:#000;cursor:pointer}
.vid video{width:100%;height:100%;object-fit:cover}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vid .play svg{width:48px;height:48px;opacity:.92;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.vid .nm{position:absolute;bottom:10px;left:12px;right:12px;color:#fff;font-weight:700;font-size:13px;z-index:3;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:26px 24px}
.quote .stars{color:#f5b301;font-size:15px;letter-spacing:1px;margin-bottom:12px}
.quote p{font-size:15px;font-weight:500;color:var(--txt-dark);line-height:1.6}
.quote .who{margin-top:16px;font-weight:700;font-size:14px;color:var(--muted)}
.quote .who b{color:var(--txt-dark)}

/* ===== LOCATIONS ===== */
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.loc{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:28px;transition:.25s}
.loc:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,24,15,.10);border-color:rgba(79,154,0,.34)}
.loc .pin{width:42px;height:42px;border-radius:12px;background:rgba(139,214,0,.12);display:grid;place-items:center;margin-bottom:16px}
.loc .pin svg{width:22px;height:22px;stroke:var(--green2)}
.loc h3{font-size:20.2px;margin-bottom:6px}
.loc .addr{color:var(--muted);font-size:14.5px;font-weight:500;margin-bottom:16px}
.loc a.dir{font-weight:700;font-size:14px;color:var(--green2);display:inline-flex;gap:6px;align-items:center}

/* ===== MEMBERSHIP PRICE ===== */
.price-wrap{max-width:560px;margin:0 auto}
.price-card{background:var(--paper);border:1px solid var(--line-l);border-radius:26px;padding:40px;text-align:center;box-shadow:0 24px 60px rgba(20,24,15,.10);position:relative;overflow:hidden}
.price-card .ribbon{position:absolute;top:18px;right:-42px;background:var(--green);color:#0c1a00;font-weight:800;font-size:11px;letter-spacing:.08em;padding:6px 50px;transform:rotate(45deg)}
.price-card h3{font-size:23.8px;margin-bottom:6px}
.price-card .amt{font-family:'Nord Bold','Montserrat';font-size:48.7px;font-weight:600;color:var(--txt-dark);line-height:1;margin:14px 0 4px}
.price-card .amt small{font-size:16.7px;color:var(--muted);font-weight:600;font-family:'Montserrat'}
.price-card .note{color:var(--muted);font-size:14px;font-weight:500;margin-bottom:24px}
.price-card ul{list-style:none;text-align:left;display:flex;flex-direction:column;gap:13px;margin:0 auto 28px;max-width:380px}
.price-card li{display:flex;gap:11px;font-size:15px;font-weight:600;color:var(--txt-dark)}
.price-card li .ck{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(79,154,0,.13);display:grid;place-items:center;color:var(--green2);font-weight:800;font-size:12px}
.price-card .btn{width:100%;justify-content:center}
.price-meta{display:flex;justify-content:center;gap:20px;margin-top:18px;flex-wrap:wrap}
.price-meta span{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;overflow:hidden;transition:.2s}
.qa.open{border-color:rgba(79,154,0,.4)}
.qa .q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;font-weight:700;font-size:16.5px}
.qa .q .pl{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--cream2);display:grid;place-items:center;font-size:16.7px;color:var(--green2);transition:.3s;font-weight:600}
.qa.open .q .pl{transform:rotate(45deg);background:var(--green);color:#0c1a00}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa .a p{padding:0 24px 22px;color:var(--muted);font-size:15px;font-weight:500;line-height:1.65}

/* ===== FINAL CTA ===== */
.finalcta{background:linear-gradient(135deg,var(--green2),var(--green));text-align:center;padding:90px 24px;position:relative;overflow:hidden}
.finalcta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -20%,rgba(255,255,255,.35),transparent 70%)}
.finalcta h2{font-size:clamp(27.5px,4vw,45.4px);color:#0c1a00;position:relative;max-width:760px;margin:0 auto 16px}
.finalcta p{color:#1c3306;font-weight:600;font-size:16.7px;position:relative;max-width:540px;margin:0 auto 30px}
.finalcta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ===== FOOTER ===== */
.foot{background:var(--ink);color:#fff;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot .brand{margin-bottom:16px}
.foot p.bd{color:var(--muted-d);font-size:14.5px;max-width:300px;font-weight:500}
.foot h5{font-family:'Montserrat';font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);margin-bottom:16px}
.foot a.fl{display:block;color:#cdd6c4;font-size:14.5px;font-weight:500;margin-bottom:11px;transition:.2s}
.foot a.fl:hover{color:var(--green)}
.foot-bottom{border-top:1px solid var(--line-d);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-d);font-size:13px;font-weight:500}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:440px;margin:0 auto}
  .steps{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr;gap:26px}
  .feat-sticky{position:relative;top:0;max-width:480px;margin:0 auto;aspect-ratio:16/12}
  .svc-grid{grid-template-columns:1fr 1fr}
  .proto{grid-template-columns:1fr;padding:38px 28px}
  .vids{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .locs{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .nav-links,.nav-phone{display:none}
  .hamb{display:flex}
  .pad{padding:64px 0}.pad-sm{padding:52px 0}
  .hero{padding:120px 0 64px}
  .hero-trust{gap:20px}
  .steps,.svc-grid,.compare,.proto-incl,.statband,.vids,.foot-grid{grid-template-columns:1fr}
  .statband{gap:36px}
  .compare{gap:16px}
  .proto{padding:30px 22px;border-radius:22px}
  .sec-head{margin-bottom:38px}
  .mobile-menu.show{display:block;position:fixed;inset:0;z-index:100;background:var(--ink);padding:28px 24px;animation:fade .25s}
  .mobile-menu .mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
  .mobile-menu .mm-x{font-size:25.2px;color:#fff;background:none;border:none;cursor:pointer}
  .mobile-menu a{display:block;color:#fff;font-family:'Nord Bold','Montserrat';font-size:24.6px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line-d)}
  .mobile-menu .btn{margin-top:26px;width:100%;justify-content:center}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* ============================================================
   INNER PAGE COMPONENTS (shared across all non-home pages)
   ============================================================ */

/* page hero (dark, glow) */
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:88px 0 84px}
.phero .glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.phero .pg1{width:680px;height:680px;top:-260px;right:-160px;background:radial-gradient(circle,rgba(139,214,0,.36),rgba(79,154,0,.1) 45%,transparent 70%);animation:drift1 14s ease-in-out infinite alternate}
.phero .pg2{width:480px;height:480px;bottom:-240px;left:-160px;background:radial-gradient(circle,rgba(79,154,0,.26),transparent 70%);animation:drift2 16s ease-in-out infinite alternate}
.phero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.phero.solo .phero-grid{grid-template-columns:1fr;max-width:820px;text-align:center;margin:0 auto}
.phero .crumbs{font-size:13px;font-weight:600;color:var(--muted-d);margin-bottom:18px}
.phero .crumbs a{color:var(--muted-d)}
.phero .crumbs a:hover{color:var(--green)}
.phero h1{font-size:clamp(29.2px,4.1vw,48.7px);font-weight:600;letter-spacing:-.02em;margin-bottom:18px}
.phero h1 em{font-style:italic;color:var(--green)}
.phero .lead{font-size:clamp(13.8px,1.4vw,16px);color:#c9d3c0;max-width:540px;font-weight:500;line-height:1.6}
.phero.solo .lead{margin:0 auto}
.phero .pcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.phero.solo .pcta{justify-content:center}
.phero .pricetag{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:18px}
.phero .pricetag .amt{font-family:'Nord Bold','Montserrat';font-size:clamp(34.4px,4.5vw,50.4px);font-weight:600;color:var(--green);line-height:1}
.phero .pricetag .per{font-size:15px;color:var(--muted-d);font-weight:600}
.phero .pchip{display:inline-flex;align-items:center;gap:8px;background:rgba(139,214,0,.12);border:1px solid rgba(139,214,0,.3);color:var(--green);font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:7px 14px;border-radius:99px;margin-bottom:22px}
.phero-visual{position:relative}
.phero-card{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.5);aspect-ratio:4/3.4}
.phero-card img{width:100%;height:100%;object-fit:cover}
.phero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(12,14,11,.6))}

/* generic content prose */
.prose{max-width:760px;margin:0 auto}
.prose.wide{max-width:920px}
.prose h2{font-size:clamp(22.4px,2.7vw,31.9px);margin:0 0 16px}
.prose h3{font-size:19.4px;margin:30px 0 10px}
.prose p{color:var(--muted);font-size:16.5px;font-weight:500;margin-bottom:16px;line-height:1.7}
.prose p strong{color:var(--txt-dark)}

/* two-column content block (text + image) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split.rev .split-media{order:-1}
.split-media{border-radius:22px;overflow:hidden;border:1px solid var(--line-l);aspect-ratio:4/3.2;box-shadow:0 18px 50px rgba(20,24,15,.10)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-text h2{font-size:clamp(22.4px,2.7vw,33.6px);margin-bottom:16px}
.split-text p{color:var(--muted);font-size:16.5px;font-weight:500;margin-bottom:14px;line-height:1.7}
.split-text .eyebrow{margin-bottom:14px;display:block}

/* checklist */
.checks{list-style:none;display:flex;flex-direction:column;gap:13px;margin:18px 0}
.checks li{display:flex;gap:12px;font-size:15.5px;font-weight:600;color:var(--txt-dark);line-height:1.5}
.checks .ck{flex-shrink:0;width:23px;height:23px;border-radius:50%;background:rgba(79,154,0,.13);display:grid;place-items:center;color:var(--green2);font-weight:800;font-size:12px;margin-top:1px}
.bg-ink .checks li{color:#e3ead9}
.bg-ink .checks .ck{background:rgba(139,214,0,.16);color:var(--green)}

/* feature/benefit grid */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bgrid.two{grid-template-columns:repeat(2,1fr)}
.bcard{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:28px 26px;transition:.25s}
.bcard:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,24,15,.10);border-color:rgba(79,154,0,.34)}
.bcard .ic{width:46px;height:46px;border-radius:13px;background:rgba(139,214,0,.12);border:1px solid rgba(139,214,0,.28);display:grid;place-items:center;margin-bottom:16px}
.bcard .ic svg{width:23px;height:23px;stroke:var(--green2);fill:none;stroke-width:2}
.bcard h3{font-size:18.6px;margin-bottom:8px}
.bcard p{color:var(--muted);font-size:14.5px;font-weight:500;line-height:1.6}
.bg-ink .bcard{background:rgba(255,255,255,.03);border-color:var(--line-d)}
.bg-ink .bcard h3{color:#fff}
.bg-ink .bcard p{color:var(--muted-d)}
.bg-ink .bcard .ic svg{stroke:var(--green)}

/* numbered steps (vertical) */
.vsteps{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.vstep{display:flex;gap:20px;background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:24px 26px}
.vstep .n{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--green2));display:grid;place-items:center;font-family:'Nord Bold','Montserrat';font-weight:600;color:#0c1a00;font-size:15.8px}
.vstep h3{font-size:18.6px;margin-bottom:6px}
.vstep p{color:var(--muted);font-size:15px;font-weight:500;line-height:1.6}

/* team grid */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;transition:.25s}
.tcard:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,24,15,.10)}
.tcard .ph{aspect-ratio:1/1;background:linear-gradient(160deg,#e9ece4,#d7dccf);position:relative;overflow:hidden;display:grid;place-items:center}
.tcard .ph img{width:100%;height:100%;object-fit:cover}
.tcard .ph .ini{font-family:'Nord Bold','Montserrat';font-size:47px;color:var(--green2);font-weight:600;opacity:.5}
.tcard .ph .ph-tag{position:absolute;bottom:10px;left:10px;background:rgba(12,14,11,.7);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.tcard .tb{padding:20px 22px}
.tcard h3{font-size:19.5px;margin-bottom:2px}
.tcard .role{color:var(--green2);font-weight:700;font-size:13px;margin-bottom:10px}
.tcard p{color:var(--muted);font-size:14px;font-weight:500;line-height:1.55}

/* related services strip */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel{display:flex;flex-direction:column;justify-content:space-between;gap:14px;background:var(--paper);border:1px solid var(--line-l);border-radius:16px;padding:22px;transition:.2s}
.rel:hover{border-color:rgba(79,154,0,.4);transform:translateY(-4px);box-shadow:0 14px 36px rgba(20,24,15,.08)}
.rel h4{font-size:16.7px}
.rel .rp{color:var(--muted);font-size:13.5px;font-weight:600;margin-top:4px}
.rel .go{color:var(--green2);font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center}

/* contact form */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;max-width:980px;margin:0 auto}
.cform{background:var(--paper);border:1px solid var(--line-l);border-radius:22px;padding:32px;box-shadow:0 18px 50px rgba(20,24,15,.08)}
.cfield{margin-bottom:16px}
.cfield label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.cfield input,.cfield select,.cfield textarea{width:100%;border:1.5px solid var(--line-l);border-radius:12px;padding:13px 15px;font-family:'Montserrat';font-size:15px;font-weight:500;color:var(--txt-dark);background:#fcfcfb;transition:.18s}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:none;border-color:var(--green2);background:#fff}
.cfield textarea{min-height:110px;resize:vertical}
.cinfo .ci-block{display:flex;gap:14px;margin-bottom:24px}
.cinfo .ci-ic{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:rgba(139,214,0,.12);display:grid;place-items:center}
.cinfo .ci-ic svg{width:21px;height:21px;stroke:var(--green2);fill:none;stroke-width:2}
.cinfo h4{font-size:16px;margin-bottom:3px}
.cinfo p,.cinfo a{color:var(--muted);font-size:14.5px;font-weight:500}
.cinfo a:hover{color:var(--green2)}

/* big pricing compare (one-time vs membership) */
.pcompare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto}
.pcol{border-radius:22px;padding:34px 30px;border:1px solid var(--line-l);background:var(--paper)}
.pcol.feat{background:var(--ink);color:#fff;border-color:rgba(139,214,0,.3);box-shadow:0 24px 60px rgba(20,24,15,.18)}
.pcol .tag{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pcol.feat .tag{color:var(--green)}
.pcol .amt{font-family:'Nord Bold','Montserrat';font-size:37px;font-weight:600;line-height:1;margin-bottom:6px}
.pcol.feat .amt{color:var(--green)}
.pcol .amt small{font-size:15px;color:var(--muted);font-weight:600;font-family:'Montserrat'}
.pcol.feat .amt small{color:#cdd8c3}
.pcol .sub{color:var(--muted);font-size:14px;font-weight:500;margin-bottom:20px}
.pcol.feat .sub{color:#c9d3c0}

/* insights cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;transition:.25s}
.post:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,24,15,.10)}
.post .ph{height:170px;overflow:hidden}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.post:hover .ph img{transform:scale(1.05)}
.post .pb{padding:22px}
.post .cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green2);margin-bottom:8px}
.post h3{font-size:17.7px;line-height:1.25;margin-bottom:8px}
.post p{color:var(--muted);font-size:14px;font-weight:500;line-height:1.55}

/* stat row reuse on inner pages already via .statband */
/* responsive */
@media (max-width:980px){
  .phero-grid{grid-template-columns:1fr;gap:36px}
  .phero-visual{max-width:480px}
  .split{grid-template-columns:1fr;gap:30px}
  .split.rev .split-media{order:0}
  .bgrid,.bgrid.two{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .related{grid-template-columns:1fr}
  .form-wrap{grid-template-columns:1fr;gap:28px}
  .pcompare{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .phero{padding:120px 0 60px}
  .bgrid,.bgrid.two,.team,.posts{grid-template-columns:1fr}
  .vstep{flex-direction:column;gap:12px}
  .phero .pcta{flex-direction:column}
  .phero .pcta .btn{width:100%;justify-content:center}
}

/* hero visuals animate on load (not scroll-dependent), so they never flash empty */
.heroin{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroRise{from{transform:translateY(18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.heroin{animation:none;opacity:1}}

/* sticky bottom CTA bar - REMOVED in W2-3. Rules kept here (dead block) in
   case it comes back. The markup and JS have been removed site-wide. */
/*
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(12,14,11,.93);backdrop-filter:blur(12px);border-top:1px solid rgba(139,214,0,.25);transform:translateY(115%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.stickycta.show{transform:none}
.sc-inner{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sc-text b{color:#fff;font-family:'Nord Bold','Montserrat';font-weight:600;font-size:15.8px;display:block;line-height:1.2}
.sc-text span{color:var(--muted-d);font-size:13.5px;font-weight:500}
.sc-act{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sc-x{background:rgba(255,255,255,.08);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:18.6px;line-height:1;cursor:pointer;flex-shrink:0;transition:.18s}
.sc-x:hover{background:rgba(255,255,255,.16)}
@media (max-width:680px){.sc-text span{display:none}.sc-inner{padding:10px 14px}.stickycta .btn{padding:11px 18px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}
*/

/* ===== logo + image focal points ===== */
.brand{display:flex;align-items:center;gap:10px}
.brand .logo-img{height:30px;width:auto;display:block}
.brand .logo-on-light{display:none}
.nav.scrolled .brand .logo-on-dark{display:none}
.nav.scrolled .brand .logo-on-light{display:block}
@media (max-width:680px){.brand .logo-img{height:26px}}
/* keep subjects/heads in frame on cover-cropped images */
.svc .pho img,.step .pho img,.post .ph img{object-position:center 28%}
.split-media img{object-position:center 30%}
.feat-sticky .fimg img{object-position:center 30%}
.hero-card img,.phero-card img{object-position:center 32%}

/* ============================================================
   V3 : video-match components (pill nav, drawer, full-bleed hero,
   pinned feature, value, measure accordion, carousel, rich FAQ)
   ============================================================ */

/* ---- floating pill nav (overrides earlier .nav) ----
   W2-1: the topbar is position:relative (in-flow) at the top of the
   document, and this nav is position:fixed. Without an offset the fixed
   nav paints over the topbar. We offset by --topbar-h (set from JS based
   on the real rendered height) and pad body to compensate so content is
   never hidden behind the fixed nav+topbar stack. */
.nav{position:fixed;top:var(--topbar-h,0px);left:0;right:0;z-index:50;background:transparent;border:none!important;transition:.3s ease}
.nav .nav-inner{max-width:1180px;margin:14px auto 0;padding:9px 9px 9px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(18,22,15,.55);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.10);border-radius:999px;transition:.3s ease}
.nav.scrolled{background:transparent}
.nav.scrolled .nav-inner{background:rgba(12,14,11,.82);border-color:rgba(255,255,255,.12);box-shadow:0 10px 34px rgba(0,0,0,.30)}
.nav .nav-links{display:flex;align-items:center;gap:24px}
.nav .nav-links a{font-size:14px;font-weight:600;color:rgba(255,255,255,.82)}
.nav .nav-links a:hover{color:var(--green)}
.nav.scrolled .nav-links a{color:rgba(255,255,255,.82)}
.nav .brand .logo-on-light{display:none!important}
.nav .brand .logo-on-dark{display:block!important}
.nav-phone{color:#fff!important}
.nav.scrolled .nav-phone{color:#fff!important}
/* nav consult link (W2-5): quiet ghost-style text link beside the green pill */
.nav-consult{font-size:14px;font-weight:600;color:rgba(255,255,255,.82);transition:.2s;white-space:nowrap}
.nav-consult:hover{color:var(--green)}
@media (max-width:760px){.nav-consult{display:none}}
/* menu (grid) button */
.menubtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);cursor:pointer;transition:.2s;flex-shrink:0}
.menubtn:hover{background:rgba(139,214,0,.18);border-color:rgba(139,214,0,.4)}
.menubtn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.hamb{display:none!important}
@media (max-width:760px){
  .nav .nav-links,.nav .nav-phone{display:none}
  .nav .nav-inner{margin:10px 12px 0;padding:8px 8px 8px 16px}
}

/* ---- right drawer menu ---- */
.drawer-scrim{position:fixed;inset:0;z-index:60;background:rgba(8,10,7,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.35s}
.drawer-scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,90vw);z-index:61;background:#0e1109;border-left:1px solid rgba(139,214,0,.18);
  transform:translateX(100%);transition:transform .42s cubic-bezier(.3,.8,.25,1);display:flex;flex-direction:column;padding:26px 30px 30px;overflow-y:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.drawer-top .dt-cta{display:flex;gap:10px;align-items:center}
.drawer-top .dt-cta a{font-size:13px;font-weight:700;color:var(--muted-d)}
.drawer-x{background:rgba(255,255,255,.08);border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:19.4px;line-height:1;cursor:pointer}
.drawer-x:hover{background:rgba(255,255,255,.16)}
.drawer-links{display:flex;flex-direction:column;gap:2px;margin-bottom:26px}
.drawer-links a{font-family:'Nord Bold','Montserrat',sans-serif;font-size:23.8px;font-weight:600;color:#fff;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);transition:.18s;display:flex;align-items:center;justify-content:space-between}
.drawer-links a:hover{color:var(--green);padding-left:6px}
.drawer-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.drawer-cols h6{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);margin-bottom:10px}
.drawer-cols a{display:block;color:#cdd6c4;font-size:14px;font-weight:500;margin-bottom:8px}
.drawer-cols a:hover{color:var(--green)}
.drawer-promo{margin-top:auto;background:linear-gradient(135deg,rgba(139,214,0,.14),rgba(79,154,0,.06));border:1px solid rgba(139,214,0,.3);border-radius:18px;padding:20px;display:flex;gap:16px;align-items:center}
.drawer-promo .dp-t b{font-family:'Nord Bold','Montserrat';font-size:15.8px;color:#fff;display:block;margin-bottom:8px}
.drawer-promo .dp-ic{width:54px;height:54px;border-radius:13px;background:radial-gradient(circle,var(--green),var(--green2));flex-shrink:0;display:grid;place-items:center;color:#0c1a00;font-family:'Nord Bold','Montserrat';font-weight:600;font-size:21.1px}

/* ---- full-bleed hero ---- */
.fhero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--ink);color:#fff;overflow:hidden}
.fhero .fh-media{position:absolute;inset:0;z-index:0}
.fhero .fh-media img{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:center}
.fhero .fh-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgba(12,14,11,.5) 50%,rgba(12,14,11,.15) 72%,transparent 100%)}
.fhero .fh-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--ink),transparent 28%)}
.fhero .fh-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.fhero .fh-text{max-width:560px}
.fhero .fh-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#dfeccf;font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:99px;margin-bottom:22px}
.fhero .fh-chip svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.5}
.fhero h1{font-size:clamp(34.4px,5vw,60.5px);font-weight:600;letter-spacing:-.02em;line-height:1.03}
.fhero h1 em{font-style:italic;color:var(--green)}
.fhero .fh-sub{font-size:clamp(13.8px,1.4vw,16px);color:#c9d3c0;max-width:480px;margin:22px 0 30px;font-weight:500;line-height:1.6}
.fhero .fh-cta{display:flex;gap:13px;flex-wrap:wrap}
.fhero .fh-stats{display:flex;gap:30px;margin-top:46px;flex-wrap:wrap}
.fhero .fh-stats .s b{font-family:'Nord Bold','Montserrat';font-size:20.2px;font-weight:600;color:#fff;display:block}
.fhero .fh-stats .s span{font-size:12.5px;color:var(--muted-d);font-weight:600}
.fhero .fh-stats .s .stars{color:var(--green);font-size:14px;letter-spacing:1px}
@media (max-width:860px){
  .fhero{min-height:auto;padding:150px 0 60px}
  .fhero .fh-media img{width:100%;opacity:.4}
  .fhero .fh-media::after{background:linear-gradient(0deg,var(--ink) 30%,rgba(12,14,11,.6) 70%,rgba(12,14,11,.4))}
  .fhero .fh-stats{gap:22px}
}

/* ---- pinned feature (3-col scrub) ---- */
.pin-head{text-align:center;max-width:680px;margin:0 auto 40px}
.pin{display:grid;grid-template-columns:1fr 1.25fr .8fr;gap:30px;align-items:start}
.pin-left,.pin-right{position:sticky;top:120px}
.pin-mid{position:sticky;top:120px;border-radius:24px;overflow:hidden;border:1px solid var(--line-d);aspect-ratio:4/3.3;background:var(--ink2);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.pin-mid .pm-img{position:absolute;inset:0;opacity:0;transition:opacity .6s ease,transform 1.2s ease;transform:scale(1.06)}
.pin-mid .pm-img.on{opacity:1;transform:scale(1)}
.pin-mid .pm-img img{width:100%;height:100%;object-fit:cover}
.pin-mid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,14,11,.5));pointer-events:none;z-index:2}
.pin-left h2{font-size:clamp(22.4px,2.7vw,31.9px);color:var(--txt-dark);margin-bottom:14px}
.bg-ink .pin-left h2{color:#fff}
.pin-acc{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.pin-q{background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:13px;overflow:hidden}
.pin-q .pq{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;cursor:pointer;font-weight:600;font-size:14.5px;color:#e3ead9}
.pin-q .pq .pl{color:var(--green);font-size:16.7px;transition:.3s}
.pin-q.open .pq .pl{transform:rotate(45deg)}
.pin-q .pa{max-height:0;overflow:hidden;transition:max-height .35s}
.pin-q .pa p{padding:0 17px 16px;color:var(--muted-d);font-size:13.5px;line-height:1.6}
.pin-steps{display:flex;flex-direction:column;gap:4px;border-left:1px solid rgba(255,255,255,.12)}
.pin-step{padding:14px 0 14px 18px;margin-left:-1px;border-left:2px solid transparent;cursor:default;transition:.3s;opacity:.4}
.pin-step.on{opacity:1;border-left-color:var(--green)}
.pin-step .pn{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--green);margin-bottom:4px}
.pin-step b{font-family:'Nord Bold','Montserrat';font-size:16.7px;font-weight:600;color:#fff;display:block;line-height:1.2}
.pin-step span{font-size:12.5px;color:var(--muted-d)}
@media (max-width:980px){
  .pin{grid-template-columns:1fr;gap:24px}
  .pin-left,.pin-right,.pin-mid{position:relative;top:0}
  .pin-mid{aspect-ratio:16/11;max-width:560px;margin:0 auto;width:100%}
  .pin-right{order:3}
}

/* ---- value checklist (dark) ---- */
.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;max-width:880px;margin:30px auto 0}
.value-grid .vrow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;font-weight:600;color:#e3ead9}
.value-grid .vrow .ck{flex-shrink:0;color:var(--green);font-weight:800;margin-top:1px}
.value-grid .vrow span{font-weight:500;color:var(--muted-d);font-size:13px;display:block;margin-top:2px}
.value-price{text-align:center;margin-top:36px}
.value-price .vp-strike{color:var(--muted-d);text-decoration:line-through;font-size:16.7px;font-weight:600;margin-right:10px}
.value-price .vp-big{font-family:'Nord Bold','Montserrat';font-size:clamp(34.4px,5.4vw,53.8px);font-weight:600;color:var(--green);line-height:1}
.value-price .vp-note{color:var(--muted-d);font-size:14px;margin-top:8px}

/* ---- what we measure accordion ---- */
.measure-acc{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.macc{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;overflow:hidden}
.macc .mq{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;cursor:pointer}
.macc .mq .mt{font-family:'Nord Bold','Montserrat';font-size:18.6px;font-weight:600}
.macc .mq .mc{font-size:13px;font-weight:700;color:var(--green2);background:rgba(79,154,0,.1);padding:4px 11px;border-radius:99px}
.macc .mq .pl{margin-left:6px;color:var(--green2);font-size:18.6px;transition:.3s}
.macc.open .mq .pl{transform:rotate(45deg)}
.macc .ma{max-height:0;overflow:hidden;transition:max-height .4s}
.macc .ma-in{padding:0 24px 22px;display:flex;flex-wrap:wrap;gap:8px}
.macc .ma-in span{background:var(--cream);border:1px solid var(--line-l);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted)}

/* ---- carousel (member stories) ---- */
.caro-wrap{position:relative}
.caro{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none}
.caro::-webkit-scrollbar{display:none}
.cslide{flex:0 0 auto;width:min(420px,82vw);scroll-snap-align:start;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:4/4.6;background:#000;border:1px solid var(--line-l)}
.cslide video,.cslide img{width:100%;height:100%;object-fit:cover}
.cslide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,10,7,.85))}
.cslide .cq{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
.cslide .cq p{color:#fff;font-size:15px;font-weight:500;line-height:1.5;margin-bottom:10px}
.cslide .cq .who{color:var(--green);font-weight:700;font-size:13.5px}
.cslide .play{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none}
.cslide .play svg{width:54px;height:54px;opacity:.92;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.caro-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.caro-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-l);background:var(--paper);cursor:pointer;font-size:16.7px;color:var(--txt-dark);transition:.2s}
.caro-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.bg-ink .caro-nav button{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.bg-ink .caro-nav button:hover{background:var(--green);color:#0c1a00;border-color:var(--green)}

/* ---- single member-story reel (service pages, real testimonial with sound) ---- */
.reel-wrap{display:flex;justify-content:center}
.reel-card{width:min(380px,86vw);aspect-ratio:4/5.1;border-radius:20px;overflow:hidden;position:relative;background:#000;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.reel-card video{width:100%;height:100%;object-fit:cover}
.reel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,10,7,.88));pointer-events:none}
.reel-play{position:absolute;inset:0;display:grid;place-items:center;z-index:3;transition:opacity .25s}
.reel-play svg{width:58px;height:58px;opacity:.94;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.reel-card.sound .reel-play{opacity:0;pointer-events:none}
.reel-q{position:absolute;left:22px;right:22px;bottom:22px;z-index:2}
.reel-q .qm{font-family:Georgia,'Times New Roman',serif;font-size:37px;line-height:.4;color:rgba(255,255,255,.5);display:block;margin-bottom:8px}
.reel-q p{color:#fff;font-size:15.5px;font-weight:500;line-height:1.55;margin-bottom:10px}
.reel-q .who{color:rgba(255,255,255,.85);font-weight:600;font-size:13.5px}
.reel-q .who span{color:var(--green);font-weight:700}

/* ---- rich FAQ (list + panel) ---- */
.faqx{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start}
.faqx-list{display:flex;flex-direction:column;gap:4px}
.faqx-q{text-align:left;background:none;border:none;border-bottom:1px solid var(--line-l);padding:16px 8px;font-family:'Montserrat';font-weight:600;font-size:16px;color:var(--muted);cursor:pointer;transition:.2s;display:flex;justify-content:space-between;gap:10px;align-items:center}
.faqx-q .ar{opacity:0;transition:.2s;color:var(--green2)}
.faqx-q:hover{color:var(--txt-dark)}
.faqx-q.on{color:var(--txt-dark);font-weight:700}
.faqx-q.on .ar{opacity:1}
.faqx-panel{border-radius:22px;overflow:hidden;border:1px solid var(--line-l);background:var(--paper);min-height:420px;position:relative}
.faqx-card{display:none;flex-direction:column;height:100%}
.faqx-card.on{display:flex;animation:fade .4s ease}
.faqx-card .fc-img{height:200px;overflow:hidden;flex-shrink:0}
.faqx-card .fc-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.faqx-card .fc-body{padding:26px 28px}
.faqx-card .fc-body h3{font-size:20.2px;margin-bottom:12px}
.faqx-card .fc-body p{color:var(--muted);font-size:15px;font-weight:500;line-height:1.65;margin-bottom:12px}
.faqx-card .fc-body .checks{margin-top:6px}
@media (max-width:860px){
  .faqx{grid-template-columns:1fr;gap:14px}
  .faqx-panel{min-height:0}
}

/* pinned scroll panels (left column scrolls, mid+right pinned) */
.pin{align-items:start}
.pin-scroll{display:flex;flex-direction:column}
.pin-panel{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding-right:10px}
.pin-panel h2{font-size:clamp(22.4px,2.5vw,30.2px);color:#fff;margin-bottom:14px}
.pin-panel p{color:var(--muted-d);font-size:16px;font-weight:500;line-height:1.65;max-width:380px}
.pin-panel .pp-tag{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
@media (max-width:980px){
  .pin-panel{min-height:0;padding:18px 0}
  .pin-mid{order:-1;margin-bottom:10px}
}

/* nav offset so the pill sits below the announcement bar at top, rises on scroll */
.nav .nav-inner{margin-top:46px}
.nav.scrolled .nav-inner{margin-top:12px}
.phero{margin-top:0}
@media (max-width:760px){.nav .nav-inner{margin-top:44px}.nav.scrolled .nav-inner{margin-top:10px}}

/* mobile: value checklist single column */
@media (max-width:680px){
  .value-grid{grid-template-columns:1fr;gap:2px 0}
  .fh-stats{gap:18px}
  .drawer-cols{grid-template-columns:1fr 1fr}
  .pin-mid{aspect-ratio:16/12}
}

/* ============================================================
   V4 : FAQ modal section (matches Superpower video)
   ============================================================ */
.faq-dark{position:relative;overflow:hidden;background:var(--ink)}
.faq-dark .faq-bg{position:absolute;inset:0;z-index:0}
.faq-dark .faq-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.18}
.faq-dark .faq-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.85),rgba(12,14,11,.95))}
.faq-dark .wrap{position:relative;z-index:2}
.faqm-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column}
.faqm-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.12);
  padding:22px 6px;cursor:pointer;color:#fff;font-family:'Nord Bold','Montserrat',sans-serif;font-weight:600;font-size:clamp(15.5px,1.8vw,19.3px);transition:.2s}
.faqm-q:hover{color:var(--green);padding-left:12px}
.faqm-q .pl{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:18.6px;color:var(--green);font-family:'Montserrat';transition:.25s}
.faqm-q:hover .pl{background:var(--green);color:#0c1a00;border-color:var(--green)}
.faqm-src{display:none}

/* modal */
.faqm-scrim{position:fixed;inset:0;z-index:80;background:rgba(6,8,5,.72);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s}
.faqm-scrim.open{opacity:1;visibility:visible}
.faqm-modal{position:fixed;z-index:81;top:50%;left:50%;width:min(560px,92vw);max-height:88vh;overflow-y:auto;
  background:var(--paper);border-radius:24px;transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;
  transition:transform .38s cubic-bezier(.3,.8,.25,1),opacity .3s,visibility .3s;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.faqm-modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
.faqm-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);border:none;font-size:19.4px;line-height:1;color:var(--ink);cursor:pointer;transition:.2s}
.faqm-x:hover{background:#fff;transform:rotate(90deg)}
.faqm-modal .fm-img{height:210px;overflow:hidden}
.faqm-modal .fm-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.faqm-modal .fm-body{padding:28px 30px 32px}
.faqm-modal .fm-body h3{font-size:22px;margin-bottom:14px}
.faqm-modal .fm-body p{color:var(--muted);font-size:15.5px;font-weight:500;line-height:1.7;margin-bottom:14px}
.faqm-modal .fm-body .checks{margin-top:8px}
.faqm-modal .fm-cta{margin-top:8px}
@media (prefers-reduced-motion:reduce){.faqm-modal{transition:opacity .2s,visibility .2s}}

/* ============================================================
   V5 : pricing card visibility + premium final CTA
   ============================================================ */
/* membership feat card: make inclusions readable + tidy layout */
.pcol{display:flex;flex-direction:column}
.pcol .checks{margin-bottom:22px}
.pcol .btn{margin-top:auto}
.pcol.feat .checks li{color:#eaf2e0}
.pcol.feat .checks .ck{background:rgba(139,214,0,.20);color:var(--green)}
.pcol.feat .sub{color:#cdd8c3}
.pcol.feat .amt small{color:#cdd8c3}

/* final CTA: dark, premium, green glow (replaces flat green) */
.finalcta{background:var(--ink);color:#fff;padding:112px 24px;position:relative;overflow:hidden}
.finalcta::before{content:"";position:absolute;width:840px;height:840px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,214,0,.32),rgba(79,154,0,.08) 45%,transparent 70%);
  filter:blur(70px);top:-400px;left:50%;transform:translateX(-50%);animation:drift1 15s ease-in-out infinite alternate;pointer-events:none}
.finalcta::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(53,182,234,.10),transparent 70%);filter:blur(60px);bottom:-280px;right:-140px;pointer-events:none}
.finalcta>*{position:relative;z-index:2}
.finalcta h2{color:#fff!important;font-size:clamp(27.5px,4vw,47px);max-width:780px;margin:0 auto 16px}
.finalcta h2 em{font-style:italic;color:var(--green)}
.finalcta p{color:#c9d3c0!important;font-weight:500}

/* ============================================================
   V5 : global mega menu (Services) - image-rich dropdown
   ============================================================ */
.has-mega-link .mega-caret{font-size:9px;opacity:.7;margin-left:3px;display:inline-block;transition:.2s}
/* W5 FIX 5: Therapies caret must match Services caret exactly */
.has-therapies .mega-caret{font-size:9px;opacity:.7;margin-left:3px;display:inline-block;transition:.2s}
.nav .mega{position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%) translateY(10px);
  width:min(1060px,95vw);background:#0e1109;border:1px solid rgba(139,214,0,.18);border-radius:22px;padding:22px;
  box-shadow:0 34px 90px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .26s,transform .26s,visibility .26s;z-index:55;
  display:grid;grid-template-columns:1fr 1fr 1fr 1.05fr;gap:20px}
.nav .mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega h6{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d);margin:0 0 10px 8px}
.mega-item{display:flex;gap:11px;align-items:center;padding:8px;border-radius:12px;transition:.16s}
.mega-item:hover{background:rgba(139,214,0,.09);transform:translateX(2px)}
.mega-item img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0}
.mega-item .mi{display:flex;flex-direction:column;min-width:0}
.mega-item .mi b{color:#fff;font-size:14px;font-weight:700;font-family:'Montserrat';line-height:1.2}
.mega-item .mi span{color:var(--muted-d);font-size:12px}
.mega-feature{position:relative;border-radius:16px;overflow:hidden;min-height:230px;display:flex;align-items:flex-end;padding:20px}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* W5 FIX 5: darker top on the scrim so the green eyebrow is legible on any photo */
.mega-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.45),rgba(12,14,11,.55) 30%,rgba(12,14,11,.9))}
.mega-feature .mf{position:relative;z-index:2}
.mega-feature .mf .ft{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:4px}
.mega-feature .mf b{font-family:'Nord Bold','Montserrat';font-size:19.5px;color:#fff;display:block;line-height:1.1;margin-bottom:6px}
.mega-feature .mf .fd{color:#cdd8c3;font-weight:500;font-size:12.5px}
@media (max-width:900px){.nav .mega{display:none!important}}

/* ============================================================
   V5 : tools (finder, menu, review, dexa companion)
   ============================================================ */
.foot-tools{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line-d);margin-top:40px;padding-top:22px}
.foot-tools .ft-lbl{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d)}
.foot-tools a{color:#cdd6c4;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.foot-tools a:hover{color:var(--green)}
.foot-tools a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.drawer-tools{display:flex;flex-direction:column;gap:2px;margin:18px 0 4px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.drawer-tools h6{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);margin-bottom:8px}
.drawer-tools a{display:flex;align-items:center;justify-content:space-between;color:#dfeccf;font-size:15px;font-weight:600;padding:9px 0}
.drawer-tools a:hover{color:var(--green)}
.drawer-tools a .tg{font-size:11px;font-weight:700;color:#0c1a00;background:var(--green);padding:2px 8px;border-radius:99px}

/* finder band (Health Finder + Menu entry points) */
.toolband{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto}
.toolcard{position:relative;overflow:hidden;border-radius:var(--r);padding:30px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:200px;border:1px solid var(--line-d);background:var(--ink2);color:#fff}
.toolcard .tc-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(139,214,0,.28),transparent 70%);filter:blur(46px);top:-120px;right:-80px;pointer-events:none}
.toolcard .tc-k{font-family:'Montserrat';font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);position:relative;z-index:2}
.toolcard h3{font-size:22px;color:#fff;margin:10px 0 8px;position:relative;z-index:2}
.toolcard p{color:var(--muted-d);font-size:14.5px;font-weight:500;position:relative;z-index:2;margin-bottom:18px}
.toolcard .btn{align-self:flex-start;position:relative;z-index:2}
@media (max-width:760px){.toolband{grid-template-columns:1fr}}

/* companion block on testing pages */
.companion{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;margin:0 auto}
.compcard{display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r);padding:22px;transition:.2s}
.compcard:hover{border-color:rgba(79,154,0,.4);transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,24,15,.1)}
.compcard .ci2{width:54px;height:54px;border-radius:14px;background:rgba(139,214,0,.12);display:grid;place-items:center;flex-shrink:0}
.compcard .ci2 svg{width:26px;height:26px;stroke:var(--green2);fill:none;stroke-width:2}
.compcard h4{font-size:16.7px;margin-bottom:3px}
.compcard p{color:var(--muted);font-size:13.5px;font-weight:500;margin-bottom:6px}
.compcard .go{color:var(--green2);font-weight:700;font-size:13.5px}
@media (max-width:760px){.companion{grid-template-columns:1fr}}

/* V6: mega feature column (Protocol + membership stacked) */
.mega-feat-col{display:flex;flex-direction:column;gap:10px}
.mega-feat-col .mega-feature{min-height:158px;flex:1}
.mega-mem{background:rgba(139,214,0,.08);border:1px solid rgba(139,214,0,.2)}
.mega-mem:hover{background:rgba(139,214,0,.14)}

/* ============================================================
   V7 - Service page redesign (DEXA first): hero typewriter,
   bento, vertical tabs, upward review wall. Reusable.
============================================================ */
/* ---- Typewriter hero ---- */
.svchero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:130px 0 88px}
.svchero .bgimg{position:absolute;inset:0;z-index:0}
.svchero .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.svchero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(880px 520px at 80% -10%,rgba(139,214,0,.20),transparent 60%),linear-gradient(180deg,rgba(12,14,11,.66),rgba(12,14,11,.93))}
.svchero .wrap{position:relative;z-index:2}
.svchero .crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin-bottom:16px}
.svchero .crumb a{color:var(--muted-d)}
.svchero .chip{display:inline-block;font-family:'Montserrat';font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);border:1px solid rgba(139,214,0,.4);border-radius:99px;padding:6px 14px;margin-bottom:20px}
.svchero h1{font-size:clamp(32.7px,5.6vw,67.2px);line-height:1.0;letter-spacing:-.02em;font-weight:600}
.svchero .twwrap{display:inline-flex;align-items:center;min-height:1.04em;line-height:1}
.svchero .tw{color:var(--green)}
.tw-cursor{display:inline-block;width:4px;height:.86em;align-self:center;background:var(--green);margin-left:6px;border-radius:2px;animation:twblink 1.05s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
.svchero .lead{color:#d7e0d2;font-size:clamp(13.8px,1.4vw,16px);max-width:570px;margin:24px 0 4px}
.svchero .price{font-family:'Nord Bold','Montserrat';font-size:25.2px;margin:18px 0 24px}
/* When a promo box follows the price, close the gap: the promo carries its own
   22px below, so 24+14 above made it float away from the price. */
.svchero .price:has(+ .promo15){margin-bottom:16px}
.svchero .price small{font-family:'Montserrat';font-size:14px;color:var(--muted-d);font-weight:600}
.svchero .hbtns{display:flex;gap:13px;flex-wrap:wrap}
.svchero .htrust{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;color:#cdd6c8;font-size:13px}
.svchero .htrust span{display:flex;align-items:center;gap:8px}
.svchero .htrust b{color:#fff}
.svchero .htrust .d{color:var(--green)}
/* W2-7: trust strip falls off hero bottom on mobile. Tighter gap, let it
   wrap to two clean rows, give the hero enough bottom padding so the strip
   sits fully inside it with breathing room. Min 12px type per item. */
@media (max-width:680px){
  .svchero{padding:130px 0 112px}
  .svchero .htrust{gap:10px 20px;margin-top:26px;font-size:12.5px}
  .svchero .htrust span{gap:6px}
}

/* ---- Bento ---- */
.svcbento{padding:80px 0;background:var(--cream)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(158px,auto);gap:16px;grid-auto-flow:row dense;margin-top:32px}
.bt{position:relative;border-radius:20px;border:1px solid var(--line-l);background:var(--paper);padding:24px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.bt:hover{transform:translateY(-4px);border-color:rgba(79,154,0,.45);box-shadow:0 20px 54px rgba(20,24,15,.12)}
.bt .bk{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green2);font-weight:700;margin-bottom:10px}
.bt h3{font-size:19.5px;margin-bottom:8px;line-height:1.12}
.bt p{color:var(--muted);font-size:14px;line-height:1.55}
.bt.tall{grid-row:span 2;grid-column:span 1;color:#fff;border:none;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.bt.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}
.bt.tall:hover img{transform:scale(1.05)}
.bt.tall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.1),rgba(12,14,11,.9));z-index:1}
.bt.tall>*{position:relative;z-index:2}
.bt.tall .bk{color:var(--green)}
.bt.tall p{color:#dbe4d6}
.bt.wide{grid-column:span 2}
.bt.stat{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(155deg,#181d12,#0c0e0b);color:#fff;border:none}
.bt.stat .num{font-family:'Nord Bold','Montserrat';font-size:clamp(31px,4vw,45.4px);line-height:1;color:var(--green)}
.bt.stat .lbl{color:#cdd6c8;font-size:13.5px;margin-top:9px;line-height:1.4}
.bt.accent{background:linear-gradient(150deg,var(--green),var(--green2));color:#0c1a00;border:none}
.bt.accent .bk{color:#16330a}
.bt.accent h3{color:#0c1a00}
.bt.accent p{color:#173a08}
.bt .clist{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.bt .clist div{display:flex;gap:10px;font-size:13.7px;color:var(--txt-dark);line-height:1.4}
.bt .clist .ck{color:var(--green2);flex-shrink:0;font-weight:800}
.bt .steps{display:flex;gap:18px;margin-top:6px;flex-wrap:wrap}
.bt .stp{flex:1;min-width:150px}
.bt .stp .n{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--green);font-family:'Nord Bold','Montserrat';display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:8px}
.bt .stp b{font-size:14px;display:block;margin-bottom:3px}
.bt .stp span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ---- Vertical tabs ---- */
.vtabs-sec{padding:82px 0;background:var(--ink);color:#fff}
.vtabs{display:grid;grid-template-columns:300px 1fr;gap:30px;margin-top:34px}
.vtablist{display:flex;flex-direction:column;gap:8px}
.vtab{text-align:left;padding:17px 18px;border-radius:14px;border:1px solid var(--line-d);background:rgba(255,255,255,.025);color:#cdd6c8;font-family:'Nord Bold','Montserrat';font-size:16.7px;cursor:pointer;transition:.2s;display:flex;justify-content:space-between;align-items:center;gap:10px}
.vtab:hover{border-color:rgba(139,214,0,.4);color:#fff}
.vtab.on{background:linear-gradient(150deg,rgba(139,214,0,.18),rgba(79,154,0,.05));border-color:rgba(139,214,0,.55);color:#fff}
.vtab .tn{font-family:'Montserrat';font-size:11.5px;color:var(--green);font-weight:700}
.vpanels{position:relative}
.vpanel{display:none;animation:fadev .35s ease}
.vpanel.on{display:block}
@keyframes fadev{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vpanel-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
/* Manan 28 Jul: when no distinct image is left for a panel we show none rather than
   repeating one already on the page. The copy then runs full width. */
.vpanel-grid.nomedia{grid-template-columns:1fr;max-width:820px}
.vpanel-media{border-radius:16px;overflow:hidden;border:1px solid var(--line-d)}
.vpanel-media img{width:100%;height:100%;object-fit:cover;max-height:340px;object-position:center 32%}
.vpanel h3{font-size:22.9px;margin-bottom:14px}
.vpanel p{color:#d2dccd;font-size:15px;line-height:1.62;margin-bottom:12px}
.vpanel .clist2{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.vpanel .clist2 div{display:flex;gap:11px;color:#e6ece1;font-size:14.5px;line-height:1.45}
.vpanel .clist2 .ck{color:var(--green);flex-shrink:0;font-weight:800}

/* ---- Upward review wall ---- */
.revwall{padding:80px 0 84px;background:var(--cream);overflow:hidden}
.revwall .gscore{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;color:var(--muted);margin-top:8px}
.revwall .gscore b{color:var(--txt-dark)}
.revwall .gscore .st{color:#f5b400;letter-spacing:1px}
.revcols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:560px;overflow:hidden;margin-top:30px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent)}
.revcol{display:flex;flex-direction:column;gap:16px;animation:revup 30s linear infinite;will-change:transform}
.revcol.b{animation-duration:40s}
.revcol.c{animation-duration:34s}
.revcols:hover .revcol{animation-play-state:paused}
@keyframes revup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.revcard{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;padding:18px 19px;flex-shrink:0}
.revcard .stars{color:#f5b400;font-size:13px;letter-spacing:1.5px;margin-bottom:8px}
.revcard p{font-size:14px;color:var(--txt-dark);line-height:1.55;margin-bottom:11px}
.revcard .who{font-size:12.5px;color:var(--muted)}
.revcard .who b{color:var(--txt-dark)}
.revcard .who .g{color:var(--green2);font-weight:700}

@media (max-width:860px){
  .svchero{padding:108px 0 64px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bt.tall,.bt.wide{grid-column:span 1;grid-row:auto}
  .bt.tall{min-height:260px}
  .vtabs{grid-template-columns:1fr;gap:18px}
  .vtablist{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .vtab{flex:0 0 auto;font-size:15px;padding:12px 14px}
  .vtab .tn{display:none}
  .vpanel-grid{grid-template-columns:1fr}
  .revcols{grid-template-columns:repeat(2,1fr);height:480px}
  .revcol.c{display:none}
}
@media (max-width:560px){
  .revcols{grid-template-columns:1fr;height:440px}
  .revcol.b{display:none}
}

/* V8: bento team tile (About showcase) */
.bt.teamtile{position:relative;color:#fff;border:none;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.bt.teamtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:0;transition:transform .5s ease}
.bt.teamtile:hover img{transform:scale(1.05)}
.bt.teamtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.05),rgba(12,14,11,.86));z-index:1}
.bt.teamtile>*{position:relative;z-index:2}
.bt.teamtile h3{font-size:18.6px;margin:0}
.bt.teamtile .ttrole{color:var(--green);font-weight:700;font-size:12.5px;font-family:'Montserrat',sans-serif;letter-spacing:.04em;margin-top:2px}

/* ===== V4: real IG testimonial stories (hover reveal) ===== */
.sec-head .sec-sub{max-width:640px;margin:12px auto 0;color:var(--muted,#5b6157);font-size:15px;line-height:1.5}
.tstories{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.tstory{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;border:1px solid var(--line-l);box-sizing:border-box}
.tstory video{width:100%;height:100%;object-fit:cover;display:block}
.tstory-tag{position:absolute;top:10px;left:10px;z-index:4;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px;padding:4px 9px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tstory-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3;transition:opacity .3s}
.tstory-play svg{width:52px;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.tstory:hover .tstory-play,.tstory.open .tstory-play{opacity:0}
.tstory-body{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.5) 58%,transparent);transition:background .35s}
.tstory:hover .tstory-body,.tstory.open .tstory-body{background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.86) 68%,rgba(0,0,0,.45))}
.tstory .stars{color:#F7B827;font-size:13px;letter-spacing:1.5px;line-height:1}
.tstory-short{font-weight:700;font-size:14px;line-height:1.34;margin:7px 0 0}
.tstory-full{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .3s ease,margin .3s}
.tstory-full p{font-size:12px;line-height:1.55;color:rgba(255,255,255,.9);font-weight:400;margin:0}
.tstory:hover .tstory-full,.tstory.open .tstory-full{max-height:200px;opacity:1;overflow-y:auto;margin-top:9px}
.tstory-who{font-size:12px;margin-top:9px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.tstory-who b{font-weight:700}
.tstory-who span{color:#8BD600;font-weight:600}
.tstory-note{text-align:center;color:var(--muted,#5b6157);font-size:13px;margin-top:22px;font-style:italic}
@media(max-width:900px){.tstories{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:560px){.tstories{grid-template-columns:1fr 1fr;gap:10px}.tstory-short{font-size:12.5px}}

/* inline service-page testimonial + b-roll blocks */
.svid-band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.svid{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;border:1px solid var(--line-l)}
.svid video{width:100%;height:100%;object-fit:cover;display:block}
.svid .tstory-play{z-index:3}
.svid .cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:12px;color:#fff;font-weight:700;font-size:13px;line-height:1.3;background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}
.svid .cap span{display:block;font-weight:600;font-size:11.5px;color:#8BD600;margin-top:3px}
@media(max-width:760px){.svid-band{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:460px){.svid-band{grid-template-columns:1fr 1fr}}

/* ===== V5: video + testimonial text in one block (.vquote) ===== */
.vqwrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.vquote{display:grid;grid-template-columns:150px 1fr;gap:16px;background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:14px}
.vq-vid{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.vq-vid video{width:100%;height:100%;object-fit:cover;display:block}
.vq-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .3s}
.vq-play svg{width:44px;height:44px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.vquote:hover .vq-play,.vquote.sound .vq-play{opacity:0}
.vq-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.vq-stars{color:#F7B827;font-size:13px;letter-spacing:1.5px;line-height:1}
.vq-quote{font-weight:700;font-size:15px;line-height:1.38;margin:8px 0 6px;color:var(--ink,#1a1c19)}
.vq-body{font-size:12.5px;line-height:1.55;color:var(--muted,#5b6157);margin:0 0 10px}
.vq-who{font-size:12.5px;margin-top:auto}
.vq-who b{color:var(--ink,#1a1c19)}
.vq-who span{color:#5aa700;font-weight:600;margin-left:5px}
@media(max-width:900px){.vqwrap{grid-template-columns:1fr}}
@media(max-width:460px){.vquote{grid-template-columns:118px 1fr;gap:12px;padding:12px}.vq-quote{font-size:14px}}

/* ===== V6: testimonial carousel refinements (match reference overlay style) ===== */
.cslide .cq .qm{font-family:Georgia,'Times New Roman',serif;font-size:38.6px;line-height:.5;color:rgba(255,255,255,.5);display:block;margin-bottom:10px}
.cslide .cq .who b{color:#fff;font-weight:800}
.cslide .cq .who{color:rgba(255,255,255,.85);font-weight:600}
.cslide .cq .who span{color:var(--green);font-weight:700}
.cslide::after{background:linear-gradient(180deg,transparent 34%,rgba(8,10,7,.55) 60%,rgba(8,10,7,.9))}
.tcaro-sec .caro-nav{justify-content:flex-end}

/* ======================================================================
   14 Jul 2026 - Manan's changes off Bryan's Loom
   ====================================================================== */

/* --- Nav lockup: Prefusion logo (bigger) + powered by DexaFit, HORIZONTAL --- */
.brand-lockup{display:flex;flex-direction:row;align-items:center;gap:10px;line-height:1}
.brand-lockup .brand-marks{display:flex;align-items:center}
/* logo bigger, never compromised */
.brand-lockup .logo-img{height:38px !important;width:auto}
.brand-by{display:flex;flex-direction:column;align-items:flex-start;gap:1px;white-space:nowrap;
  font-size:9px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--muted);opacity:.72;padding-left:10px;line-height:1.15;
  border-left:1px solid rgba(28,26,23,.16)}
.brand-by b{font-weight:800;color:#3CBEF0;letter-spacing:.06em;font-size:10px}
.nav.on-dark .brand-by,.drawer .brand-by{color:rgba(255,255,255,.9);border-left-color:rgba(255,255,255,.28)}
.nav.on-dark .brand-by b,.drawer .brand-by b{color:#fff}
@media(max-width:1080px){.brand-lockup .logo-img{height:32px !important}.brand-by{font-size:8px}}
@media(max-width:760px){.brand-by{display:none}}

/* --- Vertical tabs: a complete picture across every system ------------ */
.sysv{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.sysv-rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:110px}
.sysv-tab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  text-align:left;padding:16px 18px;border-radius:14px;border:1px solid rgba(28,26,23,.10);
  background:transparent;cursor:pointer;transition:all .28s ease}
.sysv-tab:hover{border-color:rgba(28,26,23,.22);background:rgba(139,214,0,.05)}
.sysv-tab.active{background:var(--ink,#0C0E0B);border-color:var(--ink,#0C0E0B)}
.sysv-tab .sv-k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.sysv-tab .sv-t{font-family:'Nord Bold','Montserrat',sans-serif;font-size:17.7px;font-weight:600;color:var(--ink,#0C0E0B)}
.sysv-tab.active .sv-t{color:#fff}
.sysv-stage{position:relative;min-height:430px}
.sysv-panel{display:none;grid-template-columns:1fr 1fr;gap:26px;align-items:center;
  animation:svIn .5s cubic-bezier(.16,1,.3,1)}
.sysv-panel.active{display:grid}
@keyframes svIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sv-img{border-radius:18px;overflow:hidden;border:1px solid rgba(28,26,23,.12);aspect-ratio:4/3}
.sv-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-body h3{font-family:'Nord Bold','Montserrat',sans-serif;font-size:25.2px;font-weight:600;margin:0 0 10px}
.sv-body p{color:var(--muted);font-weight:500;line-height:1.6;margin:0 0 16px}
.sv-list{display:flex;flex-wrap:wrap;gap:8px}
.sv-list span{font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;
  background:rgba(139,214,0,.10);border:1px solid rgba(139,214,0,.28);color:var(--ink,#0C0E0B)}
@media(max-width:900px){
  .sysv{grid-template-columns:1fr;gap:18px}
  .sysv-rail{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .sysv-tab{min-width:170px;flex:0 0 auto;padding:13px 15px}
  .sysv-tab .sv-t{font-size:16px}
  .sysv-panel{grid-template-columns:1fr;gap:18px}
  .sysv-stage{min-height:0}
  .sv-body h3{font-size:22px}
}

/* --- Therapy entry bar: you book a DEXA + bloodwork ------------------- */
.entrybar{display:flex;align-items:center;gap:18px;max-width:1120px;margin:-26px auto 0;
  padding:20px 24px;border-radius:16px;background:var(--ink,#0C0E0B);position:relative;z-index:3;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.entrybar .eb-ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:#0C0E0B;font-weight:900;font-size:16px}
.entrybar .eb-t{flex:1;min-width:0;color:#fff}
/* Only the HEADING b is a block. A nested <b> inside the paragraph (the green
   $449) was inheriting display:block, which threw the price and the full stop
   onto their own lines. */
.entrybar .eb-t > b{display:block;font-size:15px;font-weight:800;margin-bottom:2px}
.entrybar .eb-t span b{display:inline;font-weight:800}
.entrybar .eb-t span{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.66);line-height:1.5}
.entrybar .eb-b{flex:0 0 auto;white-space:nowrap}
@media(max-width:820px){
  .entrybar{flex-direction:column;align-items:flex-start;gap:14px;margin:-16px 16px 0;padding:18px}
  .entrybar .eb-b{width:100%;justify-content:center}
}

/* --- Therapy value grid ---------------------------------------------- */
.vb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vb-card{padding:24px 22px;border-radius:16px;background:#fff;border:1px solid rgba(28,26,23,.10);
  transition:transform .3s ease,border-color .3s ease}
.vb-card:hover{transform:translateY(-3px);border-color:rgba(139,214,0,.45)}
.vb-n{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;margin-bottom:12px;
  background:rgba(139,214,0,.14);color:#4d7a00;font-weight:800;font-size:13px}
.vb-card h4{font-size:16px;font-weight:800;margin:0 0 7px;line-height:1.3}
.vb-card p{font-size:14px;font-weight:500;color:var(--muted);line-height:1.55;margin:0}
@media(max-width:1000px){.vb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vb-grid{grid-template-columns:1fr}}

/* --- Protocol showcase: scroll-led "what you actually get" ------------ */
.pshow{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;position:relative}
.pshow-left{position:relative;padding-left:34px}
.ps-progress{position:absolute;left:0;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.12);border-radius:2px}
.ps-progress span{display:block;width:100%;height:12%;background:var(--green);border-radius:2px;
  transition:height .5s cubic-bezier(.16,1,.3,1)}
.ps-step{padding:26px 0;opacity:.32;transition:opacity .45s ease,transform .45s ease;transform:translateX(-4px)}
.ps-step.on{opacity:1;transform:none}
.ps-k{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:8px}
.ps-k i{width:20px;height:1px;background:var(--green);display:block;font-style:normal}
.ps-step h3{font-family:'Nord Bold','Montserrat',sans-serif;font-size:24.6px;font-weight:600;color:#fff;margin:0 0 8px;line-height:1.2}
.ps-step p{color:rgba(255,255,255,.62);font-weight:500;line-height:1.65;margin:0 0 12px;font-size:15px}
.ps-tags{display:flex;flex-wrap:wrap;gap:7px}
.ps-tags span{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:rgba(139,214,0,.12);border:1px solid rgba(139,214,0,.3);color:#cdea8a}
.pshow-right{position:sticky;top:110px;height:min(560px,72vh);border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#000}
.ps-shot{position:absolute;inset:0;opacity:0;transform:scale(1.05);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.ps-shot.on{opacity:1;transform:none}
.ps-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ps-cap{position:absolute;left:0;right:0;bottom:0;padding:46px 26px 24px;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.35),transparent)}
.ps-cap b{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:var(--green);color:#0C0E0B;padding:5px 11px;border-radius:999px;margin-bottom:9px}
.ps-cap p{color:#fff;font-size:15.8px;font-weight:600;line-height:1.4;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(max-width:900px){
  .pshow{grid-template-columns:1fr;gap:24px}
  .pshow-right{position:relative;top:0;height:300px;order:-1}
  .pshow-left{padding-left:26px}
  .ps-step{padding:20px 0;opacity:1;transform:none}
  .ps-step h3{font-size:20.2px}
}

/* --- Vial grid: the real branded Prefusion peptide + IV vials ---------- */
.vial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vial-grid.vial-grid-tri{grid-template-columns:repeat(3,minmax(220px,260px));justify-content:center}
@media(max-width:760px){.vial-grid.vial-grid-tri{grid-template-columns:repeat(2,minmax(150px,220px))}}
@media(max-width:520px){.vial-grid.vial-grid-tri{grid-template-columns:minmax(0,280px)}}
.vial{border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.10);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.vial:hover{transform:translateY(-5px)}
.vial-img{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:14px}
.vial-img img{width:100%;height:100%;object-fit:contain;display:block}
.vial-b{padding:14px 16px 18px;background:#fff;border-top:1px solid rgba(28,26,23,.07)}
.vial-b b{display:block;font-size:14.5px;font-weight:800;color:#0C0E0B;margin-bottom:3px;line-height:1.25}
.vial-b span{display:block;font-size:12.5px;font-weight:500;color:#6b6b66;line-height:1.45}
@media(max-width:1000px){.vial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vial-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .vial-b{padding:11px 12px 14px}.vial-b b{font-size:13px}.vial-b span{font-size:11.5px}}

/* --- Membership hero: the Protocol -> Membership flow, unmissable -------- */
.memflow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 2px}
.memflow span.mf-1,.memflow span.mf-2{display:flex;flex-direction:column;gap:2px;
  padding:12px 18px;border-radius:14px;font-size:16px;font-weight:700;color:#fff}
.memflow span.mf-1{background:var(--green);color:#0C0E0B}
.memflow span.mf-2{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.memflow b{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.memflow .mf-ar{font-size:18.6px;color:var(--green);font-weight:800}
@media(max-width:560px){.memflow{gap:8px}.memflow span.mf-1,.memflow span.mf-2{padding:10px 13px;font-size:14px}}

/* ===== V10: ambient video loops (Manan 14 Jul: video over repeated stills) ===== */
.pm-img video,.tcard .ph video,.vpanel-media video,.step .pho video,.ps-shot video{width:100%;height:100%;object-fit:cover;display:block}
.bt.tall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vpanel-media video{max-height:340px}
.drawer-promo .dp-ic img{height:20px;width:auto;display:block}
.drawer-promo .dp-ic svg{width:26px;height:26px;display:block}

/* ===== V11b: stop cropping product + before/after imagery (Manan 14 Jul) ===== */
.thband .step .pho{height:210px;background:#fff;display:flex;align-items:center;justify-content:center}
.thband .step .pho img{object-fit:contain}
.mega-item img[src*="vials/"],.mega-item img[src*="iv2"]{object-fit:contain;background:#fff}
.vpanel-media img[src*="vials/"],.vpanel-media img[src*="iv2"],.vpanel-media img[src*="iv-vials"]{object-fit:contain;background:#fff}
.svc .pho img[src*="peptides"],.svc .pho img[src*="iv.jpg"]{object-fit:contain;background:#fff}

/* --- Service benefits grid + FAQ accordion (content batch, 27 Jul) --- */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{background:#fff;border:1px solid rgba(28,26,23,.10);border-radius:14px;padding:24px;transition:border-color .25s ease,transform .25s ease}
.bcard:hover{border-color:rgba(139,214,0,.5);transform:translateY(-2px)}
.bcard .bn{width:34px;height:34px;border-radius:50%;background:var(--green);color:#0C0E0B;font-weight:900;display:grid;place-items:center;margin-bottom:12px;font-size:15px}
.bcard h3{font-family:'Nord Bold','Montserrat',sans-serif;font-size:16.7px;margin:0 0 8px;color:var(--ink,#0C0E0B)}
.bcard p{color:var(--muted);font-weight:500;line-height:1.55;margin:0;font-size:14px}
@media(max-width:860px){.benefits-grid{grid-template-columns:1fr}}
.faqacc{display:flex;flex-direction:column;gap:10px;max-width:840px;margin:0 auto}
.faqi{border:1px solid rgba(28,26,23,.12);border-radius:12px;padding:2px 20px;background:#fff}
.faqi summary{font-family:'Nord Bold','Montserrat',sans-serif;font-weight:700;font-size:16px;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink,#0C0E0B)}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary::after{content:'+';color:var(--green);font-size:21.1px;font-weight:700;line-height:1}
.faqi[open] summary::after{content:'\2013'}
.faqi .fa{padding:0 0 18px;color:var(--muted);font-weight:500;line-height:1.65;font-size:14px}

/* benefit card icon chip (replaces plain number) */
.bcard .bic{width:48px;height:48px;border-radius:13px;background:rgba(139,214,0,.14);border:1px solid rgba(139,214,0,.34);display:grid;place-items:center;margin-bottom:14px;color:#3f6d00}
.bcard .bic svg{width:25px;height:25px;display:block}

/* ---- Protocol "who it's for" (Manan 27 Jul: bare checklist "did not look nice"
   next to the polished benefits-grid above it; now styled as card rows to match) ---- */
.who-list{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.who-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(28,26,23,.10);border-radius:14px;padding:18px 22px;transition:border-color .25s ease,transform .25s ease}
.who-row:hover{border-color:rgba(139,214,0,.4);transform:translateY(-1px)}
.who-row .wck{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(139,214,0,.14);border:1px solid rgba(139,214,0,.34);display:grid;place-items:center;color:#3f6d00;font-weight:800;font-size:14px}
.who-row p{margin:0;font-size:15.5px;font-weight:600;color:var(--txt-dark);line-height:1.4}
@media(max-width:600px){.who-row{padding:15px 16px;gap:12px}.who-row p{font-size:14.5px}}

/* ---- split hero: text left, real-member reel right (dexa/vo2/metabolic-reset).
   Manan 27 Jul: fold the testimonial reel into the hero itself instead of a
   separate section below, more compact. Reuses .reel-card/.reel-play/.reel-q. ---- */
.svchero-split{background:linear-gradient(160deg,#11150d,#0b0d09)}
.svchero-split .chip{background:rgba(139,214,0,.14)}
.svchero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.svchero-media{display:flex;justify-content:center}
.svchero-media .reel-card{width:min(320px,100%);aspect-ratio:4/5}
@media(max-width:980px){
  .svchero-split{padding:130px 0 50px}
  .svchero-grid{grid-template-columns:1fr;gap:34px}
  .svchero-media{order:-1}
  .svchero-media .reel-card{width:min(300px,72vw)}
}

/* peptide stacks catalog */
.sk-note{max-width:680px;margin:-6px auto 30px;text-align:center;color:var(--muted);font-weight:500;font-size:15px;line-height:1.6}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sk-card{background:#fff;border:1px solid rgba(28,26,23,.10);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease}
.sk-card:hover{transform:translateY(-3px);border-color:rgba(139,214,0,.45)}
.sk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.sk-top h3{font-size:16.7px;line-height:1.25;margin:0}
.sk-dur{flex-shrink:0;font-size:11.5px;font-weight:800;color:#3f6d00;background:rgba(139,214,0,.14);border:1px solid rgba(139,214,0,.3);border-radius:20px;padding:4px 11px;white-space:nowrap}
.sk-ing{font-size:13px;font-weight:700;color:var(--ink,#0C0E0B);margin:0 0 4px}
.sk-tag{font-size:13.5px;font-style:italic;color:var(--muted);margin:0 0 16px}
.sk-cols{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.sk-col b{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#3f6d00;margin-bottom:5px}
.sk-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.sk-col li{font-size:13px;color:var(--muted);line-height:1.45;padding-left:13px;position:relative}
.sk-col li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.sk-cta{margin-top:auto;justify-content:center;width:100%;padding:11px 0;font-size:14px}
@media(max-width:1000px){.sk-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sk-grid{grid-template-columns:1fr}}

/* Targets that screenshots must frame clear of the sticky/fixed nav.
   scroll-margin-top gives scrollIntoView a gap so the heading is never cut off. */
#commerce,#addon,#after-proto,#labsBlock,#book,#message{scroll-margin-top:110px}
/* 25 Aug 2026 (Bryan, item 1): the line above only covered six hand-picked ids.
   scroll-padding-top on the scrolling element covers EVERY anchor target on the
   site, including ones added later, so no id can be forgotten again.
   --header-h is measured live in site.js; the fallback matches desktop. */
html{scroll-padding-top:calc(var(--header-h, 110px) + 18px)}
/* W2-4: booking widget at top of contact page */
.book-widget-top{min-height:420px;border-radius:16px;overflow:hidden;background:var(--paper);border:1px solid var(--line-l)}

/* ==========================================================================
   W1 commerce gate: paired Book Now (Mindbody widget) + Buy Now (healcode)
   Book Now is "pay later", Buy Now is "pay now". Styled to wrap widgets, never
   to override Mindbody's own iframe content.
   ========================================================================== */
.commerce{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.ccard{border:1px solid var(--line-l);border-radius:var(--r);padding:28px 26px;background:var(--paper);box-shadow:0 14px 40px rgba(20,24,15,.06);display:flex;flex-direction:column}
.ccard.pay-now{border-color:rgba(139,214,0,.34);background:linear-gradient(180deg,#fbfef4,var(--paper))}
.ccard .ck-tag{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;display:inline-flex;align-items:center;gap:7px}
.ccard .ck-tag .d{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.ccard.pay-now .ck-tag .d{background:var(--green2)}
.ccard h3{font-size:19.4px;margin-bottom:6px}
.ccard .ck-sub{color:var(--muted);font-size:14px;font-weight:500;margin-bottom:18px;line-height:1.5}
.ccard .ck-actions{margin-top:auto;display:flex;flex-direction:column;gap:14px}
/* The Mindbody widget container: gives the iframe a frame without overriding it */
.ccard .mindbody-widget{min-height:0;border-radius:14px;display:block;width:100%}
/* healcode text-link Buy Now: render as a real button.
   healcode.js injects an <a class="healcode-link"> inside <healcode-widget> and
   loads its own jquery-ui CSS that forces the custom element to display:inline.
   So we style BOTH layers: the custom element (un-hydrated + :empty fallback) and
   the injected .healcode-link (hydrated). The .ck-actions wrapper carries the
   layout; the link carries the pill. */
.ccard healcode-widget{display:block;width:100%;text-align:center}
/* Progressive enhancement for healcode.js Buy Now buttons.
   1. HYDRATED (.healcode-link present): real clickable pill via .healcode-link rules below.
   2. UN-HYDRATED (:empty): show data-inner-html label, honestly PENDING (not a dead
      button that looks alive): reduced opacity, no pointer, no hover lift.
   3. FAILED (.healcode-failed): JS makes it a working Mindbody store link. */
.ccard healcode-widget:empty{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Montserrat';font-weight:700;font-size:15px;padding:14px 26px;border-radius:99px;width:100%;background:var(--ink);color:#fff;border:1.5px solid transparent;min-height:20px;opacity:.55;cursor:default}
.ccard healcode-widget:empty::before{content:attr(data-inner-html);pointer-events:none}
.ccard healcode-widget:empty:hover{transform:none}
/* The real clickable link healcode.js injects. High specificity to win over its CSS.
   healcode-widget is a TAG (custom element), not a class. */
.ccard .hc-wrap healcode-widget .healcode-link{display:flex !important;align-items:center;justify-content:center;gap:9px;font-family:'Montserrat' !important;font-weight:700 !important;font-size:15px !important;padding:14px 26px !important;border-radius:99px !important;width:100%;background:var(--ink) !important;color:#fff !important;border:1.5px solid transparent;text-decoration:none !important;transition:.22s ease;min-height:20px}
.ccard .hc-wrap healcode-widget .healcode-link:hover{background:#1d2417 !important;transform:translateY(-2px)}
.ccard.pay-now .hc-wrap healcode-widget .healcode-link{background:var(--green) !important;color:#0c1a00 !important;box-shadow:0 6px 24px rgba(139,214,0,.28)}
.ccard.pay-now .hc-wrap healcode-widget .healcode-link:hover{background:#9ae814 !important}
/* FAILED state: the JS adds .healcode-failed and wires a click to the Mindbody store.
   This rule must beat :empty, so it is more specific (two classes on the tag). */
.ccard healcode-widget.healcode-failed{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;font-family:'Montserrat';font-weight:700;font-size:14px;padding:12px 20px;border-radius:99px;width:100%;background:transparent;color:var(--txt-dark);border:1px solid var(--line-l);opacity:1;cursor:pointer;text-decoration:none}
.ccard healcode-widget.healcode-failed::before{content:"Checkout unavailable here - ";color:var(--muted);font-weight:600;pointer-events:none}
.ccard healcode-widget.healcode-failed::after{content:"Open the Mindbody store \2192";color:var(--green2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ccard.pay-now healcode-widget.healcode-failed{background:transparent;color:var(--txt-dark);border-color:var(--line-l)}
.ccard .ck-price{font-family:'Nord Bold','Montserrat';font-size:15px;font-weight:600;color:var(--muted)}
.ccard.pay-now .ck-price{color:var(--green2)}
.ccard .ck-note{font-size:12.5px;color:var(--muted);font-weight:600}
/* secondary "talk to us" link on therapy pages */
.ccard .ck-talk{font-size:13px;color:var(--muted);font-weight:600;text-align:center}
.ccard .ck-talk a{color:var(--green2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.commerce{grid-template-columns:1fr}}

/* ---- Optimization six-pack add-on card (never shows $749) ---- */
.opt-addon{max-width:680px;margin:26px auto 0;border:1px solid rgba(139,214,0,.34);border-radius:22px;padding:30px 28px;background:linear-gradient(135deg,#f4fbeb,var(--paper));box-shadow:0 14px 40px rgba(139,214,0,.10)}
.opt-addon .oa-k{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green2);margin-bottom:10px;display:inline-flex;align-items:center;gap:7px}
.opt-addon .oa-k .d{width:8px;height:8px;border-radius:50%;background:var(--green)}
.opt-addon h3{font-size:21.1px;margin-bottom:8px}
.opt-addon .oa-line{font-family:'Nord Bold','Montserrat';font-size:17.7px;font-weight:600;color:var(--txt-dark);margin-bottom:8px}
.opt-addon .oa-line .off{color:var(--green2)}
.opt-addon .oa-sub{color:var(--muted);font-size:14.5px;font-weight:500;margin-bottom:20px;line-height:1.5}
.opt-addon healcode-widget{display:block;text-align:center}
.opt-addon healcode-widget:empty{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Montserrat';font-weight:700;font-size:15px;padding:14px 26px;border-radius:99px;background:var(--green);color:#0c1a00;box-shadow:0 6px 24px rgba(139,214,0,.28);min-height:20px;opacity:.55;cursor:default}
.opt-addon healcode-widget:empty::before{content:attr(data-inner-html);pointer-events:none}
.opt-addon healcode-widget:empty:hover{transform:none}
.opt-addon .hc-wrap healcode-widget .healcode-link{display:inline-flex !important;align-items:center;justify-content:center;gap:9px;font-family:'Montserrat' !important;font-weight:700 !important;font-size:15px !important;padding:14px 26px !important;border-radius:99px !important;background:var(--green) !important;color:#0c1a00 !important;box-shadow:0 6px 24px rgba(139,214,0,.28);text-decoration:none !important;transition:.22s ease}
.opt-addon .hc-wrap healcode-widget .healcode-link:hover{background:#9ae814 !important;transform:translateY(-2px)}
.opt-addon healcode-widget.healcode-failed{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;font-family:'Montserrat';font-weight:700;font-size:14px;padding:12px 20px;border-radius:99px;background:transparent;color:var(--txt-dark);border:1px solid var(--line-l);opacity:1;cursor:pointer;text-decoration:none}
.opt-addon healcode-widget.healcode-failed::before{content:"Checkout unavailable here - ";color:var(--muted);font-weight:600;pointer-events:none}
.opt-addon healcode-widget.healcode-failed::after{content:"Open the Mindbody store \2192";color:var(--green2);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---- Labs block: 8 collapsible panel cards (67 markers) ----
   Rebuilt 27 Aug 2026 from Matanel's full WhatsApp marker list. His model:
   each card shows the panel name and why it matters, and drops down to its
   markers on hover or click. One open at a time, so 67 markers sit in about
   half a screen when collapsed. ---- */
#labsBlock .lab-sub{color:var(--muted);font-size:15.8px;margin-top:16px;font-weight:500;max-width:620px;margin-left:auto;margin-right:auto}
.labs-ui{margin-top:8px;opacity:0;transform:translateY(16px);transition:.5s cubic-bezier(.22,.8,.3,1)}
.labs-ui.in{opacity:1;transform:none}

/* Two independent columns, not a grid. In a grid, opening a tall card
   stretches its whole row and leaves a hole beside it. */
.lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
.lab-col{display:flex;flex-direction:column;gap:14px}

.lab-card{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;
  overflow:hidden;transition:border-color .22s,box-shadow .22s}
.lab-card:hover{border-color:rgba(79,154,0,.32);box-shadow:0 10px 28px rgba(20,24,15,.07)}
.lab-card.open{border-color:rgba(79,154,0,.42);box-shadow:0 14px 34px rgba(20,24,15,.09)}

.lc-head{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:18px 20px;
  font-family:'Montserrat',system-ui,sans-serif}
.lc-head:focus-visible{outline:2px solid var(--green2);outline-offset:-3px;border-radius:16px}
.lc-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(139,214,0,.13);color:var(--green2);transition:background .22s,color .22s}
.lc-ic svg{width:23px;height:23px;display:block}
.lab-card.open .lc-ic{background:var(--ink);color:var(--green)}
.lc-t{flex:1;min-width:0}
.lc-t b{display:block;font-size:15.6px;font-weight:700;color:var(--txt-dark);letter-spacing:-.012em;line-height:1.3}
.lc-why{display:block;font-style:normal;font-size:13px;font-weight:500;color:var(--muted);
  line-height:1.45;margin-top:4px}
.lc-meta{flex:0 0 auto;display:flex;align-items:center;gap:9px;color:var(--muted)}
.lc-n{font-family:'Nord Bold','Montserrat';font-weight:600;font-size:17px;color:var(--green2);line-height:1}
.lc-chev{width:17px;height:17px;transition:transform .3s cubic-bezier(.22,.8,.3,1)}
.lab-card.open .lc-chev{transform:rotate(180deg);color:var(--green2)}

/* grid-template-rows 0fr to 1fr animates an unknown height cleanly. */
.lc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.8,.3,1)}
.lab-card.open .lc-body{grid-template-rows:1fr}
.lc-inner{overflow:hidden;min-height:0}
.lc-body .lab-chips,.lc-body .lp-groups{padding:0 20px 20px}
.lc-body .lp-groups{padding-top:2px}

.lp-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px 24px}
.lp-group h4{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px}

.lab-chips{display:flex;flex-wrap:wrap;gap:7px}
.lab-chip{font-size:12.2px;font-weight:600;color:var(--green2);background:rgba(79,154,0,.09);
  border:1px solid rgba(79,154,0,.18);border-radius:99px;padding:6px 12px;line-height:1.35}

.lab-total{text-align:center;margin-top:20px;font-size:13.6px;font-weight:600;color:var(--muted)}
.lab-total b{color:var(--green2);font-weight:800}

@media(max-width:860px){.lab-grid{grid-template-columns:1fr;gap:14px}}
@media(max-width:560px){
  .lc-head{gap:12px;padding:15px 16px}
  .lc-ic{flex:0 0 36px;width:36px;height:36px;border-radius:10px}
  .lc-ic svg{width:20px;height:20px}
  .lc-t b{font-size:14.6px}
  .lc-why{font-size:12.4px}
  .lc-body .lab-chips,.lc-body .lp-groups{padding:0 16px 17px}
  .lp-groups{grid-template-columns:1fr;gap:15px}
  .lab-chip{font-size:11.8px;padding:5px 11px}
}
@media(prefers-reduced-motion:reduce){.lab-card,.labs-ui,.lc-chev,.lc-body{transition:none}}

/* ---- Membership: "What comes after the Protocol" block ---- */
.after-proto{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid rgba(139,214,0,.28);border-radius:26px;overflow:hidden;background:var(--paper);box-shadow:0 20px 50px rgba(20,24,15,.08)}
.after-proto .ap-body{padding:38px 36px}
.after-proto .ap-k{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green2);margin-bottom:12px}
.after-proto h3{font-size:clamp(20.6px,2.3vw,26.9px);margin-bottom:14px}
.after-proto .ap-lead{color:var(--muted);font-size:15.5px;font-weight:500;line-height:1.6;margin-bottom:20px}
.after-proto .ap-price{font-family:'Nord Bold','Montserrat';font-size:25.2px;font-weight:600;color:var(--green2);margin-bottom:16px}
.after-proto .ap-price small{font-size:15px;color:var(--muted);font-weight:600;font-family:'Montserrat'}
.after-proto .ap-media{position:relative;min-height:260px}
.after-proto .ap-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.after-proto{grid-template-columns:1fr}.after-proto .ap-media{min-height:200px;order:-1}}

/* ============================================================
   W3 : CTA system, nav Therapies tab, baseline explainer,
   contact two-column, assessor modal, about team, small fixes
   ============================================================ */

/* W3 Batch 10: topbar thinner (slim band) */
.topbar{padding:6px 16px;font-size:12.5px}

/* W3 Batch 1: Therapies nav tab + dropdown */
.mega-therapies{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(640px,92vw);background:rgba(12,14,11,.96);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:22px;z-index:55}
.nav-links .has-therapies:hover .mega-therapies,.nav-links .has-therapies:focus-within .mega-therapies{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-therapies .mega-item{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;transition:.18s}
.mega-therapies .mega-item:hover{background:rgba(139,214,0,.10)}
.mega-therapies .mega-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.mega-therapies .mega-item .mi b{display:block;font-size:14px;color:#fff;font-weight:600}
.mega-therapies .mega-item .mi span{font-size:12.5px;color:var(--muted-d)}
@media(max-width:760px){.mega-therapies{display:none!important}}

/* Partners dropdown, 27 Aug 2026 (Manan). Work With Us and Creators previously
   existed ONLY in the mobile drawer and the footer, so on desktop they were
   invisible. Cloned from .mega-therapies so hover, focus and mobile behaviour
   are identical. Two children instead of two more top-level nav slots. */
.mega-partners{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:min(560px,92vw);background:rgba(12,14,11,.96);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:22px;z-index:55;
  grid-template-columns:1fr 1fr;gap:6px}
.mega-partners .mega-item{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;transition:.18s}
.mega-partners .mega-item:hover{background:rgba(139,214,0,.10)}
.mega-partners .mega-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.mega-partners .mega-item .mi b{display:block;font-size:14px;color:#fff;font-weight:600}
.mega-partners .mega-item .mi span{font-size:12.5px;color:var(--muted-d)}
@media(max-width:760px){.mega-partners{display:none!important}}

/* W3 Batch 4: baseline explainer block - REMOVED in W4 per Manan's video feedback */
/* (styles kept as comment for reference, section markup removed from all pages) */

/* W3 Batch 6: optimization three-column commerce */
.commerce.commerce-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:1024px){.commerce.commerce-3{grid-template-columns:1fr}}

/* W3 Batch 7: contact two-column */
.contact-2col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
/* Buy-now-only commerce column, used where a page has no booking widget.
   Added 27 Aug 2026 for therapy-entry. */
.buy-only{max-width:560px;margin:0 auto}

@media(max-width:1024px){.contact-2col{grid-template-columns:1fr}}
.contact-2col .c-book-col{min-height:420px}
.contact-2col .c-book-col .book-widget-top{min-height:480px}

/* W3 Batch 8: assessor modal */
.assessor-card{display:flex;gap:20px;align-items:center;background:linear-gradient(135deg,rgba(139,214,0,.08),rgba(79,154,0,.04));border:1px solid rgba(139,214,0,.22);border-radius:18px;padding:28px;cursor:pointer;transition:.22s}
.assessor-card:hover{border-color:rgba(139,214,0,.4);transform:translateY(-2px)}
.assessor-card .ac-ic{width:52px;height:52px;border-radius:14px;background:radial-gradient(circle,var(--green),var(--green2));flex-shrink:0;display:grid;place-items:center;color:#0c1a00;font-family:'Nord Bold','Montserrat';font-weight:600;font-size:21.1px}
.assessor-card .ac-t b{font-family:'Nord Bold','Montserrat';font-size:16.7px;color:var(--ink);display:block;margin-bottom:4px}
.assessor-card .ac-t span{color:var(--muted);font-size:14px}
.assessor-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:.3s}
.assessor-modal.open{opacity:1;visibility:visible}
.assessor-modal .am-scrim{position:absolute;inset:0;background:rgba(8,10,7,.6);backdrop-filter:blur(4px)}
.assessor-modal .am-card{position:relative;background:var(--paper);border-radius:24px;max-width:520px;width:100%;padding:40px;text-align:center;z-index:1;transform:translateY(20px);transition:.3s}
.assessor-modal.open .am-card{transform:none}
.assessor-modal .am-x{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.06);border:none;width:36px;height:36px;border-radius:50%;font-size:18.6px;line-height:1;cursor:pointer;color:var(--ink)}
.assessor-modal .am-ic{width:60px;height:60px;border-radius:16px;background:radial-gradient(circle,var(--green),var(--green2));margin:0 auto 20px;display:grid;place-items:center;color:#0c1a00;font-family:'Nord Bold','Montserrat';font-weight:600;font-size:24.6px}
.assessor-modal h3{font-size:21.1px;margin-bottom:12px}
.assessor-modal p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:24px}
@media(max-width:680px){.assessor-modal .am-card{padding:28px 22px}}

/* W3 Batch 9: about team grid */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}
.team-card{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;overflow:hidden;transition:.22s}
.team-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(20,24,15,.10)}
.team-card img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 25%}
.team-card .tc-info{padding:18px 20px}
.team-card h3{font-size:16.7px;margin-bottom:4px}
.team-card .tc-role{color:var(--muted);font-size:14px;font-weight:600}

/* W3 Batch 10: FAQ two-column accordion */
@media(min-width:900px){.faqacc.faqacc-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;max-width:none;align-items:start}.faqacc.faqacc-2col .faqi{break-inside:avoid}}

/* W3 Batch 3: hero text-link CTA (third action) */
.hbtns .btn-text{font-size:14px;font-weight:600;color:var(--green);margin-left:6px;padding:14px 6px}
.hbtns .btn-text:hover{text-decoration:underline}
.svchero .hbtns .btn-text{color:var(--green)}

/* ============================================================
   W4 : Compactness, topbar one-liner, drawer scroll, therapies
   image panel, hero gradient, services filter, mobile padding
   ============================================================ */

/* W4 Batch 1: topbar genuine one-liner, thin */
.topbar{padding:4px 16px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:430px){.topbar{font-size:11px;padding:4px 12px;letter-spacing:-.01em}}

/* W4 Batch 2: drawer scroll + expandable groups */
.drawer{max-height:calc(100vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer-expand{display:none;padding-left:16px;margin-bottom:6px}
.drawer-expand.open{display:block}
.drawer-expand a{font-size:15.8px!important;padding:7px 0!important}
/* W5 FIX 1: drawer trigger styled identically to .drawer-links a so it reads
   as a control, not decoration. Chevron points down when closed, up when open. */
.drawer-trigger{cursor:pointer;font-family:'Nord Bold','Montserrat',sans-serif;font-size:23.8px;font-weight:600;color:#fff;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);transition:.18s;display:flex;align-items:center;justify-content:space-between;user-select:none}
.drawer-trigger:hover{color:var(--green);padding-left:6px}
.drawer-trigger .dw-arrow{transition:transform .2s;font-size:16.7px;color:var(--green);display:inline-block}
.drawer-trigger.open .dw-arrow{transform:rotate(180deg)}

/* W4 Batch 3: therapies dropdown image panel */
.mega-therapies{grid-template-columns:1fr 1fr 200px!important;gap:6px 14px}
.mega-therapies .mt-preview{grid-column:3;grid-row:1/span 2;border-radius:14px;overflow:hidden;min-height:120px}
.mega-therapies .mt-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
@media(max-width:760px){.mega-therapies .mt-preview{display:none}}

/* W4 Batch 5: buy card included-items list */
.ccard .ck-included{margin:14px 0 0;padding:0;list-style:none}
.ccard .ck-included li{font-size:13.5px;color:var(--muted);font-weight:500;padding:5px 0 5px 22px;position:relative;line-height:1.4}
.ccard .ck-included li::before{content:"✓";position:absolute;left:0;color:var(--green2);font-weight:700}
.ccard.pay-now .ck-included li::before{color:var(--green2)}

/* W4 Batch 6: services wide row commerce */
.commerce-wide{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1024px){.commerce-wide{grid-template-columns:1fr}}

/* W4 Batch 7: hero gradient smoother (no hard edge) + tagline compact */
.fhero .fh-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 20%,rgba(12,14,11,.92) 35%,rgba(12,14,11,.6) 55%,rgba(12,14,11,.25) 75%,transparent 100%)}
.fhero .fh-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--ink),rgba(12,14,11,.5) 15%,transparent 35%)}
@media(max-width:680px){
  .fhero{min-height:auto;padding:100px 0 50px}
  .fhero h1{font-size:clamp(24.1px,7.2vw,33.6px);line-height:1.08}
  .fhero .fh-sub{font-size:15px;margin:14px 0 20px}
  .fhero .fh-chip{margin-bottom:14px;font-size:11px;padding:5px 12px}
  .fhero .fh-stats{gap:18px;margin-top:18px}
  .fhero .fh-stats .s b{font-size:18.6px}
  .fhero .fh-stats .s span{font-size:11px}
}

/* W4 Batch 8 + W5 FIX 2: homepage services filter strip */
.svc-filter-strip{padding:64px 0 0}
.svc-filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.svc-filter-tabs button{font-family:'Montserrat';font-weight:700;font-size:14px;padding:9px 18px;border-radius:99px;border:1.5px solid var(--line-l);background:var(--paper);color:var(--txt-dark);cursor:pointer;transition:.2s}
.svc-filter-tabs button:hover{border-color:var(--ink)}
.svc-filter-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.svc-filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1024px){.svc-filter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-filter-grid{grid-template-columns:1fr}}
.sfc{border:1px solid var(--line-l);border-radius:16px;overflow:hidden;background:var(--paper);transition:.22s;display:flex;flex-direction:column}
.sfc:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(20,24,15,.10)}
.sfc img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sfc .sfc-body{padding:14px 16px;flex:1;display:flex;flex-direction:column}
.sfc .sfc-cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green2);margin-bottom:4px}
.sfc h3{font-size:16px;margin-bottom:3px}
.sfc .sfc-desc{font-size:13px;color:var(--muted);font-weight:500;line-height:1.4;margin-bottom:6px}
.sfc .sfc-price{font-size:13px;color:var(--muted);font-weight:600}
.sfc .sfc-learn{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--green2);display:flex;align-items:center;gap:5px}
.sfc .sfc-learn .ar{transition:.2s}
.sfc:hover .sfc-learn .ar{transform:translateX(4px)}
.sfc.sfc-hide{display:none}
/* W5 FIX 2d: group separators, only visible on All tab */
.sfc-group-label{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 0 4px;border-top:1px solid var(--line-l);margin-top:8px}
.sfc-group-label:first-child{border-top:none;margin-top:0;padding-top:0}
.sfc-group-label.sfc-hide{display:none}

/* W4 Batch 9: mobile compactness */
@media(max-width:680px){
  :root{--pad-mobile:44px}
  .pad{padding:var(--pad-mobile) 0!important}
  .pad-sm{padding:calc(var(--pad-mobile) - 8px) 0!important}
  .sec-head{margin-bottom:24px!important}
  .sec-head h2{font-size:clamp(20.6px,5.4vw,26.9px)!important}
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:24px!important}
  .foot-bottom{flex-direction:row!important;justify-content:space-between!important;gap:8px}
  .foot-tools{flex-wrap:wrap;gap:8px 14px}
  .benefits-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .bcard{padding:16px!important}
  .bcard h3{font-size:16px!important}
  .bcard p{font-size:13px!important}
  .vb-grid{grid-template-columns:1fr 1fr!important}
  .related{grid-template-columns:1fr 1fr!important}
}

/* W4 Batch 10: sysv-rail scroll fix */
@media(max-width:900px){
  .sysv-rail{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;width:100%}
  .sysv-tab{min-width:155px!important;flex:0 0 155px!important;width:155px;max-width:155px}
}

/* ---------------------------------------------------------------
   W3 FIX (Claude, 3 Aug 2026, caught on the live 1440 render).
   Adding the Therapies tab and the Book a consult link pushed the
   nav past its width: "The Protocol", "Services", "Therapies" and
   the phone number were each wrapping to two lines at 1440px.
   Top-level nav items must never wrap. The phone number is the
   least valuable item in a crowded bar (it is in the footer and on
   contact), so it drops out first as width tightens.
--------------------------------------------------------------- */
.nav-links > a,
.nav-inner .btn,
.nav-inner .nav-consult,
.nav-inner .nav-tel,
.nav-inner a[href^="tel:"]{white-space:nowrap}
.brand-by{white-space:nowrap}
@media(max-width:1439px){
  .nav-inner a[href^="tel:"]{display:none}
}
@media(max-width:1200px){
  .nav-links{gap:14px}
}

/* W5 review fix (Claude, 4 Aug 2026): the group labels span the full grid row, so a group
   holding a single card (The flagship, Ongoing) rendered one card beside three empty columns
   and stretched the section to 2363px. The per-card chips (FLAGSHIP / ONGOING CARE / PACKAGE /
   TEST / THERAPY) plus the filter tabs already do the grouping job, so the labels are removed
   from the All view and the 12 cards pack into a dense 4 x 3 grid. */
.sfc-group-label{display:none !important}

/* W5 review fix 2 (Claude, 4 Aug 2026): the service cards dropped to one column below 560px,
   so the homepage's second section became 12 stacked image cards and the page ran to 23,542px
   on a phone. Manan's whole video was about compactness. Two columns with a compacted card,
   matching the 2-col treatment W4 already applied to benefits, vb and related. */
@media(max-width:560px){
  .svc-filter-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .sfc img{aspect-ratio:4/3}
  .sfc .sfc-body,.sfc>div:last-child{padding:12px 12px 14px}
  .sfc h3{font-size:15px;line-height:1.25}
  .sfc .sfc-desc{font-size:12px;line-height:1.35;margin-bottom:5px}
  .sfc .sfc-price{font-size:12.5px}
  .sfc .sfc-learn{font-size:12px;padding-top:6px}
}

/* W5 review fix 3 (Claude, 4 Aug 2026): trust strip moved in the DOM to sit directly under
   the hero, and forced onto ONE line at desktop. It was wrapping to two rows ("HSA / FSA
   eligible" alone on row two) because gap:40px plus flex-wrap could not fit five items.
   Manan: "I had already mentioned it should all be in one line." */
.cred{padding:0;border-top:none}
.cred-row{gap:0 clamp(18px,2.4vw,38px);flex-wrap:nowrap;padding:22px 24px;white-space:nowrap}
.cred-row .ci{font-size:clamp(10.8px,0.9vw,11.8px);gap:8px;flex:0 0 auto}
.cred-row .ci svg{width:17px;height:17px}
@media(max-width:1100px){
  /* below the point where five items fit, scroll horizontally rather than wrap to two rows */
  .cred-row{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;
            scrollbar-width:none;padding:16px 20px;gap:0 22px}
  .cred-row::-webkit-scrollbar{display:none}
}
/* breathing room between the strip and the section that follows it */
.cred + section.svc-filter-strip{padding-top:clamp(52px,5vw,84px)}

/* W5 review fix 4 (Claude, 4 Aug 2026): buy-card pricing and copy.
   The price inside the "Buy now, pay today" card rendered at 15px in muted green, so it read
   as a label rather than a price. The four therapy pages were worse: the heading was the
   raw SKU name "Buy Therapy Entry", all four cards were word-for-word identical, none had the
   included list the other seven pages carry, and a bare "$199" made it look like the therapy
   itself costs $199 when it is the entry visit. Manan: "the pricing inside the buy now thing
   is not proper. The text is not proper." */
.ccard .ck-price{font-size:28.6px;line-height:1.05;color:var(--txt-dark);margin-top:4px}
.ccard.pay-now .ck-price{color:var(--txt-dark)}
.ccard .ck-price small{font-family:'Montserrat';font-size:13px;font-weight:600;color:var(--muted);
  letter-spacing:0;margin-left:6px;white-space:nowrap}
.ccard .ck-price-note{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.5;
  margin:8px 0 0;padding:9px 12px;background:rgba(139,214,0,.09);border-radius:10px}
@media(max-width:560px){.ccard .ck-price{font-size:25.5px}.ccard .ck-price small{display:block;margin:4px 0 0}}

/* ==========================================================================
   SERVICES VERTICAL STRIP (Manan, 4 Aug 2026)
   Replaces the horizontal tab row + 12-card image grid, which ran three screens
   on desktop and six on a phone. Vertical tabs on the left, a compact scrollable
   list on the right. Protocol and Membership merged into one "Start here" group.
   ========================================================================== */
.svc-vstrip{padding:clamp(56px,5vw,88px) 0 clamp(72px,6vw,104px);background:var(--cream)}
.svc-vstrip .sec-head{margin-bottom:38px}

.vsvc{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}

/* left: vertical tabs */
.vsvc-tabs{display:flex;flex-direction:column;gap:8px}
.vsvc-tab{position:relative;text-align:left;background:var(--paper);border:1px solid var(--line-l);
  border-radius:14px;padding:15px 44px 15px 18px;cursor:pointer;font-family:'Montserrat';
  transition:.2s;display:block;width:100%}
.vsvc-tab:hover{border-color:rgba(139,214,0,.55);transform:translateX(2px)}
.vsvc-tab .vt-l{display:block;font-size:16px;font-weight:800;color:var(--txt-dark);line-height:1.2}
.vsvc-tab .vt-s{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.35}
.vsvc-tab .vt-n{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:12px;
  font-weight:800;color:var(--muted);background:var(--cream);border-radius:99px;min-width:24px;
  height:24px;display:flex;align-items:center;justify-content:center}
.vsvc-tab.on{background:var(--ink);border-color:var(--ink)}
.vsvc-tab.on .vt-l{color:#fff}
.vsvc-tab.on .vt-s{color:var(--muted-d)}
.vsvc-tab.on .vt-n{background:var(--green);color:#0c1a00}

/* right: compact rows */
.vsvc-panels{background:var(--paper);border:1px solid var(--line-l);border-radius:16px;overflow:hidden}
.vsvc-panel{display:none}
.vsvc-panel.on{display:block}
.vsvc-row{display:flex;align-items:center;gap:16px;padding:14px 18px;text-decoration:none;
  border-bottom:1px solid var(--line-l);transition:.18s}
.vsvc-row:last-child{border-bottom:none}
.vsvc-row:hover{background:rgba(139,214,0,.07)}
.vsvc-row img{width:74px;height:56px;object-fit:cover;border-radius:10px;flex:none}
.vsvc-row .vr-main{flex:1 1 auto;min-width:0}
.vsvc-row .vr-main b{display:block;font-size:15.5px;font-weight:800;color:var(--txt-dark);line-height:1.25}
.vsvc-row .vr-desc{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.4}
.vsvc-row .vr-price{flex:none;font-size:13.5px;font-weight:700;color:var(--txt-dark);white-space:nowrap}
.vsvc-row .vr-ar{flex:none;color:var(--green2);font-weight:800;font-size:15.8px;transition:.2s}
.vsvc-row:hover .vr-ar{transform:translateX(4px)}

/* tablet: tabs go two-up above the list, still compact */
@media(max-width:1024px){
  .vsvc{grid-template-columns:1fr;gap:14px}
  .vsvc-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .vsvc-tab{padding:13px 40px 13px 15px}
}
/* phone: one tap per group, and the row becomes a 2-line grid so the price stops
   fighting the title for width (it was squeezing rows to 163px each). */
@media(max-width:560px){
  .vsvc-tabs{grid-template-columns:1fr}
  .vsvc-tab .vt-s{display:none}
  .vsvc-tab{padding:12px 40px 12px 14px}
  .vsvc-tab .vt-l{font-size:15px}
  .vsvc-row{display:grid;grid-template-columns:56px 1fr 18px;
    grid-template-areas:"img main ar" "img price ar";
    column-gap:12px;row-gap:5px;align-items:center;padding:12px 13px}
  .vsvc-row img{grid-area:img;width:56px;height:56px;align-self:center}
  .vsvc-row .vr-main{grid-area:main}
  .vsvc-row .vr-main b{font-size:14.5px}
  /* 27 Aug 2026: was clamped to 2 lines, which cut these descriptions off
     mid-sentence on /influencers ("...visceral fat and bone density. The..."").
     3 lines fits every string we actually ship, and the clamp stays so a long
     future string still cannot break the row height. */
  .vsvc-row .vr-desc{font-size:12px;margin-top:2px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .vsvc-row .vr-price{grid-area:price;justify-self:start;font-size:12.5px;color:var(--green2)}
  .vsvc-row .vr-ar{grid-area:ar;align-self:center}
}

/* W6 (Manan, 4 Aug 2026): the entry bar now straddles the bottom edge of the hero instead of
   floating mid-page after the commerce block. Pulled up by roughly half its own height so it
   reads as attached to the hero, with the other half sitting in the section below. */
.entrybar{position:relative;z-index:5;margin:-72px auto 0}
@media(max-width:900px){.entrybar{margin:-56px 16px 0}}
/* the section it now overlaps needs headroom so its own content is not pushed under the bar */
.entrybar + section{padding-top:clamp(70px,7vw,104px)}

/* W6: services strip head is a NORMAL section head, not a second hero (Manan: "the second
   section we have another hero banner, let it be normal"). Left aligned, smaller, no centred
   40px+ display type competing with the real hero above it. */
.svc-vstrip .vs-head{max-width:none;text-align:left;margin:0 0 26px}
.svc-vstrip .vs-head h2{font-size:clamp(19.8px,2vw,25.2px);margin:8px 0 0;line-height:1.2}

/* per-group explainer, sits above that group's rows in the SAME view */
.vsvc-intro{padding:20px 22px 16px;border-bottom:1px solid var(--line-l);background:rgba(139,214,0,.05)}
.vsvc-intro h3{font-size:16px;font-weight:800;margin:0 0 6px;color:var(--txt-dark)}
.vsvc-intro p{font-size:13.5px;font-weight:500;color:var(--muted);margin:0;line-height:1.6;max-width:70ch}
/* the All view lists everything, so cap its height and let it scroll inside the card */
.vsvc-panel[data-p="all"] .vsvc-rows{max-height:420px;overflow-y:auto}
@media(max-width:560px){
  .vsvc-intro{padding:15px 14px 13px}
  .vsvc-intro h3{font-size:15px}
  .vsvc-intro p{font-size:12.5px;line-height:1.55}
  .vsvc-panel[data-p="all"] .vsvc-rows{max-height:396px}
}

/* ==========================================================================
   W8 (Manan, 5 Aug 2026) - three items from the 4 Aug video that were misread
   ========================================================================== */

/* 1. SERVICES PAGE: booking LEFT, services RIGHT, matched heights, edge to edge.
      Manan, 5 Aug 2026: "sizing is not the same ... remove the margins on the left and right
      ... make it a little more compact".
      The two columns now STRETCH to the same row height (grid default), the services grid
      flexes to fill whatever height the MindBody widget renders at, and this one section
      breaks out of the 1200px wrap so it runs nearly full width. */
.svcpage-head{max-width:none;text-align:left;margin:0 0 18px}
.svcpage-head h2{font-size:clamp(18.9px,1.8vw,23.5px);margin:6px 0 0}
.svcpage-head p{font-size:15px;margin-top:8px}

/* break this section out of the centred wrap */
#commerce.pad{padding:44px 0 52px}
#commerce > .wrap{max-width:none;padding:0 28px}

.svcpage-split{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:stretch}
.svcpage-book{display:flex}
.svcpage-book .ccard{margin:0;width:100%}
.svcpage-list{display:flex;flex-direction:column;min-height:0}
.svcpage-list .svc-tabs{margin:0 0 12px;flex:none}
/* fill the row height, scroll inside, so both columns end level */
.svcpage-list .svc-grid{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:8px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;align-content:start}
.svcpage-list .svc-grid::-webkit-scrollbar{width:6px}
.svcpage-list .svc-grid::-webkit-scrollbar-thumb{background:var(--line-l);border-radius:99px}

/* compact card inside this page only */
.svcpage-list .svc .pho{height:132px}
.svcpage-list .svc .body{padding:14px 15px 15px}
.svcpage-list .svc h3{font-size:16px;line-height:1.25;margin-bottom:4px}
.svcpage-list .svc p{font-size:12.5px;line-height:1.45}
.svcpage-list .svc .pricerow{margin-top:12px;gap:8px;flex-wrap:wrap}
.svcpage-list .svc .price{font-size:16px;white-space:nowrap}
.svcpage-list .svc .go{font-size:12.5px;white-space:nowrap}

@media(max-width:1024px){
  /* services first, booking under them */
  .svcpage-split{grid-template-columns:1fr;gap:18px;align-items:start}
  .svcpage-book{order:2}
  .svcpage-list{order:1}
  .svcpage-list .svc-grid{max-height:none;overflow:visible;padding-right:0}
}
@media(max-width:560px){
  #commerce > .wrap{padding:0 16px}
  .svcpage-list .svc-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .svcpage-list .svc .pho{height:104px}
}

/* 2. IV therapy, Go deeper -> "The science" tab. The image is gone, so that panel
      is text only and must not sit in a half-width column with dead space beside it. */
.vpanel-grid.vpanel-solo{grid-template-columns:1fr}
.vpanel-grid.vpanel-solo p{max-width:70ch}

/* 3. "IV add-on optimization options": five cards, one line.
      The base .vb-grid is repeat(4,1fr), which left NAD+ Glutathione Vitamin C Taurine
      on row one and Biotin orphaned on row two. */
.vb-grid.vb-row5{grid-template-columns:repeat(5,1fr);gap:12px}
.vb-grid.vb-row5 .vb-card{padding:20px 16px}
.vb-grid.vb-row5 h4{font-size:16px}
.vb-grid.vb-row5 p{font-size:13px;line-height:1.5}
@media(max-width:1100px){
  /* keep it ONE line: scroll sideways rather than wrap to a second row */
  .vb-grid.vb-row5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .vb-grid.vb-row5::-webkit-scrollbar{display:none}
  .vb-grid.vb-row5 .vb-card{flex:0 0 210px;scroll-snap-align:start}
}

/* Reveal animations are driven by an IntersectionObserver against the VIEWPORT
   (site.js:44). Any element inside an `overflow-y:auto` container that starts below that
   container's visible area never intersects the viewport, so it never receives `.in` and
   stays at opacity:0 forever. Caught on the services split: 14 cards were in the DOM and
   the column rendered blank.
   Rule: any scroll container we introduce opts its children out of the reveal. */
.svcpage-list .svc-grid [data-reveal],
.vsvc-rows [data-reveal]{opacity:1;transform:none;transition:none}

/* ============================================================
   Aug 2026: HEADER BLOCK TIGHTENED
   Reported by Matanel ("the banner is either too low or it's
   covering the beginning of each page") and by Manan (the menu
   merging with the location pill on desktop and mobile).

   Diagnosis, measured live before the change:
     - The nav is position:FIXED, so it floats over the hero and
       never takes flow space.
     - At rest .nav-inner had margin-top:46px, so the pill sat 46px
       below the announcement bar, low enough to cover the first
       element of each hero (the eyebrow chip).
     - On scroll it snapped to margin-top:12px, a 34px jump, which
       read as the pill leaping up and merging into the bar.
     - The pill itself was 73px tall (42px menu button + 2x9px pad),
       heavy for a floating element.

   Fix: one constant 12px gap below the bar in BOTH states, so the
   pill never moves on scroll and can never touch the bar, plus a
   slimmer bar and a slimmer pill.
   ============================================================ */
.topbar{padding:5px 16px;font-size:12px}
.nav{top:var(--topbar-h,26px)}
.nav .nav-inner{margin-top:12px;padding:7px 7px 7px 20px}
.nav.scrolled .nav-inner{margin-top:12px}
.menubtn{width:38px;height:38px}
.menubtn svg{width:17px;height:17px}
/* Clearance for the FIXED nav.
   The nav floats (position:fixed) so it takes no flow space and will sit on
   top of whatever starts the page. --hdr-stack is the full header height
   (bar + gap + pill) plus breathing room, applied to the first block of every
   page family so the pill can never cover the opening content again:
     .fhero      homepage
     .svchero    the 17 service / content pages
     .phero      contact, faq, insights, locations, reviews */
:root{--hdr-stack:126px}
.fhero{padding-top:var(--hdr-stack)}
.svchero{padding-top:var(--hdr-stack)}
.phero{padding-top:var(--hdr-stack)}
@media (max-width:760px){
  :root{--hdr-stack:104px}
  /* keep the bar genuinely thin on phones (this block is last in the file,
     so it has to restate the mobile sizing or it overrides it) */
  .topbar{padding:4px 14px;font-size:11.5px}
  .nav .nav-inner{margin:10px 12px 0;padding:6px 6px 6px 14px}
  .nav.scrolled .nav-inner{margin-top:10px}
  /* slimmer CTA so the pill itself is shorter on phones */
  .nav .nav-cta .btn{padding:11px 18px;font-size:14px}
  .menubtn{width:36px;height:36px}
}
@media (max-width:430px){
  :root{--hdr-stack:96px}
  /* measured on a 390px screen: the line came to 367px against 366px of
     usable width, so it clipped "Stony Brook" by a hair. Tighter side padding
     and tighter separators buy ~10px, enough to fit the whole line. */
  .topbar{padding:4px 10px;font-size:11px;letter-spacing:-.01em}
  .topbar .dot{margin:0 5px}
  .nav .nav-inner{margin-top:9px}
  .nav.scrolled .nav-inner{margin-top:9px}
}

/* ============================================================
   Aug 7 2026: MOBILE HERO POLISH (Manan, from a real iPhone shot)
   1. hero CTAs side by side instead of stacked full-width
   2. trust strip: it already scrolled under 1100px but gave no cue
      that more items existed off screen, so it read as "cut off"
   3. shorter nav pill on phones
   ============================================================ */
@media (max-width:760px){
  /* 1. "Book now" + "See all services" share one row.
        A global mobile rule forces .btn to width:100%, which is what was
        stacking them. Scope an override to the hero only. */
  .fhero .fh-cta{flex-wrap:nowrap;gap:10px}
  .fhero .fh-cta .btn{width:auto;flex:1 1 0;min-width:0;margin-top:0;
    padding:13px 12px;font-size:13.5px;justify-content:center;white-space:nowrap}
  .fhero .fh-cta .btn .ar{margin-left:-2px}

  /* 3. shorter nav pill */
  .nav .nav-cta .btn{padding:10px 16px;font-size:13.5px}
  .menubtn{width:34px;height:34px}
  .menubtn svg{width:16px;height:16px}
}
/* 2. scroll affordance on the credentials strip */
@media (max-width:1100px){
  .cred{position:relative}
  .cred::after{content:"";position:absolute;top:0;right:0;bottom:0;width:46px;pointer-events:none;
    background:linear-gradient(90deg,rgba(12,14,11,0),var(--ink))}
}

/* ============================================================
   COMMERCE V2 — Book Now dominant, Buy Now secondary
   Added 11 Aug 2026. Drives protocol.html, optimization-pack.html,
   metabolic-reset.html. Sourced from Bryan's 4 Aug feedback call:
   "I want them to book. The booking is the most important thing."
   ============================================================ */

/* --- Protocol / Protocol Plus switcher --- */
#commerce .pswitch{display:flex;justify-content:center;margin:0 0 34px}
#commerce .pswitch-in{display:inline-flex;background:rgba(12,14,11,.06);border:1px solid rgba(12,14,11,.10);border-radius:99px;padding:5px;gap:4px}
#commerce .pswitch button{appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.2px;color:var(--muted);padding:11px 22px;border-radius:99px;transition:background .22s ease,color .22s ease,box-shadow .22s ease;white-space:nowrap}
#commerce .pswitch button:hover{color:var(--ink)}
#commerce .pswitch button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(12,14,11,.10)}
#commerce .pswitch .pw-add{display:inline-block;margin-left:7px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--green);vertical-align:1px}
@media(max-width:480px){
  #commerce .pswitch-in{width:100%}
  #commerce .pswitch button{flex:1 1 0;padding:11px 10px;font-size:13px}
  #commerce .pswitch .pw-add{display:block;margin:2px 0 0;font-size:10px}
}

#commerce .ppanel{display:none}
#commerce .ppanel.on{display:block;animation:pfade .3s ease both}
@keyframes pfade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#commerce .ppanel.on{animation:none}}

#commerce .pswitch-foot{text-align:center;color:var(--muted);font-weight:600;margin-top:26px;font-size:14.5px}
#commerce .pswitch-foot a{color:var(--green);font-weight:700}

/* --- Two-column, Book dominant --- */
#commerce .commerce-v2{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
@media(max-width:880px){#commerce .commerce-v2{grid-template-columns:1fr}}

#commerce .commerce-v2 .ccard{border-radius:20px;padding:28px}
#commerce .ccard.primary{border:2px solid var(--green);background:#fff}
#commerce .ccard.secondary{background:rgba(12,14,11,.03);border:1px solid rgba(12,14,11,.10)}
#commerce .ccard.secondary h3{font-size:17.7px}
#commerce .ccard.secondary .ck-price{font-size:22.9px;margin:2px 0 10px}
#commerce .ccard.secondary .hc-wrap{margin-top:4px}
#commerce .ccard.secondary .hc-wrap a{font-weight:700;font-size:15px}

/* --- Inclusion list --- */
#commerce .pinc{margin:14px 0 0;padding:0;list-style:none}
#commerce .pinc li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.5;padding:5px 0;color:var(--ink)}
#commerce .pinc li .ck{color:var(--green);font-weight:800;flex:0 0 auto}
#commerce .pinc li.is-plus{font-weight:700}

/* --- Bundle sub-block (Optimization 5 Pack) --- */
#commerce .ck-bundle{margin-top:22px;padding-top:20px;border-top:1px solid rgba(12,14,11,.12)}
#commerce .ckb-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--green);margin-bottom:6px}
#commerce .ckb-sub{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 10px}

/* =========================================================================
   W8 STEP LADDER - 21 Aug 2026
   From Matt's feedback video 20 Aug: the homepage must read as a descending
   ladder (Protocol first, single tests last), not a catalogue.
   ========================================================================= */
.step-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.step-eyebrow.on-light{color:var(--green2)}
.step-h{font-size:clamp(27px,3.2vw,42px);line-height:1.08;letter-spacing:-.022em;margin:0 0 14px}
.step-sub{font-size:16px;line-height:1.62;max-width:640px;margin:0;color:var(--muted)}
.step-sub.on-dark{color:var(--muted-d)}

/* hero secondary link, replaces the See all services button (Matt, 00:40) */
.fh-cta .fh-alt{font-size:14.5px;font-weight:700;color:rgba(255,255,255,.88);text-decoration:none;align-self:center;line-height:1.4}
.fh-cta .fh-alt u{text-decoration-color:rgba(139,214,0,.65);text-underline-offset:4px}
.fh-cta .fh-alt:hover{color:var(--green)}
@media(max-width:600px){.fh-cta{flex-wrap:wrap}.fh-cta .fh-alt{width:100%;margin-top:4px}}

/* STEP ONE - the flagship */
.flag{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:start;margin-top:38px}
.flagcard{background:rgba(255,255,255,.045);border:1px solid var(--line-d);border-radius:18px;padding:30px}
.flagcard .amt{font-size:clamp(38px,4.6vw,54px);font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff}
.flagcard .amt small{font-size:14.5px;font-weight:700;color:var(--muted-d);letter-spacing:0;margin-left:10px}
.flagcard .note{font-size:13px;color:var(--muted-d);margin:12px 0 20px;line-height:1.55}
.flaglist{list-style:none;margin:0 0 24px;padding:0}
.flaglist li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-d);font-size:14.5px;color:#e8ede4;font-weight:600;line-height:1.45}
.flaglist li .ck{color:var(--green);font-weight:900;flex:0 0 auto}
.flagsteps{display:flex;flex-direction:column;gap:24px;padding-top:4px}
.flagstep{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start}
.flagstep .n{width:42px;height:42px;border-radius:999px;border:1px solid rgba(139,214,0,.45);color:var(--green);display:grid;place-items:center;font-weight:900;font-size:14px}
.flagstep h3{font-size:18px;margin:8px 0 6px;color:#fff}
.flagstep p{font-size:14px;line-height:1.62;color:var(--muted-d);margin:0}
@media(max-width:900px){.flag{grid-template-columns:1fr;gap:30px}}

/* STEP TWO - what happens after */
.after2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.aftercard{border:1px solid var(--line-d);border-radius:18px;padding:28px;background:rgba(255,255,255,.03);display:flex;flex-direction:column}
.aftercard.lit{border-color:rgba(139,214,0,.38);background:rgba(139,214,0,.055)}
.aftercard .tagp{display:inline-block;align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;border:1px solid rgba(139,214,0,.4);color:var(--green);border-radius:999px;padding:5px 12px;margin-bottom:16px}
.aftercard h3{font-size:21px;margin:0 0 8px;color:#fff}
.aftercard .pr{font-size:15.5px;font-weight:800;color:var(--green);margin:0 0 12px}
.aftercard>p{font-size:14.5px;line-height:1.62;color:var(--muted-d);margin:0 0 16px}
.afterlist{list-style:none;margin:0 0 20px;padding:0;flex:1}
.afterlist li{font-size:14px;color:#dbe3d5;padding:7px 0 7px 18px;position:relative;line-height:1.5}
.afterlist li:before{content:"";position:absolute;left:0;top:15px;width:9px;height:1.5px;background:var(--green)}
.afterlist a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(139,214,0,.35)}
.afterlist a:hover{color:var(--green);border-bottom-color:var(--green)}
@media(max-width:820px){.after2{grid-template-columns:1fr}}

/* STEP THREE - packages. Name, price, one line, Learn more. Nothing else. */
.p3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.pcard{background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:26px;display:flex;flex-direction:column}
.pcard .flag-t{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green2);margin-bottom:10px;min-height:13px}
.pcard h3{font-size:19px;margin:0 0 10px}
.pcard .amt{font-size:32px;font-weight:900;letter-spacing:-.025em;line-height:1;margin:0 0 14px}
.pcard>p{font-size:14.5px;line-height:1.62;color:var(--muted);margin:0 0 22px;flex:1}
.pcard .go{font-size:14px;font-weight:800;color:var(--green2);text-decoration:none;display:inline-flex;gap:7px;align-items:center;border-top:1px solid var(--line-l);padding-top:16px;transition:gap .18s ease}
.pcard .go:hover{gap:12px}

/* STEP FOUR - single diagnostic tests, the bottom rung */
.t3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
/* SCOPED 27 Aug 2026. This row component reused the class name .tcard, which was
   already the photo card at line 412 used inside .team on dexa.html and
   home-option-2.html. Being later in the file it won everywhere and turned those
   photo cards into squashed flex rows. It only ever appears inside .t3, so it is
   scoped there. Do not unscope it: two components cannot share a class name. */
.t3 .tcard{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:14px;padding:19px 22px;text-decoration:none;transition:border-color .18s ease,background .18s ease}
.t3 .tcard:hover{border-color:rgba(139,214,0,.45);background:rgba(139,214,0,.05)}
.t3 .tcard b{display:block;font-size:15.5px;color:#fff;margin-bottom:4px}
.t3 .tcard .d{display:block;font-size:12.5px;color:var(--muted-d);line-height:1.45}
.t3 .tcard .amt{font-size:19px;font-weight:900;color:var(--green);white-space:nowrap}
@media(max-width:900px){.p3,.t3{grid-template-columns:1fr}}

.stepnote{font-size:12.5px;color:var(--muted);margin-top:18px}
.stepnote.on-dark{color:var(--muted-d)}

/* compact booking band, preserves the Mindbody general widget that used to
   live inside the retired pricing two-up */
.bookband{text-align:center}
.bookband .bb-k{font-weight:800;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--green2);margin-bottom:8px}
.bookband h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 8px}
.bookband p{font-size:15px;color:var(--muted);margin:0 auto 22px;max-width:520px}

/* W8 - services page flagship band + full-width booking */
.svcflag{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center}
.svcflag .sf-r{background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:18px;padding:26px}
.sf-amt{font-size:clamp(38px,4.4vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;margin-bottom:10px}
.sf-amt small{display:block;font-size:13px;font-weight:700;color:var(--muted-d);letter-spacing:0;margin-top:8px}
.sf-note{font-size:12.5px;line-height:1.55;color:var(--muted-d);margin:0 0 18px}
.sf-inc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sf-inc span{font-size:12.5px;font-weight:700;color:#dbe3d5;border:1px solid var(--line-d);border-radius:999px;padding:7px 14px}
@media(max-width:900px){.svcflag{grid-template-columns:1fr;gap:28px}}
.bookwide{margin-top:26px}
.bookwide .mindbody-widget{width:100%}

/* W8 - on the services page the browse list is the whole point, so it expands
   fully instead of scrolling inside a 420px window (a nested scrollbar hid 6 of
   the 12 services). On the homepage the capped version is gone entirely. */
#browse .vsvc-rows{max-height:none;overflow:visible}
#browse .vsvc{align-items:start}

/* W8 fix: on phones the hero CTA row is nowrap, which crushed the green button
   to 26px next to the new "See all options" link. Measured 21 Aug 2026 at 390px. */
@media(max-width:700px){
  .fhero .fh-cta{flex-direction:column;align-items:stretch;flex-wrap:wrap;gap:14px}
  .fhero .fh-cta .btn{width:100%;justify-content:center;flex:0 0 auto}
  .fhero .fh-cta .fh-alt{width:100%;margin-top:0;text-align:left;align-self:flex-start}
}

/* W8 fix: the measure tabs were a horizontal scroller with no affordance, so on a
   phone only 2 of the 4 were visible and nobody would know Bloodwork was there.
   Measured 21 Aug 2026 at 390px: 644px of content inside a 354px rail. */
@media(max-width:760px){
  .sysv-rail{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-x:visible}
  .sysv-rail .sysv-tab{width:auto;min-width:0}
  .sysv-rail .sysv-tab .sv-t{font-size:13px;line-height:1.25}
}

/* W8b - Protocol / Protocol Plus switch on the homepage step one.
   Same component as protocol.html #commerce, dark variant, left aligned inside
   the flag column instead of centred. Manan, 21 Aug 2026. */
#protocol .flagcol{display:flex;flex-direction:column}
#protocol .pswitch{display:flex;justify-content:flex-start;margin:0 0 18px}
#protocol .pswitch-in{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:99px;padding:5px;gap:4px}
#protocol .pswitch button{appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.2px;color:var(--muted-d);padding:10px 18px;border-radius:99px;line-height:1;transition:background .18s ease,color .18s ease}
#protocol .pswitch button:hover{color:#fff}
#protocol .pswitch button[aria-selected="true"]{background:var(--green);color:#0C0E0B}
#protocol .pswitch button[aria-selected="true"] .pw-add{color:#0C0E0B;opacity:.72}
#protocol .pswitch .pw-add{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--green);vertical-align:1px}
#protocol .ppanel{display:none}
#protocol .ppanel.on{display:block;animation:pfade .3s ease both}
#protocol .flaglist li.is-plus{color:#fff}
#protocol .flaglist li.is-plus .ck{color:var(--green)}
@media(max-width:560px){
  #protocol .pswitch-in{width:100%}
  #protocol .pswitch button{flex:1 1 0;padding:11px 8px;font-size:12.5px}
  #protocol .pswitch .pw-add{display:block;margin:3px 0 0;font-size:9.5px}
}

/* =========================================================================
   W8c PROOF RAIL - 21 Aug 2026
   Replaces the old .caro member-stories carousel and the separate quotes block.
   Two rails in one compact section: videos to watch, Google reviews to read.
   The old carousel arrows did nothing: scroll-snap-type:x mandatory cancelled
   the programmatic scrollBy, measured 21 Aug (scrollLeft stayed at 0 after two
   clicks). This uses proximity snapping, which does not fight scrollBy.
   ========================================================================= */
.proof-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.proof-head .ph-l{max-width:640px}
.gline{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:13.5px;color:var(--muted-d);margin-top:12px}
.gline .st{color:#f5b400;letter-spacing:1.5px;font-size:14px}
.gline b{color:#fff;font-weight:800;font-size:15px}
.gline .gsep{opacity:.4}

.rail-nav{display:flex;gap:9px;flex:0 0 auto}
.rail-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d);background:transparent;color:#dbe3d5;cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}
.rail-nav button:hover:not(:disabled){background:var(--green);color:#0C0E0B;border-color:var(--green)}
.rail-nav button:disabled{opacity:.28;cursor:default}

.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;scroll-padding-left:0}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:8px}

/* video card. 236px wide means roughly 4.6 visible at 1152px instead of 2.7 */
.vcard{flex:0 0 auto;width:236px;aspect-ratio:9/13;scroll-snap-align:start;border-radius:16px;overflow:hidden;position:relative;background:#000;border:1px solid var(--line-d);cursor:pointer}
.vcard video,.vcard img{width:100%;height:100%;object-fit:cover;display:block}
.vcard:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(8,10,7,.62) 66%,rgba(8,10,7,.93));pointer-events:none}
.vcard .vq{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}
.vcard .vq p{color:#fff;font-size:12.5px;font-weight:500;line-height:1.4;margin:0 0 7px}
.vcard .vq .who{color:rgba(255,255,255,.8);font-weight:600;font-size:11.5px}
.vcard .vq .who span{color:var(--green);font-weight:700}
.vcard .vplay{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none;transition:opacity .2s ease}
.vcard .vplay svg{width:42px;height:42px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.vcard.playing .vplay{opacity:0}
.vcard:hover{border-color:rgba(139,214,0,.45)}

/* review card */
.rcard{flex:0 0 auto;width:318px;scroll-snap-align:start;background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:16px;padding:22px 22px 18px;display:flex;flex-direction:column}
.rcard .stars{color:#f5b400;letter-spacing:1.5px;font-size:13px;margin-bottom:12px}
.rcard p{font-size:13.5px;line-height:1.62;color:#dbe3d5;margin:0 0 16px;flex:1}
.rcard .who{font-size:12.5px;color:var(--muted-d);font-weight:600}
.rcard .who b{color:#fff;font-weight:800}
.rcard .who .g{color:var(--green);font-weight:700}

.rail-lab{display:flex;align-items:center;gap:12px;margin:34px 0 14px;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-d)}
.rail-lab:after{content:"";flex:1;height:1px;background:var(--line-d)}
.proof-foot{margin-top:22px;font-size:13px;color:var(--muted-d)}
.proof-foot a{color:var(--green);font-weight:700;text-decoration:none}

@media(max-width:760px){
  .proof-head{align-items:flex-start}
  .rail-nav{display:none}          /* thumb swipe is the affordance on a phone */
  .rail{gap:12px}
  .vcard{width:180px}
  .rcard{width:280px}
}

/* W8c: #proof follows step four, which is also bg-ink, so the two paddings
   stacked into a ~200px dead band. Measured at 1440 on 21 Aug. */
#proof{padding-top:0}
#proof .wrap{padding-top:78px}
.rail-lab .rl-inline{margin-left:auto;order:3}
.rail-lab .rl-inline button{width:34px;height:34px;font-size:13px}
.rail-lab:after{order:2}
@media(max-width:760px){#proof .wrap{padding-top:54px}.rail-lab .rl-inline{display:none}}
/* W8c: step four already carries ~78px bottom padding, so proof only needs a
   small top gap. Measured 21 Aug: 156px of dead black before this. */
#proof .wrap{padding-top:22px}
@media(max-width:760px){#proof .wrap{padding-top:14px}}


/* ---- 21 Aug 2026, Bryan/Matanel call ---- */
/* PACK15. Packages only, never the Protocol (Bryan, 27:23). */
.promo15{display:inline-block;margin:0 0 22px;padding:13px 18px 14px;border-radius:12px;
  background:rgba(139,214,0,.10);border:1px solid rgba(139,214,0,.30);
  color:#dfeccf;font-weight:700;font-size:14px;line-height:1.4}
/* The label and the code sit on ONE line. This used to be a column flex, which
   pushed the <b> onto its own row and made the box look broken. */
.promo15 b{display:inline-block;color:var(--green);font-weight:800;font-size:13px;
  letter-spacing:.08em;background:rgba(139,214,0,.15);border:1px solid rgba(139,214,0,.32);
  border-radius:7px;padding:3px 9px;margin-left:8px;vertical-align:baseline}
.promo15 span{display:block;font-weight:600;font-size:12.5px;color:#a9b8a0;
  margin-top:8px;letter-spacing:0;line-height:1.45}
/* Hero sits a little higher under the header (Matanel, 15:33). */
.fhero{padding-bottom:64px}
@media(max-width:900px){.fhero{padding:150px 0 60px}}
/* Health Pathfinder rail. Left edge so it never fights the chat launcher.
   Bryan, 34:22: "you were getting a lot of leads from that". */
.pf-rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:44;display:block;
  background:rgba(12,14,11,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--green);font-family:'Montserrat',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.4px;
  padding:18px 10px;border:1px solid rgba(139,214,0,.42);border-left:none;border-radius:0 12px 12px 0;
  text-decoration:none;writing-mode:vertical-rl;text-orientation:mixed;
  box-shadow:0 8px 26px rgba(0,0,0,.28);transition:padding .2s,background .2s,color .2s}
.pf-rail:hover{padding-right:14px;background:var(--green);color:#0C0E0B;border-color:var(--green)}
@media(max-width:900px){.pf-rail{display:none}}

/* Gift card block. Mind Body gift-card widget 10182, same one DexaFit NY uses.
   Matanel asked for this on the 21 Aug call, 24:42. */
.giftcard{margin-top:24px;display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;
  background:var(--ink);color:#fff;border-radius:16px;padding:24px 26px;border:1px solid rgba(139,214,0,.28)}
.giftcard h3{font-size:20px;margin:6px 0 8px;color:#fff}
.giftcard p{font-size:14px;color:#c9d3c0;line-height:1.6;margin:0}
.giftcard .eyebrow{color:var(--green)}
.giftcard .hc-btn,.giftcard a{display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:var(--green);color:#0C0E0B!important;font-weight:800;font-size:14px;padding:13px 20px;border-radius:99px;text-decoration:none}
@media(max-width:760px){.giftcard{grid-template-columns:1fr;gap:14px}}


/* ================= WORK WITH US (W9), 21 Aug 2026 =================
   Rows 12, 13, 14 of _work/LEDGER-CALL-2026-08-21.md.
   Matanel's constraint at 19:56 was "simplify, simplify", so: two audiences,
   one scroll, no segment picker. */

/* Tier cards reuse .p3 / .pcard from the homepage packages block. */
.tiername{font-size:14px;font-weight:700;color:var(--green);letter-spacing:.3px;margin:-4px 0 10px}
.tierlist{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.tierlist li{position:relative;padding-left:22px;font-size:14px;line-height:1.55;color:var(--muted)}
.tierlist li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* Sample partner landing page. A real screenshot of dancebody.html, baked to jpg.
   Hairline border, never a box-shadow: Apple's PDF renderer flattens shadows. */
.samplelp{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:center;text-decoration:none;
  background:#11150d;border:1px solid rgba(139,214,0,.28);border-radius:16px;padding:22px;transition:border-color .25s}
.samplelp:hover{border-color:rgba(139,214,0,.6)}
.slp-shot{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.10);line-height:0}
.slp-shot img{width:100%;height:auto;display:block}
.slp-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--green);margin-bottom:10px}
.slp-note h3{color:#fff;font-size:22px;line-height:1.2;margin:0 0 10px}
.slp-note p{color:#c9d3c0;font-size:14.5px;line-height:1.65;margin:0 0 16px}
.slp-go{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:800;font-size:14px}
.samplelp:hover .slp-go span{transform:translateX(4px)}
.slp-go span{transition:transform .25s}
@media(max-width:880px){.samplelp{grid-template-columns:1fr;gap:20px;padding:16px}
  .slp-note h3{font-size:19px}}

/* Creator flow, four numbered steps. Same 01/02/03/04 pattern the DexaFit
   influencer page already uses, so partners see one consistent system. */
.flowsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px;position:relative}
.fstep{background:#fff;border:1px solid var(--line-l,#E3E6E0);border-radius:12px;padding:22px 20px}
.fstep .fs-n{display:block;font-family:'Nord Bold','Montserrat',sans-serif;font-size:26px;font-weight:800;
  color:var(--green);line-height:1;margin-bottom:12px}
.fstep > b{display:block;font-size:16px;margin-bottom:7px}
.fstep p strong{font-weight:800;color:var(--ink)}
.fstep p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
@media(max-width:960px){.flowsteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.flowsteps{grid-template-columns:1fr}}

/* Compliance line. Creators promising outcomes on a medical service is a real
   liability, so this is stated on the page, not buried in an onboarding email. */
.compliance-note{margin-top:30px;display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:12px;
  background:rgba(139,214,0,.10);border:1px solid rgba(139,214,0,.30)}
.compliance-note b{font-size:14.5px}
.compliance-note span{font-size:13.5px;line-height:1.65;color:var(--muted)}

/* Talk-to-us card beside the form. */
.talkcard{background:var(--ink);color:#fff;border-radius:16px;padding:26px;border:1px solid rgba(139,214,0,.28)}
.talkcard .eyebrow{color:var(--green)}
.talkcard h3{color:#fff;font-size:21px;margin:8px 0 10px}
.talkcard p{color:#c9d3c0;font-size:14px;line-height:1.65;margin:0 0 18px}
.calbtns{display:flex;flex-direction:column;gap:10px}
.calbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--green);
  color:#0C0E0B;font-weight:800;font-size:14px;padding:13px 20px;border-radius:99px;text-decoration:none;
  transition:transform .2s}
.calbtn:hover{transform:translateY(-2px)}
.partnerfacts{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.partnerfacts div{background:var(--cream,#F6F5F1);border:1px solid var(--line-l,#E3E6E0);border-radius:12px;padding:16px 18px}
.partnerfacts b{display:block;font-family:'Nord Bold','Montserrat',sans-serif;font-size:22px;font-weight:800;line-height:1.1}
.partnerfacts span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px}
@media(max-width:520px){.partnerfacts{grid-template-columns:1fr}}

/* W9 mobile eyebrow: the middot separator strands itself on a line of its own
   at 390px, so drop it and let the two halves stack. */
@media(max-width:560px){
  .step-eyebrow span[style]{display:none}
  .step-eyebrow{line-height:1.5}
}


/* ============ CREATOR PROGRAM (influencers.html), 21 Aug 2026 ============
   Manan: centered hero text, then a moving strip of real collaborations
   directly underneath, hover to play, click for sound. */

.infhero{position:relative;background:linear-gradient(160deg,#11150d,#0b0d09);color:#fff;
  padding:128px 0 0;overflow:hidden}
.infhero-in{max-width:820px;margin:0 auto;text-align:center}
.infhero .crumb-c{justify-content:center;display:flex;gap:6px;margin-bottom:14px}
.infhero .chip{background:rgba(139,214,0,.14)}
.infhero h1{font-size:clamp(32px,4.6vw,56px);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:16px 0 0}
.infhero .lead{color:#c9d3c0;max-width:620px;margin:20px auto 0;font-size:clamp(14px,1.4vw,16.5px);line-height:1.65}
.hbtns-c{justify-content:center;margin-top:26px}
@media(max-width:900px){.infhero{padding:118px 0 0}}

/* The strip itself. Full bleed, edges faded so it reads as continuous motion. */
.infstrip{position:relative;margin-top:34px;padding:0 0 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.infstrip-track{display:flex;gap:14px;width:max-content;padding:0 14px;
  animation:infscroll var(--inf-dur,45s) linear infinite}
.infstrip:hover .infstrip-track{animation-play-state:paused}
@keyframes infscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.infstrip-cap{display:block;text-align:center;margin-top:18px;font-size:12px;font-weight:600;
  letter-spacing:.4px;color:#8fa085}

.infcard{position:relative;flex:0 0 auto;width:178px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0e1109;cursor:pointer;padding:0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s}
.infcard:hover,.infcard:focus-visible{transform:translateY(-6px);border-color:rgba(139,214,0,.65)}
.infcard-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.infcard-play{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  background:rgba(12,14,11,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;transition:opacity .25s}
.infcard-play svg{width:14px;height:14px;fill:#fff}
.infcard:hover .infcard-play{opacity:0}
.infcard-meta{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;text-align:left;
  background:linear-gradient(0deg,rgba(8,10,7,.92),rgba(8,10,7,.55) 55%,transparent);
  display:flex;flex-direction:column;gap:1px}
.infcard-meta b{color:#fff;font-size:13px;font-weight:800;line-height:1.2}
.infcard-meta span{color:var(--green);font-size:11.5px;font-weight:700;letter-spacing:.2px}
@media(max-width:600px){.infcard{width:142px}.infstrip{margin-top:34px}}

/* Lightbox. Sound only ever plays from here, never from the strip. */
.inf-lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,8,5,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.inf-lb.on{display:flex}
.inf-lb-in{display:flex;flex-direction:column;align-items:center;gap:12px}
.inf-lb video{width:min(360px,86vw);aspect-ratio:9/16;border-radius:16px;background:#000;
  border:1px solid rgba(255,255,255,.14);object-fit:cover}
.inf-lb-who{color:var(--green);font-weight:800;font-size:15px;text-decoration:none;letter-spacing:.2px}
.inf-lb-who:hover{text-decoration:underline}
.inf-lb-x{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:none;
  background:rgba(255,255,255,.10);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.inf-lb-x:hover{background:rgba(255,255,255,.20)}

@media(prefers-reduced-motion:reduce){
  .infstrip-track{animation:none}
  .infstrip{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .infcard:hover{transform:none}
}

/* Cross-link card between the two Work With Us pages. */
.creatorsplit{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:center;text-decoration:none;
  background:var(--ink);color:#fff;border-radius:16px;padding:30px 32px;border:1px solid rgba(139,214,0,.28);
  transition:border-color .25s}
.creatorsplit:hover{border-color:rgba(139,214,0,.65)}
.creatorsplit .eyebrow{color:var(--green)}
.creatorsplit h2{color:#fff;font-size:clamp(21px,2.4vw,28px);margin:8px 0 10px;line-height:1.2}
.creatorsplit p{color:#c9d3c0;font-size:14.5px;line-height:1.65;margin:0 0 16px;max-width:560px}
.cs-r{display:flex;flex-direction:column;gap:12px}
.cs-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:14px 18px}
.cs-stat b{display:block;font-family:'Nord Bold','Montserrat',sans-serif;font-size:24px;font-weight:800;color:var(--green);line-height:1.1}
.cs-stat span{display:block;font-size:12.5px;color:#a9b8a0;font-weight:600;margin-top:3px}
@media(max-width:760px){.creatorsplit{grid-template-columns:1fr;padding:22px}.cs-r{flex-direction:row}.cs-stat{flex:1}}

/* Strip caption: hover wording on pointer devices, tap wording on touch. */
.cap-touch{display:none}
@media(hover:none),(max-width:760px){.cap-desk{display:none}.cap-touch{display:inline}}

/* ============ "ARE YOU A..." PICKER (work-with-us.html), 21 Aug 2026 ============ */
#areyou{scroll-margin-top:110px}
.ayu-head{max-width:720px}
.ayu-dots{color:var(--green)}
.ayu-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 26px}
.ayu-tab{display:flex;align-items:center;gap:14px;text-align:left;padding:18px 20px;cursor:pointer;
  background:#fff;border:1px solid var(--line-l,#E3E6E0);border-radius:14px;font-family:inherit;
  transition:border-color .22s,box-shadow 0s,transform .22s}
.ayu-tab:hover{transform:translateY(-2px);border-color:rgba(139,214,0,.55)}
.ayu-tab.on{border-color:var(--green);background:var(--ink);}
.ayu-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(139,214,0,.14);transition:background .22s}
.ayu-ic svg{width:21px;height:21px;fill:none;stroke:var(--green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ayu-tab.on .ayu-ic{background:rgba(139,214,0,.22)}
.ayu-t b{display:block;font-size:15.5px;line-height:1.25}
.ayu-t span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.ayu-tab.on .ayu-t b{color:#fff}
.ayu-tab.on .ayu-t span{color:#a9b8a0}

.ayu-panel{display:none}
.ayu-panel.on{display:block;animation:ayufade .32s ease}
@keyframes ayufade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ayu-intro{max-width:660px;margin-bottom:22px}
.ayu-intro h3{font-size:clamp(19px,2.2vw,24px);margin:0 0 8px;line-height:1.25}
.ayu-intro p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0}
.ayu-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wcard{background:#fff;border:1px solid var(--line-l,#E3E6E0);border-radius:14px;padding:20px}
.wcard .w-n{display:block;font-family:'Nord Bold','Montserrat',sans-serif;font-size:13px;font-weight:800;
  color:var(--green);letter-spacing:.6px;margin-bottom:10px}
.wcard b{display:block;font-size:15px;margin-bottom:7px;line-height:1.3}
.wcard p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.ayu-note{margin-top:18px;font-size:13px;color:var(--muted);font-weight:600}
.ayu-cta{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:20px 24px;border-radius:14px;background:rgba(139,214,0,.10);border:1px solid rgba(139,214,0,.30)}
.ayu-cta span{font-size:14.5px;font-weight:700}
@media(max-width:960px){.ayu-picker{grid-template-columns:1fr}.ayu-ways{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ayu-ways{grid-template-columns:1fr}.ayu-cta{flex-direction:column;align-items:flex-start}}

/* W9 form column. The right rail is much shorter than the form, which left a tall
   band of empty cream beside it. Sticky so it travels with the form instead. */
#apply .contact-2col{align-items:start}
#apply .c-book-col{position:sticky;top:110px}
@media(max-width:900px){#apply .c-book-col{position:static}}

/* ═══ 25 Aug 2026 — Bryan feedback items 2 + mobile topbar ══════════════════
   ITEM 2, hero sat too far below the top banner. .fhero is min-height:100vh
   with align-items:center, so the gap between the fixed header and the hero
   chip GREW with the screen: measured 137px at 1440x900 and 227px at 1440x1080.
   Bryan is on a large monitor, which is why he saw it and we did not. Anchoring
   the hero text to the top and deriving the offset from the LIVE --header-h
   (set in site.js) makes the gap identical at every viewport height.
   Only .fhero changes. .svchero and .phero keep --hdr-stack, their gap is fine. */
/* body already carries padding-top:var(--topbar-h) (set in site.js), so the
   hero box starts BELOW the topbar. Subtract it or the gap is double-counted. */
.fhero{align-items:flex-start;
  padding-top:calc(var(--header-h, 110px) - var(--topbar-h, 29px) + 96px)}
@media(max-width:900px){
  .fhero{padding-top:calc(var(--header-h, 91px) - var(--topbar-h, 25px) + 72px)}}

/* MOBILE TOPBAR CLIP. Line ~1463 sets white-space:nowrap + ellipsis, so on a
   390px screen the strip read "Manhattan · Bellmore · Stony Bro...". Stony Brook
   is a real location and was being cut off every time. Let it wrap; --topbar-h
   is measured after layout so the nav offset follows automatically. */
@media(max-width:520px){
  .topbar{white-space:normal;text-overflow:clip;line-height:1.35;padding:5px 12px}
}

/* Adding About to the desktop bar pushed the pill content to 1215px against a
   1180px max-width, which squeezed the logo out and threw "Book a consult"
   outside the pill. Give the pill a little more room on wide screens only.
   Work With Us stays in the drawer and footer: Bryan said it is not needed for
   launch, and a third extra link does not fit at any width. (25 Aug 2026) */
@media(min-width:1300px){ .nav .nav-inner{max-width:1260px} }

/* ═══ MEET THE TEAM — about.html, restored 25 Aug 2026 ══════════════════════
   Bryan large on the left as founder with a longer bio, the four staff in a
   2x2 to the right, per Manan. Scoped to .teamgrid so no other page can
   regress off this block. Name + role are also burned into each JPEG, so the
   text here is for screen readers, SEO and small screens where the burned-in
   label gets tight. */
.teamgrid{display:grid;grid-template-columns:1.05fr 1.25fr;gap:26px;align-items:start}
.tm{position:relative;border-radius:20px;overflow:hidden;background:var(--ink2);
    border:1px solid rgba(255,255,255,.10)}
.tm-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#151a12}
.tm-ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tm:hover .tm-ph img{transform:scale(1.035)}
.tm-body{padding:18px 20px 22px}
.tm-body h3{font-size:19px;font-weight:600;color:#fff;margin:0 0 3px;letter-spacing:-.01em}
.tm-role{display:block;font-size:12.5px;font-weight:600;letter-spacing:.05em;
         text-transform:uppercase;color:var(--green)}
/* 25 Aug: match the source 1000x1200 exactly. The name is burned into the
   bottom of the file, so a landscape crop removes the label as well as the face. */
.tm-lead .tm-ph{aspect-ratio:5/6}
.tm-lead .tm-body{padding:24px 26px 28px}
.tm-lead .tm-body h3{font-size:29px;margin-bottom:5px}
.tm-lead .tm-role{font-size:13px;margin-bottom:14px}
.tm-lead .tm-body p{font-size:15px;line-height:1.62;color:#c9d3c0;margin:0 0 12px;font-weight:500}
.tm-lead .tm-body p:last-child{margin-bottom:0}
.tm-rest{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tm-rest .tm-body{padding:15px 17px 19px}
@media(max-width:1000px){
  .teamgrid{grid-template-columns:1fr;gap:22px}
}
@media(max-width:560px){
  .tm-rest{grid-template-columns:1fr 1fr;gap:14px}
  .tm-rest .tm-body{padding:12px 13px 15px}
  .tm-rest .tm-body h3{font-size:15.5px}
  .tm-rest .tm-role{font-size:10.5px;letter-spacing:.04em}
  .tm-lead .tm-body h3{font-size:24px}
}

/* ═══ HOW TO PREPARE — service pages, added 25 Aug 2026 (Bryan item 6) ══════ */
.prepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.prep-i{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px 24px}
.prep-i h3{font-size:16.5px;font-weight:600;margin:0 0 7px;letter-spacing:-.01em}
.prep-i p{font-size:14.2px;line-height:1.58;color:var(--muted);margin:0;font-weight:500}
.prep-note{margin-top:18px;background:var(--ink);color:#dfeccf;border-radius:16px;
  padding:18px 22px;font-size:14.5px;line-height:1.6;font-weight:500}
/* only the leading label is a block; inline <b> inside the sentence must stay inline
   or the copy breaks onto separate lines (caught in the 25 Aug render) */
.prep-note>b:first-child{color:var(--green);display:block;margin-bottom:4px;font-size:15px}
.prep-note b{color:var(--green)}
.prep-foot{margin-top:16px;font-size:14px;color:var(--muted);font-weight:500}
.prep-foot a{color:var(--ink);font-weight:700;text-decoration:underline}
@media(max-width:1000px){.prepgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prepgrid{grid-template-columns:1fr;gap:12px}.prep-i{padding:18px 17px 19px}}
/* name + designation are burned into the team photos (Manan, 25 Aug), so the
   markup copy is for screen readers and SEO only, never rendered twice */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tm-lead .tm-body{padding-top:22px}


/* 27 Aug 2026: adding the Partners nav item tipped the header flex over and
   crushed .brand-marks to 0px wide, so the Prefusion logo vanished at 1440 and
   1600 while still "loading" fine. The brand must never be the thing that gives
   way; the nav links can wrap or tighten instead. */
.nav-inner .brand-lockup{flex:0 0 auto}
.nav-inner .brand-marks{flex:0 0 auto;min-width:max-content}
.nav-inner .brand-marks .logo-img{flex:0 0 auto;width:auto;max-width:none}



/* ============================================================
   HEADER FIT LADDER, 27 Aug 2026
   Measured: the 7 nav links need 1224px, and 1336px with the phone. The header
   was capped at 1258px usable, so with the new Partners item the hamburger and
   Book a consult spilled outside the rounded bar. This was already tight before
   Partners; the nav only handed over to the drawer below 760px, so 760 to 1280
   had been squeezing for a while.
   Rather than delete the phone number from a clinic's header, the header is
   allowed to use more of a wide viewport, and below that the least essential
   things drop in order: phone, then the whole link row (the drawer already
   carries every link including Work With Us and Creators).
   ============================================================ */
@media(min-width:1081px){
  .nav-inner{padding:14px 18px;gap:14px}
  .nav-links{gap:18px}
  .nav-cta{gap:10px}
}
/* >=1400: everything fits, header widened to 1400 so it can */
@media(min-width:1400px){ .nav-inner{max-width:1400px} }
/* 1300 to 1399: drop the phone, 7 links + both CTAs still fit */
@media(max-width:1399px){ .nav-phone{display:none} }
/* <=1299: hand the links to the drawer, keep the CTAs and hamburger */
@media(max-width:1299px){ .nav .nav-links{display:none} }