/* ============================================================
   SaniTap — main.css
   Design tokens lifted from sanitap-brand-guidelines.html v2.0.
   Never hardcode hex values or fonts in HTML — use these vars.
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  /* Primary blues — logo-locked */
  --blue:        #2098D8;
  --blue-dk:     #0030A0;
  --blue-hover:  #1878B8;
  --blue-light:  #62B8E8;
  --blue-pale:   #E8F4FB;

  /* Dark backgrounds */
  --ink:         #0A1520;
  --ink-mid:     #162030;
  --ink-light:   #1E2E40;
  --ink-border:  #243448;

  /* Neutrals */
  --white:       #FFFFFF;
  --paper:       #F4F7FA;
  --smoke:       #E2E8EE;
  --mist:        #8FA3B4;
  --slate:       #3A5066;
  --text:        #0A1520;

  /* Accents — sparingly */
  --gold:        #F0C040;
  --coral:       #E5604A;

  /* Typography */
  --display:     'Bebas Neue', Impact, sans-serif;
  --body:        'Outfit', system-ui, -apple-system, sans-serif;
  --mono:        'DM Mono', ui-monospace, monospace;

  /* Type scale */
  /* Type scale — one step up from the previous set so text-heavy sections
     (About, Knowledge articles, project pages) read more comfortably.
     Every rem-based text size uses these tokens, so the whole site shifts
     together without touching per-component font-size declarations. */
  --text-xs:     0.78rem;
  --text-sm:     0.95rem;
  --text-base:   1.1rem;
  --text-md:     1.22rem;
  --text-lg:     1.38rem;
  --h3:          1.6rem;
  --h2:          clamp(2.5rem, 5vw, 4.5rem);
  --h1:          clamp(3rem, 7vw, 6rem);

  /* Spacing — 8px grid */
  --s-xs:        4px;
  --s-sm:        8px;
  --s-md:        16px;
  --s-lg:        32px;
  --s-xl:        64px;
  --s-2xl:       96px;
  --s-3xl:       128px;

  /* Layout */
  --container:   1280px;
  --gutter:      clamp(1.25rem, 4vw, 5rem);
  --nav-h:       88px;

  /* Motion */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    0.25s;
  --dur-base:    0.6s;
  --dur-slow:    1.2s;
  --dur-kb:      24s;

  /* Radius */
  --r:           3px;
  --r-lg:        4px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--blue-hover); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

/* ── Typography ────────────────────────────────────────────── */
.display { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.92; }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-block;
}
.eyebrow--light { color: var(--blue-light); }

