/* Airmode Media — production styles.
   Values transcribed from design/Airmode Homepage v2.dc.html (direction A, locked). */

:root {
  --navy: #0b1830;
  --anthracite: #15181d;
  --off: #f4f6fa;
  --orange: #f5821f;
  /* The accent is bright enough for a knob on any ground, but as type on white
     it drops to 2.6:1. This is the same hue carried down to clear 4.5:1 there,
     and it is only ever used for text on the light sections. */
  --orange-ink: #b35c00;
  --pill: #16264a;
  --line-navy: #1e2d4d;
  --line-navy-3: #3a4b6e;
  --body-navy: #c9d0dd;
  --muted-navy: #8794ae;
  --muted-light: #2a3650;
  --line-light: #d5dae4;
  --white: #fff;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --out: cubic-bezier(0.2, 0, 0, 1);

  --pad: clamp(20px, 4vw, 56px);
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale. Six steps, deliberately far apart — the page previously used
     thirteen sizes between 11 and 72px, which reads as mush. Nothing new may be
     added between these; if two things want sizes this close, give them the
     same one.

     xs       mono labels and the legal line. Also the floor: nothing readable
              goes below it.
     ui       interactive labels only — navigation, buttons, form fields. The
              one step that is not content type; content never uses it.
     body     paragraphs and the secondary line under a card title.
     lg       card and item titles, short statements.
     head     section headings and the hero. Same size on purpose: the hero
              leads by position, picture and the space around it, not by points.
     display  figures that carry a section — the stats and the channel keywords.
              These, not the headline, are the largest type on the page, because
              the client capped how much screen the hero may take. */
  --text-xs: 13px;
  --text-ui: 15px;
  --text-body: clamp(17px, 1rem + 0.25vw, 19px);
  --text-lg: clamp(22px, 1.1rem + 0.8vw, 26px);
  --text-head: clamp(32px, 1.2rem + 3.4vw, 56px);
  --text-display: clamp(44px, 2rem + 4.6vw, 88px);

  /* Tracking tightens as size grows; a value right for 88px chokes 22px. */
  --track-display: -0.04em;
  --track-head: -0.025em;
  --track-lg: -0.01em;
  --track-label: 0.08em;

  --lead-display: 0.9;
  --lead-head: 1.05;
  --lead-lg: 1.2;
  --lead-body: 1.55;

  --panel: #13254a;
}

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

html {
  scroll-behavior: smooth;
  /* fixed header offset for anchor jumps */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--navy);
  font-family: Barlow, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--orange);
}

img,
video {
  display: block;
}

/* must beat the display rules below (.modal__ph, .menu, .sent, …) */
[hidden] {
  display: none !important;
}

input,
textarea,
button {
  font-family: inherit;
}

h1,
h2,
p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--off);
  color: var(--navy);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
}

.skip:focus {
  left: var(--pad);
  top: 12px;
}

.mono {
  font-family: var(--mono);
}

