@charset "UTF-8";
/* ==========================================================================
   AISESA — Dark Edition
   Sleek, near-black palette with AISESA green as the only accent.
   ========================================================================== */

:root {
  --color-primary: #5CAD59;
  --color-primary-dark: #3f8a3a;
  --color-primary-light: #8ecc89;
  --color-primary-glow: rgba(63, 138, 58, 0.45);
  --color-primary-faint: rgba(92, 173, 89, 0.10);

  --color-bg: #ffffff;
  --color-bg-2: #f6f9f5;
  --color-bg-3: #eef2ec;
  --color-bg-line: #e1e8df;

  --color-text: #1a1f1a;
  --color-text-muted: #5a665a;
  --color-text-faint: #98a596;

  --color-border: rgba(26, 31, 26, 0.10);
  --color-border-strong: rgba(26, 31, 26, 0.22);

  --shadow-glow: 0 0 40px rgba(92, 173, 89, 0.18);
  --shadow-soft: 0 20px 60px rgba(26, 31, 26, 0.08);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  --container: 1280px;
  --container-narrow: 880px;

  --font-serif: "Roboto Slab", "Roboto", Georgia, serif;
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --transition: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--color-bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle ambient grain to give the black depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(92, 173, 89, 0.06), transparent 70%),
    radial-gradient(ellipse 80% 40% at 100% 100%, rgba(92, 173, 89, 0.04), transparent 70%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
button { font: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  color: var(--color-text);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; }
.lead {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  max-width: 64ch;
  line-height: 1.55;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-primary);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}
section { padding: 120px 0; position: relative; z-index: 1; }
section.tight { padding: 80px 0; }

@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 16px; }
  section { padding: 64px 0; }
  section.tight { padding: 48px 0; }
  h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
  .landing-copy h1 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
}

@media (max-width: 375px) {
  .container, .container-narrow { padding: 0 12px; }
  h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
}

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid { gap: 16px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #061106;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  min-height: 44px;
}
@media (max-width: 480px) {
  .btn { padding: 12px 20px; font-size: 14px; }
}
.btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #061106;
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--color-primary-glow);
}
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-outline:hover {
  background: rgba(92, 173, 89, 0.06);
  border-color: var(--color-primary);
  color: var(--color-text);
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text);
  padding: 14px 0;
}
.btn-ghost:hover { color: var(--color-primary-dark); background: transparent; box-shadow: none; transform: none; }
.arrow::after { content: "→"; transition: transform var(--transition); }
.btn:hover .arrow::after, a:hover.arrow::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--color-border);
  height: 60px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
  height: 100%;
}

@media (max-width: 1000px) {
  .header-inner {
    padding: 10px 16px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 8px 12px;
    gap: 8px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .brand {
    gap: 8px;
  }
}

.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 600px) { .brand-logo { height: 36px; } }

.brand-icon {
  height: 36px;
  width: auto;
  display: block;
}
@media (max-width: 600px) { .brand-icon { height: 30px; } }


.primary-nav { display: flex; align-items: center; gap: 4px; }
.primary-nav > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0; padding: 0;
}
.primary-nav a, .primary-nav .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
  border-radius: 999px;
  background: none;
  border: none;
  transition: color var(--transition), background var(--transition);
  min-height: 40px;
}
@media (max-width: 480px) {
  .primary-nav a, .primary-nav .nav-toggle {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
  }
}
.primary-nav a:hover, .primary-nav .nav-toggle:hover {
  color: var(--color-text);
  background: rgba(26, 31, 26, 0.05);
  text-decoration: none;
}
.primary-nav a.is-active { color: var(--color-primary-dark); font-weight: 600; }

/* ---------- Knowledge Hub: popped-out toolbar tab ---------- */
.primary-nav a.nav-knowledge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px;
  padding: 9px 18px 9px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #f5a87b;
  background: linear-gradient(135deg, rgba(217, 117, 67, 0.18) 0%, rgba(217, 117, 67, 0.10) 100%);
  border: 1px solid rgba(217, 117, 67, 0.35);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 4px 16px rgba(217, 117, 67, 0.10);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.primary-nav a.nav-knowledge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d97543;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(217, 117, 67, 0.6);
  animation: nav-knowledge-pulse-dark 2.4s ease-out infinite;
}
.primary-nav a.nav-knowledge:hover {
  background: #d97543;
  color: #0d0a07;
  border-color: #d97543;
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(217, 117, 67, 0.40);
}
.primary-nav a.nav-knowledge:hover::before { background: #0d0a07; box-shadow: none; animation: none; }
@keyframes nav-knowledge-pulse-dark {
  0%   { box-shadow: 0 0 0 0   rgba(217, 117, 67, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(217, 117, 67, 0); }
  100% { box-shadow: 0 0 0 0   rgba(217, 117, 67, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav a.nav-knowledge::before { animation: none; }
}

/* ---------- Knowledge Hub homepage popup teaser ---------- */
.hub-teaser {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #15110a;
  color: #f0e7d6;
  border: 1px solid #2a2218;
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(217, 117, 67, 0.18);
  font-family: "Source Serif Pro", Georgia, serif;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.hub-teaser.is-visible { opacity: 1; transform: translateY(0); }
.hub-teaser .hub-teaser-kicker {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d97543;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hub-teaser .hub-teaser-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d97543;
  box-shadow: 0 0 0 0 rgba(217, 117, 67, 0.6);
  animation: nav-knowledge-pulse-dark 2.4s ease-out infinite;
}
.hub-teaser .hub-teaser-title {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #f0e7d6;
}
.hub-teaser .hub-teaser-meta {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: #8a7d68;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.hub-teaser .hub-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #f0e7d6;
  text-decoration: none;
  border-bottom: 1px solid #d97543;
  padding-bottom: 2px;
  transition: color 200ms ease;
}
.hub-teaser .hub-teaser-cta:hover { color: #d97543; }
.hub-teaser-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: #8a7d68;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, color 200ms ease;
}
.hub-teaser-close:hover { background: #1f1812; color: #f0e7d6; }
@media (max-width: 600px) {
  .hub-teaser {
    right: 12px; left: 12px; bottom: 12px;
    width: auto;
  }
}

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 8px;
  list-style: none;
  margin: 0;
  display: none;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.dropdown li a:hover { background: rgba(26, 31, 26, 0.05); color: var(--color-text); }
.caret { display: inline-block; transform: translateY(1px); font-size: 0.7em; opacity: 0.7; }
.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}
@media (max-width: 1000px) {
  .dropdown-divider {
    margin: 2px 0;
    padding: 0 !important;
    height: 1px;
  }
}
.header-cta { display: flex; align-items: center; gap: 8px; }
.header-locale-switch {
  display: flex;
  align-items: center;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-left: 8px;
}
.header-locale-switch a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 4px;
}
.header-locale-switch a:hover { background: var(--color-bg-3); color: var(--color-primary-dark); }
.header-locale-switch a.is-active { background: var(--color-bg-3); color: var(--color-text); font-weight: 600; }

.menu-toggle {
  background: none;
  border: none;
  padding: 8px 12px;
  color: var(--color-text);
  min-width: 48px;
  min-height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

/* Hamburger icon animation */
.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: currentColor;
  left: 50%;
  transform: translateX(-50%);
  transition: all 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.menu-toggle::before {
  top: 14px;
  box-shadow: 0 6px 0 currentColor;
}

.menu-toggle::after {
  bottom: 14px;
}

.menu-toggle[aria-expanded="true"]::before {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  box-shadow: none;
}

.menu-toggle[aria-expanded="true"]::after {
  bottom: 50%;
  transform: translateX(-50%) translateY(50%) rotate(-45deg);
}

@media (max-width: 1000px) {
  .menu-toggle { 
    display: inline-flex !important;
    font-size: 0;
  }
}

/* ===== CLEAN MOBILE MENU (≤1000px) ===== */
@media (max-width: 1000px) {
  /* Reset desktop nav styles */
  .primary-nav {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--color-bg);
    height: calc(100vh - 60px);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 300ms var(--transition), transform 300ms var(--transition), visibility 300ms var(--transition);
    pointer-events: none;
  }

  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Reset desktop ul styles */
  .primary-nav > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Overlay backdrop */
  .primary-nav::before {
    content: '';
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 31, 26, 0.5);
    z-index: -1;
    opacity: 0;
    transition: opacity 300ms var(--transition);
    pointer-events: none;
  }

  .primary-nav.is-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .primary-nav > ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
  }

  /* Main menu items */
  .primary-nav > ul > li > a,
  .primary-nav > ul > li > .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms var(--transition);
    -webkit-tap-highlight-color: transparent;
  }

  .primary-nav > ul > li > a:active,
  .primary-nav > ul > li > .nav-toggle:active {
    background: var(--color-bg-2);
  }

  .primary-nav > ul > li > a:focus,
  .primary-nav > ul > li > .nav-toggle:focus {
    outline: none;
    background: transparent;
  }

  /* Active state */
  .primary-nav > ul > li > a.is-active {
    color: var(--color-primary);
    font-weight: 600;
  }

  /* Dropdown toggle styling */
  .primary-nav .nav-toggle {
    background: transparent;
    border: none;
    padding: 16px 20px;
    min-height: 56px;
  }

  /* Caret animation */
  .primary-nav .caret {
    font-size: 0.7em;
    opacity: 0.5;
    margin-left: 8px;
    transform: rotate(0deg);
    transition: transform 300ms var(--transition);
    display: inline-block;
  }

  .has-dropdown.is-open > .nav-toggle .caret {
    transform: rotate(-180deg);
  }

  /* Dropdown list */
  .dropdown {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-bg-2);
    border: none;
    position: static;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms var(--transition);
    border-top: 1px solid var(--color-border);
  }

  .has-dropdown.is-open > .dropdown {
    display: block !important;
    max-height: 1000px;
  }

  /* Dropdown items */
  .dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dropdown li a {
    display: flex;
    align-items: center;
    padding: 14px 20px 14px 48px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    background: transparent;
    border: none;
    min-height: 44px;
    transition: all 200ms var(--transition);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .dropdown li a:hover {
    background: var(--color-bg-3);
    color: var(--color-text);
  }

  .dropdown li a:active {
    background: var(--color-bg-3);
    color: var(--color-text);
  }

  .dropdown li a:focus {
    outline: none;
    background: var(--color-bg-3);
  }

  .dropdown li a.is-active {
    color: var(--color-primary);
    font-weight: 600;
  }

  /* Divider */
  .dropdown-divider {
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    display: none;
  }

  /* Contact button section */
  .header-cta {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg);
  }

  .header-cta .btn {
    width: 100%;
    margin: 0;
    min-height: 48px;
    font-weight: 600;
  }

  /* Language switcher */
  .header-locale-switch {
    display: flex !important;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    justify-content: center;
    gap: 16px;
    background: var(--color-bg-2);
    flex-shrink: 0;
  }

  .header-locale-switch a {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 200ms var(--transition);
    -webkit-tap-highlight-color: transparent;
  }

  .header-locale-switch a:active {
    background: var(--color-bg-3);
  }

  .header-locale-switch a.is-active {
    background: var(--color-bg-3);
    color: var(--color-text);
    font-weight: 600;
  }

  /* Prevent desktop styles from interfering */
  .has-dropdown:hover .dropdown { display: none !important; }
  .has-dropdown:focus-within .dropdown { display: none !important; }
  
  /* Ensure dropdowns show when open */
  .has-dropdown.is-open > .dropdown { display: block !important; }

  /* Additional mobile refinements */
  body.menu-open {
    overflow: hidden;
  }

  /* Scrollbar styling for menu */
  .primary-nav::-webkit-scrollbar {
    width: 6px;
  }

  .primary-nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .primary-nav::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
  }

  .primary-nav::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }

  /* Improve touch feedback on menu items */
  @media (hover: none) and (pointer: coarse) {
    .primary-nav > ul > li > a,
    .primary-nav > ul > li > .nav-toggle,
    .dropdown li a,
    .header-cta .btn,
    .header-locale-switch a {
      -webkit-tap-highlight-color: transparent;
    }

    .primary-nav > ul > li > a:active,
    .primary-nav > ul > li > .nav-toggle:active,
    .dropdown li a:active,
    .header-cta .btn:active,
    .header-locale-switch a:active {
      background: var(--color-bg-3);
    }
  }
}

/* ---------- Immersive landing hero ---------- */
.landing {
  position: relative;
  padding: 96px 0 88px;             /* breathing room top & bottom */
  display: flex;
  align-items: center;
  /* overflow: hidden previously clipped the offset map + legend; allow vertical
     overflow so nothing gets cut off, but keep horizontal containment. */
  overflow-x: clip;
}

.landing-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  width: 100%;
}
.landing-copy { padding-bottom: 0; max-width: 540px; }
.landing > .container { max-width: 1320px; }
.landing-grid.landing-grid--no-map { grid-template-columns: 1fr; }
@media (max-width: 1000px) {
  .landing-grid { grid-template-columns: 1fr; gap: 48px; padding: 0; }
  .landing { padding: 64px 0 56px; }
  .landing-copy { max-width: 100%; }
}

.landing-copy h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
  max-width: 32ch;
}
.landing-copy .lead {
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 26px;
  color: #4a4a44;
}
.landing-copy .cta-row { margin-top: 6px; }
.landing-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.landing-copy .eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  display: inline-block;
}
.landing-copy h1 em {
  font-style: normal;
  color: var(--color-primary);
  position: relative;
}
.landing-copy h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.4;
}

.landing-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 600px) { .landing-meta { grid-template-columns: 1fr 1fr; } }
.landing-meta .num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  display: block;
  line-height: 1;
}
.landing-meta .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ---------- Africa map ---------- */
.map-stage {
  position: relative;
  aspect-ratio: 1 / 1.1;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.map-svg {
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.map-stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 50%, var(--color-primary-faint), transparent 60%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.map-svg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

/* Continent outline — thick, logo-like */
.map-continent {
  fill: rgba(92, 173, 89, 0.04);
  stroke: var(--color-primary-dark);
  stroke-width: 3.0;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(92, 173, 89, 0.5));
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: draw-continent 2.4s ease-out 0.2s forwards;
  transition: stroke-width 240ms ease, filter 240ms ease;
}
.map-stage:hover .map-continent {
  stroke-width: 3.4;
  filter: drop-shadow(0 0 14px rgba(92, 173, 89, 0.7));
}
@keyframes draw-continent {
  to { stroke-dashoffset: 0; }
}

/* Latitude/longitude grid lines — almost invisible */
.map-grid {
  fill: none;
  stroke: rgba(92, 173, 89, 0.08);
  stroke-width: 0.5;
  stroke-dasharray: 2 6;
  opacity: 0;
  animation: fade-grid 1.6s ease-out 0.6s forwards;
  transition: stroke 240ms ease;
}
.map-stage:hover .map-grid { stroke: rgba(92, 173, 89, 0.16); }
@keyframes fade-grid { to { opacity: 1; } }

/* Mesh edges — short interconnecting lines (the logo's web) */
.map-edge {
  stroke: var(--color-primary);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: dark-draw-edge 900ms cubic-bezier(0.45, 0, 0.2, 1) forwards;
  transition: stroke 200ms ease, stroke-width 200ms ease, opacity 200ms ease;
  cursor: pointer;
  pointer-events: stroke;
}
.map-edge:hover,
.map-edge.is-active {
  stroke: var(--color-primary-light);
  stroke-width: 2;
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(140, 204, 137, 1));
}
@keyframes dark-draw-edge {
  to { stroke-dashoffset: 0; opacity: 0.6; }
}

/* Lit pathways between cities */
.map-link {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px var(--color-primary-glow));
  animation: draw-link 1.8s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
.map-link.l1  { animation-delay: 1.6s; }
.map-link.l2  { animation-delay: 1.8s; }
.map-link.l3  { animation-delay: 2.0s; }
.map-link.l4  { animation-delay: 2.2s; }
.map-link.l5  { animation-delay: 2.4s; }
.map-link.l6  { animation-delay: 2.6s; }
.map-link.l7  { animation-delay: 2.8s; }
.map-link.l8  { animation-delay: 3.0s; }
.map-link.l9  { animation-delay: 3.2s; }
.map-link.l10 { animation-delay: 3.4s; }
.map-link.l11 { animation-delay: 3.6s; }
.map-link.l12 { animation-delay: 3.8s; }
.map-link.l13 { animation-delay: 4.0s; }
.map-link.l14 { animation-delay: 4.2s; }
.map-link.l15 { animation-delay: 4.4s; }
.map-link.l16 { animation-delay: 4.6s; }
.map-link.l17 { animation-delay: 4.8s; }
.map-link.l18 { animation-delay: 5.0s; }
.map-link.l19 { animation-delay: 5.2s; }
@keyframes draw-link {
  to { stroke-dashoffset: 0; }
}

/* "Pulse" running along the network after links draw */
.map-link::after { /* not actually applied — we use a sibling animated dot instead */ }

/* City nodes */
.map-node {
  fill: var(--color-primary);
  stroke: rgba(255,255,255,0.6);
  stroke-width: 0.5;
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 0 4px var(--color-primary));
  animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: r 200ms ease, filter 200ms ease, fill 200ms ease;
  cursor: pointer;
}
.map-node.is-near {
  fill: var(--color-primary-light);
  filter: drop-shadow(0 0 10px rgba(140, 204, 137, 0.85));
}
.map-node:hover,
.map-node.is-focus {
  fill: #fff;
  filter: drop-shadow(0 0 18px rgba(140, 204, 137, 1));
}
.map-stage:hover .map-node-halo {
  animation-duration: 1.6s;
}
.map-node-halo {
  fill: var(--color-primary);
  opacity: 0;
  transform-origin: center;
  animation: pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%   { opacity: 0.55; transform: scale(0.6); }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* Label text near nodes */
.map-label {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--color-text);
  letter-spacing: 0.04em;
  font-weight: 600;
  opacity: 0;
  animation: fade-in 0.8s ease-out forwards;
  animation-delay: 4.4s;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--color-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.map-label-mid {
  font-size: 9px;
  font-weight: 500;
  fill: var(--color-text-muted);
}
.map-label-hover {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  fill: var(--color-text);
  letter-spacing: 0.04em;
  opacity: 0;
  paint-order: stroke;
  stroke: var(--color-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.map-label-hover.is-shown {
  opacity: 1;
}

/* Triangles — regional shapes that light up when one of their vertices is focused */
.map-triangle {
  fill: var(--color-primary);
  fill-opacity: 0;
  stroke: none;
  pointer-events: none;
  transition: fill-opacity 320ms ease;
}
.map-triangle.is-active {
  fill-opacity: 0.10;
}
@keyframes fade-in { to { opacity: 1; } }

/* Stagger node and halo animation delays via inline style on each node group */

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mx, -100%) var(--my, -100%), rgba(92, 173, 89,0.10), transparent 40%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  background: var(--color-bg-3);
}
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 10px; }
.card .meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.card-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 500;
  color: var(--color-primary-dark);
}
.card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(92, 173, 89,0.10);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  margin-bottom: 20px;
  border: 1px solid rgba(92, 173, 89,0.25);
}
.subtle { color: var(--color-text-muted); }

.project-card { padding: 0; overflow: hidden; }
.project-card .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #d8e6d6 0%, #b6d2b3 100%);
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
.project-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(92, 173, 89, 0.30), transparent 55%),
    repeating-linear-gradient(45deg, rgba(63,138,58,0.05) 0 1px, transparent 1px 8px);
}
.project-card .thumb.alt-1 { background: linear-gradient(135deg, #c2dabe 0%, #95b990 100%); }
.project-card .thumb.alt-2 { background: linear-gradient(135deg, #d4e2cf 0%, #a3c19c 100%); }
.project-card .thumb.alt-3 { background: linear-gradient(135deg, #b5d3b1 0%, #d6e5d3 100%); }
.project-card .body { padding: 28px 32px 32px; }
.project-card h3 a { color: var(--color-text); text-decoration: none; }
.project-card h3 a:hover { color: var(--color-primary-dark); }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(92, 173, 89,0.10);
  padding: 4px 10px;
  border-radius: 999px;
  margin-right: 4px;
  border: 1px solid rgba(92, 173, 89,0.25);
}

.pub-card-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pub-card-venue {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Section header ---------- */
.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 24px;
  flex-wrap: wrap;
}
.section-header h2 { margin-bottom: 12px; max-width: 720px; }
.section-header p { color: var(--color-text-muted); margin: 0; max-width: 64ch; }
/* Focus variant — used on Research page to give section headers more visual presence
   (larger H2, wider paragraph, extra breathing room) while staying left-aligned. */
.section-header--focus { display: block; margin-bottom: 40px; }
.section-header--focus .section-title { max-width: 820px; }
.section-header--focus .section-title h2 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1.12;
  max-width: 820px;
  margin-bottom: 16px;
}
.section-header--focus .section-title p {
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 68ch;
  color: var(--color-text);
}

/* ---------- Research page · two-column intro (hero + Our approach side by side) ---------- */
/* Override the narrower page-header container so this block sits at the same left/right edges as the sections below. */
/* Placeholder — real override sits later in the file to beat .page-header .container */
.research-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 8px;
}
.research-split__lead h1 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 8px 0 18px;
}
.research-split__lead .lead {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 42ch;
}
.research-split__approach {
  padding-top: 0;
  border-left: 1px solid var(--color-border);
  padding-left: 40px;
}
.research-split__approach .eyebrow { margin-bottom: 12px; }
.research-split__lead .eyebrow { margin-bottom: 12px; }
.research-split__approach h2 {
  font-size: clamp(1.55rem, 2.2vw, 1.9rem);
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  max-width: 26ch;
}
.research-split__approach p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 44ch;
}
@media (max-width: 900px) {
  .research-split { grid-template-columns: 1fr; gap: 40px; }
  .research-split__approach { border-left: 0; padding-left: 0; padding-top: 0; border-top: 1px solid var(--color-border); padding-top: 32px; }
}

/* ---------- People ---------- */
.person {
  text-align: left;
  padding: 0;
  border: none;
  background: transparent;
}
.person:hover { transform: none; background: transparent; border: none; }
.person::before { display: none; }
.person .avatar {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #c2dabe 0%, #95b990 100%);
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.person .avatar::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(92, 173, 89,0.18), transparent 55%);
}
.person h4 { margin: 0 0 4px; color: var(--color-text); }
.person .role { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 8px; }
.person .links { display: flex; gap: 12px; font-size: 0.85rem; }

/* ---------- Publications ---------- */
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-list li {
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  transition: background var(--transition);
}
.pub-list li:hover { background: rgba(26, 31, 26, 0.03); }
.pub-list li:last-child { border-bottom: none; }
.pub-year {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.08em;
}
.pub-title { font-weight: 500; margin: 0 0 8px; font-size: 1.1rem; color: var(--color-text); }
.pub-authors { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 6px; }
.pub-venue { font-size: 0.85rem; color: var(--color-text-faint); font-style: italic; margin: 0 0 10px; }
.pub-actions a { margin-right: 18px; font-size: 0.85rem; font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Filters */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}
.filter-btn {
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: all var(--transition);
  min-height: 40px;
}
@media (max-width: 480px) {
  .filter-btn {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.8rem;
  }
}
.filter-btn:hover, .filter-btn.is-active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #ffffff;
}

/* ---------- Events ---------- */
.event-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
.event-row:last-child { border-bottom: none; }
.event-date {
  text-align: center;
  background: rgba(92, 173, 89,0.10);
  border: 1px solid rgba(92, 173, 89,0.25);
  border-radius: var(--radius-md);
  padding: 14px 8px;
  color: var(--color-primary-dark);
  font-family: var(--font-mono);
}
.event-date .day { display: block; font-size: 1.6rem; line-height: 1; color: var(--color-primary-dark); }
.event-date .month { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; display: block; }
.event-info h3 { margin: 0 0 6px; font-size: 1.1rem; }
.event-info p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }
@media (max-width: 700px) {
  .event-row { grid-template-columns: 90px 1fr; }
  .event-row .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-size: 16px;
}
@media (max-width: 480px) {
  input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    padding: 16px 14px;
  }
}
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(92, 173, 89,0.15);
}
textarea { min-height: 140px; resize: vertical; }

/* ---------- Jobs ---------- */
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  background: var(--color-bg-2);
  transition: border-color var(--transition), background var(--transition);
}
.job:hover { border-color: var(--color-primary); background: var(--color-bg-3); }
.job h3 { margin: 0 0 6px; font-size: 1.15rem; }
.job .meta-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
@media (max-width: 700px) { .job { grid-template-columns: 1fr; } }

/* ---------- Logos strip ---------- */
.logos-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
}
@media (max-width: 900px) { .logos-strip { grid-template-columns: repeat(2, 1fr); } }
.logo-placeholder {
  height: 200px;
  padding: 16px 20px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  background: var(--color-bg-2);
  transition: border-color var(--transition), color var(--transition);
}
.logo-placeholder.has-image {
  padding: 0;
  overflow: hidden;
}
.logo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logo-placeholder:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
  border-style: solid;
}

/* ---------- Page header ---------- */
.page-header {
  padding: 160px 0 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .page-header { padding: 100px 0 48px; }
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(92, 173, 89,0.16), transparent 70%);
  pointer-events: none;
}
.page-header .container { max-width: var(--container-narrow); }
/* Wider container for the Research split hero — must sit after .page-header .container to win the cascade. */
.page-header.page-header--split .container { max-width: var(--container); }
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.breadcrumbs a { color: var(--color-text-muted); }

/* ---------- Article body ---------- */
.article-body { font-size: 1.1rem; color: var(--color-text); }
.article-body h2 { margin-top: 1.6em; }
.article-body h3 { margin-top: 1.4em; }
.article-meta {
  display: flex; gap: 20px; font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 24px;
}

