/* ============================================================================
   SIGHTLINE MOTION

   Light ground. Paper #F2EFE9 is the brand's own light plate, and the accent
   switches with it: #DC3A0B, never #FF5A1F, which measures under 3:1 on light
   and would fail non-text contrast. The two accents are not interchangeable —
   that rule comes from the identity sheet and is enforced here by only ever
   using the light pair.

   Animation rest states are gated behind html.js. Without that gate a no-JS
   visitor gets a page of opacity:0 elements — text present in the DOM and
   invisible, which is the worst of both worlds.

   Component ports (mechanics from 21st.dev, see docs/PORTS.md):
     .cut-*   vertical cut reveal      .ws-*  words stagger
     .tm-*    the text ribbon          .sc-*  stacking cards
     .hero-bg breathing gradient       .rv    scroll reveal
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2-variations'),
       url('../fonts/archivo.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibmplexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F2EFE9;
  --surface: #FBFAF7;
  --white: #FFFFFF;
  --ink: #0B0E12;
  --ink-2: rgba(11, 14, 18, .68);
  --ink-3: rgba(11, 14, 18, .44);
  --ink-4: rgba(11, 14, 18, .26);
  --rule: rgba(11, 14, 18, .15);
  --rule-soft: rgba(11, 14, 18, .075);
  /* THE GROUNDS. First pass kept these within a few % of each other and the
     sections still read as one continuous page — the difference has to be big
     enough to notice without looking for it. These span near-white to a deep
     warm taupe, alternating light/deep so NEIGHBOURS always contrast, and every
     one is asserted against body copy and the accent in the gate. */
  --g1: #FCFBF8;   /* ribbon    */
  --g2: #E6DCCA;   /* best of   */
  --g3: #F7F3EA;   /* wall      */
  --g4: #DFD3BD;   /* 02 build  */
  --g5: #F4F0E6;   /* 03 how    */
  --g6: #1A1D22;   /* AI        — the one dark band, and the one that earns it */
  --g7: #E2D7C1;   /* 04 cuts   — #D8CAB0 first, but the accent fell to 2.8:1 on it */
  --g8: #F2EEE4;   /* 05 work   */
  --g9: #E0D4BC;   /* 06 start  */

  --accent: #DC3A0B;
  /* the SAME mark, on a dark ground. #DC3A0B falls to 3.8:1 on the AI band;
     this is the dark-ground half of the approved Signal pair. */
  --accent-dark: #FF5A1F;
  --accent-soft: rgba(220, 58, 11, .10);

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(18px, 5vw, 84px);
  --measure: 62ch;
  --head: clamp(74px, 9.5vh, 104px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.02vw, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* a marquee track is wider than the page by design */
}

