/* ================================================================
   BCP — Homepage Design System
   File: styles.css
   Used by: index.html ONLY
   Do NOT include in other pages (they use style.css)
================================================================ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* Colors */
  --color-navy-950:   #041C43;
  --color-navy-900:   #072B5C;
  --color-navy-800:   #0b3f7e;
  --color-navy-700:   #1E88FF;  /* Bright Blue accent */
  --color-blue-600:   #0B63C8;  /* Blue — used on white/soft backgrounds */
  --color-blue-300:   #93c5fd;
  --color-orange-500: #FF6B00;
  --color-orange-dark:#c2410c;
  --color-white:      #ffffff;
  --color-off-white:  #f8fafc;
  --color-bg-soft:    #F5F9FD;
  --color-text-dark:  #10253F;
  --color-text-mid:   #3d5a8a;
  --color-text-muted: #68758B;

  /* Gradients */
  --gradient-hero:     linear-gradient(115deg, #041C43 0%, #072B5C 38%, #10499a 70%, #1E73E8 100%);
  --gradient-programs: linear-gradient(180deg, #061832 0%, #0b2a63 100%);
  --gradient-impact:   linear-gradient(180deg, #051529 0%, #0a2858 100%);
  --gradient-orange:   linear-gradient(180deg, #FF6B00, #c2410c);
  --gradient-footer:   linear-gradient(180deg, #072B5C 0%, #041C43 100%);
  --gradient-stripe:   linear-gradient(90deg, #041C43 0%, #072B5C 50%, #1E73E8 100%);

  /* Program card gradients */
  --prog-blue:      linear-gradient(145deg, #1348b8, #0a2e7a);
  --prog-purple:    linear-gradient(145deg, #7c3aed, #4c1d95);
  --prog-green:     linear-gradient(145deg, #059669, #064e3b);
  --prog-teal:      linear-gradient(145deg, #0891b2, #155e75);
  --prog-orange:    linear-gradient(145deg, #ea580c, #9a3412);
  --prog-pink:      linear-gradient(145deg, #db2777, #831843);
  --prog-lightblue: linear-gradient(145deg, #0284c7, #0c4a6e);
  --prog-forest:    linear-gradient(145deg, #15803d, #14532d);
  --prog-gold:      linear-gradient(145deg, #d97706, #78350f);

  /* Typography */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Roboto', system-ui, sans-serif;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card:  0 24px 60px rgba(2, 12, 36, 0.28);
  --shadow-nav:   0 4px 24px rgba(2, 12, 36, 0.18);
  --shadow-btn:   0 4px 14px rgba(249, 115, 22, 0.35);

  /* Layout */
  --container-max:  1100px;
  --container-hero: 1700px;
  --nav-height:    80px;
  --section-pad:   88px;

  /* Transitions */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-btn:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-base: 0.25s var(--ease-out);
}

/* ── 2. 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-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-dark);
  background: var(--color-white);
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--color-orange-500); outline-offset: 3px; }

ul { list-style: none; }

/* ── 3. REUSABLE UTILITIES ───────────────────────────────────── */

/* --- Eyebrow labels --- */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-orange-500);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-eyebrow--light { color: var(--color-orange-500); }

/* --- Section titles --- */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 16px;
}
.section-title--dark  { color: var(--color-text-dark); }
.section-title--light { color: var(--color-white); }

/* --- Divider bar --- */
.section-divider {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--gradient-orange);
  margin: 18px auto 28px;
}

/* ── 4. BUTTON SYSTEM ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: transform var(--trans-base), box-shadow var(--trans-base), background var(--trans-base);
  white-space: nowrap;
}

/* Donate — nav */
.btn--donate {
  background: var(--gradient-orange);
  color: var(--color-white);
  padding: 10px 22px;
  box-shadow: var(--shadow-btn);
}
.btn--donate:hover,
.btn--donate:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.48);
}

/* Donate — large hero / CTA */
.btn--donate-lg {
  background: var(--gradient-orange);
  color: var(--color-white);
  padding: 15px 36px;
  font-size: 1.05rem;
  box-shadow: var(--shadow-btn);
}
.btn--donate-lg:hover,
.btn--donate-lg:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.52);
}

/* ── 5. LANGUAGE TOGGLE ─────────────────────────────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-off-white);
  border: 1px solid rgba(4, 44, 92, 0.12);
  border-radius: var(--radius-pill);
  padding: 3px 4px;
}

.lang-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-text-mid);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: background var(--trans-base), color var(--trans-base);
}
.lang-btn.is-active,
.lang-btn[aria-pressed="true"] {
  background: var(--color-navy-900);
  color: var(--color-white);
}
.lang-btn:hover:not(.is-active) {
  color: var(--color-navy-900);
  background: rgba(4, 44, 92, 0.08);
}

/* ── 6. HEADER ───────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  transition: box-shadow var(--trans-base);
}
.header.scrolled {
  box-shadow: var(--shadow-nav);
}

.header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__brand { display: flex; align-items: center; }
.header__logo  { width: 110px; height: auto; }

/* --- Mobile-only language switcher (header bar, outside the drawer) --- */
.header__mobile-lang { display: none; }

/* --- Hamburger toggle --- */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  border-radius: var(--radius-sm);
}
.header__toggle-bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--color-navy-900);
  border-radius: 2px;
  transition: transform var(--trans-base), opacity var(--trans-base);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* --- Primary nav --- */
.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--color-text-dark);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--trans-base), background var(--trans-base);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__link:focus-visible {
  color: var(--color-navy-700);
  background: rgba(11, 95, 194, 0.08);
}

.nav__caret {
  font-size: 0.6rem;
  transition: transform var(--trans-base);
}
.nav__item--dropdown:hover .nav__caret,
.nav__dropdown-toggle[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

/* --- Dropdown --- */
.nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--color-navy-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px 0;
  z-index: 200;
  overflow: hidden;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown {
  display: block;
  animation: dropdownIn 0.18s var(--ease-out) both;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav__dropdown a {
  display: block;
  padding: 9px 18px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--trans-base), background var(--trans-base), padding-left var(--trans-base);
}
.nav__dropdown a:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  padding-left: 24px;
}

/* --- Nav actions --- */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* --- Header stripe --- */
.header__stripe {
  height: 10px;
  background: var(--gradient-stripe);
}

/* Close button lives only inside the mobile drawer; hidden by default,
   the ≤960px media query below switches it back to flex. */
.navPanel__head {
  display: none;
}

/* ── 7. HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--gradient-hero);
  overflow: hidden;
  padding: 88px 0 0;
}

/* Dot-grid texture */
.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Abstract soft-blurred blobs */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hero__blob--a {
  width: 520px;
  height: 520px;
  top: -160px;
  right: -140px;
  background: radial-gradient(circle, rgba(30,115,232,0.55), transparent 70%);
}
.hero__blob--b {
  width: 380px;
  height: 380px;
  bottom: -80px;
  left: -120px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
}

/* Abstract curved line accents */
.hero__curves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero__container {
  width: min(95vw, var(--container-hero));
  margin: 0 auto;
  padding: 0 48px 64px;
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  /* fr (not %) so the 90px column-gap is subtracted before the 30/70
     split is computed — percentage tracks + a gap overflow the container */
  grid-template-columns: 3fr 7fr;
  column-gap: 90px;
  align-items: center;
  padding-top: 40px;
}

/* ── Left content ── */
.hero__content {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  /* Let this grid column actually shrink to its 30% share instead of
     being forced wide by the unbreakable "Opportunities" — without
     this, the word overflows past the column and the slider (painted
     after it in the DOM) visually covers the overflow. */
  min-width: 0;
}

.hero__heading {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 800;
  /* Tuned to fit "Opportunities" inside a ~250–480px column across the
     desktop range; overflow-wrap below is the safety net for the rest. */
  font-size: clamp(2rem, 3.4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero__heading-line--white  { color: var(--color-white); }
.hero__heading-line--orange { color: var(--color-orange-500); }

.hero__accent {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-navy-700);
  margin: 20px 0 18px;
}

.hero__lead {
  max-width: 360px;
  color: rgba(255,255,255,0.82);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 30px;
}

/* Only ever shown in the dedicated mobile hero layout (≤768px) */
.hero__mobile-donate { display: none; }
.hero__lead--mobile  { display: none; }

.hero__features {
  display: flex;
  gap: 16px;
}
.hero__feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.hero__feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}
.hero__feature-icon--blue   { background: var(--color-navy-700); }
.hero__feature-icon--orange { background: var(--color-orange-500); }
.hero__feature-icon--teal   { background: #0891b2; }

.hero__feature-text { display: flex; flex-direction: column; gap: 2px; }
.hero__feature-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--color-white);
}
.hero__feature-desc {
  font-size: 0.66rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.6);
}

/* ── Right: slider + preview + mission card ── */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
}

