/* UniHealth Centre: dark, glowing spa-menu layout (matches the red light story section). A big rounded sage hero carries the chamber animation; services read like a treatment menu
   (name, dotted leader, price); serif display with a clean sans body. Single light look by choice so the owner's swatches
   (sage leading, beige and cream as warm grounds) always render as given and never turn brown in dark mode. */
:root{
  --sage:#b3c29f; --sage-soft:#172015; --sage-deep:#c4d2b0; --olive:#1a2316;
  --beige:#e3c6b4; --cream:#121912; --paper:#0e130d; --card:#151c14; --card-2:#1a2318;
  --ink:#eef0e8; --muted:#a9b0a0; --line:#263023; --field:#4f5c4b; --danger:#ff8a80; --ok:#7cc48d; --glow:#ff5a48;
  --logo:var(--sage);
  --f-display:"Sora", "Segoe UI", system-ui, sans-serif;
  --f-body:"Albert Sans", "Segoe UI", system-ui, sans-serif;
  --r:22px; --r-lg:40px; --max:1200px;
  color-scheme: dark;
}*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 var(--f-body); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:500; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.03em}
h1{font-size:clamp(2.5rem, 5.6vw, 4.6rem); font-weight:500}
h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem)}
h3{font-size:1.25rem; line-height:1.2; letter-spacing:-.02em}
h1 em, h2 em{font-style:normal; color:var(--sage-deep)}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:clamp(16px, 4vw, 40px)}
.label{font:600 .74rem/1 var(--f-body); text-transform:uppercase; letter-spacing:.2em; color:var(--sage-deep)}
.lede{color:var(--muted); font-size:1.12rem; max-width:56ch}
section{padding-block:clamp(72px, 10vw, 128px)}
:focus-visible{outline:3px solid var(--sage-deep); outline-offset:3px; border-radius:8px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.6em; padding:1em 1.6em; border-radius:999px; font:600 .95rem/1 var(--f-body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .2s, background .2s, color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--olive); color:var(--paper)}
.btn-primary:hover{background:var(--sage-deep)}
.btn-sage{background:var(--sage); color:var(--olive)}
.btn-sage:hover{background:var(--sage-deep); color:var(--paper)}
.btn-ghost{border-color:currentColor; background:transparent; color:inherit}
.btn-ghost:hover{background:var(--olive); color:var(--paper); border-color:var(--olive)}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}

/* Logo */
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo svg{flex:none}
.wordmark{display:grid; line-height:1}
.wordmark b{font:800 1.12rem/1 var(--f-body); letter-spacing:.06em}
.wordmark small{display:flex; align-items:center; gap:5px; font:600 .54rem/1 var(--f-body); letter-spacing:.34em; color:var(--muted); margin-top:4px}
.wordmark small::before, .wordmark small::after{content:""; height:1.5px; width:8px; background:currentColor}
.home header .logo .stetho{stroke-dasharray:60; animation:drawIn 1.6s ease-out both .3s}
@keyframes drawIn{from{stroke-dashoffset:60}}

/* Header */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px}
.nav ul{display:flex; gap:6px; list-style:none; margin:0; padding:0}
.nav ul a{display:block; text-decoration:none; font-weight:500; color:var(--muted); padding:.55em 1em; border-radius:999px; transition:background .2s, color .2s}
.nav ul a:hover{color:var(--ink); background:var(--sage-soft)}
.nav ul a[aria-current="page"]{color:var(--olive); background:var(--sage)}
.menu-btn{display:none; background:var(--sage-soft); border:none; border-radius:999px; width:46px; height:46px; color:var(--ink); cursor:pointer}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
@media (max-width:920px){
  .nav ul{display:none; position:absolute; left:12px; right:12px; top:76px; flex-direction:column; gap:2px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:10px; box-shadow:0 20px 40px -20px rgba(43,54,39,.35)}
  .nav ul.open{display:flex}
  .nav ul a{padding:14px 16px; font-size:1.05rem}
  .menu-btn{display:grid; place-items:center}
  .nav .btn-book{display:none}
}

