/* ==========================================================================
   Launchpad Studio Senegal — a CATAL1.5°T Initiative programme
   Visual system: CATAL1.5°T Brand book (March 2025) + Image guide (June 2025)
   Primary colours p.30 · Secondary p.31 · Typography p.33-34 · Key visual p.37-38
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Primary colours — brand book p.30 */
  --lg:    #CFFF91;   /* Light Green  C30 M0  Y50  K0  */
  --dg:    #063B27;   /* Dark Green   C92 M46 Y83  K60 */
  --dp:    #42138D;   /* Dark Purple  C92 M100 Y0  K0  */
  --white: #FFFFFF;

  /* Secondary colours — brand book p.31 */
  --lp:    #D4A7FF;   /* Light Purple */
  --grey:  #DDDAEB;   /* Grey */
  --blue:  #81A1DE;   /* Blue */

  /* Working tints, derived only from the above */
  --lg-25: #F3FFE4;
  --lg-45: #E7FFCE;
  --lg-70: #DBFFB4;
  --dg-80: #245140;
  --dg-60: #3A6455;
  --dg-40: #7B9C8F;
  --dp-10: #ECE7F4;

  /* Semantic surfaces */
  --surface:        var(--white);
  --surface-soft:   var(--lg-25);
  --surface-green:  var(--lg);
  --surface-dark:   var(--dg);
  --surface-purple: var(--dp);

  /* Semantic text */
  --on-light:       var(--dg);
  --on-light-muted: var(--dg-60);
  --on-dark:        var(--white);
  --on-dark-muted:  #B9CFC5;
  --on-green:       var(--dg);
  --on-green-muted: var(--dg-80);

  /* Lines */
  --line:      rgba(6,59,39,.14);
  --line-soft: rgba(6,59,39,.08);
  --line-dark: rgba(255,255,255,.18);

  /* Type scale — Chesna Grotesk, character spacing 0 (brand book p.34) */
  --fs-xs:   clamp(.78rem, .76rem + .10vw, .86rem);
  --fs-sm:   clamp(.88rem, .85rem + .16vw, .98rem);
  --fs-base: clamp(1rem, .97rem + .18vw, 1.09rem);
  --fs-md:   clamp(1.14rem, 1.07rem + .34vw, 1.36rem);
  --fs-lg:   clamp(1.38rem, 1.22rem + .74vw, 1.95rem);
  --fs-xl:   clamp(1.78rem, 1.45rem + 1.55vw, 3.05rem);
  --fs-2xl:  clamp(2.15rem, 1.62rem + 2.45vw, 4.00rem);

  /* Spacing (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radius — the brand is built on stadium shapes and generous rounding */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-2xl:  64px;
  --r-pill: 999px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 76px;

  /* Motion */
  --e-out:    cubic-bezier(.16,1,.3,1);
  --e-spring: cubic-bezier(.34,1.4,.64,1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 560ms;

  /* Elevation — kept soft, the brand relies on colour blocks not shadows */
  --shadow-1: 0 2px 10px rgba(6,59,39,.06);
  --shadow-2: 0 10px 30px rgba(6,59,39,.10);
  --shadow-3: 0 24px 60px rgba(6,59,39,.14);

  --z-nav: 60; --z-modal: 100;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body {
  /* Chesna Grotesk is the brand font. Arial is the sanctioned substitute
     where it is not available (brand book p.34). Drop licensed WOFF2 files
     into assets/fonts/ and uncomment the @font-face block below. */
  font-family: "Chesna Grotesk", Arial, Helvetica, "Helvetica Neue", sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;              /* brand book p.34: line spacing 155% */
  letter-spacing: 0;              /* brand book p.34: character spacing 0 */
  color: var(--on-light);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
/*
@font-face { font-family:"Chesna Grotesk"; src:url("../fonts/ChesnaGrotesk-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Chesna Grotesk"; src:url("../fonts/ChesnaGrotesk-Medium.woff2")  format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Chesna Grotesk"; src:url("../fonts/ChesnaGrotesk-Bold.woff2")    format("woff2"); font-weight:700; font-display:swap; }
*/
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; line-height: 1.14; text-wrap: balance; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--dp); outline-offset: 3px; border-radius: 6px; }
.section--dark :focus-visible, .panel-dark :focus-visible { outline-color: var(--lg); }
::selection { background: var(--lg); color: var(--dg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: var(--z-modal);
  background: var(--dp); color: var(--white); padding: 12px 22px;
  border-radius: var(--r-pill); font-weight: 700;
  transition: top var(--t-base) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--soft { background: var(--surface-soft); }
.section--dark { background: var(--dg); color: var(--on-dark); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* ---------- 4. The pill: the brand's signature device ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 16px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3;
  background: var(--lg); color: var(--dg);
}
.pill--dg { background: var(--dg); color: var(--lg); }
.pill--dp { background: var(--dp); color: var(--white); }
.pill--lp { background: var(--lp); color: var(--dg); }
.pill--blue { background: var(--blue); color: var(--dg); }
.pill--grey { background: var(--grey); color: var(--dg); }
.pill--outline { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Highlighted word inside a running headline (brand book p.4, p.34) */
.hl {
  position: relative; display: inline-block; z-index: 0;
  padding: 0 .12em; margin: 0 -.04em; border-radius: var(--r-pill);
  color: var(--dg);
}
/* The pill hugs the word: the inset is positive, so it pulls in from the line
   box instead of bleeding past it. Device unchanged, proportions tightened. */
.hl::before {
  content: ""; position: absolute; inset: .155em 0 .175em 0; z-index: -1;
  background: var(--lg); border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms var(--e-out);
  transition-delay: var(--hd, 0ms);
}
.is-in .hl::before, .hl.is-in::before { transform: scaleX(1); }
.hl--dg { color: var(--lg); } .hl--dg::before { background: var(--dg); }
.hl--dp { color: var(--white); } .hl--dp::before { background: var(--dp); }
.hl--lp { color: var(--dg); } .hl--lp::before { background: var(--lp); }
.hl--blue { color: var(--dg); } .hl--blue::before { background: var(--blue); }

/* ---------- 5. Typography helpers ---------- */
.h-display { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.20; }
.h-section { font-size: var(--fs-xl); font-weight: 700; line-height: 1.14; }
.h-card    { font-size: var(--fs-md); font-weight: 700; line-height: 1.24; }
.statement { font-size: var(--fs-lg); font-weight: 400; line-height: 1.42; }
.lead { font-size: var(--fs-md); font-weight: 400; line-height: 1.5; color: var(--on-light-muted); max-width: 64ch; }
.section--dark .lead { color: var(--on-dark-muted); }
.muted { color: var(--on-light-muted); }
.section--dark .muted { color: var(--on-dark-muted); }
.small { font-size: var(--fs-sm); }
.tiny  { font-size: var(--fs-xs); }
.section-head { max-width: 70ch; margin-bottom: clamp(32px, 4.5vw, 60px); }
.section-head .h-section { margin-top: var(--s-4); }
.section-head .lead { margin-top: var(--s-4); }

/* ---------- 6. Buttons ---------- */
.btn {
  --btn-bg: var(--dp); --btn-fg: var(--white);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3); min-height: 54px; padding: 14px 28px;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(66,19,141,.28); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--green { --btn-bg: var(--lg); --btn-fg: var(--dg); }
.btn--green:hover { box-shadow: 0 10px 26px rgba(6,59,39,.20); }
.btn--dark { --btn-bg: var(--dg); --btn-fg: var(--lg); }
.btn--dark:hover { box-shadow: 0 10px 26px rgba(6,59,39,.28); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--dg); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--outline:hover { --btn-bg: var(--dg); --btn-fg: var(--lg); box-shadow: none; }
.section--dark .btn--outline, .panel-dark .btn--outline { --btn-fg: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.section--dark .btn--outline:hover, .panel-dark .btn--outline:hover { --btn-bg: var(--lg); --btn-fg: var(--dg); box-shadow: none; }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: var(--fs-xs); }
.btn--lg { min-height: 62px; padding: 18px 36px; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform var(--t-base) var(--e-out); }
.btn:hover .ico--arrow { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Circular icon button — used on cards and the FAQ */
.circ {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dg); color: var(--lg);
  transition: transform var(--t-base) var(--e-spring), background-color var(--t-base) var(--e-out);
}
.circ svg { width: 18px; height: 18px; }
.circ--dp { background: var(--dp); color: var(--white); }

/* ---------- 7. Navigation ---------- */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-nav);
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-slow) var(--e-out), border-color var(--t-slow) var(--e-out);
}
.nav.is-stuck { border-bottom-color: var(--line-soft); box-shadow: 0 2px 20px rgba(6,59,39,.05); }
/* The bar is full-bleed. Inside the 1240 container the French labels push the
   Apply button off the row between 980 and 1240px; full width removes the squeeze. */
