/* =========================================================
   SOVA FOUNDATION — premium family-charity site
   Warm editorial system · ivory + deep teal · lime accent
   HTML · CSS · Vanilla JS · BEM
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* canvas */
  --bg: #f7f3e7; /* warm ivory */
  --bg-2: #f1ecdc; /* deeper warm wash */
  --card: #fffef9; /* warm white card */

  /* ink */
  --ink: #103a32; /* deep teal text */
  --ink-soft: #4d655d; /* muted */
  --ink-faint: #7d918a;

  /* brand */
  --teal: #0e5c4f; /* primary */
  --teal-700: #0a463a;
  --teal-900: #07332a; /* deepest sections */
  --lime: #dde08c; /* signature accent */
  --lime-700: #c3c76d;
  --pink: #ecc4d8; /* whisper */
  --lavender: #cabfee; /* whisper */

  /* semantic */
  --cream: #fbf7ec;
  --line: rgba(16, 58, 50, 0.14);
  --line-2: rgba(16, 58, 50, 0.08);
  --line-light: rgba(251, 247, 236, 0.18);

  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* rhythm */
  --container: 1320px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(3.5rem, 7vw, 5rem);
  --gap: clamp(1rem, 2vw, 1.6rem);

  --radius: 26px;
  --radius-sm: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
ul {
  list-style: none;
}
input {
  font-family: inherit;
}
::selection {
  background: var(--teal);
  color: var(--cream);
}

/* (subtle grain overlay removed for render performance) */

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tint {
  background: var(--bg-2);
}
.section--dark {
  background: var(--teal);
  color: var(--cream);
}
.section--deep {
  background: var(--teal-900);
  color: var(--cream);
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.6rem;
}
.eyebrow--light {
  color: var(--lime);
}
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section__head--center .eyebrow {
  margin-bottom: 0.5rem;
}
.section__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.section__title em {
  font-style: italic;
  color: var(--teal);
}
.section__title--wide {
  max-width: none;
}

/* Contact page — method cards as links + message form fields */
a.collab__card {
  text-decoration: none;
  display: block;
}
a.collab__card p {
  color: var(--teal);
  font-weight: 600;
}
.cfield {
  display: block;
  margin-bottom: 1.1rem;
}
.cfield--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.cfield span {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.cfield input,
.cfield textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
.cfield input:focus,
.cfield textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.cfield textarea {
  min-height: 150px;
  resize: vertical;
}
@media (max-width: 560px) {
  .cfield--row {
    grid-template-columns: 1fr;
  }
}

/* Partnership page — collaboration grid + global band */
.collab__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.collab__card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.collab__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -32px rgba(16, 58, 50, 0.25);
}
.collab__card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.16;
  color: var(--ink);
  margin-bottom: 0.55rem;
  letter-spacing: -0.01em;
}
.collab__card p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}
@media (max-width: 980px) {
  .collab__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .collab__grid {
    grid-template-columns: 1fr;
  }
}

.gband {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.gband__list {
  display: grid;
  gap: 0.2rem;
  align-self: stretch;
}
.gband__list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-light);
}
.gband__list li:first-child {
  border-top: 1px solid var(--line-light);
}
.gband__list b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--lime);
  line-height: 1;
}
.gband__list span {
  color: rgba(251, 247, 236, 0.72);
  font-size: 0.95rem;
}
@media (max-width: 780px) {
  .gband {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
.section__title--light {
  color: var(--cream);
}
.section__title--light em {
  color: var(--lime);
}
.section__intro {
  max-width: 42ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
}
.section--dark .section__intro,
.section--deep .section__intro {
  color: rgba(251, 247, 236, 0.72);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 1.05rem 1.7rem;
  border-radius: 100px;
  transition:
    transform 0.5s var(--ease),
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
  will-change: transform;
  position: relative;
}
.btn svg {
  width: 18px;
  height: 18px;
}
.btn--solid {
  background: var(--teal);
  color: var(--cream);
  box-shadow: 0 14px 34px -16px rgba(14, 92, 79, 0.7);
}
.btn--solid:hover {
  background: var(--teal-700);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -16px rgba(14, 92, 79, 0.8);
}
.btn--ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}
.btn--block {
  width: 100%;
  justify-content: center;
}
.btn--lg {
  padding: 1.25rem 2.3rem;
  font-size: 1.05rem;
}
.section--dark .btn--solid,
.section--deep .btn--solid,
.menu .btn--solid {
  background: var(--lime);
  color: var(--teal-900);
  box-shadow: 0 14px 36px -16px rgba(221, 224, 140, 0.5);
}
.section--dark .btn--solid:hover,
.section--deep .btn--solid:hover,
.menu .btn--solid:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  color: var(--teal);
}
.link-arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(5px);
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.link-arrow:hover::after {
  transform: scaleX(1);
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  mix-blend-mode: difference;
}
.cursor__dot {
  position: fixed;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__ring {
  position: fixed;
  width: 38px;
  height: 38px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    opacity 0.3s;
}
.cursor.is-hover .cursor__ring {
  width: 62px;
  height: 62px;
}
.cursor.is-hidden {
  opacity: 0;
}
@media (hover: none), (max-width: 900px) {
  .cursor {
    display: none;
  }
}

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--teal-900);
  display: grid;
  place-items: center;
  color: var(--cream);
}
.loader__inner {
  text-align: center;
  width: min(340px, 70vw);
}
.loader__mark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.2rem;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 1.4rem;
}
.loader__logo {
  width: clamp(170px, 24vw, 230px);
  height: auto;
  display: block;
  margin: 0 auto 1.7rem;
}
.loader__bar {
  height: 2px;
  background: rgba(251, 247, 236, 0.18);
  overflow: hidden;
}
.loader__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lime);
}
.loader.is-done {
  pointer-events: none;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.4rem 0;
  transition:
    transform 0.5s var(--ease),
    background 0.4s var(--ease),
    padding 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.header.is-scrolled {
  background: rgba(7, 51, 42, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.8rem 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.header.is-hidden {
  transform: translateY(-105%);
}

/* header sits over the deep-teal hero → cream content, lime logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cream);
}
.brand__logo {
  height: 46px;
  width: auto;
  display: block;
}
.brand__glyph {
  width: 38px;
  height: 38px;
  color: var(--lime);
  flex: none;
}
.brand__glyph svg {
  width: 100%;
  height: 100%;
}
.brand__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand__sup {
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(251, 247, 236, 0.6);
  display: block;
  margin-top: 4px;
  font-weight: 600;
}

.nav__list {
  display: flex;
  gap: 0.3rem;
}
.nav__link {
  position: relative;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-block;
  border-radius: 100px;
  color: rgba(251, 247, 236, 0.82);
  transition: color 0.3s var(--ease);
}
.nav__link span {
  display: inline-block;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
  transform: translate(-50%, 8px) scale(0);
  transition: transform 0.4s var(--ease);
}
.nav__link:hover {
  color: var(--cream);
}
.nav__link:hover::after {
  transform: translate(-50%, 0) scale(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lang {
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--line-light);
  border-radius: 100px;
}
.lang__btn {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.6rem;
  border-radius: 100px;
  color: rgba(251, 247, 236, 0.65);
  transition: 0.3s var(--ease);
}
.lang__btn.is-active {
  background: var(--lime);
  color: var(--teal-900);
}

/* donate button in header = lime on teal */
.btn--donate {
  background: var(--lime);
  color: var(--teal-900);
  box-shadow: none;
  padding: 0.8rem 1.4rem;
}
.btn--donate:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  position: relative;
  color: var(--cream);
}
/* 8-item nav needs more room — switch to burger earlier */
@media (max-width: 1024px) {
  .nav,
  .lang {
    display: none;
  }
  .burger {
    display: block;
  }
}
.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.6px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: 0.4s var(--ease);
}
.burger span:first-child {
  margin-top: -4px;
}
.burger span:last-child {
  margin-top: 4px;
}
.burger.is-open span:first-child {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.burger.is-open span:last-child {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--teal-900);
  color: var(--cream);
  padding: 7rem var(--pad) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease);
  pointer-events: none;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
.menu__nav {
  display: flex;
  flex-direction: column;
}
.menu__link {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 9vw, 3.2rem);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.menu__idx {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--lime);
  font-weight: 600;
}
.menu__foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.menu__meta {
  font-size: 0.85rem;
  color: rgba(251, 247, 236, 0.6);
}

