/* RSU site styles - shared by every page. (Moved unchanged from the former single-file index.html, plus the additions at the end.) */
/* ═══════════════════════════════════════════════════════
   RSU — CORPORATE NONPROFIT REDESIGN
   Forest Green + Ivory · Structured · Professional
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

:root {
  /* Core Palette - matched to RSU logo green */
  --green-900: #0F3D1C;
  --green-800: #145226;
  --green-700: #1A6B30;
  --green-600: #1F8438;
  --green-500: #2E9E44;
  --green-400: #3FB84F;
  --green-300: #6BCB79;
  --green-200: #A0E0AA;
  --green-100: #D2F0D6;
  --green-50:  #EFFAF0;

  --ivory:     #F8F5EE;
  --ivory-dark:#EDE8DC;
  --ivory-mid: #D9D2C2;
  --warm-white:#FDFBF7;

  --gold:      #C49A2A;
  --gold-light:#E8C45A;
  --gold-pale: #F5E7B2;

  --ink:       #111A15;
  --ink-soft:  #2C3A31;
  --text-body: #3D4F43;
  --text-muted:#6B7D71;
  --text-hint: #9BAA9F;

  --border:    rgba(26,77,52,0.12);
  --border-md: rgba(26,77,52,0.2);
  --shadow-sm: 0 1px 3px rgba(13,43,31,0.06), 0 1px 2px rgba(13,43,31,0.04);
  --shadow-md: 0 4px 16px rgba(13,43,31,0.08), 0 2px 6px rgba(13,43,31,0.05);
  --shadow-lg: 0 12px 40px rgba(13,43,31,0.12), 0 4px 12px rgba(13,43,31,0.06);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;
}

html { scroll-behavior: smooth; }


body {
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--text-body);
  overflow-x: hidden;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── PAGE SYSTEM ── */
.page { display:none; animation: fadeUp 0.5s ease both; }
.page.active { display:block; }
/* The nav is fixed (72px tall), so every inner page starts below it —
   otherwise the first heading sits underneath the nav on phones. */
.page:not(#page-home) { padding-top: 72px; }
.page:not(#page-home) > section:first-child { padding-top: 40px; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Brief crossfade-out for the page being navigated away from, so
   showPage() doesn't just instantly vanish it — see the .leaving
   class added/removed in showPage() below. */
.page.leaving {
  animation: fadeDown 0.16s ease forwards;
  pointer-events: none;
}
@keyframes fadeDown {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-10px); }
}

/* Scroll-reveal (class added by JS only, so content stays visible
   by default if JavaScript fails to run) */
.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-init.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect the OS-level "reduce motion" preference: shrink every
   animation/transition to effectively instant rather than removing
   them outright (0s can cause some transitionend-dependent JS to
   never fire), and force scroll-reveal content to its final visible
   state immediately so nothing sits waiting on a scroll trigger. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── LAYOUT UTILITIES ── */
.container { max-width:1280px; margin:0 auto; padding:0 64px; }
.section { padding:96px 0; }
.section--sm { padding:64px 0; }
.section--lg { padding:128px 0; }

/* ── TYPOGRAPHY SYSTEM ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-500);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--green-400);
  border-radius: 2px;
  transform-origin: left center;
}
/* Draw-in: the dash starts collapsed and animates to full width once
   the eyebrow scrolls into view (via the shared reveal-init system). */
