/* H2YDR8IONS: black, white and the bottle's one blue line. Montserrat matches the print on the bottle. */
:root{
  --ink:#050507;--ink2:#0d0e12;--line:#ffffff17;--white:#f4f6f9;--soft:#b9bfca;--muted:#7d8391;
  --blue:#2f6bff;--blue-l:#8aaeff;
  --paper:#f1f3f6;--paper2:#e4e8ee;--dark:#0a0b0e;--dmuted:#5a606c;
  --pad:clamp(20px,5vw,72px);
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font:400 1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
ul{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue-l);outline-offset:4px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}

/* the 3D stage sits under the hero and the story; everything else scrolls over it */
#stage{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0;touch-action:pan-y}
.no-gl #stage{display:none}
main,.foot{position:relative;z-index:1}
main{pointer-events:none}
main a,main button,main input,main label,.band,.drop{pointer-events:auto}

/* the H2O mark and wordmark */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.mk{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:2px solid currentColor;font:600 .8rem/1 var(--font);letter-spacing:0;flex:none;white-space:nowrap}
.mk sub{font-size:.62em;line-height:0;vertical-align:-.3em}
.wm{font-weight:700;font-size:1.02rem;letter-spacing:.16em}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--pad);transition:background .35s,padding .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.solid{background:#050507ee;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);padding-top:13px;padding-bottom:13px;border-color:var(--line)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a:not(.btn){font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--soft);transition:color .2s}
.nav-links a:not(.btn):hover{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:17px 26px;background:#fff;color:var(--ink);font:700 .74rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:0;border-radius:2px;cursor:pointer;transition:transform .3s var(--ease),background .25s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #2f6bff33}
.btn .ar{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn-sm{padding:12px 18px;font-size:.68rem}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#000}
.text-link{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--soft);padding:10px 0;transition:color .2s}
.text-link:hover{color:#fff}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:112px 0 64px;position:relative}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy slot" "drop slot";column-gap:3vw;align-items:end}
.hero-copy{grid-area:copy}
.bottle-slot{grid-area:slot;height:min(80vh,800px);position:relative;align-self:center}
.hero-drop{grid-area:drop;align-self:start;margin-top:40px}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);margin-bottom:24px}
.eyebrow.dark{color:var(--dmuted)}
.bar{width:30px;height:3px;background:var(--blue);flex:none}
h1{font-weight:800;font-size:clamp(3.3rem,7.6vw,7.4rem);line-height:.9;letter-spacing:-.05em}
h1 .ln{display:block}
h1 .dot{font-style:normal;color:var(--blue)}
.lead{max-width:30em;margin-top:28px;color:var(--soft);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.65}
.drop-label{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.drop-label time{color:#fff}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 #2f6bff88;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #2f6bff88}70%{box-shadow:0 0 0 12px #2f6bff00}100%{box-shadow:0 0 0 0 #2f6bff00}}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.splash-btn{position:absolute;inset:6% 22%;background:none;border:0;opacity:0;pointer-events:none!important}
.splash-btn:focus-visible{opacity:1;outline:2px dashed var(--blue-l);outline-offset:6px;border-radius:40px}
.fallback{display:none}
.no-gl .bottle-slot .fallback{display:block;height:100%;width:auto;margin:0 auto;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-1deg)}}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:1px;height:46px;background:#ffffff1f;overflow:hidden}
.scroll-cue span{position:absolute;left:0;top:0;width:1px;height:16px;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-16px)}100%{transform:translateY(46px)}}

