/* ============================================================
   MAINFRAME — Public Website
   Responsive, full-bleed, scroll-driven. GoDaddy-compatible static site.
   ============================================================ */

/* Fonts — Google Fonts (CDN). Geist has wght-only axis; italic "AI" is faux-italic.
   Playfair Display Italic 700 is loaded for editorial bold-italic accents. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Instrument+Serif:ital,wght@0,400;1,400&family=Playfair+Display:ital,wght@1,700&display=swap');

:root {
  --bone:        #F2EBDD;
  --bone-soft:   #F8F3E7;
  --bone-deep:   #E8DFC9;
  --bone-line:   #DCD2BB;
  --ink:         #1A1814;
  --ink-soft:    #4A463F;
  --ink-mute:    #7A746B;
  --ink-faint:   #B5AE9F;
  --rust:        #B84E2F;
  --rust-deep:   #8A3A1F;
  --ember:       #E8A82D;
  --clay:        #9C6244;

  --font-sans:  'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  --hairline: rgba(26,24,20,0.10);
  --hairline-bone: rgba(242,235,221,0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   NAV — fixed top, translucent → solid on scroll
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px clamp(24px, 4vw, 80px);
  /* On notched / dynamic-island devices push the nav below the safe area */
  padding-top: max(24px, env(safe-area-inset-top, 24px));
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(24px, 4vw, 56px);
  background: transparent;
  transition: background 400ms var(--ease-out), backdrop-filter 400ms var(--ease-out), border-bottom 400ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: rgba(242, 235, 221, 0.88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.nav-wordmark {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.nav-wm-img {
  display: block;
  height: clamp(20px, 2.2vw, 28px);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.nav.solid .nav-wordmark {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.nav-links { display: flex; gap: clamp(20px, 3vw, 36px); align-items: center; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.nav.solid .nav-links a { color: var(--ink); }
.nav-links a:hover { border-bottom-color: var(--rust); color: var(--rust); }
.nav-links a.is-active { border-bottom-color: var(--rust); color: var(--rust); }
.nav.solid .nav-links a.is-active { color: var(--rust); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 18px;
  background: var(--rust);
  color: var(--bone);
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  transition: background 240ms var(--ease-out);
}
.nav-cta:hover { background: var(--rust-deep); }

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ============================================================
   FLOATING JUMP NAVIGATION (mobile) — hamburger + section index
   ============================================================ */
.nav-fab { display: none; }
.jump-menu { display: none; }

@media (max-width: 720px) {
  .nav-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 220;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--rust);
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: background 220ms var(--ease-out);
  }
  .nav-fab:active { background: var(--rust-deep); }
  .nav-fab-bars { position: relative; width: 22px; height: 14px; }
  .nav-fab-bars i {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--bone); border-radius: 2px;
    transition: top 260ms var(--ease-out), transform 260ms var(--ease-out), opacity 180ms var(--ease-out);
  }
  .nav-fab-bars i:nth-child(1) { top: 0; }
  .nav-fab-bars i:nth-child(2) { top: 6px; }
  .nav-fab-bars i:nth-child(3) { top: 12px; }
  .jump-open .nav-fab-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .jump-open .nav-fab-bars i:nth-child(2) { opacity: 0; }
  .jump-open .nav-fab-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .jump-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(26, 24, 20, 0.97);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--ease-out);
  }
  .jump-open .jump-menu { opacity: 1; pointer-events: auto; }

  .jump-menu-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.8vh, 26px);
    padding: 0 34px;
  }
  .jump-menu-key {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 6px;
  }
  .jump-menu-panel a {
    font-family: var(--font-mono);
    font-size: clamp(24px, 7.4vw, 36px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bone);
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), color 180ms var(--ease-out);
  }
  .jump-open .jump-menu-panel a { opacity: 1; transform: translateX(0); }
  .jump-open .jump-menu-panel a:nth-child(2) { transition-delay: 60ms; }
  .jump-open .jump-menu-panel a:nth-child(3) { transition-delay: 100ms; }
  .jump-open .jump-menu-panel a:nth-child(4) { transition-delay: 140ms; }
  .jump-open .jump-menu-panel a:nth-child(5) { transition-delay: 180ms; }
  .jump-open .jump-menu-panel a:nth-child(6) { transition-delay: 220ms; }
  .jump-open .jump-menu-panel a:nth-child(7) { transition-delay: 260ms; }
  .jump-open .jump-menu-panel a:nth-child(8) { transition-delay: 300ms; }
  .jump-menu-panel a:active { color: var(--ember); }
  .jump-menu-panel a.is-active { color: var(--ember); }
  .jm-cta {
    margin-top: clamp(10px, 2vh, 20px);
    color: var(--rust) !important;
  }
}
.hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--ink);
}
.hero-video, .hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video { z-index: 1; }
.hero-poster { z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,24,20,0.65) 0%, rgba(26,24,20,0.25) 28%, rgba(26,24,20,0.18) 60%, rgba(26,24,20,0.75) 100%);
  z-index: 2;
}