.eyebrow.reveal-init::before {
  transform: scaleX(0);
}
.eyebrow.reveal-init.is-visible::before {
  transform: scaleX(1);
  transition: transform 0.6s cubic-bezier(0.65,0,0.35,1) 0.15s;
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.2;
  color: var(--ink);
}
.display-sm {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

.body-lg  { font-size:18px; line-height:1.75; color:var(--text-body); }
.body-md  { font-size:16px; line-height:1.7;  color:var(--text-body); }
.body-sm  { font-size:14px; line-height:1.65; color:var(--text-muted); }
.body-xs  { font-size:13px; line-height:1.6;  color:var(--text-hint); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96) !important; transition-duration: 0.1s; }
.btn-primary {
  background: var(--green-700);
  color: var(--ivory);
}
.btn-primary:hover {
  background: var(--green-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--green-700);
  border: 1.5px solid var(--green-400);
}
.btn-outline:hover {
  background: var(--green-50);
  border-color: var(--green-600);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── NAVIGATION ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green-600), var(--gold));
  z-index: 1200;
  transition: width 0.12s ease-out;
}
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(248,245,238,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}
nav.nav-scrolled {
  box-shadow: 0 4px 24px rgba(13,43,31,0.1);
  border-bottom-color: transparent;
}
nav.nav-scrolled .nav-inner { height: 60px; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  transition: height 0.3s ease;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}
.nav-logo-img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green-300);
  transition: width 0.3s ease, height 0.3s ease;
}
nav.nav-scrolled .nav-logo-img { width: 32px; height: 32px; }
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--green-800);
  line-height: 1;
}
.nav-logo-text span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-pill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--green-50);
  border-radius: 6px;
  transition: left 0.4s cubic-bezier(0.65,0,0.35,1), width 0.4s cubic-bezier(0.65,0,0.35,1), opacity 0.2s;
  z-index: 0;
  opacity: 0;
}
.nav-pill.is-set { opacity: 1; }
.nav-links li { position: relative; z-index: 1; }
.nav-links li button ,
.nav-links li a {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.2s;
}
.nav-links li button:hover ,
.nav-links li a:hover {
  color: var(--green-800);
  background: var(--green-50);
}
.nav-links li button.active ,
.nav-links li a.active {
  color: var(--green-700);
  font-weight: 600;
  background: none;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Mobile Nav */
.mobile-trigger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 8px;
}
.mobile-trigger svg { display:block; }
.ham-line { transition: transform 0.32s cubic-bezier(0.65,0,0.35,1), opacity 0.2s ease; transform-origin: 12px 12px; }
.mobile-trigger.active .ham-line-1 { transform: translateY(6px) rotate(45deg); }
.mobile-trigger.active .ham-line-2 { opacity: 0; }
.mobile-trigger.active .ham-line-3 { transform: translateY(-6px) rotate(-45deg); }
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
  background: rgba(15,61,28,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer-panel {
  width: min(86vw, 380px);
  height: 100%;
  background: var(--warm-white);
  box-shadow: -16px 0 48px rgba(15,61,28,0.2);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.mobile-close {
  background: var(--ivory);
  border: none; border-radius: 10px; cursor: pointer;
  color: var(--ink-soft); padding: 9px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-drawer-links { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mobile-drawer-links li { border-bottom: none; }
.mobile-drawer-links li button ,
.mobile-drawer-links li a {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  background: none; border: none; cursor: pointer;
  border-radius: 14px;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: left;
  box-shadow: inset 3px 0 0 transparent;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.mobile-drawer-links li button:hover ,
.mobile-drawer-links li a:hover { background: var(--green-50); }
.mobile-drawer-links li button.active ,
.mobile-drawer-links li a.active {
  background: var(--green-50);
  color: var(--green-800);
  box-shadow: inset 3px 0 0 var(--green-600);
}
.mdl-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  background: var(--green-50);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.mdl-icon svg { width: 19px; height: 19px; }
.mobile-drawer-links li button:hover .mdl-icon,
.mobile-drawer-links li button.active .mdl-icon ,
.mobile-drawer-links li a:hover .mdl-icon,
.mobile-drawer-links li a.active .mdl-icon {
  background: var(--green-600);
  color: var(--ivory);
}
.mobile-drawer-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.mobile-drawer-footer .btn { width: 100%; justify-content: center; }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--green-900);
  overflow: hidden;
  padding-top: 72px;
}
.hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-bg-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-bg-slide.active { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(8,28,17,0.78) 0%, rgba(8,28,17,0) 38%),
    linear-gradient(100deg, rgba(10,38,22,0.95) 0%, rgba(13,43,31,0.80) 40%, rgba(19,56,40,0.38) 100%);
}
/* Subtle grid texture */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(95,174,132,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,174,132,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Cursor-follow spotlight: a soft gold glow that drifts toward the
   pointer, restrained rather than a flashy tilt effect. Positioned via
   a --spot-x/--spot-y custom property set from JS on mousemove.
   Disabled entirely for touch devices (no fine pointer) and for
   anyone with reduced motion set, both via CSS and by never attaching
   the listener in JS. */
.hero-spotlight {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--spot-x, 50%) var(--spot-y, 35%), rgba(196,154,42,0.16), transparent 62%);
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .hero-spotlight { display: none; }
}
.hero-content {
  position: relative; z-index: 10;
  max-width: 860px;
  padding-left: 34px;
}
/* slim gold rule running down the left edge of the text block */
.hero-content::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, rgba(196,154,42,0));
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-300);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 2px;
  background: var(--green-400);
  border-radius: 2px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.5vw, 88px);
  line-height: 1.04;
  color: var(--ivory);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
.hero-title-line, .hero-title-accent { display: block; }
.hero-title-accent {
  background: linear-gradient(95deg, var(--ivory) 0%, var(--gold-light) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.hero-title em {
  font-style: italic;
  color: var(--green-300);
}
.hero-lead {
  font-size: 19px;
  line-height: 1.75;
  color: rgba(248,245,238,0.84);
  max-width: 600px;
  margin-bottom: 48px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* concentric gold rings behind the photo area */
.hero::before {
  content: '';
  position: absolute;
  right: -160px; top: 50%;
  width: 640px; height: 640px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(232,196,90,0.20);
  box-shadow: 0 0 0 70px rgba(232,196,90,0.035), 0 0 0 140px rgba(232,196,90,0.022);
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .hero::before { right: -300px; }
}
@media (max-width: 768px) {
  .hero::before { display: none; }
  .hero-content { padding-left: 22px; }
  .hero-lead { font-size: 17px; }
}

/* Hero stat bar */
.hero-stats {
  background: var(--green-900);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-stats-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 44px 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-stat {
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 42px);
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 8px;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(248,245,238,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── OUR IMPACTS (standalone section) ── */
.impact-section { background: var(--ivory); }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.impact-card {
  background: linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 44px 28px 36px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15,61,28,0.22), 0 2px 6px rgba(15,61,28,0.14);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
/* Faster transform transition while actively tilting via JS mousemove
   (see the tilt script near the end of the page); reverts to the
   slower default transition above on mouse-leave for a smooth settle. */
.impact-card.tilt-fast, .prog-card.tilt-fast {
  transition: transform 0.1s linear, box-shadow 0.25s, border-color 0.25s;
}
/* soft decorative glow in the corner */
.impact-card::after {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,203,121,0.28) 0%, rgba(107,203,121,0) 70%);
  pointer-events: none;
}
.impact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.impact-card:hover::before { transform: scaleX(1); }
.impact-card:hover {
  box-shadow: 0 16px 40px rgba(15,61,28,0.32), 0 4px 12px rgba(15,61,28,0.18);
  transform: translateY(-4px);
  border-color: rgba(232,196,90,0.45);
}
.impact-icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s, color 0.3s;
}
.impact-card:hover .impact-icon {
  transform: scale(1.12) rotate(-6deg);
  background: var(--gold-light);
  color: var(--green-900);
}
.impact-icon svg { width: 26px; height: 26px; }
.impact-num {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px);
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 10px;
}
.impact-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(248,245,238,0.72);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .impact-grid { grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 40px; }
}
@media (max-width: 560px) {
  .impact-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .impact-card { padding: 26px 14px 22px; border-radius: 14px; }
  .impact-icon { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 14px; }
  .impact-icon svg { width: 20px; height: 20px; }
  .impact-num { font-size: 28px; margin-bottom: 6px; }
  .impact-label { font-size: 10px; }
}

