@font-face{font-family:'DM Sans';src:url('../fonts/DMSans.ttf') format('truetype-variations');
  font-weight:100 1000;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0b0b0c; --bg2:#141416; --ink:#f2f2f0; --soft:#a0a09c; --faint:#6e6e6a;
  --line:rgba(255,255,255,.13); --pad:clamp(18px,4.5vw,64px); --max:1560px;
}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--soft);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-variation-settings:'opsz' 14}
html.js body{opacity:0;transition:opacity .5s ease}
html.js body.ready{opacity:1}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);font-weight:500;line-height:1.12;margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;background:#fff;color:#000;padding:10px 16px;z-index:99}

.head{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:14px var(--pad);
  background:rgba(11,11,12,.72);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line)}
.brand img{width:118px;height:auto}
.nav{display:flex;gap:32px}
.nav a{position:relative;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);padding:6px 0;transition:color .3s}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.16,.84,.44,1)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.nt,.burger{display:none}

.hero{max-width:var(--max);margin:0 auto;
  padding:clamp(70px,13vw,170px) var(--pad) clamp(50px,8vw,100px)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{margin:18px 0 0;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint)}
html.js .hero .eyebrow{opacity:0;transform:translateY(12px);
  transition:opacity .9s ease .24s,transform .9s cubic-bezier(.16,.84,.44,1) .24s}
html.js .hero.is-in .eyebrow{opacity:1;transform:none}
.hero h1{font-size:clamp(27px,4.4vw,56px);letter-spacing:-.022em;color:var(--ink);max-width:20ch}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l i{display:block;font-style:normal}
html.js .hero h1 .l i{transform:translateY(108%);
  transition:transform 1.05s cubic-bezier(.16,.84,.44,1)}
.hero.is-in h1 .l:nth-child(1) i{transition-delay:.10s}
.hero.is-in h1 .l:nth-child(2) i{transition-delay:.19s}
.hero.is-in h1 .l:nth-child(3) i{transition-delay:.28s}
html.js .hero.is-in h1 .l i{transform:translateY(0)}
.scrollcue{margin-top:clamp(40px,7vw,84px);width:1px;height:54px;background:var(--line);
  position:relative;overflow:hidden;opacity:0;transition:opacity .8s ease .8s}
.hero.is-in .scrollcue{opacity:1}
.scrollcue span{position:absolute;left:0;top:-54px;width:1px;height:54px;
  background:var(--ink);animation:cue 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(108px)}}

.work{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sechead{border-top:1px solid var(--line);margin-bottom:clamp(30px,5vw,64px)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(26px,3.4vw,64px) clamp(16px,2vw,34px);padding-bottom:60px}
.tile{display:block;align-self:start}
.tw{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:var(--ar,3/2)}
.tw img,.tw video{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.86);
  transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1.06));will-change:transform;
  transition:filter .85s cubic-bezier(.2,.7,.3,1),transform 1.3s cubic-bezier(.2,.7,.3,1)}
.tw video{position:absolute;inset:0;opacity:0;transition:opacity .7s ease,filter .85s,transform 1.3s}
.tile:focus-visible{outline:1px solid var(--ink);outline-offset:8px}
.tile:hover .tw img,.tile.live .tw img,.tile:focus-visible .tw img{filter:grayscale(0) contrast(1) brightness(1);--sc:1.115}
.tile.playing:hover .tw video,.tile.playing.live .tw video,.tile.playing:focus-visible .tw video{filter:grayscale(0) contrast(1) brightness(1);
  opacity:1;--sc:1.115}
.mv{position:absolute;left:12px;top:12px;z-index:2;font-size:9.5px;letter-spacing:.18em;
  color:rgba(255,255,255,.82);background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  padding:5px 9px;border:1px solid rgba(255,255,255,.22)}
.tm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-top:13px;margin-top:13px;border-top:1px solid var(--line)}
.tm h3{font-size:15px}
.tm span{font-size:11.5px;color:var(--faint);white-space:nowrap}

/* reveal on scroll */
html.js .reveal .tw,html.js .reveal.portrait>img,html.js figure.reveal>img,html.js figure.reveal>video{
  clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.16,.84,.44,1)}
html.js .reveal.in .tw,html.js .reveal.portrait.in>img,html.js figure.reveal.in>img,html.js figure.reveal.in>video{clip-path:inset(0 0 0 0)}
html.js .reveal .tm,html.js .sechead.reveal,html.js .cta.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.16,.84,.44,1)}
html.js .reveal.in .tm,html.js .sechead.reveal.in,html.js .cta.reveal.in{opacity:1;transform:none}
.tile[data-i="1"].reveal .tw{transition-delay:.09s}
.tile[data-i="2"].reveal .tw{transition-delay:.17s}

