/* =====================================================================
   Happiness Impact Ranking — Stylesheet
   Typography: Futura (with Jost as a near-identical web fallback)
   Palette:    Swedish blue & gold, warm off-white
   ===================================================================== */

:root {
  --blue-900: #0d1b3e;
  --blue-700: #14305f;
  --blue-500: #1f4f9e;
  --blue-300: #5b86c9;
  --gold-500: #f7b500;
  --gold-400: #ffc62e;
  --gold-100: #fff3d1;
  --ink: #16203a;
  --muted: #5d6679;
  --line: #e6e3da;
  --paper: #faf8f2;
  --paper-2: #f3efe4;
  --white: #ffffff;
  --shadow: 0 18px 50px -22px rgba(13, 27, 62, 0.35);
  --shadow-sm: 0 8px 24px -14px rgba(13, 27, 62, 0.28);
  --maxw: 1180px;
  --header-h: 76px;    /* keeps .nav, the .fold viewport math and the
                          mobile menu offset in sync — change it here only */
  --section-pad: 92px; /* vertical rhythm of .block and .one-question */
  --radius-xl: 26px;   /* large feature panels (cta-band, dark-panel) */
  --radius-lg: 18px;   /* standard cards (dim, callout, country, contact) */
  --radius-md: 16px;   /* compact cards (winner, milestone, link) */
  --radius-sm: 14px;   /* small containers (faq, summary box) */
  --radius-pill: 999px;
  --font: "Futura", "Futura PT", "Jost", "Century Gothic", "Avenir Next",
    "Trebuchet MS", sans-serif;
}

/* Breakpoints (CSS can't read custom properties in media queries — keep
   these three literals in sync with the @media blocks at the bottom):
     1150px  nav collapses to the hamburger
      940px  multi-column grids stack
      720px  card grids go single-column; ranking table hides its sector col */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

::selection { background: var(--gold-400); color: var(--blue-900); }

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused with the keyboard */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  background: var(--gold-500);
  color: var(--blue-900);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transform: translateY(-72px);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-500);
}

.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: 0.01em;
  margin: 14px 0 18px;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--muted);
  font-weight: 400;
  max-width: 62ch;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.28s ease;
}
.site-header.scrolled { box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.6); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

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

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-400), var(--gold-500) 55%, var(--blue-500) 56%);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--shadow-sm);
}

.brand-mark svg { width: 22px; height: 22px; }

.brand-text strong {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--white);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gold-500);
  transition: width 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--gold-400); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Specificity note: .nav-links a.nav-cta (0,2,1) sits after the generic
   .nav-links a rules of equal or lower specificity, so the CTA keeps its
   colors in every state without !important. */
.nav-links a.nav-cta {
  background: var(--gold-500);
  color: var(--blue-900);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: transform 0.2s, background 0.2s;
}
.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover { background: var(--gold-400); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--white); display: block;
  transition: 0.25s;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
.btn-primary { background: var(--gold-500); color: var(--blue-900); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-400); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-dark { background: var(--blue-700); color: var(--white); }
.btn-dark:hover { background: var(--blue-900); transform: translateY(-2px); }
.btn:active, .nav-links a.nav-cta:active { transform: translateY(0); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(247, 181, 0, 0.18), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(31, 79, 158, 0.16), transparent 55%),
    linear-gradient(165deg, var(--blue-900), var(--blue-700) 55%, #102a55);
  color: var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}

/* First screen: the hero fills the viewport below the sticky header so no
   white sliver peeks. (Originally sized to share the fold with the stats
   strip, which is active on the results page — see the note below.) */
.fold {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.fold .hero { flex: 1; display: flex; }
.fold .hero-inner { flex: 1; }

/* On short screens, tighten the hero. (The h1 rule is active on the home
   page; hero-inner/hero-card/winner-row belong to the unused two-column
   hero; .stat is active on the results page.) */
@media (min-width: 941px) and (max-height: 920px) {
  .fold .hero-inner { padding: 44px 0 40px; }
  .fold .hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); margin: 14px 0 16px; }
  .fold .hero-card { padding: 24px; }
  .fold .winner-row { padding: 9px 0; }
  .fold .stat { padding: 26px 18px; }
}

/* UNUSED: two-column hero layout with the award-preview card — the home
   page uses .hero-center instead. Kept for a possible future home hero. */
