/* ============================================================
   Mahatma Gandhi School Pune — Global Stylesheet
   Aesthetic Direction: Dark Editorial Gravitas
   — deep navy, warm gold, Playfair Display headings,
     left-aligned editorial layouts, earned dignity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Light theme palette */
  --color-bg:             #ffffff;
  --color-surface:        #f2f4f9;
  --color-surface-alt:    #e8ecf4;
  --color-warm:           #faf7f2;
  --color-warm-alt:       #f3ebe0;
  --color-navy:           #1a2340;
  --color-navy-deep:      #0f1828;
  --color-navy-mid:       #1f2b4a;
  --color-gold:           #c8a84b;
  --color-gold-light:     #d9bc6e;
  --color-gold-dim:       #a8883b;
  --color-gold-text:      #7a5728;
  --color-saffron:        #d4622a;
  --color-saffron-light:  #e07b48;
  --color-text:           #111828;
  --color-text-muted:     #4a5568;
  --color-cream:          #111828;
  --color-body-text:      #4a5568;
  --color-cream-muted:    rgba(17, 24, 40, 0.65);
  --color-white:          #ffffff;
  --color-border:         rgba(17, 24, 40, 0.1);

  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'DM Sans', system-ui, -apple-system, sans-serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;

  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg:  12px;

  --transition:       0.25s ease;
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-card:  0 2px 12px rgba(17, 24, 40, 0.08);
  --shadow-hover: 0 8px 36px rgba(17, 24, 40, 0.15);
  --shadow-gold:  0 0 30px rgba(200, 168, 75, 0.15);

  --color-navy-surface:   #f2f4f9;
  --color-navy-elevated:  #e8ecf4;
  --color-alert-bg:       #fef9ec;
  --color-alert-border:   #c8a84b;
}

@supports (color: oklch(0 0 0)) {
  :root {
    --color-navy:          oklch(0.22 0.06 252);
    --color-navy-deep:     oklch(14% 0.04 250);
    --color-navy-mid:      oklch(18% 0.045 250);
    --color-navy-surface:  oklch(96% 0.012 250);
    --color-navy-elevated: oklch(93% 0.015 250);
    --color-gold:          oklch(72% 0.13 80);
    --color-gold-light:    oklch(80% 0.10 84);
    --color-gold-dim:      oklch(65% 0.10 80);
    --color-gold-text:     oklch(48% 0.10 75);
    --color-gold-glow:     oklch(72% 0.13 80 / 0.15);
    --color-saffron:       oklch(60% 0.20 42);
    --color-saffron-light: oklch(68% 0.18 44);
    --color-cream:         oklch(14% 0.04 250);
    --color-cream-muted:   oklch(35% 0.03 250 / 0.75);
    --color-body-text:     oklch(38% 0.025 250);
    --color-text:          oklch(14% 0.04 250);
    --color-text-muted:    oklch(40% 0.025 250);
    --color-bg:            oklch(99% 0.004 250);
    --color-surface:       oklch(96% 0.012 250);
    --color-surface-alt:   oklch(93% 0.015 250);
    --color-border:        oklch(14% 0.04 250 / 0.1);
    --shadow-gold:         0 0 30px oklch(72% 0.13 80 / 0.15);
  }
}

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

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

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.7;
  min-height: 100vh;
}

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

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-gold-light);
}

/* Headings — Playfair Display with intentional scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-navy-deep);
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2,
.section-header h2 {
  font-size: clamp(1.8rem, 3vw + 0.5rem, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.15rem, 1.5vw + 0.4rem, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h4 {
  font-size: 1.15rem;
}

p {
  font-size: clamp(0.95rem, 1vw + 0.4rem, 1.05rem);
  line-height: 1.75;
  max-width: 70ch;
  color: var(--color-text-muted);
  margin-bottom: 1.1em;
}

ul, ol {
  padding-left: 1.5em;
  margin-bottom: 1.1em;
}

li {
  margin-bottom: 0.4em;
}

strong {
  color: var(--color-navy-deep);
  font-weight: 600;
}

/* ============================================================
   CONTAINERS
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Prose text containers — enforce readable line lengths */
.prose {
  max-width: 68ch;
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   REDUCED MOTION — comprehensive guard
   Covers the universal blanket, scroll reveal, card stagger,
   and the scroll-line pulse (defined near scroll indicator below).
   ============================================================ */
@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;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .team-card,
  .news-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-line {
    animation: none !important;
    opacity: 0.6;
  }
}

/* ============================================================
   Z-INDEX SCALE
   10  — dropdown menus (desktop nav)
   100 — sticky nav
   190 — nav backdrop (mobile overlay)
   200 — nav drawer (mobile)
   210 — nav hamburger button
   300 — modal backdrop
   400 — modals
   500 — toast / alert notifications
   ============================================================ */

/* ============================================================
   ALERT BANNER
   ============================================================ */
#alert-banner {
  background: var(--color-alert-bg);
  border-bottom: 2px solid var(--color-alert-border);
  padding: 0.8rem var(--space-md);
  position: relative;
  z-index: 500;
}

.alert-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.alert-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--color-body-text);
  line-height: 1.55;
}

.alert-text strong {
  color: var(--color-gold);
  display: block;
  margin-bottom: 0.3rem;
}

.alert-text a {
  color: var(--color-gold-light);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert-dismiss {
  background: none;
  border: 1px solid var(--color-gold-dim);
  color: var(--color-gold);
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  transition: background var(--transition);
}

.alert-dismiss:hover {
  background: rgba(200, 168, 75, 0.15);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(17,24,40,0.06);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============================================================
   HOMEPAGE TRANSPARENT NAV — overlays the full-bleed hero
   ============================================================ */
.home-page #site-header {
  position: fixed;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

.home-page #site-header.nav-scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 16px rgba(17, 24, 40, 0.08);
}

/* White nav links when overlaying the hero — DESKTOP ONLY.
   Below 901px the nav is a white slide-in drawer, and white-on-white
   made every item unreadable. */
@media (min-width: 901px) {
  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > a,
  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > span {
    color: rgba(255, 255, 255, 0.88);
  }

  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > a:hover,
  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > span:hover,
  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > a.active {
    color: var(--color-gold);
  }
}

/* Hide nav logo while transparent — hero has its own logo lockup */
.home-page #site-header:not(.nav-scrolled) .nav-logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.home-page #site-header.nav-scrolled .nav-logo {
  opacity: 1;
  transition: opacity 0.25s ease;
}

.nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 72px;
}

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

.nav-logo img {
  height: 54px;
  width: auto;
}

.nav-menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  gap: 0;
  padding: 0;
  margin: 0;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a,
.nav-menu > li > span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy-deep);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition);
  position: relative;
}

/* Active underline — gold, not just colour change */
.nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.65rem;
  right: 0.65rem;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out-expo);
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
  transform: scaleX(1);
}

.nav-menu > li > a:hover,
.nav-menu > li > span:hover,
.nav-menu > li > a.active {
  color: var(--color-gold);
}

/* Dropdown arrow */
.nav-arrow {
  font-size: 0.7rem;
  opacity: 0.55;
  transition: transform var(--transition);
}

.nav-menu > li:hover .nav-arrow {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 248px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  list-style: none;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 30px rgba(17,24,40,0.12);
  z-index: 10;
}

.nav-menu > li:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li a {
  display: block;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-navy-deep);
  transition: color var(--transition), padding-left var(--transition);
}

.nav-dropdown li a:hover {
  color: var(--color-gold);
  padding-left: 1.55rem;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 8px;
  margin-left: auto;
  margin-right: -8px;
  z-index: 210;
}

