/* ============================================================
   CLARITYPATH RESEARCH INSTITUTE — Main Stylesheet v2.0
   ============================================================

   TABLE OF CONTENTS:
   01. Custom Properties (Design Tokens)
   02. Reset & Base
   03. Typography
   04. Layout & Container
   05. Skip Link & Accessibility Base
   06. Navigation
   07. Buttons & CTAs
   08. Badges & Labels
   09. Cards (Generic)
   10. Form Components
   11. Hero Sections
   12. Trust / Credibility Strip
   13. Section Layouts
   14. Research Focus Cards
   15. Audience Pathway Cards
   16. Resource Hub
   17. Stats & Impact
   18. Team Profile Cards
   19. Event Cards
   20. Newsletter Section
   21. CTA Band
   22. Footer
   23. Page: About
   24. Page: Research
   25. Page: Resources
   26. Page: Impact
   27. Page: Events
   28. Page: Get Involved
   29. Page: Donate
   30. Page: Contact
   31. Utility Classes
   32. Animations & Transitions
   33. Accessibility Overrides
   34. Responsive — Mobile First
   ============================================================ */

/* ============================================================
   01. CUSTOM PROPERTIES — DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Brand: Primary Purple (#8947C6 family) --- */
  --cp-purple-50:  #F4EDFC;
  --cp-purple-100: #E2CEFF;
  --cp-purple-200: #C69FF5;
  --cp-purple-300: #A970EA;
  --cp-purple-400: #9958D8;
  --cp-purple-500: #8947C6;   /* Core brand purple */
  --cp-purple-600: #7038A8;
  --cp-purple-700: #57298A;
  --cp-purple-800: #3F1C6B;
  --cp-purple-900: #280F4A;

  /* --- Brand: Accent Warm Amber/Gold (#F59E0B family) --- */
  --cp-amber-50:   #FFFBEB;
  --cp-amber-100:  #FEF3C7;
  --cp-amber-200:  #FDE68A;
  --cp-amber-300:  #FCD34D;
  --cp-amber-400:  #FBBF24;
  --cp-amber-500:  #F59E0B;
  --cp-amber-600:  #D97706;
  --cp-amber-700:  #B45309;
  /* Aliases for backward compatibility */
  --cp-gold-100:   #FEF3C7;
  --cp-gold-300:   #FCD34D;
  --cp-gold-400:   #FBBF24;
  --cp-gold-500:   #F59E0B;
  --cp-gold-600:   #D97706;
  --cp-gold-700:   #B45309;

  /* --- Brand: Mid Purple (replaces teal) --- */
  --cp-teal-50:    #F4EDFC;
  --cp-teal-100:   #E2CEFF;
  --cp-teal-300:   #C69FF5;
  --cp-teal-400:   #A970EA;
  --cp-teal-500:   #8947C6;
  --cp-teal-600:   #7038A8;
  --cp-teal-700:   #57298A;
  --cp-teal-800:   #3F1C6B;

  /* --- CTA / Primary Action (purple) --- */
  --cp-cta:        #8947C6;
  --cp-cta-hover:  #7038A8;
  --cp-cta-light:  #F4EDFC;

  /* --- Neutrals --- */
  --cp-white:      #FFFFFF;
  --cp-gray-50:    #F9FAFB;
  --cp-gray-100:   #F3F4F6;
  --cp-gray-200:   #E5E7EB;
  --cp-gray-300:   #D1D5DB;
  --cp-gray-400:   #9CA3AF;
  --cp-gray-500:   #6B7280;
  --cp-gray-600:   #4B5563;
  --cp-gray-700:   #374151;
  --cp-gray-800:   #1F2937;
  --cp-gray-900:   #111827;

  /* --- Dark text (purple-tinted navy) --- */
  --cp-text:       #1E1B4B;
  --cp-text-body:  #374151;
  --cp-text-muted: #6B7280;

  /* --- Backgrounds --- */
  --cp-bg:         #FFFFFF;
  --cp-bg-soft:    #F9FAFB;
  --cp-bg-purple:  #F4EDFC;
  --cp-bg-warm:    #F4EDFC;
  --cp-bg-teal:    #E2CEFF;
  --cp-bg-dark:    #280F4A;

  /* --- Semantic Aliases --- */
  --color-primary:       var(--cp-purple-500);
  --color-primary-dark:  var(--cp-purple-700);
  --color-primary-light: var(--cp-purple-100);
  --color-secondary:     var(--cp-purple-400);
  --color-accent:        var(--cp-amber-500);
  --color-cta:           var(--cp-purple-500);
  --color-text:          var(--cp-text);
  --color-muted:         var(--cp-text-muted);

  /* --- Typography --- */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;

  /* Font Sizes */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */

  /* Font Weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* --- Spacing Scale (8px base) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.07), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-card: 0 4px 24px rgba(30,27,75,0.10), 0 1px 4px rgba(30,27,75,0.06);
  --shadow-hover:0 8px 32px rgba(137,71,198,0.18);
  --shadow-glow: 0 0 30px rgba(137,71,198,0.22);

  /* --- Transitions --- */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index Scale --- */
  --z-base:     0;
  --z-raised:   1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;

  /* --- Container Widths --- */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-px: 1.5rem;

  /* --- Nav Height --- */
  --nav-height: 95px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--cp-text-body);
  background-color: var(--cp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  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: inherit;
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--cp-text);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

p {
  line-height: var(--leading-relaxed);
}

strong {
  font-weight: var(--font-semibold);
}

hr {
  border: none;
  border-top: 1px solid var(--cp-gray-200);
}

