.hero {
  position: relative;
  height: var(--hero-height);
  background: var(--color-primary-950);
  overflow: hidden;
  isolation: isolate;
}

.text-center{text-align: center;}
.bottom-btn {
    text-align: center;
    gap: var(--space-12);
    display: flex;
    flex-direction: column;
    }

/* Must sit on the element the swipe handler binds to ([data-hero-slider]), so a
   drag that starts over the dots and arrows bar is permitted by the browser.
   Progressive pair: plain `pan-y` also disables pinch-zoom, so the second line
   adds it back; an engine that does not know it keeps the first. Horizontal
   panning stays out of the allowed set so preventDefault still works. */
.hero[data-hero-slider] {
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}

.hero__slides {
  position: relative;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-duration-slow) var(--motion-ease-standard),
              visibility 0s linear var(--motion-duration-slow);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--motion-duration-slow) var(--motion-ease-standard),
              visibility 0s linear 0s;
}

.hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + 24px);
  width: 1080px;

  background-image: var(--hero-bg-lg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(
    50%     0%,
    95.81%  30%,
    95.81%  36%,
    89.41%  36%,
    89.41%  100%,
    10.34%  100%,
    10.34%  36%,
     5.09%  36%,
     5.09%  30%
  );
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary-950), transparent 45%) 0%,
      transparent 18%),
    linear-gradient(0deg, #000 0%, transparent 32%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: var(--nav-height);
}

.hero__text {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-right: var(--space-24);
  max-width: 560px;
}

.hero__text h1 {
  font-family: var(--font-serif);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--color-white);
}

.hero__text p {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body-2);
  color: var(--color-alpha-white-70);
}

.hero__text .btn { align-self: flex-start; }

.hero__chrome {
  position: absolute;
  bottom: var(--space-40);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}
.hero__chrome > * { pointer-events: auto; }

.hero__nav {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

.hero__slide--light {
  background: var(--color-primary-100);
}
.hero__slide--light .hero__text h1 {
  color: var(--color-primary-950);
}
.hero__slide--light .hero__text p {
  color: var(--color-neutral-900);
}
.hero__slide--light .hero__photo::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 32%);
}

.gift {
  padding-block: var(--section-pad-y);
  background: var(--color-white);
}
.gift__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.gift .section-header {
  gap: var(--space-8);
}
.gift .section-header p {
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-900);
}
.gift__content {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);
  width: 100%;
}
.gift__form-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 0;
  /*background: var(--color-primary-50);*/
  border-radius: var(--radius-card);
}
.gift__amount-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}
.gift__submit {
  align-self: flex-start;
  padding: var(--space-12) var(--space-24);
  margin:0 auto;
}

/* The frequency switch holds four options, not the usual two. Slimmer pill
   padding keeps them on one row while the card narrows beside the aside.
   Scoped to .gift so the two-item switch on Request Meals is unaffected. */
.gift .slide-switch__item {
  padding-inline: var(--space-12);
}

.gift-monthly {
  flex: 0 0 413px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-card);
}
.gift-monthly__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--color-neutral-950);
  margin: 0;
}
.gift-monthly__lead {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
  margin: 0;
}
.gift-monthly__points {
  list-style: disc;
  padding-left: var(--space-24);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.gift-monthly__points li {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
}

@media (max-width: 1023px) {
  .gift {
    padding-block: var(--section-pad-y-tablet);
  }
  .gift__content {
    flex-direction: column;
  }
  .gift-monthly {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .gift {
    padding-block: var(--section-pad-y-mobile);
  }
  .gift__inner {
    gap: var(--space-20);
  }
  .gift__form-card {
    gap: var(--space-16);
    padding: var(--space-16) var(--space-16);
  }
  .gift__amount-section {
    gap: var(--space-16);
  }
  /* Four options cannot share one row on a phone. A two-column grid lays them
     out two by two, identically in English and Spanish. */
  .gift .slide-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: stretch;
    width: 100%;
  }
  .gift .slide-switch__item {
    width: 100%;
    /* Radio aligned to the pill's leading edge so the dots line up per column. */
    justify-content: flex-start;
    padding-inline: var(--space-8);
  }
  .gift .amount-tiles {
    grid-template-columns: 1fr;
  }
  .gift-monthly__title {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    letter-spacing: var(--tracking-h5);
  }
}

.accomplishments {
  padding-block: var(--section-pad-y);
  background: var(--color-neutral-50);
}
.accomplishments__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}
.accomplishments__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-20);
  align-items: end;
}
.accomplishments .impact__tile {
  width: 100%;
}
.accomplishments .section-header {
  max-width: 680px;
}
.accomplishments .accomplishments__tile--1,
.accomplishments .accomplishments__tile--5 { height: 400px; }
.accomplishments .accomplishments__tile--2,
.accomplishments .accomplishments__tile--4 { height: 320px; }
.accomplishments .accomplishments__tile--3 { height: 220px; }

@media (max-width: 1023px) {
  .accomplishments {
    padding-block: var(--section-pad-y-tablet);
  }
  .accomplishments__inner {
    gap: var(--space-48);
  }
  .accomplishments__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tile1 tile2"
      "tile3 tile3"
      "tile4 tile5";
  }
  .accomplishments .accomplishments__tile--1 { grid-area: tile1; height: 240px; }
  .accomplishments .accomplishments__tile--2 { grid-area: tile2; height: 240px; }
  .accomplishments .accomplishments__tile--3 { grid-area: tile3; height: 240px; }
  .accomplishments .accomplishments__tile--4 { grid-area: tile4; height: 240px; }
  .accomplishments .accomplishments__tile--5 { grid-area: tile5; height: 240px; }
}

@media (max-width: 767px) {
  .accomplishments {
    padding-block: var(--section-pad-y-mobile);
  }
  .accomplishments__inner {
    gap: var(--space-32);
  }
  .accomplishments__grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .accomplishments .accomplishments__tile--1,
  .accomplishments .accomplishments__tile--2,
  .accomplishments .accomplishments__tile--3,
  .accomplishments .accomplishments__tile--4,
  .accomplishments .accomplishments__tile--5 {
    grid-area: auto;
    height: 240px;
  }
}

.nourish {
  background: var(--color-primary-950);
  padding-block: var(--section-pad-y);
}
.nourish__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}
.nourish__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  align-items: stretch;
}

.nourish-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.nourish-card--featured {
  padding-right: var(--space-24);
  background: transparent;
  gap: var(--space-24);
  align-items: flex-start;
}
.nourish-card__logo {
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.nourish-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nourish-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.nourish-card__body p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-alpha-white-70);
}

.nourish-card--info {
  padding: var(--space-24);
  background: var(--color-primary-100);
  border-radius: var(--radius-card);
  gap: var(--space-16);
}
.nourish-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--color-neutral-950);
}
.nourish-card__list {
  margin: 0;
  padding-left: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: disc;
}
.nourish-card__list li {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
}
.nourish-card__list li strong {
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 1023px) {
  .nourish {
    padding-block: var(--section-pad-y-tablet);
  }
  .nourish__inner {
    gap: var(--space-48);
  }
  .nourish__cards {
    grid-template-columns: 1fr;
  }
  .nourish-card--featured {
    height: 328px;
    padding-right: 0;
    align-items: center;
    text-align: center;
  }
  .nourish-card__logo {
    width: auto;
    flex: 1 1 0;
    align-self: center;
  }
  .nourish-card__body {
    align-items: center;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .nourish {
    padding-block: var(--section-pad-y-mobile);
  }
  .nourish__inner {
    gap: var(--space-32);
  }
}

.legacy {
  background: var(--color-neutral-50);
  padding-block: var(--section-pad-y);
}
.legacy__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
}
.legacy .section-header {
  max-width: 680px;
}
.legacy__phone {
  color: inherit;
  text-decoration: none;
}
.legacy__phone:hover,
.legacy__phone:focus-visible {
  text-decoration: underline;
}
.legacy__cards {
  width: 100%;
}

