/* Seymour Beauty Aesthetics — Cypress House design system */
:root{
  --ink:#143D35; --mineral:#587169; --paper:#F4F0E8;
  /* accent set — overridable at runtime by the ?accent= theme switcher */
  --brass:#3F6153; --brass-rgb:63,97,83;
  --clay:#6B7F63;  --clay-rgb:107,127,99;
  --gold:#A6CBB8;  --gold-rgb:166,203,184; --gold-2:#8DB8A2;
  /* big figures on dark panels: warm cream, never sage-on-green */
  --figure:#F0EBDF;
  --shell:#FAF8F3; --line:rgba(20,61,53,.14); --body-text:#3d5a52;
  --display:"Fraunces",serif; --body:"Manrope",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--brass)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12}
p{color:var(--body-text)}
strong{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:transform .25s ease, box-shadow .25s ease;position:relative;overflow:hidden;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,61,53,.18)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-brass{background:var(--brass);color:#fff}
.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s ease}
.btn:hover .shine{transform:translateX(120%)}

/* nav */
nav.site{position:sticky;top:0;z-index:50;background:rgba(244,240,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
/* transparent over the video hero, solid once you scroll past it */
nav.site.over{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom-color:transparent}
nav.site.over .nav-links a,nav.site.over .nav-burger{color:#fff}
nav.site.over .nav-links a::after{background:var(--gold)}
nav.site.over .nav-cta{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(8px)}
nav.site .lw{display:none}
nav.site.over .lw{display:block}
nav.site.over .ld{display:none}
nav.site.over.stuck{background:rgba(244,240,232,.94);backdrop-filter:blur(12px);border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(20,61,53,.07)}
nav.site.over.stuck .nav-links a,nav.site.over.stuck .nav-burger{color:var(--ink)}
nav.site.over.stuck .nav-links a::after{background:var(--brass)}
nav.site.over.stuck .nav-cta{background:var(--ink);border-color:transparent;color:var(--paper);backdrop-filter:none}
nav.site.over.stuck .lw{display:none}
nav.site.over.stuck .ld{display:block}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:18px}
.nav-logo img{height:52px;width:auto;max-width:none}
.foot-badge img{height:110px;width:auto;max-width:none}
.nav-links{display:flex;gap:24px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.nav-links a{position:relative;padding:4px 0;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{white-space:nowrap}
.nav-burger{display:none;background:none;border:0;font-size:26px;color:var(--ink);cursor:pointer}

/* ---------- full-screen video hero (home) ---------- */
.hero-v{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#05100e}
.hero-v .hv-poster,.hero-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-v .hv-poster{z-index:0}
/* two stacked videos: the wave-in sits on top and plays once per visit, the
   orchid loop runs underneath, and the wave fades out onto it. */
.hero-v .hv-loop{z-index:1;opacity:0;transition:opacity 1.4s ease}
.hero-v.vid-ready .hv-loop{opacity:1}
.hero-v .hv-wave{z-index:2;opacity:0;transition:opacity .8s ease}
.hero-v.wave-in .hv-wave{opacity:1}
.hero-v.wave-done .hv-wave{opacity:0}
.hero-v.wave-gone .hv-wave{display:none}
/* While she is waving there is no text to protect, so the scrim backs off and
   the headline gets out of the way.
   The visible state carries NO opacity declaration at all — .waving is the only
   thing that ever hides them, and JS removes it to reveal. That matters: if a
   transition never advances (background tab, suspended animations, a frozen
   compositor) the resting computed value is still 1, so the headline cannot get
   stuck invisible. The transition lives on the base rule so the reveal still
   fades wherever frames are actually being produced. */
.hero-v .hv-in,.hero-v .hv-scrim{transition:opacity .9s ease}
.hero-v .hv-cue{transition:opacity .5s ease}
.hero-v.waving .hv-in{opacity:0}
.hero-v.waving .hv-scrim{opacity:.28}
.hero-v.waving .hv-cue{opacity:0}
@media(prefers-reduced-motion:reduce){
  .hero-v .hv-wave,.hero-v .hv-in,.hero-v .hv-scrim,.hero-v .hv-cue{transition:none}
}
.hv-scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(100deg,rgba(5,16,14,.95) 0%,rgba(5,16,14,.86) 26%,rgba(5,16,14,.42) 55%,rgba(5,16,14,.08) 76%,rgba(5,16,14,.45) 100%),
  linear-gradient(to top,rgba(5,16,14,.72),rgba(5,16,14,0) 46%)}
.hv-in{position:relative;z-index:3;width:100%;padding-top:132px;padding-bottom:clamp(74px,11vh,128px)}
.hv-copy{max-width:660px;color:var(--paper)}
.hv-copy .kicker{color:var(--gold-2)}
.hv-copy h1{font-size:clamp(40px,5.4vw,76px);color:#fff;margin:20px 0 22px;letter-spacing:-.015em;line-height:1.05}
.hv-copy p{color:rgba(233,239,236,.85);font-size:clamp(16px,1.2vw,19px);max-width:50ch;margin-bottom:34px}
.hv-cta{display:flex;gap:14px;flex-wrap:wrap}
.hv-cta .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.hv-cta .btn-ghost:hover{background:rgba(255,255,255,.1)}
/* trust row inside the hero */
.hv-meta{display:flex;gap:clamp(20px,3vw,46px);flex-wrap:wrap;margin-top:42px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.hv-meta div{min-width:0}
.hv-meta b{display:block;font-family:var(--display);font-weight:500;font-size:17px;color:var(--figure);line-height:1.25}
.hv-meta span{display:block;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:rgba(201,214,209,.72);margin-top:5px}
.hv-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.6)}
.hv-cue i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.55),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* hero (legacy split — interior use) */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:74vh}
.hero-media{position:relative;overflow:hidden}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:64px 7vw 64px 5vw;background:var(--paper)}
.hero-copy h1{font-size:clamp(38px,4.4vw,60px);margin:18px 0 20px}
.hero-copy p{font-size:17px;max-width:46ch;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* page hero (interior pages) */
.page-hero{padding:76px 0 48px;border-bottom:1px solid var(--line);background:var(--shell)}
.page-hero h1{font-size:clamp(34px,3.8vw,52px);margin:14px 0 14px;max-width:22ch}
.page-hero p.lead{font-size:17px;max-width:62ch}
.crumbs{font-size:12px;letter-spacing:.08em;color:var(--mineral);margin-bottom:26px}
.crumbs a:hover{color:var(--brass)}

/* marquee */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;padding:15px 0;border-block:1px solid var(--line)}
.marquee-track{display:flex;gap:56px;white-space:nowrap;animation:mq 32s linear infinite;width:max-content}
.marquee span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:56px}
.marquee i{font-style:normal;color:var(--brass)}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:88px 0}
.sec-head{max-width:660px;margin-bottom:52px}
.sec-head h2{font-size:clamp(28px,3.2vw,42px);margin-top:14px}
.sec-head p{margin-top:12px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border-radius:20px;padding:32px 28px 36px;background:var(--shell);border:1px solid var(--line);transition:transform .3s ease, box-shadow .3s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,61,53,.12)}
.card.alt{background:var(--brass);color:#fff;border-color:transparent}
.card.alt .kicker{color:rgba(255,255,255,.75)}
.card.alt p{color:rgba(255,255,255,.85)}
.card h3{font-size:23px;margin:12px 0 10px}
.card p{font-size:14.5px}
.card ul{list-style:none;margin-top:16px;font-size:13.5px;font-weight:600}
.card li{padding:8px 0;border-top:1px solid rgba(127,127,127,.22)}
.card li a{display:flex;justify-content:space-between;align-items:center}
.card li a::after{content:"→";color:var(--brass)}
.card.alt li a::after{color:#fff}

/* service grid (treatments hub) */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-row{display:grid;grid-template-columns:60px 1fr auto;gap:22px;align-items:center;background:var(--shell);border:1px solid var(--line);border-radius:18px;padding:24px 26px;transition:transform .25s ease, box-shadow .25s ease}
.svc-row:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,61,53,.12)}
.svc-row .no{font-family:var(--display);font-size:22px;color:var(--brass)}
.svc-row h3{font-size:21px}
.svc-row p{font-size:13.5px;margin-top:3px}
.svc-row .go{color:var(--brass);font-size:20px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .photo{border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-height:clamp(360px,52vh,520px);margin-inline:auto}
.split .photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.split .photo:hover img{transform:scale(1.04)}
.split h2{font-size:clamp(28px,3.2vw,40px);margin:14px 0 16px}
.split p{margin-bottom:14px}
.tick{list-style:none;margin-top:8px}
.tick li{padding:10px 0 10px 30px;position:relative;font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
.tick li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--brass);opacity:.9}

