/* ==========================================================================
   Arohanui Strings+ — Global stylesheet v3 · "Concert Hall"
   A premium cultural-institution design language.

   PALETTE — inspired by concert halls, violin varnish, brass and sheet music:
     Ivory stage      #FAF7F1 / #F3EDE2
     Charcoal ink     #23211C
     Fresh emerald    #087A4B → #05613D → #023D27
     Gold / brass     #BE9B4A · #D9BD72 · #8C6D2F

   TYPE — Playfair Display (display serif) · Cormorant Garamond (italic
   pull-quotes) · Open Sans (utility body).

   BREAKPOINTS (mobile-first): base <640 · ≥640 tablet · ≥1024 laptop ·
   ≥1280 desktop.  SPACING: one --section-space rhythm everywhere.
   ========================================================================== */

:root {
  /* Ink + stage */
  --ink: #23211C;
  --ink-soft: #565248;
  --ivory: #FFFDF8;
  --ivory-deep: #F8F1E5;
  --paper: #FFFFFF;

  /* Emerald hall */
  --primary: #087A4B;
  --emerald-deep: #05613D;
  --emerald-ink: #023D27;
  --primary-soft: rgba(8, 122, 75, 0.09);

  /* Brass + gold */
  --gold: #BE9B4A;
  --gold-bright: #D9BD72;
  --brass-deep: #8C6D2F;

  --hairline: rgba(35, 33, 28, 0.14);
  --hairline-light: rgba(250, 247, 241, 0.22);

  --font-heading: 'Playfair Display', serif;
  --font-quote: 'Cormorant Garamond', serif;
  --font-body: 'Open Sans', sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;

  --section-space: 4.5rem;
  --band-space: 3rem;
  --head-space: 2.75rem;
  --grid-gap: 1.5rem;
  --container-pad: 1.25rem;

  --nav-height: 76px;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-music: cubic-bezier(0.65, 0, 0.15, 1); /* slow swell, gentle release */

  --shadow-card: 0 1px 2px rgba(35,33,28,0.05), 0 12px 32px -12px rgba(35,33,28,0.18);
  --shadow-deep: 0 2px 6px rgba(2,61,39,0.25), 0 28px 60px -18px rgba(2,61,39,0.45);
}

@media (min-width: 640px) {
  :root { --section-space: 5.5rem; --band-space: 3.5rem; --head-space: 3.25rem; --grid-gap: 1.75rem; --container-pad: 2rem; }
}
@media (min-width: 1024px) {
  :root { --section-space: 7rem; --band-space: 4rem; --head-space: 3.75rem; --grid-gap: 2rem; --container-pad: 3rem; --nav-height: 88px; }
}
@media (min-width: 1280px) {
  :root { --section-space: 8.5rem; --band-space: 4.5rem; --head-space: 4.25rem; --grid-gap: 2.25rem; --container-pad: 4rem; }
}

/* ---------- Reset / base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 1rem); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 56px; /* mobile action bar */
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}

h1 { font-size: clamp(2.8rem, 7.5vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }

h1 em, h2 em {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
}

p { margin: 0 0 var(--space-2); max-width: 65ch; }
p:last-child { margin-bottom: 0; }
p.wide { max-width: none; }
.text-muted { color: var(--ink-soft); }
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46rem;
}

ul.checklist { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
ul.checklist li { margin-bottom: 0.65rem; padding-left: 0.3rem; }
ul.checklist li::marker { color: var(--gold); content: "— "; }

a { color: var(--primary); }

::selection { background: var(--primary); color: var(--ivory); }

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

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

/* ---------- Layout ---------- */

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--container-pad); }
.container-wide { max-width: 1440px; }

.section { position: relative; padding-block: var(--section-space); }
.band { position: relative; padding-block: var(--band-space); }
.section-divider { border-top: 1px solid var(--hairline); }
.bg-surface { background: var(--ivory-deep); }

.section-head { margin-bottom: var(--head-space); max-width: 52rem; }
.section-head > *:last-child { margin-bottom: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 var(--space-3);
}
.eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--gold); flex-shrink: 0; }
.eyebrow.on-dark { color: var(--gold-bright); }
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after { content: ""; width: 2.6rem; height: 1px; background: var(--gold); flex-shrink: 0; }

.accent-rule { width: 4rem; height: 2px; background: var(--gold); margin-top: var(--space-3); }

.grid { display: grid; gap: var(--grid-gap); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

.feature-row { display: grid; gap: calc(var(--grid-gap) * 1.25); align-items: center; }
.feature-row > * { min-width: 0; }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

/* ---------- Decorative systems ---------- */

/* Sound-wave hairline divider */
.wave-divider { display: block; width: 100%; height: 28px; overflow: visible; }
.wave-divider path { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.55; }
.wave-divider.on-dark path { stroke: var(--gold-bright); opacity: 0.4; }

/* Musical staff motif — five hairlines that draw in on scroll */
.staff { display: block; width: 100%; overflow: visible; }
.staff line { stroke: var(--ink); stroke-width: 1; opacity: 0.16; }
.staff.on-dark line { stroke: var(--ivory); opacity: 0.22; }
/* dash lengths are set by JS so the no-JS state stays solid */
.staff.played line { stroke-dashoffset: 0 !important; }
.staff line { transition: stroke-dashoffset 1.6s var(--ease-music); }
.staff line:nth-child(2) { transition-delay: 0.08s; }
.staff line:nth-child(3) { transition-delay: 0.16s; }
.staff line:nth-child(4) { transition-delay: 0.24s; }
.staff line:nth-child(5) { transition-delay: 0.32s; }
.staff-wrap { padding-block: var(--space-4); }

/* String resonance hairline — light travels along a string */
.string-line { position: relative; height: 1px; background: var(--hairline); overflow: visible; }
.string-line::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 3px; width: 18%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
}
.string-line.resonate::after { animation: stringLight 2.6s var(--ease-music) forwards; }
@keyframes stringLight {
  0% { transform: translateX(-30%); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(560%); opacity: 0; }
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-block;
  padding: 1.05rem 2.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-music), border-color 0.45s var(--ease-music),
              box-shadow 0.45s var(--ease-music), transform 0.45s var(--ease-music);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8,122,75,0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-music);
  z-index: 0;
}
.btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-music) 0.08s;
  z-index: 1;
}
.btn:hover,
.btn-outline:hover,
.on-dark .btn-outline:hover,
.btn-outline.on-dark:hover,
#main-nav.nav-scrolled .nav-cta:hover {
  color: var(--ivory);
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
  text-shadow: 0 1px 2px rgba(2,61,39,0.55);
}
.btn:hover::before, .btn:hover::after { transform: scaleX(1); }
.btn > * { position: relative; z-index: 2; }
.btn { z-index: 0; }
.btn span { isolation: isolate; }

