/* ============================================
   Worldwide Education Foundation — Stylesheet
   Design System + Components
   ============================================ */

/* --- Web fonts ---
   Loaded by css/fonts.css, linked from the page <head> alongside this file.

   It used to be an @import right here, and that was the single most expensive
   line in the stylesheet: an @import is invisible to the browser's preload
   scanner, so the fonts were not even discovered until this file had been
   downloaded and parsed, and then took two more serial round trips to two
   third-party origins. Fonts are now self-hosted and requested in parallel
   with this stylesheet. Do not reintroduce an @import here.

   See tools/fetch-fonts.php. */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Colors — Elegant, desaturated palette */
  --clr-primary: #0e611d;
  /* Slightly deeper, sophisticated green */
  --clr-primary-dark: #1f4f29;
  --clr-primary-deeper: #123019;
  --clr-primary-light: #52a865;
  --clr-primary-lighter: #e5f2e8;

  --clr-accent: #c4691c;
  /* Refined, deeper warm orange. 3.90:1 on white - fine for large/bold text,
     icons and surfaces (AA large-text/UI threshold is 3:1), but NOT for body
     text. Use --clr-accent-text for that. */
  --clr-accent-light: #e69149;
  --clr-accent-dark: #964d12;
  --clr-accent-subtle: #f9ede4;
  /* Text-safe accent: same hue family as --clr-accent, darkened to 6.24:1 on
     white. Use for any small/regular-weight text that would otherwise sit on
     --clr-accent (labels, eyebrows, links, card kickers). */
  --clr-accent-text: var(--clr-accent-dark);

  /* Tertiary — used sparingly for the third "Belief" about-card accent */
  --clr-tertiary: #e07a5f;
  --clr-tertiary-light: #f2cc8f;

  /* Semantic — category tags, form/system feedback (not brand colors) */
  --clr-info: #1a73e8;
  --clr-info-subtle: #e6f0fa;
  --clr-error: #e02424;
  --clr-error-subtle: #fdf2f2;

  /* Neutrals for editorial aesthetic */
  --clr-white: #ffffff;
  --clr-off-white: #fafafa;
  --clr-cream: #fbfaf8;
  --clr-gray-100: #f4f5f6;
  --clr-gray-200: #e7e9ec;
  --clr-gray-300: #cfd3d8;
  --clr-gray-400: #a7acb3;
  --clr-gray-500: #6b7178;
  /* darkened from #717781 for a comfortable 4.9:1 body-text contrast margin (was 4.51:1, right at the AA line) */
  --clr-gray-600: #525862;
  --clr-gray-700: #3a3f47;
  --clr-gray-800: #22252a;
  --clr-gray-900: #121417;
  --clr-overlay: rgba(18, 20, 23, 0.85);
  --clr-overlay-light: rgba(18, 20, 23, 0.4);

  /* Typography */
  --ff-heading: 'Plus Jakarta Sans', sans-serif;
  --ff-body: 'Inter', sans-serif;

  /* Magazine-quality spacing & typography scales */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;

  /* Spacing grid - base-4, name = pixels / 4. Renamed 2026-09-22 from a
     t-shirt scale (xs/sm/md.../5xl) that had two gaps - nothing between
     24px and 40px, or between 56px and 72px - which is exactly why ~250
     one-off px values had accumulated in component code. Every step below
     keeps the SAME pixel value it had under its old name (this is a pure
     rename, not a re-tune); --space-8 and --space-12 are the two new steps
     that fill the gaps. */
  --space-1: 0.25rem;   /* 4px  - was --sp-xs */
  --space-2: 0.5rem;    /* 8px  - was --sp-sm */
  --space-4: 1rem;      /* 16px - was --sp-md */
  --space-6: 1.5rem;    /* 24px - was --sp-lg */
  --space-8: 2rem;      /* 32px - NEW, fills the lg/xl gap */
  --space-10: 2.5rem;   /* 40px - was --sp-xl */
  --space-12: 3rem;     /* 48px - NEW, fills the 2xl/3xl gap */
  --space-14: 3.5rem;   /* 56px - was --sp-2xl */
  --space-18: 4.5rem;   /* 72px - was --sp-3xl */
  --space-24: 6rem;     /* 96px - was --sp-4xl */
  --space-32: 8rem;     /* 128px - was --sp-5xl */

  /* Borders & Radius - Elegant modern curves */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows - Subtle, premium elevations */
  --shadow-sm: 0 2px 8px rgba(18, 20, 23, 0.04), 0 1px 2px rgba(18, 20, 23, 0.02);
  --shadow-md: 0 8px 24px rgba(18, 20, 23, 0.06), 0 2px 8px rgba(18, 20, 23, 0.03);
  --shadow-lg: 0 16px 48px rgba(18, 20, 23, 0.08), 0 4px 16px rgba(18, 20, 23, 0.04);
  --shadow-xl: 0 24px 64px rgba(18, 20, 23, 0.1), 0 8px 32px rgba(18, 20, 23, 0.05);
  /* Added 2026-09-22: .donate-action-card referenced this undefined - an
     unfallback-ed var() in a box-shadow list invalidates the WHOLE
     declaration, so that card has been silently missing its shadow
     entirely. Continues the established progression one step further. */
  --shadow-2xl: 0 32px 80px rgba(18, 20, 23, 0.12), 0 12px 40px rgba(18, 20, 23, 0.06);

  /* Transitions - Smooth and effortless */
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 250ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Layout */
  --max-width: 1400px;
  --header-height: 90px;

  /* Stacking order - added 2026-09-22. Previously 47 raw z-index values
     (-1 to 99999) with no shared scale. Named by ROLE, not by "how high",
     so a new component picks the right layer instead of guessing a bigger
     number than its neighbour. */
  --z-behind: -1;       /* deliberately pulled under its own parent's content */
  --z-base: 0;           /* establishes a stacking context, sits at parent level */
  --z-raised: 1;         /* card hover states, decorative overlaps within a component */
  --z-dropdown: 10;      /* dropdown menus, filter panels, in-page popovers */
  --z-sticky: 100;       /* sticky/fixed elements scoped to a section */
  --z-header: 1000;      /* the site header */
  --z-overlay: 1001;     /* dimming backdrops behind a drawer/modal */
  --z-drawer: 1002;      /* the mobile nav drawer, slide-over panels */
  --z-modal: 2000;       /* lightbox, team-bio modal, any dialog */
  --z-toast: 5000;       /* transient notifications, above everything but a debug overlay */
}

/* Respect the operating-system motion preference. Was previously absent
   from every public stylesheet despite a code comment in main.js asserting
   it existed. Zeroing durations (rather than `display: none`-ing motion)
   keeps end states correct - elements still reach their final position,
   they just don't animate getting there. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The browser's own [hidden] { display: none } UA-stylesheet rule loses to
   ANY author rule that sets display on the same element, in any order -
   author origin always beats user-agent origin regardless of source
   position. Every component class below sets its own display (grid, flex,
   block...), so toggling the hidden attribute on an element with one of
   those classes silently did nothing - e.g. index.php's second
   .donate-amount-selector ("One-time" amounts) kept rendering at
   display:grid, stacked on top of the Monthly one, permanently. This
   re-asserts display:none at !important so the hidden attribute always
   wins, the one deliberate exception to the "no new !important" rule. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kills the grey/blue flash iOS Safari and Android Chrome paint over any
     tapped element with a click handler - the single loudest "this is a
     website, not an app" tell on the whole site. Every tappable element
     still needs its own :active state for press feedback; see .btn:active
     and similar rules, which already exist independently of this. */
  -webkit-tap-highlight-color: transparent;
  /* Stops iOS inflating font sizes on rotation to landscape. */
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-gray-700);
  background-color: var(--clr-off-white);
  overflow-x: hidden;
}

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

a,
button {
  /* Tells the browser this element never double-tap-zooms, so it can fire
     click immediately instead of waiting ~300ms to see if a second tap is
     coming. The one other place this mattered (the compare slider) already
     set it locally; this makes it the default everywhere instead of
     something each new interactive element has to remember to add. */
  touch-action: manipulation;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast) var(--ease-smooth);
}

/* Form controls take the page's type and colour unless a component says
   otherwise. Without this the browser's defaults (13.33px system font, black
   text) leak into every unstyled button, select and option. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Universal keyboard-focus indicator. Only shows for keyboard navigation
   (not mouse clicks), and is overridden by more specific component focus
   styles (form inputs, donor-select, etc.) where those already exist. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-gray-900);
}

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-10);
}

.section {
  padding: var(--space-24) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-14);
}

.section-header h2 {
  font-size: var(--fs-3xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
  border-radius: var(--radius-full);
}

.section-header p {
  font-size: var(--fs-md);
  color: var(--clr-gray-500);
  max-width: 640px;
  margin: var(--space-10) auto 0;
  line-height: 1.8;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 36px;
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-smooth);
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity var(--duration-fast);
  border-radius: inherit;
}

/* Instant press feedback, not gated behind (hover: hover) - unlike
   :hover, :active is exactly the touch interaction this needs to
   respond to (a real tap), and a fast 100ms is deliberately quicker
   than this file's --duration-fast (250ms) token: a press needs to
   register as immediate, not as a leisurely UI transition. Was
   referenced in a comment on html's -webkit-tap-highlight-color
   ("every tappable element still needs its own :active state... see
   .btn:active") that had gone stale - no such rule actually existed. */
.btn:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
.btn:hover::before {
  opacity: 1;
}
}

.btn-accent {
  background: var(--clr-accent);
  color: var(--clr-white);
  box-shadow: var(--shadow-md);
}

@media (hover: hover) and (pointer: fine) {
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: var(--clr-accent-dark);
}
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes particleFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.4;
  }

  50% {
    transform: translateY(-80px) rotate(180deg);
    opacity: 0.8;
  }
}

@keyframes badgeDotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

/* Unscoped, exactly as originally written - .about-card and other
   components combine .reveal with their own :hover/:active rules at this
   same (0,2,0)/(0,1,0) specificity tier and rely on file order to win
   over .reveal.active's own transform when hovered/pressed. (An earlier
   version of this fix scoped these under html.js to solve the no-JS
   problem below, which raised their specificity enough to silently beat
   .about-card:hover/:active regardless of order - caught live, reverted.)
   The no-JS fallback further down handles visibility without touching
   these at all. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 24px, not the original 60px: a .reveal-right element sitting near its
   container's right edge (e.g. completed-project-details.php's
   .pb-sidebar, confirmed via direct measurement - 20px past the viewport
   at both 1024 and 1280px, contained only because html/body's own
   overflow-x:hidden silently clips it rather than showing a scrollbar)
   had no slack to absorb a 60px pre-animation excursion at typical grid
   widths. 24px keeps the "slide in" effect recognizable while fitting
   inside far more layouts without relying on clipping to hide the
   overflow. */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* No-JS / JS-failed fallback: forces every .reveal variant fully visible
   when html never gained the .js class (set by an inline script in
   <head>, before first paint - see head-meta.php), which happens when JS
   is disabled, blocked, or an earlier init() throws before
   initScrollReveal() (main.js) gets a turn to add .active. Deliberately
   only forces opacity, not transform: the unrevealed transform
   (translateY(40px) etc.) is a minor, still-legible visual offset, and
   leaving transform alone here is what keeps this rule from ever needing
   to out-rank a real :hover/:active transform on a .reveal element (e.g.
   .about-card) in the rare no-JS-but-real-mouse case - opacity is not a
   property any :hover/:active rule on this site touches, so there is
   nothing here for it to conflict with. This is the one deliberate
   :not()-based exception alongside [hidden] at the top of this file. */
html:not(.js) .reveal,
html:not(.js) .reveal-left,
html:not(.js) .reveal-right {
  opacity: 1 !important;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Grows by the notch/Dynamic Island inset (0 on a device without one) and
     pads its content down by the same amount, so .header .container's
     existing align-items:center still centers within the original
     --header-height and nothing sits under the notch. Requires
     viewport-fit=cover in the viewport meta tag - see head-meta.php - or
     env() evaluates to 0px everywhere and this is a no-op. */
  height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: var(--z-header);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  z-index: 1001;
  /* Without this, a flex item refuses to shrink below its content's
     intrinsic width by default. The org name + tagline are nowrap text,
     so below ~480px that intrinsic width pushed .header-logo wider than
     the viewport and silently shoved the hamburger button off-screen -
     overflow-x:hidden on body clips it instead of showing a scrollbar,
     which is why it was invisible rather than visibly broken. */
  min-width: 0;
  /* Measured 40px tall (the logo mark's own height) - under the 44px
     touch-target minimum. This only pads the link's hit area; the logo
     mark itself keeps its own size via .header-logo img below. */
  min-height: 44px;
}

.header-logo img {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-spring);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) and (pointer: fine) {
.header-logo img:hover {
  transform: rotate(10deg) scale(1.08);
}
}

.header-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0; /* same reason as .header-logo above - lets this shrink too */
}

.header-logo-text span:first-child {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.2;
  transition: color var(--duration-base) var(--ease-smooth);
  /* Safety net for the narrowest devices: once font-size shrinks as far as
     the mobile breakpoints below take it, ellipsis rather than overflow. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-logo-text span:last-child {
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: color var(--duration-base) var(--ease-smooth);
  overflow: hidden;
  text-overflow: ellipsis;
}

.header.scrolled .header-logo-text span:first-child {
  color: var(--clr-primary-dark);
}

.header.scrolled .header-logo-text span:last-child {
  color: var(--clr-gray-500);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.nav-menu>a,
.nav-dropdown>.dropdown-toggle {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  padding: var(--space-1) 0;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.nav-menu>a::after,
.nav-dropdown>.dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--clr-accent);
  transition: width var(--duration-base) var(--ease-smooth);
  border-radius: var(--radius-full);
}

.nav-menu>a.active::after {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .nav-menu>a:hover::after,
  .nav-dropdown:hover>.dropdown-toggle::after {
    width: 100%;
  }
}

.header.scrolled .nav-menu>a,
.header.scrolled .nav-dropdown>.dropdown-toggle {
  color: var(--clr-gray-700);
}

@media (hover: hover) and (pointer: fine) {
.header.scrolled .nav-menu>a:hover,
.header.scrolled .nav-dropdown:hover>.dropdown-toggle {
  color: var(--clr-primary);
}
}

/* --- Dropdown with Glassmorphism Effect --- */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 220px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-base) var(--ease-spring);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;

  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Arrow/caret on top */
.dropdown-menu::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

@media (hover: hover) and (pointer: fine) {
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
}

.dropdown-menu a {
  padding: 11px 18px;
  color: var(--clr-gray-800) !important;
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.dropdown-menu a::after {
  display: none !important;
}

.dropdown-menu a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(58, 138, 72, 0.08),
      rgba(217, 123, 42, 0.06));
  opacity: 0;
  transition: opacity var(--duration-fast);
  border-radius: var(--radius-md);
}

@media (hover: hover) and (pointer: fine) {
.dropdown-menu a:hover {
  color: var(--clr-primary-dark) !important;
}

.dropdown-menu a:hover::before {
  opacity: 1;
}
}

/* Donate button */
.nav-donate {
  cursor: pointer;
  position: relative;
  padding: 10px 24px !important;
  font-size: 18px;
  color: var(--clr-primary) !important;
  border: 2px solid var(--clr-primary) !important;
  border-radius: var(--radius-full) !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1) !important;
  overflow: hidden;
  box-shadow: none !important;
  z-index: 1;
}

.nav-donate::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: var(--clr-primary);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

@media (hover: hover) and (pointer: fine) {
.nav-donate:hover::before {
  scale: 3;
}

a.nav-donate:hover,
a#nav-donate-btn:hover,
.nav-menu>a.nav-donate:hover,
.header.scrolled .nav-menu>a.nav-donate:hover {
  color: #ffffff !important;
  scale: 1.1;
  box-shadow: 0 0px 20px rgba(14, 97, 29, 0.4) !important;
}
}

.nav-donate:active {
  /* Was scale:1 (only ever cancelling the :hover grow above while
     pressed) - the donate button had no actual press feedback of its
     own, on the single most important call-to-action on the site. */
  scale: 0.96;
  transition: scale 100ms ease-out;
}

.nav-donate::after {
  display: none !important;
}

/* Mobile Hamburger */
.hamburger {
  /* Was a <div role="button">; now a real <button> for native keyboard
     activation (Enter/Space) and semantics. These four reset the UA button
     chrome (border, background, font) back to how the div rendered. */
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-full);
  transition: all var(--duration-base) var(--ease-smooth);
}

.header.scrolled .hamburger span {
  background: var(--clr-gray-900);
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* ============================================
   ABOUT SECTION (Vision / Mission / Belief)
   ============================================ */
.about {
  background: var(--clr-white);
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  /* Golden Ratio section vertical spacing */
}

.about::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-primary-lighter) 0%, transparent 70%);
  opacity: 0.5;
  z-index: 0;
}

.about::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-accent-subtle) 0%, transparent 70%);
  opacity: 0.4;
  z-index: 0;
}

.about .container {
  position: relative;
  z-index: 1;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  /* Golden Ratio grid gap spacing */
}

.about-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: 48px 30px;
  /* Golden Ratio: vertical padding is exactly 1.6x horizontal padding */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all var(--duration-base) var(--ease-smooth);
  border: 8px solid rgba(165, 173, 183, 0.95);
  /* Bold 8px border frame */
  text-decoration: none;
  /* Disables default link underline */
}

/* Instant press feedback for touch, independent of the :hover lift
   above (which the (hover: hover) gate now correctly skips on touch
   devices, leaving this a link with no tap response at all otherwise).
   Faster than this card's own --duration-base (400ms, via the "all"
   transition above): a press needs to read as immediate. */
.about-card:active {
  transform: scale(0.98);
  transition: transform 100ms ease-out;
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: height var(--duration-base) var(--ease-smooth);
  z-index: 1;
}

.about-card:nth-child(1)::before {
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-light));
}

.about-card:nth-child(2)::before {
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-dark));
}

.about-card:nth-child(3)::before {
  background: linear-gradient(90deg, var(--clr-tertiary), var(--clr-tertiary-light));
}

/* Icon Container */
.about-card-icon-container {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  /* Golden Ratio step */
  transition: all var(--duration-base) var(--ease-smooth);
}

.about-card-icon-svg {
  width: 28px;
  height: 28px;
  transition: transform var(--duration-base) var(--ease-spring);
}

.about-card:nth-child(1) .about-card-icon-container {
  background: rgba(58, 138, 72, 0.08);
  border: 2px solid rgba(58, 138, 72, 0.12);
  color: var(--clr-primary);
}

.about-card:nth-child(2) .about-card-icon-container {
  background: rgba(217, 123, 42, 0.08);
  border: 2px solid rgba(217, 123, 42, 0.12);
  color: var(--clr-accent-dark);
}

.about-card:nth-child(3) .about-card-icon-container {
  background: rgba(224, 122, 95, 0.08);
  border: 2px solid rgba(224, 122, 95, 0.12);
  color: var(--clr-tertiary);
}

.about-card h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  color: var(--clr-primary-dark);
  margin-bottom: 18px;
  /* Golden Ratio step (18px heading margin -> 30px icon margin) */
  font-weight: 700;
  transition: color var(--duration-base) var(--ease-smooth);
}

.about-card p {
  font-size: var(--fs-sm);
  color: var(--clr-gray-500);
  line-height: 1.7;
  margin-bottom: 0;
  /* Clean end since link is removed */
  flex-grow: 1;
}

/* Hover States */
@media (hover: hover) and (pointer: fine) {
.about-card:hover {
  transform: translateY(-8px);
  background: var(--clr-white);
}

.about-card:nth-child(1):hover {
  border-color: rgba(58, 138, 72, 0.55);
  box-shadow: 0 15px 35px rgba(58, 138, 72, 0.08);
}

.about-card:nth-child(2):hover {
  border-color: rgba(217, 123, 42, 0.55);
  box-shadow: 0 15px 35px rgba(217, 123, 42, 0.08);
}

.about-card:nth-child(3):hover {
  border-color: rgba(224, 122, 95, 0.55);
  box-shadow: 0 15px 35px rgba(224, 122, 95, 0.08);
}

.about-card:hover::before {
  height: 6px;
}

.about-card:hover .about-card-icon-container {
  border-color: transparent;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.about-card:nth-child(1):hover .about-card-icon-container {
  background: var(--clr-primary);
  color: var(--clr-white);
}

.about-card:nth-child(2):hover .about-card-icon-container {
  background: var(--clr-accent);
  color: var(--clr-white);
}

.about-card:nth-child(3):hover .about-card-icon-container {
  background: var(--clr-tertiary);
  color: var(--clr-white);
}

.about-card:hover .about-card-icon-svg {
  transform: scale(1.08) rotate(15deg);
}

.about-card:hover h3 {
  color: var(--clr-primary);
}

.about-card:nth-child(2):hover h3 {
  color: var(--clr-accent);
}

.about-card:nth-child(3):hover h3 {
  color: var(--clr-tertiary);
}
}

/* ============================================
   IMPACT SECTION
   ============================================ */
.impact {
  background: linear-gradient(150deg, var(--clr-primary-deeper) 0%, var(--clr-primary-dark) 50%, var(--clr-primary) 100%);
  color: var(--clr-white);
  position: relative;
  overflow: hidden;
}

.impact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.impact::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 123, 42, 0.15) 0%, transparent 60%);
}

.impact .section-header h2 {
  color: var(--clr-white);
}

.impact .section-header h2::after {
  background: linear-gradient(90deg, var(--clr-accent), rgba(255, 255, 255, 0.5));
}

.impact .section-header p {
  color: rgba(255, 255, 255, 0.75);
}

/* --- WEF GLOBALLY SECTION (Light-themed & Split Layout) --- */
.wef-globally {
  background: var(--clr-off-white) !important;
  color: var(--clr-gray-700) !important;
  padding: var(--space-24) 0;
}

/* Override title styles inside the text column */
.globally-text-side h2 {
  font-size: var(--fs-3xl);
  color: var(--clr-primary-dark);
  font-weight: 800;
  margin-bottom: var(--space-4);
  position: relative;
  padding-bottom: var(--space-2);
  display: inline-block;
}

.globally-text-side h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-light));
  border-radius: var(--radius-full);
}

/* Split layout grid: Left text, Right map */
.globally-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  grid-template-areas: "text map";
  gap: var(--space-24);
  align-items: stretch;
  margin-bottom: var(--space-24);
}

.globally-text-side {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  text-align: left;
  height: 100%;
}

.globally-text-side p {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--clr-gray-600);
  margin: 0;
  text-align: justify;
}

/* Stats grid within the text side (2x2 layout) */
.globally-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* Stays 2x2 on phones - the single-column stack made each card a
   ~250px-tall box around a 100px icon, 1000px+ for four numbers. */
@media (max-width: 576px) {
  .globally-stats-grid {
    gap: var(--space-2);
    margin-top: var(--space-6);
  }

  .wef-globally .impact-card {
    padding: var(--space-6) var(--space-2) !important;
  }

  .wef-globally .impact-card-icon {
    font-size: 52px !important;
  }

  .wef-globally .impact-number {
    font-size: 1.6rem !important;
  }

  .wef-globally .impact-label {
    font-size: 13px !important;
    line-height: 1.3;
  }
}

.globally-map-side {
  grid-area: map;
  position: relative;
  z-index: 10;
  height: 100%;
}

.globally-map-wrapper {
  position: relative;
  cursor: zoom-in;
  transition: all var(--duration-base) var(--ease-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
.globally-map-wrapper:hover {
  transform: scale(1.015) translateY(-2px);
}
}

.globally-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.map-caption {
  margin-top: var(--space-2);
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  color: var(--clr-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.globally-map-wrapper:hover .map-caption {
  color: var(--clr-primary);
}
}

/* Light theme overrides for impact cards in WEF Globally */
.wef-globally .impact-card {
  background: var(--clr-white) !important;
  border: 1px solid var(--clr-gray-200) !important;
  color: var(--clr-gray-700) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  padding: var(--space-10) var(--space-4) !important;
}

@media (hover: hover) and (pointer: fine) {
.wef-globally .impact-card:hover {
  background: var(--clr-white) !important;
  border-color: var(--clr-primary-light) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-6px);
}
}

.wef-globally .impact-card-icon {
  background: transparent !important;
  color: var(--clr-primary-dark) !important;
  font-size: 100px !important;
  margin-bottom: var(--space-2) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.wef-globally .impact-number {
  color: var(--clr-primary-dark) !important;
  font-size: clamp(1.8rem, 3vw, var(--fs-2xl)) !important;
  font-weight: 800;
  margin-bottom: 0;
}

.wef-globally .impact-label {
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm) !important;
  color: var(--clr-gray-500) !important;
  opacity: 0.9 !important;
}

/* Responsive grid layouts */
@media (max-width: 992px) {
  .globally-main-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "map";
    gap: var(--space-14);
  }
}

.impact-card {
  text-align: center;
  padding: var(--space-14) var(--space-6);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.impact-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
}
}

.impact-card-icon {
  font-size: 100px;
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.impact-number {
  font-family: var(--ff-heading);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--clr-accent-light);
  line-height: 1;
}

/* The label comes first, above its number. */
.impact-label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* ============================================
   WHAT WE DO (Projects)
   ============================================ */
.projects {
  background: var(--clr-off-white);
  position: relative;
}

.projects::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -200px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-primary-lighter) 0%, transparent 70%);
  opacity: 0.3;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-14);
}

.project-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-base) var(--ease-smooth);
  border: 1px solid var(--clr-gray-200);
  text-decoration: none;
  /* Disables default link underline */
  display: block;
  /* Ensures block-level container styling */
}

/* Instant press feedback for touch - see the identical comment on
   .about-card:active just above for why this needs its own fast
   transition rather than the card's own (--duration-base) one. */
.project-card:active {
  transform: scale(0.98);
  transition: transform 100ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
.project-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
}