img, svg, video { max-width: 100%; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--white);
  padding: 12px 18px; font: 500 14px/1 var(--sans); text-decoration: none;
}
.skip:focus { left: 10px; top: 10px; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ======================================================= animation rest states */
/* Behind .js so the no-JS document is a normal, fully visible page. */
.js .rv {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .72s ease-out, transform .72s cubic-bezier(.2,.92,.24,1);
}
.js .rv.rv-in { opacity: 1; transform: none; }

/* cut reveal — the per-word wrapper IS the mask */
.cut-w { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.cut-c { position: relative; white-space: pre; }
.cut-i { display: inline-block; will-change: transform; }
.cut-sp { display: inline-block; white-space: pre; }

/* words stagger */
.ws-w { display: inline-block; opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(10px); }
.ws-in .ws-w { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.rv-in { opacity: 1; transform: none; transition: none; }
  .ws-w { opacity: 1; transform: none; filter: none; }
  .cut-i { transform: none !important; }
}

/* ==================================================================== masthead */
.masthead {
  position: sticky; top: 0; z-index: 40;
  height: var(--head);
  display: flex; align-items: center; gap: clamp(14px, 3vw, 44px);
  padding: 0 var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
/* The logo is the brand's loudest asset — deliberately large here and enormous
   in the hero. It was previously 26px tall, which read as an afterthought. */
.brand { display: block; flex: none; line-height: 0; }
.brand img { display: block; height: clamp(44px, 4.6vw, 66px); width: auto; }

/* THE SECTION RAIL. It used to be six sentence-case links at 12px in .44-alpha ink,
   spaced 20px apart with no dividers — which read as one grey run-on sentence rather
   than as navigation, and missed AA contrast besides. Three things fix it: uppercase
   mono with real tracking (a label, not prose), ink at .68 rising to full on hover,
   and a hairline between items so each one is visibly its own target. The accent
   underline marks the section you are actually in — see the scroll-spy in site.js. */
.rail { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.rail ol {
  display: flex; flex-wrap: nowrap;
  margin: 0; padding: 0; list-style: none;
}
.rail li { display: flex; }
.rail li + li { border-left: 1px solid var(--rule-soft); }
.rail a {
  position: relative;
  display: block; padding: 9px clamp(10px, 1.15vw, 16px);
  font-family: var(--mono); font-size: 11px; line-height: 1;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  transition: color .16s ease;
}
/* The indicator is a child rule rather than a border so it can grow from the centre
   without the label shifting by a pixel. */
.rail a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px;
  background: var(--accent);
  transition: left .22s cubic-bezier(.2,.9,.25,1), right .22s cubic-bezier(.2,.9,.25,1);
}
.rail a:hover { color: var(--ink); }
.rail a:hover::after { left: clamp(10px, 1.15vw, 16px); right: clamp(10px, 1.15vw, 16px); }
.rail a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail a[aria-current="true"] { color: var(--ink); }
.rail a[aria-current="true"]::after { left: clamp(10px, 1.15vw, 16px); right: clamp(10px, 1.15vw, 16px); }
@media (prefers-reduced-motion: reduce) { .rail a::after { transition: none; } }

/* A parked section stays in the markup; this is what actually takes it off the page. */
[hidden] { display: none !important; }

.cta {
  flex: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--white); background: var(--ink);
  padding: 10px 17px; text-decoration: none;
  transition: background .16s;
}
.cta:hover { background: var(--accent); }

@media (max-width: 940px) {
  .rail { display: none; }
  .cta { margin-left: auto; }
}

/* ---- hamburger + panel (tablet and phone) ---- */
.burger {
  flex: none; width: 46px; height: 40px; padding: 10px 8px;
  display: none; flex-direction: column; justify-content: space-between;
  background: none; border: 1px solid var(--rule); cursor: pointer;
}
.burger span {
  display: block; height: 2px; width: 100%; background: var(--ink);
  transition: transform .22s cubic-bezier(.2,.9,.25,1), opacity .16s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu {
  position: fixed; inset: var(--head) 0 auto 0; z-index: 39;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  max-height: calc(100dvh - var(--head)); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform .24s cubic-bezier(.2,.9,.25,1), opacity .2s, visibility .24s;
}
.menu ol { margin: 0; padding: 8px var(--pad) 24px; list-style: none; }
.menu li { border-bottom: 1px solid var(--rule-soft); }
.menu a {
  display: block; padding: 16px 0; text-decoration: none; color: var(--ink);
  font-size: clamp(17px, 4.6vw, 22px); font-weight: 600; letter-spacing: -.02em;
}
.menu .menu-cta { color: var(--accent); }
.menu-open .menu { transform: none; opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
/* Only JS shows the button, and only JS hides the panel — with JS off the panel
   is a plain visible list of links and nothing is behind a dead control. */
.js .menu { display: block; }
.js .burger { display: none; }
@media (max-width: 940px) {
  .js .burger { display: flex; }
  .menu { display: block; }
}
@media (min-width: 941px) { .menu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .burger span, .menu { transition: none; }
}
@media (max-width: 460px) { .cta { padding: 9px 12px; font-size: 11.5px; } }

/* ======================================================================== hero */
.hero {
  position: relative;
  min-height: calc(100svh - var(--head));
  display: flex; align-items: center;
  padding: clamp(28px, 5vh, 70px) var(--pad) clamp(40px, 7vh, 92px);
  overflow: hidden;
}

/* breathing gradient — one composited layer, --gw driven by anim.js */
.hero-bg {
  position: absolute; inset: -12% -6%;
  --gw: 118%;
  background:
    radial-gradient(var(--gw) var(--gw) at 50% 6%,
      #FFD9BE 0%, #FCE2CD 20%, #F7EADE 42%, #F2EFE9 64%, #EFEDE6 100%);
  opacity: 0; transform: scale(1.5);
  /* the original's entrance, kept: 2s on cubic-bezier(.25,.1,.25,1) */
  transition: opacity 2s cubic-bezier(.25,.1,.25,1), transform 2s cubic-bezier(.25,.1,.25,1);
  will-change: transform, opacity;
}
.hero-bg.bg-in { opacity: 1; transform: scale(1); }
html:not(.js) .hero-bg { opacity: 1; transform: none; }

/* drafting grid, faded out toward the edges */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--rule-soft) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 30%, #000 34%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 30%, #000 34%, transparent 100%);
  pointer-events: none;
}

.hero-in { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; }

.eyebrow {
  font-family: var(--mono); font-size: clamp(10.5px, 1.1vw, 12.5px);
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 clamp(14px, 2.2vh, 26px);
}

/* THE BIG LOGO */
.hero-logo { margin: 0 0 clamp(18px, 3vh, 34px); line-height: 0; }
.hero-logo img { display: block; width: min(620px, 82vw); height: auto; }

h1 {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-size: clamp(30px, 5.4vw, 74px);
  font-weight: 600; line-height: 1.04; letter-spacing: -.03em;
  max-width: 19ch;
}

.lead {
  margin: 0 0 clamp(24px, 4vh, 40px);
  font-size: clamp(16.5px, 1.8vw, 24px);
  line-height: 1.46; font-weight: 500; letter-spacing: -.011em;
  color: var(--ink-2); max-width: 44ch;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 clamp(20px, 3vh, 32px); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  padding: 14px 24px; text-decoration: none;
  transition: background .16s, color .16s, border-color .16s;
}
.btn-solid { background: var(--accent); color: var(--white); }
.btn-solid:hover { background: var(--ink); }
.btn-line { border: 1px solid var(--rule); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: rgba(11,14,18,.04); }

/* Block, not flex: as a flex row the dot became its own item and the text block
   wrapped underneath it, leaving a lone dot on a line of its own on narrow screens. */
.hero-note {
  margin: 0; font-family: var(--mono); font-size: clamp(10px, 1.05vw, 12px);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.8;
}
.hero-note .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; vertical-align: middle;
}

/* ================================================================ marquee strip */

/* ====================================================================== sections */
.sec {
  position: relative;
  padding: clamp(58px, 11vh, 148px) var(--pad);
  border-bottom: 1px solid var(--rule-soft);
}
.sec-head { max-width: 1240px; margin: 0 auto clamp(30px, 5vh, 60px); }
.num {
  font-family: var(--mono); font-size: clamp(19px, 1.9vw, 24px); font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent); margin: 0 0 clamp(12px, 2vh, 22px);
  font-variant-numeric: tabular-nums;
}
.sec h2 {
  margin: 0 0 clamp(16px, 2.6vh, 28px);
  font-size: clamp(28px, 5.4vw, 66px);
  font-weight: 600; line-height: 1.05; letter-spacing: -.028em;
  max-width: 22ch;
}
.sec p { max-width: var(--measure); color: var(--ink-2); }
/* These are <p> inside .sec, so `.sec p { max-width: 62ch }` applied and the auto
   margins then CENTRED that short block in a 1240px container — the notes floated
   into the middle of the page. Full-width block, left aligned, measure held by
   padding instead. */
.sec .sec-foot, .sec .sec-note {
  max-width: 1240px;
  margin: clamp(24px, 4vh, 44px) auto 0;
  padding-right: clamp(0px, 38vw, 560px);
  font-family: var(--mono); font-size: clamp(11px, 1.15vw, 13px);
  line-height: 1.7; color: var(--ink-2);
}
.sec .sec-note { margin-top: clamp(12px, 2vh, 20px); }

/* ---------------------------------------------------------------- 02 strands */
.strands {
  max-width: 1240px; margin: 0 auto; padding: 0; list-style: none;
  border-top: 1px solid var(--rule);
}
.strands li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: 4px 26px; align-items: baseline;
  padding: clamp(16px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background .2s;
}
.strands li:hover { background: rgba(11,14,18,.025); }
.s-n { font-family: var(--mono); font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.s-t { font-size: clamp(17px, 2vw, 25px); font-weight: 600; letter-spacing: -.018em; }
.s-d { color: var(--ink-3); font-size: clamp(13.5px, 1.3vw, 16px); }
@media (max-width: 720px) {
  .strands li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .s-d { grid-column: 2; }
}

/* --------------------------------------------------------- 03 live + controls */
.live-wrap {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 64px); align-items: start;
}
@media (max-width: 900px) { .live-wrap { grid-template-columns: 1fr; } }

.live { display: none; }
.js .live { display: block; }
.js .live.cuts {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
  max-width: 1240px; margin: 0 auto;
}

.fallback-note {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--ink-3); border-left: 2px solid var(--accent);
  padding-left: 14px; max-width: 46ch;
}

