@font-face{font-family:"CM Display";src:url(../fonts/display-bold.woff) format("woff");font-weight:700 900;font-display:swap}
@font-face{font-family:"CM Body";src:url(../fonts/body-400.woff) format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"CM Body";src:url(../fonts/body-600.woff) format("woff");font-weight:600 700;font-display:swap}
@font-face{font-family:"CM Mono";src:url(../fonts/mono-400.woff) format("woff");font-weight:400 600;font-display:swap}

/* Layout: one dark "monitor" world — full-bleed footage bands, content on a 1200px grid, timecode/REC chrome as the recurring motif */
:root{
  --ink:#0b0a09;        /* stage black, warm bias */
  --panel:#161412;      /* raised surface */
  --line:#2a2622;       /* hairline */
  --fg:#f3eee7;         /* text */
  --mute:#a39a8f;       /* secondary text */
  --tally:#ffb23f;      /* tungsten amber accent */
  --rec:#ff4b3a;        /* REC dot only */
  --display:"CM Display","Arial Narrow",Impact,sans-serif;
  --body:"CM Body",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"CM Mono",ui-monospace,Menlo,monospace;
  --wrap:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0;text-wrap:balance}
h2{font-size:clamp(44px,7vw,88px)}
h3{font-size:30px;font-weight:800}
p{margin:0}
:focus-visible{outline:2px solid var(--tally);outline-offset:3px}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.brand{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}
.brand span{color:var(--tally)}
.nav nav{display:flex;gap:24px;margin-left:auto}
.nav nav a{text-decoration:none;color:var(--mute);font-size:15px;font-weight:500}
.nav nav a:hover{color:var(--fg)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;text-decoration:none;border-radius:999px;padding:12px 22px;border:1px solid var(--fg);color:var(--fg);background:transparent;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--ink)}
.btn.solid{background:var(--tally);border-color:var(--tally);color:var(--ink)}
.btn.solid:hover{background:var(--fg);border-color:var(--fg)}
@media (max-width:760px){.nav nav{display:none}.nav .btn{margin-left:auto;padding:9px 14px;font-size:14px}}
@media (max-width:380px){.brand{font-size:21px}}

/* hero */
.hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,.35) 0%,rgba(11,10,9,.1) 40%,rgba(11,10,9,.92) 100%)}
.hud{position:absolute;inset:18px max(20px,env(safe-area-inset-right,0px)) auto max(20px,env(safe-area-inset-left,0px));z-index:2;display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--fg)}
.rec{display:flex;align-items:center;gap:8px}
.rec i{width:10px;height:10px;border-radius:50%;background:var(--rec);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.frame{position:absolute;inset:56px max(20px,env(safe-area-inset-right,0px)) 22px max(20px,env(safe-area-inset-left,0px));z-index:1;pointer-events:none;
  background:
   linear-gradient(var(--fg),var(--fg)) 0 0/22px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 0 0/1.5px 22px no-repeat,
   linear-gradient(var(--fg),var(--fg)) 100% 0/22px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 100% 0/1.5px 22px no-repeat,
   linear-gradient(var(--fg),var(--fg)) 0 100%/22px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 0 100%/1.5px 22px no-repeat,
   linear-gradient(var(--fg),var(--fg)) 100% 100%/22px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 100% 100%/1.5px 22px no-repeat;opacity:.55}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:120px 64px;display:grid;gap:26px}
.hero h1{font-size:clamp(50px,8.4vw,118px);font-weight:800;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--tally)}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);max-width:52ch;color:var(--fg);opacity:.9}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* stages strip */
.stages{border-bottom:1px solid var(--line);overflow:hidden}
.stages .row{display:flex;gap:44px;padding-block:22px;white-space:nowrap;animation:roll 38s linear infinite;width:max-content}
.stages span{font-family:var(--display);font-weight:800;font-size:28px;text-transform:uppercase;color:var(--mute)}
.stages span b{color:var(--tally);font-weight:800;margin-right:44px}
@keyframes roll{to{transform:translateX(-50%)}}

section{padding-block:110px}
.head{display:grid;grid-template-columns:1fr minmax(0,420px);gap:24px 60px;align-items:end;margin-bottom:56px}
.head p{color:var(--mute)}
@media (max-width:860px){.head{grid-template-columns:1fr}section{padding-block:76px}}

