/* ============================================================
   TENDER & PITCH VIDEO PRODUCTION: Dustin Hill Productions
   Page stylesheet, prefix tv-. Built on the global system in style.css
   and the rules in DESIGN.md:
   - Variable-First: every colour is a global token, or Electric Blue mixed
     at a step already on the Blue Wash ladder. No new neutrals, no new navies.
   - Four type sizes only (display / heading / body / label).
   - Shadows fall on real imagery only, blue spill first.
   - Motion is transform and opacity only, and every animation is gated on
     prefers-reduced-motion at the foot of this file.
============================================================ */

:root {
  /* Type: the four locked sizes */
  --tv-fs-display: clamp(2.2rem, 4.5vw, 3.8rem);
  --tv-fs-h2:      clamp(2rem, 4vw, 3.5rem);
  --tv-fs-body:    1.125rem;
  --tv-fs-label:   0.875rem;

  /* Colour roles, aliased to the global tokens */
  --tv-heading: var(--c-white);        /* Title White */
  --tv-read:    var(--c-text);         /* Reading White */
  --tv-muted:   var(--c-text-muted);   /* Ash Grey: 5.6:1 on every ground used here */
  --tv-line:    var(--c-border);       /* Hairline: structure only */
  --tv-graphic: var(--c-text-muted);   /* diagram wires, node and control borders: 5.6:1 */

  /* Blue Wash ladder steps (4 / 10 / 12 / 20 %) and the existing white alphas */
  --tv-wash:       color-mix(in srgb, var(--c-accent) 4%, transparent);
  --tv-wash-edge:  color-mix(in srgb, var(--c-accent) 12%, transparent);
  --tv-chip:       color-mix(in srgb, var(--c-accent) 10%, transparent);
  --tv-chip-edge:  color-mix(in srgb, var(--c-accent) 20%, transparent);
  --tv-track:      color-mix(in srgb, var(--c-white) 25%, transparent);
  --tv-frame-edge: color-mix(in srgb, var(--c-white) 6%, transparent);
  --tv-plate:      color-mix(in srgb, var(--c-black) 90%, transparent);

  /* Shadow vocabulary (DESIGN.md §4): imagery only */
  --tv-spill-hero: 0 0 60px color-mix(in srgb, var(--c-accent) 15%, transparent),
                   0 24px 64px color-mix(in srgb, var(--c-black) 60%, transparent);
  --tv-spill:      0 0 40px color-mix(in srgb, var(--c-accent) 10%, transparent),
                   0 16px 48px color-mix(in srgb, var(--c-black) 50%, transparent);
  --tv-spill-low:  0 0 30px color-mix(in srgb, var(--c-accent) 8%, transparent),
                   0 12px 40px color-mix(in srgb, var(--c-black) 50%, transparent);

  /* Chapter tones: a sequential scale of Electric Blue over Console Charcoal,
     spaced for even lightness steps (OKLab L about 0.28 / 0.43 / 0.59 / 0.70) so
     each chapter's key swatch is told apart from its neighbour.
     01/02 carry white text (14.8:1, 8.2:1); 03/04 carry black (5.0:1, 7.9:1). */
  --tv-ch1: color-mix(in srgb, var(--c-accent) 25%, var(--c-dark));
  --tv-ch2: color-mix(in srgb, var(--c-accent) 60%, var(--c-dark));
  --tv-ch3: var(--c-accent);
  --tv-ch4: var(--c-accent-hi);

  /* Motion */
  --tv-ease-out: cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out-quart */
}

/* ── SHARED ─────────────────────────────────────────────── */
.tv-link {
  color: var(--c-accent-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease);
}
.tv-link:hover,
.tv-link:focus-visible { color: var(--c-text); }
.tv-link:focus-visible {
  outline: 2px solid var(--tv-heading);
  outline-offset: 3px;
  border-radius: 2px;
}

.tv-section-head { max-width: 720px; }
.tv-section-sub {
  margin-top: var(--space-2);
  font-size: var(--tv-fs-body);
  line-height: 1.7;
  color: var(--tv-muted);
}

/* Real imagery: 4px frame, 6% white edge, blue spill first */
.tv-photo {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--tv-frame-edge);
  box-shadow: var(--tv-spill);
}
.tv-step-visual .tv-photo { box-shadow: var(--tv-spill-low); }

