/* ---- fonts: vendored locally in /fonts — nothing loads from a CDN ----
   Cormorant Garamond and Jost ship as variable fonts (one file covers every
   weight the page uses); IBM Plex Mono ships as two static weights. */
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-variable.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-variable-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---- the re-theme contract: change these values, the whole page follows ---- */
:root{
  --bg:#0D0B10;          /* warm near-black page ground */
  --ink:#F4EEE6;         /* cream text */
  --muted:#BEB5AC;       /* secondary text (9.9:1 on --bg; ≥4.5:1 on the glass panels) */
  --line:rgba(244,238,230,.15);  /* hairlines */
  --gold:#D8B98A;        /* champagne accent — CTAs, labels, italic words */
  --gold-ink:#1a130b;    /* text on a gold ground */

  /* --field: the decorative-only accent (non-text). Follows the champagne hue
     by default (identical to --gold today, so zero visual change). It exists so
     the browser editor's bring-your-brand-color mode has somewhere to DEMOTE a
     brand hue that can't carry text — the little eyebrow rules take the raw
     hue while readable text falls back to cream (--ink). Never put text on it. */
  --field:var(--gold);
  /* --gold-tint: a light companion of the accent, reserved for the editor's
     brand-color generator (the label/focus tint it derives on dark grounds).
     Not painted anywhere in this template's own CSS. */
  --gold-tint:#EBD9C2;
  --glass:rgba(255,255,255,.07); /* frosted panel fill */
  --glassb:rgba(255,255,255,.16);/* frosted panel border */
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Jost",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --max:1280px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:108px}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.004em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.italic{font-style:italic}.muted{color:var(--muted)}
.line{display:inline-block;width:42px;height:1px;background:var(--field);vertical-align:middle;margin-right:14px}
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--glassb);border-radius:18px}
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:14px 24px;border-radius:40px;color:var(--ink);background:var(--glass);border:1px solid var(--glassb);backdrop-filter:blur(12px);transition:.25s;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}.btn.gold:hover{background:#e6c89c}

/* ---- ambient effects: aurora + light motes + grain ---- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;inset:-20%;background:
  radial-gradient(38% 42% at 22% 28%,rgba(216,185,138,.16),transparent 60%),
  radial-gradient(40% 44% at 78% 32%,rgba(150,180,200,.14),transparent 62%),
  radial-gradient(50% 50% at 50% 88%,rgba(199,150,160,.12),transparent 65%);
  filter:blur(28px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2%) scale(1.06)}100%{transform:translate(-3%,2%) scale(1.02)}}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,247,235,.9),rgba(255,247,235,0) 70%);animation:float linear infinite}
@keyframes float{0%{transform:translateY(20vh);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-110vh);opacity:0}}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.aurora,.mote{animation:none}.grain{display:none}}

/* ---- IMAGE SLOTS ----------------------------------------------------------
   Every photo position ships as a labeled, art-directed gradient placeholder —
   no stock photography is bundled (you own your imagery and its licensing).
   To use your photos: add `background-image:url(../assets/your-photo.jpg)` (plus
   background-size:cover;background-position:center) to the slot, or swap the
   gradient out entirely. Art-direction notes sit next to each slot in the HTML. */
.imgslot::before{content:attr(data-label);position:absolute;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,238,230,.8);background:rgba(13,11,16,.55);backdrop-filter:blur(8px);border:1px solid var(--glassb);border-radius:30px;padding:8px 16px;white-space:nowrap}
.ph-hero{background:
  radial-gradient(90% 70% at 68% 18%,rgba(216,185,138,.34),transparent 58%),
  radial-gradient(70% 60% at 18% 40%,rgba(150,180,200,.18),transparent 60%),
  radial-gradient(80% 70% at 55% 90%,rgba(199,150,160,.20),transparent 62%),
  linear-gradient(165deg,#1c1622,var(--bg) 72%)}
.ph-cool{background:
  linear-gradient(100deg,transparent 45%,rgba(203,221,235,.28) 50%,transparent 55%),
  radial-gradient(80% 70% at 70% 25%,rgba(150,180,200,.38),transparent 58%),
  radial-gradient(70% 60% at 20% 80%,rgba(216,185,138,.16),transparent 62%),
  linear-gradient(150deg,#141722,#0e0d13 75%)}
.ph-warm{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cg fill='none' stroke='%23D8B98A' stroke-opacity='.22'%3E%3Cellipse cx='120' cy='150' rx='150' ry='105'/%3E%3Cellipse cx='120' cy='150' rx='95' ry='66'/%3E%3C/g%3E%3C/svg%3E") left top/100% auto no-repeat,
  radial-gradient(80% 70% at 30% 25%,rgba(216,185,138,.40),transparent 58%),
  radial-gradient(70% 60% at 78% 78%,rgba(199,150,160,.24),transparent 62%),
  linear-gradient(200deg,#1e1618,#0e0c11 75%)}
.ph-rose{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cg fill='%23E8CFA6' fill-opacity='.5'%3E%3Ccircle cx='120' cy='70' r='4'/%3E%3Ccircle cx='170' cy='130' r='3'/%3E%3Ccircle cx='230' cy='180' r='5'/%3E%3Ccircle cx='270' cy='250' r='3'/%3E%3Ccircle cx='250' cy='330' r='4'/%3E%3Ccircle cx='190' cy='390' r='3'/%3E%3Ccircle cx='150' cy='450' r='4'/%3E%3C/g%3E%3C/svg%3E") center/100% auto no-repeat,
  radial-gradient(90% 75% at 55% 20%,rgba(199,150,160,.36),transparent 60%),
  radial-gradient(70% 60% at 20% 85%,rgba(216,185,138,.18),transparent 62%),
  linear-gradient(170deg,#1b1319,#0e0c11 78%)}
.ph-concern{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%23CBDDEB' stroke-opacity='.16'%3E%3Cellipse cx='620' cy='300' rx='300' ry='210'/%3E%3Cellipse cx='620' cy='300' rx='220' ry='150'/%3E%3Cellipse cx='620' cy='300' rx='140' ry='92'/%3E%3C/g%3E%3C/svg%3E") right -60px center/75% auto no-repeat,
  linear-gradient(112deg,transparent 32%,rgba(150,180,200,.06) 43%,rgba(203,221,235,.15) 50%,rgba(150,180,200,.06) 57%,transparent 68%),
  radial-gradient(42% 55% at 72% 30%,rgba(150,180,200,.42),rgba(150,180,200,.10) 55%,transparent 74%),
  radial-gradient(50% 45% at 14% 86%,rgba(216,185,138,.20),transparent 62%),
  linear-gradient(150deg,#1A2130,#10131C 58%,#0C0E15)}
.ph-renewed{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'%3E%3Ccircle cx='330' cy='620' r='430' fill='none' stroke='%23D8B98A' stroke-opacity='.32' stroke-width='1.5'/%3E%3C/svg%3E") left -80px bottom -120px/70% auto no-repeat,
  linear-gradient(64deg,transparent 30%,rgba(216,185,138,.06) 42%,rgba(232,207,166,.20) 50%,rgba(216,185,138,.06) 58%,transparent 70%),
  radial-gradient(48% 60% at 30% 35%,rgba(232,207,166,.45),rgba(216,185,138,.12) 55%,transparent 74%),
  radial-gradient(45% 50% at 80% 82%,rgba(199,150,160,.26),transparent 62%),
  linear-gradient(200deg,#2A1F1C,#17111A 60%,#0E0C11)}

/* ---- real default imagery (owned AI photos shipped as slot defaults) ----------
   Every converted placeholder now ships a real, licensed photo. object-fit:cover so
   the art-directed crop holds at any container size. All swappable — replace the
   <img> src (see docs/README.md). The hero + treatment-card #1 are SYNTHETIC (AI)
   portraits, flagged swappable in LICENSE.txt / README. */
.hero .bg img,.tcard .pic img{width:100%;height:100%;object-fit:cover;display:block}
/* science: a text + tall-image split; collapses to one column on narrow screens */
.sci-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
.sci-photo{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--glassb)}
.sci-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
/* the treatment-suite photo in the book column */
.book-photo{margin:26px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--glassb)}
.book-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
@media(max-width:840px){.sci-split{grid-template-columns:1fr}}

/* §glass-chip-over-image: the hero note is a fixed chip over the hero PHOTO, whose
   lit side can be bright. Give it a solid dark backing (not the .07 white glass) so
   its gold label + cream body always clear AA regardless of the photo beneath. */
.hero .note{background:rgba(13,11,16,.68)}

/* ---- glass nav ---- */
header{position:fixed;top:18px;left:0;right:0;z-index:30}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
/* fixed-header chips need a solid dark backing: glass alone fails AA when the
   oversized display text or gold CTA scrolls beneath (measured 1.0–4.1:1) */
header .glass,header .burger{background:rgba(13,11,16,.8)}
.brand{display:flex;align-items:center;gap:11px;padding:11px 18px}
.brand .mk{font-family:var(--display);font-size:22px;letter-spacing:.04em}
.brand .mk::before{content:"✦ ";color:var(--gold);font-size:14px}
.brand .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
nav.main{display:flex;gap:6px;padding:7px 10px}
nav.main a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:8px 15px;border-radius:30px;transition:.2s}
nav.main a:hover,nav.main a.on{background:rgba(255,255,255,.12)}
.burger{display:none;background:var(--glass);border:1px solid var(--glassb);border-radius:18px;font-size:20px;color:var(--ink);cursor:pointer;padding:11px 16px}

/* ---- hero ---- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:-8% 0;height:116%;will-change:transform}
.hero .bg::before{left:50%;top:38%;transform:translate(-50%,-50%)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,16,.45),rgba(13,11,16,.1) 35%,rgba(13,11,16,.82))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:64px;padding-top:120px}
.vlabel{position:absolute;left:30px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,230,.6);z-index:2}
.hero .eyebrow{display:block;margin-bottom:20px}
.hero h1{font-size:clamp(64px,12vw,180px);font-weight:400;line-height:.92;text-transform:lowercase}
.hero h1 .italic{display:block;color:#fff}
.hero .lead{margin-top:22px;max-width:26em;color:#ddd5cb;font-size:17px}
.hero .acts{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.hero .note{position:absolute;right:30px;bottom:120px;max-width:18em;text-align:right;z-index:2}
.hero .note .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hero .note p{font-size:14px;color:#d8d0c6;margin-top:8px}
.hero .stats{position:absolute;right:30px;bottom:46px;display:flex;gap:34px;z-index:2}
.hero .stats .n{font-family:var(--display);font-size:46px;line-height:1}
.hero .stats span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@media(max-width:1000px){.hero .note,.vlabel{display:none}.hero .stats{position:static;margin-top:26px}}

/* ---- content sections ---- */
.sec{position:relative;z-index:1;padding:120px 0}
.sec .head{max-width:680px}
.sec .head h2{font-size:clamp(40px,6vw,82px);text-transform:lowercase}
.sec .head h2 .italic{color:var(--gold)}
.sec .head p{color:var(--muted);font-size:18px;margin-top:18px}

/* cinematic parallax band */
.band{position:relative;z-index:1;min-height:78vh;display:flex;align-items:center;overflow:hidden;margin:0 14px;border-radius:24px}
.band .bg{position:absolute;inset:-10% 0;height:120%;will-change:transform}
.band .bg::before{left:50%;top:calc(8.33% + 26px);transform:translateX(-50%)}
.band .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(13,11,16,.7),rgba(13,11,16,.2) 60%)}
.band.right .bg::after{background:linear-gradient(250deg,rgba(13,11,16,.7),rgba(13,11,16,.2) 60%)}
.band .card{position:relative;z-index:2;margin:48px;padding:40px;max-width:30em}
.band .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.band h2{font-size:clamp(34px,4.6vw,60px);text-transform:lowercase;margin:12px 0 16px}
.band h2 .italic{color:var(--gold)}
.band p{color:#ddd5cb}.band.right{justify-content:flex-end}

/* treatments collection */
.coll{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
.tcard{overflow:hidden;transition:.3s}.tcard:hover{transform:translateY(-4px)}
.tcard .pic{aspect-ratio:4/5;position:relative}
.tcard .pic::before{left:14px;top:auto;bottom:12px;transform:none}
.tcard .b{padding:24px}
.tcard .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tcard h3{font-size:27px;text-transform:lowercase;margin:8px 0 8px}
.tcard p{color:var(--muted);font-size:14px}
.tcard .pr{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink);margin-top:14px;display:block}

/* before/after — consent-gated slots, honest by design (never fake results) */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.slot{aspect-ratio:4/5;border-radius:14px;position:relative;border:1px solid var(--line);background:
  linear-gradient(180deg,rgba(216,185,138,.28),rgba(216,185,138,.06)) 50% 38px/1px calc(100% - 38px) no-repeat,
  linear-gradient(90deg,rgba(255,255,255,.02) 0 50%,rgba(255,255,255,.05) 0),
  linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.slot::before{content:"before · after";position:absolute;left:50%;top:14px;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted,rgba(244,238,230,.6))}
.slot::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.disc{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:18px;text-align:center}

/* CTA — the panel is the funnel bottom */
.cta{position:relative;z-index:1;padding:0 14px 14px}
.cta .panel{padding:88px 40px 72px;text-align:center}
.cta h2{font-size:clamp(44px,7vw,108px);text-transform:lowercase;margin:14px 0 16px}
.cta h2 .italic{color:var(--gold)}
.cta .panel>p{color:var(--muted);max-width:30em;margin:0 auto}
.bookgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;max-width:960px;margin:52px auto 0;text-align:left;align-items:start}
.bookgrid .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.bookgrid .tel{font-family:var(--display);font-size:clamp(26px,2.8vw,34px);border-bottom:1px solid var(--gold)}
.bookgrid .mut{color:var(--muted);font-size:14px;margin-top:10px;max-width:24em}
.bookgrid .trust{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bookgrid .trust b{color:var(--gold);letter-spacing:2px;font-weight:500}
.bookgrid form{background:var(--glass);border:1px solid var(--glassb);border-radius:18px;padding:30px;backdrop-filter:blur(12px)}
.bookgrid .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bookgrid .fld{margin-bottom:14px}
.bookgrid form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.bookgrid form label .req{color:var(--gold)}
.bookgrid input,.bookgrid select{width:100%;font-family:var(--body);font-weight:300;font-size:15.5px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--glassb);border-radius:12px;padding:12px 14px;transition:border-color .2s}
.bookgrid input:focus,.bookgrid select:focus{outline:1px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.bookgrid .consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5;margin:4px 0 18px}
.bookgrid .consent input{width:auto;margin-top:2px;accent-color:var(--gold)}
.bookgrid .facts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bookgrid .or{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bookgrid .tel2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:2px}
.bookgrid .fnote{margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:840px){.bookgrid{grid-template-columns:1fr;gap:32px}.bookgrid .row{grid-template-columns:1fr}.cta .panel{padding:64px 24px 52px}}

footer{position:relative;z-index:1;padding:70px 0 34px;border-top:1px solid var(--line);margin-top:60px}
footer .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
footer .brand{padding:0}
footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
footer a{display:block;color:var(--muted);font-size:14px;margin-bottom:9px}footer a:hover{color:var(--ink)}
.nap{margin-top:20px;font-style:normal;font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.04em;color:var(--muted)}
.nap b{color:var(--ink);font-weight:500}
footer .nap a{display:inline;color:var(--ink);border-bottom:1px solid var(--gold);margin:0}
.legal{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-family:var(--mono);font-size:10.5px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .legal a{display:inline;font-size:10.5px;margin:0;color:var(--muted)}footer .legal a:hover{color:var(--ink)}

/* scroll reveals — content is visible by default; adding .in PLAYS the entrance
   (`backwards` fill supplies the hidden start frame). Print, screenshots, and
   no-JS visitors always get the full page. */
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.reveal.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
@media(prefers-reduced-motion:reduce){.reveal.in{animation:none}.hero .bg,.band .bg{transform:none!important}html{scroll-behavior:auto}}
@media(max-width:1000px){
  nav.main{display:none;position:absolute;top:70px;right:30px;flex-direction:column;align-items:stretch;text-align:right;background:rgba(20,17,24,.92)}
  nav.main.open{display:flex}
  .burger{display:block}
  .coll{grid-template-columns:1fr}.band .card{margin:20px}.band.right{justify-content:flex-start}footer .grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ba-grid{grid-template-columns:1fr}footer .grid{grid-template-columns:1fr}.hero .stats{gap:22px}}

/* ==========================================================================
   BUILDER HOOKS — added for the browser editor (/edit/aurelia). None of these
   change the default render: ground rules only fire when the editor writes a
   non-default data-ground; the band photo only exists when a buyer supplies an
   image; the logo ::before override only fires when an <img> is present.
   ========================================================================== */

/* Section grounds: the plain content sections (Science, Treatments, Results)
   can wear one of three dark backdrops. Text stays cream / gold / muted on
   every one, so grounds are palette-independent. Default (no attribute) is the
   ambient aurora ground — identical to how the section shipped. */
.sec[data-ground="aurora"]{background:transparent}
.sec[data-ground="ink"]{background:#0A0810}
.sec[data-ground="glass"]{background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--glassb);border-bottom:1px solid var(--glassb)}

/* Band photo: a buyer-supplied / AI-generated band image activates a covering
   <figure> with its own scrim (mirrors the gradient band's ::after), sitting
   behind the glass card. No image → the gradient placeholder ships untouched. */
.band-photo{position:absolute;inset:0;z-index:1;margin:0;overflow:hidden}
/* Any glass card sitting over a band PHOTO gets the hero-note's solid dark
   backing (§glass-chip-over-image): a bright photo streak under .07 white
   glass sinks cream body below AA — the .68 ink backing keeps every pair
   clear regardless of the image beneath (incl. buyer uploads). */
section:has(.band-photo) .card.glass{background:rgba(13,11,16,.68)}
.band-photo img{width:100%;height:100%;object-fit:cover;display:block}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(13,11,16,.7),rgba(13,11,16,.2) 60%)}
.band.right .band-photo::after{background:linear-gradient(250deg,rgba(13,11,16,.7),rgba(13,11,16,.2) 60%)}

/* Logo mode: an uploaded wordmark image replaces the typed name — drop the
   decorative ✦ so the logo stands alone (the default typed state keeps it). */
.brand .mk:has(img)::before{content:none}