:root{--ink:#06110d;--deep:#0b1a14;--lime:#c8f26b;--mint:#7fe0b8;--cream:#f1efe6;--sage:#d9e4d2;--fg:#eef3ea;--mut:#8fa39a;--serif:"Fraunces",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--mono:"JetBrains Mono",monospace;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{font-family:var(--sans);color:var(--fg);background:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:color .6s}
body.light{color:var(--ink)}
body.loading{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{color:var(--lime);margin-bottom:32px}
body.light .eyebrow{color:#2f6b3c}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;mix-blend-mode:difference}
.cursor span{display:block;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;transition:width .3s,height .3s,margin .3s}
.cursor.big span{width:64px;height:64px;margin:-32px 0 0 -32px}
@media (hover:none){.cursor{display:none}}
/* preloader */
.preloader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad)}
.pl-count{font-family:var(--serif);font-size:clamp(48px,8vw,120px);font-weight:300;color:var(--lime);letter-spacing:-.04em}
.pl-count small{font-size:.25em;color:var(--mut);margin-left:8px}
.pl-word{font-family:var(--serif);font-size:clamp(90px,22vw,340px);line-height:.8;letter-spacing:-.06em;overflow:hidden;display:flex}
.pl-word span{display:inline-block;transform:translateY(105%)}
.pl-bar{height:1px;background:#1f3329}.pl-bar i{display:block;height:100%;width:0;background:var(--lime)}
.pl-note{color:var(--mut)}
.concept-bar{position:fixed;bottom:0;left:0;right:0;z-index:80;text-align:center;padding:7px;background:var(--lime);color:var(--ink);font-size:11px}
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);mix-blend-mode:difference;color:#fff}
.logo{font-family:var(--serif);font-size:28px;letter-spacing:-.03em}
.nav nav{display:flex;gap:32px;font-size:14px}
.nav nav a{opacity:.8}.nav nav a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;white-space:nowrap;padding:18px 30px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:600;font-size:15px;position:relative;overflow:hidden;will-change:transform}
.btn span{position:relative;z-index:1;display:inline-block}
.btn::before{content:"";position:absolute;inset:0;background:#fff;border-radius:inherit;transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn:hover::before{transform:none}
.btn-sm{padding:11px 20px;font-size:13px;background:#fff}
.btn-lg{padding:26px 44px;font-size:18px}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px #2e4a3d}
.btn-ghost:hover{color:var(--ink)}
section{position:relative;padding:var(--pad)}
/* hero */
.hero{height:100vh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-bottom:70px}
#capsule{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-glow{position:absolute;inset:0;background:radial-gradient(40% 50% at 65% 45%,rgba(127,224,184,.22),transparent 70%),radial-gradient(30% 35% at 20% 80%,rgba(200,242,107,.10),transparent 70%)}
.hero-meta{position:absolute;top:96px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;color:var(--mut);z-index:2}
.hero-title{position:relative;z-index:2;font-family:var(--serif);font-weight:300;font-size:clamp(64px,13.5vw,230px);line-height:.84;letter-spacing:-.055em;pointer-events:none}
.l{display:block;overflow:hidden;padding-bottom:.06em}
.it{font-style:italic;color:var(--lime);padding-left:12vw}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:36px}
.hero-sub{max-width:420px;color:#b9c8c0;font-size:17px;line-height:1.5}
.hero-cta{display:flex;align-items:center;gap:28px}
.scroll-hint{color:var(--mut)}
/* marquee */
.marquee{padding:26px 0;border-block:1px solid #1d3027;overflow:hidden;background:var(--ink)}
.mq-track{display:flex;gap:40px;white-space:nowrap;width:max-content;font-size:15px;color:var(--fg)}
.mq-track b{color:var(--lime);font-weight:400}
/* manifesto */
.manifesto{padding-top:160px;padding-bottom:160px;display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:start}
.manifesto .eyebrow{grid-column:1/-1;margin:0}
.big{font-family:var(--serif);font-size:clamp(30px,3.6vw,56px);line-height:1.08;letter-spacing:-.03em;font-weight:300}
.big .w{display:inline-block;opacity:.15}
.stack{position:relative;height:620px}
.layer{position:absolute;overflow:hidden;border-radius:4px;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.l1{width:72%;height:70%;right:0;top:0}
.l2{width:58%;height:52%;left:0;bottom:0;z-index:2}
.l3{right:6%;bottom:8%;z-index:3}
.pill-card{padding:22px 26px;border-radius:20px;background:rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:4px}
.pill-card span{color:var(--lime);font-size:11px}.pill-card strong{font-family:var(--serif);font-size:34px;font-weight:400}.pill-card em{color:var(--mut)}
.reveal{clip-path:inset(100% 0 0 0)}
.reveal img,.clip img,.wipe img{transform:scale(1.25)}
/* pin */
.pin{height:100vh;padding-top:110px;padding-bottom:60px}
.pin-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;height:100%;align-items:center}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.4vw,88px);line-height:.95;letter-spacing:-.045em}
.steps{margin-top:44px;border-top:1px solid #1d3027}
.step{display:grid;grid-template-columns:50px 140px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #1d3027;opacity:.28;transition:opacity .4s,color .4s}
.step i{font-family:var(--mono);font-style:normal;font-size:12px;padding-top:4px}
.step b{font-family:var(--serif);font-weight:400;font-size:22px}
.step span{color:var(--mut);font-size:15px}
.step.on{opacity:1}.step.on i,.step.on b{color:var(--lime)}
.rx-card{max-width:420px;margin-left:auto;padding:30px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:0 60px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15);backdrop-filter:blur(20px)}
.rx-top{display:flex;justify-content:space-between;color:var(--mut)}.rx-state{color:var(--lime)}
.rx-ring{position:relative;width:180px;height:180px;margin:28px auto}
.rx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rx-ring circle{fill:none;stroke-width:3}.trk{stroke:#1d3027}.prg{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327}
.rx-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;letter-spacing:-.02em}
.rx-lines{list-style:none;font-size:12px}
.rx-lines li{display:flex;justify-content:space-between;padding:11px 0;border-top:1px dashed #2b4237}
.rx-label{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--lime);color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.rx-label b{font-size:18px}
.rx-foot{margin-top:14px;color:var(--mut);font-size:10px}
/* horizontal */
.horiz{padding:0;overflow:hidden;height:100vh}
.h-track{display:flex;height:100%;align-items:center;gap:3vw;padding:0 var(--pad);width:max-content}
.h-panel{flex:0 0 auto}
.h-intro{width:min(560px,80vw);margin-right:4vw}
.drag{margin-top:30px;color:#2f6b3c}
.card{width:min(440px,78vw);height:72vh;display:flex;flex-direction:column;gap:22px;color:var(--ink)}
.card figure{flex:1;overflow:hidden;border-radius:6px;clip-path:inset(0 100% 0 0)}
.card h3{font-family:var(--serif);font-weight:400;font-size:32px;letter-spacing:-.03em;margin:6px 0}
.card p{color:#3d5247;line-height:1.5;max-width:360px}
.blister-card .blister{flex:1;border-radius:22px;background:linear-gradient(135deg,#e9eee6,#b9c3b6 40%,#f5f7f2 55%,#a8b3a5);display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:34px 60px;box-shadow:inset 0 2px 0 #fff,0 30px 60px rgba(6,17,13,.25)}
.blister i{border-radius:999px;background:radial-gradient(60% 50% at 35% 30%,#fff,rgba(255,255,255,0) 60%),linear-gradient(90deg,#7fe0b8 50%,#c8f26b 50%);box-shadow:inset 0 -6px 12px rgba(0,0,0,.15),0 6px 14px rgba(6,17,13,.25);border:3px solid rgba(255,255,255,.7)}
.blister i.gone{background:radial-gradient(circle at 50% 50%,#9aa596,#c9d0c5);box-shadow:inset 0 4px 10px rgba(0,0,0,.25)}
/* numbers */
.numbers{padding-top:160px;padding-bottom:140px;color:var(--ink)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #c9cdbf}
.nums div{padding:34px 24px 0 0;border-right:1px solid #c9cdbf;margin-right:24px}
.nums div:last-child{border:0}
.nums b{font-family:var(--serif);font-weight:300;font-size:clamp(70px,9vw,150px);letter-spacing:-.06em;line-height:.9}
.nums small{font-family:var(--mono);font-size:12px;margin-left:6px;text-transform:uppercase}
.nums span{display:block;margin-top:16px;color:#4c5e55;font-size:15px}
.fine{margin-top:40px;color:var(--mut);font-size:11px}
.bigimg{height:110vh;padding:0 var(--pad);display:grid;place-items:center}
.wipe{position:absolute;inset:0 var(--pad);overflow:hidden;clip-path:inset(30% 30% 30% 30% round 400px)}
.wipe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,17,13,.1),rgba(6,17,13,.65))}
.over{position:relative;z-index:2;color:var(--cream);font-size:clamp(60px,12vw,200px);font-style:italic}
/* stores */
.stores{padding-top:160px;padding-bottom:160px}
.store-list{list-style:none;border-top:1px solid #1d3027}
.store-list li{display:grid;grid-template-columns:60px 1fr auto 60px;align-items:center;padding:30px 0;border-bottom:1px solid #1d3027;cursor:pointer;transition:padding .5s,color .3s}
.store-list b{font-family:var(--serif);font-weight:300;font-size:clamp(44px,7vw,120px);letter-spacing:-.05em;line-height:.9}
.store-list em{color:var(--mut);font-style:normal}
.store-list i{font-style:normal;font-size:30px;text-align:right;transition:transform .4s}
.store-list li:hover{padding-left:24px;color:var(--lime)}.store-list li:hover i{transform:rotate(-45deg)}
.hov-img{position:fixed;left:0;top:0;width:300px;height:380px;pointer-events:none;z-index:60;border-radius:6px;overflow:hidden;opacity:0;transform:scale(.6)}
/* talk */
.talk{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:120px}
.mega{font-size:clamp(70px,15vw,260px);line-height:.84;letter-spacing:-.06em}
.talk-row{display:flex;gap:20px;margin-top:50px;flex-wrap:wrap}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px var(--pad) 60px;color:var(--mut);border-top:1px solid #1d3027;font-size:11px}
.foot a{text-decoration:underline}
/* mobile */
@media (max-width:820px){
 .nav nav{display:none}
 .hero-title{font-size:20vw}.it{padding-left:8vw}
 .hero-foot{flex-direction:column;align-items:flex-start}
 .hero-meta{top:80px}
 .manifesto,.pin-inner{grid-template-columns:1fr}
 .stack{height:440px}
 .pin{height:auto;padding-top:120px}
 .step{grid-template-columns:36px 1fr}.step span{grid-column:2}
 .rx-card{margin:30px 0 0}
 .horiz{height:auto;padding:100px 0}
 .h-track{flex-direction:column;width:auto;align-items:stretch;gap:60px}
 .card{width:auto;height:auto}.card figure{flex:none;height:300px}.blister-card .blister{flex:none;height:300px;padding:30px}
 .nums{grid-template-columns:1fr 1fr;row-gap:30px}
 .nums div:nth-child(2){border:0}
 .store-list li{grid-template-columns:40px 1fr 30px}.store-list em{display:none}
 .bigimg{height:80vh}
}
@media (prefers-reduced-motion:reduce){
 .grain{animation:none}
 .reveal,.card figure,.wipe{clip-path:none!important}
 .reveal img,.clip img,.wipe img{transform:none}
 .pl-word span{transform:none}
 .big .w{opacity:1}
 .step{opacity:1}
}
.split .wd{padding-bottom:.22em!important;margin-bottom:-.18em}
.horiz{background:var(--sage);color:var(--ink)}
.numbers,.bigimg{background:var(--cream);color:var(--ink)}
.horiz h2{color:var(--ink)}
.split .wd{padding-right:.12em;margin-right:-.12em}
