/* ==========================================================================
   Never Just Exist Ministries — neverjustexist.org
   Single-page marketing site. No build step; plain CSS.

   Structure of this file:
     1.  Design tokens
     2.  Reset & base
     3.  Typography primitives
     4.  Layout primitives (band, container, hairline grid, image slot)
     5.  Buttons & links
     6.  Section 1  — Sticky header
     7.  Section 2  — Hero
     8.  Section 3  — Marquee ticker
     9.  Section 4  — Mission
     10. Section 5  — Impact
     11. Section 6  — Our Story
     12. Section 7  — Luep platform
     13. Section 8  — Giving
     14. Section 9  — Audience routes
     15. Section 10 — Footer
     16. Motion (keyframes + reveal)
     17. Responsive
     18. Reduced motion
   ========================================================================== */


/* 1. Design tokens ========================================================= */

:root {
  /* Colors */
  --cream:            #FDFBF6;   /* page + default band */
  --apricot-tint:     #FBEEDD;   /* impact band, footer */
  --apricot-light:    #FFF7EC;   /* pull-quote strip */
  --mint-tint:        #E9F2EC;   /* marquee, platform band */
  --mint-deep:        #DCE9E1;   /* product image slot fill */
  --slot-fill:        #F5EEE2;   /* hero + story image slots */
  --card-white:       #FFFDF8;   /* tier cards, text on amber buttons */
  --card-white-hover: #FFF3E2;   /* tier card hover */
  --amber:            #E07B2C;   /* primary CTA, giving band, status dot */
  --amber-dark:       #C96A17;   /* hover, stat numbers, emphasis */
  --green:            #2E7A62;   /* eyebrows, marquee diamonds, demo link */
  --ink:              #241E17;   /* body text */
  --ink-amber:        #2B1B0C;   /* text on the giving band */
  --ink-amber-hover:  #3E2915;   /* dark button hover */

  /* Ink alpha ramp (on #241E17) */
  --ink-90: rgba(36, 30, 23, .9);
  --ink-88: rgba(36, 30, 23, .88);
  --ink-76: rgba(36, 30, 23, .76);
  --ink-70: rgba(36, 30, 23, .7);
  --ink-68: rgba(36, 30, 23, .68);
  --ink-66: rgba(36, 30, 23, .66);
  --ink-60: rgba(36, 30, 23, .6);
  --ink-55: rgba(36, 30, 23, .55);
  --ink-50: rgba(36, 30, 23, .5);
  --ink-45: rgba(36, 30, 23, .45);
  --ink-40: rgba(36, 30, 23, .4);
  --ink-24: rgba(36, 30, 23, .24);
  --ink-16: rgba(36, 30, 23, .16);
  --ink-14: rgba(36, 30, 23, .14);
  --ink-12: rgba(36, 30, 23, .12);
  --ink-07: rgba(36, 30, 23, .07);

  /* Ink-on-amber alpha ramp (on #2B1B0C) */
  --ink-amber-78: rgba(43, 27, 12, .78);
  --ink-amber-66: rgba(43, 27, 12, .66);
  --ink-amber-62: rgba(43, 27, 12, .62);

  /* Type */
  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", Helvetica, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1240px;
  --band-pad-y: 104px;
  --band-pad-x: 40px;
  --col-gap: 64px;
  --rule: 1px;

  /* Motion */
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
}


/* 2. Reset & base ========================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

a:hover { color: var(--amber-dark); }

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

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--card-white);
  font-size: 14.5px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--card-white);
}

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


/* 3. Typography primitives ================================================= */

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 28px;
}

.card-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 88px;
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.h2--lg {
  font-size: 56px;
  line-height: 1.05;
}

.h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
}

.lede {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--ink-68);
  text-wrap: pretty;
}


/* 4. Layout primitives ===================================================== */

.band {
  padding: var(--band-pad-y) var(--band-pad-x);
  scroll-margin-top: 72px;      /* clears the 57px sticky header */
}

.band--cream   { background: var(--cream); }
.band--apricot { background: var(--apricot-tint); }
.band--mint    { background: var(--mint-tint); }
.band--amber   { background: var(--amber); color: var(--ink-amber); }

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