.kicker {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.kicker--orange {
  color: var(--orange);
}
.kicker--light {
  color: var(--body-navy);
}
.kicker--dark {
  color: var(--muted-light);
}

.h2 {
  font-size: var(--text-head);
  font-weight: 700;
  line-height: var(--lead-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
  /* In em, so the measure grows with the type and the longest heading keeps to
     two lines on a desktop instead of straggling to three. */
  max-width: 13em;
}

/* ---------------------------------------------------------------- knob/pills */

.knob {
  border-radius: 50%;
  background: var(--off);
  flex: none;
}

/* Outline pill button: border + text + knob on the right. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--off);
  border-radius: 999px;
  background: transparent;
  color: var(--off);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn--hero {
  height: 48px;
  padding: 0 5px 0 22px;
  font-size: var(--text-ui);
}
.btn--hero .knob {
  width: 34px;
  height: 34px;
}

.btn--md {
  height: 50px;
  padding: 0 5px 0 22px;
  font-size: var(--text-ui);
}
.btn--md .knob {
  width: 36px;
  height: 36px;
}

/* Every pill button answers the pointer as one piece: label and knob both
   take the accent and the knob nudges across. Before this they fell through
   to the blanket a:hover, which turned the label orange and left the knob
   dead — half the control responding. */
.btn {
  transition: border-color 200ms var(--out);
}

.btn .knob {
  transition:
    background-color 200ms var(--out),
    transform 200ms var(--out);
}

.btn:hover,
.btn:focus-visible {
  color: var(--orange);
}

/* Same gesture on the white sections, in the readable shade. */
.btn--dark:hover,
.btn--dark:focus-visible {
  color: var(--orange-ink);
}

.btn:hover .knob,
.btn:focus-visible .knob {
  background: var(--orange);
  transform: translateX(3px);
}

.link-u {
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
  color: inherit;
}

/* ------------------------------------------------------------------- header */

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 200ms linear, height 200ms linear,
    border-color 200ms linear;
}

.header.is-scrolled {
  height: 72px;
  background: var(--navy);
  border-bottom-color: var(--line-navy);
}

.header__logo {
  width: 236px;
  margin-left: -12px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  transition: width 200ms linear;
}

.header.is-scrolled .header__logo {
  width: 200px;
}

.header__logo img {
  width: 100%;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__item {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  font-size: var(--text-ui);
  font-weight: 600;
  white-space: nowrap;
  background: rgba(11, 24, 48, 0.55);
  color: var(--off);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 150ms linear;
}

.header.is-scrolled .nav__item {
  background: var(--pill);
}

.nav__item:hover {
  filter: brightness(1.25);
  color: var(--off);
}

.header .nav__item.is-active,
.header.is-scrolled .nav__item.is-active {
  background: var(--off);
  color: var(--navy);
}

/* header CTA: 40px pill with a 44x28 track */
.cta {
  margin-left: 12px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--off);
  border-radius: 999px;
  padding: 0 4px 0 18px;
  color: var(--off);
  font-size: var(--text-ui);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.cta__track {
  width: 44px;
  height: 28px;
  position: relative;
  flex: none;
}

.cta__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--off);
  transform: translateX(0);
  transition:
    background-color 350ms var(--ease),
    transform 350ms var(--ease);
}

/* Same answer as the pill buttons — pale at rest, accent under the pointer —
   on top of the switch's own slide. */
.cta:hover .cta__knob,
.cta:focus-visible .cta__knob {
  background: var(--orange);
  transform: translateX(16px);
}

.cta {
  transition: color 200ms var(--out);
}

.cta:hover,
.cta:focus-visible {
  color: var(--orange);
}

.langs {
  display: flex;
  border: 2px solid var(--line-navy-3);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-left: 4px;
}

.langs__item {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--off);
  text-decoration: none;
}

.langs__item:hover {
  color: var(--off);
}

.langs__item.is-active {
  background: var(--off);
  color: var(--navy);
}

/* compact header (<1180px) */
.header__compact {
  display: none;
  gap: 8px;
  align-items: center;
}

.cta-round {
  height: 44px;
  width: 44px;
  border: 2px solid var(--off);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.cta-round span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
}

.menu-btn {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill);
  color: var(--off);
  font-size: var(--text-ui);
  font-weight: 600;
  cursor: pointer;
}

/* Raised from 1179px when the bar grew to six links: measured, the links plus
   the CTA and the language switch no longer fit a 1280px laptop. Below this the
   menu button takes over and the menu lists every section. */
@media (max-width: 1365px) {
  .header__wide {
    display: none;
  }
  .header__compact {
    display: flex;
  }
}

/* --------------------------------------------------------------- full menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--navy);
  display: flex;
  flex-direction: column;
}

.menu[hidden] {
  display: none;
}

.menu__bar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--line-navy);
}

.menu__bar img {
  width: 168px;
  margin-left: -10px;
}

.menu__close {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--off);
  color: var(--navy);
  font-size: var(--text-ui);
  font-weight: 600;
  cursor: pointer;
}

.menu__body {
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
}

.menu__item {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--off);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  flex: none;
}

.menu__item:hover {
  color: var(--off);
}

.menu__spacer {
  flex: 1;
  min-height: 24px;
}

.menu__cta {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--off);
  border-radius: 999px;
  padding: 0 7px 0 24px;
  color: var(--off);
  font-size: var(--text-body);
  font-weight: 600;
  text-decoration: none;
  flex: none;
}

.menu__cta {
  transition: color 200ms var(--out);
}

.menu__cta:hover,
.menu__cta:focus-visible {
  color: var(--orange);
}

.menu__cta span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--off);
  transition: background-color 200ms var(--out);
}

.menu__cta:hover span,
.menu__cta:focus-visible span {
  background: var(--orange);
}

.menu__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  color: var(--body-navy);
  font-size: var(--text-ui);
  gap: 12px;
  flex-wrap: wrap;
}

.menu__foot .langs__item {
  padding: 6px 14px;
  font-size: var(--text-ui);
}

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: max(640px, 100vh);
  overflow: hidden;
  background: var(--navy);
  color: var(--off);
  display: flex;
  flex-direction: column;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 24, 48, 0.5);
}

/* Keep the text block in the lower third so the video stays visible. */
.hero__content {
  position: relative;
  margin-top: auto;
  padding: 0 var(--pad) clamp(40px, 6vh, 72px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1080px;
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__track {
  width: 64px;
  height: 36px;
  border: 3px solid var(--off);
  border-radius: 999px;
  position: relative;
  flex: none;
}

.hero__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--off);
  transform: translateX(0);
}