h1, .h1 { font-family: var(--display); font-size: var(--h1); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.92; color: var(--text); }
h2, .h2 { font-family: var(--display); font-size: var(--h2); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; color: var(--text); }
h3, .h3 { font-family: var(--display); font-size: var(--h3); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
h4 { font-family: var(--body); font-weight: 600; font-size: var(--text-base); color: var(--text); margin-bottom: 0.4rem; }

p { color: var(--slate); }
p.lead { font-size: var(--text-md); font-weight: 300; color: var(--slate); line-height: 1.75; }
/* Break between a stand-first (.lead) and the body paragraphs that follow.
   The type-size jump reads as two separate pieces of copy; the extra margin
   honours that so the reader doesn't experience the shift as unfinished. */
.lead + p,
p.lead + p { margin-top: 1.75rem; }
.muted { color: var(--mist); }

.on-dark { color: rgba(255,255,255,0.78); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark p { color: rgba(255,255,255,0.7); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.85rem;
  border-radius: var(--r);
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
  min-height: 44px;       /* tap target */
  border: 2px solid transparent;
}
.btn-primary    { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(32,152,216,0.32); }
.btn-dark-blue  { background: var(--blue-dk); color: #fff; border-color: var(--blue-dk); }
.btn-dark-blue:hover { background: #002280; border-color: #002280; color: #fff; transform: translateY(-2px); }
.btn-outline    { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue-pale); color: var(--blue-hover); }
.btn-ghost      { background: transparent; color: #fff; border-color: var(--blue); }
.btn-ghost:hover { border-color: var(--blue-hover); background: rgba(32,152,216,0.14); color: #fff; box-shadow: 0 6px 20px rgba(32,152,216,0.28); transform: translateY(-2px); }
.btn-text {
  background: transparent;
  color: var(--blue);
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 2px solid var(--blue);
  border-radius: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  min-height: auto;
}
.btn-text:hover { color: var(--blue-hover); transform: none; box-shadow: none; }
/* Consistent breathing room above a paragraph that only holds a CTA button.
   Many button-paragraphs had no top margin (tight against the preceding
   text) while others carried an inline margin-top; this unifies them. */
p:has(> .btn:only-child),
p:has(> .btn-text:only-child) { margin-top: 1.5rem; }
@media (max-width: 640px) {
  .btn-text {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 0;
    min-height: 44px;
    font-size: 0.8rem;
  }
}

/* ── Layout primitives ────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding: var(--s-2xl) 0; }
.section-tight { padding: var(--s-xl) 0; }
.section.dark { background: var(--ink); color: #fff; }
.section.ink-mid { background: var(--ink-mid); color: #fff; }
.section.paper { background: var(--paper); }
.section.white { background: var(--white); }
.section.pale  { background: var(--blue-pale); }

.section-head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  align-items: baseline;
  margin-bottom: 3.5rem;
}
.section-num {
  font-family: var(--display);
  font-size: 4rem;
  color: var(--smoke);
  line-height: 1;
  letter-spacing: 0.02em;
}
.section.dark .section-num,
.section.ink-mid .section-num { color: var(--ink-border); }
.section-title-wrap > .eyebrow { margin-bottom: 0.4rem; }
.section-desc {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 620px;
  margin-top: 1rem;
}

/* Related-articles trailer sits under a project or hub page. By default
   it renders single-column (no section number, title spans full width).
   When the caller passes a relatedSectionNum (adding the .--numbered
   modifier), keep the standard two-column numbered grid so the trailer
   reads as the next numbered section of the page. */
.related-articles-section .section-head {
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 2rem;
}
.related-articles-section--numbered .section-head {
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

/* ── Header / Nav ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--smoke);
  box-shadow: 0 2px 14px rgba(10,21,32,0.06);
}
.site-header.force-solid {
  background: #fff;
  border-bottom-color: var(--smoke);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  transition: color var(--dur-fast) var(--ease);
}
.brand .brand-sani { color: var(--blue); }
.brand .brand-tap  { color: var(--blue-dk); }
.site-header.is-solid .brand,
.site-header.force-solid .brand { color: var(--text); }
.site-header.is-solid .brand .brand-tap,
.site-header.force-solid .brand .brand-tap { color: var(--blue-dk); }
.brand img { height: 56px; width: auto; }
.brand-logo--light { display: block; }
.brand-logo--dark  { display: none; }
.site-header.is-solid .brand-logo--light,
.site-header.force-solid .brand-logo--light { display: none; }
.site-header.is-solid .brand-logo--dark,
.site-header.force-solid .brand-logo--dark  { display: block; }

.nav-links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  padding: 0.4rem 0;
  position: relative;
}
.nav-links a:hover { color: #fff; }
.nav-links a.is-active { color: var(--blue-light); }
.site-header.is-solid .nav-links a,
.site-header.force-solid .nav-links a { color: var(--slate); }
.site-header.is-solid .nav-links a:hover,
.site-header.force-solid .nav-links a:hover { color: var(--text); }
.site-header.is-solid .nav-links a.is-active,
.site-header.force-solid .nav-links a.is-active { color: var(--blue); }

.nav-cta { padding: 0.6rem 1.2rem; min-height: 40px; font-size: 0.78rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.site-header.is-solid .nav-toggle,
.site-header.force-solid .nav-toggle { color: var(--text); }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    gap: 0;
    background: var(--ink);
    padding: 2rem var(--gutter);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .nav-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    color: rgba(255,255,255,0.85);
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink-border);
    width: 100%;
    font-size: 1rem;
  }
  .site-header.is-solid .nav-links a,
  .site-header.force-solid .nav-links a { color: rgba(255,255,255,0.85); }
  .nav-cta { margin-top: 1rem; }
}

/* ── Nav dropdown menus ────────────────────────────────────── */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item--has-menu > .nav-link { display: inline-flex; align-items: center; gap: 0.35em; }
.nav-caret {
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
/* Only rotate the caret / show the submenu on real hover devices. On
   touch-capable devices the browser fires :hover on first tap, which
   was hijacking the parent link's navigation and forcing a second click. */
@media (hover: hover) {
  .nav-item--has-menu:hover .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
  }
  .nav-item--has-menu:hover .nav-submenu { display: flex; }
}
.nav-item--has-menu:focus-within .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r-lg);
  padding: 0.5rem;
  box-shadow: 0 12px 32px rgba(10,21,32,0.14);
  min-width: 240px;
  flex-direction: column;
  gap: 0;
  z-index: 200;
}
.nav-item--has-menu:focus-within .nav-submenu { display: flex; }
/* Extend the parent link's hover zone downward so the cursor never crosses
   an unhovered gap on its way from the parent to the submenu. Padding is
   invisible on the dark nav; hovering it still fires the parent's :hover. */
.nav-item--has-menu .nav-link--parent { padding-bottom: 14px; }
/* Match the parent-link padding on top-level plain links (e.g. CORSIA) so
   every menu item shares the same box height and text baseline. */
.nav-links > .nav-link { padding-bottom: 14px; }
.nav-links .nav-sublink {
  display: block;
  padding: 0.6rem 0.85rem;
  color: var(--slate);
  font-size: 0.82rem;
  border-radius: var(--r);
  border: 0;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-links .nav-sublink:hover,
.nav-links .nav-sublink:focus-visible {
  background: var(--blue-pale);
  color: var(--blue-dk);
}
.nav-links .nav-sublink.is-active { color: var(--blue-dk); background: var(--blue-pale); }
.site-header.is-solid .nav-links .nav-sublink,
.site-header.force-solid .nav-links .nav-sublink { color: var(--slate); }
.site-header.is-solid .nav-links .nav-sublink:hover,
.site-header.force-solid .nav-links .nav-sublink:hover { color: var(--blue-dk); background: var(--blue-pale); }

@media (max-width: 960px) {
  .nav-item, .nav-item--has-menu {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-submenu {
    display: flex;
    position: static;
    background: transparent;
    border: 0;
    padding: 0 0 0.5rem 1.25rem;
    box-shadow: none;
    min-width: 0;
    margin-top: -0.25rem;
  }
  .nav-caret { display: none; }
  .nav-links .nav-sublink {
    color: rgba(255,255,255,0.6);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ink-border);
    font-size: 0.88rem;
    border-radius: 0;
  }
  .nav-links .nav-sublink:hover {
    background: transparent;
    color: #fff;
  }
  .site-header.is-solid .nav-links .nav-sublink,
  .site-header.force-solid .nav-links .nav-sublink { color: rgba(255,255,255,0.6); }
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* fixed-position parallax */
  animation: kb var(--dur-kb) ease-in-out infinite alternate;
  will-change: transform;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,21,32,0.55) 0%, rgba(10,21,32,0.92) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: var(--s-xl) 0;
  width: 100%;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(4rem, 16vw, 6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.92;
  color: #fff;
  margin: 1rem 0 1.5rem;
  max-width: 18ch;
}
.hero-title .accent { color: var(--blue); }
/* On phones the hero H1 should fill the width — bump the fluid factor so
   "High-impact" and the rotator word beneath it read as one large mark. */
@media (max-width: 640px) {
  .hero-title { font-size: clamp(4rem, 18vw, 5.5rem); max-width: 100%; }
}
.hero-sub {
  font-size: var(--text-md);
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 2.25rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-strapline {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--gold);
  margin: 0.6rem 0 1.1rem;
  letter-spacing: 0.02em;
}
.hero-measured { margin: 0 0 2rem; }
.hero-measured .eyebrow--light { display: inline-block; margin-bottom: 0.4rem; }
.hero-sub--tight { max-width: 56ch; margin-bottom: 0; line-height: 1.6; }

/* ── Page hero (compact dark hero for non-home pages) ──────── */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  will-change: transform;
}
.page-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,21,32,0.5) 0%, rgba(10,21,32,0.88) 100%);
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  padding: var(--s-xl) 0;
  width: 100%;
}
.page-hero-eyebrow { margin-bottom: 1rem; }
.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.92;
  color: #fff;
  margin: 0.75rem 0 1rem;
}
.page-hero-sub {
  font-size: var(--text-md);
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  max-width: 60ch;
}
@media (max-width: 768px) {
  .page-hero { min-height: 44vh; }
  .page-hero-bg { background-attachment: scroll; }
}