.btn-outline {
  background: transparent;
  border-color: var(--brass-deep);
  color: var(--ink);
}
.btn-outline::before { background: rgba(8,122,75,0.5); }
.btn-outline:hover { color: var(--emerald-ink); border-color: var(--primary); text-shadow: none; }

.on-dark .btn-outline, .btn-outline.on-dark {
  border-color: var(--gold);
  color: var(--ivory);
}
.on-dark .btn-outline::before, .btn-outline.on-dark::before { background: var(--gold); }
.on-dark .btn-outline:hover, .btn-outline.on-dark:hover { color: var(--emerald-ink); text-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.text-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.4s var(--ease-music), color 0.3s ease;
}
.text-link:hover { background-size: 35% 1px; color: var(--brass-deep); }

/* ---------- Navigation ---------- */

#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.5s var(--ease-music), box-shadow 0.5s var(--ease-music),
              border-color 0.5s var(--ease-music);
  border-bottom: 1px solid transparent;
}
#main-nav nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding-inline: var(--container-pad);
  max-width: 1440px;
  margin-inline: auto;
}

.nav-logo { height: 2.5rem; width: auto; transition: filter 0.5s var(--ease-music); }

/* Over the dark hero: light glass + inverted logo */
#main-nav { color: var(--ivory); }
#main-nav .nav-logo { filter: brightness(0) invert(1); }
#main-nav .nav-link { color: rgba(250,247,241,0.85); }
#main-nav .nav-link:hover { color: var(--gold-bright); }
#main-nav .nav-link.active { color: #7ADBA7; }
#menu-toggle { color: var(--ivory); }

/* After scroll: ivory glass + ink text */
#main-nav.nav-scrolled {
  background: rgba(250, 247, 241, 0.88);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--hairline);
  box-shadow: 0 10px 40px -18px rgba(35,33,28,0.25);
}
#main-nav.nav-scrolled .nav-logo { filter: none; }
#main-nav.nav-scrolled .nav-link { color: var(--ink); }
#main-nav.nav-scrolled .nav-link:hover { color: var(--brass-deep); }
#main-nav.nav-scrolled .nav-link.active { color: var(--primary); }
#main-nav.nav-scrolled ~ * #menu-toggle, #main-nav.nav-scrolled #menu-toggle { color: var(--ink); }

.nav-links { display: none; align-items: center; gap: 2.4rem; }

.nav-link {
  position: relative;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav-link.active { font-weight: 700; }
.nav-link::after {
  content: "";
  position: absolute;
  right: 0.22em;
  bottom: -0.55rem;
  left: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.nav-link.active::after { transform: scaleX(1); }

.nav-cta { padding: 0.75rem 1.7rem; font-size: 0.7rem; border-color: var(--gold); background: transparent; color: var(--ivory); }
.nav-cta::before { background: rgba(190,155,74,0.5); }
.nav-cta:hover { color: var(--emerald-ink); text-shadow: none; }
#main-nav.nav-scrolled .nav-cta { background: var(--primary); border-color: var(--primary); color: var(--ivory); }
#main-nav.nav-scrolled .nav-cta:hover { color: var(--ivory); }

#menu-toggle {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0.5rem;
  margin-right: 0.75rem;
  z-index: 60; cursor: pointer;
  transition: color 0.4s ease;
}
#main-nav.nav-scrolled #menu-toggle { color: var(--ink); }
#menu-toggle .material-icons { font-size: 30px; line-height: 1; }
body.menu-open #menu-toggle { color: var(--ivory); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: linear-gradient(160deg, var(--emerald-ink), var(--emerald-deep));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 var(--container-pad);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-music);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  position: absolute;
  top: 1.35rem;
  right: calc(var(--container-pad) + 0.75rem);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  background: rgba(250,247,241,0.08);
  border: 1px solid var(--hairline-light);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(250,247,241,0.12);
  outline: none;
}
.mobile-menu-close .material-icons { font-size: 1.85rem; line-height: 1; }
.mobile-nav-link {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 2.3rem;
  color: var(--ivory);
  text-decoration: none;
  margin-bottom: 1.4rem;
  transition: color 0.3s ease, transform 0.3s var(--ease-music);
}
.mobile-nav-link:hover { color: var(--gold-bright); transform: translateX(6px); }
.mobile-nav-link.is-donate { color: var(--gold); font-style: italic; font-family: var(--font-quote); font-weight: 500; }
.mobile-nav-link.active { color: #7ADBA7; }
.mobile-nav-link.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.2rem;
  left: 0;
  height: 2px;
  background: currentColor;
}

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex;
  background: var(--ivory);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 30px rgba(35,33,28,0.12);
}
.mobile-bar a {
  flex: 1; padding: 1rem 0.5rem; text-align: center;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
}
.mobile-bar .bar-donate { background: var(--primary); color: var(--ivory); }
.mobile-bar .bar-contact { background: var(--ivory); color: var(--primary); }