/* ---------- Placeholder media (refined teal duotone) ---------- */
.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #1c7163, #0a3d33);
  background-size: cover;
  background-position: center;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.ph--alt {
  background: linear-gradient(155deg, #18675a, #0a3d33);
}
.ph--warm {
  background: linear-gradient(155deg, #1e786a, #0c463a);
}
.ph--feature {
  background: linear-gradient(155deg, #1c7163, #093a30);
}
.ph--story1 {
  background: linear-gradient(155deg, #1a6c5e, #0a3f34);
}
.ph--story2 {
  background: linear-gradient(155deg, #176053, #082f27);
}
.ph--story3 {
  background: linear-gradient(155deg, #20806f, #0c4338);
}
.ph--cta {
  background: linear-gradient(155deg, #0e5c4f, #062a22);
}
.ph--family {
  background: linear-gradient(155deg, #1e786a, #0a3d33);
}
.ph.is-loaded {
  background-size: cover;
  background-position: center;
}

/* ---------- Hero — big photo ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--cream);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo {
  position: absolute;
  inset: 0;
  transform: scale(1.04);
  background-image: url("../images/IMG_4003.webp");
  background-size: cover;
  background-position: 50% 42%;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7, 51, 42, 0.78) 0%,
      rgba(7, 51, 42, 0.45) 35%,
      rgba(7, 51, 42, 0) 62%
    ),
    linear-gradient(
      115deg,
      rgba(7, 51, 42, 0.95) 0%,
      rgba(14, 92, 79, 0.8) 36%,
      rgba(124, 96, 182, 0.36) 72%,
      rgba(124, 96, 182, 0.1) 100%
    ),
    linear-gradient(0deg, rgba(7, 51, 42, 0.9) 0%, rgba(7, 51, 42, 0) 48%);
}
.hero__squiggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  width: 100%;
  height: 120px;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(9rem, 18vh, 14rem);
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.035em;
  font-size: clamp(2.9rem, 7.8vw, 6.6rem);
  line-height: 0.96;
  margin: 1rem 0 1.6rem;
  color: var(--cream);
  max-width: 16ch;
}
.hero__title em {
  font-style: italic;
  color: var(--lime);
}
.hero__lead {
  color: rgba(251, 247, 236, 0.86);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  max-width: 46ch;
  margin-bottom: 2.2rem;
}
.hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.hero .btn--solid {
  background: var(--lime);
  color: var(--teal-900);
  box-shadow: 0 16px 40px -18px rgba(221, 224, 140, 0.6);
}
.hero .btn--solid:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}
.hero__arrows {
  display: flex;
  gap: 0.6rem;
}
.harrow {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  transition: 0.35s var(--ease);
  color: var(--ink);
}
.harrow svg {
  width: 22px;
  height: 22px;
}
.harrow:hover {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
}
.harrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}
.btn--ghost-light {
  border-color: rgba(251, 247, 236, 0.4);
  color: var(--cream);
}
.btn--ghost-light:hover {
  border-color: var(--cream);
  color: var(--cream);
  background: rgba(251, 247, 236, 0.08);
}

/* ---------- Proof / trust block — banner left + stat cards right ---------- */
.proof {
  position: relative;
  background: var(--bg);
}
.proof__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.proof__copy {
  order: -1;
}
.proof__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 44px 84px -44px rgba(16, 58, 50, 0.4);
  max-width: 440px;
  justify-self: end;
}
.proof__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.9s var(--ease);
}
.proof__media:hover img {
  transform: scale(1.04);
}
.proof__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.1rem;
  color: var(--ink);
}
.proof__title em {
  font-style: italic;
  color: var(--teal);
}
.proof__text {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 48ch;
  margin-bottom: 2rem;
}
.proof__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  max-width: 560px;
}
.pstat {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: clamp(1.2rem, 1.9vw, 1.6rem);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.pstat:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(16, 58, 50, 0.3);
}
.pstat strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--teal);
  line-height: 1;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.pstat span {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* card stage — fixed donation card + horizontally scrolling track (kept mechanic) */
.hero__cards {
  position: relative;
  overflow: hidden;
}
.hero__track {
  display: flex;
  gap: 18px;
  align-items: stretch;
  will-change: transform;
}
.hslide {
  flex: none;
  width: clamp(260px, 76vw, 340px);
  min-height: 500px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
}
.hslide--give {
  width: clamp(300px, 90vw, 460px);
  z-index: 5;
  will-change: transform;
  overflow: visible;
}
/* ivory backing hides the cards passing behind the donation card's rounded corners */
.hslide--give::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 4px;
  z-index: -1;
}
.hero__track .hslide--cause,
.hero__track .hslide--accent {
  z-index: 2;
}
@media (min-width: 901px) {
  .hero__cards {
    cursor: default;
  }
}
@media (max-width: 900px) {
  .hero__cards {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
  }
  .hero__cards::-webkit-scrollbar {
    display: none;
  }
  .hslide {
    scroll-snap-align: start;
  }
  .hslide--give {
    transform: none !important;
  }
}
.hslide--cause .ph {
  transition: transform 1s var(--ease);
}
.hslide--cause:hover .ph {
  transform: scale(1.06);
}
.hslide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(7, 51, 42, 0.05) 30%,
    rgba(7, 51, 42, 0.85) 100%
  );
}
.hslide__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(1.4rem, 2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}
.hslide--cause .hslide__body,
.hslide--accent .hslide__body {
  color: var(--cream);
}
.hslide__tag {
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(251, 247, 236, 0.4);
}
.hslide__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hslide__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.4rem;
  background: var(--lime);
  color: var(--teal-900);
  padding: 0.7rem 1.4rem;
  border-radius: 100px;
  transition:
    background 0.3s var(--ease),
    transform 0.4s var(--ease);
}
.hslide__link:hover {
  background: var(--lime-700);
  transform: translateY(-2px);
}
.hslide__link i {
  display: none;
}
.hslide--accent {
  background: linear-gradient(155deg, var(--teal) 0%, var(--teal-900) 120%);
}
.hslide--accent .hslide__body {
  margin-top: 0;
  height: 100%;
  justify-content: space-between;
}
.hslide__badge {
  align-self: flex-start;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  color: var(--lime);
}
.hslide--accent .hslide__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

/* trust strip */
.hero__trust {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(1.5rem, 4vw, 4rem);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 3.6rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line-light);
}
.hero__trust li {
  font-size: 0.86rem;
  color: rgba(251, 247, 236, 0.6);
}
.hero__trust strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--cream);
  margin-bottom: 0.2rem;
}