.hero-inner {
  position: relative;
  z-index: 1;
  padding: 96px 0 84px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.hero .eyebrow { color: var(--gold-400); }

.hero h1 {
  color: var(--white);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: 0.02em;
  margin: 18px 0 22px;
  text-transform: uppercase;
}
.hero h1 .accent { color: var(--gold-400); }

.hero p.lead { color: rgba(255,255,255,0.82); max-width: 56ch; } /* UNUSED: two-col hero lead */

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

/* =====================================================================
   RESULTS PAGE — most rules tagged "results page" below are ACTIVE again:
   they style the Sweden-2026 results page (sweden-2026.html), rendered by
   js/ranking.js from js/data.js. Only the two-column home hero with the
   award-preview card (.hero-inner/.hero-card/.winner-row) remains unused;
   the home page uses .hero-center instead.
   ===================================================================== */

/* UNUSED (see banner above): the hero award-preview card */
.hero-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  padding: 30px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
.hero-card h3 {
  color: var(--white);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 18px;
}
.hero-card-sub {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  margin: -8px 0 14px;
}
.hero-card-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-400);
  transition: opacity 0.2s;
}
.hero-card-link:hover { opacity: 0.78; }
.winner-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  gap: 12px;
}
.winner-row:last-child { border-bottom: 0; }
.winner-row .sector {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.winner-row .co { font-weight: 600; font-size: 1.05rem; color: var(--white); }
.winner-row.high {
  background: rgba(247,181,0,0.14);
  border-radius: 12px;
  padding: 14px 14px;
  border-bottom: 0;
  margin-top: 6px;
}
.winner-row.high .co { color: var(--gold-400); }

/* ---------- Stat strip (results page) ---------- */
.stats {
  background: linear-gradient(180deg, #102a55, var(--blue-900) 55%);
  color: var(--white);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stat {
  padding: 38px 18px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat:last-child { border-right: 0; }
.stat .num {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--gold-400);
  letter-spacing: 0.02em;
}
.stat .label {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}

/* ---------- Generic section ---------- */
section.block { padding: var(--section-pad) 0; }
section.block.alt { background: var(--paper-2); }

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- About / two column ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split .lead { color: var(--muted); }
.prose p { color: var(--muted); margin-bottom: 18px; font-size: 1.05rem; }
.prose p strong { color: var(--ink); }

/* ---------- Dimension cards (methodology) ---------- */
.dim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.dim {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.dim:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dim .icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gold-100);
  color: var(--blue-700);
  margin-bottom: 16px;
}
.dim .icon svg { width: 23px; height: 23px; }
.dim h3 { font-size: 1.22rem; margin-bottom: 8px; }
.dim p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Scale visual — UNUSED (kept for future use) ---------- */
.scale {
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.scale-bar {
  height: 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #c0392b, #e6e3da 50%, var(--gold-500));
  position: relative;
  margin: 22px 0 10px;
}
.scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.scale-labels b { color: var(--ink); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 16px;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold-500);
  opacity: 0.5;
  display: block;
  margin-bottom: 8px;
}
.step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Award winners section (results page) ---------- */
.award-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.award-meta { color: var(--muted); font-size: 0.95rem; }
.award-meta b { color: var(--ink); }

.highscore {
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: var(--white);
  border-radius: 22px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  margin: 30px 0;
  position: relative;
  overflow: hidden;
}
.highscore::before {
  content: "★";
  position: absolute;
  right: -10px; top: -30px;
  font-size: 11rem;
  color: rgba(247,181,0,0.14);
  line-height: 1;
}
.highscore-body { display: flex; align-items: center; gap: 26px; position: relative; z-index: 1; }
.highscore .logo { width: 66px; height: 66px; border-radius: var(--radius-sm); }
.highscore .label {
  font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-400);
}
.highscore .co { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
.highscore .desc { color: rgba(255,255,255,0.8); max-width: 38ch; }

/* ---------- Company logo — INACTIVE (see the logo-rights warning in
   js/data.js before activating) ---------- */
/* A white "chip" so logos with any background (e.g. IKEA's blue) or aspect
   ratio sit cleanly and align at a consistent height. */
.logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
}
.logo img { height: 22px; width: auto; max-width: 124px; object-fit: contain; display: block; }
.winner-card .logo {
  display: flex; width: max-content; max-width: 100%; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px;
}
.winner-card .logo img { height: 30px; max-width: 152px; }
.highscore .logo { border-radius: 12px; padding: 10px 14px; }
.highscore .logo img { height: 38px; max-width: 162px; }
.co-cell { display: flex; align-items: center; gap: 13px; }
.co-name { font-weight: 600; }

.winner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 20px;
}
.winner-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  container-type: inline-size;
}
.winner-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.winner-card .sector {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-500); font-weight: 600;
}
/* Company names never break mid-word: the size tracks the card's own
   width (cqw), so long one-word names shrink to fit on a single line
   while multi-word names may still wrap at spaces. */