.project-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.project-card:hover .project-card-image img {
  transform: scale(1.08);
}
}

.project-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  color: var(--clr-white);
  padding: 5px 16px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.project-card-body {
  padding: var(--space-10);
}

.project-card-body h3 {
  font-size: var(--fs-lg);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-2);
}

.project-card-body p {
  font-size: var(--fs-sm);
  color: var(--clr-gray-500);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

/* ============================================
   GALLERY
   ============================================ */
.gallery {
  background: var(--clr-white);
  position: relative;
  overflow: hidden;
}

.gallery::before {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-accent-subtle) 0%, transparent 70%);
  opacity: 0.4;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}

.gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.gallery-item:hover img {
  transform: scale(1.08);
}
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 46, 28, 0.75), transparent 50%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-smooth);
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
}

@media (hover: hover) and (pointer: fine) {
.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}
}

/* Touch devices have no persistent :hover, so captions would otherwise
   never be visible — show them by default there instead of on hover. */
@media (hover: none) {
  .gallery-item-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(15, 46, 28, 0.75), transparent 65%);
  }
}

.gallery-item-overlay span {
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-base);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-smooth);
  backdrop-filter: blur(8px);
}

.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

/* The image is sized so the prev/next arrows always have their own gutter.

   It was max-width: 90vw, which leaves 5vw of clear space on each side. The
   arrows are 52px wide and sit at left/right: 20px, so they need 72px. Below
   roughly 1440px the two overlap and the arrow is drawn on top of the photo —
   at 390px it covers 53px of it. That is the "prev/next appearing over the
   image" problem; the buttons were always centred at the sides, there was
   simply no room reserved for them.

   160px = 72px of arrow reach on each side, plus a little breathing space.
   The image now shrinks instead of sliding under the controls, so the arrows
   stay clear of it at every width. max-height is unchanged, so tall portrait
   images are unaffected — they were never the case that broke.

   min() keeps the original 90vw cap in play. Using the calc() alone would let
   the image grow PAST its previous limit on a wide monitor — at 2560px it
   would allow 2400px where 90vw was 2304px — quietly enlarging photos on
   desktop while fixing phones. Whichever constraint is tighter wins:
     390px  -> min(351, 230)  = 230   (gutter honoured)
     1440px -> min(1296, 1280) = 1280 (gutter honoured)
     2560px -> min(2304, 2400) = 2304 (unchanged from before) */
.lightbox img {
  max-width: min(90vw, calc(100vw - 160px));
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

/* On a phone, reserving 160px of a 390px screen would leave the photo barely
   larger than the buttons. The arrows shrink and tuck closer to the edge
   instead, which keeps them comfortably tappable (40px still clears the 24px
   WCAG AA minimum) while giving the image back most of the width. */
@media (max-width: 640px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .lightbox img {
    max-width: min(90vw, calc(100vw - 112px));
  }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--clr-white);
  font-size: var(--fs-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) var(--ease-smooth);
  backdrop-filter: blur(10px);
}

@media (hover: hover) and (pointer: fine) {
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--clr-white);
  font-size: var(--fs-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) var(--ease-smooth);
  backdrop-filter: blur(10px);
}

@media (hover: hover) and (pointer: fine) {
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  background: var(--clr-off-white);
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clr-primary-lighter) 0%, transparent 70%);
  opacity: 0.2;
  transform: translateX(-50%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-18);
  align-items: start;
}

.contact-info {
  padding-right: var(--space-14);
}

.contact-info h3 {
  font-size: var(--fs-2xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-4);
}

.contact-info>p {
  color: var(--clr-gray-500);
  margin-bottom: var(--space-14);
  line-height: 1.8;
}

.contact-detail {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.contact-detail:hover {
  transform: translateX(5px);
}
}

.contact-detail-icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, var(--clr-primary-lighter), rgba(92, 184, 112, 0.15));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
.contact-detail:hover .contact-detail-icon {
  transform: scale(1.08);
}
}

.contact-detail-text h4 {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--clr-gray-900);
  margin-bottom: 2px;
}

.contact-detail-text p {
  font-size: var(--fs-sm);
  color: var(--clr-gray-500);
}

.contact-form {
  background: var(--clr-white);
  padding: var(--space-14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--clr-gray-200);
}

.form-group {
  margin-bottom: var(--space-6);
}

.form-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-gray-700);
  margin-bottom: var(--space-2);
  font-family: var(--ff-heading);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--clr-gray-700);
  background: var(--clr-white);
  transition: all var(--duration-fast) var(--ease-smooth);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--clr-primary);
  background: var(--clr-white);
  box-shadow: 0 0 0 4px rgba(58, 138, 72, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* --- Contact / volunteer form result + validation -------------------- */

/* The single place a submission result appears, whether it was written by
   the server (no-JS redirect back with ?form=…) or by the fetch() in
   js/main.js. Sits at the top of the form and is a live region, so the
   outcome is announced rather than only shown. */
.form-status {
  padding: 14px 18px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.form-status--success {
  background: var(--clr-primary-lighter);
  border-color: rgba(58, 138, 72, 0.35);
  color: var(--clr-primary-dark);
}

.form-status--error {
  background: #fdecec;
  border-color: rgba(224, 36, 36, 0.3);
  color: var(--clr-error);
}

.form-status--pending {
  background: var(--clr-gray-100);
  border-color: var(--clr-gray-200);
  color: var(--clr-gray-700);
}

/* Per-field message, revealed only when the server rejects that field. */
.form-error {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--clr-error);
}

.form-group input[aria-invalid='true'],
.form-group textarea[aria-invalid='true'],
.form-group select[aria-invalid='true'] {
  border-color: var(--clr-error);
}

/* Honeypot. Moved off-screen rather than display:none or hidden — some bots
   skip fields the CSS visibly hides, and this stays in the DOM looking like
   an ordinary input to anything that is not rendering the stylesheet.
   aria-hidden and tabindex="-1" in the markup keep it away from real
   visitors; nothing here should ever be seen or focused. */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Defensive only: aria-hidden, tabindex="-1" and .form-hp above already
   make this field unreachable through any normal interaction (not
   visible, not tab-reachable, not announced), so its font-size can't
   actually cause an iOS zoom-on-focus in practice. Belt-and-suspenders
   in case some future assistive tool or browser extension ever focuses
   a clipped element anyway. */
.form-hp input {
  font-size: 16px;
}

/* Visually hidden, still read aloud.

   This existed only in admin/assets/css/admin.css, so the class was silently
   inert on the public site. The footer newsletter label used it and therefore
   rendered as visible text INSIDE the flex row, taking a share of the width
   and squeezing the email input — the "email field is too wide" problem was
   really a stray label sitting next to it.

   Same technique as .form-hp above, but this content is meant to be announced,
   so it must not use display:none or visibility:hidden — both remove it from
   the accessibility tree, which would defeat the point of labelling. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--clr-gray-900);
  color: rgba(255, 255, 255, 0.65);
  padding: var(--space-24) 0 var(--space-10);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary-light), var(--clr-primary-dark));
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
}

.footer-about {
  padding-right: var(--space-14);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.footer-logo img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-logo span {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--clr-white);
}

.footer-about p {
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.footer h4 {
  font-size: var(--fs-base);
  color: var(--clr-white);
  margin-bottom: var(--space-6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  padding-bottom: var(--space-4);
}

.footer h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-light));
  border-radius: var(--radius-full);
}

/* .link-disabled: a footer link to a page switched off in the admin. */
.footer-links a,
.footer-links .link-disabled {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
  transition: all var(--duration-fast) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.footer-links a:hover {
  color: var(--clr-primary-light);
  padding-left: 8px;
}
}

/* Measured 32px tall (var(--space-1) padding x2 + line-height) - under the
   44px touch-target minimum, on links every page's footer repeats. Scoped
   to mobile rather than changing every viewport: a mouse doesn't need the
   extra hit area, and shrinking desktop's tighter footer link spacing back
   down would be an unrelated visual change nobody asked for. */
@media (max-width: 768px) {
  .footer-links a,
  .footer-links .link-disabled {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }
}

.footer-newsletter p {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

.footer-newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.footer-newsletter-form input {
  flex: 1;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--clr-white);
  font-family: var(--ff-body);
  /* Was var(--fs-sm) = 14px. iOS Safari zooms the page on focus for any
     input under 16px and does not zoom back out on blur - this is the
     actual bug that font-size fixes, not a design preference. */
  font-size: var(--fs-base);
  outline: none;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.footer-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.footer-newsletter-form input:focus {
  border-color: var(--clr-primary);
  background: rgba(255, 255, 255, 0.1);
}

.footer-newsletter-form button {
  padding: 12px 20px;
  background: var(--clr-primary-dark);
  color: var(--clr-white);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-weight: 600;
  transition: all var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.footer-newsletter-form button:hover {
  background: var(--clr-primary);
  transform: translateY(-2px);
}
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
}

.footer-bottom-info {
  max-width: 700px;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: var(--space-4);
}

.footer-social a {
  /* Was 42px - 2px under the 44px touch-target minimum. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.footer-social a:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(58, 138, 72, 0.3);
}
}

/* ============================================
   DONATE SECTION
   ============================================ */
.donate-section {
  background: linear-gradient(150deg, var(--clr-primary-deeper) 0%, var(--clr-primary-dark) 50%, var(--clr-primary) 100%);
  color: var(--clr-white);
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0;
}

.donate-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.donate-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-24);
  align-items: center;
  position: relative;
  z-index: 10;
}

.donate-info-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.donate-info-side h2 {
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  color: var(--clr-white);
  font-weight: 800;
  position: relative;
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-1);
  display: inline-block;
}

.donate-info-side h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-light));
  border-radius: var(--radius-full);
}

.donate-main-desc {
  font-size: var(--fs-md);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-6);
}

.donate-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.donate-feature-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.donate-feature-icon {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.08);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.donate-feature-text h3 {
  font-size: var(--fs-md);
  color: var(--clr-white);
  font-weight: 700;
  margin-bottom: 2px;
}

.donate-feature-text p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Action Card (Interactive Select) */
.donate-action-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--space-18) var(--space-14);
  box-shadow: var(--shadow-2xl), 0 20px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-align: left;
}

.donate-action-card h3 {
  font-size: var(--fs-xl);
  color: var(--clr-white);
  font-weight: 800;
  margin: 0;
}

.card-prompt {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.donate-frequency-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  padding: 4px;
}

.donate-frequency-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  padding: 10px 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-smooth);
}

/* Gated (unlike most :hover rules in this file - see docs/CONTEXT.md
   defect #5) so it doesn't stick after a tap on touch devices. New rules
   get this from the start even while the existing 115 remain a deferred,
   dedicated pass. */
@media (hover: hover) and (pointer: fine) {
  .donate-frequency-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--clr-white);
  }
}

.donate-frequency-tab.active {
  background: var(--clr-accent);
  color: var(--clr-primary-dark);
  box-shadow: 0 4px 15px rgba(224, 169, 109, 0.4);
}

.donate-amount-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
}

.donate-amount-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--clr-white);
  padding: 12px 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.donate-amount-tab:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
}

.donate-amount-tab.active {
  background: var(--clr-accent);
  border-color: var(--clr-accent-light);
  color: var(--clr-primary-dark);
  box-shadow: 0 4px 15px rgba(224, 169, 109, 0.4);
}

.donate-amount-custom-toggle {
  width: 100%;
  margin-top: var(--space-2);
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  padding: 11px 0;
  /* Measured ~40px tall - under the 44px touch-target minimum. */
  min-height: 44px;
  font-family: var(--ff-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-smooth);
}

.donate-amount-custom-toggle.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--clr-accent-light);
  border-style: solid;
  color: var(--clr-white);
}

@media (hover: hover) and (pointer: fine) {
  .donate-amount-custom-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--clr-accent-light);
    border-style: solid;
    color: var(--clr-white);
  }
}

.donate-custom-amount {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--clr-accent-light);
  border-radius: var(--radius-md);
  padding: 4px 4px 4px 18px;
  transition: box-shadow var(--duration-fast) var(--ease-smooth);
}

.donate-custom-amount:focus-within {
  box-shadow: 0 0 0 3px rgba(230, 145, 73, 0.35);
}

.donate-custom-amount.active {
  display: flex;
}

.donate-custom-prefix {
  color: var(--clr-accent-light);
  font-weight: 700;
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
}

.donate-custom-amount input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 11px 8px;
}

.donate-custom-amount input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.donate-custom-amount input::-webkit-outer-spin-button,
.donate-custom-amount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.donate-custom-amount input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.donation-impact-box {
  background: rgba(10, 28, 16, 0.25);
  border-left: 4px solid var(--clr-accent);
  padding: var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  min-height: 85px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.impact-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-accent-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#donation-impact-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

#donate-cta-btn {
  font-size: var(--fs-md);
  padding: 16px 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: block;
  box-shadow: 0 4px 15px rgba(224, 169, 109, 0.2);
}

.card-footer-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.4;
}

/* Responsive grid layouts */
@media (max-width: 992px) {
  .donate-main-grid {
    grid-template-columns: 1fr;
    gap: var(--space-14);
  }
}

@media (max-width: 480px) {
  /* Was grid-template-columns: repeat(3, 1fr) - correct for a full row of
     3, but 5 buttons in 3 columns leaves 2 left over, and CSS Grid can't
     center a partial row independently of the full ones above it (every
     row shares the same column tracks). Flexbox can: each wrapped line
     justifies its own content, so switching just this breakpoint to
     flex-wrap centers the leftover pair instead of stranding them at the
     left edge under an empty gap. flex: 0 0 <same width the grid's 1fr
     column already computed to> keeps every button - including the two
     that now wrap onto their own centered row - exactly the size they
     already were; only their position changes. */
  .donate-amount-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
  }

  .donate-amount-tab {
    flex: 0 0 calc((100% - 2 * var(--space-1)) / 3);
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --fs-5xl: 3rem;
    --fs-4xl: 2.4rem;
    --fs-3xl: 2rem;
    /* --fs-2xl (36px) never had a step here or at 768px below, unlike its
       3 larger siblings - every h2/h3 that uses it directly (.contact-info
       h3, "WEF Globally"-style subsection headings) stayed at full desktop
       size down to a phone. Same taper ratio as --fs-3xl's own step. */
    --fs-2xl: 1.9rem;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-14);
  }
}

/* .about-grid (Vision / Mission / Belief) used to be forced to 1 column by
   the shared max-width:1024px block above, all the way down from the
   desktop's 3 columns - a big empty-right-side jump with nothing between
   them, even though each card is only an icon + a short paragraph with
   plenty of room to spare at tablet width. Pulled out to its own two-step
   breakpoint instead: 3 columns stay all the way down to 900px, 2 columns
   from 768-899px (a deliberate 2-then-1 tablet-portrait layout, not 3
   cramped ones), and only below 768px - true phone width - does it drop
   to the single column every other grid on this page already uses there. */
@media (max-width: 899px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* Nav becomes a drawer well before the phone breakpoint below, because the
   desktop nav genuinely does not fit between ~769px and ~1279px: measured
   directly (Playwright, real viewport widths, not a guess) - at 1270px the
   "What We Do" link and the Donate button are still wrapping to 2 lines,
   and the header logo wraps to 2-3 lines down to 1270px too. 1280px is the
   first width where every nav item and the logo sit on one line, confirmed
   the same way; this breakpoint intentionally starts just above the exact
   measured wrap point rather than exactly at it, so small rendering
   differences between browsers/fonts can't reopen the gap. Previously the
   drawer only activated at max-width:768px, leaving every page's header
   broken (wrapped, clipped) across the entire 769-1279px band - every
   tablet in landscape and most small laptops. */
@media (max-width: 1099px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 60%;
    max-width: 260px;
    /* dvh (not svh): a drawer should track the visible area as the URL bar
       shows/hides, so its last item is always reachable rather than
       potentially sitting below a viewport that got taller. */
    height: 100dvh;
    background: var(--clr-primary-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--header-height) + var(--space-14)) var(--space-14) var(--space-14);
    gap: var(--space-4);
    transition: right var(--duration-base) var(--ease-smooth);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu>a,
  .nav-dropdown>.dropdown-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: var(--fs-md);
    padding: var(--space-2) 0;
  }

  /* Mobile dropdown — accordion style */
  .nav-dropdown {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    width: 100%;
  }

  .nav-dropdown>.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .nav-dropdown>.dropdown-toggle::after {
    content: '▼';
    font-size: 10px;
    margin-left: 8px;
    transition: transform 0.3s;
  }

  .nav-dropdown.active>.dropdown-toggle::after {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 var(--space-6);
    min-width: auto;
    border-radius: 0;
    display: none;
    /* hidden by default */
  }

  .nav-dropdown.active .dropdown-menu {
    display: flex;
  }

  .dropdown-menu::before,
  .dropdown-menu::after {
    display: none;
  }

  .dropdown-menu a {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 12px 0;
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  @media (hover: hover) and (pointer: fine) {
  .dropdown-menu a:hover {
    color: var(--clr-accent-light) !important;
  }
  }

  .dropdown-menu a::before {
    display: none;
  }

  .nav-donate {
    margin-top: var(--space-4);
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-smooth);
  }

  .mobile-overlay.active {
    opacity: 1;
    pointer-events: all;
  }
}

/* The drawer's readable-white-text rule just above loses a real fight in
   this specific band: a later, unconditional, page-wide rule ("SHARED SUB-
   PAGE CHROME", no media query at all - it styles the always-visible desktop
   nav row on inner pages with a light header) also sets `.nav-menu>a,
   .nav-dropdown>.dropdown-toggle { color: var(--clr-gray-700) !important }`.
   At equal specificity its later source position wins, so between 769px and
   1279px - the exact band this file has no other drawer-refinement layer
   for - the drawer showed dark-grey text on its dark-green background.
   Confirmed by direct measurement, contrast ~2:1. Below 769px this is moot:
   a later, more specific layer (the "MOBILE-ONLY RESPONSIVE MASTER STYLES"
   section further down, still max-width:768px) already wins there with its
   own white-background/near-black-text combination, so this fix is
   deliberately NOT widened to cover that range too - it would only re-win a
   fight that's already correctly settled for real phones and had no reason
   to be touched. #nav-menu (an ID) beats the class-only losing rule
   regardless of source order, without editing that rule's own job. */
@media (min-width: 769px) and (max-width: 1099px) {
  #nav-menu>a,
  #nav-menu .dropdown-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  #nav-menu .dropdown-menu a {
    color: rgba(255, 255, 255, 0.75) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-5xl: 2.4rem;
    --fs-4xl: 1.8rem;
    --header-height: 70px;
  }

  .section {
    padding: var(--space-18) 0;
  }

  .container {
    padding: 0 var(--space-6);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item:nth-child(1) {
    grid-column: span 2;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    text-align: center;
  }

  .header-logo-text span {
    white-space: nowrap;
  }

  .header-logo-text span:first-child {
    font-size: 14px;
  }

  .header-logo-text span:last-child {
    font-size: 9px;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-5xl: 1.8rem;
    --fs-3xl: 1.4rem;
  }

  .impact-card {
    padding: var(--space-6) var(--space-4);
  }

  .impact-number {
    font-size: var(--fs-2xl);
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-item:nth-child(1) {
    grid-column: span 2;
  }
}

/* Extra small screens */

/* ============================================
   Interactive ECD Map Styles
   ============================================ */

.map-section {
  padding: 0 0 var(--space-24) 0;
}

.map-card {
  background: var(--clr-white);
  padding: var(--space-18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--clr-gray-200);
}

.map-header {
  margin-bottom: var(--space-10);
}

.map-header h2 {
  font-size: var(--fs-2xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-2);
  font-family: var(--ff-heading);
}

.map-header p {
  color: var(--clr-gray-500);
  font-size: var(--fs-base);
  line-height: 1.7;
}

/* Map + controls layout: the map and its filter/legend sidebar stack
   vertically by default (unchanged from before - there's no room to put
   them side by side under ~1024px), and become a two-column layout with
   the controls in a single side panel at that width and up, per the
   client's ask to get the "options and buttons" out of a long stack
   below the map and into one organized place beside it. */
.map-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.map-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.map-sidebar .map-controls-panel,
.map-sidebar .map-legend-filters {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .map-body {
    flex-direction: row;
    align-items: flex-start;
  }

  #map {
    flex: 1;
    min-width: 0;
  }

  .map-sidebar {
    flex: 0 0 280px;
    /* Stays level with the map while scrolling past it, rather than
       trailing off the bottom of a much taller map on a short sidebar. */
    position: sticky;
    top: calc(var(--header-height, 76px) + var(--space-4));
    max-height: calc(100vh - var(--header-height, 76px) - var(--space-8));
    overflow-y: auto;
  }

  .map-legend-filters {
    padding-top: var(--space-4);
  }

  .legend-filters-grid {
    flex-direction: column;
  }

  .legend-filter-btn {
    width: 100%;
    justify-content: space-between;
  }
}

.map-no-results {
  background: var(--clr-gray-50);
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--clr-gray-600);
  line-height: 1.5;
}

.map-no-results strong {
  color: var(--clr-primary-dark);
}

#map {
  width: 100%;
  height: 500px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-gray-300);
  box-shadow: var(--shadow-sm);
  z-index: 1;
  /* Ensure map stays below header overlay */
}

/* Custom Marker Styling */
.custom-marker-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.marker-pin {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
.marker-pin:hover {
  transform: scale(1.2) translateY(-2px);
  filter: drop-shadow(0 6px 12px rgba(15, 46, 28, 0.3));
}
}

/* ── Map Controls & Donor Search ─────────────── */
.map-controls-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--clr-gray-50);
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: var(--space-10);
}

.donor-search-label {
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-gray-700);
  white-space: nowrap;
}

.donor-select-wrapper {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.donor-select-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-gray-500);
  pointer-events: none;
}

.donor-select-input {
  width: 100%;
  appearance: none;
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-sm);
  padding: 10px 14px 10px 36px;
  /* Measured 42px tall - 2px under the 44px touch-target minimum. */
  min-height: 44px;
  font-family: var(--ff-body);
  /* Was 14px - iOS zooms the page on focus below 16px and this field is
     directly on the donation path, which is the conversion path. */
  font-size: 16px;
  color: var(--clr-gray-800);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

@media (hover: hover) and (pointer: fine) {
.donor-select-input:hover {
  border-color: var(--clr-gray-400);
}
}

.donor-select-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(14, 97, 29, 0.15);
}

/* ── Category Filter Legend ──────────────────── */
.map-legend-filters {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--clr-gray-200);
}

.legend-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.legend-filters-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legend-filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Individual filter button */
.legend-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--clr-gray-200);
  background: var(--clr-white);
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-gray-700);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
.legend-filter-btn:hover {
  border-color: var(--clr-gray-400);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
}

.legend-filter-btn:active {
  transform: translateY(0);
}

/* Inactive (filtered-out) state */
.legend-filter-btn.legend-filter-inactive {
  opacity: 0.4;
  border-color: var(--clr-gray-200);
  background: var(--clr-gray-100);
}

@media (hover: hover) and (pointer: fine) {
.legend-filter-btn.legend-filter-inactive:hover {
  opacity: 0.7;
}
}

/* Color dot */
.legend-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 3px currentColor;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
.legend-filter-btn:hover .legend-filter-dot {
  transform: scale(1.2);
}
}

.legend-filter-inactive .legend-filter-dot {
  opacity: 0.5;
  box-shadow: none;
}

/* Label text */
.legend-filter-label {
  white-space: nowrap;
}

/* Count badge */
.legend-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--clr-gray-100);
  color: var(--clr-gray-600);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ff-body);
  line-height: 1;
}

/* "All Centers" special button */
.legend-filter-all {
  font-weight: 700;
  border-color: var(--clr-primary-dark);
  color: var(--clr-primary-dark);
}

.legend-filter-all.legend-filter-active-all {
  background: var(--clr-primary-dark);
  color: var(--clr-white);
  border-color: var(--clr-primary-dark);
}

@media (hover: hover) and (pointer: fine) {
.legend-filter-all:hover {
  box-shadow: 0 2px 10px rgba(14, 97, 29, 0.2);
}
}

/* Leaflet's own controls (zoom, layers, attribution) in the site's radii and
   greys rather than the library's black, #333, #0078A8 and 2/4/5px corners.
   Scoped to #map so these win over leaflet.css, which map.js injects after
   this stylesheet. */
#map .leaflet-bar,
#map .leaflet-control-layers {
  border-radius: var(--radius-md);
}

#map .leaflet-bar a {
  color: var(--clr-gray-700);
}

#map .leaflet-bar a:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

#map .leaflet-bar a:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

#map .leaflet-control-attribution,
#map .leaflet-control-attribution a {
  color: var(--clr-gray-600);
}

/* New Minimal Elegant Popup Layout */
.custom-leaflet-popup .leaflet-popup-content-wrapper {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.05);
  border: none;
  padding: 0;
  font-family: var(--ff-body);
  color: var(--clr-gray-700);
  overflow: hidden;
}

.custom-leaflet-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  min-width: 260px;
  max-width: 300px;
}

.custom-leaflet-popup .leaflet-popup-tip {
  background: var(--clr-white);
  box-shadow: none;
}

.eclc-popup-card {
  display: block;
}

.eclc-popup-topbar {
  height: 6px;
  width: 100%;
}

.eclc-popup-content {
  padding: 18px;
}

.eclc-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}

.eclc-title {
  font-family: var(--ff-heading);
  font-size: 18px;
  color: var(--clr-gray-900);
  margin: 0 0 16px 0;
  font-weight: 700;
  line-height: 1.2;
}

.eclc-details-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eclc-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--clr-gray-600);
  line-height: 1.4;
}

.eclc-detail-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
  color: var(--clr-gray-500);
}

.eclc-detail-item span {
  flex: 1;
}