/* Decorative numerals: Futura Light at heading size, so they anchor the eye
   without competing with the Bold headings. Ash Grey keeps them legible. */
.tv-numeral {
  font-size: var(--tv-fs-h2);
  font-weight: var(--fw-300);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--tv-muted);
}

/* ── HERO ────────────────────────────────────────────────── */
.tv-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, color-mix(in srgb, var(--c-accent) 22%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 76% 60%, color-mix(in srgb, var(--c-accent-hi) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #020d1c 0%, #010810 40%, var(--c-black) 75%);
}
.tv-hero-canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.35;
  pointer-events: none;
}
.tv-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 74% 60%, transparent, var(--c-black) 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-black) 30%, transparent) 0%,
      transparent 40%, transparent 60%,
      color-mix(in srgb, var(--c-black) 50%, transparent) 100%);
  pointer-events: none;
}
.tv-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "visual" "copy";
  row-gap: var(--space-3);
  padding-block: var(--space-3) var(--space-5);
}
.tv-hero-head   { grid-area: head; }
.tv-hero-copy   { grid-area: copy; }
.tv-hero-visual { grid-area: visual; min-width: 0; }

@media (min-width: 1024px) {
  .tv-hero-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "head head"
      "copy visual";
    column-gap: var(--space-6);
    row-gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-5);
  }
}

/* The eyebrow sits on Hero Navy under the blue glow, where Electric Blue text
   drops below 4.5:1; blue text on navy takes Bias-Light Blue (DESIGN.md §2). */
.tv-hero .section-eyebrow { color: var(--c-accent-hi); }

.tv-hero-heading {
  font-size: var(--tv-fs-display);
  font-weight: var(--fw-700);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tv-heading);
}
.tv-hero-line {
  display: block;
  text-wrap: balance;
}
.tv-keep { white-space: nowrap; }

.tv-hero-sub {
  max-width: 34rem;
  margin-bottom: var(--space-4);
  font-size: var(--tv-fs-body);
  line-height: 1.75;
  color: var(--tv-muted);
}
.tv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tv-hero-note {
  margin-top: var(--space-2);
  font-size: var(--tv-fs-label);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--tv-muted);
}

/* Frame: a real render, framed as chapter 02 of a subtitled submission film */
.tv-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--tv-frame-edge);
  border-radius: 4px;
  background: var(--c-dark);
  box-shadow: var(--tv-spill-hero);
}
.tv-frame-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-frame-chapter {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 6px 12px;
  border-radius: 2px;
  background: var(--tv-plate);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-heading);
}
.tv-frame-chapter-n { color: var(--c-accent-hi); }

/* Subtitles: one plate per line, the way a burned-in subtitle sits */
.tv-frame-sub {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  text-align: center;
  text-wrap: balance;
  font-size: var(--tv-fs-label);
  line-height: 1.8;
  color: var(--tv-heading);
}
.tv-frame-sub span {
  padding: 3px 10px;
  background: var(--tv-plate);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (min-width: 640px) {
  .tv-frame-sub { font-size: var(--tv-fs-body); line-height: 1.75; }
}

/* Chapter timeline: segment widths are the chapter running times; a label can
   never be squeezed below its own longest word (minmax(min-content, Nfr)). */
.tv-tl {
  display: grid;
  column-gap: 3px;
  margin-top: var(--space-2);
}
.tv-tl-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tv-tl-seg {
  position: relative;
  display: block;
  height: 6px;
  margin-bottom: 4px;
  border-radius: 1px;
  background: var(--tv-track);
}
.tv-tl-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
  transform-origin: left center;
  transform: scaleX(var(--p));
}
.tv-tl-head {
  position: absolute;
  top: -5px;
  left: var(--at);
  width: 2px;
  height: 16px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--tv-heading);
}
.tv-tl-n {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--tv-muted);
}
.tv-tl-t {
  font-weight: var(--fw-400);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.tv-tl-name {
  font-size: var(--tv-fs-label);
  line-height: 1.35;
  color: var(--tv-muted);
}
.tv-tl-n,
.tv-tl-name { padding-right: var(--space-1); }
.tv-tl-item.is-current .tv-tl-n    { color: var(--c-accent-hi); }
.tv-tl-item.is-current .tv-tl-name { color: var(--tv-heading); }

.tv-tl-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--tv-line);
  font-size: var(--tv-fs-label);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--tv-muted);
}
.tv-tl-clock {
  color: var(--tv-read);
  font-variant-numeric: tabular-nums;
}
.tv-hero-caption {
  margin-top: 4px;
  font-size: var(--tv-fs-label);
  line-height: 1.5;
  color: var(--tv-muted);
}