/* ============================================================
   03. TYPOGRAPHY
   ============================================================ */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--text-6xl));
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cp-text);
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cp-text);
}

.heading-xl {
  font-size: clamp(1.75rem, 3.5vw, var(--text-4xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.heading-lg {
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.heading-md {
  font-size: clamp(1.25rem, 2.5vw, var(--text-2xl));
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.heading-sm {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
}

.text-lead {
  font-size: clamp(1.05rem, 2vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: var(--cp-gray-600);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cp-text-body);
}

.text-sm-muted {
  font-size: var(--text-sm);
  color: var(--cp-text-muted);
  line-height: var(--leading-normal);
}

.text-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Solid text colors (no gradient) */
.text-gradient-purple {
  color: var(--cp-purple-500);
}

.text-gradient-gold {
  color: var(--cp-gold-500);
}

/* ============================================================
   04. LAYOUT & CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--sp-14);
}

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

.section--lg {
  padding-block: var(--sp-20);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

.section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-purple-600);
  margin-bottom: var(--sp-4);
}

.section-header .eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--cp-amber-500);
  border-radius: 2px;
}

.section-header h2 {
  margin-bottom: var(--sp-4);
}

.section-header p {
  color: var(--cp-gray-600);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

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

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
}

/* ============================================================
   05. SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-6);
  background: var(--cp-purple-700);
  color: var(--cp-white);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--sp-4);
}

/* ============================================================
   06. NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled {
  border-bottom-color: var(--cp-gray-200);
  box-shadow: 0 2px 20px rgba(30,27,75,0.07);
}

/* Floating pill nav — homepage hero only */
.site-header--hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border: none;
  z-index: 10;
}

.site-header--hero .nav-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 999px;
  margin-top: var(--sp-3);
  box-shadow: 0 4px 32px rgba(30,27,75,0.13);
  max-width: 1160px;
  transition: border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header--hero.scrolled {
  position: fixed;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--cp-gray-200);
  box-shadow: 0 2px 20px rgba(30,27,75,0.07);
}

.site-header--hero.scrolled .nav-container {
  background: transparent;
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
  max-width: var(--container-wide);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  gap: var(--sp-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  height: var(--nav-height);
}

.nav-logo a {
  display: flex;
  align-items: center;
}

.nav-logo img,
.nav-logo svg {
  height: 200px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Desktop Nav */
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  flex: 1;
  justify-content: center;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-2);
  font-size: 1rem;
  font-weight: var(--font-medium);
  color: var(--cp-gray-700);
  border-radius: var(--radius-md);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--cp-purple-600);
  background: var(--cp-purple-50);
}

.nav-list a.active {
  font-weight: var(--font-semibold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav-donate-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.45rem var(--sp-4);
  background: var(--cp-cta);
  color: var(--cp-white);
  font-size: 0.78rem;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  transition: background var(--t-fast), transform var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}

.nav-donate-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.nav-donate-btn:hover {
  background: var(--cp-cta-hover);
  transform: translateY(-1px);
}

/* Nav Dropdown */
.nav-has-dropdown {
  position: relative;
  /* Extend hover area downward so cursor can move from link to dropdown */
  padding-bottom: 10px;
  margin-bottom: -10px;
}

.nav-has-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform var(--t-fast);
}

.nav-has-dropdown:hover > a::after,
.nav-has-dropdown:focus-within > a::after {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;            /* flush — no gap so mouse doesn't slip between */
  left: 50%;
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(30,27,75,0.12);
  padding-top: 10px;    /* visual gap via padding, not positioning */
  padding-bottom: var(--sp-2);
  min-width: 165px;
  list-style: none;
  margin: 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  pointer-events: none;
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown,
.nav-has-dropdown.click-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-dropdown li {
  list-style: none;
}

.nav-dropdown a {
  display: block;
  padding: 9px var(--sp-5);
  font-size: 1rem;
  font-weight: var(--font-medium);
  color: var(--cp-gray-700);
  white-space: nowrap;
  border-radius: 0;
  transition: color var(--t-fast), background var(--t-fast);
}

.nav-dropdown a:hover {
  color: var(--cp-purple-600);
  background: var(--cp-purple-50);
}

/* Mobile Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--cp-gray-200);
  gap: 5px;
  transition: background var(--t-fast);
  flex-shrink: 0;
}

.nav-toggle:hover {
  background: var(--cp-gray-100);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cp-gray-700);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   07. BUTTONS & CTAs
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 3px solid var(--cp-purple-400);
  outline-offset: 3px;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — Donation CTA */
.btn-primary {
  background: var(--cp-cta);
  color: var(--cp-white);
  border-color: var(--cp-cta);
}
.btn-primary:hover {
  background: var(--cp-cta-hover);
  border-color: var(--cp-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200, 75, 26, 0.35);
}

/* Brand Purple */
.btn-purple {
  background: var(--cp-purple-600);
  color: var(--cp-white);
  border-color: var(--cp-purple-600);
}
.btn-purple:hover {
  background: var(--cp-purple-700);
  border-color: var(--cp-purple-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Outlined Purple */
.btn-outline {
  background: transparent;
  color: var(--cp-purple-600);
  border-color: var(--cp-purple-300);
}
.btn-outline:hover {
  background: var(--cp-purple-50);
  border-color: var(--cp-purple-500);
  transform: translateY(-1px);
}

/* Outlined White (for dark backgrounds) */
.btn-outline-white {
  background: transparent;
  color: var(--cp-white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--cp-white);
}

/* Gold / Accent — amber */
.btn-gold {
  background: var(--cp-amber-500);
  color: var(--cp-gray-900);
  border-color: var(--cp-amber-500);
  font-weight: var(--font-bold);
}
.btn-gold:hover {
  background: var(--cp-amber-600);
  border-color: var(--cp-amber-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--cp-text-body);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--cp-gray-100);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
}

.btn-lg {
  font-size: var(--text-lg);
  padding: var(--sp-4) var(--sp-8);
}

.btn-xl {
  font-size: var(--text-xl);
  padding: var(--sp-5) var(--sp-10);
}

/* ============================================================
   08. BADGES & LABELS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
}

.badge-purple {
  background: var(--cp-purple-100);
  color: var(--cp-purple-700);
}

.badge-teal {
  background: var(--cp-amber-100);
  color: var(--cp-amber-700);
}

.badge-gold {
  background: var(--cp-amber-100);
  color: var(--cp-amber-700);
}

.badge-gray {
  background: var(--cp-gray-100);
  color: var(--cp-gray-700);
}

.badge-orange {
  background: var(--cp-cta-light);
  color: var(--cp-cta);
}

/* ============================================================
   09. CARDS (Generic)
   ============================================================ */
.card {
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

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

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}

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

.card-icon--purple {
  background: var(--cp-purple-100);
  color: var(--cp-purple-600);
}

.card-icon--teal {
  background: var(--cp-teal-100);
  color: var(--cp-teal-700);
}

.card-icon--gold {
  background: var(--cp-gold-100);
  color: var(--cp-gold-700);
}

.card-icon--orange {
  background: var(--cp-cta-light);
  color: var(--cp-cta);
}

.card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
  color: var(--cp-text);
}

.card p {
  font-size: var(--text-base);
  color: var(--cp-gray-600);
  line-height: var(--leading-relaxed);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--cp-purple-600);
  margin-top: var(--sp-4);
  transition: gap var(--t-fast), color var(--t-fast);
}

.card-link:hover {
  gap: var(--sp-3);
  color: var(--cp-purple-700);
}

.card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast);
}