/* ── Slider ── */
.hero__slider-wrap {
  position: relative;
  background: var(--color-white);
  padding: 20px;
  border-radius: 28px;
  box-shadow: 0 32px 70px rgba(2, 12, 36, 0.4);
}

.hero__slider { position: relative; }

.slider__viewport {
  overflow: hidden;
  border-radius: 18px;
  height: 520px;
  background: var(--color-navy-900);
}

.slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 8s linear;
}

/* Ken-Burns on active slide */
.slider__slide.is-active img { transform: scale(1.04); }

/* Arrows */
.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: var(--color-white);
  border: 1px solid rgba(4, 44, 92, 0.1);
  color: var(--color-navy-900);
  font-size: 1.4rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans-base), color var(--trans-base), transform 0.2s;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(2, 12, 36, 0.2);
}
.slider__btn:hover {
  background: var(--color-navy-900);
  color: var(--color-white);
  transform: translateY(-50%) scale(1.08);
}
.slider__btn--prev { left: 18px; }
.slider__btn--next { right: 18px; }

/* Dots — overlaid on the image, above the fold line */
.slider__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  z-index: 10;
  background: rgba(4, 28, 67, 0.35);
  padding: 6px 4px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
/* Visible dot stays 8px (22px pill when active); the <button> itself is
   a full 24x24px tap target per WCAG 2.5.8, centered on the same spot
   so nothing looks different, it's just easier to tap accurately. */