/* One-shot sweep: the played chapters fill, then the playhead settles at 01:48.
   Tied to the reveal so it plays as the frame arrives. Under 2.5s, never loops. */
@media (prefers-reduced-motion: no-preference) {
  .tv-hero-visual.is-visible .tv-tl-fill {
    animation: tv-fill 0.55s var(--tv-ease-out) 0.7s both;
  }
  .tv-hero-visual.is-visible .tv-tl-item + .tv-tl-item .tv-tl-fill {
    animation-delay: 1.2s;
  }
  .tv-hero-visual.is-visible .tv-tl-head {
    animation: tv-rise 0.4s var(--tv-ease-out) 1.7s both;
  }
}
@keyframes tv-fill { from { transform: scaleX(0); } }
@keyframes tv-rise { from { opacity: 0; transform: translateY(4px); } }

/* ── STATS ───────────────────────────────────────────────── */
.tv-stats { padding-block: var(--space-5); }
.tv-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-2);
}
.tv-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.tv-stat--wide {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
  border-top: 1px solid var(--tv-line);
}
.tv-stat-value {
  order: -1;
  font-size: var(--tv-fs-h2);
  font-weight: var(--fw-700);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--tv-heading);
}
.tv-stat-label {
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--tv-muted);
}
@media (min-width: 1024px) {
  .tv-stats-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: 0;
  }
  .tv-stat {
    padding-inline: var(--space-4);
    border-inline-start: 1px solid var(--tv-line);
  }
  .tv-stat:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .tv-stat--wide {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }
}

/* ── DEFINITION ──────────────────────────────────────────── */
.tv-define { padding-block: var(--space-6); }
@media (min-width: 1280px) { .tv-define { padding-block: var(--space-7); } }
.tv-define-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .tv-define-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-6);
    align-items: start;
  }
}
.tv-define-a {
  max-width: 66ch;
  font-size: var(--tv-fs-body);
  line-height: 1.8;
  color: var(--tv-muted);
}
.tv-define-lead {
  font-weight: var(--fw-500);
  color: var(--tv-read);
}

/* ── OVERVIEW ────────────────────────────────────────────── */
.tv-overview-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
  .tv-overview-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-7);
  }
}
.tv-overview .section-header { margin-bottom: var(--space-3); }
.tv-overview-body p {
  max-width: 62ch;
  margin-bottom: var(--space-2);
  font-size: var(--tv-fs-body);
  line-height: 1.75;
  color: var(--tv-muted);
}
.tv-overview-body p:last-child { margin-bottom: 0; }

/* ── DNA SECTIONS ────────────────────────────────────────── */
.tv-dna-section {
  position: relative;
  overflow: hidden;
}
.tv-section-dna {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.18;
  pointer-events: none;
}
.tv-dna-section > .container {
  position: relative;
  z-index: 1;
}

/* ── WHY TENDER WORK IS DIFFERENT ────────────────────────── */
.tv-stakes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
@media (min-width: 1024px) {
  .tv-stakes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tv-stake {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--tv-line);
  border-radius: 4px;
  background: var(--c-dark);
}
/* A registration mark: each card is one of the three "fixed points" */
.tv-stake-mark {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--tv-graphic);
}
.tv-stake-title {
  padding-top: var(--space-1);
  font-size: var(--tv-fs-body);
  font-weight: var(--fw-700);
  line-height: 1.35;
  color: var(--tv-heading);
}
.tv-stake-body {
  font-size: var(--tv-fs-body);
  line-height: 1.7;
  color: var(--tv-muted);
}

/* ── ANATOMY ─────────────────────────────────────────────── */
.tv-anatomy { background: var(--c-dark); }
.tv-anat {
  display: grid;
  gap: var(--space-5);
}
.tv-anat [data-ch="01"] { --tone: var(--tv-ch1); --tone-ink: var(--c-white); }
.tv-anat [data-ch="02"] { --tone: var(--tv-ch2); --tone-ink: var(--c-white); }
.tv-anat [data-ch="03"] { --tone: var(--tv-ch3); --tone-ink: var(--c-black); }
.tv-anat [data-ch="04"] { --tone: var(--tv-ch4); --tone-ink: var(--c-black); }

