/* =========================================================
   SUCH Foundation Ã¢â‚¬â€ "Sustain The Child Education" Foundation
   Stylesheet Ã¢â‚¬â€ mirrors the reference template's structure,
   recoloured to the SUCH brand palette pulled from the logo.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand colours (sampled directly from logo-Main.png) */
  --navy: #262262;
  --navy-deep: #1B1848;
  --blue: #1E93D1;
  --blue-dark: #17739F;
  --green: #7AAC48;
  --green-dark: #5C8735;
  --gold: #FDB414;
  --gold-dark: #E39A00;
  --red: #DC2128;

  /* Neutrals */
  --white: #FFFFFF;
  --cream: #F7F8FB;
  --ink: #221F3B;
  --ink-soft: #5B5A72;
  --line: #E7E7F0;

  /* Type
     Cinzel is loaded from Google Fonts (see <head> link) for all
     headings/display type. Candara is a licensed Microsoft font
     pre-installed on Windows/Office and cannot be self-hosted or
     pulled from Google Fonts, so it's referenced as a system font
     with Calibri/Segoe UI/Optima as close-metric fallbacks for
     visitors on macOS/Linux who don't have it installed. */
  --font-head: 'Cinzel', serif;
  --font-body: 'Candara', 'Calibri', 'Segoe UI', Optima, 'Century Gothic', sans-serif;

  /* Aliases (kept for consistency with brand-guideline naming) */
  --border-soft: var(--line);
  --grey-text: var(--ink-soft);

  /* Layout */
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --container: 1200px;
  --shadow-card: 0 20px 45px -20px rgba(38, 34, 98, 0.25);
  --shadow-soft: 0 10px 30px -12px rgba(38, 34, 98, 0.18);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0 0 .5em;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: 0.01em;
}

p {
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1em;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--green-dark);
  background: rgba(122, 172, 72, 0.12);
  padding: 6px 16px 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.eyebrow svg {
  width: 14px;
  height: 14px;
}

.section {
  padding: 96px 0;
}

.section-tight {
  padding: 64px 0;
}

@media (max-width: 780px) {
  .section {
    padding: 64px 0;
  }

  .section-tight {
    padding: 44px 0;
  }
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 12px 24px -10px rgba(253, 180, 20, 0.65);
}

.btn-gold:hover {
  background: var(--gold-dark);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
}

.btn-navy:hover {
  background: var(--navy-deep);
}

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.btn-outline-light:hover {
  background: var(--white);
  color: var(--navy);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =========================================================
   FLOATING PILL NAV
   Rounded, elevated nav bar that floats over the page Ã¢â‚¬â€
   mirrors the reference template's structure and interaction,
   recoloured to the SUCH brand palette.
   ========================================================= */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 20px 0;
  background: transparent;
}

.floating-nav {
  max-width: var(--container);
  margin-inline: auto;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 16px 40px -18px rgba(38, 34, 98, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 8px 22px;
  /* more left padding */
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-left: 4px;
  /* keeps logo off the edge */
}

.brand img {
  height: 48px;
  /* larger, more visible */
  width: auto;
  display: block;
}

.brand-word {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.18;
}

.brand-word span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.66rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  padding: 10px 16px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}

.nav-links a:hover:not(.active) {
  background: var(--cream);
}

.nav-links a.active {
  background: var(--green);
  color: var(--white);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* =========================================================
   NAV Ã¢â‚¬â€ Programs dropdown (simple, minimal)
   Flush against the trigger, left-aligned, plain stacked
   list Ã¢â‚¬â€ no icons, no grid, no CTA footer.
   ========================================================= */
.nav-item.has-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background .2s ease;
}

.nav-dropdown-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform .25s ease;
}

.nav-item.has-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(16, 20, 40, 0.14), 0 4px 12px rgba(16, 20, 40, 0.05);
  padding: 14px 8px;
  z-index: 40;

  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}

.nav-dropdown a {
  padding: 12px 18px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--navy);
  transition: background .16s ease, color .16s ease;
}

.nav-dropdown a:hover {
  background: var(--cream);
  color: var(--blue-dark);
}

/* ---- Mobile: always-expanded sub-menu, no toggle needed ----
   The accordion approach (tap a chevron to expand/collapse) kept
   breaking in practice â€” it depends on JS toggling a class, on a
   tap target landing precisely, and on that JS actually being the
   version deployed. Removing that dependency entirely: on mobile,
   Programs and Stories simply show their sub-links immediately,
   indented underneath, all the time. Programs/Stories has only
   6 and 2 items respectively, so this stays short and scannable,
   and there is nothing left here that can silently fail to open. */
@media (max-width: 980px) {
  .nav-item.has-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
  }

  /* No toggle to tap anymore â€” hide the chevron button on mobile. */
  .nav-dropdown-toggle {
    display: none;
  }

  .nav-dropdown {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    max-height: none;
    overflow: visible;
    padding: 2px 0 8px 14px;
    border-left: 2px solid var(--line);
    margin: 2px 0 4px 16px;
  }

  .nav-dropdown a {
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--ink-soft);
  }
}

.nav-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
}

.nav-phone .ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cream);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-phone .ic svg {
  width: 16px;
  height: 16px;
}

.nav-phone-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.btn-pill-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}

.btn-pill-icon:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
}

.btn-pill-icon .circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-pill-icon .circle svg {
  width: 15px;
  height: 15px;
}

.nav-toggle {
  display: none;
  background: var(--cream);
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .25s ease;
}

.nav-toggle:hover {
  background: var(--line);
}