.slider__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--trans-base), width var(--trans-base);
}
.slider__dot.is-active::before {
  background: var(--color-white);
  width: 22px;
}

/* Small floating preview thumbnail — bottom-right corner of the image,
   stacked just above the mission card so the two don't collide */
.hero__preview {
  position: absolute;
  right: 32px;
  bottom: 108px;
  width: 150px;
  height: 110px;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: 0 16px 32px rgba(2, 12, 36, 0.35);
  z-index: 6;
}
.hero__preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

/* ── Mission card — attached to the slider's bottom-right corner ── */
.hero__card {
  position: absolute;
  right: -20px;
  bottom: -121px;
  width: 340px;
  height: 220px;
  background: linear-gradient(160deg, #0b3f7e 0%, #041C43 100%);
  border: 1px solid rgba(30, 115, 232, 0.4);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  box-shadow: 0 22px 48px rgba(2, 12, 36, 0.45);
  z-index: 8;
}

.hero__card-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 107, 0, 0.16);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__card-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.42;
  color: var(--color-white);
}
.hero__card-text em {
  font-style: normal;
  color: var(--color-orange-500);
}

/* ── Stats row ── */
.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 170px auto 0;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 88px;
}
.hero-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.hero-stat__icon--blue   { background: rgba(30, 115, 232, 0.2); color: #7fb1f5; }
.hero-stat__icon--orange { background: rgba(255, 107, 0, 0.2); color: var(--color-orange-500); }
.hero-stat__icon--teal   { background: rgba(8, 145, 178, 0.2); color: #4dd0e1; }

.hero-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1;
}
.hero-stat__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero-stat__divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.16);
}

