/*
  campaign.css
  Custom styles for the Masjid Ar-Rahman Midtown campaign site.
  Loaded after styles.css, so these rules deliberately refine the base sheet.
*/

:root {
  /* A darker orange for small text: the bright brand orange is 2.71:1 on white,
     which fails WCAG AA. This shade clears 4.5:1 and is used for text only. */
  --orange-text: #b8490f;

  /* The base muted grey (#65717a) lands at 4.42:1 on the tinted donate
     background - just under AA. This shade clears 4.8:1 there, and improves
     every other section too. */
  --muted: #5f6a72;

  /* ---------- Widescreen cap ----------
     Past 1440px of content the gutters grow instead of the sections, so the
     layout stays centred and readable on a large monitor while the tinted
     backgrounds still bleed to the viewport edge. Without this the hero's navy
     panel stretched to 1157px around 430px of artwork, the location map ran out
     to 1283px, and the grid gaps grew to 179px. */
  --content-max: 1440px;
  --gutter: max(9vw, calc((100% - var(--content-max)) / 2));
  --gutter-tight: max(6vw, calc((100% - var(--content-max)) / 2));
  --gutter-bleed: max(0px, calc((100% - var(--content-max)) / 2));
}

/* Small uppercase labels use the accessible orange. Decorative marks keep the bright one. */
.section-kicker {
  color: var(--orange-text);
}

/* Every full-bleed band shares one capped gutter, so their contents line up. */
.section,
.campaign {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-header {
  padding-left: var(--gutter-tight);
  padding-right: var(--gutter-tight);
}

/* ---------- Campaign progress bar ---------- */
/* The bar used var(--blue) #147db5. Two small pieces of text on it failed AA:
   the eyebrow at 3.54:1 and the progress paragraph at 3.65:1. Darkening the bar
   to #0f6a99 lifts them to 4.58:1 and 4.72:1 without touching the copy. */
.campaign {
  background: #0f6a99;
  column-gap: min(5vw, 78px);
}

/* ---------- Header ---------- */
.location-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 24px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.location-pill span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: auto;
  min-height: 0;
  padding-left: var(--gutter);
  /* Stays 0, so the navy panel bleeds to the edge, until the content cap is
     reached - then it grows and the hero centres instead of stretching. */
  padding-right: var(--gutter-bleed);
}

.hero-copy {
  align-self: center;
  max-width: 560px;
  padding: 52px 36px 52px 0;
}

.hero h1 {
  font-size: clamp(42px, 4.6vw, 64px);
  margin-bottom: 22px;
}

.hero-lede {
  font-size: 16px;
  margin-bottom: 26px;
}

.hero-photo {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  /* Two portrait images cannot fill a wide panel on their own, so they grow with
     the screen rather than leaving a large empty navy area beside them. */
  height: clamp(480px, 26vw, 580px);
  min-height: 0;
  padding: 16px;
  background: #123d74;
  background-image: linear-gradient(135deg, #0e3769, #123d74 55%, #147db5);
  overflow: hidden;
}

.hero-location-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: auto;
  height: 100%;
  min-width: 0;
  aspect-ratio: 222 / 560;
  border: 1px solid rgba(255, 255, 255, .28);
  background: #0b2b50;
  overflow: hidden;
}

.hero-location-card img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.building-photo-slot {
  position: relative;
  flex: 1 1 auto;
  border: 1px dashed rgba(240, 181, 45, .55);
  background: rgba(255, 255, 255, .05);
}

.building-photo-slot:before {
  content: '+';
  position: absolute;
  top: 44%;
  left: 50%;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 24px;
  transform: translate(-50%, -50%);
}

.building-photo-slot:after {
  content: 'PROPERTY PHOTO COMING SOON';
  position: absolute;
  right: 16px;
  bottom: 22%;
  left: 16px;
  color: #dbeaf3;
  font: 700 10px 'DM Sans', sans-serif;
  letter-spacing: .16em;
  text-align: center;
}

