/* Hero = the source-to-clips set piece.
 * Copy on top (headline left, descriptor + CTA right, bottom-aligned), then
 * "the screen": a dark rounded panel holding the long-form source. Five real
 * short-film cuts float out of it — three chromed in the foreground, two plain
 * behind — crossing the panel edges onto the sheet, tied back to the source by
 * hairline connectors. Complete at rest; motion only makes the emergence visible. */

.hero { padding-top: clamp(1rem, 2vh, 1.5rem); padding-bottom: clamp(1rem, 2vh, 1.5rem); }
.hero-head {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: end;
}
/* 2026-09-20 (Levi, round 2): the headline runs across the full width in two lines, roman promise
 * then the italic gradient turn, so the black stage is inside the first screen. The eyebrow is gone. */
.hero-lead-col { grid-column: 1 / -1; }
.hero-title { font-size: clamp(2.8rem, 5vw, 6.2rem); line-height: 1.04; }
.hero-title .l1, .hero-title .l3 { overflow: hidden; padding-bottom: var(--descender-room); margin-bottom: calc(-1 * var(--descender-room)); }
.hero-title .ln { display: block; transform: translateY(112%); transition: transform 820ms var(--ease-out); }
.hero-title.is-in .ln { transform: none; }
html.no-motion .hero-title .ln { transform: none; transition: none; }
.hero-title .l1 { display: block; }
.hero-title .l3 {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.04em; letter-spacing: -0.005em; font-variation-settings: normal;
  width: max-content; max-width: 100%;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title .l3 .ln { transition-delay: 160ms; }
.link-quiet {
  font: 500 .95rem/1 var(--sans); color: var(--ink); text-decoration: none;
  padding-bottom: .3rem; border-bottom: 1px solid rgba(10, 10, 12, .28);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.link-quiet:hover { color: var(--magenta); border-color: var(--magenta); }

.hero-actions { margin-top: 1.25rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }

/* ---- the screen ---- */
.stage { position: relative; margin-top: clamp(1rem, 2vh, 1.5rem); }
.screen {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius-panel);
  aspect-ratio: 16 / 6.8;
  color: var(--cream);
}
.film {
  position: absolute; left: 4.2%; top: 8.5%; width: 52%;
  aspect-ratio: 1920 / 804;
  border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9);
  z-index: 1;
}
.film > img, .film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film > video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.film.is-playing > video { opacity: 1; }
.film-ctl {
  position: absolute; right: 3%; bottom: 6%; z-index: 3;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid rgba(244,239,232,0.5); background: rgba(10,10,12,0.55); color: var(--cream);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.film-ctl:hover { background: rgba(10,10,12,0.8); border-color: var(--cream); }
.film-ctl:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
@media (max-width: 860px) { .film-ctl { width: 2.75rem; height: 2.75rem; } }
.film-ctl svg { width: 0.9rem; height: 0.9rem; }
.film.is-playing .film-ctl .play { display: none; }
.film:not(.is-playing) .film-ctl .pause { display: none; }

.screen-copy {
  position: absolute; left: 4.2%; bottom: 8%; width: 44%; z-index: 2;
}
.screen-copy .body-2 { margin-top: 0.8rem; color: rgba(244,239,232,0.72); max-width: 42ch; }
.screen-copy--cta { top: 62.5%; bottom: auto; }
.screen-lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--cream); max-width: 34ch; text-wrap: balance; }
.screen-lead::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--grad); border-radius: 2px; margin-bottom: 1rem; }
.screen-sub { margin-top: 0.7rem; font-size: var(--t-body-sm); line-height: 1.45; color: rgba(244,239,232,0.62); max-width: 50ch; }
.screen-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.screen-copy--cta .link-quiet { color: var(--cream); }

.connectors { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.connectors path { fill: none; stroke: url(#grad-line); stroke-width: 1.5; opacity: 0.9; }
.connectors circle { fill: var(--coral); }

/* five real cuts, placed as a floating composition; positions are % of the screen */
.clips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.clips .clip { position: absolute; pointer-events: auto; }
.clips .clip[data-slot="a"] { width: 15.4%; left: 58.5%; top: -4.5%; z-index: 4; }
.clips .clip[data-slot="b"] { width: 17.2%; left: 80.5%; top: 24%;  z-index: 4; }
.clips .clip[data-slot="c"] { width: 14%;   left: 62%;   top: 55%;  z-index: 4; }
.clips .clip[data-slot="d"] { width: 10.6%; left: 75.5%; top: 4%;   z-index: 3; }
.clips .clip[data-slot="e"] { width: 9.6%;  left: 50.5%; top: 66%;  z-index: 3; }

.stage-caption { margin-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- mid widths ---- */
@media (max-width: 1200px) and (min-width: 861px) {
  .screen { aspect-ratio: 16 / 8.2; }
  .film { width: 54%; }
  .screen-copy { width: 48%; }
}

/* ---- mobile: stacked, static ---- */
@media (max-width: 860px) {
  .hero-title { font-size: clamp(2.1rem, 9.4vw, 3.4rem); }
  .screen { aspect-ratio: auto; padding: 1rem 1rem 1.25rem; border-radius: 16px; }
  .film { position: relative; left: auto; top: auto; width: 100%; }
  .screen-copy { position: static; width: auto; margin-top: 1.25rem; }
  .connectors { display: none; }
  .clips { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; }
  .clips .clip, .clips .clip[data-slot] { position: relative; left: auto; top: auto; width: auto; z-index: auto; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .clips .clip--bg { display: none; }
  .stage-caption { flex-direction: column; gap: 0.3rem; }
}