.nav-toggle[aria-expanded="true"] {
  background: var(--navy);
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
  transition: background .2s ease .1s;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: top .2s ease .2s, transform .2s ease, background .2s ease .1s;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

/* Open state: bars merge into an X, turn white against the navy fill */
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before,
.nav-toggle[aria-expanded="true"] span::after {
  background: var(--white);
  transition: top .2s ease, transform .2s ease .2s, background .2s ease;
}

.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* =========================================================
   MOBILE NAV (â‰¤980px)
   Single consolidated block â€” this used to be split across three
   separate media queries added at different times ("original",
   "MOBILE NAV FIX", and a stray extra-small-phone block), which
   had started to drift out of sync with each other. Merged into
   one so there's only one place to edit going forward.
   ========================================================= */
@media (max-width: 980px) {
  .floating-nav {
    border-radius: 22px;
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-links {
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0 6px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
    display: none;
    gap: 2px;
  }

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

  /* Parent links */
  .nav-links>a,
  .nav-dropdown-trigger>a {
    display: block;
    padding: 13px 16px;
    font-size: 0.95rem;
    border-radius: 12px;
  }

  .nav-links a.active {
    background: var(--green);
    color: #fff;
  }

  .nav-phone {
    display: none;
  }

  /* Always-expanded sub-menus â€” see comment above .nav-dropdown-toggle
     for why this replaced the old tap-to-expand accordion. */
  .nav-dropdown-toggle {
    display: none !important;
  }

  .nav-item.has-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
    display: block;
  }

  .nav-dropdown {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 2px 0 10px 14px !important;
    border-left: 2px solid var(--line) !important;
    margin: 0 0 6px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .nav-dropdown a {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    color: var(--ink-soft) !important;
    border-radius: 10px !important;
    font-family: var(--font-body) !important;
  }

  .nav-dropdown a:hover {
    background: var(--cream) !important;
    color: var(--navy) !important;
  }

  /* Donate button: shrink it, don't hide it. .btn-pill-icon is
     shared with the footer's Subscribe button, so this stays
     scoped to .nav-actions â€” the footer button has its own rules
     further down and must never inherit this sizing. */
  .nav-actions .btn-pill-icon {
    padding: 5px 5px 5px 14px !important;
    gap: 8px;
  }

  .nav-actions .btn-pill-icon span {
    display: inline-flex !important;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .nav-actions .btn-pill-icon .circle {
    width: 30px;
    height: 30px;
  }

  .nav-actions .btn-pill-icon .circle svg {
    width: 12px;
    height: 12px;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* Extra-small phones â€” logo, Donate button and hamburger all
   need to shrink a touch further to avoid crowding each other. */
@media (max-width: 420px) {
  .brand img {
    height: 40px;
  }

  .nav-actions {
    gap: 6px;
  }

  .nav-actions .btn-pill-icon {
    padding: 4px 4px 4px 12px !important;
  }

  .nav-actions .btn-pill-icon span {
    font-size: 0.72rem;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  overflow: hidden;
  padding-top: 40px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 76px;
}

.hero-eyebrow {
  color: var(--red);
  background: rgba(220, 33, 40, 0.1);
}

.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  letter-spacing: -0.01em;
}

/* True small-phone tier (320Ã¢â‚¬â€œ400px): the clamp() floor of
   2.3rem is fine down to ~480px, but on the smallest phones it
   starts to feel oversized relative to the line length. */
@media (max-width: 400px) {
  .hero h1 {
    font-size: 2rem;
  }
}

.hero h1 .accent {
  color: var(--blue);
}

.hero-lede {
  font-size: 1.05rem;
  max-width: 480px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.hero-play {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--navy);
}

.hero-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.hero-stats {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 440px;
}

.hero-avatars {
  display: flex;
}

.hero-avatars span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--white);
  margin-left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .75rem;
  color: var(--white);
}

.hero-avatars span:first-child {
  margin-left: 0;
}

.hero-avatars span:nth-child(1) {
  background: var(--navy);
}

.hero-avatars span:nth-child(2) {
  background: var(--blue);
}

.hero-avatars span:nth-child(3) {
  background: var(--green);
}

.hero-avatars span:nth-child(4) {
  background: var(--gold);
  color: var(--navy);
}

.hero-stat-text strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.05rem;
}

.hero-stat-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.hero-visual {
  position: relative;
}

/* Hero image framed in the same provider-card language used across
   the site (rounded card, inset media, translucent badge, mark icon)
   Ã¢â‚¬â€ the "major upgrade" ties the hero visually to every card below it. */
.hero-frame {
  background: var(--white);
  border-radius: 32px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.hero-frame-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/4.6;
  background: var(--cream);
}

.hero-frame-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-frame .provider-badge {
  font-size: 12px;
  padding: 7px 14px;
}

.hero-frame .provider-mark {
  width: 38px;
  height: 38px;
  background: var(--green);
  color: var(--white);
  box-shadow: none;
}

.hero-badge {
  position: absolute;
  left: -22px;
  bottom: 34px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
}

.hero-badge .ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.hero-badge span {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Below ~500px the centred .hero-visual no longer has enough
   side margin for the badge's -22px overhang to clear the
   viewport edge, so it gets visually clipped. Pull it back
   inside the frame at that point instead. */
@media (max-width: 500px) {
  .hero-badge {
    left: 12px;
  }
}

.hero-star {
  position: absolute;
  top: 6%;
  right: 4%;
  width: 64px;
  height: 64px;
  color: var(--gold);
  animation: spin 14s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Floating "rating card" Ã¢â‚¬â€ mirrors the reference template's
   top-right review badge, recoloured to the SUCH gold/navy pair. */
.hero-rating-badge {
  position: absolute;
  top: 6%;
  right: -6%;
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  min-width: 190px;
}

.hero-rating-badge .stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
  margin-bottom: 10px;
}

.hero-rating-badge .stars svg {
  width: 15px;
  height: 15px;
}

.hero-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-avatars.small span {
  width: 28px;
  height: 28px;
  margin-left: -9px;
  font-size: 0.62rem;
}

.hero-rating-text {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
  font-family: var(--font-body);
}

.hero-rating-text strong {
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 0.95rem;
}

@media (max-width: 980px) {
  .hero-rating-badge {
    right: 4%;
    top: 5%;
  }
}

@media (max-width: 560px) {
  .hero-rating-badge {
    display: none;
  }
}

@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-star {
    animation: none;
  }
}

/* ---------- Image placeholders (hold real <img> tags Ã¢â‚¬â€ swap the src when real photos are ready) ---------- */
.ph {
  background: var(--cream);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- About ---------- */
.about {
  background: var(--white);
}

.about .container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.about-media {
  position: relative;
}

.about-media-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/4.6;
  box-shadow: var(--shadow-card);
}

.about-media-sub {
  position: absolute;
  width: 46%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-card);
  right: -8%;
  bottom: -10%;
}

.about-badge {
  position: absolute;
  top: 6%;
  left: -8%;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.about-badge strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--gold);
}

.about-badge span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Same overhang problem as .hero-badge: at narrow widths the
   -8% / -10% offsets push these past the container edge and
   get clipped. Bring them back inside below ~500px. */
@media (max-width: 500px) {
  .about-badge {
    left: 12px;
  }

  .about-media-sub {
    right: 12px;
    bottom: -6%;
  }
}

.about-tabs {
  display: flex;
  gap: 10px;
  margin: 22px 0 18px;
  flex-wrap: wrap;
}

.tab-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  transition: all .18s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn .35s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.check-list {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.92rem;
}

.check-list svg {
  width: 20px;
  height: 20px;
  color: var(--white);
  background: var(--green);
  border-radius: 50%;
  padding: 4px;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .about .container {
    grid-template-columns: 1fr;
  }

  .about-media {
    max-width: 440px;
    margin-inline: auto;
    margin-bottom: 40px;
  }
}

/* =========================================================
   OBJECTIVES Ã¢â‚¬â€ target-inspired layout
   ========================================================= */

.objectives-section {
  background: var(--cream);
  padding: 96px 0;
  overflow: hidden;
}

.objectives-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.objectives-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* Bullseye */
.obj-target {
  width: min(340px, 80vw);
  height: min(340px, 80vw);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      var(--gold) 0 12%,
      var(--white) 12% 22%,
      var(--navy) 22% 34%,
      var(--white) 34% 46%,
      var(--blue) 46% 58%,
      var(--white) 58% 70%,
      var(--green) 70% 82%,
      var(--cream) 82% 100%);
  box-shadow:
    0 24px 50px -20px rgba(38, 34, 98, 0.35),
    inset 0 0 0 1px rgba(38, 34, 98, 0.06);
  position: relative;
}

.obj-target::after {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(253, 180, 20, 0.35);
}

/* Floating objective Ã¢â‚¬Å“arrowsÃ¢â‚¬Â / chips around target */
.obj-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px 10px 10px;
  box-shadow: var(--shadow-soft);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.obj-chip .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.7rem;
  color: var(--white);
  flex-shrink: 0;
}

.obj-chip.c1 {
  top: 8%;
  right: 0;
}

.obj-chip.c1 .dot {
  background: var(--navy);
}

