:root { --ink:#0b0c0e; --paper:#f4f1e9; --blue:#4b68ff; --blue-light:#9baaff; --line:rgba(11,12,14,.17); --display:"Manrope",sans-serif; --serif:"Playfair Display",Georgia,serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); } a { color:inherit; } a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.progress { position:fixed; z-index:10; inset:0 auto auto 0; width:100%; height:3px; background:rgba(244,241,233,.1); }.progress i { display:block; width:100%; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; }
nav { position:absolute; z-index:3; top:0; width:100%; padding:28px 3.5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:var(--paper); }.brand { display:inline-flex; align-items:center; gap:8px; width:max-content; text-decoration:none; font-size:13px; font-weight:800; letter-spacing:.13em; }.brand-mark { display:grid; place-items:center; width:21px; height:21px; border:1.5px solid currentColor; border-radius:50%; font-family:var(--serif); font-size:13px; font-weight:600; letter-spacing:0; }.labs { font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }.labs b { color:var(--blue-light); margin:0 5px; }.nav-cta { justify-self:end; font-family:var(--mono); font-size:10px; text-decoration:none; }.nav-cta span { color:var(--blue-light); font-size:15px; }
.hero { position:relative; min-height:100vh; overflow:hidden; padding:clamp(150px,18vh,220px) 3.5vw 58px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5vw; background:var(--ink); color:var(--paper); }.hero-copy { position:relative; z-index:2; }.eyebrow,.index { margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.eyebrow { color:var(--blue-light); }.hero h1 { max-width:720px; margin:28px 0 28px; font-size:clamp(55px,7vw,112px); letter-spacing:-.08em; line-height:.86; }.hero em,.steps em,.evidence em,.closing em { font-family:var(--serif); font-weight:600; }.intro { max-width:430px; color:rgba(244,241,233,.72); font-size:clamp(16px,1.35vw,20px); line-height:1.42; }.primary-link,.closing-link { display:inline-flex; align-items:center; gap:36px; margin-top:30px; padding-bottom:9px; border-bottom:1px solid currentColor; text-decoration:none; font-size:14px; font-weight:700; transition:gap .25s ease,color .25s ease; }.primary-link:hover,.closing-link:hover { color:var(--blue-light); gap:49px; }.primary-link span { color:var(--blue-light); font-size:21px; }
.run-card { position:relative; z-index:2; width:min(100%,570px); justify-self:end; padding:24px; border:1px solid rgba(244,241,233,.25); background:rgba(22,24,28,.82); box-shadow:0 35px 100px rgba(0,0,0,.4); backdrop-filter:blur(12px); animation:card-in 1s .2s both cubic-bezier(.16,1,.3,1); }.run-top,.run-foot { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.02em; }.run-top time { margin-left:auto; color:var(--blue-light); }.live-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(75,104,255,.12); animation:pulse 2s infinite; }.run-score { display:flex; align-items:end; gap:20px; padding:42px 0 31px; border-bottom:1px solid rgba(244,241,233,.18); }.run-score strong { font-size:clamp(65px,7vw,100px); letter-spacing:-.1em; line-height:.72; }.run-score strong span { font-size:.42em; color:var(--blue-light); }.run-score p { margin:0 0 3px; color:rgba(244,241,233,.62); font-size:12px; line-height:1.35; }.run-list { padding:6px 0; }.run-item { display:grid; grid-template-columns:36px 1fr auto; align-items:center; min-height:55px; border-bottom:1px solid rgba(244,241,233,.1); color:rgba(244,241,233,.56); font-size:12px; transition:color .3s ease; }.run-item span { font-family:var(--mono); font-size:10px; }.run-item p { margin:0; }.run-item i { color:var(--blue-light); font-family:var(--mono); font-size:9px; font-style:normal; }.run-item.active { color:var(--paper); }.run-foot { justify-content:space-between; padding-top:19px; color:rgba(244,241,233,.58); }.run-foot span:last-child { color:var(--paper); }.orb { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }.orb-a { width:31vw; height:31vw; right:-13vw; top:7vh; background:radial-gradient(circle at 36% 36%,#cbd4ff,#4b68ff 43%,#10162d 70%); opacity:.63; animation:drift 14s ease-in-out infinite; }.orb-b { width:7vw; height:7vw; left:47%; bottom:10%; background:var(--blue-light); opacity:.86; animation:drift-alt 10s ease-in-out infinite; }
.problem { padding:clamp(100px,14vw,205px) 3.5vw; display:grid; grid-template-columns:1fr 3fr; gap:5vw; border-bottom:1px solid var(--line); }.index { color:rgba(11,12,14,.56); }.large { max-width:1100px; margin:0; font-size:clamp(36px,5.4vw,82px); letter-spacing:-.065em; line-height:.98; }.large.serif { padding-left:10vw; font-family:var(--serif); font-style:italic; }.side-note { width:min(320px,100%); margin:45px 0 0 auto; font-size:14px; line-height:1.5; }
.brief { padding:29px 3.5vw 0; }.brief-head { display:flex; justify-content:space-between; align-items:start; gap:20px; }.brief-head > p:last-child { max-width:330px; margin:0; font-size:13px; line-height:1.45; }.steps { display:grid; grid-template-columns:repeat(3,1fr); margin-top:70px; border-top:1px solid var(--ink); }.steps article { min-height:340px; padding:22px 7% 34px 0; border-right:1px solid var(--line); display:flex; flex-direction:column; }.steps article:not(:first-child) { padding-left:7%; }.steps article:last-child { border-right:0; }.steps span { font-family:var(--mono); font-size:10px; color:#435edb; }.steps h2 { margin:auto 0 20px; font-size:clamp(28px,3.5vw,50px); letter-spacing:-.07em; line-height:.9; }.steps h2 em { color:#435edb; }.steps p { max-width:230px; margin:0; font-size:13px; line-height:1.45; }
.evidence { position:relative; min-height:660px; margin-top:clamp(95px,13vw,180px); padding:clamp(70px,10vw,140px) 10%; overflow:hidden; background:#151b2b; color:var(--paper); }.evidence-mark { position:absolute; top:6%; right:7%; color:rgba(244,241,233,.08); font-family:var(--mono); font-size:clamp(90px,17vw,250px); letter-spacing:-.08em; }.evidence-copy { position:relative; z-index:2; max-width:760px; }.evidence h2 { margin:25px 0 26px; font-size:clamp(46px,6.5vw,100px); letter-spacing:-.08em; line-height:.86; }.evidence h2 em { color:var(--blue-light); }.evidence-copy > p:last-child { max-width:410px; margin:0; color:rgba(244,241,233,.72); font-size:15px; line-height:1.5; }.evidence-lines { position:absolute; z-index:1; right:0; bottom:15%; left:0; display:flex; gap:6px; align-items:flex-end; height:160px; opacity:.8; }.evidence-lines i { display:block; width:20%; background:var(--blue); transform-origin:bottom; }.evidence-lines i:nth-child(1){height:19%;}.evidence-lines i:nth-child(2){height:47%;}.evidence-lines i:nth-child(3){height:29%;}.evidence-lines i:nth-child(4){height:78%;}.evidence-lines i:nth-child(5){height:57%;}
.audience { padding:clamp(80px,11vw,160px) 3.5vw; display:grid; grid-template-columns:1fr 3fr; gap:5vw; }.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }.audience-grid div { padding:23px 7% 20px 0; border-right:1px solid var(--line); }.audience-grid div:not(:first-child) { padding-left:7%; }.audience-grid div:last-child { border-right:0; }.audience-grid span { font-family:var(--mono); font-size:10px; color:#435edb; text-transform:uppercase; }.audience-grid p { margin:65px 0 0; font-size:clamp(18px,2vw,28px); letter-spacing:-.05em; line-height:1.1; }
.closing { padding:clamp(90px,12vw,175px) 3.5vw; background:var(--blue); color:var(--ink); }.closing h2 { margin:27px 0 30px; font-size:clamp(55px,8vw,124px); letter-spacing:-.09em; line-height:.83; }.closing em { color:var(--paper); }.closing .eyebrow { color:#1e2c77; }.closing-link { margin-top:0; }.closing-link span { color:var(--paper); font-size:22px; }footer { padding:24px 3.5vw; display:flex; justify-content:space-between; border-top:1px solid var(--line); font-family:var(--mono); font-size:10px; }footer a { text-decoration:none; }
[data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1); }[data-reveal].visible { opacity:1; transform:none; }@keyframes card-in { from{opacity:0;transform:translateY(34px) rotate(1.5deg)}to{opacity:1;transform:none}}@keyframes pulse { 50%{box-shadow:0 0 0 10px rgba(75,104,255,0)}}@keyframes drift { 50%{transform:translate(-2vw,3vh) scale(1.07)}}@keyframes drift-alt { 50%{transform:translate(3vw,-4vh)}}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.run-card,.live-dot,.orb { animation:none; }[data-reveal] { opacity:1; transform:none; transition:none; } }
@media (max-width:720px) { nav { padding:20px 22px; grid-template-columns:1fr auto; }.labs { display:none; }.hero { min-height:820px; padding:138px 22px 40px; display:block; }.hero h1 { font-size:clamp(56px,16vw,90px); }.intro { max-width:335px; }.run-card { width:100%; margin-top:60px; padding:17px; }.run-score { padding:32px 0 27px; }.orb-a { width:82vw;height:82vw;right:-36vw;top:22vh; }.orb-b { width:17vw;height:17vw;left:13%;bottom:5%; }.problem,.audience { padding-left:22px;padding-right:22px;display:block; }.problem .index,.audience .index { margin-bottom:55px; }.large.serif { padding:10px 0 0 28px; }.side-note { margin-top:35px; }.brief { padding-left:22px;padding-right:22px; }.brief-head { display:block; }.brief-head > p:last-child { margin-top:28px; }.steps { display:block;margin-top:44px; }.steps article,.steps article:not(:first-child) { min-height:215px;padding:20px 0;border-right:0;border-bottom:1px solid var(--line); }.steps article:last-child { border-bottom:0; }.evidence { min-height:560px;padding:75px 22px; }.evidence-mark { top:10%;right:21px;font-size:87px; }.evidence-lines { height:95px;bottom:9%; }.audience-grid { display:block; }.audience-grid div,.audience-grid div:not(:first-child) { padding:22px 0;border-right:0;border-bottom:1px solid var(--line); }.audience-grid p { margin:35px 0 7px; }.closing { padding:90px 22px; }footer { padding:24px 22px; }footer span { display:none; } }