.card-link:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   10. FORM COMPONENTS
   ============================================================ */
.form-group {
  margin-bottom: var(--sp-6);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--cp-gray-700);
  margin-bottom: var(--sp-2);
}

.form-label .required {
  color: var(--cp-cta);
  margin-left: var(--sp-1);
}

.form-control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--cp-text-body);
  background: var(--cp-white);
  border: 1.5px solid var(--cp-gray-300);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--cp-purple-400);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

.form-control::placeholder {
  color: var(--cp-gray-400);
}

.form-control:invalid:not(:placeholder-shown) {
  border-color: #EF4444;
}

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

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--cp-text-muted);
  margin-top: var(--sp-2);
}

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

.form-success {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  border-radius: var(--radius-lg);
  color: #166534;
  font-weight: var(--font-medium);
}

.form-success.visible {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ============================================================
   11. HERO SECTIONS
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
}

/* ── Homepage hero: full-viewport background image ── */
.hero-home {
  min-height: min(85vh, 820px);
  height: auto;
  display: flex;
  align-items: flex-end;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Overlay — layered gradient mesh for editorial depth */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(40, 15, 74, 0.90) 0%,
    rgba(89, 41, 138, 0.70) 45%,
    rgba(40, 15, 74, 0.88) 100%
  );
}

/* Decorative amber glow blob in hero */
.hero-home::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, transparent 70%);
  animation: amber-pulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.hero-home .hero-content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--sp-10);
  padding-top: calc(var(--nav-height) + var(--sp-6));
  max-width: 640px;
}

.hero-text {
  max-width: 600px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--cp-white);
  margin-bottom: var(--sp-4);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cp-amber-400);
  animation: pulse-dot 2s ease infinite;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: var(--font-extrabold);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--cp-white);
  margin-bottom: var(--sp-4);
}

.hero-headline::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--cp-amber-500);
  border-radius: 2px;
  margin-bottom: var(--sp-4);
}

.hero-headline .highlight {
  color: var(--cp-gold-400);
}

.hero-sub {
  font-size: clamp(0.9rem, 1.4vw, var(--text-base));
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-6);
  max-width: 520px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Hero-specific button styles */
.btn-hero-primary {
  background: var(--cp-purple-500);
  color: var(--cp-white);
  border: 2px solid var(--cp-purple-500);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  padding: var(--sp-4) var(--sp-8);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.btn-hero-primary:hover {
  background: var(--cp-purple-600);
  border-color: var(--cp-purple-600);
  color: var(--cp-white);
}

.btn-hero-outline {
  background: rgba(255,255,255,0.85);
  color: var(--cp-purple-700);
  border: 2px solid var(--cp-purple-300);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  padding: var(--sp-4) var(--sp-8);
  backdrop-filter: blur(8px);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.btn-hero-outline:hover {
  background: var(--cp-white);
  border-color: var(--cp-purple-500);
  color: var(--cp-purple-600);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.75);
}

.hero-trust-icon {
  width: 16px;
  height: 16px;
  color: var(--cp-gold-400);
  flex-shrink: 0;
}

/* Inner page hero — full-width style */
.hero-inner {
  background: var(--cp-purple-100);
  min-height: auto;
  padding: 0;
  border: none;
  position: relative;
  overflow: hidden;
}

.hero-inner .container {
  background: transparent;
  border-radius: 0;
  padding: var(--sp-14) var(--sp-6);
  position: relative;
  overflow: visible;
  text-align: center;
}

/* Left decorative — sparkle + plus marks */
.hero-inner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 220px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='200' viewBox='0 0 220 200'%3E%3Cpath d='M90 100 C90 100 95 55 90 10 C90 10 130 50 170 45 C170 45 130 90 170 145 C170 145 130 100 90 190 C90 190 85 145 10 145 C10 145 55 100 10 55 C10 55 55 100 90 100Z' stroke='%23A189E6' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cline x1='28' y1='60' x2='48' y2='60' stroke='%23A189E6' stroke-width='2' opacity='0.7'/%3E%3Cline x1='38' y1='50' x2='38' y2='70' stroke='%23A189E6' stroke-width='2' opacity='0.7'/%3E%3Cline x1='60' y1='25' x2='74' y2='25' stroke='%23A189E6' stroke-width='1.5' opacity='0.5'/%3E%3Cline x1='67' y1='18' x2='67' y2='32' stroke='%23A189E6' stroke-width='1.5' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
  pointer-events: none;
}