/* ── Hero wave ── */
.hero__wave {
  position: relative;
  line-height: 0;
  margin-top: -2px;
}
.hero__wave svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 8. ABOUT — asymmetrical photo + Mission/Vision/Values ─────── */
.about {
  background: var(--color-bg-soft);
  padding: var(--section-pad) 24px;
}

.about__container {
  max-width: 1240px;
  margin: 0 auto;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

/* Photography column */
.about__media { position: relative; }

.about__media-main {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 34px 64px rgba(7, 43, 92, 0.2);
}
.about__media-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.about__media-accent {
  position: absolute;
  left: -36px;
  bottom: -36px;
  width: 170px;
  height: 130px;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 20px 40px rgba(7, 43, 92, 0.22);
}
.about__media-accent img { width: 100%; height: 100%; object-fit: cover; }

.about__media-badge {
  position: absolute;
  top: 28px;
  right: -20px;
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: 16px 22px;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(7, 43, 92, 0.3);
  text-align: center;
  line-height: 1.1;
}
.about__media-badge-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
}
.about__media-badge-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-top: 2px;
}

/* Text column */
.about__lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-mid);
  margin: 20px 0 36px;
  max-width: 480px;
}

.about__pillars {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.about__pillar {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.about__pillar-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 99, 200, 0.08);
  color: var(--color-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__pillar-text h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-navy-900);
  margin-bottom: 5px;
}
.about__pillar-text p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ── 9. PROGRAMS ─────────────────────────────────────────────── */
.programs {
  background: var(--gradient-programs);
  padding: var(--section-pad) 24px;
}

.programs__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.programs__header { text-align: center; margin-bottom: 48px; }

.programs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ── Program cards — photo + colored scrim + icon + Learn More ── */
.prog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-white);
  overflow: hidden;
  background: var(--color-navy-900);
  transition: transform var(--trans-base), box-shadow var(--trans-base);
  box-shadow: 0 10px 28px rgba(2,12,36,0.35);
}
.prog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(2,12,36,0.5);
}

.prog-card__media {
  position: relative;
  height: 168px;
  overflow: hidden;
}
.prog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.prog-card:hover .prog-card__media img { transform: scale(1.09); }

.prog-card__scrim {
  position: absolute;
  inset: 0;
  /* A light tint, not a wash — the photo should stay clearly visible */
  opacity: 0.26;
}
.prog-card__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4,20,45,0.55) 100%);
}

/* Color variants (scrim tint over the photo) */
.prog-card--blue      .prog-card__scrim { background: var(--prog-blue); }
.prog-card--purple    .prog-card__scrim { background: var(--prog-purple); }
.prog-card--green     .prog-card__scrim { background: var(--prog-green); }
.prog-card--teal      .prog-card__scrim { background: var(--prog-teal); }
.prog-card--orange    .prog-card__scrim { background: var(--prog-orange); }
.prog-card--pink      .prog-card__scrim { background: var(--prog-pink); }
.prog-card--lightblue .prog-card__scrim { background: var(--prog-lightblue); }
.prog-card--forest    .prog-card__scrim { background: var(--prog-forest); }
.prog-card--gold      .prog-card__scrim { background: var(--prog-gold); }

.prog-card__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}

.prog-card__icon {
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
  margin-top: -42px;
  backdrop-filter: blur(6px);
}

.prog-card__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.prog-card__desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  flex: 1;
}

.prog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-white);
}
.prog-card__more-arrow {
  transition: transform var(--trans-base);
}
.prog-card:hover .prog-card__more-arrow { transform: translateX(4px); }

