html,body{background:#050505}
:root{
  --ink:#050505;--ink2:#0D0D0D;--bone:#F4F4F1;
  --bone-60:rgb(244 244 242/.62);--bone-40:rgb(244 244 242/.42);--bone-14:rgb(244 244 242/.14);
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --m:clamp(20px,4vw,64px);--out:cubic-bezier(.22,1,.36,1);--io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{color:var(--bone);font:400 1.0625rem/1.55 var(--sans);-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;overflow-x:clip}
::selection{background:rgb(244 244 242/.3);color:var(--bone)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.skip-link{position:fixed;left:var(--m);top:-80px;z-index:300;background:var(--bone);color:var(--ink);padding:.7rem 1rem;font-weight:600;text-decoration:none;border-radius:999px}
.skip-link:focus{top:14px}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;text-wrap:balance}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--bone-60)}

/* layers */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1s var(--out)}
.gl-ready #scene{opacity:1}
.no-gl #scene{display:none}
.fallback{position:fixed;inset:0;z-index:0;display:none;opacity:.9;
  background:repeating-linear-gradient(90deg,transparent 0 36px,rgb(244 244 242/.07) 36px 37px),repeating-linear-gradient(0deg,transparent 0 24px,rgb(244 244 242/.07) 24px 25px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.no-gl .fallback{display:block}
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--m);transition:background-color .4s,backdrop-filter .4s}
.nav.solid{background:rgb(5 5 5/.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.2em;font-size:.9375rem}
.links{display:flex;gap:clamp(20px,3vw,40px);margin-left:auto;margin-right:8px}
.links a{position:relative;text-decoration:none;font-size:.9375rem;color:var(--bone-60);padding:8px 0;transition:color .25s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--bone);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out)}
.links a:hover{color:var(--bone)}.links a:hover::after{transform:scaleX(1)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 24px;border-radius:999px;font-weight:500;font-size:.9375rem;text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease-out,background-color .25s,color .25s}
.pill:active{transform:scale(.97)}
.pill--solid{background:var(--bone);color:var(--ink)}
.pill--solid:hover{background:#fff}
.pill--ghost{background:rgb(244 244 242/.1);color:var(--bone);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill--ghost:hover{background:rgb(244 244 242/.18)}
.burger{display:none;width:44px;height:44px;background:rgb(244 244 242/.1);border:0;border-radius:50%;cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:var(--bone);transition:transform .4s var(--out),top .4s var(--out)}
.burger i:first-child{top:18px}.burger i:last-child{top:25px}
.burger[aria-expanded=true] i:first-child{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:last-child{top:21.5px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:90;background:var(--ink);padding:110px var(--m) var(--m);display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.drawer[hidden]{display:flex}
.drawer.open{opacity:1;visibility:visible;transition:opacity .4s}
.drawer nav{display:grid;gap:4px}
.drawer nav a{font-size:clamp(2.6rem,12vw,4.5rem);font-weight:500;letter-spacing:-.035em;text-decoration:none;line-height:1.05;transform:translateY(18px);opacity:0;transition:transform .6s var(--out),opacity .6s}
.drawer.open nav a{transform:none;opacity:1}
.drawer.open nav a:nth-child(2){transition-delay:.05s}.drawer.open nav a:nth-child(3){transition-delay:.1s}.drawer.open nav a:nth-child(4){transition-delay:.15s}
.drawer p{color:var(--bone-60)}

/* intro overlay */
.intro{position:fixed;inset:0;z-index:95;pointer-events:none;transition:opacity .7s}
.intro-done .intro{opacity:0;visibility:hidden;transition:opacity .7s,visibility 0s .7s}
html:not(.js) .intro{display:none}
.cap{position:absolute;left:var(--m);bottom:clamp(40px,9vh,96px);max-width:min(30rem,calc(100% - 2*var(--m)));font-size:clamp(1.25rem,2.4vw,1.875rem);line-height:1.2;letter-spacing:-.02em;color:var(--bone);opacity:0;transform:translateY(14px);transition:opacity .8s var(--out),transform .9s var(--out)}
.cap.on{opacity:1;transform:none}
.skip{position:absolute;right:var(--m);bottom:clamp(36px,8vh,88px);pointer-events:auto;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 22px 6px 8px;border:0;border-radius:999px;background:rgb(244 244 242/.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;font-weight:500;font-size:.9375rem;transition:transform .12s ease-out,background-color .25s}
.skip:hover{background:rgb(244 244 242/.18)}.skip:active{transform:scale(.97)}

/* hero */
.hero{position:relative;min-height:max(100svh,620px);display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--m) clamp(28px,6vh,56px)}
.hero-copy{max-width:min(62rem,100%)}
.h1{font-size:clamp(2.7rem,7.4vw,8rem);line-height:.94;letter-spacing:-.045em;font-weight:500;text-shadow:0 8px 40px rgb(5 5 5/.55)}
.line{display:block;overflow:hidden;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
.line>span{display:block;white-space:nowrap}
.h1 em{letter-spacing:-.03em}
.js.intro-pending .line>span{transform:translateY(112%)}
.js .line>span{transition:transform 1.25s var(--out)}
.js .line:nth-child(2)>span{transition-delay:.12s}
.js.intro-pending [data-hero]{opacity:0;transform:translateY(22px)}
.js [data-hero]{transition:opacity 1s var(--out),transform 1.1s var(--out)}
.js .sub[data-hero]{transition-delay:.35s}.js .cta[data-hero]{transition-delay:.5s}.js .hero-note[data-hero]{transition-delay:.7s}
.sub{margin-top:clamp(20px,3vh,32px);max-width:33rem;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5;color:var(--bone-60)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,36px)}
.hero-note{position:absolute;right:var(--m);bottom:clamp(28px,6vh,56px);font-size:.875rem;color:var(--bone-40)}

/* system (pinned) */
.system{position:relative}
.track{height:calc(100vh + 3*72vh)}
html:not(.js) .track,.no-gl .track{height:auto}
.stick{position:sticky;top:0;height:100vh;height:100svh;padding:96px var(--m) clamp(28px,5vh,48px);display:flex;align-items:flex-end}
html:not(.js) .stick,.no-gl .stick{position:relative;height:auto;padding-top:80px;padding-bottom:80px}
.sys-copy{max-width:31rem;display:grid;gap:clamp(18px,3vh,28px)}
.sys-title{font-size:clamp(1rem,1.2vw,1.125rem);font-weight:500;letter-spacing:0;color:var(--bone-60)}
.steps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.step{background:none;border:0;padding:6px 0;cursor:pointer;font-size:.9375rem;font-weight:500;color:var(--bone-40);transition:color .3s;position:relative}
.step::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--bone);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--out)}
.step.on{color:var(--bone)}.step.on::before{transform:scaleX(1)}
.step:hover{color:var(--bone)}
.panels{display:grid}
.panel{grid-area:1/1;opacity:0;transform:translateY(20px);transition:opacity .55s var(--out),transform .8s var(--out);pointer-events:none}
.panel.on{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .panel,.no-gl .panel{grid-area:auto;opacity:1;transform:none;margin-bottom:36px}
.panel h3{font-size:clamp(2.6rem,6.2vw,5.5rem);line-height:.95;letter-spacing:-.045em;margin-bottom:18px}
.panel p{max-width:29rem;color:var(--bone-60);font-size:1.0625rem}
.panel .tag{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--bone);}
.sq{display:inline-block;width:9px;height:9px;border:1px solid var(--bone);border-radius:50%;flex:none;position:relative}
.sq::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--bone)}
.scene-note{font-size:.8125rem;color:var(--bone-40)}
.no-gl .scene-note{display:none}