/* Error message styling */
.map-error-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: var(--clr-gray-100);
  border-radius: var(--radius-md);
  color: var(--clr-gray-600);
  font-size: var(--fs-md);
  border: 1px dashed var(--clr-gray-300);
  text-align: center;
  padding: var(--space-10);
}

/* Mobile Responsiveness for Map */
@media (max-width: 768px) {

  .legend-filters-grid {
    gap: 8px;
  }

  .legend-filter-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .legend-filters-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {

  .legend-filter-label {
    display: none;
  }

  .legend-filter-btn {
    padding: 6px 8px;
    gap: 5px;
  }
}

/* ============================================
   PREMIUM REDESIGN ADDITIONS
   ============================================ */

/* --- Gradient + Slideshow Hero (No panel box) --- */
.hero-glass {
  position: relative;
  /* svh (not dvh): the smallest the viewport ever gets, so the hero never
     overflows and nothing shifts as the URL bar shows/hides mid-scroll -
     right for a first screen, wrong for anything meant to track chrome. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--clr-white);
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The change between photos: the incoming one fades in while settling
   from a slight zoom (106%) to full size, and the outgoing one drifts the
   other way as it fades out. On the slide itself, so it adds to the
   photo's own slow zoom or pan below instead of replacing it. The hero
   clips the overflow; reduced motion drops the movement (rule at the top
   of this file). */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease-in-out, transform 1.8s ease-in-out;
  will-change: opacity, transform;
}

.hero-slide.active {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

/* The photo being replaced stays solid underneath while the new one fades
   in over it (main.js adds .is-leaving for the length of the fade). Fading
   both at once let the off-white page behind show through mid-change, a
   pale wash of up to a quarter. */
.hero-slide.is-leaving {
  z-index: 1;
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Ken Burns background animations for each slide */
.hero-slide.anim-zoom-in.active img {
  animation: kbZoomIn 8s ease-in-out forwards;
}

.hero-slide.anim-zoom-out.active img {
  animation: kbZoomOut 8s ease-in-out forwards;
}

.hero-slide.anim-pan-left.active img {
  animation: kbPanLeft 8s ease-in-out forwards;
}

.hero-slide.anim-pan-right.active img {
  animation: kbPanRight 8s ease-in-out forwards;
}

@keyframes kbZoomIn {
  0% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1.1);
  }
}

@keyframes kbZoomOut {
  0% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1.02);
  }
}

@keyframes kbPanLeft {
  0% {
    transform: scale(1.1) translateX(0);
  }

  100% {
    transform: scale(1.1) translateX(-4%);
  }
}

@keyframes kbPanRight {
  0% {
    transform: scale(1.1) translateX(-4%);
  }

  100% {
    transform: scale(1.1) translateX(0);
  }
}

/* --- Content Container --- */
.hero-glass-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 20px);
  padding-bottom: 48px;
  width: 100%;
}

/* --- Floating Text Panel (No container box) --- */
.hero-glass-panel {
  max-width: 720px;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  position: relative;
}

.hero-glass-panel::before {
  content: '“';
  position: absolute;
  top: -45px;
  left: -55px;
  font-family: var(--ff-heading);
  font-size: 180px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  pointer-events: none;
  z-index: -1;
  animation: quoteFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes quoteFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translate(-15px, -15px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
}

@keyframes textSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-glass-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
  animation: textSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero-glass-heading {
  font-family: var(--ff-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--clr-white);
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(10, 28, 16, 0.3);
  text-wrap: balance;
  animation: textSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-glass-heading em {
  font-style: italic;
  background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.12em;
  display: inline-block;
  text-shadow: none;
}

.hero-text-slider {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  margin-bottom: 24px;
}

.hero-text-slide {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  visibility: hidden;
}

.hero-text-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* Staggered entrance animations for text slide elements */
.hero-text-slide .hero-glass-heading,
.hero-text-slide .hero-glass-desc {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-text-slide.active .hero-glass-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.hero-text-slide.active .hero-glass-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

/* --- Purpose Section (Gradient Background + iOS Blur + Compact Padding) --- */
.purpose-section {
  position: relative;
  background: linear-gradient(150deg, var(--clr-primary-deeper) 0%, var(--clr-primary-dark) 50%, var(--clr-primary) 100%);
  border-top: 1px solid var(--clr-primary-dark);
  border-bottom: 1px solid var(--clr-primary-dark);
  padding: var(--space-18) 0;
  overflow: hidden;
  z-index: 5;
}

.purpose-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
  /* Moved on top of the blur overlay to remain sharp and visible */
}

.purpose-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 36, 18, 0.45);
  /* Translucent overlay to blend the background gradient and blur */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  z-index: 1;
  pointer-events: none;
}

.purpose-container {
  position: relative;
  z-index: 3;
  /* Placed above texture for accessibility */
  text-align: center;
  max-width: 1200px;
  /* Expanded box size to allow two-line text wrapping */
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.purpose-badge {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--clr-primary-light);
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.purpose-text {
  font-family: var(--ff-heading);
  font-size: clamp(1.2rem, 3vw, var(--fs-2xl));
  font-weight: 900;
  line-height: 1.35;
  color: var(--clr-white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 auto;
  max-width: 1100px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.purpose-accent {
  font-weight: 900;
  font-style: italic;
  background: linear-gradient(135deg, var(--clr-primary-lighter), var(--clr-primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-shadow: none;
  padding-right: 0.12em;
  /* Expand clipping boundaries for italic slant */
  padding-bottom: 0.04em;
  /* Expand clipping boundaries for descenders */
  margin-right: -0.12em;
  /* Align text layout properly */
}

/* Responsive Line Break Helper */
.desktop-only-br {
  display: none;
}

@media (min-width: 992px) {
  .desktop-only-br {
    display: inline;
  }
}

.hero-glass-desc {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  margin-bottom: 36px;
  text-shadow: 0 1px 15px rgba(10, 28, 16, 0.2);
  animation: textSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.hero-glass-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  animation: textSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.btn-glass-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 36px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.btn-glass-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
}
}

/* Pause background slideshow Ken Burns animation on hover */
@media (hover: hover) and (pointer: fine) {
.hero-glass:hover .hero-slide.active img {
  animation-play-state: paused;
}
}

/* --- Slide Dots (iPhone Capsule Style) --- */
.hero-slide-dots {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 5;
  background: rgba(8, 20, 11, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-dot.active {
  width: 24px;
  border-radius: 100px;
  background: var(--clr-white);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* --- Hero Responsive Breakpoints --- */
@media (max-width: 1024px) {
  .hero-glass-panel {
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .hero-glass {
    min-height: 100svh;
    align-items: flex-end;
  }

  .btn-glass-primary,
  .btn-glass-secondary {
    justify-content: center;
    padding: 15px 24px;
  }

  .hero-slide-dots {
    margin-top: 0;
  }

  .hero-glass-panel::before {
    font-size: 110px;
    top: -30px;
    left: -25px;
  }
}

@media (max-width: 480px) {

  .hero-glass-panel::before {
    font-size: 80px;
    top: -20px;
    left: -15px;
  }
}

/* --- Premium Card Overrides --- */
.about-card,
.impact-card,
.project-card,
.donate-card,
.map-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-200);
  transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth), border-color var(--duration-fast);
  position: relative;
  overflow: hidden;
}

.about-card::before,
.impact-card::before,
.project-card::before,
.donate-card::before {
  display: none;
  /* Remove template blobs */
}

@media (hover: hover) and (pointer: fine) {
.about-card:hover,
.donate-card:hover,
.map-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary-light);
}
}

.about-card-icon-container,
.donate-card-icon {
  background: var(--clr-primary-lighter) !important;
  color: var(--clr-primary-dark) !important;
  border-radius: var(--radius-full);
  box-shadow: none !important;
}

.impact-card-icon {
  background: transparent !important;
  color: var(--clr-primary-dark) !important;
  border-radius: var(--radius-full);
  box-shadow: none !important;
}

.about-card-icon-svg {
  stroke: var(--clr-primary-dark) !important;
}

.project-card-image img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* --- Premium Navigation Overrides --- */
.header {
  transition: all var(--duration-base) var(--ease-smooth), background-color var(--duration-base) var(--ease-smooth);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  box-shadow: 0 8px 32px rgba(10, 28, 16, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.nav-dropdown>.dropdown-menu {
  border: 1px solid var(--clr-gray-200);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
}

.nav-dropdown>.dropdown-menu a {
  padding: 10px var(--space-4);
  font-weight: 500;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.nav-dropdown>.dropdown-menu a:hover {
  background-color: var(--clr-gray-100);
  color: var(--clr-primary-dark);
}
}

/* ============================================
   HONOR BOARD (OUR SPONSORS) SECTION
   ============================================ */
.honor-board-section {
  background: var(--clr-cream);
  padding: var(--space-24) 0;
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--clr-gray-200);
}

.honor-board-card {
  background: var(--clr-white);
  border: 3.5px solid rgba(14, 97, 29, 0.22);
  /* Thick green-tinted frame border to look like a real plaque */
  border-radius: var(--radius-lg);
  padding: var(--space-14) var(--space-10);
  /* Generous padding inside the board */
  box-shadow: var(--shadow-lg), 0 20px 40px rgba(10, 28, 16, 0.04);
}

.honor-board-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.honor-board-header h2 {
  font-family: var(--ff-heading);
  font-size: var(--fs-3xl);
  color: var(--clr-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.honor-board-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--clr-primary);
  border-radius: var(--radius-full);
}

.sponsor-group {
  margin-bottom: var(--space-14);
}

.sponsor-group:last-child {
  margin-bottom: 0;
}

.sponsor-group-header {
  text-align: center;
  margin-bottom: var(--space-10);
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.sponsor-group-header h3 {
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  color: var(--clr-primary-dark);
  margin-bottom: 10px;
  letter-spacing: 0;
  line-height: 1.45;
  font-weight: 800;
}

.sponsor-group-header p {
  font-size: var(--fs-sm);
  color: var(--clr-gray-500);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
  text-wrap: balance;
}

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.sponsor-tile {
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-200);
  /* Minimal 1px border outline as requested */
  border-radius: var(--radius-md);
  padding: 16px var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 96px;
  transition: all var(--duration-base) var(--ease-smooth);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.sponsor-tile:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

.sponsor-tile:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
.sponsor-tile:hover {
  transform: translateY(-2px);
  border-color: var(--clr-primary-light);
  box-shadow: 0 6px 16px rgba(14, 97, 29, 0.05);
}
}

.sponsor-name {
  font-size: clamp(0.8rem, 1.1vw, var(--fs-sm));
  font-weight: 700;
  color: var(--clr-primary-dark);
  line-height: 1.4;
  margin-bottom: 4px;
}

.sponsor-tile:not(:has(.sponsor-badge-tag)) .sponsor-name {
  margin-bottom: 0;
}

/* Honor Board "Show more" toggle (initHonorBoardExpand() in main.js).
   How many tiles show before this appears scales with viewport width -
   see COUNTS in that function - so a group with, say, 8 sponsors shows
   the button on a phone (capped at 3) but not on desktop (capped at 9,
   which already fits all 8). */
.honor-board-show-more {
  display: block;
  margin: var(--space-4) auto 0;
  padding: 10px 28px;
  min-height: 44px;
  background: transparent;
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius-full);
  color: var(--clr-primary-dark);
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-smooth);
}

.honor-board-show-more:active {
  transform: scale(0.96);
  transition: transform 100ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .honor-board-show-more:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
  }
}

.sponsor-badge-tag {
  display: inline-flex;
  align-items: center;
  background: var(--clr-primary-dark);
  color: var(--clr-white);
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(31, 79, 41, 0.3);
}

/* Responsive Overrides for Mobile */
@media (max-width: 576px) {
  .honor-board-section {
    padding: var(--space-14) 0;
  }

  .honor-board-card {
    padding: 30px var(--space-4) !important;
    /* Compact interior space on mobile */
    border-width: 2px !important;
    /* Proportional thinner border for mobile screens */
  }

  .sponsors-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    /* Compact 2-column list on mobile! */
    gap: 8px !important;
  }

  .sponsor-tile {
    padding: 12px 6px !important;
    min-height: 80px !important;
    border-radius: var(--radius-sm) !important;
  }

  .sponsor-name {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .sponsor-badge-tag {
    font-size: 8px !important;
    padding: 2px 6px !important;
  }
}

/* ============================================
   PROJECT UPDATES SECTION (GRID LAYOUT)
   ============================================ */
.project-updates {
  background: var(--clr-off-white);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.updates-grid-container {
  max-width: var(--max-width);
  margin: var(--space-14) auto 0;
  padding: 0 var(--space-6);
}

.updates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.updates-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.updates-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl), 0 20px 40px rgba(14, 97, 29, 0.08);
}
}

/* Card Elements */
.updates-card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.updates-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.updates-card:hover .updates-card-image img {
  transform: scale(1.04);
}
}

.updates-card-tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-family: var(--ff-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.tag-impact {
  background: var(--clr-primary-dark);
  color: var(--clr-white);
}

.tag-announcement {
  background: var(--clr-accent-dark);
  color: var(--clr-white);
}

.tag-education {
  background: var(--clr-info);
  color: var(--clr-white);
}

.tag-community {
  background: var(--clr-error);
  color: var(--clr-white);
}

.updates-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* The whole title shows (it was cut to three lines: "... See the...").
   The three-line minimum keeps short titles' summaries level with the
   others. */
.updates-card-body h3 {
  font-size: 16px;
  line-height: 1.45;
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-2);
  font-weight: 700;
  min-height: calc(3 * 1.45em);
  text-wrap: pretty;
}

.updates-card-body p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--clr-gray-500);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.updates-card-link {
  font-family: var(--ff-heading);
  font-size: 11px;
  font-weight: 800;
  /* --clr-accent is 3.90:1 on white - fails AA at this size. --clr-accent-text
     is the same hue, darkened to 6.24:1. */
  color: var(--clr-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-transform: uppercase;
  margin-top: auto;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.updates-card-link .arrow {
  transition: transform var(--duration-fast) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
.updates-card-link:hover {
  color: var(--clr-accent-light);
}

.updates-card-link:hover .arrow {
  transform: translateX(4px);
}
}

/* Responsive Styles */
@media (max-width: 992px) {
  .updates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .updates-grid-container {
    padding: 0 var(--space-4);
  }

  .updates-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .updates-card-image {
    height: 200px;
  }
}

/* ============================================
   WEF BEGINNINGS SECTION — Timeline Layout
   ============================================ */
.beginnings {
  background: var(--clr-white);
  padding: var(--space-24) 0;
  position: relative;
}

.beginnings-timeline {
  display: flex;
  gap: var(--space-6);
  position: relative;
  margin-top: var(--space-18);
  justify-content: space-between;
}

/* Timeline Horizontal Connecting Line */
.beginnings-timeline::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%;
  width: 75%;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary-light), var(--clr-accent-light));
  z-index: 1;
  border-radius: var(--radius-full);
}

.timeline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.step-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 4px solid var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-family: var(--ff-heading);
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-base) var(--ease-smooth);
  z-index: 3;
  position: relative;
  flex-shrink: 0;
}

.step-content {
  background: var(--clr-cream);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-base) var(--ease-smooth);
  height: 100%;
}

.step-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--clr-gray-600);
  margin: 0;
  text-align: left;
}

/* Hover Animations */
@media (hover: hover) and (pointer: fine) {
.timeline-step:hover .step-badge {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
  transform: scale(1.1);
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(14, 97, 29, 0.2);
}

.timeline-step:hover .step-content {
  background: var(--clr-white);
  border-color: var(--clr-primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}
}

/* Responsive Viewports */
@media (max-width: 992px) {
  .beginnings-timeline {
    flex-direction: column;
    gap: var(--space-10);
    padding-left: 0;
  }

  .beginnings-timeline::before {
    top: 30px;
    bottom: 30px;
    left: 28px;
    width: 4px;
    height: auto;
  }

  .timeline-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: var(--space-6);
    padding-left: 80px;
  }

  .step-badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 0;
    margin-left: 0;
    flex-shrink: 0;
  }

  .step-content {
    padding: var(--space-4) var(--space-6);
    width: 100%;
  }
}

@media (max-width: 576px) {
  .beginnings-timeline::before {
    left: 24px;
  }

  .timeline-step {
    padding-left: 68px;
  }

  .step-badge {
    width: 52px;
    height: 52px;
    font-size: 20px;
    border-width: 3px;
  }
}

/* ============================================
   FEATURED VIDEOS (PART OF WEF BEGINNINGS)
   ============================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
  margin-top: 0;
}

.video-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-gray-200);
  transition: transform var(--duration-base) var(--ease-smooth),
    box-shadow var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl), 0 20px 40px rgba(14, 97, 29, 0.06);
}
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-info {
  padding: var(--space-4) var(--space-6);
  background: var(--clr-white);
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.video-info h3 {
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--clr-primary-dark);
  margin: 0;
  font-weight: 700;
}

/* Responsive Viewports */

/* ============================================
   OUR PARTNERS SECTION (Logo Marquee)
   ============================================ */
.partners-section {
  background: var(--clr-white);
  padding: var(--space-14) 0;
  border-top: 1px solid var(--clr-gray-100);
  border-bottom: 1px solid var(--clr-gray-100);
  overflow: hidden;
}

/* Infinite Marquee Track */
.partners-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  margin-top: var(--space-6);
}

/* Left & Right gradient masks for smooth fade-in/fade-out edge effect */
.partners-marquee::before,
.partners-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.partners-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--clr-white) 0%, transparent 100%);
}

.partners-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--clr-white) 0%, transparent 100%);
}

.partners-track {
  display: flex;
  width: calc(240px * 12);
  /* 6 logos duplicated once = 12 total */
  animation: marqueeScroll 25s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
.partners-track:hover {
  animation-play-state: paused;
  /* Pause scrolling on hover! */
}
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-240px * 6));
    /* Scroll exactly half the track length (6 logos) */
  }
}

.partner-logo {
  width: 240px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--space-6);
  transition: transform var(--duration-base) var(--ease-smooth);
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.55);
  transition: filter var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
.partner-logo:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}
}

/* ============================================
   OUR TEAM SECTION
   ============================================ */
.team-page-header {
  position: relative;
  padding: calc(var(--header-height) + var(--space-24)) 0 var(--space-18);
  background: linear-gradient(160deg, var(--clr-primary-deeper) 0%, var(--clr-primary-dark) 50%, var(--clr-primary) 100%);
  color: var(--clr-white);
  text-align: center;
  overflow: hidden;
}

.team-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.team-page-header h1 {
  font-size: var(--fs-4xl);
  color: var(--clr-white);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.team-page-header p {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.85);
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.team-section {
  background-color: var(--clr-off-white);
  padding: var(--space-24) 0;
}

.team-group-header {
  margin-top: var(--space-24);
  margin-bottom: var(--space-14);
  text-align: center;
}

.team-group-header:first-child {
  margin-top: 0;
}

.header-fieldset {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--clr-gray-200);
  border-radius: var(--radius-lg);
  padding: 16px 32px;
  position: relative;
  margin: 0 auto;
}

.header-fieldset-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--clr-off-white);
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-accent-text);
}

.team-group-header h2 {
  font-size: var(--fs-xl);
  color: var(--clr-primary-dark);
  font-weight: 700;
  margin: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-10);
  margin-top: 0;
}

.team-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-gray-200);
  transition: transform var(--duration-base) var(--ease-spring),
    box-shadow var(--duration-base) var(--ease-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--clr-gray-100);
}

@media (hover: hover) and (pointer: fine) {
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 16px 40px rgba(14, 97, 29, 0.08);
}
}

.team-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--clr-gray-100);
  background-image: linear-gradient(135deg, var(--clr-gray-100) 25%, var(--clr-gray-200) 50%, var(--clr-gray-100) 75%);
  background-size: 400% 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-smooth);
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
.team-card:hover .team-card-image img {
  transform: scale(1.05);
}
}

/* Fallback state when image is not present or error */
.team-card-image::after {
  content: 'Photo Coming Soon';
  position: absolute;
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  color: var(--clr-gray-500);
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.6;
  z-index: 0;
}

.team-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
  align-items: center;
}

.team-card-body h3 {
  font-size: var(--fs-lg);
  color: var(--clr-gray-900);
  margin-bottom: var(--space-1);
  transition: color var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.team-card:hover .team-card-body h3 {
  color: var(--clr-primary);
}
}

.team-role {
  font-size: var(--fs-sm);
  color: var(--clr-accent-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  display: block;
}

.team-bio {
  display: none;
  text-align: left;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--clr-gray-600);
}

#team-modal-bio {
  font-size: 15px;
  line-height: 1.7;
}

.team-read-more {
  background: none;
  border: none;
  padding: 0;
  margin-top: 15px;
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  transition: color var(--duration-fast);
}

.team-read-more span {
  transition: transform var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.team-read-more:hover {
  color: var(--clr-primary-dark);
}

.team-read-more:hover span {
  transform: translateX(4px);
}
}


/* Team Modal */
.team-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  /* Was a literal 99999. Normalized to the modal tier - nothing else in the
     stylesheet exceeds --z-modal (2000), so this is behaviorally identical,
     just no longer a magic number nobody could explain. */
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base), visibility var(--duration-base);
  padding: var(--space-4);
}

.team-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.team-modal-content {
  background-color: var(--clr-white);
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: var(--radius-xl);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  transform: translateY(20px);
  transition: transform var(--duration-base) var(--ease-spring);
  border-top: 6px solid var(--clr-primary);
}

.team-modal-overlay.active .team-modal-content {
  transform: translateY(0);
}

.team-modal-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-10);
  border-bottom: 1px solid var(--clr-gray-200);
  background: var(--clr-gray-50);
  border-radius: calc(var(--radius-xl) - 6px) calc(var(--radius-xl) - 6px) 0 0;
}

.team-modal-back {
  background: transparent;
  border: none;
  font-size: 28px;
  color: var(--clr-gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.team-modal-back:hover {
  color: var(--clr-gray-900);
}
}

.team-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  color: var(--clr-gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.team-modal-close:hover {
  color: var(--clr-gray-900);
}
}

.team-modal-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .team-modal-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .team-modal-image {
    width: 40%;
    flex-shrink: 0;
    padding: var(--space-14);
    position: sticky;
    top: 0;
  }

  .team-modal-body {
    width: 60%;
    padding: var(--space-14) var(--space-14) var(--space-14) 0;
  }
}

.team-modal-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 4px solid var(--clr-white);
}

.team-modal-body {
  padding: var(--space-14);
  text-align: left;
}

.team-modal-body h3 {
  font-size: var(--fs-2xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-1);
  position: relative;
  display: inline-block;
}

.team-modal-body h3::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
  border-radius: var(--radius-full);
}

.team-modal-body .team-role {
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  display: block;
}

/* Success Stories Grid */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-14);
  margin-top: var(--space-10);
}

.story-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base), box-shadow var(--duration-base);
  border: 1px solid var(--clr-gray-200);
  display: flex;
  flex-direction: column;
}

@media (hover: hover) and (pointer: fine) {
.story-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
}

.story-content {
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.story-meta {
  font-size: 13px;
  color: var(--clr-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: var(--space-4);
  font-family: var(--ff-heading);
}

.story-title {
  font-size: var(--fs-xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-4);
  line-height: 1.4;
  font-family: var(--ff-heading);
}

.story-read-more {
  margin-top: auto;
  font-weight: 700;
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: color var(--duration-fast);
}

@media (hover: hover) and (pointer: fine) {
.story-read-more:hover {
  color: var(--clr-primary-dark);
}
}

@media (max-width: 768px) {

  .header .container,
  #main-header .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================
   PROGRAM DETAIL SECTIONS
   (Full program write-ups on early-childhood.html,
   scholarships.html and programs.html)
   ============================================ */
.program-detail {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-24) 0;
  scroll-margin-top: 110px;
}

.program-detail+.program-detail {
  border-top: 1px solid var(--clr-gray-200);
}

.program-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* These pills sit on the dark hero gradient (page-hero.is-program), so a
   pale or deep-green fill would either wash out or vanish against it.
   Location uses a neutral glass chip; status uses the brand accent so
   it reads as the one confident, eye-catching detail in the row. */
.program-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--ff-heading);
  letter-spacing: 0.03em;
  color: var(--clr-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 16px;
  border-radius: var(--radius-full);
}

.program-pill.is-status {
  color: var(--clr-white);
  background: var(--clr-accent);
  border-color: var(--clr-accent-light);
  box-shadow: 0 3px 10px rgba(196, 105, 28, 0.35);
}

.program-detail-head .program-tagline {
  font-size: var(--fs-md);
  color: var(--clr-gray-500);
  line-height: 1.7;
}

.program-media {
  /* No fixed height: .program-frame below sets its own height from
     aspect-ratio (16/9) against whatever width the flex/scroll-snap
     layout gives it (85% narrow, 60% at >=768px - see .program-frame),
     and that almost never equals a fixed 320px/220px. The dashed "photo
     mat" now hugs its frame instead of leaving an empty band under a
     shorter image - confirmed empty at both the 85% and 60% widths, not
     a coincidence of one breakpoint. */
  position: relative;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--clr-gray-300);
  background: var(--clr-gray-100);
  margin: var(--space-10) 0;
  overflow: hidden;
  transition: border-color var(--duration-base), background var(--duration-base);
}

/* Placeholder text rendered behind the <img>. Once a real photo loads
   successfully it visually covers this; if the <img> 404s, main.js
   removes the <img> node and this becomes visible automatically. */
.program-media::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
  padding: 0 var(--space-10);
  color: var(--clr-gray-500);
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.program-media.has-photo {
  border-style: solid;
  border-color: var(--clr-gray-200);
  background: var(--clr-white);
}

.program-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.program-body h3 {
  font-size: var(--fs-lg);
  color: var(--clr-primary-dark);
  margin: var(--space-14) 0 var(--space-2);
}