/* editorial band */
.band{position:relative;min-height:460px;display:flex;align-items:flex-end;overflow:hidden;border-radius:28px}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,30,26,.74),rgba(10,30,26,.05) 55%)}
.band-copy{position:relative;z-index:2;color:var(--paper);padding:44px;max-width:580px}
.band-copy h2{font-size:clamp(26px,3vw,38px);margin:12px 0 10px}
.band-copy p{color:#d8e2dd}

/* dark CTA band */
.cta-band{background:var(--ink);color:var(--paper);border-radius:32px;padding:64px 8%;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(var(--brass-rgb),.4)}
.cta-band::after{content:"";position:absolute;left:-140px;bottom:-140px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(var(--brass-rgb),.25)}
.cta-band h2{font-size:clamp(28px,3.2vw,42px);margin:12px 0 14px}
.cta-band p{color:#c9d6d1;max-width:56ch;margin:0 auto 30px}

/* membership perks */
.perks{list-style:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px 28px}
.perks li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;font-size:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.perks li:last-child{border-bottom:0}
.perks b{color:var(--gold);white-space:nowrap;font-family:var(--display);font-size:16px}

/* photo slot placeholder (awaiting Sam's shoot) */
.photo-slot{border:2px dashed rgba(var(--brass-rgb),.55);border-radius:24px;background:repeating-linear-gradient(45deg,rgba(var(--brass-rgb),.05),rgba(var(--brass-rgb),.05) 12px,transparent 12px,transparent 24px),var(--shell);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 26px;color:var(--body-text);min-height:300px}
.photo-slot .tagno{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--brass);border:1px solid rgba(var(--brass-rgb),.5);border-radius:999px;padding:6px 14px;margin-bottom:14px;background:#fff}
.photo-slot .cam{font-size:30px;margin-bottom:10px}
.photo-slot p{font-size:13.5px;max-width:34ch;font-weight:600}
.photo-slot.video{border-style:dashed}
.split .photo-slot{aspect-ratio:4/5;min-height:0}
.hero-media .photo-slot{height:100%;border-radius:0;border-width:0 2px 0 0}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{font-family:var(--display);font-size:19px;padding:16px 34px 16px 0;cursor:pointer;list-style:none;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;color:var(--brass);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 18px;font-size:15px;color:var(--body-text);max-width:70ch}

/* info fields */
.field{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-top:14px}
.field label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mineral)}
.field div{font-size:15px;font-weight:600;margin-top:3px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery figure{border-radius:18px;overflow:hidden;aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gallery figure:hover img{transform:scale(1.06)}

/* prose (blog) */
.prose{max-width:760px}
.prose h2{font-size:28px;margin:38px 0 14px}
.prose h3{font-size:21px;margin:28px 0 10px}
.prose p{margin-bottom:16px;font-size:16px}
.prose ul,.prose ol{margin:0 0 16px 22px;color:var(--body-text)}
.prose li{margin-bottom:8px}
.prose blockquote{border-left:3px solid var(--brass);padding:6px 0 6px 20px;font-family:var(--display);font-size:19px;margin:22px 0}

/* footer */
footer.site{background:var(--ink);color:#c9d6d1;padding:68px 0 40px;margin-top:88px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:44px;align-items:start}
.foot-badge{background:var(--paper);border-radius:20px;padding:18px;display:inline-block}
.foot-badge img{height:110px}
.foot h4{color:var(--paper);font-family:var(--display);font-size:18px;margin-bottom:14px}
.foot a{display:block;padding:5px 0;font-size:14px}
.foot a:hover{color:var(--brass)}
.foot p{color:#c9d6d1}
.legal{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;font-size:12px;color:#A3B9B1;flex-wrap:wrap;gap:10px}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--shell);border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;text-align:center}
.stat b{font-family:var(--display);font-weight:500;font-size:44px;color:var(--ink);line-height:1;display:block}
.stat b small{font-size:22px;color:var(--brass)}
.stat label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mineral);margin-top:10px}
/* areas served - distance meters */
.geo{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.geo-stat b{font-family:var(--display);font-weight:500;font-size:76px;color:var(--ink);line-height:1}
.geo-stat b small{font-size:26px;color:var(--brass);margin-left:4px}
.geo-stat label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mineral);margin-top:8px;max-width:26ch}
.geo-right{display:flex;flex-direction:column}
.town{display:grid;grid-template-columns:110px 1fr 74px;gap:16px;align-items:center;padding:13px 10px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.town:first-child{border-top:1px solid var(--line)}
.town:hover{background:var(--shell);padding-left:18px}
.town b{font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink)}
.town span{font-size:12px;font-weight:800;color:var(--brass);text-align:right}
.meter{height:4px;border-radius:99px;background:#E9E3D6;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--mineral),var(--brass));transition:width 1.1s cubic-bezier(.2,.7,.2,1) .2s}
.geo-right.in .meter i{width:var(--w)}
/* journal cards */
.jgrid{display:grid;grid-template-columns:1.25fr 1fr;grid-auto-rows:auto;gap:16px}
.jcard{position:relative;background:var(--shell);border:1px solid var(--line);border-radius:18px;padding:24px 26px 20px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease, box-shadow .25s ease;overflow:hidden}
.jcard::before{content:"";position:absolute;top:0;left:0;height:2.5px;width:0;background:linear-gradient(90deg,var(--brass),var(--clay));transition:width .45s cubic-bezier(.2,.7,.2,1)}
.jcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,61,53,.12)}
.jcard:hover::before{width:100%}
.jcard.feat{grid-row:span 2;background:var(--ink);border-color:var(--ink);padding:34px 34px 28px}
.jcard.feat h3{color:var(--paper);font-size:clamp(22px,2.2vw,30px)}
.jcard.feat .jex{color:#c9d6d1;font-size:14px;flex:1}
.jtop{display:flex;justify-content:space-between;align-items:center}
.jtag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--brass);border:1px solid rgba(var(--brass-rgb),.4);border-radius:999px;padding:4px 12px}
.jix{font-family:var(--display);font-size:15px;color:var(--mineral)}
.jcard.feat .jix{color:rgba(var(--gold-rgb),.55)}
.jcard h3{font-size:18px;line-height:1.3;flex:1}
.jcard .jgo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--brass);display:flex;align-items:center;gap:8px}
.jcard .jgo em{font-style:normal;transition:transform .3s ease}
.jcard:hover .jgo em{transform:translateX(6px)}
/* membership calculator */
.presets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px}
.presets>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mineral)}
.preset{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 16px;font-family:var(--body);font-size:12px;font-weight:800;cursor:pointer;transition:all .25s ease}
.preset:hover{border-color:var(--brass);transform:translateY(-2px)}
.preset.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:48px 50px;box-shadow:0 24px 60px rgba(20,61,53,.08)}
.crow{margin-top:26px}
.crow label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.04em;margin-bottom:12px}
.crow output{font-family:var(--body);font-size:13px;font-weight:800;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 14px;min-width:58px;text-align:center}
.crow input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--brass) var(--fill,40%),#E9E3D6 var(--fill,40%));outline:none;cursor:pointer}
.crow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--brass);border:3px solid #fff;box-shadow:0 2px 10px rgba(20,61,53,.35);transition:transform .2s}
.crow input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.crow input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--brass);border:3px solid #fff;box-shadow:0 2px 10px rgba(20,61,53,.35)}
.crow input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(var(--brass-rgb),.3)}
.cout{background:var(--ink);border-radius:20px;padding:32px 34px;align-self:start;color:#c9d6d1}
.cbig{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.cbig:first-child{padding-top:0}
.cbig label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#A3B9B1;display:block;margin-bottom:2px}
.cbig b{font-family:var(--display);font-weight:500;font-size:40px;color:var(--figure);line-height:1.15}
.cbig span{display:block;font-size:12px;color:#A3B9B1;font-weight:600;margin-top:2px}
.cout p{color:#A3B9B1}
/* inline quiz */
.quizbox{background:var(--ink);border-radius:26px;padding:48px 50px;color:var(--paper);position:relative;overflow:hidden}
.quizbox::before{content:"";position:absolute;right:-130px;top:-130px;width:380px;height:380px;border-radius:50%;border:1px solid rgba(var(--brass-rgb),.35)}
.qz-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;position:relative;z-index:2}
.qz-left h2{font-size:clamp(26px,3vw,38px);margin:12px 0 8px;color:var(--paper)}
.qz-left p{color:#c9d6d1}
.qz-chips{margin-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.qz-chip{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.14);background:transparent;color:var(--paper);padding:15px 6px;font-family:var(--body);font-size:14.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:all .25s ease}
.qz-chip i{font-style:normal;font-family:var(--display);font-size:13px;color:rgba(var(--gold-rgb),.6);min-width:24px;transition:color .25s}
.qz-chip em{font-style:normal;margin-left:auto;color:var(--brass);opacity:0;transform:translateX(-8px);transition:all .25s ease}
.qz-chip:hover{padding-left:14px;color:var(--gold)}
.qz-chip:hover em{opacity:1;transform:none}
.qz-chip.on{color:var(--gold)}
.qz-chip.on i{color:var(--brass)}
.qz-chip.on em{opacity:1;transform:none}
.qz-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:32px 34px;display:flex;flex-direction:column;justify-content:center;min-height:340px}
.qz-empty{text-align:center;color:#A3B9B1}
.qz-empty p{font-size:14px;line-height:1.7;color:#A3B9B1}
.qz-ring{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 18px;border:1px dashed rgba(var(--brass-rgb),.6);border-radius:50%;color:var(--gold);font-size:20px;animation:slowspin 24s linear infinite}
.qz-match .kicker{color:var(--gold-2)}
.qz-match h3{font-size:26px;color:var(--paper);margin:8px 0 10px;font-family:var(--display);font-weight:500}
.qz-match p{color:#d8e2dd;font-size:14.5px}
.qz-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.qz-actions .btn-ghost{border-color:rgba(255,255,255,.3);color:var(--paper)}
.qz-book{display:inline-block;margin-top:18px;font-size:12.5px;font-weight:700;color:var(--gold-2);letter-spacing:.06em}
.qz-book:hover{color:var(--gold)}
.qz-match.pop{animation:qzpop .5s cubic-bezier(.2,.7,.2,1)}
@keyframes qzpop{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:none}}
/* first-visit steps - connected timeline */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;padding-top:8px}
.steps::before{content:"";position:absolute;top:33px;left:calc(12.5% + 26px);right:calc(12.5% + 26px);height:2px;background:linear-gradient(90deg,var(--brass),rgba(var(--brass-rgb),.25))}
.step{position:relative;text-align:center;padding:0 6px}
.step b{font-family:var(--display);font-weight:500;font-size:20px;color:var(--brass);display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 16px;background:var(--paper);border:2px solid var(--brass);border-radius:50%;position:relative;z-index:2;box-shadow:0 0 0 6px var(--paper)}
.step h3{font-size:17.5px;margin:0 0 8px}
.step p{font-size:13.5px;max-width:30ch;margin:0 auto}
/* ---------- reviews carousel ---------- */
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.rev-nav{display:flex;gap:10px}
.rev-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:17px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center}
.rev-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-2px)}
.rev-btn[disabled]{opacity:.3;cursor:default;transform:none;background:transparent;color:var(--ink);border-color:var(--line)}
.rev-vp{overflow:hidden;margin:0 -6px;padding:6px}
.rev-track{display:flex;gap:20px;transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform}
.rev-card{flex:0 0 calc((100% - 20px)/2);background:var(--shell);border:1px solid var(--line);border-radius:22px;padding:32px 32px 28px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.rev-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brass),rgba(var(--brass-rgb),.15))}
.rev-stars{color:var(--brass);font-size:14px;letter-spacing:3px}
.rev-card blockquote{font-family:var(--display);font-size:19px;line-height:1.45;color:var(--ink);flex:1}
.rev-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.rev-who{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.04em}
.rev-src{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mineral)}
.rev-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--brass);border:1px solid rgba(var(--brass-rgb),.4);border-radius:999px;padding:4px 11px}
.rev-dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.rev-dots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:all .3s ease}
.rev-dots button.on{background:var(--brass);width:24px;border-radius:99px}
.rev-ask{text-align:center;margin-top:26px;font-size:13.5px;color:var(--body-text)}
.rev-ask a{color:var(--brass);font-weight:800}

