:root{
  --bg:#0A0E13; --surface:#111823; --fog:#1B2B40; --line:rgba(231,235,239,.14);
  --text:#E7EBEF; --muted:#8D99A6; --accent:#FF6B2C; --accent-hover:#FF8A55;
  --screen:#E9EDF1; --ink:#0A0E13; --ink-muted:#4A5562;
  --ease:cubic-bezier(.22,1,.36,1); --slow:1.2s; --fast:.35s;
  --gutter:clamp(16px,4vw,56px);
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);overflow-x:hidden}
body::after{ /* grain */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
section{scroll-margin-top:72px}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--ink);padding:8px 12px}
.skip:focus{left:8px}

/* type */
.slate{font:400 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.display{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:300;letter-spacing:-.02em;line-height:1.02;margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line);background:transparent;color:var(--text);font:500 14px/1 var(--body);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.btn:hover{border-color:var(--text)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.play-glyph{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* corner ticks (frame motif) */
.tick{position:absolute;width:14px;height:14px;border-color:rgba(231,235,239,.55);border-style:solid;border-width:0;pointer-events:none;z-index:2}
.tick--tl{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.tick--tr{top:10px;right:10px;border-top-width:1px;border-right-width:1px}
.tick--bl{bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}
.tick--br{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}

/* nav */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);background:linear-gradient(var(--bg),rgba(10,14,19,0));}
.bar__logo img{height:34px;width:auto}
.bar__nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.bar__nav a:not(.btn){font-size:14px;text-decoration:none;color:rgba(231,235,239,.82);text-shadow:0 1px 8px rgba(0,0,0,.6);transition:color var(--fast)}
.bar__nav a:not(.btn):hover{color:var(--text)}

/* ---------- Scene 1: hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--gutter) clamp(28px,5vh,56px);
  background:radial-gradient(120% 70% at 50% 40%,var(--fog) 0%,rgba(27,43,64,.35) 40%,var(--bg) 75%)}
.hero__aperture{position:absolute;inset:0;background:#05080b;overflow:hidden;
  clip-path:inset(49.5% 0 49.5% 0);transition:clip-path 1.6s var(--ease) .2s}
.hero__aperture.is-in{clip-path:inset(0 0 0 0)}
.hero__video{position:absolute;inset:0;container-type:size}
.hero__video iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none;
  width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%)}
.hero__video::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,19,.7) 0%,rgba(10,14,19,0) 18%,rgba(10,14,19,0) 40%,rgba(10,14,19,.55) 65%,rgba(10,14,19,.92) 100%),
             linear-gradient(90deg,rgba(10,14,19,.55) 0%,rgba(10,14,19,0) 55%)}
.hero__tc{position:absolute;top:84px;right:34px;z-index:2;color:rgba(231,235,239,.75)}
.hero .tick--tl,.hero .tick--tr{top:78px}
.hero__ratio{position:absolute;bottom:16px;right:34px;z-index:2;color:rgba(231,235,239,.55)}
.hero__copy{position:relative;z-index:3;display:grid;gap:18px}
.hero__title{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:200;font-size:clamp(40px,7.2vw,124px);line-height:.98;letter-spacing:-.035em;margin:0;text-wrap:balance}
.hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.hero__sub{max-width:46ch;margin:0;color:var(--muted)}

/* split-line reveal (#40) */
.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.line:nth-child(2)>span{transition-delay:.12s}
[data-reveal="lines"].is-in .line>span{transform:none}

/* ---------- Scene 2: clients ---------- */
.clients{padding:clamp(72px,12vh,140px) var(--gutter) clamp(40px,8vh,96px);text-align:center;opacity:0;transition:opacity 1.8s ease}
.clients.is-in{opacity:1}
.clients__row{list-style:none;margin:28px auto 0;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(8px,2vw,28px);justify-items:center}
.clients__row img{width:clamp(96px,11vw,150px);filter:grayscale(1) invert(1) contrast(1.9) brightness(1.05);mix-blend-mode:screen;opacity:.62;transition:opacity var(--fast)}
.clients__row li:hover img{opacity:1}

/* ---------- Scene 3: work ---------- */
.work{padding:clamp(64px,10vh,120px) var(--gutter)}
.work__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;margin-bottom:clamp(28px,5vh,56px);border-bottom:1px solid var(--line);padding-bottom:20px}
.work__head .display{font-size:clamp(34px,5vw,72px)}
.filters{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px}
.filter{min-height:44px;padding:0 14px;background:none;border:0;color:var(--muted);font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent;transition:color var(--fast),border-color var(--fast)}
.filter:hover{color:var(--text)}
.filter.is-on{color:var(--text);border-bottom-color:var(--accent)}

.work__body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.stage{position:sticky;top:96px;margin:0}
.stage__frame{position:relative;aspect-ratio:16/9;background:var(--surface);overflow:hidden;cursor:pointer}
.stage__layer{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} /* crossfade (#21) */
.stage__layer.is-on{opacity:1}
.stage__layer img{width:100%;height:100%;object-fit:cover}
.stage__cap{display:flex;align-items:baseline;gap:16px;margin-top:14px;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:400;font-size:18px}
.stage__hint{margin-left:auto}

/* placeholder frame */
.ph{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(90% 80% at var(--px,30%) var(--py,40%),rgba(61,96,140,.55),rgba(17,24,35,.9) 60%,#0B1018 100%)}
.ph__num{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:100;font-size:clamp(64px,10vw,160px);letter-spacing:-.04em;color:rgba(231,235,239,.18);line-height:1}
.ph .slate{position:absolute;left:16px;bottom:calc(11.4% + 10px);z-index:1}
.ph::before,.ph::after{content:"";position:absolute;left:0;right:0;height:11.4%;background:rgba(5,8,11,.85)} /* 2.39 letterbox inside 16:9 */
.ph::before{top:0}.ph::after{bottom:0}

.index{list-style:none;margin:0;padding:0;counter-reset:none}
.index li{border-bottom:1px solid var(--line)}
.index li[hidden]{display:none}
.row{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:3.2em 1fr;gap:4px 14px;padding:14px 0;cursor:pointer;align-items:baseline}
.row__num{font:400 12px/1.4 var(--mono);letter-spacing:.1em;color:var(--muted);transition:color var(--fast)}
.row__title{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:350;font-size:clamp(20px,1.9vw,28px);line-height:1.15;letter-spacing:-.01em;transition:transform .6s var(--ease),color var(--fast)}
.row__meta{grid-column:2;font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.row__thumb{display:none}
.row:hover .row__title,.row.is-active .row__title{transform:translateX(8px)}
.row.is-active .row__num{color:var(--accent)}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* stagger (#20) */
[data-reveal="stagger"] li{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
[data-reveal="stagger"].is-in li{opacity:1;transform:none}

/* ---------- Scene 4: director ---------- */
.director{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:end;padding:clamp(80px,14vh,170px) var(--gutter)}
.director__portrait{position:relative;aspect-ratio:4/5;max-height:80vh}
.ph--portrait{background:radial-gradient(70% 55% at 50% 38%,rgba(61,96,140,.5),#0B1018 75%)}
.ph--portrait::before,.ph--portrait::after{display:none}
.director__text{max-width:56ch}
.director__text .display{font-size:clamp(40px,5.6vw,88px);margin:14px 0 24px}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--text)}
.director__text p:not(.slate):not(.lede){color:var(--muted)}
.disciplines{margin:36px 0 0;border-top:1px solid var(--line)}
.disciplines div{display:grid;grid-template-columns:3.2em 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.disciplines dd{margin:0;font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:350;font-size:20px}
/* rack focus (#6) */
[data-reveal="focus"]{filter:blur(16px);transform:scale(1.04);opacity:.2;transition:filter 1.2s ease,transform 1.2s var(--ease),opacity 1.2s ease}
[data-reveal="focus"].is-in{filter:none;transform:none;opacity:1}

/* ---------- Scene 5: contact (the bright screen) ---------- */
.contact{padding:clamp(40px,8vh,96px) var(--gutter) clamp(80px,12vh,140px)}
.screen{position:relative;background:var(--screen);color:var(--ink);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);
  padding:clamp(28px,5vw,72px);box-shadow:0 0 120px 10px rgba(233,237,241,.08);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease)} /* curtain wipe (#10) */
.screen.is-in{clip-path:inset(0 0 0 0)}
.screen .slate{color:var(--ink-muted)}
.screen .display{font-size:clamp(32px,4.2vw,64px);margin:14px 0 18px}
.screen__intro p:not(.slate){color:var(--ink-muted);margin:0}
.screen__links{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.screen__links a{font-family:var(--display);font-variation-settings:"wdth" 110;font-size:19px;text-decoration:none;border-bottom:1px solid rgba(10,14,19,.25);transition:border-color var(--fast)}
.screen__links a:hover{border-color:var(--accent)}
.screen__form iframe{display:block;border:0;min-height:420px}

/* hero poster sits under the Vimeo loop (shows if the loop can't play) */
.hero__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* agencies line under logos */
.clients__agencies{margin:28px auto 0;color:var(--muted);font-family:var(--display);font-variation-settings:"wdth" 110;font-size:17px;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:baseline}

/* show-all */
.index-wrap{min-width:0}
.more{margin-top:24px;width:100%;justify-content:center}
.more[hidden]{display:none}

/* ---------- Scene 4: how I work ---------- */
.how{padding:clamp(80px,14vh,170px) var(--gutter);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,96px);align-items:start}
.how__head{position:sticky;top:110px}
.how__head .display{font-size:clamp(34px,4.6vw,72px);margin-top:14px;text-wrap:balance}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:3.2em 1fr;gap:4px 14px;padding:26px 0;border-bottom:1px solid var(--line);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease);transition-delay:calc(var(--n,0) * 140ms)}
.steps li:nth-child(2){--n:1}.steps li:nth-child(3){--n:2}.steps li:nth-child(4){--n:3}
.steps.is-in li{clip-path:inset(0 0 0 0)}
.steps h3{margin:0;font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:350;font-size:clamp(22px,2vw,28px);letter-spacing:-.01em}
.steps p{grid-column:2;margin:6px 0 0;color:var(--muted);max-width:52ch}

/* ---------- Scene 5: client voices (placeholders) ---------- */
.voices{padding:0 var(--gutter) clamp(64px,10vh,120px);opacity:0;transition:opacity 1.6s ease}
.voices.is-in{opacity:1}
.voices__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:24px}
.quote{margin:0;padding:28px 24px;border-top:1px solid var(--line)}
.quote blockquote{margin:0 0 18px;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:300;font-size:clamp(19px,1.6vw,23px);line-height:1.35}
.quote--pending{border:1px dashed rgba(231,235,239,.22)}
.quote--pending blockquote{color:var(--muted)}

/* ---------- Scene 6: director teaser ---------- */
.teaser{padding:clamp(64px,10vh,120px) var(--gutter);display:grid;justify-items:end}
.teaser__text{max-width:56ch}
.teaser .display{font-size:clamp(40px,5.6vw,88px);margin:14px 0 22px}
.link-arrow{display:inline-flex;gap:10px;align-items:center;min-height:44px;margin-top:10px;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color var(--fast),color var(--fast)}
.link-arrow:hover{border-color:var(--accent);color:var(--accent-hover)}

/* ---------- About page ---------- */
.about-hero{padding:120px var(--gutter) clamp(48px,8vh,96px)}
.about-hero .display{font-size:clamp(44px,7vw,120px);font-weight:200;letter-spacing:-.035em;margin-top:16px;text-wrap:balance}
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);padding:0 var(--gutter) clamp(80px,12vh,140px);align-items:start}
.story__portrait{position:sticky;top:110px;aspect-ratio:4/5;max-height:78vh;overflow:hidden}
.story__portrait .ph{position:absolute}
.story__photo{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.onset__grid{opacity:0;transition:opacity 1.6s ease}
.onset__grid.is-in{opacity:1}
.story__text p{font-size:clamp(17px,1.35vw,20px);line-height:1.65;margin:0 0 1.2em;max-width:60ch}
.story__text p:first-child{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.3}
.onset{padding:0 var(--gutter) clamp(80px,12vh,140px)}
.onset .display{font-size:clamp(32px,4vw,60px);margin:14px 0 28px}
.onset__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shot{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--surface)}
.shot--main{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .6s ease,transform 1.2s var(--ease)}
.shot:hover img{filter:saturate(1);transform:scale(1.02)}
.onset .slate.note{margin-top:14px}
.cta-band{padding:0 var(--gutter) clamp(80px,12vh,140px)}
.cta-band .screen{grid-template-columns:1fr auto;align-items:center}

/* footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px var(--gutter) 40px;border-top:1px solid var(--line)}
.foot img{height:28px;width:auto;opacity:.8}

/* player */
.player{width:min(1280px,94vw);max-width:none;padding:0;border:0;background:transparent;color:var(--text)}
.player::backdrop{background:rgba(5,8,11,.92)}
.player[open]{animation:expand .5s var(--ease)}
@keyframes expand{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.player__frame{position:relative;aspect-ratio:16/9;background:#000}
.player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player__soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.player__close{display:block;margin:0 0 10px auto;min-height:44px;background:none;border:0;color:var(--muted);font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.player__close:hover{color:var(--text)}
.player__title{margin:12px 0 0;font-family:var(--display);font-variation-settings:"wdth" 110;font-size:18px}

/* ---------- small screens: recomposed, not just reflowed ---------- */
@media (max-width:900px){
  .bar__nav a:not(.btn){display:none}
  .hero{justify-content:flex-start;padding-top:88px}
  .hero__aperture{position:relative;inset:auto;aspect-ratio:16/9;margin:0 calc(var(--gutter) * -1) 28px}
  .hero__tc{top:16px}
  .hero .tick--tl,.hero .tick--tr{top:10px}
  .hero__tc,.hero__ratio{right:20px}
  .work__body{grid-template-columns:1fr}
  .stage{display:none}
  .row{grid-template-columns:2.6em 1fr;padding:18px 0}
  .row__thumb{display:block;grid-column:1/-1;position:relative;aspect-ratio:16/9;margin-bottom:10px;background:var(--surface);overflow:hidden}
  .row__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6);transition:filter .5s ease}
  .row:hover .row__thumb img{filter:none}
  .director{grid-template-columns:1fr}
  .director__portrait{max-width:420px}
  .screen{grid-template-columns:1fr}
  .filters{margin-left:0;width:calc(100% + var(--gutter));gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
  .bar__nav a.keep{display:inline}
  .filter{padding:0 6px;letter-spacing:.06em;font-size:11px}
  .filter:first-child{padding-left:0}
  .clients__row{grid-template-columns:repeat(2,1fr)}
  .how,.story{grid-template-columns:1fr}
  .how__head,.story__portrait{position:static}
  .story__portrait{max-width:420px}
  .voices__row{grid-template-columns:1fr}
  .teaser{justify-items:start}
  .onset__grid{grid-template-columns:1fr 1fr}
  .shot--main{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
  .cta-band .screen{grid-template-columns:1fr}
  .screen{grid-template-columns:minmax(0,1fr)}
  .screen__links a{font-size:16px;overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hero__aperture,.screen{clip-path:none}
  .line>span,[data-reveal="stagger"] li{transform:none;opacity:1}
  .clients,.voices,[data-reveal="focus"]{opacity:1;filter:none;transform:none}
  .steps li{clip-path:none}
  .onset__grid{opacity:1}
}