.winner-card .co {
  font-size: clamp(1.05rem, 1.25vw, 1.5rem); /* fallback, no cq support */
  font-size: clamp(1rem, 12.5cqw, 1.5rem);
  font-weight: 600;
  margin-top: 8px;
  overflow-wrap: normal;
  hyphens: none;
}
.winner-card .tag { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* ---------- Page hero (all subpages) + ranking page ----------
   .page-hero is ACTIVE on every subpage. The summary box / ranking table
   rules that follow are used by the results page; year-tabs are unused
   until there is more than one edition. */
.page-hero {
  background:
    radial-gradient(900px 500px at 85% -20%, rgba(247,181,0,0.16), transparent 60%),
    linear-gradient(165deg, var(--blue-900), var(--blue-700));
  color: var(--white);
  padding: 70px 0 56px;
}
.page-hero h1 {
  color: var(--white);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: 0.02em;
  margin: 14px 0 16px;
}
.page-hero .eyebrow { color: var(--gold-400); }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 60ch; }

.year-tabs {
  display: flex;
  gap: 12px;
  margin: 30px 0 0;
  flex-wrap: wrap;
}
.year-tab {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: 0.2s;
}
.year-tab:hover { border-color: var(--gold-400); }
.year-tab.active { background: var(--gold-500); color: var(--blue-900); border-color: var(--gold-500); }

.ranking-section { padding: 70px 0 96px; }

.summary-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue-500);
  border-radius: var(--radius-sm);
  padding: 26px 30px;
  color: var(--muted);
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
}

.table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.ranking {
  width: 100%;
  border-collapse: collapse;
}
table.ranking thead th {
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 18px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
table.ranking td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}
table.ranking tbody tr:last-child td { border-bottom: 0; }
table.ranking tbody tr { transition: background 0.15s; }
table.ranking tbody tr:hover { background: var(--paper); }
table.ranking tbody tr.is-highscore { background: var(--gold-100); }
table.ranking tbody tr.is-highscore:hover { background: var(--gold-100); }
table.ranking tbody tr.is-highscore .co-name { font-weight: 700; }
.pill {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--blue-700);
  font-weight: 600;
}
.badge-winner {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold-500);
  color: var(--blue-900);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 700;
  vertical-align: middle;
}
.badge-highscore { background: var(--blue-700); color: var(--white); }
.score { font-weight: 700; color: var(--ink); }
.score.muted { color: var(--blue-300); font-weight: 600; }

.note {
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Results-page figures (sweden-2026.html) ----------
   Charts are rendered by js/ranking.js from js/data.js. Sector colors
   come from SECTOR_COLORS in js/data.js (matches the published report). */
.summary-box .summary-chip { margin-right: 12px; vertical-align: middle; }
.page-hero .hero-back { margin-bottom: 14px; }
.page-hero .hero-back .arrow-link { color: rgba(255,255,255,0.75); }
.page-hero .hero-back .arrow-link:hover { color: var(--white); }
.figure-block { margin: 56px 0 0; }
.figure-block .figure-title { margin-bottom: 6px; }
.figure-sub { color: var(--muted); font-size: 0.95rem; max-width: 70ch; margin-bottom: 18px; }

.chart-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px 16px;
  box-shadow: var(--shadow-sm);
}
.chart-card svg { width: 100%; height: auto; display: block; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 0 0 14px;
  padding: 0; list-style: none;
}
.chart-legend li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--muted);
}
.chart-legend .swatch {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block; flex: none;
}

/* Floating tooltip shared by the SVG charts */
.chart-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--blue-900);
  color: var(--white);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.12s;
  max-width: 240px;
}
.chart-tip.show { opacity: 1; }
.chart-tip .tip-co { font-weight: 600; }
.chart-tip .tip-val { color: var(--gold-400); font-weight: 600; }