/* ---------- funnel cards (guides / quizzes) ---------- */
.funnel{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:22px}
.fcard{position:relative;overflow:hidden;border-radius:20px;padding:30px 30px 26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:10px;transition:transform .3s ease,background .3s ease}
.fcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.fcard .kicker{color:var(--gold-2)}
.fcard h3{font-size:21px;color:var(--paper);margin-top:4px}
.fcard p{color:#c9d6d1;font-size:14px;flex:1}
.fcard .fgo{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:9px;margin-top:6px}
.fcard .fgo em{font-style:normal;transition:transform .3s ease}
.fcard:hover .fgo em{transform:translateX(6px)}
.fcard .fno{position:absolute;right:22px;top:16px;font-family:var(--display);font-size:52px;color:rgba(var(--gold-rgb),.13);line-height:1}

/* ---------- studio gallery strip ---------- */
.gal-wide{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:600px}
.gal-wide>*{border-radius:20px;overflow:hidden;min-height:0}
.gal-wide>*:first-child{grid-row:span 2}
.gal-wide img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.gal-wide>*:hover img{transform:scale(1.05)}
.gal-wide .photo-slot{min-height:0;padding:20px 16px}
.gal-wide .photo-slot p{font-size:12px}
.gal-wide .photo-slot .cam{font-size:22px;margin-bottom:6px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.marquee-track{animation:none}}

@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:52vh}
  .cards,.split,.svc-grid,.calc{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .jgrid,.qz-grid,.geo{grid-template-columns:1fr}
  .jcard.feat{grid-row:auto}
  .foot{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 24px 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0}
  .nav-burger{display:block}
  /* the open mobile panel is always paper — force ink links even over the video hero */
  nav.site.over .nav-links.open a{color:var(--ink)}
  nav.site.over .nav-links.open a::after{background:var(--brass)}
  .rev-card{flex:0 0 100%}
  .funnel{grid-template-columns:1fr}
  .gal-wide{grid-template-columns:1fr 1fr;height:auto;grid-template-rows:none}
  .gal-wide>*{aspect-ratio:4/5}
  .gal-wide>*:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/10}
}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media(max-width:560px){
  .foot{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .jgrid{grid-template-columns:1fr}
  /* compact everything on phones */
  section{padding:52px 0}
  .sec-head{margin-bottom:30px}
  .hero-copy{padding:40px 24px 48px}
  .hero-media{min-height:46vh}
  .page-hero{padding:52px 0 36px}
  .cards{gap:12px}
  .card{padding:20px 20px 22px;border-radius:16px}
  .card h3{font-size:19px;margin:8px 0 6px}
  .card p{font-size:13.5px}
  .card ul{margin-top:10px}
  .card li{padding:6px 0;font-size:12.5px}
  .svc-row{padding:16px 18px;grid-template-columns:34px 1fr;gap:12px;border-radius:14px}
  .svc-row .no{font-size:16px}
  .svc-row h3{font-size:17px}
  .svc-row p{font-size:12.5px}
  .svc-row .go{display:none}
  .svc-grid{gap:10px}
  .stat{padding:16px 12px 14px;border-radius:14px}
  .stat b{font-size:30px}
  .stat b small{font-size:15px}
  .stat label{font-size:9.5px;margin-top:6px}
  .town{grid-template-columns:86px 1fr 64px;gap:10px;padding:11px 4px}
  .town b{font-size:15px}
  .geo-stat b{font-size:56px}
  .qz-panel{min-height:0;padding:24px 22px;margin-top:6px}
  .steps::before{display:none}
  .step{text-align:left;padding:0}
  .step b{margin:0 0 10px}
  .step p{margin:0;max-width:none}
  .quizbox{padding:30px 22px;border-radius:20px}
  .qz-chip{padding:10px 15px;font-size:12px}
  .qz-result{padding:20px 18px}
  .steps{grid-template-columns:1fr;gap:10px}
  .step{padding:18px 20px}
  .band{min-height:340px}
  .band-copy{padding:26px}
  .jcard{padding:20px 20px 18px}
  .gallery{gap:10px}
  /* portrait photos in split sections must not eat the whole phone screen */
  .split .photo,.split .photo-slot{max-width:215px;margin-left:auto;margin-right:auto;border-radius:18px}
  .split .photo{aspect-ratio:4/5}
  .split .photo-slot{aspect-ratio:4/5;padding:24px 18px}
  .split{gap:30px}
  /* video hero on phones */
  .hero-v{min-height:92svh}
  /* the blooms sit right-of-centre — keep them in frame when the crop tightens */
  .hero-v video,.hero-v .hv-poster{object-position:64% center}
  .hv-in{padding-top:104px;padding-bottom:60px}
  .hv-copy h1{font-size:clamp(34px,10vw,44px);margin:14px 0 16px}
  .hv-copy p{font-size:15.5px;margin-bottom:26px}
  .hv-cta .btn{padding:13px 22px;font-size:11px}
  .hv-meta{margin-top:28px;padding-top:20px;gap:18px 26px}
  .hv-meta b{font-size:15px}
  .hv-meta span{font-size:9.5px;letter-spacing:.15em}
  .hv-cue{display:none}
  .hv-scrim{background:linear-gradient(to top,rgba(5,16,14,.94) 0%,rgba(5,16,14,.7) 42%,rgba(5,16,14,.28) 70%,rgba(5,16,14,.5) 100%)}
  /* reviews + gallery */
  .rev-card{padding:24px 22px 20px;border-radius:16px}
  .rev-card blockquote{font-size:17px}
  .rev-head{margin-bottom:24px}
  .rev-btn{width:40px;height:40px}
  .fcard{padding:22px 20px 20px;border-radius:16px}
  .fcard h3{font-size:19px}
  .gal-wide{gap:10px}
  .gal-wide>*{border-radius:14px}
  .marquee{padding:11px 0}
  .calc{padding:26px 22px;gap:26px}
  .cout{padding:22px 20px}
  .cbig b{font-size:30px}
  footer.site{margin-top:52px;padding:52px 0 32px}
}

/* ---------- reviews: continuous right-to-left marquee ---------- */
.rmq{overflow:hidden;position:relative;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rmq-track{display:flex;gap:18px;width:max-content;animation:rmq 165s linear infinite}
.rmq:hover .rmq-track{animation-play-state:paused}
@keyframes rmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rq{flex:0 0 372px;background:var(--shell);border:1px solid var(--line);border-radius:20px;
  padding:26px 28px 22px;display:flex;flex-direction:column;gap:12px;white-space:normal;position:relative;overflow:hidden}
.rq::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brass),rgba(var(--brass-rgb),.15))}
.rq .rq-stars{color:var(--brass);font-size:13px;letter-spacing:3px}
.rq blockquote{font-family:var(--display);font-size:16.5px;line-height:1.5;color:var(--ink);flex:1}
.rq .rq-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.rq .rq-who{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.04em}
.rq .rq-src{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--mineral);margin-top:3px}
.rq .rq-tag{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--brass);border:1px solid rgba(var(--brass-rgb),.4);border-radius:999px;padding:4px 10px;white-space:nowrap}
.rev-score{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rev-score b{font-family:var(--display);font-weight:500;font-size:44px;line-height:1;color:var(--ink)}
.rev-score .rs-stars{color:var(--brass);font-size:17px;letter-spacing:3px}
.rev-score span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mineral)}