/* work grid */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.clip{position:relative;background:var(--panel);border-radius:6px;overflow:hidden;min-width:0}
.clip video,.clip img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.85);transition:filter .45s,transform .6s}
.clip.on video,.clip.on img{filter:none;transform:scale(1.03)}
.clip{cursor:pointer}
.clip.vid .tag::before{content:"❚❚ ";}
.clip.vid.on .tag::before{content:"● ";color:var(--rec)}
.clip .meta{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(11,10,9,.88));display:flex;justify-content:space-between;align-items:end;gap:12px}
.clip h3{font-size:26px}
.clip .tc{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--fg);opacity:.75;white-space:nowrap}
.clip .tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;background:rgba(11,10,9,.7);border:1px solid rgba(243,238,231,.25);padding:4px 8px;border-radius:3px}
.work{grid-auto-flow:dense;grid-auto-rows:clamp(300px,38vw,500px)}
.w-l{grid-column:span 8}
.w-p{grid-column:span 4}
@media (max-width:860px){.work{grid-auto-rows:auto}.w-l{grid-column:span 12;aspect-ratio:16/9}.w-p{grid-column:span 6;aspect-ratio:3/4}}
@media (max-width:520px){.w-p{grid-column:span 12;aspect-ratio:4/5}}

/* services */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.svc article{padding:34px 34px 38px 0;border-bottom:1px solid var(--line);display:grid;gap:14px;align-content:start}
.svc article:nth-child(odd){border-right:1px solid var(--line)}
.svc article:nth-child(even){padding-left:34px;padding-right:0}
.svc .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.svc .price{font-family:var(--mono);font-size:13px;color:var(--tally);white-space:nowrap}
.svc p{color:var(--mute);max-width:46ch}
.svc ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;border-radius:3px;color:var(--fg)}
@media (max-width:760px){.svc{grid-template-columns:1fr}.svc article,.svc article:nth-child(even){padding:28px 0;border-right:0}}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{list-style:none;border-top:2px solid var(--fg);padding-top:16px;display:grid;gap:8px;align-content:start}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:12px;color:var(--tally);letter-spacing:.08em}
.steps h3{font-size:26px}
.steps p{color:var(--mute);font-size:15px}
.steps{padding:0;margin:0}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px;align-items:center}
.about figure{margin:0;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:2/3;max-height:640px}
.about figure img{width:100%;height:100%;object-fit:cover}
.about figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.about .txt{display:grid;gap:22px;min-width:0}
.about .txt p{color:var(--mute);max-width:58ch}
.about .txt p strong{color:var(--fg);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:8px}
.facts div{padding:18px 16px 0 0}
.facts b{display:block;font-family:var(--display);font-weight:800;font-size:44px;line-height:1}
.facts span{font-size:14px;color:var(--mute)}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:36px}.about figure{aspect-ratio:4/5;max-height:none}}

/* contact */
.contact{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px}
.cgrid .side{display:grid;gap:22px;align-content:start}
.cgrid .side p{color:var(--mute);max-width:40ch}
.direct{display:grid;gap:10px;margin-top:6px}
.direct a,.direct div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-block:12px;text-decoration:none}
.direct span{color:var(--mute)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-size:13px;color:var(--mute);min-width:0}
input,select,textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--ink);border:1px solid var(--line);border-radius:6px;padding:13px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tally)}
textarea{min-height:130px;resize:vertical}
.full{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{display:inline-flex;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--fg);font-size:14px}
.chips input:checked+label{background:var(--tally);border-color:var(--tally);color:var(--ink)}
.chips input:focus-visible+label{outline:2px solid var(--tally);outline-offset:2px}
.sent{grid-column:1/-1;font-family:var(--mono);font-size:13px;color:var(--tally)}
@media (max-width:860px){.cgrid{grid-template-columns:1fr;gap:40px}}
@media (max-width:520px){form{grid-template-columns:1fr}}

footer{padding-block:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;color:var(--mute);font-size:14px}
footer a{text-decoration:none}
footer .draft{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;border:1px dashed var(--mute);padding:4px 8px;border-radius:3px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.legal{padding-block:80px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(48px,8vw,88px);margin-bottom:36px}
.legal p{color:var(--mute);margin-bottom:18px}
.notice{font-family:var(--mono);font-size:13px;padding:14px 16px;border:1px solid var(--tally);color:var(--tally);border-radius:6px;grid-column:1/-1}
.notice.err{border-color:var(--rec);color:var(--rec)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}