@charset "utf-8";
/* ==========================================================================
   Philippine Banana Council, Inc. — main.css
   Single stylesheet, shared by all 6 pages. Mobile-first.
   Breakpoints: 640px (sm) · 900px (md) · 1200px (lg)

   INDEX
   01. Tokens (custom properties)
   02. Reset & base
   03. Typography (h1-h3, eyebrow, lede, prose, display line, quotes)
   04. Layout (container, section rhythm, grids, section head)
   05. Skip link & focus states
   06. Data strip
   07. Header / nav / mobile accordion menu
   08. Buttons
   09. Cards (base, link cards, news, member, router, leader)
   10. Stat tiles & counters
   11. Hero (video, scrim, controls)
   12. Media blocks (portrait split, video reveal player, galleries)
   13. Map (Mindanao SVG regions, tooltip, data table)
   14. Timeline (about.html)
   15. Bar viz (industry.html)
   16. Tables
   17. Partners strip
   18. Footer
   19. Reveal animations
   20. Reduced motion (global kill block)
   21. Print
   ========================================================================== */

/* ------------------------------------------------ 01. Tokens ------------ */
:root {
  /* Brand palette (BUILD_SPEC §1) */
  --green-deep: #123B2E;
  --green-leaf: #1F6B4A;
  --green-dark: #0C2A20;
  --charcoal:   #263143;
  --gold:       #F0B429;
  --gold-light: #F7D774;
  --cream:      #FDF9CD;
  --paper:      #F7F4ED;
  --ink:        #1A1A1A;
  --ink-soft:   #595959;
  --white-warm: #FDFBF4;
  --link:       #14532D;

  /* Derived / functional colours — no raw literals below this block */
  --link-visited: #4A5B41;
  --gold-hover:   #D99E1B;
  --border:       #E5DFD2;
  --border-dark:  rgba(253, 251, 244, 0.22);
  --shadow:       rgba(18, 59, 46, 0.16);
  --scrim:        rgba(12, 42, 32, 0.62);
  --scrim-strong: rgba(12, 42, 32, 0.74);
  --overlay-soft: rgba(253, 251, 244, 0.10);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Space & shape */
  --container: 1200px;
  --gutter: 24px;
  --radius: 10px;
  --radius-sm: 6px;
  --section-y: 64px;
  --header-h: 96px;
  --header-h-compact: 72px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --section-y: clamp(96px, 9vw, 128px);
  }
}

/* ------------------------------------------------ 02. Reset & base ------ */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body { font-size: 20px; }
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

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

.u-center { text-align: center; }
.u-measure { max-width: 68ch; }
.u-mt-0 { margin-top: 0; }

/* ------------------------------------------------ 03. Typography -------- */
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: inherit;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.15;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
}

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

.eyebrow {
  display: block;
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-leaf);
}

.eyebrow::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  background: var(--gold);
}

.eyebrow--bare::after { display: none; }

.section--green .eyebrow,
.section--charcoal .eyebrow,
.hero .eyebrow,
.footer .eyebrow { color: var(--gold); }

.lede {
  font-size: 1.15em;
  line-height: 1.55;
  max-width: 68ch;
}

.prose { max-width: 68ch; }

.meta {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.section--green .meta,
.section--charcoal .meta,
.footer .meta { color: var(--white-warm); }

.display-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.3;
  text-align: center;
  max-width: 24ch;
  margin: 48px auto 0;
}

.quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.35;
  margin: 0 0 24px;
  max-width: 34ch;
}