.hero__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.hero__title {
  /* The head step, but also bounded by viewport height: the client caps how
     much of the screen the hero text may cover, and on a short screen (a 720px
     laptop) width alone would size it past that. Replaces a hard breakpoint. */
  font-size: clamp(32px, min(3.6vw, 5.2vh), 56px);
  font-weight: 700;
  line-height: var(--lead-head);
  letter-spacing: var(--track-head);
  /* Big letters with round and diagonal left edges read as indented; pull the
     line back so it aligns optically with the sentence under it. */
  margin-left: -0.04em;
  text-wrap: balance;
  /* Holds the slogan to two lines at every size: wider and it straightens into
     one thin 47-character line on a laptop, narrower and it breaks to three,
     which overruns the share of the screen the client allows the hero. */
  max-width: 700px;
}

.hero__sub {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lead-body);
  color: var(--body-navy);
  max-width: 560px;
}

.hero__ctas {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Short viewports (e.g. 1280x720): the headline wraps to two lines, so tighten
   the stack to keep the text inside the lower third and the video visible. */
@media (max-height: 760px) {
  .hero__content {
    gap: 12px;
    padding-bottom: clamp(32px, 5vh, 56px);
  }

  /* The headline already shrinks with the viewport height; dropping the
     supporting line a step too is what brings a 720px laptop back inside the
     client's share of the screen. */
  .hero__sub {
    font-size: var(--text-ui);
    line-height: 1.45;
  }
}

/* Narrow screens: the headline runs to three lines and the CTAs wrap to two
   rows, so trim the gaps and the badge to hold the lower-third budget. */
@media (max-width: 480px) {
  .hero__content {
    gap: 10px;
  }

  /* The German and Turkish subheadlines are longer than the English one and
     take an extra line here, which pushed both past the agreed share of the
     screen. Dropping to the interactive step holds all three inside it without
     adding a size to the scale. */
  .hero__sub {
    font-size: var(--text-ui);
    line-height: 1.45;
  }

  .hero__track {
    width: 52px;
    height: 30px;
  }

  .hero__knob {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
  }

  .hero.is-on .hero__knob {
    transform: translateX(22px);
  }

  .hero__ctas {
    gap: 14px;
    margin-top: 0;
  }
}

/* intro animation: start state, then .is-on */
.js .hero__knob {
  transition: transform 350ms var(--ease), background 70ms linear 330ms;
}

.js .hero__title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 390ms var(--out) 450ms, transform 390ms var(--out) 450ms;
}

.js .hero__sub,
.js .hero__ctas {
  opacity: 0;
  transition: opacity 390ms var(--out) 560ms;
}

.hero.is-on .hero__knob {
  transform: translateX(28px);
  background: var(--orange);
}

.hero.is-on .hero__title {
  opacity: 1;
  transform: none;
}

.hero.is-on .hero__sub,
.hero.is-on .hero__ctas {
  opacity: 1;
}

/* ----------------------------------------------------------------- section */

.sec {
  padding: clamp(72px, 10vw, 128px) var(--pad);
  display: flex;
  flex-direction: column;
}

.sec--navy {
  background: var(--navy);
  color: var(--off);
}

.sec--light {
  background: var(--off);
}

.sec--white {
  background: var(--white);
}

.sec__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 980px;
}

/* ------------------------------------------------------------ TV (#tv) */

.tv {
  gap: 48px;
}

.tv__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 64px;
  align-items: end;
}

.tv__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tv__col--right {
  gap: 22px;
  align-items: flex-start;
}

