/* ===============================================================
   The Cost of Now — AxiaOrigin × ValuesMove
   Scroll-story microsite. Vanilla CSS, no build step.

   Step 1: scaffold only — design tokens, reset, and accessibility
   helpers. Components (banner, hero/counter, sticky bar, cards,
   visualisations, closing) are styled in their own later steps.
   =============================================================== */

:root {
  /* Palette — balanced between both brands (CLAUDE.md §3) */
  --aubergine: #2A2140;   /* banner spine + shared anchor; also the dark canvas */
  --crimson:   #FC2454;   /* AxiaOrigin accent — shared chrome + data highlight */
  --purple:    #90489C;   /* ValuesMove accent — equal weight */
  --sky:       #00B4E4;   /* interaction: focus rings */
  --paper:     #F7F3EE;   /* soft warm tone — subtle fills + light tints on dark */
  --page:      #EEEAE3;   /* page canvas — warm neutral, sits BEHIND surfaces */
  --surface:   #FFFFFF;   /* elevated surfaces: banner & cards */
  --ink:       #241F2B;   /* body text */
  --ink-soft:  #5C5666;   /* secondary text */
  --hairline:  color-mix(in srgb, var(--ink) 14%, transparent);

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1100px;
}

/* --- reset / base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

/* --- accessibility helpers -------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--aubergine);
  color: var(--surface);
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Visually hidden but available to assistive tech (live counter summary). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ===============================================================
   BANNER — white surface, aubergine spine, equal-partner lockup.
   Floats above the warm page with a soft shadow; home pill pinned left.
   =============================================================== */
.banner {
  position: relative;
  z-index: 50;
  background: var(--surface);
  box-shadow:
    0 8px 24px -10px rgba(36, 31, 43, 0.20),
    0 2px 6px  -3px  rgba(36, 31, 43, 0.10);
}
.banner__spine { height: 4px; background: var(--aubergine); }

.banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;   /* lockup truly centred in the banner */
}

/* Home pill — ghost pill pinned to the banner's left edge (anchored to the
   full-width banner, not the centred lockup) so it reads clearly top-left.
   Returns to its own line at ≤768px. */