.marquee{margin-top:clamp(50px,8vw,110px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0}
.mq-track{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq-track span{display:inline-block;padding:0 30px;font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.mq-track span::after{content:"·";margin-left:30px;opacity:.5}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

.cta{max-width:var(--max);margin:clamp(50px,8vw,110px) auto 0;padding:0 var(--pad)}
.cta p{border-top:1px solid var(--line);padding-top:30px;font-size:clamp(18px,2.2vw,26px);color:var(--ink)}
.cta a{border-bottom:1px solid var(--ink);padding-bottom:3px}

.cursor{position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  background:rgba(255,255,255,.10);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;
  opacity:0;transition:opacity .3s ease}
.cursor span{font-size:9.5px;letter-spacing:.2em;color:#fff}
.cursor.on{opacity:1}
@media (pointer:fine){.tile{cursor:none}}
@media (pointer:coarse){.cursor{display:none}}

.proj{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,86px) var(--pad) 0}
.phead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);
  padding-bottom:clamp(30px,5vw,56px);border-bottom:1px solid var(--line)}
.pnum{font-size:11.5px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.phead h1{font-size:clamp(28px,4.2vw,52px);letter-spacing:-.024em;margin:12px 0 16px}
.pmeta{margin:0;font-size:13.5px;color:var(--faint);line-height:1.7}
.pteam{margin:18px 0 0;font-size:12.5px;color:var(--faint);line-height:1.7;max-width:34ch}
.pteam span{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);opacity:.7;margin-bottom:4px}
.ptext{margin-top:clamp(34px,6.5vw,92px)}
.ptext p{margin:0 0 14px;max-width:62ch}
.ptext .hl{color:var(--ink);font-weight:600}
.ptext .cred{font-size:10.5px;font-style:italic;color:var(--faint);margin-top:24px;
  line-height:1.6;letter-spacing:.01em;max-width:46ch}
html.js .phead h1,html.js .phead .pmeta,html.js .phead .pnum,html.js .ptext{
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.44,1)}
.phead.is-in h1{transition-delay:.10s}
.phead.is-in .pmeta{transition-delay:.16s}
.phead.is-in .ptext{transition-delay:.20s}
html.js .phead.is-in h1,html.js .phead.is-in .pmeta,html.js .phead.is-in .pnum,html.js .phead.is-in .ptext{opacity:1;transform:none}
.pmedia{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3.2vw,56px) clamp(16px,2vw,32px);padding:clamp(30px,5vw,58px) 0}
.pmedia figure{align-self:start}
figure{margin:0;background:var(--bg2)}
figure.plain{background:none}
figure.wide{grid-column:1/-1}
figcaption{padding:9px 2px 0;font-size:11.5px;color:var(--faint)}
.inline-v{width:100%}
.pnav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:24px 0 0;font-size:13px;color:var(--faint)}
.pnav a{transition:color .3s,transform .3s}
.pnav a:hover{color:var(--ink)}

.phead2{max-width:var(--max);margin:0 auto;padding:clamp(56px,9vw,120px) var(--pad) 24px;
  border-bottom:1px solid var(--line)}
.phead2 h1{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.024em;margin-top:12px}
.prose,.contact{max-width:var(--max);margin:0 auto;padding:clamp(32px,5vw,60px) var(--pad) 0}
.prose p{max-width:66ch;font-size:clamp(15.5px,1.4vw,17.5px);margin:0 0 20px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;
  margin-top:clamp(38px,6vw,70px);border-top:1px solid var(--line);padding-top:32px}
.facts h4,.cside h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;font-weight:500}
.facts p,.cside p{margin:0;font-size:14px;line-height:1.75}
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,70px)}
.lead{margin:0 0 16px;color:var(--faint)}
.big{margin:0;font-size:clamp(20px,3.2vw,40px);letter-spacing:-.022em}
.big a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px;transition:.3s}
.big a:hover{border-bottom-color:var(--ink)}
.cside div+div{margin-top:24px}
.cside a{border-bottom:1px solid var(--line)}

.portrait-wrap{max-width:var(--max);margin:clamp(46px,7vw,90px) auto 0;padding:0 var(--pad)}
.portrait{background:var(--bg2);overflow:hidden}
.portrait img{width:100%;height:auto;filter:brightness(.94) contrast(1.03);
  transition:filter .9s cubic-bezier(.2,.7,.3,1)}
.portrait:hover img{filter:brightness(1) contrast(1)}
.portrait figcaption{padding:11px 2px 0;font-size:11.5px;color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase}

.foot{max-width:var(--max);margin:clamp(70px,10vw,140px) auto 0;padding:0 var(--pad) 38px}
.foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:30px}
.wm{font-size:15px;letter-spacing:.24em;color:var(--ink)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;font-size:13px}
.foot-links a{color:var(--faint);border-bottom:1px solid transparent;transition:.3s}
.foot-links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.legal{margin-top:30px;font-size:11px;color:var(--faint)}


