*{box-sizing:border-box}
:root{--bg:#101110;--fg:#e8e9e2;--muted:#92958d;--line:#343630;--acid:#c7f36b}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.wrap{width:min(1160px,calc(100% - 72px));margin:auto}
a{color:inherit;text-decoration:none}
.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px}
.brand{font-size:31px;font-weight:800;letter-spacing:-.1em}
.brand span{font:10px 'DM Mono';vertical-align:top;margin-left:5px;letter-spacing:0}
.top-mid,.mail,.hero-label,.scroll-cue,.section-kicker,.work-count,.project-art small,.stack span,.contact-link,.contact-bottom,.footer>span,.footer>div{font:9px/1.6 'DM Mono',monospace;letter-spacing:.1em}
.top-mid{color:var(--muted);text-align:center}
.mail{border:1px solid #60635a;border-radius:30px;padding:12px 16px}
.mail b{color:var(--acid);margin-left:17px}
.hero{padding-top:34px}
.hero-label{display:flex;justify-content:space-between;color:var(--muted)}
.hero-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);margin-left:8px;vertical-align:middle;box-shadow:0 0 12px var(--acid)}
h1{font-size:clamp(75px,12vw,150px);letter-spacing:-.095em;line-height:.82;margin:76px 0 34px;font-weight:600}
.serif{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.09em}
.hero-foot{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px}
.hero-foot p{font-size:14px;line-height:1.7;color:#c5c7bd}
.scroll-cue{color:var(--muted)}
.scroll-cue span{font-size:20px;color:var(--acid);margin-left:20px}
.visual-stage{height:520px;position:relative;overflow:hidden;background:#171916;color:#f4f4ee;display:grid;place-items:center}
.stage-slides{position:absolute;inset:0}
.stage-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.stage-slide.is-on{opacity:1}
.stage-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,16,.08),rgba(16,17,16,.16) 46%,rgba(16,17,16,.5))}
.stage-slide[src*="reel"],.project-art img[src*="reel"]{object-position:center 78%}
.stage-slide[src*="lowlight"],.project-art img[src*="lowlight"]{object-position:center 62%}
.stage-word{position:relative;z-index:2;font-size:clamp(48px,8vw,105px);font-weight:800;line-height:.78;letter-spacing:-.1em;text-align:center;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.stage-word em{font-family:Georgia,serif;font-weight:400}
.stage-note,.stage-index{position:absolute;bottom:18px;z-index:2;font:9px 'DM Mono';letter-spacing:.12em}
.stage-note{left:20px}
.stage-index{right:20px}
.intro{padding:145px 0 150px;display:grid;grid-template-columns:1fr 2fr;gap:35px}
.section-kicker{color:var(--muted)}
.intro-copy{display:grid;grid-template-columns:1fr 1fr;gap:55px}
.intro h2,.work h2,.lab h2{font-size:clamp(60px,8vw,98px);line-height:.85;letter-spacing:-.1em;margin:0}
.intro-copy p{font-size:13px;line-height:1.9;color:#aeb1a8;margin:0 0 20px}
.intro-copy .lead{font-size:18px;line-height:1.5;color:var(--fg);letter-spacing:-.04em}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.stack span{width:100%;color:var(--muted);margin-bottom:5px}
.stack b{font:9px 'DM Mono';font-weight:400;border:1px solid var(--line);padding:8px 10px;border-radius:20px}
.work{padding:50px 0 150px}
.work-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:60px}
.work h2{margin-top:25px}
.work-count{color:var(--muted)}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:65px 25px}
.project:nth-child(even){margin-top:100px}
.project-art{height:410px;position:relative;overflow:hidden;display:grid;place-items:center;color:#f6f6f0;background:#1c1e1a}
.project-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,12,.05) 30%,rgba(12,14,12,.45))}
.art-title{position:relative;z-index:2;font-size:clamp(52px,5vw,76px);font-weight:800;line-height:.82;letter-spacing:-.1em;text-align:center;text-shadow:0 8px 28px rgba(0,0,0,.35)}
.art-title em{font-family:Georgia,serif;font-weight:400;font-style:italic}
.project-art small{position:absolute;left:18px;bottom:17px;z-index:2;font-size:8px}
.project-info{display:flex;justify-content:space-between;align-items:start;padding-top:17px}
.project-info h3{font-size:16px;margin:0 0 6px;letter-spacing:-.04em}
.project-info p{font:9px 'DM Mono';color:var(--muted);margin:0}
.project-info>span{font-size:22px;color:var(--acid)}
.lab{background:#c8f06d;color:#171916;padding:100px 0;overflow:hidden}
.lab-inner{display:grid;grid-template-columns:1fr 2fr;position:relative}
.lab .section-kicker{color:#4e5b3c}
.lab h2{font-size:clamp(65px,9vw,110px);margin-bottom:25px}
.lab-inner p{font-size:13px;line-height:1.8}
.lab-inner a{display:inline-block;margin-top:22px;border-bottom:1px solid #171916;padding-bottom:8px;font:10px 'DM Mono'}
.lab-shape{position:absolute;right:5%;top:-80px;font-size:320px;opacity:.13;animation:spin 35s linear infinite}
.contact{padding:135px 0 80px}
.contact h2{font-size:clamp(70px,11vw,135px);line-height:.83;letter-spacing:-.1em;margin:65px 0}
.contact-link{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:20px 0}
.contact-link span{color:var(--acid);font-size:20px}
.contact-bottom{display:flex;justify-content:space-between;color:var(--muted);margin-top:65px}
.footer{border-top:1px solid var(--line);padding:28px 42px;display:flex;align-items:center;justify-content:space-between}
.footer>span,.footer>div{color:var(--muted)}
.footer>div{display:flex;gap:25px}
.footer>div a:hover,.mail:hover{color:var(--acid)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){
  .wrap{width:calc(100% - 38px)}
  .topbar{height:72px;padding:0 19px}
  .top-mid{display:none}
  .brand{font-size:27px}
  .hero{padding-top:25px}
  .hero-label{font-size:7px}
  h1{font-size:clamp(65px,15vw,100px);margin:65px 0 30px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-foot p{font-size:12px}
  .scroll-cue{font-size:8px}
  .visual-stage{height:420px}
  .stage-word{font-size:52px}
  .intro{padding:90px 0;grid-template-columns:1fr;gap:35px}
  .intro-copy{grid-template-columns:1fr;gap:25px}
  .intro h2{font-size:75px}
  .work{padding:30px 0 90px}
  .work-head{margin-bottom:35px}
  .work h2{font-size:70px}
  .projects{grid-template-columns:1fr;gap:40px}
  .project:nth-child(even){margin-top:0}
  .project-art{height:330px}
  .art-title{font-size:58px}
  .lab{padding:75px 0}
  .lab-inner{grid-template-columns:1fr;gap:35px}
  .lab h2{font-size:75px}
  .lab-shape{font-size:180px;right:-25px;top:15px}
  .contact{padding:90px 0 60px}
  .contact h2{font-size:clamp(65px,14vw,95px);margin:50px 0}
  .contact-bottom{font-size:7px;gap:20px}
  .footer{padding:25px 19px;flex-wrap:wrap;gap:15px}
  .footer>span{display:none}
  .footer>div{gap:13px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .stage-slide{opacity:0}
  .stage-slide.is-on{opacity:1;transform:none}
}