/* Apollo Creative — a private screening room.
   Night ground, one 2.39:1 screen per page, brand pieces (sun-eye seal, engraved Apollo, pill frame, gold disc)
   pinned and taped across its edges. Palette is the brand kit only: #110400, #5B3D31, #CE9A1F, #FFFFFF. */
@font-face{font-family:"Adventor";src:url(/assets/fonts/adventor-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Adventor";src:url(/assets/fonts/adventor-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --night:#110400; --deep:#0A0200; --raise:#1A0B05; --umber:#5B3D31; --gold:#CE9A1F; --gold-hi:#E3B44A;
  --bone:#F4EEE4; --paper:#F1EEE8; --muted:#A8968A; --line:rgba(206,154,31,.28); --line-soft:rgba(244,238,228,.12);
  --tape:rgba(232,224,206,.74);
  --serif:"Bodoni Moda","Didot","Bodoni 72","Bodoni MT",Georgia,serif;
  --sans:"Century Gothic","Adventor","URW Gothic","Avenir Next",sans-serif;
  --gutter:clamp(16px,4vw,56px); --max:1360px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--bone);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:80;opacity:.08;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--night);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.track{font-size:12.5px;letter-spacing:.46em;color:var(--muted);text-transform:lowercase}
.caps{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:clamp(16px,1.4vw,18px);color:var(--muted);line-height:1.7;max-width:56ch}
.h2{font-family:var(--serif);font-size:clamp(36px,5.2vw,76px);line-height:1;letter-spacing:-.01em}
.h2.small{font-size:clamp(30px,3.6vw,52px)}
.h2 em,.statement em,.title em{font-style:italic;color:var(--gold)}
.slate{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.slate b{color:var(--gold);font-weight:700}
.rec{display:inline-flex;align-items:center;gap:8px;color:var(--bone)}
.rec i{width:8px;height:8px;border-radius:50%;background:#C8331F;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.tc{color:var(--gold);min-width:11ch}
.badge{position:absolute;left:12px;top:12px;z-index:4;background:var(--gold);color:var(--night);font:700 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:7px 10px}
.badge.static{position:static;display:inline-block}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:17px 26px;border:1px solid var(--gold);color:var(--night);background:var(--gold);position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease);cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;background:var(--bone);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn.line{background:transparent;color:var(--bone);border-color:rgba(244,238,228,.4)}
.btn.line::before{background:var(--gold)}
.btn.line:hover{color:var(--night);border-color:var(--gold)}
.btn-sm{padding:13px 18px;font-size:11px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--night) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.logo img{height:36px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.menu a{text-decoration:none;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);position:relative}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--gold);transition:right .4s var(--ease)}
.menu a:not(.btn):hover,.menu a[aria-current="page"]{color:var(--bone)}
.menu a:not(.btn):hover::after,.menu a[aria-current="page"]::after{right:0}
.menu .btn{color:var(--night)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line-soft);background:transparent;cursor:pointer;position:relative}
.menu-btn span:not(.sr){position:absolute;left:12px;right:12px;height:1px;background:var(--bone);transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:25px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}
@media (max-width:980px){
  .menu-btn{display:block}
  .menu{position:fixed;inset:calc(69px + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--deep);border-bottom:1px solid var(--line);padding:12px var(--gutter) 28px;max-height:calc(100dvh - 69px);overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--ease),visibility .3s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a:not(.btn){font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:30px;color:var(--bone);padding-block:10px;width:100%;border-bottom:1px solid var(--line-soft)}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin-top:22px}
}

