/* ===== BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0a0a;
  --fg: #f5f5f0;
  --dim: #6e6e66;
  --line: #2a2a26;
  --accent: #c8ff00;
  --warn: #ff3b1f;
  --paper: #ebe7da;
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --font-stencil: "Russo One", "Impact", sans-serif;
}
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  /* subtle noise */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
body::after {
  /* scanlines */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 201;
  opacity: 0.08;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,.5) 3px, rgba(0,0,0,.5) 3px);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

/* ===== UTILITIES ===== */
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }
.stencil { font-family: var(--font-stencil); }
.up { text-transform: uppercase; letter-spacing: 0.02em; }
.tiny { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.warn { color: var(--warn); }
.hr { height: 1px; background: var(--line); width: 100%; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.dot.live { animation: blink 1.2s steps(2) infinite; box-shadow: 0 0 12px var(--accent); }
@keyframes blink { 50% { opacity: 0.2; } }

/* ===== TOPBAR ===== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  height: 44px;
}
.topbar .brand { padding: 0 16px; display:flex; align-items:center; gap:10px; border-right: 1px solid var(--line); height: 100%; }
.topbar .brand-mark { width: 22px; height: 22px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 60%, 80% 100%, 0 100%); }
.topbar nav { display: flex; gap: 0; height: 100%; }
.topbar nav a { padding: 0 14px; display: flex; align-items: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; border-right: 1px solid var(--line); transition: background .15s, color .15s; }
.topbar nav a:hover { background: var(--accent); color: var(--bg); }
.topbar .meta { display:flex; align-items:center; gap:18px; padding: 0 16px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.topbar .meta .pill { border: 1px solid var(--line); padding: 4px 8px; display:inline-flex; gap: 6px; align-items: center; }

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 60px 16px 32px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.hero-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 17vw, 280px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 16px 0 8px;
}
.hero-title .row { display: block; position: relative; }
.hero-title .row .glitch { position: absolute; inset: 0; pointer-events: none; }
.hero-title .row .glitch.r { color: var(--warn); mix-blend-mode: screen; transform: translate(3px, 0); clip-path: polygon(0 18%, 100% 18%, 100% 32%, 0 32%); opacity: 0; }
.hero-title .row .glitch.g { color: var(--accent); mix-blend-mode: screen; transform: translate(-3px, 0); clip-path: polygon(0 60%, 100% 60%, 100% 78%, 0 78%); opacity: 0; }
.hero-title:hover .glitch.r, .glitching .glitch.r { opacity: 1; animation: gjr 0.5s steps(6) infinite; }
.hero-title:hover .glitch.g, .glitching .glitch.g { opacity: 1; animation: gjg 0.6s steps(6) infinite; }
@keyframes gjr {
  0%{transform:translate(3px,0);clip-path:polygon(0 18%,100% 18%,100% 32%,0 32%);}
  50%{transform:translate(6px,-2px);clip-path:polygon(0 50%,100% 50%,100% 62%,0 62%);}
  100%{transform:translate(2px,1px);clip-path:polygon(0 70%,100% 70%,100% 88%,0 88%);}
}
@keyframes gjg {
  0%{transform:translate(-3px,0);clip-path:polygon(0 60%,100% 60%,100% 78%,0 78%);}
  50%{transform:translate(-6px,2px);clip-path:polygon(0 20%,100% 20%,100% 38%,0 38%);}
  100%{transform:translate(-1px,-1px);clip-path:polygon(0 5%,100% 5%,100% 18%,0 18%);}
}

.hero-tag {
  grid-column: 1 / span 7;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.hero-tag b { color: var(--accent); font-weight: 700; }
.hero-meta {
  grid-column: 9 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-meta .k { color: var(--dim); display: block; margin-bottom: 4px; }
.hero-meta .v { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 0.04em; }

.hero-cta {
  grid-column: 1 / -1;
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all .15s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn.primary:hover { background: var(--bg); color: var(--accent); }
.btn.warn { background: var(--warn); color: var(--fg); border-color: var(--warn); }
.btn .arrow { display: inline-block; transition: transform .15s; }
.btn:hover .arrow { transform: translateX(4px); }

/* Mascot */
.mascot {
  position: absolute;
  right: -40px;
  top: 28px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--accent);
  opacity: 0.85;
  white-space: pre;
  pointer-events: none;
  transform: rotate(-2deg);
  text-shadow: 0 0 8px rgba(200,255,0,0.4);
  z-index: 1;
}
.mascot.hidden { display: none; }

/* ===== TICKER ===== */
.ticker {
  background: var(--accent);
  color: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  padding: 14px 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.ticker .track { display: inline-block; animation: tick 32s linear infinite; }
.ticker .track > span { padding: 0 20px; }
.ticker .track > .star { display: inline-block; transform: translateY(-3px); }
.ticker.reverse .track { animation-direction: reverse; animation-duration: 48s; }
.ticker.alt { background: var(--bg); color: var(--accent); border-top: 1px solid var(--line); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== SECTION ===== */
.section {
  padding: 56px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: end;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.section-head .id { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.section-head .id .num { color: var(--dim); margin-right: 8px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.section-head .aside { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: right; }

/* ===== REEL ===== */
.reel {
  position: relative;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  transition: border-color .2s;
}
.reel:hover { border-color: var(--accent); }
.reel .poster { position: absolute; inset: 0; }
.reel .poster svg { width: 100%; height: 100%; display: block; }
.reel .crt-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%);
}
.reel .timecode {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: rgba(0,0,0,.6);
  padding: 6px 10px;
  border: 1px solid var(--accent);
}
.reel .rec {
  position: absolute; top: 14px; right: 14px;
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--warn);
  background: rgba(0,0,0,.6);
  padding: 6px 10px;
  border: 1px solid var(--warn);
}
.reel .rec .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: blink 1s steps(2) infinite; }
.reel .play-btn {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  transition: transform .2s;
  box-shadow: 0 0 0 12px rgba(200,255,0,.15);
}
.reel:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
.reel .play-btn::after { content: "▶"; position: absolute; font-size: 28px; opacity: 0; transition: opacity .2s; }
.reel:hover .play-btn::after { opacity: 1; }
.reel:hover .play-btn span { opacity: 0; }
.reel .corner-tl, .reel .corner-tr, .reel .corner-bl, .reel .corner-br {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--accent);
}
.reel .corner-tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.reel .corner-tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.reel .corner-bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.reel .corner-br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.reel .bottom-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.reel .bottom-strip .title { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; }

/* ===== WORKS ===== */
.works {
  border-top: 1px solid var(--line);
}
.work-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 120px 100px 120px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 18px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, padding .15s;
  position: relative;
}
.work-row:hover { background: var(--fg); color: var(--bg); padding-left: 24px; }
.work-row .idx { color: var(--dim); }
.work-row:hover .idx { color: var(--bg); }
.work-row .title { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; }
.work-row .client { color: var(--dim); }
.work-row:hover .client { color: var(--bg); }
.work-row .meta { text-align: right; color: var(--dim); }
.work-row:hover .meta { color: var(--bg); }
.work-row .go { text-align: right; color: var(--accent); }
.work-row:hover .go { color: var(--warn); }
.work-row .preview {
  position: absolute;
  pointer-events: none;
  width: 280px; height: 180px;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: translate(-50%, -110%) rotate(-3deg);
  transition: opacity .2s;
  z-index: 5;
  background: #111;
  overflow: hidden;
}
.work-row:hover .preview { opacity: 1; }
.work-row .preview svg { width: 100%; height: 100%; }

