/* ==========================================================================
   A-CREW — "Production Notation" design
   Dark cinematic base · neo-brutalist editorial layout · futuristic industrial
   detailing. Condensed display type at extreme scale, asymmetric 12-column
   compositions, film stills treated as prints (halftone, grain, scratches,
   scan lines), production notation overlays (REC, timecode, frame counters,
   crosshairs, rulers, coordinates). One electric accent, one technical accent.

   1. Tokens            8. Showreel         15. Footer
   2. Fonts & base      9. Pipeline         16. Dialogs
   3. Type             10. Built for        17. Motion
   4. Textures         11. Brand            18. Responsive
   5. Graphic system   12. Trust
   6. Header + hero    13. Team
   7. Crew + kicker    14. Closing
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --void: #070707;          /* near-black ground */
  --char: #111112;          /* charcoal surfaces */
  --graphite: #1c1c1e;      /* deep graphite: raised blocks, image beds */
  --ink: #ecebe6;
  --ink-2: rgba(236, 235, 230, .72);
  --ink-3: rgba(236, 235, 230, .48);
  --ink-4: rgba(236, 235, 230, .26);
  --line: rgba(236, 235, 230, .16);
  --line-soft: rgba(236, 235, 230, .08);

  /* Agent palette, extracted from the agents' intro videos and brightened slightly to read on black
     (video values: AJ #328BB3, Hugo #6948C2 → #9854CA, Sara #A8D443, Zhao #A02026) */
  --aj: #3ab4f0;            /* AJ blue */
  --hugo: #8a5cf0;          /* Hugo violet */
  --sara: #b4e04a;          /* Sara lime */
  --zhao: #e0433c;          /* Zhao red */

  --cta: var(--aj);         /* primary buttons and the REC light, site-wide */
  --agentic: #9a6cff;       /* "agentic" + caret in the hero: Hugo violet, a touch lighter for the thin regular type */
  --on-hot: #06070a;        /* dark text on any accent fill */
  /* --hot is the SECTION accent: highlights, labels, rules, hovers. It defaults to AJ blue and each
     section re-points it to one agent colour (see "Section palette" below). */
  --hot: var(--aj);
  --glitch-b: var(--sara);  /* second colour of the headline glitch split */

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 2.6vw, 44px);
  --col-gap: clamp(12px, 1.4vw, 24px);
  --section: clamp(100px, 11vw, 190px);
  --snap: cubic-bezier(.75, 0, .15, 1);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* 2. Fonts & base -------------------------------------------------------------- */
@font-face { font-family: 'Big Shoulders Display'; src: url('fonts/BigShoulders.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--text); font-size: clamp(15px, .98vw, 17px); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body:has(dialog[open]) { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
::selection { background: var(--hot); color: var(--on-hot); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--hot); color: var(--on-hot); padding: 10px 16px; font-family: var(--mono); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The 12-column page grid every section composes on */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); }

/* 3. Type ---------------------------------------------------------------------- */
.h1, .h2, .h3, .name { font-family: var(--display); font-weight: 850; text-transform: uppercase; margin: 0; letter-spacing: -.012em; }
.h1 { line-height: .8; }
.h2 { font-size: clamp(56px, 9.4vw, 176px); line-height: .82; }
.h3 { font-size: clamp(22px, 1.9vw, 34px); line-height: .92; font-weight: 800; letter-spacing: 0; }
.name { font-size: clamp(56px, 7vw, 132px); line-height: .8; display: block; }
.nb { white-space: nowrap; }
.lede { font-size: clamp(17px, 1.3vw, 22px); line-height: 1.42; color: var(--ink-2); max-width: 34ch; }
.copy { color: var(--ink-2); max-width: 58ch; }
.small { font-size: .82rem; color: var(--ink-3); }
/* micro-labels: production notation, always short */
.mono { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.5; }
.hot { color: var(--hot); }
.code { display: inline-flex; align-items: center; gap: 10px; }
.code::before { content: ""; width: 8px; height: 8px; background: var(--hot); }

/* 4. Textures -------------------------------------------------------------------- */
/* Film grain over the whole page, shifted every frame so it "boils" */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; background: url('tex/grain.png'); opacity: .55; mix-blend-mode: overlay; animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -2%); } 80% { transform: translate(3%, 4%); } 100% { transform: translate(0, 0); } }

/* Print: a film still or portrait treated as a printed art piece */
.print { position: relative; overflow: hidden; background: var(--graphite); isolation: isolate; }
.print img, .print video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.35) brightness(.82); transition: filter .5s ease; }
.print::before { /* halftone dot screen */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, transparent 0 .9px, rgba(7,7,7,.5) 1.3px) 0 0 / 4px 4px; mix-blend-mode: multiply;
}
.print::after { /* scratches, dust and scan lines */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url('tex/scratches.png') center / cover, repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen; opacity: .9;
}
/* Duotone: black to electric orange, for stills that should carry the accent */
.print.duo img, .print.duo video { filter: grayscale(1) contrast(1.5) brightness(.9) sepia(1) saturate(6) hue-rotate(-18deg); }
.print.colour img, .print.colour video { filter: contrast(1.1) saturate(1.1) brightness(.9); }