.program-body p {
  color: var(--clr-gray-600);
  line-height: 1.9;
  margin-bottom: var(--space-6);
  max-width: 68ch;
}

.program-body ul {
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.program-body ul li {
  position: relative;
  padding-left: 26px;
  color: var(--clr-gray-600);
  line-height: 1.7;
}

.program-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-primary-light);
}

.program-body strong {
  color: var(--clr-gray-800);
}

.program-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin: var(--space-10) 0;
}

.program-stat-tile {
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.program-stat-tile strong {
  display: block;
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--clr-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}

.program-stat-tile span {
  font-size: 12px;
  color: var(--clr-gray-500);
  line-height: 1.4;
  display: block;
}

.program-quote {
  border-left: 3px solid var(--clr-accent);
  background: var(--clr-accent-subtle);
  padding: var(--space-6) var(--space-10);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--clr-gray-800);
  margin: var(--space-10) 0;
}

.program-video-wrap {
  margin: var(--space-10) 0;
}

.program-video-wrap .video-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ============================================
   BEFORE / AFTER COMPARISON SLIDER
   Reusable component. Usage:
   <div class="compare-slider" data-before="path.jpg" data-before-label="Before"
        data-after="path.jpg" data-after-label="After"></div>
   initCompareSlider() in main.js builds the interactive markup on load.
   ============================================ */
.compare-slider {
  --compare-pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-gray-200);
  box-shadow: var(--shadow-md);
  margin: var(--space-10) 0;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}

.compare-slider-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.compare-slider-before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--compare-pos)) 0 0);
}

.compare-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pos);
  width: 0;
  transform: translateX(-50%);
  z-index: 2;
}

.compare-slider-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--clr-white);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.compare-slider-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  color: var(--clr-primary-dark);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.compare-slider:focus-visible .compare-slider-handle-btn {
  transform: translate(-50%, -50%) scale(1.08);
}

@media (hover: hover) and (pointer: fine) {
  .compare-slider:hover .compare-slider-handle-btn {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.compare-slider-label {
  position: absolute;
  top: 16px;
  z-index: 3;
  background: rgba(18, 20, 23, 0.65);
  backdrop-filter: blur(4px);
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.compare-slider-label-before {
  left: 16px;
}

.compare-slider-label-after {
  right: 16px;
}

@media (max-width: 480px) {
  .compare-slider {
    aspect-ratio: 4 / 3;
  }
}

.program-footnote {
  background: var(--clr-primary-lighter);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-10);
  color: var(--clr-primary-dark);
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-top: var(--space-10);
}

/* ============================================
   SHARED SUB-PAGE CHROME
   (Was duplicated inline in every sub-page's <head>
   — consolidated here as the single source of truth.
   Sub-pages just need <link rel="stylesheet" href="css/styles.css">.)
   ============================================ */
.header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06) !important;
}

.header-logo-text span:first-child {
  color: var(--clr-primary-dark) !important;
}

.header-logo-text span:last-child {
  color: var(--clr-gray-500) !important;
}

.nav-menu>a,
.nav-dropdown>.dropdown-toggle {
  color: var(--clr-gray-700) !important;
}

@media (hover: hover) and (pointer: fine) {
.nav-menu>a:hover,
.nav-dropdown:hover>.dropdown-toggle {
  color: var(--clr-primary) !important;
}
}

.hamburger span {
  background: var(--clr-gray-900) !important;
}

.page-hero {
  padding: 160px 0 80px;
  background: linear-gradient(160deg, var(--clr-primary-deeper) 0%, var(--clr-primary-dark) 50%, var(--clr-primary) 100%);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 184, 112, 0.15), transparent 60%);
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-hero h1 {
  font-size: var(--fs-4xl);
  color: var(--clr-white);
  margin-bottom: var(--space-4);
}

.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

.page-hero h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary-light), rgba(255, 255, 255, 0.5));
  border-radius: var(--radius-full);
  margin: var(--space-4) auto 0;
}

.page-content {
  padding: var(--space-24) 0;
  min-height: 40vh;
}

.page-content .content-card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--clr-white);
  padding: var(--space-18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--clr-gray-200);
}

.page-content .content-card h2 {
  font-size: var(--fs-2xl);
  color: var(--clr-primary-dark);
  margin-bottom: var(--space-6);
}

.page-content .content-card p {
  color: var(--clr-gray-500);
  line-height: 1.9;
  margin-bottom: var(--space-6);
  max-width: 68ch;
}

.page-content .content-card p:last-child {
  margin-bottom: 0;
}

/* Program detail pages (9 standalone pages) share this icon-badge +
   back-link header pattern, previously duplicated per file. */
.page-hero.is-program {
  padding-bottom: 70px;
}

.page-hero.is-program h1 {
  font-size: var(--fs-3xl);
}

.page-hero-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
}

.page-hero-icon img {
  /* Forcing width/height to a fixed square stretched every non-square
     icon (Lab.svg is 185x130, Research.svg and Scholarship.svg have
     their own different ratios too) out of proportion. object-fit lets
     each keep its own shape inside the same 30x30 box instead. */
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.page-hero .program-tagline {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  max-width: 600px;
  margin: var(--space-2) auto 0;
  line-height: 1.8;
}

.program-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-primary);
  margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
.program-back-link:hover {
  color: var(--clr-primary-dark);
}
}

.gallery-page-content,
.programs-page-content {
  padding: var(--space-24) 0;
}

/* Current-page nav indicator (class applied by initActiveNav() in main.js) */
.nav-menu>a.active,
.nav-dropdown>.dropdown-toggle.active,
.dropdown-menu a.active {
  color: var(--clr-primary) !important;
  font-weight: 700 !important;
}

.dropdown-menu a.active {
  background: var(--clr-primary-dark);
  color: var(--clr-white) !important;
}

/* Honor Board still */
.honor-board-section,
.honor-board-section h2,
.honor-board-section * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Program Update Cards still */
.updates-card,
.updates-card * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
  .updates-card:hover,
  .updates-card:hover * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Remove small lines under all headings and titles */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
  display: none !important;
}

.hero-explore-btn-new .text {
  margin: 0 1.5rem 0 3rem;
  font-weight: 600;
}

/* Uiverse Project Cards */
.uiverse-card {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--clr-gray-100);
  padding: 5px;
  overflow: hidden;
  box-shadow: rgba(10, 28, 16, 0.2) 0px 7px 20px 0px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
.uiverse-card:hover {
  transform: scale(1.02);
}
}

.uiverse-card .top-section {
  height: 220px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  position: relative;
}

.uiverse-card .top-section .border {
  border-bottom-right-radius: 10px;
  height: 30px;
  width: 110px;
  background: var(--clr-gray-100);
  position: relative;
  transform: skew(-40deg);
  box-shadow: -10px -10px 0 0 var(--clr-gray-100);
  z-index: 2;
}

.uiverse-card .top-section .border::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  right: -15px;
  background: rgba(255, 255, 255, 0);
  border-top-left-radius: 10px;
  box-shadow: -5px -5px 0 2px var(--clr-gray-100);
}

.uiverse-card .top-section::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  background: rgba(255, 255, 255, 0);
  height: 15px;
  width: 15px;
  border-top-left-radius: 15px;
  box-shadow: -5px -5px 0 2px var(--clr-gray-100);
  z-index: 2;
}

.uiverse-card .top-section .icons {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.uiverse-card .top-section .icons .logo {
  height: 100%;
  padding: 5px 0 5px 15px;
  display: flex;
  align-items: center;
}

.uiverse-card .card-year {
  color: var(--clr-primary-dark);
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.uiverse-card .top-section .icons .social-media {
  display: none;
}

.uiverse-card .top-section .icons .social-media .svg {
  height: 14px;
  width: auto;
  fill: var(--clr-primary-dark);
  transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {
.uiverse-card .top-section .icons .social-media .svg:hover {
  transform: scale(1.2);
}
}

.uiverse-card .bottom-section {
  margin-top: 15px;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.uiverse-card .bottom-section .title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-primary-dark);
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--ff-heading);
}

.uiverse-card .card-desc {
  color: #6C7279;
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.5;
  flex-grow: 1;
}

.uiverse-card .bottom-section .row {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  border-top: 1px solid #75B768;
  padding-top: 15px;
}

.uiverse-card .bottom-section .row .item {
  flex: 33%;
  text-align: center;
  padding: 0 5px;
}

.uiverse-card .bottom-section .row .item .big-text {
  font-size: var(--fs-sm);
  display: block;
  font-weight: 700;
  color: var(--clr-primary-dark);
  margin-bottom: 4px;

  overflow: hidden;
  text-overflow: ellipsis;
}

.uiverse-card .bottom-section .row .item .regular-text {
  font-size: 10px;
  text-transform: uppercase;

  letter-spacing: 0.5px;
  color: var(--clr-primary-dark);
}

.uiverse-card .bottom-section .row .item:nth-child(2) {
  border-left: 1px solid #75B768;
  border-right: 1px solid #75B768;
}

/* Hide original project card styles when using uiverse card */
.projects-grid .project-card {
  /* we will just override the class in HTML to uiverse-card */
}

@media (hover: hover) and (pointer: fine) {
.uiverse-card:hover .card-bg-img {
  transform: scale(1.08);
}
}

.uiverse-card .bottom-section .row .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.uiverse-card .bottom-section .row .item .svg-stat {
  height: 24px;
  width: auto;
  margin-bottom: 6px;
  filter: brightness(0) invert(22%) sepia(32%) saturate(1171%) hue-rotate(90deg) brightness(95%) contrast(88%);

}

/* TextAnimate — slideLeft, by character
   Vanilla port of Magic UI's
   <TextAnimate animation="slideLeft" by="character">. Each character starts
   offset to the right and transparent, then travels left into place with a
   per-character stagger set from JS (see initCharRevealHeadings). Matching
   Magic UI's slideLeft variant, which is hidden {x: 20, opacity: 0} ->
   show {x: 0, opacity: 1} — horizontal motion, not vertical.

   No `once`: the snippet this implements does not pass it, so a heading
   replays each time it scrolls back into view. */
.text-animate-word {
  /* Keeps a word from breaking apart across a line wrap mid-animation.
     No overflow:hidden: characters slide in horizontally, so a clipped word
     box would cut them off against the neighbouring word instead of letting
     them travel. */
  display: inline-block;
}

/* Unscoped, same as .reveal above (see that comment and the no-JS
   fallback near it) - kept display:inline-block here rather than moving
   it into a conditional rule, since that property doesn't need to change
   for the no-JS case and this avoids one more selector to keep in sync. */
.text-animate-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(20px);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* No-JS / JS-failed fallback - see the identical .reveal fallback above
   for why this is opacity-only and uses :not(.js) rather than scoping
   the hidden state itself. */
html:not(.js) .text-animate-char {
  opacity: 1 !important;
}

.text-animate.is-animated .text-animate-char {
  opacity: 1;
  transform: translateX(0);
}

.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 2.9em;
  height: 2.9em;
  /* Using their previous blue, or should I use #282936? Let's use #282936 as requested */
  border-radius: 1.625rem;
}

/* Wait, I will stick EXACTLY to their colors as requested */
.learn-more .circle {
  background: #75B768;
}

.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}

.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.29rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
.learn-more:hover .circle {
  width: 100%;
}

.learn-more:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
}

@keyframes fadeRise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.era-pill-item.active {
  background: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: 0 4px 12px rgba(14, 97, 29, 0.25);
}

@media (hover: hover) and (pointer: fine) {
  .era-pill-item:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
    box-shadow: 0 4px 12px rgba(14, 97, 29, 0.25);
  }
}

.metric-pill.highlight {
  background: #fdf3ea;
  color: var(--clr-accent-dark);
  border-color: rgba(196, 105, 28, 0.25);
}


@keyframes pulsePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(196, 105, 28, 0.4);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(196, 105, 28, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(196, 105, 28, 0);
  }
}

@keyframes bounceArrow {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(6px);
  }

  60% {
    transform: translateY(3px);
  }
}


.button {
  color: var(--clr-white);
  background-color: var(--clr-primary-dark);
  font-weight: 600;
  border-radius: var(--radius-full);
  font-size: 1rem;
  line-height: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  text-align: center;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  border: none;
}

@media (hover: hover) and (pointer: fine) {
.button:hover {
  background-color: #fff;
  color: #1F4F29;
  border: 2px solid #1F4F29;
}

.button:hover svg {
  fill: #1F4F29;
}
}

.button svg {
  display: inline;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.75rem;
  color: white;
}

@media (hover: hover) and (pointer: fine) {
.button:hover svg {
  animation: spin_357 0.5s linear;
}
}

@keyframes spin_357 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotatey(360deg);
  }
}

/* =========================================
   WEF DOCUMENT LIST (MINIMAL & PROFESSIONAL)
   ========================================= */

.wef-doc-list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.wef-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-14) 0;
  border-bottom: 1px solid var(--clr-gray-200);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  gap: var(--space-6);
}

@media (hover: hover) and (pointer: fine) {
.wef-doc-item:hover {
  padding-left: var(--space-4);
}
}

.wef-doc-item:last-child {
  border-bottom: none;
}

.wef-doc-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wef-doc-title {
  font-family: var(--ff-heading);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  color: var(--clr-primary-dark);
  font-weight: 700;
  line-height: 1.2;
}

.wef-doc-meta {
  font-size: var(--fs-md);
  color: var(--clr-gray-500);
  line-height: 1.5;
}

.wef-doc-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.wef-doc-btn {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}

.wef-doc-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.view-btn {
  background: var(--clr-primary-deeper);
  color: var(--clr-white);
}

@media (hover: hover) and (pointer: fine) {
.view-btn:hover {
  background: var(--clr-primary-light);
  transform: translateY(-2px);
}
}

.download-btn {
  border-color: var(--clr-gray-300);
  color: var(--clr-primary-dark);
}

@media (hover: hover) and (pointer: fine) {
.download-btn:hover {
  border-color: var(--clr-primary-deeper);
  background: var(--clr-gray-50);
  transform: translateY(-2px);
}
}

.pdf-modal.active {
  pointer-events: auto;
  opacity: 1;
}

.pdf-modal.active .pdf-modal-container {
  transform: translateY(0);
}

/* ==========================================================================
   MOBILE RESPONSIVE FIXES
   --------------------------------------------------------------------------
   Everything below lives inside a max-width media query, so no rule here can
   be evaluated on a desktop or laptop viewport. That is the mechanism that
   keeps the desktop design untouched — not care, but scope.

   Each fix below was found by measuring real geometry in headless Chrome at
   320 / 390 / 430 / 768px, not by eye. The measured overflow is quoted with
   each rule so a future reader can re-check the claim.

   Note that html/body already carry overflow-x: hidden, so none of these
   defects produced a visible scrollbar — the content was being silently
   clipped instead, which is why they survived this long.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Annual Reports: the worst offender -------------------------------
     Measured overflow: +151px at 320, +81px at 390, +41px at 430.

     .wef-doc-item is a space-between flex row: title/description on the left,
     two action buttons on the right. The buttons carry white-space: nowrap
     and the row never wrapped, so together they reserved ~290px of a 390px
     screen. That squeezed the title column to roughly 100px — narrow enough
     that "Worldwide" broke mid-word — and pushed the Download button past
     the right edge, where overflow-x: hidden cut it in half.

     Stacking the row gives the title full width and puts the buttons on
     their own line, which fixes the clipped button and the broken word in
     one change. */
  .wef-doc-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .wef-doc-actions {
    /* Wrap as a fallback for very long button labels, and stretch the pair
       across the row so both remain comfortable tap targets. */
    flex-wrap: wrap;
    width: 100%;
  }

  .wef-doc-btn {
    flex: 1 1 auto;
    min-height: 44px;
    /* touch target */
    justify-content: center;
  }

  /* --- Scroll-reveal transforms ----------------------------------------
     Measured overflow: +36px on completed-project-details at every width
     tested, including 768.

     .reveal-left / .reveal-right start elements translated 60px sideways and
     animate to 0 when scrolled into view. On a desktop grid there is slack
     either side to absorb that. On a phone the element already spans the full
     content width, so the 60px excursion hangs off the edge until the reveal
     fires — and for anything below the fold that is the whole time the
     visitor is above it.

     The reveal is kept, but travels vertically on mobile: same effect, no
     horizontal excursion. */
  .reveal-left,
  .reveal-right {
    transform: translateY(40px);
  }

  .reveal-left.active,
  .reveal-right.active {
    transform: translateY(0);
  }

  /* Hero carousel dots are handled once, outside every media query, by the
     .slide-dot::after rule near the end of this file. An earlier attempt sat
     here and grew the dot's own box with padding, which changed the spacing
     of the row rather than just the hit area — and was dead in any case,
     since the reset at styles.css:5852 in this same media query overrides
     padding, box-sizing and background-clip with !important. Removed rather
     than left as a rule that looks load-bearing and is not. */

  /* --- Card links -------------------------------------------------------
     .updates-card-link measured 262x19. Reads as a link, too short to tap
     reliably. */
  .updates-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 480px) {

  /* --- Success stories --------------------------------------------------
     Measured overflow: +24px at 320.

     .story-card was rendering a full-viewport-width box inside a container
     that already applies horizontal padding, so the card's own width pushed
     past the right edge by exactly the padding amount. Constraining it to the
     content box rather than the viewport removes the excursion. */
  .story-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Grids with a fixed minimum track --------------------------------
     Measured overflow: +24px on success-stories at 320.

     .stories-grid uses repeat(auto-fill, minmax(320px, 1fr)). auto-fill only
     controls how many tracks there are; it does not shrink a track below the
     stated minimum. At a 320px viewport the content box is 272px wide, so a
     320px minimum track is 48px wider than the space it has to live in, and
     the card hangs off the edge.

     This is the single most common cause of a phone-only sideways scroll:
     minmax() with a fixed lower bound. One column below 480px removes the
     lower bound entirely rather than trying to guess a smaller one. */
  .stories-grid {
    grid-template-columns: 1fr;
  }

  /* Long unbroken strings — report titles, URLs, file names — are the usual
     cause of a phone-only sideways scroll. Allowing a break inside a word is
     only appropriate once the word genuinely cannot fit. */
  .wef-doc-title,
  .story-title {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 768px) {
  /* 1. Layout: Text Top, Buttons Bottom, Dots Bottom */
  .hero-glass-container {
    min-height: 100svh !important;
  }
  
  .hero-glass-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .hero-glass-eyebrow, .hero-glass-heading, .hero-glass-desc {
    margin-top: 0 !important;
  }

  
  .hero-glass-actions .button, 
  .hero-glass-actions a {
    width: 160px !important; 
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13px !important; 
    padding: 8px 12px !important; 
    text-align: center !important;
    min-height: 40px !important;
  }

  /* Add Header-style Glass Blur to the Explore Button (a tag) */
  .hero-glass-actions a {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
  }
  
  .hero-glass-actions .button svg {
    margin-right: 6px !important;
  }

  /* 5. Dots navigation pinned to Bottom - iPhone/Liquid Style */
  .hero-slide-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
  }

  .slide-dot {
    box-sizing: border-box !important;
    background-clip: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  }
  
  .slide-dot:not(.active) {
    width: 6px !important;
    height: 6px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
  }
  
  .slide-dot.active, .slide-dot.center-dot {
    width: 22px !important;
    height: 6px !important;
    background-color: #ffffff !important;
  }
}
/* ============================================
   Uiverse Navigation Button (Global)
   ============================================ */
.uiverse-nav-btn {
  display: block;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
  overflow: hidden;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.uiverse-nav-btn:before,
.uiverse-nav-btn:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 7px;
}