/* Card with cover image */
.card-cover {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-cover-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ink-light);
}
.card-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease);
}
.card-cover:hover .card-cover-img img { transform: scale(1.04); }
.card-cover-img--graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background:
    radial-gradient(circle at 20% 20%, rgba(240, 192, 64, 0.10), transparent 55%),
    linear-gradient(135deg, var(--blue-dk) 0%, var(--ink) 100%);
}
.card-cover-img--graphic svg {
  width: 46%;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(240, 192, 64, 0.18));
  transition: transform var(--dur-base) var(--ease);
}
.card-cover:hover .card-cover-img--graphic svg { transform: scale(1.06); }
.card-cover-img--water { color: var(--blue-light, #7ec6ea); }
.card-cover-img--water { background:
    radial-gradient(circle at 30% 25%, rgba(126, 198, 234, 0.18), transparent 55%),
    linear-gradient(135deg, #0b3b6c 0%, var(--ink) 100%); }
.card-cover-img--consulting { color: var(--gold); }
.split-media--graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 3rem;
  color: var(--gold);
  background:
    radial-gradient(circle at 20% 25%, rgba(240, 192, 64, 0.10), transparent 55%),
    linear-gradient(135deg, var(--blue-dk) 0%, var(--ink) 100%);
  border-radius: var(--radius, 12px);
}
.split-media--graphic svg {
  width: 55%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(240, 192, 64, 0.22));
}
.card-cover-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

/* Article hero image */
.article-hero {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-lg);
  margin: 0 0 2rem;
}
.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Parallax interstitial divider */
.parallax-divider {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.parallax-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,21,32,0.7) 0%, rgba(10,21,32,0.9) 100%);
}
.parallax-divider > .container { position: relative; z-index: 1; }
.parallax-divider .quote {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 22ch;
  color: #fff;
}
.parallax-divider .quote span { color: var(--blue-light); }
.parallax-divider .quote-attrib { display:block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 1.5rem; }

/* ── Stat strip ────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--smoke);
  border: 1px solid var(--smoke);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat-strip.on-dark { background: var(--ink-border); border-color: var(--ink-border); }
.stat {
  padding: 1.75rem 1.5rem;
  background: var(--white);
}
.stat-strip.on-dark .stat { background: var(--ink-mid); }
.stat-num {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--blue-dk);
  letter-spacing: 0.02em;
}
.stat-strip.on-dark .stat-num { color: var(--blue-light); }
.stat-num.gold { color: var(--gold); }
.stat-unit {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  display: block;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.stat-strip.on-dark .stat-unit { color: rgba(255,255,255,0.55); }

/* ── Stat rotator ──────────────────────────────────────────
   One large stat display that cycles through the operational-scale
   headline figures. Same Bebas Neue big-number treatment as the
   stat-strip; different layout — a single tile that rotates in place
   instead of four tiles side-by-side. Hover to pause; dots to jump. */
.stat-rotator {
  position: relative;
  padding: 1.6rem 1.5rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--ink-border);
  text-align: center;
  overflow: hidden;
}
.stat-rotator.on-dark { background: var(--ink-border); }
.stat-rotator-stage {
  position: relative;
  min-height: clamp(6rem, 12vw, 8rem);
}
.stat-rotator-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .55s var(--ease, ease), transform .55s var(--ease, ease);
  pointer-events: none;
}
.stat-rotator-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.stat-rotator-slide .stat-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--blue-light);
}
.stat-rotator-slide .stat-num.gold { color: var(--gold); }
.stat-rotator-slide .stat-unit {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  max-width: 44ch;
  line-height: 1.4;
}
.stat-rotator-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0.9rem 0 0;
}
.stat-rotator-nav button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.stat-rotator-nav button:hover {
  border-color: var(--gold);
  transform: scale(1.15);
}
.stat-rotator-nav button.is-active {
  background: var(--gold);
  border-color: var(--gold);
}

/* ── Dashboard CTA ────────────────────────────────────────
   Prominent call-to-action beneath the operational-scale
   rotator + live-mini strip, pulling readers into the full
   impact dashboard. */
.dashboard-cta {
  margin: 2.25rem 0 0.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.dashboard-cta-btn {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: 0.04em;
  padding: 1.1rem 2.4rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 8px 28px rgba(240,192,64,0.28);
}
.dashboard-cta-btn:hover {
  background: #f6cc55;
  border-color: #f6cc55;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(240,192,64,0.38);
}
.dashboard-cta-arrow {
  font-family: var(--body);
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease);
}
.dashboard-cta-btn:hover .dashboard-cta-arrow { transform: translateX(4px); }
.dashboard-cta-note {
  margin: 0;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  font-family: var(--body);
  max-width: 46ch;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--smoke);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(10,21,32,0.08); border-color: var(--blue-pale); }

/* Knowledge Hub category grid: keep each card at a consistent size no matter
   how many articles are in the category. auto-fit stretches a lone card to
   full row width; auto-fill with a capped max keeps every card 280-340px, so
   a category with one article looks the same weight as one with three. */
.kb-groups .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
  justify-content: start;
}

/* Knowledge Hub article cards with hero thumbnail carried through from the
   article page itself. Same image top-of-card as at the top of the article,
   so the visual identity stays consistent card → article. */
a.card-with-thumb { padding: 0; overflow: hidden; }
a.card-with-thumb > *:not(.card-thumb) { padding-left: 1.75rem; padding-right: 1.75rem; }
a.card-with-thumb > *:first-child:not(.card-thumb),
a.card-with-thumb .card-eyebrow:first-child { padding-top: 1.5rem; }
a.card-with-thumb > *:last-child { padding-bottom: 1.5rem; }
.card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ink-light, #eef2f6);
  overflow: hidden;
  margin: 0 0 0.5rem;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow, .4s) var(--ease);
}
a.card-with-thumb:hover .card-thumb img { transform: scale(1.03); }
/* If the img errors out (no hero on disk yet) the JS strips it and adds
   this class so the empty box vanishes rather than leaving a grey band. */
.card-thumb.card-thumb--empty { display: none; }
/* Fallback state when an article has no hero image on disk yet — swap to
   the Gold Standard mark on a light branded panel so the card still has
   a visual anchor instead of a black-cover text-only block. */