/* ---------- Donation card ---------- */
.hslide--give .give {
  width: 100%;
  background: var(--teal);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  display: flex;
  flex-direction: column;
}
.give__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: auto;
  padding-bottom: 1.8rem;
  flex-wrap: wrap;
}
.give__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.06;
}
.give__cur {
  display: flex;
  gap: 0.2rem;
  background: rgba(251, 247, 236, 0.1);
  border-radius: 100px;
  padding: 0.2rem;
}
.give__cur-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: 100px;
  color: rgba(251, 247, 236, 0.7);
  transition: 0.3s var(--ease);
}
.give__cur-btn.is-active {
  background: var(--cream);
  color: var(--teal);
}
.give__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.6rem;
  background: rgba(251, 247, 236, 0.04);
}
.give__field:focus-within {
  border-color: var(--lime);
}
.give__sym {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--lime);
}
.give__input {
  flex: 1;
  border: none;
  background: none;
  font-size: 1.45rem;
  font-weight: 700;
  outline: none;
  width: 100%;
  color: var(--cream);
}
.give__per {
  font-size: 0.76rem;
  color: rgba(251, 247, 236, 0.55);
}
.give__amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.give__amount {
  padding: 0.8rem 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-light);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cream);
  transition: 0.3s var(--ease);
}
.give__amount:hover {
  border-color: var(--lime);
}
.give__amount.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--teal-900);
}
.give__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--lime);
  color: var(--teal-900);
  border-radius: 100px;
  padding: 0.7rem 0.8rem 0.7rem 1.6rem;
  font-weight: 700;
  transition:
    transform 0.5s var(--ease),
    background 0.4s var(--ease);
  will-change: transform;
}
.give__cta:hover {
  background: var(--lime-700);
}
.give__cta em {
  font-style: normal;
  opacity: 0.75;
}
.give__cta-arrow {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--teal-900);
  color: var(--cream);
  display: grid;
  place-items: center;
}
.give__cta-arrow svg {
  width: 18px;
  height: 18px;
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--teal);
  color: var(--cream);
  padding: 1.3rem 0;
  overflow: hidden;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  white-space: nowrap;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing: 0.01em;
}
.marquee__track .marquee__sep {
  font-size: 0;
  display: inline-flex;
  align-items: center;
}
.marquee__track .marquee__sep::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--lime);
  clip-path: polygon(
    50% 0,
    56% 44%,
    100% 50%,
    56% 56%,
    50% 100%,
    44% 56%,
    0 50%,
    44% 44%
  );
  filter: drop-shadow(0 0 6px rgba(221, 224, 140, 0.9))
    drop-shadow(0 0 12px rgba(221, 224, 140, 0.5));
  animation: sparkle 2.6s ease-in-out infinite;
}
@keyframes sparkle {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ---------- Mission ---------- */
.mission {
  padding-block: clamp(5.5rem, 11vw, 10rem);
}
.mission__statement {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.025em;
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  line-height: 1.14;
  max-width: 24ch;
}
.mission__statement em {
  font-style: italic;
  color: var(--teal);
}
.mission__meta {
  margin-top: 2.8rem;
}

/* ---------- Our Family ---------- */
.family {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
}
.family::before {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -14%;
  width: 36vw;
  height: 36vw;
  max-width: 440px;
  max-height: 440px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(236, 196, 216, 0.45),
    transparent 70%
  );
}
.family .container {
  position: relative;
  z-index: 1;
}
.family__inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.family__media {
  position: relative;
}
.family__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 4.7;
  box-shadow: 0 50px 90px -45px rgba(10, 66, 58, 0.55);
}
.family__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: transform 1.4s var(--ease);
}
.family:hover .family__photo {
  transform: scale(1.04);
}
.family__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(251, 247, 236, 0.92);
  padding: 2rem;
  gap: 0.5rem;
  pointer-events: none;
}
.family__placeholder svg {
  width: 44px;
  height: 44px;
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.family__placeholder span {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  max-width: 26ch;
}
.family__photo.is-loaded + .family__placeholder {
  display: none;
}
.family__badge {
  position: absolute;
  left: clamp(-10px, -1.5vw, -24px);
  top: clamp(20px, 4vw, 38px);
  background: var(--cream);
  color: var(--ink);
  border-radius: 18px;
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 26px 54px -26px rgba(10, 66, 58, 0.5);
}
.family__badge svg {
  width: 30px;
  height: 30px;
  color: var(--teal);
  flex: none;
}
.family__badge b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1;
  display: block;
}
.family__badge small {
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}
/* decorative offset frame removed for a cleaner premium look */
.family__behind {
  display: none;
}
.family__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.family__title em {
  font-style: italic;
  color: var(--teal);
}
.family__text {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 46ch;
  margin-bottom: 1.2rem;
}
.family__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.32;
  color: var(--ink);
  margin: 1.6rem 0 0.4rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--lime-700);
  max-width: 44ch;
}
.family__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem 0;
}
.family__value {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.55rem 1rem;
  border-radius: 100px;
}
.family__value::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.family__value:nth-child(2)::before {
  background: var(--lavender);
}
.family__value:nth-child(3)::before {
  background: var(--pink);
}
.family__value:nth-child(4)::before {
  background: var(--lime-700);
}
.family__sign {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.family__sign-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--ink);
}
.family__sign-role {
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

/* ---------- Story (new) — on main site background ---------- */
.story {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.story .container {
  position: relative;
  z-index: 1;
}
.story__inner {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.story__media {
  position: relative;
}
.story__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 4.7;
  box-shadow: 0 50px 90px -45px rgba(10, 66, 58, 0.45);
}
.story__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.8vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.story__title em {
  font-style: italic;
  color: var(--teal);
}
.story__text {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 46ch;
  margin-bottom: 1.2rem;
}
.story__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.32;
  color: var(--ink);
  margin: 1.6rem 0 0.4rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--lime-700);
  max-width: 44ch;
}
.story__sign {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.story__sign-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--ink);
}
.story__sign-role {
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

/* ---------- Ways to help ---------- */
.help {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.help .container {
  position: relative;
  z-index: 1;
}
.help__side {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: flex-start;
  max-width: 42ch;
}

/* pill section label (Instagram banner style) */
.eyebrow--pill {
  background: var(--teal);
  color: var(--lime);
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  letter-spacing: 0.16em;
}
.eyebrow--pill .eyebrow__dot {
  display: none;
}

/* ---------- Areas of work (neutral bg, colourful cards) ---------- */
.areas {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}
.areas__intro {
  color: var(--ink-soft);
}
.areas .section__title--light {
  color: var(--ink);
}
.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.area {
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(1.7rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.area:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px -34px rgba(16, 58, 50, 0.22);
}
/* each card outlined in a brand colour */
.area:nth-child(1) {
  border-color: #c9ce6a;
}
.area:nth-child(2) {
  border-color: #b6a9ec;
}
.area:nth-child(3) {
  border-color: #f0a9cf;
}
.area:nth-child(4) {
  border-color: #7cc1b0;
}
.area:nth-child(5) {
  border-color: #c9ce6a;
}
.area:nth-child(1):hover {
  background: rgba(221, 224, 140, 0.16);
}
.area:nth-child(2):hover {
  background: rgba(182, 169, 236, 0.14);
}
.area:nth-child(3):hover {
  background: rgba(240, 169, 207, 0.14);
}
.area:nth-child(4):hover {
  background: rgba(124, 193, 176, 0.16);
}
.area:nth-child(5):hover {
  background: rgba(221, 224, 140, 0.16);
}
.area__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--lime);
  display: grid;
  place-items: center;
  flex: none;
}
.area__icon svg {
  width: 28px;
  height: 28px;
}
.area__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.area__text {
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.area--cta {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
  justify-content: center;
}
.area--cta:hover {
  background: var(--teal-700);
}
.area--cta .area__title {
  color: var(--cream);
}
.area--cta .area__text {
  color: rgba(251, 247, 236, 0.78);
}
.area__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--lime);
  margin-top: 0.7rem;
}
.area__link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}
.area__link:hover svg {
  transform: translateX(5px);
}

/* ---------- Sova ecosystem (restrained sub-brand cards) ---------- */
.eco {
  background: var(--bg);
}
.eco__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.eco__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.eco__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px -34px rgba(16, 58, 50, 0.22);
}
.eco__logo-wrap {
  display: grid;
  place-items: center;
  padding: clamp(1.8rem, 3vw, 2.6rem) 1.5rem;
}
.eco__card:nth-child(1) .eco__logo-wrap {
  background: #e7eaad;
}
.eco__card:nth-child(2) .eco__logo-wrap {
  background: #f7dceb;
}
.eco__card:nth-child(3) .eco__logo-wrap {
  background: #ddd5f6;
}
.eco__card:nth-child(4) .eco__logo-wrap {
  background: #d2e8e1;
}
.eco__logo {
  height: clamp(48px, 5vw, 62px);
  width: auto;
  max-width: 78%;
  object-fit: contain;
}
.eco__body {
  padding: clamp(1.5rem, 2vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.eco__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.eco__text {
  color: var(--ink-soft);
  font-size: 0.96rem;
}
.eco__link {
  margin-top: auto;
  padding-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal);
}
.eco__link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}
.eco__link:hover svg {
  transform: translateX(5px);
}

/* ---------- CTA glow + actions ---------- */
.cta__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      55% 70% at 50% -5%,
      rgba(221, 224, 140, 0.16),
      transparent 60%
    ),
    radial-gradient(
      45% 60% at 50% 105%,
      rgba(202, 191, 238, 0.13),
      transparent 60%
    );
}
.cta__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Chips (refined hairline) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.7rem 1.3rem;
  border-radius: 100px;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--line);
  transition: 0.4s var(--ease);
}
.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  transition: 0.4s var(--ease);
}
.chip:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
}
.chip--teal::before {
  background: var(--teal);
}
.chip--lime::before {
  background: var(--lime-700);
}
.chip--purple::before {
  background: var(--lavender);
}
.chip--pink::before {
  background: var(--pink);
}

/* ---------- Approach ---------- */
.approach__chips {
  justify-content: center;
  gap: 0.9rem;
}
.approach__chips .chip {
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
}

/* ---------- Areas of work (editorial index) ---------- */
.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-2);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 70px -40px rgba(10, 66, 58, 0.3);
}
.card--program {
  display: flex;
  flex-direction: column;
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
}
.card__media .ph {
  transition: transform 0.9s var(--ease);
}
.card:hover .card__media .ph {
  transform: scale(1.06);
}
.card__tag {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(251, 247, 236, 0.92);
  color: var(--teal);
  padding: 0.45rem 0.8rem;
  border-radius: 100px;
}
.card__body {
  padding: clamp(1.5rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card__text {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.card__stat {
  font-size: 0.85rem;
  color: var(--ink);
  margin-top: auto;
  padding-top: 0.4rem;
}
.card__stat strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--teal);
  font-weight: 400;
  display: inline-block;
  margin-right: 0.35rem;
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.7rem;
  color: var(--teal);
}
.card__link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}
.card__link:hover svg {
  transform: translateX(5px);
}