.tv__body {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  max-width: 560px;
  text-wrap: pretty;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tags span {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border: 1.5px solid var(--line-navy-3);
  border-radius: 999px;
  font-size: var(--text-ui);
  font-weight: 600;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.case {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 0;
  border-top: 2px solid var(--off);
  padding: 16px 0 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.case:hover {
  opacity: 0.88;
}

.case__media {
  aspect-ratio: 16 / 9;
  background: var(--panel);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Branded stand-in panel: switch mark bottom-left, caption beneath it. */
.brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.brand__l {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-navy);
}

.case__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 24px;
  border: 2px solid var(--off);
  border-radius: 999px;
}

/* The three real cards open a clip, and nothing on them said so — the badge
   is a switch mark, not a play button, so they read as pictures. Point at one
   and the dot turns into a play mark and the title takes an underline, the
   same underline the invitation card uses for its link. The four-point square
   is there so the shape can interpolate into the triangle instead of
   snapping. The fourth card has no badge: its clip plays in place. */
.case__badge span {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--off);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:
    background-color 300ms var(--out),
    border-radius 300ms var(--out),
    clip-path 300ms var(--out);
}

.case:hover .case__badge span,
.case:focus-visible .case__badge span {
  background: var(--orange);
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

.case__media img {
  transition: transform 600ms var(--out);
}

/* A second of the clip, over the poster, as the taste that earns the click.
   It is deliberately short: the case itself, with sound, is behind the card. */
.case__prev {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 300ms var(--out),
    transform 600ms var(--out);
}

button.case:hover .case__prev,
button.case:focus-visible .case__prev {
  opacity: 1;
  transform: scale(1.03);
}

button.case:hover .case__media img,
button.case:focus-visible .case__media img {
  transform: scale(1.03);
}

button.case .case__show {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 220ms var(--out);
}

button.case:hover .case__show,
button.case:focus-visible .case__show {
  text-decoration-color: currentColor;
}

.case__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.case__ch {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.case__n {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted-navy);
}

.case__show {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lead-lg);
}

.case__show--u {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ------------------------------------------------- switch symbol (reusable) */

.switch {
  border: 3px solid var(--off);
  border-radius: 999px;
  position: relative;
  flex: none;
}

.switch--lg {
  width: 72px;
  height: 40px;
}

.switch--lg .switch__knob {
  width: 26px;
  height: 26px;
  top: 4px;
  right: 4px;
}

.switch--sm {
  width: 44px;
  height: 26px;
  border-width: 2px;
}

.switch--sm .switch__knob {
  width: 16px;
  height: 16px;
  top: 3px;
  right: 3px;
}

.switch__knob {
  position: absolute;
  border-radius: 50%;
  background: var(--off);
}

.switch__knob--orange {
  background: var(--orange);
}

/* ------------------------------------------- "next season" invitation card */

.case--next {
  text-decoration: none;
}

.case--next:hover {
  color: inherit;
}

/* The three cards beside this one are shows that ran. This one is the slot
   that is still open, so it is the only place on the page where the reader is
   the subject — and the switch is the pitch: point at the card and the brand
   mark throws from off to on. Packed to the bottom rather than spread, since
   a 16:9 box with one line in it is mostly void. */
.case__media--next {
  background: var(--panel);
  border: 2px solid var(--line-navy-3);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 22px);
}

.case--next:hover .case__media--next {
  border-color: var(--off);
}

/* A still frame of German television, held under a scrim so the line on top
   of it stays the thing you read. It runs only while the pointer is in the
   box and goes back to its first frame on the way out. */
.case__loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__media--next::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 24, 48, 0.82);
  transition: background-color 420ms var(--out);
}

.case--next:hover .case__media--next::after,
.case--next:focus-visible .case__media--next::after {
  background-color: rgba(11, 24, 48, 0.5);
}

/* Both sit over the scrim rather than under it. */
.case__media--next > .case__line,
.case__media--next > .switch {
  position: relative;
  z-index: 1;
}

.switch--throw {
  background: transparent;
  transition: background-color 320ms var(--out);
}

.switch--throw .switch__knob {
  left: 4px;
  right: auto;
  transform: translateX(0);
  transition: transform 320ms var(--ease);
}

.case--next:hover .switch--throw,
.case--next:focus-visible .switch--throw {
  background: var(--orange);
}

.case--next:hover .switch--throw .switch__knob,
.case--next:focus-visible .switch--throw .switch__knob {
  transform: translateX(32px);
}

.case__line {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lead-lg);
  text-wrap: balance;
  position: relative;
  transition: opacity 240ms var(--out);
}

