:root{
  --ink:#0A0A0A;
  --red:#FF1E2E;
  --red-deep:#B4000F;
  --grey:#9A9A9A;
  --charcoal:#1C1C1C;
  --paper:#FFFFFF;

  --display:'Anton', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --header-h: 84px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--ink); color:var(--paper); font-family:var(--body); overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
img,video,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:5; opacity:0.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.sprockets{ position:fixed; top:0; bottom:0; width:26px; z-index:6; pointer-events:none;
  background-image: repeating-linear-gradient(var(--ink) 0 18px, transparent 18px 34px);
  display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:8px; }
.sprockets.left{ left:0; } .sprockets.right{ right:0; }
.sprockets span{ width:10px; height:10px; border-radius:2px; background:var(--ink); border:2px solid var(--grey); flex-shrink:0; margin-top:8px; }

/* ---------- Landing intro ---------- */
#introOverlay{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#introOverlay .flash{ position:absolute; inset:0; background:var(--red); opacity:0; }
#introOverlay .word{
  font-family:var(--display); color:var(--paper); font-size:clamp(2.5rem,10vw,7rem);
  letter-spacing:0.02em; opacity:0; position:absolute; text-align:center; padding:0 1rem;
}
#introOverlay.exit{ animation: introExit 0.6s ease forwards; }
@keyframes introExit{ to{ opacity:0; visibility:hidden; } }
#skipIntro{
  position:absolute; bottom:2rem; right:2rem; z-index:210;
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  background:transparent; border:1px solid var(--grey); color:var(--paper);
  padding:0.5rem 1rem; cursor:pointer;
}
#skipIntro:focus-visible{ outline:2px solid var(--red); }

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; padding:0 clamp(2rem,5vw,3.5rem);
  background:transparent; border-bottom:1px solid transparent;
  transition: background 0.35s ease, height 0.35s ease, border-color 0.35s ease;
}
header.scrolled{ height:60px; background:rgba(10,10,10,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--red); }
.nav-wrap{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:0.04em; color:var(--paper); }
.logo span{ color:var(--red); }
nav ul{ list-style:none; display:flex; gap:clamp(1.25rem,2vw,2.5rem); font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; }
nav a{ text-decoration:none; position:relative; }
nav a::after{ content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--red); transition:width 0.25s ease; }
nav a:hover::after{ width:100%; }
nav a:focus-visible, .btn:focus-visible, .hamburger:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.hamburger{ display:none; background:none; border:none; cursor:pointer; width:34px; height:26px; position:relative; }
.hamburger span{ position:absolute; left:0; right:0; height:2px; background:var(--paper); transition:transform 0.25s ease, opacity 0.2s ease; }
.hamburger span:nth-child(1){ top:0; } .hamburger span:nth-child(2){ top:12px; } .hamburger span:nth-child(3){ top:24px; }
.hamburger.open span:nth-child(1){ transform:translateY(12px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-12px) rotate(-45deg); }

.mobile-nav{ position:fixed; inset:60px 0 0 0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.75rem;
  transform:translateY(-110%); transition:transform 0.35s ease; }
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--display); font-size:1.7rem; text-decoration:none; color:var(--paper); }