.banner__home {
  position: absolute;
  left: clamp(1rem, 4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.banner__home:hover {
  color: var(--crimson);
  border-color: color-mix(in srgb, var(--crimson) 45%, var(--hairline));
}
.banner__home-icon { width: 17px; height: 17px; flex: 0 0 auto; }

.banner__lockup {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 4vw, 2.6rem);
}

/* Equal optical weight: ValuesMove carries a mark + tagline, so AxiaOrigin is
   set a touch shorter so neither brand dominates. */
.brand { display: inline-flex; align-items: center; }
/* width:auto defeats the width="" hint so CSS height alone drives size. */
.brand img { width: auto; transition: opacity 0.15s ease; }
.brand:hover img { opacity: 0.78; }
.brand--axia   img { height: 28px; }
.brand--values img { height: 36px; }

.brand-divider { width: 1px; height: 34px; background: var(--hairline); }

/* Banner responsive — home pill drops to its own line; logos shrink, centred. */
@media (max-width: 768px) {
  .banner__inner { position: static; flex-direction: column; gap: 0.85rem; text-align: center; }
  .banner__home { position: static; transform: none; }
}
@media (max-width: 600px) {
  .banner__lockup { gap: 1.2rem; }
  .brand--axia   img { height: 22px; }
  .brand--values img { height: 28px; }
  .brand-divider { height: 26px; }
}

/* ===============================================================
   "WHY ARE WE DOING THIS?" disclosure (CLAUDE.md §14) — banner tab on
   the right + slide-down panel on the dark canvas. Never auto-opens.
   =============================================================== */
.banner__why {
  position: absolute; right: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border: 0; border-radius: 999px;
  --why-shadow: 0 6px 18px -6px color-mix(in srgb, var(--crimson) 55%, transparent);
  background: linear-gradient(135deg, var(--crimson), var(--purple));
  color: #fff; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: var(--why-shadow);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.banner__why:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--crimson) 62%, transparent); }
.banner__why-chevron { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 0.3s ease; }
.banner__why[aria-expanded="true"] .banner__why-chevron { transform: rotate(180deg); }
@keyframes whyPulse {
  0%   { box-shadow: var(--why-shadow), 0 0 0 0   color-mix(in srgb, var(--crimson) 50%, transparent); }
  70%  { box-shadow: var(--why-shadow), 0 0 0 13px color-mix(in srgb, var(--crimson) 0%, transparent); }
  100% { box-shadow: var(--why-shadow), 0 0 0 0   color-mix(in srgb, var(--crimson) 0%, transparent); }
}
.banner__why.is-hint { animation: whyPulse 1.5s ease-out 0s 3; }

.why-drawer {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  background: var(--aubergine);
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease;
}
.banner.is-why-open .why-drawer {
  grid-template-rows: 1fr;
  box-shadow: 0 24px 40px -18px rgba(36, 31, 43, 0.55);
}
.why-drawer__clip { overflow: hidden; }
.why-drawer__content {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.9rem, 5vw, 2.9rem) clamp(1.5rem, 4vw, 2.6rem);
}
.why-drawer__content h2 {
  margin: 0 0 1rem; font-family: var(--font-head); font-optical-sizing: auto;
  font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); font-weight: 600; color: var(--surface);
}
.why-drawer__content p {
  margin: 0 0 0.9rem; max-width: 66ch; line-height: 1.65;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: color-mix(in srgb, var(--paper) 82%, var(--aubergine));
}
.why-drawer__content p:last-child { margin-bottom: 0; }
.why-drawer__close {
  position: absolute; top: clamp(1rem, 2.5vw, 1.5rem); right: clamp(1rem, 3vw, 1.8rem);
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--paper) 32%, transparent); background: transparent;
  color: color-mix(in srgb, var(--paper) 75%, var(--aubergine)); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.why-drawer__close:hover { color: #fff; border-color: var(--crimson); background: color-mix(in srgb, var(--crimson) 24%, transparent); }
.why-drawer__close svg { width: 18px; height: 18px; }
/* mobile: tab drops into the banner column like the home pill */
@media (max-width: 767px) { .banner__why { position: static; transform: none; } }

/* ===============================================================
   THE TURN — bridge copy on the warm page, between hero and cards.
   =============================================================== */
.turn {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(3.5rem, 10vw, 6.5rem) 1.5rem clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.turn__q {
  margin: 0;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.turn__body {
  margin: 1rem auto 0;
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ===============================================================
   CARDS — stacked vertically (not a grid). Each card is collapsed
   by default (eyebrow + title + body visible); the header is a
   button that expands a panel revealing the visualisation.
   One open at a time (enforced in JS).
   =============================================================== */
.cards {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 7vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 10px 30px -22px rgba(36, 31, 43, 0.5);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  border-color: color-mix(in srgb, var(--crimson) 32%, var(--hairline));
  box-shadow: 0 16px 36px -22px rgba(36, 31, 43, 0.6);
}
/* Open card carries the crimson shared accent (left spine). */
.card.is-open {
  border-color: color-mix(in srgb, var(--crimson) 50%, var(--hairline));
  border-left-color: var(--crimson);
  border-left-width: 4px;
}

/* Header is the clickable toggle — full-width button reset. */
.card__header {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  padding-right: clamp(3.2rem, 6vw, 4rem);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.card__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card__title {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.2;
  color: var(--ink);
}
.card__body {
  display: block;
  margin-top: 0.65rem;
  max-width: 64ch;          /* keep lines readable even as the card widens */
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Chevron — rotates when the card opens. */
.card__chevron {
  position: absolute;
  top: clamp(1.25rem, 3vw, 1.7rem);
  right: clamp(1.25rem, 3vw, 1.7rem);
  width: 22px; height: 22px;
  color: var(--ink-soft);
  transition: transform 0.3s ease, color 0.18s ease;
}
.card__header:hover .card__chevron { color: var(--crimson); }
.card.is-open .card__chevron { transform: rotate(180deg); color: var(--crimson); }

/* Collapsible panel — animate height via grid-template-rows 0fr→1fr.
   The inner is hidden from tab order / AT until open. */
.card__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.card.is-open .card__panel { grid-template-rows: 1fr; }
.card__panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.35s;
}
.card.is-open .card__panel-inner { visibility: visible; }
/* Padding lives on a wrapper so 0fr fully collapses (no leftover height). */
.card__panel-inner > * { margin: 0; }
.card__panel-inner {
  padding: 0 clamp(1.5rem, 3vw, 2.2rem);
}
.card.is-open .card__panel-inner {
  padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.card__source {
  padding-top: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 45%, var(--page));
}

/* ===============================================================
   CARD VISUALISATIONS — hand-rolled SVG, palette tokens only.
   =============================================================== */
.viz { margin: 0.25rem 0 0.9rem; }
.viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz__caption {
  max-width: 64ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Card 01 — full end-to-end supply chain: Food Waste Index (described) +
   the separate FAO measure (13.3%). No fabricated total. */
.viz01 text { font-family: var(--font-body); }
/* segments: light crimson tint (Food Waste Index) + deep crimson (FAO) */
.viz01__fwi { fill: color-mix(in srgb, var(--crimson) 16%, var(--surface)); }
.viz01__fao { fill: color-mix(in srgb, var(--crimson) 78%, var(--ink)); }
.viz01__num   { font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600; font-size: 26px; }
.viz01__title { font-size: 16px; font-weight: 700; }
.viz01__name  { font-size: 14px; font-weight: 600; }
.viz01__sub   { font-size: 11.5px; }
.viz01__note  { font-size: 11px; font-style: italic; }
.viz01__fwi-text { fill: var(--ink); }
.viz01__fwi-sub  { fill: var(--ink-soft); }
.viz01__fao-text { fill: var(--surface); }
.viz01__fao-sub  { fill: color-mix(in srgb, var(--surface) 82%, var(--crimson)); }
.viz01__bracket { fill: none; stroke: color-mix(in srgb, var(--ink) 32%, var(--surface)); stroke-width: 1.5; }
.viz01__bracket-label { fill: var(--ink-soft); font-size: 11px; letter-spacing: 0.07em; }

/* Card 02 — two supply chains side by side; loss shown by circle size. */
.viz02 {
  display: flex;
  flex-wrap: wrap;                 /* stacks on narrow cards */
  gap: clamp(0.5rem, 2vw, 1.5rem);
  margin: 0 0 0.6rem;
}
.viz02__chain { flex: 1 1 240px; min-width: 0; }
.viz02__band { fill: color-mix(in srgb, var(--crimson) 9%, transparent); }
.viz02__line { stroke: color-mix(in srgb, var(--ink) 22%, var(--surface)); stroke-width: 2; }
.viz02__loss { fill: var(--crimson); }
.viz02__region {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}
.viz02__regionsub {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12px;
}
.viz02__stage {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.01em;
}

/* Card 03 — supply chain with an open dashed pre-harvest gap ("?"); the measured
   stretch reuses Card 01's pink (indices) + deep-crimson (FAO 13.3%) vocabulary. */
.viz03__measured { fill: color-mix(in srgb, var(--crimson) 16%, var(--surface)); }
.viz03__fao { fill: color-mix(in srgb, var(--crimson) 78%, var(--ink)); }
.viz03__fao-num {
  fill: var(--surface);
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 20px;
}
.viz03__fao-label {
  fill: var(--surface);
  font-family: var(--font-body);
  font-size: 10.5px;
}
.viz03__pre {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
}
.viz03__divider {
  stroke: color-mix(in srgb, var(--ink) 38%, var(--surface));
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.viz03__node { fill: color-mix(in srgb, var(--ink) 45%, var(--surface)); }
.viz03__q {
  fill: var(--crimson);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 34px;
}
.viz03__title {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}
.viz03__sub {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11.5px;
}
.viz03__tag,
.viz03__harvest {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
}
.viz03__pre-tag {
  fill: var(--crimson);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
}

/* Card 04 — coverage grid: a handful filled (measured) vs many empty. */
.viz04__title {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}
.viz04__filled { fill: var(--crimson); }
.viz04__empty,
.viz04__leg-empty {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 26%, var(--surface));
  stroke-width: 1.5;
}
.viz04__code {
  fill: var(--surface);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}
.viz04__legend {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
}

/* ===============================================================
   CLOSING — on the page background (not a card). Centred, ending on
   the single crimson LinkedIn CTA pill (inlined icon).
   =============================================================== */
.closing {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(4rem, 12vw, 7.5rem) 1.5rem;
  text-align: center;
  color: var(--surface);
  /* full-bleed dark canvas — bookends the experience with the hero */
  background: radial-gradient(135% 120% at 50% 32%,
    var(--aubergine) 0%,
    color-mix(in srgb, var(--aubergine) 70%, var(--ink)) 100%);
}
/* soft crimson glow to pull the eye to the close */
.closing::before {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: min(700px, 92%); height: 360px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--crimson) 22%, transparent) 0%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}
.closing__inner { position: relative; max-width: 660px; margin: 0 auto; }
.closing__statement {
  margin: 0;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--surface);
}
.closing__body {
  max-width: 54ch;
  margin: clamp(1.1rem, 2.6vw, 1.5rem) auto 0;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 80%, var(--aubergine));
}
/* The reflective question — the climax; weighted serif, primary white. */
.closing__prompt {
  max-width: 52ch;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.55rem);
  line-height: 1.4;
  color: var(--surface);
}
.cta-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(2rem, 5vw, 2.85rem);
  padding: 0.95rem 1.8rem;
  background: var(--crimson);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--crimson) 55%, transparent);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-linkedin:hover {
  background: color-mix(in srgb, var(--crimson) 88%, #000);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -8px color-mix(in srgb, var(--crimson) 65%, transparent);
}
.cta-linkedin__icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* ===============================================================
   STICKY COUNTER BAR — slim pill pinned centre-top. Hidden at the
   top of the page; opacity/transform are scrubbed by scroll (JS),
   so the hero number appears to shrink up into it. Floats on white
   --surface above the page; carries only the crimson tonnes figure.
   =============================================================== */
.sticky-bar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 55;                                 /* above banner (50), below skip-link (60) */
  transform: translateX(-50%) translateY(-100%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sticky-bar__inner {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem 0.55rem;
  background: var(--surface);
  border-radius: 0 0 999px 999px;              /* hangs from the top edge */
  box-shadow:
    0 10px 26px -10px rgba(36, 31, 43, 0.30),
    0 2px 6px  -3px  rgba(36, 31, 43, 0.14);
}
.sticky-bar__num {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1;
  color: var(--crimson);
}
.sticky-bar__label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* The hero number shrinks as it fades (scrubbed inline by JS). */
.counter__figure { transform-origin: 50% 45%; will-change: transform; }

/* ===============================================================
   HERO — full-bleed dark canvas. Depth comes from a token-only
   vignette (aubergine → ink at the edges); the figure is the one
   crimson accent, lifted by a soft crimson glow. Type recedes.
   =============================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 9vw, 6rem) 1.5rem;
  overflow: hidden;
  color: var(--surface);
  background: radial-gradient(135% 105% at 50% 40%,
    var(--aubergine) 0%,
    color-mix(in srgb, var(--aubergine) 70%, var(--ink)) 100%);
}
.hero__inner { max-width: 60ch; }

.hero__eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 60%, var(--aubergine));
}
.hero__title {
  margin: 0;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--paper) 92%, var(--aubergine));
}
.hero__sub {
  margin: 0.9rem auto 0;
  max-width: 42ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  color: color-mix(in srgb, var(--paper) 72%, var(--aubergine));
}

/* Counter — the figure is the loud moment (crimson, with depth). */
.counter { margin: clamp(2rem, 6vw, 3.25rem) 0 0; }

.counter__figure {
  position: relative;
  display: inline-flex;
  justify-content: center;
  isolation: isolate;
}
/* Soft crimson aura behind the number — depth without a new colour. */
.counter__glow {
  position: absolute;
  z-index: -1;
  inset: -34% -14%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--crimson) 40%, transparent) 0%,
    transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  animation: counter-breathe 4.5s ease-in-out infinite;
}
@keyframes counter-breathe {
  0%, 100% { opacity: 0.78; transform: scale(0.99); }
  50%      { opacity: 1;    transform: scale(1.03); }
}
.counter__num {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 1rem + 15vw, 10.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--crimson);
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 65%, transparent),
    0 20px 55px color-mix(in srgb, var(--crimson) 42%, transparent);
}
.counter__unit {
  margin: 0.7rem 0 0;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--paper) 84%, var(--aubergine));
}
.counter__meals {
  margin: 0.85rem 0 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  color: color-mix(in srgb, var(--paper) 66%, var(--aubergine));
}
/* Scroll affordance — pinned to the bottom of the hero; fades on scroll (JS). */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--paper) 64%, var(--aubergine));
  transition: color 0.15s ease;
}
.hero__scroll:hover { color: var(--surface); }
.hero__scroll-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll-arrow {
  width: 22px;
  height: 22px;
  animation: scroll-bounce 1.9s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.hero__source {
  margin: 1.6rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--paper) 54%, var(--aubergine));
}