/* ===== SERVICES ===== */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-right: 0; border-bottom: 0;
}
.service {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 22px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  transition: background .2s, color .2s;
  overflow: hidden;
}
.service:hover { background: var(--accent); color: var(--bg); }
.service .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--dim); }
.service:hover .num { color: var(--bg); }
.service h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 16px 0 0;
}
.service p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 12px;
}
.service .price { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; margin-top: 14px; color: var(--accent); }
.service:hover .price { color: var(--bg); }
.service .deco {
  position: absolute;
  right: -20px; bottom: -20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 160px;
  line-height: 1;
  color: var(--line);
  pointer-events: none;
  user-select: none;
}
.service:hover .deco { color: rgba(0,0,0,0.1); }

/* ===== MANIFESTO ===== */
.manifesto {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.manifesto span.hl { color: var(--accent); }
.manifesto span.strike { text-decoration: line-through; color: var(--dim); }
.manifesto span.warn { color: var(--warn); }
.manifesto-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.manifesto-side {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.manifesto-side b { color: var(--accent); }

/* ===== CREW ===== */
.crew {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-right: 0; border-bottom: 0;
}
.crew-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.crew-card:hover { background: #161614; }
.crew-card .ph {
  width: 100%; aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(45deg, #181816 0, #181816 8px, #1f1f1c 8px, #1f1f1c 16px);
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.crew-card .ph .codename {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--font-stencil);
  font-size: 56px;
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(200,255,0,.4);
}
.crew-card .ph .badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg);
  padding: 4px 8px;
  border: 1px solid var(--line);
}
.crew-card .name { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase; }
.crew-card .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.crew-card .bio { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--fg); }

/* ===== CONTACT ===== */
.contact {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}
.contact-left h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.contact-left h2 .emph { color: var(--accent); }
.contact-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.contact-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  cursor: pointer;
  transition: padding .15s;
}
.contact-row:hover { padding-left: 12px; }
.contact-row .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.contact-row .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.contact-row:hover .v { color: var(--accent); }
.contact-row .copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

.contact-right {
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.brief input, .brief textarea, .brief select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 12px;
  font: inherit;
  letter-spacing: 0.06em;
}
.brief input:focus, .brief textarea:focus, .brief select:focus {
  outline: 0; border-color: var(--accent);
}
.brief textarea { resize: vertical; min-height: 88px; }
.brief label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 6px; margin-top: 4px; }
.brief .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brief .submit {
  margin-top: 8px;
  padding: 16px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .15s, color .15s;
}
.brief .submit:hover { background: var(--warn); color: var(--fg); }

/* ===== FOOTER ===== */
.footer {
  padding: 28px 16px 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer .big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 12vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
}

/* ===== RESPONSIVE-ISH ===== */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .crew { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
  .work-row { grid-template-columns: 40px 1fr 100px 80px; font-size: 10px; }
  .work-row .client, .work-row .go { display: none; }
  .section-head { grid-template-columns: 1fr; }
  .section-head .aside { text-align: left; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
  .hero-meta { grid-column: 1 / -1; }
  .hero-tag { grid-column: 1 / -1; }
}