/* ---------- Impact (kept block — refined) ---------- */
.impact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--line-light);
}
.stat {
  padding: clamp(1.8rem, 3vw, 2.8rem) 0;
  border-bottom: 1px solid var(--line-light);
  display: block;
  position: relative;
  white-space: nowrap;
}
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--lime);
  transition: width 1.1s var(--ease);
}
.stat.is-live::before {
  width: 100%;
}
.stat__num,
.stat__prefix,
.stat__suffix {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__prefix,
.stat__suffix {
  color: var(--lime);
}
.stat__num {
  color: var(--cream);
}
.stat__label {
  display: block;
  white-space: normal;
  font-size: 0.9rem;
  color: rgba(251, 247, 236, 0.62);
  margin-top: 1.1rem;
  letter-spacing: 0.01em;
}
.impact__bar {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.impact__bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(251, 247, 236, 0.62);
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.impact__track {
  display: flex;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  gap: 3px;
}
.impact__fill {
  width: 0;
  display: flex;
  align-items: center;
  padding-left: clamp(0.7rem, 1.4vw, 1.1rem);
  background: var(--lime);
  color: var(--teal-900);
  overflow: hidden;
  transition: width 1.3s var(--ease);
}
.impact__fill:first-child {
  border-radius: 16px 0 0 16px;
}
.impact__fill--4 {
  border-radius: 0 16px 16px 0;
}
.impact__fill b {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.impact__fill--2 {
  background: var(--lavender);
  color: #2a1f57;
}
.impact__fill--3 {
  background: var(--pink);
  color: #6e2b4f;
}
.impact__fill--4 {
  background: var(--teal-900);
  color: var(--cream);
}

/* ---------- Core Values (refined grid) ---------- */
.values__head {
  max-width: 640px;
}
.values__statement {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 1rem;
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.value {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: clamp(1.6rem, 2.4vw, 2.1rem) 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.value:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 56px -32px rgba(16, 58, 50, 0.3);
}
.value__dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  border: 1.5px solid var(--line);
  color: var(--teal);
}
.value__dot svg {
  width: 20px;
  height: 20px;
}
.value:nth-child(2) .value__dot {
  color: #8a78d8;
}
.value:nth-child(3) .value__dot {
  color: #d07ba6;
}
.value:nth-child(4) .value__dot {
  color: var(--lime-700);
}
.value__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------- Feature ---------- */
.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line-2);
}
.feature__media {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}
.feature__content {
  padding: clamp(2rem, 4vw, 4.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 1.3rem;
}
.feature__text {
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
  max-width: 44ch;
}
.feature__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2.2rem;
}
.feature__list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.98rem;
}
.feature__check {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--teal-900);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
}
.feature__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ---------- Reports ---------- */
.reports__slider {
  overflow: visible;
  padding-inline: var(--pad);
}
.reports .swiper-wrapper {
  align-items: stretch;
}
.report {
  height: auto;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.report:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 56px -30px rgba(16, 58, 50, 0.25);
}
.report__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.report__period {
  font-weight: 600;
  font-size: 0.92rem;
}
.report__doc {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
  border: 1px solid var(--line);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}
.report__sum {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-top: 0.7rem;
}
.report__label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.report__rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid var(--line-2);
  padding-top: 1rem;
}
.report__rows li {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.report__rows li span:last-child {
  font-weight: 600;
  color: var(--ink);
}
.report__link {
  margin-top: auto;
  padding-top: 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal);
}
.reports__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 2.8rem;
}
.reports__progress {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  max-width: 420px;
}
.reports__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 30%;
  background: var(--teal);
  transition: left 0.4s var(--ease);
}
.reports__btns {
  display: flex;
  gap: 0.6rem;
}
.rbtn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  font-size: 1.2rem;
  transition: 0.35s var(--ease);
  color: var(--ink);
}
.rbtn:hover {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
}

/* ---------- Stories ---------- */
.stories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.card--story-lg {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
.card--story .card__media {
  aspect-ratio: 16 / 10;
}
.card--story-lg .card__media {
  aspect-ratio: auto;
  flex: 1;
  min-height: 300px;
}
.card--story-lg .card__body {
  flex: none;
}
.card__meta {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
}
.card--story .card__body {
  gap: 0.6rem;
}

/* ---------- Partners ---------- */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.partner {
  background: var(--card);
  display: grid;
  place-items: center;
  padding: clamp(1.8rem, 3vw, 2.8rem) 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  transition: 0.4s var(--ease);
  text-align: center;
}
.partner:hover {
  background: var(--teal);
  color: var(--cream);
}

/* ---------- Banner stories (banner image + explanatory text) ---------- */
.brow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.2rem, 4vw, 3.6rem);
}
.brow + .brow {
  border-top: 1px solid var(--line-2);
}
.brow__media {
  justify-self: center;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 36px 72px -42px rgba(16, 58, 50, 0.4);
}
.brow__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.9s var(--ease);
}
.brow__media:hover img {
  transform: scale(1.04);
}
.brow--rev .brow__media {
  order: 2;
}
.brow__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--ink);
}
.brow__text {
  color: var(--ink-soft);
  font-size: 1.06rem;
  max-width: 48ch;
  margin-bottom: 1.4rem;
}