/* Two-column split used by mission, story and giving */
.split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--col-gap);
  align-items: start;
}

.split--even { grid-template-columns: 1fr 1fr; align-items: center; }

/* Hairline grid — the 1px gap IS the rule, so borders never double up.
   Every cell must repaint its band background to mask the container color. */
.hairline-grid {
  display: grid;
  gap: var(--rule);
  background: var(--ink-14);
  border: 1px solid var(--ink-14);
}

.hairline-grid > * { background: var(--cream); }
.hairline-grid--apricot > * { background: var(--apricot-tint); }
.hairline-grid--mint    > * { background: var(--mint-tint); }

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

/* Image slots — striped placeholders awaiting client photography.
   Swap the inner <span> for an <img> with object-fit: cover at the same ratio. */
.slot {
  position: relative;
  background-color: var(--slot-fill);
  background-image: repeating-linear-gradient(
    135deg,
    var(--ink-07) 0 2px,
    transparent 2px 11px
  );
  border: 1px solid var(--ink-14);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.slot--lg { padding: 22px; }
.slot--mint { background-color: var(--mint-deep); }

.slot span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* A filled slot drops the stripes and lets the image carry the box. */
.slot--filled {
  background-image: none;
  padding: 0;
  overflow: hidden;
}

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

/* Credit line for imagery that is illustrative rather than documentary.
   Quiet, but present — an image on a donation page should never imply it is
   evidence of a specific operation. */
.slot__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background: rgba(36, 30, 23, .55);
  color: rgba(255, 253, 248, .92);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* 5. Buttons & links ======================================================= */

.btn {
  display: inline-block;
  border-radius: 2px;         /* the only radius on the site */
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1;
}

.btn--primary {
  padding: 16px 34px;
  background: var(--amber);
  color: var(--card-white);
  font-size: 15.5px;
}

.btn--primary:hover { background: var(--amber-dark); color: var(--card-white); }

.btn--ghost {
  padding: 16px 34px;
  border: 1px solid var(--ink-24);
  font-weight: 500;
  font-size: 15.5px;
}

.btn--ghost:hover { border-color: var(--amber); color: inherit; }

.btn--outline {
  padding: 16px 32px;
  border: 1px solid var(--amber);
  color: var(--amber-dark);
  font-size: 15px;
  white-space: nowrap;
}

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

.btn--dark {
  padding: 17px 38px;
  background: var(--ink-amber);
  color: var(--card-white);
  font-size: 16px;
}

.btn--dark:hover { background: var(--ink-amber-hover); color: var(--card-white); }

.link-mono {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-dark);
}


/* 6. Sticky header ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px var(--band-pad-x);
  background: rgba(253, 251, 246, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-12);
}

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

.wordmark:hover { color: inherit; }

.wordmark__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  animation: njePulse 2.8s ease-in-out infinite;
  flex-shrink: 0;
}

.wordmark__text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14.5px;
  letter-spacing: .01em;
}

.site-nav .btn--nav {
  padding: 10px 22px;
  border-radius: 2px;
  background: var(--amber);
  color: var(--card-white);
  font-weight: 600;
}

.site-nav .btn--nav:hover { background: var(--amber-dark); color: var(--card-white); }

/* Hamburger — hidden until <900px, where the five links stop fitting */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--ink-24);
  border-radius: 2px;
  cursor: pointer;
  color: inherit;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }


/* 7. Hero ================================================================== */

.hero {
  position: relative;
  padding: 112px var(--band-pad-x) 84px;
  overflow: hidden;
  scroll-margin-top: 72px;
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__glow--warm {
  background: radial-gradient(110% 85% at 82% 4%,
    rgba(224, 123, 44, .20) 0%, rgba(253, 251, 246, 0) 62%);
}

.hero__glow--cool {
  background: radial-gradient(80% 70% at 8% 92%,
    rgba(46, 122, 98, .13) 0%, rgba(253, 251, 246, 0) 60%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--col-gap);
  align-items: center;
}

.hero__body {
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--ink-68);
  max-width: 600px;
  margin: 0 0 40px;
  text-wrap: pretty;
}