.uiverse-nav-btn:before {
  border: 4px solid var(--clr-primary-dark, #1f4f29);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.uiverse-nav-btn:after {
  border: 4px solid var(--clr-accent, #c4691c);
  transform: scale(1.3);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.uiverse-nav-btn:focus:before {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.uiverse-nav-btn:focus:after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

@media (hover: hover) and (pointer: fine) {
  .uiverse-nav-btn:hover:before {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
      transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .uiverse-nav-btn:hover:after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
      transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
  }
}

.uiverse-nav-btn .button-box {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.uiverse-nav-btn .button-elem {
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px 18px 0 18px;
  fill: var(--clr-primary-dark, #1f4f29);
}

.uiverse-nav-btn.prev {
  transform: rotate(180deg);
}

.uiverse-nav-btn:focus .button-box {
  transition: 0.4s;
  transform: translateX(-56px);
}

@media (hover: hover) and (pointer: fine) {
  .uiverse-nav-btn:hover .button-box {
    transition: 0.4s;
    transform: translateX(-56px);
  }
}

/* Hide mobile controls on desktop */
.mobile-updates-nav {
  display: none;
}

@media (max-width: 768px) {
  /* 6. Project Updates Mobile Carousel */
  .updates-grid-container {
    position: relative !important;
  }
  
  .updates-grid {
    display: block !important;
  }
  
  .updates-card {
    display: none !important; /* Hide all by default */
  }
  
  .updates-card.mobile-active {
    display: flex !important;
    flex-direction: column !important;
    animation: mobileFadeIn 0.5s ease-in-out;
  }

  .mobile-updates-nav {
    display: flex !important;
    gap: 20px;
    margin-top: 20px;
    z-index: 5;
  }
}

@keyframes mobileFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 768px) {
  
  .nav-menu > a,
  .nav-dropdown > .dropdown-toggle,
  .dropdown-menu a,
  .nav-menu > a.active,
  .nav-dropdown > .dropdown-toggle.active,
  .dropdown-menu a.active {
    color: var(--clr-primary-dark) !important;
  }
  
  .nav-menu > a::after,
  .nav-dropdown > .dropdown-toggle::after {
    display: none !important;
  }
}
@media (max-width: 768px) {
  
  .nav-menu > a, 
  .nav-dropdown > .dropdown-toggle {
    text-align: left !important;
    width: 100% !important;
  }

  /* Hamburger Icon Shrink */
  .hamburger {
    gap: 4px !important;
  }
  
  .hamburger span {
    height: 2px !important;
  }

}
@media (max-width: 768px) {
  /* Fix Header Overlap & Shrink Menu Width to Text */
  .nav-menu {
    height: calc(100dvh - var(--header-height)) !important;
  }

  /* Force all menu text strictly onto one line */
  .nav-menu > a, 
  .nav-dropdown > .dropdown-toggle,
  .dropdown-menu a {
    white-space: nowrap !important;
  }
}
@media (max-width: 768px) {
  /* 1. Stop Submenu from Jumping Out */
  .nav-dropdown .dropdown-menu {
    transform: none !important;
    position: static !important; /* Keeps it inside the hamburger flow */
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding-left: 15px !important;
    width: 100% !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover .dropdown-menu {
      transform: none !important;
      position: static !important; /* Keeps it inside the hamburger flow */
      box-shadow: none !important;
      background: transparent !important;
      border: none !important;
      padding-left: 15px !important;
      width: 100% !important;
    }
  }

  /* 2. Normal State (Transparent Border to prevent jumping) */
  .nav-menu > a, 
  .nav-dropdown > .dropdown-toggle,
  .dropdown-menu a {
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
    margin-bottom: 2px !important;
  }

  /* 3. Hover State: Green Borders */
  @media (hover: hover) and (pointer: fine) {
  .nav-menu > a:hover,
  .nav-dropdown > .dropdown-toggle:hover,
  .dropdown-menu a:hover {
    border: 1px solid var(--clr-primary) !important;
    color: var(--clr-primary-dark) !important;
  }
  }

  /* 4. Active/Selected State: Green Highlight */
  .nav-menu > a.active,
  .nav-dropdown > .dropdown-toggle.active,
  .dropdown-menu a.active {
    background-color: var(--clr-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--clr-primary) !important;
  }
}
@media (max-width: 768px) {
  /* Center and Enlarge the Donate Button */
  .nav-menu .nav-donate {
    white-space: nowrap !important; /* Strictly one line */
  }
}

/* CRITICAL FIX for massive arrows: constrain the SVGs */
.uiverse-nav-btn .button-elem svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================
   CRITICAL FIX: Missing CSS for Original UIV-NAV-BTN 
   ============================================ */
.uiv-nav-btn {
  display: inline-flex;
  position: relative;
  width: 28px;
  height: 28px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.uiv-nav-btn-box {
  display: flex;
  position: absolute;
  left: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.uiv-nav-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.uiv-nav-btn-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
.program-pager-link:hover .uiv-nav-btn-box,
.program-back-link:hover .uiv-nav-btn-box,
.uiv-nav-btn:hover .uiv-nav-btn-box {
  transform: translateX(-28px);
}
}
.uiv-nav-btn--next {
  transform: rotate(180deg);
}

/* Lightbox specific sizing for uiv-nav-btn */
.lightbox-nav.uiv-nav-btn {
  width: 48px;
  height: 48px;
}
.lightbox-nav.uiv-nav-btn .uiv-nav-btn-icon {
  width: 48px;
  height: 48px;
}
.lightbox-nav.uiv-nav-btn .uiv-nav-btn-icon svg {
  width: 32px;
  height: 32px;
}
@media (hover: hover) and (pointer: fine) {
.lightbox-nav.uiv-nav-btn:hover .uiv-nav-btn-box {
  transform: translateX(-48px);
}
}

/* ============================================
   Project Pager Buttons (Uiverse.io by xopc333)
   ============================================ */
.pager-btn {
  display: inline-block;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
  overflow: hidden;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  vertical-align: middle;
}

.pager-btn:before,
.pager-btn:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 7px;
}

.pager-btn:before {
  border: 4px solid #1f4f29;
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.pager-btn:after {
  border: 4px solid #d39c1e;
  transform: scale(1.3);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.pager-btn:focus:before {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pager-btn:focus:after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

@media (hover: hover) and (pointer: fine) {
  .pager-btn:hover:before {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
      transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .pager-btn:hover:after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
      transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
  }
}

.pager-btn .button-box {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.pager-btn .button-elem {
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px 18px 0 18px;
  fill: #1f4f29;
}

/* CRITICAL FIX for massive arrows: constrain the SVGs */
.pager-btn .button-elem svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The SVG is a Right arrow. Prev needs to be rotated to point left. */
.pager-btn--prev .button-elem {
  transform: rotate(180deg);
}

.pager-btn:focus .button-box {
  transition: 0.4s;
  transform: translateX(-56px);
}

@media (hover: hover) and (pointer: fine) {
  .pager-btn:hover .button-box {
    transition: 0.4s;
    transform: translateX(-56px);
  }
}

/* ============================================
   Project Pages: Image Gallery Track
   ============================================ */
.program-frames-track {
  display: flex;
  gap: var(--space-4, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2, 12px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-primary, #1f4f29) var(--clr-gray-200, #e2e8f0);
}

.program-frames-track::-webkit-scrollbar {
  height: 6px;
}
.program-frames-track::-webkit-scrollbar-track {
  background: var(--clr-gray-200, #e2e8f0);
  border-radius: 4px;
}
.program-frames-track::-webkit-scrollbar-thumb {
  background-color: var(--clr-primary, #1f4f29);
  border-radius: 4px;
}

.program-frame {
  flex: 0 0 85%;
  scroll-snap-align: center;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background-color: var(--clr-gray-100, #f1f5f9);
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .program-frame {
    flex: 0 0 60%;
  }
}

.program-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.program-frame:not(.has-photo)::after {
  content: attr(data-label);
  position: absolute;
  font-family: var(--ff-heading, sans-serif);
  font-size: var(--fs-sm, 14px);
  color: var(--clr-gray-500, #64748b);
  text-align: center;
  padding: var(--space-4, 16px);
}

/* ============================================
   Reusable horizontal card carousel.
   Applied by adding "card-carousel-track" alongside a grid's existing
   class (e.g. .projects-grid.card-carousel-track) and wrapping it plus
   two .carousel-arrow buttons in a .card-carousel container - see
   .program-frames-track/.program-frame just above for the identical
   overflow-x/scroll-snap mechanism this is generalized from; native
   scroll-snap gives touch swipe for free, no JS drag library needed.
   JS (initCardCarousels() in main.js) only drives the arrow buttons and
   their disabled state - the swipe itself needs no script at all.
   ============================================ */
.card-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

.card-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  min-width: 0;
  flex: 1;
}

.card-carousel-track::-webkit-scrollbar {
  display: none;
}

.card-carousel-track > * {
  flex: 0 0 85%;
  scroll-snap-align: center;
  min-width: 0;
}

@media (min-width: 600px) {
  .card-carousel-track > * {
    flex-basis: 46%;
  }
}

@media (min-width: 1024px) {
  .card-carousel-track > * {
    flex-basis: 31%;
  }
}

.carousel-arrow {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-200);
  box-shadow: var(--shadow-md);
  color: var(--clr-primary-dark);
  cursor: pointer;
  padding: 0;
}

.carousel-arrow svg {
  width: 18px;
  height: 18px;
}

/* Arrows only show where there's room beside the track (>=768px) - below
   that, the track fills the full width and swipe/scroll-snap alone
   drives "one card at a time," matching how every other touch surface
   on this site works without on-screen prev/next controls. */
@media (min-width: 768px) {
  .carousel-arrow {
    display: flex;
  }
}

.carousel-arrow:active {
  transform: scale(0.92);
  transition: transform 100ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-arrow:hover {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: var(--clr-white);
  }
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ============================================
   Project Pages: Pager Layout
   ============================================ */
.program-pager {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
  padding-top: var(--space-10, 32px);
  border-top: 1px solid var(--clr-gray-200, #e2e8f0);
}

@media (min-width: 768px) {
  .program-pager {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.program-pager-link {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  text-decoration: none;
  color: var(--clr-text, #333);
}

.program-pager-link--prev {
  text-align: left;
}

.program-pager-link--next {
  text-align: right;
  flex-direction: row-reverse;
  margin-left: auto;
}

@media (min-width: 768px) {
  .program-pager-link--next {
    margin-left: 0;
  }
}

.program-pager-text {
  display: flex;
  flex-direction: column;
}

.program-pager-label {
  font-size: var(--fs-xs, 12px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-gray-500, #64748b);
  font-weight: 600;
  margin-bottom: 2px;
}

.program-pager-name {
  font-family: var(--ff-heading, sans-serif);
  font-weight: 600;
  font-size: var(--fs-base, 16px);
  color: var(--clr-primary, #1f4f29);
  transition: color var(--duration-fast, 0.2s) ease;
}

@media (hover: hover) and (pointer: fine) {
.program-pager-link:hover .program-pager-name {
  color: var(--clr-primary-dark, #163d1e);
}
}

/* ============================================
   Project Pages: Pager Button Responsive Scaling
   ============================================ */
@media (min-width: 768px) {
  .pager-btn {
    width: 40px !important;
    height: 40px !important;
  }
  
  .pager-btn:before,
  .pager-btn:after {
    inset: 4px !important;
    border-width: 3px !important;
  }

  .pager-btn .button-elem {
    width: 16px !important;
    height: 16px !important;
    margin: 12px 12px 0 12px !important;
  }

  .pager-btn:focus .button-box {
    transform: translateX(-40px) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .pager-btn:hover .button-box {
      transform: translateX(-40px) !important;
    }
  }
}

/* ============================================
   TOUCH TARGET MINIMUMS — WCAG 2.2 SC 2.5.8 / 2.5.5
   ============================================

   Measured, not guessed: an audit at 320px found 60 interactive controls
   under the 24x24 CSS-px Level AA minimum (SC 2.5.8). The selectors below are
   that list. Nothing here changes a colour, a font, a border or a position —
   only the size of the area a finger can land on.

   Two thresholds are in play and they are different conformance levels:
     SC 2.5.8 Target Size (Minimum)  — Level AA  — 24x24  (the floor)
     SC 2.5.5 Target Size (Enhanced) — Level AAA — 44x44  (comfortable)
   Standalone controls are taken to 44px because that is the size a thumb
   actually wants; 24px would tick the box and still be fiddly.

   Deliberately NOT included:
   - Inline links inside prose. SC 2.5.8 exempts targets "in a sentence or
     block of text", and padding them would change line spacing on every page
     of the site to fix a failure that does not exist.
   - Leaflet map markers and zoom controls. They measure 28x34 and 30x30, so
     they already pass AA, and enlarging pins would make them overlap on a
     dense map.

   ONLY min-height is set — deliberately.

   The first attempt at this block also forced `display: inline-flex` on the
   same selectors, on the assumption that they all needed it to centre their
   text. They did not: most already use inline-flex, and the ones that do not
   are grid or flex children whose parent was sizing them. Changing their
   display mode re-boxed them and made things worse, not better — failures on
   index.php went from 5 to 69 and two pages started overflowing. min-height
   alone leaves every existing layout mode untouched and grows only the hit
   area; buttons and inline-flex elements both centre their content within it
   without being told to. */

.team-read-more,
.story-read-more,
.updates-card-link,
.program-back-link,
.link-back,
.legend-filter-btn,
.donate-amount-tab,
.donate-frequency-tab,
.team-modal-back {
  min-height: 44px;
}

/* The skip link is the first thing a keyboard user reaches, and measured 20px
   tall. It needs `display` set as well as min-height: an <a> is display:inline
   by default, and min-height has no effect on a non-replaced inline element —
   which is why setting it alone left the link exactly as it was. */
.skip-link {
  min-height: 44px;
}

/* Carousel dots were 8x8 — 6x6 for the smaller prev/next variants — which is
   the worst target on the site.

   The dot must STAY 8px or the design changes, so the hit area is grown with
   padding while `background-clip: content-box` keeps the painted dot inside
   the original box. The result is a 44x44 target that still looks like an 8px
   dot. `box-sizing: content-box` is set explicitly because the global reset
   uses border-box, under which the padding would shrink the dot to nothing.

   The variant selectors are listed explicitly and carry !important because the
   existing rules for .active / .center-dot / .prev-dot already use it
   (styles.css:5801) — without matching it here the padding is dropped on
   exactly the dots that were smallest, and .prev-dot stays at 6x6.

   PADDING WAS THE WRONG TOOL, twice. 18px first, then 8px — both inflate the
   dot's own box, and the dot's box is what sets the spacing of the row. The
   design is 6px dots with a 6px gap (styles.css:5862-5872), a 12px pitch, and
   padding pushed that to 28px: a line of widely spaced buttons instead of the
   tight iOS page indicator it is meant to be.

   An absolutely positioned ::after is the standard answer. It is outside
   normal flow, so it contributes nothing to layout — the dots stay 6px with
   their original 6px gaps — while giving each one a 24x24 tappable area,
   the WCAG 2.2 AA minimum (SC 2.5.8).

   inset: -9px on a 6px dot = 6 + 18 = 24px. Adjacent hit areas do overlap at
   a 12px pitch; a tap between two dots resolves to the nearer one, which is
   how iOS page controls behave and is far better than the 6x6 target that
   was there before. */
.slide-dot {
  position: relative;
}

.slide-dot::after {
  content: '';
  position: absolute;
  inset: -9px;
  /* No background: this exists only to be hit, never to be seen. */
}

/* Form controls: 19px tall inputs on the contact and volunteer forms. */
.contact-form input,
.contact-form select,
.contact-form textarea {
  min-height: 44px;
}

/* The newsletter field and its submit button now appear in the footer of every
   page rather than two, so they get the same minimum as the other forms. */
.footer-newsletter-form input,
.footer-newsletter-form button {
  min-height: 44px;
}

/* ============================================
   FOOTER — branding and legal block
   ============================================
   Added when footer-slim.php was retired and every page moved to the full
   footer. On 22 of those pages the organisation's name previously appeared
   only inside a copyright line, so the wordmark is given real weight here. */

.footer-logo--lead {
  align-items: center;
  margin-bottom: 6px;
}

.footer-logo--lead span {
  font-family: var(--ff-heading);
  font-size: clamp(1.05rem, 2.2vw, var(--fs-lg));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--clr-white);
}

.footer-tagline {
  margin-bottom: var(--space-4);
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clr-white);
  opacity: 0.85;
}

/* One line per statement instead of a single four-sentence paragraph. The
   content is unchanged — 501(c)(3) status, tax ID, the 100%-to-projects
   commitment and the administrative-costs attribution are all still present,
   which they must be. */
.footer-legal {
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.footer-legal strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.footer-copyright {
  margin-top: 10px;
  font-size: var(--fs-xs);
  opacity: 0.75;
}

/* ============================================
   BUTTONS — HOLDING SHAPE WHEN THE VIEWPORT NARROWS
   ============================================

   "Buttons lose alignment when resizing / become distorted."

   .btn had no responsive rules at all — one declaration, `padding: 16px 36px`,
   applied identically at 320px and at 2560px. That is 72px of horizontal
   padding, so on a phone a label like "Submit Application" has barely 200px
   left and wraps to two lines. Because .btn is a pill (border-radius: full,
   overflow: hidden) a wrapped label turns it into a tall lozenge, and any
   sibling button that did not wrap stays short — which is the "alignment"
   part: buttons in a row stop matching each other.

   Three additions, no existing declaration changed:
     - min-height gives every button the same floor, so a row stays even.
     - padding steps down at 640px and 380px so labels fit on one line, which
       removes the cause rather than the symptom.
     - line-height is pinned so the pill's height is predictable.

   Deliberately NOT using white-space: nowrap. It would guarantee one line but
   let a long label push out of its container instead, trading a visible
   problem for an invisible one. */

.btn {
  min-height: 52px;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 640px) {
  .btn {
    padding: 14px 24px;
  }
}

@media (max-width: 380px) {
  .btn {
    padding: 13px 18px;
    font-size: 0.95rem;
  }
}

/* Full-width form submit button.

   Replaces style="width: 100%; justify-content: center;" written inline on
   the contact and volunteer submit buttons. An inline style cannot be
   overridden by a media query without !important, so those two buttons were
   the only ones on the site that no responsive rule could ever reach — the
   exact shape of the problem being fixed above. */
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ============================================
   PROGRAMME PAGER — SPACING
   ============================================

   "Previous Project / Next Project sits too low, with large empty space
   between the content and the navigation."

   The gap was not one rule but four stacking up, all of them at full desktop
   strength on a phone as well:

     .page-content padding-bottom     --space-24  96px
     .program-pager-section           --space-32  128px  (inherited from .section)
     .program-pager margin-top        --space-14  56px
     .program-pager padding-top       --space-10   40px
                                                ----
                                                320px

   320px is most of a phone screen of nothing between the last sentence of an
   article and the link to the next one.

   Two of the four are reduced here. .page-content's 96px is left alone
   because it applies to every page that uses that wrapper, not just these —
   changing it is a wider decision than this fix. .program-pager keeps its
   40px padding-top and its top border, which is what visually separates the
   pager from the article; the 56px margin on top of that border was doubling
   up on separation that already existed.

   New total: 96 + 24 + 0 + 40 = 160px — half the original, with the divider
   rule and its breathing room intact. */

.program-pager-section {
  padding-top: var(--space-6);      /* was --space-32 (128px) via .section */
  padding-bottom: var(--space-18);  /* was --space-32 (128px) */
}

.program-pager {
  margin-top: 0;                  /* was --space-14 (56px) */
}

/* ============================================
   MINIMUM READABLE TEXT SIZE
   ============================================

   An audit at 320px found 90 elements on the home page and 28 on Active
   Projects rendering below 12px, the smallest at 8px. The rules producing
   them are listed below with their original values, so what changed is
   visible without diffing.

   12px is a readability convention, NOT a WCAG requirement — no success
   criterion sets a minimum font size (SC 1.4.4 requires text to survive 200%
   zoom, which it does). This is therefore a legibility improvement rather
   than a conformance fix, and the change is deliberately small: badge and tag
   micro-labels move 10-11px -> 12px, which keeps the uppercase letter-spaced
   idiom the design uses while making it readable on a phone.

   Excluded on purpose: .nav-dropdown > .dropdown-toggle::after, which is a
   decorative caret glyph at 10px rather than text. Enlarging it would move
   the arrow off the nav baseline to fix a problem nobody has. */

.header-logo-text span:last-child,   /* was 9px  — the site tagline */
.hero-glass-eyebrow,                 /* was 11px — hero eyebrow line */
.legend-filter-count,                /* was 11px */
.eclc-badge,                         /* was 11px */
.purpose-badge,                      /* was 11px */
.updates-card-tag,                   /* was 10px */
.updates-card-link {                 /* was 11px */
  font-size: 12px;
}
/* .uiverse-card .regular-text was also 10px and is deliberately NOT listed
   here: it lives in css/uiverse-cards.css, which every page loads AFTER this
   file, so a copy here would lose to it and leave a rule that looks like it
   works. It is fixed at source instead. */

/* .sponsor-badge-tag is set twice — 10px in the base rule and 8px !important
   in a narrow-viewport override (styles.css:3553), which is the smallest text
   on the site. The !important has to be matched to reach it; without that the
   override wins and the tag stays at 8px on exactly the screens where it is
   hardest to read. */
.sponsor-badge-tag {
  font-size: 12px !important;
}

/* ==========================================================================
   MOBILE-ONLY RESPONSIVE MASTER STYLES (max-width: 768px and max-width: 480px)
   CRITICAL: Applies ONLY to mobile viewports. Desktop/laptop styling is 100% preserved.
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Global Viewport & Container Containment */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 2. Mobile Navigation Drawer — Solid Background & Perfect Contrast */
  .nav-menu {
    position: fixed !important;
    right: -100% !important;
    height: 100dvh !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* Bottom padding adds the home-indicator inset so the last nav item /
       donate button isn't sat under it on an iPhone without a physical
       home button. Top already clears the notch via --header-height,
       which now includes safe-area-inset-top itself (see .header above). */
    padding: calc(var(--header-height) + 16px) 20px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Stops a scroll that reaches the end of the nav list from chaining
       into the page behind the drawer - contain keeps the drawer's own
       bounce (feels native) without moving anything outside it. */
    overscroll-behavior: contain;
    z-index: var(--z-drawer) !important;
    transition: right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .nav-menu.active {
    right: 0 !important;
  }

  /* Two stacking bugs, both found the same way (elementFromPoint() at the
     toggle's own on-screen coordinates after opening the menu) while
     verifying the drawer is actually operable by touch/mouse, not just
     visually correct - confirmed real via Playwright click/tap, which
     fails exactly where a real finger or cursor would too:

     1. #hamburger and #nav-menu are both inside .header (markup: header >
        .container > hamburger + nav-menu), so .header's own base z-index
        (--z-header, 1000) capped the whole subtree below .mobile-overlay,
        a sibling of .header at --z-overlay (1001). The overlay painted
        over the entire header - the hamburger/X toggle stayed visible
        (dimmed under the overlay's tint) but every click/tap on it was
        swallowed by the overlay instead. Fixed by raising .header itself
        above both --z-overlay and --z-drawer (one step past the higher of
        the two), since #nav-menu's own --z-drawer z-index is equally
        capped by the same parent and can't lift the whole subtree on its
        own.
     2. That alone still wasn't enough: within .header's own local stacking
        context, #nav-menu (--z-drawer, 1002) sits above #hamburger's own
        z-index (1001, set on .hamburger itself, line ~890) - ordinary
        siblings compete on their own z-index same as anywhere else, and
        the drawer panel is wide enough to reach the toggle's corner. Fixed
        by giving #hamburger a higher LOCAL z-index than #nav-menu, so it
        wins that inner comparison once both have cleared the overlay.

     Real-device impact of both, before this fix: on any width where this
     drawer shows (<=768px), a user who opened the menu had no way to tap
     the X closed - only Escape (keyboard-only) or tapping the sliver of
     backdrop the drawer doesn't cover actually worked. */
  .header {
    z-index: calc(var(--z-drawer) + 1) !important;
  }

  .hamburger {
    z-index: calc(var(--z-drawer) + 1) !important;
  }

  /* Full-bleed dimming backdrop behind mobile menu.
     NOTE: .mobile-overlay is also defined at ~line 2401 (z-index: 999, no
     !important) inside an older max-width:768px block. That definition is
     dead - this one wins on both cascade order and !important - but it has
     not been removed here because doing so safely means resolving all of
     .mobile-overlay's duplicate declarations together, not just z-index.
     Tracked for the component-consolidation pass (Phase 3). */
  .mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: var(--z-overlay) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
  }

  .mobile-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Nav Links in Mobile Drawer — High Contrast & Large Touch Targets */
  .nav-menu > a,
  .nav-dropdown > .dropdown-toggle {
    color: var(--clr-gray-900) !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  @media (hover: hover) and (pointer: fine) {
  .nav-menu > a:hover,
  .nav-dropdown > .dropdown-toggle:hover {
    background: var(--clr-gray-100) !important;
    color: var(--clr-primary) !important;
  }
  }

  .nav-menu > a.active,
  .nav-dropdown > .dropdown-toggle.active {
    background: var(--clr-primary-lighter) !important;
    color: var(--clr-primary) !important;
    font-weight: 700 !important;
  }

  /* Mobile Dropdown Sub-menu */
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: var(--clr-gray-50) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 0 6px 10px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .nav-dropdown.active .dropdown-menu {
    display: flex !important;
  }

  .dropdown-menu a {
    color: var(--clr-gray-700) !important;
    font-weight: 500 !important;
    min-height: 44px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
  }

  @media (hover: hover) and (pointer: fine) {
  .dropdown-menu a:hover {
    color: var(--clr-primary) !important;
    background: rgba(14, 97, 29, 0.08) !important;
  }
  }

  .dropdown-menu a.active {
    color: var(--clr-primary) !important;
    font-weight: 700 !important;
    background: rgba(14, 97, 29, 0.12) !important;
  }

  /* Donate Button in Mobile Drawer */
  .nav-menu .nav-donate {
    text-align: center !important;
    font-weight: 700 !important;
    background: var(--clr-primary) !important;
    color: #ffffff !important;
    border: 2px solid var(--clr-primary) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 4px 16px rgba(14, 97, 29, 0.3) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 3. Hero Section Containment & Responsive Typography */
  .hero-glass {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .hero-glass-container {
    min-height: 100svh !important;
    height: auto !important;
    padding-top: calc(var(--header-height) + 16px) !important;
    padding-bottom: 36px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-glass-panel {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-glass-eyebrow {
    /* Was 11px !important - the actual winning declaration (later in the
       file, same !important weight) that a since-added 12px fix elsewhere
       in this file ("the smallest text on the site") didn't know existed. */
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .hero-glass-heading {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .hero-text-slider {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-text-slide {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .hero-glass-desc {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Pinned to the bottom of the hero (margin-top:auto inside the flex
     column panel) as a compact row, rather than a 320px-wide stack parked
     mid-screen straight under the copy - leaves the photo visible. */
  .hero-glass-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-glass-actions .button,
  .hero-glass-actions a,
  .hero-glass-actions #hero-explore-btn {
    width: auto !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    border-radius: var(--radius-full) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .hero-slide-dots {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
  }


  .page-hero h1 {
    font-size: clamp(1.75rem, 6vw, 2.2rem) !important;
  }

  .page-hero p {
    font-size: 0.92rem !important;
    padding: 0 4px !important;
  }

  /* 5. General Layout & Grid Stacking */
  .video-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  .footer-about,
  .footer-links,
  .footer-newsletter {
    max-width: 100% !important;
  }

  .footer-newsletter-form {
    max-width: 100% !important;
    display: flex !important;
  }

  .footer-bottom-info {
    max-width: 100% !important;
    text-align: center !important;
  }

  .footer-social {
    justify-content: center !important;
    margin-top: 16px !important;
  }
}

/* 6. Breakpoint for Mobile Tablets & Phones (max-width: 640px) */
@media (max-width: 640px) {
  /* Honor Board / Sponsors Section */
  .honor-board-section {
    padding: var(--space-14) 0 !important;
  }

  .honor-board-card {
    padding: 20px 12px !important;
    border-radius: var(--radius-lg) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .sponsors-grid {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
    gap: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sponsor-tile {
    padding: 10px 8px !important;
    min-height: 72px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sponsor-name {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
  }

  .sponsor-badge-tag {
    /* Was 10px !important - a 3rd, later declaration this file's own
       12px !important fix (a few hundred lines up, "the smallest text on
       the site") was specifically added to defeat, but didn't know about:
       this rule is scoped to this same max-width:768px block and comes
       after it in the file, so it was winning again regardless. */
    font-size: 12px !important;
    padding: 4px 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    /* "ECD SPONSORS" needs 106px and a phone tile gives it 87-97px, so it
       wraps: tight lines and a rounded-rectangle corner keep it a compact
       two-line tag (about 37px) instead of a tall pill (45px). One-line
       tags stay about 22px. */
    line-height: 1.2 !important;
    border-radius: 10px !important;
    text-wrap: balance;
  }

  /* Timeline / Beginnings Section */
  .beginnings-timeline {
    padding-left: 0 !important;
  }

  .beginnings-timeline::before {
    left: 20px !important;
  }

  .timeline-step {
    padding-left: 52px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .step-badge {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    border-width: 3px !important;
  }

  .step-content {
    padding: 12px 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .step-content h3 {
    font-size: 1.05rem !important;
  }

  .step-content p {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }
}

/* 7. Extra Small Phones (max-width: 480px) */
@media (max-width: 480px) {
  .hero-glass-heading {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }

  .hero-glass-desc {
    font-size: 0.86rem !important;
  }

  .header-logo img {
    height: 40px !important;
    width: 40px !important;
  }

  .header-logo-text span:first-child {
    font-size: 12px !important;
  }

  .header-logo-text span:last-child {
    /* Was 8px !important - later in the file than, and the same
       !important weight as, a since-added 12px fix elsewhere ("the
       smallest text on the site") that didn't know this rule existed. */
    font-size: 12px !important;
  }
}

@media (max-width: 380px) {
  .sponsors-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   MOBILE VERTICAL RHYTHM — sections that never got a mobile padding cut

   .section itself already drops from --space-32 (128px) to --space-18
   (72px) at max-width:768px (see that rule, near the top of the file).
   These 11 selectors are visually the same kind of full-width page
   section - "About", "WEF Globally", the footer, Donate, Honor Board,
   Project Updates, the Beginnings timeline, Team, a program detail
   article, and the generic .page-content/.programs-page-content/
   .gallery-page-content shells nearly every inner page uses - but none
   of them actually use the .section class, so none of them ever picked
   up that reduction. Each still carries its full 96px (--space-24, one
   carries 110px hardcoded) top+bottom padding at every width down to a
   phone, which is what actually produced "too much white space on
   mobile": not any one section being wrong, but eleven of them each
   independently keeping desktop-scale breathing room on a 380px screen
   that has nowhere near the height to spare for it.

   Matches .section's own two-step taper rather than inventing a
   different scale: --space-14 (56px) at <=768px, --space-10 (40px) at
   <=480px for the narrowest phones. ============================================================== */
@media (max-width: 768px) {
  .about,
  .wef-globally,
  .donate-section,
  .honor-board-section,
  .project-updates,
  .beginnings,
  .team-section,
  .program-detail,
  .page-content,
  .gallery-page-content,
  .programs-page-content {
    padding-top: var(--space-14) !important;
    padding-bottom: var(--space-14) !important;
  }

}

@media (max-width: 480px) {
  .section,
  .about,
  .wef-globally,
  .donate-section,
  .project-updates,
  .beginnings,
  .team-section,
  .program-detail,
  .page-content,
  .gallery-page-content,
  .programs-page-content {
    padding-top: var(--space-10) !important;
    padding-bottom: var(--space-10) !important;
  }

  /* .honor-board-section already tapers to --space-14 at <=640px (see
     that rule above); a second, deeper cut isn't needed on top of it. */

  .map-section {
    padding-bottom: var(--space-10) !important;
  }

  .footer {
    padding-top: var(--space-10) !important;
  }
}

/* ==========================================================================
   LARGE DISPLAYS (27"+ / wide monitors)
   --max-width (1400px) left a 2560px screen with ~580px of empty margin
   either side. Widen the shared container in steps; laptops (<1920px)
   are untouched.
   ========================================================================== */
@media (min-width: 1920px) {
  :root {
    --max-width: 1640px;
  }
}

@media (min-width: 2400px) {
  :root {
    --max-width: 1880px;
  }

  /* Four cards per view instead of three stretched ones. */
  .card-carousel-track > * {
    flex-basis: 23.5%;
  }
}

/* ==========================================================================
   MAP CONTROLS - left side on desktop
   ========================================================================== */
@media (min-width: 1024px) {
  .map-sidebar {
    order: -1;
    flex-basis: 260px;
  }
}

.map-sidebar .map-controls-panel {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.map-sidebar .donor-select-wrapper {
  max-width: none;
}


@media (max-width: 480px) {
  #map {
    height: 280px;
  }
}

/* ==========================================================================
   FOOTER - compact on mobile
   Single-column stacking put every link column (each link a 44px tap
   row) end to end: ~1600px of footer on a phone. The two link columns
   now sit side by side; brand/about and newsletter keep full width.
   ========================================================================== */
.footer-grid {
  gap: var(--space-14);
  margin-bottom: var(--space-14);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-8) var(--space-6) !important;
  }

  .footer-about,
  .footer-newsletter {
    grid-column: 1 / -1;
  }

  .footer h4 {
    margin-bottom: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
  }
}

/* The short "Active Projects" eyebrow only exists for phones. */
.hero-eyebrow-short {
  display: none;
}

/* ==========================================================================
   MOBILE REFINEMENT PASS (<=768px / <=375px only - desktop untouched)
   ========================================================================== */
@media (max-width: 768px) {
  /* --- Fluid type: headings scale with the viewport instead of jumping
     between fixed steps, so 320-414px phones don't read "zoomed in". --- */
  :root {
    --fs-3xl: clamp(1.45rem, 5.6vw, 1.75rem);
    --fs-2xl: clamp(1.3rem, 5vw, 1.55rem);
    --fs-xl: clamp(1.15rem, 4.4vw, 1.35rem);
    --fs-lg: clamp(1.05rem, 4vw, 1.2rem);
    --fs-md: clamp(0.95rem, 3.8vw, 1.05rem);
  }

  .section-header h2,
  .about-card h3,
  .contact-info h3,
  .globally-text-side h2 {
    line-height: 1.25;
  }

  .section-header p,
  .globally-text-side p,
  .contact-info > p {
    font-size: clamp(0.92rem, 3.7vw, 1rem);
    line-height: 1.6;
  }

  .contact-info > p {
    margin-bottom: var(--space-6);
  }

  .contact-detail {
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }


  .purpose-section {
    padding: var(--space-8) 0;
  }

  .purpose-badge {
    margin-bottom: 6px;
  }

  .section-header {
    margin-bottom: var(--space-6) !important;
  }

  .section-header h2 {
    margin-bottom: var(--space-2);
  }

  /* --- Hero: short eyebrow on top; project title + summary moved down
     to sit directly above the buttons; gradient darkest at the bottom
     where that text now lives, fading upward. --- */
  .hero-eyebrow-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .hero-eyebrow-short {
    display: inline;
  }

  /* Whole content block (tagline, title, summary, buttons) sits at the
     bottom: the tagline takes the auto margin and pushes everything down. */
  .hero-glass-eyebrow {
    margin-top: auto !important;
    margin-bottom: var(--space-2) !important;
  }

  .hero-text-slider {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* All 9 slides used to share one grid cell sized to the TALLEST slide,
     so a short title/description left a hole between the label and the
     text (measured 8-72px). Only the active slide stays in flow now; the
     others are laid over the bottom edge while they fade out, so the
     group always measures exactly the slide on screen. */
  .hero-text-slider {
    display: block !important;
    position: relative;
  }

  .hero-text-slide:not(.active) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .hero-glass-desc {
    margin-bottom: 0 !important;
  }

  /* Each title's second half carries an inline white-space:nowrap, which
     pushed "Undergraduate Scholarship" off-screen at 320px. */
  .hero-glass-heading span[style*="nowrap"] {
    white-space: normal !important;
  }

  .hero-glass-heading,
  .hero-glass-desc,
  .hero-glass-eyebrow {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }

  .hero-glass-actions {
    justify-content: center !important;
    margin-top: 12px !important;
    margin-bottom: 44px !important;
  }


  .contact-form {
    padding: var(--space-6) !important;
  }

  .form-group label {
    margin-bottom: 4px !important;
  }

  .contact-form .btn,
  .contact-form button[type="submit"] {
    margin-top: 0 !important;
  }

  /* --- Minimal footer: logo, social icons, one copyright line. All
     links, the newsletter and the legal statement stay on desktop. --- */
  .footer {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-6) !important;
    text-align: center;
  }

  .footer-grid {
    display: block !important;
    margin-bottom: var(--space-4) !important;
  }

  .footer-links,
  .footer-newsletter,
  .footer-tagline,
  .footer-about > p,
  .footer-legal {
    display: none !important;
  }

  .footer-logo {
    justify-content: center;
    margin-bottom: 0 !important;
  }

  .footer-bottom {
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    padding-top: var(--space-4) !important;
  }

  .footer-copyright {
    margin: 0 !important;
    font-size: 12px;
  }
}

/* ==========================================================================
   MOBILE COMPONENT COMPRESSION (<=768px)
   Every value below came from a measured audit at 375px across 16 pages
   (anything over 32px of vertical padding/margin/gap). Section-level
   breathing room is capped at 2rem; card interiors at ~1.5rem. Several
   targets live in page-local <style> blocks that load after this file,
   hence !important.
   ========================================================================== */
@media (max-width: 768px) {
  /* Headings wrap as balanced lines instead of leaving one orphan word -
     the "scattered text" look on narrow screens. */
  h1, h2, h3 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  /* Interior page heroes: header height + 28px, not + 40px + 45px. */
  .page-hero {
    padding: calc(var(--header-height) + 28px) 0 var(--space-8) !important;
  }

  .team-page-header {
    padding: calc(var(--header-height) + 28px) 0 var(--space-8) !important;
  }

  /* Home: Who We Are / Beginnings / WEF Globally / Donate / Honor Board */
  .about-grid {
    gap: var(--space-4) !important;
  }

  .about-card {
    padding: var(--space-6) 20px !important;
  }

  .about-card-icon-container {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
  }

  .about-card h3 {
    margin-bottom: 10px;
  }

  /* 40px between every section title and its intro, sitewide; 20px still
     clears the title's underline accent (drawn 10px below it). */
  .section-header p {
    margin-top: 20px !important;
  }

  .beginnings-timeline {
    margin-top: var(--space-6) !important;
    gap: var(--space-6) !important;
  }

  .globally-main-grid {
    gap: var(--space-8) !important;
    margin-bottom: 0 !important;
  }

  .wef-globally .impact-card {
    padding: var(--space-6) var(--space-2) !important;
  }

  .donate-main-grid {
    gap: var(--space-8) !important;
  }

  .donate-action-card {
    padding: 28px 20px !important;
  }

  .map-header {
    margin-bottom: 20px !important;
  }

  .updates-grid-container {
    margin-top: var(--space-6) !important;
  }

  .video-grid {
    margin-top: var(--space-8) !important;
  }


  .projects-editorial-grid,
  .stories-grid {
    margin-top: var(--space-6) !important;
  }

  .summary.card-carousel-track {
    padding-top: var(--space-4) !important;
    padding-bottom: 0 !important;
  }

  .ec-content,
  .story-content,
  .project-card-body {
    padding: var(--space-6) 20px !important;
  }

  .ec-summary {
    margin-bottom: var(--space-4) !important;
  }

  /* Impact Goals */
  .impact-goals-wrapper .cta {
    padding: var(--space-8) 20px !important;
    margin: var(--space-6) 0 !important;
  }

  .chart-mobile-list {
    padding-bottom: var(--space-4) !important;
  }

  /* Our Mission (At a Glance) */
  .glance-title-header {
    margin-bottom: var(--space-6) !important;
  }

  .glance-card-frame {
    margin-bottom: var(--space-8) !important;
  }

  .glance-footer-note {
    padding: var(--space-6) 20px !important;
  }

  .pillars-image-grid {
    margin: var(--space-8) 0 !important;
  }

  /* Program detail pages */
  .program-media,
  .program-stats,
  .program-video-wrap {
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-6) !important;
  }

  .program-body h3 {
    margin-top: var(--space-8) !important;
  }

  .program-pager {
    margin-top: var(--space-8) !important;
    padding-top: var(--space-6) !important;
  }

  /* Completed project details */
  .project-body {
    padding: var(--space-8) 0 !important;
  }

  .project-hero-content {
    padding-bottom: var(--space-8) !important;
  }

  .pb-grid {
    gap: var(--space-8) !important;
  }

  .info-panel {
    padding: 28px 20px !important;
  }

  .ip-title {
    margin-bottom: 20px !important;
  }

  .lead-text {
    margin-bottom: var(--space-6) !important;
  }

  .map-gallery-layout,
  .project-video-layout {
    margin-top: var(--space-8) !important;
    gap: var(--space-6) !important;
  }

  .pb-main h3 {
    margin-top: var(--space-8) !important;
  }

  .project-gallery {
    margin-top: var(--space-8) !important;
  }

  /* Fixed height="450" plus a 96px inline top margin: a 450px-tall video
     box on a 375px screen. Width-driven 16:9 instead. */
  .project-video-layout iframe {
    margin-top: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .impact-goals-wrapper .hero {
    padding-top: calc(var(--header-height) + 28px) !important;
  }


  .team-group-header {
    margin: var(--space-8) 0 var(--space-6) !important;
  }

  .team-group-header:first-child {
    margin-top: 0 !important;
  }

  .wef-doc-item {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
  }
}

@media (max-width: 375px) {
  .section,
  .about,
  .wef-globally,
  .donate-section,
  .honor-board-section,
  .project-updates,
  .beginnings,
  .team-section,
  .program-detail,
  .page-content,
  .gallery-page-content,
  .programs-page-content {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
  }

  .purpose-section {
    padding: var(--space-6) 0;
  }

  .hero-glass-actions {
    gap: 8px !important;
  }

  .hero-glass-actions .button,
  .hero-glass-actions a,
  .hero-glass-actions #hero-explore-btn {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }
}

.hb-mobile {
  display: none;
}

/* ==========================================================================
   MOBILE PASS 3 (<=768px): carousel peek, Honor Board, updates arrows,
   WEF Globally, map, donate section, 2-column contact
   ========================================================================== */
@media (max-width: 768px) {
  /* --- Hero: fluid description, identical buttons --- */
  .hero-glass-desc {
    font-size: clamp(0.84rem, 3.6vw, 0.95rem) !important;
    line-height: 1.5 !important;
  }

  .hero-glass-actions .button,
  .hero-glass-actions a,
  .hero-glass-actions #hero-explore-btn {
    flex: 1 1 0 !important;
    max-width: calc(50% - 5px) !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 12px !important;
  }

  /* --- Card carousels: full-bleed track, 80% cards, 10% side padding,
     so the neighbouring cards peek in at both edges. --- */
  .card-carousel {
    margin-inline: calc(50% - 50vw);
  }

  .card-carousel-track {
    padding-inline: 10% !important;
    scroll-padding-inline: 10%;
    gap: 12px !important;
  }

  /* 100% of the padded track = 80% of the screen. (A flex-basis % resolves
     against the content box, so "80%" here was 80% of 80% - cards came
     out 250px wide under a fixed-height image, i.e. tall and portrait.) */
  .card-carousel-track > * {
    flex: 0 0 100% !important;
    scroll-snap-align: center;
  }

  /* The peeking cards carry .reveal, whose IntersectionObserver never
     fires for a card that is only a sliver inside a horizontal scroller -
     they stayed at opacity 0, so the row looked like a single static
     card. Opacity only (never transform), per the reveal system's own
     rule, so press feedback keeps working. */
  .card-carousel-track > .reveal {
    opacity: 1 !important;
    transform: none;
  }

  /* --- Honor Board: smaller headings on set line breaks, 3-up grid --- */
  .hb-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .hb-mobile {
    display: inline;
  }

  .hb-l1,
  .hb-l2 {
    display: block;
  }

  .honor-board-header h2 {
    font-size: clamp(1.2rem, 5.6vw, 1.45rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.03em !important;
  }

  /* Second line reads as a subtitle so each line stays on one row. */
  .honor-board-header .hb-l2 {
    margin-top: 4px;
    font-size: clamp(0.75rem, 3.5vw, 0.9rem);
    letter-spacing: 0.01em;
  }

  .sponsor-group-header h3 {
    font-size: clamp(0.95rem, 4vw, 1.05rem) !important;
    line-height: 1.35 !important;
  }

  .sponsors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sponsor-tile {
    padding: 8px 3px !important;
    min-height: 60px !important;
  }

  .sponsor-name {
    font-size: 12px !important;
    line-height: 1.25 !important;
    hyphens: auto;
    overflow-wrap: anywhere !important;
  }

  .sponsor-badge-tag {
    padding: 4px 6px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  /* 360-380px phones: "04 CENTERS" was 1-2px too wide for its tile. */
  @media (max-width: 380px) {
    .sponsor-badge-tag {
      padding-inline: 4px !important;
    }
  }

  /* --- Project Updates: arrows back in normal flow below the card
     (they were absolutely positioned inside a bottom padding that the
     previous pass cut to 24px, so they sat on top of the card). --- */
  .updates-grid-container {
    padding-bottom: 0 !important;
  }

  /* Arrows centred vertically on the card's left and right edges. The
     row itself ignores taps so the card underneath stays tappable. */
  .updates-grid {
    position: relative !important;
  }

  /* Vertical middle of the card, whatever its height; the buttons are
     scaled down (below) so at the edges they clear the card's text. */
  .mobile-updates-nav {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 !important;
    transform: translateY(-50%);
    justify-content: space-between !important;
    pointer-events: none;
  }

  .mobile-updates-nav .uiverse-nav-btn {
    pointer-events: auto;
    background: var(--clr-white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
  }

  /* --- WEF Globally: paragraphs stacked tight, not spread apart --- */
  .globally-text-side {
    justify-content: flex-start !important;
    height: auto !important;
    gap: var(--space-4) !important;
  }

  .globally-text-side p {
    margin: 0 !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  /* --- Map: compact intro, map as the focus --- */
  .map-header h2 {
    margin-bottom: 6px !important;
  }

  .map-header p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  #map {
    height: 56vh !important;
    min-height: 300px !important;
    max-height: 420px !important;
  }

  /* --- "Make a Difference Today" hidden on phones. Nothing links to
     #donate; header and hero Donate buttons go straight to Zeffy. --- */
  .donate-section {
    display: none !important;
  }

  /* --- Let's Connect: 2-column details and form fields --- */
  .contact-grid {
    gap: var(--space-6) !important;
  }

  .contact-info {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .contact-info > h3,
  .contact-info > p,
  .contact-info > p + .contact-detail {
    grid-column: 1 / -1;
  }

  .contact-info > h3,
  .contact-info > p,
  .contact-detail {
    margin-bottom: 0 !important;
  }

  /* Phone and email share a row: icon above text in each half. */
  .contact-info > p + .contact-detail ~ .contact-detail {
    flex-direction: column;
    gap: 8px;
  }

  .contact-detail-text p {
    overflow-wrap: anywhere;
  }

  .contact-form .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-4) !important;
  }

  .contact-form .form-row .form-group {
    min-width: 0;
  }
}

@media (max-width: 375px) {
  .contact-form .form-row {
    gap: 10px !important;
  }

  .contact-form {
    padding: 20px 16px !important;
  }
}

.category-select-wrapper {
  display: none;
}

/* ==========================================================================
   MOBILE PASS 4 (<=768px): drawer, map controls, contact, spacing
   ========================================================================== */
@media (max-width: 768px) {
  /* --- Drawer: narrower panel, page stays visible (dimmed) beside it --- */
  .nav-menu {
    padding-left: 20px !important;
    padding-right: 16px !important;
    gap: 0 !important;
  }

  .nav-menu .nav-donate {
    align-self: flex-start !important;
    width: auto !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    margin-top: 12px !important;
    min-height: 40px;
  }


  /* --- WEF Globally: both paragraphs read as one; heading tight above ---
     Block (not flex) layout lets the two paragraphs run inline as a
     single paragraph without changing the desktop markup. */
  .globally-text-side {
    display: block !important;
  }

  .globally-text-side h2 {
    margin-bottom: 8px !important;
  }

  .globally-text-side p {
    display: inline;
  }

  .globally-text-side p + p::before {
    content: ' ';
  }

  .globally-stats-grid {
    margin-top: var(--space-6) !important;
  }

  /* --- Map: bigger, filters on one row, Leaflet controls on the left --- */
  .map-card {
    padding: var(--space-4) 12px !important;
  }

  #centers-map .map-sidebar {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  #centers-map .map-no-results {
    flex: 1 1 100%;
    order: 3;
  }

  #centers-map .map-controls-panel,
  #centers-map .map-legend-filters {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    gap: 6px !important;
  }

  #centers-map .map-legend-filters {
    display: flex;
    flex-direction: column;
  }

  #centers-map .donor-search-label,
  #centers-map .legend-filters-title {
    font-size: 12px !important;
    letter-spacing: 0.04em;
  }

  #centers-map .legend-filters-header {
    margin: 0 !important;
  }

  #centers-map .legend-filters-grid {
    display: none !important;
  }

  #centers-map .category-select-wrapper {
    display: block;
  }

  .category-select-input {
    width: 100%;
    min-height: 44px;
    appearance: none;
    padding: 10px 30px 10px 12px;
    border: 1px solid var(--clr-gray-300);
    border-radius: 6px;
    background: var(--clr-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center / 14px;
    font-family: var(--ff-body);
    font-size: 16px;
    color: var(--clr-gray-800);
  }

  #centers-map .donor-select-input {
    padding-right: 30px;
    text-overflow: ellipsis;
  }

  /* Map Style (layers) control moved from top-right to the left column,
     directly under zoom + View All Centers (10+64+10+38 = 122px). */
  #map .leaflet-top.leaflet-right {
    right: auto;
    left: 0;
    top: 122px;
  }

  #map .leaflet-top.leaflet-right .leaflet-control {
    float: left;
    margin-right: 0;
    margin-left: 10px;
  }

  /* --- Contact: one heading (the section's "Get In Touch"); order is
     Phone, Email, then Address full-width at the bottom. --- */
  .contact-info > h3,
  .contact-info > p {
    display: none !important;
  }

  .contact-info > .contact-detail:nth-of-type(1) {
    order: 3;
  }
}

/* ==========================================================================
   MOBILE PASS 5 (<=768px): consistent rhythm, drawer, contact rows,
   WEF Globally, Honor Board, carousel arrows
   ========================================================================== */
@media (max-width: 768px) {
  /* --- One section rhythm: 20px top/bottom = ~40px between sections --- */
  .section,
  .about,
  .wef-globally,
  .donate-section,
  .honor-board-section,
  .project-updates,
  .beginnings,
  .team-section,
  .program-detail,
  .page-content,
  .gallery-page-content,
  .programs-page-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .map-section {
    padding-bottom: 20px !important;
  }

  /* Small deliberate break between the Updates card and Beginnings. */
  #project-updates {
    padding-bottom: 12px !important;
  }

  #beginnings {
    padding-top: 16px !important;
  }

  /* --- Drawer: 44px rows, contained text, quieter close X --- */
  .nav-menu > a,
  .nav-dropdown > .dropdown-toggle {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  .dropdown-menu a {
    white-space: normal !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
  }

  .hamburger span {
    width: 18px !important;
  }

  /* --- Active Projects & other carousels: prev/next arrows overlaid on
     the peeking edges (tap and mouse users; swipe still works). --- */
  .card-carousel {
    position: relative;
  }

  .carousel-arrow {
    display: flex !important;
    position: absolute;
    top: calc(50% - 22px);
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
  }

  .carousel-arrow--prev {
    left: 4px;
  }

  .carousel-arrow--next {
    right: 4px;
  }

  /* --- Project Updates arrows: smaller so, at mid-card, they clear the
     text (the 56px originals covered the title's first letters). --- */
  .mobile-updates-nav {
    left: -28px !important;
    right: -28px !important;
  }

  .mobile-updates-nav .uiverse-nav-btn {
    scale: 0.8;
  }

  /* --- WEF Globally: heading on its own line; stats sized to fit --- */
  .globally-text-side h2 {
    display: block !important;
  }

  .wef-globally .impact-card-icon {
    font-size: 48px !important;
    margin-bottom: 4px !important;
  }

  .wef-globally .impact-number {
    font-size: 1.4rem !important;
  }

  /* --- Get in Touch: every detail one row, icon left, text aligned --- */
  .contact-info {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  .contact-info > .contact-detail,
  .contact-info > p + .contact-detail ~ .contact-detail {
    flex-direction: row !important;
    align-items: center;
    gap: 12px !important;
  }

  .contact-detail-icon {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
  }

  .contact-detail-text h4 {
    margin: 0 0 2px !important;
    font-size: 14px !important;
  }

  .contact-detail-text p {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  /* --- Contact form: tighter, still 44px tap targets and 16px inputs --- */
  .form-group {
    margin-bottom: 12px !important;
  }

  .form-group label {
    font-size: 13px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 8px 12px !important;
  }

  .form-group textarea {
    min-height: 88px !important;
  }

  .contact-form button[type="submit"],
  .contact-form .btn {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
  }

  /* --- Honor Board: header closer to the first group --- */
  .honor-board-header {
    margin-bottom: 12px !important;
  }

  .sponsor-group-header {
    margin-bottom: 10px !important;
  }

  .sponsor-group-header h3 {
    margin-bottom: 6px !important;
  }

  .sponsor-group-header p {
    line-height: 1.5 !important;
  }

  .sponsor-group {
    margin-bottom: 24px !important;
  }

  /* --- Map: compact "View All Centers" control --- */
  #map .leaflet-control-custom {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ==========================================================================
   HERO SLIDE DOTS - real 44x44 tap targets on phones
   Each button is now a transparent 44px box; the visible dot is drawn by
   ::before at the box's inner edge (side dots) or centre (current), so the
   indicator keeps its look - 6px dots, 22px active pill - with 11px gaps
   instead of 6px. The pill behind them moves to the row's ::before so it
   stays thin instead of growing to 44px. The earlier ::after hit-area
   extension (24px, under the 44px guideline) is neutralised.
   ========================================================================== */
@media (max-width: 768px) {
  .hero-slide-dots {
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-slide-dots::before {
    content: '';
    position: absolute;
    left: 26px;
    right: 26px;
    top: 50%;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: -1;
    pointer-events: none;
  }

  .hero-slide-dots .slide-dot {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .hero-slide-dots .slide-dot::after {
    inset: 0;
  }

  .hero-slide-dots .slide-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: 9999px;
    transition: opacity 100ms ease-out;
  }

  .hero-slide-dots .slide-dot.prev-dot::before {
    right: 0;
    width: 6px;
    background: rgba(255, 255, 255, 0.4);
  }

  .hero-slide-dots .slide-dot.next-dot::before {
    left: 0;
    width: 6px;
    background: rgba(255, 255, 255, 0.4);
  }

  .hero-slide-dots .slide-dot.center-dot::before {
    left: 11px;
    width: 22px;
    background: #ffffff;
  }

  .hero-slide-dots .slide-dot:active::before {
    opacity: 0.6;
  }
}

/* Our Team: 3 compact member cards per row on phones. The bio preview is
   already hidden in cards (Read More opens it in the modal), so each card
   is photo, name, role and Read More. */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .team-card-body {
    padding: 8px 6px 4px !important;
  }

  .team-card-body h3 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    overflow-wrap: anywhere;
  }

  /* Long designations cut to three lines with an ellipsis; the full text
     stays in the DOM and shows in the details modal (tap the card). */
  .team-role {
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin-bottom: 2px !important;
    overflow-wrap: break-word;
    hyphens: auto;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .team-card {
    cursor: pointer;
  }

  .team-read-more {
    margin-top: auto !important;
    font-size: 12px !important;
    min-height: 44px;
    width: 100%;
    padding: 0 4px !important;
    white-space: normal !important;
    justify-content: center;
  }

  .team-card-image::after {
    font-size: 12px !important;
    text-align: center;
  }
}

/* Our Team - Collaborating Partners: a short group (2 cards) sat on the
   left with the rest of the row empty. auto-fit collapses the unused
   tracks and justify-content centres the cards, desktop and phone. */
.team-grid--centered {
  grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
  justify-content: center;
}

@media (max-width: 768px) {
  .team-grid--centered {
    grid-template-columns: repeat(auto-fit, calc((100% - 20px) / 3)) !important;
    justify-content: center;
  }

  /* Drawer starts below the header instead of sliding under it, and is
     narrower. */
  .nav-menu {
    top: var(--header-height) !important;
    height: calc(100dvh - var(--header-height)) !important;
    padding-top: 12px !important;
    width: 60vw !important;
    max-width: 200px !important;
  }
}

/* ==========================================================================
   SKIP LINK - out of the page flow
   It sat in the flow as a 44px inline-block behind the fixed header, so
   every page started 44px down: the hero (100svh) overran the screen and
   its bottom edge and slide dots fell below the fold. Hidden off-screen
   now and brought in above the header only when a keyboard user tabs to it.
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--clr-primary);
  color: var(--clr-white);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   DESKTOP HERO - lighter overlay, fluid type (769px and up)
   The overlay darkened the left 70% of every photo at .80-.88, so the
   picture read as a dim green wash. It now only shades the band the copy
   sits on and is clear from about two-thirds across; legibility is carried
   by the remaining scrim plus a tighter text shadow rather than by dimming
   the whole image.

   Type was fixed at 64px / 18px from 1280px up, so on a 27" (2560px) screen
   the copy was a small block in a very large photo. Sizes and the panel
   width now scale with the viewport, bounded by its height too, so short
   laptop screens (1280x720, 1366x768) keep the whole group above the fold.
   Phones keep their own rules above.
   ========================================================================== */
@media (min-width: 769px) {
  .hero-glass-panel {
    max-width: clamp(560px, 46vw, 1240px);
  }

  .hero-glass-panel::before {
    font-size: clamp(140px, 9vw, 260px);
    top: -0.25em;
    left: -0.3em;
  }

  .hero-glass-eyebrow {
    font-size: clamp(12px, 0.45rem + 0.35vw, 17px);
    margin-bottom: clamp(20px, 1.6vw, 36px);
    color: var(--clr-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 10px rgba(0, 0, 0, 0.5);
  }

  .hero-glass-heading {
    font-size: clamp(2.6rem, min(1.25rem + 3.2vw, 8.5vh), 6.25rem);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 24px rgba(0, 0, 0, 0.45);
  }

  /* The name always takes its own line. Short titles ("In-School Language
     Labs", "Teachers' Training Program") used to fit on one, which carried
     the name out past the scrim onto bright walls and changed the block's
     height from slide to slide. */
  .hero-glass-heading > span[style*="nowrap"] {
    display: block;
  }

  /* The project name keeps the original brand gradient; a soft shadow
     (text-shadow is not drawn under background-clip:text) separates it
     from the lighter photo. */
  .hero-glass-heading em {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  }

  .hero-glass-desc {
    font-size: clamp(var(--fs-md), 0.6rem + 0.55vw, 1.5rem);
    max-width: 36em;
    color: var(--clr-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.45);
  }

  .hero-glass-actions {
    gap: clamp(16px, 1.2vw, 28px);
  }

  .hero-glass-actions .button,
  .hero-glass-actions #hero-explore-btn {
    font-size: clamp(var(--fs-base), 0.45rem + 0.45vw, 20px);
    padding: 0.8em 2.2em;
  }

  .hero-glass-actions .button svg {
    width: 1.1em;
    height: 1.1em;
  }
}

/* ==========================================================================
   TABLET + DESKTOP RHYTHM (769px and up)
   Sections carried 96-110px of padding at every width from a tablet to a
   27" screen, and 56px between each title and its content, so an iPad Air
   home page ran to ~16,800px. Spacing now scales with the viewport:
   ~52px on a portrait tablet, ~64px at 1280, ~80px at 1920+. Phones keep
   their own values from the blocks above.
   ========================================================================== */
@media (min-width: 769px) {
  :root {
    --section-pad: clamp(48px, 2rem + 2.5vw, 80px);
  }

  /* Sections that set their own padding inline keep it. */
  .section:not(.partners-section):not(.map-section):not([style*="padding"]),
  .about,
  .honor-board-section,
  .page-content:not([style*="padding"]),
  .gallery-page-content:not([style*="padding"]),
  .programs-page-content:not([style*="padding"]) {
    padding-top: var(--section-pad) !important;
    padding-bottom: var(--section-pad) !important;
  }

  .map-section {
    padding-bottom: var(--section-pad) !important;
  }

  .purpose-section {
    padding-top: clamp(40px, 1.5rem + 2vw, 64px) !important;
    padding-bottom: clamp(40px, 1.5rem + 2vw, 64px) !important;
  }

  .footer {
    padding-top: clamp(40px, 1.5rem + 2vw, 64px) !important;
  }

  .section-header {
    margin-bottom: clamp(28px, 1rem + 1.5vw, 48px) !important;
  }

  .section-header p {
    margin-top: clamp(20px, 0.75rem + 1vw, 32px);
  }

  /* Honor Board title: 48px uppercase wrapped to two lines up to ~1300px. */
  .honor-board-section .honor-board-header h2 {
    font-size: clamp(1.6rem, 0.9rem + 2vw, var(--fs-2xl)) !important;
    text-wrap: balance;
  }

  /* --- Project Updates: one row with arrows instead of all nine cards --- */
  .updates-carousel {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .updates-carousel .updates-grid {
    display: flex !important;
    flex: 1;
    min-width: 0;
    gap: var(--space-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* room for the cards' shadows, which overflow would otherwise clip */
    padding: 6px 4px 18px;
    scroll-padding-inline: 4px;
  }

  .updates-carousel .updates-grid::-webkit-scrollbar {
    display: none;
  }

  .updates-carousel .updates-card {
    flex: 0 0 calc((100% - var(--space-6)) / 2);
    min-width: 0;
    scroll-snap-align: start;
  }
}

@media (min-width: 1100px) {
  .updates-carousel .updates-card {
    flex-basis: calc((100% - 2 * var(--space-6)) / 3);
  }
}

@media (min-width: 2400px) {
  .updates-carousel .updates-card {
    flex-basis: calc((100% - 3 * var(--space-6)) / 4);
  }
}

@media (max-width: 768px) {
  .updates-carousel > .carousel-arrow {
    display: none !important;
  }
}

/* Tablets: the three About cards sat two-and-one with an empty cell. */
@media (min-width: 769px) and (max-width: 1023px) {
  .about-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--space-4) !important;
  }
}

/* ==========================================================================
   DESKTOP HEADER (1280px+)
   The nav switches on at 1280px with 40px gaps and could wrap "WHAT WE DO"
   onto two lines, which left the menu touching the WEF name on a 13"
   MacBook (1280px). Gaps now shrink with the width and labels never wrap.
   ========================================================================== */
@media (min-width: 1100px) {
  .nav-menu {
    gap: clamp(18px, 5vw - 40px, 40px) !important;
  }

  .nav-menu > a,
  .nav-dropdown > .dropdown-toggle {
    white-space: nowrap;
  }

  .header-logo {
    flex-shrink: 0;
    margin-right: clamp(24px, 3vw, 48px);
  }
}

/* Contact + footer, tablet and desktop. Below 1200px the contact block is a
   single column, so the three details stacked in a 740-900px column with
   40px under each and 72px before the form; they now sit in one row. */
@media (min-width: 769px) {
  .contact-grid {
    gap: clamp(32px, 1rem + 3vw, 72px) !important;
  }

  .contact-info .contact-detail {
    margin-bottom: var(--space-6) !important;
  }

  .footer-bottom {
    gap: var(--space-6);
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .contact-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .contact-info > :not(.contact-detail) {
    grid-column: 1 / -1;
  }

  .contact-info > p:not(.contact-detail) {
    margin-bottom: var(--space-8) !important;
  }

  .contact-info .contact-detail {
    margin-bottom: 0 !important;
    gap: var(--space-4) !important;
    min-width: 0;
  }

  .contact-info .contact-detail-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Phone header: the WEF name and tagline were cut with "..." at 320px and
   the tagline ran into the menu button at 375px (238px of text, 235px of
   room). A slightly smaller mark and tighter tagline tracking fit both in
   full from 360px; below that the name takes two lines and the tagline,
   which cannot fit at a legible size, is left out. */
@media (max-width: 400px) {
  .header-logo {
    gap: 10px !important;
  }

  .header-logo img {
    width: 36px !important;
    height: 36px !important;
  }

  .header-logo-text span:last-child {
    letter-spacing: 0.01em !important;
  }
}

@media (max-width: 359px) {
  .header-logo-text span:first-child {
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .header-logo-text span:last-child {
    display: none !important;
  }
}

/* Map filters on phones: one label style for both, and on the narrowest
   phones the two selects stack - side by side at 320px each got 126px,
   read "All Sp..." and sat 20px apart because one label wrapped. */
@media (max-width: 768px) {
  #centers-map .donor-search-label,
  #centers-map .legend-filters-title {
    font-family: var(--ff-heading) !important;
    font-weight: 700 !important;
    color: var(--clr-gray-500) !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  #centers-map .map-sidebar {
    align-items: flex-end !important;
  }
}

@media (max-width: 420px) {
  #centers-map .map-sidebar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #centers-map .map-sidebar > .map-controls-panel,
  #centers-map .map-sidebar > .map-legend-filters {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* Contact form: Name and Email side by side cut the placeholders off. */
@media (max-width: 400px) {
  .contact-form .form-row {
    grid-template-columns: 1fr !important;
  }
}

/* Honor Board below 360px: three 88px columns broke names over five lines
   and the "04 CENTERS" badge over two. */
@media (max-width: 359px) {
  .sponsors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Card carousels: three per view squeezed cards to ~256px on a portrait
   iPad Pro (1024px) - stats were cut off ("100 UPGR...") and the two
   badges on Completed Projects ran into each other. Two per view until
   1100px. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .card-carousel-track > * {
    flex-basis: 46% !important;
  }
}

/* Completed Projects cards: the status pill moves to the photo's bottom
   corner so it can never collide with the category badge at the top,
   and the card interior gives way on narrow cards. */
.ec-status {
  top: auto !important;
  bottom: 1rem;
}

.ec-content {
  padding-left: clamp(1rem, 4%, 2.5rem) !important;
  padding-right: clamp(1rem, 4%, 2.5rem) !important;
}

.ec-stat {
  min-width: 0;
}

.ec-stat span {
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .ec-stat span {
    letter-spacing: 0 !important;
  }
}

/* Detail-page titles: lines touched on phones. */
@media (max-width: 768px) {
  .ph-title {
    line-height: 1.18 !important;
  }
}

/* Inner-page banners: 160px above the title (90px of it under the fixed
   header) and 80px below at every desktop width. */
@media (min-width: 769px) {
  .page-hero:not([style*="padding-top"]) {
    padding-top: calc(var(--header-height) + clamp(32px, 1rem + 2.5vw, 64px)) !important;
  }

  .page-hero:not([style*="padding-bottom"]) {
    padding-bottom: clamp(32px, 1rem + 2.5vw, 64px) !important;
  }
}

/* Phone carousel arrows: at the card's vertical middle they sat on the
   title (Completed Projects: "UCA-SPCE" ran under the next arrow). They
   now centre on the card photo, which fills the top ~200px of every card
   that uses these carousels, where there is no text to cover. */
@media (max-width: 768px) {
  .card-carousel > .carousel-arrow {
    top: 76px !important;
  }
}

/* 1100-1279px (tablets in landscape, small laptops): a slightly more
   compact menu and logo so the full header fits on one line. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-menu > a,
  .nav-dropdown > .dropdown-toggle {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
  }

  .header-logo img {
    width: 46px !important;
    height: 46px !important;
  }

  .header-logo-text span:first-child {
    font-size: 1.1rem !important;
  }
}

/* Full menu (1100px+): submenus opened only on mouse hover, so on a touch
   tablet in landscape they could never open. A tapped toggle (.active, set
   in main.js) or keyboard focus now opens them too. */
@media (min-width: 1100px) {
  .nav-dropdown.active .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ==========================================================================
   TABLET MENU DRAWER (769-1099px) - same drawer as phones
   Portrait tablets (Galaxy Tab S7, iPad Air 4, iPad Pro 11/12.9) still got
   the old full-height green drawer: it covered the header, used 18px white
   links with a stray ▼ under every dropdown item, and wrapped "DONATE NOW".
   It now matches the phone drawer - white panel opening below the header,
   dark 15px links, tap-to-expand submenus - a little wider for the room.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1099px) {
  .nav-menu {
    top: var(--header-height) !important;
    height: calc(100dvh - var(--header-height)) !important;
    width: 280px !important;
    max-width: 40vw !important;
    padding: 16px 20px 32px !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: #fff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 1002 !important;
  }

  .nav-menu > a:not(.nav-donate),
  .nav-dropdown > .dropdown-toggle,
  #nav-menu > a:not(.nav-donate),
  #nav-menu .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    margin: 0 0 2px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--clr-gray-900) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* The desktop underline/caret pseudo-element sat under each item. */
  .nav-menu > a::after,
  .nav-dropdown > .dropdown-toggle::after {
    display: none !important;
  }

  .nav-dropdown {
    width: 100% !important;
    align-items: stretch !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .nav-menu > a:not(.nav-donate):hover,
    .nav-dropdown > .dropdown-toggle:hover {
      background: var(--clr-gray-100) !important;
      color: var(--clr-primary) !important;
    }
  }

  .nav-menu > a.active,
  .nav-dropdown > .dropdown-toggle.active {
    background: var(--clr-primary-lighter) !important;
    color: var(--clr-primary) !important;
    font-weight: 700 !important;
  }

  .nav-dropdown .dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 0 !important;
    background: var(--clr-gray-50, #f8f9fa) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 0 6px 12px !important;
    margin: 4px 0 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .nav-dropdown .dropdown-menu::after {
    display: none !important;
  }

  .nav-dropdown.active .dropdown-menu {
    display: flex !important;
  }

  .nav-dropdown .dropdown-menu a,
  #nav-menu .dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-sm, 6px) !important;
    color: var(--clr-gray-700) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: normal !important;
  }

  .nav-menu > a.nav-donate,
  #nav-menu > a.nav-donate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    min-height: 44px !important;
    margin: 14px 0 2px !important;
    padding: 10px 22px !important;
    border: 2px solid var(--clr-primary) !important;
    border-radius: var(--radius-full) !important;
    background: var(--clr-primary) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(14, 97, 29, 0.3) !important;
  }

  .mobile-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* While the drawer is open the header stays crisp white above the dimmed
   page (its glass background let the dark backdrop tint it grey). */
@media (max-width: 1099px) {
  #main-header:has(#nav-menu.active) {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   TABLETS (769-1099px): hero text at the bottom, like phones
   On portrait tablets the copy sat mid-screen over the photo; it now sits
   at the bottom above the slide dots, with the overlay darkening from the
   bottom up (as on phones) so the top of the photo stays clear.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1099px) {
  .hero-glass {
    align-items: flex-end !important;
  }

  .hero-glass-container {
    align-items: flex-end !important;
    padding-bottom: 88px !important;
  }

}

/* ==========================================================================
   HERO COPY AT THE FOOT OF THE PHOTO (tablet and desktop)
   The copy sits just above the slide dots, its parts 12-28px apart. As on
   phones, only the slide on screen takes up room (the one leaving is laid
   over the bottom edge while it fades), so a short slide leaves no hole.

   The title is one line on every slide, and from 1200px the description
   is too. Both are sized from the width of the copy's column (cqi, the
   container's width) so the LONGEST of the nine fits:
     title        "Herzing Center for Skills, Innovation and
                   Entrepreneurship"   27.0em -> 3.35cqi (room for 29.9em,
                   the italic name and the typing cursor included)
     description  Bright Beginnings'   71.2em -> 1.33cqi (room for 75em)
   Measured 2026-10-16. A longer title or description added in the admin
   would run past the edge; shorten it, or lower these two numbers.
   Below 1200px the description would drop under 14px on one line, so it
   wraps there; on phones both wrap.
   The buttons are centred under the copy, across the hero.
   ========================================================================== */
@media (min-width: 769px) {
  .hero-glass,
  .hero-glass-container {
    align-items: flex-end !important;
  }

  /* The slide dots sit 28px from the foot (inline style in index.php):
     this leaves about 24px between them and the buttons. */
  .hero-glass-container {
    padding-bottom: 72px !important;
    container-type: inline-size;
  }

  .hero-glass-panel {
    max-width: none;
    width: 100%;
  }

  .hero-glass-eyebrow {
    margin-bottom: clamp(12px, 1vw, 20px);
  }

  .hero-text-slider {
    display: block;
    position: relative;
    margin-bottom: 0;
  }

  .hero-text-slide:not(.active) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .hero-text-slide .hero-glass-heading {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: min(clamp(2.6rem, min(1.25rem + 3.2vw, 8.5vh), 6.25rem), 3.35cqi);
  }

  /* The project name follows its lead on the same line. */
  .hero-glass-heading > span[style*="nowrap"] {
    display: inline;
  }

  /* The description and the buttons carry inline margins in index.php. */
  .hero-text-slide .hero-glass-desc {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
  }

  .hero-glass-actions {
    justify-content: center;
    width: 100%;
    margin-top: 28px !important;
  }
}

@media (min-width: 1200px) {
  .hero-text-slide .hero-glass-desc {
    max-width: none;
    white-space: nowrap;
    font-size: min(clamp(var(--fs-md), 0.6rem + 0.55vw, 1.5rem), 1.33cqi);
  }
}

/* The copy is centred, in line with the centred buttons, at every width.
   The faint quote mark that hung off its left edge goes: centred text has
   no left edge for it to mark. On phones the panel is a flex column, so the
   label (a full-width row there) centres its own content. */
.hero-glass-panel {
  text-align: center;
}

.hero-glass-eyebrow {
  justify-content: center;
}

.hero-glass-desc {
  margin-inline: auto;
}

.hero-glass-panel::before {
  display: none;
}

/* A light black gradient rising from the foot of the photo, behind the
   copy, so the white text reads on bright pictures; the top half of the
   photo stays clear. Drawn over the slides inside the slideshow, below the
   text, the buttons and the dots. */
.hero-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.32) 28%,
    rgba(0, 0, 0, 0.1) 48%,
    rgba(0, 0, 0, 0) 62%);
}

/* Phones: the copy covers more of the screen's height. */
@media (max-width: 768px) {
  .hero-slideshow::after {
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0.36) 32%,
      rgba(0, 0, 0, 0.12) 54%,
      rgba(0, 0, 0, 0) 68%);
  }
}

/* ==========================================================================
   CARD CAROUSELS: no vertical scrolling
   Cards off to the side of a carousel never enter the viewport, so their
   scroll-reveal (a 30-40px downward offset until seen) never ran; they
   stayed low and made every card row scroll vertically by ~38px under the
   mouse wheel. Cards in a carousel are always in place, and the rows only
   scroll sideways. The padding (cancelled by negative margin, so layout is
   unchanged) keeps room for the hover lift and card shadows.
   ========================================================================== */
.card-carousel-track .reveal,
.card-carousel-track .reveal-left,
.card-carousel-track .reveal-right,
.updates-grid .reveal {
  opacity: 1 !important;
  transform: none;
  transition-property: transform, box-shadow !important;
}

.card-carousel-track,
.updates-carousel .updates-grid {
  overflow-y: hidden !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
  margin-top: -12px !important;
  margin-bottom: -24px !important;
}

/* ==========================================================================
   SECTION HEADINGS: tighter title -> paragraph -> content (769px and up)
   Title to paragraph was 42px and heading to content 38px, plus a further
   72px above the WEF Beginnings timeline and 56px above Project Updates.
   ========================================================================== */
@media (min-width: 769px) {
  .section-header h2 {
    margin-bottom: 12px !important;
  }

  .section-header p {
    margin-top: 14px !important;
  }

  .section-header {
    margin-bottom: clamp(20px, 0.5rem + 1vw, 32px) !important;
  }

  .section-header + .beginnings-timeline,
  .section-header + .updates-grid-container,
  .section-header + .card-carousel,
  .section-header + .about-grid {
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   PHONES: Project Updates works like the Projects carousel
   It had its own one-card view with differently styled arrow buttons that
   stepped through cards in step with the hero slideshow. It is now the same
   swipeable row as Our Active Projects - neighbouring cards peeking in, the
   same round arrows over the photo, snap to each card - driven by the same
   initCardCarousels() code (main.js) as on tablets and desktop.
   ========================================================================== */
@media (max-width: 768px) {
  .mobile-updates-nav {
    display: none !important;
  }

  .updates-carousel {
    position: relative;
    display: block;
    margin-inline: calc(50% - 50vw) !important;
    padding: 0 !important;
  }

  .updates-carousel .updates-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 12px 10% 24px !important;
    margin: -12px 0 -24px !important;
    scroll-padding-inline: 10%;
  }

  .updates-carousel .updates-grid::-webkit-scrollbar {
    display: none;
  }

  .updates-carousel .updates-card,
  .updates-carousel .updates-card.mobile-active {
    display: flex !important;
    flex: 0 0 100% !important;
    min-width: 0;
    scroll-snap-align: center;
  }

  /* Same buttons as .card-carousel > .carousel-arrow, centred on the
     200px card photo. */
  .updates-carousel > .carousel-arrow {
    display: flex !important;
    position: absolute;
    top: 90px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
  }

  .updates-carousel > .carousel-arrow--prev {
    left: 4px;
  }

  .updates-carousel > .carousel-arrow--next {
    right: 4px;
  }
}

/* ==========================================================================
   SECTION TOPS: less space between a section's edge and its title
   Measured with each section scrolled into view (headings settled): 68px at
   1440 and 52px on tablets for most sections, 128px on the Honor Board (its
   card added 56px), 200px on Donate (text column centred against the taller
   donation card), 186px above Our Team's title. Phones were already 20px.
   ========================================================================== */
@media (min-width: 769px) {
  :root {
    --section-pad: clamp(32px, 1rem + 1.6vw, 52px);
  }

  .honor-board-card {
    padding-top: clamp(24px, 0.75rem + 1.2vw, 36px) !important;
  }

  .donate-main-grid {
    align-items: start !important;
  }

  .map-card {
    padding-top: clamp(28px, 1rem + 1.4vw, 44px) !important;
  }

  .purpose-section {
    padding-top: clamp(28px, 1rem + 1.2vw, 44px) !important;
    padding-bottom: clamp(28px, 1rem + 1.2vw, 44px) !important;
  }

  .page-hero:not([style*="padding-top"]),
  .team-page-header {
    padding-top: calc(var(--header-height) + clamp(24px, 0.5rem + 2vw, 44px)) !important;
  }

  .page-hero:not([style*="padding-bottom"]),
  .team-page-header {
    padding-bottom: clamp(24px, 0.5rem + 2vw, 44px) !important;
  }
}

@media (max-width: 768px) {
  .honor-board-card {
    padding-top: 20px !important;
  }
}

@media (min-width: 769px) {
  .partners-section {
    padding-top: clamp(28px, 1rem + 1vw, 40px) !important;
    padding-bottom: clamp(28px, 1rem + 1vw, 40px) !important;
  }
}

/* ==========================================================================
   INTERNAL PAGE BANNERS WITH A HEADER IMAGE
   Admin: Page Content -> (page) -> Header image. pageHero() in
   includes/content.php adds .has-bg-image, the --bg-image custom property
   and two layers under the text:
     .page-hero__bg       the photo, cover-cropped around its centre
     .page-hero__overlay  the brand green gradient, dense enough that the
                          white heading and intro stay readable on any photo
     .container           the text, above both
   Banners without an image are unchanged (the plain green gradient).
   ========================================================================== */
.page-hero.has-bg-image,
.team-page-header.has-bg-image {
  position: relative;
  isolation: isolate;
  background: var(--clr-primary-deeper);
}

.page-hero__bg,
.page-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero__bg {
  z-index: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero__overlay {
  z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 26, 12, 0.55) 0%, rgba(6, 26, 12, 0) 55%),
    linear-gradient(160deg,
      rgba(8, 36, 17, 0.9) 0%,
      rgba(12, 60, 26, 0.8) 50%,
      rgba(14, 97, 29, 0.68) 100%);
}

/* The decorative glow / pattern / grain pseudo-elements sit between the
   overlay and the text; the text is always on top. */
.page-hero.has-bg-image::before,
.page-hero.has-bg-image::after,
.team-page-header.has-bg-image::before {
  z-index: 2;
}

.page-hero.has-bg-image > .container,
.team-page-header.has-bg-image > .container {
  position: relative;
  z-index: 3;
}

.page-hero.has-bg-image h1,
.page-hero.has-bg-image p,
.team-page-header.has-bg-image h1,
.team-page-header.has-bg-image p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Core Purpose banner (home) with a cover photo - same photo + green
   overlay layers as the internal page banners (pageHero('home')). Its own
   blurred tint would smear the photo, so it steps aside; the pattern
   (::before, z 2) and the text (z 3) stay on top. */
.purpose-section.has-bg-image {
  isolation: isolate;
  background: var(--clr-primary-deeper);
}

.purpose-section.has-bg-image .purpose-overlay {
  display: none;
}

.purpose-section.has-bg-image .purpose-badge,
.purpose-section.has-bg-image .purpose-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Phones load the 768px variant of a banner photo when one exists
   (pageHero() sets --bg-image-sm; it equals --bg-image otherwise). */
@media (max-width: 768px) {
  .page-hero__bg {
    background-image: var(--bg-image-sm, var(--bg-image));
  }
}

/* ==========================================================================
   PROJECT CARDS (home and Active Projects): one size, one card per arrow press
   Card height followed its own text (a title on one or two lines, two to
   six lines of summary), so the row was 20-56px ragged. Every card now
   stretches to the tallest in the row, the title keeps a two-line slot so
   the summaries start level, and the summary grows so the stats row sits
   on the same baseline in every card.
   ========================================================================== */
.projects-grid.card-carousel-track {
  align-items: stretch !important;
}

.projects-grid.card-carousel-track > .uiverse-card {
  height: auto !important;
}

.projects-grid .uiverse-card .bottom-section .title {
  line-height: 1.3;
  min-height: 2.6em;
}

.projects-grid .uiverse-card .card-desc {
  flex-grow: 1;
}

/* Tablet and desktop: cards snap by their left edge. Centre snapping with a
   row that starts left-aligned made the first arrow press jump ~1.5 cards
   and re-centre, and every later press land off the card edges. Phones keep
   centre snapping (one card in view, neighbours peeking). */
@media (min-width: 769px) {
  .card-carousel-track > * {
    scroll-snap-align: start !important;
  }
}

/* ==========================================================================
   GALLERY: project filters, project-named tiles, Highlights slideshow
   ========================================================================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-8);
}

.gallery-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-full);
  background: var(--clr-white);
  color: var(--clr-gray-700);
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base) var(--ease-smooth),
    color var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-filter:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
  }
}

.gallery-filter.is-active {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
}

.gallery-filter-count {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
}

/* Phones: one swipeable row of filters instead of five stacked rows. */
@media (max-width: 768px) {
  .gallery-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 2px 16px;
    margin-bottom: var(--space-6);
  }

  .gallery-filters::-webkit-scrollbar {
    display: none;
  }

  .gallery-filter {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.gallery-item[hidden] {
  display: none !important;
}

/* Project name always on the photo (not only on hover): the tiles are
   labelled by project now, so the label is the content. */
.gallery-item-overlay {
  opacity: 1 !important;
  background: linear-gradient(to top, rgba(15, 46, 28, 0.82), rgba(15, 46, 28, 0) 62%) !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  padding: var(--space-4) !important;
}

.gallery-item-overlay .gallery-item-project {
  font-size: var(--fs-sm, 14px);
  font-weight: 700;
  line-height: 1.3;
}

.gallery-item-overlay .gallery-item-caption {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.85;
}

/* The big tile: Highlights. Takes the featured 2x2 spot the first photo
   used to have. */
.gallery-highlights {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  min-height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--clr-gray-100);
}

.gallery-highlights-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease-smooth);
}

.gallery-highlights-slide.is-active {
  opacity: 1;
}

.gallery-highlights::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 46, 28, 0.85), rgba(15, 46, 28, 0) 55%);
  pointer-events: none;
}

.gallery-highlights-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--clr-accent);
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gallery-highlights-caption {
  position: absolute;
  left: 20px;
  right: 124px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--clr-white);
}

.gallery-highlights-caption strong {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
}

.gallery-highlights-caption span {
  font-size: 14px;
  opacity: 0.85;
}

.gallery-highlights-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.gallery-highlights-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--clr-primary);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-highlights-btn:hover {
    background: var(--clr-white);
  }
}

@media (max-width: 480px) {
  .gallery-highlights {
    min-height: 260px;
  }

  .gallery-highlights-caption {
    left: 14px;
    right: 110px;
    bottom: 14px;
  }

  .gallery-highlights-caption strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-highlights-slide {
    transition: none;
  }
}

/* ==========================================================================
   MAP: district filter
   ========================================================================== */
.map-sidebar .map-district-panel + .map-controls-panel {
  margin-top: var(--space-3);
}

/* Phones: district on its own full-width row, sponsor and category beside
   each other below it, as before. */
@media (max-width: 768px) {
  #centers-map .map-sidebar > .map-district-panel {
    flex: 1 1 100% !important;
  }
}

/* Phones: District and Category side by side on the first row, Sponsor
   (long names) full width below. Replaces the wrapping flex rows above,
   including the one-per-row stack under 420px. */
@media (max-width: 768px) {
  #centers-map .map-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 10px !important;
    align-items: end !important;
  }

  #centers-map .map-sidebar > * {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
  }

  #centers-map .map-sidebar > .map-district-panel {
    grid-column: 1;
    grid-row: 1;
  }

  #centers-map .map-sidebar > .map-legend-filters {
    grid-column: 2;
    grid-row: 1;
  }

  #centers-map .map-sidebar > .map-district-panel + .map-controls-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #centers-map .map-sidebar > .map-no-results {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* Map controls in one row along the foot of the map, clear of the
     credits line: zoom and View All Centers on the left, map style on the
     right, all 40px tall. */
  #map .leaflet-top.leaflet-left,
  #map .leaflet-top.leaflet-right {
    top: auto;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #map .leaflet-top.leaflet-left {
    left: 10px;
    right: auto;
  }

  #map .leaflet-top.leaflet-right {
    left: auto;
    right: 10px;
  }

  #map .leaflet-top .leaflet-control {
    float: none;
    margin: 0;
  }

  #map .leaflet-control-zoom {
    display: flex;
  }

  #map .leaflet-control-zoom a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-bottom: 0;
  }

  #map .leaflet-control-zoom a:first-child {
    border-right: 1px solid var(--clr-gray-200);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  #map .leaflet-control-zoom a:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  #map .leaflet-control-custom {
    display: flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
  }

  #map .leaflet-control-layers-toggle {
    width: 40px;
    height: 40px;
  }
}

/* Half-width District select: the pin icon gave way to the text, which was
   cut to "All Di..." (the label above already says "District"). */
@media (max-width: 400px) {
  #centers-map .map-district-panel .donor-select-icon {
    display: none;
  }

  #centers-map .map-district-panel .donor-select-input {
    padding-left: 10px;
  }
}

/* 320-360px: "All Centers" alone so zoom, it and the map style button fit
   in one row; the two selects drop to 15px so "All Districts" fits. */
@media (max-width: 360px) {
  #map .map-see-all-verb {
    display: none;
  }

  #centers-map .map-district-panel .donor-select-input,
  #centers-map .category-select-input {
    font-size: 15px;
  }
}