/* ---------- Section variants ---------- */
.section-alt {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: 80px 0 40px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--color-text-muted); font-size: 0.92rem; padding: 6px 0; display: inline-block; }
@media (max-width: 480px) {
  .site-footer li { margin-bottom: 12px; }
  .site-footer a { font-size: 0.88rem; padding: 8px 0; }
}
.site-footer a:hover { color: var(--color-primary-dark); }
.footer-brand p { color: var(--color-text-muted); max-width: 32ch; font-size: 0.92rem; }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 48px; }
.divider { height: 1px; background: var(--color-border); margin: 64px 0; border: 0; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
  .map-continent { stroke-dashoffset: 0 !important; }
  .map-link { stroke-dashoffset: 0 !important; }
  .map-node, .map-grid, .map-label { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   Research clusters — activated by cursor focusing on anchor cities
   ========================================================================== */
.map-stage {
  /* allow cluster cards to extend slightly beyond the stage if needed */
  --cluster-1: #5CAD59;   /* brand green — Clean energy */
  --cluster-2: #1fb6a3;   /* teal — Implementation */
  --cluster-3: #d4a017;   /* amber — Policies & governance */
  --cluster-4: #c45a3a;   /* terracotta — Finance & tech */
  --cluster-5: #6f5fc9;   /* indigo — Institutions & skills */
}

/* Leader lines — drawn from the anchor city out to a pin on the SVG edge */
.map-cluster-line, .map-cluster-dot {
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.map-cluster-line {
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 4 6;
}
.map-cluster-line[data-cluster="1"] { stroke: var(--cluster-1); }
.map-cluster-line[data-cluster="2"] { stroke: var(--cluster-2); }
.map-cluster-line[data-cluster="3"] { stroke: var(--cluster-3); }
.map-cluster-line[data-cluster="4"] { stroke: var(--cluster-4); }
.map-cluster-line[data-cluster="5"] { stroke: var(--cluster-5); }
.map-cluster-dot[data-cluster="1"] { fill: var(--cluster-1); }
.map-cluster-dot[data-cluster="2"] { fill: var(--cluster-2); }
.map-cluster-dot[data-cluster="3"] { fill: var(--cluster-3); }
.map-cluster-dot[data-cluster="4"] { fill: var(--cluster-4); }
.map-cluster-dot[data-cluster="5"] { fill: var(--cluster-5); }

.map-stage[data-active-cluster="1"] .map-cluster-line[data-cluster="1"],
.map-stage[data-active-cluster="1"] .map-cluster-dot[data-cluster="1"],
.map-stage[data-active-cluster="2"] .map-cluster-line[data-cluster="2"],
.map-stage[data-active-cluster="2"] .map-cluster-dot[data-cluster="2"],
.map-stage[data-active-cluster="3"] .map-cluster-line[data-cluster="3"],
.map-stage[data-active-cluster="3"] .map-cluster-dot[data-cluster="3"],
.map-stage[data-active-cluster="4"] .map-cluster-line[data-cluster="4"],
.map-stage[data-active-cluster="4"] .map-cluster-dot[data-cluster="4"],
.map-stage[data-active-cluster="5"] .map-cluster-line[data-cluster="5"],
.map-stage[data-active-cluster="5"] .map-cluster-dot[data-cluster="5"] {
  opacity: 1;
}

/* Tint the continent stroke when a cluster is active */
.map-stage[data-active-cluster="1"] .map-continent { stroke: var(--cluster-1); filter: drop-shadow(0 0 12px rgba(92, 173, 89,0.6)); }
.map-stage[data-active-cluster="2"] .map-continent { stroke: var(--cluster-2); filter: drop-shadow(0 0 12px rgba(31,182,163,0.55)); }
.map-stage[data-active-cluster="3"] .map-continent { stroke: var(--cluster-3); filter: drop-shadow(0 0 12px rgba(212,160,23,0.55)); }
.map-stage[data-active-cluster="4"] .map-continent { stroke: var(--cluster-4); filter: drop-shadow(0 0 12px rgba(196,90,58,0.55)); }
.map-stage[data-active-cluster="5"] .map-continent { stroke: var(--cluster-5); filter: drop-shadow(0 0 12px rgba(111,95,201,0.55)); }

/* Cluster callout cards — sit at the edges of map-stage in negative space */
.map-cluster {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 220px;
  padding: 10px 14px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.32;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  z-index: 4;
  box-shadow: var(--shadow-soft);
}
.map-cluster .cluster-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  color: #fff;
  line-height: 1.4;
}
.map-cluster .cluster-name {
  font-weight: 500;
}
.map-cluster[data-cluster="1"] .cluster-num { background: var(--cluster-1); }
.map-cluster[data-cluster="2"] .cluster-num { background: var(--cluster-2); }
.map-cluster[data-cluster="3"] .cluster-num { background: var(--cluster-3); color: #1a1f1a; }
.map-cluster[data-cluster="4"] .cluster-num { background: var(--cluster-4); }
.map-cluster[data-cluster="5"] .cluster-num { background: var(--cluster-5); }
.map-cluster[data-cluster="1"] { border-color: var(--cluster-1); }
.map-cluster[data-cluster="2"] { border-color: var(--cluster-2); }
.map-cluster[data-cluster="3"] { border-color: var(--cluster-3); }
.map-cluster[data-cluster="4"] { border-color: var(--cluster-4); }
.map-cluster[data-cluster="5"] { border-color: var(--cluster-5); }

/* Position each cluster card at its corner of the map-stage */
.map-cluster[data-cluster="1"] { top:  -8px;  right: -16px; }
.map-cluster[data-cluster="2"] { top:  44%;   left:  -28px; }
.map-cluster[data-cluster="3"] { top:  38%;   right: -28px; }
.map-cluster[data-cluster="4"] { bottom: 30%; left:  -28px; }
.map-cluster[data-cluster="5"] { bottom: -8px; right: -16px; }

/* Activation: only the active cluster's card appears */
.map-stage[data-active-cluster="1"] .map-cluster[data-cluster="1"],
.map-stage[data-active-cluster="2"] .map-cluster[data-cluster="2"],
.map-stage[data-active-cluster="3"] .map-cluster[data-cluster="3"],
.map-stage[data-active-cluster="4"] .map-cluster[data-cluster="4"],
.map-stage[data-active-cluster="5"] .map-cluster[data-cluster="5"] {
  opacity: 1;
  transform: translateY(0);
}

/* Make sure the map-stage allows callouts to overflow into negative space */
.map-stage { overflow: visible; }


/* ==========================================================================
   Large cluster numbers around the continent
   ========================================================================== */
.map-cluster-num {
  position: absolute;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  transition: transform 220ms ease, opacity 220ms ease, text-shadow 220ms ease;
  font-variant-numeric: tabular-nums;
}
.map-cluster-num:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}
.map-cluster-num:hover {
  transform: scale(1.10);
  text-shadow: 0 0 24px currentColor;
}

/* Numbers spread CLOCKWISE around the continent: 12 → 2 → 5 → 7 → 10 o'clock.
   Bigger offsets pull each number deep into the surrounding negative space. */
.map-cluster-num[data-cluster="1"] { color: var(--cluster-1); top:    -78px; left:   54%; transform: translateX(-50%); }
.map-cluster-num[data-cluster="2"] { color: var(--cluster-2); top:     22%; right:  -90px; }
.map-cluster-num[data-cluster="3"] { color: var(--cluster-3); bottom: -78px; right:  18%; }
.map-cluster-num[data-cluster="4"] { color: var(--cluster-4); bottom: -78px; left:   28%; }
.map-cluster-num[data-cluster="5"] { color: var(--cluster-5); top:      4%; left:  -110px; }
.map-cluster-num[data-cluster="1"]:hover { transform: translateX(-50%) scale(1.10); }

/* When a number is being hovered, push its sibling callout card a little
   further from the number so the two pieces feel connected */
.map-stage[data-active-cluster] .map-cluster-num { opacity: 0.55; }
.map-stage[data-active-cluster="1"] .map-cluster-num[data-cluster="1"],
.map-stage[data-active-cluster="2"] .map-cluster-num[data-cluster="2"],
.map-stage[data-active-cluster="3"] .map-cluster-num[data-cluster="3"],
.map-stage[data-active-cluster="4"] .map-cluster-num[data-cluster="4"],
.map-stage[data-active-cluster="5"] .map-cluster-num[data-cluster="5"] {
  opacity: 1;
}



/* The leader line endpoint dots are now redundant — hide them since the
   big numbers are the visible markers */
/* Cluster outline anchor dots remain visible on the continent border */


/* Cluster callout cards — tidied for legibility and visual consistency */
.map-cluster {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 240px;
  max-width: 240px;
  padding: 12px 14px 14px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-family: var(--font-sans);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  z-index: 4;
  box-shadow: var(--shadow-soft);
}
.map-cluster .cluster-num {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  flex-shrink: 0;
  color: #fff;
  line-height: 1.1;
}
.map-cluster[data-cluster="3"] .cluster-num { color: #1a1f1a; } /* amber needs dark text */
.map-cluster .cluster-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.map-cluster .cluster-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--color-text);
}
.map-cluster .cluster-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.32;
  color: var(--color-text-muted);
}
.map-cluster[data-cluster="1"] .cluster-num { background: var(--cluster-1); }
.map-cluster[data-cluster="2"] .cluster-num { background: var(--cluster-2); }
.map-cluster[data-cluster="3"] .cluster-num { background: var(--cluster-3); }
.map-cluster[data-cluster="4"] .cluster-num { background: var(--cluster-4); }
.map-cluster[data-cluster="5"] .cluster-num { background: var(--cluster-5); }
.map-cluster[data-cluster="1"] { border-color: var(--cluster-1); }
.map-cluster[data-cluster="2"] { border-color: var(--cluster-2); }
.map-cluster[data-cluster="3"] { border-color: var(--cluster-3); }
.map-cluster[data-cluster="4"] { border-color: var(--cluster-4); }
.map-cluster[data-cluster="5"] { border-color: var(--cluster-5); }

/* Activation: only the active cluster's card appears */
.map-stage[data-active-cluster="1"] .map-cluster[data-cluster="1"],
.map-stage[data-active-cluster="2"] .map-cluster[data-cluster="2"],
.map-stage[data-active-cluster="3"] .map-cluster[data-cluster="3"],
.map-stage[data-active-cluster="4"] .map-cluster[data-cluster="4"],
.map-stage[data-active-cluster="5"] .map-cluster[data-cluster="5"] {
  opacity: 1;
  transform: translateY(0);
}

/* Cards sit beside their corresponding number, all using the same width
   and consistent visual rhythm */
.map-cluster[data-cluster="1"] { top: -8px;  left: 50%; transform: translateX(-50%) translateY(4px); width: 280px; max-width: 280px; }
.map-cluster[data-cluster="2"] { top: calc(22% + 64px); right: -120px; }
.map-cluster[data-cluster="3"] { bottom: -8px; right: 12%; }
.map-cluster[data-cluster="4"] { bottom: -8px; left: 22%; }
.map-cluster[data-cluster="5"] { top: calc(4% + 64px); left: -130px; }
.map-stage[data-active-cluster="1"] .map-cluster[data-cluster="1"] {
  transform: translateX(-50%) translateY(0);
}


/* ==========================================================================
   Cluster system v2 — numbers stacked along Africa's west coast,
   callout cards open in the upper-left negative space (above hero text)
   ========================================================================== */
.landing { position: relative; }

/* Number column — vertical stack along the western coast of the continent */
.map-cluster-num[data-cluster="1"],
.map-cluster-num[data-cluster="2"],
.map-cluster-num[data-cluster="3"],
.map-cluster-num[data-cluster="4"],
.map-cluster-num[data-cluster="5"] {
  position: absolute;
  left: -16px;
  right: auto;
  bottom: auto;
  transform: none;
}
.map-cluster-num[data-cluster="1"] { top:  4%;  }
.map-cluster-num[data-cluster="2"] { top: 23%;  }
.map-cluster-num[data-cluster="3"] { top: 42%;  }
.map-cluster-num[data-cluster="4"] { top: 61%;  }
.map-cluster-num[data-cluster="5"] { top: 80%;  }
.map-cluster-num:hover { transform: scale(1.10); }
.map-cluster-num[data-cluster="1"]:hover,
.map-cluster-num[data-cluster="2"]:hover,
.map-cluster-num[data-cluster="3"]:hover,
.map-cluster-num[data-cluster="4"]:hover,
.map-cluster-num[data-cluster="5"]:hover { transform: scale(1.10); }

/* Dim the inactive numbers when one is active */
.landing[data-active-cluster] .map-cluster-num { opacity: 0.45; }
.landing[data-active-cluster="1"] .map-cluster-num[data-cluster="1"],
.landing[data-active-cluster="2"] .map-cluster-num[data-cluster="2"],
.landing[data-active-cluster="3"] .map-cluster-num[data-cluster="3"],
.landing[data-active-cluster="4"] .map-cluster-num[data-cluster="4"],
.landing[data-active-cluster="5"] .map-cluster-num[data-cluster="5"] {
  opacity: 1;
}

/* Continent re-tints when a cluster is active (now driven by .landing) */
.landing[data-active-cluster="1"] .map-continent { stroke: var(--cluster-1); filter: drop-shadow(0 0 12px rgba(92, 173, 89,0.6)); }
.landing[data-active-cluster="2"] .map-continent { stroke: var(--cluster-2); filter: drop-shadow(0 0 12px rgba(31,182,163,0.55)); }
.landing[data-active-cluster="3"] .map-continent { stroke: var(--cluster-3); filter: drop-shadow(0 0 12px rgba(212,160,23,0.55)); }
.landing[data-active-cluster="4"] .map-continent { stroke: var(--cluster-4); filter: drop-shadow(0 0 12px rgba(196,90,58,0.55)); }
.landing[data-active-cluster="5"] .map-continent { stroke: var(--cluster-5); filter: drop-shadow(0 0 12px rgba(111,95,201,0.55)); }

/* Show only the active cluster's leader line + outline anchor dot */
.landing[data-active-cluster="1"] .map-cluster-line[data-cluster="1"],
.landing[data-active-cluster="1"] .map-cluster-dot[data-cluster="1"],
.landing[data-active-cluster="2"] .map-cluster-line[data-cluster="2"],
.landing[data-active-cluster="2"] .map-cluster-dot[data-cluster="2"],
.landing[data-active-cluster="3"] .map-cluster-line[data-cluster="3"],
.landing[data-active-cluster="3"] .map-cluster-dot[data-cluster="3"],
.landing[data-active-cluster="4"] .map-cluster-line[data-cluster="4"],
.landing[data-active-cluster="4"] .map-cluster-dot[data-cluster="4"],
.landing[data-active-cluster="5"] .map-cluster-line[data-cluster="5"],
.landing[data-active-cluster="5"] .map-cluster-dot[data-cluster="5"] {
  opacity: 1;
}

/* Cluster card zone — upper-left of the landing, above the hero text */
.landing-cluster-zone {
  position: absolute;
  top: 130px;
  left: 28px;
  width: min(420px, 36vw);
  z-index: 5;
  pointer-events: none;
}
.landing-cluster-zone .map-cluster {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: 420px;
  /* override earlier corner positions */
  top: 0; left: 0; right: auto; bottom: auto;
  transform: translateY(8px);
}
.landing[data-active-cluster="1"] .landing-cluster-zone .map-cluster[data-cluster="1"],
.landing[data-active-cluster="2"] .landing-cluster-zone .map-cluster[data-cluster="2"],
.landing[data-active-cluster="3"] .landing-cluster-zone .map-cluster[data-cluster="3"],
.landing[data-active-cluster="4"] .landing-cluster-zone .map-cluster[data-cluster="4"],
.landing[data-active-cluster="5"] .landing-cluster-zone .map-cluster[data-cluster="5"] {
  opacity: 1;
  transform: translateY(0);
}

/* Larger, more breathable card style for the upper-left position */
.landing-cluster-zone .map-cluster {
  padding: 18px 22px 20px;
  gap: 16px;
  border-radius: 14px;
}
.landing-cluster-zone .map-cluster .cluster-num {
  font-size: 1.4rem;
  padding: 8px 14px;
}
.landing-cluster-zone .map-cluster .cluster-name {
  font-size: 1.05rem;
  line-height: 1.28;
}
.landing-cluster-zone .map-cluster .cluster-role {
  font-size: 0.92rem;
}

@media (max-width: 1000px) {
  .landing-cluster-zone {
    position: static;
    width: 100%;
    margin: 0 0 24px;
  }
  .map-cluster-num[data-cluster="1"] { top: 4%; }
  .map-cluster-num[data-cluster="2"] { top: 23%; }
  .map-cluster-num[data-cluster="3"] { top: 42%; }
  .map-cluster-num[data-cluster="4"] { top: 61%; }
  .map-cluster-num[data-cluster="5"] { top: 80%; }
}

@media (max-width: 480px) {
  .landing-cluster-zone {
    left: 0 !important;
    top: auto !important;
    width: 100%;
    padding: 0 16px;
    gap: 12px;
  }
  .landing-cluster-zone .map-cluster .cluster-name { font-size: 1rem; }
  .landing-cluster-zone .map-cluster .cluster-role { font-size: 0.8rem; }
}


/* ==========================================================================
   Cluster numbers v3 — curve around western Africa, centered on hero axis,
   each is a clickable link to research.html
   ========================================================================== */
.map-cluster-num {
  text-decoration: none !important;
  border: none;
  /* clear earlier positions; specific positions set below */
  top: auto; left: auto; right: auto; bottom: auto;
}
.map-cluster-num[data-cluster="1"],
.map-cluster-num[data-cluster="2"],
.map-cluster-num[data-cluster="3"],
.map-cluster-num[data-cluster="4"],
.map-cluster-num[data-cluster="5"] {
  position: absolute;
}

/* Curve: starts upper-left of map (west of Liberia), bows down through
   the Gulf of Guinea, and ends lower at Cape Town tip. The middle three
   sit at hero-text vertical level. */
.map-cluster-num[data-cluster="1"] { top: 38%; left: -2%; }
.map-cluster-num[data-cluster="2"] { top: 49%; left: 8%;  }
.map-cluster-num[data-cluster="3"] { top: 60%; left: 25%; }
.map-cluster-num[data-cluster="4"] { top: 76%; left: 36%; }
.map-cluster-num[data-cluster="5"] { top: 92%; left: 46%; }

.map-cluster-num:hover {
  transform: scale(1.10);
  text-decoration: none !important;
}

/* Cluster cards now <a> elements — strip default link styling */
a.map-cluster {
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
  cursor: pointer;
}
.landing[data-active-cluster] .map-cluster:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.landing[data-active-cluster] .map-cluster:hover .cluster-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ==========================================================================
   Cluster system v4 — cluster NAMES (in their colors) replace the numerals.
   The list sits in the upper-left negative space above the hero text and is
   always visible. Hover/focus lights up the corresponding region on the map.
   Click → research.html (already wired via <a href>).
   ========================================================================== */

/* Hide the big numerals — names take their place */
.map-cluster-num { display: none !important; }

/* Always-visible stacked list in upper-left of landing */
.landing-cluster-zone {
  position: absolute;
  top: 130px;
  left: 28px;
  width: min(460px, 38vw);
  z-index: 5;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Each cluster card → list item: text-only, name in cluster color */
.landing-cluster-zone .map-cluster {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Hide the legacy colored number chip — colour is now in the name */
.landing-cluster-zone .map-cluster .cluster-num { display: none; }
.landing-cluster-zone .map-cluster .cluster-body { gap: 4px; }

/* Cluster name: large, bold, in its accent color */
.landing-cluster-zone .map-cluster .cluster-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.005em;
  display: block;
}
.landing-cluster-zone .map-cluster .cluster-role {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-weight: 400;
}

/* Per-cluster color on the name */
.landing-cluster-zone .map-cluster[data-cluster="1"] .cluster-name { color: var(--cluster-1); }
.landing-cluster-zone .map-cluster[data-cluster="2"] .cluster-name { color: var(--cluster-2); }
.landing-cluster-zone .map-cluster[data-cluster="3"] .cluster-name { color: var(--cluster-3); }
.landing-cluster-zone .map-cluster[data-cluster="4"] .cluster-name { color: var(--cluster-4); }
.landing-cluster-zone .map-cluster[data-cluster="5"] .cluster-name { color: var(--cluster-5); }

/* When one cluster is active, dim the others */
.landing[data-active-cluster] .landing-cluster-zone .map-cluster { opacity: 0.4 !important; }
.landing[data-active-cluster="1"] .landing-cluster-zone .map-cluster[data-cluster="1"],
.landing[data-active-cluster="2"] .landing-cluster-zone .map-cluster[data-cluster="2"],
.landing[data-active-cluster="3"] .landing-cluster-zone .map-cluster[data-cluster="3"],
.landing[data-active-cluster="4"] .landing-cluster-zone .map-cluster[data-cluster="4"],
.landing[data-active-cluster="5"] .landing-cluster-zone .map-cluster[data-cluster="5"] {
  opacity: 1 !important;
  transform: translateX(4px);
}

/* Hover state: subtle motion + underline */
.landing-cluster-zone .map-cluster:hover .cluster-name,
.landing-cluster-zone .map-cluster:focus-visible .cluster-name {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.landing-cluster-zone .map-cluster:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 4px;
}

@media (max-width: 1000px) {
  .landing-cluster-zone {
    position: static;
    width: 100%;
    margin: 0 0 24px;
  }
}


/* ==========================================================================
   Cluster system v5 — titles (number + name, no subtitle) scattered around
   the continent in their cluster colors. Hover highlights the map outline;
   click navigates to research.html.
   ========================================================================== */

/* Hide subtitle/role line */
.landing-cluster-zone .map-cluster .cluster-role { display: none !important; }

/* Show the colored number chip alongside the name */
.landing-cluster-zone .map-cluster .cluster-num { display: inline-block !important; }

/* Reset the v4 stacked list — let each card position itself absolutely */
.landing-cluster-zone {
  position: static;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.landing-cluster-zone .map-cluster {
  position: absolute !important;
  inset: auto !important;
  width: auto;
  max-width: 220px;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  opacity: 1 !important;
  transform: none !important;
  z-index: 5;
}

/* Number chip — tiny colored monospace prefix */
.landing-cluster-zone .map-cluster .cluster-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent !important;
  color: inherit !important;
  padding: 4px 0 0 0 !important;
  flex-shrink: 0;
  line-height: 1;
}

/* Cluster name — bold, in the cluster color */
.landing-cluster-zone .map-cluster .cluster-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.005em;
  display: block;
}

/* Per-cluster color applied to the whole title */
.landing-cluster-zone .map-cluster[data-cluster="1"]              { color: var(--cluster-1); }
.landing-cluster-zone .map-cluster[data-cluster="2"]              { color: var(--cluster-2); }
.landing-cluster-zone .map-cluster[data-cluster="3"]              { color: var(--cluster-3); }
.landing-cluster-zone .map-cluster[data-cluster="4"]              { color: var(--cluster-4); }
.landing-cluster-zone .map-cluster[data-cluster="5"]              { color: var(--cluster-5); }
.landing-cluster-zone .map-cluster[data-cluster="1"] .cluster-name { color: var(--cluster-1) !important; }
.landing-cluster-zone .map-cluster[data-cluster="2"] .cluster-name { color: var(--cluster-2) !important; }
.landing-cluster-zone .map-cluster[data-cluster="3"] .cluster-name { color: var(--cluster-3) !important; }
.landing-cluster-zone .map-cluster[data-cluster="4"] .cluster-name { color: var(--cluster-4) !important; }
.landing-cluster-zone .map-cluster[data-cluster="5"] .cluster-name { color: var(--cluster-5) !important; }

/* Scattered positions around the continent (relative to .landing) */
/* 01 top-center, 02 upper-right, 03 lower-right, 04 lower-left, 05 upper-left */
.landing-cluster-zone .map-cluster[data-cluster="1"] { top: 110px;  left: 56%; max-width: 220px; }
.landing-cluster-zone .map-cluster[data-cluster="2"] { top: 22%;    right: 32px; max-width: 200px; text-align: right; }
.landing-cluster-zone .map-cluster[data-cluster="3"] { bottom: 90px; right: 22%; max-width: 230px; text-align: right; }
.landing-cluster-zone .map-cluster[data-cluster="4"] { bottom: 90px; left: 36%; max-width: 230px; }
.landing-cluster-zone .map-cluster[data-cluster="5"] { top: 22%;    left: 32px; max-width: 200px; }

/* Right-aligned variants flip the flex direction so num sits to the right */
.landing-cluster-zone .map-cluster[data-cluster="2"],
.landing-cluster-zone .map-cluster[data-cluster="3"] {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* Active/dim states (kept from v4) */
.landing[data-active-cluster] .landing-cluster-zone .map-cluster { opacity: 0.4 !important; }
.landing[data-active-cluster="1"] .landing-cluster-zone .map-cluster[data-cluster="1"],
.landing[data-active-cluster="2"] .landing-cluster-zone .map-cluster[data-cluster="2"],
.landing[data-active-cluster="3"] .landing-cluster-zone .map-cluster[data-cluster="3"],
.landing[data-active-cluster="4"] .landing-cluster-zone .map-cluster[data-cluster="4"],
.landing[data-active-cluster="5"] .landing-cluster-zone .map-cluster[data-cluster="5"] {
  opacity: 1 !important;
}

/* Hover treatment — underline on the name */
.landing-cluster-zone .map-cluster:hover .cluster-name,
.landing-cluster-zone .map-cluster:focus-visible .cluster-name {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.landing-cluster-zone .map-cluster:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 4px;
}

@media (max-width: 1000px) {
  /* On narrow viewports, restack as a simple list above the map */
  .landing-cluster-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 28px;
  }
  .landing-cluster-zone .map-cluster {
    position: static !important;
    width: 100%;
    max-width: 100% !important;
    text-align: left !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
}


/* ==========================================================================
   Cluster system v6 — revert to v1: cards at corners of map-stage,
   activated by hovering the 5 anchor hub cities (Cairo, Lagos, Addis Ababa,
   Kinshasa, Cape Town). Number chip + name only (no subtitle). Click → research.
   ========================================================================== */

/* Hide everything from v2-v5 */
.map-cluster-num               { display: none !important; }
.landing-cluster-zone           { display: none !important; }

/* Cluster cards live INSIDE .map-stage now (children of the stage, after the SVG) */
.map-stage > .map-cluster {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: auto;
  max-width: 240px;
  padding: 10px 14px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: var(--font-sans);
  color: var(--color-text);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px) !important;
  transition: opacity 280ms ease, transform 280ms ease, box-shadow 280ms ease;
  z-index: 4;
  box-shadow: var(--shadow-soft);
}

/* Hide the subtitle/role line — v1 had only number chip + name */
.map-stage > .map-cluster .cluster-role { display: none !important; }

/* Show the colored number chip */
.map-stage > .map-cluster .cluster-num {
  display: inline-block !important;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 2px 6px !important;
  border-radius: 4px;
  flex-shrink: 0;
  color: #fff !important;
  line-height: 1.4;
}
.map-stage > .map-cluster[data-cluster="1"] .cluster-num { background: var(--cluster-1); }
.map-stage > .map-cluster[data-cluster="2"] .cluster-num { background: var(--cluster-2); }
.map-stage > .map-cluster[data-cluster="3"] .cluster-num { background: var(--cluster-3); color: #1a1f1a !important; }
.map-stage > .map-cluster[data-cluster="4"] .cluster-num { background: var(--cluster-4); }
.map-stage > .map-cluster[data-cluster="5"] .cluster-num { background: var(--cluster-5); }

/* Cluster name — semibold, default text color */
.map-stage > .map-cluster .cluster-name {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--color-text) !important;
}

/* Border accents */
.map-stage > .map-cluster[data-cluster="1"] { border-color: var(--cluster-1); }
.map-stage > .map-cluster[data-cluster="2"] { border-color: var(--cluster-2); }
.map-stage > .map-cluster[data-cluster="3"] { border-color: var(--cluster-3); }
.map-stage > .map-cluster[data-cluster="4"] { border-color: var(--cluster-4); }
.map-stage > .map-cluster[data-cluster="5"] { border-color: var(--cluster-5); }

/* Position each card at a corner of .map-stage (v1 layout) */
.map-stage > .map-cluster[data-cluster="1"] { top:    -8px; right: -16px; }
.map-stage > .map-cluster[data-cluster="2"] { top:    44%;  left:  -28px; }
.map-stage > .map-cluster[data-cluster="3"] { top:    38%;  right: -28px; }
.map-stage > .map-cluster[data-cluster="4"] { bottom: 30%;  left:  -28px; }
.map-stage > .map-cluster[data-cluster="5"] { bottom: -8px; right: -16px; }