.tv-anat-bar {
  display: flex;
  gap: 3px;
  height: 40px;
}
.tv-anat-seg {
  flex: var(--d) 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-1);
  overflow: hidden;
  white-space: nowrap;
  border-radius: 2px;
  background: var(--tone);
  color: var(--tone-ink);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
}
.tv-anat-seg-l {
  display: none;
  font-weight: var(--fw-500);
  letter-spacing: 0.02em;
}
@media (min-width: 1024px) {
  .tv-anat-bar { height: 56px; }
  .tv-anat-seg { padding-inline: 12px; }
  .tv-anat-seg-l { display: inline; }
}

.tv-anat-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .tv-anat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tv-anat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tv-anat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tv-anat-key {
  display: block;
  width: var(--space-5);
  height: 6px;
  margin-bottom: var(--space-1);
  border-radius: 1px;
  background: var(--tone);
}
.tv-anat-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--tv-fs-body);
  font-weight: var(--fw-700);
  line-height: 1.35;
  color: var(--tv-heading);
}
.tv-anat-n {
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
  color: var(--tv-muted);
}
.tv-anat-purpose {
  font-size: var(--tv-fs-body);
  line-height: 1.7;
  color: var(--tv-muted);
}

/* Executive cut: drawn at the same seconds-to-width scale as the full film */
.tv-anat-exec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--tv-line);
}
.tv-anat-bar--exec {
  width: calc(var(--exec) * 100%);
  height: 24px;
}
.tv-anat-bar--exec .tv-anat-seg { padding-inline: 0; }
.tv-anat-exec-note {
  font-size: var(--tv-fs-body);
  line-height: 1.6;
  color: var(--tv-read);
}
@media (min-width: 1024px) {
  .tv-anat-exec {
    grid-template-columns: calc(var(--exec) * 100%) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: center;
  }
  .tv-anat-bar--exec { width: 100%; }
}

/* ── CAPABILITIES: LIVE FRAMEWORK DIAGRAM ────────────────── */
.tv-fw {
  --fw-cycle: 3.6s;
  --fw-hop: 1s;
  --fw-lane: 0.12s;
  margin-bottom: var(--space-6);
}
.tv-fw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--tv-line);
}
.tv-fw-cap {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-read);
}
.tv-fw-cap-n { color: var(--c-accent-hi); }

.tv-fw-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--tv-graphic);
  border-radius: 2px;
  background: transparent;
  color: var(--tv-heading);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tv-fw-toggle[hidden] { display: none; }
.tv-fw-toggle:hover {
  border-color: var(--c-accent-hi);
  color: var(--c-accent-hi);
}
.tv-fw-toggle:focus-visible {
  outline: 2px solid var(--tv-heading);
  outline-offset: 2px;
}
.tv-fw-toggle:active { background: var(--tv-chip); }
.tv-fw-toggle:disabled {
  border-color: var(--tv-line);
  color: var(--tv-muted);
  cursor: not-allowed;
}
.tv-fw-ico--play { display: none; }
.tv-fw[data-paused="true"] .tv-fw-ico--pause { display: none; }
.tv-fw[data-paused="true"] .tv-fw-ico--play  { display: block; }

.tv-fw-heads,
.tv-fw-stage {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(40px, 0.7fr) minmax(0, 1.15fr) minmax(40px, 0.7fr)
    minmax(0, 1fr) minmax(40px, 0.7fr) minmax(0, 1fr);
}
.tv-fw-heads { margin-bottom: var(--space-2); }
.tv-fw-heads span {
  grid-column: var(--x);
  text-align: center;
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tv-muted);
}
.tv-fw-stage {
  grid-template-rows: repeat(3, minmax(56px, auto));
  row-gap: var(--space-2);
}
.tv-fw-node {
  grid-column: var(--x);
  grid-row: var(--y) / span var(--span);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--tv-graphic);
  border-radius: 4px;
  background: var(--c-dark);
  text-align: center;
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  line-height: 1.3;
  color: var(--tv-read);
}
.tv-fw-node--core {
  border-color: var(--c-accent);
  background: var(--tv-chip);
  font-size: var(--tv-fs-body);
  font-weight: var(--fw-700);
  color: var(--tv-heading);
}
/* Arrival ring: fades in as the signal lands (opacity only, no shadow) */
.tv-fw-node::after {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border: 1px solid var(--c-accent-hi);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
}