.hero .h1 { margin: 0 0 26px; }
.hero .h1 em { color: var(--amber-dark); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__slot { aspect-ratio: 4 / 5; }


/* 8. Marquee ticker ======================================================== */

.marquee {
  background: var(--mint-tint);
  padding: 15px 0;
  border-top: 1px solid var(--ink-12);
  border-bottom: 1px solid var(--ink-12);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: njeMarquee 42s linear infinite;
}

/* Two identical groups make the -50% loop seamless */
.marquee__group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-66);
  white-space: nowrap;
}

.marquee__sep { color: var(--green); }


/* 9. Mission =============================================================== */

.mission__copy { margin-bottom: 0; }
.mission .h2 { margin: 0 0 28px; }
.mission__body { max-width: 660px; }

.pillars {
  margin-top: 72px;
}

.pillars .cell { padding: 38px 34px; }

.cell__label {
  color: var(--amber-dark);
  margin: 0 0 20px;
}

.pillars .h3 {
  font-size: 29px;
  margin: 0 0 12px;
}

.cell__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-66);
  text-wrap: pretty;
}


/* 10. Impact =============================================================== */

.impact__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.impact__header .h2 { max-width: 800px; }

.impact__note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--ink-50);
  max-width: 260px;
}

.stat { padding: 40px 34px 36px; }

.stat__value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--amber-dark);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;  /* stops reflow as digits tick up */
}

.stat__label {
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-90);
  margin: 0 0 6px;
}

.stat__sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-60);
}

.pull-quote {
  margin-top: 1px;
  border: 1px solid var(--ink-14);
  border-top: 0;
  background: var(--apricot-light);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.pull-quote p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  max-width: 840px;
  text-wrap: pretty;
}


/* 11. Our Story ============================================================ */

.story .h2 {
  line-height: 1.05;
  margin: 0 0 32px;
}

.story__slot { aspect-ratio: 3 / 4; }

.timeline__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-14);
}

.timeline__row:last-child { border-bottom: 0; }

.timeline__label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--amber-dark);
}

.timeline__body {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-76);
  text-wrap: pretty;
}

.timeline__body strong { font-weight: 600; }

/* Kabul row bleeds 20px past the column on both sides */
.timeline__row--highlight {
  background: rgba(224, 123, 44, .12);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.timeline__row--highlight .timeline__body { color: var(--ink-88); }


/* 12. Luep platform ======================================================== */

.platform__top { margin-bottom: 72px; }

.platform .h2 { margin: 0 0 26px; }

.platform__body {
  color: var(--ink-70);
  margin: 0 0 32px;
}

.link-demo {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid rgba(46, 122, 98, .5);
  padding-bottom: 6px;
}

.platform__slot { aspect-ratio: 16 / 11; }

.features .cell { padding: 40px 36px; }

.features .h3 {
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 14px;
}

.features .cell__body {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-68);
}


/* 13. Giving =============================================================== */

.give .eyebrow { color: var(--ink-amber-62); }

.give .h2 {
  line-height: 1.03;
  margin: 0 0 20px;
}

.give__body {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-amber-78);
  text-wrap: pretty;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.tier {
  display: block;
  background: var(--card-white);
  padding: 30px 26px;
  color: var(--ink);
}

.tier:hover { background: var(--card-white-hover); color: var(--ink); }

.tier__amount {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--amber-dark);
  margin: 0 0 12px;
}

.tier__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}

.give__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.give__fineprint {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-amber-66);
}


/* 14. Audience routes ====================================================== */

.routes { padding: 96px var(--band-pad-x); }

.routes .cell { padding: 40px 34px; }

.routes .cell__label {
  color: var(--green);
  margin: 0 0 18px;
}

.routes .h3 {
  font-size: 28px;
  margin: 0 0 12px;
}

.routes .cell__body { margin: 0 0 20px; }


/* 15. Footer =============================================================== */

.site-footer {
  background: var(--apricot-tint);
  padding: 80px var(--band-pad-x) 44px;
  border-top: 1px solid var(--ink-12);
}

.footer__signoff {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 132px);
  line-height: .94;
  letter-spacing: -.03em;
  margin: 0 0 56px;
}