.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--color-navy-deep);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

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

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 5rem 0 2rem;
    gap: 0;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
  }

  .nav-menu.open {
    right: 0;
    box-shadow: -4px 0 40px rgba(0, 0, 0, 0.5);
  }

  .nav-menu > li {
    width: 100%;
  }

  .nav-menu > li > a,
  .nav-menu > li > span {
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 0;
    width: 100%;
    border-bottom: 1px solid rgba(200, 168, 75, 0.08);
    text-transform: uppercase;
  }

  .nav-menu > li > a::after {
    display: none;
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    border-radius: 0;
    border-top: none;
    background: var(--color-surface);
    box-shadow: none;
    display: none;
    padding: 0;
  }

  .nav-dropdown.mobile-open {
    display: block;
  }

  .nav-dropdown li a {
    padding: 0.65rem 2.5rem;
    border-bottom: 1px solid rgba(200, 168, 75, 0.05);
    font-size: 0.85rem;
  }

  .nav-dropdown li a:hover {
    padding-left: 2.5rem;
  }
}

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.70) 50%, rgba(255,255,255,0.88) 100%),
    url('../wp-content/uploads/2025/07/Gandhi_Image.jpg') center/cover no-repeat;
  border-bottom: 3px solid rgba(200,168,75,0.35);
  padding: 7rem var(--space-md) 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .page-hero {
    padding: 4rem 1rem 3rem;
    background-attachment: scroll;
    min-height: auto;
  }

  .page-hero h1 {
    font-size: clamp(1.8rem, 5vw + 0.5rem, 3rem);
  }
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 168, 75, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* Gold accent bar above title */
.page-hero-inner {
  position: relative;
  width: 100%;
}

.page-hero-inner::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  margin: 0 auto 1.5rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  color: var(--color-navy-deep);
  margin-bottom: 0.6rem;
  position: relative;
}

.page-hero .hero-sub {
  color: var(--color-gold-text);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  position: relative;
}

.page-hero .gold-rule {
  width: 50px;
  height: 2px;
  background: var(--color-gold);
  margin: 1.2rem auto 0;
  border-radius: 1px;
}

/* ============================================================
   HOMEPAGE HERO — Atmospheric, full-viewport
   ============================================================ */
/* ============================================================
   HERO — Full-bleed cinematic, documentary poster feel
   ============================================================ */
.home-hero {
  min-height: 100svh;
  min-height: max(100svh, 640px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: var(--color-navy-deep);
}

/* Background photo */
.hero-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10, 16, 30, 0.15) 0%,
      rgba(10, 16, 30, 0.28) 30%,
      rgba(10, 16, 30, 0.65) 60%,
      rgba(10, 16, 30, 0.90) 82%,
      rgba(10, 16, 30, 0.97) 100%
    ),
    radial-gradient(ellipse 70% 60% at 60% 0%, rgba(212, 98, 42, 0.18) 0%, transparent 55%);
}

/* Logo lockup at top */
.hero-logo-lockup {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-logo-img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.hero-est {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border-left: 2px solid var(--color-gold);
  padding-left: 0.65rem;
}

/* Content anchored to bottom-left */
.hero-content-wrap {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-md) 2.5rem;
}

.home-hero h1 {
  font-size: clamp(3.2rem, 6vw + 1rem, 6.5rem);
  color: rgba(255, 255, 255, 0.97);
  max-width: 18ch;
  margin-bottom: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.home-hero h1 em {
  color: var(--color-gold);
  font-style: italic;
  font-weight: 400;
}

.home-hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw + 0.4rem, 1.15rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.68);
  max-width: 50ch;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Ghost button for hero on dark */
.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background 0.25s ease, border-color 0.25s ease;
  background: rgba(255,255,255,0.06);
}

.btn-ghost-white:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.75);
  color: #fff;
}

/* Stat bar — white strip floating at bottom of hero */
.hero-stat-bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.97);
  border-top: 3px solid var(--color-saffron);
}

.hero-stat-bar .hero-stat {
  padding: 1.4rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(15,24,40,0.15);
  background: transparent;
}

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

.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.5vw + 0.3rem, 2.5rem);
  font-weight: 700;
  color: var(--color-navy-deep);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Old classes kept for compatibility */
.hero-logo-wrap { margin-bottom: 2rem; }
.hero-stat-strip { display: none; }
.home-hero-tag { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-gold);
  color: var(--color-navy-deep);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-primary:hover {
  background: oklch(78% 0.14 80);
  color: var(--color-navy-deep);
  box-shadow: 0 0 0 3px oklch(72% 0.13 80 / 0.25), 0 4px 16px rgba(200, 168, 75, 0.3);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-gold);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(200, 168, 75, 0.1);
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

/* Donate-specific button — same as primary */
.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-gold);
  color: var(--color-navy-deep);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  border: 1px solid var(--color-gold);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-donate:hover {
  background: transparent;
  color: var(--color-gold);
  transform: translateY(-2px);
}

/* Contact-specific buttons */
.btn-call, .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  transition: all var(--transition);
}

.btn-call {
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
}

.btn-call:hover {
  background: rgba(200, 168, 75, 0.15);
  color: var(--color-gold);
}

.btn-whatsapp {
  background: #25D366;
  color: #111828;          /* white on this green is 1.98:1 — fails AA badly */
  border: 1px solid #1eb558;
}

.btn-whatsapp:hover {
  background: #1ebe59;
  color: #fff;
}

/* ============================================================
   QUOTE BLOCKS
   ============================================================ */
.quote-block {
  padding: clamp(2.5rem, 5vw, 5rem) 0;
  text-align: center;
  background: var(--color-warm);
  position: relative;
  overflow: hidden;
}

/* Decorative quote mark — before */
.quote-block blockquote {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw + 0.4rem, 1.6rem);
  color: var(--color-navy-deep);
  max-width: 60ch;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
  padding: 2rem 3rem;
}

.quote-block blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw + 0.4rem, 1.6rem);
  line-height: 1.55;
  letter-spacing: 0.005em;
  max-width: none;
  color: var(--color-navy-deep);
}

.quote-attribution {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 1rem;
  display: block;
}

/* Large decorative opening quote mark — bigger, better positioned */
.quote-block blockquote::before {
  content: '\201C';
  font-family: var(--font-serif);
  font-size: 8rem;
  color: rgba(200, 168, 75, 0.15);
  position: absolute;
  top: -1rem;
  left: 0;
  line-height: 1;
  pointer-events: none;
}

/* Large decorative closing quote mark */
.quote-block blockquote::after {
  content: '\201D';
  font-family: var(--font-serif);
  font-size: 8rem;
  color: rgba(200, 168, 75, 0.15);
  position: absolute;
  bottom: -4rem;
  right: -0.5rem;
  line-height: 1;
  pointer-events: none;
}


.quote-block .quote-attr {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-block .gandhi-sig {
  margin: 1rem auto;
  max-height: 55px;
  width: auto;
  opacity: 0.85;
}
.quote-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.gandhi-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw + 0.4rem, 2rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-navy-deep);
  quotes: '\201C' '\201D';
}

.gandhi-quote::before {
  content: open-quote;
  color: var(--color-gold);
  font-size: 4rem;
  line-height: 0;
  vertical-align: -1.5rem;
  margin-right: 0.15rem;
  opacity: 0.6;
}

.gandhi-sig {
  height: 60px;
  width: auto;
  margin: 1.5rem auto;
  display: block;
  opacity: 0.85;
}

.quote-attr {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-top: 0;
}

/* ============================================================
   SECTIONS — General
   ============================================================ */
section {
  padding: var(--space-lg) 0;
}

/* Section eyebrow label — pure decorative gold rule */
.section-label {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-gold);
  margin-bottom: 1.25rem;
  border: none;
  font-size: 0;
}

.section-title {
  font-family: var(--font-serif);
  color: var(--color-navy-deep);
  margin-bottom: 1rem;
}

.section-title-center {
  text-align: center;
}

/* Gold divider — gradient line */
.gold-divider {
  width: 40px;
  height: 3px;
  background: linear-gradient(to right, var(--color-gold), var(--color-gold-dim));
  margin: 1.25rem 0;
  border-radius: 2px;
}

.gold-divider-center {
  margin-left: auto;
  margin-right: auto;
}