/* ------------------------------------------------------------------ the frame */
/* Sized WIDTH-first, capped at the container, with height from the ratio.
   The obvious version — definite height, width:auto, aspect-ratio, max-width:100% —
   does not clamp: at 360px the 16:9 frame came out 356px wide inside a 324px column
   and pushed 14px of horizontal scroll onto the whole page. Deriving the width and
   letting min() cap it keeps the ratio exact at every size. */
.frame {
  --ar: 16 / 9;
  --arn: 1.7778;
  --fh: clamp(200px, 34vw, 400px);
  --accent-live: var(--accent);
  position: relative;
  width: min(100%, calc(var(--fh) * var(--arn)));
  height: auto;
  aspect-ratio: var(--ar);
  background: var(--ink);
  overflow: hidden;
  flex: none;
}
.frame[data-aspect="9:16"], .frame[data-ar="9:16"] { --ar: 9 / 16; --arn: .5625; }
.frame[data-aspect="1:1"],  .frame[data-ar="1:1"]  { --ar: 1 / 1;  --arn: 1; }
.frame[data-aspect="4:5"],  .frame[data-ar="4:5"]  { --ar: 4 / 5;  --arn: .8; }
/* All four widths sum to fh x (1.778 + 0.5625 + 1 + 0.8) = fh x 4.14, plus three
   gaps. At 280px that is 1262px against a 1240px container, so the 4:5 frame
   dropped to a second row and the section read as broken. 240px keeps the row
   intact from 1920 down to 768; below that it wraps to 2x2, which is correct. */
.live.cuts .frame { --fh: clamp(120px, 17vw, 240px); }
.live-stage .frame { --fh: clamp(200px, 25vw, 350px); }

.f-box { position: absolute; inset: 8.5%; display: flex; flex-direction: column; }
.f-rule {
  height: 2px; flex: none; background: var(--accent-live);
  transform-origin: 0 50%; transform: scaleX(0);
}
.f-head { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; }
.f-lines { width: 100%; font-weight: 600; line-height: 1.04; letter-spacing: -.022em; color: #F2EFE9; }
.f-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.f-w > i { display: block; font-style: normal; transform: translate3d(0, 110%, 0); }
.f-foot { display: flex; align-items: center; gap: 7px; flex: none; padding-top: 6%; }
.f-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-live); transform: scale(0); flex: none; }
.f-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: rgba(242,239,233,.45); opacity: 0;
}

/* -------------------------------------------------------------------- controls */
.controls { margin-top: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.c-lab { margin: 0; }
.c-lab label, .c-set legend {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); padding: 0;
}
#c-head {
  width: 100%; max-width: 24em;
  background: var(--white); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  padding: 10px 13px; border-radius: 0;
}
#c-head:hover { border-color: var(--ink-3); }

.c-set { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c-set legend { float: left; width: 100%; margin-bottom: 7px; }
.c-set label { cursor: pointer; }
.c-set input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-set span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 32px; padding: 0 10px;
  border: 1px solid var(--rule); background: var(--white);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  transition: border-color .14s, color .14s;
}
/* Swatch colours are CLASSES, not inline style attributes: the deployed CSP sets
   style-src 'self' with no unsafe-inline, which blocks style="" in markup. */
/* Qualified with .c-set span, because `.c-set span` is (0,1,1) and a bare `.sw1`
   is (0,1,0) — the generic rule's white background won and every swatch rendered
   blank. */