@media (max-width: 1023px) {
  .legacy {
    padding-block: var(--section-pad-y-tablet);
  }
  .legacy__inner {
    gap: var(--space-40);
  }
  .legacy__cards {
    flex-wrap: wrap;
  }
  .legacy__cards .guide-card {
    flex: 0 0 calc((100% - var(--space-20)) / 2);
  }
  .legacy__cards .guide-card:nth-child(3) {
    flex: 0 0 calc((100% - var(--space-20)) / 2);
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .legacy {
    padding-block: var(--section-pad-y-mobile);
  }
  .legacy__inner {
    gap: var(--space-32);
  }
  .legacy__cards {
    flex-direction: column;
  }
  .legacy__cards .guide-card,
  .legacy__cards .guide-card:nth-child(3) {
    flex: 0 0 auto;
    width: 100%;
    margin-inline: 0;
  }
}

.donor-stories {
  padding-block: var(--section-pad-y);
  background: var(--color-white);
}
.donor-stories .section-header {
  margin-bottom: var(--space-32);
}
.donor-stories__slider {
  padding-left: calc(
    max(0px, (100vw - var(--layout-content-w)) / 2)
    + var(--layout-side-gutter)
  );
  padding-right: var(--layout-side-gutter);
}
.donor-stories .slider__viewport {
  overflow-x: hidden;
  overflow-y: visible;
}
.donor-stories__chrome-wrap {
  margin-top: var(--space-32);
}

@media (max-width: 1023px) {
  .donor-stories {
    padding-block: var(--section-pad-y-tablet);
  }
}

@media (max-width: 767px) {
  .donor-stories {
    padding-block: var(--section-pad-y-mobile);
  }
}

.core-programs {
  padding: var(--space-section-pad) 0;
  background: var(--color-white);
}
.core-programs .section-header {
  margin-bottom: var(--space-48);
}

.core-programs__slider {
  padding-left: calc(
    max(0px, (100vw - var(--layout-content-w)) / 2)
    + var(--layout-side-gutter)
  );
  padding-right: var(--layout-side-gutter);
}

.core-programs .slider__viewport {
  overflow-x: hidden;
  overflow-y: visible;
}

.core-programs__chrome-wrap {
  margin-top: var(--space-40);
}

/* From 1024px up the cards follow their text and stretch to the tallest one in
   the track: li and link become flex so the article can fill them. */
@media (min-width: 1024px) {
  .core-programs .slider__track > li { display: flex; }
  .core-programs .program-card-link { display: flex; }
  .core-programs .program-card,
  .core-programs .program-card--tall { height: auto; }

  /* The viewport clips overflow, so the focus ring (4px offset + 2px width)
     needs room; a matching negative margin cancels the padding. */
  .core-programs .slider__viewport {
    padding-block: 8px;
    margin-block: -8px;
  }
}

.impact {
  padding: var(--space-section-pad) 0;
  background: var(--color-neutral-50);
}

.impact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.impact__header {
  max-width: 680px;
}

.impact__grid {
  display: flex;
  gap: var(--space-card-gap);
  align-items: flex-end;

  width: 100%;
}

.impact__col {

  flex: 0 0 calc((100% - 4 * var(--space-card-gap)) / 5);
  min-width: 0;
  position: relative;
}
.impact__col--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap);
}

.impact__grid .impact__tile { width: 100%; }

.impact__tile {
  width: 240px;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

.impact__tile--label {
  height: 320px;
  background: var(--color-primary-700);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-24);
}
.impact__tile--label::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--label-photo, none);
  background-size: var(--label-photo-size, cover);
  background-position: var(--label-photo-position, center top);
  opacity: 0.2;
  pointer-events: none;
}
.impact__label-text {
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
  text-align: left;
}

.impact__tile--clasped-hands {
  height: 220px;
  background-image: url(../images/impact/clasped-hands.jpg);
  background-size: cover;
  background-position: center;
}
.impact__tile--clasped-hands::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.impact__tile--metric {
  height: 400px;
  margin: 0;
  padding: var(--space-24);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: var(--space-4);
  color: var(--color-white);
}
.impact__tile--metric-short {
  height: 320px;
}
.impact__tile--metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--metric-photo, none);
  background-size: var(--metric-photo-size, cover);
  background-position: var(--metric-photo-position, center);
  pointer-events: none;
  z-index: 0;
}
.impact__tile--metric::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-metric-overlay);
  pointer-events: none;
  z-index: 1;
}
.impact__tile--metric > * {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: left;
  width: 100%;
}

.impact__metric-number {
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
}
.impact__metric-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body-2);
}

.impact__tile--photo-1 { --metric-photo: url(../images/impact/volunteer-with-senior.jpg); }
.impact__tile--photo-2 { --metric-photo: url(../images/impact/volunteers-prep.jpg); }
.impact__tile--photo-3 {
  --metric-photo: url(../images/impact/meal-delivery.jpg);
  --metric-photo-position: 50% 32%;
}

.impact__tile--photo-3::after {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0.9) 92%);
}

.impact__tile--metric.impact__tile--solid::before,
.impact__tile--metric.impact__tile--solid::after {
  display: none;
}
.impact__tile--solid-neutral {
  background-color: var(--color-neutral-700);
}
.impact__tile--solid-primary {
  background-color: var(--color-primary-800);
}

.impact__tile--house-outline {
  height: 320px;
  background: var(--color-primary-100);
}
.impact__house-outline-art {
  position: absolute;
  top: 56.72px;
  left: 50%;
  width: 578.756px;
  height: 433.287px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.impact__tile--grey-filler {
  height: 220px;
  background: var(--color-neutral-400);
}
.impact__house-filled-art {
  position: absolute;
  top: -45px;
  left: -368px;
  width: 538px;
  height: 395px;
  max-width: none;
  pointer-events: none;
}

.featured-stories {
  padding: var(--space-section-pad) 0;
  background: var(--color-white);
}
.featured-stories .section-header {
  margin-bottom: var(--space-32);
}

.featured-stories__slider {
  padding-left: calc(
    max(0px, (100vw - var(--layout-content-w)) / 2)
    + var(--layout-side-gutter)
  );
  padding-right: var(--layout-side-gutter);
}
.featured-stories .slider__viewport {
  overflow-x: hidden;
  overflow-y: visible;
}
.featured-stories__chrome-wrap {
  margin-top: var(--space-32);
}

/* .story-grid: grid context for .testimonial when story_cards layout=grid.
   Scoped so the slider's fixed 628x400 sizing is untouched outside it. */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
.story-grid .testimonial {
  width: 100%;
}
.story-grid .testimonial__quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}
.story-grid .testimonial__attribution {
  margin-top: auto;
}
/* No nowrap/ellipsis on name/meta: they are inline spans, where text-overflow
   has no effect, so nowrap text would be hard-clipped. Meta wraps instead. */
.story-grid__actions {
  margin-top: var(--space-32);
  text-align: center;
}
@media (min-width: 1024px) {
  .story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .story-grid .testimonial {
    height: auto;
    min-height: 400px;
  }
  .story-grid .testimonial__quote p {
    -webkit-line-clamp: 6;
  }
}
@media (max-width: 374px) {
  .story-grid .testimonial__quote p {
    -webkit-line-clamp: 5;
  }
}
/* Donor grid section tint, keyed to the anchor id "donor". The card content
   background is already Neutral/50, so it needs a white override or the card
   disappears into the section band. */