/* ---------- Location map illustration ---------- */
.map-illustration {
  position: relative;
  min-height: 374px;
  height: 100%;
  overflow: hidden;
  background: #c9e4f1;
}

.map-illustration:before,
.map-illustration:after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .8);
}

.map-illustration:before {
  top: 42%;
  left: -5%;
  width: 110%;
  height: 28px;
  transform: rotate(-8deg);
}

.map-illustration:after {
  top: -10%;
  left: 54%;
  width: 26px;
  height: 125%;
  transform: rotate(8deg);
}

.map-illustration span,
.map-illustration strong {
  position: absolute;
  z-index: 1;
  letter-spacing: .12em;
}

.map-illustration span {
  padding: 10px;
  background: rgba(255, 255, 255, .8);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
}

.map-illustration .penn {
  top: 55%;
  left: 12%;
}

.map-illustration .empire {
  top: 18%;
  right: 14%;
  background: var(--gold);
}

.map-illustration strong {
  top: 42%;
  left: 44%;
  padding: 12px 14px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  transform: rotate(-8deg);
}

/* ---------- Find us (condensed to match the other sections) ---------- */
.location {
  padding-top: 56px;
  padding-bottom: 56px;
}

.location .section-heading {
  margin: 22px 0 24px;
}

.location .section-heading h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: .98;
  letter-spacing: -.06em;
}

.location-card {
  /* A narrow first column holds the campaign poster illustration, back on the
     page alongside the map it belongs with. */
  grid-template-columns: 152px minmax(0, 1.35fr) minmax(0, 0.65fr);
  min-height: 0;
  gap: 16px;
}

.location-mark {
  /* A definite ratio so the image does not depend on the grid row height to
     resolve its own size. */
  aspect-ratio: 2 / 5;
  margin: 0;
  overflow: hidden;
  border: 6px solid #fff;
  background: var(--navy);
  box-shadow: 0 8px 20px rgba(18, 61, 116, .10);
}

.location-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location .map {
  min-height: 260px;
  border-width: 6px;
  box-shadow: 0 8px 20px rgba(18, 61, 116, .10);
}

.location .map-illustration {
  min-height: 260px;
}

.location .place-copy {
  min-height: 0;
  padding: 24px;
}

.location .place-copy h3 {
  margin: 0 0 14px;
  font-size: 26px;
}

.location .place-copy > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.6;
}

.location .place-copy strong {
  margin-top: 14px;
  font-size: 13px;
}

/* ---------- Donation amount presets (top of the giving widget) ---------- */
.amounts {
  margin: 0;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--line);
}