/* Sits over the resting line rather than beside it, so the card does not
   change height as the two swap. The resting line is the one screen readers
   get; this one is decoration on top of it. */
.case__line-on {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 240ms var(--out);
}

.case--next:hover .case__line,
.case--next:focus-visible .case__line {
  color: transparent;
}

.case--next:hover .case__line-on,
.case--next:focus-visible .case__line-on {
  color: var(--off);
  opacity: 1;
}

/* --------------------------------------------------------------- numbers */

.numbers {
  background: var(--off);
  padding: clamp(56px, 7vw, 88px) var(--pad);
}

/* Left-packed rather than stretched: with only two figures left, equal-width
   columns spread them across the full page and the row reads empty. */
.numbers__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(40px, 8vw, 120px);
}

.stat {
  padding: 8px 24px 8px 20px;
  border-left: 2px solid var(--navy);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.stat__v {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
}

.stat__l {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--muted-light);
}

/* -------------------------------------------------------------- channels */

.channels {
  background: var(--off);
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(72px, 10vw, 128px);
  display: flex;
  flex-direction: column;
  gap: 44px;
  border-top: 1px solid var(--line-light);
}

.chan {
  background: var(--white);
  border: 1px solid var(--line-light);
  display: flex;
  flex-direction: column;
}

.chan:hover {
  border-color: var(--navy);
}

.chan__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

.chan__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The photograph sits behind the panel, never instead of it. */
.chan__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Branded keyword panel. Alternates navy / lighter navy down the grid. */
.chan__panel {
  position: absolute;
  inset: 0;
  background: var(--navy);
  color: var(--off);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.chan:nth-child(even) .chan__panel {
  background: #16264a;
}

/* Over a photograph the panel becomes a scrim: the keyword stays legible, the
   picture reads as texture, and seven pictures of different ages and grades
   settle into one surface. Saturation comes down for the same reason. */
.chan__panel--over,
.chan:nth-child(even) .chan__panel--over {
  background: rgba(11, 24, 48, 0.78);
  transition: background-color 600ms var(--out);
}

.chan:has(.chan__panel--over) .chan__photo {
  filter: saturate(0.55) contrast(1.05);
  transition: filter 600ms var(--out);
}

/* Point at a card and the picture comes up to its own colour: the scrim
   clears, the keyword and its label step aside, and the photograph is itself
   for as long as the pointer rests there. Slower going back than coming in, so
   the card settles rather than snaps. The title and the line under the picture
   never move, so nothing is only available on hover. */
.chan__panel--over .chan__panel-l,
.chan__panel--over .chan__panel-k {
  transition: opacity 600ms var(--out);
}

.chan:hover .chan__panel--over {
  background-color: rgba(11, 24, 48, 0.08);
  transition-duration: 350ms;
}

.chan:hover .chan__panel--over .chan__panel-l,
.chan:hover .chan__panel--over .chan__panel-k {
  opacity: 0;
  transition-duration: 300ms;
}

/* The switch is the one thing that stays while the panel clears — it marks the
   card as live and takes the accent, the same answer the buttons give. */
.chan__panel .switch__knob {
  transition: background-color 300ms var(--out);
}

.chan:hover .chan__panel .switch__knob {
  background: var(--orange);
}

.chan:hover .chan__photo {
  filter: saturate(1) contrast(1);
  transition-duration: 350ms;
}

.chan__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chan__panel-l {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-navy);
}

.chan__panel-k {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
}

.chan__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chan__t {
  font-size: var(--text-lg);
  font-weight: 600;
}

.chan__d {
  font-size: var(--text-body);
  color: var(--muted-light);
}

/* ------------------------------------------- cinema / projects / sponsors */

/* The heading block is shared with the TV section, which was written for navy.
   On the white sections the muted body colour and the button invert. */
.sec--white .tv__body {
  color: var(--muted-light);
}

.btn--dark {
  border-color: var(--navy);
  color: var(--navy);
}

.btn--dark .knob {
  background: var(--navy);
}

/* This block sits after the hover rules above and carries the same weight, so
   without its own hover state it would hold the knob navy on the light
   sections — which is the half-lit button the brief pointed at. */
.btn--dark:hover .knob,
.btn--dark:focus-visible .knob {
  background: var(--orange);
}

/* --- 04 Projects: full-width rows ------------------------------------- */

.projects {
  gap: 48px;
}