/* Sector summary rows (dot-and-range strips) */
.sector-rows { display: grid; gap: 14px; }
.sector-row {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 22px 14px;
  box-shadow: var(--shadow-sm);
}
.sector-row .sector-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.sector-row .sector-name { font-weight: 600; font-size: 1.02rem; }
.sector-row .sector-avg { color: var(--muted); font-size: 0.88rem; }
.sector-row .sector-avg b { color: var(--ink); }
.sector-row svg { width: 100%; height: auto; display: block; }

/* Small stat tiles (dimension means, customer outcomes) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue-500);
  border-radius: var(--radius-md);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-sm);
}
.tile.gold { border-top-color: var(--gold-500); }
.tile .tile-num {
  font-size: 2rem; font-weight: 700; color: var(--blue-900);
  letter-spacing: 0.01em; line-height: 1.1;
}
.tile .tile-label {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 8px;
}
.tile .tile-sub { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }

/* Score bar inside the ranking table */
table.ranking th.score-td, table.ranking td.score-td { text-align: right; }
.score-cell { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; }
.score-track {
  width: 74px; height: 7px; border-radius: var(--radius-pill);
  background: var(--paper-2); overflow: hidden; flex: none;
  position: relative;
}
.score-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--blue-500); }
.score-fill.neg { background: var(--muted); opacity: 0.55; }
.rank-num { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
tr.is-highscore .rank-num { color: var(--blue-900); }

/* News: outlet/date line on media cards */
.news-meta {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

/* Editorial media list (news page) */
.media-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.media-item {
  border-bottom: 1px solid var(--line);
}
.media-item > a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta cta"
    "title cta";
  align-items: center;
  gap: 4px 28px;
  padding: 26px 4px;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.2s ease, background 0.2s ease;
}
.media-item > a:hover,
.media-item > a:focus-visible {
  padding-left: 16px;
  background: linear-gradient(90deg, var(--gold-100), transparent 60%);
}
.media-meta {
  grid-area: meta;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.media-title {
  grid-area: title;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--blue-900);
}
.media-item > a:hover .media-title,
.media-item > a:focus-visible .media-title { color: var(--blue-500); }
.media-cta {
  grid-area: cta;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue-500);
  white-space: nowrap;
}
.media-cta::after {
  content: " →";
  transition: margin-left 0.2s ease;
}
.media-item > a:hover .media-cta::after,
.media-item > a:focus-visible .media-cta::after { margin-left: 4px; }

@media (max-width: 640px) {
  .media-item > a {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "title"
      "cta";
    gap: 8px;
  }
}

/* Summit photo gallery (results page) */
.photo-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  margin-top: 28px;
  max-width: 740px;
}
.photo-grid .photo-col { display: grid; gap: 18px; }
.photo-grid .ph {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-caption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Report download row */
.report-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  margin-top: 56px;
}
.report-cta .report-txt { color: var(--muted); max-width: 62ch; }
.report-cta .report-txt b { color: var(--ink); }