/* Mobile-only stacked hero composition — hidden on desktop */
.hero-mobile { display: none; }

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: clamp(96px, 12vh, 160px) clamp(24px, 4vw, 80px) clamp(48px, 6vh, 80px);
  color: var(--bone);
}

/* ── Hero stack: Writers scenario / brand + strap / Filmmakers scenario ── */
.hero-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 5vh, 60px);
  width: 100%;
  max-width: 1180px;
  margin: auto 0;
  padding: clamp(28px, 4vh, 56px) clamp(30px, 4vw, 64px);
}

/* Viewfinder corner brackets — film-frame language */
.hero-bracket {
  position: absolute;
  width: clamp(24px, 3vw, 56px);
  height: clamp(24px, 3vw, 56px);
  border: clamp(1.5px, 0.16vw, 2.5px) solid var(--bone);
  opacity: 0.85;
  pointer-events: none;
}
.hero-bracket.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero-bracket.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hero-bracket.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hero-bracket.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero-beat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.4vh, 18px);
}
.hero-beat--writers,
.hero-beat--filmmakers { }
.hero-beat-label {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
}
.hero-beat-num { color: var(--ember); font-weight: 600; }
.hero-beat-rule {
  flex: 1;
  height: 1px;
  background: var(--bone);
  opacity: 0.4;
}
.hero-beat-line {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0;
  text-wrap: balance;
}
.hero-beat-line .it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ember);
}

/* Brand sits on the video — transparent ground, just the bone wordmark + strap.
   Block is sized to the wordmark so the strap can right-align to its edge. */
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  gap: clamp(10px, 1.4vh, 18px);
}
.hero-strap {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-align: right;
  /* logo PNG carries ~0.8% transparent padding each side — keep strap flush to the visible mark */
  padding-right: 0.8%;
}

/* The lockup: studio overline on the LEFT, wordmark + small mark on the RIGHT.
   Centered vertically as a group on the hero. */
.hero-lockup {
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 56px);
  opacity: 0; transform: translateY(20px);
  animation: hero-rise 1200ms var(--ease-out) 500ms forwards;
  flex-wrap: wrap;
}

.hero-overline {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.9vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  text-align: left;
  font-weight: 400;
  border-left: 1.5px solid var(--rust);
  padding-left: clamp(14px, 1.2vw, 22px);
}

.hero-lockup .ai { font-style: italic; }

/* The block + wordmark — one inseparable unit so the block stays inline
   to the left of the M and doesn't wrap onto its own line. */
.hero-mainmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

/* The image-based wordmark — height-based on desktop (original sizing).
   Mobile/narrow uses width-based sizing via the @media block below to
   prevent the 8.1:1 lockup from being squashed by viewport clamping. */
.hero-wordmark-img {
  display: block;
  width: clamp(300px, 64vw, 1040px);
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-bottom {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .hero-lockup { flex-direction: column; gap: 20px; }
  .hero-overline { border-left: 0; border-top: 1.5px solid var(--rust); padding: 14px 0 0; text-align: center; }
  .hero-lockup .lockup-block { margin-top: 4px; }
}
.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  color: var(--bone);
  margin: 0;
  max-width: 18ch;
  opacity: 0; transform: translateY(20px);
  animation: hero-rise 1200ms var(--ease-out) 1200ms forwards;
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-line);
  text-align: right;
  opacity: 0; transform: translateY(20px);
  animation: hero-rise 1200ms var(--ease-out) 1500ms forwards;
}
.hero-meta div { margin-top: 4px; }
.hero-meta .rust { color: var(--ember); }

@media (max-width: 540px) {
  .hero-bottom { justify-content: center; text-align: center; }
  .hero-meta { text-align: center; }
}

/* ============================================================
   MOBILE HERO — cinematic letterbox layout.
   On portrait viewports the hero video sits as a real landscape
   16:9 band (not cropped to fill the viewport). Content stacks
   above and below the band, on an ink background — like a film
   frame in a cinema.
   ============================================================ */