.obj-chip.c2 {
  top: 28%;
  left: -4%;
}

.obj-chip.c2 .dot {
  background: var(--blue);
}

.obj-chip.c3 {
  bottom: 30%;
  right: -2%;
}

.obj-chip.c3 .dot {
  background: var(--gold);
  color: var(--navy);
}

.obj-chip.c4 {
  bottom: 8%;
  left: 6%;
}

.obj-chip.c4 .dot {
  background: var(--green);
}

.objectives-copy .section-head {
  margin-bottom: 28px;
  text-align: left;
  max-width: none;
}

.obj-list {
  display: grid;
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.obj-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.obj-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(38, 34, 98, 0.15);
}

.obj-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}

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

.obj-icon.navy {
  background: var(--navy);
}

.obj-icon.blue {
  background: var(--blue);
}

.obj-icon.gold {
  background: var(--gold);
  color: var(--navy);
}

.obj-icon.green {
  background: var(--green);
}

.obj-item .text {
  flex: 1;
  min-width: 0;
}

.obj-item .label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.obj-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 900px) {
  .objectives-layout {
    grid-template-columns: 1fr;
  }

  .objectives-visual {
    min-height: 300px;
    order: -1;
  }

  .obj-list {
    max-height: none;
  }

  .obj-chip.c2 {
    left: 0;
  }

  .obj-chip.c3 {
    right: 0;
  }
}

@media (max-width: 560px) {
  .obj-chip {
    display: none;
    /* keep bullseye clean on small screens */
  }
}

/* =========================================================
   OUR VALUES Ã¢â‚¬â€ template-inspired grid
   ========================================================= */

.values-section {
  padding: 96px 0;
  background: var(--white);
}

.values-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.values-intro .eyebrow {
  margin-bottom: 14px;
}

.values-intro h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0 0 18px;
  line-height: 1.15;
}

.values-intro p {
  max-width: 34ch;
  font-size: 1.05rem;
  margin: 0;
  color: var(--ink-soft);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.val-card {
  border-radius: 22px;
  padding: 28px 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  background: var(--cream);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

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

.val-card .val-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line);
}

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

.val-card p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.val-card .val-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  padding-top: 14px;
  border-top: 2px solid rgba(38, 34, 98, 0.12);
}

/* Featured solid card */
.val-card.is-feature {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.val-card.is-feature .val-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.val-card.is-feature p {
  color: rgba(255, 255, 255, 0.88);
}

.val-card.is-feature .val-name {
  color: var(--gold);
  border-top-color: rgba(253, 180, 20, 0.35);
}

/* Optional: gold feature variant */
.val-card.is-feature-gold {
  background: var(--gold);
  border-color: var(--gold);
}

.val-card.is-feature-gold .val-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
}

.val-card.is-feature-gold p {
  color: rgba(27, 24, 72, 0.88);
}

.val-card.is-feature-gold .val-name {
  color: var(--navy);
  border-top-color: rgba(38, 34, 98, 0.2);
}

@media (max-width: 900px) {
  .values-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .values-intro h2 {
    font-size: clamp(1.9rem, 6vw, 2.5rem);
  }

  .values-intro p {
    max-width: none;
  }
}

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


/* =========================================================
   FEATURE CARDS Ã¢â‚¬â€ Mission / Vision triptych
   ========================================================= */
.feature-cards {
  padding: 90px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.card.card-light {
  background: var(--white);
  border-radius: 28px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}

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

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream);
  padding: 8px 16px;
  border-radius: 999px;
}

.arrow-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.arrow-circle svg {
  width: 16px;
  height: 16px;
}

.card.card-light:hover .arrow-circle {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.card-heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 26px;
}

.card-photo {
  margin-top: auto;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/10.5;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

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

/* Cycle brand accents across the pair/triptych */
.feature-grid .card:nth-child(1) .eyebrow-pill {
  background: rgba(253, 180, 20, 0.16);
  color: var(--gold-dark);
}

.feature-grid .card:nth-child(2) .eyebrow-pill {
  background: rgba(30, 147, 209, 0.12);
  color: var(--blue-dark);
}

.feature-grid .card:nth-child(3) .eyebrow-pill {
  background: rgba(122, 172, 72, 0.14);
  color: var(--green-dark);
}

.feature-grid .card:nth-child(1):hover .arrow-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.feature-grid .card:nth-child(2):hover .arrow-circle {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.feature-grid .card:nth-child(3):hover .arrow-circle {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

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

  .feature-cards {
    padding: 60px 0;
  }
}


/* ---------- Stats strip ---------- */
.stats-strip {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 44px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-item .ic {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-item:nth-child(1) .ic {
  background: rgba(38, 34, 98, 0.1);
  color: var(--navy);
}

.stat-item:nth-child(2) .ic {
  background: rgba(30, 147, 209, 0.12);
  color: var(--blue);
}

.stat-item:nth-child(3) .ic {
  background: rgba(122, 172, 72, 0.14);
  color: var(--green-dark);
}

.stat-item:nth-child(4) .ic {
  background: rgba(253, 180, 20, 0.16);
  color: var(--gold-dark);
}

.stat-item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.7rem;
  color: var(--navy);
}

.stat-item span {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

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

/* ---------- Dark services section ---------- */
.services {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 90% 0%, rgba(30, 147, 209, 0.25), transparent 60%);
}

.services .container {
  position: relative;
}

.services .section-head h2 {
  color: var(--white);
}

.services .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

.services-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.services-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.service-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 30px 26px;
  transition: transform .3s ease, background .3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.1);
}

.service-card .no {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: .05em;
}

.service-card .ic {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0 20px;
}

.service-card h3 {
  color: var(--white);
  font-size: 1.2rem;
}

.service-card p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.service-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
  background: var(--gold);
  padding: 9px 16px;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}

.service-card a:hover {
  background: var(--white);
  transform: translateY(-1px);
}

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

/* ---------- Reasons / why choose ---------- */
.reasons .container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.reasons-media {
  position: relative;
}

.reasons-media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/4.8;
  box-shadow: var(--shadow-card);
}

.reasons-list {
  display: grid;
  gap: 22px;
  margin-top: 10px;
}

.reason-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.reason-item .ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 33, 40, 0.1);
  color: var(--red);
}

.reason-item:nth-child(2) .ic {
  background: rgba(30, 147, 209, 0.12);
  color: var(--blue);
}

.reason-item:nth-child(3) .ic {
  background: rgba(122, 172, 72, 0.14);
  color: var(--green-dark);
}

.reason-item h4 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.reason-item p {
  margin: 0;
}

@media (max-width: 980px) {
  .reasons .container {
    grid-template-columns: 1fr;
  }

  .reasons-media {
    max-width: 420px;
    margin-inline: auto;
  }
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}

.contact-action {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.contact-action .ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-action strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 2px;
}

.contact-action span {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.contact-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.contact-info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.contact-info-card .ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.contact-info-card h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.contact-info-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.contact-info-card a {
  color: var(--blue-dark);
  font-weight: 600;
}

.amount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
}

.amount-chip {
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-body);
}

.amount-chip:hover,
.amount-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}