/* Alternate section background */
.section-alt {
  background: var(--color-surface);
}

.section-deep {
  background: var(--color-surface);
}

.section-elevated {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   MISSION / VALUES — Atmospheric radial overlay
   ============================================================ */
.mission-section,
.values-section {
  position: relative;
  overflow: hidden;
}

.mission-section::before,
.values-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 15% 50%, rgba(200, 168, 75, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================================
   FOUNDER SECTION — Editorial 2-col with gold frame
   ============================================================ */
/* ============================================================
   FOUNDER SECTION — Cinematic split: large photo left, story right
   ============================================================ */
.founder-section {
  background: var(--color-warm);
  padding: 0;
  overflow: hidden;
}

.founder-inner {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 75vh;
  align-items: stretch;
  overflow: hidden;
}

.founder-img-wrap {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  transform-origin: center;
  transition: transform 0.8s var(--ease-out-expo);
}

.founder-section:hover .founder-img {
  transform: scale(1.03);
}

.founder-img-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(15, 24, 40, 0.85);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-left: 3px solid var(--color-gold);
}

.founder-content {
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
}

.founder-content h2 {
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
  margin-bottom: 0.5rem;
}

.founder-subtitle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-saffron);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.founder-content p {
  color: var(--color-body-text);
  margin-bottom: 1.2em;
  max-width: 50ch;
}

.founder-content .read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gold);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  margin-top: 1rem;
  transition: gap var(--transition);
  text-transform: uppercase;
}

.founder-content .read-more:hover {
  gap: 0.85rem;
  color: var(--color-gold-light);
}

@media (max-width: 900px) {
  .founder-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .founder-img-wrap {
    min-height: 360px;
  }
  .founder-content {
    padding: var(--space-lg) var(--space-md);
  }
}

/* ============================================================
   IMPACT / STATS — Gold accent atmosphere
   ============================================================ */
.impact-section,
.stats-section {
  background: var(--color-surface);
  position: relative;
}

.impact-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(200, 168, 75, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================================
   CARDS GRID — Generic
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card {
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  border-color: rgba(200, 168, 75, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(17,24,40,0.12);
}

.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-body {
  padding: 1.5rem;
}

.card-body h3 {
  font-size: 1.05rem;
  margin-bottom: 0.65rem;
  color: var(--color-navy-deep);
}

.card-body p {
  font-size: 0.88rem;
  color: var(--color-body-text);
  margin-bottom: 1rem;
}

.card-link {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
  letter-spacing: 0.03em;
}

.card-link:hover {
  gap: 8px;
  color: var(--color-gold-light);
}

/* ============================================================
   NEWS / BLOG GRID — Editorial asymmetric layout
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
}

/* Feature card — spans both rows */
.news-card:first-child {
  grid-row: 1 / 3;
}

.news-card:first-child img {
  aspect-ratio: 4 / 3;
  height: 360px;
}

.news-card:first-child .news-card-body {
  padding: 1.75rem;
}

/* News cards */
.news-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 1;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.news-grid .news-card:nth-child(1) { transition-delay: 0s; }
.news-grid .news-card:nth-child(2) { transition-delay: 0.1s; }
.news-grid .news-card:nth-child(3) { transition-delay: 0.2s; }

.news-card:hover {
  border-color: rgba(200, 168, 75, 0.4);
  box-shadow: 0 8px 30px rgba(17,24,40,0.12), var(--shadow-gold);
  transform: translateY(-4px) !important;
}

.news-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.news-card-body {
  padding: 1.35rem;
}

.news-card-body h3 {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.2vw + 0.2rem, 1.25rem);
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-navy-deep);
  line-height: 1.25;
}

.news-card:first-child .news-card-body h3 {
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
}

.news-card-body p {
  font-size: 0.9rem;
  color: var(--color-body-text);
  margin-bottom: 0.9rem;
  line-height: 1.65;
  max-width: none;
}

.news-card-link {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition), color var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-card-link:hover {
  gap: 9px;
  color: var(--color-gold-light);
}

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

  .news-card:first-child {
    grid-row: auto;
  }
}

/* ============================================================
   TEAM SECTION — Full-bleed photo cards, editorial grid
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(15,24,40,0.07);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(15,24,40,0.14), 0 0 0 2px var(--color-gold);
}

.team-photo-wrap {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-surface-alt);
  position: relative;
}

.team-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,16,30,0.4) 100%);
  pointer-events: none;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s var(--ease-out-expo);
  filter: saturate(0.85);
}

.team-card:hover .team-photo {
  transform: scale(1.05);
  filter: saturate(1);
}

.team-card-body {
  padding: 1.4rem 1.4rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--color-gold);
}

.team-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-navy-deep);
  margin-bottom: 0.2rem;
}

.team-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-saffron);
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.team-quote {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  font-style: italic;
  font-family: var(--font-serif);
  flex: 1;
  max-width: none;
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================================
   MILESTONE TIMELINE
   ============================================================ */
.timeline {
  position: relative;
  padding-left: 2.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold) 0%, rgba(200, 168, 75, 0.1) 100%);
}

.timeline-item {
  position: relative;
  padding-bottom: 2.25rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.65rem;
  top: 0.4rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 2px solid var(--color-navy);
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.2);
}

.timeline-year {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold);
  display: block;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.timeline-text {
  color: var(--color-body-text);
  font-size: 0.95rem;
  max-width: 60ch;
}

/* ============================================================
   IMPACT GRID
   ============================================================ */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

.impact-item {
  padding: 1.5rem 1rem;
}

.impact-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 1rem;
  filter: brightness(0.9) saturate(0.75);
  transition: filter 0.3s ease;
}

.impact-item:hover img {
  filter: brightness(1) saturate(0.9);
}

.impact-item p {
  font-size: 0.85rem;
  color: var(--color-body-text);
  margin: 0;
}

/* ============================================================
   RECEIVES GRID — "Every Child Here Receives" section
   ============================================================ */
.receives-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.receives-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--color-surface);
  border-radius: 10px;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition);
}

.receives-item:hover {
  border-color: rgba(200, 168, 75, 0.3);
}

.receives-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 168, 75, 0.1);
  border-radius: 50%;
  margin-bottom: 1rem;
  color: var(--color-gold);
  flex-shrink: 0;
}

.receives-item p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  .receives-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ============================================================
   DOCUMENT GRID
   ============================================================ */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.doc-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), transform 0.25s ease;
  background: #ffffff;
  text-align: center;
}

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

.doc-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.doc-card-label {
  padding: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-gold);
  font-weight: 500;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(10, 14, 25, 0.9), transparent);
  color: #ffffff;
  font-size: 0.8rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  font-family: var(--font-sans);
}

.gallery-item:hover figcaption {
  transform: translateY(0);
}

/* Gallery variant for documents / newspaper scans */
.gallery-item--doc {
  background: #fff;
  border: 1px solid rgba(17,24,40,0.1);
}
.gallery-item--doc img {
  object-fit: contain;
  padding: 0.25rem;
  background: #fff;
}

/* ============================================================
   TRUSTEES GRID
   ============================================================ */
.trustees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.trustee-card {
  text-align: center;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-top: 2px solid transparent;
  border-radius: var(--radius-md);
  background: #ffffff;
  width: 100%;
  transition: border-color var(--transition), transform 0.25s ease;
}

.trustee-card:hover {
  border-color: var(--color-gold);
  border-top-color: var(--color-gold);
  transform: translateY(-3px);
}

.trustee-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin: 0 auto 1rem;
  border: 2px solid rgba(200, 168, 75, 0.4);
  transition: border-color var(--transition), filter 0.3s ease;
  /* Tame the harsh orange background in uploaded headshots */
  filter: brightness(0.92) saturate(0.75);
}
.trustee-card:hover .trustee-photo {
  filter: brightness(1) saturate(0.9);
}

.trustee-card:hover .trustee-photo {
  border-color: var(--color-gold);
}

.trustee-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy-deep);
  margin-bottom: 0.3rem;
}