/* ---------- CTA — full-bleed photo banner ---------- */
.cta {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 88vh, 820px);
  display: grid;
  place-items: center;
  background: var(--teal-900);
}
.cta__photo {
  position: absolute;
  inset: 0;
  background-image: url("../images/IMG_3983.webp");
  background-size: cover;
  background-position: 50% 26%;
  transition: transform 2s var(--ease);
}
.cta:hover .cta__photo {
  transform: scale(1.04);
}
.cta__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      155deg,
      rgba(7, 51, 42, 0.92) 0%,
      rgba(14, 92, 79, 0.78) 46%,
      rgba(124, 96, 182, 0.34) 100%
    ),
    linear-gradient(0deg, rgba(7, 51, 42, 0.55), rgba(7, 51, 42, 0.15));
}
.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  color: var(--cream);
}
.cta .eyebrow--light {
  justify-content: center;
  margin-bottom: 1.2rem;
}
.cta__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.9rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
  color: var(--cream);
}
.cta__text {
  max-width: 50ch;
  color: rgba(251, 247, 236, 0.85);
  font-size: 1.12rem;
  margin-bottom: 2.4rem;
}
.cta__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cta .btn--solid {
  background: var(--lime);
  color: var(--teal-900);
  box-shadow: 0 16px 40px -18px rgba(221, 224, 140, 0.5);
}
.cta .btn--solid:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--teal-900);
  color: var(--cream);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-light);
}
.brand--footer {
  color: var(--cream);
  margin-bottom: 1.5rem;
}
.brand--footer .brand__glyph {
  color: var(--lime);
}
.brand--footer .brand__sup {
  color: rgba(251, 247, 236, 0.6);
}
.footer__tag {
  color: rgba(251, 247, 236, 0.62);
  max-width: 40ch;
  font-size: 0.95rem;
  margin-bottom: 1.7rem;
}
.footer__sub {
  display: flex;
  gap: 0.5rem;
  max-width: 360px;
}
.footer__sub-input {
  flex: 1;
  background: rgba(251, 247, 236, 0.06);
  border: 1px solid var(--line-light);
  border-radius: 100px;
  padding: 0.9rem 1.2rem;
  color: var(--cream);
  outline: none;
}
.footer__sub-input::placeholder {
  color: rgba(251, 247, 236, 0.4);
}
.footer__sub-input:focus {
  border-color: var(--lime);
}
.footer__sub-btn {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--teal-900);
  font-size: 1.2rem;
  transition: 0.3s var(--ease);
}
.footer__sub-btn:hover {
  background: var(--lime-700);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.footer__h {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.footer__col a {
  color: rgba(251, 247, 236, 0.7);
  font-size: 0.95rem;
  transition: 0.3s var(--ease);
  width: fit-content;
}
.footer__col a:hover {
  color: var(--cream);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  font-size: 0.84rem;
  color: rgba(251, 247, 236, 0.5);
}

/* ---------- Reveal base states ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
[data-card] {
  opacity: 0;
  transform: translateY(40px);
}
.split-line {
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.split-line .word,
.char {
  display: inline-block;
}

/* ---------- Cormorant tuning (smaller x-height & lighter — add presence) ---------- */
.hero__title,
.section__title,
.proof__title,
.story__title,
.cta__title,
.feature__title,
.family__title {
  font-weight: 500;
  letter-spacing: -0.02em;
}
.give__title,
.hslide__title,
.card__title,
.area__title,
.value__name,
.report__sum,
.values__statement,
.brand__name,
.menu__link {
  font-weight: 600;
}
.hero__title {
  font-size: clamp(3.2rem, 8.4vw, 7.4rem);
  line-height: 1.05;
}
.section__title {
  font-size: clamp(2.4rem, 5.6vw, 4.5rem);
  line-height: 1.08;
}
.cta__title {
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: 1.04;
}
.proof__title,
.story__title {
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  line-height: 1.06;
}
.give__title,
.hslide__title,
.feature__title,
.family__title {
  line-height: 1.12;
}
.stat__num,
.stat__prefix,
.stat__suffix {
  font-weight: 500;
  font-size: clamp(2.7rem, 5.2vw, 4.4rem);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__visual {
    max-width: 460px;
  }
  .hero__frame {
    aspect-ratio: 4 / 3.4;
  }
  .proof__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .proof__media {
    max-width: 460px;
  }
  .story__inner {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
  .story__media {
    max-width: 480px;
  }
  .story__frame {
    aspect-ratio: 4 / 3.6;
  }
  .programs__grid {
    grid-template-columns: 1fr;
    max-width: 540px;
  }
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eco__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .brow {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .brow--rev .brow__media {
    order: -1;
  }
  .brow__media {
    justify-self: start;
    max-width: 380px;
  }
  .feature__inner {
    grid-template-columns: 1fr;
  }
  .feature__media {
    min-height: 320px;
    order: -1;
  }
  .partners__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .section__head {
    gap: 1.6rem;
  }
}
@media (max-width: 900px) {
  .nav,
  .lang {
    display: none;
  }
  .burger {
    display: block;
  }
  .impact__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stories__grid {
    grid-template-columns: 1fr;
  }
  .card--story-lg {
    grid-row: auto;
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  :root {
    --radius: 20px;
  }
  .proof__stats {
    gap: 0.7rem;
  }
  .impact__grid {
    grid-template-columns: 1fr;
  }
  .areas__grid {
    grid-template-columns: 1fr;
  }
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .impact__track {
    height: 48px;
  }
  .impact__fill {
    padding-left: 0.8rem;
  }
  .impact__fill b {
    font-size: 0.72rem;
  }
  .cta__amounts {
    grid-template-columns: repeat(2, 1fr);
  }
  .partners__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__bottom {
    flex-direction: column;
    gap: 0.4rem;
  }
  .reports__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .reports__progress {
    max-width: none;
  }
  .reports__btns {
    justify-content: flex-end;
  }
}

/* =========================================================
   ABOUT PAGE — dedicated, photo-rich layout
   ========================================================= */

/* Interior header: solid from the top (hero is light, not a photo) */
.header--solid {
  background: rgba(7, 51, 42, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ---------- About hero — editorial photo cluster ---------- */
.ahero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-top: clamp(8.5rem, 16vh, 12.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.ahero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -10%;
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(202, 191, 238, 0.4),
    transparent 70%
  );
  pointer-events: none;
}
.ahero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.ahero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 1.1rem 0 1.5rem;
  color: var(--ink);
  text-wrap: balance;
}
.ahero__title em {
  font-style: italic;
  color: var(--teal);
}
.ahero__lead {
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 46ch;
}
.ahero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.ahero__meta b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--teal);
  display: block;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ahero__meta span {
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.ahero__media {
  position: relative;
}
.ahero__main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 54px 96px -48px rgba(10, 66, 58, 0.55);
}
.ahero__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.ahero__media:hover .ahero__main img {
  transform: scale(1.04);
}
.ahero__inset {
  position: absolute;
  right: -7%;
  bottom: -9%;
  width: 50%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 7px solid var(--bg);
  box-shadow: 0 36px 64px -32px rgba(10, 66, 58, 0.5);
}
.ahero__inset img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.ahero__badge {
  position: absolute;
  left: -4%;
  top: 7%;
  background: var(--lime);
  color: var(--teal-900);
  border-radius: 100px;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.32);
}

/* ---------- Founder letter ---------- */
.founder {
  background: var(--bg-2);
}
.founder__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.founder__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 50px 90px -45px rgba(10, 66, 58, 0.45);
}
.founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.founder__media:hover img {
  transform: scale(1.04);
}
.founder__mark {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--lime-700);
  display: block;
  margin-bottom: 0.4rem;
}
.founder__quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
}
.founder__quote em {
  font-style: italic;
  color: var(--teal);
}
.founder__sign {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.founder__sign-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--ink);
}
.founder__sign-role {
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

/* ---------- Pillars — what truly matters (photo tiles) ---------- */
.pillars {
  background: var(--bg);
  overflow: hidden;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.pillar {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.pillar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.pillar:hover img {
  transform: scale(1.06);
}
.pillar__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 51, 42, 0.04) 38%,
    rgba(7, 51, 42, 0.86) 100%
  );
}
.pillar__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.4rem, 2vw, 2rem);
  color: var(--cream);
}
.pillar__no {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
}
.pillar__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  line-height: 1.04;
  margin: 0.5rem 0 0.5rem;
}
.pillar__text {
  color: rgba(251, 247, 236, 0.82);
  font-size: 0.96rem;
  max-width: 30ch;
}

/* ---------- Feed — Instagram-style gallery grid ---------- */
.feed {
  background: var(--bg);
  overflow: hidden;
}
.feed__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.feed__item {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
}
.feed__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease);
}
.feed__item:hover img {
  transform: scale(1.05);
}
.feed__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 51, 42, 0) 58%,
    rgba(7, 51, 42, 0.42)
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.feed__item:hover::after {
  opacity: 1;
}

/* ---------- Core values — numbered editorial (dark) ---------- */
.cvalues {
  background: var(--teal-900);
  color: var(--cream);
}
.cvalues__list {
  border-top: 1px solid var(--line-light);
}
.cvalues__row {
  display: grid;
  grid-template-columns: 64px 1fr 32ch;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 2.8vw, 2.4rem);
  border-bottom: 1px solid var(--line-light);
  transition: background 0.4s var(--ease);
}
.cvalues__no {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--lime);
}
.cvalues__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.4s var(--ease);
}
.cvalues__desc {
  color: rgba(251, 247, 236, 0.68);
  font-size: 0.98rem;
  justify-self: end;
  text-align: right;
  max-width: 32ch;
}
.cvalues__row:hover {
  background: rgba(221, 224, 140, 0.06);
}
.cvalues__row:hover .cvalues__name {
  color: var(--lime);
}

/* ---------- Journey — sticky photo scrollytelling ---------- */
.journey {
  background: var(--bg-2);
}
.jx {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.jx__media {
  position: sticky;
  top: 12vh;
  height: 76vh;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 50px 92px -46px rgba(10, 66, 58, 0.5);
  background: var(--teal-900);
}
.jx__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.9s var(--ease),
    transform 1.6s var(--ease);
}
.jx__photo.is-active {
  opacity: 1;
  transform: scale(1);
}
.jx__photo img,
.jx__photo .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jx__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 51, 42, 0) 55%,
    rgba(7, 51, 42, 0.5)
  );
}
.jx__count {
  position: absolute;
  right: 1.2rem;
  top: 1.1rem;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: rgba(251, 247, 236, 0.85);
  letter-spacing: 0.02em;
}
.jx__steps {
}
.jx__step {
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transition: opacity 0.5s var(--ease);
}
.jx__step:first-child {
  justify-content: flex-start;
}
.jx__step.is-active {
  opacity: 1;
}
.jx__year {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal);
  margin-bottom: 1.1rem;
}
.jx__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.jx__text {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 46ch;
}

@media (max-width: 980px) {
  .jx {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .jx__media {
    top: 78px;
    height: 40vh;
  }
  .jx__step {
    min-height: 58vh;
  }
}
@media (max-width: 600px) {
  .jx__media {
    height: 34vh;
  }
  .jx__step {
    min-height: 52vh;
  }
}

/* ---------- Full-bleed events band (parallax) ---------- */
.band {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 72vh, 680px);
  display: grid;
  place-items: center;
  background: var(--teal-900);
  color: var(--cream);
  text-align: center;
}
.band .ph {
  transform: scale(1.12);
}
.band__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(7, 51, 42, 0.88) 0%,
    rgba(7, 51, 42, 0.32) 55%,
    rgba(7, 51, 42, 0.55) 100%
  );
}
.band__inner {
  position: relative;
  z-index: 2;
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad);
  max-width: 980px;
}
.band__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.band__title em {
  font-style: italic;
  color: var(--lime);
}
.band__sub {
  color: rgba(251, 247, 236, 0.84);
  font-size: 1.1rem;
  max-width: 52ch;
  margin: 1.3rem auto 0;
}