@media (max-width: 720px) {
  /* Card videos: keep landscape inside their 16:9 thumbnails */
  .what-card .still { background-color: var(--ink); }
  .what-card .still-video { object-fit: cover; object-position: center; }

  /* Hero on mobile: a 3-row CSS grid. The video band and the wordmark
     occupy the SAME middle row ("stage"), so the wordmark naturally
     overlays the video while the overline and tagline sit cleanly above
     and below. */
  .hero {
    height: auto;
    min-height: 100vh;
    background: var(--ink);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "overline"
      "stage"
      "bottom";
    align-content: center;
    align-items: center;
    gap: clamp(28px, 5vh, 56px);
    padding: clamp(96px, 14vh, 140px) 0 clamp(48px, 8vh, 96px);
  }

  /* Dissolve wrappers so children can be addressed by grid-area directly */
  .hero-content { display: contents; color: var(--bone); }
  .hero-lockup { display: contents; }

  /* Overline → top row */
  .hero-overline {
    grid-area: overline;
    border-left: 0;
    border-top: 1.5px solid var(--rust);
    padding: 14px 0 0;
    text-align: center;
    letter-spacing: 0.22em;
    font-size: clamp(15px, 4vw, 18px);
    color: var(--bone-line);
    line-height: 1.4;
    justify-self: center;
  }

  /* Video band → middle row, full-bleed landscape */
  .hero-video,
  .hero-poster {
    grid-area: stage;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }
  .hero-poster { display: none; }
  .hero-overlay { display: none; }

  /* Wordmark → ALSO middle row, sits on top of the video band */
  .hero-mainmark {
    grid-area: stage;
    z-index: 5;
    justify-self: center;
    align-self: center;
    pointer-events: none;
    /* Subtle drop shadow so the wordmark holds against bright frames */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
  }
  .hero-wordmark-img {
    width: min(92vw, 540px);
    height: auto;
    max-width: 100%;
  }

  /* Tagline + meta → bottom row */
  .hero-bottom {
    grid-area: bottom;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 0 28px;
    color: var(--bone);
  }
  .hero-tagline {
    font-size: clamp(22px, 7vw, 34px);
    max-width: none;
    margin: 0;
    color: var(--bone);
  }
  .hero-meta {
    text-align: center;
    color: var(--bone-line);
  }

  /* Hide the scroll-cue on mobile */
  .scroll-cue { display: none; }

  /* Nav: ensure it clears the iPhone dynamic island / status bar.
     The iOS status bar is ~62px tall; we push the nav down enough that
     links and the CTA pill never sit behind device chrome. */
  .nav {
    padding-top: max(72px, calc(env(safe-area-inset-top, 24px) + 12px));
  }
}

.scroll-cue {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-line);
  opacity: 0;
  animation: hero-rise 1200ms var(--ease-out) 1800ms forwards, scroll-bob 2400ms ease-in-out 2200ms infinite;
}
.scroll-cue::after {
  content: '↓';
  display: block; margin-top: 6px;
  font-size: 16px; color: var(--rust);
}

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   SECTIONS — scroll reveal
   ============================================================ */
section {
  padding: clamp(96px, 14vh, 200px) clamp(24px, 5vw, 96px);
  position: relative;
}
.section-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
}
.section-head {
  display: flex; align-items: baseline; gap: 32px;
  margin-bottom: clamp(40px, 6vh, 96px);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 120px);
  letter-spacing: -0.032em;
  line-height: 0.95;
  margin: 0;
  flex: 1;
  text-wrap: balance;
}
.section-head h2 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

/* Section sub-line — sits beneath the headline, mid-tone weight. */
.section-sub {
  flex-basis: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 32ch;
}
.section-sub em {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* Slide-in reveal — driven by JS IntersectionObserver */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal-right.in { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: scale(1); }

.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }
.reveal-delay-4 { transition-delay: 480ms; }

/* ============================================================
   THESIS — manifesto section: "Render now, greenlight later."
   Bone bg, massive editorial type, brandmark anchor on line 1.
   Cinematic character-by-character reveal cascade.
   ============================================================ */
.thesis {
  background: var(--bone);
  padding: clamp(120px, 20vh, 220px) clamp(24px, 5vw, 96px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.thesis-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 7vh, 88px);
}

/* Section key + rust rule wipe */
.thesis-key {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--ink);
}
.thesis-key-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rust);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.thesis-key-rule {
  flex: 1;
  height: 1.5px;
  background: var(--rust);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1200ms var(--ease-out);
}

.thesis-headline {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(60px, 10vw, 168px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
}
.thesis-headline .brandmark {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.thesis-headline .line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.28em;
}
.thesis-headline .line-1 {
  align-items: center;
}

/* Character-by-character reveal — each .ch rises from below with a mask.
   The .word container clips the descender so characters appear to rise
   out of the baseline. */
.thesis-headline .word,
.thesis-headline .serif-word {
  display: inline-flex;
  overflow: hidden;
  line-height: 0.92;
  padding-bottom: 0.1em;
}
.thesis-headline .ch {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 800ms var(--ease-out), opacity 600ms var(--ease-out);
}

/* The italic serif word sits at the heart of the headline.
   Italic serifs have a negative left bearing — add padding-left so the
   'g' (and any other character with left overshoot) doesn't get clipped
   by the overflow:hidden mask. */
.thesis-headline .serif-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
  letter-spacing: -0.02em;
  font-size: 1.08em;
  margin-right: 0.04em;
  padding-left: 0.08em;
}

.thesis-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
  padding-left: clamp(20px, 2vw, 32px);
  position: relative;
}
.thesis-quote::before {
  /* Rust left rule that draws down */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.5px;
  background: var(--rust);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 900ms var(--ease-out);
}
.thesis-quote .qword {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.thesis-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.thesis-foot .mono:first-child { color: var(--ink); }

/* ACTIVE STATE — the cascade. Most timing is on individual elements
   below via JS-assigned transition-delays for per-character stagger. */
.thesis.in .thesis-key-label   { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.thesis.in .thesis-key-rule    { transform: scaleX(1); transition-delay: 200ms; }
.thesis.in .thesis-headline .brandmark { opacity: 1; transform: translateX(0); transition-delay: 400ms; }
.thesis.in .thesis-headline .ch { opacity: 1; transform: translateY(0); }
.thesis.in .thesis-quote::before { transform: scaleY(1); transition-delay: var(--quote-delay, 1500ms); }
.thesis.in .thesis-quote .qword { opacity: 1; transform: translateY(0); }
.thesis.in .thesis-foot { opacity: 1; transform: translateY(0); }

/* ============================================================
   PROMISE — three big phrases stacked within a single viewport.
   The whole composition reveals at once with cascading delays.
   ============================================================ */
.promise {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(96px, 14vh, 180px) clamp(24px, 5vw, 96px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 88px);
  min-height: 100vh;
  justify-content: center;
}

.promise .panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 0;
  gap: clamp(16px, 2vh, 28px);
}

.promise .panel-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rust);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}

