/* ==========================================================================
   Bethel Christian Church — bethelchristianchurch.online
   Single stylesheet. No build step, no dependencies.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Palette reworked 2026-10-17 toward the cooler, darker feel of
     chapinccc.org, anchored to Bethel's own logo blue.

     Chapin's Elementor kit uses #0E1E2D / #2D5A83 / #DDEBF7. Bethel's logo
     blue is #518AC6. Those sit in the same family, so the accents below are
     Bethel's blue rather than Chapin's — same mood, own identity.

     --accent is deliberately the DARKER #3f74ab, not the logo's #518AC6:
     white text on #518AC6 is 3.62:1, under the 4.5:1 AA floor. The true
     brand blue lives in --accent-bright for borders and decoration, where
     contrast rules don't apply. */
  --navy-deep: #0e1e2d;
  --navy: #1b3a57;
  --navy-soft: #2d5a83;

  --accent: #3f74ab;
  --accent-bright: #518ac6;
  /* Small blue text (eyebrows, card links, roles) can land on the pale
     --cream panels, where --accent measures only 4.41:1. This darker step
     clears AA on both white and cream. Button FILLS keep --accent, since
     there the blue is the background and the text is white. */
  --accent-text: #345f8c;
  --accent-dark: #345f8c;
  --accent-tint: #adcdec;
  --accent-wash: #ddebf7;

  --cream: #eef4fb;
  --mist: #dde7f1;
  --paper: #ffffff;
  --ink: #15222f;
  --muted: #5c6b7a;
  --line: #dbe3ec;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1140px;
  --gutter: 1.5rem;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(14, 30, 45, .06), 0 8px 24px rgba(14, 30, 45, .08);
  --shadow-lift: 0 2px 4px rgba(14, 30, 45, .08), 0 16px 40px rgba(14, 30, 45, .14);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; height: auto; }

a { color: var(--navy); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-deep);
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --- Layout helpers ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 760px; }

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--cream { background: var(--cream); }
/* Deeper than --cream. Used where a plain white band sat too bright between
   the dark hero and the content below it. */
.section--mist {
  background: var(--mist);
  /* --muted (#5c6b7a) is only 4.37:1 on this surface. Scoped override lifts
     every muted descendant to 5.5:1 without touching the global token. */
  --muted: #4b5a69;
}
.section--navy { background: var(--navy-deep); color: #dfe6ee; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }

.section-head { max-width: 680px; margin-bottom: 2.75rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-bottom: 0; }
.section--navy .section-head p { color: #a9bace; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .9rem;
}

.lede { font-size: 1.2rem; color: var(--muted); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.65rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* White on --accent is 4.89:1; hover is darker still, never lighter — a
   lighter hover would drop below the AA floor. */
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }

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

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }

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

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 30, 45, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}
/* The real mark is taller than it is wide (357x512). Size by height and let
   width follow, or it squashes. */
.brand__mark { width: auto; height: 44px; flex-shrink: 0; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.brand__sub {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-tint);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  font-size: .94rem;
  font-weight: 500;
  color: #dbe6f1;
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: #fff; }
.nav__list a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent-bright); }

@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: rgba(14, 30, 45, .98);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav__list a[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, .1); color: var(--accent-tint); }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
}

/* --- Hero ----------------------------------------------------------------- */
/* Hero photo is a wide 4.19:1 crop (2000x477) taken from the top strip of the
   church's cover graphic — the only region free of baked-in text. Keeping the
   hero short means the image is barely upscaled, so it stays sharp. Don't
   raise min-height much past 500px without a taller source photo. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 500px);
  padding: clamp(3rem, 8vw, 5rem) 0;
  text-align: center;
  color: #fff;
  background: var(--navy-deep) center center / cover no-repeat;
  /* Overlay kept light so the photo reads as a photo. Legibility comes from
     text-shadow on the headline and lede instead of a heavy scrim. */
  background-image:
    linear-gradient(180deg, rgba(14, 30, 45, .30), rgba(14, 30, 45, .58)),
    url("../images/hero.jpg");
  overflow: hidden;
}

/* Narrow screens crop a wide image hard. Shorten the hero so less of the
   photo's width is thrown away, and bias toward the upper third where the
   pastor and platform sit rather than the backs of heads. */