/* Activation: only the active cluster's card appears */
.map-stage[data-active-cluster="1"] > .map-cluster[data-cluster="1"],
.map-stage[data-active-cluster="2"] > .map-cluster[data-cluster="2"],
.map-stage[data-active-cluster="3"] > .map-cluster[data-cluster="3"],
.map-stage[data-active-cluster="4"] > .map-cluster[data-cluster="4"],
.map-stage[data-active-cluster="5"] > .map-cluster[data-cluster="5"] {
  opacity: 1;
  transform: translateY(0) !important;
}
.map-stage > .map-cluster:hover {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.map-stage > .map-cluster:hover .cluster-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Continent re-tints when a cluster is active (v1 used .map-stage attribute) */
.map-stage[data-active-cluster="1"] .map-continent { stroke: var(--cluster-1); filter: drop-shadow(0 0 12px rgba(92, 173, 89,0.6)); }
.map-stage[data-active-cluster="2"] .map-continent { stroke: var(--cluster-2); filter: drop-shadow(0 0 12px rgba(31,182,163,0.55)); }
.map-stage[data-active-cluster="3"] .map-continent { stroke: var(--cluster-3); filter: drop-shadow(0 0 12px rgba(212,160,23,0.55)); }
.map-stage[data-active-cluster="4"] .map-continent { stroke: var(--cluster-4); filter: drop-shadow(0 0 12px rgba(196,90,58,0.55)); }
.map-stage[data-active-cluster="5"] .map-continent { stroke: var(--cluster-5); filter: drop-shadow(0 0 12px rgba(111,95,201,0.55)); }

/* Show only the active cluster's leader line + outline anchor dot */
.map-stage[data-active-cluster="1"] .map-cluster-line[data-cluster="1"],
.map-stage[data-active-cluster="1"] .map-cluster-dot[data-cluster="1"],
.map-stage[data-active-cluster="2"] .map-cluster-line[data-cluster="2"],
.map-stage[data-active-cluster="2"] .map-cluster-dot[data-cluster="2"],
.map-stage[data-active-cluster="3"] .map-cluster-line[data-cluster="3"],
.map-stage[data-active-cluster="3"] .map-cluster-dot[data-cluster="3"],
.map-stage[data-active-cluster="4"] .map-cluster-line[data-cluster="4"],
.map-stage[data-active-cluster="4"] .map-cluster-dot[data-cluster="4"],
.map-stage[data-active-cluster="5"] .map-cluster-line[data-cluster="5"],
.map-stage[data-active-cluster="5"] .map-cluster-dot[data-cluster="5"] {
  opacity: 1;
}


/* ==========================================================================
   v7 — clusters removed. Hero sits centered higher up with two CTA buttons.
   ========================================================================== */

/* Hide every cluster element — cards, big numerals, leader lines, anchor dots,
   the upper-left zone, and the wrapping group around lines. */
.map-cluster,
.map-cluster-num,
.landing-cluster-zone,
.map-cluster-line,
.map-cluster-dot,
.map-cluster-lines,
.landing[data-active-cluster] *,
.map-stage[data-active-cluster] * {
  /* keep the rule scoped: only hide cluster-specific elements */
}
.map-cluster              { display: none !important; }
.map-cluster-num          { display: none !important; }
.landing-cluster-zone     { display: none !important; }
.map-cluster-lines,
.map-cluster-line,
.map-cluster-dot          { display: none !important; }

/* Reset the continent stroke override so it stays brand green regardless of
   any leftover data-active-cluster attributes */
.map-stage[data-active-cluster] .map-continent,
.landing[data-active-cluster]   .map-continent {
  stroke: var(--color-primary);
  filter: drop-shadow(0 0 10px rgba(92, 173, 89, 0.35));
}

/* (Legacy hero override rules removed — see v64 for the active hero typography.) */


/* ==========================================================================
   v9 — energy-line circuit connecting About-us cards + partnerships grid
   ========================================================================== */

/* Map-style connector above the 4 about-us cards.
   Solid line drawn as a pseudo-element on the container so it is GUARANTEED
   to pass through the centre of each card's ::before dot. */
.cards-circuit {
  position: relative;
  padding-top: 30px;
}
.cards-circuit::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(92, 173, 89, 0.4));
  z-index: 0;
}
.cards-circuit .grid {
  position: relative;
  z-index: 1;
}

/* Card aesthetic: node-dot at the top centre of each card sits exactly on the line */
.cards-circuit .card {
  position: relative;
  border-radius: 4px 4px 14px 14px;
  border-top: 2px solid var(--color-primary);
  padding-top: 22px;
}
.cards-circuit .card::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 10px rgba(92, 173, 89, 0.7);
  z-index: 2;
}
.cards-circuit .card .meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
@media (max-width: 900px) {
  /* On stacked layout, hide the horizontal connector — cards stack vertically */
  .cards-circuit::before { display: none; }
  .cards-circuit { padding-top: 0; }
  .cards-circuit .card { border-top-width: 2px; }
  .cards-circuit .card::before { top: -6px; }
}

/* ---------- Partnerships grid ---------- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 900px) { .partners-grid { grid-template-columns: 1fr; } }

.partner-cat {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 26px 26px;
  position: relative;
  transition: border-color var(--transition);
}
.partner-cat:hover { border-color: var(--color-primary); }
.partner-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
}
.partner-cat-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.partner-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  flex-shrink: 0;
  white-space: nowrap;
}
.partner-list {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.partner-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Dark mode adjustments — bullets read better at higher contrast */

/* ==========================================================================
   v10 — Partnerships: African universities map feature with leader-line list
   ========================================================================== */

.universities-feature {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px 32px 28px;
  margin-bottom: 28px;
}
.universities-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
}
.universities-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.universities-body { width: 100%; }
.universities-map {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.uni-continent {
  fill: rgba(92, 173, 89, 0.05);
  stroke: var(--color-primary);
  stroke-width: 1.4;
  opacity: 0.65;
}
.uni-rail {
  stroke: var(--color-primary);
  stroke-width: 1;
  opacity: 0.3;
}
.uni-leader {
  stroke: var(--color-primary);
  stroke-width: 1;
  opacity: 0.55;
}
.uni-dot {
  r: 6;
  fill: var(--color-primary);
  stroke: var(--color-bg);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgba(92, 173, 89, 0.6));
}
.uni-tick {
  r: 3;
  fill: var(--color-primary);
  opacity: 0.85;
}
.uni-label {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* 3-column variant of partners-grid for the remaining categories */
.partners-grid.partners-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
  .partners-grid.partners-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .partners-grid.partners-grid-3 { grid-template-columns: 1fr; }
}

/* Mobile: shrink the universities feature padding + label size */
@media (max-width: 760px) {
  .universities-feature { padding: 20px 18px 22px; }
  .uni-label { font-size: 36px; }
}

/* ==========================================================================
   v11 — Thematic-foci text bar + continent "lightbulb" glow
   ========================================================================== */

:root {
  --theme-urban:        #2db8c8;   /* Urban Transformation: cool teal/cyan */
  --theme-livelihoods:  #e8b32a;   /* Powering Livelihoods: warm amber */
  --theme-industrial:   #d97543;   /* Inclusive Industrialisation: terracotta */
}

/* Three theme labels sit AROUND the map (anchored to specific geographic
   reference points: Cairo, Luanda, Madagascar) — each in empty viewBox
   space so they don't overlap the continent silhouette. */
.theme-name {
  position: absolute;
  background: none;
  border: 0;
  padding: 6px 10px;
  font-family: "Roboto", "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  letter-spacing: 0.02em;
  color: #111111;
  cursor: pointer;
  z-index: 6;
  transform-origin: center;
  transition: transform 280ms ease, color 280ms ease,
              letter-spacing 280ms ease, text-shadow 280ms ease;
  white-space: nowrap;
}
/* Urban Transformation — above the map, centred over Cairo (≈70% x, 10% y).
   Sits at the top edge in the empty Mediterranean area. */
.theme-name.theme-name--top {
  top: -2%;
  left: 70%;
  transform: translateX(-50%);
  transform-origin: center top;
}
.theme-name.theme-name--top:hover,
.theme-name.theme-name--top:focus-visible {
  transform: translateX(-50%) scale(1.12);
}
/* Inclusive Industrialisation — inside the map, on the left at about
   Luanda's vertical level (≈63% y). Sits in empty Atlantic-ocean space
   west of the continent's west coast. */
.theme-name.theme-name--bl {
  top: 60%;
  left: 0;
  transform-origin: left center;
}
/* Powering Livelihoods — bottom-right of the map, just below Madagascar
   (Madagascar ends at ≈85% y). Sits in empty space below the island. */
.theme-name.theme-name--br {
  top: 90%;
  right: 0;
  transform-origin: right center;
}

/* Typewriter reveal — clip-path is animated so we don't need to know
   each label's exact width.  Each label has its own steps + delay. */
.theme-name-text {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation-fill-mode: forwards;
}
.theme-name[data-theme="industrial"] .theme-name-text {
  animation: typewriter 1.6s steps(27, end) 0.4s forwards;
}
.theme-name[data-theme="urban"] .theme-name-text {
  animation: typewriter 1.3s steps(20, end) 2.0s forwards;
}
.theme-name[data-theme="livelihoods"] .theme-name-text {
  animation: typewriter 1.3s steps(20, end) 3.4s forwards;
}
@keyframes typewriter { to { clip-path: inset(0 0 0 0); } }

/* Hover/focus: scale up + recolour to theme tone */
.theme-name:hover,
.theme-name:focus-visible {
  transform: scale(1.14);
  letter-spacing: 0.07em;
  outline: none;
}
.theme-name[data-theme="urban"]:hover,
.theme-name[data-theme="urban"]:focus-visible {
  color: var(--theme-urban);
  text-shadow: 0 0 16px rgba(45, 184, 200, 0.35);
}
.theme-name[data-theme="livelihoods"]:hover,
.theme-name[data-theme="livelihoods"]:focus-visible {
  color: var(--theme-livelihoods);
  text-shadow: 0 0 16px rgba(232, 179, 42, 0.35);
}
.theme-name[data-theme="industrial"]:hover,
.theme-name[data-theme="industrial"]:focus-visible {
  color: var(--theme-industrial);
  text-shadow: 0 0 16px rgba(217, 117, 67, 0.35);
}

/* ----- "Light bulb lighting up": continent glows in the active theme colour ----- */
.map-stage[data-active-theme="urban"] .map-continent {
  stroke: var(--theme-urban);
  filter: drop-shadow(0 0 18px rgba(45, 184, 200, 0.55));
}
.map-stage[data-active-theme="livelihoods"] .map-continent {
  stroke: var(--theme-livelihoods);
  filter: drop-shadow(0 0 18px rgba(232, 179, 42, 0.55));
}
.map-stage[data-active-theme="industrial"] .map-continent {
  stroke: var(--theme-industrial);
  filter: drop-shadow(0 0 18px rgba(217, 117, 67, 0.55));
}
.map-continent {
  transition: stroke 480ms ease, filter 480ms ease;
}

/* Mobile: shrink the labels so they fit around a smaller map */
@media (max-width: 760px) {
  .theme-name { font-size: 0.95rem; padding: 4px 6px; }
  .theme-name.theme-name--top:hover { transform: translateX(-50%) scale(1.08); }
  .theme-name.theme-name--bl:hover,
  .theme-name.theme-name--br:hover { transform: scale(1.08); }
}

/* ==========================================================================
   v12 — Eyebrow becomes 2 lines with the leading hairline aligned to line 1
   ========================================================================== */
.landing-copy .eyebrow { align-items: flex-start !important; }
.landing-copy .eyebrow::before { margin-top: 0.55em !important; }
.landing-copy .eyebrow-text { line-height: 1.45; }

/* ==========================================================================
   v13 — General About Us key-fact stats row
   ========================================================================== */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
.about-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-stat-num {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
}
.about-stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (max-width: 760px) {
  .about-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ==========================================================================
   v14 — Research page subtabs (Thematic areas / Clusters / Focal countries)
   ========================================================================== */

.research-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 36px;
}
.research-tab {
  background: none;
  border: 0;
  padding: 14px 22px;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color 200ms ease, border-color 200ms ease;
}
.research-tab:hover { color: var(--color-text); }
.research-tab.is-active {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}
.research-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.research-panel { display: none; }
.research-panel.is-active { display: block; animation: panelIn 320ms ease both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Theme cards (panel 1) ---------------------------------------------
   Three fine-line green-wireframe cards that "fit together" via hairline
   bridges with halo+dot nodes — same visual vocabulary as the modality
   triangle and Africa-map graphic.
   ------------------------------------------------------------------------ */
.themes-grid {
  display: grid;
  grid-template-columns: 1fr 64px 1fr 64px 1fr;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 900px) {
  .themes-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px 24px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  filter: drop-shadow(0 0 8px rgba(92, 173, 89, 0.18));
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 320ms ease,
              border-color 320ms ease;
  /* Theme colour shows up only as a small meta-tag accent. */
  --theme-color: var(--color-primary-dark);
}
.theme-card[data-theme="industrial"]  { --theme-color: #c45a3a; }
.theme-card[data-theme="urban"]       { --theme-color: #1f8a7a; }
.theme-card[data-theme="livelihoods"] { --theme-color: #b8861e; }

.theme-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 6px 24px rgba(92, 173, 89, 0.28));
}

/* --- Number node: halo + dot + numeric label, mirroring the map nodes --- */
.theme-card-node {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.theme-card-node-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(92, 173, 89, 0.18);
  border: 1px solid rgba(92, 173, 89, 0.45);
}
.theme-card-node-dot {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  border: 2px solid var(--color-bg-2);
  filter: drop-shadow(0 0 7px rgba(92, 173, 89, 0.85));
}
.theme-card-num {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.theme-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.theme-card-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}
.theme-card-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-color);
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* --- Bridge connector: hairline edge with a halo+dot node at each end,
       visually "joining" two adjacent cards. --- */
.theme-bridge {
  position: relative;
  align-self: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  /* Hairline horizontal line via a background gradient inset from each edge */
  background:
    linear-gradient(to right,
      transparent 6px,
      var(--color-primary) 6px,
      var(--color-primary) calc(100% - 6px),
      transparent calc(100% - 6px)) no-repeat center / 100% 1.5px;
  filter: drop-shadow(0 0 4px rgba(92, 173, 89, 0.5));
}
.theme-bridge::before,
.theme-bridge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  border: 2px solid var(--color-bg-2);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 5px rgba(92, 173, 89, 0.75));
}
.theme-bridge::before { left: 0; }
.theme-bridge::after  { right: 0; }

/* Mobile: bridges become vertical between stacked cards */
@media (max-width: 900px) {
  .theme-bridge {
    height: 64px;
    width: 100%;
    padding: 6px 0;
    background:
      linear-gradient(to bottom,
        transparent 6px,
        var(--color-primary) 6px,
        var(--color-primary) calc(100% - 6px),
        transparent calc(100% - 6px)) no-repeat center / 1.5px 100%;
  }
  .theme-bridge::before,
  .theme-bridge::after {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
  }
  .theme-bridge::before { top: 0; }
  .theme-bridge::after  { bottom: 0; }
}

/* ----- Cluster cards: 4-up row + wide row at the bottom ------------------
   Each card has a fabric-pattern graphic block at the top inspired by
   African textile motifs, in the AISESA green palette. Card 5 spans the
   full row at the bottom because that cluster works across all the others.
   ------------------------------------------------------------------------ */
.clusters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cluster-card--wide { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .clusters-grid { grid-template-columns: repeat(2, 1fr); }
  .cluster-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .clusters-grid { grid-template-columns: 1fr; }
}

.cluster-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-2);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  filter: drop-shadow(0 0 6px rgba(92, 173, 89, 0.15));
  scroll-margin-top: 100px;
  overflow: hidden;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 320ms ease;
}
.cluster-card:hover,
.cluster-card:target {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 22px rgba(92, 173, 89, 0.28));
}

/* Fabric graphic block — real fabric photo with a collage-style filter:
   tonal contrast/saturation tweak + a soft AISESA-green colour wash via
   mix-blend-mode + a hairline cream border + inner shadow, so the five
   different fabrics read as a unified torn-cloth swatch family. */
.cluster-card-graphic {
  width: 100%;
  height: 110px;
  border-bottom: 1px solid var(--color-primary);
  position: relative;
  overflow: hidden;
  background: #efeada;
  isolation: isolate;            /* keep the multiply blend local to this box */
}
.cluster-fabric {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.55) sepia(0.18) brightness(0.96);
  z-index: 0;
}
.cluster-card-graphic::after {
  /* AISESA-green wash — multiplies into the photo so every fabric is
     pulled toward the same green-leaning tonal family. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(92, 173, 89, 0.22),
              rgba(45, 89, 42, 0.32));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.cluster-card-graphic::before {
  /* Cream border ring + bottom shadow → torn-swatch feel.  Sits on top of
     the green wash so the trim stays clean and uncoloured. */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 2px rgba(241, 234, 218, 0.6),
    inset 0 -8px 18px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 2;
}

/* Compact card content area */
.cluster-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 18px;
  flex: 1;
}

/* --- Wide card layout: graphic on the LEFT, content on the right --- */
.cluster-card--wide {
  flex-direction: row;
  align-items: stretch;
}
.cluster-card--wide .cluster-card-graphic {
  width: 280px;
  height: auto;
  flex: 0 0 280px;
  border-bottom: 0;
  border-right: 1px solid var(--color-primary);
}
.cluster-card--wide .cluster-card-content {
  flex: 1;
  padding: 28px 32px 24px;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 760px) {
  .cluster-card--wide { flex-direction: column; }
  .cluster-card--wide .cluster-card-graphic {
    width: 100%;
    flex: 0 0 100px;
    height: 100px;
    border-right: 0;
    border-bottom: 1px solid var(--color-primary);
  }
}

/* --- Node, title, body, link --- */
.cluster-card-node {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.cluster-card-node-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(92, 173, 89, 0.16);
  border: 1px solid rgba(92, 173, 89, 0.42);
}
.cluster-card-node-dot {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  border: 2px solid var(--color-bg-2);
  filter: drop-shadow(0 0 6px rgba(92, 173, 89, 0.8));
}
.cluster-card-num {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}

.cluster-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.cluster-card--wide .cluster-card-title { font-size: 1.3rem; }

.cluster-card-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}
.cluster-card--wide .cluster-card-body { font-size: 0.95rem; max-width: 60ch; }

/* "Cross-cutting cluster" badge on the wide card */
.cluster-card-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(92, 173, 89, 0.12);
  border: 1px solid rgba(92, 173, 89, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
}

.cluster-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  text-decoration: none;
  transition: color 240ms ease, gap 240ms ease;
}
.cluster-card-link::after {
  content: "→";
  transition: transform 240ms ease;
}
.cluster-card-link:hover {
  color: var(--color-primary);
  gap: 12px;
}
.cluster-card-link:hover::after { transform: translateX(2px); }
.cluster-card--wide .cluster-card-link { align-self: flex-start; }

/* ----- Focal countries grid ----- */
.countries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.country {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 18px 22px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color 200ms ease, transform 200ms ease, color 200ms ease;
}
.country:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}
@media (max-width: 1000px) { .countries-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .countries-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   v15 — Research approach narrative (Realities → Pillars → Solution)
   ========================================================================== */

/* -------- Part 01 — African realities (warm, set apart from the rest) ------ */
.approach-realities {
  background: linear-gradient(180deg,
              rgba(212, 160, 23, 0.04) 0%,
              rgba(212, 160, 23, 0.01) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-top: 80px;
  padding-bottom: 80px;
}
.realities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 900px) { .realities-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .realities-grid { grid-template-columns: 1fr; } }

.reality {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.reality:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}
.reality-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--color-primary-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-primary-dark);
}
.reality h3 {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
  color: var(--color-text);
}

/* -------- Part 02 — Three pillars ----------------------------------------- */
.approach-pillars {
  padding-top: 80px;
  padding-bottom: 80px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }

.pillar {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 30px 30px 32px;
  position: relative;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.pillar:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 28px rgba(92, 173, 89, 0.08);
}
.pillar-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.pillar h3 {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.28;
  margin: 0 0 10px;
}
.pillar p { margin: 0; }

/* -------- Part 03 — Solution diagram -------------------------------------- */
.approach-solution {
  background: linear-gradient(180deg,
              rgba(92, 173, 89, 0.04) 0%,
              rgba(92, 173, 89, 0.0) 100%);
  border-top: 1px solid var(--color-border);
  padding-top: 80px;
  padding-bottom: 80px;
}
.solution-feature {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 30px 32px 28px;
  margin-top: 8px;
}
.solution-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.solution-continent {
  fill: rgba(92, 173, 89, 0.08);
  stroke: var(--color-primary);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 12px rgba(92, 173, 89, 0.18));
}
.solution-anchor {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: 0.04em;
  fill: var(--color-primary-dark);
  text-transform: uppercase;
}
.solution-anchor-1 { font-size: 42px; }
.solution-anchor-2 { font-size: 42px; }
.solution-rail {
  stroke: var(--color-primary);
  stroke-width: 1;
  opacity: 0.3;
}
.solution-leader {
  stroke: var(--color-primary);
  stroke-width: 1;
  opacity: 0.45;
}
.solution-core {
  r: 7;
  fill: var(--color-primary);
  stroke: var(--color-bg);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(92, 173, 89, 0.7));
}
.solution-tick {
  r: 4;
  fill: var(--color-primary);
}
.solution-offering {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

@media (max-width: 760px) {
  .solution-feature { padding: 18px; }
  .solution-anchor { font-size: 30px; }
  .solution-offering { font-size: 36px; }
}

/* ==========================================================================
   v15 — Interactive AISESA approach diagram (illustrated drawing + hotspots)
   ========================================================================== */

.approach-illustrated { padding: 60px 0 40px; }

/* Stage holds the illustration + the absolutely-positioned hotspots */
.approach-stage {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: visible;
  isolation: isolate;
}
.approach-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18),
              0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Hotspot dots — absolutely positioned over the image with % coords */
.approach-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 220ms cubic-bezier(0.2, 0.85, 0.25, 1),
              box-shadow 220ms ease,
              background-color 220ms ease;
  animation: approachDotPulse 2.6s ease-in-out infinite;
}
.approach-dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  opacity: 0.45;
  pointer-events: none;
}
.approach-dot:hover,
.approach-dot:focus-visible,
.approach-dot.is-active {
  transform: translate(-50%, -50%) scale(1.35);
  outline: none;
  animation-play-state: paused;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45),
              0 0 0 4px rgba(255, 255, 255, 0.55);
}
@keyframes approachDotPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
                         0 0 0 0 rgba(92, 173, 89, 0.55); }
  50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
                         0 0 0 12px rgba(92, 173, 89, 0); }
}

/* Variant colours so each region of the diagram reads at a glance */
.approach-dot--cluster {
  background: #e15691;
  border-color: #fff;
}
.approach-dot--cluster::before { border-color: #e15691; }
.approach-dot--cluster:hover,
.approach-dot--cluster:focus-visible,
.approach-dot--cluster.is-active {
  box-shadow: 0 6px 18px rgba(225, 86, 145, 0.45),
              0 0 0 4px rgba(255, 255, 255, 0.55);
}

.approach-dot--pillar {
  background: #4ea84a;
  border-color: #fff;
}
.approach-dot--pillar::before { border-color: #4ea84a; }

.approach-dot--solution {
  background: #ffffff;
  border-color: #fff;
  color: var(--color-primary-dark);
}
.approach-dot--solution::before { border-color: rgba(255, 255, 255, 0.85); }

/* Floating callout (single, JS-positioned near the active dot) */
.approach-callout {
  position: absolute;
  width: clamp(220px, 26vw, 320px);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.approach-callout.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.approach-callout.is-above { transform: translate(-50%, -16px); }
.approach-callout.is-above.is-visible { transform: translate(-50%, -100%); }
.approach-callout-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.approach-callout-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.approach-callout-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Region-tinted callouts so the colour cue follows through */
.approach-callout[data-region="reality"]   { border-top: 3px solid #e88341; }
.approach-callout[data-region="reality"]   .approach-callout-tag { color: #c46415; }
.approach-callout[data-region="cluster"]   { border-top: 3px solid #e15691; }
.approach-callout[data-region="cluster"]   .approach-callout-tag { color: #c43e7c; }
.approach-callout[data-region="pillar"]    { border-top: 3px solid #4ea84a; }
.approach-callout[data-region="pillar"]    .approach-callout-tag { color: #2f7a2c; }
.approach-callout[data-region="solution"]  { border-top: 3px solid var(--color-primary); }
.approach-callout[data-region="solution"]  .approach-callout-tag { color: var(--color-primary-dark); }

/* Legend below the diagram */
.approach-hint {
  margin: 18px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.approach-hint-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
  top: -1px;
}
.approach-hint-dot--reality  { background: #e88341; }
.approach-hint-dot--cluster  { background: #e15691; }
.approach-hint-dot--pillar   { background: #4ea84a; }
.approach-hint-dot--solution { background: var(--color-primary); }

@media (max-width: 760px) {
  .approach-dot { width: 18px; height: 18px; font-size: 0.7rem; }
  .approach-dot::before { inset: -5px; }
  .approach-callout { width: clamp(180px, 70vw, 260px); padding: 12px 14px; }
  .approach-callout-title { font-size: 0.95rem; }
}

/* ==========================================================================
   v16 — Widen approach illustration (sleek, near-bleed)
   ========================================================================== */
.approach-illustrated { padding: 28px 0 56px; }

.approach-stage--wide {
  max-width: min(1700px, calc(100vw - 56px));
  width: 100%;
  margin: 8px auto 0;
  border-radius: 8px;
  overflow: hidden;
}
.approach-stage--wide .approach-image {
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16),
              0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 760px) {
  .approach-stage--wide { max-width: calc(100vw - 32px); }
}

/* ==========================================================================
   v14 — Space between paragraphs in the research intro
   ========================================================================== */
.research-intro .section-title p + p { margin-top: 14px; }

/* ==========================================================================
   v15 — Research intro: Policy / Research / Practice modality triangle
   Style mirrors the home-page Africa-map graphic — AISESA-green strokes,
   halo pulses, drawn-in edges, drop-shadow glow.
   ========================================================================== */
.research-intro {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 48px;
}
.research-intro .section-title { flex: 1 1 460px; min-width: 0; }

.modality {
  flex: 0 0 437px;
  width: 437px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.modality-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.modality-caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Triangle face (the interface where modes converge) --- */
.mod-face {
  fill: rgba(92, 173, 89, 0.07);
  stroke: none;
}

/* --- Outer triangle edges --- */
.mod-edge {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(92, 173, 89, 0.55));
}

/* --- Vertex node halos & dots --- */
.mod-node-halo {
  fill: rgba(92, 173, 89, 0.18);
  stroke: rgba(92, 173, 89, 0.45);
  stroke-width: 1;
}
.mod-node-dot {
  fill: var(--color-primary-dark);
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(92, 173, 89, 0.85));
}

/* --- Vertex labels --- */
.mod-label {
  fill: var(--color-primary-dark);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Tablet / mobile: shrink the triangle and centre it under the text */
@media (max-width: 920px) {
  .modality {
    flex: 1 1 100%;
    width: 100%;
    max-width: 437px;
    margin: 12px auto 0;
  }
}

/* ==========================================================================
   v17 — Cluster pages (cluster-1 ... cluster-5)
   ========================================================================== */

/* Fabric photo banner sitting just below the page header on cluster pages.
   Reuses the same collage filter as the cluster cards on the research page. */
.cluster-page-banner { padding: 12px 0 4px; }
.cluster-page-graphic {
  width: 100%;
  height: 220px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
}
@media (max-width: 700px) {
  .cluster-page-graphic { height: 150px; }
}

/* Cross-cutting badge on cluster 5 */
.cross-cutting-note {
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid rgba(92, 173, 89, 0.4);
  background: rgba(92, 173, 89, 0.06);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cross-cutting-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  padding: 4px 10px;
  border: 1px solid rgba(92, 173, 89, 0.4);
  background: rgba(92, 173, 89, 0.12);
  border-radius: 999px;
}
.cross-cutting-note p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* Focus areas grid: 4-up wireframe-style cards matching the green-node aesthetic */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 760px) { .focus-grid { grid-template-columns: 1fr; } }

.focus-card {
  position: relative;
  padding: 26px 26px 22px 30px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  filter: drop-shadow(0 0 6px rgba(92, 173, 89, 0.12));
}
.focus-card-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}
.focus-card-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.22;
}
.focus-card-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* "The other clusters" navigation strip — quick links to peer clusters */
.other-clusters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 900px) { .other-clusters-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .other-clusters-grid { grid-template-columns: 1fr; } }

.other-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 280ms ease,
              filter 280ms ease;
}
.other-cluster:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  filter: drop-shadow(0 6px 18px rgba(92, 173, 89, 0.22));
}
.other-cluster-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--color-primary-dark);
}
.other-cluster-title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.other-cluster-arrow {
  font-family: var(--font-mono);
  color: var(--color-primary);
  transition: transform 280ms ease;
}
.other-cluster:hover .other-cluster-arrow { transform: translateX(3px); }

/* ==========================================================================
   v18 — Members CTA panel + dedicated members directory page
   ========================================================================== */

/* Distinct warm-toned CTA section that links to the members directory.
   Sits in the colour space between the Knowledge Hub (warm cream) and the
   AISESA-green primary, so it reads as something special on people.html. */
.section-members-cta {
  position: relative;
  padding: 84px 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(92, 173, 89, 0.10), transparent 55%),
    radial-gradient(circle at 82% 82%, rgba(217, 117, 67, 0.08), transparent 55%),
    linear-gradient(180deg, #efeada, #e6dfca);
  border-top: 1px solid rgba(92, 173, 89, 0.25);
  border-bottom: 1px solid rgba(92, 173, 89, 0.25);
}
.members-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.members-cta-inner .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.members-cta-inner h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #1a1814;
}
.members-cta-inner .lead {
  margin: 0;
  max-width: 56ch;
  color: #3d362c;
  font-size: 1.05rem;
  line-height: 1.55;
}
.members-cta-btn {
  margin-top: 8px;
  padding: 14px 28px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: var(--color-primary-dark);
  color: #fff;
  border: 0;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 240ms ease,
              box-shadow 280ms ease;
  box-shadow: 0 6px 18px rgba(74, 142, 68, 0.28);
}
.members-cta-btn:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(74, 142, 68, 0.35);
  color: #fff;
}

/* Members directory grid: dense, clean cards */
.members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 1100px) { .members-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .members-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .members-grid { grid-template-columns: 1fr; } }