/* ---------- About responsive ---------- */
@media (max-width: 1080px) {
  .ahero__inner {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .ahero__media {
    max-width: 520px;
  }
  .founder__inner {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .founder__media {
    max-width: 460px;
    order: -1;
  }
  .cvalues__row {
    grid-template-columns: 48px 1fr;
  }
  .cvalues__desc {
    grid-column: 2 / 3;
    justify-self: start;
    text-align: left;
    margin-top: -0.4rem;
  }
}
@media (max-width: 900px) {
  .feed__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .pillars__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
  .pillar {
    aspect-ratio: 16 / 12;
  }
}
@media (max-width: 600px) {
  .ahero__inset {
    width: 56%;
    right: -3%;
  }
  .cvalues__row {
    grid-template-columns: 40px 1fr;
    gap: 1rem;
  }
}

/* =========================================================
   PROGRAMS PAGE
   ========================================================= */

/* ---------- Programs hero (centered) ---------- */
.phero {
  position: relative;
  overflow: visible;
  background: var(--bg);
  padding-top: clamp(8.5rem, 16vh, 12.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

/* animated brand-green aurora background */
.phero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 94%);
}
.phero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}
.phero__blob--1 {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -16%;
  left: 8%;
  background: radial-gradient(
    circle,
    rgba(221, 224, 140, 0.72),
    transparent 70%
  );
  animation: pheroBlob 19s ease-in-out infinite;
}
.phero__blob--2 {
  width: 40vw;
  height: 40vw;
  max-width: 540px;
  max-height: 540px;
  top: -8%;
  right: 6%;
  background: radial-gradient(circle, rgba(14, 92, 79, 0.34), transparent 70%);
  animation: pheroBlob 23s ease-in-out infinite reverse;
}
.phero__blob--3 {
  width: 34vw;
  height: 34vw;
  max-width: 460px;
  max-height: 460px;
  bottom: -22%;
  left: 38%;
  background: radial-gradient(
    circle,
    rgba(202, 191, 238, 0.4),
    transparent 70%
  );
  animation: pheroBlob 27s ease-in-out infinite;
}
@keyframes pheroBlob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(5%, 7%) scale(1.14);
  }
  66% {
    transform: translate(-4%, 4%) scale(0.94);
  }
}

/* floating photos that peek in around the headline */
.phero__floats {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.phero__float {
  position: absolute;
  opacity: 0;
}
.phero__float-img {
  width: clamp(150px, 15vw, 248px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 32px 64px -26px rgba(10, 66, 58, 0.55);
  border: 6px solid var(--bg);
  animation: pheroFloat 8s ease-in-out infinite;
}
.phero__float-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phero__float--1 {
  top: 21%;
  left: 4%;
  transform: rotate(-7deg);
}
.phero__float--2 {
  top: 21%;
  right: 5%;
  transform: rotate(6deg);
}
.phero__float--2 .phero__float-img {
  animation-delay: -2.5s;
}
.phero__float--3 {
  bottom: 10%;
  left: 7%;
  transform: rotate(5deg);
}
.phero__float--3 .phero__float-img {
  animation-delay: -4s;
  aspect-ratio: 4 / 3;
}
.phero__float--4 {
  bottom: 9%;
  right: 6%;
  transform: rotate(-6deg);
}
.phero__float--4 .phero__float-img {
  animation-delay: -1.2s;
}
@keyframes pheroFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.phero__inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin-inline: auto;
}
.phero .eyebrow--pill {
  margin-inline: auto;
}
.phero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1.2rem 0 1.4rem;
  color: var(--ink);
}
.phero__title em {
  font-style: italic;
  color: var(--teal);
}
.phero__lead {
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 54ch;
  margin: 0 auto 2.2rem;
}
.phero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

/* ---------- Program rows (alternating editorial) ---------- */
.plist {
  background: var(--bg);
}
.program {
  padding-block: clamp(2.6rem, 6vw, 5rem);
}
.program + .program {
  border-top: 1px solid var(--line-2);
}
.program__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.program--rev .program__media {
  order: 2;
}
.program__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3.3;
  box-shadow: 0 44px 84px -44px rgba(16, 58, 50, 0.42);
}
.program__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.program__media .ph {
  transition: transform 1.1s var(--ease);
}
.program:hover .program__media img,
.program:hover .program__media .ph {
  transform: scale(1.05);
}
.program__media-badge {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  z-index: 2;
  background: var(--lime);
  color: var(--teal-900);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
}
.program__num {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--lime);
  background: var(--teal);
  border-radius: 100px;
  padding: 0.55rem 0.9rem;
  margin-right: 0.55rem;
}
.program__copy .eyebrow--pill {
  vertical-align: middle;
}
.program__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
  color: var(--ink);
}
.program__title em {
  font-style: italic;
  color: var(--teal);
}
.program__text {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 48ch;
  margin-bottom: 1.5rem;
}
.program__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.9rem;
}
.program__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--ink);
}
.program__check {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--teal-900);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.program__check svg {
  width: 13px;
  height: 13px;
}
.program__foot {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  flex-wrap: wrap;
}
.program__stat {
  display: flex;
  flex-direction: column;
}
.program__stat b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--teal);
}
.program__stat span {
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

@media (max-width: 980px) {
  .program__inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .program--rev .program__media {
    order: -1;
  }
  .program__media {
    order: -1;
    aspect-ratio: 16 / 11;
  }
}
@media (max-width: 860px) {
  .phero__float--1,
  .phero__float--3 {
    display: none;
  }
  .phero__float--2 {
    top: 5%;
    right: 2%;
  }
  .phero__float--4 {
    bottom: 3%;
    right: 2%;
  }
  .phero__float-img {
    width: clamp(84px, 22vw, 120px);
  }
}
@media (max-width: 560px) {
  .phero__floats {
    display: none;
  }
}

/* =========================================================
   STORIES PAGE
   ========================================================= */
.shero {
  background: var(--bg);
  padding-top: clamp(8.5rem, 16vh, 12.5rem);
  padding-bottom: 0;
}
.shero__head {
  text-align: center;
  max-width: none;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.shero .eyebrow--pill {
  margin-inline: auto;
}
.shero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1.2rem 0 1.4rem;
  color: var(--ink);
}
.shero__title em {
  font-style: italic;
  color: var(--teal);
}
.shero__lead {
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 54ch;
  margin: 0 auto;
}

/* featured story — large cinematic card */
.sfeature {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: clamp(440px, 62vh, 640px);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 50px 96px -48px rgba(10, 66, 58, 0.55);
}
.sfeature__media {
  position: absolute;
  inset: 0;
}
.sfeature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.sfeature:hover .sfeature__media img {
  transform: scale(1.05);
}
.sfeature__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(7, 51, 42, 0.86) 0%,
      rgba(7, 51, 42, 0.45) 45%,
      rgba(7, 51, 42, 0.1) 75%
    ),
    linear-gradient(0deg, rgba(7, 51, 42, 0.85), rgba(7, 51, 42, 0) 60%);
}
.sfeature__body {
  position: relative;
  z-index: 2;
  padding: clamp(1.8rem, 4vw, 3.6rem);
  color: var(--cream);
  max-width: 760px;
}
.sfeature__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-900);
  background: var(--lime);
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.sfeature__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--cream);
}
.sfeature__excerpt {
  color: rgba(251, 247, 236, 0.84);
  font-size: 1.06rem;
  max-width: 52ch;
  margin-bottom: 1.6rem;
}
.sfeature__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(251, 247, 236, 0.7);
  letter-spacing: 0.02em;
  margin-bottom: 1.6rem;
}
.sfeature__meta span {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.sfeature__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
}
.sfeature .btn--solid {
  background: var(--lime);
  color: var(--teal-900);
}
.sfeature .btn--solid:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}

/* category chips */
.schips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* stories grid */
.sgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 980px) {
  .sgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .sgrid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* homepage stories — view more button row */
.stories__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* =========================================================
   STORY ARTICLE PAGE (single template)
   ========================================================= */
.article {
  background: var(--bg);
  padding-top: clamp(8.5rem, 16vh, 12.5rem);
}
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.article__back svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}
.article__back:hover svg {
  transform: translateX(-4px);
}
.article__head {
  max-width: 860px;
  margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
  text-align: center;
}
.article__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 1.1rem 0 1.5rem;
  color: var(--ink);
}
.article__title em {
  font-style: italic;
  color: var(--teal);
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.article__meta span {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.article__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime-700);
}
.article__hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: 0 50px 96px -48px rgba(10, 66, 58, 0.5);
  margin-bottom: clamp(2.6rem, 5vw, 4.2rem);
}
@media (max-width: 600px) {
  .article__hero {
    aspect-ratio: 4 / 3;
  }
}
.article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* reading column */
.article__body {
  max-width: none;
  margin-inline: auto;
}
.article__body > * + * {
  margin-top: 1.5rem;
}
.article__body p {
  color: #3c544c;
  font-size: 1.13rem;
  line-height: 1.82;
}
.article__lead {
  font-size: 1.32rem !important;
  line-height: 1.6;
  color: var(--ink) !important;
  font-weight: 500;
}
.article__body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}
.article__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.32;
  color: var(--ink);
  margin: clamp(2.4rem, 4vw, 3.2rem) 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--lime-700);
}
.article__figure {
  margin: clamp(2.4rem, 4vw, 3.2rem) 0;
}
.article__figure img {
  width: 100%;
  aspect-ratio: 2.2 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
@media (max-width: 600px) {
  .article__figure img {
    aspect-ratio: 3 / 2;
  }
}
.article__figure figcaption {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: 0.02em;
}
.article__list {
  padding-left: 0;
}
.article__list li {
  position: relative;
  padding-left: 1.6rem;
  color: #3c544c;
  font-size: 1.1rem;
  line-height: 1.7;
}
.article__list li + li {
  margin-top: 0.6rem;
}
.article__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-700);
}