.c-set span.sw { min-width: 32px; border-color: transparent; }
.c-set span.sw1 { background: #DC3A0B; }
.c-set span.sw2 { background: #1D5BD6; }
.c-set span.sw3 { background: #0B7B84; }
.c-set span.sw4 { background: #A96B2E; }
.c-set label:hover span { border-color: var(--ink-3); color: var(--ink); }
.c-set input:checked + span { border-color: var(--ink); color: var(--ink); }
.c-set input:checked + span.sw { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.c-set input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================== 05 stack cards */
.sec-work { padding-bottom: clamp(40px, 6vh, 90px); }
.sc { --sc-top: calc(var(--head) + 18px); max-width: 1240px; margin: 0 auto; }
.sc-card {
  position: sticky;
  height: clamp(430px, 66vh, 580px);
  background: var(--white);
  border: 1px solid var(--rule);
  transform-origin: top center;
  will-change: transform;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(20px, 3vw, 38px);
  margin-bottom: clamp(22px, 3.4vw, 40px);
  overflow: hidden;
}
.sc-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sc-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.sc-card h3 {
  margin: 0 0 12px; font-size: clamp(19px, 2.3vw, 33px);
  font-weight: 600; letter-spacing: -.022em; line-height: 1.12;
}
.sc-card p { margin: 0; color: var(--ink-2); font-size: clamp(13.5px, 1.3vw, 16.5px); }
.sc-media { position: relative; overflow: hidden; background: var(--ink); min-width: 0; }
/* CONTAIN, not cover. These are films with type burned into them — a title card
   cropped at the sides is a broken title card, and the featured card's box is far
   from 16:9, so cover was cutting "Vaarahi Bliss" in half. */
.sc-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
  transform-origin: center; will-change: transform;
}
.sc-static .sc-card { position: relative; height: auto; }
.sc-static .sc-media { aspect-ratio: 16 / 9; }
.sc-static .sc-media video { position: relative; }

@media (max-width: 860px) {
  .sc-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: clamp(470px, 76vh, 640px);
  }
}
@media (max-width: 520px) { .sc { --sc-top: calc(var(--head) + 8px); } }

/* ============================================================================
   05 - THE WORK: every piece, grouped by the kind of brief

   Mixed aspects in one grid. A 16:9 card spans two columns and a 9:16 card one,
   which makes the mosaic without anything being cropped to fit a slot it was
   not composed for. Below 560px the grid is pinned to exactly two columns so
   `span 2` always has two columns to span - with auto-fill it could resolve to
   one, and the span would then invent an implicit column and overflow the page.
   ========================================================================= */
.wk-groups { max-width: 1240px; margin: 0 auto; display: grid; gap: clamp(38px, 5.4vw, 76px); }
.wk-head {
  display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 13px;
  margin-bottom: clamp(14px, 2.2vw, 24px);
}
.wk-h { margin: 0; font-size: clamp(16px, 1.9vw, 24px); font-weight: 600; letter-spacing: -.02em; }
.wk-b {
  margin: 0; font-family: var(--mono); font-size: clamp(10px, 1.02vw, 12px);
  letter-spacing: .07em; color: var(--ink-3);
}
.wk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  grid-auto-flow: row dense;   /* backfills the hole a 2-column card leaves */
  align-items: start;
}
.wk-169 { grid-column: span 2; }
.wk { margin: 0; min-width: 0; }
.wk-m {
  position: relative; overflow: hidden; background: var(--ink);
  border: 1px solid rgba(11, 14, 18, .12);
  transition: box-shadow .2s, transform .2s;
}
.wk:hover .wk-m, .wk:focus-within .wk-m {
  box-shadow: 0 18px 40px -22px rgba(11, 14, 18, .55);
  transform: translateY(-2px);
}
.wk-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .wk-m, .wk:hover .wk-m, .wk:focus-within .wk-m { transition: none; transform: none; }
}
.wk-169 .wk-m { aspect-ratio: 16 / 9; }
.wk-916 .wk-m { aspect-ratio: 9 / 16; }
.wk-v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.wk-c { padding-top: 10px; }
.wk-k {
  margin: 0 0 3px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
}
.wk-t { margin: 0 0 4px; font-size: clamp(13.5px, 1.25vw, 16px); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.24; }
.wk-n { margin: 0; font-size: clamp(11.5px, 1.02vw, 13px); line-height: 1.55; color: var(--ink-2); }

@media (max-width: 560px) { .wk-grid { grid-template-columns: repeat(2, 1fr); } }



.sc-n { margin-top: 10px !important; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; color: var(--ink-2) !important; }

/* ============================================================================
   THE GROUND

   Every section had the same paper under it, so scrolling read as one long
   column rather than as a sequence of chapters.

   BASELINE (no JS): each section paints its own ground. Differentiated, but
   with a hard edge at every boundary.

   ENHANCED: a single fixed backdrop is washed between those colours as you
   scroll, interpolating between the CENTRE of one section and the centre of the
   next, so there is no edge anywhere — the page changes under you without ever
   showing a seam. The sections go transparent so the backdrop is what you see.
   ========================================================================= */
#strip { background: var(--g1); }
#best  { background: var(--g2); }
#wall  { background: var(--g3); }
#ch02  { background: var(--g4); }
#ch03  { background: var(--g5); }
#ai    { background: var(--g6); }
#ch04  { background: var(--g7); }
#ch05  { background: var(--g8); }
#ch06  { background: var(--g9); }

.page-bg {
  position: fixed; inset: 0; z-index: -1;
  background: var(--paper); pointer-events: none;
}
.ground-js #strip, .ground-js #best, .ground-js #wall, .ground-js #ch02,
.ground-js #ch03, .ground-js #ai, .ground-js #ch04, .ground-js #ch05,
.ground-js #ch06 {
  background: transparent;
}
/* the rules between sections are what made the seam obvious; with a continuous
   wash they are no longer doing any work */
.ground-js .sec { border-bottom-color: transparent; }

/* the piece-count that chapter 02 now carries per strand */
.s-c {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-3); text-align: right; white-space: nowrap;
}
.s-c::after { content: ' pcs'; }

/* ---------------------------------------------------------- the hero picks */
/* Four films on the first screen. The thumbnails are buttons, not decoration:
   the whole point is that a visitor can choose, and that the same premium film
   is there in both 16:9 and 9:16 to be compared side by side. */