/* 5. Graphic system -------------------------------------------------------------- */
/* Crosshair marks: place .cross elements; they draw a thin + */
.cross { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 4; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--hot); }
.cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.cross.tl { left: -9px; top: -9px; } .cross.tr { right: -9px; top: -9px; } .cross.bl { left: -9px; bottom: -9px; } .cross.br { right: -9px; bottom: -9px; }
/* Ruler: tick marks along an edge */
.ruler-x { height: 10px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 100px); background-size: auto 6px, auto 10px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }
.ruler-y { width: 10px; background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 10px), repeating-linear-gradient(180deg, var(--ink-3) 0 1px, transparent 1px 100px); background-size: 6px auto, 10px auto; background-repeat: repeat-y; }
/* Section slate: code, rule, running frame counter */
.slate { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: clamp(28px, 3vw, 48px); }
.slate .rule { height: 1px; background: var(--line); }
/* Buttons: blocks of the graphic system, not web widgets */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 56px; padding: 0 18px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .25s ease;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--snap); }
.btn::after { content: ""; width: 10px; height: 10px; background: currentColor; }
.btn:hover { color: var(--void); }
.btn:hover::before { transform: none; }
.btn-hot { background: var(--cta); border-color: var(--cta); color: var(--on-hot); }
.btn-hot::before { background: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 6a. Header: a thin technical bar ------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s ease; }
.site-header.is-solid { background: rgba(7, 7, 7, .92); }
.site-header .bar { display: grid; grid-template-columns: auto auto 1fr auto; align-items: stretch; height: 56px; border-bottom: 1px solid var(--line); padding-left: var(--gutter); }
.brand { display: flex; align-items: center; padding-right: 28px; border-right: 1px solid var(--line); }
.brand img { height: 26px; width: auto; max-width: none; }
.bar-coords { display: flex; align-items: center; padding: 0 20px; border-right: 1px solid var(--line); }
.site-nav { display: flex; align-items: stretch; justify-content: flex-end; counter-reset: nav; }
.site-nav a { display: flex; align-items: center; padding: 0 clamp(10px, 1.3vw, 22px); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-left: 1px solid var(--line-soft); transition: color .2s, background .2s; white-space: nowrap; }
.site-nav a::before { counter-increment: nav; content: "0" counter(nav) "\00a0"; color: var(--ink-4); }
.site-nav a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.site-nav a.is-current { color: var(--void); background: var(--ink); }
.site-nav a.is-current::before { color: var(--void); }
.site-header .btn { min-height: 0; height: 100%; border: 0; padding: 0 22px; }
.menu-btn { display: none; width: 56px; background: none; border: 0; border-left: 1px solid var(--line); cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 1px; background: currentColor; margin: 5px auto; transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* 6b. Hero --------------------------------------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 680px; max-height: 1180px; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -3; will-change: transform; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.1) brightness(.72); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.75), rgba(7,7,7,0) 55%), linear-gradient(180deg, rgba(7,7,7,.4), transparent 22%, transparent 55%, rgba(7,7,7,.92)); }
.hero-scan { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: var(--void); opacity: 0; pointer-events: none; }
/* Notation layer */
.hero-notes { position: absolute; inset: 56px 0 0; pointer-events: none; }
.hero-frame { position: absolute; inset: 24px var(--gutter) auto; height: calc(100% - 48px); }
.rec { position: absolute; left: 22px; top: 18px; display: flex; align-items: center; gap: 18px; }
.rec b { display: inline-flex; align-items: center; gap: 8px; color: var(--cta); font-weight: 600; }
.rec b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cta); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.specs { position: absolute; right: 22px; top: 18px; text-align: right; }
.hero-ruler { position: absolute; left: 0; top: 60px; bottom: 60px; }
.hero-body { position: absolute; inset: auto 0 0; padding-bottom: clamp(22px, 3vw, 44px); }
/* size is capped by width and by height, so "agentic" always clears the REC readout */
.hero-title { grid-column: 1 / -1; font-size: clamp(64px, min(calc((100vw - var(--tick-w)) * .215), calc((100svh - 190px) / 2.6)), 420px); margin-left: -.03em; }
.hero-title .l1 { display: block; font-size: .5em; line-height: .86; padding-left: .12em; padding-top: .58em; }
/* "agentic": an insertion written above the gap between YOUR and AI, like a proofreader's
   mark. Regular text face, lower case, true red. .ins is a word-space-wide anchor in the gap;
   the word sits centred above it and a small caret marks the insertion point. */
/* .ins is as tall as the capitals (in headline units), so "agentic" can sit just above them */
.hero-title .ins { position: relative; display: inline-block; width: .3em; height: .8em; vertical-align: baseline; }
.hero-title .agentic {
  position: absolute; left: 50%; bottom: calc(100% + .22em); transform: translateX(-50%);
  font-family: var(--text); font-weight: 400; text-transform: none; letter-spacing: -.035em; line-height: 1;
  color: var(--agentic); font-size: .5em; white-space: nowrap;
}
/* upside-down caret (v): sits at the top of the gap and dips just below the cap line,
   pointing down into the space where "agentic" is inserted */
.hero-title .caret { position: absolute; left: 50%; bottom: calc(100% - .17em); width: .24em; height: .2em; transform: translateX(-50%); }
.hero-title .caret svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-title .caret path { fill: none; stroke: var(--agentic); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.hero-title .l2 { display: block; }
.hero-title .l3 { display: inline-block; }
/* the action column tucks in beside the last headline line ("house.") */
.hero-row { grid-column: 1 / -1; display: grid; grid-template-columns: 57% 1fr; align-items: end; gap: 20px 40px; margin-top: min(-13.5vw, -64px); position: relative; z-index: 2; }
.hero-row > .hero-side { grid-column: 2; }
/* action column stretches to the right margin: two equal buttons, logos spread beneath */
.hero-side { display: grid; gap: clamp(18px, 2vw, 28px); justify-items: stretch; align-self: center; padding-left: clamp(12px, 1.2vw, 20px); border-left: 1px solid var(--hot); }
.hero-side .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-side .btn { min-height: clamp(60px, 5vw, 84px); padding: 0 clamp(18px, 1.6vw, 28px); font-size: clamp(12px, .95vw, 15px); }
.programs { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 2vw, 32px); }
.programs img { height: clamp(44px, 4vw, 66px); width: auto; }
.programs img[alt^="AWS"] { height: clamp(36px, 3.3vw, 54px); }
.programs-rule { flex: 0 0 1px; }
.programs-rule { width: 1px; align-self: stretch; background: var(--line); }
.programs p { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); max-width: 32ch; line-height: 1.5; }