.card-thumb.card-thumb--fallback {
  background: linear-gradient(135deg, var(--paper) 0%, #e5edf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-thumb.card-thumb--fallback img {
  width: auto;
  height: auto;
  max-width: 55%;
  max-height: 55%;
  object-fit: contain;
  padding: 1.2rem;
  opacity: 0.85;
}
a.card-with-thumb:hover .card-thumb--fallback img { transform: none; }
.card .card-eyebrow { color: var(--blue); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; }

/* Team grid: reserve consistent eyebrow height so names align across cards
   regardless of how many lines the role title wraps to. */
.team-grid .card-eyebrow {
  min-height: 3lh;
  line-height: 1.35;
  display: block;
}
.team-grid .card h3 {
  min-height: 2.4em;
  line-height: 1.15;
}
/* Team layout: 3 across on top, 2 across on the bottom (matched card width,
   centred). Collapses to 1 across on narrow viewports. */
.team-grid {
  display: grid;
  gap: 1.25rem;
}
.team-grid--top    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-grid--bottom {
  grid-template-columns: repeat(2, minmax(0, calc((100% - 4 * 1.25rem) / 3)));
  justify-content: center;
}
@media (max-width: 900px) {
  .team-grid--top, .team-grid--bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .team-grid--top, .team-grid--bottom { grid-template-columns: 1fr; }
}
.card h3 { font-size: var(--h3); margin-top: 0.25rem; }
.card p { font-size: var(--text-sm); line-height: 1.65; color: var(--slate); flex: 1; }
.card .btn-text { align-self: flex-start; margin-top: 0.5rem; }

/* Split row */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-text > .eyebrow { margin-bottom: 1rem; }
.split-text h2 { margin-bottom: 1.25rem; }
.split-text p + p { margin-top: 1rem; }
.split-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--ink-light); }

/* Editorial placeholder card for photos we know are missing on staging.
   Distinct enough that reviewers spot it immediately and attach a real
   image through the feedback widget. */
.image-placeholder {
  margin: 1.5rem 0 2rem;
  padding: 0;
  border: 2px dashed var(--ink-border, #cbd5df);
  border-radius: var(--r-lg, 12px);
  background: repeating-linear-gradient(
    -45deg,
    rgba(32, 152, 216, 0.04),
    rgba(32, 152, 216, 0.04) 12px,
    rgba(32, 152, 216, 0.08) 12px,
    rgba(32, 152, 216, 0.08) 24px
  );
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-placeholder-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  max-width: 640px;
}
.image-placeholder-eyebrow {
  font: 700 0.75rem/1 "DM Mono", "Courier New", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue, #2098D8);
}
.image-placeholder-title {
  font: 700 1.05rem/1.25 "Bebas Neue", "Outfit", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, #0A1520);
}
.image-placeholder-note {
  font-size: 0.875rem;
  color: var(--ink-70, #56697d);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait embeds (e.g. the Madagascar-shape mosaic) need their full height —
   drop the landscape aspect-ratio + crop when the media column contains one. */
.split-media:has(.mosaic-inline-link),
.split-media.split-media--tall {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-media:has(.mosaic-inline-link) img,
.split-media.split-media--tall img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.split.reverse > .split-text { order: 2; }

@media (max-width: 880px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > .split-text { order: initial; }
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: var(--s-2xl) 0 var(--s-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand .brand-line {
  font-family: var(--display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.88rem; line-height: 1.65; max-width: 36ch; }
.footer-strapline {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-light) !important;
  margin-bottom: 1rem !important;
  max-width: 22ch !important;
  line-height: 1.05 !important;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1rem;
  font-weight: 500;
}
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col a {
  color: rgba(255,255,255,0.7);
  font-size: 0.86rem;
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid var(--ink-border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Horizontal mind-map (Knowledge Hub, FAQs) ────────────────
   Root on left, categories stacked vertically to the right, items
   fanning out further right. Connecting lines drawn with CSS borders. */
.mindmap {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0 2rem;
  align-items: stretch;
}
.mindmap-root {
  align-self: center;
  background: var(--ink);
  color: #fff;
  padding: 1.5rem 1rem;
  border-radius: var(--r-lg);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mindmap-root::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 1.5rem;
  height: 2px;
  background: var(--blue);
}
.mindmap-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.mindmap-cat {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.35rem 0;
  position: relative;
}
/* Trunk line — each category draws its own vertical segment on the left.
   First category's segment starts at its row centre, last category's ends
   at its row centre, middle categories run full-row. Together they form
   a continuous line between first and last category boxes with nothing
   sticking out. No background-colour cap that would leak against
   non-paper section backgrounds. */
.mindmap-cat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--blue);
}
.mindmap-cat:first-child::after { top: 50%; }
.mindmap-cat:last-child::after  { bottom: 50%; }
/* Horizontal connector spur into each category label. */
.mindmap-cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: var(--blue);
  transform: translateX(-2px);
  z-index: 1;
}
.mindmap-cat-label {
  display: block;
  background: var(--blue);
  color: #fff;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  margin-left: 1rem;
  transition: background var(--dur-fast) var(--ease);
}
.mindmap-cat-label:hover { background: var(--blue-hover); }
/* "Coming soon" categories: keep the transparent fill so they read as
   placeholders, but give them a solid blue outline so the box shape is
   as clear as the populated categories. */
.mindmap-cat--empty .mindmap-cat-label {
  background: transparent;
  color: var(--blue-dk);
  border: 2px solid var(--blue);
  /* Compensate for the border so the label height matches the filled ones. */
  padding: calc(0.55rem - 2px) calc(0.85rem - 2px);
}
/* Empty categories keep their transparent fill on hover — the general
   :hover rule above would otherwise paint a blue background under the
   dark-blue text and make it invisible. */
.mindmap-cat--empty .mindmap-cat-label:hover {
  background: transparent;
  border-color: var(--blue-dk);
  color: var(--blue-dk);
}
.mindmap-cat-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.mindmap-cat-items li { width: 100%; max-width: 560px; }
.mindmap-cat-items li a {
  display: inline-block;
  padding: calc(0.35rem - 1px) calc(0.75rem - 1px);
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: var(--r);
  color: var(--blue-dk);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mindmap-cat-items li a:hover {
  background: var(--blue-pale);
  border-color: var(--blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 152, 216, 0.18);
}
.mindmap-soon {
  color: var(--mist);
  font-style: italic;
  font-size: 0.82rem;
  padding: 0.35rem 0.25rem;
}
@media (max-width: 900px) {
  .mindmap {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mindmap-root::after { display: none; }
  .mindmap-cats { border-left: none; padding-left: 0; }
  .mindmap-cat {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .mindmap-cat::before { display: none; }
  .mindmap-cat-label { margin-left: 0; text-align: left; }
}

/* -------------------------------------------------------------------------
 * Home Impact strip — fixed operational scale + live cumulative counters
 * ------------------------------------------------------------------------- */
.home-impact-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 1.5rem 0 0.75rem;
}
.home-impact-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.home-impact-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}
/* Reuse the live-ticker pill inside the home impact heading. */
.home-impact-live-pill { margin: 0; }
.live-mini-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}
.live-mini {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.live-mini:hover {
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.07);
}
.live-mini-num {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}
.live-mini-unit {
  font-family: var(--body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.35;
  display: block;
}
@media (max-width: 640px) {
  .live-mini-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-mini-num { font-size: 1.5rem; }
}

/* -------------------------------------------------------------------------
 * Knowledge Hub search
 * ------------------------------------------------------------------------- */
.kb-search {
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem 1rem;
  margin-bottom: 1.5rem;
  max-width: 760px;
}
.kb-search-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  display: block;
  margin-bottom: 0.5rem;
}
#kb-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--blue);
  border-radius: var(--r);
}
#kb-search-input:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.kb-search-hint {
  font-size: 0.78rem;
  color: var(--mist);
  margin: 0.5rem 0 0;
}
.kb-search-results {
  max-width: 760px;
  margin-bottom: 2rem;
}
.kb-search-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}
.kb-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.kb-search-list li a {
  display: block;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kb-search-list li a:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 21, 32, 0.06);
}
.kb-search-cat {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-dk);
  display: block;
  margin-bottom: 0.35rem;
}
.kb-search-list h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.kb-search-summary {
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.4rem;
}
.kb-search-snippet {
  color: var(--slate);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.kb-search-empty {
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  color: var(--slate);
}
.kb-search-results mark {
  background: rgba(240, 192, 64, 0.35);
  color: inherit;
  padding: 0 0.15em;
  border-radius: 2px;
}

/* Grouped article/FAQ list below the mind-map — H2 per category with slug id */
.kb-groups .kb-group { margin-bottom: 3rem; scroll-margin-top: 100px; }
/* Any section or heading that acts as an anchor target reserves space so
   the fixed site header doesn't cover it when jumped to via #hash link. */
section[id], h2[id], h3[id] { scroll-margin-top: 100px; }
.kb-groups .kb-group-title {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--blue-pale);
  margin-bottom: 1.25rem;
  scroll-margin-top: 90px;
}
.kb-groups .kb-group--empty .kb-group-title { color: var(--mist); }
.kb-groups .kb-group--empty p { color: var(--mist); font-style: italic; }

