/*
  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;
  /* The base sheet made this two columns (.85fr 1.15fr). Giving is now a single
     centred column so the card form is the focal point of the section instead of a
     right-hand panel next to the heading. */
  grid-template-columns: minmax(0, 1fr);
  /* 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;
}

/* The heading has no bespoke size here any more. It was clamp(28px, 3.2vw, 44px)
   because the intro sat in a narrow column; now that the kicker is followed by the
   shared .section-heading row, it takes the same hero scale as sections 01 to 03.
   The base sheet sizes `.give h2` at the full clamp(38px, 5vw, 72px) band, which is
   the *campaign* headline size - bigger than every section heading - so the two
   rules below are what actually make it match 01 to 03 rather than tower over
   them. They are the same two rules .location, .vision and .timeline each carry. */
.give .section-heading {
  margin: 22px 0 24px;
}

.give .section-heading h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: .98;
  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;
}

/* One left edge for the whole section, matching the sections above it. These
   blocks used to centre at 560px and 900px under a centred heading; now that the
   heading is the shared .section-heading row - left-aligned, exactly like 01 to
   03 - the header row keeps that edge. */
.give-intro,
.giving,
.give-alts,
.give-foot {
  width: 100%;
  max-width: 900px;
  margin-inline: 0;
}

/* Everything BELOW the header row centres on the page, not on the left edge.
   The section's own column is as wide as the page content - measured 233 to 1673
   at a 1920px viewport, the same span sections 01 to 03 use - but these blocks are
   capped at 900px and were pinned to that column's left edge. That left 540px of
   empty space to the right and put the donate buttons and the Zelle and Check pair
   on the left of the screen: measured, their centre was 683px against a page centre
   of 953px. Centring the capped blocks inside the full-width column fixes that, and
   doing it here rather than there is what makes the buttons land on the middle of
   the PAGE - centring them inside a 900px block that is itself left-pinned only
   ever finds the middle of that block.

   .give-intro is deliberately not in this list. It holds the 04 kicker and the
   heading, and that row has to keep the page's left edge so it lines up with 01 to
   03. Below roughly 1000px the column is narrower than 900px, so these blocks fill
   it and this rule has no effect. */
.giving,
.give-alts,
.give-foot {
  margin-inline: auto;
}

.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;
}

/* ---------- Custom amount ---------- */
.amount-custom {
  margin-top: 14px;
}

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

.amount-input {
  display: flex;
  align-items: center;
  max-width: 200px;
  border: 1px solid var(--line);
  background: #fff;
}

.amount-input span {
  padding: 0 2px 0 14px;
  color: var(--muted);
  font: 700 15px Manrope, sans-serif;
}

.amount-input input {
  width: 100%;
  min-width: 0;
  padding: 13px 14px 13px 6px;
  border: 0;
  background: none;
  color: var(--navy);
  font: 700 15px Manrope, sans-serif;
}

.amount-input input:focus {
  outline: none;
}

.amount-input:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18, 61, 116, .14);
}