/* ── 10. IMPACT — dark gradient over a full-bleed photo ─────────── */
.impact {
  position: relative;
  background:
    linear-gradient(180deg, rgba(5,21,41,0.9) 0%, rgba(4,28,67,0.95) 100%),
    url("IMG_3258.jpg") center 30% / cover no-repeat;
  padding: var(--section-pad) 24px;
}

.impact__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Two-column layout: content + stats on the left, CTA card on the right */
.impact__layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: center;
}

.impact__header { text-align: left; margin-bottom: 40px; }

.impact__intro {
  max-width: 520px;
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 16px;
}

/* Stats row */
.impact__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.impact-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.impact-stat__icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange-500);
  margin-bottom: 4px;
}

.impact-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1;
}

.impact-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* CTA panel */
.impact__cta {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(2,12,36,0.28);
}

.impact__cta-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 8px;
}

.impact__cta-desc {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.6;
}

/* ── 10a. SUCCESS STORIES — magazine layout ─────────────────────── */
.stories {
  background: var(--color-white);
  padding: var(--section-pad) 24px;
}

.stories__container {
  max-width: 1240px;
  margin: 0 auto;
}

.stories__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.stories__intro {
  margin-top: 16px;
  color: var(--color-text-mid);
  font-size: 1.05rem;
  line-height: 1.7;
}

.stories__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
.stories__side {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.story-card {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: 0 20px 46px rgba(7, 43, 92, 0.12);
  transition: transform var(--trans-base), box-shadow var(--trans-base);
}
.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(7, 43, 92, 0.2);
}

.story-card__media { position: relative; overflow: hidden; }
.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.story-card:hover .story-card__media img { transform: scale(1.06); }

.story-card--large { flex-direction: column; }
.story-card--large .story-card__media { height: 360px; }

.story-card--small { flex: 1; flex-direction: row; align-items: stretch; }
.story-card--small .story-card__media { width: 170px; flex-shrink: 0; }

.story-card__body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.story-card--small .story-card__body { padding: 18px 20px; gap: 6px; }

.story-card__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-blue-600);
  background: rgba(11, 99, 200, 0.08);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.story-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--color-navy-900);
}
.story-card--small .story-card__title { font-size: 1.02rem; }

.story-card__summary {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  flex: 1;
}
.story-card--small .story-card__summary {
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-orange-500);
  text-decoration: none;
  margin-top: 4px;
}
.story-card__link-arrow { transition: transform var(--trans-base); }
.story-card__link:hover .story-card__link-arrow { transform: translateX(4px); }

/* ── 10b. CONTACT CTA ────────────────────────────────────────────── */
.contactCta {
  background: linear-gradient(120deg, var(--color-navy-900) 0%, var(--color-blue-600) 100%);
  padding: 72px 24px;
  text-align: center;
}
.contactCta__container { max-width: 620px; margin: 0 auto; }

.contactCta__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--color-white);
  margin-bottom: 14px;
}
.contactCta__desc {
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 32px;
}

.contactCta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
  padding: 28px 32px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(2,12,36,0.28);
}
.contactCta__card-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.contactCta__card-email {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-white);
  text-decoration: none;
  word-break: break-all;
}
.contactCta__card-email:hover,
.contactCta__card-email:focus-visible { text-decoration: underline; }

.contactCta__btn { margin-top: 24px; }

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

/* ── 11. FOOTER ──────────────────────────────────────────────── */
.footer {
  background: var(--gradient-footer);
  padding-top: 72px;
}

.footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Brand column */
.footer__logo { width: 56px; height: auto; margin-bottom: 14px; }

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 10px;
}

.footer__tagline {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* Social links */
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  transition: background var(--trans-base), color var(--trans-base), transform var(--trans-base);
}
.footer__social-link:hover {
  background: var(--color-orange-500);
  color: var(--color-white);
  transform: translateY(-3px);
}