.promise .phrase {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(56px, 11vw, 180px);
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(20px, 2vw, 56px);
  row-gap: 0;
  color: var(--bone);
}

.promise .phrase .word,
.promise .phrase .serif {
  display: inline-flex;
  overflow: hidden;
  line-height: 0.88;
  padding-bottom: 0.08em;          /* room for descenders during reveal */
}
.promise .phrase .word > span,
.promise .phrase .serif > span {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}

/* Twelve in big editorial italic serif */
.promise .phrase .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.01em;
}

.promise .phrase .brandmark {
  /* Same relationship as the logo lockup: bar slightly below the
     wordmark's centerline, sitting close to the M. Sized in em so it
     scales perfectly with the type. */
  width: 0.62em;
  height: 0.24em;
  background: var(--rust);
  flex-shrink: 0;
  align-self: center;
  /* Push down — places the mark's center just below the cap centerline */
  margin-top: 0.16em;
  /* Closer to the text */
  margin-right: 0.14em;
  /* Reveal — slide in from the left */
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}

.promise .panel-rule {
  height: 1.5px;
  background: var(--rust);
  width: 0;
  transition: width 1200ms var(--ease-out) 600ms;
}

.promise .panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out) 1000ms, transform 700ms var(--ease-out) 1000ms;
}
.promise .panel-foot .mono { color: var(--rust); }

/* Cascade panel reveals — each panel waits longer to start. */
.promise .panel.live .panel-key { opacity: 1; transform: translateY(0); }
.promise .panel.live .phrase .word > span,
.promise .panel.live .phrase .serif > span {
  opacity: 1;
  transform: translateY(0);
}
.promise .panel.live .phrase .brandmark {
  opacity: 1;
  transform: translateX(0);
}
.promise .panel.live .panel-rule { width: 100%; }
.promise .panel.live .panel-foot { opacity: 1; transform: translateY(0); }

@media (max-width: 720px) {
  /* Each phrase fits on one line and stays in the visual rhythm:
     - PDF in. / Reel out. / Twelve days.
     The Twelve word is set in big italic serif (1.1em scale) so we keep
     the base font-size moderate to absorb that lift. */
  .promise .phrase { font-size: clamp(40px, 11vw, 64px); }
  .promise { gap: clamp(28px, 5vh, 56px); padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 96px); }

  /* Brandmark scales with em — keep its relationship inside the phrase */
  .promise .phrase .brandmark { width: 0.6em; height: 0.22em; }

  /* The panel footer is mono and tight; nothing extra needed. */
}

/* ============================================================
   WHAT WE DO — three columns, terracotta section
   ============================================================ */
.what {
  background: var(--rust);
  color: var(--bone);
}
.what .section-head {
  border-bottom-color: var(--bone-line);
}
.what .section-head h2 {
  color: var(--bone);
}
.what .section-head h2 .serif {
  color: var(--ember);
}
.what .section-key {
  color: var(--bone);
}
.what .section-sub {
  color: var(--bone-line);
}
.what .section-sub em {
  color: var(--bone);
}
.what-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.what-card {
  background: var(--bone-soft);
  border: 1px solid var(--rust-deep);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.what-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(26,24,20,0.20);
}
.what-card .label-row {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 14px;
}
.what-card .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}
.what-card .spec {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
}
.what-card .still {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  background-color: var(--bone-deep);
  background-size: cover; background-position: center;
  filter: saturate(0.85) contrast(1.05);
}
.what-card .still-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Tap-to-play affordance + back/close button overlay for fullscreen mode */
.what-card .still {
  cursor: pointer;
}

/* Close button appears only when the still container is in fullscreen mode.
   iOS Safari uses its own native player + Done button, so this serves the
   desktop / Android Fullscreen API path. */