/* HERO */
.hero{position:relative;padding-bottom:clamp(40px,6vw,80px);overflow-x:clip}
.hero-top{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-block:clamp(20px,3vw,36px) 18px}
.stage,.cat-stage{position:relative;--mx:0;--my:0}
.screen{position:relative;z-index:2;aspect-ratio:2.39/1;overflow:hidden;background:var(--deep);box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(244,238,228,.06);animation:open 1.6s var(--ease) both}
.screen.short{aspect-ratio:3.2/1}
@keyframes open{from{clip-path:inset(16% 0 16% 0)}to{clip-path:inset(0 0 0 0)}}
.screen .kb{will-change:transform;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;filter:sepia(.45) saturate(.8) brightness(.62) contrast(1.18);transform-origin:70% 40%;animation:kb 26s ease-in-out infinite alternate}
.screen .kb.still{filter:sepia(.2) brightness(.92) contrast(1.06)}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.16) translate(-2%,1%)}}
.screen .grade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,4,0,.92) 0%,rgba(17,4,0,.7) 34%,rgba(17,4,0,.08) 70%),linear-gradient(0deg,rgba(17,4,0,.75) 0%,transparent 45%)}
.screen .leak{position:absolute;right:-10%;top:-30%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(206,154,31,.42),rgba(206,154,31,0));mix-blend-mode:screen;animation:flicker 5.5s infinite;pointer-events:none}
@keyframes flicker{0%,100%{opacity:.75}12%{opacity:.55}14%{opacity:.85}40%{opacity:.7}43%{opacity:.5}46%{opacity:.8}70%{opacity:.65}}
.screen .scan{position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(180deg,transparent,rgba(244,238,228,.05),transparent);animation:scan 7s linear infinite;pointer-events:none}
@keyframes scan{to{top:122%}}
.crop{position:absolute;width:26px;height:26px;border:0 solid rgba(244,238,228,.55);z-index:3;pointer-events:none}
.crop.tl{left:18px;top:18px;border-left-width:1px;border-top-width:1px}
.crop.tr{right:18px;top:18px;border-right-width:1px;border-top-width:1px}
.crop.bl{left:18px;bottom:18px;border-left-width:1px;border-bottom-width:1px}
.crop.br{right:18px;bottom:18px;border-right-width:1px;border-bottom-width:1px}
.frame-id{position:absolute;right:56px;top:20px;z-index:3;font-size:10.5px;letter-spacing:.3em;color:rgba(244,238,228,.7)}
.title{position:absolute;z-index:6;left:clamp(20px,4.5vw,72px);bottom:clamp(-64px,-4.4vw,-26px);font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.9vw,112px);line-height:.92;letter-spacing:-.015em;color:var(--bone);text-shadow:0 8px 40px rgba(0,0,0,.45);margin:0}
.title span{display:block;animation:trackin 1.6s var(--ease) both}
.title span:nth-child(2){animation-delay:.12s;padding-left:.55em}
.title span:nth-child(3){animation-delay:.24s}
@keyframes trackin{from{opacity:.25;transform:translateY(.22em)}to{opacity:1;transform:none}}
.piece{position:absolute;transform:translate(calc(var(--mx)*var(--d,10)*1px),calc(var(--my)*var(--d,10)*1px));transition:transform .6s var(--ease)}
.halo{z-index:1;right:-8%;top:8%;width:22%;aspect-ratio:1;--d:-14}
.halo .rays{position:absolute;inset:-22%;width:144%;max-width:none;opacity:.22;animation:spin 90s linear infinite}
.halo .disc{position:absolute;inset:12%;border-radius:50%;background:var(--gold);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.halo .disc img{position:absolute;left:18%;top:4%;width:92%;max-width:none;opacity:.55}
.seal{z-index:7;left:44%;top:-9%;width:clamp(96px,11vw,156px);aspect-ratio:1;--d:22;color:var(--bone)}
.seal svg,.orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal-text{animation:spin 32s linear infinite;will-change:transform}
.seal-dash{animation:spin 80s linear infinite reverse;will-change:transform}
.seal .core{position:absolute;inset:24%;border-radius:50%;background:var(--night);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.seal .core img{width:70%;animation:breathe 5s ease-in-out infinite;will-change:transform}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
.pillpiece{z-index:7;right:5%;bottom:-17%;width:clamp(120px,16%,220px);aspect-ratio:1/1.62;--d:30;margin:0}
.pillpiece .float{position:absolute;inset:0;animation:float 7s ease-in-out infinite;transform:rotate(4deg)}
@keyframes float{50%{translate:0 -10px;rotate:-1.5deg}}
.paper{position:absolute;background:var(--paper);filter:url(#rough);box-shadow:0 26px 50px -24px rgba(0,0,0,.9)}
.pillpiece .paper{inset:-6%;border-radius:999px}
.pill{position:absolute;inset:0;border-radius:999px;border:9px solid var(--umber);overflow:hidden;background:var(--umber)}
.pill::after{content:"";position:absolute;inset:5px;border-radius:999px;border:1.5px solid var(--paper)}
.pill img{width:100%;height:100%;object-fit:cover;object-position:64% 46%}
.tape{position:absolute;width:92px;height:26px;background:var(--tape);z-index:9;box-shadow:0 1px 3px rgba(0,0,0,.3);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,24% 8%,30% 0,70% 0,76% 8%,82% 0,88% 10%,94% 0,100% 8%,100% 92%,94% 100%,88% 90%,82% 100%,76% 92%,70% 100%,30% 100%,24% 92%,18% 100%,12% 90%,6% 100%,0 92%)}
.pillpiece .tape{left:50%;top:-6%;translate:-50% 0;rotate:-8deg}
.tape.s1{left:-18px;top:-10px;rotate:-32deg}
.tape.s2{right:-20px;bottom:-8px;rotate:-28deg}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-top:clamp(96px,10vw,150px)}
.hero-bottom .intro{display:grid;gap:26px;max-width:560px}
.cue{display:grid;justify-items:center;gap:12px;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.cue i{width:1px;height:64px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:760px){
  .screen{aspect-ratio:4/5}
  .screen.short{aspect-ratio:4/3}
  .screen .kb{object-position:55% 30%}
  .screen .grade{background:linear-gradient(0deg,rgba(17,4,0,.95) 0%,rgba(17,4,0,.55) 45%,rgba(17,4,0,.1) 75%)}
  .title{left:18px;right:18px;bottom:-34px;font-size:clamp(40px,11.5vw,60px)}
  .title span:nth-child(2){padding-left:.35em}
  .halo{width:46%;right:-14%;top:-8%}
  .seal{left:auto;right:8%;top:-6%}
  .pillpiece{width:28%;right:4%;bottom:28%}
  .hero-bottom{grid-template-columns:1fr;padding-top:72px}
  .cue{justify-items:start}
  .frame-id{display:none}
}

/* Ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;background:var(--deep)}
.ticker-row{display:flex;gap:42px;width:max-content;animation:tick 50s linear infinite;align-items:center}
.ticker span{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);font-style:italic;white-space:nowrap}
.ticker span.c{font-family:var(--sans);font-style:normal;font-size:clamp(12px,1.2vw,14px);letter-spacing:.38em;text-transform:uppercase;color:var(--muted)}
.ticker img{width:26px;height:26px;flex:none;animation:spin 12s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* Sections */
section.block{padding-block:clamp(88px,12vw,170px);overflow-x:clip}
.head{display:grid;gap:16px;margin-bottom:clamp(44px,6vw,80px);max-width:820px}
.page-pad{padding-block:clamp(56px,8vw,110px) 0}

/* Home: category collage */
.cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);align-items:start}
.cat{position:relative;text-decoration:none;display:grid;gap:16px;min-width:0}
.cat .shape{position:relative;animation:float 8s ease-in-out infinite}
.cat:nth-child(2) .shape{animation-delay:-2s}.cat:nth-child(3) .shape{animation-delay:-4s}.cat:nth-child(4) .shape{animation-delay:-1s}.cat:nth-child(5) .shape{animation-delay:-5s}
.cat .shape .paper{inset:-9px}
.cat .img{position:relative;overflow:hidden;background:var(--umber)}
.cat .img img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) brightness(.9) contrast(1.05);transition:transform 1s var(--ease),filter .6s}
.cat:hover .img img{transform:scale(1.07);filter:none}
.cat .tape{transition:translate .5s var(--ease)}
.cat:hover .tape{translate:0 -4px}
.meta{display:flex;align-items:baseline;gap:16px}
.num{font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.4vw,46px);color:var(--gold);line-height:1}
.cat h3{font-size:clamp(15px,1.4vw,18px);letter-spacing:.3em;text-transform:uppercase}
.cat p{font-size:14.5px;color:var(--muted);max-width:36ch}
.cat .count{display:block;margin-top:4px;color:var(--gold);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.c1{grid-column:1/span 4}.c1 .img{aspect-ratio:3/4;border-radius:999px 999px 0 0}.c1 .paper{border-radius:999px 999px 0 0}.c1 .tape{right:-18px;top:32%;rotate:68deg}
.c2{grid-column:5/span 4;margin-top:clamp(48px,9vw,140px)}.c2 .img{aspect-ratio:1;border-radius:50%}.c2 .paper{border-radius:50%}.c2 .tape{left:38%;top:-14px;rotate:-6deg}
.c3{grid-column:9/span 4;margin-top:clamp(16px,3vw,44px)}.c3 .img{aspect-ratio:1/1.5;border-radius:999px;border:8px solid var(--umber)}.c3 .paper{border-radius:999px}.c3 .tape{left:-20px;bottom:22%;rotate:-58deg}
.c4{grid-column:2/span 5;margin-top:clamp(24px,4vw,64px)}.c4 .img{aspect-ratio:4/3}.c4 .tape{right:12%;top:-13px;rotate:7deg}
.c5{grid-column:8/span 5;margin-top:clamp(64px,10vw,150px)}.c5 .strips{display:grid;gap:7px}
.c5 .strips .img{height:clamp(52px,6vw,82px);transition:transform .7s var(--ease)}
.c5 .strips .img:nth-child(1){transform:translateX(6%)}.c5 .strips .img:nth-child(1) img{object-position:50% 20%}
.c5 .strips .img:nth-child(2){transform:translateX(-4%)}.c5 .strips .img:nth-child(2) img{object-position:50% 45%}
.c5 .strips .img:nth-child(3){transform:translateX(2%)}.c5 .strips .img:nth-child(3) img{object-position:50% 70%}
.c5 .strips .img:nth-child(4){transform:translateX(-7%)}.c5 .strips .img:nth-child(4) img{object-position:50% 90%}
.c5:hover .strips .img{transform:none}
.c5 .tape{left:8%;top:-14px;rotate:-9deg}
@media (max-width:860px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}.c1,.c2,.c3,.c4,.c5{grid-column:auto;margin-top:0}.c2,.c4{margin-top:52px}.c5{grid-column:1/-1}}
@media (max-width:360px){.cats{grid-template-columns:1fr}.c2,.c4{margin-top:0}}