.footer__col-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange-500);
  margin-bottom: 16px;
}

.footer__links li { margin-bottom: 9px; }
.footer__links a {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.62);
  transition: color var(--trans-base), padding-left var(--trans-base);
}
.footer__links a:hover {
  color: var(--color-white);
  padding-left: 4px;
}

/* Contact column */
.footer__contact-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
}
.footer__contact-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-orange-500);
}
.footer__contact-item a {
  color: rgba(255,255,255,0.62);
  transition: color var(--trans-base);
}
.footer__contact-item a:hover { color: var(--color-white); }

.footer__hq {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  margin-top: 8px;
}

/* Bottom bar */
.footer__bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.38);
}
.footer__legal {
  display: flex;
  gap: 20px;
}
.footer__legal a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.38);
  transition: color var(--trans-base);
}
.footer__legal a:hover { color: rgba(255,255,255,0.72); }

/* ── 12. SCROLL REVEAL ───────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for children */
.programs__grid .prog-card:nth-child(2) { transition-delay: 0.08s; }
.programs__grid .prog-card:nth-child(3) { transition-delay: 0.16s; }
.programs__grid .prog-card:nth-child(4) { transition-delay: 0.06s; }
.programs__grid .prog-card:nth-child(5) { transition-delay: 0.14s; }
.programs__grid .prog-card:nth-child(6) { transition-delay: 0.22s; }
.programs__grid .prog-card:nth-child(7) { transition-delay: 0.10s; }
.programs__grid .prog-card:nth-child(8) { transition-delay: 0.18s; }
.programs__grid .prog-card:nth-child(9) { transition-delay: 0.26s; }