/* share / sign-off */
.article__foot {
  max-width: none;
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.article__sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
}
.article__share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.article__share-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.article__share a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: 0.35s var(--ease);
}
.article__share a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}
.article__share svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  .article__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   DONATE PAGE — contribution form
   ========================================================= */
/* Donate hero (separate) */
.dhero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-top: clamp(8.5rem, 16vh, 12.5rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.dhero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.dhero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 1.1rem 0 1.4rem;
  color: var(--ink);
  text-wrap: balance;
}
.dhero__title em {
  font-style: italic;
  color: var(--teal);
}
.dhero__lead {
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 46ch;
}
.dhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}
.dhero__media {
  position: relative;
  perspective: 1000px;
}
.dheart {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'><path d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z' fill='black'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'><path d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z' fill='black'/></svg>")
    center / contain no-repeat;
  filter: drop-shadow(0 40px 70px rgba(10, 66, 58, 0.4));
}
.dheart img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  display: block;
}

/* a card flies out of the heart, one after another, in 3D, then fades */
.dheart__fly {
  position: absolute;
  top: 36%;
  left: 50%;
  width: clamp(120px, 27%, 156px);
  aspect-ratio: 1;
  margin: 0 0 0 calc(clamp(120px, 27%, 156px) / -2);
  z-index: 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 36px 66px -20px rgba(10, 66, 58, 0.6);
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}
.dheart__fly img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1080px) {
  .dhero__inner {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .dhero__media {
    max-width: 460px;
  }
}

/* Contribution (centered form + trust strip) */
.contrib {
  background: var(--bg-2);
}
.contrib__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.contrib__head .eyebrow--pill {
  margin-inline: auto;
}
.contrib__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 1rem;
}
.contrib__title em {
  font-style: italic;
  color: var(--teal);
}
.cform {
  max-width: 720px;
  margin-inline: auto;
}
.tstrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 2rem);
  max-width: 920px;
  margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
}
.tstrip__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}
.tstrip__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--lime);
  display: grid;
  place-items: center;
  flex: none;
}
.tstrip__check svg {
  width: 12px;
  height: 12px;
}
.contrib__q {
  text-align: center;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.contrib__q a {
  color: var(--teal);
  font-weight: 600;
}

.cform {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 44px 84px -52px rgba(16, 58, 50, 0.4);
}
.cform__tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--bg-2);
  border-radius: 100px;
  padding: 0.3rem;
  margin-bottom: 1.8rem;
  gap: 0.2rem;
}
.cform__tab {
  flex: 1;
  min-width: 96px;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.75rem 1.1rem;
  border-radius: 100px;
  color: var(--ink-soft);
  transition: 0.3s var(--ease);
}
.cform__tab.is-active {
  background: var(--teal);
  color: var(--cream);
  box-shadow: 0 10px 24px -12px rgba(14, 92, 79, 0.6);
}
.cform__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.cform__amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.cform__amount {
  padding: 1.1rem 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--card);
  transition: 0.25s var(--ease);
}
.cform__amount:hover {
  border-color: var(--teal);
}
.cform__amount.is-active {
  background: rgba(221, 224, 140, 0.28);
  border-color: var(--lime-700);
  color: var(--teal);
}
.cform__other {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.1rem;
  margin-bottom: 1.3rem;
  transition: border-color 0.3s var(--ease);
}
.cform__other:focus-within {
  border-color: var(--teal);
}
.cform__other-sym {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--teal);
}
.cform__other input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  width: 100%;
}
.cform__selected {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}
.cform__selected strong {
  color: var(--ink);
  font-size: 1.1rem;
}
.cform__cta {
  width: 100%;
  justify-content: center;
}
.cform__note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
}
.cform__bank {
  margin-bottom: 1.4rem;
}
.cform__bank-text {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0.5rem 0 1.2rem;
}
.cform__bank-list {
  display: grid;
  gap: 0.2rem;
  border-top: 1px solid var(--line-2);
}
.cform__bank-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line-2);
}
.cform__bank-list span {
  color: var(--ink-faint);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cform__bank-list b {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* trust + questions cards */
.tcard {
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-900) 130%);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.tcard__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1.5rem;
}
.tcard__list {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.tcard__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(251, 247, 236, 0.9);
}
.tcard__check {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: rgba(221, 224, 140, 0.2);
  color: var(--lime);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.tcard__check svg {
  width: 13px;
  height: 13px;
}
.qcard {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: var(--gap);
}
.qcard__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.qcard p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin-bottom: 1.3rem;
}

@media (max-width: 920px) {
  .contrib__inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .cform__amounts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   GALLERY PAGE — hero with photo strip + masonry wall
   ========================================================= */
.ghero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-top: clamp(8.5rem, 16vh, 12.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ghero__head {
  text-align: center;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.ghero .eyebrow--pill {
  margin-inline: auto;
  margin-bottom: 0.6rem;
}
.ghero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1.4rem;
  color: var(--ink);
}
.ghero__title em {
  font-style: italic;
  color: var(--teal);
}
.ghero__lead {
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 54ch;
  margin: 0 auto;
}
.ghero__marquee {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.ghero__track {
  display: flex;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  width: max-content;
  will-change: transform;
}
.ghero__track img {
  height: clamp(190px, 27vh, 320px);
  aspect-ratio: 3 / 4;
  width: auto;
  border-radius: var(--radius-sm);
  display: block;
  object-fit: cover;
  box-shadow: 0 26px 54px -32px rgba(10, 66, 58, 0.45);
}
.gwall {
  column-count: 3;
  column-gap: var(--gap);
}
.gitem {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--gap);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
  background: var(--bg-2);
}
.gitem img {
  width: 100%;
  display: block;
  transition: transform 1.1s var(--ease);
}
.gitem .ph {
  position: absolute;
  inset: 0;
  height: 100%;
  transition: transform 1.1s var(--ease);
}
.gitem--ph {
  aspect-ratio: 4 / 5;
}
.gitem--wide {
  aspect-ratio: 3 / 2;
}
.gitem--tall {
  aspect-ratio: 3 / 4;
}
.gitem--ph img,
.gitem--wide img,
.gitem--tall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gitem:hover img,
.gitem:hover .ph {
  transform: scale(1.05);
}
.gitem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7, 51, 42, 0.62));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.gitem:hover::after {
  opacity: 1;
}
.gitem__cap {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.gitem:hover .gitem__cap {
  opacity: 1;
  transform: none;
}
@media (max-width: 980px) {
  .gwall {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  .gwall {
    column-count: 1;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* =========================================================
   EVENTS PAGE + 10% pledge strip
   ========================================================= */

/* Events — photo-collage hero (taped photos as a background) */
.chero {
  position: relative;
  overflow: hidden;
  min-height: clamp(640px, 92vh, 920px);
  display: grid;
  place-items: center;
  background: var(--bg);
}
.chero__photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.chero__ph {
  position: absolute;
  width: clamp(140px, 16vw, 244px);
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 6px solid #fffef9;
  box-shadow: 0 28px 54px -22px rgba(10, 66, 58, 0.5);
}
.chero__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chero__ph--land {
  aspect-ratio: 4 / 3;
}
.chero__ph--1 {
  top: 4%;
  left: 3%;
  transform: rotate(-7deg);
}
.chero__ph--2 {
  top: 0%;
  left: 28%;
  transform: rotate(4deg);
}
.chero__ph--3 {
  top: 6%;
  right: 4%;
  transform: rotate(7deg);
}
.chero__ph--4 {
  top: 35%;
  left: -2%;
  transform: rotate(5deg);
}
.chero__ph--5 {
  top: 30%;
  right: -1%;
  transform: rotate(-6deg);
}
.chero__ph--6 {
  bottom: 4%;
  left: 6%;
  transform: rotate(7deg);
}
.chero__ph--7 {
  bottom: -3%;
  left: 30%;
  transform: rotate(-5deg);
}
.chero__ph--8 {
  bottom: 5%;
  right: 6%;
  transform: rotate(-8deg);
}
.chero__ph--9 {
  bottom: -2%;
  right: 28%;
  transform: rotate(5deg);
}
.chero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    58% 56% at 50% 47%,
    rgba(247, 243, 231, 0.95) 0%,
    rgba(247, 243, 231, 0.7) 66%,
    rgba(247, 243, 231, 0.52) 100%
  );
}
.chero__crumbs {
  position: absolute;
  top: clamp(6.5rem, 13vh, 9rem);
  left: 0;
  right: 0;
  z-index: 3;
}
.chero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
  padding: clamp(8.5rem, 16vh, 11rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
.chero .eyebrow--pill {
  margin-inline: auto;
  margin-bottom: 0.6rem;
}
.chero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.9rem, 7vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.chero__title em {
  font-style: italic;
  color: var(--teal);
}
.chero__lead {
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 50ch;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .chero__ph--2,
  .chero__ph--7,
  .chero__ph--9 {
    display: none;
  }
  .chero__ph {
    width: clamp(108px, 30vw, 158px);
  }
}
.crumbs--light {
  text-shadow: 0 1px 12px rgba(7, 51, 42, 0.55);
}
.crumbs.crumbs--light a {
  color: #fff;
}
.crumbs.crumbs--light a:hover {
  color: var(--cream);
}
.crumbs--light .crumbs__current {
  color: var(--lime);
}
.crumbs--light .crumbs__sep {
  color: rgba(251, 247, 236, 0.7);
}

/* 10% gives-back — seal left, copy right (v3, narrower) */
.pledge10 {
  background: var(--teal-900);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.pledge10::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34%;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(221, 224, 140, 0.12),
    transparent 70%
  );
  pointer-events: none;
}
.pledge10__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  justify-content: center;
}
.pledge10 .btn--solid {
  white-space: nowrap;
}
.pledge10__seal {
  position: relative;
  flex: none;
  width: clamp(180px, 21vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  border: 1.5px solid rgba(221, 224, 140, 0.55);
}
.pledge10__seal::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(221, 224, 140, 0.22);
}
.pledge10__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(4.4rem, 8vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--lime);
}
.pledge10__seal small {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 247, 236, 0.6);
}
.pledge10__body {
  max-width: 48ch;
}
.pledge10__logo {
  display: block;
  height: clamp(50px, 6vw, 74px);
  width: auto;
  margin-bottom: 1.2rem;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.pledge10__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 0.7rem;
}
.pledge10__title em {
  font-style: italic;
  color: var(--lime);
}
.pledge10__text {
  color: rgba(251, 247, 236, 0.78);
  font-size: 1.06rem;
  margin-bottom: 1.6rem;
}
.pledge10 .btn--solid {
  background: var(--lime);
  color: var(--teal-900);
}
.pledge10 .btn--solid:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}
@media (max-width: 860px) {
  .pledge10__inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: start;
  }
}

