/* ================================================================
   SCHOOL CHAMELEONS — GLOBAL ACTION LIBRARY
   Premium Redesign | assets/css/style.css
   ================================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:        #0F172A;
  --ink-2:      #1E293B;
  --body-txt:   #475569;
  --muted:      #64748B; /* darkened from #94A3B8 — the lighter shade failed WCAG AA (2.56:1) as text on white/surface backgrounds */
  --faint:      #CBD5E1;

  --blue:       #2563EB;
  --blue-dk:    #1D4ED8;
  --blue-dkr:   #1E3A8A;
  --blue-lt:    #EFF6FF;
  --blue-lt2:   #DBEAFE;

  --green:      #059669;
  --green-dk:   #047857;
  --green-lt:   #ECFDF5;

  --amber:      #D97706;
  --amber-lt:   #FEF3C7;

  --rose:       #E11D48;
  --rose-lt:    #FFE4E6;

  --navy:       #03045E;
  --navy-2:     #0B1530;
  --navy-3:     #0F2044;

  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --surface-3:  #F1F5F9;
  --surface-4:  #E8EEF6;

  --border:     #E2E8F0;
  --border-2:   #CBD5E1;

  /* Semantic */
  --primary:        var(--blue);
  --primary-dark:   var(--blue-dk);
  --secondary:      var(--green);
  --accent:         var(--amber);

  /* Gradients */
  --g-brand:    linear-gradient(135deg, #2563EB 0%, #059669 100%);
  --g-brand-v:  linear-gradient(180deg, #2563EB 0%, #059669 100%);
  --g-hero:     linear-gradient(135deg, #050C1A 0%, #0B1F60 55%, #063A25 100%);
  --g-hero-r:   radial-gradient(ellipse 80% 70% at 50% -10%, rgba(37,99,235,.45) 0%, transparent 70%);
  --g-mesh-1:   radial-gradient(ellipse 60% 55% at 80% 20%, rgba(5,150,105,.18) 0%, transparent 70%);
  --g-card:     linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
  --g-navy:     linear-gradient(115deg, #050552 0%, #0A0AB5 55%, #1414F5 100%);

  /* Shadows */
  --s-xs:  0 1px 3px rgba(15,23,42,.06);
  --s-sm:  0 2px 8px rgba(15,23,42,.08),  0 1px 3px rgba(15,23,42,.04);
  --s-md:  0 4px 20px rgba(15,23,42,.09),  0 2px 6px rgba(15,23,42,.04);
  --s-lg:  0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.05);
  --s-xl:  0 24px 80px rgba(15,23,42,.12), 0 8px 24px rgba(15,23,42,.06);
  --s-blue:  0 8px 32px rgba(37,99,235,.28);
  --s-green: 0 8px 32px rgba(5,150,105,.25);
  --s-card-hover: 0 20px 60px rgba(37,99,235,.14), 0 4px 16px rgba(15,23,42,.08);

  /* Radius — smaller, architectural (editorial reference uses restrained rounding) */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  22px;
  --r-pill: 9999px;

  /* Spacing system (8pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* Section rhythm */
  --section-y:    clamp(72px, 10vw, 128px);
  --section-y-sm: clamp(48px, 6vw, 80px);

  /* Container */
  --cx: clamp(16px, 3vw, 40px);
  --cw: 1280px;

  /* Type */
  --font: 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Plus Jakarta Sans', sans-serif;

  /* Transitions — calmer, editorial pacing (no springy overshoot) */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.4,0,.2,1);
  --t1: 200ms var(--ease);
  --t2: 350ms var(--ease);
  --t3: 500ms var(--ease);
  --t-spring: 450ms var(--ease-out);
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* body's overflow-x:hidden alone doesn't stop iOS Safari's elastic horizontal
     rubber-band scroll — it checks html's scrollable bounds too. */
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body-txt);
  background: var(--surface);
  /* overflow-x:clip (not hidden) — hidden makes body a scroll container in its
     own right (its overflow-y computes to auto), which breaks position:sticky
     everywhere on the site since it becomes the "nearest scroll ancestor"
     instead of the real viewport. clip still blocks horizontal overflow
     without that side effect. */
  overflow-x: clip;
  position: relative;
}
img,svg,video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul,ol { list-style: none; }
input,textarea,select {
  font: inherit;
  border: none;
  outline: none;
  background: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--surface-3); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 99px; }

/* Selection */
::selection { background: var(--blue-lt2); color: var(--blue-dk); }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────── */
/* Display / heading type uses an italic serif (editorial reference), body
   and UI chrome stay on the sans — mirrors the "serif headline, sans body"
   pairing from the reference site rather than a single all-caps grotesk. */
.display {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 5.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1,.h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h2,.h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--ink);
}
h3,.h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
h4,.h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}
h5,.h5 { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
h6,.h6 { font-size: .875rem; font-weight: 600; line-height: 1.5; color: var(--ink); }

.text-gradient {
  background: var(--g-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-white-gradient {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,.65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lead { font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.75; color: var(--body-txt); }
.caption { font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--blue);
}
.eyebrow::before {
  content: '';
  display: inline-block; width: 16px; height: 1px;
  background: currentColor; opacity: .55;
  flex-shrink: 0;
}

/* ── 4. LAYOUT HELPERS ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--cw) + var(--cx) * 2);
  margin-inline: auto;
  padding-inline: var(--cx);
}
.container-sm { max-width: calc(900px + var(--cx) * 2); margin-inline: auto; padding-inline: var(--cx); }
.container-xs { max-width: calc(680px + var(--cx) * 2); margin-inline: auto; padding-inline: var(--cx); }

.section { padding-block: var(--section-y); }
.section-sm { padding-block: var(--section-y-sm); }

.grid { display: grid; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* ── 5. NAVIGATION ────────────────────────────────────────────── */
.site-nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 1000;
  height: 72px;
  display: flex; align-items: center;
  transition: background var(--t2), box-shadow var(--t2), border-color var(--t2);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-nav.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(15,23,42,.06);
}
.site-nav.scrolled .nav-link { color: var(--body-txt); }
.site-nav.scrolled .nav-link:hover { color: var(--blue); }
.site-nav.scrolled .nav-logo-name { color: var(--ink); }
.site-nav.scrolled .nav-logo-sub { color: var(--muted); }
.site-nav.scrolled .nav-logo-mark { content: url('../images/logo-black.png'); }
.nav-inner {
  width: 100%;
  max-width: calc(var(--cw) + var(--cx) * 2);
  margin-inline: auto;
  padding-inline: var(--cx);
  display: flex; align-items: center; gap: var(--sp-6);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; text-decoration: none;
}
.nav-logo-mark {
  height: 50px; flex-shrink: 0;
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-name {
  font-size: .9375rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
  transition: color var(--t2);
}
.nav-logo-sub {
  font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  transition: color var(--t2);
}
.nav-links {
  display: flex; align-items: center; gap: 2px;
  margin-inline-start: auto;
}
.nav-link {
  position: relative;
  padding: 7px 12px;
  font-size: .875rem; font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  transition: color var(--t1);
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t2) var(--ease);
}
.nav-link:hover, .nav-link.active {
  color: white;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { font-weight: 600; }
/* Stories (listing + detail) nav matches the homepage's treatment — plain
   blue colour change, no underline reveal. */
.page-stories .site-nav .nav-link:hover,
.page-stories .site-nav .nav-link.active,
.page-story-detail .site-nav .nav-link:hover,
.page-story-detail .site-nav .nav-link.active { color: var(--blue); }
.page-stories .site-nav .nav-link::after,
.page-story-detail .site-nav .nav-link::after { display: none; }

/* ── Nav: shared floating-pill layout for every root page ──
   Position, insets, radius and the inner container are identical
   everywhere — only per-page colour/background (light vs dark hero)
   stays in each page's own rules below. */
:is(.page-home, .page-stories, .page-story-detail, .page-do-this-today,
    .page-events, .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav {
  top: 31px; height: auto;
  left: max(clamp(12px, 2.5vw, 28px), (100% - (var(--cw) + var(--cx) * 2)) / 2);
  right: max(clamp(12px, 2.5vw, 28px), (100% - (var(--cw) + var(--cx) * 2)) / 2);
  border-radius: 20px; border-bottom: none;
  transition: transform .35s ease, background .3s ease, box-shadow .3s ease, top .35s ease;
}
:is(.page-home, .page-stories, .page-story-detail, .page-do-this-today,
    .page-events, .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav .nav-inner {
  padding-block: 10px; max-width: none;
}
@media (max-width: 768px) {
  :is(.page-home, .page-stories, .page-story-detail, .page-do-this-today,
      .page-events, .page-register, .page-sdg-explorer,
      .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
      .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav { top: 25px; }
}
/* Sign In CTA: same solid-blue pill as the homepage (colours copied from
   .page-home's .btn-nav-cta rules below) instead of the base ghost-outline
   button, on every other root page's dark hero. .scrolled is this group's
   only fade trigger (no separate nav-past-hero stage), so it takes the
   colour homepage uses for its "past hero" stage. */
:is(.page-stories, .page-story-detail, .page-do-this-today, .page-events,
    .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav .btn-nav-cta {
  background: #1D48BF !important; border-color: #1D48BF !important; color: #fff !important;
}
:is(.page-stories, .page-story-detail, .page-do-this-today, .page-events,
    .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav .btn-nav-cta:hover {
  background: #1A3EA6 !important; border-color: #1A3EA6 !important; color: #fff !important;
}
:is(.page-stories, .page-story-detail, .page-do-this-today, .page-events,
    .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav.scrolled .btn-nav-cta {
  background: #03045E !important; border-color: #03045E !important; color: #fff !important;
}
:is(.page-stories, .page-story-detail, .page-do-this-today, .page-events,
    .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav.scrolled .btn-nav-cta:hover {
  background: #020342 !important; border-color: #020342 !important; color: #fff !important;
}

/* Dropdown */
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.nav-search-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 500;
  color: rgba(255,255,255,.8);
  transition: all var(--t1);
}
.nav-search-btn:hover { background: rgba(255,255,255,.18); color: white; border-color: rgba(255,255,255,.35); }
.site-nav.scrolled .nav-search-btn {
  background: var(--surface-2); border-color: var(--border);
  color: var(--body-txt);
}
.site-nav.scrolled .nav-search-btn:hover { background: var(--blue-lt); border-color: var(--blue); color: var(--blue); }
.btn-nav-cta {
  padding: 7px 17px;
  background: transparent;
  color: white !important;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  transition: background var(--t1), border-color var(--t1), color var(--t1);
  white-space: nowrap;
}
.btn-nav-cta:hover { background: white; border-color: white; color: var(--ink) !important; }
.site-nav.scrolled .btn-nav-cta { border-color: var(--border-2); color: var(--ink) !important; }
.site-nav.scrolled .btn-nav-cta:hover { background: var(--ink); border-color: var(--ink); color: white !important; }
/* Custom chevron (Bootstrap's default border-triangle caret hidden below)
   that flips 180° when the dropdown opens, tracking the toggle's own
   aria-expanded state Bootstrap already keeps in sync. */
/* Flex so the label and the chevron sit on one shared centre line. The
   chevron used to be a 7x7 square with two borders, turned 45deg and set
   with vertical-align:middle — but vertical-align centres the element's
   UNROTATED box, and rotating a corner-drawn square moves its visible ink
   roughly 2.8px below that box's centre, so it always sat low however the
   margins were nudged. */
.nav-signin .dropdown-toggle,
.nav-stories-dropdown .dropdown-toggle {
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-signin .dropdown-toggle {
  /* letter-spacing adds a trailing space after the final letter, which
     pushes the label off-centre inside the pill; pulling it back keeps the
     text optically centred between the two paddings. */
  padding-right: calc(17px - .06em);
}
.nav-signin .dropdown-toggle::after {
  content: '';
  flex-shrink: 0;
  width: 10px; height: 6px;
  margin: 0;
  border: none;
  /* Same chevron the Stories dropdown uses as a real icon, drawn here as a
     mask so it picks up the button's own colour. Its ink is symmetric
     inside its box, so align-items:center lands it exactly. */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t2) var(--ease);
}
.nav-signin .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Stories uses a real <i> icon instead of a ::after chevron — .nav-link
   already owns ::after for its underline-on-hover, and a dropdown-toggle
   chevron there would fight it for the same pseudo-element. Bootstrap's
   own default ::after caret is suppressed here too (this also silences
   the underline on this one link, which is fine — the chevron icon
   already signals it opens a menu). */
.nav-stories-dropdown .dropdown-toggle::after { display: none; }
.nav-stories-dropdown .dropdown-toggle .bi-chevron-down {
  font-size: .625rem;
  transition: transform var(--t2) var(--ease);
}
.nav-stories-dropdown .dropdown-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
/* Bootstrap toggles display:none/block on .show abruptly — kept always
   rendered instead (Popper already positions it via inline styles
   regardless) so opacity/transform can animate the open/close. */
.nav-signin .dropdown-menu,
.nav-stories-dropdown .dropdown-menu {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--s-lg);
  padding: 6px;
  margin-top: 10px;
  min-width: 150px;
  display: block;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(.96);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), visibility var(--t2);
}
.nav-stories-dropdown .dropdown-menu { min-width: 230px; }
.nav-signin .dropdown-menu.show,
.nav-stories-dropdown .dropdown-menu.show {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .nav-signin .dropdown-toggle::after,
  .nav-signin .dropdown-menu,
  .nav-stories-dropdown .dropdown-toggle .bi-chevron-down,
  .nav-stories-dropdown .dropdown-menu { transition: none; }
}
.nav-signin .dropdown-item,
.nav-stories-dropdown .dropdown-item {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .875rem;
  font-weight: 500;
}
.nav-signin .dropdown-item:hover,
.nav-signin .dropdown-item:focus,
.nav-stories-dropdown .dropdown-item:hover,
.nav-stories-dropdown .dropdown-item:focus { background: var(--blue-lt); color: var(--blue); }

.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  padding: 12px;
  border-radius: var(--r-sm);
  transition: background var(--t1);
}
.nav-hamburger:hover { background: rgba(255,255,255,.1); }
.site-nav.scrolled .nav-hamburger:hover { background: var(--surface-2); }
.nav-hamburger span {
  display: block; height: 2px; border-radius: 99px;
  background: white; transition: all var(--t2);
}
.site-nav.scrolled .nav-hamburger span { background: var(--ink); }
.nav-mobile {
  display: none; position: fixed; inset: 0;
  background: rgba(5,12,26,.6);
  backdrop-filter: blur(8px);
  z-index: 1050;
}
.nav-mobile-logo { height: 50px; }
.nav-mobile-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 90%;
  background: var(--surface);
  box-shadow: var(--s-xl);
  padding: 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--t3);
}
.nav-mobile-header {
  height: 72px;
  margin: -24px -24px 16px;
  padding-inline: var(--cx);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-mobile.open { display: block; }
.nav-mobile.open .nav-mobile-panel { transform: translateX(0); }
.nav-mobile-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-size: .9375rem; font-weight: 500;
  color: var(--body-txt);
  border-radius: var(--r-md);
  transition: background var(--t1), color var(--t1);
  border-bottom: 1px solid var(--border);
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-mobile-link.active { color: var(--blue); font-weight: 700; }
/* "Stories" is a pure toggle now (no link of its own — matches the
   desktop dropdown trigger, which is a <button> too), so it's a <button>
   styled to read exactly like the <a> rows around it: reset the native
   button chrome, then let .nav-mobile-link's own rules do the rest. */
.nav-mobile-group-toggle {
  width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border);
  font: inherit; text-align: left; cursor: pointer;
}
.nav-mobile-group-toggle .bi-chevron-down { font-size: .75rem; transition: transform var(--t2) var(--ease); }
.nav-mobile-group-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.nav-mobile-submenu {
  max-height: 0; overflow: hidden;
  padding: 0 8px 0 24px;
  transition: max-height var(--t2) var(--ease), padding var(--t2) var(--ease);
}
.nav-mobile-submenu.open { max-height: 260px; padding: 4px 8px 4px 24px; }
/* Same look as the desktop Stories dropdown's .dropdown-item — rounded,
   compact, blue hover fill — instead of the sitewide row treatment, still
   indented under "Stories" so the hierarchy reads at a glance. */
.nav-mobile-submenu .nav-mobile-sublink {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .875rem; font-weight: 500;
  color: var(--body-txt);
  border-bottom: none;
}
.nav-mobile-submenu .nav-mobile-sublink:hover,
.nav-mobile-submenu .nav-mobile-sublink:focus {
  background: var(--blue-lt); color: var(--blue);
}
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-group-toggle i,
  .nav-mobile-submenu { transition: none; }
}

/* ── 6. BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  border-radius: var(--r-pill);
  transition: background var(--t2), border-color var(--t2), color var(--t2), transform var(--t1);
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: #03045E;
  color: white;
  border: 1px solid #03045E;
}
.btn-primary:hover { background: #020342; border-color: #020342; color: white; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary.bookmarked { background: var(--green); border-color: var(--green); }
.btn-primary.bookmarked:hover { background: var(--green-dk); border-color: var(--green-dk); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-2);
}
.btn-secondary:hover { border-color: var(--ink); background: var(--ink); color: white; }

.btn-ghost {
  background: transparent;
  color: #03045E;
  border: 1px solid #03045E;
}
.btn-ghost:hover { background: #03045E; color: white; }

.btn-white {
  background: white; color: var(--ink);
  border: 1px solid white;
}
.btn-white:hover { background: transparent; border-color: white; color: white; }
.btn-white:active { transform: translateY(1px); }

.btn-ghost-white {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,.45);
}
.btn-ghost-white:hover { background: white; border-color: white; color: var(--ink); }
.btn-ghost-white:active { transform: translateY(1px); }

.btn-sm { padding: 6px 14px; font-size: .75rem; }
.btn-lg { padding: 11px 22px; font-size: .9375rem; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--r-md); }
.btn-icon-sm { width: 30px; height: 30px; padding: 0; border-radius: var(--r-sm); }

/* ── 7. HERO ──────────────────────────────────────────────────── */
.hero {
  min-height: 82vh;
  min-height: 82dvh;
  background: var(--g-hero);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
  padding-top: 72px;
}
/* id="home" + tabindex="-1" makes this a scroll/focus target for "#home"
   links (e.g. the nav's Home link from other pages, or the skip-link) —
   the browser auto-focuses it on arrival and shows its default outline.
   It's never reachable by actual Tab navigation (tabindex="-1" keeps it
   out of the tab order), so the ring only ever appears as a one-off flash
   after a cross-page link, not a real keyboard-focus indicator. */
.hero:focus { outline: none; }

/* Animated mesh blobs */
.hero-blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(80px);
  opacity: .5;
}
.hero-blob-1 {
  width: 700px; height: 700px;
  top: -20%; left: -10%;
  background: radial-gradient(circle, rgba(37,99,235,.5) 0%, transparent 70%);
  animation: blobFloat1 18s ease-in-out infinite;
}
.hero-blob-2 {
  width: 600px; height: 600px;
  top: 10%; right: -5%;
  background: radial-gradient(circle, rgba(5,150,105,.45) 0%, transparent 70%);
  animation: blobFloat2 22s ease-in-out infinite;
}
.hero-blob-3 {
  width: 400px; height: 400px;
  bottom: -10%; left: 35%;
  background: radial-gradient(circle, rgba(217,119,6,.3) 0%, transparent 70%);
  animation: blobFloat3 16s ease-in-out infinite;
}
@keyframes blobFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(40px,-30px) scale(1.08); }
  66%  { transform: translate(-20px,40px) scale(.94); }
}
@keyframes blobFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%  { transform: translate(-50px,30px) scale(1.1); }
  70%  { transform: translate(30px,-40px) scale(.92); }
}
@keyframes blobFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%  { transform: translate(30px,-50px) scale(1.12); }
}

/* Grid overlay for texture */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v40H0V0zm1 1v38h38V1H1z' fill='%23ffffff' fill-opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(60px, 8vh, 100px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-16);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.5); }
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: white;
  margin-bottom: 24px;
}
.hero-title .highlight {
  position: relative;
  color: #FCD34D;
}
.hero-desc {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.75;
  color: rgba(255,255,255,.75);
  max-width: 580px;
  margin-bottom: 40px;
}
.hero-search-wrap {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: 6px 6px 6px 20px;
  display: flex; align-items: center; gap: 10px;
  max-width: 560px;
  margin-bottom: 36px;
  backdrop-filter: blur(12px);
  transition: border-color var(--t2), box-shadow var(--t2);
}
.hero-search-wrap:focus-within {
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.hero-search-icon { color: rgba(255,255,255,.5); flex-shrink: 0; }
.hero-search-input {
  flex: 1; min-width: 0;
  font-size: .9375rem;
  color: white; background: transparent;
}
.hero-search-input::placeholder { color: rgba(255,255,255,.4); }
.hero-search-btn {
  background: var(--g-brand);
  color: white;
  border: none; border-radius: var(--r-xl);
  padding: 11px 22px;
  font-size: .875rem; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  transition: filter var(--t1), transform var(--t1);
}
.hero-search-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 340px;
}
.hero-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  backdrop-filter: blur(8px);
  transition: background var(--t2);
}
.hero-stat:hover { background: rgba(255,255,255,.12); }
.hero-stat-num {
  display: block;
  font-size: 1.625rem; font-weight: 900;
  color: #FCD34D;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-stat-label {
  display: block;
  font-size: .6875rem; font-weight: 600;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 4px;
}