/* Project cards (home and Active Projects) fill the row exactly - three per
   view from 1100px, two on tablets - so the last visible card is never cut
   off at the row's edge.
   31%/46% of the row plus the gaps came to slightly more than 100%. */
@media (min-width: 769px) {
  .projects-grid.card-carousel-track {
    gap: 28px !important;
  }

  .projects-grid.card-carousel-track > * {
    flex: 0 0 calc((100% - 28px) / 2) !important;
  }
}

@media (min-width: 1100px) {
  .projects-grid.card-carousel-track > * {
    flex-basis: calc((100% - 56px) / 3) !important;
  }
}

@media (min-width: 2400px) {
  .projects-grid.card-carousel-track > * {
    flex-basis: calc((100% - 84px) / 4) !important;
  }
}

/* ==========================================================================
   PROJECT PAGES (includes/layout/project-page.php)
   One layout for all nine projects, in the site's own colours and fonts:
   cover photo with the name on the left, impact line, photo beside the
   before/after slider, alternating sections, photo carousel.
   ========================================================================== */
.project-page {
  --pp-green: var(--clr-primary);
  --pp-green-deep: var(--clr-primary-deeper);
  --pp-green-dark: var(--clr-primary-dark);
  --pp-green-soft: var(--clr-primary-lighter);
  --pp-orange: var(--clr-accent);
  --pp-orange-light: var(--clr-accent-light);
  --pp-ink: var(--clr-gray-900, #111827);
  --pp-text: var(--clr-gray-600, #4b5563);
  background: var(--clr-white);
  overflow-x: clip;
}

/* --- Cover: the project's photo, its name on the left ----------------- */
.pp-cover {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 62vh, 640px);
  background: var(--pp-green-deep);
  overflow: hidden;
  isolation: isolate;
}

.pp-cover-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.pp-cover-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Deep green from the left, where the name sits, clearing towards the
   right so the photo shows. */
.pp-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 48, 25, 0.94) 0%, rgba(18, 48, 25, 0.82) 34%, rgba(18, 48, 25, 0.35) 64%, rgba(18, 48, 25, 0.08) 100%),
    linear-gradient(0deg, rgba(18, 48, 25, 0.55) 0%, rgba(18, 48, 25, 0) 40%);
}