.trustee-role {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   DONATE / SUPPORT SECTION
   ============================================================ */
.donate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.donate-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  padding: 1.75rem 1.5rem;
  transition: border-color var(--transition), transform 0.25s ease;
}

.donate-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
}

.donate-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem;
  border: 2px solid rgba(200, 168, 75, 0.3);
}

.donate-item-name {
  font-family: var(--font-serif);
  color: var(--color-navy-deep);
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.donate-amount {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-gold);
  margin-bottom: 1.1rem;
}

/* ============================================================
   SUPPORTERS GRID
   ============================================================ */
.supporters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.supporter-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  transition: border-color var(--transition), transform 0.25s ease;
}

.supporter-card:hover {
  border-top-color: var(--color-gold);
  border-color: rgba(200, 168, 75, 0.3);
  transform: translateY(-3px);
}

.supporter-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 2px solid rgba(200, 168, 75, 0.35);
  transition: border-color var(--transition);
}

.supporter-card:hover .supporter-photo {
  border-color: var(--color-gold);
}

.supporter-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-navy-deep);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.contact-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.contact-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 2px solid rgba(200, 168, 75, 0.4);
}

.contact-card h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.contact-card .role {
  font-family: var(--font-sans);
  color: var(--color-gold);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.contact-card blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-body-text);
  margin-bottom: 1.1rem;
  border-left: none;
  padding-left: 0;
}

.contact-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.map-block img {
  border-radius: var(--radius-md);
  width: 100%;
  border: 1px solid rgba(200, 168, 75, 0.25);
}

.address-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  margin-top: 1.5rem;
}

.address-block h3 {
  font-family: var(--font-sans);
  color: var(--color-gold);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.address-block p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--color-body-text);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
}

/* ============================================================
   CONTACT INFO CARDS — icon + text row variant
   ============================================================ */
.contact-info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
}

.contact-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 168, 75, 0.1);
  border-radius: 50%;
  color: var(--color-gold);
}

.contact-info h4 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.contact-info p {
  font-size: 0.9rem;
  color: var(--color-body-text);
  margin-bottom: 0.25em;
  line-height: 1.55;
  max-width: none;
}

.contact-info p:last-child {
  margin-bottom: 0;
}

/* Form groups */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-navy-deep);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-body-text);
  opacity: 0.6;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.15);
}

/* ============================================================
   SUPPORT / WAYS TO GIVE — Tier cards
   ============================================================ */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: var(--space-lg);
}

.support-card {
  padding: 2rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.support-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(17,24,40,0.12), 0 0 20px rgba(200, 168, 75, 0.08);
}

.support-card h3 {
  font-size: clamp(1rem, 1.2vw + 0.3rem, 1.25rem);
  color: var(--color-navy-deep);
  margin-bottom: 0;
}

.support-card p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 28ch;
  margin-bottom: 0;
}

.support-amount {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}

.support-card .btn-primary {
  margin-top: 0.5rem;
}

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

/* ============================================================
   RICHTEXT / ARTICLE CONTENT
   ============================================================ */
.article-content {
  max-width: 72ch;
  margin: 0 auto;
}

.article-content h2 {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  margin: 2.2rem 0 1rem;
  color: var(--color-navy-deep);
}

.article-content h3 {
  font-size: 1.25rem;
  margin: 1.75rem 0 0.8rem;
  color: var(--color-navy-deep);
}

.article-content p {
  color: var(--color-body-text);
  margin-bottom: 1.2em;
  line-height: 1.75;
}

.article-content ul,
.article-content ol {
  margin-bottom: 1.2em;
}

.article-content li {
  color: var(--color-body-text);
  line-height: 1.7;
}

.article-content img {
  border-radius: var(--radius-md);
  margin: 1.75rem 0;
  width: 100%;
  max-width: 680px;
}

/* Full-bleed photo break inside article */
.story-photo-break {
  margin: 3rem -2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: none;
}

.story-photo-break img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  border-radius: 0;
  margin: 0;
  max-width: none;
  filter: saturate(0.9);
}

.story-photo-break figcaption {
  background: var(--color-navy-deep);
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
  padding: 0.65rem 1.25rem;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (max-width: 768px) {
  .story-photo-break {
    margin: 2rem -1rem;
  }
  .story-photo-break img {
    height: 260px;
  }
}

.article-content blockquote {
  border-left: 3px solid var(--color-gold);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.75rem 0;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-navy-deep);
  line-height: 1.65;
}

.figure-caption {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-gold);
  margin-top: 0.4rem;
  font-style: italic;
  opacity: 0.85;
}

/* ============================================================
   INLINE IMAGE PAIRS
   ============================================================ */
.img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (max-width: 600px) {
  .img-pair {
    grid-template-columns: 1fr;
  }
}

.img-with-caption {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(200, 168, 75, 0.12);
}

.img-with-caption img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
}

.img-with-caption p {
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-gold-text);
  margin: 0;
  background: var(--color-surface);
}

/* ============================================================
   VIDEO EMBED
   ============================================================ */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200, 168, 75, 0.18);
  margin: 2rem 0;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: #16213a;
  border-top: 2px solid rgba(200, 168, 75, 0.45);
  padding: var(--space-xl) var(--space-md) var(--space-md);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: var(--space-lg);
}

.footer-brand .footer-logo {
  height: 56px;
  width: auto;
  margin-bottom: 1.1rem;
}

.footer-brand p {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);
  max-width: 32ch;
  line-height: 1.65;
}

.footer-col h4,
.footer-heading {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.25rem;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 0.55rem;
}

.footer-nav a {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: var(--color-gold);
}

.footer-contact-item {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 0.55rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}

.footer-contact-item a {
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transition);
}

.footer-contact-item a:hover {
  color: var(--color-gold);
}

/* Social links — gold-border circles */
.social-links {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 75, 0.3);
  color: rgba(204, 197, 176, 0.7);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  line-height: 1;
}

.social-link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(200, 168, 75, 0.08);
  box-shadow: 0 0 12px rgba(200, 168, 75, 0.2);
}

.footer-bottom {
  max-width: 1200px;
  margin: var(--space-md) auto 0;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(200, 168, 75, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition);
}

.footer-bottom a:hover {
  color: var(--color-gold);
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

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

/* ============================================================
   BLOG ARTICLE HERO IMAGE
   ============================================================ */
.blog-hero-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

/* ============================================================
   FESTIVAL TILES — Sarva Dharma
   ============================================================ */
.festival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.festival-tile {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), transform 0.25s ease;
}

.festival-tile:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
}

.festival-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.festival-tile p {
  padding: 0.8rem 1rem;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-gold);
  margin: 0;
}

/* ============================================================
   AUTHOR BLOCK — Blog posts
   ============================================================ */
.author-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-md);
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: var(--space-md);
}

.author-block img {
  border-radius: var(--radius-md);
  width: 100%;
  object-fit: cover;
}

.author-roles {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.author-roles li {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-gold);
  margin-bottom: 0.3rem;
}

.author-roles li::before {
  content: '— ';
  color: var(--color-gold-dim);
}

@media (max-width: 600px) {
  .author-block {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BANK DETAILS BOX
   ============================================================ */
.bank-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 2rem 0;
}

.bank-details h3 {
  font-family: var(--font-sans);
  color: var(--color-gold);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(200,168,75,0.12);
}

.bank-details table {
  width: 100%;
  border-collapse: collapse;
}

.bank-details td {
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.bank-details td:first-child {
  color: var(--color-gold);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  width: 30%;
  font-weight: 500;
}

.bank-details td:last-child {
  color: var(--color-navy-deep);
  font-family: var(--font-sans);
}

.bank-details tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   HIGHLIGHT BOX
   ============================================================ */
.highlight-box {
  background: rgba(200, 168, 75, 0.07);
  border: 1px solid rgba(200, 168, 75, 0.22);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}

.highlight-box p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-navy-deep);
  line-height: 1.7;
}