/* ---------- Explorer data preview ---------- */
.explore-controls {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
  margin: 26px 0 20px;
}
.explore-controls .metric-select {
  font-family: var(--font);
  font-size: 0.92rem; font-weight: 600;
  color: var(--blue-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  padding: 9px 16px;
}
.filter-chip {
  font-family: var(--font);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--muted);
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.filter-chip .swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.filter-chip:hover { border-color: var(--blue-300); color: var(--blue-700); }
.filter-chip.active {
  background: var(--blue-900); color: var(--white); border-color: var(--blue-900);
}
.explore-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-height: 560px;
  overflow-y: auto;
  padding: 10px 22px;
}
.explore-row {
  display: grid;
  grid-template-columns: 34px minmax(120px, 200px) 1fr 52px;
  gap: 12px; align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--paper-2);
  font-size: 0.92rem;
}
.explore-row:last-child { border-bottom: 0; }
.explore-row .er-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.explore-row .er-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-row .er-track { height: 8px; border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; }
.explore-row .er-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.explore-row .er-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--blue-900);
  border-radius: var(--radius-xl);
  padding: 54px 48px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.cta-band p { max-width: 56ch; margin: 0 auto 28px; font-size: 1.1rem; color: #3a3206; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--blue-900);
  color: rgba(255,255,255,0.78);
  padding: 64px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h2 {
  color: var(--white);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid p { font-size: 0.95rem; line-height: 1.7; }
.footer-grid ul { list-style: none; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul a { font-size: 0.95rem; transition: color 0.2s; }
.footer-grid ul a:hover { color: var(--gold-400); }
.footer-brand .brand-text strong { color: var(--white); }
.footer-logo { width: 188px; max-width: 74%; height: auto; margin-bottom: 22px; filter: invert(1); opacity: 0.95; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-tm { width: 100%; color: rgba(255,255,255,0.4); font-size: 0.8rem; margin-top: 8px; } /* DORMANT: logo-usage notice (results page) */

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Interaction polish ---------- */
/* Keep in-page anchor targets clear of the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Consistent, on-brand keyboard focus */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.year-tab:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Centered manifesto hero (home) ---------- */
.hero-center {
  position: relative;
  z-index: 1;
  padding: 90px 0 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fold .hero-center { flex: 1; }
.hero-center h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 20px 0 24px;
  max-width: 17ch;
}
.hero-center h1 .accent { color: var(--gold-400); }
.hero-tagline {
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 54ch;
}
.hero-stanza {
  margin-top: 26px;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 54ch;
}
.hero-stanza .q {
  display: block;
  margin: 14px 0;
  font-weight: 600;
  color: var(--gold-400);
}
.hero-center .hero-actions { justify-content: center; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}
.scroll-cue svg { width: 24px; height: 24px; animation: cue-float 2.4s ease-in-out infinite; }
@keyframes cue-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ---------- Emphasised stanza (manifesto lines in light sections) ---------- */
.stanza {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin: 26px 0;
}
.stanza .accent { color: var(--blue-500); }

/* ---------- Arrow links ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--blue-500);
  transition: color 0.2s;
}
.arrow-link::after { content: "→"; transition: transform 0.2s; }
.arrow-link:hover { color: var(--blue-900); }
.arrow-link:hover::after { transform: translateX(4px); }
.arrow-link.back::after { display: none; }
.arrow-link.back::before { content: "←"; transition: transform 0.2s; }
.arrow-link.back:hover::before { transform: translateX(-4px); }

/* ---------- Callout card (single big statement) ---------- */
.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  box-shadow: var(--shadow-sm);
}
.callout .label {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-500);
  font-weight: 600;
  margin-bottom: 14px;
}
.callout .big {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.callout .sub { margin-top: 14px; color: var(--muted); font-size: 0.98rem; }

/* ---------- Three-column card grid ---------- */
.dim-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Roadmap (ranking editions timeline) ---------- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.milestone {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.milestone .when {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-700);
  letter-spacing: 0.02em;
}
.milestone h3 { font-size: 1.1rem; margin: 6px 0 8px; }
.milestone p { color: var(--muted); font-size: 0.97rem; }
.milestone .arrow-link { margin-top: 14px; }

/* ---------- Country / edition cards (rankings landing) ---------- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.country-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
a.country-card { transition: transform 0.2s, box-shadow 0.2s; }
a.country-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.country-card .flag {
  width: 36px;
  height: 25px;
  border-radius: 4px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 1px 4px rgba(13, 27, 62, 0.2);
}
.country-card .flag svg { display: block; width: 100%; height: 100%; }
.country-card h3 { font-size: 1.35rem; }
.country-card p { color: var(--muted); font-size: 0.97rem; }
.country-card.coming { background: var(--paper-2); }
.country-card.coming h3 { color: var(--muted); }

.pill-live,
.pill-coming {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.pill-live { background: var(--gold-500); color: var(--blue-900); }
.pill-coming { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.page-hero .pill-coming { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.75); margin-bottom: 16px; }

/* ---------- Perspective pills (the science behind) ---------- */
.perspectives {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}
.perspectives span {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--blue-700);
  box-shadow: var(--shadow-sm);
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 820px;
  margin: 40px auto 0;
  display: grid;
  gap: 14px;
}
details.faq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.08rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-500);
  line-height: 1;
  transition: transform 0.25s ease;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { margin-top: 14px; color: var(--muted); }
details.faq .faq-body p { margin-bottom: 10px; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- The One Question band ---------- */
.one-question {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 80% -20%, rgba(247, 181, 0, 0.14), transparent 60%),
    linear-gradient(150deg, var(--blue-900), var(--blue-700));
  color: var(--white);
  padding: var(--section-pad) 0;
  text-align: center;
}
.one-question::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.one-question .wrap { position: relative; z-index: 1; }
.one-question .eyebrow { color: var(--gold-400); }
.one-question h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  margin: 18px auto 18px;
  max-width: 24ch;
}
.one-question h2 .accent { color: var(--gold-400); }
.one-question p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 62ch;
  margin: 0 auto;
}
.one-question .btn { margin-top: 30px; }