#donor.featured-stories {
  background: var(--color-neutral-50);
}
#donor.featured-stories .testimonial__content {
  background: var(--color-white);
}

.need-assistance {
  position: relative;
  padding: 96px var(--layout-side-gutter);
  background: var(--color-white);
  overflow: hidden;
  isolation: isolate;
}

.need-assistance__house {
  position: absolute;
  top: 5.72px;
  left: 50%;
  width: 1037.643px;
  height: 771.286px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  .need-assistance--schedule {
    padding-top: 180px;
  }
  .need-assistance--schedule .need-assistance__house {
    top: 72px;
  }
}

.need-assistance__inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  text-align: center;
}
.need-assistance__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-950);
  margin: 0;

  max-width: 320px;
  text-wrap: balance;
}
.need-assistance__sub {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-900);
  margin: 0;
}

.trust {
  padding: 96px 0;
  background: var(--color-primary-100);
}

.trust__inner {
  max-width: var(--layout-content-w);
  margin: 0 auto;
  padding: 0 var(--layout-side-gutter);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: start;
  gap: var(--space-card-gap);
}

.trust__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}
.trust__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-950);
  margin: 0;
}
.trust__title span {
  display: block;
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-card-gap);
}
.trust__item {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.trust__item-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--color-neutral-950);
  margin: 0;
}
.trust__item-desc {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
  margin: 0;
}

/* Interactive states, a.trust__item only: the block renders a <div> when the
   url is empty, and an unlinked item must not get a hover affordance. */
a.trust__item {
  border-radius: var(--radius-card);
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
}

/* .reveal is added to every .trust__grid child and `.motion-ready .reveal` in
   motion.css outweighs the fill fade. Re-state the reveal transition here with
   its stagger delay, and give the fill a 0s delay. Keep the opacity and
   transform parts in sync with motion.css. */
.motion-ready a.trust__item {
  transition:
    opacity          var(--motion-duration-slow) var(--motion-ease-reveal) calc(var(--i, 0) * var(--motion-stagger-step)),
    transform        var(--motion-duration-slow) var(--motion-ease-reveal) calc(var(--i, 0) * var(--motion-stagger-step)),
    background-color var(--motion-duration-base) var(--motion-ease-standard) 0s;
}

a.trust__item:focus { outline: none; }
a.trust__item:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

/* Hover fill from 1024 up only: below that the item drops its horizontal
   padding and a filled block would sit flush against the text. Text keeps AA
   contrast on Primary/200. */
@media (hover: hover) and (min-width: 1024px) {
  a.trust__item:hover { background: var(--color-primary-200); }
}

/* Both selectors: the .motion-ready one must outweigh the reveal override above. */
@media (prefers-reduced-motion: reduce) {
  a.trust__item,
  .motion-ready a.trust__item { transition: none; }
}

.support-mission {
  position: relative;
  height: 620px;
  background: var(--color-primary-950);
  overflow: hidden;
  isolation: isolate;
}

.support-mission__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(50% + 24px);
  width: 1080px;

  background-image: var(--cta-bg-lg, url(../images/support-mission/two-men-handshake.jpg));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(
    50%     0%,
    95.81%  30%,
    95.81%  36%,
    89.41%  36%,
    89.41%  100%,
    10.34%  100%,
    10.34%  36%,
     5.09%  36%,
     5.09%  30%
  );
}
.support-mission__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #000 0%, transparent 32%);
  pointer-events: none;
}

.support-mission__content {
  position: relative;
  z-index: 1;
  max-width: var(--layout-content-w);
  margin: 0 auto;
  padding: 0 var(--layout-side-gutter);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.support-mission__text {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-left: var(--space-40);
}
.support-mission__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
  margin: 0;
}
.support-mission__sub {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-alpha-white-70);
  margin: 0;
}
.support-mission__text .btn { align-self: flex-start; }

.partners {
  background: var(--color-neutral-50);
  padding: var(--space-80) 0;
  overflow: hidden;
}

.partners__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--tracking-h5);
  color: var(--color-neutral-950);
  text-align: center;
  margin: 0 0 var(--space-80);
}

.partners__viewport {
  overflow: hidden;

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.partners__track {
  display: flex;
  width: max-content;
  animation: partners-scroll 60s linear infinite;
}
.partners__viewport:hover .partners__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .partners__track {
    animation: none;
  }
}

.partner-logo {
  flex: 0 0 auto;
  height: var(--logo-height-marquee);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--logo-gap);
}
.partner-logo img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}

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

.site-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-neutral-100);
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-48) var(--layout-side-gutter);
  max-width: var(--layout-content-w);
  margin: 0 auto;
  gap: var(--space-40);
}
.site-footer__logo {
  flex: 0 0 auto;
  width: 260px;
  height: 80px;
}
.site-footer__logo img {
  width: 100%;
  height: 100%;
  display: block;
}

.site-footer__cols {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-card-gap);
  max-width: 847px;
}
.site-footer__col-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--tracking-h5);
  color: var(--color-neutral-950);
  margin: 0 0 var(--space-16);
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__col a,
.site-footer__contact-line {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--color-primary-800); }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.site-footer__contact-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.site-footer__contact-line .icon {
  width: 20px;
  height: 20px;
  color: var(--color-neutral-700);
  margin-top: var(--space-4);
  flex-shrink: 0;
}
.site-footer__contact-line a:hover { color: var(--color-primary-800); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24) var(--layout-side-gutter);
  max-width: var(--layout-content-w);
  margin: 0 auto;
}
.site-footer__social {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-700);
  transition: color var(--motion-duration-base) var(--motion-ease-standard);
}
.site-footer__social a:hover { color: var(--color-primary-800); }
.site-footer__social .icon {
  width: 24px;
  height: 24px;
}
.site-footer__copyright {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-500);
  margin: 0;
}

@media (max-width: 1279px) {

  .hero__content {
    display: block;
    max-width: none;
    padding: var(--space-64) var(--space-32) 0 var(--space-32);
  }
  .hero__text {
    max-width: 680px;
    padding-right: 0;
    padding-top: 0;
    gap: var(--space-16);
  }

  .hero__text h1 {
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.02em;
  }
  .hero__text p {
    font-size: 24px;
    line-height: 32px;
  }

  .hero__photo {
    top: auto;
    bottom: 0;
    left: auto;
    right: -100px;
    width: 654px;
    height: 480px;
  }

  .hero__chrome {
    max-width: none;
    padding-inline: var(--space-32);
    bottom: 32px;
  }
}

@media (max-width: 767px) {

  .hero {
    height: 920px;
  }

  .hero__content {
    display: block;
    max-width: none;
    padding: var(--space-24) var(--space-16) 0 var(--space-16);
  }
  .hero__text {
    max-width: none;
    padding-right: 0;
    padding-top: 0;
    gap: var(--space-32);
  }

  .hero__text h1 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.02em;
  }

  .hero__text p {
    font-size: 20px;
    line-height: 28px;
  }

  .hero__text h1 + p {
    margin-top: -16px;
  }

  .hero__photo {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 540px;
    height: 480px;

    background-image: var(--hero-bg-sm);
  }

  .hero__chrome {
    max-width: none;
    padding-inline: var(--space-16);
    bottom: 16px;
  }
}