.nav > .container { max-width: 100%; }
.nav__inner { display: flex; align-items: center; gap: var(--s-5); width: 100%; min-width: 0; }

/* Logo slot. The CATAL1.5°T wordmark must be the supplied asset:
   the brand book (p.8) forbids changing or reproducing it. */
/* The brand block may compress rather than push the burger off the row.
   Below the 375px floor this is what keeps the menu reachable. */
.nav__brand { display: flex; align-items: center; gap: 0; flex: 0 1 auto; min-width: 0; min-height: 44px; }
.logo-slot { display: flex; align-items: center; height: 30px; }
.logo-slot img { height: 100%; width: auto; }

/* Programme lockup: the CATAL1.5 T wordmark, its protection zone, a hairline,
   then the programme name. The brand book forbids altering the logo, so the
   zone is held with padding and the logo is only ever scaled, never redrawn.
   The clear zone is half the logo height on each side of the rule and scales
   with the logo, so the ratio holds at every width. The logo never shrinks and
   never distorts: only the programme name gives way when the row is short.
   The name is present at every width, never hidden, never truncated. */
.nav__brand .logo-slot { --logo-h: 26px; height: var(--logo-h); padding-inline-end: calc(var(--logo-h) / 2); flex: none; }
.nav__brand .logo-slot img { flex: none; width: auto; height: 100%; max-width: none; }
.nav__prog {
  display: block; flex: none;
  padding-inline-start: 13px;
  border-inline-start: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; color: var(--on-light);
  line-height: 1.18; max-width: 16ch; text-wrap: balance;
}
/* Mid widths: the name still sits beside the logo, on two lines. */
@media (max-width: 899px) {
  .nav__brand .logo-slot { --logo-h: 22px; }
  .nav__prog { padding-inline-start: 11px; font-size: .72rem; max-width: 12ch; }
}
/* Below 480px a 6.5:1 wordmark, the name, the language pair and the menu
   button cannot share one row without deforming the logo or clipping the
   name. The name moves under the logo and stays part of the same lockup:
   present at every width, on one line, never truncated. */