/* ============================================================
   CTA SECTION — Dramatic, centred
   ============================================================ */
.cta-section {
  background: var(--color-warm-alt);
  padding: var(--space-xl) 0;
  text-align: center;
  border-top: 2px solid rgba(200, 168, 75, 0.3);
  border-bottom: 2px solid rgba(200, 168, 75, 0.3);
}

.cta-section h2,
.cta-section .cta-heading {
  color: var(--color-navy-deep);
}

.cta-section p,
.cta-section .cta-body {
  color: var(--color-body-text);
}

.cta-section strong {
  color: var(--color-gold-text);
  font-weight: 600;
}

/* ============================================================
   READ-MORE / NEWS-CARD LINK — Arrow gap animation
   ============================================================ */
.read-more,
.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease;
}

.read-more:hover,
.news-card-link:hover {
  gap: 0.7rem;
}

/* ============================================================
   LEAD PARAGRAPH — first p after section header stands out
   ============================================================ */
.section-header + p,
.lead {
  font-size: clamp(1.05rem, 1.2vw + 0.4rem, 1.2rem);
  line-height: 1.7;
  color: var(--color-text-muted);
  font-weight: 300;
  max-width: 65ch;
}

/* ============================================================
   CARD BODY — prevent 70ch max-width from creating narrow columns
   inside cards, footer columns, stat items, and contact cards.
   ============================================================ */
.team-card p,
.news-card p,
.footer-col p,
.stat-item p,
.contact-card p {
  max-width: none;
}

/* Team card body text — handled per-element (.team-name, .team-role, .team-quote) */

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-gold    { color: var(--color-gold); }
.text-cream   { color: var(--color-navy-deep); }
.text-center  { text-align: center; }
.text-italic  { font-style: italic; }
.text-serif   { font-family: var(--font-serif); }
.text-muted   {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.pb-lg  { padding-bottom: var(--space-lg); }

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

/* ============================================================
   SHARED RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* Tighten space tokens on small screens */
@media (max-width: 600px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 4.5rem;
  }

  .cards-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    text-align: center;
    justify-content: center;
  }

  /* Hero is bottom-anchored; side/vertical padding is owned by
     .hero-content-wrap so the stat bar can still run full-bleed. */
  .home-hero {
    padding: 0;
  }
}

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

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

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

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

/* ============================================================
   MOBILE — Stat strip
   ============================================================ */
@media (max-width: 600px) {
  .hero-stat-strip {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .hero-stat {
    padding: 1rem 0.75rem;
  }
}

/* ============================================================
   MOBILE — Section padding rhythm
   ============================================================ */
@media (max-width: 768px) {
  .content-section {
    padding: var(--space-md) 0;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  .container {
    padding: 0 1rem;
  }
}

/* ============================================================
   MOBILE — Gallery grid
   ============================================================ */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

/* ============================================================
   MOBILE — Quote block
   ============================================================ */
@media (max-width: 600px) {
  .quote-block blockquote {
    padding: 1.5rem 1.5rem;
    font-size: 1.1rem;
  }

  .quote-block blockquote::before {
    font-size: 5rem;
    top: -0.5rem;
  }
}

/* ============================================================
   FOCUS STYLES — Accessibility
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .main-nav,
  #site-header,
  #alert-banner,
  .nav-backdrop,
  footer,
  #site-footer,
  .home-hero::before,
  .home-hero::after,
  .hero-ctas,
  .btn-primary,
  .btn-secondary,
  .scroll-indicator {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .page-hero {
    background: none;
    padding: 1rem 0;
  }

  .page-hero h1 {
    color: #000;
  }
}

/* ============================================================
   NAV BACKDROP — Mobile overlay
   ============================================================ */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 190;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-backdrop.visible {
  display: block;
  opacity: 1;
}

/* ============================================================
   SCROLL INDICATOR — Hero bottom pulse
   ============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.1); }
}

/* (scroll-line reduced-motion handled in the consolidated block near the top) */

/* ============================================================
   FOOTER TAGLINE — Italic serif above brand copy
   ============================================================ */
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-gold-dim, var(--color-gold));
  opacity: 0.8;
  margin-bottom: 0.75rem;
}

/* ============================================================
   NEWS DATE — Timestamp on news cards
   ============================================================ */
.news-date {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

/* ============================================================
   IMPACT STAT — Large display numbers on impact pages
   ============================================================ */
.impact-stat {
  display: block;
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  font-weight: 700;
  color: var(--color-gold);
  font-family: var(--font-serif);
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* ============================================================
   TRUSTEE GRID — Board of Trustees page
   Portrait cards with full-bleed photo and role badge
   ============================================================ */
.trustee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.trustee-grid .trustee-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.trustee-grid .trustee-card:hover {
  border-color: var(--color-gold);
  border-top-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(17,24,40,0.12), 0 0 20px rgba(200,168,75,0.08);
}

.trustee-img-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
}

.trustee-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: brightness(0.92) saturate(0.72);
}
.trustee-grid .trustee-card:hover .trustee-img-wrap img {
  filter: brightness(1) saturate(0.85);
}

.trustee-grid .trustee-card:hover .trustee-img-wrap img {
  transform: scale(1.04);
}

.trustee-info {
  padding: 1.5rem;
}

.trustee-info h3 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  color: var(--color-navy-deep);
}

.trustee-role {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Responsive — 2 columns on small screens */
@media (max-width: 600px) {
  .trustee-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .trustee-grid .trustee-info {
    padding: 1rem;
  }

  .trustee-grid .trustee-info h3 {
    font-size: 0.95rem;
  }
}

/* ============================================================
   SUPPORTERS GRID — Fallback item style
   Used when supporter entries are text-only (no photo card)
   ============================================================ */
.supporter-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Supporter role label — replaces inline styles on role paragraphs */
.supporter-role {
  font-size: 0.78rem;
  color: var(--color-gold);
  text-align: center;
  margin-top: 0.3rem;
  font-family: var(--font-sans);
  font-weight: 400;
  max-width: none;
}

/* ============================================================
   DONATION HIGHLIGHT BOX
   ============================================================ */
.donation-highlight {
  text-align: center;
  padding: 3rem 2rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(200,168,75,0.08) 0%, transparent 70%),
    var(--color-surface);
  border: 1px solid rgba(200,168,75,0.25);
  border-radius: 12px;
  margin: 2.5rem 0;
}

.donation-amount {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw + 1rem, 5rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}

.donation-period {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  display: block;
}

/* ============================================================
   FOUNDER QUOTE SECTION
   ============================================================ */
.founder-quote-section {
  padding: var(--space-lg) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* school life warm tint */
.school-life-section {
  background: var(--color-warm-alt);
}

.founder-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.5vw + 0.3rem, 1.45rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--color-navy-deep);
  text-align: center;
  max-width: 780px;
  margin: 0 auto 1rem;
}

.founder-quote-attr {
  text-align: center;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-gold-text);
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 400;
  color: var(--color-navy-deep);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: oklch(78% 0.14 80);
  box-shadow: 0 4px 20px rgba(200,168,75,0.4);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* ============================================================
   SCHOOL LIFE PHOTO GRID
   ============================================================ */
.school-life-section {
  padding: var(--space-xl) 0;
  background: var(--color-warm-alt);
}

.life-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 260px;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.life-cell {
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}

.life-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s var(--ease-out-expo);
}

.life-cell:hover img {
  transform: scale(1.05);
}

/* Tall cell spans 2 rows */
.life-cell--tall {
  grid-row: span 2;
}

/* Wide cell spans 2 columns */
.life-cell--wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .life-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .life-cell--tall,
  .life-cell--wide {
    grid-row: auto;
    grid-column: auto;
  }
  .life-cell {
    aspect-ratio: 4/3;
  }
}

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

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
  padding: var(--space-xl) 0;
  background: var(--color-warm);
}

.video-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--color-border);
}

.school-video {
  width: 100%;
  display: block;
  max-height: 540px;
  background: #000;
}