.show-picks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, .8vw, 11px); margin-top: 12px;
}
.pick {
  position: relative; display: block; padding: 0; cursor: pointer; min-width: 0;
  background: var(--ink); border: 1px solid var(--rule);
  transition: border-color .16s, transform .16s;
}
.pick img { display: block; width: 100%; height: clamp(46px, 5.4vw, 74px); object-fit: cover; opacity: .62; transition: opacity .16s; }
.pick-l {
  display: block; padding: 5px 7px 6px; text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-l b { font-weight: 400; opacity: .62; }

/* Four picks across a phone leaves ~80px per label, which truncated every one of
   them to "VAARAHI B…" and cut the aspect off entirely — and the aspect is the
   point of shipping the same film twice. Two columns, and they read.
   BELOW the base rule on purpose: this sat above it and lost, because a media
   query adds no specificity (same trap as the --fh overrides). */
@media (max-width: 560px) {
  .show-picks { grid-template-columns: repeat(2, 1fr); }
  .pick img { height: clamp(52px, 15vw, 78px); }
}

/* Stacked between 561 and 1100 the four picks share the full width, but at
   1024x768 that still clipped "MAISON LORMEL 16:9". Tighter tracking buys the
   characters back without dropping to two rows, which the fold cannot spare. */
@media (min-width: 561px) and (max-width: 1100px) {
  .pick-l { font-size: 9.5px; letter-spacing: .05em; padding-inline: 6px; }
}
.pick:hover img, .pick:focus-visible img { opacity: .9; }
.pick:hover { transform: translateY(-2px); }
.pick[aria-selected="true"] { border-color: var(--accent); }
.pick[aria-selected="true"] img { opacity: 1; }
.pick[aria-selected="true"] .pick-l { color: var(--accent); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pick, .pick:hover { transition: none; transform: none; } }

/* ------------------------------------------------------------------- tags */
/* What is actually IN a piece — 3D, score, voiceover, stock. A claim about
   craft, so it is per-clip in the catalogue and never inherited by category. */
.tg { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.tg li {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--rule); padding: 4px 8px; white-space: nowrap;
}
.tg-hero li { font-size: 10.5px; padding: 5px 10px; }

/* ------------------------------------------------ we use AI, we are not AI */
/* The one dark band on the page. It earns it: this is the paragraph a visitor
   is most likely to have arrived already suspicious about, and giving it its
   own ground stops it reading as another feature blurb. */
.sec-ai { color: var(--paper); border-bottom: none; }
.sec-ai .num, .sec-ai .ai-k { color: var(--accent-dark) !important; }
.ai-in { max-width: 1240px; margin: 0 auto; }
.sec-ai .num { color: var(--accent); }
.sec-ai h2 { max-width: 18ch; margin: 0 0 clamp(30px, 5vh, 56px); color: var(--paper); }
.ai-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(22px, 4vw, 64px);
}
.ai-col p { margin: 0; color: rgba(242, 239, 233, .74); font-size: clamp(14.5px, 1.35vw, 17.5px); line-height: 1.6; }
.ai-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent) !important; margin: 0 0 12px !important;
}
/* qualified: `.sec p` is (0,1,1) and beat a bare `.ai-foot` (0,1,0), so the
   closing line rendered in ink on the one dark band on the site. */
.sec-ai .ai-foot {
  margin: clamp(30px, 5vh, 56px) 0 0; padding-top: clamp(18px, 2.6vw, 28px);
  border-top: 1px solid rgba(242, 239, 233, .18);
  font-size: clamp(15px, 1.6vw, 21px); font-weight: 500; letter-spacing: -.015em;
  color: var(--paper); max-width: 44ch;
}

/* ------------------------------------------------------------ back to top */
/* Shows while the page is being scrolled, holds for two seconds after it stops,
   then fades. Keyboard focus brings it back and keeps it: it is a real control,
   so it must never be reachable-but-invisible. */
.totop {
  position: fixed; right: clamp(14px, 2.4vw, 30px); bottom: clamp(14px, 2.4vw, 30px);
  z-index: 38; width: 46px; height: 46px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s, transform .28s, visibility .28s, background .16s;
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--accent); border-color: var(--accent); }
.totop:focus-visible {
  opacity: 1; visibility: visible; transform: none;
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.totop svg { width: 17px; height: 17px; display: block; }
@media (prefers-reduced-motion: reduce) { .totop { transition: opacity .01s, visibility .01s; } }

/* ------------------------------------------------- sound, on every player */
/* Injected by JS onto each film. Hover-revealed native controls made the audio
   effectively undiscoverable; this says there is something to hear. */
.v-sound {
  /* TOP-left. Not bottom-right, because the back-to-top arrow is fixed there and
     collides with it at some scroll position on every screen; and not bottom-left
     either, because that is where the browser's own control bar appears the
     moment a film is played. */
  position: absolute; left: 8px; top: 8px; z-index: 3;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 14, 18, .66); color: var(--paper);
  border: 1px solid rgba(242, 239, 233, .3); border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background .16s, border-color .16s, opacity .16s;
}
.v-sound:hover { background: var(--accent); border-color: var(--accent); }
.v-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v-sound[data-on="1"] { background: var(--accent); border-color: var(--accent); }
/* speaker cone, plus a slash when muted */
.v-i {
  position: relative; display: block; width: 15px; height: 13px;
}
.v-i::before {
  content: ""; position: absolute; left: 0; top: 3px;
  border-style: solid; border-width: 3.5px 6px 3.5px 0;
  border-color: transparent currentColor transparent transparent;
}
.v-i::after {
  content: ""; position: absolute; left: 8px; top: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.6px solid currentColor; border-left-color: transparent;
  border-bottom-color: transparent; opacity: 0;
}
.v-sound[data-on="1"] .v-i::after { opacity: 1; }
.v-sound[data-on="0"] .v-i::after {
  opacity: 1; width: 13px; height: 0; border: 0; border-top: 1.6px solid currentColor;
  border-radius: 0; transform: rotate(-38deg); top: 6px; left: 3px;
}
@media (prefers-reduced-motion: reduce) { .v-sound { transition: none; } }


/* ============================================================================
   THE CAROUSEL  —  Snap Carousel, @ddoemonn (21st 23559)

   Only below 760px. Above it, .sc-view and .sc-track are display:contents, so
   the three cards remain direct children of .sc and the sticky stacking cards
   work exactly as they did.
   ========================================================================= */
.sc-view, .sc-track { display: contents; }
.sc-nav { display: none; }
.sc-live { position: absolute; }