/* Home — full-screen video banner */
.vbanner {
  position: relative;
  min-height: clamp(560px, 92vh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--teal-900);
  color: var(--cream);
  text-align: center;
}
.vbanner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vbanner__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(7, 51, 42, 0.78) 0%,
    rgba(7, 51, 42, 0.5) 55%,
    rgba(7, 51, 42, 0.62) 100%
  );
}
.vbanner__inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
}
.vbanner .eyebrow--light {
  justify-content: center;
  margin-bottom: 1.2rem;
}
.vbanner__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.vbanner__title em {
  font-style: italic;
  color: var(--lime);
}
.vbanner__sub {
  color: rgba(251, 247, 236, 0.85);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  max-width: 54ch;
  margin: 1.3rem auto 2.2rem;
}
.vbanner .btn--solid {
  background: var(--lime);
  color: var(--teal-900);
}
.vbanner .btn--solid:hover {
  background: var(--lime-700);
  color: var(--teal-900);
}

/* event meta — raised amount + partner */
.program__raised {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.program__raised b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--teal);
}
.program__raised span {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.program__partner {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.8rem;
}
.program__partner b {
  color: var(--teal);
  font-weight: 600;
}

/* event videos */
.evideo {
  background: var(--bg-2);
}
.evideo__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.evideo__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--teal-900);
  box-shadow: 0 40px 80px -50px rgba(10, 66, 58, 0.5);
}
.evideo__item video,
.evideo__item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.evideo__cap {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .evideo__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Logo marquee (partners) ---------- */
.lmarquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.lmarquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  width: max-content;
  will-change: transform;
}
.lmarquee__logo {
  height: clamp(46px, 6vw, 70px);
  aspect-ratio: 1094 / 506;
  width: auto;
  display: block;
  opacity: 0.6;
  transition: opacity 0.35s var(--ease);
}
.lmarquee__logo:hover {
  opacity: 1;
}

/* Partner brands — two premium logo tiles (no marquee) */
.pbrands__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
}
.pbrand {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  box-shadow: 0 44px 88px -54px rgba(16, 58, 50, 0.45);
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.pbrand:hover {
  transform: translateY(-7px);
  box-shadow: 0 70px 110px -54px rgba(16, 58, 50, 0.55);
}
.pbrand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.pbrand:hover img {
  transform: scale(1.06);
}
.pbrand__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.18) 64%,
    rgba(0, 0, 0, 0.62)
  );
  opacity: 0.96;
  pointer-events: none;
}
.pbrand__badge {
  position: absolute;
  top: clamp(1.1rem, 2.4vw, 1.7rem);
  right: clamp(1.1rem, 2.4vw, 1.7rem);
  z-index: 2;
  background: var(--lime);
  color: var(--teal-900);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 100px;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.35);
}
.pbrand__info {
  position: absolute;
  left: clamp(1.5rem, 3vw, 2.4rem);
  right: clamp(1.5rem, 3vw, 2.4rem);
  bottom: clamp(1.4rem, 3vw, 2.1rem);
  z-index: 2;
  transform: translateY(6px);
  transition: transform 0.5s var(--ease);
}
.pbrand:hover .pbrand__info {
  transform: none;
}
.pbrand__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.pbrand__role {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
}
@media (max-width: 720px) {
  .pbrands__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* =========================================================
   EVENT DETAIL PAGE
   ========================================================= */
.ehero {
  position: relative;
  min-height: clamp(560px, 90vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--teal-900);
  color: var(--cream);
  text-align: center;
}
.ehero__photo {
  z-index: 0;
  transform: scale(1.05);
}
.ehero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(7, 51, 42, 0.88) 0%,
    rgba(7, 51, 42, 0.42) 55%,
    rgba(7, 51, 42, 0.6) 100%
  );
}
.ehero__inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  padding: clamp(8rem, 16vh, 11rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
.ehero .crumbs {
  justify-content: center;
}
.ehero .eyebrow--light {
  justify-content: center;
  margin: 1rem auto 1.2rem;
}
.ehero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin-bottom: 1.2rem;
}
.ehero__title em {
  font-style: italic;
  color: var(--lime);
}
.ehero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.86rem;
  color: rgba(251, 247, 236, 0.72);
  letter-spacing: 0.02em;
}
.ehero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.ehero__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
}
.ehero__lead {
  max-width: 60ch;
  margin: 1.1rem auto 1.7rem;
  color: rgba(251, 247, 236, 0.86);
  font-size: clamp(1.04rem, 1.4vw, 1.2rem);
  line-height: 1.62;
}
.ehero__chips {
  justify-content: center;
}

.estats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--line-light);
}
.estats .stat__num--text {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}
@media (max-width: 760px) {
  .estats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 460px) {
  .estats__grid {
    grid-template-columns: 1fr;
  }
}

.article__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.article__head .eyebrow--pill {
  margin-inline: auto;
}

/* Event "From the night" — hover-pause auto-scroll marquee */
.emarquee {
  overflow: hidden;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.emarquee__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
}
.emarquee__item {
  flex: none;
  position: relative;
  height: clamp(300px, 32vw, 460px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
  cursor: pointer;
}
.emarquee__item img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 1.1s var(--ease);
}
.emarquee__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7, 51, 42, 0.45));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.emarquee:hover .emarquee__item img {
  transform: scale(1.03);
}
.emarquee__foot {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  display: flex;
  justify-content: center;
}
@media (max-width: 600px) {
  .emarquee__item {
    height: clamp(240px, 64vw, 360px);
  }
}

.evid {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 50px 92px -46px rgba(10, 66, 58, 0.55);
  background: var(--teal-900);
}
.evid__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- How we work (transparency + team) ---------- */
.howgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.howcard {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.howcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -32px rgba(16, 58, 50, 0.25);
}
.howcard__no {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--lime-700);
}
.howcard h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
  margin: 0.4rem 0 0.8rem;
  letter-spacing: -0.01em;
}
.howcard p {
  color: var(--ink-soft);
  font-size: 1.04rem;
  max-width: 46ch;
}
@media (max-width: 760px) {
  .howgrid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Breadcrumbs ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.crumbs--center {
  justify-content: center;
}
.crumbs a {
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.crumbs a:hover {
  color: var(--teal);
}
.crumbs__sep {
  display: inline-flex;
  color: var(--ink-faint);
}
.crumbs__sep svg {
  width: 14px;
  height: 14px;
  display: block;
}
.crumbs__current {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal],
  [data-card] {
    opacity: 1 !important;
    transform: none !important;
  }
}