.what-card .still-close {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: rgba(26, 24, 20, 0.65);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(242, 235, 221, 0.35);
  border-radius: 999px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.what-card .still-close:hover {
  background: var(--rust);
  border-color: var(--rust);
}
.what-card .still-close::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-right: 8px solid var(--bone);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* When the container is fullscreen, reveal the back button */
.what-card .still:fullscreen .still-close,
.what-card .still:-webkit-full-screen .still-close {
  display: inline-flex;
}
.what-card .still:fullscreen,
.what-card .still:-webkit-full-screen {
  background: var(--ink);
  aspect-ratio: auto !important;   /* fill the viewport in fullscreen */
}
.what-card .still:fullscreen .still-video,
.what-card .still:-webkit-full-screen .still-video {
  object-fit: contain;
}

.what-card .play-cue {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(26, 24, 20, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(242, 235, 221, 0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.what-card .play-cue::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 14px solid var(--bone);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.what-card:hover .play-cue,
.what-card:focus-within .play-cue,
.what-card.in .play-cue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.what-card .still:hover .play-cue {
  background: var(--rust);
  border-color: var(--rust);
  transform: translate(-50%, -50%) scale(1.05);
}
.what-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
  /* Reserve two lines so paragraphs across all three cards align at the same Y */
  min-height: calc(2 * 1.1em);
}
.what-card p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.what-card .num,
.what-card .spec { color: var(--ink); }
.what-card .spec { border-color: var(--bone-line); }

@media (max-width: 900px) {
  .what-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   MOBILE WHAT-WE-DO — cinematic card treatment.
   Desktop keeps its bone-soft tile aesthetic; mobile replaces the
   solid panel with a transparent stage framed by ink corner brackets
   and an animated keyframe entrance.
   ============================================================ */
@media (max-width: 720px) {
  .what {
    /* mobile keeps the terracotta panel — corner brackets and labels
       are flipped to bone for contrast */
    background: var(--rust);
    padding-top: clamp(80px, 12vh, 140px);
    padding-bottom: clamp(80px, 12vh, 140px);
  }

  .what-grid {
    grid-template-columns: 1fr;
    gap: clamp(56px, 8vh, 88px);
  }

  .what-card {
    background: transparent;
    border: 0;
    padding: 22px;
    position: relative;
    box-shadow: none;
  }
  .what-card:hover { transform: none; box-shadow: none; }

  /* Corner brackets in BONE for contrast against the rust ground */
  .what-card::before,
  .what-card::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--bone);
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .what-card::before {
    top: 0; left: 0;
    border-right: 0; border-bottom: 0;
    transform: translate(8px, 8px);
  }
  .what-card::after {
    bottom: 0; right: 0;
    border-left: 0; border-top: 0;
    transform: translate(-8px, -8px);
  }
  .what-card.in::before,
  .what-card.in::after { opacity: 1; transform: translate(0, 0); }

  /* Label row — slate strip in bone tones */
  .what-card .label-row {
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(242, 235, 221, 0.25);
    justify-content: space-between;
  }
  .what-card .num {
    font-size: 11px;
    color: var(--bone);
  }
  .what-card .spec {
    border: 0;
    padding: 0;
    color: var(--bone-line);
  }

  /* Still / video frame: keep the inner brackets bone */
  .what-card .still {
    margin-bottom: 22px;
    position: relative;
    filter: saturate(0.92) contrast(1.05);
  }
  .what-card .still::before,
  .what-card .still::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 1.5px solid var(--bone);
    pointer-events: none;
    z-index: 2;
  }
  .what-card .still::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
  .what-card .still::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

  /* Title + body — bone tones over rust */
  .what-card h3 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.05;
    margin-bottom: 12px;
    color: var(--bone);
  }
  .what-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bone-line);
  }
  .what-card p em {
    color: inherit;
    font-style: italic;
  }

  /* Reveal animation — card content rises and brackets snap in */
  .what-card .still,
  .what-card .label-row,
  .what-card h3,
  .what-card p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .what-card.in .label-row { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
  .what-card.in .still     { transition-delay: 220ms; opacity: 1; transform: translateY(0); }
  .what-card.in h3         { transition-delay: 340ms; opacity: 1; transform: translateY(0); }
  .what-card.in p          { transition-delay: 460ms; opacity: 1; transform: translateY(0); }

  /* HOW-step process cards on mobile — same hairline / corner-bracket
     vibe so the section visual rhythm matches. */
  .how-step {
    padding-top: 18px;
    position: relative;
  }
}

/* ============================================================
   FOR FILMMAKERS — cinematic dark section, the hero-shot offer
   ============================================================ */
.filmmakers {
  background: var(--ink);
  color: var(--bone);
}
.filmmakers .section-head { border-bottom-color: var(--bone-line); }
.filmmakers .section-head h2 { color: var(--bone); }
.filmmakers .section-head h2 .serif { color: var(--ember); }
.filmmakers .section-key { color: var(--ember); }
.filmmakers .section-sub { color: var(--bone-line); }
.filmmakers .section-sub em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bone);
}