/* The arc in the corner of the reference banner. */
.pp-cover-arc {
  position: absolute;
  z-index: 0;
  top: -140px;
  left: -140px;
  width: 360px;
  aspect-ratio: 1;
  border: 18px solid transparent;
  border-right-color: var(--pp-orange-light);
  border-bottom-color: var(--pp-orange-light);
  border-radius: 50%;
  transform: rotate(-10deg);
  opacity: 0.9;
  pointer-events: none;
}

.pp-cover-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 40px);
  padding-bottom: 64px;
}

.pp-cover-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pp-cover-back:hover {
  color: var(--clr-white);
}

.pp-cover-title {
  max-width: 640px;
  margin: 22px 0 26px;
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pp-cover-name {
  display: block;
}

/* On the cover the name stays white; the line underneath is the colour. */
.pp-cover-name .pp-hl {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
  background: none;
  color: inherit;
}

.pp-cover-kicker,
.pp-cover-sub {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.pp-cover-kicker {
  margin-bottom: 10px;
}

.pp-cover-sub {
  margin-top: 20px;
}

/* The drawn decoration line under the name. */
.pp-swoosh {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.26em;
  overflow: visible;
}

.pp-swoosh path {
  fill: none;
  stroke: var(--pp-orange-light);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: pp-draw 1.1s 0.3s ease forwards;
}

@keyframes pp-draw {
  to { stroke-dashoffset: 0; }
}

/* --- Impact line ------------------------------------------------------- */
.pp-stats {
  padding: 36px 0;
  background: linear-gradient(120deg, var(--pp-green-deep), var(--pp-green-dark) 55%, var(--pp-green));
  color: var(--clr-white);
}

.pp-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pp-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Short divider between the numbers, as in the reference. */
.pp-stat + .pp-stat::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -12px;
  width: 1px;
  height: 44px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.28);
}

