/* ============================================================
   BLUPIN CALL FOR HOPE — style.css
   Phase 1: Foundation · Brand System · Full Site Styles
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Brand palette */
  --color-deep-blue:    #0A3D62;
  --color-mid-blue:     #1565a8;
  --color-cyan:         #38BDF8;
  --color-cyan-dark:    #0ea5e9;
  --color-white:        #FFFFFF;
  --color-soft-gray:    #F3F4F6;
  --color-gray-200:     #E5E7EB;
  --color-gray-400:     #9CA3AF;
  --color-gray-600:     #4B5563;
  --color-gray-800:     #1F2937;
  --color-gold:         #FBBF24;
  --color-gold-dark:    #d97706;

  /* Semantic aliases */
  --color-text-primary:   var(--color-gray-800);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted:     var(--color-gray-400);
  --color-bg-page:        var(--color-white);
  --color-bg-alt:         var(--color-soft-gray);
  --color-bg-dark:        var(--color-deep-blue);
  --color-accent:         var(--color-gold);
  --color-border:         var(--color-gray-200);

  /* Typography */
  --font-family:        'Poppins', system-ui, -apple-system, sans-serif;
  --font-size-xs:       0.75rem;   /*  12px */
  --font-size-sm:       0.875rem;  /*  14px */
  --font-size-base:     1rem;      /*  16px */
  --font-size-lg:       1.125rem;  /*  18px */
  --font-size-xl:       1.25rem;   /*  20px */
  --font-size-2xl:      1.5rem;    /*  24px */
  --font-size-3xl:      1.875rem;  /*  30px */
  --font-size-4xl:      2.25rem;   /*  36px */
  --font-size-5xl:      3rem;      /*  48px */
  --font-size-6xl:      3.75rem;   /*  60px */
  --font-weight-light:  300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-black:  800;
  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* Spacing scale */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

  /* Layout */
  --container-max:   1200px;
  --container-pad:   var(--space-6);
  --section-pad-y:   var(--space-20);

  /* Nav */
  --nav-height:       72px;
  --nav-bg:           rgba(10, 61, 98, 0.97);
  --nav-bg-scrolled:  rgba(10, 61, 98, 1);

  /* Radii */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:   0 24px 48px rgba(0,0,0,.16);
  --shadow-card: 0 2px 16px rgba(10,61,98,.08);
  --shadow-card-hover: 0 12px 32px rgba(10,61,98,.16);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Glass effect */
  --glass-bg:     rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.16);
}


/* ============================================================
   2. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Enable smooth scrolling site-wide */
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

address {
  font-style: normal;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */
.section-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: var(--space-3);
}

.section-label--light {
  color: var(--color-cyan);
}

.section-title {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  color: var(--color-deep-blue);
  margin-bottom: var(--space-5);
}

.section-title em {
  font-style: normal;
  color: var(--color-cyan-dark);
}

.section-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 680px;
  line-height: var(--line-height-loose);
  margin: 0 auto;
}

/* Light-on-dark variant */
.section-header--light .section-title,
.section-header--light .section-intro {
  color: var(--color-white);
}
.section-header--light .section-intro {
  color: rgba(255,255,255,0.75);
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

/* Centred max-width wrapper */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Standard section vertical padding */
.section-pad {
  padding-block: var(--section-pad-y);
}

/* Centred section header block */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

/* Responsive card grids */
.card-grid {
  display: grid;
  gap: var(--space-8);
}

.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}


/* ============================================================
   5. BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi);
  line-height: 1;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

.btn:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

/* Primary — deep blue */
.btn-primary {
  background-color: var(--color-deep-blue);
  color: var(--color-white);
  border-color: var(--color-deep-blue);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-mid-blue);
  border-color: var(--color-mid-blue);
}

/* Secondary — outlined, transparent */
.btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-white);
  color: var(--color-deep-blue);
}

/* Accent — gold */
.btn-accent {
  background-color: var(--color-gold);
  color: var(--color-deep-blue);
  border-color: var(--color-gold);
}
.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  color: var(--color-white);
}