/* ============================================================
   GALLERY PREVIEW BENTO
   ============================================================ */
.gallery-preview-section {
  padding: var(--space-xl) 0 0;
  background: var(--color-warm);
}

.gallery-preview-section .container {
  text-align: center;
  padding-bottom: 2rem;
}

.gallery-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 5px;
  margin-top: 2rem;
}

.gallery-bento-item {
  overflow: hidden;
  display: block;
  position: relative;
}

.gallery-bento-item.gp-tall {
  grid-row: 1 / 3;
}

.gallery-bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out-expo), filter 0.3s ease;
  filter: saturate(0.88);
}

.gallery-bento-item:hover img {
  transform: scale(1.05);
  filter: saturate(1.1);
}

.gallery-bento-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 30, 0);
  transition: background 0.3s ease;
}

.gallery-bento-item:hover::after {
  background: rgba(10, 16, 30, 0.1);
}

.gallery-preview-cta {
  text-align: center;
  padding: 2.5rem 0 var(--space-xl);
}

@media (max-width: 768px) {
  .gallery-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 200px;
  }

  .gallery-bento-item.gp-tall {
    grid-row: auto;
  }
}

@media (max-width: 480px) {
  .gallery-bento {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 220px);
  }
}

/* ============================================================
   GALLERY GRID VARIANTS
   ============================================================ */
.gallery-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .gallery-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gallery-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HERO SPLIT LAYOUT — legacy classes (no longer used, kept for safety)
   ============================================================ */
.hero-left {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  height: 580px;
  align-self: center;
}

.hero-photo-stack {
  position: relative;
  height: 100%;
}

.hero-photo-main {
  position: absolute;
  right: 0;
  top: 0;
  width: 88%;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.hero-photo-accent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: 4px solid #ffffff;
}

.hero-photo-badge {
  position: absolute;
  right: 0;
  bottom: 60px;
  background: var(--color-navy-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 2;
  border-left: 3px solid var(--color-gold);
  max-width: 180px;
}

.hero-photo-badge strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-gold);
  font-family: var(--font-serif);
}

/* Mobile: stack vertically, hide photo */
@media (max-width: 900px) {
  .home-hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hero-left {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-visual {
    display: none;
  }
}

/* ============================================================
   SIGNATURE DESIGN ELEMENTS — MGS visual language
   ============================================================ */

/* Diagonal section transition — hero spills into content.
   --hero-clip drives both the cut and the stat bar's bottom padding, so
   the diagonal never eats the last cell's number and label. */
.home-hero {
  --hero-clip: 38px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-clip)), 0 100%);
  margin-bottom: calc(-1 * var(--hero-clip));
  z-index: 2;
}

/* Keep the stat content above the diagonal. The white bar still runs to the
   hero's edge and still gets cut — only the text is lifted clear. */
.hero-stat-bar {
  padding-bottom: var(--hero-clip);
}

/* Saffron accent rule before section headings */
.section-header h2::before,
.weaving-section .section-header h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, var(--color-saffron), var(--color-gold));
  margin-bottom: 1rem;
  border-radius: 2px;
}

/* Gold divider upgrade */
.gold-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, var(--color-saffron), var(--color-gold));
  margin: 1.25rem 0;
  border-radius: 2px;
}

/* ============================================================
   IMPACT NUMBERS — Standalone section with massive typography
   ============================================================ */
.impact-numbers-section {
  background: var(--color-navy-deep);
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}

.impact-numbers-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,98,42,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.impact-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

.impact-number-item {
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(200,168,75,0.15);
}

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

.impact-number-item .big-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 6vw + 1rem, 6rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
}

.impact-number-item .big-num em {
  color: var(--color-gold);
  font-style: normal;
}

.impact-number-item .num-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

@media (max-width: 768px) {
  .impact-numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .impact-number-item {
    border-bottom: 1px solid rgba(200,168,75,0.15);
  }
  .impact-number-item:nth-child(2n) {
    border-right: none;
  }
}

/* ============================================================
   WEAVING / NEWS — More editorial hierarchy
   ============================================================ */
.weaving-section {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--color-bg);
}

.news-card--feature .news-card-img {
  aspect-ratio: 16/9;
}

/* ============================================================
   SCHOOL LIFE — Full-bleed mosaic grid
   ============================================================ */
.school-life-section {
  padding: 0;
  background: var(--color-warm-alt);
}

.school-life-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5rem) var(--space-md) 2.5rem;
}

.school-life-header h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, var(--color-saffron), var(--color-gold));
  margin-bottom: 1rem;
  border-radius: 2px;
}

.school-life-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem var(--space-md) clamp(3.5rem, 6vw, 5rem);
}

.life-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px;
  grid-auto-rows: 300px;
  gap: 5px;
  width: 100%;
}

.life-cell {
  overflow: hidden;
  position: relative;
}

.life-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
  filter: saturate(0.92);
}

.life-cell:hover img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

/* Explicit placement — first column tall, spans all 3 rows */
.life-cell--hero {
  grid-column: 1;
  grid-row: 1 / 4;
}

/* Wide cell spans 2 columns */
.life-cell--wide {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .life-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    grid-auto-rows: 220px;
  }
  .life-cell--hero,
  .life-cell--wide {
    grid-row: auto;
    grid-column: auto;
  }
}

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

/* ============================================================
   TEAM SECTION — Larger cards with full-bleed portrait treatment
   ============================================================ */
.team-section {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--color-surface);
}

/* ============================================================
   FOUNDER QUOTE SECTION — Full-screen pull quote
   ============================================================ */
.founder-quote-section {
  background: var(--color-navy-deep);
  padding: clamp(5rem, 10vw, 8rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.founder-quote-section::before {
  content: '\201C';
  font-family: var(--font-serif);
  font-size: 28rem;
  color: rgba(200, 168, 75, 0.05);
  position: absolute;
  top: -6rem;
  left: -2rem;
  line-height: 1;
  pointer-events: none;
}

.founder-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw + 0.5rem, 2.2rem);
  color: rgba(255,255,255,0.92);
  max-width: 70ch;
  margin: 0 auto 2rem;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.founder-quote-attr {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HERO STAT BAR — responsive
   ============================================================ */
@media (max-width: 600px) {
  .hero-stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stat-bar .hero-stat:nth-child(2) {
    border-right: none;
  }
  .hero-stat-bar .hero-stat:nth-child(1),
  .hero-stat-bar .hero-stat:nth-child(2) {
    border-bottom: 1px solid rgba(15,24,40,0.15);
  }

  .hero-btns {
    margin-top: 1.25rem;
  }
  .hero-stat-bar .hero-stat {
    padding: 0.75rem 0.5rem;
  }
}


/* ============================================================
   SECTION HEADER RHYTHM
   ============================================================ */
.section-header {
  margin-bottom: 2.5rem;
}

.section-header h2 {
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
}

/* ============================================================
   SAFFRON ACCENT UTILITY
   ============================================================ */
.text-saffron { color: var(--color-saffron); }

/* ============================================================
   FOUNDER'S JOURNEY PAGE — sticky sidebar layout
   ============================================================ */
.founder-journey-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 3.5rem;
  align-items: flex-start;
}

.founder-journey-photo {
  position: sticky;
  top: 100px;
}

.founder-journey-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
  display: block;
}

@media (max-width: 900px) {
  .founder-journey-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .founder-journey-photo {
    position: static;
  }
  .founder-journey-img {
    height: 320px;
  }
}

/* ============================================================
   UTILITY IMAGE CLASSES (used on mission-ethos + other pages)
   ============================================================ */
.img-rounded {
  border-radius: var(--radius-md);
  display: block;
}

.img-cover {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   GANDHI IN CLASSROOMS — alternating card layout
   ============================================================ */
.gandhi-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 2rem;
}

.gandhi-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 3rem;
  align-items: center;
}

.gandhi-card:nth-child(even) {
  grid-template-columns: 1fr 420px;
}

