/* ============================================================================
   FROST cooling spray — styles
   Frost palette + type + overlays on top of the fixed WebGL canvas.
   Heat colours (--ember/--flame) survive only as the enemy in the story.
   ========================================================================== */
:root{
  --ember:#FF3B1F; --flame:#FF7A00; --ice:#4DD9FF; --frost:#C9F3FF; --glacier:#1E9BD7; --black:#06121F; --white:#F4FBFF;
  --display:"Anton", Impact, "Arial Narrow Bold", sans-serif;
  --body:"Inter Tight", Inter, system-ui, -apple-system, sans-serif;
  --eyebrow:"Bebas Neue", "Anton", Impact, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--black);color:var(--white);font-family:var(--body);font-size:clamp(16px,1.1vw,19px);line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor summary, body.has-cursor input{cursor:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit;text-decoration:none}

/* canvas + overlay stacking */
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
main{position:relative;z-index:2;pointer-events:none}
main a,main button,main input,main details,main form,main summary{pointer-events:auto}
header#top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:clamp(14px,2vw,26px) var(--pad);pointer-events:none;mix-blend-mode:normal}
header#top a{pointer-events:auto;transition:color .4s}
body.blue header#top{color:var(--black)}
.brand,.brand-foot,#preloader .logo{display:inline-flex;flex-direction:column;align-items:flex-start;font-family:var(--display);line-height:.9;letter-spacing:.08em}
.brand{font-size:1.5rem}
.brand small,.brand-foot small,#preloader .logo small{font-family:var(--eyebrow);font-size:.42em;letter-spacing:.32em;text-transform:uppercase;color:var(--ice);margin-top:.35em;transition:color .4s}
body.blue .brand small{color:var(--white)}
.pill{font-family:var(--eyebrow);font-size:1.05rem;letter-spacing:.12em;padding:.55em 1.1em .45em;border:1.5px solid currentColor;border-radius:999px;transition:background .25s,color .25s}
.pill:hover{background:var(--white);color:var(--black)}