@media (max-width: 479px) {
  .nav__brand { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav__brand .logo-slot { --logo-h: 19px; padding-inline-end: 0; }
  .nav__prog {
    padding-inline-start: 0; border-inline-start: 0;
    font-size: .72rem; max-width: none; white-space: nowrap;
  }
}
.logo-slot__missing {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border: 1.5px dashed var(--dg-40); border-radius: var(--r-sm);
  font-size: .68rem; font-weight: 700; color: var(--dg-60); white-space: nowrap;
}

.nav__links { display: none; gap: var(--s-2); margin-inline-start: auto; }
.nav__link {
  position: relative; font-size: var(--fs-sm); font-weight: 500; color: var(--on-light);
  padding: 11px 11px; border-radius: var(--r-pill); white-space: nowrap;  /* 44px target */
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.nav__link:hover { background: var(--lg-45); }
.nav__link[aria-current="true"] { background: var(--lg); font-weight: 700; }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); margin-inline-start: auto; }
.nav__links + .nav__actions { margin-inline-start: 0; }
.nav__cta { display: none; }

/* Language selector — small pills, as on catalist-initiative.eco (p.45) */
.lang { display: inline-flex; align-items: center; gap: 6px; }
.lang__btn {
  min-width: 52px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--on-light);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.lang__btn[aria-pressed="true"] { background: var(--lg); box-shadow: none; }