.tv-fw-link {
  grid-column: var(--x);
  grid-row: var(--y);
  position: relative;
  align-self: center;
  height: 16px;
  overflow: hidden;
}
.tv-fw-link::before {            /* the wire */
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 7px;
  height: 1px;
  background: var(--tv-graphic);
}
.tv-fw-link::after {             /* the arrowhead */
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 9px;
  transform: translateY(-50%);
  background: var(--tv-graphic);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* The pulse wrapper spans the whole wire; translating it by 100% of its own
   width carries the head from one end of the wire to the other. */
.tv-fw-pulse {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  font-style: normal;
  pointer-events: none;
}
.tv-fw-pulse::before {           /* trail */
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 28px;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--c-accent-hi));
}
.tv-fw-pulse::after {            /* head */
  content: '';
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--c-accent-hi);
}

.tv-fw[data-motion="on"] .tv-fw-pulse {
  display: block;
  animation: tv-pulse-x var(--fw-cycle) linear infinite;
  animation-delay: calc(var(--g) * var(--fw-hop) + (var(--y) - 1) * var(--fw-lane));
  animation-play-state: paused;
}
.tv-fw[data-motion="on"] .tv-fw-node::after {
  animation: tv-arrive var(--fw-cycle) var(--tv-ease-out) infinite;
  animation-delay: calc(var(--at) * var(--fw-hop) + (var(--y) - 1) * var(--fw-lane));
  animation-play-state: paused;
}
.tv-fw[data-motion="on"][data-state="running"] .tv-fw-pulse,
.tv-fw[data-motion="on"][data-state="running"] .tv-fw-node::after {
  animation-play-state: running;
}

@keyframes tv-pulse-x {
  0%        { transform: translateX(0);    opacity: 0; }
  5%        { opacity: 1; }
  28%       { transform: translateX(100%); opacity: 1; }
  32%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes tv-pulse-y {
  0%        { transform: translateY(0);    opacity: 0; }
  5%        { opacity: 1; }
  28%       { transform: translateY(100%); opacity: 1; }
  32%, 100% { transform: translateY(100%); opacity: 0; }
}
@keyframes tv-arrive {
  0%        { opacity: 0; }
  3%        { opacity: 1; }
  18%, 100% { opacity: 0; }
}

/* Phones: the same grid, transposed. Stages become rows, lanes become columns,
   and the signal runs top to bottom. */
@media (max-width: 767.98px) {
  .tv-fw-bar { align-items: flex-start; }
  .tv-fw-heads { display: none; }
  .tv-fw-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 40px auto 40px auto 40px auto;
    column-gap: var(--space-1);
    row-gap: 0;
  }
  .tv-fw-node {
    grid-column: var(--y) / span var(--span);
    grid-row: var(--x);
    min-height: 48px;
    padding: var(--space-1);
  }
  .tv-fw-link {
    grid-column: var(--y);
    grid-row: var(--x);
    justify-self: center;
    align-self: stretch;
    width: 16px;
    height: auto;
  }
  .tv-fw-link::before {
    top: 0;
    bottom: 7px;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
  }
  .tv-fw-link::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 9px;
    height: 7px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .tv-fw-pulse::before {
    top: auto;
    bottom: 100%;
    left: 50%;
    right: auto;
    width: 2px;
    height: 28px;
    margin: 0 0 0 -1px;
    background: linear-gradient(180deg, transparent, var(--c-accent-hi));
  }
  .tv-fw-pulse::after {
    top: -3px;
    left: 50%;
    margin: 0 0 0 -3px;
  }
  .tv-fw[data-motion="on"] .tv-fw-pulse { animation-name: tv-pulse-y; }
}

/* ── CAPABILITIES: LIST ──────────────────────────────────── */
.tv-cap-list { border-top: 1px solid var(--tv-line); }
.tv-cap {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--tv-line);
}
.tv-cap-n {
  grid-row: 1 / span 2;
  padding-top: 3px;
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  color: var(--c-accent-hi);
}
.tv-cap-title {
  font-size: var(--tv-fs-body);
  font-weight: var(--fw-700);
  line-height: 1.4;
  color: var(--tv-heading);
}
.tv-cap-body {
  max-width: 62ch;
  font-size: var(--tv-fs-body);
  line-height: 1.7;
  color: var(--tv-muted);
}
@media (min-width: 1024px) {
  .tv-cap {
    grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }
  .tv-cap-n { grid-row: auto; }
}