.member-card {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 280ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.member-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.member-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #3F8A3A;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Mono", monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.member-card h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.22;
}
.member-card .role {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.member-card .links {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.member-card .links a {
  color: var(--color-primary-dark);
  text-decoration: none;
}
.member-card .links a:hover { color: var(--color-primary); }

/* ==========================================================================
   v19 — Members directory: filter + search toolbar
   ========================================================================== */

.members-toolbar {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Search input */
.members-search-wrap {
  position: relative;
  width: 100%;
}
.members-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  pointer-events: none;
}
.members-search {
  width: 100%;
  padding: 14px 16px 14px 42px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 0.98rem;
  color: var(--color-text);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.members-search::placeholder { color: var(--color-text-muted); }
.members-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(92, 173, 89, 0.15);
}

/* Filter row */
.members-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-group {
  position: relative;
}
.filter-group > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  user-select: none;
  transition: border-color 240ms ease, background 240ms ease;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary:hover { border-color: var(--color-primary); }
.filter-group.is-active > summary {
  background: rgba(92, 173, 89, 0.12);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.filter-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.04em;
}
.filter-caret {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  transition: transform 240ms ease;
}
.filter-group[open] > summary .filter-caret { transform: rotate(180deg); }

/* The dropdown panel */
.filter-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease;
}
.filter-opt:hover { background: rgba(92, 173, 89, 0.08); }
.filter-opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 160ms ease, background 160ms ease;
}
.filter-opt input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.filter-opt input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Clear button */
.members-clear {
  margin-left: auto;
  padding: 8px 16px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.members-clear:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}

/* Result count */
.members-result-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.members-result-count #members-count {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Empty state */
.members-empty {
  margin: 24px 0 0;
  padding: 28px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-2);
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
}
.members-empty-clear {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-primary-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* Member meta line (country · field) */
.member-card .member-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .filter-list { min-width: 240px; max-height: 260px; }
  .members-clear { margin-left: 0; }
}

/* ==========================================================================
   v20 — Member-led groups: constellation visual + cards + modal popups
   Bright green-gold-orange palette, fine-line nodes / mesh edges (Africa-map
   style), modal popups for the Learn-more details.
   ========================================================================== */

.groups-section { padding: 56px 0; }


/* Group cards beneath the constellation */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 12px;
}
@media (max-width: 760px) { .groups-grid { grid-template-columns: 1fr; } }

.group-card {
  position: relative;
  padding: 30px 28px 26px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms ease, border-color 280ms ease;
}
.group-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 4px;
  border-radius: 2px;
  transition: width 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Group-card accent patterns cycle by position (1-5), not by name — so the
   look stays consistent and varied no matter which groups exist or how
   many are added/removed. accent-1/accent-2 match the original
   minerals/youth colors so existing groups don't visually shift. */