/* NOTE: .form-grid / .form-field were previously declared twice
   in this stylesheet (here, and again further down near the
   volunteer/donate forms). Because both used the same bare class
   names, the later declaration silently won the cascade and this
   earlier version was fully dead CSS. Removed here; the surviving
   definition (with its own mobile @media override) now lives in
   one place only â€” see ".form-grid" further down this file.
   The old .form-note that sat here was the same story â€” a dead
   leftover from the same pre-toggle form pattern. Removed; the
   live version (with its .show state) lives further down too. */

.bank-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.bank-pill {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
}

.bank-pill strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 4px;
}

.bank-pill span {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.map-frame {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
  aspect-ratio: 21 / 9;
  min-height: 240px;
}

.map-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {

  .contact-actions,
  .contact-info-row,
  .contact-split,
  .bank-strip {
    grid-template-columns: 1fr;
  }

  /* .contact-actions' -36px pull-up was tuned for a single wide
     row peeking above the hero above it; once it stacks into a
     tall single column that same offset risks overlapping the
     hero content. Ease it off. */
  .contact-actions {
    margin-top: -20px;
  }

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

/* ---------- Programs / gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.gallery-card .ph {
  aspect-ratio: 5/4;
  border-radius: 0;
  border: none;
}

.gallery-card-body {
  padding: 22px 22px 26px;
}

.gallery-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--white);
  background: var(--blue);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.gallery-card:nth-of-type(3n+1) .gallery-tag {
  background: var(--blue);
}

.gallery-card:nth-of-type(3n+2) .gallery-tag {
  background: var(--green-dark);
}

.gallery-card:nth-of-type(3n+3) .gallery-tag {
  background: var(--gold-dark);
  color: var(--navy);
}

.gallery-card h3 {
  font-size: 1.12rem;
}

.gallery-card a.more {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

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

@media (min-width: 901px) and (max-width: 1180px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* NOTE: the .provider-grid wrapper + responsive rules used to be
   duplicated here as a thin stub before the full PROVIDER CARDS
   system further down the file redefined it in one place. That
   left the same selector splitting its rules across two locations
   with no functional difference â€” just noise. Removed; see the
   "PROVIDER CARDS" section below for the single live definition. */

/* ---------- Trustee cards (provider-card + portrait photo) ---------- */
.trustee-card .provider-media {
  aspect-ratio: 4/4.4;
}

.trustee-card .trustee-role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--blue-dark);
  margin-bottom: 2px;
}

.trustee-org {
  font-size: 0.82rem;
  color: var(--grey-text);
}

/* ---------- Text-only provider-cards (no photo) get a small icon ---------- */
.thematic-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thematic-icon svg {
  width: 22px;
  height: 22px;
}

.thematic-icon-1 {
  background: rgba(30, 147, 209, 0.12);
  color: var(--blue);
}

.thematic-icon-2 {
  background: rgba(253, 180, 20, 0.16);
  color: var(--gold-dark);
}

.thematic-icon-3 {
  background: rgba(122, 172, 72, 0.14);
  color: var(--green-dark);
}

.thematic-icon-4 {
  background: rgba(220, 33, 40, 0.1);
  color: var(--red);
}

/* =========================================================
   FEATURE CARD CAROUSEL Ã¢â€ â€™ now a static column grid.
   This is the block that actually controls the "Explore How
   We Support Every Child" programs preview Ã¢â‚¬â€ it was missing
   from the section above, which is why the fixes there had no
   effect on it.
   ========================================================= */
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.carousel-nav {
  display: none;
}

/* no longer needed without a scroller */

.feature-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 24px;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.feature-card {
  flex: none;
  width: auto;
  height: 100%;
}

.feature-card .provider-media {
  aspect-ratio: 4/3.4;
}

.feature-card .provider-body {
  flex-grow: 1;
}

.feature-card:nth-of-type(4n+1) .provider-mark {
  background: var(--blue);
  color: var(--white);
}

.feature-card:nth-of-type(4n+2) .provider-mark {
  background: var(--gold);
  color: var(--navy);
}

.feature-card:nth-of-type(4n+3) .provider-mark {
  background: var(--green);
  color: var(--white);
}

.feature-card:nth-of-type(4n+4) .provider-mark {
  background: var(--red);
  color: var(--white);
}

.feature-card:nth-of-type(4n+1) .provider-badge {
  color: var(--blue-dark);
}

.feature-card:nth-of-type(4n+2) .provider-badge {
  color: var(--gold-dark);
}

.feature-card:nth-of-type(4n+3) .provider-badge {
  color: var(--green-dark);
}

.feature-card:nth-of-type(4n+4) .provider-badge {
  color: var(--red);
}

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

@media (max-width: 640px) {
  .feature-carousel {
    grid-template-columns: 1fr;
  }
}

/* ---------- Donate CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--green) 0%, var(--blue) 100%);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr auto;
  align-items: center;
  gap: 30px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cta-banner::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.cta-banner h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 10px;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 480px;
  margin-bottom: 0;
}

.cta-banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
}

/* Alternate colourways so repeated CTA banners across pages don't
   all read identically Ã¢â‚¬â€ still pulled from the same brand palette. */
.cta-banner.cta-gold {
  background: linear-gradient(120deg, var(--gold) 0%, var(--red) 100%);
}

.cta-banner.cta-navy {
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue-dark) 100%);
}

@media (max-width: 780px) {
  .cta-banner {
    grid-template-columns: 1fr;
    padding: 36px 26px;
    text-align: left;
  }
}

/* ---------- Events (provider-card language: inset media, 28px radius) ---------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.event-card {
  border-radius: 28px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}

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

.event-media {
  position: relative;
  margin: 12px 12px 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/11.5;
}

.event-media .ph {
  border-radius: 0;
  border: none;
}

.event-media img {
  transition: transform .5s ease;
}

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

.event-date {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--navy);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  font-family: var(--font-head);
  line-height: 1.1;
  box-shadow: var(--shadow-soft);
}

.event-date strong {
  display: block;
  font-size: 1.15rem;
  color: var(--red);
}

.event-date span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.event-body {
  padding: 20px 22px 22px;
  flex-grow: 1;
}

.event-meta {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.event-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-meta svg {
  width: 14px;
  height: 14px;
  color: var(--blue);
}

.event-body h3 {
  font-size: 1.1rem;
}

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

@media (min-width: 901px) and (max-width: 1180px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Events page Ã¢â‚¬â€ extends program-page language */
.event-featured {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: stretch;
  background: var(--navy);
  border-radius: 32px;
  overflow: hidden;
  color: var(--white);
}

.event-featured-copy {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-featured-copy .when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(253, 180, 20, 0.2);
  color: var(--gold);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  width: fit-content;
}

.event-featured-copy h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin: 0 0 12px;
}

.event-featured-copy p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  max-width: 46ch;
}

.event-featured-media {
  position: relative;
  min-height: 280px;
  background: var(--navy-deep);
}

.event-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.event-featured-media .date-block {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 18px;
  padding: 14px 18px;
  text-align: center;
  font-family: var(--font-head);
  line-height: 1.1;
  box-shadow: var(--shadow-soft);
}

.event-featured-media .date-block strong {
  display: block;
  font-size: 1.8rem;
}

.event-featured-media .date-block span {
  font-size: 0.85rem;
  font-weight: 600;
}

.events-modern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ev-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.ev-card-media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--cream);
  overflow: hidden;
}

.ev-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

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

.ev-card-date {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--white);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.05;
  box-shadow: 0 8px 20px rgba(38, 34, 98, 0.12);
}