/* ---------- Cinematic hero (homepage) ---------- */

.cine-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--emerald-ink);
  color: var(--ivory);
}
.cine-media { position: absolute; inset: -6% 0; z-index: 0; }
.cine-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cine-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(2,61,39,0.88) 0%, rgba(2,61,39,0.68) 36%, rgba(2,61,39,0.24) 68%, rgba(2,61,39,0.1) 100%),
    linear-gradient(to top, rgba(2,61,39,0.88) 0%, rgba(2,61,39,0.48) 38%, rgba(2,61,39,0.12) 68%, rgba(2,61,39,0.28) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(190,155,74,0.14), transparent 55%);
}
.cine-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: calc(var(--nav-height) + clamp(1.5rem, 5svh, 4rem));
  padding-bottom: clamp(6.25rem, 12svh, 8.5rem);
}
.cine-content h1 {
  color: var(--ivory);
  font-size: clamp(2.65rem, min(7vw, 9svh), 6.5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1rem, 2.5svh, var(--space-3));
  max-width: 13ch;
}
.cine-content h1 em { color: var(--gold-bright); }
.cine-content .hero-sub {
  font-size: clamp(0.92rem, 1.25vw, 1.15rem);
  color: rgba(250,247,241,0.9);
  max-width: 44rem;
  line-height: 1.55;
  text-shadow: 0 2px 18px rgba(2,61,39,0.8);
}
.cine-content .hero-sub-secondary { margin-top: clamp(0.65rem, 1.5svh, var(--space-2)); }
.cine-content .hero-actions { margin-top: clamp(1rem, 2.5svh, var(--space-3)); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.cine-content .hero-secondary {
  font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--ivory);
  background-image: linear-gradient(var(--gold), var(--gold));
}
.cine-content .hero-secondary:hover { color: var(--gold-bright); }

.cine-staff { position: absolute; left: 0; right: 0; bottom: 4.25rem; z-index: 2; opacity: 0.9; }

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(250,247,241,0.6);
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 2.6rem;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cueDrop 2.6s var(--ease-music) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(0.8rem); opacity: 0; }
}

/* Keep the complete hero composition visible on short laptop and phone screens. */
@media (max-height: 760px) {
  .cine-content {
    padding-top: calc(var(--nav-height) + 1rem);
    padding-bottom: 5.5rem;
  }
  .cine-content h1 {
    font-size: clamp(2.35rem, min(6.2vw, 7.5svh), 4.5rem);
    margin-bottom: 0.85rem;
  }
  .cine-content .hero-sub {
    font-size: clamp(0.84rem, 1.15vw, 1rem);
    line-height: 1.42;
  }
  .cine-content .hero-sub-secondary { margin-top: 0.55rem; }
  .cine-content .hero-actions { margin-top: 0.85rem; }
  .cine-content .btn { padding: 0.72rem 1.25rem; }
}

@media (max-width: 639px) {
  .cine-hero { min-height: 100svh; }
  .cine-content {
    padding-top: calc(var(--nav-height) + 1.25rem);
    padding-bottom: 5.75rem;
  }
  .cine-content h1 {
    font-size: clamp(2.35rem, 12vw, 3.35rem);
    max-width: 11ch;
  }
  .cine-content .hero-sub {
    font-size: clamp(0.86rem, 3.7vw, 0.98rem);
    line-height: 1.48;
    max-width: 36rem;
  }
  .cine-content .eyebrow { margin-bottom: 0.75rem; }
  .cine-staff { bottom: 3.6rem; }
  .scroll-cue { bottom: 0.75rem; }
  .scroll-cue::after { height: 1.8rem; }
}

@media (max-width: 639px) and (max-height: 700px) {
  .cine-content {
    padding-top: calc(var(--nav-height) + 0.75rem);
    padding-bottom: 4.75rem;
  }
  .cine-content h1 { font-size: clamp(2.05rem, 10.5vw, 2.75rem); }
  .cine-content .hero-sub { font-size: 0.8rem; line-height: 1.36; }
  .cine-content .eyebrow { font-size: 0.6rem; margin-bottom: 0.55rem; }
  .cine-content .hero-actions { margin-top: 0.65rem; }
  .cine-content .btn { padding: 0.62rem 1rem; }
}

/* ---------- Inner page hero — dark editorial band ---------- */

.page-hero {
  position: relative;
  background:
    radial-gradient(110% 130% at 85% -10%, rgba(217,189,114,0.14), transparent 55%),
    linear-gradient(105deg, rgba(2,61,39,0.86) 0%, rgba(2,61,39,0.65) 48%, rgba(2,61,39,0.28) 100%),
    var(--hero-image, linear-gradient(165deg, var(--emerald-deep), var(--emerald-ink) 70%));
  background-size: cover;
  background-position: center;
  color: var(--ivory);
  padding-block: calc(var(--nav-height) + var(--section-space)) calc(var(--section-space) + 3rem);
  overflow: hidden;
}
.page-hero.hero-about {
  --hero-image: url("../images/2026 April Holiday Programme everyone circle outside.jpg");
  background-position: center 54%;
}
.page-hero.hero-programme {
  --hero-image: url("../images/2025 Hutt Holiday Programme.jpg");
  background-position: center 53%;
}
.page-hero.hero-contact {
  --hero-image: url("../images/2026 AHP flute duo with Woodwind Programme Leader Grace Barron.jpg");
  background-position: center 48%;
}
.page-hero.hero-donate {
  --hero-image: url("../images/2025 JeMaine and Stella in the wings.jpg");
  background-position: center 40%;
}
.page-hero.hero-policy { --hero-image: url("../images/2025 Hutt HP Behind orchestra portrait.JPG"); }
.page-hero h1 { color: var(--ivory); font-weight: 500; margin-bottom: var(--space-3); max-width: 16ch; }
.page-hero .lede { color: rgba(250,247,241,0.78); margin-bottom: 0; }
.page-hero .eyebrow { color: var(--gold-bright); }
.page-hero .eyebrow::before { background: var(--gold); }
.page-hero .hero-staff { position: absolute; left: 0; right: 0; bottom: 1.6rem; opacity: 0.8; }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 15% 110%, rgba(8,122,75,0.55), transparent 60%);
  pointer-events: none;
}