/* Manifesto / clip cuts */
.manifesto{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.manifesto{grid-template-columns:1fr}}
.statement{font-family:var(--serif);font-size:clamp(28px,3.4vw,48px);line-height:1.18;letter-spacing:-.005em}
.statement.small{font-size:clamp(24px,2.6vw,36px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line-soft)}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps dt{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:24px;line-height:1}
.steps dd{margin:8px 0 0;color:var(--muted);font-size:14.5px}
.steps b{display:block;color:var(--bone);font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:11.5px;margin-bottom:6px}
.cuts{position:relative;aspect-ratio:2/3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));--p:0;max-width:520px;justify-self:center;width:100%}
.cuts .strip{background-image:url(/images/uploads/statue-hand.jpg);background-size:500% auto;background-repeat:no-repeat;filter:sepia(.3) saturate(.85) contrast(1.05);transform:translateY(calc(var(--p) * var(--o) * 1px));transition:transform .2s linear;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.cuts .strip:nth-child(1){background-position:0% 0;--o:-46}
.cuts .strip:nth-child(2){background-position:25% 0;--o:38}
.cuts .strip:nth-child(3){background-position:50% 0;--o:-22}
.cuts .strip:nth-child(4){background-position:75% 0;--o:52}
.cuts .strip:nth-child(5){background-position:100% 0;--o:-34}
.cuts .seam{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none}
.cuts .seam i{border-left:1px solid rgba(206,154,31,.55)}
.cuts .seam i:first-child{border-left:0}
.cuts .tag{position:absolute;left:-14px;bottom:10%;color:var(--night);padding:10px 16px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;rotate:-4deg;z-index:3;isolation:isolate}
.cuts .tag::before{content:"";position:absolute;inset:0;background:var(--paper);filter:url(#rough);z-index:-1}

/* Case study cards (home) */
.grid{display:grid;gap:clamp(24px,3vw,40px) 24px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.case{text-decoration:none;display:grid;gap:12px;align-content:start;min-width:0}
.case-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--umber)}
.case-media img{width:100%;height:100%;object-fit:cover;filter:sepia(.2) brightness(.92);transition:transform 1s var(--ease),filter .6s}
.case:hover .case-media img{transform:scale(1.05);filter:none}
.case h3{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.1}

/* Cinema band */
.cinema{background:var(--deep);position:relative;overflow:hidden;border-block:1px solid var(--line)}
.cinema .ghost{position:absolute;right:-3%;top:-6%;width:min(560px,58%);height:auto;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-3%,4%) rotate(-2deg)}}
.cinema .inner{position:relative;display:grid;gap:clamp(36px,5vw,64px);padding-block:clamp(88px,11vw,160px) clamp(40px,5vw,64px)}
.film{position:relative;background:#140803;padding:24px 0;overflow:hidden}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:10px;z-index:2;background:repeating-linear-gradient(90deg,transparent 0 14px,#3A271D 14px 26px);animation:perf 1.4s linear infinite}
.film::before{top:7px}.film::after{bottom:7px}
@keyframes perf{to{background-position:-26px 0}}
.reel{display:flex;gap:14px;width:max-content;animation:tick 40s linear infinite;padding-inline:14px}
.fr{position:relative;width:clamp(240px,30vw,400px);aspect-ratio:2.39/1;overflow:hidden;background:#000;flex:none}
.fr img{width:100%;height:100%;object-fit:cover;filter:sepia(.4) brightness(.8) contrast(1.15)}
.fr small{position:absolute;left:10px;bottom:7px;font-size:10px;letter-spacing:.26em;opacity:.8}
.reel-foot{padding-block:clamp(36px,5vw,64px) clamp(88px,11vw,160px);position:relative}
.reel-row{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.play{display:inline-flex;align-items:center;gap:18px;text-decoration:none;font:400 11.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;background:none;border:0;color:var(--bone);cursor:pointer;padding:0}
.play i,.play-dot{position:relative;width:68px;height:68px;border-radius:50%;background:var(--gold);display:grid;place-items:center;flex:none}
.play i::before,.play-dot::before{content:"";border-left:15px solid var(--night);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:5px}
.play i::after,.play-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}

/* Category page */
.cat-hero{padding-top:clamp(24px,3vw,40px);overflow-x:clip}
.cat-slate{margin-bottom:18px}
.cat-title{bottom:clamp(-56px,-3.6vw,-24px)}
.cat-title span:nth-child(1){font-size:1.15em}
.cat-title span:nth-child(2){font-size:.42em;padding-left:.15em;margin-top:.3em;letter-spacing:0;animation-delay:.2s}
.seal.small{width:clamp(88px,9vw,124px);left:auto;right:6%;top:-10%}
.covers-wrap{padding-top:clamp(110px,12vw,180px)}
.covers-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.covers-grid{grid-template-columns:1fr}}
.covers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.covers li{display:flex;gap:18px;align-items:baseline;padding-block:16px;border-bottom:1px solid var(--line-soft);font-size:15.5px}
.covers .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:18px;min-width:2ch}
.partners{display:grid;gap:22px;padding-bottom:clamp(40px,6vw,80px)}
.partners ul{list-style:none;margin:0;padding:26px 0;display:flex;flex-wrap:wrap;gap:20px 56px;align-items:center;border-block:1px solid var(--line)}
.partners li span{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,32px)}
.partners img{height:42px;width:auto;opacity:.85;filter:grayscale(1) brightness(1.6)}
.partners a{text-decoration:none}
.studies{display:grid;gap:clamp(72px,9vw,130px)}
.study{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end;text-decoration:none}
.study:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.study:nth-child(even) .study-media{order:2}
@media (max-width:860px){.study,.study:nth-child(even){grid-template-columns:1fr}.study:nth-child(even) .study-media{order:0}}
.study-media{position:relative}
.study-media .cut{overflow:hidden;aspect-ratio:2.39/1;background:var(--umber)}
.study-media .cut img{width:100%;height:100%;object-fit:cover;filter:sepia(.3) brightness(.82) contrast(1.08);transition:transform 1.4s var(--ease),filter .6s}
.study:hover .study-media .cut img{transform:scale(1.05);filter:none}
.study-media .offset{position:absolute;left:8%;width:46%;bottom:-12%;height:26%;overflow:hidden;border:6px solid var(--paper);box-shadow:0 26px 40px -22px rgba(0,0,0,.9);transition:transform .9s var(--ease)}
.study:hover .study-media .offset{transform:translateX(12%)}
.study-media .offset img{width:100%;height:340%;object-fit:cover;transform:translateY(-36%)}
.study-copy{display:grid;gap:14px;padding-bottom:6px}
.study-copy h3{font-family:var(--serif);font-size:clamp(28px,3vw,44px);line-height:1.05}
.study-copy p:not(.slate){color:var(--muted);max-width:44ch}
.more{color:var(--gold);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase}
.empty{border:1px dashed var(--line);padding:clamp(24px,4vw,48px);display:grid;gap:18px;justify-items:start;color:var(--muted);max-width:720px}