/* ---------------- typed headline ---------------- */
.hero h1.type{white-space:nowrap}
.phead h1.type,.phead2 h1.type{white-space:normal}
h1.type .caret{color:var(--ink);margin-left:.12em;font-weight:300}
html.js h1.type .caret{animation:caretBlink 1.05s steps(1) infinite}
h1.type.typing .caret{animation:none;opacity:1}
@keyframes caretBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
@media (max-width:520px){.hero h1.type{white-space:normal}}

/* ---------------- intro splash ---------------- */
.intro{position:fixed;inset:0;z-index:200;background:#0b0b0c;display:grid;
  place-items:center;cursor:pointer;
  transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility .7s}
.intro.gone{opacity:0;visibility:hidden}
.intro-stage{position:relative;width:min(92vw,1180px);aspect-ratio:16/9;
  display:grid;place-items:center}
.intro-video,.intro-still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
  /* the clips are logo-on-black; screen blending makes that black vanish
     into the page. The logo clip's ground sits at ~15/255 rather than true
     black, which would screen to a visible rectangle — a mild contrast lift
     crushes it to 0 first. */
  filter:contrast(1.18);
  mix-blend-mode:screen}
.intro-video,.intro-still{transform:none;
  transition:opacity 1.35s cubic-bezier(.4,0,.2,1)}
.intro.on-video .intro-video{opacity:1}
.intro.on-logo .intro-video{opacity:0}
.intro.on-logo .intro-still{opacity:1}
/* the logo dissolves to black first, then the black panel lifts —
   so the site never bleeds through the wordmark */
.intro.fading .intro-video,.intro.fading .intro-still{opacity:0;transition:opacity .55s ease}
.intro-hint{position:absolute;bottom:11vh;left:0;right:0;text-align:center;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#5a5a58;
  opacity:0;transition:opacity .8s ease}
.intro.hint .intro-hint{opacity:1}
@media (max-width:699px){.intro-stage{width:88vw}}

/* ---------------- page transition ---------------- */
html.js body.leaving{opacity:0;transition:opacity .34s ease}

/* ---------------- cursor spotlight ---------------- */
.spot{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.055),transparent 68%)}
.spot.on{opacity:1}

/* ---------------- film grain ---------------- */
.grain{position:fixed;inset:-120px;z-index:3;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(4) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-40px,20px)}
  50%{transform:translate(30px,-30px)}75%{transform:translate(-20px,-15px)}
  100%{transform:translate(0,0)}}

/* ---------------- tile tilt ---------------- */
.tile{perspective:1000px}
.tw{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile.tilting .tw{transition:transform .12s linear}

/* keep site content above the spotlight layer */
main,.foot{position:relative;z-index:4}

/* ---------- tablet: 700–1100px ---------- */
@media (min-width:700px) and (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:clamp(28px,4vw,52px) clamp(18px,2.4vw,30px)}
  .tile{grid-column:auto!important;margin-top:0!important}
  .tile:nth-child(even){margin-top:58px!important}
  .tw{aspect-ratio:3/2!important}
  .phead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,44px)}
  .pmedia figure{grid-column:auto/span 6!important;margin-top:0!important}
  .pmedia figure.wide{grid-column:1/-1!important}
  .ptext{margin-top:clamp(20px,4vw,52px)}
  .contact{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .intro-in{width:min(38vw,300px)}
}

/* ---------- phone: under 700px ---------- */
@media (max-width:699px){
  .grid{grid-template-columns:1fr;gap:34px}
  .tile{grid-column:1/-1!important;margin-top:0!important}
  .tw{aspect-ratio:3/2!important;transform:none!important}
  .phead,.contact{grid-template-columns:1fr}
  .ptext{margin-top:18px}
  .pmedia{grid-template-columns:1fr}
  .pmedia figure{grid-column:1/-1!important;margin-top:0!important}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px}
  .burger span{height:1.5px;background:var(--ink);width:24px}
  .nav{position:absolute;top:100%;left:0;right:0;background:#0b0b0c;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:.3s;border-bottom:1px solid var(--line)}
  .nt:checked~.nav{max-height:250px}
  .nav a{padding:14px var(--pad);border-bottom:1px solid var(--line)}
  .intro-in{width:64vw}
  .spot,.grain{display:none}
}

@media (prefers-reduced-motion:reduce){
  .tw img,.tw video{filter:none;transform:none!important}
  .hero h1 .l i{transform:none!important}
  .eyebrow,.reveal .tm,.sechead.reveal,.cta.reveal,
  .phead h1,.phead .pmeta,.phead .pnum,.ptext{opacity:1!important;transform:none!important}
  .reveal .tw,.reveal.portrait>img,figure.reveal>img,figure.reveal>video{clip-path:none!important}
  .mq-track{animation:none}
  .scrollcue,.cursor,.spot,.grain{display:none}
  .intro-logo,.intro-shine,.intro-hint{animation:none!important;opacity:1}
  .tw{transform:none!important}
  .tile{cursor:pointer}
  body{opacity:1}
}