/* ── SDG pictogram grid — uses official UN SDG icons at their intended aspect ── */
.sdg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.sdg-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
}
@media (max-width: 600px) {
  .sdg-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}

/* ── CTA band ──────────────────────────────────────────────── */
.cta-band {
  background: var(--blue);
  color: #fff;
  padding: var(--s-xl) 0;
}
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 48ch; margin-top: 0.5rem; }
/* .btn-ghost sits on the blue .cta-band, so its default blue border would
   disappear against the background. Restore a white outline here. */
.cta-band .btn-ghost { border-color: rgba(255, 255, 255, 0.8); background: transparent; color: #fff; }
.cta-band .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

/* ── Article page ──────────────────────────────────────────── */
.article-head { position: relative; }
.article-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.article-pdf-btn { font-size: 0.78rem; padding: 0.6rem 1.15rem; min-height: 40px; }
.article-pdf-btn svg { flex-shrink: 0; }
.article-meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}
.article-body {
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--slate);
}
.article-body h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 2.75rem 0 1rem;
  padding-top: 0.5rem;
}
.article-body h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  margin: 2rem 0 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}
.article-body p { margin-bottom: 1.1rem; }
.article-body ul,
.article-body ol {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.75rem 0 1.25rem;
}
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.4rem; }
.article-body blockquote {
  border-left: 3px solid var(--blue);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--slate);
  font-size: 1rem;
}
.article-body blockquote p { margin-bottom: 0.5rem; }
.article-body a { color: var(--blue-dk); text-decoration: underline; text-decoration-color: var(--blue-pale); text-underline-offset: 0.15em; }
.article-body a:hover { color: var(--blue-hover); text-decoration-color: var(--blue); }
.article-body strong { color: var(--text); }

/* Executive summary + Contents block at the top of long articles */
.article-body .article-summary {
  background: var(--paper);
  border-left: 3px solid var(--blue);
  padding: 1.5rem 2rem 1.75rem;
  margin: 2rem 0 2.5rem;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.article-body .article-summary h2 {
  font-size: 1.35rem;
  margin: 0 0 1rem;
  padding-top: 0;
  color: var(--blue-dk);
  letter-spacing: 0.08em;
}
.article-body .article-summary h2:nth-of-type(2) {
  margin-top: 1.75rem;
  border-top: 1px solid var(--smoke);
  padding-top: 1.25rem;
}
.article-body .article-summary ul,
.article-body .article-summary ol {
  margin: 0;
}
.article-body .article-summary li {
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.article-body .article-summary a { text-decoration: none; color: var(--blue-dk); }
.article-body .article-summary a:hover { color: var(--blue); text-decoration: underline; }
/* Smooth in-page navigation from TOC clicks */
html { scroll-behavior: smooth; }
/* Give the anchored h2s a scroll offset so they don't hide under the nav */
.article-body h2 { scroll-margin-top: 90px; }
.article-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--blue-pale);
  color: var(--blue-dk);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.article-body hr {
  border: 0;
  border-top: 1px solid var(--smoke);
  margin: 2.5rem 0;
}

/* Footnote styling (markdown-it-footnote output) */
.article-body .footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--smoke);
  font-size: 0.88rem;
  color: var(--mist);
}
.article-body .footnotes hr { display: none; }
.article-body .footnotes ol { padding-left: 1.75rem; }
.article-body .footnotes li { margin-bottom: 0.55rem; line-height: 1.55; }
.article-body .footnote-ref a,
.article-body .footnote-backref {
  color: var(--blue);
  text-decoration: none;
  font-size: 0.75em;
  vertical-align: super;
  padding: 0 0.15em;
}
.article-body .footnote-backref { font-size: 0.85em; margin-left: 0.4em; }
.article-body .footnotes a { color: var(--blue-dk); }

/* SaniTap-relevance callout */
.sanitap-callout {
  margin: 3rem 0 0;
  padding: 2rem;
  background: var(--blue-pale);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
}
.sanitap-callout h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--blue-dk);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
  margin-top: 0;
}
.sanitap-callout p { color: var(--text); font-size: 0.95rem; line-height: 1.75; margin-bottom: 0.85rem; }
.sanitap-callout p:last-child { margin-bottom: 0; }
.sanitap-callout-cta { margin-top: 1.25rem !important; }

