/* ============================================================
   HOMEPAGE (Figma 2361:2545, More Better master copy 2026-09-24)
   Loaded after theme.css on / only. Every rule is scoped to
   main.hp so nothing here reaches the nav or the footer.
   Behaviour (carousel drift, hover states, chips, sticky giving
   header) follows spinehope-proposals.netlify.app/spinehope-homepage.html.
   ============================================================ */

/* ---- Hand-drawn edges ----
   More Better draws a 5px ring in the element's own colour and runs it
   through an feTurbulence displacement (filters #hp-*-wavy, defined once at
   the top of <main>). The ring sits behind the content, so only the
   roughened outer edge shows. */
.hp { display: block; background: #fff; }
.hp .hp-wavy { position: relative; isolation: isolate; }
.hp .hp-wavy::before {
  content: ""; position: absolute; inset: -2.5px; z-index: -1;
  border: 5px solid var(--hp-ring, currentColor);
  border-radius: calc(var(--hp-radius, 0px) + 2.5px);
  background: var(--hp-ring, transparent);
  pointer-events: none;
  filter: var(--hp-filter, url(#hp-card-wavy));
}
.hp .d-badge { --hp-radius: 2px; --hp-filter: url(#hp-badge-wavy); position: relative; isolation: isolate; }
.hp .d-badge::before {
  content: ""; position: absolute; inset: -2.5px; z-index: -1;
  border: 5px solid var(--hp-ring, var(--grass, #A7C434));
  border-radius: 4.5px; pointer-events: none;
  filter: url(#hp-badge-wavy);
}
.hp .d-badge { white-space: nowrap; }
.hp .d-badge--grass { --hp-ring: var(--grass, #A7C434); }
.hp .d-badge--sunny { --hp-ring: var(--sunny, #FFD100); }
.hp .hp-badge--g400 { background: var(--grass-400, #BDD267); --hp-ring: var(--grass-400, #BDD267); }

/* ---- Hero (2241:2793) ----
   The design is a 1512 x 1001 video player. There is no video yet, so the
   still stays and the player controls are left out: controls that do nothing
   would be a broken promise. */
.hp .home-hero { height: min(66.2vw, 1001px); min-height: 560px; border-radius: 0 0 16px 16px; }
.hp .home-hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }

/* ---- Hero content strip (2361:2560) ---- */
.hp .home-hero-strip { padding: 0 40px; margin-top: -76px; }
.hp .home-hero-card {
  --hp-ring: var(--sunny, #FFD100); --hp-radius: 24px; --hp-filter: url(#hp-mission-wavy);
  max-width: 1360px; min-height: 266px;
  padding: 24px 40px; gap: 12px; justify-content: center;
  box-shadow: none;
}
.hp .home-hero-text h1 { max-width: 772px; }
.hp .home-hero-text p { max-width: 772px; }

/* ---- Faces of SpineHope (2361:2786) ----
   Header, then the carousel, then "Read their story" under it, as in the
   frame. No arrow buttons: the design has none and the strip drifts on its
   own. The pause toggle stays for keyboard and screen reader users but is
   only drawn while it has focus (WCAG 2.2.2). */
.hp .hp-faces { padding: 96px 80px; gap: 28px; }
.hp .hp-faces .d-headline { gap: 12px; }
.hp .hp-faces .d-body { font-size: 18px; color: var(--neutral-900, #171211); max-width: 586px; }
.hp .d-faces { gap: 0; }
.hp .d-faces-controls { position: relative; height: 0; }
.hp .d-faces-btn.hp-focus-only {
  position: absolute; left: 50%; top: -52px; transform: translateX(-50%);
  opacity: 0; pointer-events: none;
}
.hp .d-faces-btn.hp-focus-only:focus-visible { opacity: 1; pointer-events: auto; }
.hp .hp-faces-cta { align-self: center; }

/* ---- Theory of change (2361:2923) ---- */
.hp .hp-impact { padding: 40px 64px 80px; }
.hp .hp-impact .d-why { gap: 44px; padding: 48px; border: 1px solid var(--magnolia, #FDF9F1); }
.hp .hp-impact .d-headline { gap: 10px; }
.hp .hp-impact .d-h3 { color: var(--grass-900, #2D3113); }
.hp .hp-impact .d-body { font-size: 18px; color: #22250E; max-width: 692px; text-align: center; }
.hp .hp-impact .d-steps { gap: 16px; }
.hp .hp-impact .d-step { gap: 10px; }
.hp .hp-impact .d-step-art { width: 142px; height: 142px; }
/* Each illustration keeps its own drawn size inside the 142 square, as in
   the frame (spine 55 x 128, stethoscope 112 x 112, ambulance 130 x 132,
   glasses 127 x 104). */
.hp .hp-impact .d-step-art img { width: auto; height: auto; max-width: 142px; max-height: 142px; object-fit: contain; }
.hp .hp-impact .d-step-title { max-width: 240px; }
.hp .hp-impact .d-step-body { max-width: 240px; color: var(--grass-900, #2D3113); }
.hp .hp-impact .d-step:nth-child(3) .d-step-body { max-width: 296px; }

/* ---- Programs + stats (2366:3325) ---- */
.hp .hp-programs { padding: 96px 80px; gap: 112px; }
.hp .hp-programs-block { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 100%; }
.hp .hp-programs-block .d-headline { gap: 12px; }
.hp .hp-programs .d-body { font-size: 18px; max-width: 590px; text-align: center; }
.hp .hp-programs-block > * { width: 100%; }
.hp .d-progcards--home { gap: 24px; flex-wrap: nowrap; }
.hp .d-progcards--home .d-progcard { flex: 0 1 380px; }
.hp .d-progcards--home .d-progcard::after { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%); }
/* Titles sit bottom-left, like /programs. */
.hp .d-progcards--home .d-progcard-body { align-items: flex-start; text-align: left; gap: 0; }
/* Hidden copy takes no room, so a resting title sits 24px off the bottom. */
.hp .d-progcards--home .d-progcard-body p,
.hp .d-progcards--home .d-progcard-cta { margin-top: 0; }
.hp .d-progcards--home .d-progcard:hover .d-progcard-body p,
.hp .d-progcards--home .d-progcard:focus-within .d-progcard-body p,
.hp .d-progcards--home .d-progcard:hover .d-progcard-cta,
.hp .d-progcards--home .d-progcard:focus-within .d-progcard-cta { margin-top: 12px; }
.hp .d-progcard:focus-visible { outline: 3px solid var(--carbon, #28201C); outline-offset: 3px; }
.hp .d-progcard-cta { border: 1px solid var(--neutral-200, #F1EDE5); }

.hp .d-stats {
  --hp-ring: var(--grass-400, #BDD267); --hp-radius: 24px; --hp-filter: url(#hp-card-wavy);
  padding: 40px 0; gap: 24px;
  box-shadow: 0 20px 24px -4px rgba(10,13,18,.08), 0 8px 8px -4px rgba(10,13,18,.03), 0 3px 3px -1.5px rgba(10,13,18,.04);
}
.hp .d-stats .d-headline { gap: 8px; padding: 0 24px; }
.hp .d-stats .d-body { font-size: 18px; color: var(--grass-900, #2D3113); opacity: .9; text-align: center; max-width: none; }
.hp .d-stats-grid { flex-wrap: nowrap; }
.hp .d-stat { flex: 1 1 0; min-width: 0; }
.hp .d-stat-label { opacity: .8; }

/* ---- High-impact giving communities (2398:3110) ----
   Header pinned on the left while the five tier cards scroll past. */
.hp .hp-giving { padding: 96px 80px; }
.hp .hp-giving-split { display: flex; gap: 56px; align-items: flex-start; width: 100%; }
.hp .hp-giving-head {
  position: sticky; top: 128px;
  flex: 0 0 436px; max-width: 436px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding-top: 64px; text-align: left;
}
.hp .hp-giving-desc { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hp .hp-giving-desc p { font-size: 20px; line-height: 1.6; color: var(--neutral-900, #171211); max-width: 398px; margin: 0; }
.hp .hp-tiers { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.hp .hp-tier {
  --hp-ring: var(--neutral-200, #F1EDE5); --hp-radius: 24px; --hp-filter: url(#hp-card-wavy);
  display: flex; align-items: center; justify-content: center; gap: 64px;
  padding: 24px; border-radius: 24px;
  background: var(--neutral-200, #F1EDE5);
  text-align: center;
}
.hp .hp-tier--sunny { --hp-ring: var(--sunny, #FFD100); background: var(--sunny, #FFD100); }
.hp .hp-tier-content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hp .hp-tier-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hp .hp-tier-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -.5px; color: #211E1B; margin: 0; }
.hp .hp-tier-sub { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.hp .hp-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hp .hp-chip {
  width: 80px; height: 80px; padding: 8px 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--neutral-300, #E5E1D8); border-radius: 12px;
  font-family: 'Fredoka', system-ui, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.5px;
  color: var(--carbon, #28201C); cursor: pointer;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hp .hp-chip:hover { border-color: var(--grass-500, #A7C434); }
.hp .hp-chip:active { transform: translateY(1px); }
.hp .hp-chip[aria-pressed="true"] { background: var(--grass-500, #A7C434); border-color: var(--grass-500, #A7C434); }
.hp .hp-chip:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 3px; }
.hp .hp-chip--wide { width: auto; height: 110px; padding: 12px 32px; border-radius: 16px; font-size: 28px; letter-spacing: 0; cursor: default; }
.hp .hp-custom {
  width: 100%; max-width: 356px; padding: 14px 20px;
  border: 1px solid var(--neutral-400, #D0C4B8); border-radius: 9999px;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px;
  background: #fff; color: var(--carbon, #28201C); text-align: center;
}
.hp .hp-custom:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.hp .hp-tier-ctas { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hp .hp-tier-cta { width: 100%; justify-content: center; border-width: 1px; cursor: pointer; }
.hp .hp-tier-cta[disabled] { opacity: .7; cursor: default; }
.hp .hp-tier-cta:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 3px; }
.hp .hp-tier-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  color: var(--carbon, #28201C);
  transition: background .15s ease;
}
.hp .hp-tier-link:hover { background: rgba(0,0,0,.05); }
.hp .hp-tier-link svg { width: 16px; height: 16px; flex: none; }
.hp .hp-tier-link:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.hp .hp-tier-photo { flex: 0 0 377px; height: 387px; border-radius: 24px; overflow: hidden; }
.hp .hp-tier-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }

/* ---- Story highlight (2895:17618) ---- */
.hp .hp-story { padding: 80px; }
.hp .hp-story-split { display: flex; align-items: center; justify-content: center; gap: 64px; width: 100%; }
.hp .hp-story-photo { flex: 0 1 689px; height: 509px; border-radius: 20px; overflow: hidden; }
.hp .hp-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp .hp-story-copy { flex: 0 1 467px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; text-align: left; }
.hp .hp-story-copy .ty-h4 { white-space: nowrap; }
.hp .hp-story-copy p { font-size: 18px; line-height: 1.6; color: var(--neutral-900, #171211); max-width: 467px; margin: 0; }

/* ---- Tier interest pop-up (same component as /give) ---- */
#interest-modal[hidden], #interest-modal [hidden] { display: none !important; }
body.d-modal-open { overflow: hidden; }
.d-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(40, 32, 28, .6);
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.d-modal-card {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--magnolia, #FDF9F1);
  border: 3px solid var(--neutral-200, #F1EDE5);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 5px 2.5px rgba(10,13,18,.04), 0 32px 64px rgba(10,13,18,.14);
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--carbon, #28201C);
  text-align: left;
}
.d-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 9999px;
  background: #fff; border: 1px solid var(--neutral-300, #E5E1D8);
  color: var(--carbon, #28201C);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
}
.d-modal-close svg { width: 20px; height: 20px; }
.d-modal-close:hover { background: var(--neutral-200, #F1EDE5); }
.d-modal-head { padding-right: 48px; }
.d-modal-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 500; line-height: 1.12; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0;
}
.d-modal-sub { font-size: 17px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 8px 0 0; }
.d-modal-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.d-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--carbon, #28201C); }
.d-field input, .d-field textarea {
  width: 100%; max-width: 100%;
  background: #fff;
  border: 1px solid var(--neutral-400, #D0C4B8);
  border-radius: 9999px;
  padding: 14px 20px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.5;
  color: var(--carbon, #28201C);
}
.d-field textarea { border-radius: 16px; resize: vertical; min-height: 112px; }
.d-field input::placeholder, .d-field textarea::placeholder { color: var(--neutral-600, #5C534D); }
.d-field input:focus-visible, .d-field textarea:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.d-modal-submit { width: 100%; justify-content: center; margin-top: 4px; }
.d-modal-submit[disabled] { opacity: .6; cursor: default; }
.d-modal-submit:focus-visible, .d-modal-close:focus-visible, .d-modal-success .d-btn-dark:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--magnolia, #FDF9F1), 0 0 0 4px var(--carbon, #28201C);
}
.d-modal-error { font-size: 14px; line-height: 1.5; color: var(--error-text, #B42318); margin: 0; }
.d-modal-fine { font-size: 13px; line-height: 1.5; color: var(--neutral-600, #5C534D); text-align: center; margin: 0; }
.d-modal-success { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; margin-top: 24px; }
.d-modal-success-text { font-size: 18px; line-height: 1.6; margin: 0; color: var(--carbon, #28201C); }
.d-modal-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Responsive. MBP designed 1512 only; these keep the same
   parts in the same order at the site's breakpoints.
   ============================================================ */
@media (max-width: 1280px) {
  .hp .hp-tier { gap: 32px; }
  .hp .hp-tier-photo { flex-basis: 300px; height: 340px; }
  .hp .hp-giving-head { flex-basis: 340px; }
}
@media (max-width: 1100px) {
  .hp .hp-faces, .hp .hp-programs, .hp .hp-giving { padding: 72px 40px; }
  .hp .hp-impact { padding: 24px 40px 72px; }
  .hp .hp-story { padding: 72px 40px; }
  .hp .hp-programs { gap: 72px; }
  .hp .home-hero-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; min-height: 0; }
  .hp .d-progcards--home { flex-wrap: wrap; }
  .hp .d-progcards--home .d-progcard { flex: 1 1 300px; }
  .hp .d-stats-grid { flex-wrap: wrap; }
  .hp .d-stat { flex: 1 1 30%; }
  /* The pinned header needs a side column; stacked, it scrolls normally. */
  .hp .hp-giving-split { flex-direction: column; gap: 40px; }
  .hp .hp-giving-head { position: static; flex: none; max-width: none; padding-top: 0; }
  .hp .hp-tier-photo { flex-basis: 320px; }
  .hp .hp-story-split { flex-direction: column; align-items: stretch; gap: 40px; }
  .hp .hp-story-photo { flex: none; height: auto; aspect-ratio: 689 / 509; }
  .hp .hp-story-copy { flex: none; }
}
@media (max-width: 720px) {
  .hp .home-hero { height: 62vh; min-height: 420px; }
  .hp .hp-tier { flex-direction: column-reverse; align-items: stretch; gap: 24px; padding: 16px 16px 24px; }
  .hp .hp-tier-content { flex: none; }
  .hp .hp-tier-cta { max-width: 356px; }
  .hp .hp-tier-photo { flex: none; width: 100%; height: auto; aspect-ratio: 377 / 300; border-radius: 16px; }
  .hp .hp-tier-title { font-size: 32px; }
  .hp .hp-tier-sub { font-size: 18px; }
  .hp .hp-story-copy .ty-h4 { white-space: normal; }
  .hp .d-badge { white-space: normal; height: auto; min-height: 36px; padding: 6px 12px; text-align: center; }
}
@media (max-width: 640px) {
  .hp .hp-faces, .hp .hp-programs, .hp .hp-giving, .hp .hp-story { padding: 56px 20px; }
  .hp .hp-impact { padding: 16px 16px 56px; }
  .hp .hp-impact .d-why { padding: 32px 20px; gap: 32px; }
  .hp .hp-impact .d-step-art { width: 112px; height: 112px; }
  .hp .hp-impact .d-step-art img { max-width: 112px; max-height: 112px; }
  .hp .home-hero-strip { padding: 0 12px; margin-top: -48px; }
  .hp .home-hero-card { padding: 28px 20px; }
  .hp .d-stat { flex: 1 1 45%; }
  .hp .hp-giving-desc p { font-size: 18px; }
  .hp .hp-chips { gap: 8px; }
  .hp .hp-chip { width: 68px; height: 68px; font-size: 21px; }
  .hp .hp-chip--wide { width: auto; height: 88px; font-size: 24px; }
  .d-modal { padding: 12px; align-items: flex-start; }
  .d-modal-card { padding: 28px 20px; border-radius: 20px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .d-modal-grid { grid-template-columns: 1fr; }
  .d-modal-title { font-size: 26px; }
  .d-modal-sub { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp .hp-chip, .hp .hp-tier-link { transition: none; }
}

/* ---- Fidelity pass 2026-09-24 (Astra review, verified against the frame) ---- */
/* Faces carousel (2444:4439): cards 296 x 338 at rest, 336 wide in focus with
   a 243px photo (~348 tall). The strip keeps the mock-up's grow behaviour but
   at the frame's sizes; the shadow room under the track is overlapped by the
   CTA so the section is 814 tall as in the frame, not 963. */
.hp .d-faces { --fw: 296px; --fh: 338px; --fw-on: 336px; --fh-on: 348px; }
/* Isabel 10-13: the strip runs full bleed past the section's side padding,
   and the lit card's shadow (her five-layer drop shadow, 2444:4439) sits on
   the card itself with 120px of room below, so the viewport no longer cuts
   it off in a hard line. The room is overlapped by the CTA (z-index 1). */
.hp .hp-faces .d-faces { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.hp .d-faces-viewport { height: calc(var(--fh-on) + 120px); margin-bottom: -120px; }
.hp .d-faces-track { padding-top: 0; padding-bottom: 120px; }
.hp .d-fcard.is-active { box-shadow: 0 232px 65px rgba(48,43,30,0), 0 149px 59px rgba(48,43,30,.01), 0 84px 50px rgba(48,43,30,.05), 0 37px 37px rgba(48,43,30,.09), 0 9px 20px rgba(48,43,30,.1); }
.hp .d-fcard.is-active::after { box-shadow: none; }
.hp .d-fcard { transition: background .32s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1), width .38s cubic-bezier(.22,1,.36,1), height .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1); }
.hp .hp-faces-cta { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .hp .d-faces { --fw: 220px; --fh: 290px; --fw-on: 252px; --fh-on: 306px; }
}
/* Theory of change heading is Grass 900 in the frame (ty-h3 defaults to Carbon). */
.hp .hp-impact .ty-h3 { color: var(--grass-900, #2D3113); }
/* Stats banner (2366:3411): 4px between header, grid and button; the five
   groups centre vertically so the two-line caption rises. */
.hp .d-stats { gap: 4px; }
.hp .d-stats-grid { align-items: center; }
/* Tier CTAs use the H6 face (Fredoka Medium 20), per 2887:14102. */
.hp .hp-tier-cta { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; }
/* Story highlight (2895:17618): the copy column is 439 wide (text runs to 467),
   so the pair centres with the photo at x160 and the copy at x913. */
/* Visible keyboard focus on the Sunny CTAs (the theme bevel shadow hides the ring). */
.hp .btn:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 3px; }
@media (min-width: 1101px) {
  .hp .hp-story-copy { flex-basis: 439px; }
  .hp .hp-story-copy p { width: 467px; max-width: none; }
}

/* Phone hero: the portrait crop shows ~42% of the photo's width, and
   the subject's face sits left of centre, so a centred crop cut the face in
   half at 390px (Ken Illingworth's note, 2026-09-24). */
@media (max-width: 900px) {
  .home-hero-media { object-position: 36% 30%; }
}

/* ============================================================
   Desktop fixes, board-readiness pass 2026-10-02
   ============================================================ */
/* Stats banner (3908:11590 and its desktop variant): the "Impact to date"
   label sits on a Magnolia hand-drawn badge at every width. */
.hp .d-stats .d-badge { background: var(--magnolia, #FDF9F1); --hp-ring: var(--magnolia, #FDF9F1); }
/* Stats banner: the fifth caption wraps at 1440 and, centred, lifted its
   number about 35px above the other four. Top-align so the five numbers
   share a line. */
.hp .d-stats-grid { align-items: flex-start; }
/* Tier photos are 3:2. The 377 x 387 box showed only two thirds of the width
   and cut the people at the sides of the Uplift Circle and Bridge photos.
   Those two keep the photo's own shape, so nothing is cropped at any width. */
.hp .hp-tier-photo--wide { height: auto; aspect-ratio: 3 / 2; align-self: center; }
/* Every card keeps the design's 435px height on desktop, including the two
   whose photo is a wide crop (kept wide so no head is cut). */
@media (min-width: 1281px) { .hp .hp-tier { min-height: 435px; } }
/* Amount chips stay on one row when the content column is narrower than
   four 80px chips (1101 to about 1500 wide): they shrink as squares. */
@media (min-width: 721px) and (max-width: 1500px) {
  .hp .hp-chips { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .hp .hp-chip:not(.hp-chip--wide) { flex: 1 1 0; min-width: 0; width: auto; max-width: 80px; height: auto; aspect-ratio: 1; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: -.25px; }
}

/* ============================================================
   Phone frame "Homepage - Mobile" (Figma WmKUes42Xq4m4lJ956wuwe,
   3772:7440, 375 wide), 2026-10-02. 20px gutters, sections 64px
   top and bottom. Mobile type: H3 36/1.2, H4 32/1.2, H5 28/1.25,
   Body Large 18, Body 16.
   ============================================================ */
@media (max-width: 720px) {
  /* ---- Hero (3772:7441): 160px of white for the nav pill, a 794px still,
     and the Sunny card lifted 250px over its lower third, text centred. ---- */
  main.hp { padding-top: 160px; }
  .hp .home-hero { height: 794px; min-height: 0; border-radius: 0 0 16px 16px; background: var(--neutral-900, #171211); }
  /* The still is 720px tall on the dark slab, as in the frame; at that size
     the whole head fits a 375px screen (the crown is at the photo's top edge). */
  .hp .home-hero-media { height: 720px; object-position: 33% 0; }
  .hp .home-hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
  .hp .home-hero-strip { padding: 0 20px; margin-top: -250px; }
  .hp .home-hero-card { padding: 15px; gap: 24px; align-items: center; text-align: center; border-radius: 24px; min-height: 0; }
  .hp .home-hero-text { align-items: center; gap: 12px; width: 100%; }
  .hp .home-hero-text p { font-size: 18px; line-height: 1.6; }
  .hp .home-hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .hp .home-hero-ctas > a { justify-content: center; width: 100%; }

  /* ---- Section rhythm ---- */
  .hp .hp-faces, .hp .hp-programs, .hp .hp-giving, .hp .hp-story { padding: 64px 20px; }
  .hp .hp-faces .d-body, .hp .hp-programs .d-body, .hp .hp-impact .d-body, .hp .d-stats .d-body { font-size: 16px; line-height: 1.6; }

  /* ---- Theory of change (3772:7497): Magnolia card, then a sideways
     scroller of white step cards (236 wide, 16px apart). ---- */
  .hp .hp-impact { padding: 40px 20px 56px; }
  .hp .hp-impact .d-why { padding: 32px 24px; gap: 36px; }
  .hp .hp-impact .d-headline { gap: 10px; }
  .hp .hp-impact .d-steps {
    display: flex; flex-wrap: nowrap; gap: 16px; align-items: stretch;
    width: auto; align-self: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
  }
  .hp .hp-impact .d-step {
    flex: 0 0 236px; scroll-snap-align: start;
    background: #fff; border-radius: 16px; padding: 16px; gap: 12px;
  }
  .hp .hp-impact .d-step-art { width: 142px; height: 142px; }
  .hp .hp-impact .d-step-art img { max-width: 142px; max-height: 142px; }
  .hp .hp-impact .d-step-title { font-size: 18px; max-width: none; }
  .hp .hp-impact .d-step-body, .hp .hp-impact .d-step:nth-child(3) .d-step-body { font-size: 16px; max-width: none; }
  .hp .hp-impact .sc-dots { margin-top: -16px; }

  /* ---- Programs (3772:7521): a scroller of 287 x 475 cards, 24px apart,
     each showing its description and button (hover-only on desktop). ---- */
  .hp .hp-programs { gap: 112px; --sc-dot: var(--grass-900, #2D3113); }
  .hp .hp-programs-block { gap: 36px; }
  .hp .d-progcards--home {
    flex-wrap: nowrap; justify-content: flex-start; gap: 24px;
    width: auto; align-self: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px;
  }
  .hp .d-progcards--home .d-progcard { flex: 0 0 287px; max-width: none; height: 475px; scroll-snap-align: start; text-align: left; }
  .hp .d-progcards--home .d-progcard-body { gap: 12px; padding: 0 32px 24px; }
  .hp .d-progcards--home .d-progcard-body h3 { font-size: 28px; line-height: 1.25; }
  .hp .d-progcards--home .d-progcard-body p { font-size: 16px; line-height: 1.6; }
  .hp .d-progcards--home .d-progcard-body p,
  .hp .d-progcards--home .d-progcard-cta { max-height: none; opacity: 1; overflow: visible; margin-top: 0; }
  .hp .d-progcards--home .d-progcard-cta { line-height: 1.6; box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06); }
  .hp .hp-programs .sc-dots { margin-top: -16px; }
  .hp .hp-programs .sc-dots i:not(.is-on) { background: var(--grass-400, #BDD267); }

  /* ---- Impact to date (3908:11590): Magnolia badge, five stats in one column ---- */
  .hp .d-stats { padding: 40px 0; gap: 4px; }
  .hp .d-stats .d-headline { gap: 8px; padding: 0 4px; }
  .hp .d-stats .d-body { padding: 0 8px; }
  .hp .d-stats-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .hp .d-stat { flex: none; padding: 8px 24px; }
  .hp .d-stat-num { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .hp .d-stat-label { font-size: 18px; line-height: 1.6; margin-top: 4px; }
  .hp .d-stats > .btn { font-size: 16px; min-height: 53px; padding: 12px 16px; margin-top: 8px; }

  /* ---- Giving communities (3772:7553) ---- */
  .hp .hp-giving-split { gap: 32px; }
  .hp .hp-giving-head { align-items: center; text-align: center; gap: 16px; }
  .hp .hp-giving-head .d-badge { white-space: nowrap; padding: 0 10px; max-width: 100%; }
  .hp .hp-giving-desc { align-items: center; gap: 10px; }
  .hp .hp-giving-desc p { font-size: 18px; max-width: none; }
  .hp .hp-giving-desc .btn { white-space: nowrap; font-size: 16px; min-height: 53px; padding: 12px 16px; }
  .hp .hp-tiers { gap: 56px; }
  /* Cards: the frame's 5px ring plus 24px padding (16px on the Sunny card). */
  .hp .hp-tier { flex-direction: column; align-items: stretch; gap: 20px; padding: 29px; }
  .hp .hp-tier--sunny { flex-direction: column-reverse; gap: 16px; padding: 21px; }
  .hp .hp-tier-content { flex: none; gap: 24px; }
  .hp .hp-tier--sunny .hp-tier-content { gap: 16px; }
  .hp .hp-tier-title { font-size: 32px; line-height: 1.2; letter-spacing: -.5px; }
  .hp .hp-tier--sunny .hp-tier-title { font-size: 28px; line-height: 1.25; letter-spacing: 0; color: var(--carbon, #28201C); }
  .hp .hp-tier-sub { font-size: 18px; }
  /* Amount chips: two by two, 110px tall. */
  .hp .hp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .hp .hp-chip { width: auto; height: 110px; border-radius: 16px; font-size: 28px; letter-spacing: 0; }
  .hp .hp-chip--wide { grid-column: 1 / -1; justify-self: start; width: 265px; max-width: 100%; height: 110px; padding: 12px 32px; justify-content: flex-start; font-size: 28px; }
  .hp .hp-custom { max-width: none; }
  .hp .hp-tier-ctas { gap: 10px; }
  .hp .hp-tier--sunny .hp-tier-ctas { gap: 12px; }
  .hp .hp-tier-cta { max-width: none; }
  /* Text link: arrow sits next to the label, as on the featured card and on desktop. */
  .hp .hp-tier-link { justify-content: center; min-height: 44px; }
  .hp .hp-tier-photo { flex: none; width: 100%; height: 260px; aspect-ratio: auto; border-radius: 16px; }
  .hp .hp-tier--sunny .hp-tier-photo { height: 240px; }
  .hp .hp-tier-photo--wide, .hp .hp-tier--sunny .hp-tier-photo--wide { height: auto; aspect-ratio: 3 / 2; }

  /* ---- Story highlight (3772:7623): everything centred ---- */
  .hp .hp-story-split { gap: 32px; }
  .hp .hp-story-photo { aspect-ratio: 335 / 247; border-radius: 16px; }
  .hp .hp-story-copy { align-items: center; text-align: center; gap: 24px; }
  .hp .hp-story-copy p { font-size: 16px; max-width: none; }
  .hp .hp-story-copy .btn { font-size: 16px; min-height: 53px; padding: 12px 16px; white-space: nowrap; }
}
/* Card tags stay on one line on phones, as in the design (3913:12037). */
@media (max-width: 720px) { .hp .hp-tier-badge { padding-inline: 8px; } }
@media (max-width: 374px) {
  .hp .hp-giving-head .d-badge { white-space: normal; }
  .hp .hp-tier-badge { letter-spacing: 1.2px; }
  .hp .hp-chip { padding-inline: 8px; }
  .hp .hp-tier-cta { font-size: 16px; padding-inline: 16px; }
  .hp .hp-giving-desc .btn { font-size: 16px; padding: 12px 16px; }
}