.quote--lg {
  font-size: clamp(24px, 3.2vw, 30px);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.quote-attrib {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.signature {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 4px solid var(--gold);
  display: inline-block;
}

.signature strong { display: block; font-size: 20px; }

/* ------------------------------------------------ 04. Layout ------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 860px; }

.section {
  padding-block: var(--section-y);
  background: var(--paper);
  color: var(--ink);
}

.section--cream  { background: var(--cream); }
.section--green  { background: var(--green-deep); color: var(--white-warm); }
.section--dark   { background: var(--green-dark); color: var(--white-warm); }
.section--charcoal { background: var(--charcoal); color: var(--white-warm); }

.section--green a:not(.btn),
.section--charcoal a:not(.btn),
.section--dark a:not(.btn) { color: var(--gold-light); }
.section--green a:not(.btn):visited,
.section--charcoal a:not(.btn):visited,
.section--dark a:not(.btn):visited { color: var(--gold-light); }

.section--tight { padding-block: 48px; }

.section-head { margin-bottom: 40px; max-width: 68ch; }
.section-head > :last-child { margin-bottom: 0; }

.section-foot { margin-top: 40px; }

.grid { display: grid; gap: 24px; }
.grid-2, .grid-3, .grid-4, .grid-5 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Asymmetric split used by chairman's message + map section */
.split { display: grid; gap: 32px; align-items: start; }

@media (min-width: 900px) {
  .split { grid-template-columns: 2fr 3fr; gap: 56px; align-items: center; }
  .split--even { grid-template-columns: 1fr 1fr; }
}

.breadcrumb {
  font-size: 16px;
  padding-block: 16px;
  background: var(--paper);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0; padding: 0;
}
.breadcrumb li { margin: 0; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--ink-soft); }

/* ------------------------------------------------ 05. Skip link / focus - */
.skip-link {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--green :focus-visible,
.section--charcoal :focus-visible,
.section--dark :focus-visible,
.hero :focus-visible,
.footer :focus-visible,
.data-strip :focus-visible {
  outline-color: var(--gold);
}

/* ------------------------------------------------ 06. Data strip -------- */
/* Fixed vertical rhythm: the strip is a single optically-centred line at every
   breakpoint. The two <p> variants are swapped by media query, so both must
   carry zero margin — otherwise the hidden one steals :last-child and the
   visible one keeps the global 1.2em bottom margin (that was the "uneven" bug). */
.data-strip {
  background: var(--green-deep);
  color: var(--white-warm);
  font-size: 15px;
  line-height: 1.4;
  padding-block: 9px;
  text-align: center;
}
.data-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px; /* 15px * 1.4 = 21px line box, rounded up for a stable box */
}
.data-strip p {
  margin: 0;
  line-height: 1.4;
}
.data-strip__full { display: none; }
.data-strip__short { display: block; }

@media (min-width: 640px) {
  .data-strip__full { display: block; }
  .data-strip__short { display: none; }
}

/* ------------------------------------------------ 07. Header ------------ */
/* Plain sticky, fully opaque background, no backdrop-filter: a translucent /
   blurred sticky bar forces the compositor to re-sample everything scrolling
   underneath it, which is what reads as "choppy". */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

/* Transitions are enabled only after the first frame (JS adds .is-ready), so a
   page restored mid-scroll paints its compact state instantly — no load-time
   animation, no layout shift. */
.header.is-ready .header__bar { transition: min-height 220ms var(--ease); }

.header.is-compact .header__bar { min-height: var(--header-h-compact); }

.header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.header__logo img,
.header__logo svg {
  height: 44px;
  width: auto;
  max-width: 100%;
  transform-origin: left center;
  /* Scale, not height: animating an SVG's box re-rasterises the whole vector
     every frame. transform stays on the compositor. */
  will-change: transform;
}
.header.is-ready .header__logo img,
.header.is-ready .header__logo svg { transition: transform 220ms var(--ease); }

@media (min-width: 640px) {
  .header__logo img,
  .header__logo svg { height: 64px; }
}
/* 48/64 desktop, 34/44 mobile — same optical step as before, zero reflow. */
.header.is-compact .header__logo img,
.header.is-compact .header__logo svg { transform: scale(0.75); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 18px;
  background: var(--paper);
  color: var(--green-deep);
  border: 2px solid var(--green-deep);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
}
.nav-toggle__icon { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 2px; background: currentColor;
}
.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after  { top: 7px; }

.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.nav__list li { margin: 0; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav__link:visited { color: var(--ink); }
.nav__link:hover { color: var(--green-leaf); border-bottom-color: var(--border); }
.nav__link[aria-current="page"] { border-bottom-color: var(--gold); color: var(--green-deep); }

/* Mobile: accordion panel behind labelled Menu button */
@media (max-width: 899px) {
  .nav {
    display: none;
    flex: 0 0 100%;
    order: 3;
    border-top: 1px solid var(--border);
    padding-bottom: 12px;
    margin-top: -8px;
  }
  .nav.is-open { display: block; }
  .nav__list { width: 100%; }
  .nav__link {
    width: 100%;
    padding: 0 4px;
    border-bottom: 1px solid var(--border);
  }
  .nav__link[aria-current="page"] {
    border-bottom: 1px solid var(--border);
    box-shadow: inset 3px 0 0 var(--gold);
    padding-left: 14px;
  }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }
  .nav__list { flex-direction: row; gap: 28px; align-items: center; }
}

/* ------------------------------------------------ 08. Buttons ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:visited { color: var(--ink); }
.btn:hover { background: var(--gold-hover); transform: translateY(-1px); text-decoration: none; }

.btn--secondary {
  background: var(--paper);
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn--secondary:visited { color: var(--green-deep); }
.btn--secondary:hover { background: var(--paper); color: var(--green-leaf); border-color: var(--green-leaf); }

.section--green .btn--secondary,
.section--charcoal .btn--secondary,
.section--dark .btn--secondary,
.hero .btn--secondary {
  background: transparent;
  color: var(--white-warm);
  border-color: var(--white-warm);
}
.section--green .btn--secondary:visited,
.section--charcoal .btn--secondary:visited,
.section--dark .btn--secondary:visited,
.hero .btn--secondary:visited { color: var(--white-warm); }
.section--green .btn--secondary:hover,
.section--charcoal .btn--secondary:hover,
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover { background: var(--overlay-soft); color: var(--white-warm); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

/* ------------------------------------------------ 09. Cards ------------- */
.card {
  background: var(--white-warm);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.card > :last-child { margin-bottom: 0; }
.card__title { margin-bottom: 12px; }

.card--link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.card--link:visited { color: var(--ink); }
.card--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--shadow);
  text-decoration: none;
}
.card--link .card__title { text-decoration: underline; text-underline-offset: 2px; }