/* Home hero: rounded sage stage */
.hero{padding-block:8px clamp(56px,8vw,96px)}
.stage{position:relative; background:var(--sage); border-radius:var(--r-lg); overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(16px,3vw,40px); padding:clamp(28px,5vw,72px)}
.stage > *{min-width:0; position:relative}
.stage h1{color:var(--olive)}
.stage h1 em{color:var(--paper)}
.stage .label{color:var(--olive)}
.stage .lede{color:#3a4733; margin-top:22px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.stage .btn-ghost{color:var(--olive)}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; padding:0; list-style:none}
.facts li{background:color-mix(in srgb, var(--paper) 55%, transparent); color:var(--olive); padding:.5em 1em; border-radius:999px; font-size:.88rem; font-weight:500}
.stage-art{position:relative; aspect-ratio:1/1; max-width:100%}
.chamber-art{position:absolute; inset:0; width:100%; height:100%}
.bubbles{position:absolute; inset:-10%; width:120%; height:120%; pointer-events:none}
.rings circle{transform-box:fill-box; transform-origin:center; stroke-width:1.5; animation:ring 5s cubic-bezier(.2,.6,.3,1) infinite}
.rings circle:nth-child(2){animation-delay:1.66s} .rings circle:nth-child(3){animation-delay:3.33s}
@keyframes ring{from{transform:scale(.7); opacity:.8} to{transform:scale(2.4); opacity:0}}
.capsule{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.chip-float{position:absolute; right:6%; bottom:10%; background:var(--paper); color:var(--olive); border-radius:999px; padding:.6em 1.1em; font-size:.85rem; font-weight:600; box-shadow:0 12px 30px -12px rgba(43,54,39,.4); animation:rise .8s cubic-bezier(.2,.7,.2,1) both 1s}
.stage::after{content:""; position:absolute; right:-12%; top:-30%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); pointer-events:none}
@media (max-width:920px){
  .stage{grid-template-columns:1fr}
  .stage-art{max-width:420px; width:100%; justify-self:center; aspect-ratio:4/3}
}

/* Load motion */
@keyframes rise{from{transform:translateY(24px); opacity:0}}
@keyframes grow{from{transform:scale(.96); opacity:0}}
.reveal{animation:rise .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 90ms)}
.stage{animation:grow 1s cubic-bezier(.2,.7,.2,1) both}

/* Section heads */
.head{display:grid; gap:16px; margin-bottom:clamp(36px,5vw,56px)}
.head-split{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,96px); align-items:start}
.head-split > *{min-width:0}
.sticky-head{position:sticky; top:110px; display:grid; gap:18px}
@media (max-width:920px){ .head-split{grid-template-columns:1fr} .sticky-head{position:static} }
.link-more{display:inline-flex; align-items:center; gap:6px; color:var(--sage-deep); font-weight:600; text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:2px; justify-self:start}