/* ── LATEST UPDATE (home) ── */
.latest-section { background: var(--warm-white); border-top: 1px solid var(--green-100); }
.latest-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  margin-top: 56px;
}
.latest-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
  animation: latestIn 0.6s ease both;
}
.latest-card:nth-child(2) { animation-delay: 0.1s; }
.latest-card:nth-child(3) { animation-delay: 0.2s; }
@keyframes latestIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.latest-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--green-200);
}
.latest-card--feature { grid-row: 1 / span 2; }
.latest-card:not(.latest-card--feature) { flex-direction: row; }
.latest-img {
  position: relative;
  overflow: hidden;
  background: var(--green-800);
}
.latest-card--feature .latest-img { flex: 1; min-height: 300px; }
.latest-card:not(.latest-card--feature) .latest-img { flex: 0 0 40%; }
.latest-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.latest-card:hover .latest-img img { transform: scale(1.05); }
.latest-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,61,28,0) 55%, rgba(15,61,28,0.35) 100%);
  pointer-events: none;
}
.latest-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  background: var(--gold-light);
  color: var(--green-900);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15,61,28,0.25);
}
.latest-body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.latest-card:not(.latest-card--feature) .latest-body { padding: 24px 26px; justify-content: center; }
.latest-title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  color: var(--green-800);
  margin-bottom: 10px;
}
.latest-card--feature .latest-title { font-size: 28px; }
.latest-excerpt { margin-bottom: 16px; }
.latest-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto;
}
.latest-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.latest-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--green-600);
  margin-left: auto;
  transition: gap 0.2s;
}
.latest-card:hover .latest-more { gap: 10px; }
.latest-cta { text-align: center; margin-top: 44px; }
@media (max-width: 900px) {
  .latest-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; margin-top: 40px; }
  .latest-card--feature { grid-row: auto; }
  .latest-card--feature .latest-img { flex: none; min-height: 0; height: 240px; }
}
@media (max-width: 560px) {
  .latest-card:not(.latest-card--feature) { flex-direction: column; }
  .latest-card:not(.latest-card--feature) .latest-img { flex: none; height: 190px; }
  .latest-card--feature .latest-title { font-size: 23px; }
  .latest-body, .latest-card:not(.latest-card--feature) .latest-body { padding: 22px 22px 24px; }
}

/* ── FLOATING CTA ── */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 90px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--green-700);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.floating-cta.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.floating-cta:hover {
  background: var(--green-800);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px) scale(1.03);
}
.floating-cta svg { width: 17px; height: 17px; flex: none; }
/* One-time pulse ring: fires only the first time the button appears
   (see the fabPulsed flag in the scroll handler), not on every
   re-appearance, so it draws attention once without nagging. */
.floating-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
.floating-cta.pulse-once::after {
  animation: ctaPulseRing 1.1s ease-out 2;
}
@keyframes ctaPulseRing {
  0%   { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}
@media (max-width: 480px) {
  .floating-cta { right: 16px; bottom: 72px; padding: 12px 18px; font-size: 13px; }
}

/* ── GALLERY ── */
.gallery-section { background: var(--warm-white); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 14px;
  margin-top: 56px;
}
.gallery-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(5) { grid-row: span 2; }
.gallery-item-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-item-img { transform: scale(1.1); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,43,31,0) 45%, rgba(13,43,31,0.75) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}
.gallery-item:hover .gallery-item-icon { opacity: 1; transform: scale(1); }
.gallery-item-icon svg { width: 26px; height: 26px; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3,1fr); grid-auto-rows: 130px; margin-top: 40px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-item:nth-child(5) { grid-row: span 1; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 120px; gap: 10px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(6,20,12,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: min(88vw, 900px);
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform 0.3s ease;
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(248,245,238,0.12);
  border: 1px solid rgba(248,245,238,0.25);
  color: var(--ivory);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(248,245,238,0.22); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 14px; right: 14px; }
}

/* ── TESTIMONIALS ── */
.testimonials-section { background: var(--green-50); }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.testimonial-card {
  background: var(--warm-white);
  border: 1px solid var(--green-100);
  border-radius: 16px;
  padding: 36px 30px 30px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.testimonial-quote-mark {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 0.6;
  color: var(--gold);
  margin-bottom: 18px;
}
.testimonial-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-style: italic;
  flex: 1;
  margin-bottom: 26px;
}
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--green-600);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
}
.testimonial-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.testimonial-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
}

/* ── SECTION HEADERS ── */
.section-header { margin-bottom: 56px; }
.section-header--center { text-align: center; }

/* Section titles: solid deep-green serif, flanked by fading rules that end in a gold dot */
.section-header--center .display-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  color: var(--green-900);
  letter-spacing: -0.02em;
}
.section-header--center .display-lg::before,
.section-header--center .display-lg::after {
  content: '';
  flex: 0 1 120px;
  height: 10px;
  background-repeat: no-repeat;
}
.section-header--center .display-lg::before {
  background-image:
    radial-gradient(circle at calc(100% - 5px) 50%, var(--gold) 0 4px, transparent 4.5px),
    linear-gradient(90deg, rgba(46,158,68,0), var(--green-500));
  background-size: 100% 100%, 100% 2px;
  background-position: 0 0, 0 50%;
}
.section-header--center .display-lg::after {
  background-image:
    radial-gradient(circle at 5px 50%, var(--gold) 0 4px, transparent 4.5px),
    linear-gradient(270deg, rgba(46,158,68,0), var(--green-500));
  background-size: 100% 100%, 100% 2px;
  background-position: 0 0, 0 50%;
}
@media (max-width: 560px) {
  .section-header--center .display-lg { gap: 12px; }
  .section-header--center .display-lg::before,
  .section-header--center .display-lg::after { flex-basis: 36px; }
}