/* method: three universes in black and white */
.method{background:#000;color:var(--bone);position:relative;padding:clamp(88px,14vw,200px) 0 clamp(72px,10vw,140px);overflow:hidden;
  background-image:radial-gradient(1px 1px at 12% 18%,rgb(244 244 242/.55),transparent),radial-gradient(1px 1px at 78% 12%,rgb(244 244 242/.45),transparent),radial-gradient(1.5px 1.5px at 91% 64%,rgb(244 244 242/.5),transparent),radial-gradient(1px 1px at 33% 82%,rgb(244 244 242/.4),transparent),radial-gradient(1px 1px at 55% 40%,rgb(244 244 242/.3),transparent),radial-gradient(1px 1px at 5% 70%,rgb(244 244 242/.4),transparent),radial-gradient(1.5px 1.5px at 66% 90%,rgb(244 244 242/.35),transparent)}
.wrap{padding:0 var(--m);max-width:1680px;margin:0 auto}
.m-title{font-size:clamp(2.2rem,6.4vw,6.4rem);line-height:.98;letter-spacing:-.04em;max-width:15ch}
.m-lead{margin-top:clamp(20px,3vw,32px);max-width:36rem;color:var(--bone-60);font-size:clamp(1.0625rem,1.5vw,1.25rem)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:end;margin-top:clamp(48px,8vw,120px)}
.slab{padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,8vw,120px);border:1px solid var(--bone-14)}
.slab h3{font-size:clamp(1.75rem,3.8vw,3.75rem);letter-spacing:-.04em;line-height:1}
.slab p{max-width:20rem;font-size:1.0625rem;color:var(--bone-60)}
.slab .glyph{width:clamp(44px,5vw,72px);height:auto;display:block;margin-bottom:clamp(20px,3vw,40px);color:var(--bone)}
.s1{min-height:clamp(260px,30vw,440px)}
.s2{background:rgb(244 244 242/.07);min-height:clamp(320px,36vw,520px)}
.s3{background:var(--bone);color:var(--ink);border-color:var(--bone);min-height:clamp(380px,42vw,600px)}
.s3 .glyph{color:var(--ink)}
.s3 p{color:rgb(5 5 5/.74)}
.m-foot{margin-top:clamp(32px,4vw,56px);font-size:1.0625rem;max-width:34rem;color:var(--bone-60)}