@media (max-width: 760px) {
  .sc { display: block; }
  .sc-view {
    display: block; position: relative; overflow: hidden;
    padding-inline: var(--peek, 26px);
    outline: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px,
      #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px,
      #000 calc(100% - 40px), transparent 100%);
  }
  .sc-view:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 4px; }
  .sc-track { display: flex; align-items: stretch; will-change: transform; cursor: grab; }
  .sc-track.is-dragging { cursor: grabbing; }
  .sc-card {
    position: static !important; top: auto !important;
    flex: none; width: 100%;
    transition: transform .18s, opacity .18s;
  }
  .sc-track.is-dragging .sc-card { transition: none; }
  .sc-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-top: 16px;
  }
  .sc-dots { display: inline-flex; align-items: center; gap: 3px; }
  .sc-dot {
    display: grid; place-items: center; width: 18px; height: 20px;
    padding: 0; background: none; border: 0; cursor: pointer;
  }
  .sc-dot i {
    display: block; width: 15px; height: 5px; background: var(--ink);
    transition: transform .22s cubic-bezier(.2,.9,.25,1), opacity .22s;
  }
  .sc-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sc-arrows { display: inline-flex; gap: 8px; }
  .sc-prev, .sc-next {
    display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
    background: var(--paper); border: 1px solid var(--rule); cursor: pointer;
    color: var(--ink); border-radius: 50%;
  }
  .sc-prev svg, .sc-next svg { width: 17px; height: 17px; }
  .sc-prev:hover, .sc-next:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .sc-prev:focus-visible, .sc-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-card, .sc-dot i { transition: none; }
}

/* ============================================================================
   THE WORK  —  seven boxes, each expanding into a panel
   Expandable Card, @aghasisahakyan1 (21st 4073)
   ========================================================================= */
.cat-grid {
  display: grid; gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 30vw, 330px), 1fr));
}
.cat {
  display: flex; flex-direction: column; gap: 0; padding: 0; cursor: pointer;
  text-align: left; background: var(--paper); border: 1px solid var(--rule);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cat:hover {
  border-color: var(--ink); transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(11, 14, 18, .5);
}
.cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* three stills off the strand's own films */
.cat-shots { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; background: var(--ink); }
.cat-shots img { display: block; width: 100%; height: clamp(96px, 12vw, 132px); object-fit: cover; }
.cat-shots img:nth-child(1) { grid-row: span 1; }
.cat-body { display: block; padding: clamp(13px, 1.5vw, 18px) clamp(13px, 1.5vw, 18px) 8px; }
.cat-h {
  display: block; font-size: clamp(16px, 1.6vw, 21px); font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.cat-b {
  display: block; margin-top: 5px; font-size: clamp(12.5px, 1.15vw, 14px);
  line-height: 1.45; color: var(--ink-2);
}
.cat-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px clamp(13px, 1.5vw, 18px) clamp(13px, 1.5vw, 18px);
  margin-top: auto;
}
.cat-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.cat-go {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule);
  position: relative; flex: none; transition: background .18s, border-color .18s;
}
.cat-go::before, .cat-go::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%);
}
.cat-go::after { transform: translate(-50%, -50%) rotate(90deg); }
.cat:hover .cat-go { background: var(--accent); border-color: var(--accent); }
.cat:hover .cat-go::before, .cat:hover .cat-go::after { background: var(--white); }

/* ---- the backdrop and the panel ---- */
.panel-back-drop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(242, 239, 233, .55); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s;
}
.panel-back-drop.on { opacity: 1; }
.panel {
  position: fixed; z-index: 61;
  inset: clamp(10px, 3vh, 46px) clamp(10px, 4vw, 60px);
  max-width: 1180px; margin-inline: auto;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 50px 120px -60px rgba(11, 14, 18, .7);
  overflow: hidden;
}
@media (max-width: 700px) { .panel { inset: 0; border: 0; } }
.panel-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 10px clamp(12px, 2vw, 22px);
  border-bottom: 1px solid var(--rule); background: var(--paper);
}
.panel-back {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  padding: 9px 14px 9px 10px; background: none; border: 1px solid var(--rule); color: var(--ink);
  transition: background .16s, color .16s, border-color .16s;
}
.panel-back svg { width: 15px; height: 15px; }
.panel-back:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel-h {
  margin: 0; flex: 1 1 auto; min-width: 0; outline: none;
  font-size: clamp(14px, 1.7vw, 20px); font-weight: 600; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-h span {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); margin-left: 8px;
}
.panel-x {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  padding: 0; cursor: pointer; border-radius: 50%;
  background: none; border: 1px solid var(--rule); color: var(--ink);
  transform: rotate(45deg);            /* the + becomes an x, as in the original */
  transition: background .16s, color .16s, border-color .16s, transform .4s;
}
.panel-x svg { width: 19px; height: 19px; }
.panel-x:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.panel-back:focus-visible, .panel-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 2.4vw, 30px);
}
.panel-b { margin: 0 0 clamp(14px, 2vw, 22px); color: var(--ink-2); max-width: 60ch; }
.panel .wk-grid { margin: 0; }
/* the page must not scroll behind an open panel */
.panel-open, .panel-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .panel-back-drop, .panel, .cat, .panel-x { transition: none; }
}

/* ====================================================================== 06 end */
.sec-end { border-bottom: 0; }
.end-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px); align-items: start;
}
@media (max-width: 900px) { .end-grid { grid-template-columns: 1fr; } }

.process { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.process li { counter-increment: step; position: relative; padding: 0 0 20px 46px; color: var(--ink-2); }
.process li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .2em;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.process strong { color: var(--ink); font-weight: 600; }

.enq { background: var(--white); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 34px); }
/* off-screen, never display:none — some bots read that as a signal not to fill it */
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.enq-f { margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.enq-f label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.enq input, .enq textarea {
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--sans); font-size: 16px; padding: 11px 13px;
  border-radius: 0; width: 100%; resize: vertical;
}
.enq input:hover, .enq textarea:hover { border-color: var(--ink-3); }
.enq textarea::placeholder { color: var(--ink-4); }
.enq-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 0; }
.enq button {
  font-family: var(--mono); font-size: 13px; letter-spacing: .05em;
  color: var(--white); background: var(--accent);
  border: 0; border-radius: 0; padding: 13px 24px; cursor: pointer;
  transition: background .16s;
}
.enq button:hover { background: var(--ink); }
.enq-send span { font-size: 14px; color: var(--ink-3); }
.enq-send a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.enq-send a:hover { border-bottom-color: var(--accent); }