.ev-card-date strong {
  display: block;
  font-size: 1.25rem;
}

.ev-card-date span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ev-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
}

.ev-card-badge.past {
  background: var(--navy);
  color: var(--white);
}

.ev-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ev-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.ev-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ev-card-meta svg {
  width: 14px;
  height: 14px;
  color: var(--green-dark);
}

.ev-card-body h3 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.ev-card-body p {
  font-size: 0.9rem;
  margin: 0 0 16px;
  flex-grow: 1;
}

.ev-card-link {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ev-card-link:hover {
  color: var(--navy);
}

.fade-item.is-hidden {
  display: none;
}

@media (max-width: 900px) {
  .event-featured {
    grid-template-columns: 1fr;
  }

  .event-featured-media {
    min-height: 220px;
  }

  .events-modern-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--cream);
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testi-card {
  background: var(--white);
  border-radius: 28px;
  padding: 30px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}

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

.testi-quote {
  color: var(--gold);
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
}

.testi-card p {
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.testi-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
}

.testi-card:nth-of-type(3n+1) .testi-avatar {
  background: var(--navy);
}

.testi-card:nth-of-type(3n+2) .testi-avatar {
  background: var(--blue-dark);
}

.testi-card:nth-of-type(3n+3) .testi-avatar {
  background: var(--green-dark);
}

.testi-card:nth-of-type(3n+1) .testi-quote {
  color: var(--gold);
}

.testi-card:nth-of-type(3n+2) .testi-quote {
  color: var(--blue);
}

.testi-card:nth-of-type(3n+3) .testi-quote {
  color: var(--red);
}

.testi-person strong {
  display: block;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 0.92rem;
}

.testi-person span {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

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

/* ---------- Partners ---------- */
.partners {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.partners-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.partner-logo {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink-soft);
  opacity: .6;
  font-size: 1.05rem;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-logo span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
}

/* ---------- Blog / news ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.blog-card {
  display: flex;
  flex-direction: column;
}

.blog-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/11;
  margin-bottom: 18px;
}

.blog-media .ph {
  border-radius: 0;
  border: none;
}

.blog-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
}

.blog-card h3 {
  font-size: 1.08rem;
}

.blog-card a.more {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--blue-dark);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

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

@media (min-width: 901px) and (max-width: 1180px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Footer  ---------- */
.site-footer {
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy-deep) 100%);
  /* darker so the colour logo pops */
  color: rgba(255, 255, 255, 0.72);
  padding: 0 0 28px;
}

/* Newsletter: heading left, form right â€” NO white card */
.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 24px 40px;
}

.footer-newsletter h3,
.footer-newsletter h4 {
  margin: 0;
  color: #ffffff !important;
  font-family: var(--font-head), 'Cinzel', Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 420px;
}

.newsletter-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.newsletter-form input {
  width: min(320px, 42vw);
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

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

.newsletter-form input:focus {
  outline: none;
  border-color: var(--gold);
}

/* NOTE: the newsletter button is <button class="btn-pill-icon
   btn-subscribe">. .btn-pill-icon already gives it the right look
   (navy fill, white text, gold circle â€” matches the desktop
   screenshot exactly), so .btn-subscribe doesn't need to override
   color at all. What it does need: a hard guarantee the "Subscribe"
   text can never be hidden again. A previous mobile rule scoped to
   .nav-actions was already fixed to stop hiding it â€” this adds a
   second, independent guarantee directly on the button itself, so
   the text surviving no longer depends on remembering to scope
   every future mobile rule correctly. */
.newsletter-form .btn-subscribe span {
  display: inline-flex !important;
  align-items: center;
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.btn-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Thin divider like HUN */
.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0;
}

/* Main block */
.footer-main {
  padding: 48px 24px 20px;
}

.footer-logo {
  margin-bottom: 40px;
}

.footer-logo img {
  display: block;
  height: 130px;
  width: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: 36px 40px;
  margin-bottom: 36px;
}

.footer-col h4 {
  margin: 0 0 18px;
  color: #ffffff !important;
  font-family: var(--font-head), 'Cinzel', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col p {
  margin: 0;
  max-width: 300px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

.footer-links {
  display: grid;
  gap: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
  text-decoration: none;
  transition: color 0.2s;
}

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

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

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

/* Social pills */
.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  border: none;
}

.footer-social a:hover {
  background: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-2px);
}

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

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 28px;
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
  display: flex;
  gap: 18px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

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

/* =========================================================
   FOOTER â€” MOBILE (â‰¤980px)
   Previously split across two separate blocks ("Responsive" and
   a later "FOOTER MOBILE POLISH" pass) that redeclared several of
   the same properties with slightly different values â€” whichever
   was lower in the file silently won. Merged into one so there's
   a single source of truth per breakpoint.
   ========================================================= */
@media (max-width: 980px) {
  .footer-newsletter {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    /* Keep the 24px horizontal inset from the base rule â€” only the
       vertical rhythm changes on mobile. */
    padding: 44px 24px 32px;
  }

  .footer-newsletter h3,
  .footer-newsletter h4 {
    max-width: none;
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }

  .newsletter-form {
    width: 100%;
  }

  .newsletter-form input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .footer-logo {
    margin-bottom: 28px;
  }

  .footer-logo img {
    height: 90px;
  }

  .footer-main {
    padding: 36px 24px 16px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
}

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

  .footer-logo {
    margin-bottom: 24px;
  }

  .footer-logo img {
    height: 78px;
  }

  .footer-col h4 {
    margin-bottom: 14px;
  }

  .footer-social {
    margin-top: 8px;
  }

  /* Input + button stay on ONE row, like the HUN reference â€” the
     button is short ("Subscribe" + a small circle) so it comfortably
     fits beside a shrinking input even on a narrow phone. Previously
     this stacked them and stretched the button to 100% width, which
     combined with the text-hiding bug (fixed above, and now also
     guaranteed via the .btn-subscribe span rule near .footer-divider)
     produced a wide, empty-looking outline with no visible label. */
  .newsletter-form {
    gap: 8px;
  }

  .newsletter-form input {
    padding: 0 16px;
    font-size: 0.88rem;
  }

  .newsletter-form .btn-subscribe {
    padding: 6px 6px 6px 14px;
    font-size: 0.82rem;
  }

  .newsletter-form .btn-subscribe .circle {
    width: 28px;
    height: 28px;
  }

  .newsletter-form .btn-subscribe .circle svg {
    width: 12px;
    height: 12px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 20px;
  }
}

/* Very narrow phones (iPhone SE etc.) â€” even a short "Subscribe"
   label can get tight beside a full-flex input. Drop just the
   input's placeholder handles itself, and let the button shrink
   its side padding a touch further rather than wrap or overflow. */
@media (max-width: 360px) {
  .newsletter-form .btn-subscribe span {
    font-size: 0.78rem;
  }

  .newsletter-form .btn-subscribe {
    padding: 5px 5px 5px 10px;
  }
}

/* ---------- Page header (interior pages) ---------- */
.page-header {
  background: var(--navy);
  color: var(--white);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 260px at 85% 0%, rgba(253, 180, 20, 0.18), transparent 60%);
}

.page-header .container {
  position: relative;
}

.page-header h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-bottom: 10px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-weight: 500;
}

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

.breadcrumb .sep {
  opacity: .6;
}