/* Cinematic 16:9 video — half-width, beside the copy */
.film-stage {
  position: relative;
  overflow: hidden;
  background: var(--bone-deep);
  aspect-ratio: 16 / 9;
  width: 100%;
  align-self: start;
}
.film-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.06);
}
/* Bone corner brackets — film-frame language reused from the work cards */
.film-stage::before,
.film-stage::after {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border: 1.5px solid var(--bone);
  pointer-events: none;
  z-index: 2;
}
.film-stage::before { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.film-stage::after  { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.film-stage-tag {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(26,24,20,0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  padding: 8px 12px;
}

/* Copy left · video centre · list right */
.film-body {
  display: grid;
  grid-template-columns: 1fr 1.95fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.film-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.film-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 37px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
  max-width: 26ch;
  text-wrap: pretty;
}

.film-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.film-list li {
  display: grid;
  grid-template-columns: minmax(140px, 0.5fr) 1fr;
  gap: clamp(16px, 2vw, 40px);
  align-items: baseline;
  padding: clamp(16px, 2vh, 22px) 0;
  border-bottom: 1px solid var(--hairline-bone);
}
.film-list li:first-child { padding-top: 0; }
.film-list-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.film-list-desc {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--bone);
}

.film-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 30px;
  background: var(--rust);
  color: var(--bone);
  transition: background 240ms var(--ease-out);
}
.film-cta:hover { background: var(--rust-deep); }
.film-cta::after { content: '\2192'; font-family: var(--font-sans); }

@media (max-width: 900px) {
  .film-body { grid-template-columns: 1fr; gap: clamp(28px, 4vh, 44px); }
}
@media (max-width: 540px) {
  .film-list li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}

/* ============================================================
   HOW WE WORK — process strip + intersection chart
   ============================================================ */
.how {
  background: var(--bone-soft);
}
.how-chart {
  margin-bottom: clamp(48px, 6vh, 96px);
  background: transparent;
  border: 0;
}
.how-chart img {
  width: 100%; height: auto;
  max-height: 600px;
  object-fit: contain;
}

/* ============================================================
   CHART animation — curves draw in, bullseye pops, lockup arrives.
   Triggered by the existing .reveal-scale.in class on .how-chart.
   ============================================================ */
.chart-svg {
  width: 100%;
  height: auto;
  max-height: 600px;
  display: block;
}

/* Initial state — everything hidden / pre-animated */
.chart-svg .chart-axes,
.chart-svg .chart-ticks,
.chart-svg .chart-axis-title {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.chart-svg .chart-curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1800ms var(--ease-out);
}

.chart-svg .chart-label {
  opacity: 0;
  transform: translateY(8px);
  transform-origin: center;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.chart-svg .chart-bullseye {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out);
}
.chart-svg .chart-bullseye-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 700ms var(--ease-out);
}
.chart-svg .chart-bullseye-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 500ms var(--ease-out);
}

.chart-svg .chart-lockup {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

/* Active state — when section enters viewport, kick off the cascade */
.reveal-scale.in .chart-svg .chart-axes        { opacity: 1; transition-delay: 0ms; }
.reveal-scale.in .chart-svg .chart-ticks       { opacity: 1; transition-delay: 200ms; }
.reveal-scale.in .chart-svg .chart-axis-title  { opacity: 1; transition-delay: 400ms; }

.reveal-scale.in .chart-svg .chart-curve {
  stroke-dashoffset: 0;
  transition-delay: 500ms;
}

.reveal-scale.in .chart-svg .chart-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1700ms;
}

.reveal-scale.in .chart-svg .chart-bullseye   { opacity: 1; transition-delay: 2100ms; }
.reveal-scale.in .chart-svg .chart-bullseye-ring { transform: scale(1); transition-delay: 2100ms; }
.reveal-scale.in .chart-svg .chart-bullseye-dot  { transform: scale(1); transition-delay: 2350ms; }

.reveal-scale.in .chart-svg .chart-lockup {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2500ms;
}
.how-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.how-step {
  border-top: 1.5px solid var(--ink);
  padding-top: 24px;
}
.how-step .num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--rust);
  letter-spacing: 0.04em;
}
.how-step h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 12px 0 14px;
  color: var(--ink);
}
.how-step p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .how-process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .how-process { grid-template-columns: 1fr; }
}

/* ============================================================
   STUDIO — about the company
   ============================================================ */
.studio {
  background: var(--ink);
  color: var(--bone);
}
.studio .section-head h2 { color: var(--bone); }
.studio .section-head { border-bottom-color: var(--bone-line); }
.studio .section-key { color: var(--ember); }
.studio .section-sub { color: var(--bone-line); }
.studio .section-sub em { color: var(--bone); }

.studio-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.studio-prose .lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
  color: var(--bone);
  margin: 0 0 32px;
  letter-spacing: -0.012em;
}
.studio-prose .body {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--bone-line);
  margin: 0 0 var(--s-5, 24px);
  max-width: 56ch;
}
.studio-prose .body:last-child { margin-bottom: 0; }
/* Editorial emphasis — bold+italic markup renders as Playfair Display italic 700, ember accent */
.studio-prose .body strong em,
.studio-prose .body em strong {
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: -0.005em;
  color: var(--ember);
}

.studio-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  padding-top: 16px;
  border-top: 1.5px solid var(--bone-line);
}
.studio-stats .stat .v {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 5.5vw, 88px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ember);
}
.studio-stats .stat .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-line);
  margin-top: 12px;
}

@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SEND A SCRIPT — contact CTA
   ============================================================ */
.send {
  background: var(--bone);
  padding-bottom: clamp(80px, 12vh, 160px);
}
.send-block {
  text-align: left;
  max-width: 1500px;
}
.send-hero {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 160px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 48px;
  text-wrap: balance;
}
.send-hero .rust { color: var(--rust); }
.send-hero .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }

/* Alternating headline — both phrases grid-stack so the block sizes to the
   taller one; crossfade with a subtle rise. */
.send-rotator {
  display: grid;
  margin: 0 0 48px;
}
.send-rotator .send-hero {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  will-change: opacity;
  pointer-events: none;
}
.send-rotator .send-hero.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .send-rotator .send-hero { transition-duration: 1ms; }
}

.send-meta {
  display: flex; gap: clamp(32px, 5vw, 96px);
  flex-wrap: wrap; margin-bottom: 48px;
  padding-top: 24px; border-top: 2px solid var(--ink);
}
.send-meta .item {
  display: flex; flex-direction: column; gap: 8px;
}
.send-meta .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.send-meta .value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.018em;
  color: var(--ink);
  transition: color 200ms var(--ease-out);
}
.send-meta a.value:hover {
  color: var(--rust);
}

.send-cta {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 22px 36px;
  background: var(--ink);
  color: var(--bone);
  transition: background 240ms var(--ease-out);
}
.send-cta:hover { background: var(--rust); }
.send-cta::after { content: '→'; font-family: var(--font-sans); }

/* ============================================================
   FOOTER — minimal ink bar
   ============================================================ */
footer {
  background: var(--ink);
  height: clamp(48px, 6vh, 80px);
  width: 100%;
}


/* ============================================================
   04 — PITCH BUDGETS COLLAPSED — twin bar charts (writers)
   ============================================================ */
.collapse { background: var(--bone-soft); }

.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 96px); }
.cc-chart { display: flex; flex-direction: column; gap: 24px; }
.cc-cap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cc-cap-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.cc-cap-key-rust { color: var(--rust); }
.cc-cap-label { font-family: var(--font-sans); font-weight: 600; font-size: clamp(15px,1.4vw,19px); letter-spacing: -0.01em; color: var(--ink); }
.cc-cap-illus { color: var(--ink-mute); font-weight: 400; }