/* entrance */
.in{opacity:0;transform:translateY(22px);animation:rise 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

/* countdown: digits roll like a counter */
.cd{display:flex;align-items:flex-start;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;margin-top:18px}
.cd-u{display:flex;flex-direction:column;align-items:center;gap:10px}
.cd-n{display:flex}
.dg{display:block;height:1em;overflow:hidden;width:.66em;text-align:center}
.strip{display:flex;flex-direction:column;transition:transform .7s var(--ease);will-change:transform}
.strip span{display:block;height:1em}
.cd small{font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cd-sep{color:#ffffff40;padding:0 .14em;font-weight:500}
.cd-sm{font-size:clamp(2.1rem,3.4vw,3rem)}
.cd-lg{font-size:clamp(3rem,11.5vw,10.5rem);font-weight:800;letter-spacing:-.04em;margin:42px 0 26px;color:var(--dark)}
.cd-lg .cd-u{gap:16px}
.cd-lg small{font-size:clamp(.6rem,.9vw,.78rem);color:var(--dmuted);letter-spacing:.28em}
.cd-lg .cd-sep{color:#0a0b0e2e;font-weight:600}
.cd-lg .dg{width:.64em}

/* the story: the bottle turns while three short beats come and go */
.story{height:340vh;position:relative}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.beat{position:absolute;top:50%;width:min(430px,36vw);--v:0;opacity:var(--v);transform:translate3d(0,calc(-50% + (1 - var(--v)) * 30px),0);visibility:hidden;will-change:opacity,transform}
.beat[data-side=l]{left:var(--pad)}
.beat[data-side=r]{right:var(--pad)}
.kicker{display:flex;align-items:center;gap:14px;font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
.kicker span{color:var(--blue-l)}
.nocase{text-transform:none;font-weight:inherit}
.beat h2{font-weight:800;font-size:clamp(2.3rem,4.3vw,4rem);line-height:.98;letter-spacing:-.04em;margin-bottom:22px}
.beat .stat{font-size:clamp(5.5rem,12vw,10.5rem);line-height:.85;letter-spacing:-.06em;margin-bottom:26px}
.beat .stat i{font-style:normal;color:var(--blue)}
.beat p{color:var(--soft);font-size:1.02rem;line-height:1.65;max-width:26em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips li{border:1px solid #ffffff2e;padding:8px 14px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.zeros{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 24px}
.zeros div{border-top:2px solid #fff;padding-top:12px}
.zeros dt{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.zeros dd{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.story-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:1px;background:#ffffff1c}
.story-bar span{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.no-gl .story-fallback{display:block;position:absolute;left:50%;top:50%;height:74vh;transform:translate(-50%,-50%);opacity:.9}

/* marquee band */
.band{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:26px 0;position:relative;z-index:2}
.band-track{display:flex;align-items:center;gap:40px;width:max-content;white-space:nowrap;font-weight:800;font-size:clamp(2rem,4.6vw,4rem);letter-spacing:-.03em;will-change:transform}
.band-track .o{color:#ffffff3d}
.band-track .mk{font-size:clamp(.9rem,1.6vw,1.3rem);width:2.4em;height:2.4em;border-width:2px;color:var(--blue-l);letter-spacing:0}

/* the drop */
.drop{background:var(--paper);color:var(--dark);padding:clamp(96px,13vw,170px) 0 clamp(96px,12vw,150px);position:relative;z-index:2}
.drop-title{font-weight:800;font-size:clamp(2.6rem,6.4vw,5.8rem);line-height:.95;letter-spacing:-.05em}
.drop-when{font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dmuted)}
.notify-wrap{margin-top:56px;max-width:720px}
.notify{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dmuted)}
.field input{font:500 1.05rem var(--font);color:var(--dark);background:#fff;border:1px solid #cfd5de;border-radius:2px;padding:16px 18px;min-height:54px;width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #2f6bff26}
.field .err{display:none;font-size:.8rem;color:#c42b2b;font-weight:500}
.field.bad input{border-color:#c42b2b}
.field.bad .err{display:block}
.notify .btn{min-height:54px}
.note{grid-column:1/-1;font-size:.86rem;color:var(--dmuted);margin-top:4px}
.done{border-top:3px solid var(--dark);padding-top:22px;outline:none}
.done-title{font-weight:800;font-size:1.8rem;letter-spacing:-.03em;margin-bottom:6px}
.done .demo{margin-top:14px;font-size:.84rem;color:var(--dmuted)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}

/* footer */
.foot{background:var(--ink);border-top:1px solid var(--line);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.foot-grid{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo line links" "fine fine fine";gap:26px 40px;align-items:center}
.foot .logo{grid-area:logo}
.foot-line{grid-area:line;color:var(--soft);font-weight:600}
.foot-links{grid-area:links;display:flex;gap:28px}
.foot-links a{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--soft)}
.foot-links a:hover{color:#fff}
.foot-fine{grid-area:fine;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}

/* phones */
@media (max-width:760px){
  .nav{padding:14px 20px}
  .nav.solid{padding:10px 20px}
  .nav-links a:not(.btn){display:none}
  .nav .btn-sm{padding:11px 13px;font-size:.6rem;letter-spacing:.14em;white-space:nowrap}
  .eyebrow{font-size:.64rem;letter-spacing:.2em;gap:12px}
  .bar{width:22px}
  .wm{font-size:.9rem;letter-spacing:.13em}
  .mk{width:30px;height:30px;font-size:.72rem}
  .hero{padding:96px 0 56px;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "slot" "drop"}
  h1{font-size:clamp(3.1rem,15.5vw,4.6rem)}
  .lead{margin-top:18px;font-size:.98rem}
  .bottle-slot{height:46vh;height:46svh;margin:10px 0 0}
  .hero-drop{margin-top:16px}
  .cd-sm{font-size:2.3rem}
  .ctas{margin-top:24px;gap:10px 22px}
  .scroll-cue{display:none}
  .story{height:320vh}
  .beat,.beat[data-side=l],.beat[data-side=r]{left:20px;right:20px;width:auto;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));transform:translate3d(0,calc((1 - var(--v)) * 24px),0)}
  .beat h2{font-size:2.2rem;margin-bottom:14px}
  .beat .stat{font-size:6rem;margin-bottom:14px}
  .beat p{font-size:.95rem}
  .kicker{margin-bottom:12px}
  .zeros{margin-bottom:16px}
  .story-bar{left:20px;right:20px;bottom:30px}
  .no-gl .story-fallback{top:34%;height:46vh}
  .notify{grid-template-columns:1fr}
  .notify .btn{width:100%}
  .cd-lg{margin:30px 0 22px}
  .foot-grid{grid-template-columns:1fr;grid-template-areas:"logo" "line" "links" "fine";gap:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .in{animation:none;opacity:1;transform:none}
  .rv{transition:none;opacity:1;transform:none}
  .strip{transition:none}
  .pulse,.scroll-cue span,.no-gl .bottle-slot .fallback{animation:none}
}