.breadcrumb .current {
  color: var(--gold);
}

/* ---------- Utility ---------- */
.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  color: var(--navy);
  background: var(--white);
  transition: all .18s ease;
}

.chip.active,
.chip:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  font-family: var(--font-body);
  /* 16px minimum Ã¢â‚¬â€ anything smaller triggers iOS Safari's
     automatic zoom-on-focus, which feels broken on mobile. */
  font-size: 1rem;
  background: var(--cream);
  transition: border-color .18s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
}

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

.form-note {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  display: none;
}

.form-note.show {
  display: block;
}

.form-note.success {
  background: rgba(122, 172, 72, 0.14);
  color: var(--green-dark);
}

.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}

.info-card h3 {
  font-size: 1.05rem;
}

.info-list {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.info-list .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 147, 209, 0.12);
  color: var(--blue);
}

.info-list strong {
  display: block;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 0.92rem;
}

.info-list span {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* map placeholder */
.map-ph {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/7;
  border: 1.5px dashed rgba(38, 34, 98, 0.28);
}

/* ---------- Timeline (About page - history) ---------- */
.timeline {
  position: relative;
  padding-left: 30px;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 36px;
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold);
}

.timeline-item strong {
  display: block;
  color: var(--blue-dark);
  font-family: var(--font-head);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.timeline-item h4 {
  margin-bottom: 6px;
}

/* value cards (about) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.value-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  border: 1px solid var(--line);
}

.value-card .ic {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-card:nth-child(1) .ic {
  background: rgba(38, 34, 98, 0.1);
  color: var(--navy);
}

.value-card:nth-child(2) .ic {
  background: rgba(30, 147, 209, 0.12);
  color: var(--blue);
}

.value-card:nth-child(3) .ic {
  background: rgba(122, 172, 72, 0.14);
  color: var(--green-dark);
}

.value-card:nth-child(4) .ic {
  background: rgba(220, 33, 40, 0.1);
  color: var(--red);
}

.value-card h4 {
  font-size: 1rem;
}

.value-card p {
  font-size: 0.88rem;
  margin: 0;
}

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

/* Two columns of icon + heading + full sentence gets cramped
   on true small phones Ã¢â‚¬â€ drop to a single column. */
@media (max-width: 480px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.team-card {
  text-align: center;
}

.team-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1/1.08;
  margin-bottom: 16px;
}

.team-card h4 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.team-card span {
  font-size: 0.82rem;
  color: var(--blue-dark);
  font-family: var(--font-body);
  font-weight: 600;
}

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

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

/* progress bars (impact) */
.progress-item {
  margin-bottom: 22px;
}

.progress-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
}

.progress-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--blue), var(--green));
  width: 0;
  transition: width 1.2s ease;
}

/* back to top */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .25s ease;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
    box-shadow: 0 8px 20px -6px rgba(38, 34, 98, 0.45);
  }

  .back-to-top svg {
    width: 17px;
    height: 17px;
  }
}

/* reveal animation (single orchestrated entrance per section) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* filter fade for event/program cards */
.fade-item {
  transition: opacity .25s ease, transform .25s ease;
}

.fade-item.hidden {
  display: none;
}

@media (max-width: 700px) {
  .about-badge {
    display: none;
  }
}

/* =========================================================
   PROVIDER CARDS Ã¢â‚¬â€ unified product-card system
   The canonical card component for the whole site: inset photo
   (12px margin, 20px radius) sitting inside a 28px-radius white
   card, a translucent badge, a circular "mark" icon, a subtitle
   line, and a footer row pairing a pill with a CTA button. Used
   directly by trustee/content cards, the programs carousel, and
   anywhere else a photo-led card appears.
   ========================================================= */
.providers-section {
  padding: 40px 0 90px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.provider-card {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.provider-card.is-static:hover {
  transform: none;
}

.provider-media {
  position: relative;
  margin: 12px 12px 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--cream);
}

.provider-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

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

.provider-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy);
}

.provider-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.provider-mark svg {
  width: 16px;
  height: 16px;
}

.provider-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.provider-body h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.3;
}

.provider-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.provider-body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 20px;
  flex-grow: 1;
}

.provider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.provider-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.provider-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.provider-cta svg {
  width: 13px;
  height: 13px;
}

.provider-cta:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .provider-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .provider-body {
    padding: 18px;
  }

  .provider-body h3 {
    font-size: 18px;
  }
}

/* =========================================================
   (Old horizontal-scroll FEATURE CARD CAROUSEL block removed Ã¢â‚¬â€
   it lived here and, appearing later in the file than the grid
   version above, was winning the cascade and forcing the
   carousel to keep scrolling instead of wrapping into rows.
   The grid version near the top of the file is now the only
   definition of .feature-carousel / .feature-card.)
   ========================================================= */

/* =========================================================
   AGROTON-STYLE COMPONENTS (About page + accents elsewhere)
   Stat pills, floating photo callouts, full-bleed quote
   banners with numbered badges, and numbered value tabs.
   ========================================================= */
.stat-pill-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.stat-pill {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  min-width: 92px;
}

.stat-pill strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--navy);
}

.stat-pill span {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.stat-pill.dark {
  background: var(--navy);
  border-color: var(--navy);
}

.stat-pill.dark strong {
  color: var(--gold);
}

.stat-pill.dark span {
  color: rgba(255, 255, 255, 0.7);
}

.agro-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.agro-hero-media {
  position: relative;
  aspect-ratio: 16/9;
}

.agro-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agro-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 34, 98, 0.15) 0%, rgba(38, 34, 98, 0.55) 100%);
}

.agro-hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 40px;
}

.agro-hero-copy h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  max-width: 640px;
}

.agro-hero-copy h1 em {
  font-style: italic;
  color: var(--gold);
}

.agro-hero-copy p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin-bottom: 22px;
}

.floating-callout {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  padding: 14px;
  max-width: 220px;
  box-shadow: var(--shadow-card);
}

.floating-callout-media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16/10;
  margin-bottom: 10px;
}

.floating-callout-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.floating-callout p {
  font-size: 0.76rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 780px) {
  .floating-callout {
    display: none;
  }

  .agro-hero-copy {
    padding: 24px;
  }
}

/* ---- dark split "impact" section ---- */
.impact-split {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 48px;
  color: var(--white);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
}

.impact-split h2 {
  color: var(--white);
  font-size: 1.7rem;
}

.impact-split p {
  color: rgba(255, 255, 255, 0.72);
}

.impact-chart {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 24px;
}

.impact-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  margin-bottom: 16px;
}

.impact-chart-bars .bar {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.impact-chart-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.impact-callout {
  margin-top: 18px;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.impact-callout strong {
  font-family: var(--font-head);
  font-size: 0.95rem;
  display: block;
}

.impact-callout span {
  font-size: 0.76rem;
}

.impact-avatars {
  display: flex;
}

.impact-avatars span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--navy);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
}

.impact-avatars span:first-child {
  margin-left: 0;
}

@media (max-width: 900px) {
  .impact-split {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
}

/* ---- full-bleed quote banner with numbered badges ---- */
.quote-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/8;
}

.quote-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quote-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(38, 34, 98, 0.85) 0%, rgba(38, 34, 98, 0.25) 65%, transparent 100%);
}

.quote-banner-copy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  max-width: 560px;
}

.quote-banner-copy h2 {
  color: var(--white);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
}