/* ── 13. TABLET RESPONSIVE (≤ 960px) ────────────────────────── */
@media (max-width: 960px) {

  /* Header → hamburger + compact lang switcher (desktop nav doesn't
     fit on tablet widths) */
  .header__inner { gap: 10px; }
  .header__toggle { display: flex; margin-left: 0; }

  .header__mobile-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
  }
  .header__mobile-lang .lang-btn {
    min-width: 34px;
    min-height: 44px;
    padding: 0 10px;
  }

  /* The drawer's own lang switcher would duplicate the one now living
     in the header bar, so it's hidden here only — untouched on desktop. */
  .header__nav .lang-toggle { display: none; }

  /* Always rendered but parked off-screen, so opening it animates a
     real slide instead of an instant display flip. header / scrollable
     nav / footer layout: only the middle (.nav__list) scrolls. */
  .header__nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(380px, 88vw);
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-white);
    border-top: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: -18px 0 40px rgba(2, 6, 23, 0.16);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.28s;
  }
  .header__nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease;
  }

  /* Dimmed backdrop, ~12% of the page stays visible on the left.
     A tap on it lands on <body>, which main.js's existing outside-click
     listener already treats as tap-outside-to-close. .header is
     position:sticky with z-index:1000, so it (and the drawer inside it)
     always paints above this backdrop — no extra elevation needed. */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(4, 15, 35, 0.5);
    z-index: 0;
    animation: navBackdropIn 0.2s ease forwards;
  }
  @keyframes navBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .header__nav,
    .header__nav.is-open,
    .nav__dropdown {
      transition: none;
    }
    body.nav-open::after {
      animation: none;
    }
  }

  body.nav-open { overflow: hidden; }

  /* Drawer header: small brand mark + a compact circular close button,
     both a fixed-height row so it never pushes the menu down. */
  .navPanel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 56px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 12px;
    border-bottom: 1px solid rgba(4, 44, 92, 0.08);
  }
  .navPanel__brand {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--color-navy-900);
  }
  .navPanel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(4, 44, 92, 0.12);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-navy-900);
    cursor: pointer;
    transition: background var(--trans-base), border-color var(--trans-base);
  }
  .navPanel__close svg { width: 14px; height: 14px; }
  .navPanel__close:hover { background: rgba(4, 44, 92, 0.06); border-color: rgba(4, 44, 92, 0.2); }
  .navPanel__close:focus-visible {
    outline: 2px solid var(--color-navy-700);
    outline-offset: 2px;
  }

  /* Scrollable nav region — the only part of the drawer that scrolls. */
  .nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1 1 auto;
    gap: 2px;
    margin: 0;
    padding: 8px 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 10px;
  }
  .nav__dropdown-toggle { justify-content: space-between; }
  .nav__caret { transition: transform 0.2s ease; font-size: 0.7rem; }
  .nav__item--dropdown.is-open .nav__caret { transform: rotate(180deg); }

  /* Programs accordion — a soft indented panel instead of a vertical
     line, height/opacity animated (no JS), fully hidden from tab order
     while closed via the delayed visibility flip. */
  .nav__dropdown {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    border-radius: 8px;
    background: rgba(4, 44, 92, 0.035);
    margin: 2px 0 2px 10px;
    padding: 0 6px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.22s ease,
                padding 0.28s ease, visibility 0s linear 0.28s;
  }
  .nav__item--dropdown.is-open .nav__dropdown {
    max-height: 360px;
    opacity: 1;
    visibility: visible;
    padding: 6px;
    transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease;
  }

  .nav__dropdown a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    color: var(--color-text-mid);
  }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible {
    color: var(--color-navy-900);
    background: rgba(4, 44, 92, 0.06);
  }
  .nav__dropdown a[aria-current="page"] {
    color: var(--color-navy-700);
    background: rgba(30, 136, 255, 0.1);
    font-weight: 700;
  }

  /* Footer — pinned below the scrollable nav, not stretched to fill it. */
  .nav__actions {
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 14px);
    border-top: 1px solid rgba(4, 44, 92, 0.08);
  }
  .btn--donate { width: 100%; justify-content: center; min-height: 54px; font-size: 0.95rem; }

  /* Hero → single column, card drops below the slider */
  .hero__grid { grid-template-columns: 1fr; padding-top: 8px; }

  .hero__content { align-items: center; text-align: center; max-width: 520px; margin: 0 auto; }
  .hero__heading { align-items: center; }
  .hero__accent  { margin: 20px auto 18px; }
  .hero__lead    { margin: 0 auto 28px; }
  .hero__features { justify-content: center; }
  .hero__feature { align-items: center; text-align: center; }

  .hero__visual { width: 100%; max-width: 640px; margin: 40px auto 0; }
  .slider__viewport { height: 380px; }
  /* Card drops into normal flow below the slider here, so the thumbnail
     is free to hang off the frame's bottom-right corner as usual */
  .hero__preview { width: 120px; height: 90px; right: 20px; bottom: -18px; }

  .hero__card {
    position: static;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 26px auto 0;
    align-items: center;
    text-align: center;
    padding: 28px 30px;
  }

  .hero__stats { margin-top: 56px; }

  /* About → stack, tame the overhanging accent/badge */
  .about__grid { grid-template-columns: 1fr; gap: 56px; }
  .about__media-main { max-width: 480px; margin: 0 auto; }
  .about__media-accent { left: 16px; bottom: -28px; width: 130px; height: 100px; }
  .about__media-badge { top: 20px; right: 16px; }
  .about__content { max-width: 560px; margin: 0 auto; }
  .about__lead { max-width: none; }

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

  .impact__layout { grid-template-columns: 1fr; gap: 40px; }
  .impact__header { text-align: center; margin-bottom: 32px; }
  .impact__intro { margin-left: auto; margin-right: auto; }
  .impact__stats { grid-template-columns: repeat(3, 1fr); }

  .impact__cta {
    align-items: center;
    text-align: center;
    padding: 36px 32px;
  }

  /* Stories → single column, small cards keep their row layout */
  .stories__grid { grid-template-columns: 1fr; }
  .story-card--large .story-card__media { height: 300px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ── 13b. DEDICATED MOBILE HERO (≤ 768px) ───────────────────────
   Not a shrunk desktop stack — the pieces are reordered so the
   headline, mission, and donate action are seen first:
   Heading → Lead → Donate → Slider → Mission card → Features → Stats
================================================================ */
@media (max-width: 768px) {

  .hero { padding: 28px 0 0; }
  .hero__container { padding: 0 20px 36px; }

  /* .hero__grid becomes the single flex column everything reorders
     within. .hero__content/.hero__visual generate no box of their
     own here, so their children become direct, reorderable items. */
  .hero__grid {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  .hero__content,
  .hero__visual { display: contents; }

  .hero__heading {
    order: 1;
    align-items: center;
    text-align: center;
    font-size: clamp(2.1rem, 9vw, 2.6rem);
  }
  .hero__accent { order: 1; margin: 16px auto 14px; }

  .hero__lead          { display: none; }
  .hero__lead--mobile {
    display: block;
    order: 2;
    max-width: 300px;
    margin: 0 auto 22px;
    text-align: center;
    font-size: 0.92rem;
  }

  .hero__mobile-donate {
    order: 3;
    display: inline-flex;
    margin: 0 auto 30px;
  }

  /* Slider — nearly full width, comfortable side margins from the
     container's own padding above; frame trimmed down a touch */
  .hero__slider-wrap {
    order: 4;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 12px;
  }
  .slider__viewport { height: 300px; border-radius: 14px; }
  .hero__preview { width: 100px; height: 76px; right: 14px; bottom: -14px; border-width: 3px; }

  /* Mission card — full-width, no longer overlapping the slider */
  .hero__card {
    order: 5;
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 0 30px;
    align-items: center;
    text-align: center;
    padding: 24px 26px;
  }

  /* Feature icons — one horizontal row, not a stack */
  .hero__features {
    order: 6;
    width: 100%;
    gap: 10px;
    margin-bottom: 6px;
  }
  .hero__feature { align-items: center; text-align: center; }

  .hero__stats {
    order: 7;
    margin-top: 34px;
    gap: 18px 20px;
  }
  .hero-stat { min-width: 74px; }
  .hero-stat__divider { display: none; }
}

/* ── 14. MOBILE RESPONSIVE (≤ 640px) ────────────────────────── */
@media (max-width: 640px) {

  :root { --section-pad: 56px; }

  /* Hero mobile — further refinement for small phones; ordering and
     row-layout rules live in the ≤768px block above */
  .hero__lead--mobile { max-width: 260px; font-size: 0.88rem; }

  .slider__viewport { height: 240px; }
  .hero__preview { width: 90px; height: 68px; right: 14px; bottom: -14px; border-width: 3px; }
  .hero__card { padding: 24px 20px; }
  .hero__card-text { font-size: 0.98rem; }

  .hero__stats { gap: 18px 20px; margin-top: 28px; }
  .hero-stat { min-width: 70px; }

  /* About mobile */
  .about__media-accent { display: none; }
  .about__media-badge { padding: 12px 16px; }
  .about__media-badge-value { font-size: 1.2rem; }
  .about__pillars { gap: 20px; }
  .hero-stat__divider { display: none; }

  /* Programs */
  .programs__grid { grid-template-columns: 1fr; }

  /* Impact */
  .impact__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .impact__cta { padding: 28px 20px; }

  /* Stories */
  .story-card--large .story-card__media { height: 220px; }
  .story-card--small { flex-direction: column; }
  .story-card--small .story-card__media { width: 100%; height: 160px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ── 15. REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }

  .fade-up {
    opacity: 1;
    transform: none;
  }

  .slider__track { transition: none; }
  .slider__slide img { transform: none; transition: none; }
}