/* Modifiers */
.btn--full {
  width: 100%;
}

.btn--lg {
  padding: var(--space-5) var(--space-12);
  font-size: var(--font-size-lg);
}


/* ============================================================
   6. STICKY NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base);
}

.site-header.scrolled {
  background: var(--nav-bg-scrolled);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

.nav-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Brand / logo lockup */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo {
  height: 48px;
  width: auto;
  /* The logo is grey on white — invert to show on dark nav */
  filter: brightness(0) invert(1);
  transition: opacity var(--transition-base);
}

.nav-brand:hover .nav-logo {
  opacity: 0.85;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-brand-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: 0.04em;
}

.nav-brand-sub {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Navigation links list */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.85);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-white);
  background-color: var(--glass-bg);
}

/* Active section highlight */
.nav-link.active {
  color: var(--color-gold);
  background-color: var(--glass-bg);
}

/* Nav CTA button */
.nav-cta {
  margin-left: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background-color: var(--color-gold);
  color: var(--color-deep-blue) !important;
  font-weight: var(--font-weight-semi);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background-color: var(--color-gold-dark);
  color: var(--color-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger-bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile nav — open state */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nav-bg-scrolled);
    padding: var(--space-4) var(--container-pad);
    border-bottom: 1px solid var(--glass-border);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
  }

  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-link {
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--glass-border);
    font-size: var(--font-size-base);
  }

  .nav-cta {
    margin-left: 0;
    margin-top: var(--space-3);
    text-align: center;
    padding: var(--space-4);
  }
}


/* ============================================================
   7. HERO SECTION
   ============================================================ */
.section-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

/* Background placeholder — deep blue gradient standing in for a photo */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      var(--color-deep-blue) 0%,
      #0e527f 40%,
      #1565a8 70%,
      #0d3b5e 100%
    );
  z-index: 0;
}

/* Subtle texture overlay */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(56,189,248,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(251,191,36,.10) 0%, transparent 40%);
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,61,98,0.3) 0%,
    rgba(10,61,98,0.6) 100%
  );
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: var(--space-20);
  animation: fadeInUp 0.9s var(--transition-slow) both;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
  animation: fadeInUp 0.7s 0.1s both;
}

.hero-headline {
  font-size: clamp(var(--font-size-4xl), 7vw, var(--font-size-6xl));
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.8s 0.2s both;
}

.hero-headline em {
  font-style: normal;
  color: var(--color-gold);
  position: relative;
}

/* Decorative underline on the italic headline word */
.hero-headline em::after {
  content: '';
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-cyan));
  border-radius: var(--radius-full);
  margin-top: var(--space-1);
}

.hero-subtext {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.82);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: var(--line-height-loose);
  animation: fadeInUp 0.8s 0.35s both;
}

.hero-cta-group {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s 0.5s both;
}

/* Scroll hint arrow */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-arrow {
  display: block;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255,255,255,0.5);
  border-bottom: 2px solid rgba(255,255,255,0.5);
  transform: rotate(45deg);
  animation: bounce 1.8s infinite;
}


/* ============================================================
   8. ABOUT SECTION
   ============================================================ */
.section-about {
  background-color: var(--color-bg-page);
}

/* Value cards */
.value-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.value-card-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(56,189,248,.15), rgba(10,61,98,.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--color-deep-blue);
  border: 2px solid rgba(56,189,248,.25);
}

.value-card-icon svg {
  width: 36px;
  height: 36px;
}

.value-card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-blue);
  margin-bottom: var(--space-4);
}

.value-card-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
}


/* ============================================================
   9. IMPACT SECTION
   ============================================================ */
.section-impact {
  background: linear-gradient(135deg, var(--color-deep-blue) 0%, #0e527f 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative radial blobs */
.section-impact::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.12) 0%, transparent 70%);
  pointer-events: none;
}

.section-impact::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.10) 0%, transparent 70%);
  pointer-events: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  padding: var(--space-8);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--transition-base);
}

.stat-item:hover {
  transform: translateY(-4px);
}