/* The heading block is a column flex container, so a button in it stretches to
   the full measure unless it is told to hug its own label. */
.sec__head .btn {
  align-self: flex-start;
}

.sec__lead {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  max-width: 46ch;
}

.prows {
  display: flex;
  flex-direction: column;
}

/* Rows are told apart by a step in tone, not by a rule. The odd rows take the
   lighter navy so the stack reads as banding rather than as a bordered list. */
.prow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 22px clamp(16px, 2vw, 28px);
}

/* Two columns only once there is room for both to hold a real measure; below
   that the title and its line stack, which is the phone's own composition. */
@media (min-width: 760px) {
  .prow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px 48px;
    padding: 26px clamp(16px, 2vw, 28px);
  }
}

.prow:nth-child(odd) {
  background: var(--pill);
}

.prow__t {
  font-size: var(--text-lg);
  font-weight: 600;
}

.prow__d {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  margin: 0;
}

/* --- 05 Sponsorship: argument beside one solid field ------------------- */

.spon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: start;
}

.spon__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.spon__field {
  background: var(--navy);
  color: var(--off);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.spon__t {
  font-size: var(--text-lg);
  font-weight: 600;
}

.spon__d {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  margin: 4px 0 0;
}

.cinema {
  gap: 48px;
}

/* One wide slot, 21:9 so it reads as a cinema screen rather than a TV card. */
.cinema__media,
.cinema__panel {
  width: 100%;
  aspect-ratio: 21 / 9;
  display: block;
  object-fit: cover;
  background: var(--navy);
}

/* Capped while it is only a placeholder — a full 21:9 of empty navy dominates
   the page. A real clip or photo uses the full ratio. */
.cinema__panel {
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 3vw, 40px);
  max-height: 440px;
}

.cinema__panel .switch--lg {
  width: 96px;
  height: 54px;
  border-width: 4px;
}

.cinema__panel .switch--lg .switch__knob {
  width: 36px;
  height: 36px;
  top: 5px;
  right: 5px;
}

/* ------------------------------------------------------------------- how */

.how {
  gap: 56px;
}

.how__wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.how__track {
  height: 44px;
  border: 3px solid var(--off);
  border-radius: 999px;
  position: relative;
  margin: 0 0 4px;
}

.how__knob {
  position: absolute;
  top: 4px;
  left: calc(0% + 4px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--off);
  transition: left 350ms var(--ease), background 70ms linear 300ms;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0.5;
  transition: opacity 200ms linear;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.step.is-active {
  opacity: 1;
}

.step__n {
  font-family: var(--mono);
  font-size: var(--text-xs);
}

.step__h {
  font-size: var(--text-lg);
  font-weight: 600;
}

.step__d {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  max-width: 380px;
}

/* -------------------------------------------------------------- partners */

.partners {
  gap: 44px;
}

/* The names set as one run, wrapping like a line of credits. No cells, so no
   borders to draw and no stranded last partner on a row of its own. */
.partners__run {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px clamp(28px, 4vw, 64px);
}

/* The item-title step, not the heading step: at heading size seven names stack
   into a seven-line wall and read as a headline rather than as a list. The
   section's weight comes from the heading above them. */
.partner__n {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-lg);
  color: var(--navy);
}

/* Logos run at one height and one ink. Four of the seven partners publish a
   black version themselves; the other three are flattened to the same ink so
   the row is not seven different brand colours and a gradient, which the
   brand rules do not allow on this page. */
.partner__l {
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) saturate(100%);
  opacity: 0.88;
  transition:
    filter 600ms var(--out),
    opacity 600ms var(--out);
}

/* The same idea on the logo wall: one ink at rest, the partner's own colours
   when you point at theirs. */
/* The identity filter is written out rather than `none`: a filter list and
   `none` do not interpolate reliably, and the logo simply stayed black. */
.partner__l:hover {
  filter: brightness(1) saturate(100%);
  opacity: 1;
  transition-duration: 300ms;
}


/* --------------------------------------------------------------- contact */

.contact {
  background: var(--navy);
  color: var(--off);
  padding: clamp(72px, 10vw, 128px) var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px 80px;
}

.contact__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact__body {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  max-width: 480px;
}

.contact__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
  font-size: var(--text-body);
  line-height: var(--lead-body);
}

.contact__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact__label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-navy);
}

/* form */

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--body-navy);
}

