/* ================================================================
   LAYOUT — Container, Grid, Section, Stack
   ================================================================ */

.container      { max-width: 1200px;      margin: 0 auto; padding: 0 clamp(1rem,3vw,2rem); }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem,3vw,2rem); }
.container-sm   { max-width: 720px;                 margin: 0 auto; padding: 0 clamp(1rem,3vw,2rem); }

section { padding: 96px 0; }

/* First section on non-hero pages — account for fixed header */
section:first-of-type {
  padding-top: calc(96px + 70px);
}

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

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* ── SECTION HEADER ─────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}
.section-header h2 { font-family: var(--font-display, 'Manrope'), 'Manrope', sans-serif; letter-spacing: -0.025em; color: #1B2F5B; margin-top: .4rem; }
.section-header p  { max-width: 420px; margin-top: .5rem; font-size: .95rem; font-family: 'Manrope', sans-serif; }
.section-header-center { text-align: center; justify-content: center; flex-direction: column; align-items: center; }
.section-header-center p { max-width: 520px; }

/* ── SURFACE ALTERNATING ────────────────────────────────────── */
.surface-white { background: #FFFFFF; }
.surface-alt   { background: #F8F7F4; }
.surface-dark  { background: #1B2F5B; }

/* ── SPACING UTILITIES ──────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mt-4  { margin-top: 2rem; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: .5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

/* ── STICKY DONATE ──────────────────────────────────────────── */
.sticky-donate {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 500;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sticky-donate.visible {
  opacity: 1;
  transform: none;
  pointer-events: all;
}