.stat-number {
  display: block;
  font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
  font-weight: var(--font-weight-black);
  color: var(--color-gold);
  line-height: 1;
}

.stat-plus {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-cyan);
  margin-left: var(--space-1);
  vertical-align: super;
  font-size: 1.4rem;
}

.stat-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,.75);
  margin-top: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ============================================================
   10. PROGRAMS SECTION
   ============================================================ */
.section-programs {
  background-color: var(--color-bg-alt);
}

.program-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  text-align: center;
  cursor: default;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.program-card:hover,
.program-card:focus {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-cyan);
  outline: none;
}

.program-card-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-deep-blue), var(--color-mid-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--color-white);
}

.program-card-icon svg {
  width: 40px;
  height: 40px;
}

.program-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-blue);
  margin-bottom: var(--space-3);
}

.program-card-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
}


/* ============================================================
   11. VOLUNTEER & DONATION SECTION
   ============================================================ */
.section-volunteer {
  background: linear-gradient(160deg, #0d3b5e 0%, var(--color-deep-blue) 60%, #0a2e4a 100%);
  position: relative;
  overflow: hidden;
}

.section-volunteer::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(56,189,248,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(251,191,36,.06) 0%, transparent 50%);
  pointer-events: none;
}

.volunteer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .volunteer-grid {
    grid-template-columns: 1fr;
  }
}

/* Volunteer form */
.volunteer-form-wrap {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.volunteer-form-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-8);
}

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

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,.85);
  margin-bottom: var(--space-2);
}

.form-label span {
  color: var(--color-gold);
}

.form-input {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-input::placeholder {
  color: rgba(255,255,255,.35);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-cyan);
  background: rgba(255,255,255,.15);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 16px;
  padding-right: var(--space-10);
}

/* Option text in select is hard to style cross-browser; keep system defaults */
.form-select option {
  background: var(--color-deep-blue);
  color: var(--color-white);
}

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

/* Donation card */
.donation-card {
  height: 100%;
}

.donation-card-inner {
  background: linear-gradient(145deg, var(--color-gold) 0%, #f59e0b 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

.donation-icon {
  width: 80px;
  height: 80px;
  background: rgba(10,61,98,.15);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  color: var(--color-deep-blue);
}

.donation-icon svg {
  width: 40px;
  height: 40px;
}

.donation-card-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-deep-blue);
  margin-bottom: var(--space-4);
}

.donation-card-text {
  font-size: var(--font-size-base);
  color: rgba(10,61,98,.8);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-8);
  flex: 1;
}

.contact-details {
  margin-top: var(--space-6);
  width: 100%;
}

.contact-item {
  font-size: var(--font-size-sm);
  color: var(--color-deep-blue);
  margin-bottom: var(--space-2);
}

.contact-label {
  font-weight: var(--font-weight-semi);
}

.contact-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-link:hover {
  opacity: 0.75;
}


/* ============================================================
   12. TESTIMONIALS SECTION
   ============================================================ */
.section-stories {
  background-color: var(--color-bg-page);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8);
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: var(--space-6);
  right: var(--space-8);
  font-size: 6rem;
  font-weight: var(--font-weight-black);
  color: rgba(10,61,98,.06);
  line-height: 1;
  font-family: Georgia, serif;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.testimonial-quote {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-cyan);
  padding-left: var(--space-5);
  flex: 1;
  font-style: normal;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-deep-blue), var(--color-mid-blue));
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-name {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi);
  color: var(--color-deep-blue);
  font-style: normal;
}

.testimonial-role {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ============================================================
   13. GALLERY SECTION
   ============================================================ */
.section-gallery {
  background-color: var(--color-bg-alt);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: var(--space-4);
}

.gallery-item {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.gallery-item--wide {
  grid-column: span 2;
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-deep-blue) 0%, #1565a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--transition-slow);
}

.gallery-item:hover .gallery-placeholder {
  transform: scale(1.04);
}

/* Subtle pattern on placeholder */
.gallery-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 20px
    );
}

.gallery-placeholder-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(to top, rgba(10,61,98,.85), transparent);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }

  .gallery-item--wide {
    grid-column: span 2;
  }
}