/* Print-only elements: hidden in browser view */
.print-only { display: none; }

/* ── @media print — SaniTap brand format ─────────────────── */
@media print {
  /* Global reset for print */
  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #0A1520 !important;
  }
  body {
    background: #fff !important;
    color: #0A1520 !important;
    font-size: 10.5pt;
    line-height: 1.55;
  }

  /* Hide site chrome and interactive UI */
  .site-header, .site-footer, .no-print, .cta-band, .parallax-divider,
  .article-actions, .article-pdf-btn, .skip-link, .article-meta,
  .site-header * { display: none !important; }

  /* Show print-only blocks */
  .print-only { display: block !important; }

  /* Page rules */
  @page {
    size: A4;
    margin: 2cm 1.8cm 2.5cm 1.8cm;
    @bottom-center {
      content: "SaniTap Ltd  ·  sanitap.org  ·  info@sanitap.org  ·  page " counter(page) " of " counter(pages);
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 8pt;
      color: #3A5066;
    }
    @top-right {
      content: "";
    }
  }
  @page :first {
    @bottom-center {
      content: "SaniTap Ltd  ·  Bringing Good Ideas to Life  ·  sanitap.org";
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 8pt;
      color: #3A5066;
    }
  }

  /* Print cover block */
  .article-page { padding: 0 !important; }
  .article-page .container { max-width: none !important; padding: 0 !important; }
  .article-head { display: none !important; } /* replaced by print-cover */

  .print-cover { margin-bottom: 1.5cm; }
  .print-brand {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5cm;
  }
  .print-strapline {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 11pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0030A0 !important;
  }
  .print-rule {
    border: 0;
    border-top: 2px solid #2098D8;
    margin: 0.5cm 0;
  }
  .print-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 8.5pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2098D8 !important;
    margin-bottom: 0.35cm;
  }
  .print-title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 28pt;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0A1520 !important;
    margin: 0 0 0.4cm 0;
  }
  .print-summary {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 11.5pt;
    line-height: 1.55;
    color: #3A5066 !important;
    font-weight: 300;
    margin-bottom: 0.35cm;
  }
  .print-date {
    font-family: 'DM Mono', monospace;
    font-size: 8pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8FA3B4 !important;
  }

  /* Print article body */
  .article-body {
    font-family: 'Outfit', system-ui, sans-serif;
    color: #0A1520 !important;
    font-size: 10.5pt;
    line-height: 1.6;
  }
  .article-body h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 15pt;
    color: #0030A0 !important;
    margin: 0.6cm 0 0.15cm;
    break-after: avoid;
  }
  .article-body h3 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11pt;
    color: #0A1520 !important;
    margin: 0.35cm 0 0.1cm;
    break-after: avoid;
  }
  .article-body a {
    color: #0030A0 !important;
    text-decoration: none;
  }
  .article-body strong { font-weight: 600; }
  .article-body blockquote {
    border-left: 2px solid #2098D8;
    padding-left: 0.5cm;
    color: #3A5066 !important;
    page-break-inside: avoid;
  }
  .article-body p, .article-body li { orphans: 3; widows: 3; }
  .article-body .footnotes {
    margin-top: 0.6cm;
    padding-top: 0.3cm;
    border-top: 1px solid #E2E8EE;
    font-size: 8.5pt;
    color: #3A5066 !important;
  }
  .article-body .footnotes ol { padding-left: 0.7cm; }
  .article-body .footnotes li { margin-bottom: 0.15cm; }
  .article-body .footnote-ref a { color: #2098D8 !important; }

  /* SaniTap callout in print */
  .sanitap-callout {
    background: #E8F4FB !important;
    border-left: 3px solid #2098D8 !important;
    padding: 0.5cm;
    margin: 0.6cm 0;
    page-break-inside: avoid;
  }
  .sanitap-callout h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 13pt;
    color: #0030A0 !important;
    margin-bottom: 0.2cm;
  }
  .sanitap-callout p { font-size: 10pt; }

  /* Print-only contact card */
  .print-contact { margin-top: 0.8cm; page-break-inside: avoid; }
  .print-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8cm;
    margin: 0.4cm 0;
  }
  .print-contact-heading {
    font-family: 'DM Mono', monospace;
    font-size: 8pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2098D8 !important;
    margin-bottom: 0.1cm;
  }
  .print-contact p { font-size: 9.5pt; line-height: 1.5; margin: 0 0 0.15cm 0; }
  .print-contact a { color: #0030A0 !important; }
  .print-copyright {
    font-family: 'DM Mono', monospace;
    font-size: 7.5pt;
    letter-spacing: 0.05em;
    color: #8FA3B4 !important;
    margin-top: 0.3cm;
    text-align: center;
  }
}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-section + .faq-section { margin-top: 3rem; }
.faq-section-title {
  font-family: var(--display);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blue-dk);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--blue-pale);
}
.faq-item {
  border-bottom: 1px solid var(--smoke);
  padding: 1rem 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  min-height: 44px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--blue);
  font-weight: 400;
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.faq-item[open] > summary::after {
  content: '−';
  color: var(--blue-dk);
}
.faq-item > summary:hover { color: var(--blue); }
.faq-answer {
  padding: 0.5rem 0 1rem;
  color: var(--slate);
  line-height: 1.7;
}
.faq-answer p + p { margin-top: 0.75rem; }
.faq-links { margin-top: 0.75rem; }
.faq-links .btn-text { font-size: 0.74rem; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-row { margin-bottom: 1rem; }
.form-row label {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 0.5rem;
}
.form-row input,
.form-row textarea {
  width: 100%;
  font: inherit;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease);
  min-height: 44px;
}
.form-row input:focus,
.form-row textarea:focus { outline: none; border-color: var(--blue); }
.form-row textarea { resize: vertical; min-height: 140px; }

/* ── Rotating word ─────────────────────────────────────────── */
[data-rotate] {
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  will-change: opacity, transform;
}
[data-rotate].is-fading {
  opacity: 0;
  transform: translateY(-0.25em);
}

/* ── Reveal animation ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Motion keyframes ──────────────────────────────────────── */
@keyframes kb {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  100% { transform: scale(1.12) translate(-2%, -2%); }
}