/* ---------- Trust strip / badges ---------- */

.trust-strip { background: var(--ivory); border-block: 1px solid var(--hairline); position: relative; z-index: 2; }
.trust-strip .container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  padding-block: var(--band-space);
}
.trust-item { border-top: 1px solid var(--gold); padding-top: 1rem; }
.trust-item .value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  color: var(--primary);
}

/* The four qualities families experience first — warm, clear and intentionally prominent. */
.values-highlight {
  background: linear-gradient(105deg, #FFF8DF, #F4E9C5 48%, #E5F0E8);
  border-bottom: 1px solid rgba(140,109,47,0.22);
}
.values-highlight .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(140,109,47,0.18);
  padding-inline: 0;
}
.value-highlight {
  background: rgba(255,253,248,0.88);
  padding: 1.5rem var(--container-pad);
}
.value-highlight h2 {
  color: var(--primary);
  font-family: var(--font-quote);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-style: italic;
  margin-bottom: 0.35rem;
}
.value-highlight p { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.55; }

.video-ready {
  display: none;
}
.trust-item .label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.4rem; }

.trust-badges { background: var(--ivory-deep); border-top: 1px solid var(--hairline); }
.trust-badges .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem clamp(2rem, 5vw, 4.5rem);
  padding-block: var(--space-3);
  align-items: center;
  justify-content: center;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.trust-badges strong { color: var(--brass-deep); font-weight: 700; }
.trust-badges span { white-space: nowrap; }

/* ---------- Cards ---------- */

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform 0.55s var(--ease-music), box-shadow 0.55s var(--ease-music);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(35,33,28,0.06), 0 30px 60px -20px rgba(35,33,28,0.28); }
.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card .text-link { display: inline-block; margin-top: 0.9rem; font-size: 0.86rem; }
.contact-link-grid .card {
  display: flex;
  flex-direction: column;
}
.contact-link-grid .card p:not(.contact-card-actions) {
  margin-bottom: var(--space-2);
}
.contact-link-grid .contact-card-actions {
  margin-top: auto;
  margin-bottom: 0;
  min-height: 2.5rem;
  align-self: flex-start;
}
.contact-link-grid .contact-card-actions .text-link {
  margin-top: 0;
}
.evidence-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-card);
}
.evidence-card h3 {
  margin-bottom: 0.85rem;
}
.evidence-card p:last-of-type {
  margin-bottom: var(--space-3);
}
.evidence-card .checklist {
  color: var(--brass-deep);
  font-weight: 600;
}
.policy-layout {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
.policy-meta {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.policy-meta p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 0.8rem;
  max-width: none;
}
.policy-content {
  max-width: 48rem;
}
.policy-content section {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.policy-content section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.policy-content h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  margin-bottom: var(--space-2);
}
.policy-content p,
.policy-content li {
  color: var(--ink-soft);
}
.policy-content ul,
.policy-content ol {
  margin: var(--space-2) 0 0;
  padding-left: 1.35rem;
}
.policy-content li {
  margin-bottom: 0.65rem;
  padding-left: 0.25rem;
}
.policy-content li::marker {
  color: var(--gold);
  font-weight: 700;
}
.what-grid .card {
  display: flex;
  flex-direction: column;
}
.what-grid .card p {
  margin-bottom: var(--space-2);
}
.what-grid .card .text-link {
  margin-top: auto;
  align-self: flex-start;
}

.photo-card { position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.photo-card img {
  width: 100%; height: 23rem; object-fit: cover;
  transition: transform 1.4s var(--ease-music), filter 1.4s var(--ease-music);
  will-change: transform;
}
.photo-card:hover img { transform: scale(1.05); }
.photo-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,61,39,0.88), rgba(2,61,39,0.2) 55%, transparent);
  pointer-events: none;
}
.photo-card .caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  min-height: 12.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-3);
  pointer-events: none;
}
.photo-card .caption p { color: rgba(250,247,241,0.92); margin: 0; }
.photo-card .caption .quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.45;
}
.photo-card .caption .who {
  color: var(--gold-bright);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 0.8rem;
}

.feature-img { width: 100%; height: 25rem; object-fit: cover; box-shadow: var(--shadow-deep); }

/* Editorial offset: image plates step out of the grid on laptop+ */
@media (min-width: 1024px) {
  .feature-row .plate-up { margin-top: -3.5rem; }
  .feature-row .plate-down { margin-bottom: -3.5rem; }
}

/* Image mask reveal */
.mask-reveal { clip-path: inset(0 0 0 0); }
.js .mask-reveal:not(.revealed) { clip-path: inset(0 100% 0 0); }
.mask-reveal { transition: clip-path 1.3s var(--ease-music); }

/* ---------- Dark bands ---------- */

.impact-band {
  position: relative;
  background:
    radial-gradient(120% 140% at 90% -20%, rgba(190,155,74,0.14), transparent 55%),
    linear-gradient(170deg, var(--primary), var(--emerald-ink) 75%);
  color: var(--ivory);
  overflow: hidden;
}
.impact-band .container { position: relative; z-index: 2; padding-block: var(--section-space); }
.impact-band h2 { color: var(--ivory); font-weight: 500; }
.impact-band p { color: rgba(250,247,241,0.78); }
.impact-band a { color: var(--gold-bright); }
.impact-band .text-link { color: var(--gold-bright); background-image: linear-gradient(var(--gold), var(--gold)); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--grid-gap); }
.stat .stat-number {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3.4rem, 7vw, 5.8rem);
  line-height: 1;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  display: block;
  border-top: 1px solid var(--hairline-light);
  padding-top: 1.1rem;
}
.stat .stat-label {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(250,247,241,0.65);
}