/* ============================================================
   14. CTA BANNER
   ============================================================ */
.section-cta-banner {
  position: relative;
  padding-block: var(--space-24);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #061f33 0%,
    var(--color-deep-blue) 50%,
    #1565a8 100%
  );
}

.cta-banner-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(56,189,248,.15) 0%, transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(251,191,36,.10) 0%, transparent 45%);
  pointer-events: none;
}

.cta-banner-content {
  position: relative;
  z-index: 1;
}

.cta-banner-headline {
  font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-6xl));
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  line-height: var(--line-height-tight);
  margin-block: var(--space-5) var(--space-6);
}

.cta-banner-headline em {
  font-style: normal;
  color: var(--color-gold);
}

.cta-banner-subtext {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,.75);
  max-width: 560px;
  margin-inline: auto;
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-10);
}


/* ============================================================
   15. FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-gray-800);
  color: rgba(255,255,255,.7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-block: var(--space-16);
  align-items: start;
}

.footer-logo {
  /* Logo is grey/white on dark – invert to white */
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-bottom: var(--space-5);
}

.footer-tagline {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: rgba(255,255,255,.55);
  max-width: 300px;
}

.footer-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-5);
}

.footer-links,
.footer-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.6);
  transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-gold);
}

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

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

.social-icon:hover,
.social-icon:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-deep-blue);
  transform: translateY(-3px);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: var(--space-6);
}

.footer-copyright,
.footer-disclaimer {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.4);
}

/* Footer logo link */
.footer-logo-link {
  display: inline-block;
}

/* NPO registration number */
.footer-npo-reg {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.35);
  margin-top: var(--space-3);
  letter-spacing: 0.04em;
}

/* Contact items: icon + text row */
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-cyan);
  opacity: 0.8;
}

/* Social section wrapper */
.footer-social-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Tagline below social icons */
.footer-social-tagline {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.4);
  margin-top: var(--space-1);
}

/* Back-to-top button in footer bar */
.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.1);
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.footer-back-top:hover,
.footer-back-top:focus-visible {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background-color: rgba(251,191,36,.06);
}

/* Footer bottom right cluster */
.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Footer responsive */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-right {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}


/* ============================================================
   16. SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   17. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%       { transform: rotate(45deg) translate(6px, 6px); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.4); }
  50%       { box-shadow: 0 0 0 12px rgba(251,191,36,0); }
}


/* ============================================================
   18. FOCUS / ACCESSIBILITY UTILITIES
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content link (visually hidden until focused) */
.skip-link,
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-gold);
  color: var(--color-deep-blue);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
}

.skip-link:focus,
.skip-to-content:focus {
  top: var(--space-4);
}


/* ============================================================
   PHASE 2 — BRAND VISUAL SYSTEM: Utilities & Components
   ============================================================ */

/* ---- Text utilities ---- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-white  { color: var(--color-white); }
.text-blue   { color: var(--color-deep-blue); }
.text-cyan   { color: var(--color-cyan-dark); }
.text-gold   { color: var(--color-gold); }
.text-muted  { color: var(--color-text-muted); }

.fw-bold  { font-weight: var(--font-weight-bold); }
.fw-semi  { font-weight: var(--font-weight-semi); }
.fw-black { font-weight: var(--font-weight-black); }

/* ---- Gradient headline text ---- */
.gradient-text {
  background: linear-gradient(90deg, var(--color-cyan-dark), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Badge / pill component ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  backdrop-filter: blur(8px);
}

.badge--gold {
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.35);
  color: var(--color-gold);
}

.badge--cyan {
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.3);
  color: var(--color-cyan);
}

/* Pulsing dot for live/active badges */
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

/* ---- Horizontal divider with label ---- */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---- Highlight / quote strip ---- */
.highlight-strip {
  background: linear-gradient(135deg, rgba(10,61,98,.05), rgba(56,189,248,.08));
  border-left: 4px solid var(--color-cyan-dark);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6) var(--space-8);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-deep-blue);
  line-height: var(--line-height-loose);
}