.pp-stat-value {
  display: block;
  font-family: var(--ff-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pp-stat-value.is-text {
  padding-top: 0.35em;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}

/* A place name breaks evenly onto two lines: "Upper & Lower" / "Chitral". */
.pp-stat--text .pp-stat-value {
  max-inline-size: 14ch;
  margin-inline: auto;
  text-wrap: balance;
}

.pp-stat-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm);
  font-weight: 500;
}












/* --- Alternating sections ---------------------------------------------- */
.pp-feature {
  padding: clamp(32px, 4vw, 52px) 0;
}

.pp-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1080px;
}

.pp-feature--flip .pp-feature-media {
  order: 2;
}

.pp-feature-media,
.pp-feature-text {
  min-width: 0;
}

.pp-feature-photo,
.pp-feature-panel {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.4);
}

.pp-feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-feature-photo figcaption,

/* Stands in for a photo the project does not have yet. */
.pp-feature-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--pp-green), var(--pp-green-dark));
  color: var(--clr-white);
}

.pp-feature-panel--1 { background: linear-gradient(135deg, var(--pp-orange), var(--clr-accent-dark, #964d12)); }
.pp-feature-panel--2 { background: linear-gradient(135deg, var(--pp-green-dark), var(--pp-green-deep)); }

.pp-feature-panel::after {
  content: '';
  position: absolute;
  right: -16%;
  bottom: -28%;
  width: 66%;
  aspect-ratio: 1;
  border: 24px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.pp-feature-panel-num {
  position: absolute;
  top: 16px;
  left: 22px;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--ff-heading);
  font-size: clamp(2.6rem, 2rem + 2vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.pp-feature-panel img {
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.pp-feature-panel-label {
  max-width: 80%;
  font-family: var(--ff-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

/* Small label with the orange underline, as in the reference. */
.pp-eyebrow {
  display: inline-block;
  padding-bottom: 2px;
  background: linear-gradient(var(--pp-orange-light), var(--pp-orange-light)) no-repeat 0 100% / 100% 4px;
  color: var(--pp-ink);
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 700;
}

.pp-heading {
  margin: 12px 0 18px;
  color: var(--pp-ink);
  font-family: var(--ff-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* The coloured half of a heading: "Bring Empowerment and Hope". */
.pp-hl {
  color: var(--pp-green);
}

.pp-prose p {
  margin: 0 0 1em;
  color: var(--pp-text);
  font-size: 1rem;
  line-height: 1.8;
}

.pp-prose h3 {
  margin: 1.4em 0 0.6em;
  color: var(--pp-ink);
  font-family: var(--ff-heading);
  font-size: 1.1rem;
}

.pp-prose ul {
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
}

.pp-prose li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  color: var(--pp-text);
  line-height: 1.7;
}

.pp-prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pp-green-soft);
}

.pp-prose li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: calc(0.3em + 4px);
  width: 5px;
  height: 8px;
  border: solid var(--pp-green);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

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

/* --- Photo carousel: centre slide large, neighbours turned away ------- */
.pp-gallery {
  padding: clamp(40px, 4vw, 60px) 0 clamp(24px, 3vw, 40px);
  background: var(--pp-green-soft);
  overflow: hidden;
}

.pp-center-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}

.pp-coverflow {
  --pp-slide-w: min(560px, 62vw);
  position: relative;
}

.pp-coverflow-stage {
  position: relative;
  height: calc(var(--pp-slide-w) * 0.66);
  perspective: 1400px;
  touch-action: pan-y;
}

.pp-coverflow-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pp-slide-w);
  height: 100%;
  margin: 0 0 0 calc(var(--pp-slide-w) / -2);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: var(--clr-gray-200, #e5e7eb);
  box-shadow: 0 26px 46px -26px rgba(15, 23, 42, 0.5);
  cursor: pointer;
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
  will-change: transform;
}

.pp-coverflow-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.pp-coverflow-slide figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--pp-ink);
  font-family: var(--ff-heading);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pp-coverflow-slide.is-active figcaption {
  opacity: 1;
}

.pp-coverflow-arrow {
  position: absolute;
  top: calc(var(--pp-slide-w) * 0.33 - 24px);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--clr-white);
  color: var(--pp-green);
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.5);
  cursor: pointer;
}

.pp-coverflow-arrow--prev { left: max(16px, calc(50% - var(--pp-slide-w) / 2 - 24px)); }
.pp-coverflow-arrow--next { right: max(16px, calc(50% - var(--pp-slide-w) / 2 - 24px)); }

.pp-coverflow-dots {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* A 44px button with the small dot drawn inside it. */
.pp-coverflow-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pp-coverflow-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--clr-gray-300, #d1d5db);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.pp-coverflow-dot.is-active::before {
  width: 28px;
  background: var(--pp-orange);
}

/* --- Previous / next project ----------------------------------------- */
.pp-pager {
  padding: 28px 0 40px;
  border-top: 1px solid var(--clr-gray-200, #e5e7eb);
}

.pp-pager-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.pp-pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  text-decoration: none;
}

.pp-pager-link--next {
  align-items: flex-end;
  text-align: right;
}

.pp-pager-label {
  color: var(--clr-gray-500, #6b7280);
  font-family: var(--ff-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-pager-name {
  color: var(--pp-green);
  font-family: var(--ff-heading);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
}

/* --- Tablet and phone ---------------------------------------------------- */
@media (max-width: 768px) {
  /* A near-square cover under the header: the name and tags sit on the
     photo's lower part, over a light shade that clears by the middle. */
  .pp-cover {
    align-items: stretch;
    min-height: 0;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  }

  .pp-cover-media {
    top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  }

  .pp-cover::after {
    top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    background:
      linear-gradient(0deg, rgba(18, 48, 25, 0.82) 0%, rgba(18, 48, 25, 0.4) 38%, rgba(18, 48, 25, 0) 62%),
      linear-gradient(180deg, rgba(18, 48, 25, 0.35) 0%, rgba(18, 48, 25, 0) 22%);
  }

  .pp-cover-arc {
    top: -110px;
    left: -110px;
    width: 240px;
    border-width: 12px;
  }

  .pp-cover-inner {
    justify-content: flex-end;
    min-height: clamp(330px, 92vw, 460px);
    padding-top: 4px;
    padding-bottom: 18px;
  }

  /* The back link stays at the top of the photo; the rest sits at its foot. */
  .pp-cover-back {
    margin-bottom: auto;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }

  .pp-cover-title {
    margin: 10px 0 12px;
    font-size: clamp(1.6rem, 1.1rem + 3vw, 2.2rem);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  }

  .pp-cover-sub {
    margin-top: 10px;
    font-size: var(--fs-base, 1rem);
  }

  .pp-stats {
    padding: 20px 0;
  }

  /* Tighter rhythm on phones, so less scrolling. */
  .pp-feature {
    padding: 22px 0;
  }

  .pp-feature-grid {
    gap: 16px;
  }

  .pp-heading {
    margin: 8px 0 12px;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem);
  }

  .pp-prose p {
    margin-bottom: 0.8em;
    line-height: 1.65;
  }

  .pp-compare {
    padding: 28px 0;
  }

  .pp-center-head {
    margin-bottom: 18px;
  }

  .pp-gallery {
    padding: 28px 0 16px;
  }

  .pp-coverflow-dots {
    margin-top: 10px;
  }

  /* The photo caption stays on one line, smaller, cut with an ellipsis. */
  .pp-coverflow-slide figcaption {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Centred headings ("Life at ...", "Before & After") on one line where
     the width allows. */
  .pp-center-head .pp-heading {
    font-size: clamp(1.15rem, 0.8rem + 1.9vw, 1.5rem);
  }

  .pp-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp-feature--flip .pp-feature-media {
    order: 0;
  }

  .pp-feature-photo {
    aspect-ratio: 16 / 11;
  }

  /* The colour panel is only a stand-in for a photo: keep it short. */
  .pp-feature-panel {
    aspect-ratio: 2 / 1;
    gap: 8px;
  }

  .pp-feature-panel img {
    width: 64px;
    height: 64px;
  }

  .pp-coverflow {
    --pp-slide-w: 76vw;
  }

  .pp-coverflow-arrow {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 560px) {
  /* The numbers stay on one line, as on the desktop, just smaller. */
  .pp-stats {
    padding: 28px 0;
  }

  /* One row. A number keeps its own width; the words (a place name)
     give way and wrap, so "Upper & Lower Chitral" takes two lines. */
  .pp-stats-row {
    display: flex;
    gap: 12px;
  }

  .pp-stat {
    flex: 1 0 auto;
  }

  .pp-stat--text {
    flex-shrink: 1;
    min-width: min-content;
  }

  .pp-stat + .pp-stat::before {
    left: -6px;
    height: 36px;
  }

  .pp-stat-value {
    font-size: clamp(1.05rem, 0.7rem + 1.8vw, 1.4rem);
  }

  .pp-stat-value.is-text {
    padding-top: 0.15em;
    font-size: 13px;
    line-height: 1.25;
  }

  .pp-stat-label {
    margin-bottom: 4px;
    font-size: var(--fs-xs);
  }

  /* Previous and next as two cards side by side. */
  .pp-pager {
    padding: 16px 0 24px;
  }

  .pp-pager-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }

  .pp-pager-link {
    max-width: none;
    justify-content: center;
    min-height: 44px;
    padding: 14px;
    border: 1px solid var(--clr-gray-200, #e5e7eb);
    border-radius: var(--radius-md);
    background: var(--pp-green-soft);
  }

  .pp-pager-label {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
  }

  /* "Previous" / "Next" alone, so the label fits the narrow card. */
  .pp-pager-word {
    display: none;
  }

  /* Many photos: the dots share the width instead of running off the edge. */
  .pp-coverflow-dots {
    padding: 0 16px;
  }

  .pp-coverflow-dot {
    flex: 0 1 44px;
    min-width: 0;
  }

  .pp-pager-name {
    font-size: var(--fs-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-swoosh path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .pp-coverflow-slide {
    transition: none;
  }
}

/* The corner arc sits over the photo side of the cover, clear of the
   back link and location pill on the left. */
.pp-cover-arc {
  top: -150px;
  right: -120px;
  left: auto;
  border-color: transparent;
  border-bottom-color: var(--pp-orange-light);
  border-left-color: var(--pp-orange-light);
  transform: rotate(10deg);
}

@media (max-width: 768px) {
  .pp-cover-arc {
    top: -120px;
    right: -120px;
    left: auto;
  }
}

/* Before & after: the full-width comparison right after the impact line. */
.pp-compare {
  padding: clamp(36px, 4vw, 56px) 0;
  background: var(--clr-white);
}

.pp-compare-frame {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 48px -26px rgba(15, 23, 42, 0.45);
}

.pp-compare-frame .compare-slider {
  margin: 0;
}

.pp-compare .pp-compare-hint {
  margin: 14px 0 0;
  color: var(--pp-text);
  font-size: 14px;
  text-align: center;
}

/* The project's video in a section's picture slot. */
.pp-feature-video {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.4);
}

/* Carousel slide standing in for photos not added yet. */
.pp-coverflow-slide.is-placeholder {
  cursor: default;
  background: linear-gradient(135deg, var(--clr-white), var(--pp-green-soft));
  border: 2px dashed color-mix(in srgb, var(--pp-green) 35%, #ffffff);
}

.pp-coverflow-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--pp-green);
  font-family: var(--ff-heading);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* ============================================
   Donate page
   ============================================ */
.donate {
  padding: 130px 0 var(--space-18);
  background: var(--clr-off-white);
}

.donate [hidden] {
  display: none;
}

.donate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.donate-panel {
  padding: var(--space-12) var(--space-10);
  min-width: 0;
}

.donate-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--clr-accent-text);
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.donate-panel h1 {
  margin: 0 0 var(--space-6);
  color: var(--clr-primary-dark);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.15;
}

.donate-notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  background: var(--clr-accent-subtle);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius-md);
  color: var(--clr-gray-800);
  font-size: var(--fs-sm);
}

.donate-select-form label,
.donate-options legend,
.donate-custom label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--clr-gray-800);
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.donate-select-row {
  display: flex;
  gap: var(--space-2);
}

.donate select,
.donate-amount-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--clr-white);
  color: var(--clr-gray-900);
  font-family: var(--ff-body);
  font-size: 1rem;
}

.donate select {
  flex: 1 1 auto;
  min-width: 0;
}

.donate select:focus-visible,
.donate-amount-wrap input:focus-visible,
.donate-option input:focus-visible,
.donate-continue:focus-visible,
.donate-show:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
}

.donate-show {
  flex: 0 0 auto;
  padding: 12px 20px;
}

.donate-description {
  margin: var(--space-4) 0 var(--space-6);
  color: var(--clr-gray-600);
  line-height: 1.65;
}

.donate-options {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
  min-width: 0;
}

.donate-options legend {
  padding: 0;
}

.donate-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--radius-md);
  color: var(--clr-gray-800);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-smooth), background-color var(--duration-fast) var(--ease-smooth);
}

.donate-option input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--clr-primary);
}

.donate-option:has(input:checked) {
  border-color: var(--clr-primary);
  background: var(--clr-primary-lighter);
}

@media (hover: hover) and (pointer: fine) {
  .donate-option:hover {
    border-color: var(--clr-primary-light);
  }
}

.donate-options.is-custom-only #donate-other-option {
  display: none;
}

.donate-custom {
  margin-top: var(--space-4);
}

.donate-amount-wrap {
  position: relative;
}

.donate-amount-wrap span {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  color: var(--clr-gray-600);
}

.donate-amount-wrap input {
  padding-left: var(--space-8);
}

.donate-amount-wrap input[aria-invalid="true"] {
  border-color: var(--clr-error);
}

.donate-hint {
  margin: var(--space-2) 0 0;
  color: var(--clr-gray-600);
  font-size: var(--fs-sm);
}

.donate-error {
  margin: var(--space-2) 0 0;
  color: var(--clr-error);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.donate-summary {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--clr-cream);
  border: 1px solid var(--clr-gray-200);
  border-radius: var(--radius-lg);
}

.donate-summary h2 {
  margin: 0 0 var(--space-2);
  color: var(--clr-primary-dark);
  font-size: var(--fs-md);
}

.donate-summary dl {
  margin: 0;
}

.donate-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--clr-gray-200);
}

.donate-summary dl > div:last-child {
  border-bottom: 0;
}

.donate-summary dt {
  color: var(--clr-gray-600);
}

.donate-summary dd {
  margin: 0;
  color: var(--clr-gray-900);
  font-weight: 700;
  text-align: right;
}

.donate-summary-note {
  margin: var(--space-4) 0 0;
  color: var(--clr-gray-700);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.donate-continue.is-disabled {
  background: var(--clr-gray-300);
  color: var(--clr-gray-700);
  box-shadow: none;
  cursor: not-allowed;
}

.donate-note {
  margin: var(--space-4) 0 0;
  color: var(--clr-gray-600);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.donate-visual {
  position: relative;
  min-height: 560px;
  background: var(--clr-primary-deeper);
}

.donate-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.donate-photo.is-changing {
  opacity: 0.4;
}

.donate-card {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  left: var(--space-6);
  padding: var(--space-6);
  background: var(--clr-primary-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  color: var(--clr-white);
}

.donate-card h2 {
  margin: 0 0 var(--space-2);
  color: var(--clr-white);
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.donate-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}

.donate-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.donate-stats:not(:empty) {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.donate-stats li {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

.donate-stats strong {
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
}

@media (max-width: 899px) {
  .donate {
    padding-top: 110px;
  }

  .donate-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .donate-visual {
    order: -1;
    min-height: 0;
    background: transparent;
  }

  .donate-photo {
    position: static;
    display: block;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .donate-card {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin: calc(var(--space-8) * -1) var(--space-4) 0;
    padding: var(--space-4);
  }

  .donate-panel {
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 480px) {
  .donate-select-row {
    flex-direction: column;
  }

  .donate-show {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .donate-photo,
  .donate-option {
    transition: none;
  }
}

/* Support band on project pages */
.pp-support {
  padding: var(--space-10) 0;
  background: var(--pp-green-soft);
}

.pp-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.pp-support h2 {
  margin: 0 0 var(--space-1);
  color: var(--pp-green-dark);
  font-size: var(--fs-lg);
}

.pp-support p {
  margin: 0;
  color: var(--pp-text);
}

/* The home page's Donate button, as it is: no stretching, no extra margin. */
.pp-support-button {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 640px) {
  .pp-support {
    padding: var(--space-6) 0;
  }

  .pp-support-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  /* Short sentences kept to one line where the width allows. */
  .pp-support h2 {
    font-size: clamp(1rem, 0.8rem + 1.1vw, var(--fs-lg));
  }

  .pp-support p {
    font-size: var(--fs-sm);
  }

  .pp-support-button {
    padding: 0.4rem 1.4rem;
    font-size: var(--fs-sm);
  }

  .pp-support-button svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.5rem;
  }
}

/* A link to a page switched off in admin -> Pages On/Off
   (includes/page-visibility.php turns it into a <span>): still readable,
   clearly not clickable. */
.link-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}