.lang__btn:hover:not([aria-pressed="true"]) { background: var(--lg-45); }
/* The label collapses to the ISO code at every width. The full word stays in
   the DOM, so the accessible name is still "English" / "Francais", and the
   selector keeps one fixed width whichever language is active. */
.lang__btn { min-width: 46px; padding: 8px 12px; font-size: 0; }
@media (max-width: 419px) { .lang__btn { min-width: 44px; padding: 8px 6px; } }
.lang__btn::before { font-size: .82rem; }
.lang__btn[data-set-lang="en"]::before { content: "EN"; }
.lang__btn[data-set-lang="fr"]::before { content: "FR"; }

.nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--dg); }
.nav__burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background-color var(--t-fast); }
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--e-out), top var(--t-base) var(--e-out);
}
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  background: var(--lg); display: flex; flex-direction: column; justify-content: center; gap: var(--s-2);
  padding: var(--nav-h) var(--gutter) var(--s-7);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), visibility var(--t-base);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { font-size: var(--fs-lg); font-weight: 700; color: var(--dg); padding-block: 10px; border-bottom: 1px solid rgba(6,59,39,.16); }
.mobile-menu .btn { margin-top: var(--s-5); }
/* The inline link row appears only once the logo, its protection zone, the
   programme name and the full French labels all fit without anything giving
   way. Below that the links live in the burger menu; the programme name never
   does. */
@media (min-width: 1280px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } .nav__burger { display: none; } }

/* ---------- 8. Key visual (target rings, brand book p.37-38) ---------- */
.kv { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kv svg { width: 100%; height: 100%; }
.kv--spin svg { animation: kvSpin 90s linear infinite; transform-origin: center; }
@keyframes kvSpin { to { transform: rotate(360deg); } }

/* ---------- 9. Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 48px)); padding-bottom: clamp(40px, 6vw, 80px); }
.hero__panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--lg); border-radius: var(--r-xl);
  padding: clamp(32px, 5.5vw, 88px);
}
.hero__panel > *:not(.kv) { position: relative; z-index: 1; }
.hero__panel .kv { z-index: 0; }
.hero__claim { margin-bottom: var(--s-5); }
.hero h1 { max-width: 22ch; }
.hero__sub { margin-top: var(--s-5); max-width: 58ch; font-size: var(--fs-md); color: var(--on-green-muted); }
.hero__actions { margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--on-green-muted); max-width: 52ch; }

/* Programme identity strip under the hero */
.progstrip { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .progstrip { grid-template-columns: repeat(4, 1fr); } }
.progstrip__item { background: var(--white); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
.progstrip__k { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--on-light-muted); }
.progstrip__v { display: block; margin-top: 4px; font-size: var(--fs-md); font-weight: 700; color: var(--dg); }

/* ---------- 10. Panels & cards ---------- */
.panel { border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); position: relative; overflow: hidden; isolation: isolate; }
.panel-green  { background: var(--lg);  color: var(--dg); }
.panel-soft   { background: var(--lg-25); color: var(--dg); }
.panel-dark   { background: var(--dg);  color: var(--white); }
.panel-purple { background: var(--dp);  color: var(--white); }
.panel-grey   { background: var(--grey); color: var(--dg); }
.panel > *:not(.kv) { position: relative; z-index: 1; }
.panel .kv { z-index: 0; }

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg);
  background: var(--lg-25); color: var(--dg);
  transition: transform var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.card:hover { transform: translateY(-4px); background: var(--lg-45); }
.card--green { background: var(--lg); }
.card--green:hover { background: var(--lg-70); }
.card__body { font-size: var(--fs-sm); color: var(--on-green-muted); }
.card__foot { margin-top: auto; padding-top: var(--s-4); }
.card__index {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dg); color: var(--lg); font-weight: 700; font-size: var(--fs-sm);
}