@media (max-width: 700px) {
  .hero {
    min-height: min(58vh, 420px);
    background-position: center 35%;
  }
}
.hero__inner { position: relative; max-width: 780px; }
.hero h1 {
  color: #fff;
  margin-bottom: .45em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 4px 28px rgba(0, 0, 0, .4);
}
.hero .eyebrow { color: var(--accent-tint); }
.section--navy .eyebrow, .cta .eyebrow { color: var(--accent-tint); }
.hero p {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #f1f5f9;
  max-width: 520px;
  margin: 0 auto 1.75rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .35);
}

/* Smaller banner for interior pages */
.page-hero {
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: linear-gradient(160deg, #15304a 0%, var(--navy-deep) 70%);
  color: #fff;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.page-hero .eyebrow { color: var(--accent-tint); }
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero p { color: #a9bace; font-size: 1.15rem; max-width: 620px; margin: 0 auto; }

/* --- Quick action cards (overlap the hero) -------------------------------- */
.quick-actions {
  position: relative;
  z-index: 2;
  margin-top: -3.5rem;
  margin-bottom: 0;
}
.quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
/* Dark cards. They overlap the bottom of the hero photo, so a white panel
   read as a bright slab cutting the image in half. */
.action-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.6rem 1.5rem;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(14, 30, 45, .18), 0 14px 34px rgba(14, 30, 45, .22);
  text-decoration: none;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.action-card:hover .action-card__more,
.action-card:hover .action-card__icon { color: #e3eefb; }
.action-card:hover {
  transform: translateY(-4px);
  background: var(--navy-soft);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 4px 8px rgba(14, 30, 45, .22), 0 22px 46px rgba(14, 30, 45, .3);
  color: #fff;
}
.action-card__icon { width: 30px; height: 30px; color: var(--accent-tint); margin-bottom: .4rem; }
.action-card h3 { margin: 0; font-size: 1.15rem; color: #fff; }
.action-card p { font-size: .92rem; color: #c3d3e3; margin: 0; }
.action-card__more {
  margin-top: .5rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-tint);
}

/* --- Service times -------------------------------------------------------- */
.times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Bethel holds one service, so the default auto-fit grid would stretch a
   lone card across the full 1140px wrap. Constrain and centre it instead. */
.times--single { max-width: 420px; margin: 0 auto; }
.times--single .times__time { font-size: 2.6rem; }

.times__item { background: var(--paper); padding: 1.9rem 1.5rem; text-align: center; }
.times__time {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.1;
  display: block;
}
.times__label { font-weight: 600; margin: .4rem 0 .15rem; display: block; }
.times__note { font-size: .9rem; color: var(--muted); display: block; }

/* --- Split (text + media) ------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream);
  aspect-ratio: 4 / 3;
}
.split__media img, .split__media svg { width: 100%; height: 100%; object-fit: cover; }
/* Used where the source photo is portrait or square; the default 4/3 would
   crop a standing figure's head off. */
.split__media--square { aspect-ratio: 1; }
.split--flip .split__media { order: -1; }
@media (max-width: 760px) {
  .split--flip .split__media { order: 0; }
}

/* --- Generic card grid ---------------------------------------------------- */
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card--link { text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: var(--ink); }
.card__icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 1rem; }
.card h3 { margin-bottom: .45em; }
.card p { font-size: .97rem; color: var(--muted); }
.card__link {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* .card__link sometimes wraps a real <a>; keep it gold, not default link blue. */
.card__link a { color: inherit; text-decoration: none; }
.card__link a:hover { text-decoration: underline; }

/* --- Leadership ----------------------------------------------------------- */
.leaders {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.leader { text-align: center; }
.leader__photo {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 1.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
}
.leader__photo img, .leader__photo svg { width: 100%; height: 100%; object-fit: cover; }
.leader h3 { margin-bottom: .2em; font-size: 1.25rem; }
.leader__role {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .8rem;
}
.leader p { font-size: .96rem; color: var(--muted); }

/* --- Beliefs / numbered list --------------------------------------------- */
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.beliefs li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.beliefs li:last-child { border-bottom: 0; padding-bottom: 0; }
.beliefs__num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
  min-width: 2ch;
}
.beliefs h3 { margin-bottom: .3em; font-size: 1.15rem; }
.beliefs p { font-size: .98rem; color: var(--muted); margin: 0; }

/* --- FAQ (details/summary) ----------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-deep);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 1.4rem; color: var(--muted); max-width: 70ch; }

/* --- Quote / verse -------------------------------------------------------- */
.verse { text-align: center; max-width: 760px; margin: 0 auto; }
.verse blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.4;
  color: #fff;
}
.verse cite {
  font-style: normal;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-tint);
}

/* --- CTA band ------------------------------------------------------------- */
.cta {
  padding: clamp(3rem, 7vw, 4.5rem) 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: #bccbd9; max-width: 560px; margin: 0 auto 2rem; }

/* --- Contact / info list -------------------------------------------------- */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.info-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.info-list svg { width: 22px; height: 22px; color: var(--accent); margin-top: .3rem; }
.info-list strong { display: block; color: var(--navy-deep); }
.info-list a, .info-list span { color: var(--muted); font-size: .98rem; }

/* --- Call-to-call CTA ----------------------------------------------------- *
 * Primary contact route on the site: a large tap target that dials the
 * church office. Used in place of a contact form.                           */
.call-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.75rem;
  padding: 1.35rem 2rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--navy-deep);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.call-cta:hover,
.call-cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent);
  color: var(--navy-deep);
}
.call-cta svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--accent); }
.call-cta small {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .3rem;
}
@media (max-width: 420px) {
  .call-cta { padding: 1.1rem 1.25rem; gap: .8rem; width: 100%; }
}

