:root{--bg:#0a0a09;--ink:#f2ede3;--grey:#7c7b78;--gold:#efbf2f;--blue:#2aa7e0;--ease:cubic-bezier(.19,1,.22,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;font-weight:300;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
.serif{font-family:'Cormorant Garamond',serif;font-weight:300}
em{font-style:italic}.gold{color:var(--gold)}
.label{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--grey)}
.foot{font-size:.7rem;letter-spacing:.08em;line-height:1.7;color:var(--grey);max-width:260px}
.huge{font-size:clamp(3.2rem,11vw,12rem);line-height:.92;letter-spacing:-.02em}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid var(--ink);border-radius:50%;z-index:100;pointer-events:none;display:grid;place-items:center;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background .4s;mix-blend-mode:difference}
.cursor.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:var(--ink)}
.cursor span{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#000;opacity:0}
.cursor.video{width:90px;height:90px;margin:-45px 0 0 -45px}
.mark{position:fixed;left:2.2vw;top:2.2vh;z-index:60;mix-blend-mode:difference}
.m-g,.m-w{font:400 30px 'Cormorant Garamond',serif;fill:#f2ede3}.m-r{font:400 30px 'Cormorant Garamond',serif;fill:#efbf2f}
.nav{position:fixed;right:2.2vw;top:2.4vh;z-index:60;display:flex;gap:1.8rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;mix-blend-mode:difference;opacity:0;transform:translateY(-10px);transition:all 1s var(--ease)}
.nav.show{opacity:1;transform:none}
.nav a{position:relative;display:inline-block;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.progress{position:fixed;left:0;top:0;height:1px;width:100%;z-index:70}.progress i{display:block;height:100%;background:var(--gold);width:0}
.pin{position:relative}.stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;align-content:center}
.hero .stick{text-align:center}
.hero-label{opacity:0;animation:fade 2s 1s forwards;margin-bottom:2vh}
.hero-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(9rem,36vw,40rem);line-height:.85;letter-spacing:-.04em;display:flex;justify-content:center}
.hero-title span{display:inline-block;opacity:0;filter:blur(30px);transform:translateY(40px);animation:in 2.4s var(--ease) forwards}
.hero-title span:nth-child(1){animation-delay:1.6s}.hero-title span:nth-child(2){animation-delay:1.9s}.hero-title span:nth-child(3){animation-delay:2.2s}
.hero-sub{margin-top:3vh;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);opacity:0;animation:fade 2s 3.2s forwards}
.hero-sub span{color:var(--blue)}
.scrollcue{position:absolute;bottom:4vh;left:50%;font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--grey);opacity:0;animation:fade 2s 4s forwards;padding-bottom:3rem}
.scrollcue::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:2.4rem;background:var(--grey);transform-origin:top;animation:drip 2.4s infinite}
@keyframes fade{to{opacity:1}}@keyframes in{to{opacity:1;filter:blur(0);transform:none}}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.idea{min-height:170vh;padding:30vh 5vw;position:relative}
.idea .huge{max-width:92vw}.w{display:inline-block;will-change:transform}
.f1{position:absolute;top:18vh;left:5vw}.f2{position:absolute;bottom:18vh;right:5vw;text-align:right}
.problem .stick{background:#000}
.ghostnum{position:absolute;font:300 clamp(14rem,50vw,60rem)/1 'Cormorant Garamond',serif;color:#fff;opacity:.04;letter-spacing:-.05em}
.lines{position:relative;width:100%;height:100%}
.line{position:absolute;left:5vw;top:50%;font:300 clamp(3rem,10vw,11rem)/.95 'Cormorant Garamond',serif;text-transform:uppercase;letter-spacing:-.02em;opacity:0;transform:translateY(-50%);will-change:transform,opacity,filter}
.line.fin{text-transform:none}
.reveal .stick{background:var(--bg)}
.r-label{position:absolute;top:12vh;left:50%;transform:translateX(-50%);z-index:3;transition:opacity .5s}
.frame{position:relative;width:12vw;height:16vw;min-width:110px;min-height:140px;overflow:hidden;z-index:2;will-change:width,height;background:#000}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.r-title{position:absolute;bottom:5vh;left:5vw;font-size:clamp(3rem,9vw,9rem);line-height:1;z-index:3;mix-blend-mode:difference;pointer-events:none;opacity:0}
.features .stick{display:block}
.scene{position:absolute;inset:0;padding:14vh 5vw;display:flex;flex-direction:column;justify-content:center;opacity:0;will-change:opacity,transform,filter}
.num{font-size:.75rem;letter-spacing:.4em;color:var(--gold);margin-bottom:2vh}
.cap{margin-top:3vh;max-width:340px;color:var(--grey);font-size:.9rem;line-height:1.6}
.viz{position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:min(38vw,520px);height:min(38vw,380px)}
.v1{display:flex;align-items:flex-end;gap:4%}.v1 i{flex:1;background:linear-gradient(0deg,var(--ink),transparent);opacity:.7;animation:bar 4s ease-in-out infinite alternate}
.v1 i:nth-child(1){height:30%}.v1 i:nth-child(2){height:60%;animation-delay:.3s}.v1 i:nth-child(3){height:45%;animation-delay:.6s}.v1 i:nth-child(4){height:85%;animation-delay:.9s;background:var(--gold)}.v1 i:nth-child(5){height:55%;animation-delay:1.2s}.v1 i:nth-child(6){height:70%;animation-delay:1.5s}.v1 i:nth-child(7){height:40%;animation-delay:1.8s}
@keyframes bar{to{transform:scaleY(.45);transform-origin:bottom}}
.v2 b{position:absolute;border:1px solid var(--ink);border-radius:50%;inset:0;margin:auto;animation:spin 18s linear infinite}
.v2 b:nth-child(1){width:100%;height:100%;max-height:380px;border-color:var(--grey)}.v2 b:nth-child(2){width:66%;height:66%;animation-direction:reverse;border-style:dashed}.v2 b:nth-child(3){width:10%;height:10%;background:var(--gold);border-color:var(--gold);animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.v3 svg{width:100%;height:100%;overflow:visible}.v3 path{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:500;stroke-dashoffset:500;animation:draw 3.5s var(--ease) infinite}
@keyframes draw{60%,100%{stroke-dashoffset:0}}
.statement{padding:30vh 0;overflow:hidden;position:relative}
.row{white-space:nowrap;font:300 clamp(5rem,18vw,22rem)/.95 'Cormorant Garamond',serif;letter-spacing:-.04em;text-transform:uppercase;will-change:transform}
.row span{display:inline-block}
.work{padding:25vh 5vw;min-height:100vh}
.tabs{display:flex;flex-wrap:wrap;gap:2.5rem;margin:5vh 0 6vh;font:300 clamp(2rem,5vw,5rem)/1 'Cormorant Garamond',serif}
.tabs button{color:var(--grey);position:relative;padding-bottom:.4rem;transition:color .6s,transform .6s var(--ease)}
.tabs button.on{color:var(--ink);font-style:italic}
.tabs button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.tabs button.on::after{transform:scaleX(1)}
.panel{display:none}.panel.on{display:block}
.item{display:grid;grid-template-columns:4rem 1fr 1fr;gap:1rem;align-items:baseline;padding:2.2rem 0;border-top:1px solid #262624;opacity:0;transform:translateY(30px);animation:up 1.2s var(--ease) forwards;transition:padding .7s var(--ease),color .5s}
.item:nth-child(2){animation-delay:.12s}.item:nth-child(3){animation-delay:.24s}
.item:hover{padding-left:2rem;color:var(--gold)}
.item span{font-size:.7rem;letter-spacing:.3em;color:var(--grey)}.item h3{font-size:clamp(1.8rem,4vw,3.6rem)}.item p{font-size:.85rem;color:var(--grey)}
@keyframes up{to{opacity:1;transform:none}}
.proof{padding:25vh 5vw;position:relative}
.stat{margin-bottom:22vh}.stat.right{text-align:right}
.stat b{display:block;font:300 clamp(8rem,32vw,38rem)/.85 'Cormorant Garamond',serif;letter-spacing:-.05em;color:var(--ink);font-weight:300}
.stat p{font-size:clamp(1rem,1.6vw,1.5rem);color:var(--grey);margin-top:2vh}
.brand{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:3vh;text-align:center;padding:10vh 5vw}
.wordmark{width:min(70vw,720px);overflow:visible}
.b-g,.b-w{font:300 220px 'Cormorant Garamond',serif;fill:var(--ink)}.b-r{font:300 220px 'Cormorant Garamond',serif;fill:var(--gold)}
.labs{font:300 2rem 'Cormorant Garamond',serif;letter-spacing:.4em;display:flex;align-items:center;gap:1rem}
.labs i{width:14px;height:20px;border-radius:50% 50% 40% 40%;background:var(--blue);display:inline-block}
.final .stick{text-align:center;transition:opacity .2s}
.final .label{margin-bottom:4vh}.f-title{margin-bottom:7vh}
.cta{display:inline-flex;align-items:center;gap:1rem;padding:1.2rem 2.4rem;border:1px solid var(--grey);border-radius:99px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;transition:background .6s var(--ease),color .6s,gap .6s var(--ease),border-color .6s}
.cta:hover{background:var(--gold);color:#000;gap:2rem;border-color:var(--gold)}
@media(max-width:760px){.nav{gap:.9rem;font-size:.55rem;top:auto;bottom:2.2vh;right:50%;transform:translateX(50%)}.nav.show{transform:translateX(50%)}.item{grid-template-columns:2rem 1fr}.item p{grid-column:2}.viz{position:relative;right:auto;top:auto;transform:none;width:70vw;height:30vw;margin-top:5vh}.scene{justify-content:center}body{cursor:auto}.cursor{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important}}