/* ---------- 11. Stats ---------- */
.stats { display: grid; gap: var(--s-3); }
@media (min-width: 660px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--lg-25); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 32px); }
.stat__v { display: block; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 700; line-height: 1; color: var(--dg); }
.stat__v .u { color: var(--dp); }
.stat__k { display: block; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--on-green-muted); }
.stat__src { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--dg-60); }

/* ---------- 12. Is / is not ---------- */
.contrast-pair { display: grid; gap: var(--s-4); }
@media (min-width: 860px) { .contrast-pair { grid-template-columns: 1fr 1fr; } }
.panel ul.marks { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.marks li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); line-height: 1.5; }
.marks li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.panel-grey .marks li svg { color: var(--dg-60); }
.panel-dark .marks li { color: rgba(255,255,255,.92); }
.panel-dark .marks li svg { color: var(--lg); }

/* ---------- 13. Sector layers ---------- */
.layer { display: grid; gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.layer:last-child { border-bottom: 1px solid var(--line); }
.layer__idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--lg); color: var(--dg); font-size: var(--fs-md); font-weight: 700;
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.layer:hover .layer__idx { background: var(--dg); color: var(--lg); }
.layer__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 800px) { .layer { grid-template-columns: 92px 1fr; gap: var(--s-6); align-items: start; padding: var(--s-6) 0; } }

/* ---------- 14. Phase timeline ---------- */
.timeline { position: relative; margin-top: var(--s-6); }
.timeline__rail { position: absolute; left: 25px; top: 10px; bottom: 10px; width: 3px; background: var(--lg); border-radius: 3px; overflow: hidden; }
.timeline__rail::after {
  content: ""; position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--prog, 0));
  background: var(--dp); transition: transform 120ms linear;
}
.phase { position: relative; padding-left: 72px; padding-bottom: var(--s-6); }
.phase:last-child { padding-bottom: 0; }
.phase__dot {
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: var(--lg); color: var(--dg); box-shadow: 0 0 0 5px var(--white);
  transition: background-color var(--t-slow) var(--e-out), color var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-spring);
}
.phase.is-lit .phase__dot { background: var(--dp); color: var(--white); transform: scale(1.05); }
/* Phase label and the quarter it falls in, per the kick-off deck timeline */
.phase__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.phase__title { margin: 10px 0 var(--s-2); font-size: var(--fs-md); font-weight: 700; }
.phase__body { font-size: var(--fs-sm); color: var(--on-light-muted); max-width: 58ch; }
.section--dark .phase__body { color: var(--on-dark-muted); }
.section--dark .phase__dot { box-shadow: 0 0 0 5px var(--dg); }
.section--dark .timeline__rail { background: var(--dg-80); }
.section--dark .timeline__rail::after { background: var(--lg); }
@media (min-width: 960px) {
  .timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); margin-top: var(--s-8); }
  .timeline__rail { left: 0; right: 0; top: 25px; bottom: auto; width: auto; height: 3px; }
  .timeline__rail::after { transform-origin: left; transform: scaleX(var(--prog, 0)); }
  .phase { padding-left: 0; padding-top: 74px; padding-bottom: 0; }
  .phase__dot { top: 0; left: 0; }
}

/* ---------- 15. Checklists ---------- */
.checklist { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .checklist--2 { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); } }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; }
.checklist li .mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dg); color: var(--lg); margin-top: 1px;
}
.panel-dark .checklist li .mark, .section--dark .checklist li .mark { background: var(--lg); color: var(--dg); }
.panel-green .checklist li .mark { background: var(--dg); color: var(--lg); }
.checklist li .mark svg { width: 13px; height: 13px; }