@media (max-width: 1023px) {

  .core-programs {
    padding: var(--section-pad-y-tablet) 0;
  }
  .core-programs .section-header {
    margin-bottom: var(--space-32);
    max-width: none;
  }

  .core-programs .section-header h2 {
    font-size: 40px;
    line-height: 48px;
  }
  .core-programs .section-header p {
    font-size: 20px;
    line-height: 28px;
  }

  .core-programs__slider {
    padding-left: var(--gutter-tablet);
    padding-right: 0;
  }
  .core-programs__chrome-wrap {
    margin-top: var(--space-32);
  }

  .program-card,
  .program-card--tall {
    width: 342px;
    height: auto;
  }
  .core-programs .program-card-link { display: flex; }
  .core-programs .slider__track { align-items: stretch; }

  .program-card__desc {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 767px) {
  .core-programs {
    padding: var(--space-32) 0 var(--space-16) 0;
  }
  .core-programs .section-header {
    margin-bottom: var(--space-16);
  }
  .core-programs .section-header h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }

  .core-programs__slider {
    padding-left: var(--gutter-mobile);
  }
  .core-programs__chrome-wrap {
    margin-top: var(--space-24);
  }

  .program-card,
  .program-card--tall {
    width: var(--card-width-mobile);
  }

  .core-programs .slider-btn {
    width: 44px;
    height: 44px;
  }
  .core-programs .slider-btn .icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 1279px) {
  .impact { padding: var(--section-pad-y-tablet) 0; }
  .impact__inner { gap: var(--space-32); }

  .impact .section-header { max-width: none; }
  .impact .section-header h2 {
    font-size: 40px;
    line-height: 48px;
  }
  .impact .section-header p {
    font-size: 20px;
    line-height: 28px;
  }

  .impact__col--stack { display: contents; }

  .impact__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 240px 240px 240px;
    grid-template-areas:
      "label  label  label  clasp  clasp  clasp"
      "m1     m1     house  house  m2     m2"
      "m3     m3     m3     grey   grey   grey";
    gap: var(--space-card-gap);
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    align-items: stretch;
  }

  .impact__grid .impact__tile,
  .impact__grid .impact__tile--label,
  .impact__grid .impact__tile--clasped-hands,
  .impact__grid .impact__tile--metric,
  .impact__grid .impact__tile--metric-short,
  .impact__grid .impact__tile--house-outline,
  .impact__grid .impact__tile--grey-filler {
    box-sizing: border-box !important;
    width: auto !important;
    height: 240px !important;
    min-height: 0 !important;
    max-height: 240px !important;
    align-self: stretch !important;
  }
  .impact__tile--label         { grid-area: label; }
  .impact__tile--clasped-hands { grid-area: clasp; }
  .impact__tile--metric.impact__tile--photo-1 { grid-area: m1; }
  .impact__tile--house-outline { grid-area: house; }
  .impact__tile--metric.impact__tile--photo-2 { grid-area: m2; }
  .impact__tile--metric.impact__tile--photo-3 { grid-area: m3; }
  .impact__tile--grey-filler   { grid-area: grey; }
}

@media (max-width: 767px) {
  .impact { padding: var(--section-pad-y-mobile) 0; }
  .impact__inner {
    gap: var(--space-16);
    padding-inline: var(--gutter-mobile);
  }
  .impact .section-header h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }

  .impact__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }

  .impact__col { flex: 0 0 auto; }

  .impact__grid .impact__tile,
  .impact__grid .impact__tile--label,
  .impact__grid .impact__tile--clasped-hands,
  .impact__grid .impact__tile--metric,
  .impact__grid .impact__tile--metric-short,
  .impact__grid .impact__tile--house-outline,
  .impact__grid .impact__tile--grey-filler {
    width: 100% !important;
    height: 200px !important;
    max-height: 200px !important;
    min-height: 0 !important;
    grid-area: auto !important;
  }

  .impact__label-text {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }

  .impact__metric-number {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }
  .impact__metric-label {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 1023px) {
  .featured-stories {
    padding: var(--section-pad-y-tablet) 0;
  }
  .featured-stories .section-header {
    margin-bottom: var(--space-32);
    max-width: none;
  }
  .featured-stories .section-header h2 {
    font-size: 40px;
    line-height: 48px;
  }
  .featured-stories .section-header p {
    font-size: 20px;
    line-height: 28px;
  }

  .featured-stories__slider {
    padding-left: var(--gutter-tablet);
    padding-right: 0;
  }
  .featured-stories__chrome-wrap {
    margin-top: var(--space-32);
  }

}

@media (max-width: 767px) {
  .featured-stories {
    padding: var(--space-32) 0 var(--space-16) 0;
  }
  .featured-stories .section-header {
    margin-bottom: var(--space-16);
  }
  .featured-stories .section-header h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }
  .featured-stories__slider {
    padding-left: var(--gutter-mobile);
  }
  .featured-stories__chrome-wrap {
    margin-top: var(--space-24);
  }

  .testimonial {
    flex-direction: column;
    width: var(--card-width-mobile);
    height: auto;
    border-radius: var(--radius-card);
  }

  .testimonial__photo {
    flex: 0 0 auto;
    width: 100%;
    height: 240px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .testimonial__content {
    padding: var(--space-24);
    gap: var(--space-24);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }
  .testimonial__quote {
    flex: 0 0 auto;
  }

  .featured-stories .slider-btn {
    width: 44px;
    height: 44px;
  }
  .featured-stories .slider-btn .icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 1023px) {
  .need-assistance {
    padding: var(--section-pad-y-tablet) var(--gutter-tablet);
  }

  .need-assistance__house {
    width: 704px;
    height: 523px;
    top: 0;
  }

  .need-assistance__inner {
    max-width: 420px;
  }

  .need-assistance__title {
    font-size: 40px;
    line-height: 48px;
    max-width: 240px;
  }
  .need-assistance__sub {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 767px) {
  .need-assistance {
    padding: var(--section-pad-y-mobile) var(--gutter-mobile);
  }

  .need-assistance__inner {
    max-width: 358px;
    gap: var(--space-20);
  }

  .need-assistance__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
    max-width: 200px;
  }
}

@media (max-width: 767px) {
  .need-assistance--schedule {
    padding-top: 120px;
  }
}

@media (max-width: 1023px) {
  .trust {
    padding: var(--section-pad-y-tablet) 0;
  }

  .trust__inner {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    padding-inline: var(--gutter-tablet);
    align-items: stretch;
  }
  .trust__left {
    align-items: flex-start;
    gap: var(--space-24);
  }

  .trust__title {
    font-size: 40px;
    line-height: 48px;
  }

  .trust__item {
    padding-left: 0;
  }

  .trust__item-desc {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 767px) {
  .trust {
    padding: var(--section-pad-y-mobile) 0;
  }
  .trust__inner {
    gap: var(--space-16);
    padding-inline: var(--gutter-mobile);
  }
  .trust__left {
    gap: var(--space-20);
  }
  .trust__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }

  .trust__grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }

  .trust__item {
    padding: var(--space-8) var(--space-16) var(--space-8) 0;
    gap: var(--space-8);
  }

  .trust__item-title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 1023px) {

  .support-mission {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: var(--section-pad-y-tablet) 0 0;
  }

  .support-mission__content {
    order: 1;
    grid-template-columns: 1fr;
    height: auto;
    padding-inline: var(--gutter-tablet);
    max-width: none;
    margin: 0;
  }
  .support-mission__text {
    grid-column: 1 / -1;
    padding-left: 0;
    gap: var(--space-24);
    max-width: 680px;
  }
  .support-mission__title {
    font-size: 40px;
    line-height: 48px;
  }
  .support-mission__sub {
    font-size: 20px;
    line-height: 28px;
  }

  .support-mission__photo {
    order: 2;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    align-self: flex-end;
    width: 654px;
    height: 480px;
    margin-right: -100px;
  }
}

