/* ---- fonts (self-hosted, latin + cyrillic subsets) ---- */
@font-face{font-family:'Unbounded';src:url(/fonts/unbounded-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';src:url(/fonts/unbounded-cyr-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';src:url(/fonts/unbounded-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';src:url(/fonts/unbounded-cyr-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';src:url(/fonts/unbounded-800.woff2) format('woff2');font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';src:url(/fonts/unbounded-cyr-800.woff2) format('woff2');font-weight:800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';src:url(/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url(/fonts/inter-cyr-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';src:url(/fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url(/fonts/inter-cyr-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JBMono';src:url(/fonts/jbmono-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JBMono';src:url(/fonts/jbmono-cyr-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JBMono';src:url(/fonts/jbmono-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JBMono';src:url(/fonts/jbmono-cyr-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --noir:#0E0D0B;--ash:#16140F;--panel:#1C1A14;--bone:#ECE6D8;
  --muted:#8E887A;--amber:#E9A23B;--line:rgba(236,230,216,.13);--max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noir);color:var(--bone);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.tc{font-family:'JBMono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber)}
.muted{color:var(--muted)}

/* ---- header ---- */
.head{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s,border-color .3s}
.head.solid{background:rgba(14,13,11,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Unbounded';font-weight:800;
  font-size:17px;letter-spacing:.01em}
.brand .mk{width:16px;height:16px;border:2px solid var(--amber);border-radius:3px;
  position:relative}
.brand .mk::after{content:"";position:absolute;inset:3px;background:var(--amber);border-radius:1px}
.menu{display:flex;gap:30px;font-size:14px;font-family:'JBMono';letter-spacing:.06em;color:var(--muted)}
.menu a{position:relative;padding:4px 0}
.menu a:hover,.menu a[aria-current]{color:var(--bone)}
.menu a[aria-current]::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--amber)}

/* ---- cinematic photo grade ---- */
.shot{position:relative;overflow:hidden;background:var(--ash)}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.07) brightness(.9)}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(233,162,59,.06),rgba(14,13,11,.0) 30%,rgba(14,13,11,.62));
  mix-blend-mode:normal;pointer-events:none}

/* ---- hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end}
.hero .shot{position:absolute;inset:0}
.hero .shot img{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.14) translateY(-2%)}}
.hero-inner{position:relative;z-index:2;padding-bottom:64px}
.hero h1{font-family:'Unbounded';font-weight:800;font-size:clamp(36px,6.4vw,90px);line-height:.98;
  letter-spacing:-.025em;margin:14px 0 22px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{max-width:540px;font-size:18px;color:#cfc9bb}
.bars{position:absolute;left:0;right:0;z-index:2;height:46px;background:var(--noir)}
.bars.top{top:0}.bars.bot{bottom:0}
.scroll-hint{position:absolute;right:28px;bottom:60px;z-index:2;writing-mode:vertical-rl;
  font-family:'JBMono';font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}

/* ---- filmstrip divider ---- */
.strip{height:26px;background:
  repeating-linear-gradient(90deg,transparent 0 14px,var(--noir) 14px 22px),
  linear-gradient(var(--panel),var(--panel));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background-blend-mode:normal;position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--noir) 0 9px,transparent 9px 26px)}
.strip::before{top:4px}.strip::after{bottom:4px}

/* ---- sections ---- */
section{padding:108px 0}
.lab{display:flex;align-items:baseline;gap:18px;margin-bottom:40px;border-bottom:1px solid var(--line);padding-bottom:18px}
.lab h2{font-family:'Unbounded';font-weight:700;font-size:clamp(23px,3.4vw,40px);letter-spacing:-.02em;margin:0}
.lab .tc{margin-left:auto}
.lead{font-size:clamp(19px,2.4vw,27px);line-height:1.4;max-width:760px;font-weight:500;letter-spacing:-.01em}

/* services as a typed list */
.svc{border-top:1px solid var(--line)}
.svc .row{display:grid;grid-template-columns:64px 1fr 1.1fr;gap:28px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .3s,color .3s}
.svc .row:hover{padding-left:14px}
.svc .n{font-family:'JBMono';color:var(--amber);font-size:13px;padding-top:6px}
.svc .row h3{font-family:'Unbounded';font-weight:700;font-size:clamp(19px,2.4vw,27px);margin:0;letter-spacing:-.01em}
.svc .row p{margin:0;color:var(--muted);font-size:16px}

/* work reel */
.reel{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.frame{position:relative;border-radius:4px;overflow:hidden;grid-column:span 6;aspect-ratio:16/9}
.frame.wide{grid-column:span 12;aspect-ratio:2.4/1}
.frame .shot{position:absolute;inset:0}
.frame .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.frame .meta .t{font-family:'Unbounded';font-weight:700;font-size:clamp(16px,1.9vw,22px)}
.frame .meta .f{font-family:'JBMono';font-size:11px;color:var(--amber);letter-spacing:.12em;white-space:nowrap}
.frame img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.06)}

/* spec sheet */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;font-family:'JBMono';font-size:14px}
.spec .r{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.spec .r span:first-child{color:var(--muted)}
.spec .r span:last-child{text-align:right}

/* crew */
.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mem{border:1px solid var(--line);border-radius:6px;padding:26px;background:var(--ash)}
.mem .mono{width:54px;height:54px;border-radius:6px;display:grid;place-items:center;
  font-family:'Unbounded';font-weight:800;font-size:20px;color:var(--noir);background:var(--amber);margin-bottom:18px}
.mem b{font-family:'Unbounded';font-weight:700;font-size:18px;display:block}
.mem span{color:var(--muted);font-size:14px}

/* contact */
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cc{border:1px solid var(--line);border-radius:6px;padding:30px;background:var(--ash)}
.cc h3{font-family:'Unbounded';font-weight:700;font-size:20px;margin:0 0 10px}
.cc p{margin:0;color:#cfc9bb}
.cc a{border-bottom:1px solid var(--amber)}
.big-mail{font-family:'Unbounded';font-weight:800;font-size:clamp(20px,3.8vw,46px);letter-spacing:-.02em;
  display:inline-block;margin:8px 0 0;line-height:1}
.big-mail:hover{color:var(--amber)}

/* page intro */
.intro{padding:168px 0 40px}
.intro h1{font-family:'Unbounded';font-weight:800;font-size:clamp(32px,5.4vw,72px);letter-spacing:-.025em;
  line-height:.96;margin:16px 0 0}

/* footer */
.foot{border-top:1px solid var(--line);padding:54px 0 64px;color:var(--muted);font-size:14px}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-end}
.foot .big{font-family:'Unbounded';font-weight:800;font-size:clamp(30px,7vw,92px);color:var(--bone);
  letter-spacing:-.03em;line-height:.8;opacity:.96}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;
  font-family:'JBMono';letter-spacing:.04em}

/* reveal */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}

@media(max-width:820px){
  .menu{display:none}
  .svc .row{grid-template-columns:40px 1fr;gap:14px}
  .svc .row p{grid-column:2}
  .frame,.frame.wide{grid-column:span 12;aspect-ratio:16/9}
  .spec,.crew,.cgrid{grid-template-columns:1fr}
  section{padding:74px 0}
}
@media(prefers-reduced-motion:reduce){
  .hero .shot img{animation:none}
  html.js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}