:root{--bg:#050505;--ink:#f2f2f2;--mute:#8f8f8f;--p:#6d4a9e;--ph:#8f6cc6;--pl:rgba(109,74,158,.6);--rule:#1c1c1c}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:18px/1.6 Georgia,"Times New Roman",serif;overflow-x:hidden}
a{color:inherit}
em{color:var(--ph);font-style:italic}
.label,nav a,.foot,.link,.num{font-family:"Courier New",Courier,monospace}
.bar{position:fixed;left:0;right:0;height:14px;background:#000;z-index:20;pointer-events:none}
.bar-top{top:0;border-bottom:1px solid #151515}.bar-bottom{bottom:0;border-top:1px solid #151515}
.top{position:fixed;top:14px;left:0;right:0;z-index:15;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem;padding:20px 6vw;background:linear-gradient(#050505ee,#05050500)}
.name{text-decoration:none;font-size:19px}.name em{font-style:normal;color:var(--mute)}
nav a{font-size:13px;margin-left:1.6rem;color:var(--mute);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:color .3s}
nav a:hover{color:var(--ph)}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 6vw 70px;overflow:hidden;isolation:isolate}
.beam{position:absolute;top:-20%;left:38%;width:46vw;height:150%;background:linear-gradient(180deg,rgba(109,74,158,.16),rgba(109,74,158,.03) 60%,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(36px);transform:rotate(-18deg);z-index:-1}
.glow{position:absolute;right:-10vw;bottom:-25vh;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(109,74,158,.09),transparent 62%);z-index:-1}
.label{font-size:13px;color:var(--mute);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.6rem}
h1,h2,h3{font-weight:normal;line-height:1.02}
h1{font-size:clamp(44px,6.8vw,120px);letter-spacing:-.025em;max-width:15ch;}
h1 em{text-shadow:0 0 30px rgba(109,74,158,.3)}
.hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:3vw;margin-top:2.4rem;max-width:900px;margin-left:auto;color:var(--mute)}
.hero-foot .bright{color:var(--ink);border-left:1px solid var(--pl);padding-left:1.2rem}
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0;background:#000}
.track{display:flex;width:max-content;animation:roll 38s linear infinite}
.track span{font-size:clamp(30px,4.6vw,64px);padding:0 2.4vw;white-space:nowrap;color:var(--ink)}
.track span.o{color:transparent;-webkit-text-stroke:1px #5a5a5a}
@keyframes roll{to{transform:translateX(-50%)}}
section{position:relative;padding:130px 6vw;border-bottom:1px solid var(--rule);overflow:hidden}
.ghost{position:absolute;top:30px;right:-2vw;font-size:clamp(110px,22vw,340px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);letter-spacing:-.03em;pointer-events:none;user-select:none}
.num{font-size:14px;color:var(--mute);letter-spacing:.2em;margin-bottom:2.4rem;position:relative}
.num::after{content:"";display:inline-block;width:80px;height:1px;background:var(--pl);vertical-align:middle;margin-left:14px}
.grid{position:relative;display:grid;grid-template-columns:6fr 3fr 3fr;gap:0;border-top:1px solid var(--rule)}
.card{padding:2.2rem 2vw 2.4rem 0;border-bottom:1px solid var(--rule);transition:transform .5s,color .3s}
.card + .card{padding-left:2vw;border-left:1px solid var(--rule)}
.card.wide{grid-column:2 / span 2}
.card p{color:var(--mute);max-width:40ch}
.card:hover{transform:translateY(-4px)}.card:hover h2,.card:hover h3{color:var(--ph)}
h2{font-size:clamp(38px,4.6vw,66px);margin-bottom:1rem;letter-spacing:-.02em}
h3{font-size:clamp(24px,2.2vw,30px);margin-bottom:.6rem;transition:color .3s}
.big p{color:var(--ink);font-size:20px}
.aside{margin-top:2.6rem;font-style:italic;color:var(--mute);font-size:22px}
.approach{padding-left:24vw;background:radial-gradient(ellipse at 0 50%,rgba(109,74,158,.05),transparent 55%)}
.approach::before{content:"";position:absolute;left:6vw;top:130px;bottom:130px;width:1px;background:var(--pl)}
.statement{position:relative;font-size:clamp(30px,3.8vw,54px);line-height:1.18;max-width:22ch;letter-spacing:-.01em}
.body{position:relative;margin-top:2.4rem;max-width:46ch;color:var(--mute);font-size:20px}
.contact p{position:relative;color:var(--mute);margin-bottom:1.4rem;font-size:20px}
.link{position:relative;display:inline-block;font-size:clamp(20px,3.4vw,44px);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--pl);padding-bottom:6px;transition:color .3s,border-color .3s}
.link:hover{color:var(--ph);border-color:var(--p)}
.foot{padding:34px 6vw 50px;color:var(--mute);font-size:13px}
.motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.motion .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.track{flex-wrap:wrap;width:auto}.track span[aria-hidden]{display:none}}
@media(max-width:760px){
  .bar{height:8px}.top{top:8px;padding:16px 6vw}nav a{margin:0 1rem 0 0;font-size:12px}
  .hero{padding:150px 6vw 70px}.beam{left:10%;width:90vw}
  .hero-foot{grid-template-columns:1fr;margin-left:0;gap:1.4rem}
  section{padding:90px 6vw}
  .grid{grid-template-columns:1fr}.card,.card + .card{padding:1.8rem 0;border-left:0}.card.wide{grid-column:auto}
  .approach{padding-left:12vw}.approach::before{left:6vw;top:90px;bottom:90px}
  .ghost{top:20px}
}
.slate h2{position:relative;font-size:clamp(34px,5vw,72px);max-width:16ch;margin-bottom:3rem;letter-spacing:-.02em}
.frames{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2vw}
.frame{aspect-ratio:2.39/1;border:1px solid #2a2a2a;background:linear-gradient(135deg,#0d0d0d,#060606);display:flex;align-items:flex-end;padding:14px 16px;transition:border-color .4s}
.frame:nth-child(2){margin-top:4rem}.frame:nth-child(3){margin-top:1.5rem}
.frame span{font-family:"Courier New",monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6a6a6a}
.frame:hover{border-color:var(--pl)}
.manifesto{position:relative}
.manifesto p{font-size:clamp(28px,3.6vw,52px);line-height:1.15;letter-spacing:-.015em;margin-bottom:1.1rem;max-width:22ch}
.manifesto p:nth-child(even){margin-left:6vw;color:#bdbdbd;font-style:italic}
@media(max-width:760px){.frames{grid-template-columns:1fr;gap:1.2rem}.frame:nth-child(n){margin-top:0}.manifesto p:nth-child(even){margin-left:0}}


.social{color:var(--ink);border-left:1px solid var(--pl);padding-left:1.4rem}
.talent h2{position:relative;font-size:clamp(40px,6vw,96px);letter-spacing:-.025em;max-width:14ch;margin-bottom:1.6rem}
.talent-lead{position:relative;color:var(--mute);font-size:21px;max-width:46ch;margin:0 0 3rem 18vw}
.offer{position:relative;list-style:none;counter-reset:o;border-top:1px solid var(--rule);margin-bottom:3rem}
.offer li{counter-increment:o;display:grid;grid-template-columns:5rem 1fr 1.3fr;gap:2vw;align-items:baseline;padding:1.6rem 0;border-bottom:1px solid var(--rule);color:var(--mute);transition:padding .4s,color .3s}
.offer li::before{content:counter(o,decimal-leading-zero);font:13px "Courier New",monospace;color:#5c5c5c;letter-spacing:.15em}
.offer li span{font-size:clamp(24px,2.6vw,38px);color:var(--ink);transition:color .3s}
.offer li:hover{padding-left:1rem}.offer li:hover span{color:var(--ph)}
@media(max-width:760px){.talent-lead{margin-left:0}.offer li{grid-template-columns:1fr;gap:.4rem}}

/* interaction */
.cursor-glow{display:none}
.pointer .cursor-glow{display:block;position:fixed;left:0;top:0;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(109,74,158,.10),transparent 65%);will-change:transform}
.ghost{will-change:transform;transition:transform .2s linear}
h1.pop .w{display:inline-block;transition:transform .35s cubic-bezier(.2,.9,.3,1.4),color .3s}
.motion h1.pop .w{opacity:0;transform:translateY(.6em) rotate(2deg)}
.motion h1.pop.go .w{opacity:1;transform:none;transition:opacity .7s calc(var(--i)*70ms),transform .8s cubic-bezier(.2,.9,.3,1.2) calc(var(--i)*70ms)}
.motion h1.pop.go .w:hover{transform:translateY(-.12em);transition:transform .25s}
.motion .reveal.pop-in{transform:translateY(40px) scale(.96)}
.motion .reveal.pop-in.in{transform:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.9,.3,1.25)}
.card,.offer li,.table{position:relative}
.card::after,.offer li::after,.table::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(109,74,158,.14),transparent 70%)}
.card:hover::after,.offer li:hover::after,.table:hover::after{opacity:1}
.big h2{transition:letter-spacing .5s,transform .5s}.big:hover h2{letter-spacing:.005em}
.track:hover{animation-play-state:paused}
.track span{transition:color .3s,-webkit-text-stroke-color .3s}
.track span:hover{color:var(--ph)}.track span.o:hover{color:transparent;-webkit-text-stroke-color:var(--ph)}
.motion .lit p{color:#3a3a3a;transition:color 1.1s ease,transform 1s ease;transform:translateX(-14px)}
.motion .lit p.in{color:var(--ink);transform:none}
.motion .lit p:nth-child(even).in{color:#cfcfcf}
.talent h2,.slate h2,.corner h2{transition:transform .6s cubic-bezier(.2,.9,.3,1.2)}
.talent h2:hover,.slate h2:hover{transform:skewX(-4deg)}
.offer li span{display:inline-block;transition:color .3s,transform .4s cubic-bezier(.2,.9,.3,1.3)}
.offer li:hover span{transform:translateX(10px) scale(1.04)}

/* creators corner: warm back room */
:root{--warm:#c9935a;--warmlo:rgba(201,147,90,.10)}
.corner{background:radial-gradient(ellipse at 30% 70%,rgba(201,147,90,.06),transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(109,74,158,.05),transparent 50%),#050403}
.corner h2{position:relative;font-size:clamp(48px,8vw,120px);letter-spacing:-.03em;margin-bottom:.6rem}
.corner-lead{position:relative;color:#a59a8d;font-size:21px;font-style:italic;margin-bottom:3rem;max-width:40ch}
.vault{position:relative;border:1px solid #2a241e;min-height:560px;overflow:hidden;background:radial-gradient(ellipse at 50% 0,rgba(201,147,90,.12),transparent 60%),#0a0806}
.door{display:none}
.locked .door{display:block;position:absolute;top:0;bottom:0;width:50%;z-index:3;background:repeating-linear-gradient(90deg,#0f0d0b 0 46px,#0c0a08 46px 48px),#0e0c0a;transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.locked .door-l{left:0;border-right:1px solid #241e18;box-shadow:inset -30px 0 60px rgba(0,0,0,.7)}
.locked .door-r{right:0;border-left:1px solid #241e18;box-shadow:inset 30px 0 60px rgba(0,0,0,.7)}
.locked .door::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,rgba(201,147,90,.35),transparent);filter:blur(2px)}
.lock{display:none}
.locked .lock{display:block;position:absolute;left:50%;top:260px;transform:translate(-50%,-50%);z-index:4;width:92px;height:92px;border-radius:50%;border:1px solid var(--pl);box-shadow:0 0 50px rgba(109,74,158,.18);transition:opacity .6s,transform 1s}
.hole{position:absolute;left:50%;top:26px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#000;box-shadow:0 0 14px rgba(201,147,90,.4)}
.hole::after{content:"";position:absolute;left:4px;top:12px;width:10px;height:24px;background:#000;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.key{display:none}
.locked .key{display:block;position:absolute;left:50%;top:340px;transform:translateX(-50%);z-index:5;font:13px "Courier New",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:#000;border:1px solid var(--pl);padding:14px 26px;cursor:pointer;transition:color .3s,border-color .3s,top .9s}
.key:hover,.key:focus-visible{color:var(--ph);border-color:var(--ph);outline:none}
.inner{padding:60px 5vw 70px;outline:none}
.locked .inner{visibility:hidden;opacity:0;transition:opacity .9s .5s,visibility 0s 1.4s}
.vault.open .door-l{transform:translateX(-100%)}
.vault.open .door-r{transform:translateX(100%)}
.vault.open .lock{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scale(.6);pointer-events:none}
.vault.open .key{top:18px;left:auto;right:18px;transform:none;padding:9px 16px;font-size:11px}
.vault.open .inner{visibility:visible;opacity:1;transition:opacity .9s .5s,visibility 0s}
.welcome{font-size:clamp(30px,4vw,56px);font-style:italic;color:#eadfce;margin-bottom:2.6rem;text-shadow:0 0 40px rgba(201,147,90,.25)}
.room{display:grid;grid-template-columns:1.2fr 1fr;gap:4vw;align-items:start}
.inner h3{font-size:clamp(24px,2.4vw,32px);margin:0 0 .8rem}
.about h3:not(:first-child){margin-top:2rem}
.inner p{color:#bdb3a6;margin-bottom:1.2rem;max-width:44ch}
.board{background:#121614;border:1px solid #2b2f2c;padding:28px 30px 30px;transform:rotate(-1.2deg);box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.5);transition:transform .5s}
.board:hover{transform:rotate(0)}
.board-title{font:12px "Courier New",monospace;letter-spacing:.25em;text-transform:uppercase;color:var(--warm);margin-bottom:.8rem!important}
.board h3{font-family:"Courier New",monospace;font-size:22px;color:#e6e6e0}
.board ol{list-style:none;counter-reset:hr}
.board li{counter-increment:hr;font:17px/1.5 "Courier New",monospace;color:#d8d8d0;padding:.55rem 0;border-bottom:1px dashed #2e332f}
.board li::before{content:counter(hr)". ";color:#7d827e}
.tables-title{margin-top:3.6rem!important}
.tables{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-bottom:3.4rem}
.table{border:1px solid #2a241e;border-radius:999px 999px 18px 18px;padding:34px 22px 26px;text-align:center;color:#a59a8d;font-size:16px;background:radial-gradient(ellipse at 50% 0,rgba(201,147,90,.10),transparent 70%);transition:transform .4s cubic-bezier(.2,.9,.3,1.3),border-color .3s}
.table:nth-child(2){margin-top:1.6rem}.table:nth-child(4){margin-top:.8rem}
.table span{display:block;font-size:22px;color:var(--ink);margin-bottom:.5rem}
.table:hover{transform:translateY(-6px);border-color:rgba(201,147,90,.4)}
.get ul{list-style:none;margin-bottom:2.2rem;max-width:640px}
.get li{padding:.7rem 0;border-bottom:1px solid #221d18;color:var(--ink)}
@media(max-width:900px){.tables{grid-template-columns:1fr 1fr}.table:nth-child(n){margin-top:0}}
@media(max-width:760px){
  .vault{min-height:600px}
  .inner{padding:70px 6vw 50px}
  .room{grid-template-columns:1fr;gap:2rem}
  .tables{grid-template-columns:1fr}
  .locked .lock{width:76px;height:76px;top:220px}.hole{top:20px}.locked .key{top:290px}
  .pointer .cursor-glow{display:none}
}
@media(prefers-reduced-motion:reduce){.vault.open .door{display:none}.board{transform:none}h1.pop .w{transition:none}}

.tools{background:linear-gradient(180deg,#050505,#000 40%,#050505);border-top:1px solid var(--pl);padding:150px 6vw}
.tools .ghost{top:40px}
.kicker{position:relative;font:13px "Courier New",monospace;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);margin-bottom:2rem}
.tools h2{position:relative;font-size:clamp(44px,7.4vw,118px);line-height:1;letter-spacing:-.03em;max-width:13ch;margin-bottom:3.4rem}
.tools-body{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-left:14vw;max-width:980px}
.tools-body p{color:var(--mute);font-size:20px}
.tools-body p + p{color:var(--ink)}
@media(max-width:760px){.tools{padding:100px 6vw}.tools-body{grid-template-columns:1fr;margin-left:0;gap:1.4rem}}