@media (max-width: 767px) {
  .support-mission {

    padding: var(--section-pad-y-mobile) 0 0;
  }
  .support-mission__content {
    padding-inline: var(--gutter-mobile);
  }
  .support-mission__text {
    max-width: 358px;
    gap: var(--space-20);
  }
  .support-mission__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
  }

  .support-mission__photo {
    width: 540px;
    height: 480px;
    align-self: center;

    margin: var(--space-32) 0 0 0;

    background-image: var(--cta-bg-sm, url(../images/support-mission/two-men-handshake.jpg));
  }
  .support-mission__photo::after {
    inset: 0;
  }
}

@media (max-width: 1023px) {
  .partners {
    padding: var(--space-48) 0;
    overflow: visible;
  }
  .partners__title {
    padding-inline: var(--gutter-tablet);
    margin-bottom: var(--space-48);
    font-size: 24px;
    line-height: 32px;
  }

  .partners__viewport {
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
    padding-inline: var(--gutter-tablet);
  }
  .partners__track {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-card-gap);
    row-gap: var(--space-40);
    width: 100%;
    animation: none;
    transform: none;
  }
  .partners__viewport:hover .partners__track { animation: none; }

  .partner-logo {
    width: auto;
    height: var(--logo-height-marquee);
    margin-inline-end: 0;
    padding: 0;
  }
  /* Re-cap to the grid cell: the desktop img rule is uncapped and .partners is
     overflow: visible at this breakpoint. */
  .partner-logo img {
    max-width: 100%;
  }

  .partner-logo:nth-child(n+9) { display: none; }
}

@media (max-width: 767px) {
  .partners {
    padding: var(--section-pad-y-mobile) 0;
  }
  .partners__title {
    padding-inline: var(--gutter-mobile);
    margin-bottom: var(--space-48);
  }
  .partners__viewport {
    padding-inline: var(--gutter-mobile);
  }
  .partners__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-card-gap);
    row-gap: var(--space-20);
  }
}

@media (max-width: 1279px) {

  .site-footer__top {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-48) var(--gutter-tablet);
    gap: var(--space-32);
    max-width: none;
  }
  .site-footer__logo { width: 260px; height: 80px; flex: 0 0 auto; }
  .site-footer__cols {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }

  .site-footer__col:nth-child(3) { grid-column: 1 / -1; }
  .site-footer__contact { width: 100%; }

  .site-footer__bottom {
    padding: var(--space-24) var(--gutter-tablet);
    max-width: none;
  }
}

@media (max-width: 767px) {
  .site-footer__top {
    padding: var(--space-48) var(--gutter-mobile);
    gap: var(--space-32);
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .site-footer__col:nth-child(3) {
    grid-column: auto;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-24) var(--gutter-mobile);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .site-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-footer__col:nth-child(3) {
    grid-column: auto;
  }

  .support-mission__photo {
    width: 900px;
    height: 660px;
    margin-bottom: -132px;
  }
  .support-mission__photo::after {
    inset: 0 0 132px 0;
  }

  .hero__photo {
    width: 1100px;
    height: 660px;
    bottom: -132px;
    right: -300px;
  }
  .hero__photo::after {
    inset: 0 0 132px 0;
  }
}

#donating,
#getting-meals,
#volunteering {
  scroll-margin-top: calc(var(--nav-height) + var(--space-24));
}

.faq-section {
  padding-block: var(--section-pad-y);
}
#getting-meals {
  background: var(--color-neutral-50);
}
#volunteering {
  background: var(--color-primary-100);
}
.faq-section__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-40);
}
.faq-section__nav {
  display: flex;
  justify-content: center;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

@media (max-width: 1279px) {

  .hero-subpage__band {
    min-height: 320px;
  }
  .hero-subpage__band > .hero-subpage__content {
    padding-bottom: 80px;
  }
  .hero-subpage__content {
    bottom: 80px;
  }

  .hero-subpage__decoration {
    left: auto;
    right: -235px;
    width: 803px;
    height: 597px;
  }
  .qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .faq-section {
    padding-block: var(--section-pad-y-tablet);
  }

}

@media (max-width: 767px) {

  .hero-subpage__title {
    font-size: 40px;
    line-height: 48px;
  }

  .hero-subpage__decoration {
    left: auto;
    right: -493px;
    width: 803px;
    height: 597px;
  }

  .segment-nav {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .segment-nav__item {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-200);
    justify-content: space-between;
  }
  .segment-nav__item:last-child {
    border-bottom: none;
  }
  .segment-nav__item--active {
    border-radius: 0;
  }

  .qa-grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }

  .qa-card {
    background: transparent;
    padding: var(--space-8) 0;
    border-radius: 0;
    gap: var(--space-8);
  }

  .qa-card__question {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
  }

  .faq-section {
    padding-block: var(--section-pad-y-mobile);
  }

}

.help-paths {
  background: var(--color-white);
  padding-block: var(--section-pad-y);
}

.help-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-card-gap);
}

/* value_columns variant=four: 4-up from 1280px, 2-up below (see the 767px block). */
@media (min-width: 1280px) {
  .help-cards--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-info {
  display: flex;
  align-items: stretch;
  min-height: 800px;
  background: var(--color-neutral-50);
}

.contact-form-section {
  background: var(--color-neutral-50);
  padding-block: 96px;
  padding-inline: var(--space-80);
}

.contact-form-section__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: var(--layout-content-w);
  margin-inline: auto;
}

.contact-form-section__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 522px;
  flex-shrink: 0;
}

.contact-form-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-form-section__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-950);
  max-width: 660px;
}

.contact-form-section__intro {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-900);
  max-width: 600px;
}

.contact-form-section__divider {
  width: 100%;
  height: 1px;
  background: var(--color-neutral-200);
  border: 0;
  margin: 0;
}

@media (max-width: 1279px) {

  .help-paths {
    padding-block: var(--section-pad-y-tablet);
  }

  .contact-info {
    flex-direction: column;
    min-height: auto;
  }
  .contact-info__panel {
    width: 100%;
    padding: var(--section-pad-y-tablet) var(--gutter-tablet);
  }
  .contact-info__map {

    flex: 0 0 auto;
    width: 100%;
    height: 600px;
  }

  .contact-form-section {
    padding-block: var(--section-pad-y-tablet);
    padding-inline: var(--gutter-tablet);
  }
  .contact-form-section__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }
  .contact-form-section__left {
    display: contents;
  }
  .contact-form-section__header  { order: 1; }
  .form-card                     { order: 2; }
  .contact-form-section__divider { order: 3; }
  .stay-connected                { order: 4; }
  /* CF7 wraps the form in a .wpcf7 div, which is the flex item here, so it
     carries the form's order. */
  .contact-form-section__inner > .wpcf7 { order: 2; min-width: 0; }

}