/* ====================================================================== footer */
.foot {
  padding: clamp(28px, 4vw, 52px) var(--pad);
  border-top: 1px solid var(--rule);
  background: var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--ink-3);
}
.foot img { height: 26px; width: auto; }
.foot p { margin: 0; }
.foot-r { margin-left: auto; }
@media (max-width: 560px) { .foot-r { margin-left: 0; } }

/* ============================================================================
   IMAGERY  —  the hero fan, the wall, the grain

   Every still on this page is a frame from one of our own four films, pulled by
   tools/frames.py. No stock: a studio that shows stock is telling you it has
   nothing of its own.
   ========================================================================= */

/* ---- film grain, as an SVG filter, no image request ---- */
.hero-grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .38; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   HERO LAYOUT — copy left, the live reel right.

   The fan of three stills that used to sit here is gone along with its CSS; a
   photograph of our work is a weaker argument than our work running.

   On a phone the two columns stack, and the ORDER MATTERS: measured, the reel
   started at y=739 in an 844px viewport and y=795 in a 780px one, i.e. the one
   thing that proves what we do fell off the first screen. So below 1100 the
   copy block dissolves into the grid (display: contents) and the stage is
   re-ordered to sit directly under the headline — hook, proof, then the
   explanation and the buttons.

   The stage holds no focusable elements, so `order` moves pixels without
   touching tab order; the DOM keeps the reading order a screen reader gets.
   ------------------------------------------------------------------------- */
.hero-in {
  display: grid;
  /* 40 / 60 — the work gets the larger half of the first screen */
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
}
.hero-copy { min-width: 0; }

/* Two-column hero: the copy column is ~40% of 1240, so type sized against the
   VIEWPORT overflows it. Both of these are sized against the column instead. */
@media (min-width: 1101px) {
  .hero-in { max-width: 1360px; }
  .hero h1 { font-size: clamp(30px, 3.5vw, 52px); max-width: 15ch; }
  .hero .lead { font-size: clamp(15px, 1.25vw, 18.5px); max-width: 40ch; }
  .hero-logo img { width: 100%; }   /* fills its column; see the gate's colRatio bar */
}

/* Stacks at 1100 EXCEPT on a short landscape viewport. A 1024x768 tablet has
   width to spare and no height at all: stacked, the film landed 190px past the
   fold, and two columns put it back on the first screen. */
@media (max-width: 1100px) and (min-height: 861px), (max-width: 699px) {
  .hero-in { grid-template-columns: 1fr; row-gap: 0; }
  /* the copy's children become grid items so the stage can be interleaved
     between them rather than pushed below the whole block */
  .hero-copy { display: contents; }
  /* row-gap is 0 on purpose: every one of these carries its own bottom margin,
     and a gap on top of that doubled the hero's height */
  .lead { order: 1; }
  .hero-cta { order: 2; }
  .hero-note { order: 3; }
  .hero-show { margin-bottom: clamp(22px, 3.4vh, 34px); }
  /* stacked, the whole column has to reach the switcher inside one screen; at
     768x1024 it was overshooting by 11px */
  .hero-logo { margin-bottom: clamp(12px, 2vh, 24px); }
  .show-hud { margin-bottom: 2px; }
  .show-cap { margin-top: 12px; }
  .pick img { height: clamp(38px, 4.8vw, 60px); }
}

/* A landscape tablet is the hard case: stacked, but only 768px of height to
   stack into, which put the reel 65px past the fold. Everything here scales
   against HEIGHT rather than width — the logo included, since 82vw of 1024 is
   a 206px-tall logo in a 768px window. Held above 700px wide so a phone in
   portrait, which has the width problem and not the height one, is untouched. */
@media (min-width: 700px) and (max-width: 1100px) and (max-height: 860px) {
  .hero-in { max-width: 1040px; }
  .hero h1 { font-size: clamp(26px, 3.2vw, 38px); max-width: 15ch; }
  .hero .lead { font-size: clamp(13.5px, 1.5vw, 16px); max-width: 38ch; }
  .hero-logo img { width: 100%; }
  .hero-logo { margin-bottom: clamp(10px, 1.6vh, 18px); }
  .eyebrow { margin-bottom: clamp(8px, 1.4vh, 16px); }
  h1 { margin-bottom: clamp(10px, 1.6vh, 18px); }
  .hero-show { gap: 8px; }
}

/* ================================================================== the wall */
.wall { position: relative; height: 300vh; background: var(--paper); }
.wall-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: clamp(10px, 2vh, 28px) 0;
}
/* A dark PLATE on a light page — a screen, not a black website. The section's
   ground stays paper. */
.uf-plate {
  position: relative;
  width: 90%; max-width: 1760px; height: 88svh;
  background: #090C10;
  overflow: hidden;
  border-radius: 44px;
}
.uf-viewport {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 1000px;
  pointer-events: none;
}
.uf-matrix {
  display: flex; gap: clamp(10px, 1.3vw, 24px);
  width: 132vw; height: 155vh;
  align-items: center; justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.uf-col {
  display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 24px);
  width: 22vw; min-width: 170px;
  will-change: transform;
}
.uf-col img {
  width: 100%; height: clamp(120px, 15vw, 260px);
  object-fit: cover; display: block;
  background: #111; opacity: .95;
}
/* the original's inset shadow box — it is what stops the grid having visible ends */
.uf-edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow:
    inset 0 110px 150px -60px #090C10, inset 0 -110px 150px -60px #090C10,
    inset 150px 0 150px -60px #090C10, inset -150px 0 150px -60px #090C10;
}