/* Right decorative — large circle outline */
.hero-inner::after {
  content: '';
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  border: 4px solid var(--cp-purple-300);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner .hero-content {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-block: 0;
  position: relative;
  z-index: 1;
}

.hero-inner .hero-headline,
.hero-inner .display-lg {
  color: var(--cp-purple-900);
}

.hero-inner .hero-sub,
.hero-inner .text-lead {
  color: var(--cp-gray-600);
  max-width: 640px;
  margin-inline: auto;
}

.hero-inner .eyebrow {
  justify-content: center;
}

/* Breadcrumb */
.hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--sp-6);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(161,137,230,0.25);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  backdrop-filter: blur(6px);
}

.hero-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cp-purple-500);
  transition: color var(--t-fast);
}

.hero-breadcrumb a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}

.hero-breadcrumb a:hover {
  color: var(--cp-purple-700);
}

/* Chevron separator */
.hero-breadcrumb .bc-sep {
  display: inline-flex;
  align-items: center;
  color: var(--cp-purple-300);
  margin: 0 2px;
}

.hero-breadcrumb .bc-sep svg {
  width: 14px;
  height: 14px;
}

.hero-breadcrumb .bc-current {
  color: var(--cp-purple-800);
  font-weight: var(--font-semibold);
}

/* ============================================================
   12. TRUST / CREDIBILITY STRIP
   ============================================================ */
.trust-strip {
  background: var(--cp-white);
  border-bottom: 1px solid var(--cp-gray-100);
  padding-block: var(--sp-6);
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--cp-gray-600);
  font-weight: var(--font-medium);
}

.trust-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cp-purple-50);
  color: var(--cp-purple-600);
}

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

.trust-divider {
  width: 1px;
  height: 32px;
  background: var(--cp-gray-200);
  flex-shrink: 0;
}

/* ============================================================
   13. SECTION LAYOUTS — SPECIFIC
   ============================================================ */

/* --- Why It Matters / Mission Section --- */
.mission-section {
  background: var(--cp-bg-dark);
  position: relative;
  overflow: hidden;
}


.mission-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.mission-image-stack {
  position: relative;
}

.mission-image-main {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.mission-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder style for mission image */
.mission-image-main .img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: var(--cp-purple-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--sp-8);
}

.mission-quote-card {
  position: absolute;
  bottom: -var(--sp-6);
  right: -var(--sp-6);
  background: var(--cp-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-xl);
  max-width: 240px;
}

.mission-quote-card p {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--cp-gray-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-3);
}

.mission-quote-card .quote-attr {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--cp-purple-600);
}

.mission-text {
  color: rgba(255,255,255,0.85);
}

.mission-text h2 {
  color: var(--cp-white);
  margin-bottom: var(--sp-6);
}

.mission-text .eyebrow {
  color: var(--cp-gold-400);
}

.mission-text p {
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--sp-6);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.mission-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.mission-pillar {
  background: var(--cp-purple-50);
  border: 1px solid var(--cp-purple-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
}

.mission-pillar h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--cp-purple-700);
  margin-bottom: var(--sp-2);
}

.mission-pillar p {
  font-size: var(--text-sm);
  color: var(--cp-gray-500);
  margin: 0;
}

/* ============================================================
   14. RESEARCH FOCUS CARDS
   ============================================================ */
.research-section {
  background: var(--cp-bg-soft);
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.focus-card {
  background: var(--cp-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  border: 1px solid var(--cp-gray-200);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative;
  overflow: hidden;
}

.focus-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cp-amber-500), var(--cp-amber-300));
  opacity: 0;
  transition: opacity var(--t-base);
}

.focus-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--cp-purple-200);
}

.focus-card:hover::before {
  opacity: 1;
}

.focus-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  font-size: 1.5rem;
}

.focus-card-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.focus-card-icon--purple { background: var(--cp-purple-100); color: var(--cp-purple-600); }
.focus-card-icon--teal   { background: var(--cp-amber-100); color: var(--cp-amber-700); }
.focus-card-icon--gold   { background: var(--cp-amber-100); color: var(--cp-amber-700); }
.focus-card-icon--gray   { background: var(--cp-gray-100);  color: var(--cp-purple-600); }

.focus-card-icon--purple svg { stroke: var(--cp-purple-600); }
.focus-card-icon--teal svg   { stroke: var(--cp-amber-600); }
.focus-card-icon--gold svg   { stroke: var(--cp-amber-600); }
.focus-card-icon--gray svg   { stroke: var(--cp-purple-600); }

.focus-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
  color: var(--cp-text);
}