@media (max-width: 767px) {

  .hero-subpage__band {
    padding-top: calc(var(--nav-height-mobile) + var(--space-32));
  }
  .hero-subpage__band > .hero-subpage__content {
    padding-bottom: 48px;
  }
  .hero-subpage__content {
    bottom: 48px;
  }

  .help-paths {
    padding-block: var(--section-pad-y-mobile);
  }
  .help-cards {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
  .help-cards.help-cards--four {
    /* minmax(0, 1fr), not bare 1fr: a bare track's minimum is its min-content
       width, so a long unbreakable word would push the grid past the viewport. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .help-card {
    padding: var(--space-32);
  }

  .contact-info__panel {
    padding: var(--section-pad-y-mobile) var(--gutter-mobile);
  }
  .contact-info__map {
    height: 500px;
  }

  .contact-form-section {
    padding-block: var(--section-pad-y-mobile);
    padding-inline: var(--gutter-mobile);
  }
  /* Contact form only. The intake forms share these .form-card classes and
     must not inherit the mobile overrides. */
  .contact-form-section .form-card__fields {
    padding: var(--space-24);
  }
  .contact-form-section .form-card__row {
    flex-direction: column;
    gap: var(--space-16);
  }
  .contact-form-section .form-card__footer {
    padding: 0 var(--space-16) var(--space-16);
  }

}

.qualifies {
  background: var(--color-white);
  padding-block: 96px;
  scroll-margin-top: calc(var(--nav-height) + var(--space-24));
}
.qualifies__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}
.qualifies__cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-card-gap);
  width: 100%;
}
.qualifies__cards .program-card {
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
}
.qualifies__helper {
  max-width: 680px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-900);
}
.qualifies__helper strong {
  font-weight: var(--font-weight-semibold);
}
.qualifies__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
}

@media (max-width: 1279px) {
  .qualifies {
    padding-block: var(--section-pad-y-tablet);
  }
  .qualifies__inner {
    gap: var(--space-32);
  }
  .qualifies__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .qualifies__cards .program-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--space-card-gap)) / 2);
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .qualifies {
    padding-block: var(--section-pad-y-mobile);
  }
  /* Request Meals and Volunteer drop the container max-width together below
     768px. This list is separate from the later blocks that carry the rest of
     the collapse. */
  .qualifies__inner,
  .request-form__inner,
  .make-difference__inner,
  .services-fit__inner {
    max-width: none;
  }
  .qualifies__inner {
    gap: var(--space-16);
  }
  .qualifies__actions {
    flex-direction: column;
    align-items: center;
  }
  .qualifies__cards {
    grid-template-columns: 1fr;
  }
  .qualifies__cards .program-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    justify-self: auto;
  }
}

.eligibility-criteria {
  background: var(--color-white);
  padding-block: 96px;
}
.eligibility-criteria__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}
.eligibility-criteria__cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-card-gap);
  width: 100%;
}
.eligibility-criteria__cards .program-card {
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
}
.eligibility-criteria__helper {
  max-width: 680px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-900);
}
.eligibility-criteria__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.eligibility-criteria__call {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
  color: var(--color-neutral-900);
}
.eligibility-criteria__call a {
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 1279px) {
  .eligibility-criteria {
    padding-block: var(--section-pad-y-tablet);
  }
  .eligibility-criteria__inner {
    gap: var(--space-32);
  }
  .eligibility-criteria__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .eligibility-criteria__cards .program-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--space-card-gap)) / 2);
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .eligibility-criteria {
    padding-block: var(--section-pad-y-mobile);
  }
  .eligibility-criteria__inner {
    gap: var(--space-16);
  }
  .eligibility-criteria__cards {
    grid-template-columns: 1fr;
  }
  .eligibility-criteria__cards .program-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    justify-self: auto;
  }
}

.apply {
  background: var(--color-primary-100);
  padding-block: 96px;
}
.apply__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}
.apply-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.apply-steps__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-24);
}
.apply-steps__icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary-600);
}
.apply-steps__step--accent .apply-steps__icon {
  color: var(--color-secondary-600);
}
.apply-steps__tag {
  position: relative;
  z-index: 1;
}
.apply-steps__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.apply-steps__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-950);
}
.apply-steps__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
}
.apply-steps__connector {
  position: absolute;
  z-index: 0;
  top: 112px;
  left: var(--space-24);
  width: 100%;
  border-top: 1px dashed var(--color-neutral-200);
}
.apply-steps__step:last-child .apply-steps__connector {
  display: none;
}

.eligibility-contact {
  background: var(--color-neutral-50);
  padding-block: 96px;
}
.eligibility-contact__inner {
  display: grid;
  grid-template-columns: 522px 630px;
  justify-content: space-between;
  align-items: start;
}
.eligibility-contact__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.eligibility-contact__header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-950);
}
.eligibility-contact__header p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
}
.eligibility-contact__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

@media (min-width: 768px) and (max-width: 1279px) {
  .apply {
    padding-block: var(--section-pad-y-tablet);
  }
  .apply-steps {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-40);
  }
  .apply-steps__step:nth-child(2) .apply-steps__connector {
    width: calc(100% - var(--space-24) + var(--gutter-tablet));
  }
  .apply-steps__step:nth-child(3) .apply-steps__connector {
    left: calc(-1 * var(--gutter-tablet));
    width: calc(100% + var(--space-24) + var(--gutter-tablet));
  }
  .eligibility-contact {
    padding-block: var(--section-pad-y-tablet);
  }
  .eligibility-contact__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-32);
  }
}

@media (max-width: 767px) {
  .apply {
    padding-block: var(--section-pad-y-mobile);
  }
  .apply-steps {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .apply-steps__step {
    gap: var(--space-16);
    padding: 0 0 var(--space-32);
  }
  .apply-steps__step:last-child {
    padding-bottom: 0;
  }
  .apply-steps__connector {
    top: 80px;
    left: -8px;
    width: 0;
    height: 100%;
    border-top: 0;
    border-left: 1px dashed var(--color-neutral-200);
  }
  .eligibility-contact {
    padding-block: var(--section-pad-y-mobile);
  }
  .eligibility-contact__inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-32);
  }
}

.request-form {
  background: var(--color-neutral-50);
  padding-block: 96px;
}
/* One grid area ("rail") holds the heading and the side block, stacked with
   flex + gap, so the tall form never stretches a shared grid row and pushes
   the side block to the bottom of the card. */
/* .make-difference is named alongside .request-form in each rule below so the
   two forms stay scoped instead of sharing a generic class. Volunteer's grid
   item is the .make-difference__form wrapper; Request Meals' is .form-card
   itself, so those two stay separate rules. */
.request-form__inner,
.make-difference__inner {
  display: grid;
  grid-template-columns: 522px 630px;
  grid-template-areas: "rail form";
  justify-content: space-between;
  align-items: start;
  row-gap: var(--space-24);
}
.request-form__rail,
.make-difference__rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.request-form__head,
.make-difference__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.request-form .form-card {
  grid-area: form;
}
.make-difference__form {
  grid-area: form;
}
.request-form__heading,
.make-difference__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-950);
}
.request-form__divider,
.make-difference__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-neutral-200);
}
/* The flex gap separates the card's direct children (stepper, title, current
   step, required note) and is the only source of the heading's top spacing. */
.request-form__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16) var(--space-32);
}
.request-form__card-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-950);
}
/* Step content carries its own 16px inline padding on top of the card body's
   16px, so it sits 32px in from the card edge while the card's other direct
   children (required note, title, branch switch, stepper) sit at 16px. */
.request-form__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-left: var(--space-16);
  padding-right: var(--space-16);
  opacity: 1;
  transition: opacity 150ms ease;
}
/* Step-change transition: request-form.js adds this class during the pause
   between a click and the new step appearing. It dims the outgoing step and
   blocks further clicks on it. */
.request-form__card-body.is-step-transitioning .request-form__step:not([hidden]) {
  opacity: 0.4;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .request-form__step,
  .request-form__card-body.is-step-transitioning .request-form__step:not([hidden]) {
    transition: none;
  }
}
.request-form__step-lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-700);
}
/* Gap between sibling fieldsets within one step. It must read clearly larger
   than the field-to-field gap inside a group so the grouping stays visible. */
