:root{
  --bg:#0d0d0d;
  --bg-2:#141414;
  --line:rgba(255,255,255,0.08);
  --text:#ededed;
  --text-dim:#9a9a9a;
  --gold:#cfa600;
  --orange:#ea4200;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Overpass Mono',ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:10px;vertical-align:1px}
.dot-inline{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);vertical-align:1px}

/* ── Topbar ─────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(13,13,13,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar__inner{max-width:var(--max);margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between}
.topbar__logo{font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;letter-spacing:0.16em;color:var(--text)}
.topbar__nav{display:flex;gap:48px}
.topbar__nav a{font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;letter-spacing:0.16em;color:var(--gold);transition:color .15s}
.topbar__nav a:hover{color:var(--text)}

/* ── Hero ───────────────────────────────────────────── */
.hero{position:relative;padding:120px 32px 80px;max-width:var(--max);margin:0 auto}
.hero__inner{position:relative;text-align:center;width:100%}
.hero__poster{margin:0 0 48px;overflow:hidden;background:#000}
.hero__poster img{width:100%;height:auto;display:block;aspect-ratio:16/5;object-fit:cover}
.hero__logo{font-family:'Montserrat',sans-serif;font-weight:600;font-size:clamp(36px,9vw,125px);letter-spacing:0;color:#e8e8e8;margin:0 0 18px;line-height:1.05}
.hero__tagline{font-family:'Montserrat',sans-serif;font-weight:500;font-size:clamp(12px,1.2vw,14px);letter-spacing:0.16em;color:var(--text);margin:0 0 56px}
.hero__meta{display:grid;grid-template-columns:1fr;gap:32px;max-width:720px;margin:0 auto}
.hero__scale{font-family:'Saira Condensed','Barlow Condensed','Roboto Condensed',sans-serif;font-weight:300;color:var(--gold);font-size:11px;letter-spacing:0.22em;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:6px 0;text-transform:uppercase}
.hero__scale .inf{font-size:15px;font-weight:300;vertical-align:-1px}
.hero__scale .bar{color:var(--gold);font-weight:500;letter-spacing:-0.05em;font-size:13px}
.hero__intro{font-family:'Overpass Mono',monospace;font-size:14px;line-height:1.6;color:var(--text);margin:0}

/* ── Block ──────────────────────────────────────────── */
.block{position:relative;padding:120px 32px;max-width:var(--max);margin:0 auto}
.block__title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:clamp(56px,15vw,214px);letter-spacing:0.012em;line-height:1;color:#fff;margin:0 0 40px;text-align:center}
.subhead{font-family:'Montserrat',sans-serif;font-weight:600;font-size:19px;letter-spacing:0.32em;color:var(--text);text-align:center;margin:0 0 56px}

/* ── Showreel video ─────────────────────────────────── */
.video{position:relative;width:100%;aspect-ratio:16/9;background:#000;box-shadow:0 8px 40px rgba(0,0,0,0.6)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Works grid ─────────────────────────────────────── */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px}
.work{margin:0}
.work__img{aspect-ratio:16/9;overflow:hidden;background:#1a1a1a}
.work__img img{width:100%;height:100%;object-fit:cover}
.work figcaption{display:flex;justify-content:space-between;gap:16px;padding:12px 2px 0;font-family:'Overpass Mono',monospace;font-size:13px;color:var(--gold)}
.work figcaption .dur{color:var(--gold);opacity:0.8;flex-shrink:0}

/* ── Contact ────────────────────────────────────────── */
.block--contact{text-align:center;padding-bottom:160px}
.contact{display:flex;flex-direction:column;gap:12px;align-items:center;font-family:'Overpass Mono',monospace;font-size:16px}
.contact__phone,.contact__mail{color:var(--text);transition:color .15s}
.contact__mail .g{color:var(--gold)}
.contact__phone:hover,.contact__mail:hover{color:var(--gold)}

/* ── Footer ─────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);background:#080808}
.footer__inner{max-width:var(--max);margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:32px;align-items:center;font-family:'Overpass Mono',monospace;font-size:12px;color:var(--text-dim)}
.footer__brand{font-family:'Montserrat',sans-serif;font-weight:500;font-size:13px;letter-spacing:0.16em;color:var(--text)}
.footer__legal{text-align:center;line-height:1.6}
.footer__copy{text-align:right}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:900px){
  .topbar__inner{padding:14px 20px}
  .topbar__nav{gap:24px}
  .topbar__logo{font-size:12px}
  .topbar__nav a{font-size:12px}
  .hero{padding:100px 20px 60px}
  .block{padding:80px 20px}
  .works{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .footer__inner{grid-template-columns:1fr;text-align:center;gap:16px}
  .footer__legal,.footer__copy{text-align:center}
}
@media (max-width:560px){
  .topbar__inner{padding:14px 16px}
  .topbar__nav{gap:18px}
  .topbar__logo{display:none}
  .hero{padding:90px 16px 60px}
  .hero__logo{font-size:34px;letter-spacing:0}
  .hero__tagline{font-size:10px;letter-spacing:0.08em;margin-bottom:32px;line-height:1.5}
  .hero__scale{font-size:12px}
  .hero__intro{font-size:13px}
  .block{padding:64px 16px}
  .block__title{font-size:64px;margin-bottom:24px}
  .subhead{font-size:15px;letter-spacing:0.24em;margin-bottom:32px}
  .works{grid-template-columns:1fr;gap:32px}
}