/* Hero right: Globe visual */
.hero-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.hero-globe-wrap {
  position: relative;
  width: 360px; height: 360px;
  flex-shrink: 0;
}
.hero-globe-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.12);
  animation: ringRotate 20s linear infinite;
}
.hero-globe-ring:nth-child(2) {
  inset: 20px;
  border-color: rgba(255,255,255,.08);
  animation-duration: 30s;
  animation-direction: reverse;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
.hero-globe-core {
  position: absolute; inset: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.15), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 5.5rem;
  animation: float 6s ease-in-out infinite;
  box-shadow: inset 0 0 60px rgba(37,99,235,.3), 0 0 60px rgba(5,150,105,.2);
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
.sdg-orbit-item {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: white;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform var(--t-spring);
}
.sdg-orbit-item:hover { transform: scale(1.2) !important; z-index: 10; }
.sdi-1 { top: 4%;  left: 50%; transform: translateX(-50%); background: #e5243b; }
.sdi-2 { top: 22%; right: 8%; background: #DDA63A; }
.sdi-3 { top: 55%; right: 0%;  background: #4C9F38; }
.sdi-4 { bottom: 4%; left: 50%; transform: translateX(-50%); background: #C5192D; }
.sdi-5 { top: 55%; left: 0%; background: #FF3A21; }
.sdi-6 { top: 22%; left: 8%; background: #26BDE2; }

/* ── 8. STATS STRIP ───────────────────────────────────────────── */
.stats-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: 28px;
}
.stats-strip-inner {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: 900px; margin-inline: auto;
}
.stat-item {
  flex: 1; min-width: 140px;
  text-align: center;
  padding: 12px 24px;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  display: block;
  font-size: 2rem; font-weight: 900;
  color: var(--blue);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-label {
  display: block;
  font-size: .75rem; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-top: 4px;
}
.stat-icon { font-size: 1.25rem; margin-bottom: 6px; display: block; }

/* ── 9. SECTION HEADERS ───────────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-header.left { text-align: left; margin-inline: 0; }
.section-header .eyebrow { margin-bottom: 12px; }
.section-header h2 { margin-bottom: 14px; }
.section-header .lead { margin-bottom: 0; }

/* ── 10. SDG CARDS ────────────────────────────────────────────── */

/* SDG color + shadow tokens */
.sdg-c1  { --sdg-clr:#E5243B; --sdg-lt:#FDE8EA; --sdg-sh:rgba(229,36,59,.30); }
.sdg-c2  { --sdg-clr:#DDA63A; --sdg-lt:#FDF4E3; --sdg-sh:rgba(221,166,58,.30); }
.sdg-c3  { --sdg-clr:#4C9F38; --sdg-lt:#E8F6E8; --sdg-sh:rgba(76,159,56,.30); }
.sdg-c4  { --sdg-clr:#C5192D; --sdg-lt:#FEEEE6; --sdg-sh:rgba(197,25,45,.30); }
.sdg-c5  { --sdg-clr:#FF3A21; --sdg-lt:#FEE9E5; --sdg-sh:rgba(255,58,33,.30); }
.sdg-c6  { --sdg-clr:#26BDE2; --sdg-lt:#E4F5FB; --sdg-sh:rgba(38,189,226,.30); }
.sdg-c7  { --sdg-clr:#FCC30B; --sdg-lt:#FFF8E1; --sdg-sh:rgba(252,195,11,.32); }
.sdg-c8  { --sdg-clr:#A21942; --sdg-lt:#FCE4EC; --sdg-sh:rgba(162,25,66,.30); }
.sdg-c9  { --sdg-clr:#FD6925; --sdg-lt:#FEE9DA; --sdg-sh:rgba(253,105,37,.30); }
.sdg-c10 { --sdg-clr:#DD1367; --sdg-lt:#F5E5F8; --sdg-sh:rgba(221,19,103,.30); }
.sdg-c11 { --sdg-clr:#FD9D24; --sdg-lt:#FEF3E3; --sdg-sh:rgba(253,157,36,.30); }
.sdg-c12 { --sdg-clr:#BF8B2E; --sdg-lt:#FEF2DA; --sdg-sh:rgba(191,139,46,.30); }
.sdg-c13 { --sdg-clr:#3F7E44; --sdg-lt:#E4EDE4; --sdg-sh:rgba(63,126,68,.30); }
.sdg-c14 { --sdg-clr:#0A97D9; --sdg-lt:#E3F3FB; --sdg-sh:rgba(10,151,217,.30); }
.sdg-c15 { --sdg-clr:#56C02B; --sdg-lt:#E8F7E2; --sdg-sh:rgba(86,192,43,.30); }
.sdg-c16 { --sdg-clr:#00689D; --sdg-lt:#E3EDF7; --sdg-sh:rgba(0,104,157,.30); }
.sdg-c17 { --sdg-clr:#19486A; --sdg-lt:#E4EBF2; --sdg-sh:rgba(25,72,106,.30); }

/* Also keep old text/bg fallback for non-card uses (badges etc.) */
.sdg-c1  { color: #C01B2E; }
.sdg-c2  { color: #B07A1A; }
.sdg-c3  { color: #2E7A23; }
.sdg-c4  { color: #A0160E; }
.sdg-c5  { color: #C4260F; }
.sdg-c6  { color: #147BA6; }
.sdg-c7  { color: #A07005; }
.sdg-c8  { color: #7A0E2E; }
.sdg-c9  { color: #C44806; }
.sdg-c10 { color: #A00B5A; }
.sdg-c11 { color: #A4620D; }
.sdg-c12 { color: #8A5C10; }
.sdg-c13 { color: #255022; }
.sdg-c14 { color: #075680; }
.sdg-c15 { color: #2A7A0E; }
.sdg-c16 { color: #053E6E; }
.sdg-c17 { color: #0E2D4A; }

.sdg-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.sdg-card {
  border-radius: 20px;
  padding: 1.25rem 1.1rem 1rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 175px;
  background: var(--sdg-lt, #f5f5f5);
  border: 1.5px solid rgba(0,0,0,.05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
  cursor: pointer;
  isolation: isolate;
}

/* Shine sweep on hover */
.sdg-card::before {
  content: '';
  position: absolute;
  top: 0; left: -120%; width: 65%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transition: left .55s ease;
  pointer-events: none;
  z-index: 3;
}

/* Full color fill layer */
.sdg-card::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--sdg-clr, currentColor);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 0;
  border-radius: inherit;
}

.sdg-card > * { position: relative; z-index: 1; }

/* Watermark number */
.sdg-wm {
  position: absolute;
  bottom: -18px; right: -2px;
  font-size: 6rem; font-weight: 900; line-height: 1;
  color: var(--sdg-clr);
  opacity: .1;
  transition: opacity .3s, transform .4s ease;
  pointer-events: none;
  z-index: 1;
  letter-spacing: -.05em;
}

.sdg-card-icon {
  font-size: 1.6rem;
  color: var(--sdg-clr);
  margin-bottom: .5rem;
  display: block;
  transition: color .3s var(--ease), transform .4s var(--ease);
}

.sdg-num {
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--sdg-clr);
  opacity: .72; display: block; margin-bottom: 4px;
  transition: color .25s, opacity .25s;
}

.sdg-name {
  font-size: .8rem; font-weight: 700; line-height: 1.3;
  color: var(--ink); display: block; flex: 1;
  transition: color .25s;
}

.sdg-count {
  font-size: .68rem; color: var(--muted);
  display: block; margin-top: .5rem;
  transition: color .25s, opacity .25s;
}

.sdg-arrow {
  position: absolute; bottom: .8rem; right: .8rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: var(--sdg-clr);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  opacity: 0;
  transform: scale(.6) translateY(6px);
  transition: all .35s var(--ease);
  z-index: 3;
}

/* ── Hover ── */
.sdg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -12px var(--sdg-sh, rgba(0,0,0,.18));
  border-color: var(--sdg-clr);
}
.sdg-card:hover::after  { opacity: 1; }
.sdg-card:hover::before { left: 120%; }
.sdg-card:hover .sdg-wm { opacity: .2; transform: scale(1.06) translateY(-6px); }
.sdg-card:hover .sdg-card-icon { color: rgba(255,255,255,.95); transform: scale(1.14) translateY(-2px); }
.sdg-card:hover .sdg-num  { color: rgba(255,255,255,.75); opacity: 1; }
.sdg-card:hover .sdg-name { color: #fff; }
.sdg-card:hover .sdg-count{ color: rgba(255,255,255,.72); }
.sdg-card:hover .sdg-arrow{ opacity: 1; transform: scale(1) translateY(0); }
.sdg-card:active { transform: translateY(-4px) scale(.985); }

/* ── 11. CARDS ────────────────────────────────────────────────── */
/* Story Card */
.story-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
  height: 100%;
}
.story-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--s-card-hover);
  border-color: rgba(37,99,235,.2);
}
.story-card-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: var(--g-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.story-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.story-card-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.4) 100%);
  opacity: 0;
  transition: opacity var(--t2);
}
.story-card:hover .story-card-thumb-overlay { opacity: 1; }
.story-card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.story-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.story-card-title {
  font-size: 1rem; font-weight: 700;
  color: var(--ink); line-height: 1.45;
  flex: 1; margin-bottom: 10px;
}
.story-card-title a { color: inherit; }
.story-card-title a:hover { color: var(--blue); }
.story-card-excerpt { font-size: .875rem; color: var(--body-txt); line-height: 1.65; flex: 1; }
.story-card-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted);
  margin-top: 14px;
}
.meta-pill { display: flex; align-items: center; gap: 4px; }
.story-card-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}

/* Action Card */
.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex; flex-direction: column;
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
  position: relative; overflow: hidden;
  height: 100%;
}
.action-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--g-brand);
}
.action-card:hover { transform: translateY(-5px); box-shadow: var(--s-card-hover); border-color: rgba(37,99,235,.18); }
.action-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.action-card-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.4; flex: 1; margin: 8px 0; }
.action-stats-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px; margin-block: 14px;
}
.action-stat {
  text-align: center; padding: 10px 6px;
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.action-stat-val { font-size: .9375rem; font-weight: 800; color: var(--blue); display: block; }
.action-stat-lbl { font-size: .65rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-top: 2px; }

/* Blog Card */
.blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t2), box-shadow var(--t2);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--s-card-hover); }
.blog-card-img {
  width: 100%; aspect-ratio: 3 / 2;
  background: var(--g-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  overflow: hidden; position: relative;
}
.blog-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.blog-card-body { padding: 22px; }
.blog-card-tag { font-size: .72rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.blog-card-title { font-size: .9375rem; font-weight: 700; color: var(--ink); line-height: 1.45; margin-bottom: 8px; }
.blog-card-excerpt { font-size: .875rem; color: var(--body-txt); line-height: 1.65; }
.blog-card-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

/* Event Card */
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  transition: transform var(--t2), box-shadow var(--t2);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--s-card-hover); }
.event-date-col {
  background: var(--g-brand);
  color: white; padding: 16px 14px;
  text-align: center; min-width: 64px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.event-day { font-size: 1.75rem; font-weight: 900; line-height: 1; display: block; }
.event-month { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.event-body { padding: 14px 16px; flex: 1; }
.event-type { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); margin-bottom: 4px; }
.event-title { font-size: .9375rem; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 4px; }
.event-meta { font-size: .78rem; color: var(--muted); }
.event-action { padding: 14px; display: flex; align-items: center; }

/* Testimonial Card */
.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: 32px 28px 28px;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
  overflow: hidden;
}
.testi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-brand);
  border-radius: 0 0 20px 20px;
}
.testi-card:hover { transform: translateY(-6px); box-shadow: var(--s-lg); }
.testi-quote-mark {
  position: absolute; top: 16px; right: 22px;
  font-size: 5rem; line-height: 1;
  color: var(--blue);
  opacity: .06;
  font-family: Georgia, serif;
  user-select: none;
}
.testi-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.testi-stars i { color: #F59E0B; font-size: .9rem; }
.testi-badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--blue-lt); color: var(--blue); font-size: .7rem; font-weight: 700; padding: .2rem .65rem; border-radius: 20px; margin-bottom: 14px; }
.testi-text { font-size: .9375rem; line-height: 1.8; color: var(--body-txt); font-style: italic; margin-bottom: 20px; flex: 1; }
.testi-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 18px; margin-top: auto; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--g-brand);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59,130,246,.25);
}
.testi-name { font-size: .875rem; font-weight: 700; color: var(--ink); }
.testi-role { font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* Plan Card */
.plan-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  position: relative;
  transition: border-color var(--t2), box-shadow var(--t2), transform var(--t2);
  height: 100%;
}
.plan-card:hover { border-color: var(--blue); box-shadow: var(--s-card-hover); transform: translateY(-4px); }
.plan-card.featured { border-color: var(--blue); background: linear-gradient(145deg, #EFF6FF, #ECFDF5); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--g-brand); color: white;
  padding: 4px 16px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.plan-name { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.plan-desc { font-size: .8125rem; color: var(--muted); margin-bottom: 16px; }
.plan-price { font-size: 2.5rem; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.04em; }
.plan-price sup { font-size: 1rem; font-weight: 600; vertical-align: super; margin-right: 2px; letter-spacing: 0; }
.plan-period { font-size: .8125rem; color: var(--muted); }
.plan-divider { height: 1px; background: var(--border); margin-block: 20px; }
.plan-feature {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .875rem; padding: 5px 0;
  color: var(--body-txt);
}
.plan-check { color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.plan-x { color: var(--faint); flex-shrink: 0; margin-top: 1px; }

/* ── 12. TAGS & BADGES ────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.tag-blue  { background: var(--blue-lt);  color: var(--blue); }
.tag-green { background: var(--green-lt); color: var(--green); }
.tag-amber { background: var(--amber-lt); color: var(--amber); }
.tag-rose  { background: var(--rose-lt);  color: var(--rose); }
.tag-ink   { background: var(--surface-3); color: var(--ink); }
.tag-easy   { background: #DCFCE7; color: #166534; }
.tag-medium { background: #FEF9C3; color: #854D0E; }
.tag-hard   { background: #FFE4E6; color: #9F1239; }
.badge-jury {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,#FEF3C7,#FDE68A);
  color: #92400E; border: 1px solid #FCD34D;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.story-card-thumb .badge-jury {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.sdg-badge-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600;
  background: var(--blue-lt); color: var(--blue);
}
.author-mini { display: flex; align-items: center; gap: 8px; }
.author-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--g-brand);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: .72rem;
  flex-shrink: 0;
}
.author-name { font-size: .8125rem; font-weight: 600; color: var(--body-txt); }
.read-time { font-size: .75rem; color: var(--muted); }

/* ── 13. FORMS ────────────────────────────────────────────────── */
.form-field {
  display: flex; flex-direction: column; gap: 6px;
}
.form-label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.form-label .req { color: var(--rose); margin-left: 3px; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: .9375rem;
  color: var(--ink);
  transition: border-color var(--t1), box-shadow var(--t1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.65; }
.form-select { appearance: none; cursor: pointer; }
.form-hint { font-size: .75rem; color: var(--muted); }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--s-md);
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t2), background var(--t2);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--blue);
  background: var(--blue-lt);
}
.upload-icon { font-size: 2.5rem; color: var(--blue); margin-bottom: 10px; }
.upload-text { font-size: .9375rem; color: var(--body-txt); font-weight: 500; }
.upload-sub { font-size: .8125rem; color: var(--muted); margin-top: 4px; }

/* Step indicator */
.steps-row {
  display: flex; align-items: flex-start;
  overflow-x: auto; padding-bottom: 4px;
  gap: 0;
  margin-bottom: 32px;
}
.step-item {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 60px; position: relative;
}
.step-item::before {
  content: ''; position: absolute;
  top: 16px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 2px; background: var(--border-2);
  z-index: 0;
}
.step-item:last-child::before { display: none; }
.step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); border: 2px solid var(--border-2);
  color: var(--muted); font-weight: 700; font-size: .875rem;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; transition: all var(--t2);
  flex-shrink: 0;
}
.step-item.active .step-circle { background: var(--blue); border-color: var(--blue); color: white; box-shadow: 0 0 0 4px var(--blue-lt2); }
.step-item.done .step-circle { background: var(--green); border-color: var(--green); color: white; }
.step-item.done::before { background: var(--green); }
.step-item.active::before { background: linear-gradient(90deg, var(--blue), var(--border-2)); }
.step-label { font-size: .65rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 6px; white-space: nowrap; }
.step-item.active .step-label { color: var(--blue); }
.step-item.done .step-label { color: var(--green); }

/* ── 14. HOW IT WORKS ─────────────────────────────────────────── */
.hiw-step {
  text-align: center; padding: 32px 20px; position: relative;
}
.hiw-num-wrap {
  width: 60px; height: 60px; margin: 0 auto 18px;
  background: var(--g-brand);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-size: 1.375rem;
  box-shadow: var(--s-blue);
  position: relative; z-index: 2;
}
.hiw-connector {
  position: absolute;
  top: 62px; left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  opacity: .2;
}
.hiw-step:last-child .hiw-connector { display: none; }
.hiw-icon { font-size: 2.25rem; display: block; margin-bottom: 12px; }
.hiw-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.hiw-desc { font-size: .875rem; color: var(--body-txt); line-height: 1.7; }

/* ── 15. SOP FRAMEWORK ────────────────────────────────────────── */
.sop-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  border-left: 4px solid var(--blue);
  transition: transform var(--t1), box-shadow var(--t1);
}
.sop-step:hover { transform: translateX(4px); box-shadow: var(--s-sm); }
.sop-num {
  width: 30px; height: 30px; border-radius: 20px;
  background: var(--g-brand); color: white;
  font-weight: 800; font-size: .8125rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.sop-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.sop-desc { font-size: .875rem; color: var(--body-txt); line-height: 1.65; }

/* ── 16. DARK SECTION ─────────────────────────────────────────── */
.dark-section {
  background: var(--g-navy);
  position: relative; overflow: hidden;
}
.dark-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -5%, rgba(37,99,235,.3) 0%, transparent 70%);
  pointer-events: none;
}

/* Newsletter */
.newsletter-bar {
  max-width: 520px; margin-inline: auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 22px;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(8px);
}
.newsletter-input {
  flex: 1; min-width: 0;
  font-size: .9375rem; color: white; background: transparent;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.6); }
.newsletter-btn {
  background: var(--amber);
  color: #1a0a00; border: none; border-radius: var(--r-pill);
  padding: 10px 22px; font-size: .875rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: filter var(--t1), transform var(--t1);
}
.newsletter-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
.newsletter-flex { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.newsletter-text { max-width: 520px; }
.newsletter-heading { color: #fff; margin-bottom: 8px; }
.newsletter-lead { color: rgba(255,255,255,.65); margin-bottom: 0; }
.newsletter-flex .newsletter-bar { flex-shrink: 0; width: min(420px, 100%); margin-inline: 0; }
.newsletter-flex .newsletter-btn { background: var(--green); color: #fff; }
.newsletter-flex .newsletter-btn:hover { filter: brightness(1.08); transform: none; }

/* ── 17. PAGE HEADER ──────────────────────────────────────────── */
.page-hero {
  background: var(--g-hero);
  background-size: cover;
  background-position: center;
  padding: 120px 0 70px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,15,35,.72) 0%, rgba(5,15,35,.82) 100%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero h1 { color: white; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.25; }
.page-hero .lead { color: rgba(255,255,255,.75); max-width: 600px; }
.page-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px 5px 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}

/* ── 18. SEARCH UI ────────────────────────────────────────────── */
.search-hero-box {
  background: var(--surface);
  border-radius: var(--r-2xl);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--s-xl);
  max-width: 760px; margin-inline: auto;
}
.search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 18px;
  background: var(--surface-2);
  transition: border-color var(--t1), box-shadow var(--t1);
  margin-bottom: 16px;
}
.search-input-wrap:focus-within {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(37,99,235,.1);
}
.search-main-input {
  flex: 1; font-size: 1rem; color: var(--ink); background: transparent;
}
.search-main-input::placeholder { color: var(--muted); }
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 500;
  color: var(--body-txt);
  cursor: pointer;
  transition: all var(--t1);
  white-space: nowrap;
}
.filter-pill:hover, .filter-pill.active {
  border-color: var(--blue); color: var(--blue);
  background: var(--blue-lt);
}
.filter-pill .pill-count {
  background: var(--blue); color: white;
  border-radius: var(--r-pill);
  padding: 1px 6px; font-size: .65rem; font-weight: 700;
}

/* ── 19. SIDEBAR (Dashboard) ──────────────────────────────────── */
.db-layout { display: flex; min-height: 100vh; padding-top: 70px; }
.db-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed; top: 70px; left: 0; bottom: 0;
  overflow-y: auto; z-index: 100;
  transition: transform var(--t3);
}
.db-sidebar-inner { padding: 16px 12px; }
.db-user-card {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.db-user-avatar {
  width: 44px; height: 44px; border-radius: 20px;
  background: var(--g-brand);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.db-user-name { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.db-user-role { font-size: .72rem; color: var(--muted); }
.db-user-badge {
  font-size: .65rem; font-weight: 700; color: var(--amber);
  background: var(--amber-lt); border-radius: 20px;
  padding: 1px 6px; display: inline-block; margin-top: 2px;
}
.db-section-label {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
  padding: 14px 12px 5px;
}
.db-menu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: .875rem; font-weight: 500;
  color: var(--body-txt);
  border-radius: var(--r-md);
  transition: background var(--t1), color var(--t1);
  text-decoration: none;
  position: relative;
}
.db-menu-link:hover { background: var(--surface-2); color: var(--ink); }
.db-menu-link.active {
  background: var(--blue-lt); color: var(--blue);
  font-weight: 600;
}
.db-menu-link.active::before {
  content: '';
  position: absolute; left: 0; top: 25%; bottom: 25%;
  width: 3px; background: var(--blue);
  border-radius: 0 20px 20px 0;
}
.db-menu-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.db-badge {
  margin-left: auto;
  background: var(--blue); color: white;
  border-radius: var(--r-pill);
  padding: 1px 8px; font-size: .65rem; font-weight: 700;
}
.db-main { flex: 1; margin-left: 260px; padding: clamp(20px, 3vw, 36px); background: var(--surface-2); min-height: calc(100vh - 70px); }
.db-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 70px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding-inline: clamp(16px, 3vw, 32px);
  z-index: 200;
  box-shadow: var(--s-xs);
}
.db-topbar-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
.db-topbar-title { font-size: .9375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }

/* Widgets */
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  box-shadow: var(--s-xs);
  transition: box-shadow var(--t2), transform var(--t2);
}
.widget:hover { box-shadow: var(--s-sm); }
.widget-title { font-size: .9375rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.stat-widget-row { display: flex; align-items: center; gap: 14px; }
.stat-widget-icon {
  width: 50px; height: 50px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem; flex-shrink: 0;
}
.stat-widget-num { font-size: 1.625rem; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.stat-widget-label { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.stat-widget-change { font-size: .75rem; font-weight: 600; margin-top: 3px; }
.change-up { color: var(--green); }
.change-dn { color: var(--rose); }

/* Data table */
.data-tbl { width: 100%; border-collapse: collapse; }
.data-tbl th {
  background: var(--surface-2);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  text-align: left; white-space: nowrap;
}
.data-tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .875rem; vertical-align: middle;
}
.data-tbl tr:hover td { background: var(--surface-2); }
.data-tbl tr:last-child td { border-bottom: none; }
.status-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.sb-pending  { background: #FEF9C3; color: #854D0E; }
.sb-approved { background: #DCFCE7; color: #166534; }
.sb-rejected { background: #FFE4E6; color: #9F1239; }
.sb-featured { background: var(--blue-lt); color: var(--blue); }

/* ── 20. ADMIN (Dark) ─────────────────────────────────────────── */
.admin-layout { background: #080E1C; }
.admin-sidebar { background: #0C1427; border-right: 1px solid rgba(255,255,255,.06); }
.admin-sidebar .db-menu-link { color: rgba(255,255,255,.55); }
.admin-sidebar .db-menu-link:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.admin-sidebar .db-menu-link.active { background: rgba(37,99,235,.2); color: #60A5FA; }
.admin-sidebar .db-menu-link.active::before { background: #60A5FA; }
.admin-sidebar .db-section-label { color: rgba(255,255,255,.25); }
.admin-sidebar .db-user-name { color: white; }
.admin-sidebar .db-badge { background: rgba(37,99,235,.35); }
.admin-topbar { background: #0C1427; border-bottom-color: rgba(255,255,255,.06); }
.admin-topbar .db-topbar-title { color: white; }
.admin-main { background: #080E1C; }
.admin-card {
  background: #111C30;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-xl);
  padding: 22px 24px;
}
.admin-card .widget-title { color: rgba(255,255,255,.9); }
.admin-stat-num { font-size: 2rem; font-weight: 900; color: white; letter-spacing: -0.04em; }
.admin-stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.admin-tbl th { background: rgba(255,255,255,.04); color: rgba(255,255,255,.35); border-bottom-color: rgba(255,255,255,.08); }
.admin-tbl td { border-bottom-color: rgba(255,255,255,.05); color: rgba(255,255,255,.75); }
.admin-tbl tr:hover td { background: rgba(255,255,255,.03); }
div.admin-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.admin-bar-fill { height: 100%; background: var(--g-brand); border-radius: 99px; }
.admin-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
  transition: all var(--t1); text-decoration: none;
}
.admin-icon-btn:hover { background: rgba(255,255,255,.14); color: white; }

/* ── 21. STORY DETAIL ─────────────────────────────────────────── */
.story-hero-page {
  background: var(--g-hero);
  padding: 110px 0 75px;
  position: relative; overflow: hidden;
}
.story-hero-page::before {
  content: ''; position: absolute; inset: 0;
  background: var(--g-hero-r); pointer-events: none;
}
.story-hero-page::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 60px; background: var(--surface);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.story-body-content { max-width: 720px; margin: 0 auto; }
.story-body-content p { font-size: 1.0625rem; line-height: 1.85; color: var(--body-txt); margin-bottom: 20px; }
.story-body-content h2 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); margin: 36px 0 14px; color: var(--ink); font-weight: 800; }
.story-body-content h3 { font-size: clamp(1.0625rem, 2.8vw, 1.1875rem); margin: 28px 0 10px; color: var(--ink); font-weight: 700; }
.story-sidebar-sticky { position: sticky; top: 90px; }
.impact-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.impact-row:last-child { border-bottom: none; }
.impact-icon { font-size: 1.25rem; width: 28px; text-align: center; flex-shrink: 0; }
.impact-val { font-weight: 800; font-size: 1.0625rem; color: var(--blue); }
.impact-lbl { font-size: .78rem; color: var(--muted); margin-top: 1px; }

/* ── 22. CHATBOT ──────────────────────────────────────────────── */
.chatbot-fab {
  position: fixed; bottom: 28px; right: 28px;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--g-brand);
  color: white; border: 2px solid #fff; cursor: pointer;
  box-shadow: var(--s-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  z-index: 1100;
  transition: transform var(--t-spring), box-shadow var(--t2);
}
.chatbot-fab:hover { transform: scale(1.1); box-shadow: 0 16px 48px rgba(37,99,235,.45); }
.chatbot-window {
  position: fixed; bottom: 98px; right: 28px;
  width: 360px; max-height: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--s-xl);
  display: flex; flex-direction: column;
  z-index: 1099;
  overflow: hidden;
  animation: chatOpen .35s var(--ease-spring);
}
@keyframes chatOpen {
  from { opacity: 0; transform: scale(.85) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.chatbot-head {
  background: var(--g-brand);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.chatbot-head-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.chatbot-head-name { font-weight: 700; font-size: .9375rem; color: white; }
.chatbot-head-status {
  font-size: .71rem; color: rgba(255,255,255,.75);
  display: flex; align-items: center; gap: 5px;
}
.chatbot-head-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 6px #4ade80;
  display: inline-block;
}
.chatbot-msgs {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 300px;
}
.chat-bubble {
  max-width: 86%; padding: 10px 14px;
  border-radius: 20px; font-size: .875rem; line-height: 1.55;
}
.chat-bot { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-user { background: var(--blue); color: white; border-bottom-right-radius: 4px; align-self: flex-end; }
.chatbot-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; }
.chat-sug {
  background: var(--blue-lt); color: var(--blue);
  border: 1px solid var(--blue-lt2);
  border-radius: var(--r-pill);
  padding: 4px 12px; font-size: .78rem; font-weight: 500;
  cursor: pointer; transition: all var(--t1);
}
.chat-sug:hover { background: var(--blue); color: white; }
.chatbot-input-row {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center;
}
.chatbot-input-field {
  flex: 1; background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--r-pill); padding: 8px 14px;
  font-size: .875rem; color: var(--ink);
  transition: border-color var(--t1), box-shadow var(--t1);
}
.chatbot-input-field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); outline: none; }
.chatbot-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: #03045E; color: white; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
  transition: background var(--t1), transform var(--t1);
}
.chatbot-send-btn:hover { background: #020342; transform: scale(1.08); }
.chatbot-hidden { display: none !important; }

/* ── 23. MISC COMPONENTS ──────────────────────────────────────── */
/* Reading progress */
.reading-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 2%;
  background: var(--g-brand); z-index: 9999;
  transition: width .1s linear;
  /* Force its own compositing layer so mobile Safari doesn't flicker/hide this
     fixed bar while repainting the blurred .site-nav.scrolled layer above it. */
  transform: translateZ(0);
  will-change: width;
  backface-visibility: hidden;
}

/* Back to top */
.back-top {
  position: fixed; bottom: 98px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  box-shadow: var(--s-md);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t2), transform var(--t2), box-shadow var(--t2);
  font-size: 1rem;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); box-shadow: var(--s-lg); }

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(5,12,26,.7);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  padding-inline: 20px;
}
.search-overlay.open { display: flex; animation: fadeIn .2s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.search-overlay-box {
  width: 100%; max-width: 660px;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--s-xl);
  animation: slideDown .25s var(--ease-out);
}
@keyframes slideDown {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Leaderboard */
.lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t1), box-shadow var(--t1);
  margin-bottom: 8px;
}
.lb-row:hover { transform: translateX(4px); box-shadow: var(--s-sm); }
.lb-rank {
  width: 30px; height: 30px; border-radius: 20px;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; flex-shrink: 0;
}
.lb-gold   { background: linear-gradient(135deg,#F59E0B,#D97706); color: white; }
.lb-silver { background: linear-gradient(135deg,#94A3B8,#64748B); color: white; }
.lb-bronze { background: linear-gradient(135deg,#B45309,#92400E); color: white; }
.lb-score  { margin-left: auto; font-weight: 800; color: var(--blue); font-size: 1.0625rem; }

/* Countdown */
.countdown-wrap { display: flex; gap: 12px; justify-content: center; }
.countdown-unit { text-align: center; }
.countdown-num {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: white; border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: 1.75rem; font-weight: 900;
  display: block; min-width: 56px; text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.countdown-lbl {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  margin-top: 5px; display: block;
}

/* Tag cloud */
.tag-cloud-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud-item {
  padding: 5px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 500; color: var(--body-txt);
  cursor: pointer; transition: all var(--t1);
  text-decoration: none;
}
.tag-cloud-item:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

/* Ribbon */
.ribbon {
  position: absolute; top: 14px; right: -4px;
  background: var(--rose); color: white;
  font-size: .65rem; font-weight: 800;
  padding: 3px 10px 3px 8px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
  text-transform: uppercase; letter-spacing: .06em;
}

/* Glass card */
.glass-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
}

/* ── 24. FOOTER ───────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding-block: clamp(56px, 8vw, 96px) 5px;
}
.footer-main { align-items: flex-start; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img,
.footer-brand .custom-logo-link img { height: 50px; width: auto; }
.footer-brand .custom-logo-link { display: inline-flex; line-height: 0; }
.footer-brand-name { font-size: 1rem; font-weight: 800; color: white; letter-spacing: -0.02em; }
.footer-brand-sub { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); }
.footer-about { font-size: .875rem; line-height: 1.7; max-width: 320px; margin-bottom: 22px; }
.footer-col nav { display: flex; flex-direction: column; }
.footer-social-row { display: flex; gap: 8px; margin-bottom: 0; }
.footer-social-btn {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: .875rem;
  cursor: pointer; transition: all var(--t1); text-decoration: none;
}
.footer-social-btn:hover { background: #03045E; border-color: #03045E; color: white; transform: translateY(-2px); }
.footer-contact-link { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: .875rem; color: rgba(255,255,255,.55); margin-top: 18px; transition: color var(--t1); }
.footer-contact-link:hover { color: white; }
.footer-col-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: white; margin-bottom: 14px; }
.footer-newsletter-heading { font-size: .9375rem; font-weight: 700; color: rgba(255,255,255,.70); margin-bottom: 6px; }
.footer-newsletter-lead { font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.55); margin-bottom: 16px; max-width: 320px; }
.footer-newsletter-bar.newsletter-bar { margin-inline: 0; max-width: 100%; }
.footer-link {
  display: block; font-size: .875rem; color: rgba(255,255,255,.55);
  padding: 4px 0; transition: color var(--t1), padding-left var(--t1);
}
.footer-link:hover { color: white; padding-left: 4px; }
.footer-sdg-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.footer-sdg-dot {
  width: 26px; height: 26px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 800; color: white;
  cursor: pointer; transition: transform var(--t1);
  text-decoration: none;
}
.footer-sdg-dot:hover { transform: scale(1.2); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-block: 22px;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.footer-copyright { font-size: .8125rem; color: rgba(255,255,255,.55); }
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-legal a {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--t1);
  white-space: nowrap;
}
.footer-legal a:hover { color: rgba(255,255,255,.7); }
.footer-powered {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.footer-powered-label {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
}
.footer-powered-link {
  display: flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none;
  transition: opacity var(--t1);
}
.footer-powered-link:hover { opacity: .75; }
.footer-powered-logo { height: 18px; width: auto; }
.footer-powered-name {
  font-size: .8125rem; color: rgba(255,255,255,.55);
}

/* ── 24b. SDG GOAL PAGES ─────────────────────────────────────── */
.sc-sdg-page .sc-sdg-hero::before {
  display: block;
  background: linear-gradient(135deg, rgba(5,15,35,.72) 0%, rgba(5,15,35,.82) 100%);
}
.sdg-c1  .sc-sdg-hero::before,
.sdg-c1  .page-hero::before { background: linear-gradient(135deg, #9B1224e8 0%, #72121ee6 55%, #9B1224cc 100%); }
.sdg-c2  .sc-sdg-hero::before,
.sdg-c2  .page-hero::before { background: linear-gradient(135deg, #8A6218e8 0%, #6e531de6 55%, #8A6218cc 100%); }
.sdg-c3  .sc-sdg-hero::before,
.sdg-c3  .page-hero::before { background: linear-gradient(135deg, #1E5C10e8 0%, #26501ce6 55%, #1E5C10cc 100%); }
.sdg-c4  .sc-sdg-hero::before,
.sdg-c4  .page-hero::before { background: linear-gradient(135deg, #7A0F1Ce8 0%, #620c16e6 55%, #7A0F1Ccc 100%); }
.sdg-c5  .sc-sdg-hero::before,
.sdg-c5  .page-hero::before { background: linear-gradient(135deg, #8C1A0Ee8 0%, #801d10e6 55%, #8C1A0Ecc 100%); }
.sdg-c6  .sc-sdg-hero::before,
.sdg-c6  .page-hero::before { background: linear-gradient(135deg, #0D6B85e8 0%, #135e71e6 55%, #0D6B85cc 100%); }
.sdg-c7  .sc-sdg-hero::before,
.sdg-c7  .page-hero::before { background: linear-gradient(135deg, #7A5B00e8 0%, #7e6206e6 55%, #7A5B00cc 100%); }
.sdg-c8  .sc-sdg-hero::before,
.sdg-c8  .page-hero::before { background: linear-gradient(135deg, #580D25e8 0%, #510c21e6 55%, #580D25cc 100%); }
.sdg-c9  .sc-sdg-hero::before,
.sdg-c9  .page-hero::before { background: linear-gradient(135deg, #7A2D0Ae8 0%, #7e3412e6 55%, #7A2D0Acc 100%); }
.sdg-c10 .sc-sdg-hero::before,
.sdg-c10 .page-hero::before { background: linear-gradient(135deg, #720938e8 0%, #6e0a34e6 55%, #720938cc 100%); }
.sdg-c11 .sc-sdg-hero::before,
.sdg-c11 .page-hero::before { background: linear-gradient(135deg, #7A4500e8 0%, #7e4e12e6 55%, #7A4500cc 100%); }
.sdg-c12 .sc-sdg-hero::before,
.sdg-c12 .page-hero::before { background: linear-gradient(135deg, #5C3E0Ae8 0%, #604617e6 55%, #5C3E0Acc 100%); }
.sdg-c13 .sc-sdg-hero::before,
.sdg-c13 .page-hero::before { background: linear-gradient(135deg, #1A3B1De8 0%, #203f22e6 55%, #1A3B1Dcc 100%); }
.sdg-c14 .sc-sdg-hero::before,
.sdg-c14 .page-hero::before { background: linear-gradient(135deg, #064868e8 0%, #054c6ce6 55%, #064868cc 100%); }
.sdg-c15 .sc-sdg-hero::before,
.sdg-c15 .page-hero::before { background: linear-gradient(135deg, #245C10e8 0%, #2b6016e6 55%, #245C10cc 100%); }
.sdg-c16 .sc-sdg-hero::before,
.sdg-c16 .page-hero::before { background: linear-gradient(135deg, #003349e8 0%, #00344ee6 55%, #003349cc 100%); }
.sdg-c17 .sc-sdg-hero::before,
.sdg-c17 .page-hero::before { background: linear-gradient(135deg, #0A1F30e8 0%, #0c2435e6 55%, #0A1F30cc 100%); }
.sdg-about-section { padding: var(--section-y) 0; background: #fff; }
.sdg-about-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; padding: .3rem 1rem;
  border-radius: 9999px; margin-bottom: 1.25rem;
}
.sdg-about-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--ink); line-height: 1.15; margin-bottom: 1.25rem; }
.sdg-about-body { font-size: 1.0625rem; color: var(--body-txt); line-height: 1.85; max-width: 68ch; }
.sdg-about-body p:last-child { margin-bottom: 0; }
.sdg-icon-display {
  width: clamp(160px, 22vw, 220px);
  border-radius: 20px;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  position: absolute;
  z-index: 1;
}
.sdg-icon-display:hover { transform: scale(1.04) rotate(1deg); }
/* Once sdg-icons.js inlines it, this element is an <svg> rather than an
   <img>: it keeps .sdg-icon-display (and so the width, radius and the
   goal's coloured shadow) but needs its height stated, since an inline
   SVG does not carry the intrinsic dimensions an image does. */
.sdg-icon-display.sdg-ico { display: block; height: auto; aspect-ratio: 1 / 1; overflow: hidden; }
.sdg-about-num {
  font-size: clamp(8rem, 20vw, 15rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; user-select: none; text-align: center;
}
.sdg-icon-col { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.sdg-stories-section { padding: var(--section-y) 0; background: var(--surface-2); }
.sdg-stories-section .section-header .lead { color: var(--body-txt); max-width: 640px; }
.sc-sdg-btn-primary:hover,
.sc-sdg-btn-primary:focus { filter: brightness(1.06); color: #fff; }
.sdg-c7 .sc-sdg-btn-primary:hover,
.sdg-c7 .sc-sdg-btn-primary:focus { color: var(--ink); }
.sc-sdg-empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 48px); text-align: center; }

.sdg-c1  .sdg-about-badge { background: #E5243B15; color: #9B1224; border: 1px solid #E5243B30; }
.sdg-c1  .sdg-about-num { color: #E5243B10; }
.sdg-c1  .sdg-icon-display { box-shadow: 0 24px 60px #E5243B35; }
.sdg-c1  .sc-sdg-eyebrow { background: #E5243B18; color: #9B1224; }
.sdg-c1  .sc-sdg-btn-primary { background: #E5243B; background-image: none; border-color: #E5243B; box-shadow: 0 8px 32px #E5243B40; }

.sdg-c2  .sdg-about-badge { background: #DDA63A15; color: #8A6218; border: 1px solid #DDA63A30; }
.sdg-c2  .sdg-about-num { color: #DDA63A10; }
.sdg-c2  .sdg-icon-display { box-shadow: 0 24px 60px #DDA63A35; }
.sdg-c2  .sc-sdg-eyebrow { background: #DDA63A18; color: #8A6218; }
.sdg-c2  .sc-sdg-btn-primary { background: #DDA63A; background-image: none; border-color: #DDA63A; box-shadow: 0 8px 32px #DDA63A40; }

.sdg-c3  .sdg-about-badge { background: #4C9F3815; color: #1E5C10; border: 1px solid #4C9F3830; }
.sdg-c3  .sdg-about-num { color: #4C9F3810; }
.sdg-c3  .sdg-icon-display { box-shadow: 0 24px 60px #4C9F3835; }
.sdg-c3  .sc-sdg-eyebrow { background: #4C9F3818; color: #1E5C10; }
.sdg-c3  .sc-sdg-btn-primary { background: #4C9F38; border-color: #4C9F38; }

.sdg-c4  .sdg-about-badge { background: #C5192D15; color: #7A0F1C; border: 1px solid #C5192D30; }
.sdg-c4  .sdg-about-num { color: #C5192D10; }
.sdg-c4  .sdg-icon-display { box-shadow: 0 24px 60px #C5192D35; }
.sdg-c4  .sc-sdg-eyebrow { background: #C5192D18; color: #7A0F1C; }
.sdg-c4  .sc-sdg-btn-primary { background: #C5192D; border-color: #C5192D; }

.sdg-c5  .sdg-about-badge { background: #FF3A2115; color: #8C1A0E; border: 1px solid #FF3A2130; }
.sdg-c5  .sdg-about-num { color: #FF3A2110; }
.sdg-c5  .sdg-icon-display { box-shadow: 0 24px 60px #FF3A2135; }
.sdg-c5  .sc-sdg-eyebrow { background: #FF3A2118; color: #8C1A0E; }
.sdg-c5  .sc-sdg-btn-primary { background: #FF3A21; border-color: #FF3A21; }

.sdg-c6  .sdg-about-badge { background: #26BDE215; color: #0D6B85; border: 1px solid #26BDE230; }
.sdg-c6  .sdg-about-num { color: #26BDE210; }
.sdg-c6  .sdg-icon-display { box-shadow: 0 24px 60px #26BDE235; }
.sdg-c6  .sc-sdg-eyebrow { background: #26BDE218; color: #0D6B85; }
.sdg-c6  .sc-sdg-btn-primary { background: #26BDE2; border-color: #26BDE2; }

.sdg-c7  .sdg-about-badge { background: #FCC30B15; color: #7A5B00; border: 1px solid #FCC30B30; }
.sdg-c7  .sdg-about-num { color: #FCC30B10; }
.sdg-c7  .sdg-icon-display { box-shadow: 0 24px 60px #FCC30B35; }
.sdg-c7  .sc-sdg-eyebrow { background: #FCC30B18; color: #7A5B00; }
.sdg-c7  .sc-sdg-btn-primary { background: #FCC30B; border-color: #FCC30B; color: var(--ink); }

.sdg-c8  .sdg-about-badge { background: #A2194215; color: #580D25; border: 1px solid #A2194230; }
.sdg-c8  .sdg-about-num { color: #A2194210; }
.sdg-c8  .sdg-icon-display { box-shadow: 0 24px 60px #A2194235; }
.sdg-c8  .sc-sdg-eyebrow { background: #A2194218; color: #580D25; }
.sdg-c8  .sc-sdg-btn-primary { background: #A21942; border-color: #A21942; }

.sdg-c9  .sdg-about-badge { background: #FD692515; color: #7A2D0A; border: 1px solid #FD692530; }
.sdg-c9  .sdg-about-num { color: #FD692510; }
.sdg-c9  .sdg-icon-display { box-shadow: 0 24px 60px #FD692535; }
.sdg-c9  .sc-sdg-eyebrow { background: #FD692518; color: #7A2D0A; }
.sdg-c9  .sc-sdg-btn-primary { background: #FD6925; border-color: #FD6925; }

.sdg-c10 .sdg-about-badge { background: #DD136715; color: #720938; border: 1px solid #DD136730; }
.sdg-c10 .sdg-about-num { color: #DD136710; }
.sdg-c10 .sdg-icon-display { box-shadow: 0 24px 60px #DD136735; }
.sdg-c10 .sc-sdg-eyebrow { background: #DD136718; color: #720938; }
.sdg-c10 .sc-sdg-btn-primary { background: #DD1367; border-color: #DD1367; }

.sdg-c11 .sdg-about-badge { background: #FD9D2415; color: #7A4500; border: 1px solid #FD9D2430; }
.sdg-c11 .sdg-about-num { color: #FD9D2410; }
.sdg-c11 .sdg-icon-display { box-shadow: 0 24px 60px #FD9D2435; }
.sdg-c11 .sc-sdg-eyebrow { background: #FD9D2418; color: #7A4500; }
.sdg-c11 .sc-sdg-btn-primary { background: #FD9D24; border-color: #FD9D24; }

.sdg-c12 .sdg-about-badge { background: #BF8B2E15; color: #5C3E0A; border: 1px solid #BF8B2E30; }
.sdg-c12 .sdg-about-num { color: #BF8B2E10; }
.sdg-c12 .sdg-icon-display { box-shadow: 0 24px 60px #BF8B2E35; }
.sdg-c12 .sc-sdg-eyebrow { background: #BF8B2E18; color: #5C3E0A; }
.sdg-c12 .sc-sdg-btn-primary { background: #BF8B2E; border-color: #BF8B2E; }

.sdg-c13 .sdg-about-badge { background: #3F7E4415; color: #1A3B1D; border: 1px solid #3F7E4430; }
.sdg-c13 .sdg-about-num { color: #3F7E4410; }
.sdg-c13 .sdg-icon-display { box-shadow: 0 24px 60px #3F7E4435; }
.sdg-c13 .sc-sdg-eyebrow { background: #3F7E4418; color: #1A3B1D; }
.sdg-c13 .sc-sdg-btn-primary { background: #3F7E44; border-color: #3F7E44; }

.sdg-c14 .sdg-about-badge { background: #0A97D915; color: #064868; border: 1px solid #0A97D930; }
.sdg-c14 .sdg-about-num { color: #0A97D910; }
.sdg-c14 .sdg-icon-display { box-shadow: 0 24px 60px #0A97D935; }
.sdg-c14 .sc-sdg-eyebrow { background: #0A97D918; color: #064868; }
.sdg-c14 .sc-sdg-btn-primary { background: #0A97D9; border-color: #0A97D9; }

.sdg-c15 .sdg-about-badge { background: #56C02B15; color: #245C10; border: 1px solid #56C02B30; }
.sdg-c15 .sdg-about-num { color: #56C02B10; }
.sdg-c15 .sdg-icon-display { box-shadow: 0 24px 60px #56C02B35; }
.sdg-c15 .sc-sdg-eyebrow { background: #56C02B18; color: #245C10; }
.sdg-c15 .sc-sdg-btn-primary { background: #56C02B; border-color: #56C02B; }

.sdg-c16 .sdg-about-badge { background: #00689D15; color: #003349; border: 1px solid #00689D30; }
.sdg-c16 .sdg-about-num { color: #00689D10; }
.sdg-c16 .sdg-icon-display { box-shadow: 0 24px 60px #00689D35; }
.sdg-c16 .sc-sdg-eyebrow { background: #00689D18; color: #003349; }
.sdg-c16 .sc-sdg-btn-primary { background: #00689D; border-color: #00689D; }

.sdg-c17 .sdg-about-badge { background: #19486A15; color: #0A1F30; border: 1px solid #19486A30; }
.sdg-c17 .sdg-about-num { color: #19486A10; }
.sdg-c17 .sdg-icon-display { box-shadow: 0 24px 60px #19486A35; }
.sdg-c17 .sc-sdg-eyebrow { background: #19486A18; color: #0A1F30; }
.sdg-c17 .sc-sdg-btn-primary { background: #19486A; border-color: #19486A; }

/* ── 25. ANIMATIONS ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }
.reveal:nth-child(5) { transition-delay: .4s; }
.reveal:nth-child(6) { transition-delay: .5s; }

/* ── 25B. REDUCED MOTION ──────────────────────────────────────── */
/* Users who've asked their OS to minimize motion still get every state
   change (hover, reveal, active nav) — just instantly, without the
   animated transition. Infinite decorative loops (hero blobs, orbit
   rings, pulsing dots) are stopped outright since they have no "end
   state" to jump to. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── 26. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .db-sidebar { transform: translateX(-100%); }
  .db-sidebar.open { transform: translateX(0); box-shadow: var(--s-xl); }
  .db-main { margin-left: 0; }
}
@media (max-width: 768px) {
  /* Nav links move into the hamburger's off-canvas panel; Sign In stays
     in the bar itself alongside the hamburger, so the logo shrinks a
     little to keep both comfortably fitting next to it. */
  .nav-inner { gap: 10px; }
  .nav-logo-mark { height: 34px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* .nav-links normally carries the auto margin that pushes everything
     after the logo to the right — with it hidden, .nav-actions (Sign In)
     has to pick that up so it and the hamburger still land on the right. */
  .nav-actions { flex-shrink: 0; margin-inline-start: auto; }
  .btn-nav-cta { padding: 7px 12px; }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .stats-strip-inner { gap: 0; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); flex-basis: 50%; }
  .stat-item:nth-child(2n) { border-right: none; }
  .chatbot-window { width: calc(100vw - 40px); right: 20px; }
  .sdg-grid-layout { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-legal { justify-content: center; }
  .footer-powered { justify-content: center; }
}
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .sdg-grid-layout { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .steps-row { flex-direction: column; align-items: flex-start; }
  .step-item::before { display: none; }
  .countdown-num { font-size: 1.25rem; min-width: 42px; }
}

/* ================================================================
   27. UTILITY EXTENSIONS
   Classes added to eliminate all inline style="" attributes.
   ================================================================ */

/* ── Navigation shared ── */

/* X close button inside the mobile nav panel */
.nav-mobile-close {
  background: var(--surface-3);
  border: none;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Register School — secondary CTA in nav (shares .btn-nav-cta; spacing handled by .ms-2) */
/* No extra rule needed — gradient already applied by .btn-nav-cta */

/* ── Background helpers ── */

/* Surface-2 section background */
.bg-surface-2 { background: var(--surface-2); }

/* ── Chatbot ── */

/* X close button inside chatbot header */
.chatbot-close-btn {
  background: rgba(255, 255, 255, .15);
  border: none;
  border-radius: 20px;
  width: 38px;
  height: 38px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}
.chatbot-close-btn:hover { background: rgba(255, 255, 255, .28); }

/* Icon image inside chatbot FAB */
.chatbot-fab-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Icon image inside chatbot head avatar */
.chatbot-head-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ── Search overlay ── */

/* Search icon inside overlay input */
.search-overlay-icon { color: var(--muted); }

/* Esc / close button inside search overlay */
.search-close-btn {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 8px;
  font-size: .75rem;
  color: var(--muted);
  cursor: pointer;
}

/* ── Stories page ── */

/* Page hero with stories-specific background image */
.page-hero-stories {
  background-image: url('../images/banner.svg');
}

/* Small filter pills used in the sidebar (SDG chips) */
.filter-pill-xs {
  font-size: .72rem;
  padding: 3px 8px;
}

/* Medium filter pills used in difficulty / format rows */
.filter-pill-sm {
  font-size: .72rem;
  padding: 4px 10px;
}

/* Sidebar filter select inputs */
.filter-select {
  font-size: .875rem;
  padding: 8px 12px;
}

/* Grade level checkbox labels */
.filter-check-label {
  font-size: .875rem;
  cursor: pointer;
}

/* "Clear All" button in sidebar */
.filter-clear-btn { font-size: .78rem; }
.filter-empty-icon { font-size: 2rem; color: var(--muted); }

/* Results count text row */
.results-count {
  font-size: .9375rem;
  color: var(--body-txt);
}
.results-count strong { color: var(--ink); }

/* Sort dropdown — auto width so it doesn't stretch full row */
.sort-select {
  font-size: .875rem;
  padding: 7px 12px;
  width: auto;
}

/* Pagination <ul> reset */
.pagination-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  gap: 4px;
  margin: 0;
}

/* Fixed-width page number buttons */
.pagination-page-btn { min-width: 36px; }

/* Non-interactive ellipsis in pagination */
.pagination-ellipsis {
  cursor: default;
  pointer-events: none;
}

/* ── Register page ── */

/* @ prefix inside username input-group */
.input-group-prefix {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--muted);
  font-size: .85rem;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
}

/* Username input — removes double left border from input-group */
.username-field {
  border-left: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Password input — room for the eye-toggle button */
.pw-field { padding-right: 2.75rem; }

/* Eye toggle button inside password field */
.pw-toggle-btn {
  position: absolute;
  right: .1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

/* "Already have an account?" helper text */
.login-note {
  font-size: .8rem;
  color: var(--muted);
}

/* Log In link inside login note */
.login-note-link {
  color: var(--blue);
  font-weight: 700;
}

/* Benefit icon cells — coloured backgrounds */
.benefit-icon-blue  { background: var(--blue-lt); }
.benefit-icon-green { background: var(--green-lt); }
.benefit-icon-teal  { background: #F0FDF4; }
.benefit-icon-amber { background: #FEF9C3; }

/* ── Thank-you page ── */

/* Re-register amber link inside email warning box */
.ty-reregister-link {
  color: #92400E;
  font-weight: 700;
}

/* ── Story detail page ── */

/* Dark translucent tags inside story hero */
.story-hero-tag {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .8);
}

/* SDG tag variant in story hero */
.story-hero-tag-sdg {
  background: rgba(37, 99, 235, .3);
  border: 1px solid rgba(37, 99, 235, .5);
  color: #93c5fd;
}

/* Easy tag variant in story hero */
.story-hero-tag-easy {
  background: rgba(5, 150, 105, .3);
  border: 1px solid rgba(5, 150, 105, .5);
  color: #6ee7b7;
}

/* Small author avatar inside story hero */
.story-hero-author-avatar {
  width: 32px;
  height: 32px;
  font-size: .8rem;
  background: var(--g-brand);
}

/* Author name in story hero */
.story-hero-author-name {
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
}

/* Coloured icons in impact rows (sidebar) */
.icon-blue  { color: var(--blue); }
.icon-amber { color: var(--amber); }
.icon-rose  { color: var(--rose); }
.icon-green { color: var(--green); }

/* Larger testimonial avatar on story detail */
.story-testi-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Author name in story testimonial block */
.story-testi-author-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Gradient CTA widget in story sidebar */
.story-cta-widget {
  background: linear-gradient(135deg, var(--blue-lt), var(--green-lt));
}

/* Table of contents links in story sidebar */
.toc-link {
  border-bottom: 1px solid var(--border);
  color: var(--body-txt);
  font-size: .875rem;
  padding-block: .5rem;
  display: block;
}
.toc-link:last-child { border-bottom: none; }

/* Divider above "related stories" block in story sidebar */
.story-sidebar-divider {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

/* ── Page hero background images (page-specific, was inline style) ── */
.page-hero-sdg-01 { background-image: url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1920&q=80&fit=crop'); }
.page-hero-sdg-02 { background-image: url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=1920&q=80&fit=crop'); }
.page-hero-sdg-03 { background-image: url('https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=1920&q=80&fit=crop'); }
.page-hero-sdg-04 { background-image: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=1920&q=80&fit=crop'); }
.page-hero-sdg-05 { background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1920&q=80&fit=crop'); }
.page-hero-sdg-06 { background-image: url('https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=1920&q=80&fit=crop'); }
.page-hero-sdg-07 { background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80&fit=crop'); }
.page-hero-sdg-08 { background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1920&q=80&fit=crop'); }
.page-hero-sdg-09 { background-image: url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?w=1920&q=80&fit=crop'); }
.page-hero-sdg-10 { background-image: url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1920&q=80&fit=crop'); }
.page-hero-sdg-11 { background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1920&q=80&fit=crop'); }
.page-hero-sdg-12 { background-image: url('https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=1920&q=80&fit=crop'); }
.page-hero-sdg-13 { background-image: url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1920&q=80&fit=crop'); }
.page-hero-sdg-14 { background-image: url('https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=1920&q=80&fit=crop'); }
.page-hero-sdg-15 { background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80&fit=crop'); }
.page-hero-sdg-16 { background-image: url('https://images.unsplash.com/photo-1436450412740-6b988f486c6b?w=1920&q=80&fit=crop'); }
.page-hero-sdg-17 { background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1920&q=80&fit=crop'); }
.page-hero-do-this-today { background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1600&auto=format&fit=crop&q=80'); }
.page-hero-events { background-image: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1600&auto=format&fit=crop&q=80'); }
.page-hero-sdg-explorer { background-image: url('https://images.unsplash.com/photo-1521295121783-8a321d551ad2?w=1600&auto=format&fit=crop&q=80'); }

/* ── Shared SDG detail page elements ── */
/* Badge icon in the page-hero of every sdg-NN.html page */
.page-hero-badge-icon { width: 28px; height: 28px; border-radius: 20px; object-fit: cover; }
/* Background swatch for the sdg-card tiles on the SDG Explorer grid (pairs with .sdg-cN for --sdg-clr) */
.sdg-card-clr { background: var(--sdg-clr); }

/* ── Generic colour-text utilities ── */
.text-ink { color: var(--ink); }

/* ── Do This Today page ── */
.action-card-excerpt { font-size: .875rem; color: var(--body-txt); line-height: 1.65; }

/* ── Events page ── */
.section-bordered-surface-2 { background: var(--surface-2); border-block: 1px solid var(--border); }
.lb-avatar { font-size: .65rem; font-weight: 700; flex-shrink: 0; }
.lb-avatar-1 { background: #E5243B; }
.lb-avatar-2 { background: #4C9F38; }
.lb-avatar-3 { background: #FD6925; }
.lb-avatar-4 { background: #17758C; } /* darkened from the official SDG6 cyan (#26BDE2) — white initials failed contrast at full brightness */
.lb-avatar-5 { background: #DD1367; }
.lb-avatar-6 { background: #A21942; }
.lb-avatar-7 { background: #3F7E44; }
.lb-avatar-8 { background: #065D86; } /* darkened from the official SDG14 blue (#0A97D9) — same contrast fix */
.lb-school-name { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.prize-place-name { font-weight: 700; color: var(--ink); }
.lb-rank-sm { width: 36px; height: 36px; border-radius: 20px; font-size: .8rem; }
.points-widget-gradient { background: linear-gradient(145deg, var(--blue-lt), var(--green-lt)); }
.points-badge {
  width: 36px; height: 36px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; flex-shrink: 0;
}
.points-badge-brand { background: var(--g-brand); }
.points-badge-green { background: var(--green); }
.points-badge-amber { background: var(--amber); }
.points-badge-rose  { background: var(--rose); }

/* ── SDG Explorer page ── */
.story-thumb-emoji { font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.story-thumb-gradient-1 { background: linear-gradient(135deg, #FEEEE6, #FECACA); }
.story-thumb-gradient-2 { background: linear-gradient(135deg, #EFF6FF, #BFDBFE); }
.emoji-icon-lg { font-size: 2.5rem; margin-bottom: 12px; }
.eyebrow-white-muted { color: rgba(255, 255, 255, .6); }
.download-kit-heading { color: white; margin-top: 10px; }
.download-kit-body { color: rgba(255, 255, 255, .7); line-height: 1.75; }

/* ── Search page ── */
.ai-reco-banner { background: linear-gradient(135deg, var(--blue-lt), var(--green-lt)); border-bottom: 1px solid var(--border); }
.ai-reco-icon {
  width: 48px; height: 48px; border-radius: 20px;
  background: var(--g-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.ai-reco-title { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.ai-reco-text { font-size: .875rem; color: var(--body-txt); }
.ai-reco-link { color: var(--blue); font-weight: 600; }
.thumb-gradient-rose  { background: linear-gradient(135deg, #FEE9E5, #FFD9D3); }
.thumb-gradient-green { background: linear-gradient(135deg, #E8F6E8, #C1F2C1); }
.pagination-btn-sq { width: 36px; height: 36px; padding: 0; }

/* ── Homepage ── */
.bento-photo-stat-02 { background-image: url('../images/homepage/stat-02.jpg'); }



/* ── Homepage (moved from inline <style>) ── */
/* ── Type: bold sans throughout — this page follows the Figma comp's
         system (bold grotesk headlines), not the sitewide serif treatment. */
      .page-home,
.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4,
.page-home h5,
.page-home h6,
.page-home p,
.page-home a,
.page-home button,
.page-home input { font-family: 'Plus Jakarta Sans', sans-serif; }
.page-home { font-weight: 400; }
.page-home h1,
.page-home h2,
.page-home h3 { font-weight: 800; font-style: normal; letter-spacing: -0.02em; }
.page-home h4,
.page-home h5,
.page-home h6 { font-weight: 700; }
.page-home .stat-number,
.page-home .bento-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-style: normal; }
.page-home .hero-badge,
.page-home .eyebrow,
.page-home .about-tag,
.page-home .testi-badge { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; }

      /* Buttons: undo the sitewide uppercase-tracked treatment for this page */
      .page-home .btn { text-transform: none; letter-spacing: normal; font-weight: 700; }

      /* Eyebrow: pill label with tinted fill (this comp's style, not the thin-rule variant) */
      .page-home .eyebrow {
        background: var(--blue-lt); color: var(--blue);
        padding: .3rem 1rem; border-radius: 999px;
        font-size: .72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .08em;
      }
.page-home .eyebrow::before { display: none; }
.page-home .eyebrow.amber { background: #FEF9C3; color: #92400E; }
.page-home .eyebrow.green { background: var(--green-lt); color: var(--green-dk); }
.page-home .eyebrow.rose { background: var(--rose-lt); color: var(--rose); }
.page-home .eyebrow.purple { background: #F5F3FF; color: #7C3AED; }
.page-home .eyebrow.blue { background: var(--blue-lt); color: var(--blue); }

      /* New solid button colours used across this page */
      .page-home .btn-navy { background: #03045E; border: 1px solid #03045E; color: #fff; }
.page-home .btn-navy:hover { background: #020342; border-color: #020342; color: #fff; }
.page-home .btn-teal { background: var(--green); border: 1px solid var(--green); color: #fff; }
.page-home .btn-teal:hover { background: var(--green-dk); border-color: var(--green-dk); color: #fff; }

      /* ── Nav: layout is the shared root-page rule above. Only the
         white-patch background fade (once scrolled past the deep-blue
         banner card) is specific to this page. Hides on scroll-down /
         reappears on scroll-up throughout. ── */
      .page-home .site-nav.nav-past-hero {
        top: 16px;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 8px 30px rgba(15,23,42,.1);
      }
      @media (max-width: 768px) {.page-home .site-nav.nav-past-hero { top: 10px; }
      }
      /* The banner card is white now, so the white-over-hero treatment
         this page used to carry is gone: links, logo and hamburger are the
         dark set from first paint, and the CTA keeps the comp's mid blue
         throughout. .nav-past-hero still fades the white patch in once the
         nav has left the card — that is what keeps it legible over the
         coloured sections further down. */
      .page-home .site-nav .nav-link { color: var(--ink); }
.page-home .site-nav .nav-link:hover,
.page-home .site-nav .nav-link.active { color: var(--blue); opacity: 1; }
.page-home .site-nav .nav-logo-mark { content: url('../images/logo-black.png'); }
      /* No hover highlight — plain colour change only (see .nav-link:hover
         above); the link text itself is the only feedback. */
      .page-home .site-nav .nav-link::after { display: none; }
      .page-home .site-nav .btn-nav-cta {
        background: #1D48BF !important; border-color: #1D48BF !important; color: #fff !important;
      }
.page-home .site-nav .btn-nav-cta:hover { background: #1A3EA6 !important; border-color: #1A3EA6 !important; color: #fff !important; }
.page-home .site-nav.scrolled .btn-nav-cta { color: #fff !important; }
.page-home .site-nav .nav-hamburger span { background: var(--ink); }

      /* ════════════════════════════════════
      1. HERO — white rounded card, copy left, illustration right
         The artwork (assets/images/banner02.svg, 833 × 911) is referenced
         rather than re-inlined path by path, so a fresh export from design
         drops straight in. There is no background image and no cutout
         photograph any more — the card itself is the background.
      ════════════════════════════════════ */
      .page-home .hero-shell {
        position: relative; display: flex;
        min-height: 100vh; min-height: 100dvh;
        padding: 20px;
        background: #E7EDF9;
      }
      .page-home .hero {
        position: relative; overflow: hidden;
        flex: 1; max-width: 1800px; margin: 0 auto;
        border-radius: clamp(28px, 2.6vw, 48px);
        background: #fff;
        display: flex; align-items: center;
        /* Top padding clears the fixed nav; the bottom stays small because
           the illustration is meant to sit low against the card's edge. */
        padding: clamp(112px, 13vh, 168px) 0 clamp(16px, 3vh, 40px);
      }
      /* Same max-width/padding as the sitewide .container (and the nav's
         .nav-inner) so the headline's left edge lines up with the logo
         above it — the hero card's own 1800px cap plus the shell's 20px
         padding resolve to exactly the same left inset as the nav bar's
         at any width, so reusing the plain container keeps them aligned. */
      .page-home .hero > .container {
        position: relative; z-index: 2;
      }
      .page-home .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 64px);
        align-items: center;
      }
      .page-home .hero-copy { text-align: left; perspective: 900px; }
      /* The block-level .reveal fade is neutralised here so it does not
         double up with (and mute) the per-word choreography below. */
      .page-home .hero-copy.reveal { opacity: 1; transform: none; transition: none; }
      .page-home .hero-title {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-style: normal; font-weight: 800;
        font-size: clamp(1.85rem, 3.9vw, 4rem);
        line-height: 1.12; letter-spacing: -0.02em;
        color: var(--ink); margin: 0 0 18px;
      }
.page-home .hero-title .highlight { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
      /* ── Banner headline: word-by-word entrance + pointer-reactive words ──
         The words are split into spans at runtime by the script just after
         the hero markup in index.html (parser-blocking on purpose, so the
         plain headline never paints before it is split). Two nested spans
         per word: the OUTER one owns the entrance animation, the INNER one
         owns the pointer transform — one element cannot hold both, since
         they would fight over their transform. */
      @keyframes heroWordIn {
        0%   { opacity: 0; transform: translateY(.62em) rotateX(-55deg); filter: blur(9px); }
        65%  { opacity: 1; filter: blur(0); }
        100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
      }
      .page-home .hero-title .ht-w {
        display: inline-block;
        transform-origin: 50% 100%;
        animation: heroWordIn .8s var(--ease) both;
        animation-delay: calc(var(--d, 0s) + .2s);
      }
      .page-home .hero-title .ht-wi {
        display: inline-block;
        /* Short, not instant: the lag is what makes the words feel weighted
           as the cursor sweeps across them rather than snapping. */
        transition: transform .28s var(--ease), text-shadow .3s ease;
      }
      /* Description and buttons pick up where the last word lands. */
      @keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
      .page-home .hero-desc { animation: heroFadeUp .7s var(--ease) .62s both; }
      .page-home .hero-ctas { animation: heroFadeUp .7s var(--ease) .74s both; }
      @media (prefers-reduced-motion: reduce) {
        .page-home .hero-title .ht-w,
.page-home .hero-desc,
.page-home .hero-ctas { animation: none; }
.page-home .hero-title .ht-wi { transition: none; }
      }
.page-home .hero-desc {
        color: var(--body-txt);
        font-size: clamp(.95rem, 1.05vw, 1.0625rem); line-height: 1.7;
        max-width: 48ch; margin: 0 0 34px;
      }
.page-home .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-bottom: 0; }
.page-home .hero .btn-lg { padding: 15px 32px; font-size: 1rem; border-radius: 999px; }
      /* The sitewide #03045E navy reads almost black at this size — this
         is the mid blue the comp uses. Scoped to the hero only, so every
         other blue button on the site is untouched. */
      .page-home .hero .btn-navy { background: #1D48BF; border-color: #1D48BF; color: #fff; }
.page-home .hero .btn-navy:hover { background: #1A3EA6; border-color: #1A3EA6; color: #fff; }
.page-home .btn-mint { background: #8FE9D4; border: 1px solid #8FE9D4; color: #053B2E; }
.page-home .btn-mint:hover { background: #7BDFC4; border-color: #7BDFC4; color: #053B2E; }

      /* ── Illustration ── */
      @keyframes heroArtIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
      .page-home .hero-art {
        margin: 0; align-self: end; justify-self: center; width: 100%;
        animation: heroArtIn .9s var(--ease) .18s both;
      }
      .page-home .hero-illo {
        display: block; margin: 0 auto;
        /* width:auto + max-width:100% + a max-height lets the browser
           satisfy the column width AND the card height while keeping
           833:911. A width-only rule overflows the card on laptop screens,
           because this artwork is taller than it is wide. */
        width: auto; max-width: 100%;
        height: auto; max-height: min(78vh, 860px);
      }
      @media (prefers-reduced-motion: reduce) {
        .page-home .hero-art { animation: none; }
      }

      @media (max-width: 992px) {
        /* One column: copy first, artwork under it, both centred. */
        .page-home .hero { padding-top: clamp(104px, 12vh, 140px); }
        .page-home .hero > .container { padding-inline: clamp(20px, 4vw, 40px); }
        .page-home .hero-grid { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 34px); }
        .page-home .hero-copy { text-align: center; }
        .page-home .hero-desc { margin-left: auto; margin-right: auto; }
        .page-home .hero-ctas { justify-content: center; }
        .page-home .hero-illo { max-height: min(46vh, 520px); }
      }
      @media (max-width: 768px) {
        .page-home .hero-shell {
          min-height: 0;
          padding: 14px 14px clamp(24px, 5vh, 48px);
        }
        .page-home .hero { border-radius: 28px; padding-top: 116px; }
        .page-home .hero-title { font-size: clamp(1.55rem, 7.4vw, 2.575rem); margin-bottom: 12px; }
        .page-home .hero-desc { font-size: .95rem; margin-bottom: 26px; }
        .page-home .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
        .page-home .hero .btn-lg { width: 100%; justify-content: center; padding: 13px 22px; }
        .page-home .hero-illo { max-height: min(50vh, 440px); }
      }


      /* ════════════════════════════════════
      2. ABOUT — split header (heading / copy), white feature cards
      ════════════════════════════════════ */
      .page-home .about-section { padding-block: var(--section-y); background: #E7EDF9; position: relative; }

      /* Header is two columns: the heading holds the left, the copy it
         introduces runs down the right. The old version stacked an
         eyebrow, a heading and two 75ch paragraphs in one centred
         column — centred text at that measure is genuinely hard to read,
         because the eye has to hunt for the start of every line, and it
         left the section very tall for how little it says. The CTAs now
         sit under the copy that motivates them rather than adrift at the
         bottom of the section. */
      .page-home .about-top {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(26px, 5vw, 76px);
        align-items: start;
        margin-bottom: clamp(40px, 5vw, 66px);
        text-align: left;
      }
      .page-home .about-top.about-split.reveal.visible { margin-bottom: 0; }
      .page-home .about-section .eyebrow {
        display: inline-block; margin-bottom: 18px;
        background: rgba(37, 99, 235, .1); color: var(--blue);
      }
      .page-home .about-heading {
        font-size: clamp(1.9rem, 3.5vw, 2.75rem);
        font-weight: 800; line-height: 1.13; letter-spacing: -0.02em;
        color: var(--ink); margin: 0; max-width: 26ch;
      }
      /* Nudged down so the first line of copy sits against the heading's
         second line rather than its cap-height. */
      .page-home .about-body { padding-top: clamp(4px, 1.2vw, 16px); }
      .page-home .about-lead {
        font-size: 1.0625rem; color: var(--body-txt); line-height: 1.75;
        max-width: 58ch; margin: 0 0 18px;
      }
      .page-home .about-lead:last-of-type { margin-bottom: 30px; }
      .page-home .about-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
      /* Sitewide .btn-white:hover just turns transparent (still white
         text/border) — scoped here so this one button fills blue instead,
         without changing the shared hover on every other page that uses it. */
      .page-home .about-ctas .btn-white:hover { background: #03045E; border-color: #03045E; color: #fff; }

      .page-home .about-feature-row {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: clamp(14px, 1.8vw, 24px);
      }
      .page-home .about-feature {
        position: relative; overflow: hidden;
        display: flex; flex-direction: column; gap: 18px;
        background: #fff; border-radius: 20px; padding: 30px 26px 32px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
        transition: transform .35s var(--ease), box-shadow .35s var(--ease);
      }
      /* Accent rule wipes across the top edge on hover — gives the flat
         white boxes something to respond with. */
      .page-home .about-feature::before {
        content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
        background: var(--blue);
        transform: scaleX(0); transform-origin: left center;
        transition: transform .45s var(--ease);
      }
      .page-home .about-feature:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgba(15, 23, 42, .12); }
      .page-home .about-feature:hover::before { transform: scaleX(1); }
      /* The icon sat loose in the corner at 60px with a gap beneath it,
         reading as an orphan. A tinted chip anchors it to the card and
         gives the row a consistent left edge. */
      .page-home .about-feature-ico {
        width: 68px; height: 68px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: #E8F0FE; border-radius: 18px;
        transition: background .35s var(--ease), transform .35s var(--ease);
      }
      .page-home .about-feature:hover .about-feature-ico { background: #DAE7FD; transform: scale(1.06) rotate(-4deg); }
      /* These are detailed multi-colour illustrations, not single-colour
         glyphs, so they need room to stay legible — they were 60px before
         the chip existed, and 32px inside it lost most of the detail. */
      .page-home .about-feature-ico img { width: 46px; height: 46px; display: block; }
      .page-home .about-feature p { font-size: .9375rem; color: var(--body-txt); line-height: 1.6; margin: 0; }

      @media (max-width: 992px) {
        .page-home .about-top { grid-template-columns: 1fr; gap: 20px; }
        .page-home .about-heading { max-width: 20ch; }
        .page-home .about-body { padding-top: 0; }
        .page-home .about-feature-row { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 560px) {
        .page-home .about-feature { padding: 22px 18px 24px; gap: 14px; }
        .page-home .about-feature-ico { width: 56px; height: 56px; border-radius: 15px; }
        .page-home .about-feature-ico img { width: 38px; height: 38px; }
        .page-home .about-feature p { font-size: .875rem; }
        .page-home .about-ctas .btn { width: 100%; justify-content: center; }
      }

      /* Pull-quote lead, used by both About and the Project Library.
         The approved copy sets the opening line of each band in quotation
         marks; a rule and a heavier weight say the same thing without the
         punctuation fighting the type at display size. */
      .page-home .about-quote {
        font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
        font-weight: 600; line-height: 1.62; color: var(--ink);
        max-width: 54ch; margin: 0 0 20px;
        padding-left: clamp(16px, 1.4vw, 22px);
        border-left: 3px solid var(--blue);
      }

      /* ── About: image-led split ──
         The photograph is its own column and fills the full height of the
         row, so the band can never end up with the dead space it had when
         the copy ran out before the section padding did. Everything else —
         eyebrow, heading, quote, lead, focus list — stacks in the second
         column, which is what sets the row height; the picture simply
         matches it.

         Scoped to .about-split rather than .about-top because the Project
         Library below shares .about-top and still wants its columns
         top-aligned, not stretched. */
      .page-home .about-split { align-items: stretch; }
      .page-home .about-split .about-body { padding-top: 0; }
      .page-home .about-split .about-heading {
        max-width: 20ch;
        margin-bottom: clamp(18px, 2.2vw, 28px);
      }

      /* A white mat rather than a bare bleed image: it echoes the white
         cards used through the rest of the page and keeps the photo from
         dissolving into the #E7EDF9 field at the corners.

         The mat is a flex column so the frame inside it can take all the
         remaining height; the frame carries overflow:hidden for the zoom.
         That clipping cannot live on the mat itself — it would clip at the
         OUTER radius, so a scaled photo would push its 20px corners out
         across the 10px white border. */
      .page-home .about-media {
        margin: 0; padding: 10px; background: #fff;
        border-radius: 28px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
        display: flex; flex-direction: column;
        transition: transform .45s var(--ease), box-shadow .45s var(--ease);
      }
      .page-home .about-media-frame {
        display: block; flex: 1 1 auto;
        /* A floor for the case where the copy column is unusually short —
           without it the picture would collapse to whatever height the
           text happens to need. */
        min-height: clamp(400px, 38vw, 620px);
        border-radius: 20px; overflow: hidden;
      }
      .page-home .about-media img {
        display: block; width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 30%;
        transition: transform .7s var(--ease);
      }
      .page-home .about-media:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(15, 23, 42, .15); }
      .page-home .about-media:hover img { transform: scale(1.04); }

      /* ── Focus areas ──
         These six were previously a comma list buried in the middle of
         the lead paragraph, where nobody reads them. Pulled out as a
         ruled two-row grid they are scannable, they give the copy column
         something to end on, and the lead gets shorter for it. */
      .page-home .about-focus { margin-top: clamp(24px, 3vw, 36px); }
      .page-home .about-focus-label {
        display: block; font-size: .75rem; font-weight: 800;
        letter-spacing: .12em; text-transform: uppercase;
        color: var(--blue); margin-bottom: 14px;
      }
      .page-home .about-focus-list {
        list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(14px, 2vw, 28px);
        border-top: 1px solid rgba(3, 4, 94, .12);
      }
      .page-home .about-focus-list li {
        display: flex; align-items: center; gap: 9px;
        padding: 13px 2px;
        border-bottom: 1px solid rgba(3, 4, 94, .12);
        font-size: .9375rem; font-weight: 600; color: var(--ink);
        transition: color .3s var(--ease);
      }
      .page-home .about-focus-list li::before {
        content: ''; flex-shrink: 0;
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--blue);
        transition: transform .3s var(--ease);
      }
      .page-home .about-focus-list li:hover { color: var(--blue); }
      .page-home .about-focus-list li:hover::before { transform: scale(1.6); }

      @media (max-width: 992px) {
        /* One column now, so the picture leads and the copy follows it.
           Stretching is meaningless here and the min-height floor would
           make it far too tall, so it goes back to a fixed ratio. */
        .page-home .about-split .about-heading { max-width: 20ch; }
        .page-home .about-media { margin-bottom: 8px; }
        .page-home .about-media-frame { min-height: 0; }
        .page-home .about-media img { aspect-ratio: 16 / 10; height: auto; }
      }
      @media (max-width: 560px) {
        .page-home .about-media { padding: 8px; border-radius: 22px; }
        .page-home .about-media-frame { border-radius: 16px; }
        .page-home .about-media img { aspect-ratio: 4 / 3; }
        .page-home .about-focus-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .page-home .about-focus-list li { font-size: .875rem; padding: 11px 2px; }
      }
      /* ════════════════════════════════════
      2b. PROJECT LIBRARY — reuses the About band
         Same #E7EDF9 field as About above and Stats below, so the three
         read as one continuous band rather than a stripe sandwich. Its
         top padding is trimmed (About's bottom padding is already there)
         and a hairline sits above the header — that, plus its own eyebrow
         and heading, is what marks a new section without cutting the
         colour run. Everything else (grid, cards, hover, breakpoints)
         comes from the .about-* rules above.

         These rules sit AFTER the two media blocks above deliberately:
         the 560px block resets .about-feature's padding with a shorthand,
         which would otherwise win over the card's taller top padding.
      ════════════════════════════════════ */
      .page-home .library-section { padding-top: 0; }
      .page-home .library-top { position: relative; padding-top: var(--section-y); }
      .page-home .library-top::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, rgba(3, 4, 94, .18), rgba(3, 4, 94, 0));
      }

      /* The principle cards carry an ordinal and a title on top of what
         .about-feature gives them, so the uniform 18px gap runs too loose —
         the chip and the title it labels belong together. The extra top
         padding keeps the copy clear of the corner numeral. */
      .page-home .principle-card { gap: 14px; padding-top: 34px; }
      .page-home .principle-num {
        position: absolute; top: 18px; right: 22px;
        font-size: .8125rem; font-weight: 800; letter-spacing: .06em;
        color: var(--blue); opacity: .32;
        transition: opacity .35s var(--ease);
      }
      .page-home .principle-card:hover .principle-num { opacity: .7; }
      .page-home .principle-title {
        font-size: 1.0625rem; font-weight: 800; line-height: 1.3;
        letter-spacing: -0.01em; color: var(--ink); margin: 0;
      }

      @media (max-width: 560px) {
        .page-home .principle-card { padding-top: 30px; }
        .page-home .principle-num { top: 14px; right: 16px; }
        .page-home .principle-title { font-size: 1rem; }
      }

      /* ════════════════════════════════════
      3. STATS — bento grid mixing colour + photo tiles
      ════════════════════════════════════ */
      .page-home .stats-section { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(140px, 18vw, 220px); background: #E7EDF9; position: relative; }
      /* Two independently-tracked rows so row 2's photo tile can run wider than its
         neighbours — a uniform 3x2 grid reads too rigid next to the comp's bento mix. */
      .page-home .stats-bento { display: flex; flex-direction: column; gap: 18px; }
.page-home .bento-row { display: grid; gap: 18px; }
.page-home .bento-row-1 { grid-template-columns: 1.35fr 1fr 1.7fr; }
.page-home .bento-row-2 { grid-template-columns: 1.3fr 1.6fr 1fr; }
      /* Below 860px each row's 3 cards no longer divide evenly into 2 columns —
         wrapping them as two SEPARATE row-grids left a lone 3rd card wrapping
         onto its own line with a blank cell beside it, and a matching gap
         between the rows. Flattening both rows into one continuous grid (via
         display:contents on the row wrapper) lets all 6 cards flow edge to
         edge with no dead cells. */
      @media (max-width: 860px) {.page-home .stats-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.page-home .bento-row { display: contents; }
      }
.page-home .bento-card { position: relative; border-radius: 24px; padding: 32px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.page-home .bento-num { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; position: relative; z-index: 1; }
.page-home .bento-label { font-size: .875rem; font-weight: 500; margin-top: 8px; opacity: .95; position: relative; z-index: 1; }
.page-home .bento-lavender { background: #ffffff; color: var(--ink); }
.page-home .bento-navy { background: #1B3FC7; color: #fff; }
.page-home .bento-blue { background: #3D7CF4; color: #fff; }
      /* .stat-number (shared sitewide) hardcodes color:var(--blue), which wins
         over the inherited white here since a direct match beats inheritance —
         made the number render blue-on-blue instead of white. Override it back. */
      .page-home .bento-navy .bento-num,
.page-home .bento-blue .bento-num { color: #fff; }
.page-home .bento-mint { background: #8FEDD9; color: var(--ink); }
.page-home .bento-illustration { position: absolute; left: 60%; bottom: -2px; transform: translateX(-50%); width: 62%; max-width:190px; pointer-events: none; }
      /* Row 1's "48K+" card: light card with the numbep on the left and an inset
         (not full-bleed) rounded photo on the right, not a photo background. */
      .page-home .bento-inset-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; }
.page-home .bento-inset-img { width: 42%; min-width: 120px; height: 100%; min-height: 140px; border-radius: 18px; object-fit: cover; flex-shrink: 0; }
.page-home .bento-photo-plain { background-size: cover; background-position: center; min-height: 200px; border-radius: 24px; }
      @media (max-width: 520px) {.page-home .bento-inset-card { flex-direction: column; align-items: stretch; }
.page-home .bento-inset-img { width: 100%; min-height: 120px; } }

      /* ════════════════════════════════════
      SCROLL-LINKED CURVE DIVIDERS — sits at the bottom of a section, filled
      with the NEXT section's colour. Its top boundary is a deep bow at rest
      and straightens into a flat line as that boundary scrolls up through
      the viewport, tied directly to scroll progress (reversible). JS below
      updates the path's "d" every frame while a divider is in range.
      ════════════════════════════════════ */
      .page-home .curve-divider { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 9vw, 110px); pointer-events: none; z-index: 1; }
.page-home .curve-divider svg { display: block; width: 100%; height: 100%; }

      /* ════════════════════════════════════
      4. SDG ROW — horizontal scroll of goal tiles
      ════════════════════════════════════ */
      .page-home .section.sdg-section-wrap { background: #fff; position: relative; padding-top: clamp(24px, 3vw, 40px); }
      .page-home .section#featured-stories { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(72px, 10vw, 128px); }
      /* From The Library — dark navy band. The section id is in the selector
         because .bg-surface-2 in the markup would otherwise win the cascade;
         everything below it is the legibility fallout of flipping this
         section from light to dark. */
      .page-home .section#featured-stories { background: #03045E; }
.page-home #featured-stories .section-header h2 { color: #fff; }
.page-home #featured-stories .section-header .lead { color: rgba(255,255,255,.74); }
.page-home #featured-stories .testi-arrow-btn { border-color: rgba(255,255,255,.5); color: #fff; }
.page-home #featured-stories .testi-arrow-btn:hover { background: #fff; color: #03045E; border-color: #fff; transform: translateY(-2px); }
      /* .btn-navy is #03045E — now exactly the section's own background, so
         the "View All Stories" CTA would have been an invisible rectangle.
         Scoped to .text-center so the identical .btn-navy "Read" buttons
         sitting on the white story cards are left alone. */
      .page-home #featured-stories .text-center .btn-navy { background: #fff; border-color: #fff; color: #03045E; }
.page-home #featured-stories .text-center .btn-navy:hover { background: #E7EDF9; border-color: #E7EDF9; color: #03045E; }
.page-home #explore .section-header { margin-bottom: clamp(20px, 2.5vw, 32px); }
      /* All 17 goal tiles shown upfront in a wrapped, rotated photo-wall grid
         instead of a scrolling/drag marquee. */
      .page-home .sdg-row { width: 100%; padding-top: 24px; padding-bottom: 90px; }
.page-home .sdg-track { display: grid; grid-template-columns: repeat(6, 200px); justify-content: center; gap: 16px; }
.page-home .sdg-row a, .page-home .sdg-row .sdg-tile-static {
        position: relative; width: 200px; height: 200px;
        border-radius: 16px; overflow: hidden; display: block;
        border: 6px solid #fff; box-shadow: 0 14px 30px rgba(15,23,42,.15);
        transition: transform .3s var(--ease), box-shadow .3s var(--ease);
      }
.page-home .sdg-row a:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,23,42,.22); }
.page-home .sdg-row .sdg-tile-static { cursor: default; opacity: .6; }
.page-home .sdg-row img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
      /* ── 17 Global Goals: per-icon hover animation ──────────────────
         assets/js/sdg-icons.js swaps each <img> for the SVG markup and
         wraps the shapes making up one visual element (a figure and its
         head, a building and its windows) into a named <g>. As an <img>
         none of this was reachable: page CSS cannot cross into an image.
         Every animation below moves the parts that icon is actually made
         of, and runs only while its tile is hovered. */
      .page-home .sdg-row .sdg-ico { width: 100%; height: 100%; display: block; pointer-events: none; }
      /* fill-box makes each part rotate and scale about its own shape
         rather than about the corner of the 685x685 canvas. */
      .sdg-p { transform-box: fill-box; transform-origin: 50% 50%; }

      /* 1 · No Poverty — the six figures lift in a wave along the row,
         each crouching then rising off its own feet. */
      @keyframes sdgHop {
        0%, 100% { transform: translateY(0) scaleY(1); }
        22%      { transform: translateY(0) scaleY(.94); }
        55%      { transform: translateY(-26px) scaleY(1.03); }
        80%      { transform: translateY(0) scaleY(.98); }
      }
      .sdg-ico-1 .sdg-p { transform-origin: 50% 100%; }
      .sdg-anim:hover .sdg-ico-1 .sdg-p-f1 { animation: sdgHop 1.25s var(--ease) 0s infinite; }
      .sdg-anim:hover .sdg-ico-1 .sdg-p-f2 { animation: sdgHop 1.25s var(--ease) .09s infinite; }
      .sdg-anim:hover .sdg-ico-1 .sdg-p-f3 { animation: sdgHop 1.25s var(--ease) .18s infinite; }
      .sdg-anim:hover .sdg-ico-1 .sdg-p-f4 { animation: sdgHop 1.25s var(--ease) .27s infinite; }
      .sdg-anim:hover .sdg-ico-1 .sdg-p-f5 { animation: sdgHop 1.25s var(--ease) .36s infinite; }
      .sdg-anim:hover .sdg-ico-1 .sdg-p-f6 { animation: sdgHop 1.25s var(--ease) .45s infinite; }

      /* 2 · Zero Hunger — the three wisps rise off the bowl and fade. */
      @keyframes sdgSteam {
        0%   { transform: translateY(12px) scaleY(.88); opacity: .2; }
        30%  { opacity: 1; }
        100% { transform: translateY(-32px) scaleY(1.14); opacity: 0; }
      }
      @keyframes sdgBowl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
      .sdg-ico-2 .sdg-p-s1,
      .sdg-ico-2 .sdg-p-s2,
      .sdg-ico-2 .sdg-p-s3 { transform-origin: 50% 100%; }
      .sdg-anim:hover .sdg-ico-2 .sdg-p-s1 { animation: sdgSteam 1.7s ease-out 0s infinite; }
      .sdg-anim:hover .sdg-ico-2 .sdg-p-s2 { animation: sdgSteam 1.7s ease-out .28s infinite; }
      .sdg-anim:hover .sdg-ico-2 .sdg-p-s3 { animation: sdgSteam 1.7s ease-out .56s infinite; }
      .sdg-anim:hover .sdg-ico-2 .sdg-p-bowl { animation: sdgBowl 1.7s ease-in-out infinite; }

      /* 3 · Good Health — a double thump, with the trace answering it. */
      @keyframes sdgBeat {
        0%, 62%, 100% { transform: scale(1); }
        14%           { transform: scale(1.2); }
        30%           { transform: scale(1); }
        44%           { transform: scale(1.11); }
      }
      /* Trim: the stroke is drawn on from nothing, held, then trimmed away
         from its start — the path-drawing effect. It works without knowing
         how long the curve is because sdg-icons.js stamps pathLength="100"
         on these shapes, so 100 means "the whole stroke" whatever the real
         length. dasharray sits outside :hover on purpose: one dash of 100
         against a length of 100 renders as a solid line, so the icon looks
         untouched at rest. */
      @keyframes sdgTrim {
        0%        { stroke-dashoffset: 100; }
        45%, 62%  { stroke-dashoffset: 0; }
        100%      { stroke-dashoffset: -100; }
      }
      .sdg-ico-3 .sdg-p-ecg path { stroke-dasharray: 100; }
      .sdg-anim:hover .sdg-ico-3 .sdg-p-heart { animation: sdgBeat 1.3s ease-out infinite; }
      .sdg-anim:hover .sdg-ico-3 .sdg-p-ecg path { animation: sdgTrim 2.6s ease-in-out infinite; }

      /* 4 · Quality Education — the pages lift off the spine and the
         pencil works across them. Each page pivots at the spine side. */
      @keyframes sdgPage { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.87); } }
      @keyframes sdgPencil {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        30%      { transform: translate(-7px, 5px) rotate(-6deg); }
        70%      { transform: translate(5px, -3px) rotate(5deg); }
      }
      .sdg-ico-4 .sdg-p-pageL { transform-origin: 100% 100%; }
      .sdg-ico-4 .sdg-p-pageR { transform-origin: 0% 100%; }
      .sdg-ico-4 .sdg-p-pencil { transform-origin: 50% 100%; }
      .sdg-anim:hover .sdg-ico-4 .sdg-p-pageL { animation: sdgPage 1.6s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-4 .sdg-p-pageR { animation: sdgPage 1.6s ease-in-out .18s infinite; }
      .sdg-anim:hover .sdg-ico-4 .sdg-p-pencil { animation: sdgPencil 1.6s ease-in-out infinite; }

      /* 5 · Gender Equality — the two equals bars draw level, the ring
         breathes, and the male arrow and female cross reach out. */
      @keyframes sdgRing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
      @keyframes sdgEqUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
      @keyframes sdgEqDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
      @keyframes sdgReachUR { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -10px); } }
      @keyframes sdgReachD { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
      .sdg-anim:hover .sdg-ico-5 .sdg-p-ring { animation: sdgRing 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-5 .sdg-p-eqT { animation: sdgEqUp 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-5 .sdg-p-eqB { animation: sdgEqDown 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-5 .sdg-p-arrow { animation: sdgReachUR 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-5 .sdg-p-cross { animation: sdgReachD 1.5s ease-in-out infinite; }

      /* 6 · Clean Water — the drop falls into the glass and squashes on
         landing; the arrow beneath pulses downward with it. */
      @keyframes sdgDropFall {
        0%   { transform: translateY(-30px) scale(.88); opacity: 0; }
        22%  { opacity: 1; }
        62%  { transform: translateY(0) scale(1); }
        74%  { transform: translateY(0) scale(1.08, .9); }
        88%  { transform: translateY(0) scale(.98, 1.03); }
        100% { transform: translateY(0) scale(1); opacity: 1; }
      }
      @keyframes sdgArrowDown {
        0%, 100% { transform: translateY(0); opacity: .7; }
        50%      { transform: translateY(11px); opacity: 1; }
      }
      .sdg-ico-6 .sdg-p-drop { transform-origin: 50% 100%; }
      .sdg-anim:hover .sdg-ico-6 .sdg-p-drop { animation: sdgDropFall 1.8s ease-in infinite; }
      .sdg-anim:hover .sdg-ico-6 .sdg-p-arrow { animation: sdgArrowDown 1.8s ease-in-out infinite; }

      /* 7 · Clean Energy — the twelve rays fire in a clockwise chase
         (r1..r12 are named by position on the dial, not file order) and
         the disc glows on the same beat. */
      @keyframes sdgRay {
        0%, 100% { transform: scale(.84); opacity: .4; }
        45%, 55% { transform: scale(1.14); opacity: 1; }
      }
      @keyframes sdgDisc { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-disc { animation: sdgDisc 1.6s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-7 [class*="sdg-p-r"] { animation: sdgRay 1.6s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r1 { animation-delay: 0s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r2 { animation-delay: .07s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r3 { animation-delay: .14s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r4 { animation-delay: .21s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r5 { animation-delay: .28s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r6 { animation-delay: .35s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r7 { animation-delay: .42s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r8 { animation-delay: .49s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r9 { animation-delay: .56s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r10 { animation-delay: .63s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r11 { animation-delay: .70s; }
      .sdg-anim:hover .sdg-ico-7 .sdg-p-r12 { animation-delay: .77s; }

      /* 8 · Decent Work — the columns grow from their bases in turn and
         the trend arrow climbs. */
      @keyframes sdgGrow { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(1.11); } }
      /* The trend line is a stroke, so it is trimmed on rather than slid
         diagonally — sliding a finished line was what read as wrong. The
         arrowhead is a separate shape and lands as the line arrives. */
      @keyframes sdgHeadLand {
        0%, 38%  { opacity: 0; transform: translate(-9px, 11px) scale(.7); }
        58%, 74% { opacity: 1; transform: translate(0, 0) scale(1); }
        100%     { opacity: 0; transform: translate(0, 0) scale(.9); }
      }
      .sdg-ico-8 .sdg-p-bar1,
      .sdg-ico-8 .sdg-p-bar2,
      .sdg-ico-8 .sdg-p-bar3 { transform-origin: 50% 100%; }
      .sdg-ico-8 .sdg-p-trend path { stroke-dasharray: 100; }
      .sdg-anim:hover .sdg-ico-8 .sdg-p-bar1 { animation: sdgGrow 2.4s ease-in-out 0s infinite; }
      .sdg-anim:hover .sdg-ico-8 .sdg-p-bar2 { animation: sdgGrow 2.4s ease-in-out .12s infinite; }
      .sdg-anim:hover .sdg-ico-8 .sdg-p-bar3 { animation: sdgGrow 2.4s ease-in-out .24s infinite; }
      .sdg-anim:hover .sdg-ico-8 .sdg-p-trend path { animation: sdgTrim 2.4s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-8 .sdg-p-ahead { animation: sdgHeadLand 2.4s ease-in-out infinite; }

      /* 9 · Industry — the three cubes lift and reseat, as if stacking. */
      @keyframes sdgCube { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-15px); } }
      .sdg-anim:hover .sdg-ico-9 .sdg-p-cubeA { animation: sdgCube 1.4s ease-in-out 0s infinite; }
      .sdg-anim:hover .sdg-ico-9 .sdg-p-cubeB { animation: sdgCube 1.4s ease-in-out .13s infinite; }
      .sdg-anim:hover .sdg-ico-9 .sdg-p-cubeC { animation: sdgCube 1.4s ease-in-out .26s infinite; }

      /* 10 · Reduced Inequalities — the four arrows close in towards the
         bars rather than spreading out: the gap is what shrinks. */
      @keyframes sdgCloseD { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
      @keyframes sdgCloseU { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
      @keyframes sdgCloseR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
      @keyframes sdgCloseL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-16px); } }
      .sdg-anim:hover .sdg-ico-10 .sdg-p-up { animation: sdgCloseD 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-10 .sdg-p-down { animation: sdgCloseU 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-10 .sdg-p-left { animation: sdgCloseR 1.5s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-10 .sdg-p-right { animation: sdgCloseL 1.5s ease-in-out infinite; }

      /* 11 · Sustainable Cities — the lights come on across the skyline.
         Buildings bobbing up and down said nothing about the goal; this
         uses what the icon is actually made of. The windows are shapes
         filled with the tile's own orange sitting on top of the white
         buildings, so fading one out lets the white show through and the
         window reads as lit. --i is each window's place in the shuffled
         list in sdg-icons.js, so they light scattered over the city
         instead of sweeping in file order. Buildings stay put. */
      @keyframes sdgWindow {
        0%, 100% { opacity: 1; }
        40%, 58% { opacity: .1; }
      }
      .sdg-anim:hover .sdg-ico-11 [class*="sdg-p-w"] {
        animation: sdgWindow 2.8s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * .09s);
      }

      /* 12 · Responsible Consumption — the loop draws itself round and
         then unwinds: a cycle closing, which is the whole point of the
         goal. The loop is a single stroked path, so it trims like the
         ECG trace above. The arrowhead fades in as the line reaches it
         and out again as the line retreats, rather than sitting there
         detached while the stroke disappears from under it. */
      @keyframes sdgHeadWith {
        0%, 30%  { opacity: 0; }
        48%, 66% { opacity: 1; }
        100%     { opacity: 0; }
      }
      .sdg-ico-12 .sdg-p-loop path { stroke-dasharray: 100; }
      .sdg-anim:hover .sdg-ico-12 .sdg-p-loop path { animation: sdgTrim 2.8s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-12 .sdg-p-head { animation: sdgHeadWith 2.8s ease-in-out infinite; }

      /* 13 · Climate Action — eye and globe are a single merged shape in
         the artwork, which suits the one thing an eye should do. */
      @keyframes sdgBlink {
        0%, 40%, 54%, 100% { transform: scaleY(1); }
        47%                { transform: scaleY(.06); }
      }
      .sdg-anim:hover .sdg-ico-13 .sdg-p-eye { animation: sdgBlink 2.4s ease-in-out infinite; }

      /* 14 · Life Below Water — the fish swims against the current while
         the two wave bands drift in opposite directions. */
      @keyframes sdgSwim {
        0%, 100% { transform: translateX(0) rotate(0); }
        28%      { transform: translateX(15px) rotate(-2.2deg); }
        72%      { transform: translateX(-11px) rotate(2.2deg); }
      }
      @keyframes sdgWaveR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(17px); } }
      @keyframes sdgWaveL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-17px); } }
      .sdg-anim:hover .sdg-ico-14 .sdg-p-fish { animation: sdgSwim 2.4s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-14 .sdg-p-waveT { animation: sdgWaveR 2.4s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-14 .sdg-p-waveB { animation: sdgWaveL 2.4s ease-in-out infinite; }

      /* 15 · Life on Land — the birds cross the sky in loose formation
         and the canopy sways from the trunk. Ground stays put. */
      @keyframes sdgFly {
        0%, 100% { transform: translate(0, 0); }
        50%      { transform: translate(12px, -9px); }
      }
      @keyframes sdgSway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
      .sdg-ico-15 .sdg-p-canopy { transform-origin: 50% 100%; }
      .sdg-anim:hover .sdg-ico-15 .sdg-p-canopy { animation: sdgSway 2.6s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-15 .sdg-p-bird1 { animation: sdgFly 1.9s ease-in-out 0s infinite; }
      .sdg-anim:hover .sdg-ico-15 .sdg-p-bird2 { animation: sdgFly 1.9s ease-in-out .22s infinite; }
      .sdg-anim:hover .sdg-ico-15 .sdg-p-bird3 { animation: sdgFly 1.9s ease-in-out .44s infinite; }

      /* 16 · Peace & Justice — the dove shifts its weight where it stands
         and the olive sprig flutters. The gavel does NOT swing: the bird
         is perched on it, so tipping it left the dove standing in mid-air.
         The dove group now includes its two legs (shapes 14 and 15, which
         were wrongly filed as gavel parts before — that is what the old
         "tap" was actually rotating), and it pivots about its feet, so
         they stay planted on the gavel throughout. */
      @keyframes sdgPerch {
        0%, 100% { transform: rotate(-2.4deg); }
        50%      { transform: rotate(2.4deg); }
      }
      @keyframes sdgFlutter {
        0%, 100% { transform: rotate(0); }
        32%      { transform: rotate(6.5deg); }
        68%      { transform: rotate(-4.5deg); }
      }
      .sdg-ico-16 .sdg-p-dove { transform-origin: 50% 100%; }
      .sdg-ico-16 .sdg-p-sprig { transform-origin: 0% 100%; }
      .sdg-anim:hover .sdg-ico-16 .sdg-p-dove { animation: sdgPerch 2.4s ease-in-out infinite; }
      .sdg-anim:hover .sdg-ico-16 .sdg-p-sprig { animation: sdgFlutter 2s ease-in-out infinite; }

      /* 17 · Partnerships — the five rings pulse outward from the top
         one, so the ripple passes right around the cluster. */
      @keyframes sdgRingPulse {
        0%, 100% { transform: scale(1); opacity: .8; }
        45%      { transform: scale(1.11); opacity: 1; }
      }
      .sdg-anim:hover .sdg-ico-17 .sdg-p-c1 { animation: sdgRingPulse 1.6s ease-in-out 0s infinite; }
      .sdg-anim:hover .sdg-ico-17 .sdg-p-c2 { animation: sdgRingPulse 1.6s ease-in-out .1s infinite; }
      .sdg-anim:hover .sdg-ico-17 .sdg-p-c3 { animation: sdgRingPulse 1.6s ease-in-out .2s infinite; }
      .sdg-anim:hover .sdg-ico-17 .sdg-p-c4 { animation: sdgRingPulse 1.6s ease-in-out .3s infinite; }
      .sdg-anim:hover .sdg-ico-17 .sdg-p-c5 { animation: sdgRingPulse 1.6s ease-in-out .4s infinite; }

      /* Softens the return when the pointer leaves mid-cycle. */
      .sdg-p { transition: transform .28s var(--ease); }
      @media (prefers-reduced-motion: reduce) {
        /* The trims run on the path inside a part, not on the part itself,
           so both levels have to be named here. */
        .sdg-anim:hover .sdg-p,
        .sdg-anim:hover .sdg-p path { animation: none; }
        .sdg-p { transition: none; }
      }
.page-home .sdg-count-badge {
        position: absolute; bottom: 10px; right: 10px;
        background: rgba(0,0,0,.22); color: #fff;
        font-size: .8rem; font-weight: 700; line-height: 1;
        padding: 5px 12px; border-radius: 999px;
        pointer-events: none;
      }
      @media (max-width: 991px) {.page-home .sdg-track { grid-template-columns: repeat(3, 200px); } }
      @media (max-width: 767px) {.page-home .sdg-track { grid-template-columns: repeat(3, 163px); }
.page-home .sdg-row a, .page-home .sdg-row .sdg-tile-static { width: 163px; height: 163px; }
.page-home .sdg-count-badge { font-size: .7rem; padding: 4px 9px; bottom: 6px; right: 6px; }
      }
      @media (max-width: 480px) {.page-home .sdg-track { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: auto; }
.page-home .sdg-row a, .page-home .sdg-row .sdg-tile-static { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 16px; } }

      /* ════════════════════════════════════
      5. FEATURED STORIES — fanned 3-card carousel. All three cards share the
      same grid cell (auto-sizes to the tallest) and are pushed apart purely
      via transform, so swapping which one is "center" animates as a smooth
      slide + arc rather than a DOM reorder jump. */
      .page-home .story-carousel { display: grid; padding-block: 26px 8px; cursor: grab; touch-action: pan-y; user-select: none; }
.page-home .story-carousel.dragging { cursor: grabbing; }
.page-home .story-card-v {
        grid-area: 1 / 1; justify-self: center;
        width: min(400px, 88vw);
        background: #fff; border-radius: 22px; padding: 16px;
        box-shadow: var(--s-sm);
        transition: transform .8s cubic-bezier(.34, 1.15, .64, 1), opacity .6s ease, box-shadow .5s ease;
      }
.page-home .story-card-v.role-center { transform: translateX(0) translateY(-10px) rotate(0deg) scale(1); opacity: 1; z-index: 5; box-shadow: var(--s-lg); }
.page-home .story-card-v.role-left { transform: translateX(-62%) translateY(10px) rotate(-6deg) scale(.88); opacity: .8; z-index: 3; }
.page-home .story-card-v.role-right { transform: translateX(62%) translateY(10px) rotate(6deg) scale(.88); opacity: .8; z-index: 3; }
.page-home .story-card-v.role-far-left { transform: translateX(-118%) translateY(26px) rotate(-11deg) scale(.76); opacity: .5; z-index: 1; }
.page-home .story-card-v.role-far-right { transform: translateX(118%) translateY(26px) rotate(11deg) scale(.76); opacity: .5; z-index: 1; }
      /* Any card beyond the visible 5-slot fan waits here, invisible but
         already in the DOM, ready to rotate into view as more stories
         get added later. */
      .page-home .story-card-v.role-hidden { transform: translateX(0) translateY(14px) scale(.7); opacity: 0; z-index: 0; pointer-events: none; }
      @media (max-width: 900px) {.page-home .story-card-v.role-far-left,
.page-home .story-card-v.role-far-right { opacity: 0; pointer-events: none; }
      }
.page-home .story-card-v-thumb { border-radius: 16px; overflow: hidden; height: 210px; margin-bottom: 16px; }
      /* pointer-events:none (and -webkit-user-drag:none on the card's links,
         below) stop the browser's native image/link drag from hijacking a
         swipe gesture mid-drag — drag is handled on the carousel container. */
.page-home .story-card-v-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.page-home .story-card-v a { -webkit-user-drag: none; user-drag: none; }
.page-home .story-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.page-home .story-card-v-title { font-size: 1.375rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.page-home .story-card-v-title a { color: inherit; }
.page-home .story-card-v-title a:hover { color: var(--blue); }
.page-home .story-card-v-excerpt { font-size: .9375rem; color: var(--body-txt); line-height: 1.6; margin-bottom: 18px; }
.page-home .story-card-v-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.page-home .story-carousel-nav { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
      @media (max-width: 700px) {.page-home .story-card-v.role-left,
.page-home .story-card-v.role-right { opacity: 0; pointer-events: none; }
      }

      /* ════════════════════════════════════
      6. GALLERY MARQUEE — full-bleed, auto-scrolling, images at native aspect ratio
      ════════════════════════════════════ */
      /* Section bg matches the surrounding light-gray sections (was pure white,
         which read as a stray band between the two --surface-2 sections either side). */
      .page-home .gallery-section { background: #03045E; overflow: hidden; margin-top: -40px; padding-top: 0; padding-bottom: clamp(120px, 16vw, 190px); position: relative; }
.page-home .gallery-marquee {
        overflow: hidden; width: 100%;
        /* Vertical breathing room so the rotated photos' corners don't get
           clipped by this box's own overflow:hidden edge. */
        padding-block: 32px;
        cursor: grab; touch-action: pan-y; user-select: none;
      }
.page-home .gallery-marquee.dragging { cursor: grabbing; }
.page-home .gallery-track { display: flex; align-items: center; gap: 28px; width: max-content; will-change: transform; }
      /* Fixed height only — width is auto so every photo keeps its own native
         aspect ratio instead of being cropped into a uniform box. */
      .page-home .gallery-track img {
        height: 260px; width: auto; max-width: none;
        border-radius: 16px; border: 6px solid #fff;
        box-shadow: 0 14px 30px rgba(15,23,42,.15);
        flex-shrink: 0; transition: transform .3s var(--ease);
        pointer-events: none; /* drag is handled on the marquee container */
      }
.page-home .gallery-track img:nth-child(odd) { transform: rotate(-4deg); }
.page-home .gallery-track img:nth-child(even) { transform: rotate(3deg); }
      /* Touch-and-hold zoom (JS adds this once the long-press timer fires) —
         overrides the odd/even rotation so the held photo squares up and
         scales, reading clearly as "selected" rather than just tilted bigger. */
      .page-home .gallery-track img.gallery-img-zoomed {
        transform: scale(1.35) !important;
        z-index: 5; position: relative;
        box-shadow: 0 22px 50px rgba(15,23,42,.35);
        transition: transform .25s var(--ease);
      }
      /* Mouse hover (JS-added, since images have pointer-events:none —
         see findImgAt/hover handling below) straightens the photo out of
         its odd/even tilt, showing it at its normal, un-rotated angle. */
      .page-home .gallery-track img.gallery-img-hover {
        transform: rotate(0deg) scale(1.06) !important;
        z-index: 4; position: relative;
        box-shadow: 0 18px 38px rgba(15,23,42,.25);
        transition: transform .25s var(--ease);
      }
      @media (max-width: 700px) {.page-home .gallery-track img { height: 160px; } }

      /* ════════════════════════════════════
      7. TESTIMONIALS — role-based 5-state carousel (act/prev/next/hide/
      new-next), ported from https://codepen.io/leusrox/pen/RgJKJx: cards
      stack centered and are pushed apart purely by transform (translateX +
      scale, no rotation), with the two outer "hide"/"new-next" states
      invisible off-stage buffers that make the loop feel seamless.
      Offsets are percentage-based (scaled to this card's own width) rather
      than the pen's fixed 220px/420px, since these cards are much wider
      than its 200px demo squares — same proportions, responsive.
      ════════════════════════════════════ */
.page-home .testi-section { background: #E7EDF9; position: relative; padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(130px, 17vw, 200px); }
.page-home .testi-viewport {
         padding: 28px clamp(0px, 9vw, 140px); cursor: grab; touch-action: pan-y; user-select: none;
         /* The off-stage role-prev/-next/-hide/-new-next cards sit at up to
            ±210% translateX, which without this creates genuine horizontal
            overflow past the viewport's edges — on mobile that let the page
            scroll sideways, and any residual scroll position made the
            visible card read as off-center. Clipping it keeps the carousel
            (and its centering) contained to this box regardless. */
         overflow: hidden;
      }
.page-home .testi-viewport.dragging { cursor: grabbing; }
      /* grid-template-columns gives the single stacked-card column a
         definite width (the full viewport), so each card's own
         width:min(760px,100%) actually caps against real available space
         instead of shrinking the track to content — with justify-content
         alone (no definite track), the auto column sized itself to the
         cards' max-content width and let them overflow narrow viewports. */
      .page-home .testi-track { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-home .testi-slide-card {
        grid-area: 1 / 1; justify-self: center; align-self: center;
        /* % (not vw) — this box sits inset by both .container's padding AND
           .testi-viewport's own padding, neither of which a vw-based width
           accounts for, so a vw value was genuinely wider than the space
           actually available and hung off one edge. % resolves against the
           real available content box, so it can't overflow it. */
        width: min(760px, 100%);
        display: flex; align-items: center; justify-content: space-between; gap: 32px;
        background: #fff; border-radius: 24px; padding: 44px 48px;
        text-align: left; box-shadow: var(--s-sm);
        opacity: .25; transform: translateX(0) scale(.85);
        transition: transform 1s var(--ease), opacity 1s var(--ease);
      }
.page-home .testi-slide-card.role-act { opacity: 1; transform: translateX(0) scale(1); z-index: 3; }
.page-home .testi-slide-card.role-prev { transform: translateX(-110%) scale(.85); z-index: 2; }
.page-home .testi-slide-card.role-next { transform: translateX(110%) scale(.85); z-index: 2; }
.page-home .testi-slide-card.role-hide,
.page-home .testi-slide-card.role-new-next {
        opacity: 0; z-index: 1; pointer-events: none;
        transition: transform .5s var(--ease), opacity .5s var(--ease);
      }
.page-home .testi-slide-card.role-hide { transform: translateX(-210%) scale(.85); }
.page-home .testi-slide-card.role-new-next { transform: translateX(210%) scale(.85); }
.page-home .testi-slide-body { flex: 1; min-width: 0; }
.page-home .testi-slide-avatar { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
      /* pointer-events:none stops the browser's native image drag from
         hijacking a swipe gesture mid-drag — drag is handled on .testi-viewport. */
.page-home .testi-slide-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.page-home .testi-slide-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--g-brand); color: #fff; font-weight: 800; font-size: 2.5rem; }
.page-home .testi-slide-name { font-size: 1.375rem; font-weight: 800; color: var(--ink); }
.page-home .testi-slide-role { font-size: .9375rem; color: var(--muted); margin-top: 2px; margin-bottom: 18px; }
.page-home .testi-slide-stars { color: #F5B400; font-size: 1.1rem; margin-bottom: 18px; }
.page-home .testi-slide-text { font-size: .9375rem; color: var(--body-txt); line-height: 1.75; margin-bottom: 12px; }
.page-home .testi-nav-single { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.page-home .testi-arrow-btn {
        width: 42px; height: 42px; border-radius: 50%;
        background: transparent; border: 1.5px solid var(--ink);
        color: var(--ink); font-size: 1rem;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: background var(--t1), color var(--t1), transform var(--t1);
      }
.page-home .testi-arrow-btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
      @media (max-width: 700px) {.page-home .testi-slide-card { flex-direction: column-reverse; align-items: stretch; padding: 28px 24px; width: 100%; }
.page-home .testi-slide-avatar { width: 120px; height: 120px; align-self: center; }
.page-home .testi-viewport { padding-inline: 4vw; }
.page-home .testi-slide-card.role-prev,
.page-home .testi-slide-card.role-next { opacity: 0; pointer-events: none; }
      }

      /* ════════════════════════════════════
      8. FAQ — plain accordion list + decorative chameleon-eye mark
      ════════════════════════════════════ */
      .page-home #faq { position: relative; padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }
.page-home #faq .section-header { text-align: left; margin-inline: 0; max-width: 480px; }
.page-home #faq .section-header h2 { font-size: clamp(2.25rem, 4.2vw, 3.25rem); line-height: 1.06; margin-bottom: 18px; }
.page-home #faq .eyebrow { background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
      /* Two explicit rows so column 1 (heading, then graphic) stacks its own
         content immediately, instead of the graphic waiting for column 2's
         taller FAQ list to finish first (that gap was the actual bug —
         a single auto row sized to the taller column pushed the graphic
         far down the page). .faq-list-col spans both rows so it still
         reads as one continuous column next to the two stacked items. */
      .page-home .faq-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 4rem; align-items: start; }
.page-home .faq-img-col { grid-column: 1; grid-row: 1; }
      /* Pinned to the BOTTOM of its row, not the top. Row 2 is stretched by
         whatever the FAQ list needs, so with align-self:start the graphic
         hung just under the heading and left a growing pool of dead space
         beneath it — the more questions there are, the further it floated
         from the footer. align-self:end parks it against the end of that
         row however tall the list gets, and the negative margin cancels the
         section's own bottom padding so its clipped edge lands flush on the
         footer instead of stopping short of it. */
      .page-home .faq-deco {
        grid-column: 1; grid-row: 2;
        align-self: end;
        margin-bottom: calc(-1 * clamp(24px, 3vw, 40px));
      }
.page-home .faq-list-col { grid-column: 2; grid-row: 1 / 3; }
      @media (max-width: 991px) {
        /* gap:4rem becomes the row-gap once this collapses to one column —
           that's the space between the heading block and the first FAQ
           question, halved here per request. */
        .page-home .faq-layout { grid-template-columns: 1fr; grid-template-rows: none; gap: 2rem; }
        /* .faq-deco is last in the DOM (after the FAQ list), so a single
           column + auto rows naturally stacks it after the list here. */
        .page-home .faq-img-col,
.page-home .faq-deco,
.page-home .faq-list-col { grid-column: 1; grid-row: auto; }
.page-home .faq-deco { display: block; margin-top: 32px; margin-inline: auto; }
      }
      /* How much of the chameleon shows. The artwork is 1072x1210, so at
         width:100% the svg renders 1.129x taller than it is wide, while
         this box is 777/900 = 0.863x its width — leaving 76.5% visible and
         cutting the bottom 23.5%. The old 726 showed 71.5%, so this is
         five points more of the figure. (The previous note here claimed
         60%, from multiplying the artwork's height by the box's width —
         two different reference numbers.) */
      .page-home .faq-deco {
        position: relative;
        /* 25% up on the previous 525px. A plain max-width could not
           deliver that: the left grid column is only ~608px at full
           container width, so it would have quietly capped at the column
           and given ~16%. Allowing up to 3rem of overflow lets it reach
           the full 656px, and 3rem stays inside the 4rem column gap — so
           it grows into the gutter and never reaches the FAQ text, at any
           width. */
        width: min(623px, 100% + 3rem);
        max-width: none;
        aspect-ratio: 900 / 777;
        overflow: hidden;
      }
      /* Single column below this breakpoint: there is no gutter to grow
         into, so it reverts to a plain cap that cannot exceed the screen. */
      @media (max-width: 991px) {
        .page-home .faq-deco { width: 100%; max-width: 623px; }
      }
.page-home .faq-deco svg {
        width: 100%; height: auto; display: block;
        animation: chamFloat 4s ease-in-out infinite;
      }
      @keyframes chamFloat { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
      @media (prefers-reduced-motion: reduce) {.page-home .faq-deco svg { animation: none; } }
      /* The iris tracks the cursor while hovering the graphic, JS-driven via
         --eye-x/--eye-y (set in real rendered pixels, then clamped in JS to
         a radius measured from the actual sclera circle — so unlike the
         previous keyframe version it can't ever overflow the white of the
         eye regardless of screen size). translate() is applied OUTSIDE
         scale() in the same transform so the pixel offset isn't shrunk by
         the .4 scale — translate runs in the parent's unscaled space. */
      .page-home .faq-cham-eye-scale {
        transform-box: fill-box; transform-origin: center;
        transform: translate(var(--eye-x, 0px), var(--eye-y, 0px)) scale(.4);
        transition: transform .08s linear;
      }
      @media (prefers-reduced-motion: reduce) {.page-home .faq-cham-eye-scale { transition: none; } }
.page-home .faq-wrap { display: flex; flex-direction: column; }
      /* The separator is a pseudo-element, not a border, so opening a card
         does not remove 1px of box height and shift every row below it —
         it just fades out. It also lets the closed card carry the same
         border-radius as the open one without the hairline curving up at
         the corners. */
      .page-home .faq-card {
        position: relative;
        /* Vertical rhythm of the list is 25% tighter than it was (1.5rem
           row padding, 1.75rem/1.5rem on the open card, 10px above the
           answer). Only the vertical values were cut — the open card's
           2rem side padding is what insets its text from the card edge,
           so shrinking that would have narrowed the card rather than
           making the column more compact. */
        padding: 1.125rem 0; margin-bottom: 0; cursor: pointer;
        background: rgba(255,255,255,0);
        border: none; border-radius: 20px;
        box-shadow: 0 10px 34px rgba(15,23,42,0);
        transition: padding .42s var(--ease), margin-bottom .42s var(--ease),
                    background .42s var(--ease), box-shadow .42s var(--ease);
      }
.page-home .faq-card::before {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
        background: var(--border);
        transition: opacity .25s ease, left .42s var(--ease), right .42s var(--ease);
      }
.page-home .faq-card.open::before { opacity: 0; left: 2rem; right: 2rem; }
.page-home .faq-card.open {
        background: rgba(255,255,255,1);
        padding: 1.3125rem 2rem; margin-bottom: 1.125rem;
        box-shadow: 0 10px 34px rgba(15,23,42,.08);
      }
.page-home .faq-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.page-home .faq-card-head { display: flex; align-items: center; gap: 16px; }
.page-home .faq-question {
        font-size: 1.0625rem; font-weight: 700; color: var(--ink); flex: 1;
        transition: font-size .42s var(--ease), color .25s ease;
      }
.page-home .faq-card:hover .faq-question { color: var(--blue); }
.page-home .faq-card.open .faq-question { font-size: 1.1875rem; }
      /* Chevron drawn in CSS (same construction as the nav dropdown's) so no
         markup or icon-font dependency is added to six cards. */
      .page-home .faq-card-head::after {
        content: ''; flex-shrink: 0;
        width: 9px; height: 9px; margin-bottom: 3px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        color: var(--muted); transform: rotate(45deg);
        transition: transform .42s var(--ease), color .25s ease;
      }
.page-home .faq-card:hover .faq-card-head::after { color: var(--blue); }
.page-home .faq-card.open .faq-card-head::after { color: var(--blue); transform: rotate(225deg); margin-bottom: -3px; }
      /* 0fr -> 1fr animates to the answer's *own* natural height. The old
         max-height:0 -> 500px was the problem: the real answer is ~120px, so
         the reveal finished in the first fifth of the 350ms and the rest of
         the transition was dead time — and on close, nothing moved until the
         last moment and then the text vanished. This has no magic number and
         stays correct as copy changes or the card's width animates. */
      .page-home .faq-answer {
        display: grid; grid-template-rows: 0fr;
        font-size: .9375rem; color: var(--body-txt); line-height: 1.75;
        transition: grid-template-rows .42s var(--ease);
      }
.page-home .faq-card.open .faq-answer { grid-template-rows: 1fr; }
      /* min-height:0 lets the grid item collapse below its content height;
         overflow:hidden clips the text while it does. */
      .page-home .faq-answer-inner {
        min-height: 0; overflow: hidden;
        padding-top: 7px;
        opacity: 0; transform: translateY(-6px);
        transition: opacity .26s ease, transform .38s var(--ease);
      }
.page-home .faq-card.open .faq-answer-inner {
        opacity: 1; transform: translateY(0);
        transition: opacity .3s ease .1s, transform .42s var(--ease) .06s;
      }
      @media (prefers-reduced-motion: reduce) {
        .page-home .faq-card,
.page-home .faq-card::before,
.page-home .faq-question,
.page-home .faq-card-head::after,
.page-home .faq-answer,
.page-home .faq-answer-inner { transition: none; }
      }
.page-home .faq-email-link { color: var(--blue); font-weight: 600; }

      /* ════════════════════════════════════
      9. NEWSLETTER — inline horizontal bar
      ════════════════════════════════════ */
      .page-home .newsletter-flex { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.page-home .newsletter-text { max-width: 520px; }
.page-home .newsletter-heading { color: #fff; margin-bottom: 8px; }
.page-home .newsletter-lead { color: rgba(255,255,255,.65); margin-bottom: 0; }
.page-home .newsletter-flex .newsletter-bar { flex-shrink: 0; width: min(420px, 100%); margin-inline: 0; }
.page-home .newsletter-btn { background: var(--green); color: #fff; }
.page-home .newsletter-btn:hover { filter: brightness(1.08); }

      /* ════════════════════════════════════
      10. LAPTOP (~1366px) OVERRIDES
      ════════════════════════════════════ */
      @media (max-width: 991px) {.page-home .back-top { display: none !important; }
      }

      /* ════════════════════════════════════
      11. MOBILE NAV MENU — fade+slide instead of the sitewide instant
      display:none/block toggle.
      ════════════════════════════════════ */
      .page-home #navMobile {
        display: block; opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .3s var(--ease), visibility .3s var(--ease);
      }
.page-home #navMobile.open { opacity: 1; visibility: visible; pointer-events: auto; }
.page-home #navMobile .nav-mobile-panel {
        transition: transform .35s var(--ease);
      }
      @media (prefers-reduced-motion: reduce) {.page-home #navMobile,
.page-home #navMobile .nav-mobile-panel { transition: none; }
      }

/* ── Stories page (moved from inline <style>) ── */
/* Titles: match the homepage's bold-sans treatment instead of the
         sitewide italic-serif default. */
      .page-stories h1,
.page-stories h2,
.page-stories h3,
.page-stories h4,
.page-stories h5,
.page-stories h6 { font-family: 'Plus Jakarta Sans', sans-serif; }
.page-stories h1,
.page-stories h2,
.page-stories h3 { font-weight: 800; font-style: normal; letter-spacing: -0.02em; }

      /* ── Nav: layout is the shared root-page rule above. Text colour is
         left to the sitewide .scrolled rules (already correct for this
         page's dark hero — light text over it, dark text once the white
         patch is behind it) instead of homepage's --ink override, which
         assumes a light hero and would be invisible here. ── */
.page-stories .site-nav.scrolled { top: 16px; border-radius: 20px; }
      @media (max-width: 768px) {
.page-stories .site-nav.scrolled { top: 10px; }
      }
.page-stories .search-sidebar { position: sticky; top: 72px; }
.page-stories .filter-section { margin-bottom: 24px; }
.page-stories .filter-section:last-child { margin-bottom: 0; }
.page-stories .filter-section-title { font-size:.72rem; font-weight: 700; text-transform: uppercase; letter-spacing:.08em; color: var(--muted); margin-bottom: 6px; }
.page-stories .jury-star { color: var(--amber); font-size: .85em; }

      /* Hero colour tint override — was tuned near-opaque (f2/f0/e0 ≈
         88-95%) for the old photographic background, which crushed the
         new banner.svg artwork (already dark blue) to near-invisible.
         Lightened so the artwork still shows through, but not as far as
         the original 40% alpha (0x66) — that left the white heading/badge
         text's contrast entirely dependent on which part of the artwork
         sits behind it. 70% (0xB3) keeps the art visible while giving the
         text a reliable dark base regardless of what's underneath. */
      .page-stories .page-hero::before {
        background: linear-gradient(135deg, #0B1F60B3 0%, #031D12B3 55%, #050C1AB3 100%);
      }

      /* Select2 — SDG dropdown with search, restyled to match the site */
      .page-stories .select2-container--default .select2-selection--single {
        position: relative;
        height: 42px;
        border: 1.5px solid var(--border);
        border-radius: var(--r-md);
        padding: 0 34px 0 12px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px 14px;
        transition: border-color var(--t1), box-shadow var(--t1), background-image var(--t1);
      }
.page-stories .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.page-stories .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0;
        line-height: 40px;
        color: var(--ink);
        font-size: .8rem;
      }
.page-stories .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.page-stories .select2-container--default .select2-selection--single .select2-selection__clear {
        float: none;
        position: absolute;
        right: 34px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
      }
.page-stories .select2-container--default.select2-container--focus .select2-selection--single,
.page-stories .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
      }
.page-stories .select2-container--default.select2-container--open .select2-selection--single {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232563EB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11l6-6 6 6'/%3e%3c/svg%3e");
      }
.page-stories .select2-dropdown { border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--s-lg); overflow: hidden; }
.page-stories .select2-search--dropdown { padding: 8px; }
.page-stories .select2-search--dropdown .select2-search__field {
        border: 1.5px solid var(--border);
        border-radius: var(--r-sm);
        padding: 7px 10px;
        font-size: .75rem;
        outline: none;
      }
.page-stories .select2-search--dropdown .select2-search__field:focus { border-color: var(--blue); }
.page-stories .select2-results__option { font-size: .75rem; padding: 7px 10px; }
.page-stories .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--blue); color: #fff; }
.page-stories .select2-container--default .select2-results__option[aria-selected=true] { background: var(--blue-lt); color: var(--blue-dk); }

/* ── Story detail page (moved from inline <style>) ── */
.page-story-detail h1,
.page-story-detail h2,
.page-story-detail h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.02em; }
      

      /* ── Nav: layout is the shared root-page rule above. Text colour is
         left to the sitewide .scrolled rules (already correct for this
         page's dark hero — light text over it, dark text once the white
         patch is behind it) instead of homepage's --ink override, which
         assumes a light hero and would be invisible here. ── */
.page-story-detail .site-nav.scrolled { top: 16px; border-radius: 20px; }
      @media (max-width: 768px) {
.page-story-detail .site-nav.scrolled { top: 10px; }
      }

      /* ── Nav: same floating pill treatment as stories.html, applied to
         every other page-hero page. Colour is left to the sitewide
         .scrolled rules (dark hero, white text) same as
         page-stories/page-story-detail above. ── */
      :is(.page-do-this-today, .page-events, .page-register, .page-sdg-explorer,
          .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
          .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav.scrolled { top: 16px; border-radius: 20px; }
      @media (max-width: 768px) {
      :is(.page-do-this-today, .page-events, .page-register, .page-sdg-explorer,
          .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
          .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav.scrolled { top: 10px; }
      }
:is(.page-do-this-today, .page-events, .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav .nav-link:hover,
:is(.page-do-this-today, .page-events, .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav .nav-link.active { color: var(--blue); }
:is(.page-do-this-today, .page-events, .page-register, .page-sdg-explorer,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) .site-nav .nav-link::after { display: none; }

/* Section titles: match the h1 weight (800) used everywhere else on the
   root pages instead of the base h2 rule's 500. */
:is(.page-do-this-today, .page-events, .page-register, .page-sdg-explorer, .page-search, .ty-page,
    .sdg-c1, .sdg-c2, .sdg-c3, .sdg-c4, .sdg-c5, .sdg-c6, .sdg-c7, .sdg-c8, .sdg-c9,
    .sdg-c10, .sdg-c11, .sdg-c12, .sdg-c13, .sdg-c14, .sdg-c15, .sdg-c16, .sdg-c17) h2 { font-weight: 800; }

      /* ── Story hero ── */
      .page-story-detail .story-hero {
        background: linear-gradient(160deg, #063A25 0%, #0B1F60 55%, #050C1A 100%);
        padding: 120px 0 70px;
        position: relative; overflow: hidden;
      }
.page-story-detail .story-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&auto=format&fit=crop&q=60') center/cover no-repeat;
        opacity:.18;
      }
.page-story-detail .story-hero-inner { position: relative; z-index: 1; }
.page-story-detail .story-hero h1 {
        color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem);
        font-weight: 800; line-height: 1.25;
        max-width: 760px; margin-bottom: 1rem;
      }
.page-story-detail .story-hero-meta {
        display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        font-size:.8125rem; color: rgba(255,255,255,.6);
      }
.page-story-detail .story-hero-meta.sep { opacity:.3; }

      /* ── Media gallery ── */
      .page-story-detail .story-media-main { border-radius: var(--r-xl); overflow: hidden; height: 300px; }
.page-story-detail .story-media-main img { width: 100%; height: 100%; object-fit: cover; }
.page-story-detail .story-media-thumb { border-radius: var(--r-lg); overflow: hidden; flex: 1; min-height: 135px; }
.page-story-detail .story-media-thumb img { width: 100%; height: 100%; object-fit: cover; }

      /* ── Override story-body-content centering— use full col width ── */
      .page-story-detail .story-body-content { max-width: none; margin: 0; }

      /* ── Impact icon sized for Bootstrap icons ── */
      .page-story-detail .impact-icon {
        width: 34px; height: 34px; border-radius: 20px;
        background: var(--surface-2);
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; flex-shrink: 0;
      }
.page-story-detail .impact-val { font-size:.9375rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.page-story-detail .impact-lbl { font-size:.72rem; color: var(--muted); margin-top: 1px; }

/* ── Search page (moved from inline <style>) ── */
.page-search .search-sidebar { position: sticky; top: 90px; }
.page-search .filter-section { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; }
.page-search .filter-section:last-child { border-bottom: none; }
.page-search .filter-section-title { font-size:.72rem; font-weight: 700; text-transform: uppercase; letter-spacing:.08em; color: var(--muted); margin-bottom: 10px; }

/* ── SDG Explorer page (moved from inline <style>) ── */
/* SDG icon grid */
      .page-sdg-explorer .sdg-img-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
      }
.page-sdg-explorer .sdg-img-grid a {
        border-radius: 20px;
        overflow: hidden;
        display: block;
        transition: transform.28s cubic-bezier(.34,1.56,.64,1), box-shadow.25s;
      }
.page-sdg-explorer .sdg-img-grid a:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 14px 32px rgba(0,0,0,.2);
      }
.page-sdg-explorer .sdg-img-grid img { width: 100%; height: auto; display: block; }
      @media (max-width: 767px) {.page-sdg-explorer .sdg-img-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
      @media (max-width: 480px) {.page-sdg-explorer .sdg-img-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } }

      /* Hero colour tint override */
      .page-sdg-explorer .page-hero::before {
        background: linear-gradient(135deg, #0a2342e8 0%, #0d1d37e6 55%, #0a2342cc 100%);
      }

      /* SDG card grid */
      .page-sdg-explorer .sdg-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
      }
.page-sdg-explorer .sdg-card {
        border-radius: 20px;
        padding: 20px 18px 18px;
        color: #fff;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: transform.25s cubic-bezier(.34,1.56,.64,1), box-shadow.25s;
        position: relative;
        overflow: hidden;
      }
.page-sdg-explorer .sdg-card::before {
        content: '';
        position: absolute;
        inset: 0;
        /* Permanent dark scrim so the white title/count text stays readable
           against every SDG accent color, including the light ones (goals
           2, 6, 7, 9, 11, 12, 14) that would otherwise fall well under
           WCAG AA contrast for white text. */
        background: rgba(0,0,0,.45);
        transition: background.2s;
      }
.page-sdg-explorer .sdg-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.22); color: #fff; }
.page-sdg-explorer .sdg-card:hover::before { background: rgba(0,0,0,.55); }
.page-sdg-explorer .sdg-card-num { font-size:.72rem; font-weight: 800; letter-spacing:.1em; text-transform: uppercase; opacity:.9; }
.page-sdg-explorer .sdg-card-title { font-size:.9375rem; font-weight: 800; line-height: 1.25; }
.page-sdg-explorer .sdg-card-count { font-size:.78rem; opacity:.85; margin-top: auto; }
.page-sdg-explorer .sdg-card-icon { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); opacity:.9; }

      /* Spotlight section */
      .page-sdg-explorer .spotlight-section { background: var(--surface-2); }
.page-sdg-explorer .spotlight-img {
        border-radius: 20px;
        overflow: hidden;
        position: relative;
      }
.page-sdg-explorer .spotlight-img img { width: 100%; height: 320px; object-fit: cover; }
.page-sdg-explorer .spotlight-img-badge {
        position: absolute;
        top: 16px; left: 16px;
        background: #E5243B;
        color: #fff;
        font-size:.72rem;
        font-weight: 800;
        letter-spacing:.06em;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 20px;
      }

/* ── Register page (moved from inline <style>) ── */
/* ── Page hero ── */
      .page-register .reg-hero {
        background: url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1920&q=80&fit=crop') center/cover no-repeat;
        padding: 120px 0 70px;
        position: relative;
        overflow: hidden;
      }
.page-register .reg-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(to right, rgba(5,15,35,.88) 45%, rgba(5,15,35,.45) 100%);
        pointer-events: none;
      }
.page-register .reg-hero-inner { position: relative; z-index: 1; }
.page-register .reg-eyebrow {
        display: inline-flex; align-items: center; gap: .5rem;
        background: rgba(37,99,235,.2); border: 1px solid rgba(37,99,235,.35);
        color: #93C5FD; font-size: .72rem; font-weight: 700;
        padding: .3rem .9rem; border-radius: 999px; margin-bottom: 1.25rem;
        letter-spacing: .04em; text-transform: uppercase;
      }
.page-register .reg-hero h1 {
        font-size: clamp(1.75rem, 4vw, 2.75rem);
        font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: .75rem;
      }
.page-register .reg-hero h1 span { color: #60A5FA; }
.page-register .reg-hero p.lead {
        color: rgba(255,255,255,.7); font-size: 1.0625rem; max-width: 520px;
      }

      /* ── Trust badges ── */
      .page-register .trust-row {
        display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem;
      }
.page-register .trust-badge {
        display: flex; align-items: center; gap: .5rem;
        color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 600;
      }
.page-register .trust-badge i { color: #34D399; font-size: 1rem; }

      /* ── Layout ── */
      .page-register .reg-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 2.5rem;
        align-items: start;
        padding: 3.5rem 0 5rem;
      }
      @media (max-width: 991px) {.page-register .reg-layout { grid-template-columns: 1fr; }
.page-register .reg-sidebar { order: -1; }
      }

      /* ── Form card ── */
      .page-register .reg-card {
        background: #fff;
        border-radius: var(--r-xl);
        box-shadow: var(--s-xl);
        overflow: hidden;
      }
.page-register .reg-section-head {
        display: flex; align-items: center; gap: .75rem;
        padding: 1.75rem 2rem 1.25rem;
        border-bottom: 1px solid var(--border);
      }
.page-register .reg-section-icon {
        width: 40px; height: 40px; border-radius: 20px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; color: #fff;
      }
.page-register .reg-section-icon.blue { background: linear-gradient(135deg, var(--blue), var(--blue-dk)); }
.page-register .reg-section-icon.green { background: linear-gradient(135deg, var(--green), var(--green-dk)); }
.page-register .reg-section-icon.purple { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.page-register .reg-section-title { font-size: .9rem; font-weight: 700; color: var(--ink); margin: 0; }
.page-register .reg-section-sub { font-size: .75rem; color: var(--muted); margin: .1rem 0 0; }
.page-register .reg-section-body { padding: 1.5rem 2rem 2rem; }

      /* ── Form controls ── */
      .page-register .form-label {
        font-size: .8rem; font-weight: 700; color: var(--ink-2);
        margin-bottom: .35rem; display: block;
      }
.page-register .form-label .req { color: var(--rose); margin-left: 2px; }
.page-register .form-control,
.page-register .form-select {
        border: 1.5px solid var(--border);
        border-radius: var(--r-sm);
        font-size: .875rem;
        color: var(--ink);
        padding: .65rem 1rem;
        transition: border-color .2s, box-shadow .2s;
        background-color: var(--surface-2);
      }
.page-register .form-control:focus,
.page-register .form-select:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
        background-color: #fff;
        outline: none;
      }
.page-register .form-control.is-invalid,
.page-register .form-select.is-invalid {
        border-color: var(--rose);
      }
.page-register .form-text {
        font-size: .73rem; color: var(--muted); margin-top: .3rem;
      }

      /* ── Password strength ── */
      .page-register .pw-strength-bar {
        height: 4px; border-radius: 999px;
        background: var(--border); margin-top: .5rem; overflow: hidden;
      }
.page-register .pw-strength-fill {
        height: 100%; border-radius: 999px; width: 0%;
        transition: width .3s ease, background .3s ease;
      }
.page-register .pw-strength-label {
        font-size: .7rem; color: var(--muted); margin-top: .25rem; text-align: right;
      }

      /* ── Step indicator ── */
      .page-register .reg-steps {
        display: flex; gap: 0; margin-bottom: 2.5rem;
      }
.page-register .reg-step {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        position: relative; font-size: .72rem; font-weight: 700;
        color: var(--muted); text-align: center;
      }
.page-register .reg-step + .reg-step::before {
        content: '';
        position: absolute; top: 14px; right: 50%; left: -50%;
        height: 2px; background: var(--border); z-index: 0;
      }
.page-register .reg-step.done + .reg-step::before { background: var(--blue); }
.page-register .reg-step-dot {
        width: 28px; height: 28px; border-radius: 50%;
        border: 2px solid var(--border);
        background: #fff; display: flex; align-items: center; justify-content: center;
        font-size: .72rem; font-weight: 700; color: var(--muted);
        position: relative; z-index: 1; margin-bottom: .45rem;
        transition: all .25s;
      }
.page-register .reg-step.done .reg-step-dot {
        background: var(--blue); border-color: var(--blue); color: #fff;
      }
.page-register .reg-step.done { color: var(--blue); }

      /* ── Submit button ── */
      .page-register .btn-reg-submit {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        background: var(--g-brand); color: #fff;
        font-weight: 700; font-size: .9375rem;
        padding: .9rem 2rem; border-radius: var(--r-md);
        border: none; width: 100%; cursor: pointer;
        transition: opacity .2s, transform .2s, box-shadow .2s;
        box-shadow: var(--s-blue);
      }
.page-register .btn-reg-submit:hover {
        opacity: .92; transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(37,99,235,.3);
      }
.page-register .btn-reg-submit:active { transform: translateY(0); }

      /* ── Sidebar ── */
      .page-register .reg-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.page-register .side-card {
        background: #fff; border-radius: var(--r-lg);
        box-shadow: var(--s-md); padding: 1.5rem;
      }
.page-register .side-card-title {
        font-size: .8rem; font-weight: 800; color: var(--ink);
        text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem;
      }
.page-register .benefit-item {
        display: flex; align-items: flex-start; gap: .75rem;
        margin-bottom: .85rem;
      }
.page-register .benefit-item:last-child { margin-bottom: 0; }
.page-register .benefit-icon {
        width: 32px; height: 32px; border-radius: 20px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: .85rem;
      }
.page-register .benefit-item p { font-size: .8rem; color: var(--body-txt); margin: 0; line-height: 1.55; }
.page-register .benefit-item strong { color: var(--ink); display: block; font-size: .82rem; margin-bottom: .1rem; }
.page-register .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.page-register .stat-cell {
        background: var(--surface-2); border-radius: var(--r-sm); padding: .75rem;
        text-align: center;
      }
.page-register .stat-cell strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--blue); }
.page-register .stat-cell span { font-size: .7rem; color: var(--muted); font-weight: 600; }
.page-register .side-quote {
        background: var(--g-brand); border-radius: var(--r-lg);
        padding: 1.5rem; color: #fff;
      }
.page-register .side-quote blockquote {
        font-size: .875rem; line-height: 1.7; font-style: italic;
        color: rgba(255,255,255,.9); margin: 0 0 1rem;
      }
.page-register .side-quote-author { display: flex; align-items: center; gap: .65rem; }
.page-register .side-quote-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        background: rgba(255,255,255,.2); display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: .85rem; color: #fff;
        flex-shrink: 0;
      }
.page-register .side-quote-name { font-size: .8rem; font-weight: 700; color: #fff; }
.page-register .side-quote-school { font-size: .72rem; color: rgba(255,255,255,.65); }

      /* ── Success state ── */
      .page-register .reg-success {
        display: none; text-align: center; padding: 3rem 2rem;
      }
.page-register .reg-success-icon {
        width: 72px; height: 72px; border-radius: 50%;
        background: var(--green-lt); display: flex; align-items: center;
        justify-content: center; font-size: 2rem; color: var(--green);
        margin: 0 auto 1.25rem;
      }
.page-register .reg-success h3 { font-size: 1.375rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.page-register .reg-success p { color: var(--body-txt); font-size: .9375rem; }
.page-register .reg-success .btn-go {
        display: inline-flex; align-items: center; gap: .5rem;
        background: #03045E; color: #fff; font-weight: 700;
        padding: .75rem 1.75rem; border-radius: var(--r-md);
        text-decoration: none; margin-top: 1.25rem;
        transition: background .2s, transform .2s;
      }
.page-register .reg-success .btn-go:hover { background: #020342; transform: translateY(-2px); }

      /* ── Divider between form sections ── */
      .page-register .reg-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

      /* ── Terms check ── */
      .page-register .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.page-register .form-check-label { font-size: .8rem; color: var(--body-txt); }
.page-register .form-check-label a { color: var(--blue); text-decoration: underline; }

/* ── Events page (moved from inline <style>) ── */
.page-events .page-hero::before {
        background: linear-gradient(135deg, rgba(11,31,96,.91) 0%, rgba(26,10,94,.73) 55%, rgba(5,12,26,.8) 100%);
      }

/* ── Do This Today page (moved from inline <style>) ── */
.page-do-this-today .page-hero::before {
        background: linear-gradient(135deg, #064e2ae8 0%, #065f46bb 55%, #022c22cc 100%);
      }

/* ── Thank-you page (moved from inline <style>) ── */
/* This page has no dark hero behind the nav, so force the light
      "scrolled" nav styling from the start instead of transparent/white text. */
      .ty-page .site-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--border); box-shadow: 0 2px 20px rgba(15,23,42,.06); }
.ty-page .site-nav .nav-link { color: var(--body-txt); }
.ty-page .site-nav .nav-link:hover,
.ty-page .site-nav .nav-link.active { color: var(--blue); }
.ty-page .site-nav .nav-logo-mark { content: url('../images/logo-black.png'); }
.ty-page .site-nav .nav-hamburger span { background: var(--ink); }

      /* ── Page wrapper ── */
      .ty-page {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
      }
.ty-page .ty-main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 120px 1rem 80px;
        background: linear-gradient(155deg, #EFF6FF 0%, #F0FDF4 60%, #FEF9C3 100%);
        position: relative;
        overflow: hidden;
      }

      /* Decorative blobs */
      .ty-page .ty-main::before {
        content: '';
        position: absolute;
        width: 600px; height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
        top: -150px; left: -150px;
        pointer-events: none;
      }
.ty-page .ty-main::after {
        content: '';
        position: absolute;
        width: 500px; height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(5,150,105,.08) 0%, transparent 70%);
        bottom: -100px; right: -100px;
        pointer-events: none;
      }

      /* ── Card ── */
      .ty-page .ty-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: var(--s-xl);
        padding: 3.5rem 3rem;
        max-width: 620px;
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
      }
      @media (max-width: 576px) {.ty-page .ty-card { padding: 2.5rem 1.5rem; }
      }

      /* ── Animated checkmark ── */
      .ty-page .ty-check-wrap {
        width: 90px; height: 90px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--green), var(--green-dk));
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 1.75rem;
        box-shadow: 0 12px 40px rgba(5,150,105,.3);
        animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both;
      }
      @keyframes popIn {
        from { transform: scale(0); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
      }
.ty-page .ty-check-wrap i {
        font-size: 2.5rem; color: #fff;
        animation: checkFade .4s ease .35s both;
      }
      @keyframes checkFade {
        from { opacity: 0; transform: scale(.6); }
        to   { opacity: 1; transform: scale(1); }
      }

      /* ── Confetti dots (pure CSS) ── */
      .ty-page .ty-confetti {
        position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px;
      }
.ty-page .ty-confetti span {
        position: absolute;
        width: 8px; height: 8px; border-radius: 20px;
        animation: confettiFall 2.2s ease forwards;
        opacity: 0;
      }
      @keyframes confettiFall {
        0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
        100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
      }
@media (prefers-reduced-motion: reduce) {
  .ty-page .ty-check-wrap { animation: none; }
  .ty-page .ty-check-wrap i { animation: none; opacity: 1; transform: none; }
  .ty-page .ty-confetti { display: none; }
}

      /* ── Typography ── */
      .ty-page .ty-eyebrow {
        display: inline-flex; align-items: center; gap: .4rem;
        background: var(--green-lt); color: var(--green);
        font-size: .72rem; font-weight: 700;
        padding: .28rem .9rem; border-radius: 999px;
        margin-bottom: 1.1rem; letter-spacing: .04em; text-transform: uppercase;
      }
.ty-page .ty-card h1 {
        font-size: clamp(1.6rem, 4vw, 2.25rem);
        font-weight: 800; color: var(--ink); line-height: 1.25;
        margin-bottom: .6rem;
      }
.ty-page .ty-card h1 span { color: var(--blue); }
.ty-page .ty-card .ty-sub {
        font-size: 1rem; color: var(--body-txt); line-height: 1.7;
        margin-bottom: 2rem; max-width: 480px; margin-left: auto; margin-right: auto;
      }

      /* ── Next steps ── */
      .ty-page .ty-steps {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
        margin-bottom: 2rem;
        text-align: left;
      }
      @media (max-width: 576px) {.ty-page .ty-steps { grid-template-columns: 1fr; }
      }
.ty-page .ty-step-item {
        background: var(--surface-2); border-radius: 20px;
        padding: 1.1rem 1rem; border: 1px solid var(--border);
      }
.ty-page .ty-step-num {
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--g-brand);
        color: #fff; font-size: .75rem; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: .65rem;
      }
.ty-page .ty-step-item strong { font-size: .82rem; color: var(--ink); display: block; margin-bottom: .2rem; }
.ty-page .ty-step-item p { font-size: .75rem; color: #64748B; margin: 0; line-height: 1.55; }

      /* ── CTAs ── */
      .ty-page .ty-ctas {
        display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
      }
.ty-page .btn-ty-primary {
        display: inline-flex; align-items: center; gap: .5rem;
        background: var(--g-brand);
        color: #fff; font-weight: 700; font-size: .9375rem;
        padding: .8rem 1.75rem; border-radius: 20px;
        text-decoration: none;
        box-shadow: 0 8px 28px rgba(37,99,235,.28);
        transition: opacity .2s, transform .2s;
      }
.ty-page .btn-ty-primary:hover { opacity: .9; transform: translateY(-2px); color: #fff; }
.ty-page .btn-ty-secondary {
        display: inline-flex; align-items: center; gap: .5rem;
        background: #fff; color: var(--blue); font-weight: 700; font-size: .9375rem;
        padding: .8rem 1.75rem; border-radius: 20px;
        text-decoration: none; border: 1.5px solid var(--blue-lt2);
        transition: border-color .2s, transform .2s, box-shadow .2s;
      }
.ty-page .btn-ty-secondary:hover {
        border-color: var(--blue); transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(37,99,235,.12); color: var(--blue);
      }

      /* ── Email note ── */
      .ty-page .ty-email-note {
        margin-top: 1.75rem; padding: .85rem 1.25rem;
        background: #FEF9C3; border-radius: 20px; border: 1px solid #FDE68A;
        display: flex; align-items: flex-start; gap: .65rem; text-align: left;
      }
.ty-page .ty-email-note i { color: var(--amber); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.ty-page .ty-email-note p { font-size: .78rem; color: #78350F; margin: 0; line-height: 1.55; }