/* ---------- Essay (long-form editorial) ---------- */
.essay {
  max-width: 700px;
  margin: 0 auto;
}
.essay p {
  font-size: 1.12rem;
  line-height: 1.85;
  color: #333c52;
  margin-bottom: 22px;
}
.essay p.lede {
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--ink);
}
.essay p strong { color: var(--ink); }
.essay .essay-q {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--blue-700);
  line-height: 1.4;
  margin: 34px 0;
}
.essay-sign {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.98rem;
}
.essay-sign b { color: var(--ink); display: block; }

/* ---------- Checklist (what partners receive) ---------- */
.check-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 1rem;
}
.check-list li::before {
  content: "✓";
  flex: none;
  color: var(--gold-500);
  font-weight: 700;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.contact-card h2 { font-size: 1.2rem; margin-bottom: 8px; }
.contact-card p { color: var(--muted); font-size: 0.98rem; margin-bottom: 14px; }
.address-block {
  margin-top: 40px;
  text-align: center;
  color: var(--muted);
}
.address-block b { color: var(--ink); display: block; font-size: 1.05rem; }

/* ---------- Link grid (continue exploring) ---------- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.link-card h3 {
  font-size: 1.08rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.link-card h3::after { content: "→"; color: var(--gold-500); transition: transform 0.2s; }
.link-card:hover h3::after { transform: translateX(4px); }
.link-card p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Dark feature panel (Explorer teaser) ---------- */
.dark-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 56px 52px;
  box-shadow: var(--shadow);
}
.dark-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.dark-panel > * { position: relative; z-index: 1; }
.dark-panel h2 { color: var(--white); font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 14px 0 16px; }
.dark-panel p { color: rgba(255,255,255,0.82); max-width: 62ch; }
.dark-panel .arrow-link { color: var(--gold-400); margin-top: 22px; }
.dark-panel .arrow-link:hover { color: var(--gold-100); }

/* ---------- Contextual spacing ----------
   These replace what used to be one-off style="" attributes in the HTML,
   so routine copy edits never carry layout along with them. */
.prose + p { margin-top: 26px; }          /* follow-up link/button after a prose block */
.dim p + p { margin-top: 12px; }          /* follow-up link inside a card */
.callout .sub + p { margin-top: 16px; }   /* follow-up link after a callout subline */
.footer-brand p + p { margin-top: 10px; } /* contact email under the footer blurb */
.dim h3 .pill-coming { margin-left: 6px; }
.split .dim-grid { margin-top: 0; }
.dim-grid.stack { grid-template-columns: 1fr; } /* single-column variant (home) */
.page-hero .arrow-link { color: rgba(255, 255, 255, 0.75); }
.lead strong,
.country-card strong { color: var(--ink); }

/* Spacing utilities for genuine one-offs (see EDITING.md) */
.mt-14 { margin-top: 14px; }
.mt-30 { margin-top: 30px; }
.mt-36 { margin-top: 36px; }
.mt-56 { margin-top: 56px; }
.mb-14 { margin-bottom: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 70px 0 60px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .roadmap { grid-template-columns: 1fr; }
  .dim-grid.cols-3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .dark-panel { padding: 40px 30px; }
  .hero-center { padding: 70px 0 90px; }
}

/* The eight-item nav needs more room than the old three-item one, so the
   hamburger takes over below 1150px. */
@media (max-width: 1150px) {
  .nav-links {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: var(--blue-900);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 10px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-sm);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; width: 100%; }
  .nav-links a.nav-cta { width: max-content; margin-top: 8px; }
  .nav-toggle { display: flex; }
}

@media (max-width: 400px) {
  /* Keeps the longest unbreakable uppercase h1 words ("Understanding")
     from overflowing very narrow screens. */
  .page-hero h1 { font-size: 1.9rem; }
}

@media (max-width: 720px) {
  .dim-grid { grid-template-columns: 1fr; }
  .highscore { padding: 30px 26px; }
  /* Hide the Sector column (3rd: after rank + organization) on phones */
  table.ranking thead th:nth-child(3),
  table.ranking td:nth-child(3) { display: none; }
  .photo-grid { grid-template-columns: 1fr; }
}