.field input {
  height: 50px;
  border: 2px solid var(--line-navy-3);
  border-radius: 999px;
  background: transparent;
  color: var(--off);
  padding: 0 20px;
  font-size: var(--text-body);
  outline: none;
}

.field textarea {
  border: 2px solid var(--line-navy-3);
  border-radius: 24px;
  background: transparent;
  color: var(--off);
  padding: 16px 20px;
  font-size: var(--text-body);
  outline: none;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--off);
}

.form__submit {
  align-self: flex-start;
  margin-top: 6px;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__err {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--off);
}

.sent {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  border: 2px solid var(--off);
  padding: 40px;
}

.sent[hidden] {
  display: none;
}

.sent__track {
  width: 80px;
  height: 46px;
  border: 3px solid var(--off);
  border-radius: 999px;
  position: relative;
}

.sent__knob {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
}

.sent__msg {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lead-lg);
}

.sent__again {
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--anthracite);
  color: var(--body-navy);
  padding: 40px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: var(--text-ui);
}

.footer__logo {
  width: 180px;
  margin-left: -10px;
}

.footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(11, 24, 48, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 0;
}

.modal[hidden] {
  display: none;
}

.modal__panel {
  width: min(1040px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--navy);
  border: 2px solid var(--off);
  color: var(--off);
  display: flex;
  flex-direction: column;
}

.modal__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: contain;
}

.modal__ph {
  aspect-ratio: 16 / 9;
  background: var(--panel);
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 3vw, 32px);
}

.modal__ph .switch--lg {
  width: 104px;
  height: 58px;
  border-width: 4px;
}

.modal__ph .switch--lg .switch__knob {
  width: 38px;
  height: 38px;
  top: 6px;
  right: 6px;
}

.modal__ph .brand__l {
  font-size: var(--text-xs);
}

.modal__foot {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.modal__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal__ch {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.modal__show {
  font-size: var(--text-lg);
  font-weight: 600;
}

.modal__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.modal__cta .knob {
  background: var(--orange);
}

.modal__close {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--pill);
  color: var(--off);
  font-size: var(--text-ui);
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------------------ legal page */

.legal {
  background: var(--navy);
  color: var(--off);
  min-height: 100vh;
  padding: calc(88px + clamp(56px, 8vw, 112px)) var(--pad)
    clamp(72px, 10vw, 128px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal__wrap {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Unmissable while the texts are unreviewed. Delete the markup, not just this
   rule, once a lawyer has signed them off. */
.legal__notice {
  border: 2px solid var(--orange);
  padding: 16px 20px;
  font-size: var(--text-body);
  line-height: var(--lead-body);
}

.legal__sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal__h {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lead-lg);
  margin: 0;
}

.legal__sec p {
  font-size: var(--text-body);
  line-height: var(--lead-body);
  color: var(--body-navy);
  margin: 0;
  overflow-wrap: break-word;
}

.legal__date {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-navy);
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* no intro: show the final state immediately */
  .js .hero__title,
  .js .hero__sub,
  .js .hero__ctas {
    opacity: 1;
    transform: none;
  }

  .js .hero__knob {
    transform: translateX(28px);
    background: var(--orange);
  }
}

/* Credit for a found picture. Small, quiet, but present — CC BY requires it. */
.cinema__credit {
  font-size: var(--text-xs);
  color: var(--muted-light);
  margin: 10px 0 0;
}

.cinema__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------- cinema: ad inside the screen */

/* The photograph keeps its place and its size; the clip is mapped onto the
   screen's four corners inside it, so it sits at the screen's angle instead of
   lying flat over the picture. The stage is scaled to whatever width the
   section gives it, which is what --cinema-k carries (set in main.js). */
.cinema__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1920 / 823;
}

.cinema__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 823px;
  transform-origin: 0 0;
  transform: scale(var(--cinema-k, 1));
}

.cinema__inner img {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 823px;
  display: block;
}

.cinema__ad {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  object-fit: fill;
  transform-origin: 0 0;
  /* maps the 1280x720 ad onto the screen corners in the 1920x823 photo:
     TL 54,173 · TR 694,227 · BR 689,528 · BL 56,607
     (1px overscan, fully covers the "Opening Ceremony" still) */
  transform: matrix3d(
    0.7416458211, 0.1212272714, 0, 0.0003481928,
    0.003911691, 0.6150685876, 0, 0.0000202485,
    0, 0, 1, 0,
    54, 173, 0, 1
  );
}