.focus-card p {
  font-size: var(--text-base);
  color: var(--cp-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-5);
}

.focus-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* ============================================================
   15. AUDIENCE PATHWAY CARDS
   ============================================================ */
.audience-section {
  background: var(--cp-bg-purple);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

.audience-card {
  background: var(--cp-white);
  border: 1px solid var(--cp-purple-100);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  text-align: center;
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
  cursor: pointer;
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background: var(--cp-purple-700);
}

.audience-card:hover h3,
.audience-card:hover p,
.audience-card:hover .audience-card-link {
  color: var(--cp-white);
}

.audience-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cp-purple-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  font-size: 1.75rem;
  transition: background var(--t-base);
}

.audience-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--cp-purple-600);
  stroke-width: 1.75;
  fill: none;
}

.audience-card:hover .audience-icon svg {
  stroke: rgba(255, 255, 255, 0.9);
}

.audience-card:hover .audience-icon {
  background: rgba(255,255,255,0.15);
}

.audience-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-2);
  transition: color var(--t-base);
}

.audience-card p {
  font-size: var(--text-sm);
  color: var(--cp-gray-500);
  margin-bottom: var(--sp-4);
  transition: color var(--t-base);
}

.audience-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--cp-purple-600);
  transition: color var(--t-base), gap var(--t-fast);
}

.audience-card-link svg {
  width: 14px;
  height: 14px;
}

.audience-card:hover .audience-card-link {
  gap: var(--sp-2);
}

/* ============================================================
   16. RESOURCE HUB
   ============================================================ */
.resource-section {
  background: var(--cp-white);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

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

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

.resource-card-thumb {
  height: 180px;
  background: var(--cp-purple-500);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.resource-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-card-thumb.gold-bg {
  background: var(--cp-gold-500);
}

.resource-card-thumb.teal-bg {
  background: var(--cp-teal-600);
}

.resource-card-thumb.purple-bg {
  background: var(--cp-purple-700);
}

.resource-thumb-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.resource-card-body {
  padding: var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.resource-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-3);
  line-height: var(--leading-snug);
}

.resource-card p {
  font-size: var(--text-sm);
  color: var(--cp-gray-500);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.resource-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--cp-gray-100);
}

/* ============================================================
   17. STATS & IMPACT
   ============================================================ */
.stats-section {
  background: var(--cp-bg-dark);
  position: relative;
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  border-right: 1px solid rgba(255,255,255,0.1);
}

.stat-item:last-child {
  border-right: none;
}

.stat-value {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: var(--font-extrabold);
  color: var(--cp-white);
  line-height: 1;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  display: inline-block;
  padding-bottom: var(--sp-3);
  border-bottom: 3px solid var(--cp-amber-500);
}

.stat-value .stat-accent {
  color: var(--cp-gold-400);
}

.stat-label {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.65);
  font-weight: var(--font-medium);
}

.stat-sublabel {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  margin-top: var(--sp-2);
}

/* Impact narrative cards */
.impact-cards-section {
  background: var(--cp-bg-soft);
}

.impact-card {
  background: var(--cp-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  border: 1px solid var(--cp-gray-200);
  box-shadow: var(--shadow-card);
}

.impact-card-number {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  color: var(--cp-purple-500);
  line-height: 1;
  margin-bottom: var(--sp-3);
}

/* ============================================================
   18. TEAM PROFILE CARDS
   ============================================================ */
.team-section {
  background: var(--cp-bg-soft);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.team-card {
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

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

.team-card-photo {
  height: 220px;
  background: linear-gradient(135deg, var(--cp-purple-700) 0%, var(--cp-purple-400) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-card-photo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,0.7);
}

.team-card-info {
  padding: var(--sp-6);
}

.team-card-info h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-1);
}

.team-card-role {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--cp-purple-600);
  margin-bottom: var(--sp-3);
}

.team-card-bio {
  font-size: var(--text-sm);
  color: var(--cp-gray-500);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-4);
}

.team-card-creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.team-card-links {
  display: flex;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--cp-gray-100);
}

.team-card-links a {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--cp-gray-500);
  transition: color var(--t-fast);
}

.team-card-links a:hover {
  color: var(--cp-purple-600);
}

.team-card-links svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   19. EVENT CARDS
   ============================================================ */
.events-section {
  background: var(--cp-white);
}

.event-card {
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

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

.event-card-date {
  flex-shrink: 0;
  width: 80px;
  background: var(--cp-purple-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  color: var(--cp-white);
  text-align: center;
}

.event-card-date .month {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.event-card-date .day {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: 1;
}

.event-card-date .year {
  font-size: var(--text-xs);
  opacity: 0.6;
}

.event-card-content {
  flex: 1;
  padding: var(--sp-5) var(--sp-6);
}

.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.event-card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--cp-gray-500);
}

.event-card-meta-item svg {
  width: 13px;
  height: 13px;
}

.event-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-2);
  line-height: var(--leading-snug);
}

.event-card p {
  font-size: var(--text-sm);
  color: var(--cp-gray-500);
  margin-bottom: var(--sp-4);
}

/* ============================================================
   20. NEWSLETTER SECTION
   ============================================================ */
.newsletter-section {
  background: var(--cp-purple-700);
  position: relative;
  overflow: hidden;
}


.newsletter-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.newsletter-text {
  color: var(--cp-white);
}

.newsletter-text .eyebrow {
  color: var(--cp-gold-300);
}

.newsletter-text h2 {
  color: var(--cp-white);
  margin-bottom: var(--sp-4);
}