/* 7a. Crew -------------------------------------------------------------------------- */
.head { row-gap: 28px; align-items: end; margin-bottom: clamp(56px, 6vw, 110px); }
.head .h2 { grid-column: 1 / 9; }
.head .lede { grid-column: 10 / 13; }
.head .note { grid-column: 10 / 13; align-self: start; }
.crew-grid { align-items: start; }
.panel {
  --c: var(--hot); position: relative; display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink);
}
.panel.aj { --c: var(--aj); grid-column: 1 / 4; }
.panel.hugo { --c: var(--hugo); grid-column: 4 / 7; margin-top: clamp(60px, 9vw, 160px); }
.panel.sara { --c: var(--sara); grid-column: 7 / 10; margin-top: clamp(20px, 3vw, 50px); }
.panel.zhao { --c: var(--zhao); grid-column: 10 / 13; margin-top: clamp(100px, 13vw, 230px); }
.panel-meta { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.panel-meta i { width: 8px; height: 8px; background: var(--c); display: inline-block; margin-right: 8px; }
.panel .print { aspect-ratio: 3 / 4; }
.panel .print img, .panel .print video { object-position: 50% 0; }
.panel .print { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .3s; }
.panel .name { position: relative; z-index: 5; margin-top: -.42em; margin-left: -.03em; transition: color .3s; }
.panel-role { display: block; margin-top: 12px; }
.panel-brief { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .3s ease, margin-top .5s var(--ease); margin-top: 0; color: var(--ink-2); max-width: 32ch; }
.panel-brief > span { display: block; overflow: hidden; }
.panel-brief .small { display: block; margin-top: 8px; }
.panel:hover .print :is(img, video), .panel.is-open .print :is(img, video), .panel .print.is-playing video { filter: contrast(1.05) saturate(1.05) brightness(1); }
.panel:hover .print, .panel.is-open .print { outline-color: var(--c); }
.panel:hover .name, .panel.is-open .name { color: var(--c); }
.panel.is-open .panel-brief { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
@media (hover: hover) { .panel:hover .panel-brief { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; } }
.panel:hover .print :is(img, video) { animation: tear .35s steps(2) 1; }
@keyframes tear { 0% { clip-path: inset(12% 0 58% 0); transform: translateX(-8px); } 50% { clip-path: inset(60% 0 12% 0); transform: translateX(6px); } 100% { clip-path: inset(0); transform: none; } }

/* Crew additions: vertical IP ticker, "meet" line, footnote */
/* Page-wide ticker, pinned to the right edge below the header. main and footer leave room for it. */
:root { --tick-w: 48px; }
main, footer { margin-right: var(--tick-w); }
.v-ticker { position: fixed; top: 56px; bottom: 0; right: 0; width: var(--tick-w); overflow: hidden; border-left: 1px solid var(--line); background: var(--void); z-index: 45; color: var(--aj); animation: tick-colour 16s linear infinite; }
/* one agent colour every 4 seconds, with a short cross-fade */
@keyframes tick-colour { 0%, 22% { color: var(--aj); } 25%, 47% { color: var(--hugo); } 50%, 72% { color: var(--sara); } 75%, 97% { color: var(--zhao); } 100% { color: var(--aj); } }
.v-track { display: flex; flex-direction: column; animation: v-tick 22s linear infinite; }
.v-track span { writing-mode: vertical-rl; display: flex; align-items: center; gap: 22px; padding: 22px 0; font-family: var(--display); font-weight: 850; text-transform: uppercase; font-size: 26px; letter-spacing: .02em; line-height: 48px; color: currentColor; white-space: nowrap; }
.v-track span::after { content: ""; width: 8px; height: 8px; background: currentColor; }
@keyframes v-tick { to { transform: translateY(-50%); } }
.meet { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 80px); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 2.8vw, 52px); line-height: .9; }
.meet sup { font-size: .6em; vertical-align: top; margin-left: .05em; }
/* footnote matches the section description (.lede): same face, size and colour */
.footnote { grid-column: 1 / 8; margin-top: clamp(40px, 5vw, 72px); padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--text); font-size: clamp(17px, 1.3vw, 22px); line-height: 1.42; color: var(--ink-2); max-width: 46ch; }

