/* ============================================================
   Program detail pages: /programs/us-hub, /programs/education,
   /programs/global-outreach, and the two outreach sites that follow the
   global-outreach design language (/programs/ecuador, /programs/nicaragua).
   Figma (More Better master copy s3OB1YtX1ctalxmNGbm2gN, 2026-09-24):
     us-hub-program-page 3672:13519
     education-and-capacity-building-page 3679:21729
     global-outreach-page 3679:22295
   Values are the 1512 artboard; layouts fold at 1100, 720 and 640.
   Class prefix: .pd-
   ============================================================ */

main#main { background: #fff; }

/* Hand-drawn edge. The filter lives in each page (#pd-wavy) so the ring
   works without the shared footer partial. */
.pd-wavy { position: relative; isolation: isolate; }
.pd-wavy::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 5px solid var(--pd-wavy, currentColor);
  pointer-events: none; filter: url(#pd-wavy); z-index: -1;
}
.d-badge.pd-wavy::after { border-radius: 6px; } /* the frame's badge ring reads soft-cornered */
.pd-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hero ---------- */
.pd-hero {
  display: flex; gap: 40px; align-items: stretch;
  padding: 200px 112px 48px;
  background: var(--magnolia, #FDF9F1);
  border-radius: 0 0 32px 32px; overflow: clip;
}
.pd-hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.pd-hero--hub .pd-hero-copy { flex: 0 1 701px; }
.pd-hero-head { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.pd-hero--hub .pd-hero-head { gap: 10px; }
.pd-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(40px, 5.3vw, 80px); line-height: 1.1; letter-spacing: -1px;
  color: var(--carbon, #28201C); margin: 0;
}
.pd-sub {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 22px; line-height: 1.3; color: var(--carbon, #28201C);
  max-width: 640px; margin: 0;
}
.pd-hero--hub .pd-sub { max-width: 540px; }
.pd-quote { font-size: 18px; line-height: 1.6; color: #6F6762; max-width: 640px; margin: 0; }
.pd-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
.pd-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.pd-btns > * { white-space: nowrap; }
.pd-fine { font-size: 14px; line-height: 1.6; color: #6F6762; margin: 0; }
.pd-hero-photo { flex: 1 1 0; min-width: 0; max-width: 820px; aspect-ratio: 547 / 496; height: auto; max-height: 640px; margin: 0; border-radius: 24px; overflow: hidden; align-self: flex-end; }
.pd-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Desktop heroes (frames re-pulled 2026-10-02). In all five the cream hero
   runs up behind the pinned nav.
   US Hub 3672:13520, Global Outreach 3679:22335, Education 3679:21769
   (.pd-hero--hub): 720 tall, breadcrumb at the top of the copy column and the
   heading block at its foot, a 547 x 496 photo with the torn edge.
   Ecuador 3767:26760, Nicaragua 3767:27065: copy 590 wide from x=104 starting
   165px down, a 642 x 495 photo with a small radius, 100px under the copy. */
@media (min-width: 1101px) {
  .pd-hero { padding-top: 144px; padding-bottom: 80px; }
  .pd-hero--hub .pd-sub { max-width: 610px; }
  .pd-hero:not(.pd-hero--hub) { padding: 165px 104px 100px; gap: 72px; align-items: flex-start; }
  .pd-hero:not(.pd-hero--hub) .pd-hero-copy { flex: 0 1 590px; justify-content: flex-start; gap: 32px; }
  .pd-hero:not(.pd-hero--hub) .pd-hero-photo {
    flex: 0 1 642px; aspect-ratio: 642 / 495; max-width: none; max-height: none;
    align-self: flex-start; margin: 14px 0 0 auto; border-radius: 12px;
  }
  /* The site's longer label ("Support Ecuador Missions") and the second
     button share one row, as in the frame. */
  .pd-hero:not(.pd-hero--hub) .pd-btns { gap: 12px; }
  .pd-hero:not(.pd-hero--hub) .pd-btns > * { padding-inline: 18px; }
  /* Frame breaks the heading after the country: "Ecuador" / "Global Outreach" / "Program". */
  .pd-title-lead { display: block; }
  /* Frame breaks the education heading as "Education &" / "Capacity" / "Building". */
  .pd-title--stack { max-width: 560px; text-wrap: wrap; }
}
/* Torn photo edge: a ring in the hero's own colour, pushed through the wavy
   filter, eats into the photo. On every hub hero from tablet up; on phones
   only where the phone frame tears it (Global Outreach). */
.pd-hero--hub .pd-hero-photo, .pd-hero-photo--torn { position: relative; }
.pd-hero--hub .pd-hero-photo::after, .pd-hero-photo--torn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 27px;
  border: 7px solid var(--magnolia, #FDF9F1);
  pointer-events: none; filter: url(#pd-wavy);
}

/* Buttons: .btn-primary (Work Sans) and .d-btn-light (Fredoka) as in the
   frame. The light button in the hero keeps its arrow when it has one. */
.pd-btn-sm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px;
  background: #fff; border: 1px solid var(--neutral-200, #F1EDE5);
  color: var(--carbon, #28201C);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  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 var(--ease), transform var(--ease);
}
.pd-btn-sm:hover { background: var(--magnolia, #FDF9F1); transform: translateY(-1px); }
.pd-btn-sm svg { width: 16px; height: 16px; flex: none; }
/* Focus ring: Carbon, not Grass 600. These links sit on cream, yellow, beige
   or (focused patient card) green surfaces where the green ring disappears. */
.pd-hero a:focus-visible, .pd-give a:focus-visible, .pd-give button:focus-visible,
.pd-about a:focus-visible, .pd-faces a:focus-visible, .pd-impact a:focus-visible {
  outline: 3px solid var(--carbon, #28201C); outline-offset: 2px;
}
/* theme.css draws the .btn focus ring as a green box-shadow: put the plain
   button shadow back so only the Carbon outline shows. */
.pd-hero .btn:focus-visible, .pd-give .btn:focus-visible {
  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);
}
/* Breadcrumb links were 22px tall. The padding grows the hit area to 30px and
   the matching negative margin keeps the row (a flex container) the same
   height, so nothing under it moves. */
.pd-hero .d-crumb a { padding-block: 4px; margin-block: -4px; }

/* ---------- About the program + three support cards ---------- */
.pd-about { padding: 112px 64px; display: flex; justify-content: center; }
.pd-about-card { display: flex; gap: 44px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1139px; }
.pd-about-head {
  flex: 0 1 509px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  position: sticky; top: 132px;
}
.pd-about-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--grass-900, #2D3113); margin: 0;
}
.pd-about-head p { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.pd-steps { flex: 0 1 586px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pd-step {
  display: flex; gap: 44px; align-items: center;
  background: var(--magnolia, #FDF9F1); border: 1px solid var(--magnolia, #FDF9F1);
  border-radius: 16px; padding: 48px;
}
.pd-step-art { width: 142px; height: 142px; flex: none; display: flex; align-items: center; justify-content: center; }
.pd-step-art img { display: block; max-width: 100%; height: auto; }
.pd-step-art--care img { width: 110px; }
.pd-step-art--follow img { width: 78px; }
.pd-step-art--capacity img { width: 129px; }
.pd-step-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; color: var(--grass-900, #2D3113); }
.pd-step-title { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.6; margin: 0; color: inherit; }
.pd-step-copy p { font-size: 16px; line-height: 1.6; margin: 0; color: inherit; }

/* Ecuador, Nicaragua: the frame lines the copy up with the hero (x=104, 555
   wide) and starts the cards at x=745. */
@media (min-width: 1101px) {
  .pd-about--site { padding: 120px 104px; justify-content: flex-start; }
  .pd-about--site .pd-about-card { max-width: 1227px; gap: 86px; justify-content: space-between; }
  .pd-about--site .pd-about-head { flex: 0 1 555px; }
}

/* Links to the two outreach sites and the next mission (global outreach). */
.pd-sites { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 18px; }
.pd-site {
  display: flex; align-items: center; gap: 16px;
  padding: 12px; border-radius: 16px;
  background: var(--neutral-200, #F1EDE5); color: var(--carbon, #28201C);
  transition: background var(--ease), transform var(--ease);
}
.pd-site:hover { background: var(--grass-200, #DEE8B6); transform: translateY(-2px); }
.pd-site img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; display: block; }
.pd-site-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-site-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.25; }
.pd-site-meta { font-size: 14px; line-height: 1.5; color: var(--neutral-600, #5C534D); }
.pd-site svg { width: 20px; height: 20px; flex: none; }

/* ---------- Callout banner (Figma "Next Mission Call-Out Section" 3737:21289
   and siblings: 1304 x 189, Sunny 200, hand-drawn edge). The frame also
   carries three round photos that are not in the page. ---------- */
.pd-callout { padding: 0 104px; display: flex; justify-content: center; }
.pd-callout-text {
  --pd-wavy: var(--sunny-200, #FCECA4);
  width: 100%; max-width: 1304px; margin: 0; padding: 56px 64px; border-radius: 24px;
  background: var(--sunny-200, #FCECA4);
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25;
  text-align: center; text-wrap: balance; color: var(--carbon, #28201C);
}

/* ---------- Global Outreach: mission cards (Figma "Mission Updates Section"
   3940:13407; its heading and subtitle are not in the page) ---------- */
/* "Mission Updates Section" (3940:13407): centred H2, 36px, then three 452px cards. */
.pd-missions { padding: 0 104px 96px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.pd-missions-title { margin: 0; text-align: center; color: var(--carbon, #28201C); }
.pd-missions .pd-sites { max-width: 1304px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pd-missions .pd-site {
  flex-direction: column; align-items: stretch; gap: 16px;
  padding: 20px; border-radius: 24px;
  background: #fff; border: 2px solid var(--neutral-200, #F1EDE5);
  box-shadow: 0 4px 6px -1px rgba(10,13,18,.1), 0 2px 4px -2px rgba(10,13,18,.06);
}
.pd-missions .pd-site:hover { background: var(--magnolia, #FDF9F1); }
/* The upcoming mission is the pale yellow card in the frame. */
.pd-missions .pd-site[href="/programs/mission"] { background: var(--sunny-50, #FBF7E7); border-color: var(--sunny-300, #FDE577); }
.pd-missions .pd-site img { width: 100%; height: auto; aspect-ratio: 380 / 195; border-radius: 16px; }
.pd-missions .pd-site-txt { flex: 1 1 auto; gap: 8px; }
.pd-missions .pd-site-name { font-size: 28px; }
.pd-missions .pd-site-meta { font-size: 18px; line-height: 1.6; }
.pd-missions .pd-site { min-height: 452px; }
/* Centred text link at the foot of each card (3941:13265); the card itself is the link. */
.pd-site-more { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 20px; font: 600 16px/1.6 'Work Sans', system-ui, sans-serif; color: var(--carbon, #28201C); }
.pd-missions .pd-site-more svg { width: 16px; height: 16px; align-self: center; }
/* "Next mission" tag sits across the photo's bottom edge without moving the title. */
.pd-site-badge { align-self: center; position: relative; z-index: 1; margin: -34px 0 -18px; }

/* ---------- Faces of SpineHope ---------- */
.pd-faces { display: flex; gap: 56px; align-items: center; padding: 96px 0 96px 80px; overflow: hidden; }
.pd-faces-head { flex: 0 0 497px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pd-faces-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0; max-width: 388px;
}
.pd-faces-head .d-btn-dark { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; }
.pd-faces-strip {
  flex: 1 1 0; min-width: 0;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 8px 80px 8px 4px;
}
.pd-faces-strip::-webkit-scrollbar { display: none; }
.pd-faces-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; width: max-content; }
.pd-face { scroll-snap-align: start; }
.pd-face a {
  --pd-wavy: var(--neutral-200, #F1EDE5);
  width: 296px; height: 338px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; border-radius: 16px;
  background: var(--neutral-200, #F1EDE5);
  color: var(--neutral-900, #171211);
  transition: background .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1);
}
.pd-face a:hover, .pd-face a:focus-visible {
  --pd-wavy: var(--grass-400, #BDD267);
  background: linear-gradient(to bottom, var(--grass-400, #BDD267), var(--grass-600, #859B2B));
  transform: translateY(-4px);
}
.pd-face-photo { flex: 1 1 0; min-height: 0; border-radius: 8px; overflow: hidden; }
.pd-face-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.pd-face a:hover .pd-face-photo img { transform: scale(1.03); }
.pd-face-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; text-align: center; }
.pd-face-place { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: var(--carbon, #28201C); margin-top: -8px; }

/* ---------- Fund this program (Sunny card + Uplift Circle card) ---------- */
.pd-give { padding: 56px; display: flex; justify-content: center; }
.pd-give-card {
  --pd-wavy: var(--sunny, #FFD100);
  width: 100%; max-width: 1400px;
  display: flex; gap: 64px; align-items: center; justify-content: center;
  padding: 56px; border-radius: 24px;
  background: var(--sunny, #FFD100);
}
.pd-give-card:not(.pd-wavy) { border: 5px solid var(--sunny, #FFD100); }
.pd-give-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.pd-give-head { display: flex; flex-direction: column; gap: 24px; max-width: 594px; }
.pd-give-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--grass-900, #2D3113); margin: 0;
  text-wrap: wrap; /* greedy, as the frame breaks it ("Fund a Global Outreach" / "Mission") */
}
/* "Monthly giving community": Magnolia brush label above the heading. */
.pd-give-badge { --pd-wavy: var(--magnolia, #FDF9F1); background: var(--magnolia, #FDF9F1); align-self: flex-start; margin-bottom: -8px; }
.pd-give-lede { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--carbon, #28201C); margin: 0; }
.pd-give-copy .d-btn-dark { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; }

.pd-uplift {
  flex: none; width: 566px; max-width: 100%;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  padding: 64px 44px; border-radius: 24px;
  background: var(--magnolia, #FDF9F1); border: 3px solid var(--neutral-200, #F1EDE5);
  box-shadow: 0 32px 32px rgba(10,13,18,.14), 0 5px 2.5px rgba(10,13,18,.04);
}
.pd-uplift-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(28px, 2.65vw, 40px); line-height: 1.15; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0; text-align: center;
}
.pd-chips { display: flex; gap: 12px; justify-content: center; }
.pd-chip {
  width: 110px; height: 110px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--neutral-300, #E5E1D8); border-radius: 16px;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25;
  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 var(--ease), border-color var(--ease), transform var(--ease);
}
.pd-chip:hover { border-color: var(--grass, #A7C434); transform: translateY(-2px); }
.pd-chip[aria-pressed="true"] { background: var(--grass, #A7C434); border-color: var(--grass, #A7C434); }
.pd-chip:focus-visible { outline: 3px solid var(--carbon, #28201C); outline-offset: 2px; }
.pd-uplift-go {
  width: 100%; justify-content: center; cursor: pointer;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
}
.pd-uplift-go[disabled] { opacity: .7; cursor: progress; }
/* The phone frame tags the card with the giving community's name; the desktop frame does not. */
.pd-uplift-badge { display: none; }
@media (max-width: 720px) { .pd-uplift-badge { display: inline-flex; align-self: center; } }
.pd-uplift-details { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.pd-uplift-details span { display: block; }
.pd-uplift-status { font-size: 14px; line-height: 1.5; color: var(--wine, #6A2729); text-align: center; margin: 0; min-height: 0; }
.pd-uplift-status:empty { display: none; }

/* ---------- Outreach sites (Ecuador, Nicaragua): Art's photos ---------- */
/* Small centred heading over the photo row ("Inside the mission" in the frame). */
.pd-gallery-title { margin: 0 auto 24px; padding: 0 24px; text-align: center; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--carbon, #28201C); }
.pd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 21px; padding: 0 72px 112px; max-width: 1512px; margin: 0 auto; }
.pd-gallery figure { margin: 0; padding: 12px; border-radius: 16px; background: var(--magnolia, #FDF9F1); border: 2px solid var(--neutral-200, #F1EDE5); }
.pd-gallery img { width: 100%; height: auto; aspect-ratio: 418 / 330; object-fit: cover; display: block; border-radius: 10px; }
.pd-gallery figcaption { margin: 12px 4px 2px; font-size: 16px; line-height: 1.5; color: var(--carbon, #28201C); }

.pd-impact { padding: 0 64px 56px; display: flex; justify-content: center; }
.pd-impact-card {
  width: 100%; max-width: 1384px;
  display: flex; gap: 72px; align-items: center;
  padding: 56px; border-radius: 24px;
  background: var(--magnolia, #FDF9F1); border: 3px solid var(--neutral-200, #F1EDE5);
}
.pd-impact-photo { flex: 0 1 680px; min-width: 0; height: 481px; margin: 0; border-radius: 24px; overflow: hidden; }
.pd-impact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-impact-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pd-impact-copy .d-badge--sunny { background: var(--sunny, #FFD100); }
.pd-impact-copy .d-badge { position: relative; isolation: isolate; }
.pd-impact-copy .d-badge::after {
  content: ""; position: absolute; inset: -2px; border-radius: 6px;
  border: 5px solid var(--sunny, #FFD100);
  pointer-events: none; filter: url(#pd-wavy); z-index: -1;
}
.pd-impact-text { font-size: 18px; line-height: 1.6; color: var(--neutral-700, #3D342F); margin: 0; }
.pd-proof {
  margin: 8px 0 0; padding: 0 0 0 16px; border-left: 4px solid var(--grass, #A7C434);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  color: var(--carbon, #28201C);
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .pd-hero { padding-left: 64px; padding-right: 64px; }
  .pd-faces-head { flex-basis: 400px; }
  .pd-give-card { gap: 40px; padding: 48px; }
  .pd-uplift { width: 500px; padding: 48px 32px; }
  .pd-chip { width: 96px; height: 96px; font-size: 24px; }
}
@media (max-width: 1100px) {
  .pd-hero { flex-direction: column; padding: 150px 40px 40px; gap: 32px; }
  .pd-hero-copy, .pd-hero--hub .pd-hero-copy { flex: 1 1 auto; }
  .pd-hero-photo { flex: none; width: 100%; max-width: 640px; height: auto; aspect-ratio: 547 / 496; max-height: none; align-self: center; }
  .pd-about { padding: 80px 40px; }
  .pd-about-card { flex-direction: column; gap: 40px; align-items: stretch; }
  .pd-about-head { position: static; flex: 1 1 auto; }
  .pd-steps { flex: 1 1 auto; }
  .pd-faces { flex-direction: column; align-items: stretch; gap: 32px; padding: 72px 0 72px 40px; }
  .pd-faces-head { flex: none; padding-right: 40px; }
  /* In the stacked layout the strip must keep its own height: with a zero
     flex basis in a column it collapsed to its 16px of padding and the
     patient cards disappeared at every width up to 1100px. */
  .pd-faces-strip { flex: none; padding-right: 40px; }
  .pd-give { padding: 40px; }
  .pd-give-card { flex-direction: column; align-items: stretch; }
  .pd-uplift { width: 100%; }
  .pd-gallery { grid-template-columns: 1fr 1fr; padding: 0 40px 80px; }
  .pd-callout { padding: 0 40px; }
  .pd-callout-text { padding: 40px; font-size: 24px; }
  .pd-missions { padding: 0 40px 72px; }
  .pd-missions .pd-sites { gap: 16px; }
  .pd-missions .pd-site { padding: 14px; }
  .pd-missions .pd-site-name { font-size: 22px; }
  .pd-gallery figure:first-child { grid-column: 1 / -1; }
  .pd-impact { padding: 0 40px 40px; }
  .pd-impact-card { flex-direction: column; align-items: stretch; gap: 32px; padding: 40px; }
  .pd-impact-photo { flex: none; height: 380px; }
}
/* ---- Phones: Figma mobile frames (375 wide, 24px gutters) ----
   US Hub 3934:34432, Education 3935:34485, Global Outreach 3804:30215,
   Ecuador 3920:31446, Nicaragua 3930:32316. Text follows the file's
   "Typography/Mobile" styles: H3 36/1.2, H5 28/1.25, H7 22/1.3, body 16/1.6. */
@media (max-width: 720px) {
  /* Hero: copy starts 160px down (nav pill ends at 122), 12px between the
     blocks, photo 327 x 255 with 24px under it. */
  .pd-hero { padding: 160px 24px 24px; gap: 16px; border-radius: 0 0 24px 24px; }
  .pd-hero-copy { gap: 12px; }
  .pd-hero-head, .pd-hero--hub .pd-hero-head { gap: 12px; }
  /* The breadcrumb wraps as text; an item never breaks inside itself. */
  .pd-hero .d-crumb { flex-wrap: wrap; gap: 0 8px; }
  .pd-hero .d-crumb a, .pd-hero .d-crumb b { white-space: nowrap; }
  .pd-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .pd-sub { font-size: 22px; }
  .pd-quote { font-size: 16px; }
  .pd-actions { gap: 12px; }
  /* Buttons: full width, 56px, one line. */
  .pd-btns { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .pd-btns > * { justify-content: center; min-height: 56px; padding: 12px 16px; font-size: 16px; line-height: 1.6; white-space: nowrap; }
  /* Labels the design shortened ("Support Mission", "Start Application") and
     the site did not: step the type down until the label fits on one line. */
  .pd-btns > .pd-btn--long { font-size: clamp(16px, 4.55vw, 20px); }
  .pd-fine { font-size: 14px; }
  .pd-hero-photo { max-width: none; aspect-ratio: 327 / 255; border-radius: 24px; }
  .pd-hero:has(.pd-title--stack) .pd-hero-photo { width: calc(100% - 14px); aspect-ratio: 313 / 240; }
  /* Smooth photo on phones, except where the phone frame tears it. */
  .pd-hero--hub .pd-hero-photo:not(.pd-hero-photo--torn)::after { display: none; }
  /* Callout (Figma "Family stay callout" 3934:34577 and siblings): Sunny 200
     card, H7 type, after the pillar cards. */
  .pd-callout { padding: 0 24px 24px; }
  .pd-callout-text { padding: 24px; font-size: 22px; line-height: 1.3; }
  .pd-callout-text.pd-wavy::after { display: none; }

  /* About + pillar cards ("Impact rail", 276px cards, 12px apart). */
  .pd-about { padding: 56px 24px; }
  .pd-about-card { gap: 24px; }
  .pd-about-head { gap: 12px; }
  .pd-about-title { font-size: 36px; line-height: 1.2; }
  .pd-about-head p { font-size: 16px; }
  .pd-steps {
    flex-direction: row; align-items: stretch; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
  }
  .pd-step {
    flex: 0 0 276px; flex-direction: column; align-items: center; gap: 12px;
    padding: 20px; min-height: 386px; text-align: center; scroll-snap-align: start;
  }
  .pd-step-art { width: 132px; height: 132px; }
  .pd-step-copy { flex: none; width: 100%; gap: 8px; }
  .pd-step-title { font-size: 18px; }
  .pd-steps + .sc-dots { margin-top: 0; }

  /* Global Outreach: the mission cards scroll sideways ("Our missions
     section" 3943:13404; 260px cards, 12px apart, yellow dots). */
  .pd-missions { display: block; padding: 0 24px 40px; }
  .pd-missions .pd-sites {
    display: flex; flex-direction: row; align-items: stretch; gap: 12px; width: auto; max-width: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -24px; padding: 4px 24px 12px; scroll-padding-inline: 24px;
  }
  .pd-missions .pd-sites + .sc-dots { margin-top: 4px; --sc-dot: var(--sunny, #FFD100); }
  .pd-missions .pd-site { flex: 0 0 260px; padding: 20px; scroll-snap-align: start; }
  .pd-missions .pd-site:hover { transform: none; }
  .pd-missions .pd-site img { aspect-ratio: auto; height: 184px; }
  .pd-missions .pd-site-name { font-size: 22px; line-height: 1.3; }
  .pd-missions-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; text-align: left; margin: 0 0 24px; }
  .pd-missions .pd-site { min-height: 430px; }
  .pd-missions .pd-site-meta { font-size: 16px; }
  .pd-missions .pd-site-more { min-height: 44px; }

  /* Ecuador, Nicaragua: "Inside the mission" as a scroller of framed photos
     ("Gallery card" 3920:31593: 286 wide, 12px padding, 225px photo). */
  .pd-gallery {
    display: flex; align-items: flex-start; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 24px; scroll-padding-inline: 24px;
  }
  .pd-gallery figure {
    flex: 0 0 286px; scroll-snap-align: start; border-radius: 12px;
  }
  .pd-gallery img { aspect-ratio: auto; height: 225px; border-radius: 8px; }
  .pd-gallery + .sc-dots { --sc-dot: var(--sunny, #FFD100); margin: 16px 0 56px; }

  /* Recent impact card ("Impact card" 3920:31607). */
  .pd-impact { padding: 0 24px 56px; }
  .pd-impact-card { padding: 16px; gap: 20px; border-width: 2px; }
  .pd-impact-photo { height: 255px; border-radius: 16px; }
  .pd-impact-copy { gap: 12px; }
  .pd-impact-text { font-size: 16px; }
  .pd-proof { margin: 0; }

  /* Faces of SpineHope ("Faces of SpineHope" 3920:31618): H3 heading, full
     width button, 296 x 338 cards 16px apart. */
  .pd-faces { padding: 24px 0; gap: 24px; }
  .pd-faces-head { padding: 0 24px; gap: 16px; }
  .pd-faces-title { font-size: 36px; line-height: 1.2; max-width: none; }
  .pd-faces-head .d-btn-dark { width: 100%; justify-content: center; min-height: 56px; white-space: nowrap; }
  .pd-faces-strip { padding: 8px 24px; scroll-padding-inline: 24px; scroll-snap-type: x mandatory; }
  .pd-faces-track { gap: 16px; }
  .pd-face a { width: 296px; height: 338px; }

  /* Fund card ("Donation Callout" 3932:28615). */
  .pd-give { padding: 32px 24px 56px; }
  .pd-give-card, .pd-give-card:not(.pd-wavy) { padding: 20px; gap: 24px; border-width: 0; }
  .pd-give-copy { gap: 16px; }
  .pd-give-head { gap: 16px; max-width: none; }
  .pd-give-title { font-size: 36px; line-height: 1.2; text-wrap: balance; }
  .pd-give-lede { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; }
  .pd-uplift { padding: 24px 16px; gap: 16px; border-width: 2px; }
  /* The label sits centred over the heading; its type tightens so the
     brush stays on one line inside the 287px card. */
  .pd-give-badge { align-self: center; margin-bottom: 0; font-size: 13px; letter-spacing: 1.5px; white-space: nowrap; }
  .pd-uplift-title { font-size: 28px; line-height: 1.25; letter-spacing: 0; }
  .pd-chips { gap: 8px; width: 100%; }
  .pd-chip { flex: 1 1 0; min-width: 0; width: auto; height: 64px; border-radius: 12px; font-size: 16px; letter-spacing: -.5px; }
  .pd-uplift-go { min-height: 56px; padding: 12px; white-space: nowrap; }
  .pd-uplift-details { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-face a, .pd-face-photo img, .pd-chip, .pd-site { transition: none; }
  .pd-face a:hover, .pd-face a:focus-visible, .pd-chip:hover, .pd-site:hover { transform: none; }
}

/* Face-safe crops (YuNet audit 2026-09-24). */
/* Hero crops (PG-05, 2026-10-02): three portrait photos in landscape boxes.
   Global Outreach: the tall surgeon's hair starts 8% down the photo, so 20%
   left it on the top edge. Education: 30% cut the left surgeon's cap. US Hub:
   42% cut the word on the hospital sign at 1280 and wider. */
.pd-hero-photo img[src*="prog-global-outreach"] { object-position: 50% 2% !important; }
.pd-hero-photo img[src*="prog-education"] { object-position: 50% 16% !important; }
.pd-hero-photo img[src*="prog-us-hub"] { object-position: 50% 16% !important; }
img[src*="ecuador-proof"] { object-position: 50% 4% !important; }
img[src*="nicaragua-proof"] { object-position: 50% 22% !important; }

/* ---- Isabel's design review 2026-10-13 ----
   Page titles: US Hub, Education, Nicaragua and Ecuador now use the 64px H2
   style (Fredoka 600, 70.4 line, -0.75 tracking); Global Outreach keeps its
   80px title (pd-title--xl), as in the frames.
   Heroes: the copy column is the frame's 614px (hub) or 706px (country) and
   the photo 530 x 496, with the frame's 144px gap scaling down. Before, the
   copy held 701px at every width and the photo took the squeeze, so below
   1512 the hero read condensed. */
@media (min-width: 1101px) {
  .pd-title { font-size: clamp(44px, 4.25vw, 64px); line-height: 1.1; letter-spacing: -.75px; }
  .pd-title.pd-title--xl { font-size: clamp(48px, 5.3vw, 80px); letter-spacing: -1px; }
  .pd-hero--hub { gap: clamp(40px, 9.5vw, 144px); }
  .pd-hero--hub .pd-hero-copy { flex: 0 1 614px; }
  .pd-hero--hub .pd-hero-head { gap: 16px; }
  .pd-hero--hub:has(.pd-title--xl) .pd-hero-head { gap: 24px; }
  .pd-hero--hub .pd-sub { max-width: none; }
  .pd-hero--hub .pd-hero-photo { flex: 0 1 530px; aspect-ratio: 530 / 496; max-width: 530px; }
  .pd-title--stack { max-width: 614px; }
  .pd-hero:not(.pd-hero--hub) { padding: 180px 104px 115px; gap: 72px; align-items: flex-start; }
  .pd-hero:not(.pd-hero--hub) .pd-hero-copy { flex: 0 1 706px; gap: 34px; padding-top: 15px; }
  .pd-hero:not(.pd-hero--hub) .pd-hero-head { gap: 18px; }
  .pd-hero:not(.pd-hero--hub) .pd-title { max-width: 560px; }
  .pd-hero:not(.pd-hero--hub) .pd-hero-photo { flex: 0 1 530px; aspect-ratio: 530 / 495; margin: 0 0 0 auto; align-self: flex-start; }
}