.amounts-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.amount {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.amount.is-selected {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.amounts-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.amount-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.amount {
  display: inline-flex;
  /* Share the row equally so five buttons always fit on one line, now that the
     row sits in the narrower left column. */
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font: 700 15px Manrope, sans-serif;
  letter-spacing: -.02em;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.amount:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

.amount-alt {
  border-style: dashed;
  border-color: var(--blue);
  color: var(--blue);
}

.amount-alt:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ---------- On-page giving widget ---------- */
.give {
  /* Match the vertical rhythm of sections 01 and 02. */
  padding-top: 56px;
  padding-bottom: 56px;
  column-gap: min(7vw, 110px);
  row-gap: 24px;
  /* A cool tint, not the warm cream used before: the rest of the page is navy,
     blue and cool grey, so a beige read as slightly yellow and off-family. */
  background: #eaf2f9;
}

.giving {
  /* The top rule is gone: step 1 now sits in the left column, so a border here
     would underline only half of the widget. */
  /* Let the grid item shrink so the scrollable tab strip cannot overflow the page. */
  min-width: 0;
}

.give-intro {
  min-width: 0;
}

/* Was clamp(38px, 5vw, 72px) in the base sheet, which wrapped "How to donate."
   onto two lines in this column and made the section far taller than its
   neighbours. Now matches the heading scale used by sections 01 to 03. */
.give-intro h2 {
  margin: 22px 0 24px;
  font: 700 clamp(28px, 3.2vw, 44px)/.98 Manrope, sans-serif;
  letter-spacing: -.06em;
}

/* Step 1 of the widget sits under the intro text instead of at the top of the
   right column. The left column is no longer half empty, and on mobile the
   reading order becomes intro, amount, method. */
.give-intro .amounts {
  margin-top: 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

/* Tax status at the foot of the giving section, spanning both columns. This is
   where a donor has finished reading the methods and is deciding. */
.give-foot {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: 13px;
  line-height: 1.6;
}

.giving-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 0;
  max-width: 100%;
  border-bottom: 1px solid var(--line);
}

.giving-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 700 14px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.giving-tab:hover {
  color: var(--navy);
}

.giving-tab.is-active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.tag {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.giving-panel {
  padding: 16px 0 2px;
}

.giving-panel[hidden] {
  display: none;
}

/* The method tabs already name each panel. The old per-panel <h3> headings
   ("Card or online giving", "Other online payment") only said it twice. */

.giving-hint {
  max-width: 460px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.giving-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.give-field {
  margin-bottom: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.give-field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.give-field-value {
  display: block;
  color: var(--navy);
  font: 700 clamp(15px, 1.6vw, 19px) Manrope, sans-serif;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.give-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.copy-btn {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  font: 700 12px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.copy-btn:hover {
  background: var(--navy);
  color: #fff;
}

.give-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.give-more {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.give-more summary {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.give-more[open] summary {
  margin-bottom: 10px;
}

/* ---------- Share the campaign ---------- */
.share {
  padding-top: 56px;
  padding-bottom: 56px;
  background: var(--navy);
  color: #fff;
}

.share .section-kicker {
  color: var(--gold);
}

.share .share-title {
  color: #fff;
}

.share .share-lede {
  color: #c9dbe6;
}

.share-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: min(6vw, 94px);
  align-items: center;
  margin-top: 26px;
}

.share-title {
  margin: 0 0 16px;
  font: 700 clamp(30px, 3.8vw, 52px)/.94 Manrope, sans-serif;
  letter-spacing: -.07em;
}

.share-lede {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--navy);
  font: 700 14px 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.share-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.share-copy {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.share-copy:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* ---------- Footer ---------- */
footer {
  display: block;
  padding-top: 48px;
  padding-bottom: 30px;
  padding-left: var(--gutter-tight);
  padding-right: var(--gutter-tight);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
}

.footer-nav a {
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}

.footer-nav a:hover {
  color: var(--orange);
}

.footer-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 26px 0;
}

.footer-contact p {
  margin: 0;
  line-height: 1.7;
}

.footer-contact strong {
  display: block;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-contact a {
  color: var(--blue);
  font-weight: 600;
  word-break: break-word;
}

/* Spans both columns so the record of the organization reads as one statement. */
.footer-contact .footer-tax {
  grid-column: 1 / -1;
  max-width: 660px;
  font-size: 12px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.footer-bottom a {
  color: var(--navy);
  font-weight: 600;
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .location-pill {
    display: none;
  }

  /* The poster strip is desktop only. On a phone it would add most of a screen of
     scrolling, and the hero already shows the real building photo. Reset the
     column template too, or the map and copy get crushed into the narrow
     desktop columns once the strip is hidden. */
  .location-mark {
    display: none;
  }

  .location-card {
    grid-template-columns: 1fr;
  }

  .hero {
    display: block;
    padding-left: 0;
  }

  .hero-copy {
    max-width: none;
    padding: 58px 7vw 42px;
  }

  .hero h1 {
    font-size: clamp(36px, 10.5vw, 54px);
  }

  .hero-photo {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: auto;
    min-height: 0;
    padding: 16px;
  }

  .hero-location-card {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .hero-location-card img {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 290px;
    margin: 0 auto;
  }

  .building-photo-slot {
    flex: 0 0 auto;
    width: 100%;
    min-height: 210px;
  }

  /* A 2x2 grid rather than a horizontally scrolling strip. Four method tabs
     never fit on one row at this width, and a scroll strip hides options
     off-screen on the one control the donor has to use. */
  .giving-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .giving-tab {
    min-width: 0;
    justify-content: center;
  }

  .give-field-row,
  .give-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-btn,
  .give-actions .button,
  .giving-panel > .button {
    width: 100%;
    min-height: 48px;
  }

  .share-inner,
  .footer-contact {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Two columns, not one. The labels are short, so full-width buttons left a lot
     of empty space and stacked the block four rows tall. */
  .share-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .share-btn {
    padding: 12px 14px;
    font-size: 13px;
  }

  .amount {
    padding: 11px 4px;
    font-size: 13px;
  }

  .footer-top {
    align-items: flex-start;
  }
}

/* ---------- What we are building ---------- */
.vision {
  padding-top: 56px;
  padding-bottom: 56px;
}

.vision-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: min(5vw, 78px);
  align-items: end;
  margin: 22px 0 24px;
}

.vision-head h2 {
  margin: 0;
  font: 700 clamp(28px, 3.2vw, 44px)/.98 Manrope, sans-serif;
  letter-spacing: -.06em;
}

.vision-head p {
  max-width: 400px;
  margin: 0;
  color: #c4d7e2;
  font-size: 14px;
  line-height: 1.6;
}

.vision-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .16);
}

.vision-stats div {
  padding: 16px 18px;
  background: rgba(255, 255, 255, .06);
}

.vision-stats strong {
  display: block;
  color: var(--gold);
  font: 800 clamp(20px, 2.1vw, 28px)/1 Manrope, sans-serif;
  letter-spacing: -.04em;
}

.vision-stats span {
  display: block;
  margin-top: 5px;
  /* Was #b9cdda, which measured only 3.60:1 once the stat cells were lightened
     from solid navy to a translucent white. This clears AA at 4.80:1. */
  color: #dfe9f1;
  font-size: 11px;
  line-height: 1.45;
}

.vision-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Icon and title share one row to keep the section compact. */
.vision-cards article {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 12px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  transition: background .2s ease, border-color .2s ease;
}

.vision-cards article:hover {
  border-color: rgba(240, 181, 45, .5);
  background: rgba(255, 255, 255, .09);
}

.vision-icon {
  grid-area: 1 / 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(240, 181, 45, .55);
  border-radius: 50%;
  color: var(--gold);
}

.vision-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vision-cards h3 {
  grid-area: 1 / 2;
  align-self: center;
  margin: 0;
  font: 600 17px Manrope, sans-serif;
  letter-spacing: -.02em;
}

.vision-cards p {
  grid-area: 2 / 1 / 3 / 3;
  margin: 12px 0 0;
  color: #c4d7e2;
  font-size: 13px;
  line-height: 1.55;
}

.vision-chips {
  grid-area: 3 / 1 / 4 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.vision-chips li {
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #dbe9f1;
  font-size: 10.5px;
  letter-spacing: .03em;
}

/* ---------- Keyboard accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* This section is a large block of solid navy, so on a phone every pixel of it
     costs scrolling before a donor reaches the giving section. Tightened hard. */
  .vision {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .vision-head {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
    margin: 14px 0 16px;
  }

  .vision-head h2 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .vision-head p {
    font-size: 13.5px;
  }

  .vision-stats {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 14px;
  }

  .vision-stats div {
    padding: 10px 12px;
  }

  .vision-stats span {
    margin-top: 3px;
    font-size: 10.5px;
  }

  .vision-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vision-cards article {
    padding: 13px;
  }

  .vision-cards p {
    margin-top: 8px;
    font-size: 12.5px;
  }

  .vision-chips {
    gap: 5px;
    margin-top: 9px;
  }

  .vision-chips li {
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* ---------- Hero campaign video (portrait 9:16) ---------- */
.hero-video {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.hero-video .video-frame {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  background: #0b2b50;
}

.hero-video .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(18, 61, 116, .92);
  transform: translate(-50%, -50%);
  transition: background .2s ease;
}

.video-play-icon:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--gold);
  transform: translate(-40%, -50%);
}

.video-play:hover .video-play-icon,
.video-play:focus-visible .video-play-icon {
  background: var(--gold);
}

.video-play:hover .video-play-icon:after,
.video-play:focus-visible .video-play-icon:after {
  border-left-color: var(--navy);
}

/* ---------- Where we are ---------- */
.timeline {
  /* Sections 01 and 02 use 56px; these three were still on the 100px base. */
  padding-top: 56px;
  padding-bottom: 56px;
  background: #fff;
}

.timeline-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: min(5vw, 78px);
  align-items: end;
  margin: 22px 0 24px;
}

.timeline-head h2 {
  margin: 0;
  font: 700 clamp(28px, 3.2vw, 44px)/.98 Manrope, sans-serif;
  letter-spacing: -.06em;
}

.timeline-head p {
  max-width: 400px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.timeline-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--line);
}

.timeline-list li {
  position: relative;
  padding: 20px 18px 0 0;
}

.timeline-dot {
  position: absolute;
  top: -9px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.timeline-list .is-done .timeline-dot {
  border-color: var(--navy);
  background: var(--navy);
}

.timeline-list .is-active .timeline-dot {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(240, 181, 45, .28);
}

.timeline-status {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.timeline-list .is-active .timeline-status {
  color: var(--orange-text);
}

.timeline-list h3 {
  margin: 0 0 7px;
  font: 600 17px Manrope, sans-serif;
  letter-spacing: -.02em;
}

.timeline-list p {
  max-width: 215px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .timeline-head {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    margin: 18px 0 20px;
  }

  .hero-video {
    flex: 0 0 auto;
    width: 100%;
  }

  .hero-video .video-frame {
    flex: 0 0 auto;
    width: 70vw;
    max-width: 235px;
    height: auto;
    max-height: 68vh;
  }

  .video-play-icon {
    width: 54px;
    height: 54px;
  }

  .timeline-list {
    grid-template-columns: 1fr;
    border-top: 0;
    border-left: 3px solid var(--line);
  }

  .timeline-list li {
    padding: 0 0 24px 24px;
  }

  .timeline-dot {
    top: 4px;
    left: -9px;
  }
}

/* ---------- Sticky give bar (mobile only) ---------- */
/* The page is long enough that a donor heading for the giving section scrolls
   several screens to get there. This keeps it one tap away. */
.give-bar {
  display: none;
}

@media (max-width: 760px) {
  .give-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 2px solid var(--gold);
    background: var(--navy);
    box-shadow: 0 -6px 18px rgba(18, 61, 116, .22);
  }

  /* Required: the display above would otherwise beat the [hidden] attribute. */
  .give-bar[hidden] {
    display: none;
  }

  .give-bar-text {
    min-width: 0;
    color: #c9dbe6;
    font-size: 11px;
    line-height: 1.35;
  }

  .give-bar-text strong {
    display: block;
    color: #fff;
    font-size: 13px;
  }

  .give-bar-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    background: var(--gold);
    color: var(--ink);
    font: 700 14px 'DM Sans', sans-serif;
    text-decoration: none;
  }

  /* Stop the fixed bar covering the end of the footer. */
  body {
    padding-bottom: 76px;
  }
}

/* ---------- Reduced motion ---------- */
/* The page leans on smooth scrolling and 26 hover/fade transitions. Anyone who
   has asked their system to reduce motion should get an instant, static page.
   !important is required here: those individual rules are class-based and would
   otherwise outrank a universal selector. This is the only !important in the sheet. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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