/* ── BEFORE IT EXISTS (3D) ───────────────────────────────── */
.tv-3d-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .tv-3d-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-6);
    align-items: start;
  }
}
.tv-3d .section-header { margin-bottom: var(--space-3); }
.tv-3d-body {
  max-width: 62ch;
  font-size: var(--tv-fs-body);
  line-height: 1.75;
  color: var(--tv-muted);
}
.tv-3d-figs {
  display: grid;
  gap: var(--space-4);
}
.tv-fig img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--tv-frame-edge);
  box-shadow: var(--tv-spill);
}
.tv-fig figcaption {
  margin-top: var(--space-1);
  font-size: var(--tv-fs-label);
  line-height: 1.5;
  color: var(--tv-muted);
}
/* The wireframe source is 768px wide: shown at 384px or less, never upscaled */
.tv-fig--wire {
  justify-self: end;
  width: 100%;
  max-width: 384px;
}
@media (min-width: 1024px) {
  .tv-fig--wire {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 384px);
    column-gap: var(--space-3);
    align-items: end;
    max-width: none;
  }
  .tv-fig--wire img { grid-column: 2; grid-row: 1; }
  .tv-fig--wire figcaption {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    max-width: 18ch;
    margin-top: 0;
    text-align: right;
  }
}

/* ── PROCESS ─────────────────────────────────────────────── */
.tv-process {
  background: var(--c-dark);
  scroll-margin-top: var(--space-3);
}
.tv-process-head {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  text-align: center;
}
.tv-process-steps {
  display: flex;
  flex-direction: column;
}
.tv-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--tv-line);
}
.tv-step:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .tv-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "num     ."
      "content visual";
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    padding-block: var(--space-6);
    align-items: start;
  }
  .tv-step--flip {
    grid-template-areas:
      ".      num"
      "visual content";
  }
  .tv-step-num     { grid-area: num; }
  .tv-step-content { grid-area: content; }
  .tv-step-visual  { grid-area: visual; }
}
.tv-step--featured .tv-step-num { color: var(--c-accent-hi); }
.tv-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.tv-step-tag {
  padding: 4px 10px;
  border: 1px solid var(--tv-chip-edge);
  border-radius: 2px;
  background: var(--tv-chip);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-accent-hi);
}
.tv-step-title {
  margin-bottom: var(--space-2);
  font-size: var(--tv-fs-body);
  font-weight: var(--fw-700);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--tv-heading);
}
.tv-step-desc {
  max-width: 62ch;
  margin-bottom: var(--space-2);
  font-size: var(--tv-fs-body);
  line-height: 1.75;
  color: var(--tv-muted);
}
.tv-step-desc:last-child { margin-bottom: 0; }
.tv-step-visual { min-width: 0; }

/* Featured step: the sibling Blue Wash panel. Nothing inside it is boxed, so
   the lock list and the rule it enforces are set off by Hairlines instead. */
@media (min-width: 1024px) {
  .tv-step--featured .tv-step-content {
    padding: var(--space-4);
    border: 1px solid var(--tv-wash-edge);
    border-radius: 4px;
    background: var(--tv-wash);
  }
}
.tv-step-lock {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--tv-line);
}
.tv-step-lock-label {
  margin-bottom: var(--space-2);
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-read);
}
.tv-checklist {
  display: grid;
  gap: var(--space-1);
}
.tv-checklist li {
  position: relative;
  padding-left: 28px;
  font-size: var(--tv-fs-body);
  line-height: 1.55;
  color: var(--tv-muted);
}
.tv-checklist li::before {
  content: '';
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--c-accent-hi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234aa3f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234aa3f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tv-step-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--tv-line);
  font-size: var(--tv-fs-body);
  font-weight: var(--fw-600);
  line-height: 1.5;
  color: var(--c-accent-hi);
}
.tv-step-callout svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Process artefacts: the documents each step produces, drawn in code as dark
   insets on the Console Charcoal band. Flat: no shadow (DESIGN.md §4). */