.footer__signoff em { color: var(--amber-dark); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 36px;
  border-top: 1px solid var(--ink-16);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-66);
}

.footer__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 8px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.footer__copyright {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ink-40);
  margin-top: 40px;
}


/* 16. Motion =============================================================== */

@keyframes njeMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes njePulse {
  0%, 100% { opacity: .4; transform: scale(.86); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* Reveal: the hidden state is applied by JS on mount, never in CSS, so that
   content stays visible if scripts fail to load. This class only supplies
   the transition. */
.is-revealable {
  transition:
    opacity .7s var(--ease-reveal),
    transform .7s var(--ease-reveal);
}


/* 17. Responsive =========================================================== */

/* ---- 900–1199px: keep two-column layouts, shrink display type ---- */
@media (max-width: 1199px) {
  :root {
    --band-pad-y: 88px;
    --band-pad-x: 32px;
    --col-gap: 44px;
  }

  .h1 { font-size: 64px; }
  .h2,
  .h2--lg { font-size: 42px; }

  .hero { padding: 88px var(--band-pad-x) 72px; }
  .footer__signoff { margin-bottom: 44px; }

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

  .stat__value { font-size: 52px; }
  .pull-quote p { font-size: 26px; }

  .tiers { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

/* ---- <900px: single column throughout ---- */
@media (max-width: 899px) {
  :root {
    --band-pad-y: 72px;
    --band-pad-x: 24px;
    --col-gap: 40px;
  }

  .h1 { font-size: 44px; }
  .h2,
  .h2--lg { font-size: 34px; }

  /* Header collapses to a hamburger */
  .site-header { padding: 14px var(--band-pad-x); }

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

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--band-pad-x) 20px;
    background: var(--cream);      /* fully opaque — the panel covers page content */
    border-bottom: 1px solid var(--ink-12);
    font-size: 16px;
  }

  .site-nav[hidden] { display: none; }

  .site-nav > a {
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-12);
  }

  .site-nav .btn--nav {
    margin-top: 16px;
    padding: 14px 22px;
    text-align: center;
    border-bottom: 0;
  }

  /* Hero: copy first, image below */
  .hero { padding: 64px var(--band-pad-x) 56px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__body { font-size: 17px; margin-bottom: 32px; }
  .hero__actions .btn { padding: 15px 28px; font-size: 15px; }

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

  /* Stats stay 2-up; every other grid goes single column */
  .hairline-grid--3,
  .hairline-grid--2 { grid-template-columns: 1fr; }
  .stats.hairline-grid { grid-template-columns: repeat(2, 1fr); }

  .lede,
  .platform__body,
  .give__body,
  .timeline__body { font-size: 16.5px; }

  .pillars { margin-top: 48px; }
  .pillars .cell,
  .routes .cell,
  .features .cell { padding: 32px 26px; }

  .stat { padding: 30px 24px 28px; }
  .stat__value { font-size: 42px; }
  .stat__label { font-size: 16px; }

  .impact__header { margin-bottom: 40px; }
  .impact__note { max-width: none; }

  .pull-quote {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 26px;
  }

  .pull-quote p { font-size: 23px; }
  .pull-quote .btn--outline { justify-self: start; }

  /* Timeline label stacks above its text; highlight loses the bleed */
  .timeline__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .timeline__row--highlight {
    margin: 0;
    padding: 28px 20px;
  }

  .platform__top { margin-bottom: 48px; }

  .give__actions .btn--dark { padding: 16px 30px; }

  .routes { padding: var(--band-pad-y) var(--band-pad-x); }

  .site-footer { padding: 64px var(--band-pad-x) 40px; }
  .footer__cols { grid-template-columns: 1fr; row-gap: 32px; }
}

/* ---- <560px: stats to a single column too ---- */
@media (max-width: 559px) {
  .stats.hairline-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }
  .give__actions { align-items: stretch; flex-direction: column; }
  .give__actions .btn--dark { text-align: center; }
}


/* 18. Reduced motion ======================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Marquee pauses; content stays legible at rest */
  .marquee__track { animation-play-state: paused; }

  .wordmark__dot { animation: none; opacity: 1; transform: none; }

  .is-revealable {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

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