/* type */
.eyebrow{font-family:var(--eyebrow);letter-spacing:.24em;font-size:clamp(.95rem,1.4vw,1.25rem);color:var(--ice);margin-bottom:clamp(10px,1.5vw,20px)}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:400;line-height:.88;letter-spacing:-.015em}
h1{margin:0 0 .3em}
.wordmark{display:flex;flex-direction:column;align-items:flex-start;line-height:.82}
.wordmark .wm{font-size:clamp(5rem,19vw,17rem);letter-spacing:.02em;color:var(--white);filter:drop-shadow(0 10px 50px rgba(77,217,255,.35))}
.wordmark .wm .ch{background:linear-gradient(180deg,#fff 0%,var(--frost) 55%,var(--ice) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.02em}
.wordmark .desc{font-family:var(--eyebrow);font-size:clamp(1.3rem,3.1vw,2.7rem);letter-spacing:.42em;color:var(--frost);margin-top:.35em;padding-left:.1em}
.tagline{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4.6vw,4.2rem);line-height:.95;margin-bottom:.2em;transform:skewX(-6deg)}
.h2{font-size:clamp(2.6rem,8vw,7.5rem);margin-bottom:.35em}
.big{font-size:clamp(3rem,10vw,9.5rem);margin-bottom:.3em}
.skew{transform:skewX(-6deg)}
.skew .w{transform:skewX(0)}
.w{display:inline-block;white-space:nowrap;perspective:600px}
.ch{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity}
.sub{font-size:clamp(1.15rem,2.1vw,1.75rem);font-weight:500;max-width:26ch;margin-bottom:clamp(22px,3vw,36px)}
.lede{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:500;max-width:42ch;margin:-.4em 0 clamp(26px,3.5vw,44px)}

/* sections */
section{position:relative;min-height:100vh;display:flex;align-items:center;padding:clamp(80px,12vh,140px) var(--pad)}
.wrap{width:100%;max-width:1280px;margin:0 auto}
.wrap.narrow{max-width:880px}
#hero{min-height:100svh;min-height:100vh;isolation:isolate}
#hero .wrap{max-width:1280px}
.scroll-cue{position:absolute;left:50%;bottom:clamp(18px,4vh,40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--eyebrow);letter-spacing:.2em;font-size:.9rem;opacity:.85}
.scroll-cue i{width:1px;height:44px;background:linear-gradient(var(--white),transparent);display:block;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* story */
#story{height:400vh;display:block;padding:0}
.story-stage{position:relative;height:100vh;width:100%;overflow:hidden}
.caption{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--pad);text-align:center;visibility:hidden;opacity:0;will-change:filter,opacity,transform}
.caption h2{font-size:clamp(3rem,11vw,11rem);max-width:12ch;text-shadow:0 8px 60px rgba(0,0,0,.35)}
.caption:last-child h2{color:var(--white)}

/* on the blue scene: dark ink */
.on-blue{color:var(--black)}
.on-blue .eyebrow{color:var(--black);opacity:.7}
.on-blue .micro,.on-blue .legal,.on-blue .copy{color:rgba(6,18,31,.72)}

/* glass */
.glass{background:rgba(244,251,255,.28);border:1px solid rgba(244,251,255,.6);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-radius:24px;box-shadow:0 30px 80px rgba(0,40,70,.2), inset 0 1px 0 rgba(255,255,255,.6)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;pointer-events:auto}
.tile{padding:clamp(26px,3vw,44px);position:relative;background:rgba(244,251,255,.08)}
.tile + .tile{border-left:1px solid rgba(244,251,255,.5)}
.tile .num{font-family:var(--eyebrow);letter-spacing:.2em;opacity:.6;display:block;margin-bottom:2.2em}
.tile h3{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:.5em}
.tile p{font-size:1.02em;max-width:24ch;opacity:.85}

/* manifesto */
.manifesto{font-family:var(--body);font-weight:500;font-size:clamp(1.35rem,2.6vw,2.3rem);line-height:1.22;letter-spacing:-.01em;margin-bottom:clamp(32px,4vw,56px)}

/* forms */
form.notify{max-width:620px}
.row{display:flex;gap:10px;align-items:stretch}
input[type=email]{flex:1;min-width:0;font:inherit;font-weight:500;font-size:1.05rem;padding:1em 1.15em;border-radius:14px;border:1.5px solid rgba(244,251,255,.5);background:rgba(6,18,31,.4);color:var(--white);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
input[type=email]::placeholder{color:rgba(244,251,255,.55)}
input[type=email]:focus{border-color:var(--ice);box-shadow:0 0 0 4px rgba(77,217,255,.25)}
.on-blue input[type=email]{background:rgba(244,251,255,.55);color:var(--black);border-color:rgba(6,18,31,.35)}
.on-blue input[type=email]::placeholder{color:rgba(6,18,31,.5)}
.btn{font-family:var(--eyebrow);font-size:1.25rem;letter-spacing:.12em;padding:.9em 1.5em .78em;border:0;border-radius:14px;background:var(--ice);color:var(--black);white-space:nowrap;transition:transform .2s,background .25s,box-shadow .25s;box-shadow:0 12px 40px rgba(77,217,255,.35)}
.btn:hover{background:var(--white);color:var(--black);transform:translateY(-2px);box-shadow:0 14px 44px rgba(201,243,255,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.7;cursor:default}
.on-blue .btn{background:var(--black);color:var(--white);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.on-blue .btn:hover{background:var(--white);color:var(--black)}
input[name=_gotcha]{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.err{min-height:1.4em;font-size:.9rem;color:#ffd6cf;margin-top:8px;font-weight:500}
.on-blue .err{color:#7a1a0a}
.micro{font-size:.9rem;opacity:.75}
form.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.done{max-width:620px;pointer-events:auto}
.done-msg{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);line-height:.95;margin-bottom:.6em}
.done-msg span{color:var(--ice)}
.on-blue .done-msg span{color:var(--white)}

/* faq */
.accordion{pointer-events:auto;overflow:hidden}
details{border-bottom:1px solid rgba(244,251,255,.5)}
details:last-child{border-bottom:0}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--display);text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,36px);cursor:pointer;user-select:none}
summary::-webkit-details-marker{display:none}
summary h3{font:inherit;line-height:1.05;letter-spacing:inherit;margin:0}
summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
summary i::before,summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary i{transform:rotate(45deg)}
.a{padding:0 clamp(20px,3vw,36px) clamp(20px,2.6vw,30px);max-width:60ch;font-size:1.02em}

/* final */
#final{min-height:100vh}
#final .wrap{max-width:1100px}

/* footer */
footer{position:relative;padding:60px var(--pad) 40px;min-height:auto}
.foot{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:center;border-top:1px solid rgba(6,18,31,.25);padding-top:30px;pointer-events:auto}
.brand-foot{font-size:2rem}
.brand-foot small{color:var(--white)}
.copy a{border-bottom:1px solid currentColor}
.social{display:flex;gap:22px;font-family:var(--eyebrow);letter-spacing:.16em;font-size:1rem}
.social a{border-bottom:1.5px solid transparent;transition:border-color .2s}
.social a:hover{border-color:currentColor}
.legal,.copy{font-size:.9rem}
.foot .legal{grid-column:1/-1}

/* preloader */
#preloader{position:fixed;inset:0;z-index:50;background:var(--black);color:var(--white);display:grid;place-items:center;clip-path:inset(0 0 0 0)}
.pre-inner{text-align:center}
#preloader .logo{font-size:clamp(3rem,9vw,6rem);align-items:center;margin-bottom:24px}
#preloader .logo small{margin-top:.5em}
.bar{width:min(320px,60vw);height:3px;background:#12263a;margin:0 auto 12px;overflow:hidden;border-radius:2px}
.bar>i{display:block;height:100%;background:var(--ice);transform:scaleX(0);transform-origin:left;transition:transform .25s ease-out}
.pct{font-family:var(--eyebrow);letter-spacing:.2em;font-size:1rem;opacity:.7}

/* cursor */
#cursor{position:fixed;left:0;top:0;width:18px;height:18px;border:1.5px solid var(--white);border-radius:50%;z-index:60;pointer-events:none;opacity:0;transition:width .25s,height .25s,border-color .25s,background .25s,opacity .3s;mix-blend-mode:difference}
#cursor.on{opacity:1}
#cursor.hover{width:48px;height:48px;border-color:var(--white)}
#cursor.cta{border-color:var(--ice);background:rgba(77,217,255,.18);mix-blend-mode:normal}
body:not(.has-cursor) #cursor{display:none}

/* reduced motion */
body.reduced #story{height:auto}
body.reduced .story-stage{height:auto;overflow:visible;padding:20vh 0}
body.reduced .caption{position:relative;inset:auto;visibility:visible;opacity:1;padding:8vh var(--pad)}
body.reduced .scroll-cue i{animation:none}
body.reduced .ch,body.reduced [data-reveal],body.reduced [data-stagger]>*{opacity:1!important;transform:none!important}

/* responsive */
@media (max-width:900px){
  .tiles{grid-template-columns:1fr}
  .tile + .tile{border-left:0;border-top:1px solid rgba(244,251,255,.5)}
  .row{flex-direction:column}
  .btn{padding:1em 1.4em .88em}
  .foot{grid-template-columns:1fr}
  header#top .pill{display:none}
}
@media (max-width:600px){
  .wordmark .wm{font-size:clamp(5rem,30vw,9rem)}
  .wordmark .desc{letter-spacing:.3em}
  .caption h2{font-size:clamp(2.6rem,15vw,5rem)}
  section{padding:80px var(--pad)}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue i{animation:none}
}
body.reduced #hero{color:var(--black)}
body.reduced #hero .eyebrow{color:var(--black);opacity:.7}
body.reduced #hero input[type=email]{background:rgba(244,251,255,.55);color:var(--black);border-color:rgba(6,18,31,.35)}
body.reduced #hero .wordmark .desc{color:var(--black)}
body.reduced #hero .micro,body.reduced #hero .scroll-cue{color:var(--black)}

/* reduced motion + no-WebGL: hero sits on a bright frost background, so switch the wordmark to solid ink */
body.reduced .wordmark .wm,body.reduced .wordmark .wm .ch{background:none;color:var(--black);filter:none}
body.reduced .tagline{color:var(--black)}
body.no-gl{background:linear-gradient(180deg,#bff0ff 0%,#4DD9FF 45%,#25c8ff 100%) fixed}
body.reduced header#top{color:var(--black)}
body.reduced .brand small{color:var(--black)}

/* hero scrim: keeps the copy readable over the bright frosted can */
body:not(.reduced) #hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,rgba(6,18,31,.78) 0%,rgba(6,18,31,.5) 38%,rgba(6,18,31,0) 62%)}
@media (max-width:900px){
  body:not(.reduced) #hero::before{background:linear-gradient(180deg,rgba(6,18,31,.15) 0%,rgba(6,18,31,.72) 30%,rgba(6,18,31,.72) 78%,rgba(6,18,31,.2) 100%)}
}