.tv-doc {
  overflow: hidden;
  border: 1px solid var(--tv-line);
  border-radius: 4px;
  background: var(--c-black);
  font-size: var(--tv-fs-label);
  line-height: 1.45;
  color: var(--tv-muted);
}
.tv-doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--space-2);
  padding: 12px var(--space-3);
  border-bottom: 1px solid var(--tv-line);
}
.tv-doc-title {
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tv-read);
}
.tv-doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
  color: var(--c-accent-hi);
}

/* Step 1: schedule, planned back from the due date */
.tv-sched {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.tv-sched li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-left: 28px;
}
.tv-sched li::before {           /* milestone */
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 1px solid var(--tv-graphic);
  border-radius: 50%;
  background: var(--c-black);
}
.tv-sched li::after {            /* track to the next milestone */
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  width: 1px;
  height: 100%;
  background: var(--tv-graphic);
}
.tv-sched li:last-child::after { display: none; }
.tv-sched .is-done { color: var(--tv-read); }
.tv-sched .is-done::before { background: var(--tv-graphic); }
.tv-sched .is-due {
  font-weight: var(--fw-600);
  color: var(--c-accent-hi);
}
.tv-sched .is-due::before {
  left: 2px;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-color: var(--c-accent-hi);
  background: var(--c-accent);
}

/* Step 2: locked script */
.tv-script { padding: 4px var(--space-3) var(--space-2); }
.tv-script-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.25fr) 2.75rem;
  column-gap: var(--space-2);
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--tv-line);
}
.tv-script-row:last-child { border-bottom: 0; }
.tv-script-row--head {
  padding-block: 8px;
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tv-script-row--head span:last-child,
.tv-script-ref { text-align: right; }
.tv-script-tc {
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-hi);
}
.tv-script-snd { color: var(--tv-read); }
@media (max-width: 639.98px) {
  .tv-script-row--head { display: none; }
  .tv-script-row {
    grid-template-columns: 3rem minmax(0, 1fr) 2.5rem;
    grid-template-areas:
      "tc pic ref"
      ".  snd .";
    row-gap: 4px;
  }
  .tv-script-tc  { grid-area: tc; }
  .tv-script-pic { grid-area: pic; }
  .tv-script-snd { grid-area: snd; }
  .tv-script-ref { grid-area: ref; }
}

/* Step 4: timestamped review notes */
.tv-notes { padding: 4px var(--space-3) var(--space-2); }
.tv-note {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  grid-template-areas:
    "tc who  status"
    "tc text status";
  column-gap: var(--space-2);
  row-gap: 2px;
  padding-block: 12px;
  border-bottom: 1px solid var(--tv-line);
}
.tv-note:last-child { border-bottom: 0; }
.tv-note-tc {
  grid-area: tc;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-hi);
}
.tv-note-who {
  grid-area: who;
  letter-spacing: 0.04em;
}
.tv-note-text {
  grid-area: text;
  color: var(--tv-read);
}
.tv-note-status {
  grid-area: status;
  align-self: center;
  padding: 2px var(--space-1);
  border: 1px solid var(--tv-line);
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.tv-note.is-open .tv-note-status {
  border-color: var(--tv-chip-edge);
  background: var(--tv-chip);
  color: var(--c-accent-hi);
}

/* Step 5: delivery list and the size check */
.tv-files { padding: 4px var(--space-3) 0; }
.tv-files li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--space-2);
  padding-block: 12px;
  border-bottom: 1px solid var(--tv-line);
}
.tv-file-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--tv-read);
}
.tv-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label track note";
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.tv-meter-label { grid-area: label; }
.tv-meter-note  { grid-area: note; color: var(--tv-read); }
.tv-meter-track {
  grid-area: track;
  position: relative;
  height: 6px;
  border-radius: 1px;
  background: var(--tv-track);
}
.tv-meter-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 76%;
  border-radius: 1px;
  background: var(--c-accent);
}
.tv-meter-cap {                  /* the portal's limit */
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 88%;
  width: 2px;
  border-radius: 1px;
  background: var(--tv-heading);
}
@media (max-width: 639.98px) {
  .tv-meter {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label note"
      "track track";
  }
}