.num-badge-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.num-badge {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
}

.quote-banner-icons {
  position: absolute;
  left: 40px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  gap: 10px;
}

.quote-banner-icons span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-banner-icons svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 780px) {
  .quote-banner {
    aspect-ratio: 4/5;
  }

  .quote-banner-copy {
    padding: 24px;
    max-width: none;
  }

  .quote-banner-icons {
    left: 24px;
  }
}

/* ---- numbered value cards (3 across, one active/dark) ---- */
.value-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.value-num-card {
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.value-num-card:hover {
  transform: translateY(-4px);
}

.value-num-card .num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.value-num-card h4 {
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.value-num-card ul {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.value-num-card li {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.value-num-card.active {
  background: var(--navy);
  border-color: var(--navy);
}

.value-num-card.active .num {
  color: var(--gold);
}

.value-num-card.active h4 {
  color: var(--white);
}

.value-num-card.active li {
  color: rgba(255, 255, 255, 0.75);
  border-top-color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 900px) {
  .value-card-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   INSTAGRAM FEED
   Auto-syncing embed container (see js/instagram-feed.js /
   the widget script tag) with a styled fallback grid so the
   section still looks complete before the live feed is wired up.
   ========================================================= */
.instagram-section {
  background: var(--cream);
}

.instagram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.instagram-handle {
  display: flex;
  align-items: center;
  gap: 14px;
}

.instagram-handle .ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #DC2128, #FDB414, #1E93D1, #262262);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.instagram-handle strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--navy);
}

.instagram-handle span {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

/* NOTE: the Instagram fallback grid used to be styled here with a
   plain 6-up layout and a simple hover icon. It was later redesigned
   into a richer card treatment (.ig-handle avatar, gradient overlay
   caption, floating icon badge â€” see the "instagram-grid" section
   further down this file), but this older block was left in place
   underneath it, silently fighting the new one on every shared
   selector. Removed; the live styling is the later, fuller version. */

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

.photo-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cream);
  display: block;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

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

.photo-item.is-extra {
  display: none;
}

.photo-grid.is-expanded .photo-item.is-extra {
  display: block;
}

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

/* Page-specific: activity gallery + video (uses existing tokens) */
.activity-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.activity-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.activity-gallery .ph,
.activity-gallery img {
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background: var(--cream);
}

.activity-gallery .wide {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}

.video-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 16/9;
  position: relative;
}

.video-frame iframe,
.video-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 24px;
}

.video-placeholder .play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-placeholder .play svg {
  width: 24px;
  height: 24px;
}

/* NOTE: .meta-row / .meta-pill were duplicated verbatim further
   down this file (in the PROGRAM DETAIL PAGES section, with a
   slightly different .meta-row margin). Because that later
   declaration wins the cascade, this copy never actually
   rendered Ã¢â‚¬â€ removed rather than leaving dead CSS in place. */

@media (max-width: 900px) {
  .activity-split {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PROGRAM DETAIL PAGES Ã¢â‚¬â€ activities, galleries, portrait video cards
   ========================================================= */

.activity-block {
  margin-bottom: 72px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}

.activity-block:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 600;
}

.impact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 28px;
}

.impact-tile {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}

.impact-tile strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: 4px;
}

.impact-tile span {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.impact-tile.gold {
  background: rgba(253, 180, 20, 0.14);
  border-color: rgba(253, 180, 20, 0.35);
}

.impact-tile.gold strong {
  color: var(--gold-dark);
}

.impact-tile.green {
  background: rgba(122, 172, 72, 0.12);
  border-color: rgba(122, 172, 72, 0.3);
}

.impact-tile.green strong {
  color: var(--green-dark);
}

.impact-tile.blue {
  background: rgba(30, 147, 209, 0.1);
  border-color: rgba(30, 147, 209, 0.28);
}

.impact-tile.blue strong {
  color: var(--blue-dark);
}

/* Flyer / wide hero image */
.activity-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.activity-hero img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 520px;
  object-fit: cover;
  object-position: center top;
}

.activity-hero.flyer img {
  object-fit: contain;
  background: #e8f4fc;
  max-height: 640px;
}

/* Two-column split */
.split-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: start;
}

.receipt-card,
.media-card {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.receipt-card img,
.media-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Portrait video card Ã¢â‚¬â€ modern, matches provider-card language */
.video-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  gap: 22px;
  margin: 28px 0;
}

.video-card {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.video-card-media {
  position: relative;
  margin: 12px 12px 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  /* portrait reels */
  background: var(--navy-deep);
}

.video-card-media video,
.video-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card-media .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 24, 72, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-card-media video:not(:playing)+.play-overlay,
.video-card-media:has(video:not([src])) .play-overlay {
  opacity: 1;
}

.video-card-media .play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.video-card-media .play-btn svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.video-card-body {
  padding: 16px 18px 20px;
}

.video-card-body h4 {
  font-size: 1rem;
  margin: 0 0 4px;
}

.video-card-body p {
  font-size: 0.85rem;
  margin: 0;
  color: var(--ink-soft);
}

/* Landscape video (optional full-width) */
.video-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* NOTE: .photo-grid / .photo-item were duplicated verbatim here
   (identical to the definitions earlier in this file, just above
   .activity-split). Removed the repeat Ã¢â‚¬â€ nothing else in this
   block depended on it. */

.water-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-top: 20px;
}

.water-callout .ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.water-callout .ic svg {
  width: 22px;
  height: 22px;
}

.water-callout strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.water-callout p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

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

  .split-2 {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .video-card-row {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

/* =========================================================
   SOCIAL SUPPORT Ã¢â‚¬â€ template-style page layout
   ========================================================= */

.ss-hero {
  position: relative;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  min-height: min(72vh, 620px);
  background: var(--navy-deep);
}

.ss-hero-media {
  position: absolute;
  inset: 0;
}

.ss-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      rgba(27, 24, 72, 0.88) 0%,
      rgba(27, 24, 72, 0.55) 45%,
      rgba(27, 24, 72, 0.25) 100%);
}

.ss-hero-copy {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: 120px 24px 80px;
  color: var(--white);
}

.ss-hero-copy .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: var(--gold);
}

.ss-hero-copy h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  max-width: 16ch;
  margin-bottom: 16px;
}

.ss-hero-copy p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.ss-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Soft strip under hero */
.ss-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

.ss-pillar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.ss-pillar .ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ss-pillar h4 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.ss-pillar p {
  margin: 0;
  font-size: 0.88rem;
}

/* Feature story cards Ã¢â‚¬â€ large photo + caption (yoga Ã¢â‚¬Å“classesÃ¢â‚¬Â style) */
.ss-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ss-story {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.ss-story-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream);
  overflow: hidden;
}

.ss-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ss-story:hover .ss-story-media img {
  transform: scale(1.04);
}

.ss-story-media .tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
}

.ss-story-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ss-story-body h3 {
  font-size: 1.2rem;
  margin: 0 0 8px;
}

.ss-story-body p {
  font-size: 0.92rem;
  margin: 0 0 18px;
  flex-grow: 1;
}

.ss-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ss-story-meta span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  padding: 5px 10px;
  border-radius: 999px;
}

.ss-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
}

.ss-story-link:hover {
  color: var(--blue-dark);
}