/* Pull-quote band — programme note styling */
.quote-band {
  position: relative;
  background: linear-gradient(165deg, var(--emerald-deep), var(--emerald-ink));
  padding-block: calc(var(--band-space) + 0.85rem);
  text-align: center;
  overflow: hidden;
}
.quote-band::before {
  content: "\201C";
  position: absolute;
  top: -0.18em; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-quote);
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 1;
  color: rgba(190,155,74,0.14);
  pointer-events: none;
}
.quote-band .rule { width: 3.2rem; height: 1px; background: var(--gold); margin: 0 auto var(--space-3); }
.quote-band p {
  position: relative;
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  color: var(--ivory);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.42;
  margin: 0 auto;
  max-width: 54rem;
  padding-inline: var(--container-pad);
}
.quote-band .attribution {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: var(--space-3);
}

/* ---------- Values / guidelines ---------- */

.values-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.values-grid .value-card { height: 100%; }
.value-card h3 span { display: block; margin-top: 0.35rem; font-family: var(--font-body); font-size: 0.68em; font-style: normal; color: var(--ink-soft); }
.value-card .value-translation { color: var(--brass-deep); font-style: italic; margin-bottom: var(--space-2); }
.person-image-placeholder { width: calc(100% + var(--space-3) * 2); height: 16rem; display: grid; place-items: center; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3); background: linear-gradient(145deg, var(--surface), var(--ivory)); border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }

.value-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform 0.55s var(--ease-music), box-shadow 0.55s var(--ease-music);
}
.value-card:hover { transform: translateY(-6px); }
.value-card h3 {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--primary);
  margin-bottom: 0.6rem;
}
.value-card h3::after { content: ""; display: block; width: 2rem; height: 1px; background: var(--gold); margin-top: 0.7rem; }
.value-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ---------- Communities ---------- */

.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.community {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold);
  padding: var(--space-3);
  transition: transform 0.45s var(--ease-music), box-shadow 0.45s var(--ease-music);
}
.community:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.community h3 { font-size: 1.18rem; margin-bottom: 0.3rem; }
.community p { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }

/* ---------- Partner logo wall ---------- */

.logo-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.logo-wall .logo-cell {
  background: var(--paper);
  min-height: 6.75rem;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(0.92rem, 1.3vw, 1.08rem);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.logo-wall .logo-cell:hover { color: var(--brass-deep); background: var(--ivory); box-shadow: inset 0 -2px 0 var(--gold); }
.logo-wall .logo-cell img { max-height: 4.25rem; max-width: 88%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.78; transition: filter 0.4s, opacity 0.4s, transform 0.4s var(--ease-music); }
.logo-wall .logo-cell:hover img { filter: grayscale(0); opacity: 1; }
.home-sponsor-wall .logo-cell img { max-height: 5rem; filter: none; opacity: 1; }

/* ---------- Marquee gallery ---------- */

.marquee-section { padding-block: var(--space-4); background: var(--ivory-deep); border-block: 1px solid var(--hairline); }
.marquee-container {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 145s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-set {
  display: flex;
  gap: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
}
.marquee-item {
  position: relative;
  height: 15rem;
  width: 18rem;
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--emerald-ink);
  box-shadow: var(--shadow-card);
}
.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 0.7s var(--ease-music), filter 0.7s var(--ease-music);
}
.marquee-item::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(2, 32, 21, 0.82));
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.marquee-item figcaption {
  position: absolute;
  z-index: 1;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.65rem);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.marquee-item:hover img { transform: scale(1.045); filter: saturate(0.86) brightness(0.84); }
.marquee-item:hover::after,
.marquee-item:hover figcaption { opacity: 1; }
.marquee-item:hover figcaption { transform: translateY(0); }

.performance-highlight {
  max-width: 61ch;
  color: var(--brass-deep);
  font-size: clamp(1.04rem, 1.25vw, 1.14rem);
  line-height: 1.72;
}
.partner-highlight {
  display: inline-block;
  color: var(--brass-deep);
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 1px solid var(--gold);
  background: linear-gradient(to top, rgba(217, 189, 114, 0.18) 48%, transparent 48%);
  padding-inline: 0.12em;
}
.kaibosh-note {
  max-width: 55ch;
  margin-top: var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid var(--gold);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

@media (hover: none) {
  .marquee-item::after,
  .marquee-item figcaption { opacity: 1; }
  .marquee-item figcaption { transform: none; }
}

/* Legacy direct-image sizing retained for non-captioned marquee content. */
.marquee-track > img {
  height: 15rem;
  width: 18rem;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Orchestra growth storytelling ---------- */

.growth { background: var(--ivory); }
.growth-stage { position: relative; }
.growth-seats { display: block; width: 100%; height: auto; }
.growth-seats circle {
  fill: var(--primary);
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.7s var(--ease-music);
}
.growth-seats circle.lit { opacity: 0.85; }
.growth-seats circle.gilt { fill: var(--gold); }
.growth-captions { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin-top: var(--space-5); }
.growth-step { border-top: 1px solid var(--gold); padding-top: 1rem; opacity: 0.35; transition: opacity 0.7s var(--ease-music); }
.growth-step.active { opacity: 1; }
.growth-step.growth-static { opacity: 1; transition: none; }
.growth-step .step-label { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 0.5rem; font-weight: 700; }
.growth-step h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.growth-step p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* ---------- Interactive orchestra explorer ---------- */

.orchestra-explorer { background: linear-gradient(170deg, var(--emerald-deep), var(--emerald-ink)); color: var(--ivory); position: relative; overflow: hidden; }
.orchestra-explorer .container { position: relative; z-index: 2; padding-block: var(--section-space); }
.orchestra-explorer h2 { color: var(--ivory); font-weight: 500; }
.orchestra-explorer p { color: rgba(250,247,241,0.78); }

.explorer-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-4); }
.explorer-tab {
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250,247,241,0.7);
  background: transparent;
  border: 1px solid var(--hairline-light);
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.explorer-tab:hover { color: var(--gold-bright); border-color: var(--gold); }
.explorer-tab[aria-selected="true"] { color: var(--emerald-ink); background: var(--gold); border-color: var(--gold); }