/* Treatment menu (home) */
.menu{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.menu a{display:grid; grid-template-columns:68px auto 1fr auto; grid-template-rows:auto auto; column-gap:18px; row-gap:2px; align-items:end; padding:22px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .25s, padding .25s}
.menu a:hover{background:var(--sage-soft); padding-inline:14px}
.menu .ico{grid-row:1 / span 2; align-self:center; width:68px; height:52px; border-radius:14px; background:var(--sage-soft); color:var(--sage-deep); display:grid; place-items:center}
.menu a:hover .ico{background:var(--sage)}
.menu .ico .art{width:86%}
.menu .name{font:500 1.2rem/1.25 var(--f-display); letter-spacing:-.02em}
.menu .dots{border-bottom:2px dotted var(--field); margin-bottom:.45em; min-width:24px}
.menu .price{font-weight:600; white-space:nowrap}
.menu .price small{font-weight:400; color:var(--muted)}
.menu .desc{grid-column:2 / -1; color:var(--muted); font-size:.95rem}
@media (max-width:560px){
  .menu a{grid-template-columns:52px 1fr auto; column-gap:12px}
  .menu .ico{width:52px; height:44px}
  .menu .dots{display:none}
  .menu .name{font-size:1.05rem}
}

/* Steps (a real sequence, so numbered) */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{background:var(--paper); border-radius:var(--r); padding:28px 24px 30px; display:grid; gap:10px; align-content:start}
.steps li::before{counter-increment:s; content:"0" counter(s); font:300 2.6rem/1 var(--f-display); letter-spacing:-.04em; color:var(--sage-deep)}
.steps h3{font-size:1.2rem}
.steps p{color:var(--muted); font-size:.98rem}
.on-cream{background:var(--cream)}
.on-sage-soft{background:var(--sage-soft)}
@media (max-width:920px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* Call-to-action card */
.cta{background:var(--beige); border-radius:var(--r-lg); padding:clamp(32px,6vw,72px); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:28px; position:relative; overflow:hidden}
.cta > *{min-width:0; position:relative}
.cta .label{color:#5a4536}
.cta h2{max-width:14ch}
.cta p{color:#4f4136; margin-top:14px; max-width:44ch}
.cta::before{content:""; position:absolute; left:-8%; bottom:-60%; width:46%; aspect-ratio:1; border-radius:50%; background:var(--cream); opacity:.7}
.cta .hero-cta{margin-top:0}

/* Page head (inner pages) */
.page-head{padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px)}
.page-head .wrap{display:grid; gap:18px}
.page-head .lede{font-size:1.2rem}

/* Services rows */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,4vw,48px)}
.chip{border:1.5px solid var(--line); background:var(--paper); color:var(--muted); padding:.65em 1.2em; border-radius:999px; font:600 .88rem/1 var(--f-body); cursor:pointer}
.chip:hover{border-color:var(--sage)}
.chip[aria-pressed="true"]{background:var(--olive); color:var(--paper); border-color:var(--olive)}
.rows{display:grid; gap:clamp(20px,3vw,32px)}
.svc-row{scroll-margin-top:100px; display:grid; grid-template-columns:.8fr 1.2fr; gap:0; background:var(--paper); border-radius:var(--r-lg); overflow:hidden; min-width:0}
.svc-row:nth-child(even) .svc-art{order:2}
.svc-art{background:var(--sage-soft); color:var(--sage-deep); display:grid; place-items:center; min-height:260px; position:relative}
.svc-row:nth-child(4n+2) .svc-art{background:var(--cream)}
.svc-row:nth-child(4n+3) .svc-art{background:var(--sage)}
.svc-row:nth-child(4n+3) .svc-art{color:var(--olive)}
.svc-art .art{width:min(70%, 320px); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover .art{transform:scale(1.05)}
.svc-info{padding:clamp(24px,4vw,48px); display:grid; gap:14px; align-content:center; min-width:0}
.svc-info h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.svc-info > p{color:var(--muted); max-width:52ch}
.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0}
.tags li{font-size:.82rem; padding:.35em .85em; border-radius:999px; background:var(--cream); color:#5a4536}
.svc-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; padding-top:18px; border-top:1px solid var(--line)}
.price{font:500 1.6rem/1 var(--f-display); letter-spacing:-.03em}
.price small{font:500 .85rem/1 var(--f-body); color:var(--muted); margin-left:6px}
.practitioner-note{margin-top:28px; color:var(--muted); font-size:.95rem; max-width:70ch}
@media (max-width:820px){
  .svc-row{grid-template-columns:1fr}
  .svc-row:nth-child(even) .svc-art{order:0}
  .svc-art{min-height:200px}
}

/* Line art + loops */
.art .fill-soft{fill:color-mix(in srgb, currentColor 18%, transparent)}
.art .fill-solid{fill:currentColor; stroke:none}
.art *{transform-box:fill-box}
.a-bubbles circle{animation:bub 2.8s ease-in infinite} .a-bubbles circle:nth-child(2){animation-delay:.9s} .a-bubbles circle:nth-child(3){animation-delay:1.7s}
@keyframes bub{from{transform:translateY(4px); opacity:0} 30%{opacity:1} to{transform:translateY(-16px); opacity:0}}
.a-glow{stroke:var(--glow); animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{opacity:.35}}
.a-pulse circle{transform-origin:center; animation:pulse2 3s ease-out infinite} .a-pulse circle:nth-child(2){animation-delay:.4s} .a-pulse circle:nth-child(3){animation-delay:.8s}
@keyframes pulse2{0%{opacity:.25} 20%{opacity:1} 100%{opacity:.25}}
.a-flow{stroke-dasharray:6 8; animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.a-scan{stroke-width:2.5; animation:scan 3s ease-in-out infinite}
@keyframes scan{50%{transform:translateY(66px)}}
.a-fillbar{transform-origin:left; animation:fillbar 3s ease-in-out infinite}
@keyframes fillbar{0%,100%{transform:scaleX(.2)} 50%{transform:scaleX(1)}}
.a-drip{animation:drip 1.8s ease-in infinite}
@keyframes drip{from{transform:translateY(-6px); opacity:0} 30%{opacity:1} to{transform:translateY(10px); opacity:0}}

/* Visit */
.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); align-items:stretch}
.visit-grid > *{min-width:0}
.place{background:var(--sage); border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); display:grid; gap:22px; align-content:start}
.place .label{color:var(--olive)}
.hours{background:var(--cream); border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); display:grid; gap:18px; align-content:start}
.hours dl{margin:0; display:grid; gap:0}
.hours dl div{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px dotted var(--field)}
.hours dt{font-weight:600} .hours dd{margin:0; color:#4f4136; font-variant-numeric:tabular-nums}
.hours .note{color:#5a4536}
@media (max-width:820px){ .visit-grid{grid-template-columns:1fr} }

/* Contact list */
.contact-list{display:grid; gap:18px}
.contact-list div{display:grid; gap:4px}
.contact-list span{font:600 .72rem/1.2 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep)}
.place .contact-list span{color:var(--olive); opacity:.75}
.contact-list b{font:400 1.12rem/1.4 var(--f-display); letter-spacing:-.01em; word-break:break-word}
.contact-list a, .foot a.u{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}

/* About */
.statement{font:400 clamp(1.6rem,3vw,2.4rem)/1.25 var(--f-display); letter-spacing:-.03em; max-width:24ch; text-wrap:balance}
.statement em{color:var(--sage-deep)}
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,80px); align-items:center}
.about > div{min-width:0; display:grid; gap:20px}
.brand-panel{aspect-ratio:1; max-width:100%; border-radius:50%; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center; color:var(--olive); position:relative; overflow:hidden; background:var(--sage);
  --logo:var(--paper); --paper:var(--sage)}