/* the veil the cursor cuts through */
.sp-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* HUSHED, NOT HIDDEN. At .72 with a 7px blur the resting wall was a near-black
     rectangle — and the resting state is what most people see, because they have
     not moved the cursor yet and on a phone they never will. The reveal still
     reads clearly at .44 because the hole also clears the blur. */
  background: rgba(9, 12, 16, .44);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .3s;
}
.sp-off .sp-veil { background: rgba(9, 12, 16, .14); backdrop-filter: none; -webkit-backdrop-filter: none; }

.wall-cap {
  position: absolute; z-index: 4;
  left: clamp(20px, 4vw, 64px); right: clamp(20px, 4vw, 64px);
  bottom: clamp(22px, 5vh, 58px);
  pointer-events: none;
}
.wall-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.wall-cap h2 {
  margin: 0 0 10px; max-width: 20ch;
  font-size: clamp(24px, 3.6vw, 52px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.026em; color: #F2EFE9;
}
.wall-note {
  margin: 0; font-family: var(--mono); font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(242, 239, 233, .5);
}

/* reduced motion: a flat, readable wall — still imagery, no flight */
.wall.uf-static { height: auto; }
.uf-static .wall-sticky { position: static; height: auto; }
.uf-static .uf-plate { width: 100%; height: auto; border-radius: 0; padding: 0; }
.uf-static .uf-viewport { position: static; perspective: none; }
.uf-static .uf-matrix { width: 100%; height: auto; align-items: stretch; }
.uf-static .uf-col { width: 25%; }
.uf-static .uf-col img:nth-child(n+7) { display: none; }
.uf-static .uf-edge { display: none; }
.uf-static .wall-cap { position: static; padding: clamp(20px, 4vw, 48px); }

@media (max-width: 700px) {
  .wall { height: 240vh; }
  .uf-plate { width: 94%; border-radius: 26px; }
  .uf-matrix { width: 190vw; }
  .uf-col { width: 44vw; min-width: 130px; }
  .uf-col:nth-child(4) { display: none; }
}

/* ============================================================================
   THE HERO'S FILM

   60% of the first screen. A silent 12s loop autoplays; the full cut with score
   and voiceover replaces it, unmuted and with controls, only when asked for.
   ========================================================================= */
.hero-show { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.show-hud {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px);
  font-family: var(--mono); font-size: clamp(9.5px, .95vw, 11.5px);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.hud-live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.hud-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: hud-pulse 2s ease-in-out infinite;
}
@keyframes hud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
.hud-ar { color: var(--ink-2); }
.hud-n { margin-left: auto; }
@media (max-width: 520px) { .hud-n { display: none; } }

.show-box { margin: 0; }
/* the control is anchored HERE, not on .show-box — that included the caption, so
   the button landed on top of the sentence underneath the film */
.show-media { position: relative; }
.show-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--ink); object-fit: cover;
  border: 1px solid rgba(11, 14, 18, .12);
  box-shadow: 0 30px 70px -34px rgba(11, 14, 18, .6);
}
/* Sits BELOW the film, not on it. Over the picture it covered the frame's own
   type, and once sound is on the player's native controls carry mute anyway. */
.show-act { margin: 0; }
.btn-sound {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  padding: 11px 18px; border: 1px solid var(--ink); background: none; color: var(--ink);
  transition: background .16s, color .16s;
}
.btn-sound:hover { background: var(--ink); color: var(--paper); }
.btn-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-sound[data-on="1"] { border-color: var(--accent); color: var(--accent); }
.ss-i {
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}
/* Two columns: the words left, the sound control hard right — where a player
   control is looked for, and where the user asked for it. */
.show-cap {
  margin: 14px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(14px, 2vw, 30px); align-items: start;
}
.show-cap > .show-k, .show-cap > .show-t, .show-cap > .show-n, .show-cap > .tg { grid-column: 1; }
.show-act { grid-column: 2; grid-row: 1 / span 4; align-self: end; justify-self: end; }
@media (max-width: 560px) {
  .show-cap { grid-template-columns: 1fr; }
  .show-act { grid-column: 1; grid-row: auto; justify-self: start; }
}
.show-k {
  margin: 0 0 4px; font-family: var(--mono); font-size: clamp(9.5px, .95vw, 11.5px);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.show-t { margin: 0 0 6px; font-size: clamp(16px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.015em; }
/* ink-2, not ink-3: this is a sentence someone reads, and ink-3 sits at ~2.9:1
   on paper. ink-3 stays for micro-labels and HUD text only. */
.show-n { margin: 0; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; color: var(--ink-2); max-width: 52ch; }

@media (prefers-reduced-motion: reduce) { .hud-live i { animation: none; } }

/* ============================================================================
   THE RIBBON  —  text only, and slow

   Replaces the perspective strip of film stills. Next to nineteen real films a
   tilted, blurred belt of thumbnails read as decoration; a line of type naming
   what the studio actually sells reads as a studio. It is also the only place
   that can name the work with no film to show: business cards, websites, logos.
   ========================================================================= */
.strip { border-block: 1px solid var(--rule); background: var(--surface); padding: 0; }
.tm {
  position: relative; overflow: hidden;
  padding: clamp(18px, 2.6vw, 34px) 0;
}
.tm-track { display: flex; width: max-content; will-change: transform; }
.tm-group { display: flex; align-items: center; }
.tm-i {
  flex: none;
  font-size: clamp(13px, 1.35vw, 19px);
  font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.tm-d {
  flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .85;
  margin: 0 clamp(20px, 3vw, 46px);
}
.tm-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 0%, rgba(251,250,247,0) 9%,
    rgba(251,250,247,0) 91%, var(--surface) 100%);
}
.ground-js .tm-fade { background: none; }   /* the wash owns the ground now */
.tm-static .tm-track { width: auto; overflow-x: auto; }
.tm-static .tm-group { flex-wrap: wrap; gap: 10px 0; justify-content: center; }