/* Project page */
.project-head{padding-top:clamp(40px,6vw,88px);display:grid;gap:20px;padding-bottom:clamp(32px,4vw,56px)}
.crumbs{display:flex;gap:12px;align-items:center;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--gold);text-decoration:none}
.p-title{font-family:var(--serif);font-size:clamp(40px,6.4vw,96px);line-height:.98;letter-spacing:-.01em;max-width:18ch;animation:trackin 2s var(--ease) both}
.facts{display:flex;flex-wrap:wrap;gap:14px 56px;margin:8px 0 0;padding-top:20px;border-top:1px solid var(--line-soft)}
.facts div{display:grid;gap:6px;min-width:0}
.facts dt{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:15px}
.facts .logo-fact img{height:34px;width:auto}
.project-screen{aspect-ratio:2.39/1}
@media (max-width:760px){.project-screen{aspect-ratio:4/3}}
.film-play{position:absolute;inset:0;border:0;padding:0;background:#000;cursor:pointer;display:block;color:var(--bone)}
.film-play img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s}
.film-play:hover img{opacity:1}
.play-dot.big{position:absolute;left:50%;top:50%;translate:-50% -50%;width:84px;height:84px}
.play-label{position:absolute;left:22px;bottom:18px;font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.screen iframe,.screen video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.prose-wrap{margin-top:clamp(48px,6vw,88px)}
.prose{max-width:66ch;display:grid;gap:1.1em;font-size:17px;color:#DCD3C7}
.prose.flush{margin-top:0;padding:0;max-width:62ch}
.prose em{color:var(--bone)}
.reels-sec,.gallery-sec{padding-top:clamp(72px,9vw,130px)}
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}
.reel-card{margin:0;display:grid;gap:10px;scroll-snap-align:start}
@media (max-width:600px){.reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}}
.reel-play{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--raise);border:0;padding:0;cursor:pointer;color:var(--bone);text-decoration:none}
.reel-play img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) brightness(.8);transition:transform 1s var(--ease),filter .5s}
.reel-play:hover img{transform:scale(1.05);filter:none}
.reel-play .play-dot{position:absolute;left:50%;top:50%;translate:-50% -50%}
.reel-play.empty{cursor:default}
.reel-note{position:absolute;left:12px;bottom:12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;background:var(--night);padding:6px 9px;color:var(--gold)}
.reel-card iframe,.reel-card video{width:100%;aspect-ratio:9/16;border:0;background:#000;display:block}
.reel-card figcaption{font-size:13px;color:var(--muted)}
.gallery{columns:2 320px;column-gap:16px}
.g-item{display:block;width:100%;margin:0 0 16px;padding:0;border:0;background:var(--umber);cursor:zoom-in;break-inside:avoid;overflow:hidden}
.g-item img{width:100%;transition:transform 1s var(--ease)}
.g-item:hover img{transform:scale(1.03)}
.next{margin-top:clamp(80px,10vw,140px);display:grid;gap:22px}
.next a:first-child{display:grid;gap:10px;padding-block:32px;border-top:1px solid var(--line-soft);text-decoration:none}
.next-title{font-family:var(--serif);font-size:clamp(28px,4vw,52px);line-height:1.1}
.next a:first-child:hover .next-title{color:var(--gold)}
.back{color:var(--muted);font-size:12px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.back:hover{color:var(--gold)}

/* About */
.about-head{overflow-x:clip;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-top:clamp(48px,7vw,110px)}
@media (max-width:860px){.about-head{grid-template-columns:1fr}.about-portrait .seal.small{right:-2%}}
.about-copy{display:grid;gap:26px}
.h1-about{font-family:var(--serif);font-size:clamp(34px,4.6vw,66px);line-height:1.04;letter-spacing:-.01em}
.about-portrait{position:relative;margin:0;width:min(100%,380px);aspect-ratio:1/1.55;justify-self:center}
.about-portrait .paper{inset:-5%;border-radius:999px}
.about-portrait .pill{inset:0}
.about-portrait .tape{left:50%;top:-4%;translate:-50% 0;rotate:-7deg}
.about-portrait .seal.small{left:auto;right:-14%;top:auto;bottom:6%;transform:none}
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-soft)}
@media (max-width:860px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.services{grid-template-columns:1fr}}
.services li{display:grid;gap:10px;align-content:start;padding:28px 24px 32px 0;border-bottom:1px solid var(--line-soft)}
.services h3{font-size:14px;letter-spacing:.26em;text-transform:uppercase}
.services p{color:var(--muted);font-size:15px;max-width:34ch}
.from{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.from span{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.from strong{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,54px);color:var(--gold);line-height:1}
.from em{flex-basis:100%;font-style:normal;color:var(--muted);font-size:15px;max-width:60ch}
.from.inline{margin-top:clamp(40px,5vw,64px)}
.gear-band .inner{padding-block:clamp(88px,11vw,160px)}
.gear{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px;position:relative}
.gear-item{display:grid;gap:12px;align-content:start;padding-top:18px;border-top:1px solid var(--line)}
.gear-item ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);line-height:1.25}