/* ── DIVIDER ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ── CARDS ── */
.card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.card:hover {
  border-color: var(--green-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card--green {
  background: var(--green-700);
  border-color: var(--green-600);
  color: var(--ivory);
}
.card--ivory {
  background: var(--ivory);
  border-color: var(--ivory-dark);
}

/* ── BADGE ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-green {
  background: var(--green-100);
  color: var(--green-700);
}
.badge-gold {
  background: var(--gold-pale);
  color: #7A5C0A;
}

/* ── PAGE: HOME ── */

/* Manifesto strip */
.manifesto-strip {
  background: var(--ivory);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Manifesto image slideshow */
.manifesto-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--green-100);
  background: var(--green-900);
}
.ms-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s ease, transform 3s ease;
}
.ms-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.manifesto-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,43,31,0.65) 0%, rgba(13,43,31,0.05) 32%, transparent 55%);
  pointer-events: none;
  z-index: 2;
}
.ms-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.ms-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.3s ease;
}
.ms-dot.active { background: var(--ivory); width: 26px; border-radius: 4px; }
.ms-dot:hover { background: rgba(255,255,255,0.75); }
@media (max-width: 768px) {
  .manifesto-slideshow { aspect-ratio: 4 / 5; margin-top: 28px; border-radius: 16px; }
}

/* Core Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.value-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 8px 24px rgba(15,61,28,0.22), 0 2px 6px rgba(15,61,28,0.14);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
/* soft decorative glow in the corner */
.value-card::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,203,121,0.28) 0%, rgba(107,203,121,0) 70%);
  pointer-events: none;
}
/* gold accent bar that grows on hover */
.value-card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 4px; width: 48px;
  background: var(--gold);
  border-radius: 0 4px 0 0;
  transition: width 0.35s ease;
}
.value-card:hover {
  box-shadow: 0 16px 40px rgba(15,61,28,0.32), 0 4px 12px rgba(15,61,28,0.18);
  transform: translateY(-4px);
  border-color: rgba(232,196,90,0.45);
}
.value-card:hover::after { width: 100%; }
.value-icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s, color 0.3s;
}
.value-card:hover .value-icon {
  transform: scale(1.12) rotate(-6deg);
  background: var(--gold-light);
  color: var(--green-900);
}
.value-icon svg { width: 26px; height: 26px; }
.value-title {
  position: relative;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ivory);
  margin-bottom: 12px;
}
.value-card .body-sm {
  position: relative;
  color: rgba(248,245,238,0.82);
}
@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
}

/* Programs overview */
.programs-section { background: var(--warm-white); }
.programs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.program-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.program-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green-600);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}
.program-card:hover { border-color: var(--green-200); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.program-card:hover::before { transform: scaleX(1); }
.program-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-hint);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: block;
}
.program-icon {
  width: 48px; height: 48px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.program-icon svg { width:22px; height:22px; stroke: var(--green-600); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── PAGE: ABOUT ── */
.about-hero { background: var(--green-800); padding: 56px 0; }
.about-hero .display-xl { color: var(--ivory); }
.about-hero .eyebrow { color: var(--green-200); }
.about-hero .eyebrow::before { background: var(--green-300); }

.about-body { background: var(--warm-white); }
.about-cards-wrap { display:flex; flex-direction:column; gap:28px; }

.info-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: 18px;
  padding: 44px 48px;
  box-shadow: 0 1px 3px rgba(15,61,28,0.06), 0 10px 30px rgba(15,61,28,0.06);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
/* gradient strip across the top edge */
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400) 60%, var(--gold));
}
/* soft watermark circle in the corner */
.info-card::after {
  content: '';
  position: absolute;
  right: -80px; bottom: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,158,68,0.10) 0%, rgba(46,158,68,0) 70%);
  pointer-events: none;
}
.info-card:hover {
  box-shadow: 0 2px 6px rgba(15,61,28,0.08), 0 18px 44px rgba(15,61,28,0.12);
  transform: translateY(-3px);
  border-color: var(--green-200);
}
.info-card > * { position: relative; z-index: 1; }
.info-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 8px 18px rgba(15,61,28,0.22);
}
.info-icon svg { width: 26px; height: 26px; }
.info-card h3 { color: var(--green-900); font-size: 28px; letter-spacing: -0.01em; }
.info-card p + p { margin-top: 16px; }
/* Introduction: lead paragraph reads as an editorial opener */
.info-card--intro p:first-of-type {
  font-size: 18px;
  line-height: 1.75;
  color: var(--green-800);
}
/* Vision: deep green panel for contrast */
.info-card--dark {
  background: linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(15,61,28,0.28);
}
.info-card--dark::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.info-card--dark::after { background: radial-gradient(circle, rgba(107,203,121,0.28) 0%, rgba(107,203,121,0) 70%); }
.info-card--dark:hover { border-color: rgba(232,196,90,0.45); box-shadow: 0 18px 44px rgba(15,61,28,0.38); }
.info-card--dark .info-icon {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: none;
}
.info-card--dark h3 { color: var(--ivory); }
.info-card--dark p { color: rgba(248,245,238,0.86); }

.vision-mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; }
.vision-mission-grid .info-card { height: 100%; }

.mission-list { list-style:none; margin-top:20px; display:flex; flex-direction:column; counter-reset: mission; }
.mission-list li {
  position: relative;
  counter-increment: mission;
  padding: 13px 0 13px 46px;
  border-bottom: 1px solid var(--green-100);
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.6;
}
.mission-list li:last-child { border-bottom: none; padding-bottom: 0; }
.mission-list li::before {
  content: counter(mission);
  position: absolute;
  left: 0; top: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-50);
  border: 1.5px solid var(--green-200);
  color: var(--green-700);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mission-list li:last-child::before { top: 12px; }