/* status */
.status{background:var(--ink);padding:clamp(88px,12vw,180px) 0 clamp(72px,9vw,130px);position:relative}
.st-title{font-size:clamp(2.2rem,6.4vw,6.4rem);line-height:.98;letter-spacing:-.04em;max-width:13ch}
.rows{margin-top:clamp(48px,8vw,110px)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(24px,5vw,80px);padding:clamp(28px,4vw,56px) clamp(16px,2vw,32px)}
.row:nth-child(odd){background:var(--ink2)}
.row h3{font-size:clamp(1.9rem,4.2vw,4rem);letter-spacing:-.04em;line-height:1}
.row ul{list-style:none;padding:0;display:grid;gap:12px;align-content:start}
.row li{font-size:1.1875rem;max-width:36rem;color:var(--bone)}
.st-foot{margin-top:clamp(28px,4vw,48px);color:var(--bone-60);max-width:34rem}

/* contact */
.contact{background:var(--ink);position:relative;padding-top:clamp(40px,6vw,100px);overflow:hidden}
.contact .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.c-left{display:grid;align-content:space-between;gap:28px}
.c-left h2{font-size:clamp(2.4rem,6vw,6rem);letter-spacing:-.045em;line-height:.95;margin-bottom:20px}
.c-left p{max-width:26rem;color:var(--bone-60)}
.copy{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#copyNote{font-size:.9375rem;color:var(--bone-60)}
.c-block{display:flex;flex-direction:column;justify-content:space-between;gap:48px;background:var(--bone);color:var(--ink);text-decoration:none;padding:clamp(20px,3vw,44px);min-height:clamp(260px,32vw,440px);transition:transform .15s ease-out,background-color .25s}
.c-block:hover{background:#fff}.c-block:active{transform:scale(.99)}
.c-big{font-size:clamp(2.2rem,5.6vw,5.2rem);font-weight:500;letter-spacing:-.045em;line-height:.98}
.c-mail{font-size:clamp(1rem,1.7vw,1.375rem);font-weight:500;overflow-wrap:anywhere}
.foot{padding:clamp(56px,9vw,140px) var(--m) clamp(18px,2.6vw,32px)}
.bigwm{color:var(--bone);font-weight:600;letter-spacing:-.05em;line-height:.76;white-space:nowrap;font-size:22vw;margin-bottom:clamp(20px,3vw,44px)}
.bigwm span{display:inline-block}
.foot-line{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:.9375rem;color:var(--bone-60)}

/* reveal */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--out) var(--d,0s),transform 1.1s var(--out) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .links,.nav-cta{display:none}
  .burger{display:block}
  .trio{grid-template-columns:1fr;align-items:stretch}
  .s1,.s2,.s3{min-height:0}
  .slab{gap:48px}
  .row{grid-template-columns:1fr}
  .contact .wrap{grid-template-columns:1fr}
  .hero{padding-top:96px}
  .hero-note{position:static;margin-top:20px}
  .stick{align-items:flex-end}
  .sys-copy{margin:0 calc(-1*var(--m));padding:56px var(--m) 0;background:linear-gradient(to bottom,transparent,rgb(5 5 5/.82) 38%)}
  .cta .pill{flex:1 1 auto}
}
@media (max-height:700px) and (min-width:901px){.h1{font-size:clamp(2.7rem,7.4vw,7rem)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js [data-hero],.js .line>span,.panel,.cap{transition:opacity .4s!important}
  .js .rv,.js [data-hero],.panel,.cap{transform:none!important}
  .js.intro-pending .line>span{transform:none}
}
@media (prefers-contrast:more){.pill--ghost,.skip,.burger{outline:1px solid currentColor}}