:root {
  --black:#050505;
  --paper:#f2f2eb;
  --muted:#aaa9a1;
  --volt:#dcff00;
  --line:rgba(255,255,255,.18);
  --side-rail:clamp(10.5rem,14vw,13rem);
}

* { box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--black); }
body { margin:0; color:var(--paper); font-family:Inter,Arial,sans-serif; }
button,a { color:inherit; font:inherit; }
button { border:0; cursor:pointer; }
a { text-decoration:none; }

.site-header {
  position:fixed; z-index:50; inset:0 0 auto; height:6rem;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 3vw; border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(3,3,3,.86),rgba(3,3,3,.05));
}
.logo { font:900 clamp(1.55rem,2.4vw,2.2rem)/1 "Barlow Condensed",Arial,sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
.logo span,.logo i { color:var(--volt); font-style:normal; }
.main-nav { display:flex; gap:2rem; }
.main-nav button { padding:.5rem 0; color:#a7a79f; background:none; font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:color .2s; }
.main-nav button:hover,.main-nav button.is-active { color:var(--paper); }
.main-nav button.is-active { box-shadow:inset 0 -2px var(--volt); }
.header-cta { justify-self:end; display:flex; justify-content:space-between; min-width:10rem; padding:.85rem 1rem; color:#050505; background:var(--volt); font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }

.experience,.stage { width:100%; height:100svh; }
.stage { position:relative; overflow:hidden; isolation:isolate; background:#070707; }
.media,.state-fallback,.transition-film,.media-shade,.media-vignette,.media-grain { position:absolute; inset:0; width:100%; height:100%; }
.media { z-index:0; }
.state-fallback,.transition-film { object-fit:cover; }
.state-fallback { z-index:0; }
.transition-film { z-index:1; opacity:0; pointer-events:none; transition:opacity .22s cubic-bezier(.4,0,.2,1); }
.transition-film.is-visible { opacity:1; }
.media-shade { z-index:5; background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.32) 36%,rgba(0,0,0,.08) 59%,rgba(0,0,0,.73) 100%),linear-gradient(0deg,rgba(0,0,0,.68),transparent 42%); }
.media-vignette { z-index:6; box-shadow:inset 0 0 13vw rgba(0,0,0,.72); }
.media-grain { z-index:7; opacity:.105; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E"); pointer-events:none; }

.brand-code { position:absolute; z-index:2; top:7.5rem; left:3vw; display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.4); font:700 .56rem/1 Inter,sans-serif; letter-spacing:.2em; }
.brand-code b { display:grid; width:1.85rem; height:1.85rem; place-items:center; color:#050505; background:var(--volt); font-size:.55rem; }

.screen { position:absolute; z-index:10; inset:0; opacity:0; visibility:hidden; transform:translateY(1.7rem); transition:opacity .4s ease,transform .6s cubic-bezier(.2,.75,.2,1),visibility .4s; pointer-events:none; }
.screen.is-active { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.stage.is-moving .screen { opacity:0; visibility:hidden; transform:translateY(-1rem); pointer-events:none; }
.screen__copy { position:absolute; top:clamp(8.5rem,19vh,11rem); left:6vw; width:min(48rem,52vw); }
.screen--hero .screen__copy { top:clamp(7.5rem,16vh,9.5rem); }
.screen__copy--right { right:var(--side-rail); left:auto; width:min(46rem,calc(100vw - var(--side-rail) - 8vw)); text-align:right; }
.eyebrow { display:flex; align-items:center; gap:.75rem; margin:0 0 1.2rem; color:#e4e4dc; font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.screen__copy--right .eyebrow { justify-content:flex-end; }
.eyebrow i { display:block; width:2.3rem; height:2px; background:var(--volt); }
h1,h2 { margin:0; font:900 clamp(4.25rem,8vw,8.4rem)/.84 "Barlow Condensed",Arial,sans-serif; letter-spacing:.008em; text-transform:uppercase; text-wrap:balance; }
h1 em,h2 em { color:var(--volt); font-style:italic; }
.lead { max-width:31rem; margin:1.8rem 0 0; color:#d0d0c9; font-size:clamp(.76rem,1vw,.94rem); line-height:1.65; }
.screen__copy--right .lead { margin-left:auto; }

.hero-intro { display:flex; align-items:flex-end; gap:2.6rem; margin-top:2rem; }
.hero-intro>p { max-width:25rem; margin:0; color:#d0d0c9; font-size:.82rem; line-height:1.65; }
.circle-action { flex:0 0 auto; width:5.8rem; height:5.8rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.38); border-radius:50%; color:var(--paper); background:rgba(0,0,0,.2); text-transform:uppercase; transition:background .25s,color .25s,border-color .25s; }
.circle-action span { font-size:.53rem; letter-spacing:.12em; }
.circle-action b { font-size:1.1rem; }
.circle-action:hover { color:#050505; border-color:var(--volt); background:var(--volt); }
.fact-strip { position:absolute; right:3vw; bottom:3rem; left:3vw; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.fact-strip p { display:grid; grid-template-columns:auto 1fr; gap:0 1rem; margin:0; padding:1rem 1.5rem 0 0; }
.fact-strip p+p { padding-left:1.5rem; border-left:1px solid var(--line); }
.fact-strip span { grid-row:1/3; color:var(--volt); font-size:.56rem; }
.fact-strip strong { font:800 1.45rem/1 "Barlow Condensed",Arial,sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.fact-strip small { margin-top:.2rem; color:#8e8e88; font-size:.53rem; letter-spacing:.11em; text-transform:uppercase; }

.method-steps { margin-top:2rem; border-top:1px solid var(--line); }
.method-steps>div { display:grid; grid-template-columns:2.4rem 1fr; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line); }
.method-steps>div>span { color:var(--volt); font-size:.55rem; }
.method-steps p { display:flex; justify-content:space-between; align-items:center; margin:0; }
.method-steps strong { font:700 1.1rem/1 "Barlow Condensed",Arial,sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.method-steps small { color:#92928c; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.metric-card { position:absolute; left:3vw; bottom:3rem; width:12rem; padding:1rem; border:1px solid var(--line); background:rgba(7,7,7,.55); backdrop-filter:blur(8px); }
.metric-card p { margin:0; color:#aaa; font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; }
.metric-card strong { display:block; margin:.5rem 0; color:var(--volt); font:900 4rem/.8 "Barlow Condensed",Arial,sans-serif; }
.metric-card span { color:#bdbdb6; font-size:.64rem; line-height:1.5; }

.programs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:2rem; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.22); }
.programs button { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; padding:.85rem 1rem; color:var(--paper); background:rgba(5,5,5,.75); text-align:left; transition:background .2s,color .2s; }
.programs button:hover { color:#050505; background:var(--volt); }
.programs span { color:var(--volt); font-size:.52rem; }
.programs button:hover span { color:#050505; }
.programs strong { font:700 1rem/1 "Barlow Condensed",Arial,sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.programs i { font-style:normal; }
.equipment-note { position:absolute; right:3vw; bottom:3rem; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.equipment-note span { color:#888; font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; }
.equipment-note b { font:700 1.3rem/1 "Barlow Condensed",Arial,sans-serif; text-transform:uppercase; }

.join-actions { display:grid; grid-template-columns:minmax(15rem,1fr) minmax(9rem,10.5rem); justify-content:end; align-items:stretch; gap:1px; width:min(100%,29rem); margin:2rem 0 0 auto; }
.primary-button { display:flex; align-items:center; justify-content:space-between; min-width:0; padding:1rem 1.15rem; color:#050505; background:var(--volt); font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; transition:box-shadow .25s,transform .25s; }
.primary-button:hover { box-shadow:0 0 2rem rgba(220,255,0,.3); transform:translateY(-2px); }
.join-actions p { display:flex; flex-direction:column; justify-content:center; min-width:0; margin:0; padding:.8rem 1rem; border:1px solid var(--line); background:rgba(0,0,0,.36); }
.join-actions p strong { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.join-actions p span { margin-top:.25rem; color:#999; font-size:.56rem; }
.trial-card { position:absolute; left:4vw; bottom:3rem; width:13rem; padding:1rem 1.1rem; color:#050505; background:var(--volt); }
.trial-card small { font-size:.54rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.trial-card strong { display:block; font:900 6rem/.8 "Barlow Condensed",Arial,sans-serif; }
.trial-card b { display:block; font:800 1.4rem/1 "Barlow Condensed",Arial,sans-serif; }
.trial-card span { display:block; margin-top:.8rem; font-size:.62rem; line-height:1.45; }

.scene-nav { position:absolute; z-index:30; top:50%; right:3vw; width:7.5rem; display:flex; flex-direction:column; align-items:flex-end; gap:.9rem; transform:translateY(-50%); }
.scene-nav button { display:grid; grid-template-columns:1.5rem 2rem auto; align-items:center; gap:.55rem; color:#666; background:none; text-align:left; }
.scene-nav span { font-size:.5rem; letter-spacing:.08em; }
.scene-nav i { display:block; width:.65rem; height:1px; background:#666; transition:width .25s,background .25s; }
.scene-nav em { opacity:0; font-size:.5rem; font-style:normal; letter-spacing:.11em; text-transform:uppercase; transform:translateX(.4rem); transition:opacity .2s,transform .2s; }
.scene-nav button:hover em,.scene-nav button.is-active em { opacity:1; transform:none; }
.scene-nav button.is-active { color:var(--paper); }
.scene-nav button.is-active i { width:2rem; background:var(--volt); }
.location { position:absolute; z-index:20; right:3vw; bottom:1.1rem; display:flex; align-items:center; gap:.55rem; color:#65655f; font-size:.48rem; letter-spacing:.12em; }
.location i { width:1.5rem; height:1px; background:#4d4d49; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.stage.is-layout-tight .screen__copy--right { right:calc(var(--side-rail) + 1.5rem); }
.stage.is-layout-tight h1,.stage.is-layout-tight h2 { font-size:clamp(3.5rem,6.6vw,6.2rem); line-height:.87; }
.stage.is-layout-tight .eyebrow { margin-bottom:.75rem; }
.stage.is-layout-tight .lead,.stage.is-layout-tight .hero-intro { margin-top:.85rem; }
.stage.is-layout-tight .method-steps,.stage.is-layout-tight .programs,.stage.is-layout-tight .join-actions { margin-top:.85rem; }
.stage.is-layout-tight .scene-nav em { display:none; }

@media (max-width:900px) {
  .site-header { height:5rem; grid-template-columns:1fr auto; padding:0 1.2rem; }
  .main-nav { display:none; }
  .header-cta { min-width:0; padding:.7rem .8rem; }
  .header-cta span { margin-left:1rem; }
  .brand-code { top:6rem; left:1.2rem; }
  .media-shade { background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.18) 80%),linear-gradient(90deg,rgba(0,0,0,.35),transparent); }
  .screen__copy,.screen__copy--right,.screen--hero .screen__copy { top:auto; right:1.2rem; bottom:8rem; left:1.2rem; width:auto; text-align:left; }
  .screen__copy--right .eyebrow { justify-content:flex-start; }
  h1,h2 { font-size:clamp(3.45rem,15.5vw,6.15rem); line-height:.86; letter-spacing:.012em; }
  .lead { margin:1rem 0 0; }
  .hero-intro { gap:1rem; margin-top:1rem; }
  .circle-action { width:4.5rem; height:4.5rem; }
  .fact-strip { right:1.2rem; bottom:2.8rem; left:1.2rem; }
  .fact-strip p { padding:.7rem .4rem 0 0; }
  .fact-strip p+p { padding-left:.55rem; }
  .fact-strip span,.fact-strip small { display:none; }
  .fact-strip strong { font-size:.95rem; }
  .method-steps { margin-top:1rem; }
  .method-steps small { display:none; }
  .metric-card,.trial-card,.equipment-note { display:none; }
  .programs { margin-top:1rem; }
  .programs button { padding:.7rem; }
  .join-actions { grid-template-columns:minmax(13rem,1fr) minmax(8rem,9rem); width:min(100%,28rem); margin:1rem 0 0; }
  .scene-nav { right:1.2rem; top:6.2rem; flex-direction:row; transform:none; }
  .scene-nav button { grid-template-columns:auto; }
  .scene-nav i,.scene-nav em { display:none; }
  .scene-nav button.is-active span { color:var(--volt); }
  .location { display:none; }
}

@media (max-width:1180px) and (min-width:901px) {
  :root { --side-rail:8.5rem; }
  .scene-nav { width:5rem; }
  .scene-nav em { display:none; }
}

@media (max-height:780px) and (min-width:901px) {
  .screen__copy { top:clamp(7rem,15vh,8rem); }
  .screen--hero .screen__copy { top:clamp(6.7rem,13vh,7.5rem); }
  h1,h2 { font-size:clamp(3.7rem,7.2vw,6.8rem); line-height:.86; }
  .eyebrow { margin-bottom:.8rem; }
  .lead,.hero-intro { margin-top:1rem; }
  .lead { line-height:1.5; }
  .method-steps,.programs,.join-actions { margin-top:1rem; }
  .method-steps>div { padding:.55rem 0; }
  .fact-strip,.metric-card,.trial-card,.equipment-note { bottom:2.5rem; }
}

@media (max-height:620px) and (min-width:901px) {
  h1,h2 { font-size:clamp(3.35rem,6.7vw,5.7rem); }
  .hero-intro>p,.lead { font-size:.72rem; line-height:1.45; }
  .fact-strip { bottom:2rem; }
  .fact-strip p { padding-top:.7rem; }
  .metric-card,.trial-card { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .screen,.transition-film { transition:none; }
}