/* ===== Cinematic 3D scroll: one WebGL world behind the page.
   Hero = 600 svh scroll stage (copy sticky, fades out as the camera travels), camera flies through the O of ROAS into a dark
   chamber, then the Profile section scrolls in as a glass editorial panel inside that chamber. Sections after Profile keep their
   original backgrounds. Everything below only applies while WebGL runs (html.gl). ===== */
#universe{position:fixed;inset:0;z-index:0;pointer-events:none;background:#08151a}
#universe canvas{display:block;width:100%;height:100%}
main,.site-header,.footer{position:relative;z-index:1}
.hero-art.hero-3d{display:none}
html.gl .hero{background:transparent!important;height:320svh;min-height:0;display:block;padding:0;overflow:visible}
html.gl .hero:before,html.gl .hero-glow,html.gl .hero-dust{display:none}
html.gl .hero-layout{position:sticky;top:0;height:100svh;min-height:0;display:grid;grid-template-columns:minmax(0,.33fr) minmax(0,.67fr);align-items:start;padding-top:118px;gap:0;width:var(--page);margin-inline:auto}
html.gl .hero-copy{opacity:var(--hero-fade,1);transform:translateY(calc((1 - var(--hero-fade,1)) * -28px));max-width:520px}
html.gl .hero-copy.is-gone{pointer-events:none;visibility:hidden}
html.gl body{font-family:"DM Sans",Inter,"Segoe UI",Arial,sans-serif}
html.gl .hero-title{font-weight:700;letter-spacing:-.055em;line-height:.94}
html.gl .hero-title .script{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;color:#e2c29a;letter-spacing:-.045em;text-shadow:none}
html.gl .serif{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500}
html.gl .button.light{background:#ead2ad;color:#121719}
html.gl .proof-strip strong{font-weight:700}
html.gl .hero-description{font-size:14.5px;line-height:1.8;color:#b9c6c7;max-width:440px;margin:22px 0 0}
html.gl .hero-description-2{margin:14px 0 26px}
html.gl .hero-bullets{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
html.gl .hero-bullets li{position:relative;padding-left:26px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#e6ecea}
html.gl .hero-bullets li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:6px;border-left:2px solid #e2b07e;border-bottom:2px solid #e2b07e;transform:rotate(-45deg)}
html.gl .hero-cta{gap:12px}
html.gl .proof-strip{margin-top:40px;gap:26px;max-width:520px}
html.gl .proof-strip strong{font-size:19px}
html.gl .proof-strip small{color:#8fa3a3}
html.gl .hero-title{font-size:clamp(46px,4.2vw,70px)}
html.gl .hero-description{font-size:14px;margin:18px 0 20px;max-width:430px}
html.gl .proof-strip{margin-top:26px;padding-top:14px}
html.gl .scroll-hint{position:absolute;top:calc(100svh - 64px);bottom:auto;opacity:var(--hero-fade,1)}
html.gl .hero-stage-note{position:absolute;right:5.3%;top:calc(100svh - 58px);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7f9a9a;opacity:var(--hero-fade,1)}
html.gl .ticker{position:relative;z-index:1}
/* profile lives inside the chamber: glass editorial panel over the 3D room */
/* profile: pinned inside the chamber, revealed by its own scroll progress (--pf 0..1), then the page continues */
html.gl .section.lead{background:transparent!important;padding:0;overflow:visible;height:100svh}
html.gl .lead-grid{position:sticky;top:max(50px,calc(50svh - 420px));opacity:var(--pf,0);transition:none}
html.gl .lead-grid{background:rgba(240,241,238,.95);border:1px solid rgba(255,255,255,.55);border-radius:28px;padding:40px;box-shadow:0 50px 140px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.2);}
html.gl .section.lead .section-kicker{color:#4f6a70}
@media(max-width:1200px){html.gl .lead-grid{padding:28px}}
@media(max-width:900px){
  html.gl .hero{height:240svh}
  html.gl .hero-layout{grid-template-columns:1fr;padding-top:92px;align-items:start}
  html.gl .hero-copy{max-width:100%}
  html.gl .hero-title{font-size:clamp(44px,10.5vw,64px)}
  html.gl .hero-description{font-size:13px;margin:14px 0 14px}
  html.gl .hero-description-2{display:none}
  html.gl .proof-strip{margin-top:16px;padding-top:10px}
  html.gl .proof-strip strong{font-size:14px}
  html.gl .hero-stage-note{display:none}
  html.gl .hero-layout::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,26,.9) 0%,rgba(8,21,26,.7) 55%,rgba(8,21,26,0) 100%);opacity:var(--hero-fade,1);pointer-events:none}
  html.gl .hero-copy{position:relative;z-index:2}
  html.gl .section.lead{height:100svh}
  html.gl .lead-grid{top:80px}
  html.gl .lead-grid{padding:20px;border-radius:20px}
}