/* ---- Card accent top-border variants ---- */
.card-accent-top {
  border-top: 4px solid transparent;
}
.card-accent-top--blue { border-top-color: var(--color-deep-blue); }
.card-accent-top--cyan { border-top-color: var(--color-cyan-dark); }
.card-accent-top--gold { border-top-color: var(--color-gold); }

/* ---- Value card colour-coded icon variants ---- */
.value-card--blue .value-card-icon {
  background: linear-gradient(135deg, rgba(10,61,98,.12), rgba(10,61,98,.06));
  border-color: rgba(10,61,98,.2);
  color: var(--color-deep-blue);
}
.value-card--cyan .value-card-icon {
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(14,165,233,.08));
  border-color: rgba(56,189,248,.3);
  color: var(--color-cyan-dark);
}
.value-card--gold .value-card-icon {
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(217,119,6,.08));
  border-color: rgba(251,191,36,.3);
  color: var(--color-gold-dark);
}


/* ============================================================
   PHASE 3 — HERO SECTION ENHANCEMENTS
   ============================================================ */

/* ---- Animated floating geometric shapes (CSS only) ---- */
.hero-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: floatShape 18s infinite ease-in-out;
}

.shape--1 {
  width: 320px;
  height: 320px;
  top: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(56,189,248,.18) 0%, transparent 70%);
  animation-delay: 0s;
  animation-duration: 20s;
  opacity: 1;
}

.shape--2 {
  width: 200px;
  height: 200px;
  top: 15%;
  right: 8%;
  background: radial-gradient(circle, rgba(251,191,36,.14) 0%, transparent 70%);
  animation-delay: -6s;
  animation-duration: 22s;
  opacity: 1;
}

.shape--3 {
  width: 280px;
  height: 280px;
  bottom: 10%;
  left: 20%;
  background: radial-gradient(circle, rgba(56,189,248,.10) 0%, transparent 70%);
  animation-delay: -12s;
  animation-duration: 24s;
  opacity: 1;
}

.shape--4 {
  width: 140px;
  height: 140px;
  bottom: 25%;
  right: 20%;
  background: radial-gradient(circle, rgba(251,191,36,.12) 0%, transparent 70%);
  animation-delay: -4s;
  animation-duration: 16s;
  opacity: 1;
}

@keyframes floatShape {
  0%   { transform: translate(0,     0)     scale(1); }
  25%  { transform: translate(18px, -22px)  scale(1.06); }
  50%  { transform: translate(-12px, 16px)  scale(0.96); }
  75%  { transform: translate(8px,   20px)  scale(1.03); }
  100% { transform: translate(0,     0)     scale(1); }
}

/* ---- Logo watermark in hero background ---- */
.hero-logo-watermark {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: clamp(160px, 20vw, 280px);
  opacity: 0.06;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* ---- NPO pill badge (hero top) ---- */
.hero-npo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: var(--space-5);
  backdrop-filter: blur(8px);
  animation: fadeInUp 0.6s 0s both;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  animation: pulseDot 2s infinite;
}

/* ---- Trust signals row ---- */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-8);
  animation: fadeInUp 0.8s 0.65s both;
}

.trust-item {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.7);
  font-weight: var(--font-weight-medium);
}

.trust-divider {
  color: rgba(255,255,255,.3);
  font-size: var(--font-size-lg);
  line-height: 1;
  /* hide the divider on very small screens via the flex-wrap */
}

@media (max-width: 480px) {
  .trust-divider { display: none; }
  .hero-trust    { gap: var(--space-2); }
}

/* ---- Wave shape divider at bottom of hero ---- */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: auto;
}


/* ============================================================
   PHASE 4 — ABOUT SECTION ENHANCEMENTS
   ============================================================ */

/* ---- Two-column "Our Story" intro block ---- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-bottom: var(--space-16);
}

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

.about-story-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan-dark);
  margin-bottom: var(--space-3);
}

.about-story-title {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: var(--font-weight-black);
  color: var(--color-deep-blue);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-5);
}

.about-story-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-6);
}

/* Pillar list inside about story */
.about-pillars {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about-pillars li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.about-pillars li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-cyan-dark), var(--color-deep-blue));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M7 10l2.5 2.5L13 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  margin-top: 1px;
}