.cc-bars { display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; gap: clamp(24px, 4vw, 72px); border-bottom: 1.5px solid var(--ink); }
.cc-bars-five { grid-template-columns: repeat(5, 1fr); gap: clamp(10px,1.6vw,24px); }
.cc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; }
.cc-track { width: 100%; height: clamp(220px, 30vh, 320px); position: relative; }
.cc-fill { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 0; transition: height 1.2s var(--ease-out); }
.cc-fill-ink  { background: var(--ink); }
.cc-fill-rust { background: var(--rust); }
.cc-fill-min  { min-height: 5px; }
.reveal.in .cc-fill, .cc-grid.in .cc-fill { height: var(--h); }
.cc-bars-five .cc-col:nth-child(2) .cc-fill { transition-delay: 90ms; }
.cc-bars-five .cc-col:nth-child(3) .cc-fill { transition-delay: 180ms; }
.cc-bars-five .cc-col:nth-child(4) .cc-fill { transition-delay: 270ms; }
.cc-bars-five .cc-col:nth-child(5) .cc-fill { transition-delay: 360ms; }
.cc-val { font-family: var(--font-sans); font-weight: 800; font-size: clamp(28px, 3vw, 46px); letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.cc-yr { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.cc-note { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0; display: flex; justify-content: space-between; gap: 12px; }
.cc-scale-from, .cc-scale-to { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.cc-scale-from { color: var(--ink-mute); }
.cc-scale-to { color: var(--rust); }
.cc-kicker { margin: clamp(48px,6vh,88px) 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; color: var(--ink); max-width: 26ch; text-wrap: balance; }
.cc-kicker em { color: var(--rust); font-style: italic; }
@media (max-width: 820px) {
  .cc-grid { grid-template-columns: 1fr; gap: 56px; }
  .cc-track { height: clamp(200px, 40vw, 260px); }
}

/* ============================================================
   05 — THE SHOT THAT BREAKS THE BUDGET — epic-shot economics
   ============================================================ */
.epic { background: var(--ink); color: var(--bone); }
.epic .section-head { border-bottom-color: var(--bone-line); }
.epic .section-head h2 { color: var(--bone); }
.epic .section-head h2 .serif { color: var(--ember); }
.epic .section-key { color: var(--ember); }
.epic .section-sub { color: var(--bone-line); }
.epic .section-sub em { font-family: var(--font-serif); font-style: italic; color: var(--bone); }

.epic-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: center; }
.epic-build-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1.5px solid var(--bone-line); }
.epic-build-key { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); }
.epic-build-sum { font-family: var(--font-sans); font-weight: 800; font-size: clamp(28px,3vw,44px); letter-spacing: -0.03em; color: var(--bone); }
.epic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px,1.8vh,20px); }
.epic-item { display: grid; grid-template-columns: minmax(180px, 1.1fr) 2fr auto; align-items: center; gap: clamp(14px,2vw,28px); }
.epic-name { font-family: var(--font-sans); font-weight: 500; font-size: clamp(14px,1.3vw,17px); color: var(--bone); letter-spacing: -0.01em; }
.epic-sub { color: var(--ink-faint); font-weight: 400; }
.epic-bar { height: 10px; background: rgba(242,235,221,0.10); position: relative; overflow: hidden; }
.epic-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rust); transition: width 1.1s var(--ease-out); }
.reveal.in .epic-fill { width: var(--w); }
.epic-amt { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--bone-line); white-space: nowrap; }
.epic-aside { display: flex; flex-direction: column; gap: 28px; }
.epic-lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px,2.4vw,34px); line-height: 1.25; color: var(--bone); margin: 0; text-wrap: pretty; }
.epic-lede em { color: var(--ember); font-style: italic; }
.epic-compare { display: flex; flex-direction: column; gap: 18px; padding: 24px 0; border-top: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line); }
.epic-compare-row { display: grid; grid-template-columns: minmax(140px,1fr) 1.4fr 104px; align-items: center; gap: 16px; }
.epic-compare-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-line); }
.epic-compare-bar { height: 16px; background: rgba(242,235,221,0.08); position: relative; overflow: hidden; }
.epic-compare-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1.2s var(--ease-out); transition-delay: 300ms; }
.reveal.in .epic-compare-fill { width: var(--w); }
.epic-compare-real { background: var(--ink-faint); }
.epic-compare-mf { background: var(--ember); }
.epic-compare-val { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--bone); white-space: nowrap; text-align: right; }
.epic-compare-val-mf { color: var(--ember); }
.epic-offer { font-family: var(--font-sans); font-weight: 600; font-size: clamp(18px,1.7vw,24px); line-height: 1.35; color: var(--bone); margin: 0; letter-spacing: -0.015em; }
.epic-offer em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ember); }
.epic .film-cta { align-self: flex-start; }
@media (max-width: 900px) {
  .epic-body { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 540px) {
  .epic-item { grid-template-columns: 1fr auto; }
  .epic-item .epic-bar { display: none; }
}

/* ============================================================
   HERO (mobile) — override the old grid-band layout.
   New structure: full-bleed reel + centered Writers / brand+strap
   / Filmmakers stack, with the dark scrim for legibility.
   ============================================================ */
@media (max-width: 720px) {
  /* ── Mobile home hero: stacked composition (matches live reference) ── */
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    width: 100%;
    padding: 0;
    background: var(--ink);
    overflow: visible;
  }
  /* Retire the full-bleed desktop hero on mobile */
  .hero-video,
  .hero-poster,
  .hero-overlay,
  .hero-content,
  .scroll-cue { display: none; }

  .hero-mobile {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100svh;
    color: var(--bone);
    padding-bottom: clamp(40px, 8vh, 80px);
  }

  /* Writers beat — above the band */
  .hero-m-beat--top {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: clamp(40px, 6vh, 72px) 30px clamp(20px, 3vh, 32px);
    gap: 12px;
  }
  /* Filmmakers beat — below the band */
  .hero-m-beat--bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: clamp(20px, 3vh, 32px) 30px clamp(40px, 6vh, 72px);
    gap: 12px;
  }
  .hero-m-label {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: stretch;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bone);
  }
  /* rust registration tick (echoes the brand mark block) */
  .hero-m-label::before {
    content: '';
    flex: 0 0 auto;
    width: 20px; height: 3px;
    background: var(--rust);
  }
  /* trailing key line */
  .hero-m-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bone);
    opacity: 0.3;
  }
  .hero-m-line {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(28px, 8.6vw, 44px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--bone);
    text-wrap: balance;
  }
  .hero-m-line em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ember);
  }

  /* Cinematic band with the brand lockup overlaid */
  .hero-m-band {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--bone-deep);
    flex: 0 0 auto;
  }
  .hero-m-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  /* Viewfinder corner brackets on the band — matches the film-frame motif */
  .hero-m-band::before,
  .hero-m-band::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border: 1.5px solid var(--bone);
    z-index: 3;
    pointer-events: none;
  }
  .hero-m-band::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
  .hero-m-band::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
  .hero-m-brand {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90vw;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
  }
  .hero-m-wordmark {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
  }
  .hero-m-strap {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 4.4vw, 22px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--bone);
    text-align: right;
    padding-right: 0.8%;
  }

  /* Nav on mobile: nothing shows at the very top (clean hero). Once
     scrolled, the ink wordmark AND the CTA fade into the bone bar. */
  .nav-wm-img { height: 22px; }
  .nav-cta {
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), background 240ms var(--ease-out);
  }
  .nav.solid .nav-cta {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  /* ── Tighter vertical rhythm on mobile ───────────────────────── */
  section { padding: clamp(44px, 7vh, 76px) clamp(22px, 6vw, 40px); }
  .thesis { padding: clamp(56px, 9vh, 90px) clamp(22px, 6vw, 40px); }

  /* Stack the section head so the big headline runs full-width and
     left-aligned, instead of being squeezed to the right of the key. */
  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: clamp(28px, 4vh, 48px);
  }
  .section-head h2 { flex: none; width: 100%; }
  .section-sub { margin-top: 10px; }

  /* Trim the lead-in space before the "why now" kicker too */
  .cc-kicker { margin-top: clamp(32px, 5vh, 56px); }
}