/* 7b. Kicker: oversized statement cut over a film still ---------------------------- */
.kicker { position: relative; padding-block: clamp(80px, 9vw, 150px) 0; overflow: hidden; }
.kicker .print { grid-column: 4 / 13; aspect-ratio: 21 / 9; }
.kicker .print img, .kicker .print video { object-position: 50% 42%; }
.kicker-text { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 6; align-self: start; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: -.012em; font-size: clamp(48px, 9.6vw, 184px); }
.kicker-text .out { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
/* "commercial production" starts outlined like the rest of the line, and fills with the
   section colour on hover / keyboard focus (the dotted underline stays as the hover cue) */
.kicker-text .fill { color: transparent; -webkit-text-stroke: 1.5px var(--ink); transition: color .25s ease, -webkit-text-stroke-color .25s ease; }
.kicker-text .fill:has(.cp-term:hover), .kicker-text .fill:has(.cp-term:focus-visible) { color: var(--hot); -webkit-text-stroke-color: var(--hot); }
.kicker-text em { display: block; font-style: normal; color: var(--hot); padding-left: 1.4em; margin-top: 1.1em; }
.kicker .print { grid-row: 1; margin-top: .9em; }
.kicker .grid { font-size: clamp(40px, 7.4vw, 150px); }
.kicker-cap { grid-column: 4 / 13; display: flex; justify-content: space-between; padding-top: 10px; }

/* 8. Showreel ------------------------------------------------------------------------- */
.reel .work-frame-wrap { grid-column: 1 / 10; position: relative; }
.work-meta { grid-column: 10 / 13; align-self: end; border-top: 1px solid var(--hot); padding-top: 14px; }
.work-client { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hot); margin-bottom: 14px; }
.work-meta .h3 { font-size: clamp(34px, 3.4vw, 64px); line-height: .86; }
.work-meta .copy { margin-top: 14px; }
.work-frame { position: relative; aspect-ratio: 16 / 9; background: var(--graphite); overflow: hidden; }
.work-frame video, .work-frame iframe, .work-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.frame-tag { position: absolute; left: 12px; top: 10px; z-index: 5; pointer-events: none; }
/* Contact strip: thumbnails on a strip of film with sprocket holes */
.strip-film { grid-column: 1 / -1; margin-top: 18px; padding: 16px 0; background: #000; position: relative; }
.strip-film::before, .strip-film::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 10px, #2a2a2c 10px 22px); }
.strip-film::before { top: 4px; } .strip-film::after { bottom: 4px; }
.work-thumbs { list-style: none; padding: 0 10px; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.work-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 8px 10px; cursor: pointer; text-align: left; background: var(--graphite) center / cover no-repeat; border: 0; outline: 1px solid var(--line-soft); outline-offset: -1px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); filter: grayscale(1); transition: filter .3s, color .3s; }
.work-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85)); }
.work-thumb span { position: relative; }
.work-thumb:hover { filter: none; color: var(--ink); }
.work-thumb[aria-current="true"] { filter: none; color: var(--ink); outline: 2px solid var(--hot); }
.work-blank { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(236,235,230,.03) 9px 10px), var(--graphite); }
.work-blank b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 28px); color: var(--ink-3); }
.work-blank span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.work-more { grid-column: 1 / -1; margin-top: clamp(56px, 6vw, 96px); }
.work-more-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.work-arrows { display: flex; }
.work-arrows button { width: 48px; height: 40px; background: none; border: 1px solid var(--line); margin-left: -1px; color: var(--ink-2); cursor: pointer; font-family: var(--mono); transition: background .2s, color .2s; }
.work-arrows button:hover { background: var(--ink); color: var(--void); }
.work-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 4); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.work-track::-webkit-scrollbar { display: none; }
.work-card { scroll-snap-align: start; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.work-card[disabled] { cursor: default; }
.work-card p { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.work-card .work-blank b { display: none; }
/* empty slots: a plain dark tile, no text or stripes */
.work-blank.is-empty { background: var(--graphite); }
/* thumbnails without a film yet are display-only */
.work-thumb[disabled], .work-card[disabled] { cursor: default; }
.work-thumb[disabled]:hover { color: var(--ink); filter: none; }

/* 9. Pipeline: a production chart --------------------------------------------------- */
.pipeline { padding-top: clamp(40px, 4vw, 70px); padding-bottom: 0; }
.pipe-head { margin-bottom: clamp(28px, 3vw, 48px); }
.pipe-head .h2 { grid-column: 1 / 11; }
.pipe-track { list-style: none; padding: 0 var(--gutter); margin: 0; display: grid; gap: 40px var(--col-gap); position: relative; }
.step { --sc: var(--ink-3); position: relative; display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.step.aj { --sc: var(--aj); } .step.hugo { --sc: var(--hugo); } .step.sara { --sc: var(--sara); } .step.zhao { --sc: var(--zhao); } .step.master { --sc: var(--ink); }
.step::before { /* node on the chart line */ content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--sc); }
.step-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.step .h3 { font-size: clamp(44px, 4.2vw, 80px); line-height: .82; }
.step-copy { color: var(--ink-2); max-width: 36ch; }
.step .print { aspect-ratio: 16 / 9; }
.step-frame.ghost { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--line); background: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(236,235,230,.03) 9px 10px); }
.step-frame.ghost span { font-family: var(--display); font-weight: 850; text-transform: uppercase; font-size: clamp(22px, 2vw, 36px); color: var(--ink-4); text-align: center; line-height: .9; }
.step.master .step-frame.ghost { background: var(--ink); border: 0; }
/* Script step: a document icon with a .DOCX tag (generic, not the Word trademark) */
.step-frame.docx { border-style: solid; background: radial-gradient(circle at 50% 60%, rgba(62,127,224,.16), transparent 62%), var(--char); }
.docx-icon { width: 30%; max-width: 120px; height: auto; overflow: visible; }
.docx-icon .page { fill: #f4f3ef; }
.docx-icon .fold { fill: #cfcdc6; stroke: none; }
.docx-icon .lines { stroke: #a9a7a0; stroke-width: 4; fill: none; }
.docx-icon .tag { fill: #3e7fe0; }
.docx-icon text { font-family: var(--mono); font-weight: 700; font-size: 15px; fill: #fff; letter-spacing: .04em; }
.step.master .step-frame.ghost span { color: var(--void); }
/* Master: a play icon in place of the label (graphic only) */
.play-icon { width: 30%; max-width: 130px; height: auto; }
.play-icon circle { fill: none; stroke: var(--void); stroke-width: 4; }
.play-icon path { fill: var(--void); }
.pipe-progress { display: none; }

@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .pipe-scroll.is-live { height: var(--pipe-h, 400vh); }
  .pipe-scroll.is-live .pipe-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 56px; }
  .pipe-scroll.is-live .pipe-head .h2 { font-size: clamp(44px, 5.2vw, 100px); grid-column: 1 / -1; }
  .pipe-scroll.is-live .pipe-track { display: flex; align-items: flex-start; gap: clamp(20px, 2.4vw, 44px); width: max-content; will-change: transform; }
  .pipe-scroll.is-live .step { width: clamp(320px, min(30vw, calc((100vh - 470px) * 1.6)), 540px); flex: none; }
  .pipe-scroll.is-live .step:nth-child(even) { margin-top: clamp(30px, 5vh, 70px); }
  .pipe-scroll.is-live .step.brief, .pipe-scroll.is-live .step.master { width: clamp(240px, 20vw, 340px); }
  .pipe-scroll.is-live .step:not(.is-near) .print img { filter: grayscale(1) contrast(1.3) brightness(.4); }
  .pipe-scroll.is-live .step.is-near .print img { filter: contrast(1.1) saturate(1.05) brightness(.92); }
  .pipe-scroll.is-live .pipe-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 var(--gutter); margin-top: clamp(22px, 3vh, 44px); }
  .pipe-progress .ruler-x { position: relative; }
  .pipe-progress .ruler-x::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--hot); }
}
@media (max-width: 999px), (prefers-reduced-motion: reduce) {
  .pipe-track { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: var(--section); }
}

/* 10. Built for: giant stacked names, inverted on hover ---------------------------- */
.aud-head .h2 { grid-column: 1 / -1; }
.aud-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.aud-row { position: relative; isolation: isolate; align-items: center; padding-block: clamp(18px, 2vw, 30px); border-bottom: 1px solid var(--line); transition: color .3s ease; }
.aud-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hot); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--snap); }
.aud-row:hover::before { transform: none; }
.aud-row:hover, .aud-row:hover :is(.copy, .mono) { color: var(--on-hot); }
.aud-row .mono { grid-column: 1 / 2; align-self: start; padding-top: 12px; transition: color .3s; }
.aud-row .name { grid-column: 2 / 9; font-size: clamp(64px, 11vw, 210px); white-space: nowrap; }
.aud-row .aud-copy { grid-column: 9 / 13; }
.aud-row:nth-child(2) .name { grid-column: 3 / 10; }
.aud-row:nth-child(2) .aud-copy { grid-column: 10 / 13; }
.aud-row .label { display: block; margin-bottom: 10px; }
.aud-row .copy { transition: color .3s; }

