/* Base ------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.is-dark :focus-visible { outline-color: #fff; }

/* Layout ----------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  overflow: hidden;
}

.section--light { background: var(--paper); }

.section--dark {
  background: var(--navy-panel);
  color: var(--on-dark);
}

/* ── Alternating grounds ──────────────────────────────────────────────────
   Sections alternate light / dark / light / dark down the page, and the
   alternation is computed over the VISIBLE sections at runtime (reveal.js), so a
   section that never reveals does not leave two of the same colour touching.

   These two classes flip a section's ground by REDEFINING THE TWO TOKENS its
   contents already read, not by restating every colour. Section 3's title, stat
   figures, notes, Learn more link, speaker names and responsibility text all
   resolve `var(--on-dark)` / `var(--on-dark-soft)`; section 2's title, company
   list and labels all resolve `var(--ink)` / `var(--ink-soft)`. Point those four
   tokens the other way and roughly twenty declarations follow on their own —
   which also means anything added later inherits the behaviour instead of
   needing its own override.

   Naming: `--as-light` means "a light ground for content authored for dark", and
   vice versa. The original .section--light / .section--dark stay exactly as they
   were, so a section with no flip class renders as it always did. */
.section--as-light {
  background: var(--paper);
  color: var(--ink);
  --on-dark: var(--ink);
  --on-dark-soft: var(--ink-soft);
}

.section--as-dark {
  background: var(--navy-panel);
  color: var(--on-dark);
  --ink: var(--on-dark);
  --ink-soft: var(--on-dark-soft);
}

/* The two things tokens cannot carry.

   1. The LOGO FILTER. brightness(0) invert(1) paints every logo pure white,
      which is correct on navy and invisible on paper — the one change that would
      silently delete content rather than merely look wrong. Dropping invert(1)
      leaves a black silhouette, the same shape the other way up. A logo set to
      `colour` mode opts out of both and is left alone.

   2. Hairlines written as rgba(255,255,255,…) — 14 of them across the two
      sheets. They are borders and panel washes rather than text, so one
      currentColor-based replacement covers every case at either polarity
      instead of fourteen paired overrides. */
.section--as-light .logo-chip--image:not(.logo-chip--colour):not(.logo-chip--bw) .logo-chip__img {
  filter: brightness(0);
}

.section--as-light .stats,
.section--as-light .stat + .stat {
  border-color: rgba(11, 17, 73, 0.16);
}

.section--as-light .logo-chip:not(.logo-chip--image) {
  border-color: rgba(11, 17, 73, 0.17);
  background: rgba(11, 17, 73, 0.022);
}

.section--as-light .logo-chip__mark {
  border-color: rgba(11, 17, 73, 0.55);
}

.section--as-light .flag__badge {
  background: rgba(11, 17, 73, 0.06);
}

.section--as-light .speaker-modal__bio {
  border-top-color: rgba(11, 17, 73, 0.12);
}

/* The disclaimer takes the ground of whatever section ends up above it
   (reveal.js stamps it). Its own rule sets navy with 50%-white text, which reads
   as a seam under a light section and as nothing at all under a dark one. Both
   polarities are declared here so the paragraph colour moves with the panel
   rather than being left behind at 50% white on paper. */
.disclaimer.section--as-dark {
  background: var(--navy-panel);
}

.disclaimer.section--as-dark p {
  color: rgba(255, 255, 255, 0.5);
}

.disclaimer.section--as-light {
  background: var(--paper);
}

.disclaimer.section--as-light p {
  color: var(--ink-soft);
}

/* Type ------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--red);
}

/* SECTION HEADING AND SUBHEADING — Reference/index.html, value for value.
   `.display` is its `.headline`, `.subhead` its `.subheadline`, and the two
   media steps are the ones that file sets. Every per-section font-size override
   was removed with this, so all five sections are the same 32px: "all sections
   use this template" means the same size too, not the same shape at five sizes.

   NO GROUND AND NO SHADOW. The reference's `.leadership-container` was carried
   over twice — first full-bleed, then as a card — and rejected both times: on a
   page whose sections already alternate white and navy, a third pale-blue
   surface with a drop shadow behind every heading reads as a stack of floating
   panels rather than as a page. Joshua, 2026-08-25: "remove this effect and yeah
   remove the blue on background". So the TYPE is the template — the two families,
   the sizes, the weights, the tracking, the uppercase, the text-shadow — and the
   heading sits on whatever ground its section already has.

   Which brings back the one thing the blue box was solving for free: colour. The
   reference has a single light ground and can state #171b43 once; these sections
   alternate, and #171b43 on navy is unreadable. The three rules below cover all
   four states — authored light, authored dark, and either of those flipped by
   the runtime alternation. `--as-light` comes LAST on purpose: it and
   `.section--dark .display` are both (0,2,0), so source order is what decides a
   dark-authored section that renders light, and that one has to end up ink. */