.group-card--accent-1::before { background: linear-gradient(90deg, #5CAD59, #d4a017); }
.group-card--accent-2::before { background: linear-gradient(90deg, #d4a017, #c45a3a); }
.group-card--accent-3::before { background: linear-gradient(90deg, #4F8FA5, #5CAD59); }
.group-card--accent-4::before { background: linear-gradient(90deg, #d97543, #e15691); }
.group-card--accent-5::before { background: linear-gradient(90deg, #2F6E2C, #C19A4A); }
.group-card:hover { transform: translateY(-4px); border-color: rgba(212, 160, 23, 0.5); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); }
.group-card:hover::before { width: 100%; }

.group-card-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.group-card--accent-1 .group-card-tag { color: #6b8a30; }
.group-card--accent-2 .group-card-tag { color: #c45a3a; }
.group-card--accent-3 .group-card-tag { color: #3d7286; }
.group-card--accent-4 .group-card-tag { color: #c15a2e; }
.group-card--accent-5 .group-card-tag { color: #2F6E2C; }

.group-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.group-card-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}
.group-learn-more {
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 18px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}
.group-card--accent-1 .group-learn-more {
  background: linear-gradient(90deg, #5CAD59, #d4a017);
  box-shadow: 0 6px 16px rgba(160, 144, 48, 0.32);
}
.group-card--accent-2 .group-learn-more {
  background: linear-gradient(90deg, #d4a017, #c45a3a);
  box-shadow: 0 6px 16px rgba(207, 106, 58, 0.32);
}
.group-card--accent-3 .group-learn-more {
  background: linear-gradient(90deg, #4F8FA5, #5CAD59);
  box-shadow: 0 6px 16px rgba(79, 143, 165, 0.32);
}
.group-card--accent-4 .group-learn-more {
  background: linear-gradient(90deg, #d97543, #e15691);
  box-shadow: 0 6px 16px rgba(217, 117, 67, 0.32);
}
.group-card--accent-5 .group-learn-more {
  background: linear-gradient(90deg, #2F6E2C, #C19A4A);
  box-shadow: 0 6px 16px rgba(47, 110, 44, 0.32);
}
.group-learn-more:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.06);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

/* ----- Modal popup for group details ----- */
.group-modal[hidden] { display: none; }
.group-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: groupModalIn 240ms ease;
}
@keyframes groupModalIn { from { opacity: 0; } to { opacity: 1; } }

.group-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 18, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.group-modal-card {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 44px 44px 36px;
  background: var(--color-bg-2);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  animation: groupModalCardIn 320ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
@keyframes groupModalCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.group-modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 10px 10px 0 0;
}
.group-modal-card--accent-1::before { background: linear-gradient(90deg, #5CAD59, #a09030, #d4a017); }
.group-modal-card--accent-2::before { background: linear-gradient(90deg, #d4a017, #cf6a3a, #c45a3a); }
.group-modal-card--accent-3::before { background: linear-gradient(90deg, #4F8FA5, #6b9c81, #5CAD59); }
.group-modal-card--accent-4::before { background: linear-gradient(90deg, #d97543, #d9608a, #e15691); }
.group-modal-card--accent-5::before { background: linear-gradient(90deg, #2F6E2C, #6a8639, #C19A4A); }

.group-modal-close {
  position: absolute;
  top: 16px; right: 18px;
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: color 200ms ease, background 200ms ease;
}
.group-modal-close:hover { color: var(--color-text); background: var(--color-bg-3); }

.group-modal-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.group-modal-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--color-text);
}
.group-modal-lead {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.group-modal-h3 {
  margin: 22px 0 8px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.group-modal-card p {
  margin: 0 0 6px;
  line-height: 1.6;
  color: var(--color-text);
  font-size: 0.95rem;
}
.group-modal-list {
  margin: 0 0 6px;
  padding-left: 20px;
  line-height: 1.6;
  color: var(--color-text);
  font-size: 0.95rem;
}
.group-modal-list li { margin-bottom: 6px; }

.group-modal-cta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .group-modal-card { padding: 36px 24px 28px; }
}

/* ==========================================================================
   v21 — About page: cycling "AISESA is a network/platform/movement" headline
   ========================================================================== */

.about-dynamic-h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem) !important;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.aisesa-cycle {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.cycle-word {
  color: var(--color-primary);
  font-weight: 500;
}
.cycle-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--color-primary);
  font-weight: 300;
  animation: cursor-blink 1s steps(1, end) infinite;
  transform: translateY(-0.04em);
}
@keyframes cursor-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ==========================================================================
   v22 — Cluster pages: Latest outputs grid + Collaborations block
   ========================================================================== */

/* ---------- Latest outputs (3 cards: Outputs / Ecosystem mapping / Roadmap) */
.cluster-outputs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 900px) { .cluster-outputs-grid { grid-template-columns: 1fr; } }

.output-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  filter: drop-shadow(0 0 6px rgba(92, 173, 89, 0.14));
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 320ms ease;
}
.output-card:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 22px rgba(92, 173, 89, 0.26));
}
.output-card-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.output-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.output-card-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}
.output-card-kind {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 4px;
}
.output-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  text-decoration: none;
  align-self: flex-start;
  transition: color 240ms ease, gap 240ms ease;
}
.output-card-link:hover { color: var(--color-primary); gap: 10px; }

/* ---------- Collaborations: cross-cluster + thematic, side by side */
.collab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 8px;
}
@media (max-width: 800px) { .collab-grid { grid-template-columns: 1fr; gap: 28px; } }

.collab-block-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.collab-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.collab-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}
.collab-item:last-child { border-bottom: 0; }

.collab-num {
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(92, 173, 89, 0.16);
  border: 1px solid rgba(92, 173, 89, 0.5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}

.collab-body { flex: 1; min-width: 0; }
.collab-title {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.collab-title a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.collab-title a:hover {
  color: var(--color-primary-dark);
  border-color: rgba(92, 173, 89, 0.4);
}
.collab-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Thematic items: a coloured dot replaces the number circle */
.collab-item--theme .collab-theme-dot {
  flex: 0 0 38px;
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: relative;
}
.collab-item--theme .collab-theme-dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
}
.collab-item--theme[data-theme="industrial"]  .collab-theme-dot       { background: rgba(196, 90, 58, 0.16); border: 1px solid rgba(196, 90, 58, 0.5); }
.collab-item--theme[data-theme="industrial"]  .collab-theme-dot::before { background: #c45a3a; box-shadow: 0 0 8px rgba(196, 90, 58, 0.6); }
.collab-item--theme[data-theme="urban"]       .collab-theme-dot       { background: rgba(31, 138, 122, 0.16); border: 1px solid rgba(31, 138, 122, 0.5); }
.collab-item--theme[data-theme="urban"]       .collab-theme-dot::before { background: #1f8a7a; box-shadow: 0 0 8px rgba(31, 138, 122, 0.6); }
.collab-item--theme[data-theme="livelihoods"] .collab-theme-dot       { background: rgba(184, 134, 30, 0.16); border: 1px solid rgba(184, 134, 30, 0.5); }
.collab-item--theme[data-theme="livelihoods"] .collab-theme-dot::before { background: #b8861e; box-shadow: 0 0 8px rgba(184, 134, 30, 0.6); }


/* ==========================================================================
   v23 — Resources page: sub-nav, dropdown-filter publications, webinar
   archive grid, and Tools / Observatories "coming soon" panel.
   ========================================================================== */

/* ----- Sub-nav (sticky tab row beneath the page header) ----- */
.res-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface, #fff);
  border-bottom: 2px solid var(--color-text);
}
.res-subnav-inner {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.res-subnav-inner::-webkit-scrollbar { display: none; }
.res-subnav a {
  padding: 18px 26px 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.res-subnav a:hover { color: var(--color-text); }
.res-subnav a.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
.res-subnav a .res-subnav-count {
  margin-left: 6px;
  color: var(--color-text-faint);
  font-weight: 400;
}

/* ----- Section header block on Resources page ----- */
.res-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-rule);
}
.res-section-head h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
}
.res-section-head p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ----- Publications: refined database list using existing .pub-list ----- */
.res-pub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.res-pub-search {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  background: var(--color-surface, #fff);
  border: 1.5px solid var(--color-text);
  transition: border-color .15s;
}
.res-pub-search:focus-within { border-color: var(--color-primary); }
.res-pub-search-icon {
  padding: 0 12px 0 16px;
  font-size: 18px;
  color: var(--color-text);
}
.res-pub-search input {
  flex: 1;
  padding: 12px 14px 12px 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-text);
}
.res-pub-search input::placeholder { color: var(--color-text-faint); font-style: italic; }

.res-pub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.res-pub-stats {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.res-pub-stats span { color: var(--color-text); font-weight: 600; }

.res-pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.res-pub-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(92, 173, 89, 0.08);
  color: var(--color-primary-dark);
  border: 1px solid rgba(92, 173, 89, 0.3);
}
.res-pub-tag.res-pub-tag--theme {
  background: rgba(184, 134, 30, 0.1);
  color: #8a6014;
  border-color: rgba(184, 134, 30, 0.35);
}
.res-pub-tag.res-pub-tag--type {
  background: rgba(31, 31, 31, 0.05);
  color: var(--color-text);
  border-color: rgba(31, 31, 31, 0.15);
}

.res-pub-empty {
  padding: 36px 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ----- Webinar archive grid ----- */
.res-webinar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.res-webinar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-rule);
  padding-bottom: 18px;
  transition: border-color .2s, transform .25s;
}
.res-webinar:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.res-webinar-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #2d3a2c, #1a1f1a);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-rule);
}
.res-webinar-thumb.t-alt-1 { background: linear-gradient(135deg, #5CAD59, #2a5926); }
.res-webinar-thumb.t-alt-2 { background: linear-gradient(135deg, #c98a2b, #7a4f12); }
.res-webinar-thumb.t-alt-3 { background: linear-gradient(135deg, #1f8a7a, #0e3e37); }
.res-webinar-thumb.t-alt-4 { background: linear-gradient(135deg, #b89a6a, #5b4419); }
.res-webinar-thumb.t-alt-5 { background: linear-gradient(135deg, #6a5f50, #2f2a23); }
.res-webinar-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px);
  mix-blend-mode: overlay;
}
.res-webinar-play {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
.res-webinar:hover .res-webinar-play { transform: scale(1.08); }
.res-webinar-play svg { width: 24px; height: 24px; }
.res-webinar-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 3px 7px;
}
.res-webinar-speaker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 16px;
}
.res-webinar h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
  padding: 0 16px;
}
.res-webinar h3 a { color: var(--color-text); text-decoration: none; }
.res-webinar h3 a:hover { color: var(--color-primary-dark); }
.res-webinar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 16px;
}

/* ----- Tools & Observatories "coming soon" panel ----- */
.res-tools-coming {
  position: relative;
  padding: 64px 48px;
  background:
    repeating-linear-gradient(135deg, rgba(92, 173, 89, 0.04) 0 1px, transparent 1px 14px),
    var(--color-surface, #fff);
  border: 1.5px dashed var(--color-rule);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.res-tools-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  padding: 6px 14px;
  border: 1px solid var(--color-primary);
  background: rgba(92, 173, 89, 0.06);
  border-radius: 999px;
}
.res-tools-coming h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 28ch;
}
.res-tools-coming p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.res-tools-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
  width: 100%;
  max-width: 920px;
  opacity: 0.65;
}
.res-tools-preview-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  padding: 22px 22px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.res-tools-preview-card::after {
  content: "Coming soon";
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.res-tools-preview-card h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: -0.012em;
}
.res-tools-preview-card .res-tools-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.res-tools-preview-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .res-webinar-grid { grid-template-columns: 1fr 1fr; }
  .res-tools-preview { grid-template-columns: 1fr 1fr; }
  .res-section-head { flex-direction: column; align-items: flex-start; }
  .res-pub-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .res-subnav a { padding: 14px 18px 12px; font-size: 0.68rem; letter-spacing: 0.18em; }
  .res-webinar-grid { grid-template-columns: 1fr; }
  .res-tools-preview { grid-template-columns: 1fr; }
  .res-tools-coming { padding: 44px 22px; }
}

/* ==========================================================================
   v24 — Hamburger / off-canvas nav pattern (alt to dropdown toolbar)
   Compact top bar with a single "Menu" trigger; clicking it opens a
   side-panel containing the full navigation, grouped by section.
   ========================================================================== */

.site-header.site-header--burger { background: var(--color-surface, #fff); }
.site-header.site-header--burger .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 24px;
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
}

/* Skip-to-content link — visible on focus, important for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--color-primary, #5CAD59);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* The trigger — three horizontal lines, with a visible "Menu" label
   (WRI does the same — never icon-only, which fails for screen readers). */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  background: transparent;
  border: 1.5px solid var(--color-text, #1f1f1f);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.menu-trigger:hover,
.menu-trigger:focus-visible {
  background: var(--color-text);
  color: #fff;
  outline: none;
}
.menu-trigger:focus-visible {
  outline: 3px solid var(--color-primary, #5CAD59);
  outline-offset: 2px;
}
.menu-trigger-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.menu-trigger-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.menu-trigger-label { line-height: 1; }

/* Backdrop — dims the page when the panel is open */
.nav-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 22, 0.55);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-panel-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* The panel itself — slides in from the right */
.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(560px, 92vw);
  background: var(--color-surface, #fff);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
}
.nav-panel.is-open { transform: translateX(0); }

.nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--color-rule);
}
.nav-panel-head .brand-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nav-panel-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--color-text);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text);
  transition: background .15s, color .15s;
}
.nav-panel-close:hover,
.nav-panel-close:focus-visible {
  background: var(--color-text);
  color: #fff;
  outline: none;
}
.nav-panel-close:focus-visible {
  outline: 3px solid var(--color-primary, #5CAD59);
  outline-offset: 2px;
}

.nav-panel-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nav-panel-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-rule);
}
.nav-panel-group:last-child { border-bottom: 0; }

.nav-panel-group > .nav-panel-head-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 6px 0 12px;
}

.nav-panel a.nav-panel-top {
  display: block;
  padding: 14px 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.012em;
  color: var(--color-text);
  text-decoration: none;
  transition: color .15s, padding .15s;
  position: relative;
}
.nav-panel a.nav-panel-top:hover,
.nav-panel a.nav-panel-top:focus-visible {
  color: var(--color-primary-dark, #3f8a3a);
  padding-left: 8px;
  text-decoration: none;
  outline: none;
}
.nav-panel a.nav-panel-top:focus-visible {
  background: rgba(92, 173, 89, 0.08);
}
.nav-panel a.nav-panel-top::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .15s, transform .15s;
  color: var(--color-primary-dark, #3f8a3a);
}
.nav-panel a.nav-panel-top:hover::after,
.nav-panel a.nav-panel-top:focus-visible::after {
  opacity: 1;
  transform: translate(-4px, -50%);
}

.nav-panel-sub {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--color-rule);
  display: flex;
  flex-direction: column;
}
.nav-panel-sub li { margin: 0; }
.nav-panel-sub a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s, padding .15s;
}
.nav-panel-sub a:hover,
.nav-panel-sub a:focus-visible {
  color: var(--color-text);
  padding-left: 6px;
  outline: none;
}
.nav-panel-sub a:focus-visible { background: rgba(92, 173, 89, 0.08); }

.nav-panel-footer {
  padding: 18px 32px 28px;
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}
.nav-panel-footer .nav-panel-cta {
  display: inline-block;
  padding: 14px 22px;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background .15s;
}
.nav-panel-footer .nav-panel-cta:hover,
.nav-panel-footer .nav-panel-cta:focus-visible {
  background: var(--color-primary-dark, #3f8a3a);
  outline: none;
}
.nav-panel-footer .nav-panel-cta:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.nav-panel-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.nav-panel-meta a { color: var(--color-text-muted); text-decoration: none; }
.nav-panel-meta a:hover { color: var(--color-text); }

/* Lock body scroll when panel is open */
body.nav-panel-open { overflow: hidden; }

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .nav-panel-backdrop { transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   v25 — Toolbar dropdown — comfort fixes
   - Eliminate the dead-zone gap that closes menus mid-travel
   - Bigger items, more breathing room
   - Visual state when a menu is open (parent button, caret rotation)
   - Smooth fade so menus don't snap in/out
   - Wider menu for the Research cluster names that wrap awkwardly
   ========================================================================== */

/* Remove the 8px gap that breaks hover travel. We instead use a transparent
   bridge so the cursor never crosses dead space. */
.has-dropdown {
  position: relative;
}
.has-dropdown > .nav-toggle {
  position: relative;
}
.has-dropdown > .nav-toggle::after {
  /* invisible hover bridge below the parent button */
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -14px;   /* extends down to meet the dropdown's top edge */
  height: 14px;
  pointer-events: auto;
  background: transparent;
}

/* Dropdown panel — touches the trigger (no gap), gentle fade in/out */
.dropdown {
  top: 100% !important;          /* zero gap */
  left: -8px;
  min-width: 280px;              /* wider so long cluster names fit one line */
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(26,31,26,0.04), 0 18px 40px rgba(26,31,26,0.12);
  display: block !important;     /* always rendered, hidden via opacity */
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

/* Wider menu specifically for the Research dropdown (5 long cluster names) */
.has-dropdown.has-dropdown--wide > .dropdown {
  min-width: 360px;
}

/* Larger, more comfortable items */
.dropdown li a {
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  border-radius: 10px;
  color: var(--color-text);
  transition: background 140ms ease, color 140ms ease, padding 140ms ease;
}
.dropdown li a:hover,
.dropdown li a:focus-visible {
  background: rgba(92, 173, 89, 0.08);
  color: var(--color-primary-dark);
  padding-left: 20px;             /* small affordance — items shift on hover */
  outline: none;
}
.dropdown li a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Visual state on the parent button while the menu is open */
.has-dropdown:hover > .nav-toggle,
.has-dropdown:focus-within > .nav-toggle,
.has-dropdown.is-open > .nav-toggle {
  background: rgba(26, 31, 26, 0.06);
  color: var(--color-text);
}
.has-dropdown .caret {
  transition: transform 180ms ease;
  margin-left: 2px;
}
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret,
.has-dropdown.is-open .caret {
  transform: translateY(1px) rotate(-180deg);
  opacity: 1;
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dropdown { transition: opacity 0s, transform 0s, visibility 0s; }
  .has-dropdown .caret { transition: transform 0s; }
}

/* ==========================================================================
   v26 — Our-work dropdown: divider + Insights Hub flagged as a different
   destination (warm ochre, ↗ arrow icon, slight indent).
   ========================================================================== */
.dropdown li.dropdown-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--color-rule);
  padding: 0;
  list-style: none;
}
.dropdown li.dropdown-divider:hover { background: var(--color-rule); }

.dropdown a.dropdown-insights {
  background: rgba(201, 138, 43, 0.06);
  color: #9C6817;          /* ochre-dark */
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown a.dropdown-insights:hover,
.dropdown a.dropdown-insights:focus-visible {
  background: rgba(201, 138, 43, 0.14);
  color: #C98A2B;
  padding-left: 20px;
}

/* ==========================================================================
   v27 — Research page: remove tabs (themes always shown inline), add
   "Latest from Insights" editorial block on the institutional page.
   ========================================================================== */

/* Hide the now-unused tab buttons (kept in DOM in case they get restored). */
.research-tabs { display: none !important; }
.research-panel[hidden] { display: none; }
.research-panel.is-active { display: block; }

/* The clusters teaser sits between Themes and Focal countries — keep some breathing room */
.research-clusters-teaser { padding-top: 28px; }
.research-focal { padding-top: 28px; }

/* ----- Latest from Insights ----- *
 * Editorial flavour on the institutional page: soft warm-paper tint band,
 * serif standfirst, monospace byline — still within the main palette.       */
.research-insights {
  padding: 80px 0 96px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF5 100%);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  position: relative;
}
.research-insights::before {
  /* slim green tick on the upper-left, signalling "this is editorial space" */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6%;
  height: 3px;
  background: var(--color-primary);
}

.research-insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--color-text);
  position: relative;
}
.research-insights-head::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0;
  width: 60px; height: 2px;
  background: var(--color-primary);
}
.research-insights-head .eyebrow { color: var(--color-primary-dark); }
.research-insights-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 6px 0 8px;
}
.research-insights-lead {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.04rem;
  color: var(--color-text-muted);
  max-width: 56ch;
}
.research-insights-allcta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.research-insights-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) {
  .research-insights-grid { grid-template-columns: 1fr; }
}

.research-insight-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-rule);
}
.research-insight-card.is-lead { border-bottom: 0; padding-right: 16px; }

.research-insight-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  width: max-content;
  padding: 4px 10px;
  background: rgba(92, 173, 89, 0.08);
  border: 1px solid rgba(92, 173, 89, 0.3);
  border-radius: 4px;
}

.research-insight-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}
.research-insight-card.is-lead h3 {
  font-size: 1.65rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.research-insight-card.is-lead h3 em {
  font-style: italic;
  color: var(--color-primary-dark);
  font-weight: 600;
}
.research-insight-card h3 a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.research-insight-card h3 a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}
.research-insight-card .standfirst {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-text-2, #3a3a3a);
}
.research-insight-card.is-lead .standfirst {
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.research-insight-card .byline {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.research-insight-card .byline strong { color: var(--color-text); font-weight: 600; }

/* ==========================================================================
   v28 — Research page: dedicated cluster page, CTA panel, ochre Insights
   section styled like project cards, and improved vertical rhythm.
   ========================================================================== */

/* Drop the old editorial Latest-from-Insights block styles — superseded */
.research-insights,
.research-insights-head,
.research-insights-grid,
.research-insight-card { all: revert; }

/* ----- Cluster CTA panel ----- */
.research-clusters-cta { padding-top: 8px; }
.cluster-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 30px 36px;
  background: linear-gradient(135deg, rgba(92, 173, 89,0.04), rgba(92, 173, 89,0.01));
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-primary);
  margin-top: 8px;
}
.cluster-cta-copy { flex: 1; }
.cluster-cta-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  display: block;
  margin-bottom: 6px;
}
.cluster-cta-copy p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 56ch;
}
.cluster-cta-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cluster-cta-panel { flex-direction: column; align-items: flex-start; padding: 24px; }
  .cluster-cta-btn { width: 100%; text-align: center; }
}

/* ----- Improved spacing across research.html ----- */
.research-panel.is-active,
.research-clusters-cta,
.research-focal {
  padding-top: 52px;
  padding-bottom: 12px;
}
.themes-grid { margin-top: 32px; }

/* ----- The new Insights section (was Active Projects) — ochre accents ----- */
.section-insights {
  background: linear-gradient(180deg, #fffaf2 0%, #faf3e6 100%);
  border-top: 1px solid rgba(201, 138, 43, 0.25);
  border-bottom: 1px solid rgba(201, 138, 43, 0.25);
  position: relative;
}
.section-insights::before {
  /* slim ochre tick top-left signalling editorial space */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 80px;
  height: 4px;
  background: #C98A2B;
}
.section-insights .eyebrow {
  color: #9C6817;
}
.section-insights h2 {
  font-family: var(--font-serif);
  letter-spacing: -0.018em;
}
.section-insights h2 em { font-style: italic; color: #9C6817; font-weight: 600; }
.section-insights .subtle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* Insight cards reuse .card / .project-card patterns but tinted ochre */
.insight-project {
  background: #ffffff;
  border: 1px solid rgba(201, 138, 43, 0.22);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s, transform .25s, box-shadow .25s;
}
.insight-project:hover {
  border-color: #C98A2B;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(201, 138, 43, 0.12);
}
.insight-project .thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f0e0c0, #c98a2b);
}
.insight-project .thumb--insight-1 {
  background:
    radial-gradient(circle at 25% 35%, rgba(201,138,43,0.45), transparent 55%),
    linear-gradient(135deg, #d6c8a4 0%, #8a6e3a 100%);
}
.insight-project .thumb--insight-2 {
  background:
    linear-gradient(135deg, #c98a2b 0%, #5CAD59 70%, #3f8a3a 100%);
}
.insight-project .thumb--insight-3 {
  background:
    repeating-linear-gradient(45deg, #f0e0c0 0 12px, #d4ad6a 12px 24px),
    #C98A2B;
}
.insight-project .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.insight-project .tag.tag--insight {
  display: inline-flex; align-items: center;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C6817;
  background: rgba(201, 138, 43, 0.10);
  border: 1px solid rgba(201, 138, 43, 0.35);
  border-radius: 4px;
  padding: 4px 10px;
}
.insight-project h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}
.insight-project h3 a { color: var(--color-text); text-decoration: none; }
.insight-project h3 a:hover { color: #9C6817; }
.insight-project .subtle {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.insight-project .card-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: #9C6817;
}
.insight-project .card-link:hover { color: #C98A2B; }

/* CTA button leading to the Insights Hub */
.section-insights-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.btn-insights {
  background: #C98A2B;
  color: #fff;
  border: 0;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, transform .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-insights:hover {
  background: #9C6817;
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-insights span { font-size: 1rem; }

/* Better vertical rhythm — section padding bump on research.html only */
.section-insights { padding-top: 72px; padding-bottom: 80px; }

/* ==========================================================================
   v29 — Insights Hub (rebuilt in institutional voice with ochre accents).
   Replaces the warm-paper hub.css aesthetic with a sleek main-site layout:
   project-card grid, ochre tag system, media-type filter.
   ========================================================================== */

.eyebrow--ochre { color: #9C6817; }

.page-header--insights {
  background: linear-gradient(180deg, #fffbf4 0%, #fff9ec 100%);
  border-bottom: 1px solid rgba(201, 138, 43, 0.25);
  position: relative;
}
.page-header--insights::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 4px;
  background: #C98A2B;
}
.page-header--insights h1 em {
  font-style: italic;
  color: #9C6817;
  font-weight: 600;
}

/* ----- Featured row ----- */
.ih-featured { padding: 56px 0 12px; }
.ih-featured-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 900px) { .ih-featured-grid { grid-template-columns: 1fr; } }

.ih-featured-side { display: flex; flex-direction: column; gap: 22px; }

.ih-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .25s, box-shadow .25s;
}
.ih-card:hover {
  border-color: #C98A2B;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(201, 138, 43, 0.10);
}
.ih-card--lead .ih-thumb { aspect-ratio: 16 / 10; }
.ih-card--lead .ih-body { padding: 26px 28px 30px; }
.ih-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f0e0c0, #c98a2b);
  position: relative;
  flex: 0 0 auto;
}
.ih-card:not(.ih-card--lead) .ih-thumb { aspect-ratio: 5 / 3; }

.ih-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.ih-tag {
  display: inline-flex; align-items: center;
  width: max-content;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C6817;
  background: rgba(201, 138, 43, 0.10);
  border: 1px solid rgba(201, 138, 43, 0.35);
  border-radius: 4px;
  padding: 4px 10px;
}

.ih-card--lead h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.95rem;
  line-height: 1.16;
  letter-spacing: -0.022em;
  margin: 0;
}
.ih-card--lead h2 em {
  font-style: italic;
  color: #9C6817;
  font-weight: 700;
}
.ih-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}
.ih-card h2 a, .ih-card h3 a {
  color: var(--color-text);
  text-decoration: none;
}
.ih-card h2 a:hover, .ih-card h3 a:hover { color: #9C6817; }

.ih-summary {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.ih-byline {
  margin: 4px 0 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ih-byline strong { color: var(--color-text); font-weight: 600; }

/* ----- Thumbnail variants (placeholder gradients per media type) ----- */
.ih-thumb--feature {
  background:
    radial-gradient(circle at 25% 30%, rgba(201,138,43,0.5), transparent 60%),
    linear-gradient(135deg, #d6c8a4 0%, #8a6e3a 100%);
}
.ih-thumb--interview {
  background: linear-gradient(135deg, #c98a2b, #6a3f0c);
}
.ih-thumb--data {
  background:
    linear-gradient(180deg, transparent 40%, #C98A2B 40%, #9C6817 100%);
}
.ih-thumb--data-2 {
  background:
    repeating-linear-gradient(45deg, #f0e0c0 0 12px, #d4ad6a 12px 24px);
}
.ih-thumb--video {
  background: linear-gradient(135deg, #3d362c, #1f1b16);
}
.ih-thumb--video-2 {
  background: linear-gradient(135deg, #5CAD59, #2e6a2b);
}
.ih-thumb--podcast {
  background:
    radial-gradient(circle at 50% 50%, #C98A2B 0%, #6a3f0c 90%);
}
.ih-thumb--podcast-2 {
  background:
    radial-gradient(circle at 50% 50%, #5CAD59 0%, #2e5b2c 90%);
}
.ih-thumb--longread {
  background:
    linear-gradient(135deg, #b89a6a, #5b4419);
}
.ih-thumb--longread-2 {
  background: linear-gradient(135deg, #c98a2b, #4a3920);
}
.ih-thumb--short-1 {
  background: linear-gradient(135deg, #5CAD59, #c98a2b);
}
.ih-thumb--short-2 {
  background: linear-gradient(135deg, #d6c8a4, #8a6e3a);
}
.ih-thumb--short-3 {
  background: linear-gradient(135deg, #e5d6b2, #9C6817);
}

/* Play button overlay for videos / podcasts */
.has-play { position: relative; }
.ih-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #C98A2B;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  padding-left: 4px;
}
.ih-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(31, 27, 22, 0.80);
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 3px 7px;
}

/* ----- Archive (filter + grid) ----- */
.ih-archive {
  padding: 64px 0 80px;
  background: #fff;
}
.ih-archive-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 22px;
  position: relative;
}
.ih-archive-head::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 60px; height: 2px;
  background: #C98A2B;
}
.ih-archive-head h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.018em;
  margin: 6px 0 0;
}
.ih-archive-stats {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ih-archive-stats span { color: var(--color-text); font-weight: 600; }

.ih-filters {
  margin: 0 0 28px;
  gap: 8px;
  flex-wrap: wrap;
}
.ih-filters .filter-btn {
  border: 1px solid rgba(201, 138, 43, 0.45);
  color: #9C6817;
  background: transparent;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ih-filters .filter-btn:hover {
  background: rgba(201, 138, 43, 0.08);
}
.ih-filters .filter-btn.is-active {
  background: #C98A2B;
  color: #fff;
  border-color: #C98A2B;
}

.ih-grid { gap: 28px; }

/* Card variant for the grid items — reuse .card + add ochre flavour */
.ih-item .thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f0e0c0, #c98a2b);
}
.ih-item .body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.ih-item .tag.tag--ochre {
  display: inline-flex; align-items: center;
  width: max-content;
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9C6817;
  background: rgba(201, 138, 43, 0.10);
  border: 1px solid rgba(201, 138, 43, 0.35);
  border-radius: 4px;
  padding: 3px 9px;
}
.ih-item h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}
.ih-item h3 a { color: var(--color-text); text-decoration: none; }
.ih-item h3 a:hover { color: #9C6817; }
.ih-item .subtle {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.ih-item:hover {
  border-color: #C98A2B;
}
.ih-empty {
  padding: 40px 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ----- Newsletter ----- */
.ih-newsletter {
  background: linear-gradient(180deg, #fff9ec 0%, #faf3e6 100%);
  padding: 80px 0 96px;
  border-top: 1px solid rgba(201, 138, 43, 0.25);
}
.ih-newsletter-h {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.022em;
  margin: 14px 0 12px;
}
.ih-newsletter-lead {
  margin: 0 auto 30px;
  max-width: 50ch;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
}
.ih-newsletter-form {
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  border: 2px solid #C98A2B;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.ih-newsletter-form input[type="email"] {
  flex: 1;
  padding: 14px 22px;
  font-family: var(--font-serif);
  font-size: 1rem;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-text);
}
.ih-newsletter-form input::placeholder { color: var(--color-text-faint); font-style: italic; }
.ih-newsletter-form button {
  background: #C98A2B;
  color: #fff;
  border: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 26px;
  cursor: pointer;
  transition: background .15s;
}
.ih-newsletter-form button:hover { background: #9C6817; }
.form-note { margin: 14px 0 0; font-family: var(--font-serif); font-style: italic; color: #3F8A3A; }

/* ==========================================================================
   v30 — Resources page: dual structure (Publications & Datasets vs.
   Tools & Platforms), type-coded pills/tags, observatory/tools cards,
   webinar mini-cards, reports-repository panel.
   ========================================================================== */

.eyebrow--strong { color: var(--color-text); font-weight: 700; }

/* ----- Latest featured row ----- */
.res-latest { padding: 56px 0 24px; }
.res-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 900px) { .res-latest-grid { grid-template-columns: 1fr; } }

.res-latest-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .25s, box-shadow .25s;
}
.res-latest-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(92, 173, 89, 0.10);
}
.res-latest-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #c8d5b9, #5CAD59);
}
.res-thumb--paper  { background: linear-gradient(135deg, #c8d5b9, #3F8A3A); }
.res-thumb--brief  { background: linear-gradient(135deg, #f0e0c0, #C98A2B); }
.res-thumb--dataset{ background: repeating-linear-gradient(90deg, #b8d4eb 0 10px, #6a93b8 10px 20px); }
.res-thumb--report { background: linear-gradient(135deg, #d6c8a4, #6e5b3a); }
.res-thumb--toolkit{ background: repeating-linear-gradient(45deg, #c8d5b9 0 14px, #5CAD59 14px 28px); }
.res-thumb--working{ background: linear-gradient(135deg, #e8e8e8, #555555); }

.res-latest-body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.res-latest-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}
.res-latest-card h3 a { color: var(--color-text); text-decoration: none; }
.res-latest-card h3 a:hover { color: var(--color-primary-dark); }
.res-latest-meta {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.res-latest-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.res-latest-actions a { font-family: "Roboto Mono", monospace; font-size: 0.74rem; letter-spacing: 0.14em; }

/* Type-coded badge */
.res-type-tag {
  display: inline-flex; align-items: center;
  width: max-content;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.res-type-tag--paper   { background: rgba(63, 138, 58, 0.10); color: #3F8A3A; border: 1px solid rgba(63, 138, 58, 0.35); }
.res-type-tag--working { background: rgba(0, 0, 0, 0.05); color: #555555; border: 1px solid rgba(0, 0, 0, 0.20); }
.res-type-tag--brief   { background: rgba(201, 138, 43, 0.10); color: #9C6817; border: 1px solid rgba(201, 138, 43, 0.35); }
.res-type-tag--report  { background: rgba(110, 92, 58, 0.10); color: #6e5b3a; border: 1px solid rgba(110, 92, 58, 0.35); }
.res-type-tag--toolkit { background: rgba(92, 173, 89, 0.10); color: #3F8A3A; border: 1px solid rgba(92, 173, 89, 0.35); }
.res-type-tag--dataset { background: rgba(31, 138, 200, 0.08); color: #1F5A8A; border: 1px solid rgba(31, 138, 200, 0.30); }

/* ----- Publications & Datasets section ----- */
.res-pubs {
  background: linear-gradient(180deg, #fcfcf9 0%, #f6f7f2 100%);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 64px 0 80px;
}
.res-pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
}
.res-pub-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-rule);
}
@media (max-width: 720px) {
  .res-pub-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
}

.res-type-pill {
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  align-self: start;
  display: inline-flex;
  white-space: nowrap;
}
.res-type-pill--paper   { background: rgba(63, 138, 58, 0.10); color: #3F8A3A; }
.res-type-pill--working { background: rgba(0, 0, 0, 0.06); color: #444; }
.res-type-pill--brief   { background: rgba(201, 138, 43, 0.12); color: #9C6817; }
.res-type-pill--report  { background: rgba(110, 92, 58, 0.10); color: #6e5b3a; }
.res-type-pill--toolkit { background: rgba(92, 173, 89, 0.10); color: #3F8A3A; }
.res-type-pill--dataset { background: rgba(31, 138, 200, 0.10); color: #1F5A8A; }

.res-pub-row-body { min-width: 0; }
.res-pub-row-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.res-pub-row-title a { color: var(--color-text); text-decoration: none; }
.res-pub-row-title a:hover { color: var(--color-primary-dark); }
.res-pub-row-meta {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.res-pub-row-tags {
  margin: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.res-pub-row-actions {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.res-pub-row-actions a {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.res-pub-empty {
  padding: 36px 0; text-align: center;
  font-family: var(--font-serif); font-style: italic; color: var(--color-text-muted);
}
.res-pub-loadmore { text-align: center; margin-top: 32px; }
.res-pub-note {
  margin-top: 12px;
  font-family: var(--font-serif); font-style: italic; font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ----- Tools & Platforms section ----- */
.res-platforms {
  padding: 80px 0 96px;
}
.res-platform-block {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
}
.res-platform-block:first-of-type { margin-top: 36px; }

.res-platform-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}
.res-platform-head h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.018em;
  margin: 0;
}
.res-platform-meta {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.res-platform-intro {
  margin: 0 0 22px;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  max-width: 70ch;
}
.res-platform-grid {
  display: grid;
  gap: 22px;
}
.res-platform-grid--3 { grid-template-columns: repeat(3, 1fr); }
.res-platform-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .res-platform-grid--3, .res-platform-grid--2 { grid-template-columns: 1fr; }
}

.res-platform-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color .2s;
}
.res-platform-card:hover { border-color: var(--color-primary); }
.res-platform-card--coming {
  background: repeating-linear-gradient(135deg, rgba(92, 173, 89,0.04) 0 1px, transparent 1px 14px), #fff;
  border-style: dashed;
}
.res-platform-tag {
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.res-platform-card h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}
.res-platform-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.res-platform-status {
  display: inline-block;
  margin-top: 6px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C6817;
  background: rgba(201, 138, 43, 0.08);
  padding: 3px 8px;
  border: 1px solid rgba(201, 138, 43, 0.30);
  border-radius: 999px;
  width: max-content;
}
.res-platform-status--live {
  color: #3F8A3A;
  background: rgba(92, 173, 89, 0.08);
  border-color: rgba(92, 173, 89, 0.35);
}
.res-platform-card--live {
  border-color: rgba(92, 173, 89, 0.40);
  background: linear-gradient(180deg, #fff 0%, #f6faf2 100%);
}
.res-platform-card--live h4 a {
  color: #1F1F18;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.res-platform-card--live h4 a:hover { border-bottom-color: #5CAD59; }
.res-platform-open {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
  text-decoration: none;
  padding: 8px 12px;
  border: 1.5px solid #5CAD59;
  border-radius: 999px;
  width: max-content;
  transition: background .15s, color .15s, transform .15s;
}
.res-platform-open:hover {
  background: #5CAD59;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.res-platform-cta-line {
  margin: 20px 0 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

/* Webinar mini cards */
.res-webinar-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .25s;
}
.res-webinar-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.res-webinar-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #2d3a2c, #1a1f1a);
  position: relative;
  cursor: pointer;
}
a.res-webinar-thumb { text-decoration: none; }
.res-webinar-thumb--1 { background: linear-gradient(135deg, #3d362c, #1f1b16); }
.res-webinar-thumb--2 { background: linear-gradient(135deg, #c98a2b, #7a4f12); }
.res-webinar-thumb--3 { background: linear-gradient(135deg, #5CAD59, #1f4d1c); }

.res-webinar-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.res-webinar-meta {
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.res-webinar-card h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}
.res-webinar-card h4 a { color: var(--color-text); text-decoration: none; }
.res-webinar-card h4 a:hover { color: var(--color-primary-dark); }

/* Webinars — horizontal slider (used instead of the 3-up grid once there are more than 3) */
.res-webinar-slider {
  position: relative;
}
.res-webinar-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #eee;
  padding: 4px 2px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.res-webinar-track::-webkit-scrollbar { height: 6px; }
.res-webinar-track::-webkit-scrollbar-track { background: #eee; border-radius: 999px; }
.res-webinar-track::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 999px; }
.res-webinar-track .res-webinar-card {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .res-webinar-track .res-webinar-card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 600px) {
  .res-webinar-track .res-webinar-card { flex-basis: 84%; }
}
.res-webinar-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.res-webinar-slider-nav:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* Sit in the .container's own side padding (28px), clear of the cards
   entirely, rather than overlapping the video thumbnails. */
.res-webinar-slider-nav--prev { left: -24px; }
.res-webinar-slider-nav--next { right: -24px; }
@media (max-width: 600px) {
  .res-webinar-slider-nav { display: none; }
}

/* Webinar video pop-out modal */
.video-modal[hidden] { display: none; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: groupModalIn 240ms ease;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 18, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.video-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  animation: groupModalCardIn 320ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
.video-modal-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute;
  top: -42px; right: 0;
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 4px 10px;
}
.video-modal-close:hover { color: var(--color-primary); }

/* Reports Repository panel */
.res-repo-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--color-rule);
  padding: 30px 32px;
  margin-top: 8px;
}
@media (max-width: 900px) { .res-repo-panel { grid-template-columns: 1fr; } }

.res-repo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .res-repo-stats { grid-template-columns: repeat(2, 1fr); } }
.res-repo-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--color-rule);
}
.res-repo-stat:last-child { border-right: 0; }
.res-repo-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-text);
}
.res-repo-label {
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.res-repo-cta {
  display: flex; flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
}
.res-repo-cta p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Refine .res-section-head behaviour so it doesn't collapse */
.res-section-head h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.018em;
  margin: 6px 0 8px;
}
.res-section-head p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  max-width: 70ch;
}
.res-pubs .res-section-head h2, .res-platforms .res-section-head h2 {
  font-family: var(--font-serif);
}

/* ==========================================================================
   v31 — Annual Congress promo block on the Community page (warmer accents
   than the rest of the site to signal it leads into a more dynamic space).
   ========================================================================== */

.cg-popup-section {
  padding: 64px 0 80px;
  background: linear-gradient(180deg, #fff 0%, #f8f3df 100%);
}
.cg-popup {
  position: relative;
  background:
    radial-gradient(circle at 8% 80%, rgba(168,147,57,0.16), transparent 55%),
    radial-gradient(circle at 92% 12%, rgba(201,163,61,0.16), transparent 55%),
    linear-gradient(135deg, #fbf8ee 0%, #f4eed9 100%);
  border: 2px solid #A89339;
  border-radius: 8px;
  padding: 56px 56px;
  overflow: hidden;
}
.cg-popup-decor {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #A89339 0%, #C9A33D 50%, #5CAD59 100%);
}
.cg-popup-content { position: relative; max-width: 900px; }

.cg-popup-eyebrow {
  display: inline-block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E5E1E;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #A89339;
  border-radius: 999px;
  margin-bottom: 18px;
}
.cg-popup-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  color: #1F1F18;
}
.cg-popup-title em { font-style: italic; color: #A89339; font-weight: 800; }
.cg-popup-lead {
  margin: 0 0 26px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: #1F1F18;
}
.cg-popup-lead strong { color: #6E5E1E; font-style: normal; }

.cg-popup-meta {
  display: flex;
  gap: 0;
  background: #fff;
  border: 1.5px solid #1F1F18;
  border-radius: 4px;
  max-width: 560px;
  margin: 0 0 26px;
}
.cg-popup-meta-item {
  flex: 1;
  padding: 14px 18px;
  border-right: 1px solid #E5DFC6;
}
.cg-popup-meta-item:last-child { border-right: 0; }
.cg-popup-meta-label {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D6650;
  margin-bottom: 4px;
}
.cg-popup-meta-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  color: #1F1F18;
}

.cg-popup-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cg-popup-btn {
  display: inline-flex;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, transform .15s, color .15s;
}
.cg-popup-btn--primary {
  background: #A89339;
  color: #fff;
  border: 2px solid #A89339;
}
.cg-popup-btn--primary:hover {
  background: #6E5E1E;
  border-color: #6E5E1E;
  transform: translateY(-1px);
  text-decoration: none;
}
.cg-popup-btn--ghost {
  background: transparent;
  color: #1F1F18;
  border: 2px solid #1F1F18;
}
.cg-popup-btn--ghost:hover {
  background: #1F1F18;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 720px) {
  .cg-popup { padding: 36px 28px; }
  .cg-popup-meta { flex-direction: column; }
  .cg-popup-meta-item { border-right: 0; border-bottom: 1px solid #E5DFC6; }
  .cg-popup-meta-item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   v32 — About-page "Brief history" horizontal scroll
   ========================================================================== */
.ab-hscroll {
  position: relative;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.ab-hscroll-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-green, #5CAD59) #eee;
  padding: 12px 48px 22px;
}
.ab-hscroll-track::-webkit-scrollbar { height: 6px; }
.ab-hscroll-track::-webkit-scrollbar-track { background: #eee; border-radius: 999px; }
.ab-hscroll-track::-webkit-scrollbar-thumb { background: var(--brand-green, #5CAD59); border-radius: 999px; }
.ab-htl-card {
  flex: 0 0 300px;
  min-height: 240px;
  scroll-snap-align: start;
  background: #fff;
  border: 1.5px solid #E2E2DC;
  border-left: 4px solid var(--brand-green, #5CAD59);
  border-radius: 4px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
}
.ab-htl-card--next {
  border-left-color: #A89339;
  background: #fbf8ee;
}
.ab-htl-year {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin-bottom: 10px;
}
.ab-htl-card--next .ab-htl-year { color: #6E5E1E; }
.ab-htl-card h3 {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1F1F18;
  line-height: 1.18;
}
.ab-htl-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a4a44;
}
.ab-hscroll-hint {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D6650;
  margin: 0 48px;
}
@media (max-width: 720px) {
  .ab-htl-card { flex-basis: 78vw; }
  .ab-hscroll-track { padding: 12px 22px 22px; }
  .ab-hscroll, .ab-hscroll-hint { margin-left: 0; margin-right: 0; }
}

/* ==========================================================================
   v33 — Homepage: Insights crossover + Get Involved CTA
   Insights section uses ochre accents over the homepage white-paper bg so
   it reads as an Insights crossover without breaking the homepage flow.
   ========================================================================== */
.home-insights {
  padding: 56px 0;
  background:
    radial-gradient(circle at 95% 0%, rgba(201, 138, 43, 0.04), transparent 50%),
    #fff;
  border-top: 1px solid #e7e4d8;
  border-bottom: 1px solid #e7e4d8;
}
.home-insights__eyebrow { color: #9C6817; }
.home-insights .section-title h2 {
  color: #1F1F18;
}
.home-insights .section-title h2 em { color: #C98A2B; font-style: italic; }
.home-insights__cta { color: #9C6817 !important; border-color: rgba(201, 138, 43, 0.4) !important; padding: 14px 9px; }
.home-insights__cta:hover { background: #C98A2B; color: #fff !important; border-color: #C98A2B !important; }
.home-pubs__cta:hover { padding: 11px 11px; }
.home-about__cta:hover { padding: 11px 11px; }
.home-insights__card {
  border-left: 3px solid #C98A2B;
  background: #fff;
}
.home-insights__card .meta { color: #9C6817; }
.home-insights__card h3 a { color: var(--color-text); text-decoration: none; }
.home-insights__card h3 a:hover { color: #9C6817; }
.home-insights__card .card-link.arrow { color: #9C6817; }
.home-insights__card .card-link.arrow:hover { color: #C98A2B; }

/* Get Involved — high-contrast block, no longer the prior section-dark style */
.home-cta {
  padding: 72px 0 88px;
  background: linear-gradient(180deg, #1F2A1E 0%, #0F1A10 100%);
  color: #fff;
}
.home-cta__inner {
  max-width: 740px;
}
.home-cta__eyebrow {
  color: #8ECC89 !important;
  letter-spacing: 0.22em;
}
.home-cta__title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 6px 0 14px;
}
.home-cta__lead {
  font-size: 1.08rem;
  line-height: 1.55;
  color: #cfe4cb;
  margin: 0 0 26px;
  max-width: 60ch;
}
.home-cta__row { gap: 14px; flex-wrap: wrap; display: flex; }
.home-cta__primary {
  background: #5CAD59;
  color: #fff;
  border: 2px solid #5CAD59;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.home-cta__primary:hover { background: #6BBE65; border-color: #6BBE65; transform: translateY(-1px); text-decoration: none; }
.home-cta__secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #8ECC89;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.home-cta__secondary:hover { background: #8ECC89; color: #0F1A10; transform: translateY(-1px); text-decoration: none; }

/* ==========================================================================
   v34 — Members directory: pagination + profile popup modal
   ========================================================================== */
.members-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 28px 0 4px;
}
.members-page-btn {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
  background: #fff;
  border: 1.5px solid #5CAD59;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.members-page-btn:hover:not(:disabled) { background: #5CAD59; color: #fff; transform: translateY(-1px); }
.members-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.members-page-info {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #6D6650;
}

/* Profile popup modal */
.profile-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.profile-modal[hidden] { display: none; }
.profile-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 18, 0.45);
  backdrop-filter: blur(2px);
}
.profile-modal-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 520px;
  width: 100%;
  padding: 36px 36px 30px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  max-height: 86vh;
  overflow: auto;
  border-top: 4px solid #5CAD59;
}
.profile-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none; cursor: pointer;
  font-size: 1.8rem; line-height: 1;
  color: #6D6650;
}
.profile-modal-close:hover { color: #1F1F18; }
.profile-modal-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9e8d7, #b6d5b2);
  margin-bottom: 14px;
}
.profile-modal-name {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 4px;
  color: #1F1F18;
  letter-spacing: -0.012em;
}
.profile-modal-role {
  font-size: 0.96rem;
  color: #3F8A3A;
  margin: 0 0 4px;
}
.profile-modal-meta {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: #6D6650;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.profile-modal-themes {
  margin-bottom: 18px;
}
.profile-modal-themes-label {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D6650;
  margin-bottom: 6px;
}
.profile-modal-themes-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.profile-modal-themes-list li {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #3F8A3A;
  background: rgba(92, 173, 89,0.10);
  border: 1px solid rgba(92, 173, 89,0.32);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.profile-modal-bio {
  font-size: 0.94rem;
  line-height: 1.55;
  color: #4a4a44;
  margin: 0 0 22px;
}
.profile-modal-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.member-card { cursor: pointer; }
.member-card:hover { transform: translateY(-1px); transition: transform .12s; }

/* ==========================================================================
   v35 — About: vertical timeline + founding narrative
   ========================================================================== */
.about-story {
  padding: 56px 0 72px;
}
.about-narrative {
  margin: 0 0 36px;
  font-size: 1.04rem;
  line-height: 1.62;
  color: #1F1F18;
}
.about-narrative p { margin: 0 0 16px; }

.about-timeline {
  list-style: none;
  margin: 24px 0 0;
  padding: 0 0 0 8px;
  position: relative;
}
.about-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, #5CAD59 0%, #c2dcbf 100%);
  border-radius: 1px;
}
.about-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 18px 0 18px 36px;
}
.about-tl-item::before {
  content: "";
  position: absolute;
  left: 6px; top: 28px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #5CAD59;
}
.about-tl-item--next::before {
  background: #5CAD59;
}
.about-tl-year {
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
  padding-top: 22px;
}
.about-tl-body h3 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.18rem;
  margin: 12px 0 8px;
  color: #1F1F18;
}
.about-tl-body p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #4a4a44;
}
.about-pullquote {
  margin: 22px 0;
  padding: 22px 28px;
  background: rgba(92, 173, 89,0.05);
  border-left: 4px solid #5CAD59;
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-size: 1.04rem;
  line-height: 1.55;
  color: #1F1F18;
}
.about-pullquote-by {
  display: block;
  margin-top: 10px;
  font-family: "Roboto Mono", monospace;
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: #6D6650;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .about-tl-item { grid-template-columns: 1fr; gap: 6px; padding-left: 32px; }
  .about-tl-year { padding-top: 0; }
}

/* ==========================================================================
   v36 — Resources: publications grid + pagination
   ========================================================================== */
.res-pub-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.res-pub-list--grid .res-pub-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e7e4d8;
  border-left: 4px solid #5CAD59;
  border-radius: 4px;
  margin: 0;
  transition: border-color .15s, box-shadow .15s;
}
.res-pub-list--grid .res-pub-row:hover {
  border-color: #5CAD59;
  box-shadow: 0 4px 18px rgba(31,31,24,0.06);
}
.res-pub-list--grid .res-type-pill {
  align-self: flex-start;
}
.res-pub-list--grid .res-pub-row-body {
  flex: 1;
}
.res-pub-list--grid .res-pub-row-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.25;
  margin: 0 0 8px;
}
.res-pub-list--grid .res-pub-row-meta {
  font-size: 0.85rem;
  color: #4a4a44;
  margin: 0 0 6px;
}
.res-pub-list--grid .res-pub-row-tags {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #6D6650;
  margin: 0;
  text-transform: uppercase;
}
.res-pub-list--grid .res-pub-row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  padding-top: 8px;
  border-top: 1px solid #f2efe2;
}

/* Publications pagination */
.res-pub-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 28px 0 4px;
}
.res-pub-page-btn {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
  background: #fff;
  border: 1.5px solid #5CAD59;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.res-pub-page-btn:hover:not(:disabled) { background: #5CAD59; color: #fff; transform: translateY(-1px); }
.res-pub-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.res-pub-page-info {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #6D6650;
}

/* ==========================================================================
   v37 — Team page: smaller cards (5 across), soft hierarchy
   ========================================================================== */
.team-section {
  padding: 48px 0;
  background: #fff;
  border-bottom: 1px solid #efece2;
}
.team-section .section-header { margin-bottom: 22px; }
.team-section .eyebrow {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3F8A3A;
}
.team-section h2 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.012em;
  margin: 6px 0 0;
  color: #1F1F18;
}
.team-grid.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .team-grid.grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px)  { .team-grid.grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .team-grid.grid-5 { grid-template-columns: repeat(2, 1fr); } }

.team-card {
  background: #fff;
  border: 1px solid #ece9da;
  border-radius: 6px;
  padding: 16px 14px 14px;
  text-align: left;
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.team-card:hover {
  transform: translateY(-1px);
  border-color: #5CAD59;
  box-shadow: 0 4px 14px rgba(31,31,24,0.06);
}
.team-card .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #3F8A3A;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Mono", monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.team-card h4 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 0.96rem;
  margin: 0 0 4px;
  line-height: 1.18;
  color: #1F1F18;
}
.team-card .role {
  font-size: 0.78rem;
  line-height: 1.32;
  color: #4a4a44;
  margin: 0 0 8px;
}
.team-card .links {
  margin: 0;
  font-size: 0.72rem;
}
.team-card .links a {
  color: #3F8A3A;
  text-decoration: none;
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.team-card .links a + a { margin-left: 8px; }

/* ==========================================================================
   v38 — Our Research: three-sphere interplay + full-spread thematic scroller
   ========================================================================== */
.mod-aisesa-text {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: #1F1F18;
}
.mod-label {
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: #1F1F18;
}
.modality-caption {
  margin-top: 10px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6D6650;
  text-align: center;
}

/* Themes spread — full-card horizontal scroller */
.themes-spread {
  position: relative;
  margin-top: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.themes-spread-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-green, #5CAD59) #eee;
  padding: 12px 32px 22px;
}
.themes-spread-track::-webkit-scrollbar { height: 6px; }
.themes-spread-track::-webkit-scrollbar-track { background: #eee; border-radius: 999px; }
.themes-spread-track::-webkit-scrollbar-thumb { background: #5CAD59; border-radius: 999px; }
.theme-spread {
  flex: 0 0 calc(100% - 80px);
  max-width: 880px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #ece9da;
  border-left: 5px solid #5CAD59;
  border-radius: 6px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-spread-num {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #3F8A3A;
  text-transform: uppercase;
}
.theme-spread-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  color: #1F1F18;
}
.theme-spread-body {
  font-size: 1.04rem;
  line-height: 1.6;
  color: #4a4a44;
  margin: 0;
  max-width: 70ch;
}
.themes-spread-hint {
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D6650;
  margin: 0 32px;
}
@media (max-width: 720px) {
  .theme-spread { flex-basis: 84vw; padding: 24px 22px; }
}

/* ==========================================================================
   v39 — Cluster page: Who is involved (people grid)
   ========================================================================== */
.cluster-people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 900px) { .cluster-people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cluster-people-grid { grid-template-columns: 1fr; } }
.cluster-person {
  background: #fff;
  border: 1px solid #ece9da;
  border-radius: 6px;
  padding: 18px 16px 16px;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.cluster-person:hover {
  border-color: #5CAD59;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31,31,24,0.06);
}
.cluster-person--lead {
  border-color: #5CAD59;
  background: linear-gradient(180deg, #fff 0%, #f5fbf3 100%);
}
.cluster-person-tag {
  font-family: "Roboto Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
  display: block;
  margin-bottom: 8px;
}
.cluster-person--lead .cluster-person-tag { color: #1F1F18; }
.cluster-person-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2eddf, #c8dcc4);
  margin-bottom: 10px;
}
.cluster-person-name {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
  color: #1F1F18;
}
.cluster-person-role {
  font-size: 0.82rem;
  line-height: 1.32;
  color: #4a4a44;
  margin: 0;
}

/* ==========================================================================
   v40 — Join us page: open positions grid
   ========================================================================== */
.join-section { padding: 40px 0 80px; }
.join-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 18px;
}
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; } }
.join-card {
  background: #fff;
  border: 1px solid #e7e4d8;
  border-left: 4px solid #5CAD59;
  border-radius: 6px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.join-card-cluster {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F8A3A;
}
.join-card-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.18;
  letter-spacing: -0.014em;
  margin: 0;
  color: #1F1F18;
}
.join-card-body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #4a4a44;
}
.join-card-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #6D6650;
  text-transform: uppercase;
}
.join-card-meta li:not(:last-child)::after { content: "·"; margin-left: 16px; color: #c0bca6; }
.join-card-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
}
.join-btn-primary {
  background: #5CAD59;
  color: #fff;
  border: 2px solid #5CAD59;
}
.join-btn-primary:hover { background: #3F8A3A; border-color: #3F8A3A; color: #fff; }

/* v41 — emphasise key phrases in pullquote in AISESA green (per Sokona quote reference) */
.about-pullquote em strong {
  color: #3F8A3A;
  font-style: italic;
  font-weight: 700;
}

/* ==========================================================================
   v42 — Research page: bidirectional flow diagram
   Knowledge & evidence flow between Research, Policy and Practice.
   ========================================================================== */
.flow-diagram { width: 100%; height: auto; max-width: 420px; }

/* Flow arcs */
.flow-arc {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.8;
}
/* Forward direction — AISESA green, dashed, flowing outward */
.flow-arc--fwd {
  stroke: #3F8A3A;
  stroke-dasharray: 5 6;
  animation: flowFwd 4.5s linear infinite;
}
/* Reverse direction — dark ink, dashed, flowing the other way */
.flow-arc--rev {
  stroke: #1F1F18;
  stroke-opacity: 0.7;
  stroke-dasharray: 4 7;
  animation: flowRev 5.5s linear infinite;
}
@keyframes flowFwd {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -44; }
}
@keyframes flowRev {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 44; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-arc--fwd, .flow-arc--rev { animation: none; }
}

/* Node circles + labels */
.flow-node circle {
  filter: drop-shadow(0 2px 6px rgba(31, 31, 24, 0.08));
}
.flow-node:hover circle {
  fill: #f4f9f2;
  stroke-width: 2.4;
}
.flow-label {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  fill: #1F1F18;
}

.flow-centre {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: #6D6650;
  font-style: italic;
}

/* ==========================================================================
   v43 — Research diagram: 3D spheres + mouse-reactive tilt
   ========================================================================== */
.flow-figure {
  margin: 0;
  perspective: 900px;
  cursor: default;
}
.flow-stage {
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.12s ease-out;
  filter: drop-shadow(0 18px 28px rgba(31, 31, 24, 0.10));
}
.flow-figure[data-tilt-active] .flow-stage {
  transition: transform 0.06s ease-out;
}

.flow-sphere {
  transition: filter 0.18s, transform 0.18s, stroke 0.18s, stroke-width 0.18s;
  transform-origin: center;
  transform-box: fill-box;
}
.flow-sphere-gloss {
  pointer-events: none;
  opacity: 0.85;
}
.flow-node {
  cursor: pointer;
}
.flow-node:hover .flow-sphere {
  fill: url(#sphereGradHover);
  stroke: #2c6a28;
  stroke-width: 2.2;
  filter: drop-shadow(0 6px 16px rgba(63,138,58,0.35));
}
.flow-node:hover .flow-label {
  fill: #1F1F18;
  font-weight: 800;
}
.flow-pair {
  transition: opacity 0.2s;
}
.flow-figure.is-hovering-node .flow-pair { opacity: 0.25; }
.flow-figure.is-hovering-node .flow-pair[data-pair*="research"]   { /* default */ }
.flow-figure.is-hovering-research .flow-pair[data-pair*="research"]   { opacity: 1; }
.flow-figure.is-hovering-policy   .flow-pair[data-pair*="policy"]     { opacity: 1; }
.flow-figure.is-hovering-practice .flow-pair[data-pair*="practice"]   { opacity: 1; }

/* ==========================================================================
   v44 — Research page: thematic areas emerge from intro (systems-thinking)
   ========================================================================== */

/* Whole panel — soft gradient + a faint dotted overlay to suggest a system */
.research-system {
  position: relative;
  padding: 56px 0 72px;
  margin-top: 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(92, 173, 89, 0.06), transparent 55%),
    radial-gradient(circle at 90% 28%, rgba(201, 138, 43, 0.05), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f9f4 100%);
  border-radius: 8px;
  border: 1px solid rgba(92, 173, 89, 0.18);
  overflow: hidden;
}
.research-system::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(63, 138, 58, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: 0.45;
  pointer-events: none;
}
.research-system > * { position: relative; z-index: 1; }

.research-system .research-intro {
  padding: 0 8% 8px;
  text-align: center;
}
.research-system .research-intro .section-title {
  max-width: 70ch;
  margin: 0 auto;
}
.research-system .research-intro .eyebrow--accent {
  color: #3F8A3A;
}
.research-system .research-intro h2 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: #1F1F18;
  margin: 8px 0 18px;
}
.research-system .research-intro h2 em {
  font-style: italic;
  color: #3F8A3A;
}
.research-system .research-intro p {
  font-size: 1.04rem;
  line-height: 1.6;
  color: #2E2E26;
  margin: 0 auto 14px;
}

/* Branching connector — three threads emerge from the intro */
.themes-branches {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 12px auto 0;
  padding: 0 4%;
  height: 110px;
}
.branches-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.branch-trunk {
  fill: none;
  stroke: #3F8A3A;
  stroke-width: 2;
  stroke-linecap: round;
}
.branch-split {
  fill: none;
  stroke: #3F8A3A;
  stroke-width: 2;
  stroke-linecap: round;
}
.branch-leaf {
  fill: none;
  stroke: #3F8A3A;
  stroke-width: 2;
  stroke-linecap: round;
}
.branch-link {
  fill: none;
  stroke: rgba(63, 138, 58, 0.45);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}
.branch-node {
  stroke: #fff;
  stroke-width: 2.5;
}
.branch-node--1 { fill: #C98A2B; }   /* ochre — industrial */
.branch-node--2 { fill: #4F8FA5; }   /* teal — urban */
.branch-node--3 { fill: #5CAD59; }   /* AISESA green — livelihoods */

/* Themes grid — three side-by-side cards that visually anchor below the branches */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 4% 4px;
  margin-top: -16px;
}
@media (max-width: 880px) {
  .themes-grid { grid-template-columns: 1fr; gap: 18px; }
  .themes-branches { display: none; }
}

.theme-emerge {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  padding: 28px 26px 26px;
  box-shadow:
    0 1px 0 rgba(31, 31, 24, 0.04),
    0 12px 28px rgba(31, 31, 24, 0.06);
  border-top: 4px solid #3F8A3A;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
  overflow: hidden;
}
.theme-emerge::before {
  /* faint accent corner — a quiet visual signature per theme */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 110px; height: 110px;
  background: radial-gradient(circle at 100% 0%, var(--theme-accent, rgba(92, 173, 89,0.18)), transparent 70%);
  pointer-events: none;
  opacity: 0.85;
}
.theme-emerge:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(31, 31, 24, 0.06),
    0 18px 36px rgba(31, 31, 24, 0.10);
}
.theme-emerge--1 { --theme-accent: rgba(201, 138, 43, 0.22); border-top-color: #C98A2B; }
.theme-emerge--2 { --theme-accent: rgba(79, 143, 165, 0.22); border-top-color: #4F8FA5; }
.theme-emerge--3 { --theme-accent: rgba(92, 173, 89, 0.22); border-top-color: #5CAD59; }

.theme-emerge-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: #fff;
  margin-top: -52px;
  margin-bottom: 12px;
  border: 2px solid currentColor;
  box-shadow: 0 4px 12px rgba(31, 31, 24, 0.08);
}
.theme-emerge--1 .theme-emerge-num { color: #C98A2B; }
.theme-emerge--2 .theme-emerge-num { color: #4F8FA5; }
.theme-emerge--3 .theme-emerge-num { color: #3F8A3A; }

.theme-emerge-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: #1F1F18;
  margin: 0 0 10px;
}
.theme-emerge-body {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #3a3a32;
  margin: 0;
}

/* ==========================================================================
   v45 — Research page: clusters integrated into the mind map (levers band)
   ========================================================================== */
.clusters-band {
  position: relative;
  margin-top: 28px;
  padding: 0 4%;
}
.clusters-band-intro {
  text-align: center;
  max-width: 70ch;
  margin: 0 auto;
  padding-top: 28px;
}
.clusters-band-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: #1F1F18;
  margin: 8px 0 12px;
}
.clusters-band-lead {
  font-size: 1rem;
  line-height: 1.55;
  color: #2E2E26;
  margin: 0 0 12px;
}

/* Mesh — links each theme down to multiple clusters, conveying systemic
   linkage. Each line is coloured by its source theme. */
.clusters-mesh {
  position: relative;
  width: 100%;
  height: 86px;
  margin: 4px 0 -8px;
}
.mesh-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mesh-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.mesh-line--from-1 { stroke: rgba(201, 138, 43, 0.55); }   /* ochre — industrial */
.mesh-line--from-2 { stroke: rgba(79, 143, 165, 0.55); }    /* teal — urban */
.mesh-line--from-3 { stroke: rgba(63, 138, 58, 0.55); }     /* green — livelihoods */
.mesh-anchor {
  fill: #ffffff;
  stroke: #3F8A3A;
  stroke-width: 2;
}

/* Cluster pills row */
.clusters-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .clusters-pills { grid-template-columns: repeat(3, 1fr); }
  .clusters-mesh { display: none; }
}
@media (max-width: 720px) {
  .clusters-pills { grid-template-columns: 1fr; }
}

.cluster-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid rgba(63, 138, 58, 0.30);
  border-radius: 10px;
  padding: 16px 14px 14px;
  text-decoration: none;
  color: #1F1F18;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s, background 0.18s;
  min-height: 122px;
}
.cluster-pill:hover {
  transform: translateY(-2px);
  border-color: #3F8A3A;
  box-shadow: 0 10px 24px rgba(31, 31, 24, 0.10);
  background: linear-gradient(180deg, #ffffff 0%, #f3faf2 100%);
  text-decoration: none;
}
.cluster-pill-num {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #3F8A3A;
  background: rgba(92, 173, 89, 0.10);
  border: 1px solid rgba(92, 173, 89, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
}
.cluster-pill-name {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.22;
  color: #1F1F18;
  flex: 1;
}
.cluster-pill-go {
  align-self: flex-end;
  font-family: "Roboto Mono", monospace;
  font-size: 0.84rem;
  color: #3F8A3A;
  transition: transform 0.18s;
}
.cluster-pill:hover .cluster-pill-go { transform: translateX(3px); }

/* Subtle per-pill accent stripes on the top edge to show the cluster is a lever */
.cluster-pill::before {
  content: "";
  position: absolute;
  top: -1.5px; left: -1.5px; right: -1.5px;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: #5CAD59;
  opacity: 0.6;
}
.cluster-pill--1::before { background: linear-gradient(90deg, #C98A2B 0%, #5CAD59 100%); }
.cluster-pill--2::before { background: linear-gradient(90deg, #C98A2B 0%, #4F8FA5 100%); }
.cluster-pill--3::before { background: linear-gradient(90deg, #4F8FA5 0%, #5CAD59 100%); }
.cluster-pill--4::before { background: linear-gradient(90deg, #4F8FA5 0%, #3F8A3A 100%); }
.cluster-pill--5::before { background: linear-gradient(90deg, #5CAD59 0%, #3F8A3A 100%); }

/* ==========================================================================
   v46 — Research page: editorial two-column layout (RTI-inspired)
   Bold heading on the left, body text on the right; simple list treatments.
   ========================================================================== */
.research-editorial {
  padding: 32px 0 24px;
}
.ed-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid #ECE9DA;
  align-items: start;
}
.ed-row:first-of-type { border-top: 0; padding-top: 8px; }

.ed-eyebrow {
  display: inline-block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin-bottom: 12px;
}
.ed-heading {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: #1F1F18;
  margin: 0;
}
.ed-heading em {
  font-style: italic;
  color: #3F8A3A;
}
.ed-row-body p {
  margin: 0 0 16px;
  font-size: 1.06rem;
  line-height: 1.62;
  color: #2E2E26;
}
.ed-row-body p:last-child { margin-bottom: 0; }

/* Thematic areas — three simple items in a row, no boxes, no diagrams */
.ed-themes {
  list-style: none;
  margin: 16px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  border-top: 1px solid #ECE9DA;
  padding-top: 36px;
}
.ed-theme {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-theme-num {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #3F8A3A;
}
.ed-theme-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.18;
  color: #1F1F18;
  margin: 0;
}
.ed-theme-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #2E2E26;
}

/* Cluster list — five horizontal rows, each fully clickable */
.ed-clusters {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid #ECE9DA;
}
.ed-clusters li { border-bottom: 1px solid #ECE9DA; }
.ed-cluster {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: baseline;
  gap: 32px;
  padding: 22px 0;
  text-decoration: none;
  color: #1F1F18;
  transition: color 0.18s ease, padding 0.18s ease;
}
.ed-cluster:hover {
  color: #3F8A3A;
  padding-left: 8px;
  text-decoration: none;
}
.ed-cluster-num {
  font-family: "Roboto Mono", monospace;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #3F8A3A;
}
.ed-cluster-name {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.22;
}
.ed-cluster-go {
  font-family: "Roboto Mono", monospace;
  font-size: 1.1rem;
  color: #3F8A3A;
  text-align: right;
  transition: transform 0.18s ease;
}
.ed-cluster:hover .ed-cluster-go { transform: translateX(6px); }

@media (max-width: 880px) {
  .ed-row { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .ed-themes { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .ed-cluster { grid-template-columns: 56px 1fr 36px; gap: 18px; padding: 18px 0; }
  .ed-cluster-name { font-size: 1.12rem; }
}

/* ==========================================================================
   v47 — Research page: drop-down theme boxes + colour-accented cluster list
   ========================================================================== */

/* Theme drop-down boxes (three in a row, click each to expand) */
.ed-theme-drops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 8px 0 16px;
}
@media (max-width: 880px) {
  .ed-theme-drops { grid-template-columns: 1fr; gap: 12px; }
}

.ed-drop {
  background: #ffffff;
  border: 1.5px solid #ECE9DA;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ed-drop[open] {
  box-shadow: 0 8px 22px rgba(31, 31, 24, 0.08);
}
.ed-drop summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  user-select: none;
}
.ed-drop summary::-webkit-details-marker { display: none; }
.ed-drop-num {
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
}
.ed-drop--1 .ed-drop-num { background: #C98A2B; }   /* ochre */
.ed-drop--2 .ed-drop-num { background: #4F8FA5; }   /* teal */
.ed-drop--3 .ed-drop-num { background: #3F8A3A; }   /* AISESA green */
.ed-drop-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.18;
  color: #1F1F18;
}
.ed-drop-toggle {
  width: 22px; height: 22px;
  position: relative;
  flex-shrink: 0;
}
.ed-drop-toggle::before,
.ed-drop-toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #3F8A3A;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}
.ed-drop-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.ed-drop[open] .ed-drop-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Theme-coloured top stripe per drop-down */
.ed-drop { position: relative; }
.ed-drop::before {
  content: "";
  position: absolute;
  top: -1.5px; left: -1.5px; right: -1.5px;
  height: 3px;
  border-radius: 8px 8px 0 0;
}
.ed-drop--1::before { background: #C98A2B; }
.ed-drop--2::before { background: #4F8FA5; }
.ed-drop--3::before { background: #3F8A3A; }

.ed-drop-body {
  padding: 0 18px 18px 56px;   /* indent body under the title to match summary */
  border-top: 1px solid #F2EFE2;
  margin-top: 4px;
  padding-top: 14px;
}
.ed-drop-body p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #2E2E26;
}
@media (max-width: 600px) {
  .ed-drop-body { padding-left: 18px; }
}

/* v48 — Cluster list (simple, fully-clickable rows).
   Hover: row shifts a few pixels right + the title turns AISESA green. */
.ed-clusters li { position: relative; }
.ed-cluster {
  position: relative;
  padding: 22px 8px 22px 4px;
  transition: transform 0.18s ease, color 0.18s ease;
  color: #1F1F18;
}
.ed-cluster:hover {
  transform: translateX(6px);
  color: #1F1F18; /* keep number/arrow consistent; title handles green below */
}
.ed-cluster:hover .ed-cluster-name {
  color: #3F8A3A;
}
.ed-cluster-name {
  transition: color 0.18s ease;
}
.ed-cluster-num,
.ed-cluster-go { color: #3F8A3A; }

/* ==========================================================================
   v49 — Our Research: two-column intro (copy + thematic-area boxes) +
   balanced page rhythm.
   ========================================================================== */
.ra-section {
  padding: 72px 0 64px;
}

/* Two-column intro: 60/40 split, copy on left, three boxes on right */
.ra-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .ra-intro { grid-template-columns: 1fr; gap: 32px; }
}

.ra-intro-copy .eyebrow {
  display: inline-block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin-bottom: 14px;
}
.ra-intro-copy h2 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: #1F1F18;
  margin: 0 0 22px;
}
.ra-intro-copy h2 em {
  font-style: italic;
  color: #3F8A3A;
  font-weight: 700;
}
.ra-intro-copy p {
  font-size: 1.04rem;
  line-height: 1.62;
  color: #1F1F18;
  margin: 0;
}

/* Three thematic-area boxes stacked vertically on the right */
.ra-themes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ra-themes-label {
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6D6650;
  margin-bottom: 4px;
}
.ra-theme {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #ECE9DA;
  border-left: 4px solid #5CAD59;
  border-radius: 4px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ra-theme:hover {
  border-color: #5CAD59;
  box-shadow: 0 4px 14px rgba(31,31,24,0.06);
  transform: translateX(2px);
}
.ra-theme-num {
  font-family: "Roboto Mono", monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3F8A3A;
}
.ra-theme-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1F1F18;
  margin: 0;
}

/* The "spacing after systems thinking" — continuation paragraphs sit beneath
   with extra room, full-width like the rest of the site’s standard sections. */
.ra-continued {
  max-width: 80ch;
  margin: 0 0 64px;
}
.ra-continued p {
  font-size: 1.04rem;
  line-height: 1.62;
  color: #1F1F18;
  margin: 0 0 18px;
}
.ra-continued p:last-child { margin-bottom: 0; }

/* Even rhythm: the Research Clusters block sits with its own breathing room */
.ra-section #clusters {
  margin-top: 24px;
  margin-bottom: 24px;
}
.ra-section .ed-clusters {
  margin-top: 8px;
}

/* ==========================================================================
   v50 — Our Research: standard thematic-area cards with image placeholder
   Three-column grid following the site's grid grid-3 convention.
   ========================================================================== */
.themes-grid-cards { margin-top: 8px; }

.theme-card-v2 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECE9DA;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.theme-card-v2:hover {
  border-color: #5CAD59;
  box-shadow: 0 4px 18px rgba(31,31,24,0.06);
  transform: translateY(-2px);
}

/* Image-placeholder thumb — soft green watercolour band with the theme number */
.theme-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #d9ead6 0%, #b9d4b5 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid #ECE9DA;
}
.theme-card-v2[data-theme="urban"]      .theme-card-thumb {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #e6d9b7 0%, #c8b97f 100%);
}
.theme-card-v2[data-theme="livelihoods"] .theme-card-thumb {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #cfe1d4 0%, #93b88f 100%);
}
.theme-card-num {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1F1F18;
  background: rgba(255,255,255,0.85);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,31,24,0.12);
}

.theme-card-body { padding: 22px 24px 26px; }
.theme-card-h3 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: #1F1F18;
  margin: 0 0 10px;
}
.theme-card-body p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #4a4a44;
}

/* ==========================================================================
   v51 — Cluster pages: hero image-placeholder band + cleaner section rhythm
   ========================================================================== */
.cluster-hero-image {
  padding: 28px 0 56px;
}
.cluster-hero-image-frame {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.6), transparent 55%),
    repeating-linear-gradient(135deg, rgba(31,31,24,0.04) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, #e0ecdc 0%, #b8d4b3 100%);
  border: 1px solid #ECE9DA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cluster-hero-image-label {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a4a44;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(31,31,24,0.12);
  padding: 8px 16px;
  border-radius: 999px;
}

/* Cluster section rhythm — give each block consistent breathing room */
.cluster-page-banner { padding: 0; }      /* legacy banner removed visually if present */
section.section-alt + section { padding-top: 56px; }
.cluster-people-grid { margin-top: 12px; }

/* ==========================================================================
   v52 — Homepage: diagonal map offset + card image placeholders
   ========================================================================== */

/* Push the Africa map slightly down + right of the title for a gentle diagonal,
   without clipping the legend underneath. */
.map-stage--offset {
  transform: translate(2%, 4%);
  margin-bottom: 24px;        /* room beneath so the legend always shows */
}
.am-home-frame { display: flex; flex-direction: column; }
.am-home-frame .am-stage--compact { max-height: 70vh; }
.am-home-frame .am-legend-wrap { margin-top: 14px; }
@media (max-width: 1000px) {
  .map-stage--offset { transform: none; margin-bottom: 0; }
}

/* About-section CTA row */
.about-cta-row {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Image placeholder at the top of cards — 16:9 watercolour band that signals
   where an image will sit. Three variants for visual variety. */
.card-media {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid #ECE9DA;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #d9e8d5 0%, #b6d2b0 100%);
}
.card-media[data-card-media="just-transition"] {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #e6d9b6 0%, #c5b478 100%);
}
.card-media[data-card-media="nature-energy"] {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #d3e3d0 0%, #88b282 100%);
}
.card-media[data-card-media="gec"] {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #cad8e2 0%, #7a9bab 100%);
}

/* Ochre variant for the Insights cards (keeps the home crossover into the Hub palette) */
.card-media--ochre {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #f3e6c3 0%, #d6b56b 100%);
  border-bottom-color: rgba(201, 138, 43, 0.25);
}
.card-media--ochre[data-card-media="models-futures"] {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #ead9b8 0%, #c79a4a 100%);
}
.card-media--ochre[data-card-media="senegal"] {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, #efd9b1 0%, #b48535 100%);
}

/* Card layout adjustments when media is present */
.project-card--media,
.home-insights__card--media {
  overflow: hidden;
}
.project-card--media .body,
.home-insights__card--media .body {
  padding: 22px 24px 24px;
}
.home-insights__card--media .meta { display: block; }

/* ==========================================================================
   v53 — Unified card hover + reusable tone-quote component
   ========================================================================== */

/* Bring publication + insights cards onto the same hover behaviour */
.project-card--media,
.home-insights__card--media {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECE9DA;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project-card--media:hover,
.home-insights__card--media:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(31,31,24,0.08);
  border-color: #5CAD59;
}
/* Drop the green left-bar on the insights card so the two card kinds match */
.home-insights__card--media { border-left: 1px solid #ECE9DA; }
.home-insights__card--media:hover { border-color: #C98A2B; }

.project-card--media .body,
.home-insights__card--media .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
}
.project-card--media .body .card-link,
.home-insights__card--media .body .card-link { margin-top: auto; }

/* ---- Tone quote — reusable across the site ---- */
.tone-quote {
  padding: 80px 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(92, 173, 89,0.08), transparent 55%),
    #fbfaf4;
  border-top: 1px solid #ECE9DA;
  border-bottom: 1px solid #ECE9DA;
}
.tone-quote__figure {
  margin: 0;
  position: relative;
  padding-left: 36px;
}
.tone-quote__mark {
  position: absolute;
  left: -8px;
  top: -28px;
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-size: 6rem;
  line-height: 1;
  color: #5CAD59;
  opacity: 0.8;
}
.tone-quote__body { margin: 0 0 22px; }
.tone-quote__body p {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 400;
  font-size: clamp(1.22rem, 2.2vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: #1F1F18;
  margin: 0;
  font-style: italic;
}
.tone-quote__body p strong {
  color: #3F8A3A;
  font-weight: 700;
  font-style: italic;
}
.tone-quote__by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(31,31,24,0.12);
  max-width: 320px;
}
.tone-quote__name {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1rem;
  color: #1F1F18;
}
.tone-quote__role {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6D6650;
}

/* ==========================================================================
   v54 — About page: living manifesto card
   ========================================================================== */
.manifesto-section {
  padding: 56px 0 80px;
  background: #fff;
}

.manifesto-paper {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(31,31,24,0.025) 35px 36px),
    #fbf8ef;                                    /* paper cream */
  border: 1px solid #e7e0c8;
  border-radius: 6px;
  padding: 36px 40px 28px;
  box-shadow: 0 4px 20px rgba(31,31,24,0.05);
}

.manifesto-paper-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(31,31,24,0.18);
}
.manifesto-version {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #3F8A3A;
  background: rgba(92, 173, 89,0.10);
  border: 1px solid rgba(92, 173, 89,0.32);
  padding: 4px 10px;
  border-radius: 999px;
}
.manifesto-revised {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6D6650;
}

.manifesto-body p {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #1F1F18;
  margin: 0 0 16px;
}
.manifesto-body p:last-child { margin-bottom: 0; }

/* Blinking cursor at the end of the last paragraph */
.manifesto-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #3F8A3A;
  margin-left: 4px;
  vertical-align: -2px;
  animation: manifestoBlink 1.05s steps(2, jump-none) infinite;
}
@keyframes manifestoBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.manifesto-paper-foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed rgba(31,31,24,0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.manifesto-margin-note {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-style: italic;
  font-size: 0.92rem;
  color: #6D6650;
}

/* Tiny dot trio — gentle "in progress" pulse */
.manifesto-paper-spinner {
  display: inline-flex;
  gap: 4px;
}
.manifesto-paper-spinner .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #5CAD59;
  opacity: 0.35;
  animation: manifestoDot 1.4s ease-in-out infinite;
}
.manifesto-paper-spinner .dot:nth-child(2) { animation-delay: 0.18s; }
.manifesto-paper-spinner .dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes manifestoDot {
  0%, 60%, 100% { opacity: 0.30; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-cursor, .manifesto-paper-spinner .dot { animation: none; }
  .manifesto-cursor { opacity: 1; }
}

/* ==========================================================================
   v55 — About: values → manifesto link block
   ========================================================================== */
.values-manifesto-cta {
  margin-top: 32px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #e7e4d8;
  border-left: 4px solid #5CAD59;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.values-manifesto-line {
  margin: 0;
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.45;
  color: #1F1F18;
  max-width: 60ch;
}
.values-manifesto-cta .btn { flex-shrink: 0; }

/* ==========================================================================
   v56 — Manifesto page: sleek paper + academic margin annotations
   ========================================================================== */

/* Paper card refinements — drop the "signed by founding membership" footer
   block, give the paper a quieter, more academic look. */
.manifesto-paper {
  /* The shadow stays; tighten borders and let the paper feel like a clean sheet. */
  background: #fdfbf2;
  border: 1px solid #e2d8b8;
  border-radius: 4px;
  padding: 44px 56px 36px;
  box-shadow: 0 2px 12px rgba(31,31,24,0.04);
  overflow: visible;                    /* allow margin connectors to escape */
}
.manifesto-paper-head {
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31,31,24,0.10);
}
.manifesto-paper-foot { display: none; }   /* caption removed per spec */

/* Two-column layout: paper + margin annotations */
.manifesto-section { padding: 56px 0 96px; }
.manifesto-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 700px) 320px;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .manifesto-layout { grid-template-columns: 1fr; }
  .manifesto-margin { display: none; }    /* hide marginalia on narrow screens */
}

.manifesto-margin {
  position: relative;
  min-height: 100%;
}

/* Each annotation is absolutely positioned at the y-coord of its term,
   then horizontally offset into the right column with a connector line. */
.ann {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s, transform .22s ease;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.ann.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ann-line {
  flex: 0 0 auto;
  width: 60px;
  height: 1px;
  background: #3F8A3A;
  margin-right: 14px;
  position: relative;
}
.ann-line::before,
.ann-line::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: #3F8A3A;
}
.ann-line::before { left: -3px; }
.ann-line::after  { right: -3px; }

.ann-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e7e4d8;
  border-left: 3px solid #3F8A3A;
  padding: 12px 14px;
  border-radius: 2px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #1F1F18;
  box-shadow: 0 2px 10px rgba(31,31,24,0.05);
}
.ann-tag {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin-bottom: 6px;
}
.ann-card p { margin: 0; }

/* Interactive terms inside the manifesto */
.m-term {
  position: relative;
  font-weight: 600;
  cursor: help;
  color: #1F1F18;
  border-bottom: 1px dotted rgba(63, 138, 58, 0.55);
  transition: color .15s, border-color .15s, background .15s;
  padding: 0 2px;
  border-radius: 1px;
}
.m-term:hover,
.m-term:focus,
.m-term.is-active {
  color: #3F8A3A;
  border-bottom-color: #3F8A3A;
  background: rgba(92, 173, 89, 0.06);
  outline: none;
}

/* v57 — Manifesto header now carries only the "Last revised" tag */
.manifesto-paper-head {
  display: flex;
  justify-content: flex-end;   /* anchor the revised tag to the right */
}

/* ==========================================================================
   v58 — Homepage rhythm: balanced sections + generous breathing room
   ========================================================================== */

/* Each major section on the homepage gets consistent padding so the
   page feels evenly weighted top → bottom. */
body > section { padding: 72px 0; }
body > .landing { padding: 96px 0 88px; }
body > section.section-alt { padding: 80px 0; }
body > section.home-insights { padding: 80px 0; }
body > section.tone-quote { padding: 80px 0; }
body > section.home-cta { padding: 88px 0 96px; }

/* About-us section header spacing */
.landing + section .section-header { gap: 36px; }

/* Make the About-us section feel airier: lead text wider, more spacing */
.landing + section .section-title { max-width: 70ch; }
.landing + section .section-title p { font-size: 1.06rem; line-height: 1.62; margin-top: 6px; }

/* Cards: slightly more inner padding to feel less cramped */
.project-card--media .body,
.home-insights__card--media .body { padding: 26px 26px 24px; gap: 10px; }

/* The big numbers vs lead — re-balance lead vs h1 vs eyebrow */
.landing-copy .eyebrow { margin-bottom: 1.4rem; }
.landing-copy h1 { margin: 0 0 22px; }
.landing-copy .lead { margin: 0 0 30px; }

/* ==========================================================================
   v60 — Homepage: smaller hero text, bigger map column
   ========================================================================== */
.landing-grid {
  grid-template-columns: 0.85fr 1.15fr;   /* shrink text, grow map */
  gap: 60px;
}
.landing-copy { max-width: 460px; }
.landing-copy h1 {
  font-size: clamp(1.4rem, 2.05vw, 1.85rem);
  line-height: 1.18;
  margin: 0 0 18px;
}
.landing-copy .lead {
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0 0 24px;
}
.landing-copy .eyebrow {
  font-size: 0.68rem;
}

/* Let the map breathe more — bigger viewport allocation */
.am-root--compact .am-stage--compact {
  max-height: 92vh;
}
.map-stage--offset { transform: translate(1%, 3%); }
@media (max-width: 1000px) {
  .landing-grid { grid-template-columns: 1fr; }
  .landing-copy { max-width: 100%; }
  .map-stage--offset { transform: none; }
}

/* ==========================================================================
   v61 — Homepage: highlight reel video section
   ========================================================================== */
.home-reel {
  background: linear-gradient(180deg, #fff 0%, #f8faf3 100%);
  border-top: 1px solid #e7e4d8;
  border-bottom: 1px solid #e7e4d8;
}
.home-reel .section-header { margin-bottom: 26px; }

.home-reel-frame {
  margin: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #d9e8d5 0%, #88b282 100%);
  border: 1px solid #ECE9DA;
  box-shadow: 0 10px 32px rgba(31,31,24,0.10);
  aspect-ratio: 16 / 9;
}
.home-reel-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* ==========================================================================
   v62 — Homepage: balanced hero + About-with-bleeding-video
   Resets prior ad-hoc tweaks and replaces with a cleaner system.
   ========================================================================== */

/* ---- Hero: balanced 1fr/1fr, centred vertically, generous spacing ---- */
.landing {
  padding: 104px 0 96px;
  min-height: 0;
  align-items: center;
  display: flex;
}
.landing-grid {
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.landing-copy {
  max-width: 520px;
}
.landing-copy .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}
.landing-copy h1 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 0 0 20px;
  max-width: none;
}
.landing-copy .lead {
  font-size: 1rem;
  line-height: 1.55;
  color: #4a4a44;
  margin: 0 0 28px;
  max-width: 48ch;
}
.landing-copy .cta-row { gap: 12px; }

/* Map: keep diagonal subtlety, but no clipping */
.map-stage--offset { transform: translate(0, 4%); }
.am-root--compact .am-stage--compact { max-height: 78vh; }

@media (max-width: 1000px) {
  .landing { padding: 64px 0 56px; }
  .landing-grid { grid-template-columns: 1fr; gap: 40px; }
  .landing-copy { max-width: 100%; }
  .map-stage--offset { transform: none; }
}

/* ---- About section: text + bleeding video reel ---- */
.home-about {
  position: relative;
  padding: 88px 0 96px;
  background: #fff;
  overflow-x: clip;     /* keep horizontal bleed contained to the viewport */
}
.home-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}
.home-about-copy { max-width: 540px; }
.home-about-copy .eyebrow {
  display: inline-block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin-bottom: 14px;
}
.home-about-copy h2 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  margin: 0 0 18px;
  color: #1F1F18;
}
.home-about-copy p {
  font-size: 1rem;
  line-height: 1.6;
  color: #1F1F18;
  margin: 0 0 16px;
}

/* The video bleeds out to the right edge of the viewport */
.home-about-reel {
  position: relative;
  margin: 0;
  margin-right: calc(50% - 50vw);   /* extend right edge to viewport edge */
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #d9e8d5 0%, #88b282 100%);
  box-shadow: 0 14px 40px rgba(31,31,24,0.14);
  aspect-ratio: 16 / 10;
}
.home-about-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* Tap-for-sound button — sits inside the video, bottom-right */
.home-about-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: rgba(20, 20, 18, 0.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
  backdrop-filter: blur(4px);
}
.home-about-sound:hover {
  background: rgba(20,20,18,0.92);
  transform: translateY(-1px);
}
.home-about-sound.is-on {
  background: #5CAD59;
  color: #fff;
  border-color: #5CAD59;
}
.home-about-sound__icon {
  display: inline-flex;
  align-items: center;
}
.home-about-sound .snd-wave { opacity: 0; transition: opacity .15s; }
.home-about-sound .snd-slash { opacity: 1; transition: opacity .15s; }
.home-about-sound.is-on .snd-wave { opacity: 1; }
.home-about-sound.is-on .snd-slash { opacity: 0; }

.home-about-reel-cap {
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20,20,18,0.55);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

@media (max-width: 1000px) {
  .home-about { padding: 64px 0 72px; }
  .home-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-about-reel {
    margin-right: 0;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
  }
}

/* Remove the old standalone reel section in case it lingers anywhere */
.home-reel { display: none; }

/* ==========================================================================
   v63 — Hero text in 4 lines + uncropped highlight reel
   ========================================================================== */

/* Hero headline: constrain width + slightly larger size so the sentence wraps
   to approximately 4 lines without any text being cropped. */
.landing-copy h1 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 500;
  font-size: clamp(2rem, 2.9vw, 2.45rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 0 0 22px;
  max-width: 20ch;            /* drives the 4-line wrap */
}

/* Highlight reel: show the WHOLE video frame, no crop. The video sits inside
   the bleeding figure with letterboxing where needed; the soft green
   watercolour band peeks through as a brand-coloured frame. */
.home-about-video {
  object-fit: contain;
  background: #0c0c0a;          /* quiet near-black behind any letterbox */
}
.home-about-reel {
  /* Make the figure tall enough for the video aspect ratio (16:9-ish) without
     awkward bars. Keep the rounded left edge + bleed off the right side. */
  aspect-ratio: 16 / 9;
  background: #0c0c0a;
}

/* ==========================================================================
   v64 — Landing: bigger map, smaller text bottom-left
       About: video fits cleanly in section (no bleed, no crop)
   ========================================================================== */

/* Bigger map column; text shrinks and anchors bottom-left of the hero. */
.landing {
  padding: 88px 0 80px;
  min-height: 86vh;
  align-items: stretch;     /* let columns fill the hero height */
}
.landing-grid {
  grid-template-columns: 0.7fr 1.3fr;   /* map dominates */
  gap: 56px;
  align-items: end;                     /* anchor copy to bottom of row */
}

.landing-copy {
  align-self: end;                       /* bottom-left anchoring */
  max-width: 420px;
  padding-bottom: 8px;
}
.landing-copy .eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}
.landing-copy h1 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.95vw, 1.8rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  max-width: 18ch;
}
.landing-copy .lead {
  font-size: 0.92rem;
  line-height: 1.52;
  margin: 0 0 22px;
  color: #4a4a44;
  max-width: 42ch;
}
.landing-copy .cta-row .btn { padding: 10px 18px; font-size: 0.86rem; }

/* Let the map fill its column generously, no diagonal offset needed now */
.map-stage--offset { transform: none; margin-bottom: 0; }
.am-root--compact { height: 100%; }
.am-root--compact .am-stage--compact {
  max-height: none;
  width: 100%;
}
.am-home-frame { height: 100%; justify-content: flex-end; }

@media (max-width: 1000px) {
  .landing { min-height: 0; padding: 56px 0; }
  .landing-grid { grid-template-columns: 1fr; align-items: stretch; gap: 36px; }
  .landing-copy { max-width: 100%; padding-bottom: 0; }
  .landing-copy h1 { max-width: 100%; }
}

/* About-section video: no bleed, no crop. The whole frame stays inside the
   right column with a 16:9 aspect-ratio and object-fit: contain. */
.home-about-reel {
  margin-right: 0;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}
.home-about-reel-cap { display: none; }
.home-about-video { object-fit: contain; }

/* ==========================================================================
   v65 — Landing: keep map at a measured size, hold text bottom-left
   ========================================================================== */
.am-root--compact .am-stage--compact {
  max-height: 78vh;          /* return the map to its previous, sensible size */
}
.am-home-frame { justify-content: flex-end; }
.landing { min-height: 78vh; }
.landing-grid {
  grid-template-columns: 0.8fr 1.2fr;   /* gentler imbalance than 0.7/1.3 */
  gap: 60px;
}

/* ==========================================================================
   v66 — Hero alignment locked to spec:
     • Left text column aligns with the About-section text column below
     • Hero text sits two-thirds of the way down the hero section
     • Hero text 10 % larger
     • Map column shares its right edge with the About video's right edge
     • Map vertically centred between toolbar and next section
   This block is intentionally at the end so it wins the cascade.
   ========================================================================== */

/* Container parity — both sections use the same max-width so their left/right
   edges align exactly. */
.landing > .container,
.home-about > .container {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Match the About section's grid: text on left (0.92fr), visual on right (1.08fr) */
.landing {
  padding: 88px 0 88px;
  min-height: 86vh;
  display: flex;
  align-items: stretch;
  overflow-x: clip;
}
.landing-grid {
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: stretch;
  width: 100%;
}

/* Hero text column: same max-width as About copy; text anchored about
   two-thirds of the way down. */
.landing-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 14vh;                /* keep text off the very bottom */
  padding-top: 38vh;                   /* push the start of the text down ~2/3 */
  max-width: 540px;
}

/* Hero text — 10 % larger than the previous size */
.landing-copy .eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}
.landing-copy h1 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.15vw, 2.0rem);   /* +10 % from v64 */
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
  max-width: 18ch;
}
.landing-copy .lead {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #4a4a44;
  margin: 0 0 22px;
  max-width: 42ch;
}

/* Map column — vertically centred between toolbar and next section,
   stretches to the right edge of the container (same line as the About video). */
.landing .map-stage {
  align-self: center;
  width: 100%;
  margin: 0;
}
.landing .map-stage--offset { transform: none; }
.landing .am-root--compact { width: 100%; }
.landing .am-root--compact .am-stage--compact {
  max-height: 72vh;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}
.landing .am-home-frame {
  justify-content: center;
  height: auto;
}

@media (max-width: 1000px) {
  .landing { padding: 56px 0; min-height: 0; }
  .landing-grid { grid-template-columns: 1fr; align-items: stretch; }
  .landing-copy { padding-top: 0; padding-bottom: 0; max-width: 100%; }
  .landing-copy h1 { max-width: 100%; }
}

/* ==========================================================================
   v67 — Hero locked to the user's reference screenshot:
     • Both columns 1fr/1fr, vertically CENTRED (not bottom-anchored)
     • Big serif headline (~60 px), "just and sustainable" + "African priorities"
       italicised in green
     • Multi-line mono caps eyebrow
     • Substantial lead paragraph + larger pill buttons
     • Map fills the right column, centred with legend visible below
   ========================================================================== */

.landing {
  padding: 72px 0 72px;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow-x: clip;
}
.landing > .container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 32px;
}
.landing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

/* Text column — clean block, centred vertically, top-anchored content */
.landing-copy {
  align-self: center;
  max-width: none;
  padding: 0;
  display: block;
}

/* Eyebrow — multi-line mono caps with a leading rule */
.landing-copy .eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin-bottom: 26px;
}
.landing-copy .eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  margin-top: 0.7em;
}
.landing-copy .eyebrow-text {
  display: inline-block;
  line-height: 1.45;
}

/* Headline — big serif, italic green emphasis on "just and sustainable" and
   "African priorities" via the existing <em> tags */
.landing-copy h1 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.55rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #1F1F18;
  margin: 0 0 26px;
  max-width: 18ch;
}
.landing-copy h1 em {
  font-style: italic;
  font-weight: 400;
  color: #3F8A3A;
}
/* Hide any decorative underline previously placed on em */
.landing-copy h1 em::after { display: none; }

/* Lead */
.landing-copy .lead {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #2A2A24;
  margin: 0 0 32px;
  max-width: 52ch;
}

/* CTA buttons — larger pill style */
.landing-copy .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
.landing-copy .cta-row .btn {
  padding: 14px 28px;
  font-size: 0.96rem;
  border-radius: 999px;
}

/* Map — fills the right column, vertically centred, legend visible below */
.landing .map-stage {
  align-self: center;
  width: 100%;
  margin: 0;
  transform: none;
}
.landing .am-root--compact { width: 100%; height: auto; }
.landing .am-root--compact .am-stage--compact {
  max-height: 80vh;
  width: 100%;
  margin: 0 auto;
}
.landing .am-home-frame { justify-content: center; height: auto; }
.landing .am-legend-wrap--compact { justify-content: flex-end; margin-top: 10px; }

@media (max-width: 1000px) {
  .landing { padding: 56px 0; min-height: 0; }
  .landing-grid { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
  .landing-copy h1 { max-width: 100%; }
}

/* ==========================================================================
   v68 — Manifesto: minimalist, centred, both-side marginalia
   The text sits on plain white; key terms have always-visible definitions
   pinned in the left and right margins. Hover/focus brightens the active pair.
   ========================================================================== */

/* Reset the previous paper styling */
.manifesto-section {
  padding: 64px 0 120px;
  background: #fff;
}
.manifesto-paper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.manifesto-paper-head,
.manifesto-paper-foot { display: none !important; }

/* Subtle revision tag, centred above the manifesto */
.manifesto-meta {
  text-align: center;
  margin-bottom: 56px;
}
.manifesto-meta .manifesto-revised {
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6D6650;
}

/* Stage: text column centred, annotations float on either side absolutely */
.manifesto-stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.manifesto-body p {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.7;
  color: #1F1F18;
  margin: 0 0 28px;
}
.manifesto-body p:last-child { margin-bottom: 0; }

/* Terms — quiet underline by default, brighter when active */
.m-term {
  font-style: normal;
  font-weight: 600;
  color: #1F1F18;
  border-bottom: 1px dotted rgba(63, 138, 58, 0.55);
  padding: 0 2px;
  cursor: help;
  transition: color .15s, border-color .15s, background .15s;
}
.m-term:hover,
.m-term:focus,
.m-term.is-active {
  color: #3F8A3A;
  border-bottom-color: #3F8A3A;
  background: rgba(92, 173, 89, 0.06);
  outline: none;
}
.m-term:focus-visible {
  outline: 2px solid #3F8A3A;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Margin container — anchored to the manifesto stage */
.manifesto-margin {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Each annotation sits at the y-coord of its term, on the chosen side */
.ann {
  position: absolute;
  top: 0;
  width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0.78;          /* always visible, quiet */
  transition: opacity .2s, transform .2s;
}
.ann.is-active {
  opacity: 1;
}
.ann[data-side="left"] {
  right: 50%;
  margin-right: 340px;     /* offset from the text column edge */
  flex-direction: row;
}
.ann[data-side="right"] {
  left: 50%;
  margin-left: 340px;
}

.ann-line {
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: rgba(63, 138, 58, 0.45);
  position: relative;
  transition: background .2s, width .2s;
}
.ann-line::before,
.ann-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(63, 138, 58, 0.55);
  transform: translateY(-50%);
}
.ann-line::before { left: -2px; }
.ann-line::after { right: -2px; }
.ann.is-active .ann-line { background: #3F8A3A; }
.ann.is-active .ann-line::before,
.ann.is-active .ann-line::after { background: #3F8A3A; }

.ann-card {
  flex: 1;
  text-align: left;
}
.ann-tag {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(63, 138, 58, 0.75);
  margin-bottom: 6px;
  transition: color .2s;
}
.ann.is-active .ann-tag { color: #3F8A3A; }

.ann-card p {
  margin: 0;
  font-family: var(--font-sans, "Roboto"), sans-serif;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #4a4a44;
}

@media (max-width: 1100px) {
  /* Below 1100px viewport, drop the margin annotations to a stacked list
     beneath the manifesto so it stays readable on smaller screens. */
  .manifesto-margin {
    position: static;
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .ann {
    position: static;
    width: auto;
    transform: none;
    margin: 0 !important;
    padding: 16px 18px;
    background: #fbfaf4;
    border-left: 3px solid #3F8A3A;
    border-radius: 2px;
    opacity: 1;
  }
  .ann[data-side="left"] { flex-direction: row; }
  .ann-line { display: none; }
}
@media (max-width: 640px) {
  .manifesto-margin { grid-template-columns: 1fr; }
}

/* v68b — Manifesto annotations: ensure they're visibly rendered.
   Override prior v56 .ann-card box styling that conflicted with the minimal
   marginalia design. */
.ann-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  color: #1F1F18 !important;
}
.ann-card p {
  color: #4a4a44 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.ann-tag {
  color: #3F8A3A !important;
  font-family: "Roboto Mono", monospace !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* Simpler positioning using calc */
.ann[data-side="left"] {
  right: auto !important;
  left: 0 !important;
  margin: 0 !important;
  max-width: 260px;
}
.ann[data-side="right"] {
  left: auto !important;
  right: 0 !important;
  margin: 0 !important;
  max-width: 260px;
}
.ann {
  opacity: 1;            /* fully visible, no longer 0.78 */
}

/* v68c — force annotation visibility (older rule had visibility: hidden) */
.ann {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   v70 — Manifesto: make defined terms green at rest, deeper green on hover.
   Adds colour to the page so the "concept words" stand out from the body.
   ========================================================================== */
.manifesto-body .m-term,
.m-term {
  color: #3F8A3A !important;
  font-weight: 700;
  border-bottom: 1px dotted rgba(63, 138, 58, 0.65);
}
.manifesto-body .m-term:hover,
.manifesto-body .m-term:focus,
.manifesto-body .m-term.is-active,
.m-term:hover,
.m-term:focus,
.m-term.is-active {
  color: #2F6E2C !important;             /* a richer green when active */
  border-bottom-color: #2F6E2C;
  background: rgba(92, 173, 89, 0.10);
}

/* Match the annotation tag colours so the term + its definition feel paired */
.ann-tag { color: #3F8A3A; }
.ann.is-active .ann-tag { color: #2F6E2C; }

/* ==========================================================================
   v71 — Manifesto: make the hovered term's definition unmistakable.
   Two reinforcing cues: the active card gets a highlighted background/
   outline so it visibly "lights up", and every other card dims so the eye
   is pulled straight to the right one. Term underline goes solid on hover
   too, so both ends of the pairing change together.
   ========================================================================== */
.m-term.is-active { border-bottom-style: solid; }

.manifesto-margin.has-active .ann:not(.is-active) {
  opacity: 0.32;
}
.ann {
  transition: opacity .2s ease, transform .2s ease;
}
.ann.is-active {
  transform: translateY(-50%) scale(1.03);
}

@media (min-width: 1101px) {
  .ann-card {
    transition: background .18s ease, box-shadow .18s ease, padding .18s ease, margin .18s ease;
    border-radius: 8px;
  }
  .ann.is-active .ann-card {
    background: rgba(63, 138, 58, 0.09) !important;
    box-shadow: 0 0 0 1px rgba(63, 138, 58, 0.35) !important;
    padding: 8px 10px !important;
    margin: -8px -10px !important;
  }
  .ann.is-active .ann-line {
    height: 2px;
  }
}

@media (max-width: 1100px) {
  .ann {
    transition: background .18s ease, border-color .18s ease, opacity .2s ease;
  }
  .ann.is-active {
    background: rgba(63, 138, 58, 0.14);
    border-left-color: #2F6E2C;
    transform: none;
  }
  .manifesto-margin.has-active .ann:not(.is-active) {
    opacity: 0.55;
  }
}

/* ==========================================================================
   v69 — Tone-quote with portrait (Youba Sokona on the homepage)
   Photo sits on the left, quote on the right; collapses to stacked layout
   on narrower screens.
   ========================================================================== */
.tone-quote--portrait { padding: 0; }
.tone-quote--portrait .tone-quote__split {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  max-width: none;
  margin: 0;
}
.tone-quote__portrait {
  position: relative;
  width: 240px;
  height: 240px;                     /* section height = photo height */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;                  /* hard rectangle, no rounded corners */
  background: #1a1a17;
  flex-shrink: 0;
}
.tone-quote__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;          /* keep face slightly above centre */
  display: block;
  filter: grayscale(100%) contrast(1.02);
}
/* Override the narrow margins in the base figure when used in a split */
.tone-quote--portrait .tone-quote__figure {
  padding-left: 32px;
  max-width: none;                   /* stretch to the right edge of the page */
}
.tone-quote--portrait .tone-quote__mark {
  left: -4px;
  top: -28px;
  font-size: 4.4rem;
}
.tone-quote--portrait .tone-quote__by {
  max-width: none;
  padding-top: 14px;
}

@media (max-width: 880px) {
  .tone-quote--portrait { padding: 32px 0; }
  .tone-quote--portrait .tone-quote__split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tone-quote__portrait {
    width: 200px;
    height: 200px;
    aspect-ratio: 1 / 1;
  }
  .tone-quote--portrait .tone-quote__figure {
    padding-left: 28px;
  }
}

/* ==========================================================================
   v71 — Homepage hero spacing: shift the hero block down off the toolbar
   and give it matching breathing room above and below. Sizes unchanged —
   only the surrounding padding is increased.
   ========================================================================== */
.landing { padding: 140px 0 140px; }
@media (max-width: 1000px) {
  .landing { padding: 96px 0 96px; }
}

/* ==========================================================================
   v73 — Insights Hub article template, unified with the main AISESA design
   system. Replaces the parallel hub.css brand. Uses the site's serif body
   font, AISESA green accents, cream backgrounds, and the same component
   patterns as the rest of the site.
   ========================================================================== */
.article-page { background: #ffffff; }

/* --- Article hero (title block above the hero image) --- */
.article-hero {
  padding: 120px 0 28px;
  background: linear-gradient(180deg, #fbfaf4 0%, #ffffff 100%);
  border-bottom: 1px solid #ECE9DA;
}
.article-hero .container { max-width: 880px; }
.article-hero .breadcrumbs { margin-bottom: 16px; }
.article-hero .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #3F8A3A;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.article-title {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: #1F1F18;
  margin: 0 0 18px;
}
.article-title em {
  font-style: italic;
  font-weight: 700;
  color: #3F8A3A;
}
.article-standfirst {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: #4a4a44;
  margin: 0 0 26px;
}
.article-byline {
  font-family: "Roboto", sans-serif;
  font-size: 0.96rem;
  color: #1F1F18;
  margin: 0 0 6px;
}
.article-byline a { color: #3F8A3A; text-decoration: none; border-bottom: 1px dotted #5CAD59; }
.article-byline a:hover { color: #2F6E2C; border-bottom-color: #2F6E2C; }
.article-byline .article-affil {
  display: inline;
  margin-left: 4px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  color: #6D6650;
  letter-spacing: 0.04em;
}
.article-byline-meta {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6D6650;
  margin: 8px 0 0;
}

/* --- Hero image --- */
.article-hero-image {
  padding: 0;
  background: #ffffff;
}
.article-hero-image figure {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.article-hero-image figcaption {
  margin: 12px 4px 0;
  font-family: "Roboto", sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #6D6650;
}

/* --- Article body --- */
.article-body {
  padding: 48px 0 56px;
}
.article-body .container { max-width: 720px; }
.article-body p,
.article-body ul,
.article-body ol {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.7;
  color: #1F1F18;
  margin: 0 0 22px;
}
.article-body h2 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: #1F1F18;
  margin: 40px 0 14px;
}
.article-body h3 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.3;
  color: #1F1F18;
  margin: 30px 0 10px;
}
.article-body a {
  color: #3F8A3A;
  text-decoration: none;
  border-bottom: 1px dotted #5CAD59;
}
.article-body a:hover { color: #2F6E2C; border-bottom-color: #2F6E2C; }
/* Buttons inside .article-body must render identically to the landing hero */
.article-body .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 8px; }
.article-body .cta-row a.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #061106;
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.article-body .cta-row a.btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #061106;
  border-bottom-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--color-primary-glow);
}
.article-body .cta-row a.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.article-body .cta-row a.btn-outline:hover {
  background: rgba(92, 173, 89, 0.06);
  border-color: var(--color-primary);
  color: var(--color-text);
  box-shadow: none;
}
.article-body strong { font-weight: 700; color: #1F1F18; }
.article-body em { font-style: italic; }

/* Pull-quote — the "transitions that reproduce…" highlight */
.article-pull {
  margin: 36px -28px;
  padding: 28px 32px;
  border-left: 4px solid #3F8A3A;
  background: #f6f4e8;
  border-radius: 0 4px 4px 0;
}
.article-pull blockquote {
  margin: 0;
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.45;
  color: #1F1F18;
}

/* Author cards + citation panel */
.article-attrib {
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid #ECE9DA;
}
.article-author-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}
.article-author-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #3F8A3A;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.article-author-body h4 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.04rem;
  margin: 0 0 4px;
  color: #1F1F18;
}
.article-author-body p {
  font-family: "Roboto", sans-serif;
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.55;
  color: #4a4a44;
  margin: 0;
}
.article-author-body a { color: #3F8A3A; }
.article-citation {
  margin-top: 26px;
  padding: 22px 24px;
  background: #f6f4e8;
  border-left: 3px solid #C9C7B8;
  border-radius: 0 4px 4px 0;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4a44;
}
.article-citation strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1F1F18;
}

/* --- Related reading section --- */
.article-related {
  padding: 56px 0;
  background: #fbfaf4;
  border-top: 1px solid #ECE9DA;
}
.article-related .container { max-width: 1240px; }
.article-related-head {
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin: 0 0 22px;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.article-related-grid article {
  background: #ffffff;
  border: 1px solid #ECE9DA;
  border-radius: 4px;
  padding: 22px 22px 24px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.article-related-grid article:hover {
  border-color: #5CAD59;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(31,31,24,0.08);
}
.article-related-grid h4 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.32;
  margin: 12px 0 8px;
  color: #1F1F18;
}
.article-related-grid h4 a { color: inherit; text-decoration: none; }
.article-related-grid h4 a:hover { color: #3F8A3A; }
.article-related-grid .byline {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #6D6650;
  margin: 0;
}
/* Small section-tag chip (IN / PB / DS) — uses the same green palette */
.article-related-grid .tag-flag,
.article-hero .tag-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3F8A3A;
}
.article-related-grid .tag-index,
.article-hero .tag-index {
  display: inline-block;
  padding: 2px 6px;
  background: #3F8A3A;
  color: #ffffff;
  border-radius: 2px;
  letter-spacing: 0.06em;
}

/* --- "News from AISESA" newsletter sign-up block — visually echoes the
   actual AISESA newsletter (Issue 01, June 2026). Cream background, white
   editorial card, green + gold accents, serif heading, hairline eyebrow.
   Used on the unified article template and on insights.html. --- */
.article-newsletter,
.ih-newsletter {
  padding: 64px 24px;
  background: #F4F1EB;                /* newsletter cream background */
  text-align: center;
}
.article-newsletter .container,
.ih-newsletter .container,
.ih-newsletter .container-narrow {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 44px 36px;
  box-shadow: 0 8px 32px rgba(31, 42, 31, 0.08);
}
.article-newsletter .nl-mark,
.ih-newsletter .nl-mark {
  display: block;
  margin: 0 auto 14px;
  width: 56px;
  height: 56px;
}
.article-newsletter .wordmark,
.ih-newsletter .wordmark {
  display: block;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #1F2A1F;       /* charcoal */
  margin-bottom: 22px;
}
.article-newsletter .wordmark .from,
.ih-newsletter .wordmark .from { color: #5CAD59; font-weight: 900; }
/* hairline + eyebrow row (matches the newsletter section-eyebrow pattern) */
.article-newsletter .kicker,
.ih-newsletter .kicker,
.article-newsletter .eyebrow,
.ih-newsletter .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8E6E2A;       /* gold-deep */
  margin: 0 0 14px;
}
.article-newsletter .kicker::before,
.ih-newsletter .kicker::before,
.article-newsletter .eyebrow::before,
.ih-newsletter .eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: #C19A4A;   /* gold */
  display: inline-block;
}
.article-newsletter h2,
.ih-newsletter h2,
.ih-newsletter .ih-newsletter-h {
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #1F2A1F;
  margin: 0 0 12px;
}
.article-newsletter p,
.ih-newsletter p,
.ih-newsletter .ih-newsletter-lead {
  font-family: "Roboto", sans-serif;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #3A4A3A;        /* body */
  max-width: 460px;
  margin: 0 auto 22px;
  font-style: italic;
}
.article-newsletter form,
.ih-newsletter form,
.ih-newsletter .ih-newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}
.article-newsletter input[type="email"],
.ih-newsletter input[type="email"] {
  flex: 1;
  padding: 13px 18px;
  border: 1px solid #E4E4E0;
  background: #FAFAF6;
  color: #1F2A1F;
  font-family: "Roboto", sans-serif;
  font-size: 0.96rem;
  border-radius: 30px;
  transition: border-color .15s, background .15s;
}
.article-newsletter input[type="email"]:focus,
.ih-newsletter input[type="email"]:focus {
  outline: none;
  border-color: #C19A4A;
  background: #FFFFFF;
}
.article-newsletter input[type="email"]::placeholder,
.ih-newsletter input[type="email"]::placeholder { color: #7A7A7A; }
.article-newsletter button,
.ih-newsletter button {
  padding: 13px 26px;
  background: #C19A4A;   /* gold — matches newsletter primary CTA */
  color: #FFFFFF;
  border: none;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 30px;
  cursor: pointer;
  transition: background .15s;
}
.article-newsletter button:hover,
.ih-newsletter button:hover { background: #8E6E2A; }
.article-newsletter .form-note,
.ih-newsletter .form-note {
  margin: 14px auto 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #2F6B33;        /* green-deep */
}
.article-newsletter .nl-tail,
.ih-newsletter .nl-tail {
  margin: 22px auto 0;
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 0.82rem;
  color: #7A7A7A;
  max-width: 380px;
}

@media (max-width: 600px) {
  .article-newsletter .container,
  .ih-newsletter .container,
  .ih-newsletter .container-narrow { padding: 32px 22px; }
  .article-newsletter form,
  .ih-newsletter form,
  .ih-newsletter .ih-newsletter-form { flex-direction: column; }
}

@media (max-width: 880px) {
  .article-related-grid { grid-template-columns: 1fr; gap: 18px; }
  .article-pull { margin: 28px 0; padding: 22px 24px; }
  .article-newsletter form { flex-direction: column; }
}

/* ==========================================================================
   v72 — Community hero: photos act as an ambient, desaturated backdrop
   behind the hero text. A cream wash overlay keeps the headline legible
   while the photos register as a textural presence rather than the focus.
   ========================================================================== */
.community-hero {
  position: relative;
  padding: 132px 0 104px;
  overflow: hidden;
  background: #fbfaf4;
  border-bottom: 1px solid #ECE9DA;
}
.community-hero__photos {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  z-index: 0;
}
.community-hero__photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(100%) brightness(1.05) contrast(0.95);
}
.community-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* horizontal cream wash – lighter in the middle so the photos peek through */
    linear-gradient(180deg,
      rgba(251, 250, 244, 0.94) 0%,
      rgba(251, 250, 244, 0.78) 35%,
      rgba(251, 250, 244, 0.78) 65%,
      rgba(251, 250, 244, 0.97) 100%),
    /* subtle AISESA-green tint so the photos read as part of the brand */
    radial-gradient(ellipse at center, rgba(92, 173, 89, 0.06), transparent 70%);
}
.community-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.community-hero__inner .breadcrumbs { margin-bottom: 14px; }
.community-hero__inner .eyebrow { color: #3F8A3A; }
.community-hero__inner h1 {
  font-family: var(--font-serif, "Roboto Slab"), serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: #1F1F18;
  margin: 8px 0 18px;
}
.community-hero__inner .lead {
  font-size: 1.06rem;
  line-height: 1.6;
  color: #2c2c25;
  max-width: 60ch;
}

@media (max-width: 900px) {
  .community-hero { padding: 96px 0 80px; }
  .community-hero__photos {
    grid-template-columns: repeat(3, 1fr);
  }
  .community-hero__photos img:nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .community-hero { padding: 72px 0 60px; }
  .community-hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(251, 250, 244, 0.96) 0%,
        rgba(251, 250, 244, 0.86) 50%,
        rgba(251, 250, 244, 0.98) 100%);
  }
}

/* ==========================================================================
   v75 — Site-wide search: header button + full-screen overlay panel.
   Styling matches the AISESA editorial palette (cream + green + gold).
   ========================================================================== */
.header-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0; margin-right: 6px;
  background: transparent;
  color: #1F1F18;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.header-search-btn:hover { background: #F4F1EB; color: #3F8A3A; border-color: #ECE9DA; }
.header-search-btn:focus-visible { outline: 2px solid #5CAD59; outline-offset: 2px; }

.search-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 96px 20px 20px;
}
.search-overlay[hidden] { display: none !important; }
.search-backdrop {
  position: absolute; inset: 0;
  background: rgba(31, 42, 31, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.search-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(31, 42, 31, 0.22);
  overflow: hidden;
  animation: searchPanelIn .18s ease;
}
@keyframes searchPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 18px 22px;
  border-bottom: 1px solid #ECE9DA;
}
.search-input-icon { color: #6D6650; flex-shrink: 0; }
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-size: 1.1rem;
  color: #1F1F18;
  background: transparent;
}
.search-input::placeholder { color: #9d9a90; font-style: italic; }
.search-close-btn {
  border: none;
  background: transparent;
  color: #6D6650;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.search-close-btn:hover { background: #F4F1EB; color: #1F1F18; }
.search-body { padding: 12px 6px 14px; max-height: 60vh; overflow-y: auto; }
.search-hint {
  padding: 20px 22px;
  color: #6D6650;
  font-family: "Roboto", sans-serif;
  font-size: 0.92rem;
  font-style: italic;
  margin: 0;
}
.search-hint kbd {
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  padding: 2px 6px;
  background: #F4F1EB;
  border: 1px solid #ECE9DA;
  border-radius: 4px;
  color: #1F1F18;
  font-style: normal;
}
.search-results { list-style: none; padding: 0; margin: 0; }
.search-noresult {
  padding: 20px 22px;
  color: #6D6650;
  font-family: "Roboto", sans-serif;
  font-size: 0.94rem;
}
.search-result {
  display: block;
  padding: 12px 22px;
  color: #1F1F18;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.search-result:hover, .search-result:focus {
  background: #F4F1EB;
  border-left-color: #C19A4A;
  outline: none;
}
.search-result-title {
  display: block;
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  color: #1F1F18;
  margin-bottom: 3px;
}
.search-result-heading {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #3F8A3A;
  margin-bottom: 4px;
}
.search-result-blurb {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 0.86rem;
  color: #4a4a44;
  line-height: 1.45;
}
.search-result mark {
  background: #F4E9D0;
  color: #1F1F18;
  padding: 0 2px;
  border-radius: 2px;
}

/* ==========================================================================
   v76 — Footer: Follow-us social row + always-visible AISESA lockup
   ========================================================================== */
.footer-follow {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-follow__label {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8ecc89;
  margin: 0 0 10px;
}
.footer-follow__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background .15s, border-color .15s, transform .15s;
  text-decoration: none;
}
.footer-social:hover {
  background: #5CAD59;
  border-color: #5CAD59;
  color: #ffffff;
  transform: translateY(-1px);
}
.footer-social svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Persistent AISESA lockup — ensure it always shows even if some other footer
   variant is used elsewhere in the site. */
.site-footer .brand-name { display: inline !important; }
.site-footer .brand-tag  { display: inline-block !important; }

/* ==========================================================================
   v79 — Insights Hub masthead.
   A sober, editorial black banner — Financial Times / Economist-cover
   restraint. Gold serif title, thin gold rule, italic serif descriptor,
   discreet meta line. No decorative motifs.
   ========================================================================== */
.ih-masthead {
  padding: 100px 0 110px;                       /* generous top+bottom breathing room */
  background: linear-gradient(180deg, #F4F1EB 0%, #FBFAF4 100%);
  color: #1F1F18;
  border-bottom: 1px solid #ECE9DA;
}
.ih-masthead__inner { max-width: 1240px; }
.ih-masthead__crumbs {
  color: #6D6650;
  margin: 0 0 96px;                             /* pushes title far down for air */
}
.ih-masthead__crumbs a { color: #6D6650; }
.ih-masthead__crumbs a:hover { color: #C19A4A; }
.ih-masthead__rule {
  width: 72px;
  height: 2px;
  background: #C19A4A;                          /* gold hairline above the title */
  margin: 0 auto 36px;
}
.ih-masthead__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-weight: 500;
  font-size: clamp(3.4rem, 8.4vw, 6.4rem);      /* larger than before */
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: #C19A4A;                                /* gold */
}
.ih-masthead__meta {
  margin: 34px 0 52px;                          /* more vertical air */
  text-align: center;
  font-family: "Roboto Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8E6E2A;
}
.ih-masthead__lead {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);     /* slightly larger */
  line-height: 1.6;
  color: #4a4a44;
}
@media (max-width: 700px) {
  .ih-masthead { padding: 56px 0 72px; }
  .ih-masthead__crumbs { margin-bottom: 56px; }
  .ih-masthead__meta   { margin: 24px 0 36px; }
}

/* ==========================================================================
   v80 — Insights Hub featured carousel.
   Crossfade between slides. Prev/next arrows + pagination dots.
   Auto-advances every 7s, pauses on hover / focus / reduced-motion.
   ========================================================================== */
.ih-featured { padding: 64px 0; }
.ih-featured-head { margin-bottom: 22px; }
.ih-carousel {
  position: relative;
  background: #ffffff;
  border: 1px solid #ECE9DA;
  border-radius: 6px;
  overflow: hidden;
}
.ih-carousel__track {
  position: relative;
  min-height: 380px;
}
.ih-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
  pointer-events: none;
}
.ih-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;              /* first slide holds container height */
}
.ih-slide__thumb {
  min-height: 380px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #2A5F3B 0%, #14170F 100%);
  border-right: 1px solid #ECE9DA;
}
.ih-slide__thumb.ih-thumb--feature {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #2A5F3B 0%, #14170F 100%);
}
.ih-slide__thumb.ih-thumb--interview {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #8E6E2A 0%, #14170F 100%);
}
.ih-slide__thumb.ih-thumb--data {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #3F8A3A 0%, #14170F 100%);
}
.ih-slide__thumb.ih-thumb--grid {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #457F70 0%, #14170F 100%);
}
.ih-slide__thumb.ih-thumb--brief {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #C19A4A 0%, #14170F 100%);
}
.ih-slide__body {
  padding: 44px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.ih-slide__body .ih-tag {
  align-self: flex-start;
  font-family: "Roboto Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C19A4A;
  padding: 5px 10px;
  border: 1px solid #C19A4A;
  border-radius: 999px;
}
.ih-slide__body h2 {
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: #14170F;
  margin: 0;
}
.ih-slide__body h2 em { font-style: italic; color: #3F8A3A; font-weight: 500; }
.ih-slide__body h2 a { color: inherit; text-decoration: none; }
.ih-slide__body h2 a:hover { color: #C19A4A; }
.ih-slide__body .ih-summary {
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: #4a4a44;
  margin: 0;
}
.ih-slide__body .ih-byline {
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #6D6650;
  margin: 0;
}

/* Arrow controls */
.ih-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(20, 23, 15, 0.55);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s;
}
.ih-carousel__nav:hover { background: rgba(20,23,15,0.85); }
.ih-carousel__nav--prev { left: 16px; }
.ih-carousel__nav--next { right: 16px; }

/* Pagination dots */
.ih-carousel__dots {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}
.ih-carousel__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.ih-carousel__dot:hover { background: rgba(255,255,255,0.6); }
.ih-carousel__dot.is-active {
  background: #C19A4A;
  transform: scale(1.2);
}

@media (max-width: 820px) {
  .ih-slide { grid-template-columns: 1fr; }
  .ih-slide__thumb { min-height: 180px; border-right: none; border-bottom: 1px solid #ECE9DA; }
  .ih-carousel__track { min-height: 560px; }
  .ih-slide__body { padding: 28px 24px 44px; }
  .ih-carousel__nav { top: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .ih-slide { transition: none; }
}

/* ==========================================================================
   v78 — Research page: cluster cards.
   Same visual language as the thematic-area cards but with a per-cluster
   colour band and a 3+2 grid layout (centred bottom row) for five items.
   ========================================================================== */
.clusters-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.clusters-grid-cards > .cluster-card-v2 { grid-column: span 1; }
/* A cluster marked "Cross-cutting" in the back office spans the full row
   as a wide horizontal card — design-only, independent of its position. */
.clusters-grid-cards > .cluster-card-v2--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 180px;
}
.clusters-grid-cards > .cluster-card-v2--wide .cluster-card-thumb {
  flex: 0 0 40%;
  min-width: 320px;
}
.clusters-grid-cards > .cluster-card-v2--wide .cluster-card-body {
  flex: 1;
  padding: 24px 28px 24px 32px;
  justify-content: center;
}
.clusters-grid-cards > .cluster-card-v2--wide .cluster-card-h3 {
  font-size: 1.35rem;   /* the wide card can afford a larger title */
}
.clusters-grid-cards > .cluster-card-v2--wide .cluster-card-body p {
  font-size: 1rem;
  max-width: 60ch;
}

.cluster-card-v2 {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #ECE9DA;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cluster-card-v2:hover {
  border-color: #5CAD59;
  box-shadow: 0 4px 18px rgba(31,31,24,0.06);
  transform: translateY(-2px);
}
.cluster-card-thumb {
  position: relative;
  min-height: 160px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #d9ead6 0%, #b9d4b5 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 22px;
}
.cluster-card-num {
  align-self: flex-start;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1F1F18;
  background: rgba(255,255,255,0.9);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,31,24,0.12);
}
.cluster-card-h3 {
  font-family: var(--font-serif, "Roboto Slab"), Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.22;
  color: #1F1F18;
  margin: 0;
  align-self: flex-start;
}
.cluster-card-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: #ffffff;
}
.cluster-card-body p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: #4a4a44;
  margin: 0;
}
.cluster-card-arrow {
  margin-top: auto;
  padding-top: 12px;
  font-family: "Roboto Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3F8A3A;
  font-weight: 700;
}

/* Per-cluster colour band — green-family palette that stays in-family
   with the AISESA main-site palette. Five distinguishable green tones. */
.cluster-card-v2[data-cluster="1"] .cluster-card-thumb {
  background: linear-gradient(135deg, #E8DFA8 0%, #C4B674 100%);  /* warm olive */
}
.cluster-card-v2[data-cluster="2"] .cluster-card-thumb {
  background: linear-gradient(135deg, #C8D8B0 0%, #98B87E 100%);  /* moss */
}
.cluster-card-v2[data-cluster="3"] .cluster-card-thumb {
  background: linear-gradient(135deg, #B8CDB2 0%, #7A9E7B 100%);  /* deep forest */
}
.cluster-card-v2[data-cluster="4"] .cluster-card-thumb {
  background: linear-gradient(135deg, #BFD5CE 0%, #85A99E 100%);  /* teal-green */
}
.cluster-card-v2[data-cluster="5"] .cluster-card-thumb {
  background: linear-gradient(135deg, #D9EAD6 0%, #B9D4B5 100%);  /* AISESA bright */
}

@media (max-width: 1000px) {
  .clusters-grid-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .clusters-grid-cards > .cluster-card-v2 { grid-column: span 1; }
  .clusters-grid-cards > .cluster-card-v2--wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .clusters-grid-cards { grid-template-columns: 1fr; }
  .clusters-grid-cards > .cluster-card-v2,
  .clusters-grid-cards > .cluster-card-v2--wide {
    grid-column: 1 / -1;
    flex-direction: column;
  }
  .clusters-grid-cards > .cluster-card-v2--wide .cluster-card-thumb {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* ==========================================================================
   v77 — Dark footer: the AISESA wordmark and Follow-us icons were designed
   for a dark background. Restore that here so the white wordmark and tagline
   have proper contrast on every page.
   ========================================================================== */
.site-footer {
  background: #1F3A2C !important;   /* AISESA deep green */
  border-top: none;
  color: #E4EBDF;
}
.site-footer h4 { color: #ffffff; }
.site-footer a { color: #C7D6BF; }
.site-footer a:hover { color: #ffffff; }
.footer-brand p { color: #C7D6BF; }
.footer-bottom { color: #8ecc89; border-top-color: rgba(255,255,255,0.14); }
.footer-bottom a { color: #C7D6BF; }
.footer-follow { border-top-color: rgba(255,255,255,0.14); }

/* ==========================================================================
   v74 — Cluster hero image: when an actual <img> is in the frame, fill the
   frame edge-to-edge. The placeholder gradient + label remain available as
   a fallback for cluster pages that don't yet have a photo.
   ========================================================================== */
.cluster-hero-image-frame { margin: 0; }
.cluster-hero-image-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================================================
   v81 — Cluster full member list (compact)
   ========================================================================== */
.cluster-members-full { padding: 60px 0 80px; }
.cluster-members-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px 20px;
}
.cluster-member-item {
  padding: 10px 14px;
  border-left: 2px solid #d9e5d3;
  background: rgba(255,255,255,0.65);
  border-radius: 3px;
  transition: border-color .12s, background .12s;
}
.cluster-member-item:hover {
  border-left-color: #5CAD59;
  background: rgba(255,255,255,0.95);
}
.cluster-member-name {
  display: block;
  font-weight: 600;
  color: #1F1F18;
  font-size: 0.92rem;
  line-height: 1.3;
}
.cluster-member-meta {
  display: block;
  font-size: 0.76rem;
  color: #6a6a60;
  margin-top: 2px;
  line-height: 1.35;
}

/* ==========================================================================
   v82 — Team page · sectioned groups + larger photos
   ========================================================================== */
.team-group { margin: 0 0 56px; }
.team-group:last-child { margin-bottom: 0; }
.team-group__head { max-width: 640px; margin: 0 0 20px; }
.team-group__head .eyebrow {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3F8A3A;
  margin: 0 0 6px;
  font-weight: 500;
}
.team-group__desc { font-size: 0.92rem; line-height: 1.5; color: #4a4a44; margin: 0; max-width: 60ch; }
.team-group__empty { font-size: 0.85rem; color: #6a6a60; font-style: italic; padding: 20px 14px; border: 1px dashed #d9e5d3; border-radius: 4px; background: #fafbf7; }

.team-grid.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .team-grid.grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .team-grid.grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .team-grid.grid-4 { grid-template-columns: repeat(1, 1fr); } }

/* Larger, more prominent team-card photos */
.team-card { padding: 22px 20px 20px; }
.team-card .avatar {
  width: 120px;
  height: 120px;
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.team-card h4 { font-size: 1.05rem; margin: 0 0 4px; line-height: 1.22; }
.team-card .role { font-size: 0.85rem; margin: 0; line-height: 1.35; }

/* Profile modal avatar — larger and photo-friendly */
.profile-modal-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #3F8A3A;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Mono", monospace;
  font-size: 1.5rem;
  margin: 0 auto 20px;
}

/* ---------- Back to top ---------- */
.back-to-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms, background 200ms ease;
}
.back-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top-btn:hover { background: var(--color-primary); }
.back-to-top-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 640px) {
  .back-to-top-btn { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}