/* 11. Brand: headline cut across a tall still ------------------------------------- */
.brand-grid { align-items: start; }
.brand-grid .print { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 9; }
.brand-grid .print video { object-position: 50% 50%; }
.brand-grid .h2 { grid-column: 6 / 13; grid-row: 1; align-self: end; position: relative; z-index: 6; margin-bottom: -.35em; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.brand-grid .tenets { grid-column: 7 / 13; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-self: start; margin-top: clamp(64px, 7vw, 110px); }
.tenet { border-top: 1px solid var(--hot); padding-top: 14px; display: grid; gap: 12px; align-content: start; }
.brand-coords { grid-column: 1 / 9; grid-row: 2; align-self: start; margin-top: 10px; display: flex; justify-content: space-between; }

/* 12. Trust: a spec sheet ------------------------------------------------------------ */
.trust-head .h2 { grid-column: 1 / 10; }
.trust-grid { display: block; border-top: 1px solid var(--ink); counter-reset: spec; }
.tenet-cell { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding: 22px var(--gutter); border-bottom: 1px solid var(--line); counter-increment: spec; position: relative; transition: background .25s; }
.tenet-cell::before { content: "SPEC-0" counter(spec); grid-column: 1 / 3; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); padding-top: 6px; }
.tenet-icon { grid-column: 3 / 4; width: 26px; height: 26px; fill: none; stroke: var(--hot); stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter; }
.tenet-cell .h3 { grid-column: 4 / 9; font-size: clamp(26px, 2.4vw, 44px); }
.tenet-cell p { grid-column: 9 / 13; color: var(--ink-3); font-size: .95em; }
.tenet-cell:hover { background: var(--char); }
.tenet-cell:hover::before { color: var(--hot); }
.trust-wrap { padding-inline: 0; }
.charter-note { padding: 18px var(--gutter) 0; }

/* Savings --------------------------------------------------------------------------------- */
.save-grid { align-items: start; row-gap: 0; }
.save-grid .h2 { grid-column: 1 / 9; }
.save-sub { grid-column: 1 / 9; margin-top: 14px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 64px); line-height: .9; color: var(--hot); }
.save-print { grid-column: 1 / 7; grid-row: 4 / 6; margin-top: clamp(40px, 5vw, 80px); aspect-ratio: 16 / 10; }
.save-stat { grid-column: 6 / 13; grid-row: 4; position: relative; z-index: 6; margin-top: clamp(20px, 3vw, 50px); display: grid; justify-items: end; text-align: right; }
.save-num { font-family: var(--display); font-weight: 900; font-size: clamp(120px, 21vw, 400px); line-height: .78; letter-spacing: -.02em; color: var(--ink); }
/* Count-down: each digit drops in from above as the number falls */
.save-digits { display: inline-block; min-width: 1.02em; text-align: right; font-variant-numeric: tabular-nums; }
.save-digits i { display: inline-block; font-style: normal; }
.save-digits i.drop { animation: digit-drop .16s var(--snap); }
@keyframes digit-drop { from { transform: translateY(-.28em); opacity: .15; } }
.save-num.is-counting { color: var(--hot); }
.save-num { transition: color .6s ease; }
/* "Lower cost": headline font, fitted by site.js (fitLowerCost) to exactly the width of the figure */
.save-lower { display: block; margin-top: .06em; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: -.01em; color: var(--hot); white-space: nowrap; text-align: right; font-size: clamp(40px, 6.4vw, 120px); }
.save-credits { color: var(--ink); }
/* claim above the figure: same face and size as the "Save time and credit$$$" line, in white */
.save-stat .save-claim { order: -1; margin: 0 0 clamp(14px, 1.6vw, 26px); max-width: 15em; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 64px); line-height: .9; color: var(--ink); text-align: right; text-wrap: balance; }
.save-copy { grid-column: 8 / 13; grid-row: 5; align-self: end; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--hot); font-size: clamp(16px, 1.2vw, 20px); color: var(--ink); }

/* 13. Team ---------------------------------------------------------------------------- */
.team-head .h2 { grid-column: 1 / 8; }
.team-head .lede { grid-column: 9 / 13; }
.founders { align-items: start; }
.founder { position: relative; outline-offset: 6px; }
.founder:nth-child(1) { grid-column: 1 / 4; }
.founder:nth-child(2) { grid-column: 4 / 6; margin-top: clamp(80px, 10vw, 180px); }
.founder:nth-child(3) { grid-column: 6 / 9; margin-top: clamp(24px, 3vw, 60px); }
.founder:nth-child(4) { grid-column: 9 / 11; margin-top: clamp(120px, 14vw, 250px); }
.founder:nth-child(5) { grid-column: 11 / 13; margin-top: clamp(40px, 5vw, 90px); }
.founder .print { aspect-ratio: 4 / 5; }
.founder .print img { object-position: 50% 20%; }
.founder-plate { padding-top: 14px; border-top: 1px solid var(--line); margin-top: 10px; }
.founder h3 { font-family: var(--display); font-weight: 850; text-transform: uppercase; font-size: clamp(26px, 2.2vw, 40px); line-height: .86; letter-spacing: -.01em; }
.founder .role { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hot); margin: 10px 0; }
.founder p:last-child { font-size: .88em; color: var(--ink-3); transition: color .3s; }
.founder:is(:hover, :focus-visible) .print img { filter: contrast(1.1) saturate(1) brightness(.95); animation: tear .35s steps(2) 1; }
.founder:is(:hover, :focus-visible) p:last-child { color: var(--ink-2); }
.founder .cross { opacity: 0; transition: opacity .2s; }
.founder:is(:hover, :focus-visible) .cross { opacity: 1; }