.newsletter-text p {
  color: rgba(255,255,255,0.8);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.newsletter-trust {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

.newsletter-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.newsletter-trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--cp-gold-300);
}

.newsletter-form-wrap {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8);
}

.newsletter-form-wrap h3 {
  color: var(--cp-white);
  font-size: var(--text-xl);
  margin-bottom: var(--sp-6);
}

.newsletter-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: var(--radius-lg);
  color: var(--cp-white);
  font-size: var(--text-base);
  margin-bottom: var(--sp-4);
}

.newsletter-input::placeholder {
  color: rgba(255,255,255,0.75);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--cp-amber-400);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

/* ============================================================
   21. CTA BAND
   ============================================================ */
.cta-band {
  background: var(--cp-bg-purple);
  border-top: 1px solid var(--cp-purple-100);
  border-bottom: 1px solid var(--cp-purple-100);
  padding-block: var(--sp-14);
  text-align: center;
}

.cta-band h2 {
  margin-bottom: var(--sp-4);
}

.cta-band p {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  color: var(--cp-gray-600);
  font-size: var(--text-lg);
}

.cta-band-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Final CTA dark band */
.cta-band-dark {
  background: var(--cp-bg-dark);
  border: none;
  position: relative;
  overflow: hidden;
}

.cta-band-dark h2 {
  color: var(--cp-white);
}

.cta-band-dark p {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   22. FOOTER
   ============================================================ */
.site-footer {
  background: var(--cp-gray-900);
  color: rgba(255,255,255,0.75);
  border-top: 3px solid var(--cp-amber-500);
}

.footer-main {
  padding-block: var(--sp-14) var(--sp-12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: var(--sp-12);
}

.footer-brand .footer-logo {
  margin-bottom: var(--sp-5);
  filter: brightness(10);
  opacity: 0.9;
}

.footer-brand .footer-logo img,
.footer-brand .footer-logo svg {
  max-height: 68px;
  width: auto;
  max-width: 260px;
  height: auto;
  display: block;
}

.footer-brand p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-6);
  max-width: 280px;
}

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

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: background var(--t-fast), color var(--t-fast);
}

.footer-social a:hover {
  background: var(--cp-amber-600);
  color: var(--cp-white);
  border-color: var(--cp-amber-500);
}

.footer-social a svg {
  width: 16px;
  height: 16px;
}

.footer-col h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--cp-white);
  margin-bottom: var(--sp-5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-nav-list a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  transition: color var(--t-fast);
}

.footer-nav-list a:hover {
  color: var(--cp-purple-300);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--cp-purple-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item a:hover {
  color: var(--cp-purple-300);
}

.footer-donate-box {
  background: var(--cp-purple-700);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  margin-top: var(--sp-4);
}

.footer-donate-box h4 {
  color: var(--cp-white) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--text-base) !important;
  margin-bottom: var(--sp-2) !important;
}

.footer-donate-box p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-4);
  line-height: var(--leading-relaxed);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--sp-6);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-bottom-inner p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.footer-legal-links {
  display: flex;
  gap: var(--sp-6);
}

.footer-legal-links a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  transition: color var(--t-fast);
}

.footer-legal-links a:hover {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   23. PAGE: ABOUT
   ============================================================ */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.value-card {
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-card);
}

.value-card .value-number {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  color: var(--cp-purple-100);
  line-height: 1;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
}

.value-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.about-story-img {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 3/4;
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-8));
}

.about-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-story-img .img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: var(--cp-purple-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--sp-8);
}

.about-story-content > * + * {
  margin-top: var(--sp-6);
}

.about-story-content h2 {
  margin-top: var(--sp-10);
}

.about-story-content p {
  font-size: var(--text-lg);
  color: var(--cp-gray-600);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   24. PAGE: RESEARCH
   ============================================================ */
.research-pillar {
  background: var(--cp-white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--cp-gray-200);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
}

.research-pillar-visual {
  background: var(--cp-purple-700);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.research-pillar-visual .pillar-num {
  font-size: var(--text-6xl);
  font-weight: var(--font-extrabold);
  color: rgba(255,255,255,0.15);
  line-height: 1;
  font-family: var(--font-display);
}

.research-pillar-visual h3 {
  font-size: var(--text-2xl);
  color: var(--cp-white);
  margin-bottom: var(--sp-4);
}

.research-pillar-visual p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.75);
  line-height: var(--leading-relaxed);
}

.research-pillar-body {
  padding: var(--sp-10);
}

.research-pillar-body ul {
  list-style: none;
  margin: var(--sp-4) 0;
}

.research-pillar-body ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--cp-gray-100);
  font-size: var(--text-base);
  color: var(--cp-gray-600);
}

.research-pillar-body ul li::before {
  content: '→';
  color: var(--cp-purple-400);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   25. PAGE: RESOURCES
   ============================================================ */
.resource-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}

.filter-btn {
  padding: var(--sp-2) var(--sp-5);
  border: 1.5px solid var(--cp-gray-300);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--cp-gray-600);
  background: var(--cp-white);
  cursor: pointer;
  transition: all var(--t-fast);
}

.filter-btn:hover {
  border-color: var(--cp-purple-400);
  color: var(--cp-purple-600);
}

.filter-btn.active {
  background: var(--cp-purple-600);
  border-color: var(--cp-purple-600);
  color: var(--cp-white);
}

.resource-download-card {
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.resource-download-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.resource-pdf-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--cp-amber-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cp-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.resource-download-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--sp-2);
  line-height: var(--leading-snug);
}

.resource-download-card p {
  font-size: var(--text-sm);
  color: var(--cp-gray-500);
  margin-bottom: var(--sp-3);
}