/* Detail panel (Ramadan etc.) Ã¢â‚¬â€ clean split */
.ss-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.ss-detail-copy h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0 0 12px;
}

.ss-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0 0;
}

.ss-detail-stats div {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  border: 1px solid var(--line);
}

.ss-detail-stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--navy);
}

.ss-detail-stats span {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.ss-detail-visual {
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.ss-detail-visual img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #e8f4fc;
}

/* Stats band */
.ss-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.ss-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--navy);
  margin-bottom: 6px;
}

.ss-stat span {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Gallery mosaic */
.ss-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ss-gallery a {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cream);
  display: block;
}

.ss-gallery a:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.ss-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

@media (max-width: 980px) {

  .ss-pillars,
  .ss-story-grid {
    grid-template-columns: 1fr;
  }

  .ss-detail {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

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

  .ss-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .ss-gallery a:first-child {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16 / 10;
  }
}

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

  .ss-hero-copy {
    padding: 100px 20px 64px;
  }
}

/* =========================================================
   PROGRAM PAGES Ã¢â‚¬â€ Extracurricular / Parent / Teachers
   ========================================================= */

.prog-hero {
  padding: 72px 0 56px;
  background: linear-gradient(165deg, var(--cream) 0%, var(--white) 55%, rgba(122, 172, 72, 0.06) 100%);
  overflow: hidden;
}

.prog-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.prog-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
}

.prog-hero h1 em {
  font-style: normal;
  color: var(--blue);
}

.prog-hero-lede {
  font-size: 1.08rem;
  max-width: 46ch;
  margin-bottom: 28px;
}

.prog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.prog-hero-visual {
  position: relative;
}

.prog-hero-frame {
  border-radius: 32px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--navy-deep);
  box-shadow: var(--shadow-card);
}

.prog-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prog-float-chip {
  position: absolute;
  background: var(--white);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}

.prog-float-chip strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--gold-dark);
}

.prog-float-chip.tl {
  top: 8%;
  left: -8%;
}

.prog-float-chip.br {
  bottom: 12%;
  right: -6%;
}

/* Bento / mosaic feature grid */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.bento-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  position: relative;
}

.bento-card.dark {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.bento-card.dark h3,
.bento-card.dark h4 {
  color: var(--white);
}

.bento-card.dark p {
  color: rgba(255, 255, 255, 0.72);
}

.bento-card.gold {
  background: var(--gold);
  border-color: var(--gold);
}

.bento-card.gold h3,
.bento-card.gold h4 {
  color: var(--navy);
}

.bento-card.gold p {
  color: rgba(27, 24, 72, 0.75);
}

.bento-card.green {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.bento-card.green h3,
.bento-card.green h4 {
  color: var(--white);
}

.bento-card.media {
  padding: 0;
  min-height: 240px;
}

.bento-card.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.bento-card.media .overlay-label {
  position: relative;
  z-index: 1;
  margin: auto 16px 16px;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.94);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
}

.bento-span-7 {
  grid-column: span 7;
}

.bento-span-5 {
  grid-column: span 5;
}

.bento-span-4 {
  grid-column: span 4;
}

.bento-span-6 {
  grid-column: span 6;
}

.bento-span-8 {
  grid-column: span 8;
}

.bento-span-3 {
  grid-column: span 3;
}

.bento-span-12 {
  grid-column: span 12;
}

/* Numbered steps horizontal */
.step-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}

.step-item {
  position: relative;
  padding: 28px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.step-item::before {
  counter-increment: step;
  content: "0"counter(step);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 14px;
}

.step-item h4 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.step-item p {
  margin: 0;
  font-size: 0.9rem;
}

/* Quote strip */
.quote-strip {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.quote-strip blockquote {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  color: var(--white);
  font-weight: 500;
}

.quote-strip cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: normal;
  color: rgba(255, 255, 255, 0.65);
}

.quote-strip .badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Soft list cards */
.soft-list {
  display: grid;
  gap: 12px;
}

.soft-list a,
.soft-list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-weight: 600;
  color: var(--navy);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.soft-list a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateX(4px);
}

.soft-list .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.soft-list a:hover .num {
  background: rgba(255, 255, 255, 0.15);
  color: var(--gold);
}

@media (max-width: 900px) {
  .prog-hero-grid {
    grid-template-columns: 1fr;
  }

  .prog-hero-visual {
    max-width: 380px;
    margin-inline: auto;
  }

  .prog-float-chip.tl {
    left: 4%;
  }

  .prog-float-chip.br {
    right: 4%;
  }

  .bento-span-7,
  .bento-span-5,
  .bento-span-4,
  .bento-span-6,
  .bento-span-8,
  .bento-span-3 {
    grid-column: span 12;
  }

  .step-rail {
    grid-template-columns: 1fr 1fr;
  }

  .quote-strip {
    grid-template-columns: 1fr;
  }
}

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

/* =========================================================
   VOICES BY SUCH
   ========================================================= */

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.voice-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.voice-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
  overflow: hidden;
}

.voice-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.voice-card:hover .voice-card-media img {
  transform: scale(1.04);
}

.voice-card-media .tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 1;
}

.voice-card-media .icon-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--white);
}

.voice-card-media .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 24, 72, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.voice-card:hover .play-overlay {
  opacity: 1;
}

.voice-card-media .play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.voice-card-media .play-btn svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.voice-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.voice-card-body .eyebrow-mini {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 6px;
}

.voice-card-body h3 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  line-height: 1.3;
}

.voice-card-body p {
  font-size: 0.9rem;
  margin: 0 0 18px;
  flex-grow: 1;
  color: var(--ink-soft);
}

.voice-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.voice-card-actions .guest {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  padding: 6px 12px;
  border-radius: 999px;
}

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

@media (max-width: 560px) {
  .voices-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }
}

/* =========================================================
   INSTAGRAM FEED Ã¢â‚¬â€ The Academic Dr
   ========================================================= */

.ig-feed-section {
  padding: 96px 0;
  background: var(--cream);
}

.ig-feed-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.ig-feed-header .section-head {
  margin-bottom: 0;
  max-width: 520px;
}

.ig-handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.ig-handle .ig-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.ig-handle .ig-avatar svg {
  width: 18px;
  height: 18px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.instagram-post {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.instagram-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.instagram-post:hover img {
  transform: scale(1.06);
}

.instagram-post-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      transparent 40%,
      rgba(27, 24, 72, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px;
  color: var(--white);
}

.instagram-post:hover .instagram-post-overlay {
  opacity: 1;
}

.instagram-post-overlay span {
  font-size: 0.78rem;
  font-weight: 700;
}

.instagram-post-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.instagram-post-icon svg {
  width: 16px;
  height: 16px;
}

.ig-feed-cta {
  text-align: center;
  margin-top: 36px;
}

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

@media (max-width: 520px) {
  .instagram-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .instagram-post {
    border-radius: 16px;
  }
}

.map-frame {
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--cream);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 768px) {
  .map-frame {
    height: 350px;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  .map-frame {
    height: 300px;
  }
}

/* Portrait / phone video inside voice-card */
.voice-card-media--video {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 480px;
  overflow: hidden;
  background: var(--navy);
}

.voice-card-media--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fills frame, no white gaps */
  display: block;
}

/* If the clip is landscape instead, use this class on the same div */
.voice-card-media--video-landscape {
  aspect-ratio: 16 / 9;
  max-height: none;
}