/* Mission quote card */
.mission-quote-card {
  background: linear-gradient(145deg, var(--color-deep-blue) 0%, #0e527f 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-10);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.mission-quote-card::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: var(--space-6);
  font-size: 10rem;
  font-weight: var(--font-weight-black);
  color: rgba(255,255,255,.06);
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: none;
}

/* Decorative orb inside quote card */
.mission-quote-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.15) 0%, transparent 70%);
  pointer-events: none;
}

.mission-quote-text {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: rgba(255,255,255,.9);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.mission-quote-cite {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.mission-quote-cite-line {
  width: 32px;
  height: 2px;
  background: var(--color-gold);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.mission-quote-cite-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-gold);
  font-style: normal;
  letter-spacing: 0.05em;
}

/* ---- Value card enhancements ---- */
/* Each card gets a coloured top accent bar */
.value-card--blue { border-top: 4px solid var(--color-deep-blue); }
.value-card--cyan { border-top: 4px solid var(--color-cyan-dark); }
.value-card--gold { border-top: 4px solid var(--color-gold); }


/* ============================================================
   PHASE 5 — IMPACT SECTION ENHANCEMENTS
   ============================================================ */

/* Icon circle above each stat */
.stat-item-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--color-cyan);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.stat-item:hover .stat-item-icon {
  background: rgba(56,189,248,.18);
  transform: scale(1.08);
}

.stat-item-icon svg {
  width: 28px;
  height: 28px;
}

/* Number + plus sign in one row */
.stat-number-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  line-height: 1;
}

/* Supporting tagline below the label */
.stat-tagline {
  display: block;
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.45);
  font-style: italic;
  margin-top: var(--space-2);
  letter-spacing: 0.04em;
}

/* Thin animated progress bar */
.stat-bar-wrap {
  width: 80px;
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-full);
  margin: var(--space-5) auto 0;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  width: var(--bar-pct, 70%);
  background: linear-gradient(90deg, var(--color-cyan), var(--color-gold));
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
}

/* JS adds .counted class when counter triggers */
.stat-item.counted .stat-bar-fill {
  transform: scaleX(1);
}


/* ============================================================
   PHASE 6 — PROGRAMS SECTION ENHANCEMENTS
   ============================================================ */

/* Category tag / pill at the top of each card */
.program-card-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.program-card-tag--blue {
  background: rgba(10,61,98,.10);
  color: var(--color-deep-blue);
  border: 1px solid rgba(10,61,98,.18);
}

.program-card-tag--cyan {
  background: rgba(56,189,248,.10);
  color: var(--color-cyan-dark);
  border: 1px solid rgba(56,189,248,.22);
}

.program-card-tag--gold {
  background: rgba(251,191,36,.12);
  color: var(--color-gold-dark);
  border: 1px solid rgba(251,191,36,.25);
}

/* Footer with "Get Involved →" link */
.program-card-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.program-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-deep-blue);
  transition: color var(--transition-base), gap var(--transition-base);
}

.program-card-link-arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.program-card:hover .program-card-link,
.program-card:focus .program-card-link {
  color: var(--color-cyan-dark);
  gap: var(--space-3);
}

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

/* Programs CTA strip below the card grid */
.programs-cta {
  text-align: center;
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-8);
  background: linear-gradient(135deg, rgba(10,61,98,.05), rgba(56,189,248,.08));
  border: 1px solid rgba(56,189,248,.14);
  border-radius: var(--radius-xl);
}

.programs-cta-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-deep-blue);
  max-width: 620px;
  margin: 0 auto var(--space-8);
  line-height: var(--line-height-loose);
}


/* ============================================================
   PHASE 7 — VOLUNTEER & DONATION ENHANCEMENTS
   ============================================================ */

/* "Why volunteer" 3-column benefits row */
.volunteer-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .volunteer-why {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.why-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--transition-base), background-color var(--transition-base);
}