.brand-panel .wordmark b{font-size:1.9rem}
.brand-panel .wordmark small{color:var(--olive); justify-content:center; font-size:.7rem}
.brand-panel .tagline{font:300 1rem/1 var(--f-display); letter-spacing:.04em; color:var(--olive)}
.brand-panel::before{content:""; position:absolute; inset:8%; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06); opacity:.4}}
.brand-panel > *{position:relative}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--line)}
.checks li{display:flex; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line)}
.checks svg{flex:none; margin-top:4px; color:var(--sage-deep)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px)}
.stats div{background:var(--paper); border-radius:var(--r); padding:28px 26px; display:grid; gap:6px}
.stats b{font:300 2.6rem/1 var(--f-display); letter-spacing:-.04em; color:var(--sage-deep)}
.stats span{color:var(--muted)}
@media (max-width:920px){ .about{grid-template-columns:1fr} .brand-panel{max-width:360px; width:100%; justify-self:center} }
@media (max-width:560px){ .stats{grid-template-columns:1fr} }

/* Forms */
.form-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(20px,3vw,32px); align-items:start}
.form-wrap > *{min-width:0}
@media (max-width:920px){ .form-wrap{grid-template-columns:1fr} }
form.card, .jane{background:var(--paper); border-radius:var(--r-lg); padding:clamp(24px,4vw,44px); display:grid; gap:18px; border:1px solid var(--line)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .row{grid-template-columns:1fr} }
label{display:grid; gap:8px; font-weight:600; font-size:.9rem}
input, select, textarea{font:inherit; font-weight:400; color:var(--ink); background:#fff; border:1.5px solid var(--field); border-radius:14px; padding:.8em 1em; width:100%; min-width:0}
textarea{resize:vertical; min-height:100px}
input:focus, select:focus, textarea:focus{outline:3px solid var(--sage); outline-offset:0; border-color:var(--sage-deep)}
[aria-invalid="true"]{border-color:var(--danger); border-width:2px}
.note{font-size:.84rem; color:var(--muted); font-weight:400}
.err{font-size:.9rem; font-weight:600; color:var(--danger)}
.done{display:flex; gap:12px; align-items:start; background:var(--sage-soft); color:var(--ink); border-radius:16px; padding:16px 18px}
.done svg{flex:none; color:var(--sage-deep); margin-top:2px}
.stars{display:flex; gap:4px}
.stars button{background:none; border:none; padding:2px; cursor:pointer; color:var(--field)}
.stars button.on{color:#c9962a}

/* Footer: deep olive */
footer{background:var(--olive); color:#e9eadf; padding-block:64px 36px; margin-top:clamp(56px,8vw,96px)}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.foot > div{min-width:0; display:grid; gap:10px; align-content:start}
.foot h2{margin:0 0 4px; font:600 .72rem/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--sage)}
.foot a{text-decoration:none; color:#e9eadf}
.foot a:hover{color:var(--sage)}
.foot p{color:#c9ccbc; font-size:.95rem}
.foot .logo{color:#f4f1e8; --logo:var(--sage); --paper:var(--olive)}
.foot .logo .wordmark small{color:#c9ccbc}
.foot .tagline{font:300 1.1rem/1.2 var(--f-display); letter-spacing:.02em; color:var(--beige); margin-top:8px}
.copy{margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; color:#b9bdab; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px}
.motion-toggle{background:none; border:1px solid rgba(255,255,255,.3); color:#e9eadf; border-radius:999px; padding:.5em 1em; font:500 .8rem/1 var(--f-body); cursor:pointer}
.motion-toggle:hover{border-color:var(--sage); color:var(--sage)}
html.paused *, html.paused *::before, html.paused *::after{animation-play-state:paused!important}
@media (max-width:920px){ .foot{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot{grid-template-columns:1fr} }

/* Phone: sticky book button after the first screen */
.fab{display:none}
@media (max-width:920px){
  .fab{display:flex; justify-content:center; position:fixed; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:30; box-shadow:0 12px 30px -10px rgba(43,54,39,.5); transform:translateY(calc(100% + 30px)); transition:transform .3s ease}
  .fab.show{transform:none}
  footer{padding-bottom:110px}
}

/* Red light story: dark scroll-driven zoom from skin to mitochondria */
.cells{position:relative; height:440vh; background:#0e130d; color:#eef0e8; padding:0; margin-block:clamp(24px,4vw,48px) 0}
.cells-sticky{position:sticky; top:76px; height:calc(100vh - 76px); height:calc(100svh - 76px); overflow:hidden}
.cells canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.cells-copy{position:relative; height:100%; display:grid; align-content:center; gap:20px; pointer-events:none}
.cells-copy > *{max-width:430px}
.cells .label{color:var(--sage)}
.cells h2{color:#fbf7f2}
.cells h2 em{color:#ff7a68}
.cell-steps{list-style:none; padding:0; margin:6px 0 0; display:grid; gap:4px}
.cell-step button{all:unset; box-sizing:border-box; display:grid; gap:6px; width:100%; padding:10px 0 10px 18px; border-left:2px solid rgba(255,255,255,.14); cursor:pointer; pointer-events:auto; opacity:.42; transition:opacity .4s, border-color .4s}
.cell-step button:focus-visible{outline:2px solid var(--sage); outline-offset:4px}
.cell-step b{font:500 1.1rem/1.25 var(--f-display); letter-spacing:-.02em; color:#fbf7f2}
.cell-step span{font-size:.95rem; line-height:1.55; color:#cfd3c4; display:none}
.cell-step.on button{opacity:1; border-color:#ff5a48}
.cell-step.on span{display:block}
.cells-note{font-size:.78rem; color:#8f9685}
.cell-progress{position:absolute; right:clamp(16px,3vw,40px); top:50%; transform:translateY(-50%); width:2px; height:38%; background:rgba(255,255,255,.12); border-radius:2px}
.cell-progress i{position:absolute; left:0; right:0; top:0; height:100%; background:linear-gradient(#ff5a48, var(--sage)); transform-origin:top; transform:scaleY(0); border-radius:2px}
.cell-hint{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#8f9685; transition:opacity .4s}
@media (max-width:820px){
  .cells-copy{align-content:end; padding-bottom:28px; background:linear-gradient(to top, rgba(14,19,13,.95) 0%, rgba(14,19,13,.75) 45%, transparent 75%)}
  .cells-copy > *{max-width:none}
  .cells h2{font-size:1.7rem}
  .cell-step:not(.on){display:none}
  .cell-hint{display:none}
  .cell-progress{top:24px; transform:none; height:28%}
}
/* reduced motion: no scroll-jacking; steps become a manual stepper */
.cells.static{height:auto}
.cells.static .cells-sticky{position:relative; top:0; height:min(86vh, 720px)}
.cells.static .cell-hint{display:none}

/* ── Dark look: deep green-black grounds, sage and beige as the glow ───────────── */
body{background:radial-gradient(1200px 600px at 70% -10%, rgba(179,194,159,.10), transparent 60%), var(--paper)}
h1 em, h2 em, .statement em{color:var(--beige)}
.btn-primary{background:var(--sage); color:#18200f}
.btn-primary:hover{background:#cfdcbd; color:#18200f}
.btn-sage{background:var(--sage); color:#18200f}
.btn-ghost:hover{background:rgba(238,240,232,.08); color:var(--ink); border-color:var(--ink)}
.nav ul a[aria-current="page"]{background:var(--sage); color:#18200f}
@media (max-width:920px){ .nav ul{background:var(--card); box-shadow:0 20px 40px -10px rgba(0,0,0,.6)} }

.stage{background:radial-gradient(90% 120% at 75% 30%, #243121 0%, #141c13 55%, #0f150e 100%); border:1px solid var(--line)}
.stage h1, .stage .lede, .stage .btn-ghost{color:var(--ink)}
.stage .lede{color:var(--muted)}
.stage h1 em{color:var(--beige)}
.stage .label{color:var(--sage)}
.facts li{background:rgba(179,194,159,.1); color:var(--sage-deep); border:1px solid rgba(179,194,159,.18)}
.stage::after{background:radial-gradient(circle, rgba(179,194,159,.16), transparent 65%)}
.chip-float{background:var(--card-2); color:var(--sage-deep); border:1px solid var(--line); box-shadow:0 12px 30px -12px rgba(0,0,0,.7)}

.on-cream{background:#111810}
.on-sage-soft{background:#121a11}
.steps li{background:var(--card); border:1px solid var(--line)}
.steps li::before{color:var(--sage)}
.menu .ico{background:var(--card-2); color:var(--sage)}
.menu a:hover{background:rgba(179,194,159,.07)}
.menu a:hover .ico{background:rgba(179,194,159,.18)}

.cta{background:radial-gradient(70% 140% at 0% 100%, rgba(227,198,180,.16), transparent 60%), var(--card); border:1px solid var(--line)}
.cta::before{background:var(--beige); opacity:.06}
.cta .label{color:var(--beige)}
.cta p{color:var(--muted)}

.chip{background:transparent; border-color:var(--line); color:var(--muted)}
.chip:hover{border-color:var(--sage); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--sage); color:#18200f; border-color:var(--sage)}
.svc-row{background:var(--card); border:1px solid var(--line)}
.svc-art, .svc-row:nth-child(4n+2) .svc-art, .svc-row:nth-child(4n+3) .svc-art{background:radial-gradient(circle at 50% 50%, rgba(179,194,159,.16), transparent 70%), var(--card-2); color:var(--sage)}
.svc-row:nth-child(4n+2) .svc-art{background:radial-gradient(circle at 50% 50%, rgba(227,198,180,.14), transparent 70%), var(--card-2); color:var(--beige)}
.tags li{background:rgba(227,198,180,.1); color:var(--beige)}
.svc-foot{border-top-color:var(--line)}

.place{background:radial-gradient(80% 100% at 100% 0%, rgba(179,194,159,.14), transparent 60%), var(--card); border:1px solid var(--line)}
.place .label, .place .contact-list span{color:var(--sage); opacity:1}
.hours{background:var(--card); border:1px solid var(--line)}
.hours .label{color:var(--beige)!important}
.hours dd, .hours .note{color:var(--muted)}
.hours dl div{border-bottom-color:var(--field)}

.brand-panel{background:radial-gradient(circle at 50% 40%, #263423, #121912 70%); border:1px solid var(--line); color:var(--ink); --logo:var(--sage); --paper:#121912}
.brand-panel .wordmark small{color:var(--muted)}
.brand-panel .tagline{color:var(--beige)}
.brand-panel::before{border-color:rgba(179,194,159,.35)}
.stats div{background:var(--card); border:1px solid var(--line)}
.stats b{color:var(--sage)}

form.card, .jane{background:var(--card); border-color:var(--line)}
input, select, textarea{background:#0f150e; color:var(--ink); border-color:var(--field)}
input::placeholder, textarea::placeholder{color:#6f7868}
input:focus, select:focus, textarea:focus{outline-color:rgba(179,194,159,.45); border-color:var(--sage)}
.done{background:rgba(179,194,159,.12)}
.done svg{color:var(--sage)}

footer{background:#0a0e09; border-top:1px solid var(--line)}
.foot .logo{--logo:var(--sage); --paper:#0a0e09}
.fab{box-shadow:0 12px 30px -8px rgba(0,0,0,.8)}
/* Red light chamber LEDs glow in rows; shockwave pulses travel out from the applicator */
.a-leds circle{fill:var(--glow); stroke:none; animation:led 2.4s ease-in-out infinite}
@keyframes led{0%,100%{opacity:.25} 50%{opacity:1}}
.a-waves path{animation:wave 1.6s ease-out infinite; opacity:0}
.a-waves path:nth-child(2){animation-delay:.25s} .a-waves path:nth-child(3){animation-delay:.5s}
@keyframes wave{0%{opacity:0} 30%{opacity:1} 100%{opacity:0}}

/* 3D showroom */
.showroom-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,56px); align-items:center}
.showroom-grid > *{min-width:0}
.showroom-copy{display:grid; gap:18px}
.model-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.model-tabs button{border:1.5px solid var(--line); background:transparent; color:var(--muted); padding:.65em 1.15em; border-radius:999px; font:600 .88rem/1 var(--f-body); cursor:pointer; transition:background .2s, color .2s, border-color .2s}
.model-tabs button:hover{border-color:var(--sage); color:var(--ink)}
.model-tabs button[aria-selected="true"]{background:var(--sage); color:#18200f; border-color:var(--sage)}
.model-info{display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--line); min-height:150px; align-content:start}
.model-info p{color:var(--muted); max-width:46ch}
.viewer{position:relative; aspect-ratio:1/1; max-width:100%; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(70% 60% at 50% 38%, #233021 0%, #141b13 60%, #0e130d 100%)}
.viewer canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y}
.viewer canvas:active{cursor:grabbing}
.drag-hint{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:.5em 1em; border-radius:999px; background:rgba(14,19,13,.7); border:1px solid var(--line); color:var(--sage-deep); font-size:.8rem; pointer-events:none; transition:opacity .4s}
.showroom.touched .drag-hint{opacity:0}
.viewer-fallback{position:absolute; inset:0; display:grid; place-content:center; padding:32px; text-align:center; color:var(--muted)}
.viewer-fallback a{color:var(--sage-deep)}
.btn-3d{border:1.5px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:.85em 1.3em; font:600 .9rem/1 var(--f-body); cursor:pointer; display:inline-flex; align-items:center; gap:.5em}
.btn-3d:hover{border-color:var(--sage); color:var(--sage-deep)}
.svc-foot .actions{display:flex; flex-wrap:wrap; gap:10px}
@media (max-width:920px){ .showroom-grid{grid-template-columns:1fr} .viewer{order:-1; aspect-ratio:1/1} }

/* Forms: consent checkbox, honeypot (hidden from people, visible to bots) */
.consent{display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:.88rem; color:var(--muted); line-height:1.5}
.consent input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--sage); padding:0}
.consent a{color:var(--sage-deep)}
.hp{position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden}
label .note{display:block; margin-top:2px}

/* Long-form text pages (privacy policy) */
.prose{display:grid; gap:14px}
.prose > *{max-width:72ch}
.prose h2{font-size:1.4rem; margin-top:26px}
.prose p, .prose li{color:var(--muted)}
.prose ul{margin:0; padding-left:1.2em; display:grid; gap:6px}
.prose a{color:var(--sage-deep)}