.request-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
/* The stepper JS hides non-current steps, the inactive branch and buttons with
   [hidden]. The display rules above (and .btn) out-rank the UA [hidden] rule,
   so it is restated here, scoped to the form, with !important. */
.request-form [hidden] {
  display: none !important;
}
/* Previous and Next share the footer row, so they carry the same pill
   geometry plus a 140px min-width floor so Next is not narrower than Previous.
   Colour comes from .btn-pill-filled-blue. No :hover here: sections.css loads
   after components.css and would out-rank the colour class's hover. */
.request-form__submit {
  min-height: var(--btn-height-sm);
  min-width: 140px;
  padding: 10px var(--space-24);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
}
.request-form__back {
  min-width: 140px;
  visibility: hidden;
}
/* Below the tablet breakpoint the 140px floor is dropped: two floored buttons
   do not fit the footer's content box at 320 and the card would clip the
   forward button. flex-wrap lets the longest label drop to its own line. */
@media (max-width: 767px) {
  .request-form .form-card__footer,
  .make-difference .form-card__footer {
    flex-wrap: wrap;
  }
  .request-form__back,
  .request-form__submit {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* The out-of-area link that replaces Next in the Volunteer footer. Its label
   is long and barely fits at 320, so white-space is released to let it wrap,
   and min-width:0 lets flexbox shrink it. */
.request-form__optout-link {
  white-space: normal;
  text-align: center;
  min-width: 0;
}

/* Message slot: a permanent element per required field, created at JS init and
   empty by default. Also used for the phone-pair group slot. CF7's own
   .wpcf7-not-valid-tip is suppressed; request-form.js copies its text into
   this slot instead. */
.request-form .form-card__field-msg,
.make-difference .form-card__field-msg {
  display: block;
  /* An empty slot holds no line, so an error pushes the content below it down
     by one line. The 4px margin sits below the message so a shown error is
     tight under its input; it does not collapse when the slot is empty. */
  min-height: 0;
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
  color: var(--color-secondary-700);
}
.request-form .wpcf7-not-valid-tip,
.make-difference .wpcf7-not-valid-tip {
  display: none;
}
/* The div case of a required group (e.g. the phone pair): field-to-field gap
   inside a group. Keep the value in step with the fieldset version in
   components.css, which has higher specificity and only covers <fieldset>. */
.request-form .form-card__field-group,
.make-difference .form-card__field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Error summary at the top of a step, listing each problem as a link to its
   field. Rendered by request-form.js on a failed Continue. */
.request-form__error-summary {
  padding: var(--space-12) var(--space-16);
  border: 2px solid var(--color-secondary-700);
  border-radius: 12px;
  background: var(--color-secondary-100);
  color: var(--color-secondary-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
}
.request-form__error-summary[hidden] {
  display: none;
}
.request-form__error-summary-title {
  margin: 0 0 var(--space-8);
  font-weight: var(--font-weight-medium);
}
.request-form__error-summary-list {
  margin: 0;
  padding-left: var(--space-20);
}
.request-form__error-summary-list li {
  margin-bottom: var(--space-4);
}
.request-form__error-summary a {
  color: var(--color-secondary-700);
}

/* Full-width option labels: the label shrink-wraps by default, so clicking to
   the right of a short option's text would miss. Stretch it to the full row. */
.request-form .wpcf7-list-item,
.make-difference .wpcf7-list-item {
  width: 100%;
}
.request-form .wpcf7-list-item label,
.make-difference .wpcf7-list-item label {
  width: 100%;
}

@media (max-width: 1279px) {
  .request-form {
    padding-block: var(--section-pad-y-tablet);
  }
  .request-form__inner,
  .make-difference__inner {
    /* minmax(0, 1fr), not a bare 1fr: a bare track's minimum is its min-content
       size, so a long unwrapped string (draft banner, Spanish copy) would grow
       the track past the viewport instead of wrapping. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rail"
      "form";
    row-gap: var(--space-32);
  }
}

@media (max-width: 767px) {
  .request-form {
    padding-block: var(--section-pad-y-mobile);
  }
  /* Only the edge padding changes at mobile; the gap keeps the base value. */
  .request-form__card-body {
    padding: var(--space-16);
  }
  /* The row's 16px gap is a horizontal gutter on wider screens; stacked it
     becomes a vertical gap, so it drops to the 8px field-to-field gap.
     :not(--keep-row) excludes the date-of-birth row, which stays a row. */
  .request-form .form-card__row:not(.form-card__row--keep-row),
  .make-difference .form-card__row:not(.form-card__row--keep-row) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }
  /* The middle-initial row and the Month/Day/Year row stay side by side below
     the tablet breakpoint. They must stay flex-direction:row, or the
     field flex-basis values (widths) would apply to height. flex-wrap lets
     Year drop to its own line at 320 to 390px, where the 364px of fixed widths
     does not fit and the form clips overflow. */
  .request-form .form-card__row--keep-row,
  .make-difference .form-card__row--keep-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Saved-draft banner: hidden by default, shown by request-form.js when a valid
   draft exists for the page's language. */
.request-form__draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin: 0 0 var(--space-16);
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--color-primary-200);
  border-radius: 16px;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
}
.request-form__draft-banner[hidden] {
  display: none;
}
.request-form__draft-banner-actions {
  display: flex;
  gap: var(--space-12);
  margin-left: auto;
}
.request-form__draft-banner-actions .btn {
  height: 44px;
  padding: 0 var(--space-20);
  font-size: var(--font-size-body-4);
}
@media (max-width: 767px) {
  .request-form__draft-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .request-form__draft-banner-actions {
    margin-left: 0;
    flex-direction: column;
  }
}

/* Review modal. A native <dialog> provides the focus trap, Escape-to-close and
   ::backdrop. It is appended to document.body, so these rules are not scoped
   under .request-form. The header and footer stay fixed while the body scrolls,
   so Submit never leaves the viewport. */
/* The display pair is qualified with [open]: the UA rule that hides a closed
   dialog loses to any author display value, so an unqualified display:flex
   would keep painting (and keep clickable) the panel after close(). */
.request-form__modal {
  width: min(640px, calc(100vw - var(--space-32)));
  max-height: calc(100vh - var(--space-64));
  padding: 0;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(10, 20, 40, 0.24);
}
.request-form__modal[open] {
  display: flex;
  flex-direction: column;
}
.request-form__modal::backdrop {
  background: rgba(10, 20, 40, 0.55);
}
.request-form__modal-header {
  flex: 0 0 auto;
  padding: var(--space-24) var(--space-24) var(--space-16);
  border-bottom: 1px solid var(--color-neutral-200);
}
.request-form__modal-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h5, var(--font-size-body-2));
  line-height: var(--line-height-h5, var(--line-height-body-2));
  color: var(--color-neutral-950);
}
.request-form__modal-subtitle {
  margin: var(--space-8) 0 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
  color: var(--color-neutral-700);
}
.request-form__modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-8) var(--space-24);
}
.request-form__modal-section {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-neutral-200);
}
.request-form__modal-section:last-child {
  border-bottom: 0;
}
.request-form__modal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
}
.request-form__modal-section-head h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-950);
}
.request-form__modal-edit {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-primary-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  text-decoration: underline;
  cursor: pointer;
}
.request-form__modal-fields {
  margin: var(--space-12) 0 0;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare track will not shrink below its
     min-content width, so one unbreakable value (an email address) would push
     the grid wider than the dialog. */
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--space-8) var(--space-16);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
}
.request-form__modal-fields dt {
  color: var(--color-neutral-700);
}
.request-form__modal-fields dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--color-neutral-950);
}
.request-form__modal-fields dd.request-form__modal-blank {
  color: var(--color-neutral-500);
}
.request-form__modal-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24) var(--space-20);
  border-top: 1px solid var(--color-neutral-200);
}
@media (max-width: 767px) {
  .request-form__modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .request-form__modal-footer {
    flex-direction: column-reverse;
  }
  .request-form__modal-footer .btn {
    width: 100%;
  }
}