.why-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.12);
}

.why-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: rgba(251,191,36,.14);
  border: 1px solid rgba(251,191,36,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  color: var(--color-gold);
}

.why-icon svg {
  width: 26px;
  height: 26px;
}

.why-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semi);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.why-text {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.6);
  line-height: var(--line-height-normal);
}

/* Social proof bar above the form */
.volunteer-social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.volunteer-social-proof-avatars {
  display: flex;
  flex-shrink: 0;
}

.proof-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-deep-blue), var(--color-mid-blue));
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-left: -8px;
  flex-shrink: 0;
}

.proof-avatar:first-child {
  margin-left: 0;
}

.volunteer-social-proof-text {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.8);
  line-height: var(--line-height-snug);
}

.volunteer-social-proof-text strong {
  color: var(--color-gold);
  font-weight: var(--font-weight-semi);
}

/* Quick-select donation amount buttons */
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  width: 100%;
}

.donate-amount-btn {
  padding: var(--space-3) var(--space-2);
  background: rgba(10,61,98,.10);
  border: 2px solid rgba(10,61,98,.20);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-deep-blue);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.donate-amount-btn:hover,
.donate-amount-btn.selected {
  background: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Trust seal below the donate button */
.donate-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: rgba(10,61,98,.65);
  line-height: var(--line-height-snug);
}

.donate-trust-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-deep-blue);
  opacity: 0.7;
}


/* ============================================================
   PHASE 8 — TESTIMONIALS ENHANCEMENTS
   ============================================================ */

/* 5-star rating row */
.testimonial-stars {
  font-size: 1rem;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* Coloured top accent border per card */
.testimonial-card--blue  { border-top: 3px solid var(--color-deep-blue); }
.testimonial-card--cyan  { border-top: 3px solid var(--color-cyan); }
.testimonial-card--gold  { border-top: 3px solid var(--color-gold); }

/* Quote left-border colour per variant */
.testimonial-card--blue  .testimonial-quote { border-left-color: var(--color-deep-blue); }
.testimonial-card--cyan  .testimonial-quote { border-left-color: var(--color-cyan); }
.testimonial-card--gold  .testimonial-quote { border-left-color: var(--color-gold); }

/* Avatar gradient per variant */
.testimonial-avatar--blue {
  background: linear-gradient(135deg, var(--color-deep-blue), var(--color-mid-blue));
}
.testimonial-avatar--cyan {
  background: linear-gradient(135deg, var(--color-cyan-dark), var(--color-cyan));
}
.testimonial-avatar--gold {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
  color: var(--color-deep-blue);
}

/* Program tag pill in the card footer */
.testimonial-program {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.testimonial-program--blue {
  background: rgba(10,61,98,.10);
  color: var(--color-deep-blue);
  border: 1px solid rgba(10,61,98,.18);
}
.testimonial-program--cyan {
  background: rgba(56,189,248,.12);
  color: var(--color-cyan-dark);
  border: 1px solid rgba(56,189,248,.22);
}
.testimonial-program--gold {
  background: rgba(251,191,36,.14);
  color: var(--color-gold-dark);
  border: 1px solid rgba(251,191,36,.28);
}

/* Stack the program pill below role text */
.testimonial-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}


/* ============================================================
   PHASE 9 — GALLERY ENHANCEMENTS
   ============================================================ */

/* Social proof mini-stats above the grid */
.gallery-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  padding: var(--space-6) var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.gallery-social-stat {
  text-align: center;
}

.gallery-social-num {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-deep-blue);
  line-height: 1;
}

.gallery-social-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-1);
}

.gallery-social-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .gallery-social-row { gap: var(--space-5); padding: var(--space-5) var(--space-4); }
  .gallery-social-divider { height: 28px; }
  .gallery-social-num { font-size: var(--font-size-xl); }
}