/* ---------- Inline card payment ---------- */
.pay-mount {
  min-height: 96px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.pay-loading {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.pay-submit {
  width: 100%;
  min-height: 52px;
}

.pay-submit[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.pay-status {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.pay-status:empty {
  display: none;
}

.pay-status.is-error {
  color: #a3231b;
}

.pay-status.is-ok {
  color: #16653a;
}

/* ---------- Donor email, collected for the donation receipt ---------- */
.pay-field {
  margin-bottom: 14px;
}

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

.pay-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font: 500 15px Manrope, sans-serif;
}

.pay-field input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18, 61, 116, .14);
}

.pay-field.is-invalid input {
  border-color: #a3231b;
}

.pay-field-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* The `hidden` attribute is how script.js switches whole blocks of the giving
   section on and off. Any rule that sets `display` on one of those blocks would
   silently defeat it, so make `hidden` win outright. */
[hidden] {
  display: none !important;
}

/* ---------- Other ways to give ---------- */
.give-alts {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.alt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.alt h3 {
  margin: 0 0 4px;
  font: 600 19px Manrope, sans-serif;
  letter-spacing: -.02em;
}

.alt .giving-hint {
  margin-bottom: 14px;
}

.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;
}

/* ---------- Other card pages, listed under the Stripe form ---------- */
.card-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

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

.card-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

/* ---------- The donate button ---------- */
/* At the shared .button size (15px 21px, 13px text) the card links read as a pair
   of equal options and neither looked like the action the section exists for.
   This one is deliberately much larger than everything else on the page. */
.give-donate {
  min-height: 68px;
  padding: 20px 34px;
  font: 700 19px/1 Manrope, sans-serif;
  letter-spacing: -.01em;
  box-shadow: 0 8px 20px rgba(18, 61, 116, .18);
}

/* `.button-outline` turned out to have no rule in either stylesheet, so the second
   card link was rendering as bare transparent text with no border and no
   background - it did not look like a button at all. This gives it a real
   secondary treatment: solid, quieter than the donate button, still obviously
   clickable. */
.give-secondary {
  min-height: 50px;
  border-color: var(--navy);
  background: #fff;
  color: var(--navy);
  font-size: 14px;
}

/* Parked: with the on-page form off, these two links are the card option rather
   than extras sitting below one. The donate link becomes the action and the second
   one a footnote to it, stacked so the hierarchy does not rest on colour alone.
   The top border goes too - it was a divider under a form that is no longer there. */
.give-link-only .card-links {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.give-link-only .card-link-row {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  /* Centred on the section's centre line rather than on the left edge it shares
     with the heading. The heading still lines up with sections 01 to 03; it is
     the thing a donor acts on that moves to the middle. */
  max-width: 460px;
  margin-inline: auto;
}

/* The two labels belonging to the buttons follow them to the centre. Left-aligned
   under a centred pair they read as a leftover column of their own. */
.give-link-only .card-links-label,
.give-link-only .card-links-note {
  text-align: center;
}

/* "Give by card" is the only heading left above the buttons once the form is
   parked, so it belongs on the same centre line. Scoped to the parked state: with
   the form back this element is step 2 of the widget above a left-aligned form. */
.give-link-only .giving > .amounts-label {
  text-align: center;
}

/* The note is a footnote to the buttons, so cap it at a comfortable measure and
   centre it with them. At the full 900px it ran wider than the buttons it belongs
   to and read as a stray line of its own. */
.give-link-only .card-links-note {
  max-width: 560px;
  margin-inline: auto;
}

/* "Other ways to give" heads the Zelle and Check pair, so it centres with them. */
.give-alts > .amounts-label {
  text-align: center;
}

/* ...and the pair itself is centred, which it was not before: at the full 900px it
   started on the section's left edge, 220px left of the centred buttons, so the
   lower half of the section read as left-aligned while the buttons sat in the
   middle. Centring only the label above it did not move the cards at all.

   800px is as narrow as the pair can safely go, and two things inside set that
   floor - both load-bearing, neither cosmetic:
     . the Check row needs 345px to hold "Copy name" and "Request mailing
       instructions" side by side, and each card gives up 28px to its own padding,
       so a card cannot go below 373px;
     . two cards plus the 24px gap puts the hard minimum at 770px.
   800px leaves 15px of slack so the Check buttons cannot wrap if a fallback font
   measures wider. Narrowing past the floor breaks that row, which is the "leave
   it as it is" half of the request rather than a preference about tightness. */
.give-alts > .alt-grid {
  max-width: 800px;
  margin-inline: auto;
}

/* ---------- Post-payment confirmation, replaces the card form ---------- */
.pay-success {
  padding: 30px 22px;
  border: 1px solid #bfe0c8;
  background: #f1f9f3;
  text-align: center;
}

.pay-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #16653a;
  color: #fff;
}

.pay-success-title {
  margin: 0 0 8px;
  color: var(--navy);
  font: 600 23px Manrope, sans-serif;
  letter-spacing: -.02em;
}

.pay-success-body {
  max-width: 430px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  /* The confirmation is written as several lines of plain text and set with
     textContent, so it must be told to honour the newlines. Using textContent
     rather than innerHTML is deliberate: the donor's own email address is
     printed here and must never be parsed as markup. */
  white-space: pre-line;
}

.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;
  }

  /* The alternatives stack once two columns stop fitting. */
  .alt-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Both card links go full width rather than wrapping awkwardly. */
  .card-link-row {
    flex-direction: column;
  }

  .card-link-row .button {
    width: 100%;
  }

  .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;
  }
}