.explorer-body { display: grid; gap: calc(var(--grid-gap) * 1.25); align-items: center; }
.explorer-panel[hidden] { display: none; }
.explorer-panel h3 { color: var(--gold-bright); font-family: var(--font-quote); font-style: italic; font-weight: 600; font-size: 1.7rem; }
.explorer-panel .text-link { color: var(--gold-bright); }

.orchestra-svg { display: block; width: 100%; height: auto; }
.orchestra-svg .seat { fill: var(--ivory); opacity: 0.18; transition: opacity 0.5s var(--ease-music), fill 0.5s var(--ease-music); }
.orchestra-svg .seat.active { fill: var(--gold-bright); opacity: 0.95; }
.orchestra-svg .stage-arc { fill: none; stroke: var(--hairline-light); stroke-width: 1; }
.orchestra-svg text { fill: rgba(250,247,241,0.5); font-family: var(--font-body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- Donation ---------- */

.amount-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.amount {
  border: 1px solid var(--brass-deep);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.35s var(--ease-music), color 0.35s var(--ease-music), border-color 0.35s var(--ease-music), transform 0.35s var(--ease-music);
}
.amount:hover, .amount.selected { background: var(--primary); border-color: var(--primary); color: var(--ivory); transform: translateY(-2px); }
.page-hero .amount { border-color: var(--gold); color: var(--ivory); }
.page-hero .amount:hover, .page-hero .amount.selected { background: var(--gold); border-color: var(--gold); color: var(--emerald-ink); }
.amount-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin-top: 0.25rem;
  text-transform: uppercase;
}

.give-ways { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.give-ways.give-ways-5 { align-items: stretch; }
.give-way {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.55s var(--ease-music), box-shadow 0.55s var(--ease-music);
}
.give-way:hover { transform: translateY(-6px); }
.give-way p { color: var(--ink-soft); font-size: 0.95rem; }
.give-way .text-link {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
}

.giving-anchor-nav {
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.donor-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}
.donor-group {
  border-top: 2px solid var(--gold);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-3);
}
.donor-group h3 { color: var(--primary); }
.donor-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
}
.donor-group li {
  break-inside: avoid;
  border-bottom: 1px solid var(--hairline);
  padding: 0.55rem 0;
  color: var(--ink-soft);
}

.donate-impact-section .section-head,
.donate-faq-section .section-head {
  text-align: center;
  margin-inline: auto;
}
.donate-impact-section .section-head .eyebrow,
.donate-faq-section .section-head .eyebrow {
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
}
.donate-impact-section .section-head .eyebrow::after,
.donate-faq-section .section-head .eyebrow::after {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.impact-lines { display: grid; grid-template-columns: 1fr; gap: var(--space-2); max-width: 46rem; }
.donate-impact-section .impact-lines,
.donate-faq-section .faq {
  margin-inline: auto;
}
.impact-line { display: flex; align-items: baseline; gap: 1.4rem; border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-2); }
.impact-line .amt { font-family: var(--font-heading); font-weight: 600; font-size: 1.7rem; color: var(--brass-deep); min-width: 4.6rem; }
.impact-line p { margin: 0; color: var(--ink-soft); }

.tier-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.tier {
  background: rgba(250,247,241,0.045);
  border: 1px solid var(--hairline-light);
  border-top: 2px solid var(--gold);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column;
  backdrop-filter: blur(4px);
  transition: background 0.5s var(--ease-music), transform 0.5s var(--ease-music);
}
.tier:hover { background: rgba(250,247,241,0.085); transform: translateY(-4px); }
.tier h3 { color: var(--ivory); font-family: var(--font-quote); font-style: italic; font-weight: 600; font-size: 1.65rem; margin-bottom: 0.25rem; }
.tier .tier-amount { color: var(--gold-bright); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.tier p { color: rgba(250,247,241,0.75); font-size: 0.92rem; margin: 0; }

.embed-placeholder {
  border: 1px dashed var(--brass-deep);
  background: var(--paper);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */

.form { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.field label {
  display: block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 0.55rem;
  color: var(--ink);
}
.field .hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.95rem 1.05rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--brass-deep);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  border-bottom-color: var(--gold);
  box-shadow: 0 10px 30px -12px rgba(8,122,75,0.25);
}
.field textarea { min-height: 8rem; resize: vertical; }

.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-card);
}

.form-success {
  display: none;
  background: var(--primary-soft);
  border-left: 2px solid var(--gold);
  padding: var(--space-3);
  color: var(--ink);
}
.form-success.visible { display: block; }
.form-success.is-error {
  background: rgba(139, 35, 35, 0.1);
  border-left-color: #8B2323;
  color: #8B2323;
}
.site-footer .form-success.is-error {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: #F0B7A9;
  color: #FFF4F0 !important;
}
.form button:disabled,
.newsletter-form button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.notice {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold);
  padding: var(--space-3);
  font-size: 0.92rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
}
.notice h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }

.impact-slider {
  --slide-gap: var(--grid-gap);
  display: grid;
  gap: var(--space-3);
}
.impact-slider-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.impact-slider-viewport::-webkit-scrollbar { display: none; }
.impact-slider-track {
  display: flex;
  gap: var(--slide-gap);
}
.impact-slide {
  flex: 0 0 100%;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}