.gandhi-card:nth-child(even) .gandhi-card-body {
  grid-column: 1;
  grid-row: 1;
}

.gandhi-card:nth-child(even) img {
  grid-column: 2;
  grid-row: 1;
}

.gandhi-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  display: block;
}

.gandhi-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--color-navy-deep);
  margin-bottom: 0.75rem;
}

.gandhi-card-body p {
  color: var(--color-body-text);
  margin-bottom: 1rem;
}

.gandhi-card-body blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold-text);
  border-left: 3px solid var(--color-gold);
  padding-left: 1.25rem;
  margin: 1.25rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .gandhi-card,
  .gandhi-card:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .gandhi-card:nth-child(even) .gandhi-card-body,
  .gandhi-card:nth-child(even) img {
    grid-column: auto;
    grid-row: auto;
  }
  .gandhi-card img {
    height: 240px;
  }
}
.bg-saffron    { background: var(--color-saffron); }

/* ============================================================
   PHASE 2 DESIGN ENHANCEMENTS
   ============================================================ */

/* ── 1. NAV — guaranteed legibility over dark video ─────────── */
@media (min-width: 901px) {
  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > a,
  .home-page #site-header:not(.nav-scrolled) .nav-menu > li > span {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  }
}

/* ── 2. HERO — staggered cinematic entrance ──────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-logo-lockup {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.1s both;
}

.home-hero h1 {
  animation: heroFadeUp 1s var(--ease-out-expo) 0.28s both;
}

.home-hero-sub {
  animation: heroFadeUp 0.9s var(--ease-out-expo) 0.52s both;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-ctas {
  animation: heroFadeUp 0.9s var(--ease-out-expo) 0.72s both;
}

.hero-stat-bar {
  animation: heroFadeUp 0.9s var(--ease-out-expo) 0.88s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-lockup,
  .home-hero h1,
  .home-hero-sub,
  .hero-ctas,
  .hero-stat-bar {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── 3. MOBILE — hide autoplay video, show CSS bg image ──────── */
@media (max-width: 680px) {
  .hero-bg-wrap video {
    display: none;
  }
}

/* ── 4. NEWS CARDS — image zoom inside the link wrapper ──────── */
.news-card-img-link {
  display: block;
  overflow: hidden;
}

.news-card-img {
  display: block;
  width: 100%;
  transition: transform 0.45s var(--ease-out-expo);
}

.news-card:hover .news-card-img {
  transform: scale(1.05);
}

/* ── 5. TEAM PHOTOS — grayscale to full colour on hover ──────── */
.team-photo {
  filter: grayscale(100%) saturate(0);
}

.team-card:hover .team-photo {
  filter: grayscale(0%) saturate(1);
}

/* ── 6. LIFE GRID — dark overlay + plus icon on hover ────────── */
.life-cell::before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  color: rgba(255, 255, 255, 0);
  font-size: 2.5rem;
  font-weight: 200;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  transition: color 0.3s ease, transform 0.35s var(--ease-out-expo);
}

.life-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 30, 0);
  transition: background 0.35s ease;
  pointer-events: none;
}

.life-cell:hover::after {
  background: rgba(10, 16, 30, 0.38);
}

.life-cell:hover::before {
  color: rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%) scale(1);
}

/* ── 7. LIFE GRID — horizontal carousel on small mobile ──────── */
@media (max-width: 480px) {
  .life-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }

  .life-grid::-webkit-scrollbar {
    display: none;
  }

  .life-cell,
  .life-cell--hero,
  .life-cell--wide {
    flex: 0 0 82vw;
    height: 260px;
    scroll-snap-align: start;
    grid-column: auto;
    grid-row: auto;
  }
}

/* ── 8. IMPACT NUMBERS — pulse when counter finishes ─────────── */
@keyframes numPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.impact-number-item.counted .big-num {
  animation: numPulse 0.45s var(--ease-out-expo);
}

/* ── 9. CTA BUTTON — periodic shine sweep ────────────────────── */
.cta-section .btn-primary {
  position: relative;
  overflow: hidden;
}

.cta-section .btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  animation: shineSweep 4s ease 1.8s infinite;
  pointer-events: none;
}

@keyframes shineSweep {
  0%   { left: -110%; }
  30%  { left: 160%; }
  100% { left: 160%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-section .btn-primary::after {
    animation: none;
  }
}

/* ============================================================
   PHASE 3 — MOBILE DEEP OPTIMISATION
   ============================================================ */

/* ── 1. SAFE-AREA INSETS — notched iPhones ─────────────────── */
#site-footer {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.footer-bottom {
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
}

.back-to-top {
  bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom)));
}

/* ── 2. SCROLL MARGIN — fixed nav offset for hash anchors ───── */
section[id],
.content-section[id],
[id].reveal {
  scroll-margin-top: 80px;
}

/* ── 3. HAMBURGER — white bars over transparent hero ─────────  */
.home-page #site-header:not(.nav-scrolled) .nav-hamburger span {
  background: rgba(255, 255, 255, 0.92);
}

/* ── 4. HERO — tighten the gutter on the narrowest phones ───  */
@media (max-width: 360px) {
  :root { --hero-gutter: 1.15rem; }
}

/* ── 5. STAT-BAR LABELS — no wrapping at 320–390px ──────────  */
@media (max-width: 480px) {
  .hero-stat-bar .hero-stat {
    padding: 1rem 0.3rem;
  }

  .stat-num {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    margin-bottom: 0.2rem;
  }

  .stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: var(--color-text);
  }
}

/* ── 6. TEAM GRID — 2-col on mobile (overrides 1fr above) ───── */
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .team-photo-wrap {
    aspect-ratio: 3 / 4;
  }

  .team-card-body {
    padding: 0.9rem 0.85rem 1.1rem;
  }

  .team-name {
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
  }

  .team-role {
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    margin-bottom: 0.6rem;
  }

  .team-quote {
    font-size: 0.77rem;
    line-height: 1.5;
  }
}