.services-fit {
  background: var(--color-white);
  padding-block: 96px;
}
.services-fit__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}
.services-fit__cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-card-gap);
  width: 100%;
}
.services-fit__cards .program-card-link {
  flex: 1;
  min-width: 0;
}
.services-fit__cards .program-card {
  width: auto;
  height: 100%;
}

@media (max-width: 1279px) {
  .services-fit {
    padding-block: var(--section-pad-y-tablet);
  }
  .services-fit__inner {
    gap: var(--space-32);
  }
}

@media (max-width: 767px) {
  .services-fit {
    padding-block: var(--section-pad-y-mobile);
  }
  .services-fit__inner {
    gap: var(--space-16);
  }
  .services-fit__cards {
    flex-direction: column;
  }
}

.news {
  background: var(--color-white);
  padding-block: var(--section-pad-y);
}

.news .section-header {
  margin-bottom: var(--space-32);
  text-align: center;
}

.news__filter {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-40);
}

@media (max-width: 1279px) {
  .news {
    padding-block: var(--section-pad-y-tablet);
  }
}

@media (max-width: 767px) {
  .news {
    padding-block: var(--section-pad-y-mobile);
  }
  .news__filter {
    margin-bottom: 0;
  }
}

.category-content {
  background: var(--color-white);
  padding-block: var(--section-pad-y);
}

.category-content .news-grid {
  margin-bottom: var(--space-40);
}

@media (max-width: 1279px) {
  .category-content {
    padding-block: var(--section-pad-y-tablet);
  }
}

@media (max-width: 767px) {
  .category-content {
    padding-block: var(--section-pad-y-mobile);
  }
}

#error-hero .support-mission__actions {
  margin-top: var(--space-32);
}

@media (min-width: 1280px) {
  #error-hero .hero-subpage__content {
    bottom: var(--space-40);
  }
}

#quick-links .section-header {
  margin-bottom: var(--space-32);
}

.year-ledger {
  background: var(--color-neutral-50);
  padding-block: var(--section-pad-y);
}
.year-ledger__header {
  margin-bottom: var(--space-40);
}
.year-ledger__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-64);
  align-items: start;
}

.year-ledger__rail {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-24));
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.year-ledger__rail-item {
  display: inline-flex;
  align-items: center;
  padding: var(--space-12) var(--space-16);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-900);
  text-decoration: none;
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard),
              color            var(--motion-duration-base) var(--motion-ease-standard);
}
@media (hover: hover) {
  .year-ledger__rail-item:not(.year-ledger__rail-item--active):hover {
    background: var(--color-neutral-50);
  }
}
.year-ledger__rail-item:focus { outline: none; }
.year-ledger__rail-item:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.year-ledger__rail-item--active {
  background: var(--color-primary-800);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.year-ledger__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  min-width: 0;
}
.year-group {
  scroll-margin-top: calc(var(--nav-height) + var(--space-24));
}
.year-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  cursor: pointer;
  list-style: none;
}
.year-group__summary::-webkit-details-marker {
  display: none;
}
.year-group__summary:focus { outline: none; }
.year-group__summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.year-group__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--color-primary-950);
}
.year-group__toggle-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--color-primary-700);
  -webkit-mask-image: var(--icon-plus-url);
          mask-image: var(--icon-plus-url);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.year-group[open] .year-group__toggle-icon {
  -webkit-mask-image: var(--icon-minus-url);
          mask-image: var(--icon-minus-url);
}
.year-group__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

.doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color var(--motion-duration-base) var(--motion-ease-standard);
}
@media (hover: hover) {
  .doc-row:hover {
    border-color: var(--color-primary-300);
  }
}
.doc-row:focus { outline: none; }
.doc-row:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.doc-row__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary-700);
  flex-shrink: 0;
}
.doc-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.doc-row__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-950);
  overflow-wrap: anywhere;
}
.doc-row__meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-body-5);
  line-height: var(--line-height-body-5);
  color: var(--color-neutral-700);
}
.doc-row__download {
  width: 20px;
  height: 20px;
  color: var(--color-neutral-700);
  flex-shrink: 0;
}

@media (max-width: 1279px) {
  .year-ledger {
    padding-block: var(--section-pad-y-tablet);
  }
  .year-ledger__layout {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .year-ledger__rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    -webkit-overflow-scrolling: touch;
  }
  .year-ledger__rail-item {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .year-ledger {
    padding-block: var(--section-pad-y-mobile);
  }
  .doc-row {
    padding: var(--space-12) var(--space-16);
  }
}

.video-block {
  padding-block: var(--section-pad-y);
}
.video-block--tint {
  background: var(--color-neutral-50);
}
.video-block--blue {
  background: var(--color-primary-100);
}
.video-block--dark {
  background: var(--color-primary-950);
}
.video-block .section-header {
  margin-bottom: var(--space-40);
}
/* Eyebrow colour per background, for WCAG AA text contrast: Secondary/700 on
   white and tint, /800 on the Primary/100 blue, and the lighter /400 on the
   dark navy. */
.video-block__eyebrow {
  margin: 0 0 var(--space-12);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-5);
  line-height: var(--line-height-body-5);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary-700);
}
.video-block--blue .video-block__eyebrow {
  color: var(--color-secondary-800);
}
.video-block--dark .video-block__eyebrow {
  color: var(--color-secondary-400);
}

.video-grid {
  display: grid;
  gap: var(--space-24);
}
.video-grid.count-1 {
  grid-template-columns: minmax(0, 960px);
  justify-content: center;
}
.video-grid.count-2 {
  grid-template-columns: repeat(2, 1fr);
}
.video-grid.count-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}
.video-item {
  min-width: 0;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-primary-950);
  border: 1px solid var(--color-neutral-200);
}
.video-frame .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* About 50% scrim over the poster: evens out thumbnail quality and keeps the
   play button legible. Hidden with the button once playing. */
.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-950), transparent 55%),
    color-mix(in srgb, var(--color-primary-950), transparent 45%)
  );
  pointer-events: none;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-frame.is-playing .play,
.video-frame.is-playing::after {
  display: none;
}

.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--color-primary-600);
  display: grid;
  place-items: center;
  z-index: 1;
  transition:
    transform var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-base) var(--motion-ease-standard);
}
.play svg {
  width: 30px;
  height: 30px;
  fill: var(--color-white);
}
@media (hover: hover) {
  .play:hover {
    background: var(--color-primary-700);
    transform: scale(1.06);
  }
}
.play:active {
  transform: scale(0.97);
}
.play:focus {
  outline: none;
}
.play:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .play {
    transition: none;
  }
  .play:hover {
    transform: none;
  }
}

@media (max-width: 1279px) {
  .video-block {
    padding-block: var(--section-pad-y-tablet);
  }
}
@media (max-width: 767px) {
  .video-block {
    padding-block: var(--section-pad-y-mobile);
  }
  .video-grid.count-2,
  .video-grid.count-3 {
    grid-template-columns: 1fr;
  }
}