/* Colour variants for gallery placeholders */
.gallery-placeholder--dark {
  background: linear-gradient(135deg, #061f33 0%, var(--color-deep-blue) 100%);
}
.gallery-placeholder--mid {
  background: linear-gradient(135deg, var(--color-deep-blue) 0%, var(--color-mid-blue) 100%);
}
.gallery-placeholder--cyan {
  background: linear-gradient(135deg, var(--color-mid-blue) 0%, var(--color-cyan-dark) 100%);
}
.gallery-placeholder--gold {
  background: linear-gradient(135deg, var(--color-deep-blue) 0%, #8a5a00 100%);
}

/* Hover overlay with eye icon */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,61,98,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 2;
  color: var(--color-white);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay {
  opacity: 1;
}

/* Gallery CTA below the grid */
.gallery-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-12);
  text-align: center;
}

.gallery-cta-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 520px;
  line-height: var(--line-height-loose);
}


/* ============================================================
   PHASE 10 — CTA BANNER ENHANCEMENTS
   ============================================================ */

/* Animated ambient particles */
.cta-banner-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-particle {
  position: absolute;
  border-radius: var(--radius-full);
  opacity: 0;
  animation: floatParticle 8s ease-in-out infinite;
}

.cta-particle--1 {
  width: 6px; height: 6px;
  background: var(--color-gold);
  top: 20%; left: 10%;
  animation-delay: 0s; animation-duration: 7s;
}
.cta-particle--2 {
  width: 4px; height: 4px;
  background: var(--color-cyan);
  top: 60%; left: 25%;
  animation-delay: 1.5s; animation-duration: 9s;
}
.cta-particle--3 {
  width: 8px; height: 8px;
  background: rgba(255,255,255,.35);
  top: 35%; right: 18%;
  animation-delay: 0.8s; animation-duration: 11s;
}
.cta-particle--4 {
  width: 5px; height: 5px;
  background: var(--color-gold);
  bottom: 25%; right: 30%;
  animation-delay: 2.5s; animation-duration: 8s;
}
.cta-particle--5 {
  width: 4px; height: 4px;
  background: var(--color-cyan);
  top: 75%; left: 55%;
  animation-delay: 0.4s; animation-duration: 10s;
}
.cta-particle--6 {
  width: 7px; height: 7px;
  background: rgba(255,255,255,.2);
  top: 15%; right: 45%;
  animation-delay: 3s; animation-duration: 12s;
}

@keyframes floatParticle {
  0%   { opacity: 0; transform: translateY(0px) scale(0.8); }
  20%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.2); }
}

/* Mini impact stats row inside CTA */
.cta-banner-mini-stats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-8);
  margin-block: var(--space-8) var(--space-4);
}

.cta-mini-stat {
  text-align: center;
}

.cta-mini-num {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  color: var(--color-gold);
  line-height: 1;
}

.cta-mini-label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-1);
}

.cta-mini-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .cta-banner-mini-stats { gap: var(--space-5); padding: var(--space-3) var(--space-5); }
  .cta-mini-num { font-size: var(--font-size-lg); }
}

/* Two-button action row */
.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Ghost / outline button style for dark CTA background */
.cta-btn-ghost {
  background: transparent;
  border: 2px solid rgba(255,255,255,.45);
  color: var(--color-white);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.cta-btn-ghost:hover,
.cta-btn-ghost:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: var(--color-white);
  color: var(--color-white);
}


/* ============================================================
   19. PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .hero-scroll-hint,
  .nav-toggle,
  .section-cta-banner,
  .section-volunteer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
  }
}


/* ============================================================
   20. PHASE 12 — QUALITY & RESPONSIVE NOTES
   - Pure HTML5 + CSS3 only; zero external frameworks or JS libs.
   - Breakpoints: 900px (tablet), 768px (small tablet), 640px,
     560px (large phone), 480px (small phone).
   - Accessibility: skip-to-content link, aria labels on all
     interactive elements, :focus-visible outlines site-wide,
     prefers-reduced-motion support.
   - Color contrast: white / gold on deep-blue backgrounds meet
     WCAG AA requirements throughout.
   - All hover/focus states use consistent transition tokens;
     scroll-behaviour uses native CSS smooth scrolling.
   ============================================================ */