/* ── 7. GALLERY BENTO — 2-col mosaic instead of 5-image stack ─ */
@media (max-width: 480px) {
  .gallery-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px 155px 155px;
    gap: 4px;
  }

  .gallery-bento-item.gp-tall {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

/* ── 8. CTA SECTION — full-width button on mobile ────────────  */
@media (max-width: 600px) {
  .cta-section {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .cta-section .btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── 9. QUOTE BLOCK — less padding on very narrow screens ────── */
@media (max-width: 400px) {
  .quote-block blockquote {
    padding: 1.25rem 1.1rem;
  }

  .quote-block blockquote::before {
    font-size: 4rem;
    top: -0.3rem;
    left: 0.6rem;
  }
}

/* ── 10. FOUNDER CONTENT — tighten generous padding on mobile ── */
@media (max-width: 480px) {
  .founder-content {
    padding: var(--space-md);
  }
}

/* ============================================================
   PATCH — News grid white-space fix + team photo colour
   ============================================================ */

/* ── NEWS GRID — horizontal feature card, no stretched whitespace ─ */
.news-grid {
  grid-template-columns: 1fr 1fr;
}

.news-card:first-child {
  grid-column: 1 / -1;
  grid-row: auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.news-card:first-child .news-card-img-link {
  display: block;
  overflow: hidden;
}

.news-card:first-child img.news-card-img,
.news-card:first-child img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 280px;
  object-fit: cover;
}

.news-card:first-child .news-card-body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

.news-card:first-child .news-card-body h3 {
  font-size: clamp(1.25rem, 1.2vw + 0.5rem, 1.65rem);
  margin-bottom: 0;
}

.news-card:first-child .news-card-body p {
  margin-bottom: 0;
  flex: 1;
}

.news-card:first-child .news-card-link {
  margin-top: 0.5rem;
}

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

  .news-card:first-child {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .news-card:first-child img.news-card-img,
  .news-card:first-child img {
    height: 240px;
    min-height: unset;
  }

  .news-card:first-child .news-card-body {
    padding: 1.5rem;
  }
}

/* ── TEAM PHOTOS — full colour, no grayscale ─────────────────── */
.team-photo {
  filter: none;
}

.team-card:hover .team-photo {
  filter: none;
}

/* ============================================================
   MOBILE PASS
   Phone-layout corrections. Kept last in the file so these are
   the final word on the rules they touch.
   ============================================================ */

/* Nothing should be able to push the page sideways. */
video,
iframe,
table {
  max-width: 100%;
}

.map-block {
  display: block;
}

/* ── HERO ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --hero-gutter: 1.5rem;
  }

  .home-hero {
    /* 100vh fallback first: without it, a browser that doesn't know
       svh drops both declarations and the hero loses its height. */
    min-height: 100vh;
    min-height: max(100svh, 620px);
    /* The header is fixed over the hero. This is the floor the
       bottom-anchored content can never rise above. */
    padding-top: 84px;
    /* A 60px diagonal across a phone-width hero cuts through the
       stat bar; keep the gesture, shrink the angle. */
    --hero-clip: 16px;
  }

  /* The fixed header already carries the logo, so the in-hero
     lockup is a duplicate — and being absolutely positioned, it
     landed on top of the headline. Drop it into the flow and keep
     only the "Est. 1871 · Pune" line, as an eyebrow. */
  .hero-logo-lockup {
    position: static;
    padding: 0 var(--hero-gutter);
    margin-bottom: 0.75rem;
    gap: 0;
  }

  .hero-logo-img {
    display: none;
  }

  .hero-est {
    border-left: none;
    padding-left: 0;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.7);
  }

  .hero-content-wrap {
    padding: 0 var(--hero-gutter) 1.75rem;
  }

  /* 18ch is narrower than the phone itself — it was forcing the
     headline onto six lines and squeezing everything else out. */
  .home-hero h1 {
    max-width: none;
    font-size: clamp(1.75rem, 7.2vw, 2.5rem);
    line-height: 1.1;
    margin-bottom: 0.9rem;
  }

  .home-hero-sub {
    max-width: 42ch;
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }

  .hero-ctas {
    gap: 0.75rem;
  }
}

/* ── TAP TARGETS ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-nav li {
    margin-bottom: 0;
  }

  .footer-nav a {
    display: inline-block;
    padding: 0.65rem 0;
  }

  .footer-contact-item a {
    display: inline-block;
    padding: 0.35rem 0;
  }
}

/* ── BANK DETAILS TABLE — stack instead of overflowing ─────── */
@media (max-width: 600px) {
  .bank-details table,
  .bank-details tbody,
  .bank-details tr,
  .bank-details td {
    display: block;
    width: 100%;
  }

  .bank-details tr {
    border-bottom: 1px solid var(--color-border);
    padding: 0.7rem 0;
  }

  .bank-details tr:last-child {
    border-bottom: none;
  }

  .bank-details td {
    border-bottom: none;
    padding: 0 1.25rem;
  }

  .bank-details td:first-child {
    white-space: normal;
    width: auto;
    margin-bottom: 0.2rem;
  }
}

/* ── LONG STRINGS — emails and URLs must not widen the page ─── */
body {
  overflow-wrap: break-word;
}

.contact-info p,
.contact-info a,
.footer-contact-item,
.footer-contact-item a {
  overflow-wrap: anywhere;
}

/* ── REMAINING TAP TARGETS ─────────────────────────────────── */
@media (max-width: 900px) {
  .read-more,
  .news-card-link {
    min-height: 44px;
  }

  .contact-info p a,
  .footer-contact-item a,
  #site-footer a[href*="maps.app.goo.gl"] {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0;
    min-height: 44px;
  }

  /* Role labels were rendering at 9.3px — under the legible floor. */
  .team-role {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
}

/* ── CARD HEADLINE TAP TARGETS ─────────────────────────────── */
@media (max-width: 900px) {
  /* Card headlines are links; give them a real target height.
     Each card also carries its own 44px "Read More" action. */
  .news-card-title a {
    display: inline-block;
    padding-block: 0.75rem;
  }
}

/* ── HEADER LOGO ON MOBILE ─────────────────────────────────── */
@media (max-width: 900px) {
  /* The homepage hides the header logo until you scroll, because the
     hero carried its own lockup. Mobile drops that lockup, so without
     this the phone homepage has no logo at all above the fold. */
  .home-page #site-header:not(.nav-scrolled) .nav-logo {
    opacity: 1;
    pointer-events: auto;
  }

  /* It sits on a photo up there, so give it an edge to hold. */
  .home-page #site-header:not(.nav-scrolled) .nav-logo img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  }

  /* 54px in a 73px bar leaves ~9px of air top and bottom, which reads
     as cramped on a phone. 44px sits properly in the bar. */
  .nav-logo img {
    height: 44px;
  }
}

/* The transparent homepage header sits on whatever the photo happens
   to be doing. Lay a soft scrim under it so the logo and the white
   hamburger bars always have something to read against. */
@media (max-width: 900px) {
  .home-page #site-header:not(.nav-scrolled)::before {
    content: "";
    position: absolute;
    inset: 0 0 -36px 0;
    background: linear-gradient(
      180deg,
      rgba(10, 16, 30, 0.62) 0%,
      rgba(10, 16, 30, 0.34) 55%,
      rgba(10, 16, 30, 0) 100%
    );
    pointer-events: none;
    z-index: -1;
  }
}

/* ── OPEN DRAWER: the X must not be white on a white panel ──── */
@media (max-width: 900px) {
  .home-page #site-header:not(.nav-scrolled) .nav-hamburger.open span,
  .nav-hamburger.open span {
    background: var(--color-navy-deep);
  }
}

/* ── SMALL PHONES (≤380px) ─────────────────────────────────── */
/* Two columns at 320px leaves ~92px of usable width per card, which
   overflowed on the donate and impact grids. One column below 380px,
   and minmax(0,1fr) so a wide child can never blow the track out. */
@media (max-width: 380px) {
  .impact-grid,
  .donate-grid,
  .trustees-grid,
  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .impact-grid,
  .donate-grid,
  .trustees-grid,
  .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   BUG SWEEP — 2026-09-15
   ============================================================ */

/* Razorpay payment-button embeds (Destitute's Palace). The widget renders its
   own button; reserve its height so cards don't jump while the script loads. */
.rzp-donate {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.75rem;
}

/* Gallery captions only slid in on :hover, so on phones and tablets they were
   never visible. Where there's no hover, put the caption under the photo. */
@media (hover: none) {
  .gallery-item {
    aspect-ratio: auto;
    overflow: visible;
    background: none;
    cursor: default;
  }
  .gallery-item img {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: var(--radius-md);
  }
  .gallery-item--doc img {
    border: 1px solid rgba(17, 24, 40, 0.1);
    background: #fff;
  }
  .gallery-item--doc {
    border: none;
  }
  .gallery-item figcaption {
    position: static;
    transform: none;
    background: none;
    color: var(--color-text-muted);
    padding: 0.5rem 0.15rem 0;
    font-size: 0.8rem;
    line-height: 1.45;
  }
}

/* "Support Us" is near the right edge; its left-anchored dropdown ran past the
   viewport between 901px and ~1040px. Anchor it to the right instead. */
@media (min-width: 901px) {
  .nav-menu > li:nth-last-child(-n+2) .nav-dropdown {
    left: auto;
    right: 0;
  }
}

/* "Sponsor a Child Today" wrapped to three lines at 360px. */
@media (max-width: 400px) {
  .btn-primary,
  .btn-secondary {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Active nav link: brand gold measures 2.5:1 on the white menu panel, under the
   4.5:1 minimum. Use the darker gold the palette reserves for light backgrounds.
   Over the transparent hero (desktop) the brighter gold stays — it sits on a
   dark photo there, where it reads fine. */
.nav-menu > li > a.active,
#site-header.nav-scrolled .nav-menu > li > a.active {
  color: var(--color-gold-text);
}