.mission-list li:hover::before { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.vm-closing {
  max-width: 780px;
  margin: 32px auto 0;
  text-align: center;
  color: var(--text-muted);
}

/* ── PAGE: PROGRAMS ── */
.programs-full-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.prog-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s;
  box-shadow: var(--shadow-sm);
}
.prog-card:hover { border-color: var(--green-200); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.prog-card-body { padding: 32px 36px 36px; display:flex; flex-direction:column; flex:1; }
.prog-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 14px;
}

/* ── PAGE: PUBLICATIONS ── */
.pub-hero { background: var(--ivory); padding: 96px 0 64px; border-bottom: 1px solid var(--border); }
.pub-list { display: flex; flex-direction: column; gap: 0; }
.pub-row {
  display: grid;
  grid-template-columns: 180px 1fr 160px;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.pub-row:last-child { border-bottom: none; }
.pub-row:hover { background: var(--green-50); margin: 0 -24px; padding: 32px 24px; border-radius: 8px; border-bottom-color: transparent; }
.pub-meta-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-hint);
}
.pub-date { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.pub-title-text {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.3;
}

/* ── PAGE: LEADERSHIP ── */
.lead-profile-grid { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.lead-img-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--green-200);
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 100px;
}
.lead-img-frame img { width:100%; display:block; filter: contrast(1.02); }
.lead-name {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.lead-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 700;
  margin-bottom: 32px;
  display: block;
}

/* ── PAGE: MEDIA ── */
.media-hero { background: var(--green-800); padding: 96px 0; }
.media-hero .display-xl { color: var(--ivory); }
.media-hero .eyebrow { color: var(--green-200); }
.media-hero .eyebrow::before { background: var(--green-300); }
.fb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.fb-box {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 20px;
  display: flex; justify-content: center;
  box-shadow: var(--shadow-sm);
}

/* ── PAGE: GALLERY ── */
.gallery-hero { background: var(--ink); padding: 96px 0; }
.gallery-hero .display-xl { color: var(--ivory); }
.gallery-hero .eyebrow { color: var(--green-200); }
.gallery-hero .eyebrow::before { background: var(--green-300); }
.gallery-masonry { column-count: 3; column-gap: 20px; }
.gallery-brick {
  break-inside: avoid;
  margin-bottom: 20px;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: var(--shadow-sm);
}
.gallery-brick:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.gallery-brick img { width:100%; display:block; filter: contrast(1.01); transition: transform 0.5s ease; }
.gallery-brick:hover img { transform: scale(1.02); }
.gallery-caption { padding: 16px 20px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }

/* ── PAGE: CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:80px; }
.contact-info-card {
  position: sticky;
  top: 100px;
  height: fit-content;
  overflow: hidden;
  background: linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 44px 40px;
  box-shadow: 0 14px 36px rgba(15,61,28,0.30);
}
.contact-info-card::before {
  content: '';
  position: absolute;
  top: -90px; right: -90px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,203,121,0.30) 0%, rgba(107,203,121,0) 70%);
  pointer-events: none;
}
.contact-info-card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  background: var(--gold);
  border-radius: 0 4px 0 0;
}
.contact-info-card > * { position: relative; z-index: 1; }
.contact-info-card h3 { color: var(--ivory); font-size: 26px; }
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.contact-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.ci-icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.ci-icon svg { width: 20px; height: 20px; }
.contact-info-item:hover .ci-icon { background: var(--gold-light); color: var(--green-900); transform: translateY(-2px); }
.contact-info-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(248,245,238,0.62);
  margin-bottom: 6px;
}
.contact-info-val { font-size: 16px; color: var(--ivory); font-weight: 500; line-height: 1.5; word-break: break-word; }
.contact-info-val a { color: var(--gold-light); text-decoration: none; }
.contact-info-val a:hover { text-decoration: underline; }

/* Success checkmark: hidden until the form is submitted, then the
   circle and check both draw in via stroke-dashoffset, giving clear
   confirmation something happened beyond just the hint text below. */
.cf-success {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 4px auto 0;
}
.cf-success.is-shown { display: flex; }
.cf-success svg { width: 100%; height: 100%; }
.cf-success circle {
  stroke: var(--green-500);
  stroke-width: 3;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}
.cf-success path {
  stroke: var(--green-600);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
}
.cf-success.is-shown circle { animation: cfCircleDraw 0.45s ease forwards; }
.cf-success.is-shown path { animation: cfCheckDraw 0.3s ease 0.4s forwards; }
@keyframes cfCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes cfCheckDraw { to { stroke-dashoffset: 0; } }

.contact-form-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: 18px;
  padding: 48px;
  box-shadow: 0 1px 3px rgba(15,61,28,0.06), 0 14px 40px rgba(15,61,28,0.08);
}
.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400) 60%, var(--gold));
}
.contact-form-card h3 { color: var(--green-900); font-size: 26px; }
.form-group { margin-bottom: 24px; }
.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--green-700);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.form-input {
  width: 100%;
  background: var(--green-50);
  border: 1.5px solid var(--green-100);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  background: #fff;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(46,158,68,0.14);
}
.form-input::placeholder { color: var(--text-hint); }

/* ── HOME: DONATE CALL-TO-ACTION SECTION ── */
.donate-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 32px 52px;
  background:
    radial-gradient(circle at 12% 50%, rgba(232,196,90,0.14) 0%, rgba(232,196,90,0) 38%),
    linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15,61,28,0.30);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