/* ============================================================
   26. PAGE: IMPACT
   ============================================================ */
.impact-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-16);
}

.impact-stat-card {
  background: var(--cp-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  text-align: center;
  border: 1px solid var(--cp-gray-200);
  box-shadow: var(--shadow-card);
}

.impact-stat-card .big-num {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  color: var(--cp-amber-600);
  line-height: 1;
  font-family: var(--font-display);
  margin-bottom: var(--sp-2);
}

.impact-communities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.community-card {
  background: var(--cp-white);
  border-left: 4px solid var(--cp-amber-500);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--sp-6) var(--sp-8);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   27. PAGE: EVENTS
   ============================================================ */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.events-coming-soon {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  background: var(--cp-bg-purple);
  border-radius: var(--radius-2xl);
  border: 2px dashed var(--cp-purple-200);
}

.events-coming-soon h3 {
  font-size: var(--text-2xl);
  color: var(--cp-purple-700);
  margin-bottom: var(--sp-4);
}

.events-coming-soon p {
  color: var(--cp-gray-500);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}

/* ============================================================
   28. PAGE: GET INVOLVED
   ============================================================ */
.involvement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.involvement-card {
  background: var(--cp-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  border: 2px solid var(--cp-gray-200);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.involvement-card:hover {
  transform: translateY(-4px);
  border-color: var(--cp-amber-400);
  box-shadow: var(--shadow-hover);
}

.involvement-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.involvement-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--cp-purple-600);
  stroke-width: 1.75;
  fill: none;
}

.involvement-card:hover .involvement-icon {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}

.involvement-icon--purple {
  background: var(--cp-purple-100);
}

.involvement-icon--teal {
  background: var(--cp-amber-100);
}

.involvement-icon--teal svg {
  stroke: var(--cp-amber-600);
}

.involvement-icon--gold {
  background: var(--cp-amber-100);
}

.involvement-icon--gold svg {
  stroke: var(--cp-amber-600);
}

/* ============================================================
   29. PAGE: DONATE
   ============================================================ */
.donate-hero {
  background: var(--cp-purple-100);
}

.donate-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.donate-amount-btn {
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid var(--cp-gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--cp-gray-700);
  background: var(--cp-white);
  cursor: pointer;
  transition: all var(--t-fast);
}

.donate-amount-btn:hover,
.donate-amount-btn.selected {
  background: var(--cp-purple-600);
  border-color: var(--cp-purple-600);
  color: var(--cp-white);
}

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

.donate-impact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--cp-bg-purple);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cp-purple-100);
}

.donate-impact-amount {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--cp-purple-600);
  flex-shrink: 0;
  min-width: 64px;
}

/* ============================================================
   30. PAGE: CONTACT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.contact-info-card {
  background: var(--cp-bg-dark);
  border-radius: var(--radius-2xl);
  padding: var(--sp-10);
  color: rgba(255,255,255,0.85);
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-8));
}

.contact-info-card h3 {
  color: var(--cp-white);
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-2);
}

.contact-info-card > p {
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-8);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.contact-detail:last-of-type {
  border-bottom: none;
}

.contact-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: rgba(124,58,237,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-purple-300);
  flex-shrink: 0;
}

.contact-detail-icon svg {
  width: 20px;
  height: 20px;
}

.contact-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-1);
}

.contact-detail-value {
  font-size: var(--text-base);
  color: var(--cp-white);
  line-height: var(--leading-normal);
}

.contact-detail-value a:hover {
  color: var(--cp-purple-300);
}

.contact-form-section {
  background: var(--cp-white);
  border: 1px solid var(--cp-gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   31. UTILITY CLASSES
   ============================================================ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-white  { color: var(--cp-white); }
.text-purple { color: var(--cp-purple-600); }
.text-gold   { color: var(--cp-gold-500); }
.text-teal   { color: var(--cp-teal-600); }
.text-muted  { color: var(--cp-text-muted); }

.bg-purple-soft { background: var(--cp-bg-purple); }
.bg-soft       { background: var(--cp-bg-soft); }
.bg-white      { background: var(--cp-white); }
.bg-dark       { background: var(--cp-bg-dark); }
.bg-warm       { background: var(--cp-bg-warm); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.img-placeholder {
  background: var(--cp-purple-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-purple-400);
  font-size: var(--text-sm);
  text-align: center;
}

/* Divider */
.divider {
  width: 48px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--cp-amber-500);
  margin-block: var(--sp-4);
}

.divider--gold {
  background: var(--cp-amber-500);
}

.divider--purple {
  background: var(--cp-purple-500);
}

/* Eyebrow label reused across sections */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-purple-600);
  margin-bottom: var(--sp-3);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* ============================================================
   32. ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Entrance animation classes (added by IntersectionObserver) */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
}

.fade-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 400ms; }

.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.8); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes amber-pulse {
  0%, 100% { opacity: 0.12; transform: scale(1); }
  50%       { opacity: 0.2;  transform: scale(1.08); }
}

@keyframes counter-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   33. ACCESSIBILITY OVERRIDES
   ============================================================ */

/* High contrast focus states */
*:focus-visible {
  outline: 3px solid var(--cp-purple-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove outline when not keyboard navigating */
*:focus:not(:focus-visible) {
  outline: none;
}

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

  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   34. COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--cp-purple-900);
  color: var(--cp-white);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 -4px 24px rgba(30,27,75,0.18);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner-inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1;
  min-width: 240px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

.cookie-banner-text strong {
  color: var(--cp-white);
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--text-base);
}