/* --- Form ----------------------------------------------------------------- *
 * Unused at present — the contact form was removed because there is no form
 * backend. Kept so the styles are ready if a form is reintroduced.          */
.form { display: grid; gap: 1.1rem; }
.form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--navy-deep); }
.form input, .form select, .form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  padding: .8rem 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }
.form textarea { min-height: 150px; resize: vertical; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.form__note { font-size: .88rem; color: var(--muted); }

/* --- Third-party embed container ------------------------------------------ *
 * Wraps markup we don't control (the Ministry Forms giving widget). Gives it
 * a frame consistent with the rest of the site and stops a wide embed from
 * forcing the whole page to scroll sideways on mobile.                       */
.embed-frame {
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.embed-frame iframe { max-width: 100%; border: 0; display: block; margin: 0 auto; }
.embed-frame img { max-width: 100%; height: auto; }
/* The embed ships its own form styling; don't let the site's form rules,
   written for a different layout, fight with it. */
.embed-frame input,
.embed-frame select,
.embed-frame textarea { font-family: inherit; }

/* --- QR / alternate giving route ------------------------------------------ */
.give-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.give-alt h3 { margin-bottom: .4em; }
.give-alt p { font-size: .97rem; color: var(--muted); }
.give-alt > div { flex: 1 1 260px; }
/* White quiet-zone around the code: scanners need the light margin, and the
   cream panel behind it would otherwise eat into that contrast. */
.give-alt__qr {
  width: 164px;
  height: 164px;
  flex-shrink: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  background: var(--navy-deep);
  color: #a9bace;
  font-size: .95rem;
}
.site-footer h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: 3rem;
}
.site-footer a { color: #a9bace; text-decoration: none; }
.site-footer a:hover { color: var(--accent-tint); text-decoration: underline; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-brand .brand { color: #fff; margin-bottom: 1.1rem; }
.footer-brand .brand__name { color: #fff; }
.footer-brand p { max-width: 36ch; font-size: .94rem; }

/* Full logo lockup: the wordmark is white and the cross/path are knocked out,
   so this is designed for a dark background — it belongs in the footer only. */
.footer-logo { width: auto; height: 104px; }

.social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transition: background-color .15s ease, border-color .15s ease;
}
.social a:hover { background: var(--accent); border-color: var(--accent); }
.social svg { width: 18px; height: 18px; }
.social a:hover svg { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
}

/* --- Utilities ------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .nav-toggle, .cta, .site-footer { display: none; }
  body { font-size: 11pt; color: #000; }
}