/* fine dotted texture on the right half */
.donate-cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(270deg, #000 0%, transparent 85%);
  pointer-events: none;
}
/* gold accent bar along the bottom */
.donate-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light) 40%, rgba(232,196,90,0) 100%);
}
.donate-cta:hover { box-shadow: 0 24px 56px rgba(15,61,28,0.38); transform: translateY(-3px); border-color: rgba(232,196,90,0.45); }
.donate-cta > * { position: relative; z-index: 1; }
/* large translucent heart watermark */
.donate-cta-mark {
  position: absolute !important;
  right: -50px; bottom: -70px;
  width: 300px; height: 300px;
  color: #fff;
  opacity: 0.06;
  z-index: 0 !important;
  pointer-events: none;
}
/* gold heart badge with ripple rings */
.donate-cta-badge {
  position: relative;
  flex: 0 0 96px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-light), var(--gold));
  color: var(--green-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28), inset 0 2px 0 rgba(255,255,255,0.35);
}
.donate-cta-badge::before,
.donate-cta-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(232,196,90,0.55);
  animation: donateRipple 2.8s ease-out infinite;
}
.donate-cta-badge::after { animation-delay: 1.4s; }
@keyframes donateRipple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.55); opacity: 0; } }
.donate-cta-badge svg { width: 42px; height: 42px; animation: donateBeat 2.4s ease-in-out infinite; }
@keyframes donateBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.09); } 56% { transform: scale(1); } }
.donate-cta-body { flex: 1 1 auto; min-width: 0; }
.donate-cta-title { font-family: var(--font-display); font-size: 28px; line-height: 1.2; color: var(--ivory); margin-bottom: 8px; }
.donate-cta-sub { font-size: 16px; line-height: 1.65; color: rgba(248,245,238,0.84); max-width: 560px; margin-bottom: 20px; }
.donate-cta .btn { padding: 14px 28px; font-size: 15px; }
.donate-cta .btn svg { transition: transform 0.2s; }
.donate-cta .btn:hover svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .donate-cta { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 24px 34px; }
  .donate-cta-badge { flex-basis: 80px; width: 80px; height: 80px; }
  .donate-cta-badge svg { width: 36px; height: 36px; }
  .donate-cta-title { font-size: 24px; }
  .donate-cta .btn { width: 100%; justify-content: center; }
  .donate-cta::before { width: 100%; }
}

/* ── PAGE: DONATE ── */
.donate-lead { max-width: 680px; margin: 18px auto 0; text-align: center; }
.donate-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: stretch;
}
/* feature card: give by email */
.donate-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 55%, var(--green-900) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 48px 44px;
  box-shadow: 0 14px 36px rgba(15,61,28,0.30);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.donate-card::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,203,121,0.30) 0%, rgba(107,203,121,0) 70%);
  pointer-events: none;
}
.donate-card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 72px; height: 4px;
  background: var(--gold);
  border-radius: 0 4px 0 0;
}
.donate-card > * { position: relative; z-index: 1; }
.donate-heart {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.donate-heart svg { width: 30px; height: 30px; }
.donate-card h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.2; color: var(--ivory); margin-bottom: 14px; }
.donate-card p { color: rgba(248,245,238,0.84); font-size: 16px; line-height: 1.7; margin-bottom: 28px; max-width: 480px; }
.donate-email {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 12px 12px 12px 18px;
  margin-bottom: 22px;
}
.donate-email-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ivory);
  word-break: break-all;
}
.donate-copy {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.14);
  color: var(--gold-light);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.donate-copy svg { width: 15px; height: 15px; }
.donate-copy:hover, .donate-copy.is-copied { background: var(--gold-light); color: var(--green-900); }
.donate-btn { padding: 16px 30px; font-size: 15px; }
/* how it works */
.donate-steps {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: 18px;
  padding: 48px 44px;
  box-shadow: 0 1px 3px rgba(15,61,28,0.06), 0 14px 40px rgba(15,61,28,0.08);
}
.donate-steps::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400) 60%, var(--gold));
}
.donate-steps h3 { font-family: var(--font-display); font-size: 26px; color: var(--green-900); margin-bottom: 26px; }
.donate-step-list { list-style: none; counter-reset: dstep; display: flex; flex-direction: column; gap: 26px; }
.donate-step-list li { position: relative; counter-increment: dstep; padding-left: 62px; }
.donate-step-list li::before {
  content: counter(dstep);
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(15,61,28,0.22);
}
/* connector line between the numbered circles */
.donate-step-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px; top: 50px; bottom: -22px;
  width: 2px;
  background: linear-gradient(180deg, var(--green-300), rgba(46,158,68,0));
}
.donate-step-title { font-weight: 700; color: var(--green-900); font-size: 17px; margin-bottom: 4px; }
.donate-step-text { color: var(--text-body); font-size: 15px; line-height: 1.65; }
/* where support goes */
.donate-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.donate-use-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: 18px;
  padding: 36px 30px;
  box-shadow: 0 1px 3px rgba(15,61,28,0.06), 0 10px 30px rgba(15,61,28,0.06);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.donate-use-card:hover { box-shadow: 0 2px 6px rgba(15,61,28,0.08), 0 18px 44px rgba(15,61,28,0.12); transform: translateY(-3px); border-color: var(--green-200); }
.donate-use-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--green-900); margin-bottom: 10px; }
/* more ways to give (placeholder for future options) */
.donate-more {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: left;
  background: var(--green-50);
  border: 2px dashed var(--green-200);
  border-radius: 18px;
  padding: 28px 32px;
}
.donate-more .info-icon { margin-bottom: 0; flex: 0 0 56px; }
.donate-more-title { font-family: var(--font-display); font-size: 20px; color: var(--green-900); margin-bottom: 4px; }
.donate-more-text { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
  .donate-grid { grid-template-columns: 1fr; }
  .donate-use-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .donate-card, .donate-steps { padding: 34px 24px; }
  .donate-card h3, .donate-steps h3 { font-size: 24px; }
  .donate-btn { width: 100%; justify-content: center; }
  .donate-more { flex-direction: column; text-align: center; padding: 28px 22px; }
}

/* ── FOOTER ── */
footer {
  background: var(--green-900);
  color: var(--ivory);
  padding: 80px 0 0;
}

/* Neutralize Blogger's built-in widget section below the footer so it
   never adds default padding/whitespace when it has no widget in it */