/* ── Skip link / a11y ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 2000;
}
.skip-link:focus { left: 0; top: 0; }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bg { background-attachment: scroll; animation: none; }
  .parallax-divider { background-attachment: scroll; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Mobile / tablet ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: 80px 1fr; gap: 1.5rem; }
  .section-num { font-size: 3rem; }
}
@media (max-width: 768px) {
  .section { padding: var(--s-xl) 0; }
  .section-head { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 2.5rem; }
  .section-num { font-size: 2.5rem; }
  .hero { min-height: 44vh; }
  /* iOS Safari does not support background-attachment: fixed reliably — fall back */
  .hero-bg, .parallax-divider { background-attachment: scroll; }
}
@media (max-width: 480px) {
  .stat-num { font-size: 2rem; }
  .hero-inner { padding: var(--s-xl) 0; }
}

/* Partner-logo lockup at the top of a card (used on the home Carbon Credits section) */
.card-logo {
  display: block;
  height: 60px;
  width: auto;
  max-width: 220px;
  margin: 0 0 0.9rem;
  object-fit: contain;
  object-position: left center;
}

/* Larger partner-logo lockup at the top of a split-text column (About →
   Local partnerships, MadAvance + Endur'O). */
.partner-lockup {
  display: block;
  height: 120px;
  width: auto;
  max-width: 340px;
  margin: 0 0 1.2rem;
  object-fit: contain;
}

/* Inline mosaic image inside a home split-media column */
.mosaic-inline-link { display: block; }
.mosaic-inline-link img {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: var(--r);
  transition: transform var(--dur-fast) var(--ease);
}
.mosaic-inline-link:hover img { transform: translateY(-2px); }

/* Full-width YouTube video embed (16:9). */
.video-embed {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 28px rgba(10, 21, 32, 0.12);
  max-width: 100%;
}
.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* CRSDW story-animation lazy embed on /our-services/. Preview image sits
   inside until IntersectionObserver swaps it for the animated iframe. */
.crsdw-anim-embed {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #081019;
}
.crsdw-anim-embed .crsdw-anim-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  background: #081019;
}

/* Full-viewport story animation embedded inside a split-media column.
   The animation sizes itself to its container; we set an aspect ratio to
   keep the split balanced across breakpoints. */
.story-embed {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--r);
  background: #081019;
  box-shadow: 0 6px 22px rgba(10, 21, 32, 0.18);
}
@media (max-width: 640px) {
  .story-embed { aspect-ratio: 3 / 4; }
}

/* Cyclone-over-Madagascar animation on the home Adaptation split */
.cyclone-anim {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r);
  background: #040d15;
  box-shadow: 0 12px 40px rgba(4, 13, 21, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .cyclone-anim .cyclone-body animateTransform { display: none; }
  .cyclone-anim .cyclone-wind animate { display: none; }
}

/* -------------------------------------------------------------------------
 * Impact Dashboard (/our-impact/dashboard/)
 * Period-based flow-rate calculator. Rows list SDG icon + measure on the
 * left and the computed value + unit on the right. No cards, no filters,
 * no partner grouping — marketing-clean, single scan-line per measure.
 * ------------------------------------------------------------------------- */
.dash-headline {
  background: linear-gradient(140deg, var(--ink) 0%, #0d1c2c 100%);
  color: #fff;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: var(--r);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.dash-live-pill { margin: 0 0 0.9rem; display: inline-flex; }
.dash-headline-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.dash-headline-window {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.35rem;
}
.dash-headline-value {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--gold);
  margin-top: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.dash-headline-unit {
  font-family: var(--body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.45rem;
}

.dash-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dash-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.dash-row:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 21, 32, 0.06);
}
.dash-row-icon { display: flex; align-items: center; }
.dash-row-icon .dash-sdg { width: 64px; height: 64px; border-radius: 6px; }
.dash-row-icon .dash-sdg-n { top: 4px; left: 6px; font-size: 1rem; }
.dash-row-measure {
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.35;
}
.dash-row-source {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 0.3rem;
  line-height: 1.45;
}
.dash-row-value {
  text-align: right;
  white-space: nowrap;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.dash-row-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  letter-spacing: 0.01em;
  line-height: 1;
}
.dash-row-unit {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--slate);
}
/* Live-tick display: big integer part beside a smaller fractional
   part that updates every second. Same tabular-num face so digits
   don't jitter. Andrew's request: "126,357.xx with the xx in a
   smaller font ticking over — or maybe 3 decimal places". */
.dash-tick-int {
  font-variant-numeric: tabular-nums;
}
.dash-tick-dec {
  font-size: 0.42em;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 1px;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.dash-tick-suffix {
  font-size: 0.5em;
  font-weight: 500;
  opacity: 0.85;
  margin-left: 0.15em;
  vertical-align: baseline;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-headline-value .dash-tick-suffix {
  font-size: 0.42em;
  opacity: 0.75;
  margin-left: 0.18em;
}
/* Same treatment on the headline value: integer huge, decimals subtle. */
.dash-headline-value .dash-tick-int { font-variant-numeric: tabular-nums; }
.dash-headline-value .dash-tick-dec {
  font-size: 0.38em;
  opacity: 0.55;
  vertical-align: baseline;
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Bump the SDG group header too so it matches the larger rows. */
.dash-grouphead .dash-sdg { width: 56px; height: 56px; }
.dash-grouphead-title { font-size: 1.6rem; }

.dash-controls {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: rgba(244, 247, 250, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  margin-bottom: 1.5rem;
}
.dash-grp { display: flex; align-items: center; gap: 0.55rem; }
.dash-grp > label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.dash-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--smoke);
  border-radius: 999px;
}
.dash-seg button {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--blue-dk);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dash-seg button:hover { background: rgba(32, 152, 216, 0.08); }
.dash-seg button.on { background: var(--blue-dk); color: #fff; }
#dash-search {
  flex: 1;
  min-width: 12rem;
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  padding: 0.55rem 0.85rem;
}
#dash-search:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.dash-statusfilter { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dash-sf {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--smoke);
  background: #fff;
  color: var(--slate);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.dash-sf:hover { border-color: var(--blue); color: var(--blue-dk); }
.dash-sf.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.dash-grouphead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
}
.dash-grouphead-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.dash-grouphead-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
}
.dash-grouphead-bar {
  flex: 1;
  height: 1px;
  background: var(--smoke);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.dash-card {
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  padding: 1.15rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dash-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(10, 21, 32, 0.06);
}
.dash-card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: flex-start;
}
.dash-card-name {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.3;
}
.dash-card-val {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--blue-dk);
  margin: 0.25rem 0 0.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.dash-card-unit { font-size: 0.85rem; color: var(--slate); }