/* ===============================================================
   FOOTER — quiet dark band at the very bottom; campaign message +
   co-branding lockup. Type is palette-derived on the dark canvas.
   =============================================================== */
.footer {
  /* deep near-black — distinct from the aubergine closing above; grounds the page */
  background: color-mix(in srgb, var(--ink) 82%, #000);
  color: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; }

/* Top row: message (+ optional contact column); wraps on mobile. */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(1.6rem, 5vw, 3rem) clamp(2rem, 6vw, 4rem);
}
.footer__message { flex: 1 1 420px; max-width: 640px; }
.footer__lead {
  margin: 0;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem);
  line-height: 1.35;
  color: var(--surface);
}
.footer__body {
  margin: clamp(0.9rem, 2vw, 1.15rem) 0 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--paper) 74%, var(--aubergine));
}
.footer__body strong { color: var(--surface); font-weight: 600; }

/* Contact column (optional) */
.footer__contact { flex: 0 0 auto; }
.footer__contact-title {
  margin: 0 0 0.75rem;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 56%, var(--aubergine));
}
.footer__contact-list { list-style: none; margin: 0; padding: 0; }
.footer__contact-list li { margin: 0 0 0.5rem; }
.footer__contact-list li:last-child { margin-bottom: 0; }
.footer__contact-list a {
  color: var(--surface);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer__contact-list a:hover { color: var(--crimson); border-color: var(--crimson); }

/* Bottom bar — co-branding lockup on a floating white chip + meta line. */
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 1.75rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}
.footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.5rem);
}
/* Reversed (white) AxiaOrigin is the stacked mark, so give it more height
   than the horizontal ValuesMove wordmark to balance optical weight. */
.footer__lockup .brand--axia   img { height: 58px; }
.footer__lockup .brand--values img { height: 38px; }
.footer__lockup .brand-divider {
  height: 44px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);   /* visible on dark */
}
.footer__meta {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--paper) 56%, var(--aubergine));
}

/* ===============================================================
   Motion — honour reduced-motion globally.
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}