.impact-slide p:first-child {
  font-family: var(--font-quote);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.45;
  color: var(--ink);
}
.impact-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.impact-slider-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.impact-slider-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--ivory);
}
.impact-slider-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.impact-slider-btn:disabled:hover {
  background: var(--paper);
  border-color: var(--hairline);
  color: var(--primary);
}
.impact-slider-btn .material-icons { font-size: 1.25rem; }
.impact-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.impact-slider-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--brass-deep);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.impact-slider-dot[aria-current="true"] {
  background: var(--brass-deep);
}

/* ---------- FAQ ---------- */

.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--hairline); padding: var(--space-2) 0; }
.faq summary {
  font-family: var(--font-heading);
  font-size: 1.18rem; font-weight: 600;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: color 0.3s ease;
}
.faq summary:hover { color: var(--brass-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-quote); font-size: 1.6rem; color: var(--gold); flex-shrink: 0; transition: transform 0.4s var(--ease-music); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { color: var(--ink-soft); margin-top: var(--space-2); }

/* ---------- People ---------- */

.people-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.person {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform 0.55s var(--ease-music), box-shadow 0.55s var(--ease-music);
}
.person:hover { transform: translateY(-5px); }
.person h3 { margin-bottom: 0.2rem; }
.person .role {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.75rem;
}
.person p { font-size: 0.92rem; color: var(--ink-soft); }
.person img { width: calc(100% + var(--space-3) * 2); max-width: none; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3); height: 16rem; object-fit: cover; object-position: center 25%; }

/* Compact team rosters: equal profile cards keep the page scannable while
   the complete biographies remain available in one shared dialog. */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.profile-card {
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(35,33,28,0.04), 0 10px 28px -16px rgba(35,33,28,0.24);
  transition: transform 0.45s var(--ease-music), box-shadow 0.45s var(--ease-music);
}
.profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(35,33,28,0.06), 0 16px 34px -18px rgba(35,33,28,0.28);
}
.profile-card h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  margin-bottom: 0.35rem;
}
.profile-card .role {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 1.25rem;
}
.profile-card-copy {
  min-height: 10.5rem;
  padding: 1.35rem 1.4rem 1.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profile-bio-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding: 0.2rem 0 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--gold);
  background: transparent;
  color: var(--primary);
  font: 700 0.72rem/1.4 var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}
.profile-bio-trigger span { transition: transform 0.3s var(--ease-out); }
.profile-bio-trigger:hover { color: var(--brass-deep); }
.profile-bio-trigger:hover span { transform: translateX(0.25rem); }

.programme-leaders-section {
  padding-block: clamp(3.5rem, 6vw, 5.75rem);
}
.programme-leaders-section .section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.programme-leaders-section .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.programme-leaders-grid { max-width: 72rem; margin-inline: auto; }
.programme-leader {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.programme-leader > img {
  width: 100%;
  height: 17rem;
  object-fit: cover;
  object-position: center 24%;
}
.programme-leader .profile-card-copy {
  flex: 1;
  min-height: 9.5rem;
}
.programme-leader .role { margin-bottom: 0.65rem; }
.programme-leader .profile-bio-trigger { margin-top: 0.1rem; }

.governance-section { padding-block: clamp(3.5rem, 6vw, 5.75rem); }
.governance-section .section-head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.governance-card {
  min-height: 9.5rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.governance-card .role { margin-bottom: 0.65rem; }
.governance-card .profile-bio-trigger { margin-top: 0.1rem; }

/* Shared biography dialog */
.profile-modal {
  width: min(62rem, calc(100% - 2rem));
  max-height: min(48rem, calc(100dvh - 2rem));
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(2,61,39,0.32);
  overflow: hidden;
}
.profile-modal:not([open]) { display: none; }
.profile-modal::backdrop { background: rgba(2, 28, 18, 0.72); backdrop-filter: blur(5px); }
.profile-modal-shell { position: relative; max-height: inherit; overflow: auto; }
.profile-modal-close {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.7rem/1 var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.profile-modal-close:hover { color: var(--primary); border-color: var(--primary); }
.profile-modal-layout { display: grid; grid-template-columns: 1fr; }
.profile-modal-media { min-height: 17rem; background: var(--ivory-deep); }
.profile-modal-media img {
  width: 100%;
  height: 100%;
  max-height: 24rem;
  object-fit: cover;
  object-position: center 24%;
}
.profile-modal-content { padding: clamp(2rem, 5vw, 3.75rem); }
.profile-modal-content .eyebrow { margin-bottom: 1.2rem; }
.profile-modal-content h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.6rem; padding-right: 2.5rem; }
.profile-modal-content .role {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 1.5rem;
}
.profile-modal-bio p { max-width: 68ch; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.72; }
.profile-modal.has-image .profile-modal-layout { grid-template-columns: 1fr; }
body.profile-modal-open { overflow: hidden; }

/* ---------- CTA panel ---------- */

.cta-panel { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; box-shadow: var(--shadow-deep); }
.cta-panel .cta-text {
  background: linear-gradient(160deg, var(--paper), var(--ivory));
  border: 1px solid var(--hairline);
  padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.cta-panel .cta-text::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 65%);
}
.cta-panel .cta-text h2 { font-size: clamp(2rem, 4vw, 3rem); }
.cta-panel .cta-text .lede { margin-bottom: 0; }
.cta-panel .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--space-4); }
.cta-panel .cta-img { min-height: 20rem; overflow: hidden; position: relative; }
.cta-panel .cta-img img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; transition: transform 1.6s var(--ease-music); }
.cta-panel:hover .cta-img img { transform: scale(1.04); }

/* ---------- Footer ---------- */