#main-injection-panel {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.footer-brand-logo img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--green-400);
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ivory);
}
.footer-tagline { font-size: 14px; color: rgba(248,245,238,0.45); max-width: 280px; line-height: 1.65; }
.footer-col-head {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--green-300);
  margin-bottom: 20px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links li button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(248,245,238,0.5);
  padding: 0; text-align: left;
  transition: color 0.2s, transform 0.2s ease;
  display: inline-block;
}
.footer-links li button:hover { color: var(--ivory); transform: translateX(4px); }
.footer-links li a {
  font-size: 14px;
  color: rgba(248,245,238,0.5);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s ease;
  display: inline-block;
}
.footer-links li a:hover { color: var(--ivory); transform: translateX(4px); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0;
  font-size: 12px;
  color: rgba(248,245,238,0.25);
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .container { padding: 0 40px; }
  .nav-inner { padding: 0 40px; }
  .hero-stats-inner { padding: 0 40px; }
  .nav-links, .nav-actions { display: none; }
  .mobile-trigger { display: block; }
  .programs-grid { grid-template-columns: repeat(2,1fr); }
  .vision-mission-grid { grid-template-columns: 1fr; gap:48px; }
  .fb-grid { grid-template-columns: 1fr; }
  .programs-full-grid { grid-template-columns: 1fr; }
  .pub-row { grid-template-columns: 1fr; gap:16px; }
  .lead-profile-grid { grid-template-columns: 1fr; }
  .lead-img-frame { position:static; max-width:400px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:40px; }
  .hero-stats-inner { grid-template-columns: repeat(2,1fr); gap: 28px 0; }
  .hero-stat { border-right: none !important; padding: 0 16px; }
  .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1) !important; }
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .hero { min-height: auto; padding: 128px 0 72px; }
  .hero-stats-inner { padding: 32px 24px; grid-template-columns: repeat(2,1fr); gap: 28px 0; }
  .gallery-masonry { column-count: 2; }
  .info-card { padding: 30px 24px; }
  .info-card h3 { font-size: 23px; }
  .info-card--intro p:first-of-type { font-size: 16.5px; }
  .contact-info-card { padding: 32px 24px; }
  .contact-form-card { padding: 32px 24px; }
  footer { padding: 40px 0 0; }
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px 14px;
    padding-bottom: 22px;
  }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer-brand-logo { margin-bottom: 12px; }
  .footer-brand-logo img { width: 32px; height: 32px; }
  .footer-brand-name { font-size: 16px; }
  .footer-tagline { max-width: 100%; font-size: 12.5px; line-height: 1.55; }
  .footer-col-head { margin-bottom: 10px; font-size: 9px; }
  .footer-links { gap: 8px; }
  .footer-links li button, .footer-links li a { font-size: 12.5px; line-height: 1.4; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; padding: 16px 0; font-size: 11px; }
  .section { padding: 64px 0; }
}
@media (max-width: 480px) {
  .gallery-masonry { column-count: 1; }
  .hero-stats-inner { grid-template-columns: 1fr 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
}
/* ── PROGRAM CARDS ENHANCED ── */
.prog-card--clickable {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.prog-card--clickable:active { transform: scale(0.985); transition: transform 0.1s ease; }
a.prog-card { text-decoration: none; color: inherit; }
.prog-card-img {
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.prog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
  display: block;
}
.prog-card--clickable:hover .prog-card-img img { transform: scale(1.04); }
.prog-card-tag {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 10px;
}
.prog-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--green-600);
  margin-top: auto;
  transition: gap 0.2s;
}
.prog-card--clickable:hover .prog-read-more { gap: 10px; }

/* ── PROGRAM FULL-SCREEN PAGE ── */
#progPage {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--warm-white);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.55s;
}
#progPage.open {
  visibility: visible;
  pointer-events: auto;
}
#progPageInner {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
#progPage.open #progPageInner {
  transform: translateY(0);
  opacity: 1;
}

/* Top bar */
.pp-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248,245,238,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  height: 68px;
}
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
  padding: 8px 0;
  transition: gap 0.2s;
}
.pp-back:hover { gap: 14px; }
.pp-back svg { flex-shrink: 0; }
.pp-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  background: transparent;
  pointer-events: none;
}
.pp-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.08s linear;
}
.pp-topbar-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-600);
}

/* Hero */
.pp-hero {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
}
.pp-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(13,43,31,0.97) 0%,
    rgba(13,43,31,0.55) 45%,
    rgba(13,43,31,0.15) 100%
  );
}
.pp-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 56px 64px;
}
.pp-hero-tag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-300);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.pp-hero-tag::before {
  content: '';
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--green-400);
  border-radius: 2px;
}
.pp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 60px);
  line-height: 1.08;
  color: var(--ivory);
  letter-spacing: -0.01em;
  max-width: 820px;
}

/* Content area */
.pp-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 64px 120px;
}

/* Meta strip */
.pp-meta {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--green-100);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 56px;
  background: var(--green-50);
}
.pp-meta-item {
  flex: 1 1 180px;
  min-width: 180px;
  padding: 22px 26px;
  border-right: 1px solid var(--green-100);
  border-bottom: 1px solid var(--green-100);
}
.pp-meta-label {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 6px; display: block;
}
.pp-meta-val {
  font-size: 14px; font-weight: 600;
  color: var(--green-900); line-height: 1.4;
}

/* Sections */
.pp-section { margin-bottom: 48px; }
.pp-section-head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 24px; color: var(--green-800);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--green-100);
}
.pp-section-head-bar {
  display: inline-block;
  width: 5px; height: 26px;
  background: linear-gradient(to bottom, var(--green-500), var(--green-300));
  border-radius: 3px;
  flex-shrink: 0;
}
.pp-prose {
  font-size: 16px; line-height: 1.85;
  color: var(--text-body);
}
.pp-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.pp-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px; line-height: 1.7;
  color: var(--text-body);
  padding: 14px 18px;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-200);
  border-radius: 8px;
  transition: border-left-color 0.2s, background 0.2s;
}
.pp-list li:hover {
  border-left-color: var(--green-500);
  background: var(--green-50);
}