/* Inquiry */
.inquire{background:var(--deep);border-top:1px solid var(--line);padding-block:clamp(88px,11vw,160px);position:relative;overflow:hidden;scroll-margin-top:70px}
.inquire-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
@media (max-width:900px){.inquire-grid{grid-template-columns:1fr}}
.inquire-intro{display:grid;gap:22px;align-content:start}
.orbit{position:relative;width:clamp(130px,14vw,180px);aspect-ratio:1;color:var(--muted)}
.orbit-sun{position:absolute;inset:24%;width:52%;animation:spin 70s linear infinite reverse}
.call-link{color:var(--muted);font-size:14.5px}
.call-link a{color:var(--gold)}
.inquiry-form{display:grid;gap:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.inquiry-form label{display:grid;gap:8px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);min-width:0}
.inquiry-form input:not([type=checkbox]),.inquiry-form select,.inquiry-form textarea{font:400 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--bone);background:transparent;border:0;border-bottom:1px solid rgba(244,238,228,.25);padding:10px 0;border-radius:0;width:100%;transition:border-color .3s}
.inquiry-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.inquiry-form select option{background:var(--night)}
.inquiry-form textarea{resize:vertical;min-height:120px}
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.inquiry-form ::placeholder{color:rgba(168,150,138,.6)}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips legend{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;padding:0}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:10px 14px;border:1px solid rgba(244,238,228,.22);font-size:12.5px;letter-spacing:.06em;text-transform:none;color:var(--bone);transition:background .25s,color .25s,border-color .25s}
.chip input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--night)}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.f-submit{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8px}
.f-status{font-size:14px;color:var(--muted)}
.f-status.ok{color:var(--gold)}
.f-status.err{color:#E58C7A}

/* Footer */
.site-footer{border-top:1px solid var(--line-soft)}
.foot{display:grid;grid-template-columns:auto 1fr;gap:24px 40px;align-items:center;padding-block:44px calc(44px + env(safe-area-inset-bottom,0px))}
.foot img{height:44px;width:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:flex-end}
.foot-nav a{text-decoration:none;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.foot-nav a:hover{color:var(--gold)}
.foot-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:12px;letter-spacing:.14em;color:var(--muted);padding-top:22px;border-top:1px solid var(--line-soft)}
.foot-meta a{color:var(--muted);overflow-wrap:anywhere}
@media (max-width:640px){.foot{grid-template-columns:1fr}.foot-nav{justify-content:flex-start}}

/* Lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.lightbox::backdrop{background:rgba(8,3,1,.95)}
.lb-body{width:100%;height:100%;display:grid;place-items:center;padding:64px 16px 16px}
.lb-body img{max-width:100%;max-height:calc(100vh - 90px);width:auto;height:auto;object-fit:contain}
.lb-body iframe{width:min(100%,1200px);aspect-ratio:16/9;border:0}
.lb-close{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:var(--raise);color:var(--bone);border:1px solid var(--line);padding:9px 15px;font:400 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}

/* Reveal: content is visible without JS; the animation only plays as sections arrive */
.rv.in{animation:rise 1.1s var(--ease) both}
@keyframes rise{from{transform:translateY(34px);opacity:.3}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .piece{transform:none}
}

.pv-note{background:var(--gold);color:var(--night);font-size:12px;letter-spacing:.06em;text-align:center;padding:8px 16px}

/* Project page photo: centered crop, no drift */
.project-screen .kb.still{object-position:50% 50%;transform-origin:50% 50%;animation:none;transform:none}

/* Category page header: centered crop, no zoom, taller frame so more of the photo shows */
.screen.short{aspect-ratio:2.39/1}
.screen.short .kb{object-position:50% 50%;transform-origin:50% 50%;animation:none;transform:none}
@media (max-width:760px){.screen.short{aspect-ratio:4/3}}

/* True color: show photos exactly as edited, no sepia/dimming tint, no grain over them */
body::after{display:none}
.screen .kb,.screen .kb.still,.cat .img img,.case-media img,.study-media .cut img,.reel-play img,.fr img{filter:none}
.film-play img{opacity:1}

/* Smoother motion: soft page-to-page fade, sections glide in once, photos fade in as they load */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.rv.in{animation:none}
.rv.wait{opacity:0;transform:translateY(22px)}
.rv.wait.in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.22,.61,.36,1) var(--rd,0s),transform 1.3s cubic-bezier(.22,.61,.36,1) var(--rd,0s)}
img.fade{opacity:0}
img.fade.loaded{opacity:1;transition:opacity .8s cubic-bezier(.22,.61,.36,1)}
.screen{animation:open 1.9s cubic-bezier(.22,.61,.36,1) both}
.title span,.p-title{animation-timing-function:cubic-bezier(.22,.61,.36,1)}
@keyframes trackin{from{opacity:0;transform:translateY(.16em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}