/* 14. Closing ---------------------------------------------------------------------------- */
.closing { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(110px, 12vw, 200px); border-top: 1px solid var(--line); }
.closing .print { position: absolute; inset: 0; z-index: -1; background: var(--void); }
.closing .print img { filter: url(#distort) contrast(1.15) saturate(1.1) brightness(.55); object-position: 50% 55%; opacity: .7; }
.closing .h2 { grid-column: 1 / 12; font-size: clamp(64px, 12vw, 240px); line-height: .8; }
.closing-cta { grid-column: 8 / 13; margin-top: clamp(28px, 3vw, 48px); display: grid; gap: 22px; padding-top: 16px; border-top: 1px solid var(--hot); }
.closing .copy { color: var(--ink); }
.closing .rec { position: absolute; left: var(--gutter); top: 22px; }

/* 15. Footer ----------------------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding-top: 48px; overflow: hidden; }
.foot-grid { row-gap: 32px; }
.foot-grid > div:nth-child(1) { grid-column: 1 / 5; }
.foot-grid > div:nth-child(2) { grid-column: 6 / 8; }
.foot-grid > div:nth-child(3) { grid-column: 8 / 10; }
.foot-grid > div:nth-child(4) { grid-column: 10 / 13; }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.foot-grid li, .foot-grid p { color: var(--ink-3); font-size: .9rem; }
.foot-grid a:hover { color: var(--hot); }
.foot-grid .mono { display: block; margin-bottom: 14px; color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding: 14px var(--gutter); border-top: 1px solid var(--line); }
.foot-bottom .legal { display: flex; gap: 20px; }
/* Giant outlined wordmark set in the display face, cropped by the page bottom */
/* Filmyra logo under "A product of…" (file pending; see comment in index.html) */
.foot-logo { display: block; width: clamp(160px, 16vw, 260px); height: auto; margin-top: 22px; }
/* Giant outlined wordmark, fitted edge to edge by site.js (fitFootMark); CSS size is the fallback */
.foot-mark { padding: 0 var(--gutter); margin-top: 20px; margin-bottom: -.2em; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: calc((100vw - 2 * var(--gutter)) / 2.62); line-height: .78; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--ink-4); white-space: nowrap; user-select: none; overflow: hidden; }
.foot-mark span { display: inline-block; }

/* 16. Dialogs ----------------------------------------------------------------------------- */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(7, 7, 7, .86); }
.modal { border: 1px solid var(--ink); border-radius: 0; background: var(--void); padding: 0; width: min(560px, 100% - 32px); }
.modal-card { position: relative; padding: clamp(28px, 4vw, 48px); }
.modal-card .rec { position: static; margin-bottom: 18px; }
.modal .h2 { font-size: clamp(48px, 5vw, 80px); }
.modal-close { position: absolute; right: 0; top: 0; width: 52px; height: 52px; background: none; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); cursor: pointer; font-size: 20px; }
.field { display: grid; gap: 6px; margin-top: 18px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; min-height: 48px; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--hot); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-3) 50%); background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--void); }
.field.is-hidden { display: none; }
.modal form .btn { margin-top: 28px; width: 100%; }
.modal-done { display: none; }
.modal-card.is-done form { display: none; }
.modal-card.is-done .modal-done { display: block; }
.modal-done .copy { margin-top: 14px; }
.work-pop { border: 0; padding: 0; background: transparent; width: min(1280px, 100% - 32px); }
.work-pop-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Section palette -------------------------------------------------------------------------
   Each section owns one agent colour, in agent order (AJ, Hugo, Sara, Zhao, repeating).
   Primary buttons and the REC light keep --cta (AJ blue) everywhere. */
#crew     { --hot: var(--aj); }
.kicker   { --hot: var(--hugo); }
#work     { --hot: var(--sara); --glitch-b: var(--hugo); }
#pipeline { --hot: var(--zhao); }
#audience { --hot: var(--aj); }
#brand    { --hot: var(--hugo); }
#trust    { --hot: var(--sara); --glitch-b: var(--hugo); }
#edge     { --hot: var(--zhao); }
#team     { --hot: var(--aj); }
.closing  { --hot: var(--hugo); }

/* 17. Motion -------------------------------------------------------------------------------
   Entrance classes are added by site.js only when motion is allowed.
   glitch: headlines tear in as colour-split slices   cut: images uncovered by a hard block
   decode: micro-labels resolve from random glyphs    rise: small blocks lift in */
.fx-glitch { position: relative; }
.fx-glitch:not(.is-in) { opacity: 0; }
.fx-glitch.is-in { animation: gl-main .75s steps(1) var(--d, 0ms) both; }
.gl-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.gl-layer.r { color: var(--hot); }
.gl-layer.b { color: var(--glitch-b); }
.fx-glitch.is-in .gl-layer.r { animation: gl-r .75s steps(1) var(--d, 0ms) both; }
.fx-glitch.is-in .gl-layer.b { animation: gl-b .75s steps(1) var(--d, 0ms) both; }
@keyframes gl-main { 0% { opacity: 1; clip-path: inset(0 0 86% 0); transform: translateX(-12px); } 14% { clip-path: inset(40% 0 34% 0); transform: translateX(9px); } 28% { clip-path: inset(74% 0 2% 0); transform: translateX(-4px); } 42% { clip-path: inset(6% 0 48% 0); transform: translateX(3px); } 56%, 100% { opacity: 1; clip-path: none; transform: none; } }
@keyframes gl-r { 0% { opacity: .9; clip-path: inset(18% 0 56% 0); transform: translate(14px, -2px); } 18% { clip-path: inset(62% 0 8% 0); transform: translate(-9px, 1px); } 36% { clip-path: inset(4% 0 80% 0); transform: translate(6px, 0); } 54% { opacity: .6; clip-path: inset(46% 0 30% 0); transform: translate(-3px, 0); } 70%, 100% { opacity: 0; } }
@keyframes gl-b { 0% { opacity: .9; clip-path: inset(66% 0 8% 0); transform: translate(-14px, 2px); } 18% { clip-path: inset(8% 0 72% 0); transform: translate(10px, 0); } 36% { clip-path: inset(40% 0 36% 0); transform: translate(-5px, 0); } 54% { opacity: .6; clip-path: inset(82% 0 2% 0); transform: translate(3px, 0); } 70%, 100% { opacity: 0; } }

.fx-cut { position: relative; overflow: hidden; }
.fx-cut > :not(.cut-bar) { opacity: 0; }
.fx-cut.is-in > :not(.cut-bar) { animation: cut-show .9s steps(1) var(--d, 0ms) forwards; }
.cut-bar { position: absolute; inset: 0; z-index: 20; background: var(--cut, var(--hot)); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.fx-cut.is-in .cut-bar { animation: cut .9s var(--snap) var(--d, 0ms) forwards; }
@keyframes cut { 0% { transform: scaleY(0); transform-origin: bottom; } 45% { transform: scaleY(1); transform-origin: bottom; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: top; } }
@keyframes cut-show { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }

.fx-rise { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s ease var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.fx-rise.is-in { opacity: 1; transform: none; }
.fx-draw * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) var(--d, 0ms); }
.fx-draw.is-in * { stroke-dashoffset: 0; }

/* Hero load sequence */
.js .hero-media { opacity: 0; }
.js.is-loaded .hero-media { opacity: 1; transition: opacity 1.4s ease; }
.js .hero-notes, .js .hero-row { opacity: 0; }
.js.is-loaded .hero-notes { opacity: 1; transition: opacity .6s steps(3) .9s; }
.js.is-loaded .hero-row { opacity: 1; transition: opacity .8s ease 1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grain { display: none; }
  .js .hero-media, .js .hero-notes, .js .hero-row { opacity: 1; }
}