.dash-card-meta {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--smoke);
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.5;
}
.dash-card-meta b { font-weight: 600; color: var(--ink); }
.dash-card-source { opacity: 0.85; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.dash-sdg {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  flex: 0 0 auto;
}
.dash-sdg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-sdg-n {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.78rem;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dash-badge {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
}
.dash-badge.b-mon    { background: #2e7a4c; }        /* monitored — green */
.dash-badge.b-proj   { background: var(--blue-dk); } /* projected — SaniTap navy */
.dash-badge.b-target { background: var(--blue); }    /* target    — SaniTap sky blue */
.dash-badge.b-art    { background: #7a5b18; color: var(--gold); } /* modelled — gold-on-brown */
.dash-badge.b-info   { background: var(--slate); }

.dash-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--slate);
  font-style: italic;
}
.dash-footnote {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--smoke);
  font-size: 0.85rem;
  color: var(--slate);
  line-height: 1.6;
  max-width: 82ch;
}

@media (max-width: 640px) {
  .dash-controls { position: static; }
  .dash-sum-val { font-size: 1.6rem; }
  .dash-card-val { font-size: 1.3rem; }
  /* Dashboard SDG rows: stack on mobile so the metric label has full width */
  .dash-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "icon body" "value value";
    gap: 0.85rem 0.85rem;
    padding: 1rem 1rem;
    row-gap: 0.75rem;
  }
  .dash-row-icon { grid-area: icon; }
  .dash-row-body { grid-area: body; }
  .dash-row-value { grid-area: value; text-align: left; justify-content: flex-start; padding-top: 0.25rem; border-top: 1px dashed var(--smoke); }
  .dash-row-icon .dash-sdg { width: 52px; height: 52px; }
  .dash-row-icon .dash-sdg-n { top: 3px; left: 5px; font-size: 0.85rem; }
  .dash-row-measure { font-size: 1rem; }
  .dash-row-source { font-family: var(--body); font-size: 0.78rem; }
  .dash-row-num { font-size: 1.9rem; }
  .dash-grouphead-title { font-size: 1.3rem; }
  .dash-grouphead .dash-sdg { width: 44px; height: 44px; }
}

/* -------------------------------------------------------------------------
 * Madagascar cookstove mosaic (embed on /clean-cookstove-projects/)
 * ------------------------------------------------------------------------- */
.cookstove-mosaic .mosaic-figure {
  margin: 2.5rem 0 0;
  text-align: center;
}
.cookstove-mosaic .mosaic-figure a { display: block; }
.cookstove-mosaic .mosaic-figure img {
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--r);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cookstove-mosaic .mosaic-figure a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.cookstove-mosaic .mosaic-figure figcaption {
  margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Live impact ticker (sits directly under the hero on /our-impact/)
 * Real-time-feeling counters driven by annual rates from impact.json.
 * ------------------------------------------------------------------------- */
.live-ticker {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2, #0d1c2c) 100%);
  color: #fff;
  padding: 2.5rem 0 2.75rem;
  position: relative;
  overflow: hidden;
}
.live-ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(1000px 400px at 50% -20%, rgba(32, 152, 216, 0.14), transparent 60%);
  pointer-events: none;
}
.live-ticker > .container { position: relative; }
.ticker-head {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.25rem;
}
.pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(32, 152, 216, 0.85);
  animation: pulse-live 1.0s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0 rgba(32, 152, 216, 0.85); }
  70%  { box-shadow: 0 0 0 22px rgba(32, 152, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(32, 152, 216, 0); }
}

.ticker-stage {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.4s var(--ease);
}
.ticker-stage.is-fading { opacity: 0; }
.ticker-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1rem;
}
.ticker-value {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 30px rgba(240, 192, 64, 0.18);
}
.ticker-unit {
  font-family: var(--body);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.ticker-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.15rem;
}
.ticker-secondary [data-live-secondary] {
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ticker-caption {
  max-width: 720px;
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}
.ticker-dots {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 0.5rem;
}
.ticker-dot {
  width: 30px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ticker-dot:hover { background: rgba(255, 255, 255, 0.4); }
.ticker-dot.is-active { background: var(--blue); }
.ticker-foot {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.5rem 0 0;
}
.ticker-foot a { color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.ticker-foot a:hover { color: var(--gold); border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; box-shadow: 0 0 0 8px rgba(32, 152, 216, 0.28); }
  .ticker-stage { transition: none; }
}
@media (max-width: 640px) {
  .ticker-value { font-size: 2.6rem; }
  .ticker-unit  { font-size: 0.95rem; }
  .live-ticker  { padding: 2rem 0; }
}

/* -------------------------------------------------------------------------
 * Impact Dashboard (/impact-dashboard/)
 * Card-based readout of every metric in src/_data/impact.json.
 * Uses only SaniTap tokens — no bespoke colours.
 * ------------------------------------------------------------------------- */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.impact-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.impact-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.impact-card {
  background: #fff;
  border: 1px solid var(--smoke);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.impact-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(10, 21, 32, 0.06);
}
.impact-card--gold {
  border-color: var(--gold);
  background: linear-gradient(180deg, #fff 0%, rgba(240, 192, 64, 0.06) 100%);
}
.impact-card--gold:hover { border-color: var(--gold); }

.impact-value {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1;
  color: var(--blue-dk);
  letter-spacing: 0.01em;
}
.impact-card--gold .impact-value { color: #B88F00; }

.impact-label {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.impact-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--body);
  font-size: 0.72rem;
  color: var(--slate);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--smoke);
}
.impact-source { font-weight: 600; color: var(--ink); }
.impact-asof { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; }
.impact-notes {
  font-size: 0.75rem;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
}

/* Dark-background variant — used for the country-context strip. */
.impact-grid--dark .impact-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.impact-grid--dark .impact-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.impact-grid--dark .impact-value { color: #fff; }
.impact-grid--dark .impact-card--gold {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(240, 192, 64, 0.14) 100%);
  border-color: var(--gold);
}
.impact-grid--dark .impact-card--gold .impact-value { color: var(--gold); }
.impact-grid--dark .impact-label { color: rgba(255, 255, 255, 0.92); }
.impact-grid--dark .impact-meta {
  color: rgba(255, 255, 255, 0.65);
  border-top-color: rgba(255, 255, 255, 0.14);
}
.impact-grid--dark .impact-source { color: #fff; }
.impact-grid--dark .impact-notes { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 640px) {
  .impact-grid,
  .impact-grid--3,
  .impact-grid--4 { grid-template-columns: 1fr; }
  .impact-value { font-size: 2.4rem; }
}