footer.site-footer {
  background: linear-gradient(180deg, var(--emerald-ink), #021A12);
  color: rgba(250,247,241,0.7);
  position: relative;
  overflow: hidden;
}
footer.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
footer.site-footer .container { padding-block: var(--section-space) var(--space-5); position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.footer-col .footer-heading {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.footer-col a {
  display: block;
  color: rgba(250,247,241,0.72);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  transition: color 0.3s ease, transform 0.3s var(--ease-music);
}
.footer-col a:hover { color: var(--gold-bright); transform: translateX(3px); }
.footer-col a.inline { display: inline; margin: 0; }
.footer-col a.inline:hover { transform: none; }
.footer-col p { font-size: 0.9rem; line-height: 1.85; color: rgba(250,247,241,0.6); max-width: none; }
.footer-logo { height: 2.5rem; width: auto; margin-bottom: var(--space-2); filter: brightness(0) invert(1); opacity: 0.95; }
.footer-col .footer-tagline {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.18rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--gold-bright);
}

.newsletter-form { display: flex; gap: 0; margin-top: var(--space-2); flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 11rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--hairline-light);
  border-right: 0;
  background: rgba(250,247,241,0.06);
  color: var(--ivory);
  font-family: var(--font-body);
}
.newsletter-form input::placeholder { color: rgba(250,247,241,0.4); }
.newsletter-form input:focus { outline: none; border-color: var(--gold); }
.newsletter-form button {
  padding: 0.8rem 1.6rem;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--emerald-ink);
  font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.newsletter-form button:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.footer-bottom {
  border-top: 1px solid var(--hairline-light);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: 0.5rem;
  justify-content: space-between;
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: rgba(250,247,241,0.45);
}

.footer-powered-by {
  display: flex; justify-content: center; align-items: center; gap: 3rem;
  padding: 2rem 0;
  background: #021A12;
}

/* ---------- Reveal motion (graceful, rhythmic) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 1.15s var(--ease-music), transform 1.15s var(--ease-music);
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1s var(--ease-music), transform 1s var(--ease-music);
}
[data-reveal-stagger].revealed > * { opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 0.14s; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 0.28s; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 0.42s; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 0.56s; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 0.7s; }
[data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 0.84s; }
[data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: 0.98s; }

.hero-load > * {
  opacity: 0;
  transform: translateY(54px);
  animation: heroIn 1.3s var(--ease-music) forwards;
}
.hero-load > *:nth-child(1) { animation-delay: 0.35s; }
.hero-load > *:nth-child(2) { animation-delay: 0.55s; }
.hero-load > *:nth-child(3) { animation-delay: 0.75s; }
.hero-load > *:nth-child(4) { animation-delay: 0.95s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-stagger] > *, .hero-load > * { opacity: 1; transform: none; transition: none; animation: none; }
  .js .mask-reveal:not(.revealed) { clip-path: none; }
  .marquee-track, .scroll-cue::after { animation: none; }
  .marquee-item img, .marquee-item::after, .marquee-item figcaption { transition: none; }
  .staff line { stroke-dashoffset: 0; transition: none; }
  .growth-seats circle { opacity: 0.85; transition: none; }
  .growth-step { opacity: 1; }
  .cine-media { inset: 0; }
}

/* ==========================================================================
   BREAKPOINT: TABLET ≥ 640px
   ========================================================================== */
@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3, .grid-4, .form-row { grid-template-columns: repeat(2, 1fr); }
  .parent-contact-row .field label {
    min-height: 2.4rem;
    display: flex;
    align-items: flex-end;
  }
  .community-grid { grid-template-columns: repeat(3, 1fr); }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .people-grid, .tier-grid, .footer-grid, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-modal.has-image .profile-modal-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-modal.has-image .profile-modal-media { min-height: 100%; }
  .profile-modal.has-image .profile-modal-media img { max-height: none; object-fit: cover; }
  .growth-captions { grid-template-columns: repeat(3, 1fr); }
  .what-grid .card h3 { min-height: 2.7em; }
  .marquee-item, .marquee-track > img { height: 17rem; width: 21rem; }
  .values-highlight .container { grid-template-columns: repeat(4, 1fr); }
  .donor-group ul { columns: 2; column-gap: var(--space-4); }
}

/* ==========================================================================
   BREAKPOINT: LAPTOP ≥ 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }
  .nav-links { display: flex; }
  #menu-toggle { display: none; }
  .nav-logo { height: 3rem; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .feature-row { grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-gap) * 2.4); }
  .feature-row.split-7-5 { grid-template-columns: 7fr 5fr; }
  .feature-row.split-5-7 { grid-template-columns: 5fr 7fr; }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  .home-sponsor-wall { grid-template-columns: repeat(5, 1fr); }
  .people-grid, .give-ways, .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-strip .container { grid-template-columns: repeat(4, 1fr); }
  .cta-panel { grid-template-columns: 7fr 5fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  .footer-bottom { flex-direction: row; }
  .policy-layout { grid-template-columns: 18rem minmax(0, 1fr); }
  .policy-meta { position: sticky; top: calc(var(--nav-height) + var(--space-3)); }
  .feature-img { height: 29rem; }
  .explorer-body { grid-template-columns: 7fr 5fr; }
  .give-ways.give-ways-5 { grid-template-columns: repeat(5, 1fr); }
  .give-ways.give-ways-5 .give-way { padding-inline: 1.35rem; }
  .donor-groups { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* ==========================================================================
   BREAKPOINT: DESKTOP ≥ 1280px
   ========================================================================== */
@media (min-width: 1280px) {
  .community-grid { grid-template-columns: repeat(6, 1fr); }
  .logo-wall { grid-template-columns: repeat(6, 1fr); }
  .home-sponsor-wall { grid-template-columns: repeat(5, 1fr); }
  .tier-grid { grid-template-columns: repeat(4, 1fr); }
  .marquee-item, .marquee-track > img { height: 19rem; width: 24rem; }
  .photo-card img { height: 26rem; }
}