/* 18. Responsive ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bar-coords { display: none; }
  .site-header .bar { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu-btn { display: block; }
  .site-header .bar { grid-template-columns: auto 1fr auto auto; }
  .site-nav.is-open { display: grid; position: fixed; inset: 56px 0 auto; background: var(--void); border-bottom: 1px solid var(--line); }
  .site-nav.is-open a { padding: 18px var(--gutter); font-size: 13px; border-left: 0; border-top: 1px solid var(--line-soft); }
  .hero-row { grid-template-columns: 1fr; margin-top: 18px; }
  .hero-row > .hero-side { grid-column: 1; }
  .specs { display: none; }
  .head .h2, .head .lede, .head .note, .pipe-head .h2, .aud-head .h2, .trust-head .h2, .team-head .h2, .team-head .lede { grid-column: 1 / -1; }
  .panel.aj, .panel.hugo, .panel.sara, .panel.zhao { grid-column: span 6; margin-top: 0; }
  .panel.hugo, .panel.zhao { margin-top: 60px; }
  .crew-grid { row-gap: 48px; }
  .kicker .print, .kicker-cap { grid-column: 1 / -1; }
  .reel .work-frame-wrap, .work-meta { grid-column: 1 / -1; }
  .work-meta { margin-top: 20px; }
  .work-thumbs { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .work-track { grid-auto-columns: 70%; }
  .aud-row .mono, .aud-row .name, .aud-row .aud-copy, .aud-row:nth-child(2) .name, .aud-row:nth-child(2) .aud-copy { grid-column: 1 / -1; }
  .aud-row .name { font-size: clamp(56px, 16vw, 120px); }
  .brand-grid .print { grid-column: 1 / -1; grid-row: 1; }
  .brand-coords { grid-column: 1 / -1; grid-row: 2; }
  .brand-grid .h2 { grid-column: 1 / -1; grid-row: 3; margin: 28px 0 0; }
  .brand-grid .tenets { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr; margin-top: 36px; }
  .tenet-cell::before { grid-column: 1 / 7; }
  .tenet-icon { grid-column: 12 / 13; grid-row: 1; justify-self: end; }
  .tenet-cell .h3, .tenet-cell p { grid-column: 1 / -1; margin-top: 10px; }
  .founder:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .founder:nth-child(even) { margin-top: 60px; }
  .founders { row-gap: 40px; }
  .closing .h2, .closing-cta { grid-column: 1 / -1; }
  .save-grid .h2, .save-sub, .save-print, .save-stat, .save-copy { grid-column: 1 / -1; grid-row: auto; }
  .save-stat { justify-items: start; text-align: left; margin-top: 28px; }
  .save-stat .save-claim { text-align: left; }
  .save-lower { text-align: left; }
  .footnote { grid-column: 1 / -1; }
  :root { --tick-w: 36px; }
  .v-track span { font-size: 20px; line-height: 36px; }
  .foot-grid > div:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 640px) {
  .hero-side .btn-row { grid-template-columns: 1fr; }
  .site-header .btn-hot { display: none; }
  .hero-title { font-size: clamp(52px, 19vw, 140px); }
  .hero-title .agentic { font-size: .64em; }
  .hero-title .l1 { padding-top: .72em; }
  .panel.aj, .panel.hugo, .panel.sara, .panel.zhao { grid-column: 1 / -1; margin-top: 0; }
  .pipe-track { grid-template-columns: 1fr; }
  .founder:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .foot-grid > div:nth-child(n) { grid-column: 1 / -1; }
  .programs { flex-wrap: wrap; }
  .work-track { grid-auto-columns: 84%; }
}


/* Crew headline spans the full width; blue line under it replaces the old description */
#crew .head .h2 { grid-column: 1 / -1; max-width: none; }
.crew-sub { grid-column: 1 / 10; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.3vw, 44px); line-height: .95; color: var(--hot); margin-top: -8px; }

/* "Commercial production" term: dotted underline in the section colour; hover opens #cp-pop */
/* dotted underline drawn under the words themselves (not the line box), so it never runs into the next line */
.cp-term { cursor: help; outline: none; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--hot); text-decoration-thickness: max(3px, .045em); text-underline-offset: .06em; text-decoration-skip-ink: none; }

.cp-pop { position: fixed; z-index: 80; width: min(560px, calc(100vw - 32px)); padding: 22px 22px 18px; background: rgba(10, 10, 12, .96); border: 1px solid color-mix(in srgb, var(--pop-c, var(--hugo)) 55%, transparent); box-shadow: 0 24px 60px rgba(0,0,0,.6); pointer-events: none; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .15s ease; }
/* Scan reveal: the panel wipes down like a scanner (bright scan line on the leading edge), then the items drop in one by one */
.cp-pop.is-on { opacity: 1; animation: cp-scan .38s cubic-bezier(.75, 0, .15, 1) forwards; }
.cp-pop::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--pop-c, var(--hugo)); box-shadow: 0 0 14px var(--pop-c, var(--hugo)); opacity: 0; }
.cp-pop.is-on::after { animation: cp-line .38s cubic-bezier(.75, 0, .15, 1) forwards; }
@keyframes cp-scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cp-line { 0% { top: 0; opacity: 1; } 90% { top: calc(100% - 2px); opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }
.cp-pop .cp-label, .cp-pop .cp-list li, .cp-pop .cp-foot { opacity: 0; }
.cp-pop.is-on .cp-label, .cp-pop.is-on .cp-list li, .cp-pop.is-on .cp-foot { animation: cp-item .28s ease forwards; }
.cp-pop.is-on .cp-label { animation-delay: .14s; }
.cp-pop.is-on .cp-list li:nth-child(1) { animation-delay: .20s; } .cp-pop.is-on .cp-list li:nth-child(2) { animation-delay: .23s; }
.cp-pop.is-on .cp-list li:nth-child(3) { animation-delay: .26s; } .cp-pop.is-on .cp-list li:nth-child(4) { animation-delay: .29s; }
.cp-pop.is-on .cp-list li:nth-child(5) { animation-delay: .32s; } .cp-pop.is-on .cp-list li:nth-child(6) { animation-delay: .35s; }
.cp-pop.is-on .cp-list li:nth-child(7) { animation-delay: .38s; } .cp-pop.is-on .cp-list li:nth-child(8) { animation-delay: .41s; }
.cp-pop.is-on .cp-list li:nth-child(9) { animation-delay: .44s; } .cp-pop.is-on .cp-list li:nth-child(10) { animation-delay: .47s; }
.cp-pop.is-on .cp-foot { animation-delay: .52s; }
@keyframes cp-item { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-pop.is-on, .cp-pop.is-on * { clip-path: none; opacity: 1; } }
.cp-label { color: var(--pop-c, var(--hugo)); margin-bottom: 14px; }
.cp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.cp-list li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 20px; line-height: 1; color: var(--ink); }
.cp-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; background: var(--pop-c, var(--hugo)); }
.cp-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }

/* 02 / The edge */
.edge-head { align-items: end; margin-bottom: clamp(64px, 7vw, 120px); }
.edge-head .h2 { grid-column: 1 / 10; font-size: clamp(56px, 9.4vw, 176px); max-width: none; }
.edge-head .lede { grid-column: 10 / 13; }
.edge-body { align-items: start; row-gap: 40px; }
.edge-claim { grid-column: 1 / 8; }
.edge-statement { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5vw, 96px); line-height: .88; letter-spacing: -.01em; }
.edge-tag { display: inline-block; margin-top: clamp(28px, 3vw, 44px); padding: 7px 10px; background: var(--hot); color: var(--on-hot); }
.edge-stats { grid-column: 9 / 13; border-top: 1px solid var(--hot); padding-top: 8px; display: grid; gap: 14px; }
.edge-stat { display: grid; }
.edge-num { font-family: var(--display); font-weight: 900; font-size: clamp(72px, 8.4vw, 160px); line-height: .82; letter-spacing: -.02em; color: var(--ink); }
.edge-stat .mono { color: var(--hot); margin-top: 8px; }
.edge-note { font-size: 14px; color: var(--ink-3); max-width: 44ch; margin-top: 8px; }
.edge-points { margin-top: clamp(64px, 7vw, 110px); row-gap: 36px; }
.edge-point { grid-column: span 4; border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 12px; align-content: start; }
.edge-point .mono { color: var(--hot); }
.edge-point .h3 { font-size: clamp(30px, 2.6vw, 48px); }
@media (max-width: 900px) {
  .crew-sub { grid-column: 1 / -1; margin-top: 4px; }
  .edge-head .h2, .edge-head .lede, .edge-claim, .edge-stats { grid-column: 1 / -1; }
  .edge-head .lede { margin-top: 20px; }
  .edge-point { grid-column: 1 / -1; }
}

/* Kicker: statement above, UFO loop below (no longer behind the text) */
.kicker .print { grid-row: 2; margin-top: .55em; }
.kicker-text em { margin-top: .35em; }
/* Crew headline sized so "Every commercial production" holds one line */
#crew .head .h2 { font-size: clamp(44px, 7.1vw, 150px); }
@media (max-width: 900px) { .kicker .print { grid-row: 2; } }
/* Kicker type is sized so "A commercial production" holds one line on desktop */
.kicker-text { font-size: min(calc((100vw - var(--tick-w) - 2 * var(--gutter)) / 10.6), 190px); }
.kicker .grid { font-size: min(calc((100vw - var(--tick-w) - 2 * var(--gutter)) / 10.6), 190px); }
@media (max-width: 640px) { .kicker-text, .kicker .grid { font-size: 11vw; } .kicker-text em { padding-left: .5em; } }

/* 80% count-down: red while counting, settles to white */
.edge-count { transition: color .5s ease; }
.edge-count.is-counting { color: var(--hot); transition: none; }
.edge-count .save-digits { display: inline-block; min-width: 1.02em; text-align: right; font-variant-numeric: tabular-nums; }
.edge-count .save-digits i { display: inline-block; font-style: normal; }
.edge-count .save-digits i.drop { animation: digit-drop .12s var(--snap); }

/* "Trained on craft. Not on prompts.": one stronger, longer glitch-in (plays once) */
.edge-head .h2.fx-glitch.is-in { animation: gl-main-x 1.3s steps(1) var(--d, 0ms) both; }
.edge-head .h2.fx-glitch.is-in .gl-layer.r { animation: gl-r-x 1.3s steps(1) var(--d, 0ms) both; }
.edge-head .h2.fx-glitch.is-in .gl-layer.b { animation: gl-b-x 1.3s steps(1) var(--d, 0ms) both; }
@keyframes gl-main-x {
  0% { opacity: 1; clip-path: inset(0 0 80% 0); transform: translateX(-26px) skewX(-6deg); }
  8% { clip-path: inset(55% 0 20% 0); transform: translateX(22px); }
  16% { clip-path: inset(10% 0 62% 0); transform: translateX(-16px); }
  24% { clip-path: inset(72% 0 4% 0); transform: translateX(12px) skewX(4deg); }
  32% { clip-path: inset(30% 0 40% 0); transform: translateX(-8px); }
  40% { clip-path: inset(0 0 0 0); transform: translateX(6px); }
  48% { clip-path: inset(46% 0 30% 0); transform: translateX(-4px); }
  56% { clip-path: inset(0 0 0 0); transform: translateX(3px); }
  66%, 100% { opacity: 1; clip-path: none; transform: none; }
}
@keyframes gl-r-x {
  0% { opacity: 1; clip-path: inset(15% 0 55% 0); transform: translate(30px, -3px); }
  10% { clip-path: inset(60% 0 10% 0); transform: translate(-22px, 2px); }
  20% { clip-path: inset(5% 0 75% 0); transform: translate(16px, 0); }
  30% { clip-path: inset(40% 0 30% 0); transform: translate(-12px, 0); }
  42% { opacity: .85; clip-path: inset(70% 0 5% 0); transform: translate(8px, 0); }
  54% { opacity: .6; clip-path: inset(20% 0 50% 0); transform: translate(-4px, 0); }
  66%, 100% { opacity: 0; }
}
@keyframes gl-b-x {
  0% { opacity: 1; clip-path: inset(62% 0 10% 0); transform: translate(-30px, 3px); }
  10% { clip-path: inset(8% 0 68% 0); transform: translate(24px, 0); }
  20% { clip-path: inset(38% 0 36% 0); transform: translate(-16px, 0); }
  30% { clip-path: inset(78% 0 2% 0); transform: translate(10px, 0); }
  42% { opacity: .85; clip-path: inset(12% 0 60% 0); transform: translate(-8px, 0); }
  54% { opacity: .6; clip-path: inset(50% 0 25% 0); transform: translate(4px, 0); }
  66%, 100% { opacity: 0; }
}

/* Room for the dotted underline: the headlines that contain "commercial production" get looser
   line spacing, and the dots sit just under the letters, clear of the line below. */
.kicker-text .out { line-height: 1.08; }
.kicker-text em { line-height: .9; }
#crew .head .h2 { line-height: 1.06; }
.cp-term { text-underline-offset: .09em; text-decoration-thickness: max(3px, .04em); }