/* ---------- 16. Eligibility self-assessment ---------- */
.check__shell { background: var(--white); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-2); }
.check__progress { height: 6px; background: var(--lg-45); position: relative; }
.check__progress span {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: var(--dp); transition: transform var(--t-slow) var(--e-out);
}
.check__body { padding: clamp(26px, 4vw, 52px); }
.check__q { margin: var(--s-4) 0 var(--s-5); font-size: var(--fs-lg); font-weight: 700; line-height: 1.22; }
.check__opts { display: grid; gap: var(--s-3); }
.opt {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; text-align: left;
  min-height: 58px; padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--lg-25); color: var(--dg); font-size: var(--fs-sm); line-height: 1.45;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
  touch-action: manipulation;
}
.opt:hover { background: var(--lg-45); }
.opt:active { transform: scale(.99); }
.opt.is-picked { background: var(--lg); box-shadow: inset 0 0 0 2px var(--dg); }
.opt__box {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 0;
  box-shadow: inset 0 0 0 1.5px var(--dg-40); display: grid; place-items: center;
  transition: background-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.opt.is-picked .opt__box { background: var(--dg); box-shadow: none; }
.opt__box svg { width: 12px; height: 12px; color: var(--lg); opacity: 0; transition: opacity var(--t-fast); }
.opt.is-picked .opt__box svg { opacity: 1; }
.check__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); }
.link-btn {
  font-size: var(--fs-sm); font-weight: 700; color: var(--on-light-muted); min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px; padding-inline: 6px;
  transition: color var(--t-fast) var(--e-out);
}
.link-btn:hover { color: var(--dp); }
.link-btn[hidden] { display: none; }

.result { display: none; }
.result.is-shown { display: block; }
.result__title { margin: var(--s-4) 0 var(--s-3); font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.result__text { font-size: var(--fs-sm); color: var(--on-light-muted); max-width: 62ch; line-height: 1.6; }
.result__score { display: flex; align-items: baseline; gap: 10px; margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.result__score b { font-size: var(--fs-xl); font-weight: 700; line-height: 1; color: var(--dp); }
.result__gaps { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.result__gaps li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--on-light-muted); }
.result__gaps svg { width: 18px; height: 18px; flex: none; color: var(--dp); margin-top: 3px; }
.result__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.result__disclaimer { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--on-light-muted); max-width: 60ch; }

/* ---------- 17. FAQ — light green pill rows with a plus circle (p.45) ---------- */
.faq { display: grid; gap: var(--s-3); }
.faq__item { border-radius: var(--r-lg); background: var(--lg-25); overflow: hidden; transition: background-color var(--t-base) var(--e-out); }
.faq__item:hover { background: var(--lg-45); }
.faq__item:has(.faq__q[aria-expanded="true"]) { background: var(--lg); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left; padding: 18px clamp(20px, 2.4vw, 28px); min-height: 64px;
  font-size: var(--fs-base); font-weight: 700; color: var(--dg);
}
.faq__q .circ { width: 36px; height: 36px; }
.faq__q .circ svg { transition: transform var(--t-base) var(--e-out); }
.faq__q[aria-expanded="true"] .circ svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--e-out); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 clamp(20px, 2.4vw, 28px) 24px; font-size: var(--fs-sm); color: var(--on-green-muted); max-width: 74ch; line-height: 1.6; }

/* ---------- 18. Figures ---------- */
.figure { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--lg-25); aspect-ratio: 16 / 11; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--placeholder { display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); }
.figure--placeholder p { color: var(--dg-60); font-size: var(--fs-xs); padding: var(--s-5); text-align: center; }
/* Photo credit. A licence that asks for attribution gets it, legibly, under
   the image. Small but never below the AA contrast floor. */
.figure__credit {
  display: block; margin-top: var(--s-2);
  font-size: var(--fs-xs); line-height: 1.4; color: var(--on-light-muted);
}
/* Carries a 44px target like every other link on the page */
a.figure__credit {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 2px;
}
a.figure__credit:hover { color: var(--dp); }

/* No photo supplied: the figure carries the brand key visual on light green.
   It reads as a designed block rather than an empty slot, and a photo takes
   over the moment config.photos names one. */
.figure--kvfill { background: var(--lg); box-shadow: none; }
/* Key-visual collage crop: photo masked into the target ring (brand book p.39-41) */
.figure--kv { border-radius: var(--r-xl); }
.figure--kv img { -webkit-mask-image: var(--kv-mask); mask-image: var(--kv-mask); -webkit-mask-size: cover; mask-size: cover; }