.card--compact { padding: 24px; }
.card--plain { background: transparent; border: 0; padding: 0; }

.card__tag {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-leaf);
}

.card__tag--gold {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.card__media {
  margin: -32px -32px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.card__media img { width: 100%; }

/* ------------------------------------------------ 10. Stat tiles -------- */
.stats { display: grid; gap: 24px; grid-template-columns: 1fr; }

@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .stats { grid-template-columns: repeat(5, 1fr); } }

/* Five numerals across a 1200px container: hold the spec's 44px floor so the
   longest value ("US$1.68B") never overflows its tile. */
@media (min-width: 1200px) {
  .stats .stat__num { font-size: 44px; }
}

.stats--3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } }

.stat { text-align: left; }

.stat__num {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--green-deep);
}

.section--green .stat__num,
.section--charcoal .stat__num,
.section--dark .stat__num { color: var(--gold); }

.stat__label {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 4px solid var(--gold);
  font-size: 17px;
  line-height: 1.4;
  max-width: 26ch;
}

/* ------------------------------------------------ 11. Hero -------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--green-deep);
  color: var(--white-warm);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding-block: 72px;
}

@media (min-width: 900px) {
  .hero { min-height: 72vh; padding-block: 96px; }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}

.hero__inner { max-width: 640px; }
.hero h1 { margin-bottom: 20px; }
.hero__sub { font-size: 1.1em; margin-bottom: 32px; max-width: 40ch; }

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  z-index: 2;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  background: var(--scrim-strong);
  color: var(--white-warm);
  border: 2px solid var(--white-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.hero__toggle:hover { background: var(--green-deep); }

.hero--banner { min-height: 320px; padding-block: 56px; }
@media (min-width: 900px) { .hero--banner { min-height: 380px; } }

/* Media band — same scrim/media pattern as the hero, for quote bands etc. */
.band { position: relative; isolation: isolate; overflow: hidden; }
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media video,
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-strong);
}

/* ------------------------------------------------ 12. Media blocks ------ */
.portrait {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.portrait img { width: 100%; }

.media-figure { margin: 0; }
.media-figure figcaption { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }

/* Inline video reveal (BanCon player) */
.player { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--green-dark); }
.player img, .player video { width: 100%; display: block; }
.player__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--scrim);
  color: var(--white-warm);
  border: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.player__btn:hover { background: var(--scrim-strong); }
.player__btn span.player__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
}
.player.is-playing .player__btn { display: none; }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ------------------------------------------------ 13. Map --------------- */
.map { position: relative; }
.map svg { width: 100%; height: auto; display: block; }

.map-region {
  fill: var(--green-leaf);
  stroke: var(--paper);
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 180ms var(--ease);
}
.map-region:hover,
.map-region:focus,
.map-region.is-active { fill: var(--gold); }
.map-region:focus { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.map-region:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }

.section--cream .map-region { stroke: var(--cream); }

.map-tip {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  max-width: 260px;
  padding: 10px 14px;
  background: var(--green-deep);
  color: var(--white-warm);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms var(--ease);
}
.map-tip.is-visible { opacity: 1; transform: translateY(0); }
.map-tip strong { display: block; }

.map-caption { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }
.section--green .map-caption,
.section--charcoal .map-caption { color: var(--white-warm); }