.btn{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--mono); font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; font-size:0.85rem; padding:0.95rem 1.9rem;
  background:var(--red); color:var(--ink); border:2px solid var(--ink); border-radius:999px; text-decoration:none; cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover{ transform:translate(-2px,-2px) scale(1.05); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.btn.outline{ background:var(--paper); color:var(--ink); border-color:var(--red); }
.btn.outline:hover{ background:var(--red); color:var(--ink); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ---------- Hero / scroll-scrub ---------- */
.hero-track{ height:280vh; position:relative; }
.hero-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ink); }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55; }
.hero-video-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.3;
  background:linear-gradient(160deg,#1C1C1C,#0A0A0A); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:var(--grey); font-size:0.8rem; text-align:center; padding:1rem; }
.hero-copy{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:2; padding:0 1.5rem; }
.hero-eyebrow{ font-family:var(--mono); letter-spacing:0.3em; text-transform:uppercase; font-size:0.75rem; color:var(--red); }
.hero-title{
  font-family: var(--display);
  font-size: clamp(2.2rem, 7vw, 5.2rem);
  line-height:0.95;
  color: var(--paper);
  margin-top:0.75rem;
}
.hero-sub{ max-width:36ch; margin:1.25rem auto 0; color:var(--grey); font-size:1.02rem; }
.hero-cta{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.timecode{
  position:absolute; bottom:1.75rem; left:0; right:0; display:flex; justify-content:center; z-index:2;
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em; color:var(--grey);
}

/* ---------- Sections ---------- */
section{ position:relative; padding:clamp(4rem,8vw,7rem) clamp(1.5rem,6vw,4.5rem); }
.section-inner{ max-width:1200px; margin:0 auto; }
.eyebrow{ font-family:var(--mono); text-transform:uppercase; letter-spacing:0.25em; font-size:0.75rem; color:var(--red); }
h2{ font-family:var(--display); font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.05; margin-top:0.6rem; }
.lead{ font-size:1.02rem; color:var(--grey); max-width:58ch; margin-top:1rem; }

.panel-charcoal{ background:var(--charcoal); }

/* ---------- Portfolio grid (masonry-feel, friendly not boxy) ---------- */
.reel-grid{ margin-top:3rem; column-count:3; column-gap:1.5rem; }
.reel-card{ position:relative; break-inside:avoid; margin-bottom:1.5rem; border-radius:22px; overflow:hidden;
  background:var(--charcoal); box-shadow:0 6px 24px rgba(0,0,0,0.35); cursor:pointer;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease; }
.reel-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 14px 32px rgba(0,0,0,0.5); }
.reel-card video{ width:100%; display:block; object-fit:cover; }
.reel-card .play-badge{
  position:absolute; top:0.9rem; right:0.9rem; width:38px; height:38px; border-radius:999px;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.8); transition:opacity 0.2s ease, transform 0.2s ease;
}
.reel-card:hover .play-badge{ opacity:1; transform:scale(1); }
.reel-card .play-badge svg{ width:14px; height:14px; margin-left:2px; }
.reel-meta{ padding:1rem 1.1rem 1.25rem; }
.reel-num{ font-family:var(--mono); font-size:0.72rem; color:var(--red); letter-spacing:0.08em; }
.reel-title{ font-family:var(--display); font-size:1.15rem; margin-top:0.35rem; }
.reel-tag{ font-family:var(--mono); font-size:0.72rem; color:var(--grey); margin-top:0.3rem; text-transform:uppercase; letter-spacing:0.05em; }
@media (max-width:900px){ .reel-grid{ column-count:2; } }
@media (max-width:600px){ .reel-grid{ column-count:1; } }

/* ---------- Process ---------- */
.process-list{ margin-top:2.5rem; display:flex; flex-direction:column; }
.process-row{ display:flex; gap:1.5rem; padding:1.3rem 0; border-top:1px solid var(--charcoal); align-items:baseline; }
.process-row:last-child{ border-bottom:1px solid var(--charcoal); }
.process-tc{ font-family:var(--mono); font-size:0.85rem; color:var(--red); min-width:110px; }
.process-title{ font-family:var(--display); font-size:1.15rem; }
.process-desc{ color:var(--grey); font-size:0.95rem; margin-top:0.25rem; max-width:60ch; }

/* ---------- Testimonials ---------- */
.quote-grid{ margin-top:2.5rem; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.quote-card{ border-left:2px solid var(--red); padding:0 0 0 1.2rem; }
.quote-card p{ font-size:1.02rem; }
.quote-card strong{ display:block; margin-top:0.9rem; font-family:var(--mono); font-size:0.75rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.05em; }

/* ---------- Final CTA ---------- */
.cta-final{ text-align:center; border:2px solid var(--red); border-radius:28px; padding:clamp(3rem,7vw,5rem) 1.5rem; }
.cta-final .btn{ margin-top:1.75rem; }

footer{ padding:2.25rem clamp(1.5rem,6vw,4.5rem); font-family:var(--mono); font-size:0.75rem; letter-spacing:0.03em;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; border-top:1px solid var(--charcoal); color:var(--grey); }

@media (max-width:760px){
  nav{ display:none; }
  .hamburger{ display:block; }
  .sprockets{ display:none; }
}