/* ---------- 19. Donor & partner bar (brand book p.16-18) ---------- */
.logobar { background: var(--white); padding-block: clamp(28px, 4vw, 44px); }
.logobar__inner { display: grid; gap: 0; }
/* Three labelled levels, stacked: funders, implementers, operator. Stacking
   rather than columns is what makes the hierarchy readable, and it holds at
   every width without the labels orphaning from their logos. */
.logobar__row {
  display: grid; gap: var(--s-3) var(--s-5); align-items: center;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.logobar__row:first-child { border-top: 0; }
@media (min-width: 720px) { .logobar__row { grid-template-columns: minmax(0, 15rem) 1fr; } }
.logobar__label { font-size: var(--fs-xs); color: var(--on-light-muted); line-height: 1.35; }
/* A logo that carries an outbound link. Inside the attribution bar it holds a
   44px target of its own; inside a sized logo slot it fills the slot, so the
   image keeps the height the slot sets rather than falling back to natural size. */
.logobar__link {
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm); transition: opacity var(--t-fast) var(--e-out);
}
.logobar .logobar__link { min-height: 44px; }
.logo-slot > .logobar__link { height: 100%; }
.logobar__link:hover { opacity: .72; }
.logobar__logos { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; }
/* Per-logo height is set from config.logoScale in app.js, so donors and
   partners hold the 100% / 80% ratio by optical area (brand book p.16).
   These values are the pre-load fallback and the no-JS rendering. */
.logobar__logos img { width: auto; height: 46px; max-width: 100%; }

/* ---------- 20. Footer ---------- */
.footer { background: var(--grey); color: var(--dg); padding-block: var(--s-7) var(--s-5); font-size: var(--fs-sm); }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7); } }
.footer h4 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s-4); }
.footer ul { display: grid; gap: 0; }
/* Footer links carry a 44px target rather than the bare 18px text box */
.footer ul a, .footer a#contactMail { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer a { color: var(--dg-80); transition: color var(--t-fast) var(--e-out); }
.footer a:hover { color: var(--dp); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(6,59,39,.12);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--dg-60);
}

/* ---------- 22. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 680ms var(--e-out), transform 680ms var(--e-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 25. Dark surfaces: one place, every text token ----------
   Any element that paints a dark ground must re-point the text tokens,
   otherwise light-surface colours leak onto it. */
.section--dark, .panel-dark, .panel-purple { color: var(--on-dark); }
.section--dark .lead,        .panel-dark .lead,        .panel-purple .lead,
.section--dark .muted,       .panel-dark .muted,       .panel-purple .muted,
.section--dark .card__body,  .panel-dark .card__body,  .panel-purple .card__body,
.section--dark .phase__body, .panel-dark .phase__body, .panel-purple .phase__body,
.section--dark .result__text,.panel-dark .result__text,.panel-purple .result__text,
.section--dark .link-btn,    .panel-dark .link-btn,    .panel-purple .link-btn {
  color: var(--on-dark-muted);
}
.section--dark .link-btn:hover, .panel-dark .link-btn:hover, .panel-purple .link-btn:hover { color: var(--lg); }
.section--dark .stat, .panel-dark .stat, .panel-purple .stat { background: rgba(255,255,255,.07); }
.section--dark .stat__v, .panel-dark .stat__v { color: var(--white); }
.section--dark .stat__v .u, .panel-dark .stat__v .u { color: var(--lg); }
.section--dark .stat__k, .panel-dark .stat__k,
.section--dark .stat__src, .panel-dark .stat__src { color: var(--on-dark-muted); }
.section--dark .layer, .panel-dark .layer { border-color: var(--line-dark); }
.section--dark .pill--outline, .panel-dark .pill--outline, .panel-purple .pill--outline { color: var(--on-dark); }

/* ---------- 23. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hl::before { transform: scaleX(1) !important; }
  .kv--spin svg { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- 24. Print ---------- */
@media print {
  .nav, .mobile-menu, .check, .btn-row { display: none !important; }
  body { color: #000; background: #fff; }
  .panel-dark, .panel-green, .panel-purple, .section--dark, .hero__panel, .footer { background: #fff !important; color: #000 !important; }
  .hl::before { display: none; }
}