@media (max-width: 900px) {
  .pp-topbar { padding: 0 24px; }
  .pp-hero { height: 380px; }
  .pp-hero-content { padding: 36px 24px; }
  .pp-content { padding: 40px 24px 80px; }
  .pp-meta-item { flex-basis: 50%; min-width: 140px; }
}
@media (max-width: 480px) {
  .pp-hero { height: 300px; }
  .pp-meta-item { flex-basis: 100%; border-right: none; }
}
/* ── BLOG POST VIEW — same look as the Program report pages ──
   On a post URL the SPA pages, main nav and floating button are hidden and the
   post is shown with the report layout (top bar, hero, meta strip, sections). */
.post-view { display: none; }
.pt-item .post-view { display: block; min-height: 70vh; }
.pt-item .page, .pt-item .floating-cta,
.pt-item #globalNav, .pt-item .scroll-progress, .pt-item .mobile-drawer { display: none !important; }

.pt-item #navbar-iframe-container, .pt-item .navbar, .pt-item #Navbar1, .pt-item iframe.b-navbar { display: none !important; }
.post-article a.pp-back, .post-article a.pp-back:hover { text-decoration: none; }
.post-article .pp-hero--noimg { height: 340px; background: linear-gradient(135deg, var(--green-900), var(--green-700)); }
.pp-lbls .lbl + .lbl::before { content: "\00a0\0000b7\00a0"; }
.post-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 36px; }

/* Plain Blogger content, auto-styled like the report sections */
.post-body { font-size: 16px; line-height: 1.85; color: var(--text-body); }
.post-body h2 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 24px; line-height: 1.3; color: var(--green-800);
  margin: 52px 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--green-100);
}
.post-body h2::before {
  content: ''; display: inline-block; width: 5px; height: 26px; flex-shrink: 0; border-radius: 3px;
  background: linear-gradient(to bottom, var(--green-500), var(--green-300));
}
.post-body h3 { font-family: var(--font-display); font-size: 19px; color: var(--green-800); margin: 30px 0 10px; }
.post-body ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post-body ul li {
  font-size: 15px; line-height: 1.7; color: var(--text-body); padding: 14px 18px;
  background: var(--warm-white); border: 1px solid var(--border);
  border-left: 4px solid var(--green-200); border-radius: 8px;
  transition: border-left-color 0.2s, background 0.2s;
}
.post-body ul li:hover { border-left-color: var(--green-500); background: var(--green-50); }
.post-body ol { margin: 0 0 24px 22px; }
.post-body ol li { margin-bottom: 8px; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 18px 0; }
.post-body a { color: var(--green-700); text-decoration: underline; }
.post-body blockquote { border-left: 4px solid var(--green-300); margin: 24px 0; padding: 6px 0 6px 20px; color: var(--green-900); font-style: italic; }
@media (max-width: 900px) { .post-body h2 { font-size: 21px; margin-top: 40px; } }
/* About dropdown */
.nav-links li.has-sub > button::after ,
/* About dropdown */
.nav-links li.has-sub > a::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.65;
}
.nav-sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease; z-index: 5;
}
.nav-sub-panel {
  min-width: 172px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md);
}
.nav-links li .nav-sub button ,
.nav-links li .nav-sub a { display: block; width: 100%; text-align: left; white-space: nowrap; padding: 9px 14px; }
.nav-links li.has-sub:hover .nav-sub,
.nav-links li.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; }
.nav-links li.has-sub.menu-closed .nav-sub { opacity: 0; visibility: hidden; }
.mobile-drawer-links li.mdl-sub button ,
.mobile-drawer-links li.mdl-sub a { padding: 9px 14px 9px 68px; font-size: 14px; font-weight: 500; color: var(--text-muted); }

/* ── ACCESSIBILITY ADDITIONS (audit pass) ── */
/* Valid markup for the nav pill (<li> wrapper) without changing layout: the wrapper generates no box,
   so the pill is still positioned against .nav-links exactly as before */
.nav-links li.nav-pill-item { display: contents; }
/* Programmatic focus on a view's heading (after navigation) should not draw a ring on non-interactive text */
.page [tabindex='-1']:focus { outline: none; }
/* Keyboard focus on a gallery photo shows the same overlay/icon as mouse hover */
.gallery-item:focus-visible::after { opacity: 1; }
.gallery-item:focus-visible .gallery-item-icon { opacity: 1; transform: scale(1); }
/* Footer credit link: underlined so it reads as a link; inherits the footer's text colour, turns gold on hover/focus */
.footer-credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s; }
.footer-credit a:hover, .footer-credit a:focus-visible { color: var(--gold); }

/* ═══ MULTI-PAGE LINKS ═══
   Navigation items that used to be <button>s are now real <a href> links. Browsers give buttons a few
   default styles that links do not have. This zero-specificity block (:where) restores them, so each
   link looks exactly like the button it replaced; every existing class rule still takes precedence.
   (Only internal links - href starting with "/" - are touched, so pre-existing mailto/external link buttons are unaffected.) */
:where(a.btn[href^='/'], a.floating-cta, .nav-links li > a, .nav-links .nav-sub a, .mobile-drawer-links li a) {
  display: inline-block; text-decoration: none; text-align: center; line-height: normal;
  letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none;
  font-style: normal; font-variant: normal;
}
:where(.footer-links li a[href^='/']) {
  display: inline-block; text-decoration: none; text-align: left; line-height: normal;
  letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none;
  font-style: normal; font-variant: normal;
}
a.prog-read-more { text-decoration: none; }
a.nav-logo { color: inherit; }   /* the logo is now a link: keep the text colour it had as a <div> */