/* ── CONFIDENTIALITY ─────────────────────────────────────── */
.tv-conf-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .tv-conf-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-6);
    align-items: start;
  }
}
.tv-conf .section-header { margin-bottom: var(--space-3); }
.tv-conf-body {
  max-width: 62ch;
  font-size: var(--tv-fs-body);
  line-height: 1.75;
  color: var(--tv-muted);
}
/* A clause list, set the way a bid team's own compliance tables are set */
.tv-conf-list { border-top: 1px solid var(--tv-line); }
.tv-conf-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 18px;
  column-gap: var(--space-2);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--tv-line);
}
.tv-conf-ref {
  font-size: var(--tv-fs-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  color: var(--c-accent-hi);
}
.tv-conf-line {
  font-size: var(--tv-fs-body);
  line-height: 1.5;
  color: var(--tv-read);
}
.tv-conf-check {
  align-self: center;
  color: var(--c-accent-hi);
}

/* ── PITCH FORMATS ───────────────────────────────────────── */
.tv-pitch { padding-block: var(--space-6); }
.tv-pitch-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .tv-pitch-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-6);
    align-items: start;
  }
}
.tv-pitch .section-header { margin-bottom: 0; }
.tv-pitch-body p {
  max-width: 62ch;
  margin-bottom: var(--space-3);
  font-size: var(--tv-fs-body);
  line-height: 1.75;
  color: var(--tv-muted);
}

/* ── FAQ (shared markup, page-scoped hit area and focus ring) ── */
.tv-page .faq-item { padding-block: 0; }
.tv-page .faq-question { padding-block: var(--space-3); }
.tv-page .faq-answer {
  padding-top: 0;
  padding-bottom: var(--space-3);
}
.tv-page .faq-question:focus-visible {
  outline: 2px solid var(--tv-heading);
  outline-offset: 4px;
}

/* ── CTA LEAD-IN (sits directly above the shared contact section) ── */
.tv-leadin {
  padding-block: var(--space-6);
  text-align: center;
}
.tv-leadin-line,
.tv-leadin-note {
  max-width: 36rem;
  margin-inline: auto;
  font-size: var(--tv-fs-body);
  line-height: 1.6;
  text-wrap: balance;
}
.tv-leadin-line {
  font-weight: var(--fw-600);
  color: var(--tv-heading);
}
.tv-leadin-note {
  margin-top: var(--space-1);
  color: var(--tv-muted);
}

/* ── BELOW DESKTOP: order and alignment ──────────────────── */
@media (max-width: 1023.98px) {
  /* Headings centre, as on every sibling service page; long copy stays left */
  .tv-hero-head,
  .tv-hero-copy,
  .tv-head { text-align: center; }
  .tv-section-head,
  .tv-hero-sub { margin-inline: auto; }
  .tv-hero-actions { justify-content: center; }
  .tv-hero { min-height: auto; align-items: flex-start; }
  .tv-hero-inner {
    row-gap: var(--space-2);
    padding-block: var(--space-2) var(--space-5);
  }
  .tv-hero-sub {
    margin-bottom: var(--space-3);
    line-height: 1.65;
  }

  /* Overview: heading, then picture, then copy */
  .tv-overview-text { display: contents; }
  .tv-overview-inner { gap: var(--space-3); }
  .tv-overview .section-header { margin-bottom: 0; }
  .tv-overview-visual { order: 1; }
  .tv-overview-body { order: 2; }

  /* Process steps: number, tags, title, visual, then copy */
  .tv-step-content { display: contents; }
  .tv-step-visual { order: 1; }
  .tv-step-desc,
  .tv-step-lock,
  .tv-step-callout { order: 2; }
  .tv-step-num,
  .tv-step-tags,
  .tv-step-title,
  .tv-step-desc,
  .tv-step-lock,
  .tv-step-callout { margin: 0; }
}

/* Phones: the clock and the chapter start times are illustrative and cramp the
   narrow chapters; the playhead, numbers and names carry the structure. */
@media (max-width: 479.98px) {
  .tv-tl-clock,
  .tv-tl-t { display: none; }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Entrances become a plain fade */
  .tv-page .reveal {
    transform: none;
    transition: opacity 0.3s linear;
  }
  /* The ribbon loop has no reduced-motion switch of its own: take the canvases
     out of layout so it has nothing to draw. */
  .tv-hero-canvas,
  .tv-section-dna { display: none; }
  .tv-tl-fill,
  .tv-tl-head,
  .tv-fw-node::after { animation: none !important; }
  .tv-fw-pulse { display: none !important; }
}