.cookie-banner-text a {
  color: var(--cp-gold-400);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-btn-accept {
  background: var(--cp-purple-400);
  color: var(--cp-white);
  border: none;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--t-fast);
}

.cookie-btn-accept:hover {
  background: var(--cp-purple-500);
}

.cookie-btn-decline {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.cookie-btn-decline:hover {
  color: var(--cp-white);
  border-color: rgba(255,255,255,0.5);
}

/* ============================================================
   34. RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* --- Tablet: max-width 1024px --- */
@media (max-width: 1024px) {
  :root {
    --container-px: 1.25rem;
    --nav-height: 82px;
  }

  /* Remove backdrop-filter so it doesn't create a stacking context
     that traps position:fixed/absolute children on iOS Safari */
  .site-header,
  .site-header--hero {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* --- Hamburger nav (tablet + mobile) --- */
  .nav-toggle {
    display: flex;
  }

  .nav-logo img,
  .nav-logo svg {
    height: 168px;
  }

  .nav-menu {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cp-white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
    gap: 0;
    overflow-y: auto;
    z-index: 9998;
    border-top: 2px solid var(--cp-purple-100);
    box-shadow: 0 8px 32px rgba(30,27,75,0.12);
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .nav-list a {
    padding: var(--sp-4) var(--sp-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: 0;
    border-bottom: 1px solid var(--cp-gray-100);
    color: var(--cp-gray-800);
  }

  .nav-list a:first-child { border-top: 1px solid var(--cp-gray-100); }

  /* Mobile dropdown — expand inline */
  .nav-has-dropdown {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .nav-has-dropdown > a::after {
    float: right;
    margin-top: 6px;
  }

  .nav-dropdown {
    position: static !important;
    transform: none !important;   /* block :focus-within from applying translateX(-50%) */
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
    background: var(--cp-purple-50);
    pointer-events: auto;
    display: none;
    overflow: visible;
  }

  .nav-has-dropdown.open .nav-dropdown {
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-dropdown a {
    padding: var(--sp-3) var(--sp-8);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--cp-gray-100);
    color: var(--cp-gray-800) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-actions {
    margin-left: 0;
    margin-top: var(--sp-5);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: 0 var(--sp-1);
  }

  .nav-donate-btn {
    justify-content: center;
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .nav-donate-btn svg {
    width: 16px;
    height: 16px;
  }

  .site-header--hero .nav-container {
    border-radius: var(--radius-xl);
    margin-inline: var(--sp-4);
    margin-top: var(--sp-3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-home {
    min-height: 600px;
    height: auto;
  }

  .hero-home .hero-content {
    gap: var(--sp-10);
    padding-top: calc(var(--nav-height) + var(--sp-3) + var(--sp-8));
  }

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

  .audience-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,0.1);
  }

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

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

  .newsletter-content {
    gap: var(--sp-10);
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .contact-info-card {
    position: static;
  }

  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .about-story-img {
    position: static;
    aspect-ratio: 4/3;
    max-height: 420px;
  }

  .mission-content {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .research-pillar {
    grid-template-columns: 1fr;
  }

  .impact-communities {
    grid-template-columns: 1fr;
  }

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

/* --- Mobile: max-width 768px --- */
@media (max-width: 768px) {
  :root {
    --nav-height: 74px;
    --container-px: 1rem;
  }

  /* --- Mobile Nav --- */
  .nav-logo img,
  .nav-logo svg {
    height: 144px;
  }

  .nav-container {
    padding-block: 2px;
  }

  .nav-menu {
    top: var(--nav-height);
  }

  .walk-promo-inner {
    grid-template-columns: 1fr;
  }

  /* --- Sections --- */
  .section {
    padding-block: var(--sp-10);
  }

  .section-header {
    margin-bottom: var(--sp-8);
  }

  .hero {
    min-height: auto;
  }

  .hero-home {
    min-height: 600px;
    height: auto;
  }

  .hero-home .hero-content {
    padding-bottom: var(--sp-8);
    padding-top: calc(var(--nav-height) + var(--sp-3) + var(--sp-10));
    max-width: 100%;
  }

  .hero-inner .container {
    padding-block: 2rem;
  }

  .hero-headline {
    font-size: 1.75rem;
  }

  .hero-ctas {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .hero-ctas .btn {
    justify-content: center;
    text-align: center;
  }

  .site-header--hero .nav-container {
    border-radius: var(--radius-xl);
    margin-inline: var(--sp-4);
    margin-top: var(--sp-3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .trust-strip-inner {
    gap: var(--sp-5);
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }

  .trust-strip-inner::-webkit-scrollbar { display: none; }

  .trust-divider { display: none; }

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

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

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

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

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

  .newsletter-content {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

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

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

  .cta-band-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-band-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

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

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .mission-pillars {
    grid-template-columns: 1fr;
  }

  .impact-hero-stats {
    grid-template-columns: 1fr;
  }

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

  .event-card {
    flex-direction: column;
  }

  .event-card-date {
    width: 100%;
    flex-direction: row;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
  }

  .donate-amounts {
    flex-wrap: wrap;
  }

  .donate-amount-btn {
    flex: 1;
    min-width: calc(50% - var(--sp-2));
  }
}

/* Walk promo band inner */
.walk-promo-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-10);
}

/* --- Small Mobile: max-width 480px --- */
@media (max-width: 480px) {
  .hero-headline {
    font-size: 2rem;
  }

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

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

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

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

  .hero-trust {
    flex-direction: column;
    gap: var(--sp-2);
  }
}