/* ------------------------------------------------ 14. Timeline ---------- */
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 24px;
  border-left: 4px solid var(--gold);
  padding-left: 24px;
}

.timeline__item { margin: 0; }
.timeline__item > :last-child { margin-bottom: 0; }

.timeline__year {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  margin-bottom: 8px;
}

.timeline__title { margin-bottom: 8px; }

@media (min-width: 900px) {
  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    border-left: 0;
    border-top: 4px solid var(--gold);
    padding-left: 0;
    padding-top: 32px;
    gap: 40px;
    scroll-snap-type: x mandatory;
  }
  .timeline__item { scroll-snap-align: start; }
}

.timeline-controls { display: none; gap: 12px; margin-top: 24px; }
@media (min-width: 900px) { .timeline-controls { display: flex; } }

.timeline-btn {
  min-width: 56px; min-height: 56px;
  background: transparent;
  color: var(--white-warm);
  border: 2px solid var(--white-warm);
  border-radius: var(--radius-sm);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.timeline-btn:hover { background: var(--overlay-soft); }

/* ------------------------------------------------ 15. Bar viz ----------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }

.bars__row { margin: 0; }
.bars__row > * { margin: 0; }

.bars__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 8px;
}

.bars__value { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.section--cream .bars__value,
.section:not(.section--green):not(.section--charcoal):not(.section--dark) .bars__value { color: var(--green-deep); }

.bars__track {
  height: 16px;
  background: var(--overlay-soft);
  border-radius: 999px;
  overflow: hidden;
}
.section:not(.section--green):not(.section--charcoal):not(.section--dark) .bars__track { background: var(--border); }

.bars__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 999px;
  transition: width 900ms var(--ease);
}
.bars__fill.is-filled { width: var(--bar-w, 0%); }

.minibars { display: grid; gap: 10px; margin-top: 16px; }

/* ------------------------------------------------ 16. Tables ------------ */
.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.data-table caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 12px;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.data-table th { font-weight: 700; }
.data-table thead th { border-bottom: 3px solid var(--gold); }
.data-table td.num, .data-table th.num { text-align: right; }

.section--green .data-table th,
.section--green .data-table td,
.section--charcoal .data-table th,
.section--charcoal .data-table td { border-bottom-color: var(--border-dark); }

/* ------------------------------------------------ 17. Partners strip ---- */
.partners { text-align: center; }
.partners__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.partners__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 40px;
}
.partners__list li {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--green-deep);
}

/* ------------------------------------------------ 18. Footer ------------ */
.footer {
  background: var(--green-deep);
  color: var(--white-warm);
  padding-top: 64px;
}

.footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

.footer h2, .footer h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer__crest img, .footer__crest svg { height: 72px; width: auto; }

.footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 16px 0 8px;
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 4px; }
.footer a {
  color: var(--white-warm);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer a:visited { color: var(--white-warm); }
.footer a:hover { color: var(--gold-light); }

.footer__bottom {
  margin-top: 56px;
  border-top: 1px solid var(--border-dark);
  padding-block: 16px 24px;
  font-size: 16px;
}
.footer__bottom ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}
.footer__bottom li { margin: 0; }

/* ------------------------------------------------ 19. Reveal ------------ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* No-JS safety: if JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------ 20. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__media video,
  .band__media video { display: none; }
  .hero__media img.hero__poster { display: block; }
  .bars__fill { transition: none; }
}

/* Poster image only shown when the video is suppressed */
.hero__poster { display: none; }
.no-js .hero__poster { display: block; }
.no-js .hero__media video,
.no-js .hero__toggle { display: none; }

/* ------------------------------------------------ 21. Print ------------- */
@media print {
  .data-strip,
  .header,
  .hero__toggle,
  .nav-toggle,
  .timeline-controls,
  .player__btn,
  .skip-link { display: none !important; }

  body {
    background: none;
    color: var(--ink);
    font-size: 12pt;
    line-height: 1.45;
  }
  .section, .section--green, .section--cream, .section--charcoal, .section--dark {
    background: none !important;
    color: var(--ink) !important;
    padding-block: 18pt;
  }
  .hero { min-height: 0; color: var(--ink); background: none; padding-block: 18pt; }
  .hero::before, .hero__media { display: none; }
  .card { border: 1pt solid var(--ink-soft); page-break-inside: avoid; }
  a { color: var(--ink); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  h1, h2, h3 { page-break-after: avoid; }
  img, video, figure, .stat, .timeline__item { page-break-inside: avoid; }
}