/* ---------- compact treatment tiles (no numbers, no scroll-reveal) ---------- */
.tx{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.txc{position:relative;overflow:hidden;background:var(--shell);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background .3s ease,border-color .3s ease}
.txc h3{font-size:17px;line-height:1.25;display:flex;align-items:center;justify-content:space-between;gap:10px}
.txc h3 em{font-style:normal;color:var(--brass);opacity:0;transform:translateX(-6px);transition:all .3s ease;font-size:15px}
.txc p{font-size:12.5px;line-height:1.5;margin:0}
.txc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,61,53,.12);border-color:rgba(var(--brass-rgb),.5);background:#fff}
/* the brand shelf: five lines, name set large under a small category tag */
.brandshelf .txc{padding:20px}
.bs-img{display:flex;align-items:flex-end;justify-content:center;height:158px;margin:2px 0 16px}
.bs-img img{max-height:158px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(20,61,53,.16))}
@media(max-width:560px){.bs-img{height:126px;margin-bottom:13px}.bs-img img{max-height:126px}}
.shf-tag{display:block;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:var(--brass);margin-bottom:8px}
.brandshelf .txc h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;display:block;margin-bottom:4px}
.brandshelf .txc p{font-size:13px}
.brandshelf .txc a{color:var(--brass);font-weight:700;border-bottom:1px solid rgba(var(--brass-rgb),.35)}
@media(max-width:900px){.brandshelf{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.brandshelf{grid-template-columns:1fr}}
.txc:hover h3 em{opacity:1;transform:none}
/* click: brief ink wash before the page transition takes over */
.txc .wash{position:absolute;inset:0;background:var(--ink);opacity:0;transform:scale(.6);border-radius:50%;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s ease;pointer-events:none}
.txc.go .wash{opacity:.14;transform:scale(3)}
.txc.go{transform:translateY(-4px) scale(.985)}

/* ---------- full-bleed page hero (interior pages) ---------- */
.phero{position:relative;min-height:56svh;display:flex;align-items:flex-end;overflow:hidden;background:#05100e}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero .ph-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(5,16,14,.92) 0%,rgba(5,16,14,.76) 32%,rgba(5,16,14,.34) 62%,rgba(5,16,14,.42) 100%),
  linear-gradient(to top,rgba(5,16,14,.8),rgba(5,16,14,0) 55%)}
.ph-in{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:52px;color:var(--paper)}
.ph-in .kicker{color:var(--gold-2)}
.ph-in h1{font-size:clamp(34px,4.4vw,60px);color:#fff;margin:14px 0 16px;max-width:20ch;line-height:1.06}
.ph-in p.lead{font-size:17px;max-width:60ch;color:rgba(233,239,236,.86)}
.ph-in .crumbs{color:rgba(201,214,209,.75);margin-bottom:20px}
.ph-in .crumbs a:hover{color:var(--gold)}
.ph-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.ph-cta .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.ph-cta .btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ---------- membership pop-up (bottom-right, every page but /membership) ---------- */
.mpop{position:fixed;right:20px;bottom:calc(20px + var(--ckbar-h,0px));z-index:70;width:min(340px,calc(100vw - 40px));
  background:var(--ink);color:var(--paper);border-radius:20px;padding:22px 24px 20px;
  box-shadow:0 24px 60px rgba(5,16,14,.4);transform:translateY(150%);opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.mpop.in{transform:none;opacity:1}
.mpop .kicker{color:var(--gold-2)}
.mpop h4{font-family:var(--display);font-weight:500;font-size:20px;color:#fff;margin:8px 0 8px;line-height:1.2}
.mpop p{color:#c9d6d1;font-size:13px;margin-bottom:16px}
.mpop .btn{padding:11px 20px;font-size:11px}
.mpop .mx{position:absolute;top:4px;right:6px;background:none;border:0;color:#A3B9B1;font-size:22px;cursor:pointer;
  line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .2s ease,color .2s ease}
.mpop .mx:hover,.mpop .mx:focus-visible{color:#fff;background:rgba(255,255,255,.12);outline:none}

/* ---------- journal bookshelf ---------- */
.shelf-wrap{position:relative;padding:20px 0 0}
.shelf{display:flex;align-items:flex-end;justify-content:center;gap:14px;min-height:330px;perspective:1600px}
.book{position:relative;width:78px;height:290px;border-radius:3px 7px 7px 3px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transform-origin:bottom center;box-shadow:0 10px 24px rgba(20,61,53,.22);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;overflow:hidden}
.book::after{content:"";position:absolute;left:9px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.book::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.12),transparent 42%)}
.book b{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:500;
  font-size:15.5px;color:var(--paper);letter-spacing:.01em;max-height:250px;overflow:hidden;padding:14px 0;position:relative;z-index:2}
.book i{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;
  letter-spacing:.14em;font-weight:800;color:rgba(255,255,255,.55);writing-mode:vertical-rl;z-index:2}
.book:hover{transform:translateY(-30px) rotate(-2.5deg);box-shadow:0 32px 54px rgba(20,61,53,.32)}
.book:nth-child(5n+1){background:linear-gradient(160deg,#1B4A40,#12332C)}
.book:nth-child(5n+2){background:linear-gradient(160deg,var(--brass),#2F4A40)}
.book:nth-child(5n+3){background:linear-gradient(160deg,#2C5348,#183B33)}
.book:nth-child(5n+4){background:linear-gradient(160deg,var(--clay),#3B5145)}
.book:nth-child(5n+5){background:linear-gradient(160deg,#20463C,#0F2C26)}
.shelf-plank{height:16px;border-radius:4px;background:linear-gradient(180deg,#22463D,#143D35);box-shadow:0 16px 30px rgba(20,61,53,.28);margin-top:-4px}
.shelf-note{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mineral);margin-top:22px}

/* ---------- membership: tier board + perks ---------- */
.mtier{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 34px 30px;
  display:flex;flex-direction:column;gap:12px;transition:transform .3s ease,box-shadow .3s ease}
.mcard:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(20,61,53,.12)}
.mcard.feat{background:var(--ink);border-color:var(--ink)}
.mcard.feat h3,.mcard.feat .mprice b{color:#fff}
.mcard.feat p,.mcard.feat li{color:#c9d6d1}
.mcard.feat .kicker{color:var(--gold-2)}
.mcard.feat li{border-color:rgba(255,255,255,.14)}
.mprice{display:flex;align-items:baseline;gap:8px;padding-bottom:6px}
.mprice b{font-family:var(--display);font-weight:500;font-size:46px;line-height:1;color:var(--ink)}
.mprice span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mineral)}
.mlist{list-style:none;margin-top:4px}
.mlist li{padding:11px 0 11px 26px;position:relative;font-size:14px;border-bottom:1px solid var(--line);color:var(--body-text)}
.mlist li:last-child{border-bottom:0}
.mlist li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--brass)}
.mcard.feat .mlist li::before{background:var(--gold)}
.mbadge{position:absolute;top:-11px;right:26px;background:var(--brass);color:#fff;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;border-radius:999px;padding:6px 14px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .tx{grid-template-columns:repeat(2,1fr)}
  .mtier{grid-template-columns:1fr}
  .phero{min-height:46svh}
  .ph-in{padding-top:128px;padding-bottom:42px}
  .shelf{gap:9px}
  .book{width:60px;height:230px}
  .book b{font-size:13px;max-height:195px}
}
@media(max-width:560px){
  .tx{grid-template-columns:1fr;gap:9px}
  .txc{padding:14px 16px;border-radius:12px}
  .txc h3{font-size:15.5px}
  .txc p{font-size:12px}
  .rq{flex:0 0 290px;padding:22px 22px 18px;border-radius:16px}
  .rq blockquote{font-size:15px}
  .rev-score b{font-size:34px}
  .phero{min-height:42svh}
  .ph-in{padding-top:104px;padding-bottom:34px}
  .mpop{right:12px;bottom:calc(12px + var(--ckbar-h,0px));left:12px;width:auto;padding:18px 20px 16px;border-radius:16px}
  .mcard{padding:24px 22px 22px;border-radius:16px}
  .mprice b{font-size:36px}
  /* bookshelf doesn't work at phone width — fall back to a scroll strip */
  .shelf{gap:8px;min-height:0;overflow-x:auto;justify-content:flex-start;padding-bottom:8px;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .book{width:54px;height:196px;flex:0 0 auto}
  .book b{font-size:12px;max-height:160px}
}
@media (prefers-reduced-motion: reduce){
  .rmq-track{animation:none}
  .book:hover{transform:none}
  .txc.go .wash{transition:none}
}

/* gift-card link in the nav */
.nav-gift{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink);white-space:nowrap;padding:4px 2px;border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease}
.nav-gift:hover{border-bottom-color:var(--brass);color:var(--brass)}
nav.site.over .nav-gift{color:#fff}
nav.site.over .nav-gift:hover{border-bottom-color:var(--gold);color:var(--gold)}
nav.site.over.stuck .nav-gift{color:var(--ink)}
nav.site.over.stuck .nav-gift:hover{color:var(--brass)}

/* treatments-hub card variant: two actions */
.tx-2{grid-template-columns:repeat(2,1fr);gap:16px}
.txc-2{padding:26px 28px 24px;gap:8px;cursor:default}
.txc-2:hover{transform:translateY(-4px)}
.txc-2 h3{font-size:21px}
.txc-2 p{font-size:13.5px;flex:1}
.txa{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.txa .btn{padding:11px 20px;font-size:11px}
@media(max-width:960px){.tx-2{grid-template-columns:1fr}}
@media(max-width:560px){
  .txc-2{padding:18px 18px 18px}
  .txc-2 h3{font-size:18px}
  .txa .btn{padding:10px 16px;font-size:10.5px}
  .hero-v{min-height:100svh}
}

/* ---- accent text on dark surfaces: always the light tone (never sage-on-green) ---- */
.quizbox .kicker,.cta-band .kicker,.cout .kicker,
.jcard.feat .jtag,.jcard.feat .jgo,
.qz-chip i,.qz-chip em,.qz-book,
.mcard.feat .kicker,.mcard.feat .mprice span{color:var(--gold)}
.jcard.feat .jtag{border-color:rgba(var(--gold-rgb),.45)}
.qz-chip:hover,.qz-chip.on{color:var(--gold)}
.qz-chip.on i{color:var(--gold)}
.cta-band p,.quizbox .qz-left p{color:#cddbd5}
.cout p{color:#9db3ab}

/* ghost buttons sitting on any dark band */
.cta-band .btn.btn-ghost,.quizbox .btn.btn-ghost,.mcard.feat .btn.btn-ghost,.mpop .btn.btn-ghost{border-color:rgba(255,255,255,.35);color:var(--paper)}
.cta-band .btn.btn-ghost:hover,.quizbox .btn.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* the full tab row needs ~1150px; below that go to the burger rather than squash it */
@media(max-width:1180px){
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 24px 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;font-size:12px}
  .nav-burger{display:block}
  nav.site.over .nav-links.open a{color:var(--ink)}
  nav.site.over .nav-links.open a::after{background:var(--brass)}
}
@media(max-width:1260px){.nav-gift{display:none}}

/* --- nav row fits, always ---------------------------------------------------
   Measured 2026-08-07 at a 360px viewport (very common Android width): the row
   needed 401px, so the burger's box ran from 354 to 377 and body{overflow:clip}
   cut it off the right edge. It was invisible on every phone under ~400px.
   Below 640 the logo, the CTA and the gutters all give ground so the burger
   always lands inside the viewport. .nav-right must never shrink. */
.nav-right{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.nav-burger{flex:0 0 auto;padding:6px;line-height:0}
.nav-burger svg{display:block}
.nav-cta-s{display:none}
@media(max-width:640px){
  nav.site .wrap{padding:0 16px}
  .nav-in{gap:8px}
  .nav-logo{min-width:0;flex:0 1 auto}
  .nav-logo img{height:40px}
  .nav-right{gap:6px}
  .nav-cta{padding:10px 14px;font-size:10px;letter-spacing:.1em}
  .nav-links{padding-left:16px;padding-right:16px}
}
@media(max-width:400px){
  .nav-cta-l{display:none}
  .nav-cta-s{display:inline}
  .nav-logo img{height:36px}
}

/* ---------- journal: vertical shelf (books stack down the page, slide out on hover) ---------- */
.vshelf{position:relative;max-width:880px;margin:0 auto;padding-left:26px;perspective:1600px}
.vshelf::before{content:"";position:absolute;left:0;top:-6px;bottom:-6px;width:14px;border-radius:5px;
  background:linear-gradient(90deg,#0F2C26,#22463D);box-shadow:6px 0 18px rgba(20,61,53,.22)}
.vbook{position:relative;display:flex;align-items:center;gap:22px;padding:24px 30px;margin-bottom:10px;
  border-radius:4px 12px 12px 4px;color:var(--paper);cursor:pointer;transform-origin:left center;
  box-shadow:0 8px 22px rgba(20,61,53,.2);overflow:hidden;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.vbook::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:rgba(0,0,0,.24)}
.vbook::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 44%,rgba(0,0,0,.14))}
.vbook:hover{transform:translateX(30px) rotateY(-7deg);box-shadow:0 26px 50px rgba(20,61,53,.32)}
.vbook>*{position:relative;z-index:2}
.vbook .vb-tag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--gold);border:1px solid rgba(var(--gold-rgb),.45);border-radius:999px;padding:5px 12px;white-space:nowrap}
.vbook b{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.25;flex:1;color:#fff}
.vbook .vb-meta{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:rgba(232,238,235,.62);white-space:nowrap}
.vbook em{font-style:normal;color:var(--gold);font-size:17px;transition:transform .4s ease}
.vbook:hover em{transform:translateX(5px)}
.vbook:nth-child(5n+1){background:linear-gradient(120deg,#1B4A40,#12332C)}
.vbook:nth-child(5n+2){background:linear-gradient(120deg,var(--brass),#24443B)}
.vbook:nth-child(5n+3){background:linear-gradient(120deg,#2C5348,#183B33)}
.vbook:nth-child(5n+4){background:linear-gradient(120deg,var(--clay),#2E4A3F)}
.vbook:nth-child(5n+5){background:linear-gradient(120deg,#20463C,#0F2C26)}
@media(max-width:700px){
  .vshelf{padding-left:16px}
  .vshelf::before{width:9px}
  .vbook{padding:18px 20px;gap:12px;flex-wrap:wrap;border-radius:3px 9px 9px 3px}
  .vbook b{font-size:17px;flex:1 0 100%;order:2}
  .vbook .vb-tag{order:1}
  .vbook .vb-meta{order:3;font-size:10px}
  .vbook em{order:4;margin-left:auto}
  .vbook:hover{transform:translateX(12px)}
}
@media (prefers-reduced-motion: reduce){.vbook:hover{transform:none}}

/* ---------- journal CTA (single card, home page) ---------- */
.jcta{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  background:var(--ink);border-radius:26px;padding:48px 52px;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.jcta::before{content:"";position:absolute;right:-140px;top:-140px;width:380px;height:380px;border-radius:50%;
  border:1px dashed rgba(var(--gold-rgb),.28)}
.jcta:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(20,61,53,.24)}
.jcta>div{position:relative;z-index:2;max-width:680px}
.jcta .kicker{color:var(--gold)}
.jcta h2{color:var(--paper);font-size:clamp(26px,3vw,38px);margin:12px 0 12px}
.jcta p{color:#cddbd5;font-size:15px;margin:0}
.jcta-go{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.45);border-radius:999px;padding:14px 26px;transition:all .3s ease}
.jcta:hover .jcta-go{background:rgba(var(--gold-rgb),.12)}
.jcta-go em{font-style:normal;transition:transform .3s ease}
.jcta:hover .jcta-go em{transform:translateX(5px)}
@media(max-width:700px){
  .jcta{padding:30px 24px;gap:22px;border-radius:18px}
  .jcta p{font-size:14px}
  .jcta-go{padding:12px 20px;font-size:11px}
}

/* ---------- sections with a photographic background ---------- */
.bgs{position:relative;overflow:hidden}
.bgs>.bgs-img{position:absolute;inset:0;z-index:0;pointer-events:none}
.bgs>.bgs-img img{width:100%;height:100%;object-fit:cover}
.bgs>.bgs-img::after{content:"";position:absolute;inset:0}
/* light band: photo stays a whisper behind cream so body text is untouched */
.bgs.tint-light>.bgs-img img{filter:saturate(.85)}
.bgs.tint-light>.bgs-img::after{background:
  linear-gradient(180deg,rgba(244,240,232,.97),rgba(244,240,232,.9) 42%,rgba(244,240,232,.97)),
  linear-gradient(90deg,rgba(244,240,232,.96),rgba(244,240,232,.86) 55%,rgba(244,240,232,.94))}
/* dark band: photo carries, text goes light */
.bgs.tint-dark>.bgs-img::after{background:
  linear-gradient(180deg,rgba(9,26,22,.9),rgba(9,26,22,.82) 45%,rgba(9,26,22,.92))}
.bgs.tint-dark{color:var(--paper)}
.bgs.tint-dark h2,.bgs.tint-dark h3{color:var(--paper)}
.bgs.tint-dark p{color:#cddbd5}
.bgs.tint-dark .kicker{color:var(--gold)}
.bgs.tint-dark .btn-ghost{border-color:rgba(255,255,255,.4);color:var(--paper)}
.bgs>.wrap{position:relative;z-index:2}
@media (prefers-reduced-motion: no-preference){
  .bgs>.bgs-img img{transform:scale(1.04);transition:transform 1.2s ease}
}

/* ---------- quizzes ---------- */
.qwrap{background:#fff;border:1px solid var(--line);border-radius:26px;padding:44px 46px;box-shadow:0 24px 60px rgba(20,61,53,.08)}
.qtop{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.qtop>span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mineral);white-space:nowrap}
.qbar{flex:1;height:3px;border-radius:99px;background:#E9E3D6;overflow:hidden}
.qbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--mineral),var(--brass));transition:width .5s cubic-bezier(.2,.7,.2,1)}
.qstep h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:10px}
.qhelp{font-size:14.5px;margin-bottom:26px;max-width:62ch}
.qopts{display:grid;gap:12px;margin-bottom:22px}
.qopt{display:flex;align-items:center;gap:16px;flex-wrap:wrap;width:100%;text-align:left;cursor:pointer;
  background:var(--shell);border:1px solid var(--line);border-radius:16px;padding:20px 24px;font-family:var(--body);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .25s ease,background .25s ease}
.qopt b{font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink);flex:1 0 auto}
.qopt span{flex:1 1 100%;font-size:13.5px;color:var(--body-text);line-height:1.5}
.qopt em{font-style:normal;color:var(--brass);font-size:17px;opacity:0;transform:translateX(-6px);transition:all .25s ease;margin-left:auto}
.qopt:hover{transform:translateY(-3px);border-color:rgba(var(--brass-rgb),.55);background:#fff;box-shadow:0 14px 32px rgba(20,61,53,.1)}
.qopt:hover em{opacity:1;transform:none}
.qopt.on{border-color:var(--brass);background:#fff;box-shadow:0 0 0 2px rgba(var(--brass-rgb),.28)}
.qopt.on em{opacity:1;transform:none}
.qback{background:none;border:0;font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--mineral);cursor:pointer;padding:8px 0}
.qback:hover{color:var(--brass)}
/* result */
.qresult .kicker{display:block;margin-bottom:12px}
.qres-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.qres-note{font-size:12.5px;color:var(--mineral);margin-top:22px;max-width:60ch}
/* lead form */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld>span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--ink)}
.fld>span i{font-style:normal;color:var(--brass)}
.fld input{font-family:var(--body);font-size:15px;color:var(--ink);background:var(--shell);
  border:1px solid var(--line);border-radius:12px;padding:13px 16px;transition:border-color .25s ease,box-shadow .25s ease}
.fld input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--brass-rgb),.16);background:#fff}
.fld .hint{font-style:normal;font-size:11.5px;color:var(--mineral)}
.fld.err input{border-color:#A33A2B;box-shadow:0 0 0 3px rgba(163,58,43,.13)}
.consent{background:var(--shell);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:22px;display:grid;gap:14px}
.crow{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.crow input{width:17px;height:17px;margin-top:3px;flex-shrink:0;accent-color:var(--brass);cursor:pointer}
.crow span{font-size:12.5px;line-height:1.55;color:var(--body-text)}
.crow span strong{color:var(--ink);display:block;margin-bottom:2px;font-size:13px}
.crow a{color:var(--brass);font-weight:700;text-decoration:underline}
.crow.err span{color:#A33A2B}
.crow.err input{outline:2px solid #A33A2B;outline-offset:2px}
.lead-note{font-size:12px;color:var(--mineral);margin-top:14px}
@media(max-width:700px){
  .qwrap{padding:26px 20px;border-radius:18px}
  .qstep h2{font-size:22px}
  .qhelp{font-size:13.5px;margin-bottom:20px}
  .qopt{padding:16px 18px;gap:10px;border-radius:13px}
  .qopt b{font-size:17px}
  .qopt span{font-size:12.5px}
  .qopt em{display:none}
  .lead-grid{grid-template-columns:1fr;gap:13px}
  .consent{padding:16px 16px}
  .crow span{font-size:12px}
}

/* ---------- photo bands: own their vertical space ---------- */
/* Many sections carry an inline `padding-top:0` from the flow above them. Once a
   section gets a photo background it becomes its own band and needs real padding
   on BOTH sides, or the content sits flush against the band edge. Inline styles
   only lose to !important. */
section.bgs{padding-top:clamp(58px,7vw,92px)!important;padding-bottom:clamp(58px,7vw,92px)!important}

/* ---------- light cards keep their own type colours inside a dark photo band ---------- */
/* .bgs.tint-dark flips text light for the band's own copy; without this guard it
   also flips the text inside white cards sitting on top of it (invisible text). */
.bgs.tint-dark .card:not(.alt) h2,.bgs.tint-dark .card:not(.alt) h3,
.bgs.tint-dark .txc h3,.bgs.tint-dark .mcard:not(.feat) h3,
.bgs.tint-dark .step h3,.bgs.tint-dark .rq blockquote,
.bgs.tint-dark .jcard:not(.feat) h3,.bgs.tint-dark .faq summary{color:var(--ink)}
.bgs.tint-dark .card:not(.alt) p,.bgs.tint-dark .txc p,
.bgs.tint-dark .mcard:not(.feat) p,.bgs.tint-dark .step p,
.bgs.tint-dark .jcard:not(.feat) p,.bgs.tint-dark .faq .a{color:var(--body-text)}
.bgs.tint-dark .card:not(.alt) .kicker,.bgs.tint-dark .txc .kicker,
.bgs.tint-dark .mcard:not(.feat) .kicker,.bgs.tint-dark .step .kicker{color:var(--brass)}
.bgs.tint-dark .card.alt h3{color:#fff}
.bgs.tint-dark .card.alt p{color:rgba(255,255,255,.85)}

/* ---------- guides: a photo on every guide card ---------- */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gcard{display:flex;flex-direction:column;background:var(--shell);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.gcard:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(20,61,53,.14)}
.gcard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.gcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.gcard:hover .gcard-img img{transform:scale(1.06)}
.gcard-tag{position:absolute;left:14px;top:14px;z-index:2;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;color:var(--ink);background:rgba(244,240,232,.94);
  border-radius:999px;padding:6px 13px;backdrop-filter:blur(6px)}
.gcard-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.gcard-body h3{font-size:20px;line-height:1.25}
.gcard-body p{font-size:13.5px;flex:1;margin:0}
.gcard-go{margin-top:6px;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  color:var(--brass);display:flex;align-items:center;gap:9px}
.gcard-go em{font-style:normal;transition:transform .3s ease}
.gcard:hover .gcard-go em{transform:translateX(5px)}
@media(max-width:960px){.gcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .gcards{grid-template-columns:1fr;gap:13px}
  .gcard{border-radius:15px}
  .gcard-img{aspect-ratio:16/9}
  .gcard-body{padding:18px 20px 20px}
  .gcard-body h3{font-size:18px}
}

/* ---------- long-form guides ---------- */
.glead{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:var(--ink);margin-bottom:26px}
.gintro{background:var(--shell);border-left:3px solid var(--brass);border-radius:0 16px 16px 0;
  padding:24px 28px;font-size:15.5px;line-height:1.7;color:var(--body-text)}
.gintro strong,.gintro em{color:var(--ink)}
.gsec{display:grid;grid-template-columns:66px 1fr;gap:22px;padding:34px 0;border-top:1px solid var(--line)}
.gsec:first-child{border-top:0}
.gsec-no{font-family:var(--display);font-weight:500;font-size:30px;color:var(--brass);line-height:1;padding-top:4px}
.gsec-body h2{font-size:clamp(22px,2.6vw,29px);margin-bottom:10px}
.gsec-intro{font-size:15px;margin-bottom:16px}
.gsec-list{list-style:none;display:grid;gap:12px}
.gsec-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.65;color:var(--body-text)}
.gsec-list li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--brass);opacity:.85}
.gsec-list li strong{color:var(--ink)}
.gclose{background:var(--ink);border-radius:22px;padding:34px 38px}
.gclose p{color:#cddbd5;font-size:16px;line-height:1.7;margin:0}
.gsave{background:#fff;border:1px solid var(--line);border-radius:26px;padding:42px 44px;box-shadow:0 24px 60px rgba(20,61,53,.08)}
.gsave h2{font-size:clamp(24px,2.8vw,32px);margin:10px 0 10px}
.gsave-lead{font-size:15px;margin-bottom:26px;max-width:62ch}
.gdone .qres-cta{margin-top:22px}
@media(max-width:700px){
  .gsec{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .gsec-no{font-size:22px;padding-top:0}
  .gintro{padding:18px 20px;font-size:14.5px;border-radius:0 12px 12px 0}
  .gclose{padding:24px 22px;border-radius:16px}
  .gclose p{font-size:15px}
  .gsave{padding:26px 20px;border-radius:18px}
  .glead{font-size:19px}
}

/* ============================================================ COOKIE BAR ====
   Deliberately a slim bar, not a modal. Nobody arrives here to read a policy,
   and a full-screen consent wall on a med spa site is a bounce generator. */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(20,61,53,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.ckbar.in{transform:none}
.ck-in{max-width:1200px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.ck-in p{color:#cddbd5;font-size:12.5px;line-height:1.55;margin:0;max-width:76ch}
.ck-in p a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.ck-btns{display:flex;align-items:center;gap:9px;flex-shrink:0}
.ck-b{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 17px;border-radius:999px;cursor:pointer;border:0;transition:transform .2s ease,background .2s ease}
.ck-b:hover{transform:translateY(-1px)}
.ck-ok{background:var(--gold);color:var(--ink)}
.ck-ess{background:transparent;color:#cddbd5;border:1px solid rgba(255,255,255,.28)}
.ck-ess:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.ck-link{background:none;border:0;color:#A3B9B1;font-family:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.ck-link:hover{color:#fff}
@media(max-width:820px){
  .ck-in{padding:12px 18px;gap:11px}
  .ck-in p{font-size:12px}
  .ck-btns{width:100%;justify-content:flex-start}
}

/* preferences modal */
.ckm{position:fixed;inset:0;z-index:95;background:rgba(20,61,53,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .28s ease}
.ckm.in{opacity:1;pointer-events:auto}
.ckm-card{position:relative;background:#fff;border-radius:22px;padding:34px 36px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 40px 90px rgba(20,61,53,.3);transform:translateY(14px);transition:transform .28s ease}
.ckm.in .ckm-card{transform:none}
.ckm-x{position:absolute;top:16px;right:20px;background:none;border:0;font-size:24px;line-height:1;color:var(--mineral);cursor:pointer;padding:4px}
.ckm-x:hover{color:var(--ink)}
.ckm-card h3{font-size:25px;margin:9px 0 8px;color:var(--ink)}
.ckm-lead{font-size:14px;margin-bottom:22px}
.ckm-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.ckm-row b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;margin-bottom:3px}
.ckm-row em{display:block;font-style:normal;font-size:13px;color:var(--body-text);line-height:1.55}
.ckm-row input{flex-shrink:0;width:19px;height:19px;margin-top:3px;accent-color:var(--brass);cursor:pointer}
.ckm-row input:disabled{cursor:not-allowed;opacity:.55}
.ckm-gpc{margin-top:14px;padding:12px 15px;border-radius:11px;background:rgba(var(--brass-rgb),.08);border-left:3px solid var(--brass);font-size:13px;color:var(--ink)}
.ckm-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.ckm-purge{background:none;border:0;font-family:inherit;font-size:13px;color:var(--mineral);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0}
.ckm-purge:hover{color:#8a3b3b}
.ckm-purge:disabled{color:var(--brass);text-decoration:none;cursor:default}
.ckm-note{font-size:12px;color:var(--mineral);line-height:1.6;margin-top:16px}
.ckm-note a{color:var(--brass);text-decoration:underline}
@media(max-width:600px){.ckm-card{padding:26px 22px;border-radius:18px}}

/* ============================================================== CHAT ====== */
.sbc{position:fixed;left:20px;bottom:calc(20px + var(--ckbar-h,0px));transition:bottom .35s ease;z-index:80;font-family:var(--body)}
/* The only resting control: a left-edge tab with the chat icon over an arrow.
   Same element on first visit and after you park the panel, so the thing you
   closed is the thing you reopen. */
.sbc-tab{position:fixed;left:0;bottom:calc(96px + var(--ckbar-h,0px));background:var(--ink);color:var(--gold);
  border:0;border-radius:0 14px 14px 0;width:38px;height:74px;cursor:pointer;padding:0;
  box-shadow:0 10px 26px rgba(20,61,53,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:width .2s ease,background .2s ease,color .2s ease}
.sbc-tab:hover,.sbc-tab:focus-visible{width:46px;background:var(--brass);color:#fff;outline:none}
.sbc-tab svg{flex-shrink:0}
.sbc-arrow{font-size:17px;line-height:1;opacity:.8}
.sbc-tab[hidden]{display:none}
.sbc-panel[hidden]{display:none}
.sbc-panel{width:min(368px,calc(100vw - 32px));height:min(540px,calc(100vh - 120px));background:#fff;border-radius:20px;
  box-shadow:0 30px 70px rgba(20,61,53,.3);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.97);opacity:0;transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .26s ease}
.sbc.open .sbc-panel{transform:none;opacity:1}
.sbc-head{display:flex;align-items:center;gap:11px;padding:15px 16px;background:var(--ink);color:#fff;flex-shrink:0}
.sbc-av{width:36px;height:36px;border-radius:50%;background:var(--brass);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;color:#fff;flex-shrink:0}
.sbc-who{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.sbc-who b{font-size:14px;font-weight:600}
.sbc-who em{font-style:normal;font-size:11.5px;color:#A3B9B1}
.sbc-x{background:none;border:0;color:#A3B9B1;font-size:23px;line-height:1;cursor:pointer;padding:2px 4px}
.sbc-x:hover{color:#fff}
.sbc-log{flex:1;overflow-y:auto;padding:18px 16px;background:var(--shell);display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.sbc-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.6}
.sbc-msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--body-text);align-self:flex-start}
.sbc-msg.bot strong,.sbc-msg.bot b{color:var(--ink)}
.sbc-msg.bot a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.sbc-msg.me{background:var(--brass);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.sbc-msg.typing{display:flex;gap:4px;padding:14px}
.sbc-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--mineral);opacity:.45;animation:sbcb 1s infinite}
.sbc-msg.typing i:nth-child(2){animation-delay:.15s}
.sbc-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes sbcb{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:.9}}
.sbc-opts{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:100%}
.sbc-opt{font-family:inherit;font-size:13px;text-align:left;background:#fff;border:1px solid var(--line);color:var(--ink);
  border-radius:14px;padding:9px 13px;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease;max-width:92%}
.sbc-opt:hover{border-color:var(--brass);background:rgba(var(--brass-rgb),.06);transform:translateX(2px)}
.sbc-opt.pri{border-color:var(--brass);color:var(--brass);font-weight:600}
.sbc-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;display:grid;gap:11px}
.sbc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sbc-f{display:grid;gap:5px}
.sbc-f span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--mineral)}
.sbc-f input,.sbc-f textarea{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--shell);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;resize:vertical}
.sbc-f input:focus,.sbc-f textarea:focus{outline:0;border-color:var(--brass);background:#fff}
.sbc-f.err input,.sbc-f.err textarea{border-color:#b4544f;background:#fdf5f4}
.sbc-c{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.55;color:var(--body-text)}
.sbc-c input{width:15px;height:15px;flex-shrink:0;margin-top:2px;accent-color:var(--brass);cursor:pointer}
.sbc-c b{color:var(--ink);font-size:11.5px}
.sbc-send{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--brass);color:#fff;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;transition:transform .2s ease}
.sbc-send:hover{transform:translateY(-1px)}
.sbc-fine{font-style:normal;font-size:11px;line-height:1.55;color:var(--mineral)}
.sbc-fine a{color:var(--brass);text-decoration:underline}
.sbc-foot{padding:9px 16px;background:#fff;border-top:1px solid var(--line);font-size:10.5px;line-height:1.5;color:var(--mineral);flex-shrink:0}
.sbc-foot a{color:var(--brass);text-decoration:underline}
@media(max-width:600px){
  .sbc{left:12px;bottom:calc(12px + var(--ckbar-h,0px))}
  .sbc-tab{width:34px;height:66px}
  .sbc-panel{width:calc(100vw - 24px);height:min(78vh,540px)}
  .sbc-two{grid-template-columns:1fr}
}
/* the two widgets share the bottom edge, so keep them out of each other's way */
@media(max-width:600px){.mpop{bottom:calc(84px + var(--ckbar-h,0px))}}

/* lead form: selects, textareas, full-width rows, and the submit-notice */
.fld select,.fld textarea{font-family:var(--body);font-size:15px;color:var(--ink);background:var(--shell);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.fld textarea{resize:vertical;line-height:1.6}
.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(var(--brass-rgb),.16);background:#fff}
.fld-wide{grid-column:1/-1}
.fld.err select,.fld.err textarea{border-color:#A33A2B}
.lead-terms{font-size:12px;line-height:1.6;color:var(--mineral);margin:-8px 0 20px}
.lead-terms a{color:var(--brass);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){.lead-grid{grid-template-columns:1fr}}

/* ====================================================== JOINING KIT WHEEL == */
.kwrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,54px);align-items:center;margin-top:14px}
/* Sam's own flat-lay of the actual nine, sitting beside the wheel */
.kw-photo{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(20,61,53,.14)}
.kw-photo img{display:block;width:100%;height:auto}
.kw-read{margin-top:clamp(22px,3vw,34px)}
.kw-chart{position:relative;justify-self:center;width:min(380px,100%)}
.kw-chart svg{width:100%;height:auto;overflow:visible}
.kw-seg{cursor:pointer;transition:stroke-width .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease;opacity:.66;transform-origin:140px 140px}
.kw-seg:hover,.kw-seg.on{opacity:1;stroke-width:44}
.kw-seg:focus-visible{outline:none;opacity:1;stroke-width:44;filter:drop-shadow(0 0 0 2px var(--ink))}
.kw-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 22%}
.kw-mid b{font-family:var(--display);font-weight:500;font-size:clamp(46px,6vw,60px);line-height:1;color:var(--ink)}
.kw-mid span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-top:4px}
.kw-mid em{font-style:normal;font-size:11.5px;color:var(--mineral);margin-top:9px;line-height:1.45}
.kw-side{min-width:0}
.kw-keys{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.kw-key{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;color:var(--body-text);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 9px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.kw-key:hover,.kw-key.on{border-color:var(--brass);color:var(--ink);transform:translateY(-1px)}
.kw-key.on{box-shadow:0 6px 18px rgba(20,61,53,.1)}
.kw-key i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.kw-key b{font-weight:700;font-size:12.5px}
.kw-key em{font-style:normal;font-size:11px;color:var(--mineral)}
.kw-read{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 30px;min-height:196px;
  box-shadow:0 18px 44px rgba(20,61,53,.07)}
.kw-read h3{font-size:clamp(24px,2.8vw,31px);margin:9px 0 10px}
.kw-read p{font-size:15px;line-height:1.7}
.kw-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.kw-foot p{font-size:15px;max-width:64ch;margin:0}
@media(max-width:900px){
  .kwrap{grid-template-columns:1fr;gap:30px}
  .kw-chart{width:min(320px,84%)}
  .kw-read{padding:22px 22px;min-height:0}
}
/* Phones: the whole wheel card has to land inside one screen. Measured at
   390x760 it was 762px tall (chart 295 + keys 193 + readout 220 + gaps), so
   every part gives a little rather than one part collapsing. */
@media(max-width:560px){
  .kwrap{gap:18px;margin-top:8px}
  .kw-chart{width:min(230px,66%)}
  .kw-mid{padding:0 20%}
  .kw-mid b{font-size:40px}
  .kw-mid span{font-size:10px;letter-spacing:.16em}
  .kw-mid em{font-size:10.5px;margin-top:6px}
  .kw-keys{gap:5px;margin-bottom:14px}
  .kw-key{padding:6px 9px;gap:5px}
  .kw-key b,.kw-key{font-size:11.5px}
  .kw-key em{display:none}
  .kw-read{padding:16px 18px;border-radius:16px}
  .kw-read h3{font-size:21px;margin:6px 0 7px}
  .kw-read p{font-size:13.5px;line-height:1.6}
}

/* ================================================ MEMBER PERK SCROLLER ===== */
.mscroll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,6vw,80px);margin-top:22px;align-items:start}
.ms-stage{position:sticky;top:120px;height:min(70vh,540px)}
.ms-stage-in{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:var(--shell);
  box-shadow:0 26px 64px rgba(20,61,53,.14)}
.ms-shot{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.ms-shot.on{opacity:1;transform:none}
.ms-shot img{width:100%;height:100%;object-fit:cover}
.ms-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 28px 26px;color:#fff;
  background:linear-gradient(transparent,rgba(20,61,53,.86))}
.ms-shot figcaption b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,36px);line-height:1.1}
.ms-shot figcaption span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-top:7px}
.ms-steps{display:grid}
.ms-step{min-height:min(62vh,470px);display:flex;flex-direction:column;justify-content:center;
  padding:24px 0;opacity:.35;transition:opacity .45s ease}
.ms-step.on{opacity:1}
.ms-no{font-family:var(--display);font-size:14px;letter-spacing:.14em;color:var(--brass);font-weight:600}
.ms-no i{font-style:normal;color:var(--mineral);font-size:12px;margin-left:5px}
.ms-step h3{font-size:clamp(26px,3.4vw,38px);margin:10px 0 8px}
.ms-cut{font-family:var(--display);font-size:clamp(18px,2.1vw,23px);color:var(--brass);margin-bottom:14px;line-height:1.3}
.ms-step p{font-size:15.5px;line-height:1.72;max-width:52ch}
.ms-link{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:3px;transition:gap .2s ease,color .2s}
.ms-link:hover{color:var(--brass)}
.mbank{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;margin-top:44px}
.mbank>div{background:var(--paper);padding:26px 24px;text-align:center}
.mbank b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,42px);color:var(--ink);line-height:1}
.mbank span{display:block;font-size:12.5px;color:var(--mineral);margin-top:8px;line-height:1.5}
@media(max-width:900px){
  /* sticky stages fight thumbs on a phone. Stack it: photo, then its words. */
  .mscroll{grid-template-columns:1fr;gap:0}
  .ms-stage{display:none}
  .ms-steps{gap:34px}
  .ms-step{min-height:0;opacity:1;padding:0}
  .ms-step::before{content:"";display:block;height:230px;border-radius:18px;margin-bottom:20px;
    background:var(--shell) center/cover no-repeat;box-shadow:0 16px 40px rgba(20,61,53,.12)}
  .ms-step[data-i="0"]::before{background-image:url(/assets/perk-xeomin.jpg)}
  .ms-step[data-i="1"]::before{background-image:url(/assets/perk-daxxify.jpg)}
  .ms-step[data-i="2"]::before{background-image:url(/assets/perk-filler.jpg)}
  .ms-step[data-i="3"]::before{background-image:url(/assets/perk-microneedling.jpg)}
  .ms-step[data-i="4"]::before{background-image:url(/assets/perk-peels.jpg)}
  .ms-step[data-i="5"]::before{background-image:url(/assets/perk-skincare.jpg)}
  .mbank{grid-template-columns:1fr;margin-top:34px}
}
@media(prefers-reduced-motion:reduce){
  .ms-shot{transition:opacity .01s}
  .ms-step{opacity:1}
}

/* .phero is a dark full-bleed photo hero, but two global rules still resolve to
   ink inside it and render dark-on-dark:
     strong{color:var(--ink)}      -> "Beautiphi" was invisible on /skincare
     .btn-ghost{color:var(--ink)}  -> hero ghost buttons were invisible everywhere
   Same class of defect as the .bgs.tint-dark guard below the fold. */
.phero strong,.phero b,.phero em{color:#fff}
.phero .lead strong{color:#fff;font-weight:700}
.phero .btn.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff}
.phero .btn.btn-ghost:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.08)}
.phero a:not(.btn):not(.crumbs a){color:var(--gold)}

/* the perk caption sits on a gradient scrim, and Sam's real photos will be
   brighter than the placeholders. Weight the scrim so white stays legible. */
.ms-shot figcaption{background:linear-gradient(transparent,rgba(20,61,53,.55) 42%,rgba(20,61,53,.93))}

/* ========================================================= SERUM SHOWCASE == */
.srm-sec .wrap{max-width:1240px}
.srm{position:relative;border-radius:28px;overflow:hidden;background:var(--ink);isolation:isolate}
.srm-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 26% 42%, rgba(var(--glow,166,203,184),.30), transparent 62%),
    radial-gradient(80% 70% at 84% 18%, rgba(var(--gold-rgb),.14), transparent 60%),
    linear-gradient(150deg,#173F37,#0C2620 62%);
  transition:background 1.1s cubic-bezier(.3,.7,.2,1)}
.srm-bg::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:soft-light;
  background:url(/assets/leaves-dark-1.jpg) center/cover no-repeat}
.srm-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,60px);align-items:center;padding:clamp(30px,4vw,54px)}

/* the stage the bottles stand on */
.srm-stage{position:relative;height:min(60vh,460px);display:flex;align-items:flex-end;justify-content:center}
.srm-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(38px) scale(.86);filter:blur(8px)}
.srm-shot img{max-height:86%;width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.5)) drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.srm-shot.on{opacity:1;pointer-events:auto;transform:none;filter:blur(0);
  transition:opacity .55s ease .12s, transform .78s cubic-bezier(.16,.9,.28,1) .1s, filter .5s ease .12s}
/* the outgoing bottle drifts the way you came from, so the arrows feel physical */
.srm-shot.out-l{opacity:0;transform:translateX(-16%) scale(.9) rotate(-5deg);filter:blur(6px);
  transition:opacity .42s ease, transform .62s cubic-bezier(.4,0,.7,.3), filter .42s ease}
.srm-shot.out-r{opacity:0;transform:translateX(16%) scale(.9) rotate(5deg);filter:blur(6px);
  transition:opacity .42s ease, transform .62s cubic-bezier(.4,0,.7,.3), filter .42s ease}
.srm-plinth{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:64%;height:26px;
  border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);filter:blur(6px)}

.srm-side{min-width:0;color:var(--paper)}
.srm-side .kicker{color:var(--gold)}
.srm-side h2{color:#fff;font-size:clamp(26px,3.4vw,40px);margin:10px 0 12px}
.srm-lead{color:#c9d6d1;font-size:15.5px;line-height:1.7;max-width:52ch;margin-bottom:24px}
.srm-panes{position:relative;min-height:196px;margin-bottom:20px}
.srm-pane{position:absolute;inset:0;opacity:0;transform:translateY(12px);pointer-events:none}
.srm-pane.on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .5s ease .18s, transform .6s cubic-bezier(.16,.9,.28,1) .18s}
.srm-sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-2)}
.srm-pane h3{font-family:var(--display);font-weight:500;color:#fff;font-size:clamp(24px,3vw,34px);margin:7px 0 9px;line-height:1.1}
.srm-pane p{color:#cddbd5;font-size:15px;line-height:1.68;max-width:48ch}
.srm-meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:16px}
.srm-meta dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#8FAEA2;margin-bottom:4px}
.srm-meta dd{font-size:13.5px;color:var(--paper)}
.srm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.srm-arw{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;
  color:var(--paper);font-size:15px;cursor:pointer;flex-shrink:0;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.srm-arw:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.srm-dots{display:flex;gap:7px;flex:1;min-width:0;flex-wrap:wrap;scrollbar-width:none}
.srm-dot{width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;
  transition:border-color .22s ease,background .22s ease,transform .22s ease}
.srm-dot img{max-height:100%;width:auto;object-fit:contain;opacity:.7;transition:opacity .22s ease}
.srm-dot:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.srm-dot:hover img{opacity:1}
.srm-dot.on{border-color:var(--gold);background:rgba(var(--gold-rgb),.16)}
.srm-dot.on img{opacity:1}
@media(max-width:900px){
  .srm-in{grid-template-columns:1fr;padding:26px 20px 30px}
  .srm-stage{height:min(42vh,320px);order:-1}
  .srm-panes{min-height:220px}
  .srm-dot{width:42px;height:42px}
}
/* Phones: the card was 1064px in a 760px viewport. Every band gives ground so
   the whole thing lands on one screen — bottle, name, copy and the six
   thumbnails all visible without scrolling the card. The arrows go (the six
   thumbnails are the control and a 6-dot row plus two arrows will not fit
   342px), and the lead paragraph goes (it restates the section heading above). */
@media(max-width:560px){
  .srm-in{padding:18px 16px 22px;gap:18px}
  .srm-stage{height:min(26vh,198px)}
  .srm-side h2{font-size:22px;margin:7px 0 10px}
  .srm-lead{display:none}
  .srm-panes{min-height:184px}
  .srm-pane h3{font-size:20px;margin:5px 0 7px}
  .srm-pane p{font-size:13.5px;line-height:1.6}
  .srm-sub{font-size:10px;letter-spacing:.16em}
  .srm-meta{gap:18px;margin-top:11px}
  .srm-meta dt{font-size:9.5px;margin-bottom:2px}
  .srm-meta dd{font-size:12.5px}
  .srm-nav{gap:8px;margin-bottom:16px}
  /* eleven thumbnails will not fit 342px, so the strip scrolls and the arrows
     come back as the primary way to step through it */
  .srm-arw{display:flex;width:32px;height:32px;flex:0 0 auto}
  .srm-dots{gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .srm-dots::-webkit-scrollbar{display:none}
  .srm-dot{width:40px;height:40px;border-radius:10px;padding:4px;flex:0 0 auto;scroll-snap-align:center}
}
/* short phones (360x640 and friends) — one more notch so the card still clears
   the sticky nav rather than just the raw viewport */
@media(max-width:560px) and (max-height:700px){
  .srm-in{padding:14px 14px 18px;gap:14px}
  .srm-side h2{font-size:19px;margin:5px 0 8px}
  .srm-nav{margin-bottom:12px}
  .srm-dot{width:36px;height:36px}
  .srm-stage{height:min(22vh,150px)}
  .srm-panes{min-height:172px}
  .srm-pane p{font-size:13px;line-height:1.55}
  .kw-chart{width:min(200px,60%)}
  .kw-mid b{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  .srm-shot,.srm-shot.on,.srm-shot.out-l,.srm-shot.out-r{transition:opacity .01s;transform:none;filter:none}
  .srm-bg{transition:none}
}

/* ============================================ JOINING-KIT WHEEL: hit + spin == */
/* rotate lives in CSS now (was an SVG transform attribute) so the entrance can
   animate it without the two fighting */
.kw-ring{transform:rotate(-90deg);transform-origin:140px 140px}
.kw-hit{cursor:pointer}
.kw-hit:focus{outline:none}
.kw-hit:focus-visible+.kw-seg,.kw-seg:focus-visible{opacity:1;stroke-width:44}
/* Entrance animates transform and stroke-width only, never opacity. A frozen or
   never-started animation then leaves a complete, readable wheel sitting at a odd
   rotation, instead of an invisible one. Same reason the centre label below only
   animates scale. */
.kw-ring.spun{animation:kwspin 1.2s cubic-bezier(.16,.86,.3,1) both}
@keyframes kwspin{
  from{transform:rotate(-450deg) scale(.72)}
  to{transform:rotate(-90deg) scale(1)}
}
.kw-ring.spun .kw-seg{animation:kwseg .55s ease backwards;animation-delay:calc(var(--i) * .055s + .3s)}
@keyframes kwseg{from{stroke-width:6}to{stroke-width:34}}
/* fail-open: the centre label is visible by default and only ANIMATES in when the
   ring spins. Hiding it by default would leave it permanently invisible anywhere
   the observer never fires. */
/* No delay and no backwards fill on purpose: with either, the element holds the
   `from` state (invisible) until the animation runs, and anywhere animations are
   suspended it would never appear. Natural state is visible; this only decorates. */
.kw-chart:has(.kw-ring.spun) .kw-mid{animation:kwmid .9s cubic-bezier(.16,.86,.3,1)}
@keyframes kwmid{from{transform:scale(.82)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .kw-ring.spun,.kw-ring.spun .kw-seg,.kw-chart:has(.kw-ring.spun) .kw-mid{animation:none}
}

/* ===================================================== SECTION RHYTHM ====== */
/* Several sections carried `style="padding-top:0"` so they could sit tight under
   a section that owned the gap. The background pass later added its own padding
   to some of those neighbours, which left the pairs crunched. One rule, applied
   where a section genuinely follows a full-width band, instead of per-section
   inline overrides. */
section{padding:clamp(58px,7vw,92px) 0}
section[style*="padding-top:0"]{padding-top:clamp(44px,5.2vw,68px)!important}
/* a section that opens with its own heading block never needs the shim doubled */
section[style*="padding-top:0"] > .wrap > .sec-head:first-child{margin-top:0}
/* dark full-bleed bands still own their own generous padding */
section.bgs[style*="padding-top:0"]{padding-top:clamp(58px,7vw,92px)!important}

/* ======================================================== TREATMENT MENU === */
/* A brochure, not a card wall: dense enough that the whole offer reads in one
   screenful, with the price column ready for the day Sam signs off on numbers. */
.bro-jump{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;position:sticky;top:74px;z-index:20;
  padding:10px 0;background:linear-gradient(var(--paper) 72%,transparent)}
.bro-jump a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mineral);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:#fff;
  transition:color .2s ease,border-color .2s ease,transform .2s ease}
.bro-jump a:hover{color:var(--brass);border-color:var(--brass);transform:translateY(-1px)}

.bro{border-top:2px solid var(--ink)}
.bro-group{padding:0!important}
.bro-head{display:block;text-align:center;background:var(--ink);color:var(--paper);
  border-radius:20px;padding:26px 30px;margin:0 0 18px;border:0;
  background-image:radial-gradient(120% 140% at 50% 0%,rgba(var(--gold-rgb),.16),transparent 62%)}
.bro-head h2{font-size:clamp(24px,2.8vw,32px);margin:0;color:#fff}
.bro-head p{font-size:13.5px;color:#C9D6D1;margin:9px auto 0;max-width:62ch;line-height:1.55}
.bro-count{font-family:var(--display);font-size:13px;color:var(--brass);border:1px solid var(--line);
  border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.bro-rows{display:grid}
.bro-row{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);transition:background .25s ease}
.bro-row:hover{background:rgba(var(--brass-rgb),.045)}
.bro-main{min-width:0}
.bro-main h3{font-size:clamp(18px,2vw,22px);margin:0 0 5px;line-height:1.2}
.bro-main h3 a{transition:color .2s ease}
.bro-row:hover .bro-main h3 a{color:var(--brass)}
.bro-main p{font-size:14px;line-height:1.6;max-width:62ch;margin:0 0 9px}
.bro-treats{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.bro-treats li{font-size:11.5px;color:var(--mineral);background:var(--shell);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;line-height:1.4}

.bro-side{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
.bro-price b{display:block;font-family:var(--display);font-weight:500;font-size:26px;color:var(--ink);line-height:1}
.bro-price b.tbc{font-size:17px;color:var(--mineral)}
.bro-price span{display:block;font-size:11px;color:var(--mineral);margin-top:3px}
.bro-lasts span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--mineral)}
.bro-lasts b{display:block;font-size:12.5px;color:var(--body-text);font-weight:600;margin-top:2px;line-height:1.4}
.bro-acts{display:flex;gap:8px;margin-top:2px}
.bro-more,.bro-book{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-radius:999px;padding:8px 15px;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.bro-more{border:1px solid var(--line);color:var(--ink)}
.bro-more:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-1px)}
.bro-book{background:var(--ink);color:var(--paper)}
.bro-book:hover{background:var(--brass);transform:translateY(-1px)}
.bro-foot{font-size:13.5px;color:var(--mineral);margin-top:26px;max-width:70ch;line-height:1.65}

@media(max-width:820px){
  .bro-jump{top:64px;gap:6px;margin-bottom:20px}
  .bro-jump a{padding:7px 12px;font-size:10px}
  .bro-row{grid-template-columns:1fr;gap:12px;padding:18px 0}
  .bro-side{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
  .bro-lasts{flex:1;min-width:130px}
  .bro-treats li{font-size:11px;padding:3px 9px}
}

/* ==================================== MEMBER PERK SCROLLER: tighter ======== */
/* Will: "crunch this section down a bit so you can see more on the screen."
   Shorter steps + a shorter stage means two perks are legible at once instead
   of one filling the viewport. */
.ms-stage{top:104px;height:min(52vh,420px)}
.ms-step{min-height:min(44vh,340px);padding:16px 0}
.ms-step h3{font-size:clamp(23px,2.9vw,32px);margin:8px 0 6px}
.ms-cut{font-size:clamp(17px,1.9vw,21px);margin-bottom:10px}
.ms-step p{font-size:15px;line-height:1.65}
.ms-link{margin-top:14px}
.ms-shot figcaption{padding:44px 24px 20px}
@media(max-width:900px){
  .ms-step::before{height:200px;margin-bottom:16px}
  .ms-steps{gap:28px}
}

/* ======================================= MEMBERSHIP: what the bank covers === */
.bank{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--ink);border-radius:22px;padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);position:relative;overflow:hidden}
.bank::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 8% 50%, rgba(var(--gold-rgb),.20), transparent 62%)}
.bank-fig{position:relative;z-index:1;text-align:center;padding-right:clamp(20px,3vw,36px);
  border-right:1px solid rgba(255,255,255,.16)}
.bank-fig b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(40px,5.6vw,58px);color:var(--figure);line-height:1}
.bank-fig span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-2);margin-top:6px}
.bank-body{position:relative;z-index:1;min-width:0}
.bank-body h2{color:#fff;font-size:clamp(20px,2.4vw,27px);margin:0 0 8px;line-height:1.25}
.bank-body>p{color:#c9d6d1;font-size:14.5px;line-height:1.65;margin:0 0 14px;max-width:64ch}
.bank-list{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.bank-list li{font-size:12px;color:var(--paper);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 13px;line-height:1.4}
.bank-list li b{color:var(--gold);font-weight:700}
@media(max-width:760px){
  .bank{grid-template-columns:1fr;gap:18px;text-align:left}
  .bank-fig{text-align:left;padding-right:0;padding-bottom:16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
}

/* menu: the call CTA that stands in for the unpublished price column */
.bro-call{display:block;text-align:right;transition:transform .2s ease}
.bro-call b{display:block;font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink);line-height:1.2}
.bro-call span{display:block;font-size:12.5px;color:var(--brass);font-weight:700;margin-top:3px;letter-spacing:.02em}
.bro-call:hover{transform:translateY(-1px)}
.bro-call:hover b{color:var(--brass)}
@media(max-width:820px){.bro-call{text-align:left}}

/* Heavier scrim for heroes carrying a bright photograph. Applied automatically by
   the generator, which measures the image under the text band at build time. */
.phero.bright .ph-scrim{background:
  linear-gradient(100deg,rgba(5,16,14,.95) 0%,rgba(5,16,14,.88) 34%,rgba(5,16,14,.62) 66%,rgba(5,16,14,.62) 100%),
  linear-gradient(to top,rgba(5,16,14,.9),rgba(5,16,14,.12) 62%)}

/* membership: wheel and kit photo stack on phones, photo first so the nine are
   the first thing you see */
@media(max-width:900px){
  .kwrap{grid-template-columns:1fr;gap:20px}
  .kw-photo{order:-1}
}

/* the count badge sits on the dark card now — brass on ink was 1.7:1 */
.bro-head .bro-count{display:inline-flex;margin:0 auto 10px;color:var(--gold);
  border-color:rgba(var(--gold-rgb),.45);background:rgba(255,255,255,.07)}

@media(max-width:700px){
  .dgm{margin:22px 0 4px;padding:22px 20px;border-radius:16px}
  .dgm figcaption{font-size:12.5px}
}

/* ---- guide diagrams -------------------------------------------------------
   HTML, not SVG. A fixed-viewBox SVG scaled to a 390px phone renders its labels
   at about 5px; this reflows and stays real, selectable, screen-readable text. */
.dgm{margin:32px 0 8px;background:var(--ink);border-radius:22px;padding:30px 32px}
.dgm h3{font-size:clamp(20px,2.2vw,26px);color:var(--figure);margin-bottom:20px}
.dgm b{color:var(--figure)}
.dgm p{color:#A9C2B8;font-size:14.5px;line-height:1.6;margin:0}
.dgm figcaption{margin-top:22px;padding-top:18px;border-top:1px solid rgba(166,203,184,.22);
  font-size:13.5px;line-height:1.6;color:#A9C2B8}

/* filler: the depth stack */
.dg-stack{display:grid;gap:10px}
.dg-row{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center}
.dg-band{border-radius:12px;border:1px solid rgba(166,203,184,.38);padding:18px 16px;min-height:78px;
  display:flex;align-items:center}
.dg-band span{font-size:14px;letter-spacing:.06em;color:#DCE9E2;font-weight:700}
.dg-shallow .dg-band{background:rgba(166,203,184,.30)}
.dg-mid .dg-band{background:rgba(166,203,184,.18)}
.dg-deep .dg-band{background:rgba(240,235,223,.13)}
.dg-note b{display:block;font-size:16.5px;margin-bottom:5px}

/* hair: the cycle */
.dg-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dg-phase{background:rgba(166,203,184,.14);border:1px solid rgba(166,203,184,.34);
  border-radius:14px;padding:18px 18px 16px;position:relative}
.dg-phase b{font-size:19px;display:block}
.dg-what{display:block;font-size:14px;color:#DCE9E2;margin-top:2px}
.dg-dur{display:block;font-size:15px;font-weight:800;color:var(--gold);margin:10px 0 8px}
.dg-phase+.dg-phase::before{content:"";position:absolute;left:-11px;top:50%;width:8px;height:8px;
  border-top:1.6px solid rgba(166,203,184,.75);border-right:1.6px solid rgba(166,203,184,.75);
  transform:translateY(-50%) rotate(45deg)}
.dg-aside{margin-top:16px;border-left:2px solid rgba(166,203,184,.45);padding-left:18px}
.dg-aside b{display:block;font-size:16.5px;margin-bottom:5px}

/* timing: the countdown rail */
.dg-rail{list-style:none;margin:0;padding:0;position:relative}
.dg-rail::before{content:"";position:absolute;left:6px;top:8px;bottom:20px;width:1.5px;
  background:rgba(166,203,184,.32)}
.dg-rail li{position:relative;padding:0 0 24px 30px;display:grid;grid-template-columns:130px 1fr;
  gap:18px;align-items:baseline}
.dg-rail li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;
  border-radius:50%;background:var(--gold)}
.dg-when{font-size:15px;font-weight:800;color:var(--gold)}
.dg-what2 b{display:block;font-size:16.5px;margin-bottom:4px}
.dg-rail li.dg-day{padding-bottom:0;grid-template-columns:1fr}
.dg-rail li.dg-day::before{background:var(--figure)}
.dg-rail li.dg-day .dg-when{color:var(--figure);letter-spacing:.16em;text-transform:uppercase;
  font-size:13px}

@media(max-width:820px){
  .dg-phases{grid-template-columns:1fr}
  .dg-phase+.dg-phase::before{left:50%;top:-11px;transform:translateX(-50%) rotate(135deg)}
}
@media(max-width:640px){
  .dg-row{grid-template-columns:1fr;gap:8px}
  .dg-band{min-height:0;padding:12px 14px}
  .dg-rail li{grid-template-columns:1fr;gap:4px;padding-left:26px}
  .dg-rail::before{left:5px}
  .dg-rail li::before{width:11px;height:11px}
}

/* second photo under a treatment page's main one - peels only so far, it runs
   two different peels and the copy names both */
.ph2{margin:14px 0 0}
.ph2 img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 62%;border-radius:18px;display:block}
.ph2 figcaption{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--mineral);
  padding-left:13px;border-left:2px solid var(--line)}
@media(max-width:760px){
  .ph2{max-width:215px;margin-left:auto;margin-right:auto}
  .ph2 img{border-radius:14px}
  .ph2 figcaption{font-size:12px}
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- gated guide body -----------------------------------------------------
   The guide is ALWAYS in the HTML - same markup for a reader and for a crawler,
   no user-agent branching, so this is a visual lock and not cloaking. Enough of
   the first section shows through that you can tell the content is real before
   deciding whether to hand over an email. */
.glock{position:relative;max-height:440px;overflow:hidden}
.glock.open{max-height:none;overflow:visible}
.glock-veil{position:absolute;left:0;right:0;bottom:0;height:300px;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,240,232,0) 0%,rgba(244,240,232,.86) 55%,var(--paper) 100%)}
.glock.open .glock-veil{display:none}

/* No-JS and pre-hydration: never leave a reader staring at a locked page that
   cannot unlock. If the script does not run, the guide is simply open. */
.glock{max-height:none}
html.js .glock:not(.open){max-height:440px}