.display {
  display: block;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  font-stretch: normal;
  color: var(--head-ink);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  -webkit-font-smoothing: antialiased;
}

.subhead {
  display: block;
  margin-top: 10px;
  font-family: var(--font-sub);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--head-ink);
  -webkit-font-smoothing: antialiased;
}

/* NOTE: the reference also has `.subheadline-normal`, which drops the uppercase.
   Not ported — every subheading on this page is a short label and every one of
   them is uppercase. It was added for a version of section 4 whose subheading
   was a full sentence; that turned out to be the wrong element for the job (the
   sentence is a lede under the head, as in section 2) and the rule went with it.
   Reinstate it here if a mixed-case subheading is ever genuinely wanted. */

/* Heading colour, all four states. See the note above `.display`. */
.section--dark .display,
.section--dark .subhead,
.section--as-dark .display,
.section--as-dark .subhead {
  color: var(--on-dark);
}

.section--as-light .display,
.section--as-light .subhead {
  color: var(--head-ink);
}

/* The text-shadow is the reference's and stays on a light ground. On a dark one
   it is a BLACK shadow behind white glyphs, which does not lift anything — it
   just thickens and smudges the letterforms. Suppressed rather than recoloured:
   the effect exists to lift dark type off pale ground, and there is no version
   of it that means anything the other way up. */
.section--dark .display,
.section--as-dark .display {
  text-shadow: none;
}

.section--as-light .display {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

/* What is left of the container is a hook, not a box. No background, no shadow,
   no break-out, and NO margin either: every element that follows a heading
   already carries its own top margin (96px under the pins, 92px under the
   speaker grid, 44px under section 2's lede), which is the rhythm the page had
   before the container was introduced and is intact now it is gone. Adding
   spacing here would double it. */
.sec-head {
  text-align: left;
}

@media (max-width: 768px) {
  .display { font-size: 28px; }
  .subhead { font-size: 20px; }
}

@media (max-width: 480px) {
  .display { font-size: 22px; }
  .subhead { font-size: 16px; }
}

.lede {
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.section--dark .lede { color: var(--on-dark-soft); }

/* Reveal ----------------------------------------------------------------- */

[data-reveal] {
  display: none;
}

/* No entrance animation.
   `rise` faded in from opacity 0 over 0.55s, and a section revealed by a click
   is read IMMEDIATELY — so the first half-second of every drill-down showed
   part-transparent body text over the navy ground, which is where the
   washed-out, unreadable copy was coming from. It also fought the scroll-into-
   view that follows a reveal: the panel moved up 22px while the page moved down
   to meet it. The content is what the click asked for; it now just appears. */
[data-reveal].is-revealed {
  display: block;
}

/* ...but `hidden` still has to win over that.
   `[data-reveal].is-revealed` is specificity (0,1,1) and the UA rule for
   [hidden] is (0,1,0), so once a section had been revealed the `hidden`
   attribute stopped hiding it. Recent Intel takes itself away for a company with
   no coverage by setting exactly that attribute — and instead painted an empty
   2,185px band with a heading and nothing under it. Not hypothetical: the news
   list drops items with no URL, so a company whose only item lacks one lands
   here. (0,2,0) puts it back in charge, for this and any future section that
   reveals and then withdraws. */
[data-reveal][hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hardcoded navy that the token flip cannot reach.
   These four were written as rgba(11,17,73,…) rather than through --ink, so a
   section flipped to dark left them navy-on-navy: the "view other company"
   label vanished, and so did the empty-category message. Listed explicitly
   because there is no token to point at — the alpha is part of the value. */
/* Full white, not 55%. This label is 10px uppercase at 0.1em tracking — type
   that small loses far more to a low alpha than body copy does, and at 55% on
   #232b38 it sat under 3:1 and read as disabled rather than quiet. The empty-
   category message below is ordinary prose at a normal size, so it keeps the
   softer value. */
.section--as-dark .s2__minis-label {
  color: var(--on-dark);
}

.section--as-dark .s2__empty {
  color: rgba(255, 255, 255, 0.55);
}

.section--as-dark .stat__label,
.section--as-dark .flag__label {
  color: var(--red);
}

/* The pin's drop shadow is a navy wash; on a dark ground it reads as grime
   around the artwork rather than as lift. */
.section--as-dark .pin__art {
  filter: drop-shadow(7px 11px 15px rgba(0, 0, 0, 0.35));
}