/* ==========================================================================
   Life Happens Here — Lawndale Presbyterian Church
   core.css

   Loaded after Bootstrap 5. Bootstrap supplies the grid (.container/.row/.col-*),
   the navbar scaffolding and .visually-hidden; everything below is brand styling.

   Contents
   1.  Tokens
   2.  Base elements
   3.  Utilities
   4.  Buttons
   5.  Header & navigation
   6.  Section scaffolding
   7.  Hero
   8.  Quote banners
   9.  Campaign section & pillar cards
   10. Vision & figures
   11. Checklists
   12. Map key
   13. Progress meter & goal cards
   14. Pledge card
   15. Footer
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  --lph-ink: #1a1a1a;
  --lph-green-900: #14361f;   /* dark campaign green */
  --lph-green-800: #16391f;
  --lph-green-700: #1d4d2f;   /* body accent / links */
  --lph-green-600: #2e5626;   /* card subhead, bold word */
  --lph-green-500: #46703b;   /* card subhead, light word */
  --lph-green-mid: #6a896b;   /* section headlines */
  --lph-green-deep: #0b3725;  /* italic sub-headlines */
  --lph-sage-500: #8fb583;    /* primary pill fill */
  --lph-sage-400: #a8c79a;
  --lph-sage-300: #b9d0ab;    /* pill hover */
  --lph-sage-100: #cfe0c5;
  --lph-stone: #e3dfd7;       /* section background */
  --lph-card: #f0f1ee;
  --lph-rule: #6f8a72;

  --lph-font-sans: Jost, "Century Gothic", "Trebuchet MS", sans-serif;
  --lph-font-serif: Spectral, Georgia, "Times New Roman", serif;
  --lph-font-script: Caveat, "Segoe Script", cursive;

  --lph-header-h: 102px;
  --lph-gutter: 64px;
  --lph-radius: 12px;
  --lph-section-y: clamp(56px, 8vw, 110px);
}

/* 2. Base elements --------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 118px; /* clears the fixed header on anchor jumps */
}

body {
  margin: 0;
  font-family: var(--lph-font-serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--lph-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--lph-font-sans);
  letter-spacing: -0.01em;
}

a {
  color: var(--lph-green-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--lph-green-500); }

:focus-visible {
  outline: 3px solid var(--lph-green-500);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* The hero image runs up behind the translucent header, so #main is NOT
   offset — each first-child block adds the header height to its own top
   padding (additive, so the section keeps its authored breathing room). */
#main > *:first-child:not(.hero):not(.page-band) {
  padding-top: calc(var(--lph-header-h) + var(--lph-first-block-pad, 0px));
}

/* 3. Utilities ------------------------------------------------------------- */

.u-sans { font-family: var(--lph-font-sans); }

/* Skip link: off-screen until focused. */
.u-skip { position: absolute; left: -9999px; top: 0; }

.u-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 2000;
  background: #fff;
  padding: 10px 16px;
}

/* Two-column content split used by most sections. */
.split { --bs-gutter-x: var(--lph-gutter); row-gap: 44px; }
.split--tight { row-gap: 36px; }

.media-full { display: block; width: 100%; }

/* 4. Buttons --------------------------------------------------------------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--lph-sage-500);
  color: var(--lph-green-900);
  font-family: var(--lph-font-sans);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: background 160ms ease;
}

.btn-pill:hover,
.btn-pill:focus-visible {
  background: var(--lph-sage-300);
  color: var(--lph-green-900);
}

.btn-pill--sm { padding: 10px 20px; gap: 10px; font-size: 16px; }

/* 5. Header & navigation --------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e3dc;
  box-shadow: 0 1px 14px rgba(20, 45, 30, 0.05);
  transition: background 220ms ease;
}

/* Added by JS once the hero block has scrolled past, and while the
   mobile menu is open, so the links always stay legible. */
.site-header.is-solid { background: rgba(255, 255, 255, 1); }

/* Stone band sitting behind the fixed header on interior pages, so the page
   does not start against bare white. Occupies the header's layout height,
   which is why such pages need no extra top clearance. */
.page-band {
  height: var(--lph-header-h);
  background: var(--lph-stone);
}

.site-nav { padding: 14px 12px; }

.site-nav .navbar-brand { padding: 0; }

.site-nav__logo {
  width: 235px;
  height: auto;
  aspect-ratio: 432 / 125;
  display: block;
}

.site-nav__toggler { border-color: #cfd8c8; padding: 8px 12px; }

.site-nav__list {
  gap: 4px;
  font-family: var(--lph-font-sans);
  font-size: 16px;
}

.site-nav__link { color: #4a6b4d; padding: 10px 14px; }

.site-nav__cta { margin-left: 10px; }

/* 6. Section scaffolding --------------------------------------------------- */

.section { padding: var(--lph-section-y) 0; }
.section--head { padding-bottom: 0; }
.section--stone { background: var(--lph-stone); }
.section--ink { background: var(--lph-green-900); color: #fff; }
.section--flush-top { padding-top: clamp(30px, 5vw, 60px); }
.section--flush-bottom { padding-bottom: clamp(40px, 6vw, 80px); }

.section__title {
  font-size: clamp(28px, 3.1vw, 38px);
  color: #111;
  margin: 0 0 18px;
}

.section--ink .section__title { color: #fff; }

/* Italic green line that sits under a section title. */
.section__kicker {
  font-style: italic;
  font-size: 28px;
  color: var(--lph-green-deep);
  margin: 0 0 22px;
}

/* Large centred pull-line between sections. */
.closing-line {
  text-align: center;
  font-size: clamp(19px, 1.9vw, 25px);
  color: var(--lph-green-700);
  margin: clamp(44px, 6vw, 76px) auto 0;
  max-width: 940px;
  text-wrap: pretty;
}

.closing-line--italic { font-style: italic; max-width: 900px; }

/* Same treatment, but left-aligned inside a text column. */
.pull-quote {
  font-style: italic;
  font-size: 1.28em;
  line-height: 1.5;
  color: var(--lph-green-700);
  margin: 30px 0 0;
}

.pull-quote em { font-weight: 600; font-style: italic; }

.closing-line em { font-weight: 600; }

/* 7. Hero ------------------------------------------------------------------ */

.hero { border-bottom: 1px solid #eeeae2; }

/* Only the copy column is pushed clear of the fixed header; the image
   column starts at the top of the page and shows through it. */
.hero__copy {
  display: flex;
  align-items: center;
  padding: calc(clamp(40px, 6vw, 96px) + var(--lph-header-h)) clamp(24px, 5vw, 88px) clamp(40px, 6vw, 96px);
}

.hero__copy > div { max-width: 580px; }

.hero__title {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.16;
  color: var(--lph-green-800);
  margin: 0 0 28px;
  text-wrap: pretty;
}

.hero__script {
  font-family: var(--lph-font-script);
  font-weight: 600;
  font-size: 1.3em;
  line-height: 1;
  color: var(--lph-ink);
}

.hero__media {
  display: block;
  position: relative;
  height: 100%;
  min-height: calc(340px + var(--lph-header-h));
}

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

/* Caption bar over the bottom of a video still. */
.media-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 20px;
  background: linear-gradient(to top, rgba(12, 32, 18, 0.66), rgba(12, 32, 18, 0));
  color: #fff;
  font-family: var(--lph-font-sans);
  font-size: 15px;
}

.media-caption--sm { padding: 12px 18px; font-size: 14px; }

/* Frosted play button, centred over a video still. */
.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, 0.92);
  padding-left: 6px;
  transition: background 180ms ease, transform 180ms ease;
}

.hero__media:hover .play-badge,
.hero__media:focus-visible .play-badge {
  background: rgba(255, 255, 255, 0.42);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Video still that sizes to its image rather than filling a column. */
.hero__media--auto { min-height: 0; }

/* 8. Quote banners --------------------------------------------------------- */

.quote-banner { padding: 0 0 clamp(56px, 7vw, 96px); }
.quote-banner--spaced { padding: clamp(50px, 7vw, 92px) 0; }

.quote-banner blockquote {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: linear-gradient(100deg, #0f3320 0%, #2f5c38 45%, #93b884 100%);
  color: #fff;
  border-radius: 14px;
  padding: clamp(34px, 5vw, 62px) clamp(24px, 6vw, 90px);
  text-align: center;
}

/* Sage band inside the card's bottom edge. Drawn as an element rather than an
   inset shadow so its top edge stays perfectly flat corner to corner. */
.quote-banner blockquote::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: var(--lph-sage-300);
}

.quote-banner p {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.55;
  text-wrap: pretty;
}

.quote-banner em { font-weight: 600; }

/* Full-bleed variant: a photographic band edge to edge, no card, with a sage
   rule along the bottom. Overrides the card treatment above. */
.quote-banner--band {
  padding: 0;
  background-color: #2f5c42;
  background-image: url("../assets/images/bg-congregation.jpg");
  background-size: cover;
  background-position: center 32%;
  border-bottom: 9px solid var(--lph-sage-300);
}

/* Padding only — width comes from Bootstrap's .container, matching the rest
   of the page's content edges. */
.quote-banner--band > .container {
  padding-top: clamp(52px, 7vw, 92px);
  padding-bottom: clamp(52px, 7vw, 92px);
}

.quote-banner--band blockquote {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* No inner sage band in the full-bleed variant — the section's own bottom
   rule serves that purpose. */
.quote-banner--band blockquote::after { content: none; }

.quote-banner--band p {
  font-size: 32px;
  line-height: 1.45;
}

/* Step down on small screens, where 32px would break awkwardly. */
@media (max-width: 575.98px) {
  .quote-banner--band p { font-size: 24px; }
}

/* 9. Campaign section & pillar cards -------------------------------------- */

.campaign {
  position: relative;
  background-color: #fff;
  background-image: url("../assets/images/bg-church-white.jpg");
  background-size: cover;
  background-position: center 30%;
  /* Light section, so the type flips to the dark brand green. */
  color: var(--lph-green-800);
  padding: var(--lph-section-y) 0 clamp(64px, 8vw, 118px);
  overflow: hidden;
}

.campaign__intro { text-align: center; max-width: 720px; margin: 0 auto; }

.campaign .section__title,
.campaign .campaign-goal__total { color: var(--lph-green-800); }

.campaign__logo {
  width: 300px;
  margin: 0 auto 34px;
  display: block;
}

.campaign__blurb {
  font-size: 1.14em;
  margin: 0 0 clamp(34px, 4vw, 52px);
  color: var(--lph-green-700);
}

.campaign-cards {
  /* Cards size to their own content and align to the top, so only the
     expanded one is tall. */
  align-items: start;
  --bs-gutter-x: 28px;
  row-gap: 28px;
  margin: 0 0 clamp(44px, 6vw, 76px);
}

.pillar {
  display: flex;
  flex-direction: column;
  background: var(--lph-card);
  /* Transparent by default so the open-state border doesn't shift layout. */
  border: 7px solid transparent;
  border-radius: var(--lph-radius);
  padding: 34px 28px 26px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(20, 45, 30, 0.1);
}

/* Only the expanded card is highlighted — white fill and a sage border.
   The class is applied by js/core.js as cards open and close. */
.pillar.is-open {
  background: #fff;
  border-color: var(--lph-sage-500);
}

/* align-self keeps the icon centred now that .pillar is a flex column.
   The artwork is a light glyph on transparency, so it sits on a sage disc. */
.pillar__icon {
  align-self: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--lph-sage-500);
  padding: 14px;
  margin-bottom: 22px;
}

.pillar__title {
  font-size: 28px;
  font-weight: 500;
  color: var(--lph-green-mid);
  margin: 0 0 18px;
}

/* Single colour — the bold word no longer shifts to a darker green. */
.pillar__title strong { color: inherit; font-weight: 600; }

.pillar__lead {
  font-size: 1.12em;
  margin: 0 0 18px;
  color: var(--lph-ink);
}

/* Side by side (Bootstrap's lg, matching .col-lg-4), reserving three lines
   keeps every closed card the same height whether its lead runs to two lines
   or three. Stacked cards size to their content instead. */
@media (min-width: 992px) {
  .pillar__lead { min-height: 5em; }
}

.pillar__lead em { font-weight: 600; }

.pillar__body { font-size: 18px; margin: 0; color: #333; }

/* js/core.js measures the tallest body copy and publishes it here, so every
   card opens to the same height whichever one it is. Stacked cards below 992px
   size to their own content. */
@media (min-width: 992px) {
  .pillar.is-open .pillar__body { min-height: var(--lph-pillar-body, 0px); }
}

/* Footer is pinned to the bottom of the card, so the arrows line up across
   all three regardless of how much copy sits above them. */
.pillar__footer {
  margin-top: auto;
  padding-top: 20px;
}

.pillar__toggle {
  background: none;
  border: 0;
  padding: 6px;
  color: var(--lph-green-700);
  cursor: pointer;
  border-radius: 50%;
}

/* Arrow points right when collapsed, down when expanded. */
.pillar__chevron {
  display: block;
  transform: rotate(-90deg);
  transition: transform 200ms ease;
}

.pillar__chevron.is-open { transform: rotate(0deg); }

.campaign-goal { text-align: center; }

.campaign-goal__total {
  font-size: clamp(24px, 2.6vw, 33px);
  font-weight: 600;
  margin: 0 0 12px;
}

.campaign-goal__split {
  font-size: clamp(18px, 1.8vw, 23px);
  margin: 0 0 34px;
  color: var(--lph-green-700);
}

/* 10. Vision & figures ---------------------------------------------------- */

.figure-stack { margin: clamp(40px, 5vw, 66px) 0 0; }

.figure-stack img { display: block; width: 100%; }

.figure-stack img + img { margin-top: clamp(24px, 3vw, 40px); }

.figure-caption {
  text-align: center;
  margin-top: clamp(24px, 3vw, 38px);
  font-size: 18px;
}

.figure-caption--left {
  text-align: left;
  margin-top: 20px;
  color: var(--lph-green-700);
}

/* 11. Checklists ---------------------------------------------------------- */

.checklist {
  display: grid;
  gap: 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.checklist li { display: flex; gap: 16px; align-items: start; }

.checklist__marker,
.give-way__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lph-sage-400);
  color: var(--lph-green-800);
  margin-top: 3px;
}

.note-green { margin: 28px 0 0; color: var(--lph-green-700); }

/* 12. Map key ------------------------------------------------------------- */

.map-key {
  border: 1px solid var(--lph-green-700);
  border-radius: var(--lph-radius);
  padding: clamp(26px, 3vw, 40px);
}

.map-key__title {
  font-family: var(--lph-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--lph-green-deep);
  margin: 0 0 24px;
}

.map-key__list {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px 16px;
  margin: 0;
}

/* Hairline separates the lettered key from the caveat below it. */
.map-key__note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(11, 55, 37, 0.18);
}

.map-key__list dt {
  font-family: var(--lph-font-sans);
  color: var(--lph-green-500);
  font-weight: 600;
  text-align: center;
}

.map-key__list dd { margin: 0; }

/* 13. Progress meter & goal cards ----------------------------------------- */

.progress-meter {
  position: relative;
  max-width: 860px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  /* Room for the two labels above the bar and the one below it. */
  padding: 124px 0 116px;
}

/* --- Shared label pieces --- */

.progress-meter__amount {
  display: block;
  font-family: var(--lph-font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.25;
  margin: 0;
}

.progress-meter__caption {
  display: block;
  font-family: var(--lph-font-serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* Hairline with a dot at the bar end. */
.progress-meter__tick {
  position: absolute;
  left: 50%;
  width: 1px;
  background: #fff;
}

.progress-meter__tick::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

/* --- Amount given, above the fill end --- */

.progress-meter__lead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 124px;
}

.progress-meter__label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.25;
  white-space: nowrap;
}

/* JS sets left to the fill percentage. */
.progress-meter__leader {
  position: absolute;
  top: 54px;
  bottom: 8px;
  left: 6%;
  width: 1px;
  background: #fff;
}

.progress-meter__leader::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

/* --- Track --- */

.progress-meter__track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #85a086 0%, #7b977c 100%);
}

/* Light sage segment up to the commitment marker, with its own rounded cap
   rather than a hard colour break. JS sets the custom property from
   data-marker on the meter; 40% is the fallback. */
.progress-meter__track::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--lph-progress-marker, 40%);
  border-radius: 999px;
  background: linear-gradient(90deg, #bcd2a4 0%, #a9c48d 100%);
}

/* Width is set inline by js/core.js so the fill can animate in. */
.progress-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 46px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 44px 16px rgba(180, 214, 158, 0.45);
  transition: width 1200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Goal markers --- */

.progress-meter__markers {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}

.progress-meter__marker { position: absolute; }

/* Full vision: above the bar, at its right end, tick dropping down. */
.progress-meter__marker--vision {
  top: 0;
  left: 100%;
  width: 340px;
  max-width: 100%;
  min-height: 124px;
  text-align: right;
  transform: translateX(-100%);
}

.progress-meter__marker--vision .progress-meter__tick {
  top: 84px;
  bottom: 8px;
  left: auto;
  right: 0;
}

.progress-meter__marker--vision .progress-meter__tick::after {
  bottom: -3px;
  left: 0;
}

/* Commitment: below the bar, tick rising to it. */
.progress-meter__marker--commitment {
  bottom: 0;
  left: 40%;
  width: 430px;
  max-width: 100%;
  min-height: 116px;
  padding-top: 62px;
  text-align: center;
  transform: translateX(-50%);
}

.progress-meter__marker--commitment .progress-meter__tick { top: 8px; height: 46px; }
.progress-meter__marker--commitment .progress-meter__tick::after { top: -3px; }

/* Stacked layout: no room for leader lines, so labels sit in normal flow. */
@media (max-width: 767.98px) {
  .progress-meter { padding: 0 0 8px; }

  .progress-meter__lead { position: static; height: auto; margin-bottom: 12px; }

  .progress-meter__label { position: static; white-space: normal; }

  .progress-meter__leader { display: none; }

  .progress-meter__markers {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }

  .progress-meter__marker {
    position: static;
    width: auto;
    height: auto;
    padding-top: 0;
    text-align: left;
    transform: none;
  }

  .progress-meter__tick { display: none; }
}

.goal-cards { --bs-gutter-x: 28px; row-gap: 28px; margin: 0; }

.goal-card {
  border: 1px solid var(--lph-rule);
  border-radius: var(--lph-radius);
  padding: clamp(28px, 3.4vw, 44px) 28px;
  text-align: center;
  height: 100%;
}

.goal-card__title {
  font-family: var(--lph-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lph-rule);
}

.goal-card__title strong { font-weight: 600; }

.goal-card__amount {
  font-family: var(--lph-font-sans);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--lph-sage-400);
  margin: 0;
}

.goal-card__note { margin: 4px 0 32px; }
.goal-card__note--last { margin: 4px 0 0; }

.progress-closing {
  text-align: center;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: #dfeada;
  margin: clamp(40px, 5vw, 62px) auto 0;
  max-width: 720px;
  text-wrap: pretty;
}

/* 14. Pledge card --------------------------------------------------------- */

.pledge-section { padding: clamp(50px, 7vw, 92px) 0; }

.pledge-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(20, 45, 30, 0.13);
  padding: clamp(34px, 5vw, 76px) clamp(26px, 5vw, 72px);
  overflow: hidden;
}

/* Oversized cross bleeding off the card's right edge; the card's overflow
   clips it. The artwork is already pale, so no opacity is applied. */
/* Sized by width and anchored right so it reads as an edge bleed and stays
   clear of the copy column. max-width overrides the global img cap, which
   would otherwise squeeze the artwork out of proportion. */
.pledge-card__watermark {
  position: absolute;
  top: 0;
  right: -6%;
  width: 46%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.pledge-card__body { position: relative; max-width: 660px; }

.pledge-card__lead {
  font-style: italic;
  font-size: 28px;
  color: var(--lph-green-deep);
  margin: 0 0 22px;
}

.give-way__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 600;
  margin: 40px 0 12px;
}

.give-way__title + .give-way__detail { padding-left: 46px; }

.give-way__icon { width: 32px; height: 32px; margin-top: 0; }

.give-way__detail p { margin: 0 0 12px; }
.give-way__detail p:last-child { margin-bottom: 0; }

.questions-title {
  font-family: var(--lph-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--lph-green-deep);
  margin: 44px 0 16px;
}

.contact-list {
  display: grid;
  gap: 6px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

/* 14b. FAQ page ----------------------------------------------------------- */

.faq-head {
  padding: clamp(44px, 6vw, 78px) 0 clamp(30px, 4vw, 48px);
}

/* Same gutter as .faq-list, so the header halves align with the Q&A columns. */
.faq-head .row { --bs-gutter-x: clamp(40px, 5vw, 76px); }

.faq-head__title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  color: #111;
  margin: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid #c9c4b8;
}

.faq-contact { text-align: right; }

.faq-contact__title {
  font-family: var(--lph-font-sans);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  color: var(--lph-green-500);
  margin: 0 0 14px;
}

.faq-contact__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Question groups --- */

.faq-group { padding: clamp(34px, 4.5vw, 54px) 0; }

.faq-group + .faq-group { border-top: 1px solid #c9c4b8; }

.faq-group__title {
  font-family: var(--lph-font-sans);
  font-size: 28px;
  font-weight: 400;
  color: var(--lph-green-mid);
  margin: 0 0 clamp(22px, 3vw, 34px);
}

.faq-group__title strong { color: inherit; font-weight: 600; }

/* Row-wise grid, so questions pair across each row rather than filling one
   column before the next (which is what multi-column layout would do). */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  column-gap: clamp(40px, 5vw, 76px);
  row-gap: clamp(30px, 3.5vw, 44px);
  margin: 0;
}

.faq-item { margin: 0; }

.faq-item dt {
  font-family: var(--lph-font-serif);
  font-size: 19px;
  font-weight: 600;
  color: #111;
  margin: 0 0 10px;
  text-wrap: pretty;
}

.faq-item dd { margin: 0; font-size: 18px; }

.faq-item dd + dd { margin-top: 14px; }

/* Right-align only while the block actually sits beside the title; it stacks
   at Bootstrap's lg boundary, so the reset has to match that, not the Q&A
   breakpoint below. */
@media (max-width: 991.98px) {
  .faq-contact { text-align: left; }
}

@media (max-width: 767.98px) {
  .faq-list { grid-template-columns: 1fr; }
}

/* Inline list of giving methods inside an answer. */
.faq-methods {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
  font-family: var(--lph-font-sans);
  font-size: 18px;
}

.faq-methods li { display: flex; gap: 12px; align-items: center; }

.faq-methods__marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lph-sage-400);
  color: var(--lph-green-800);
}

.faq-note {
  margin: 0;
  font-weight: 600;
  color: var(--lph-green-500);
}

/* 14c. Video modal -------------------------------------------------------- */

/* Bootstrap owns the backdrop, centring, Escape, focus trap and scroll lock.
   These rules only make the dialog a bare 16:9 video frame. */

.video-modal {
  --video-gutter: clamp(16px, 4vw, 48px);

  /* Bootstrap centres with "min-height: calc(100% - var(--bs-modal-margin) * 2)".
     The dialog below takes its margin from --video-gutter, so unless Bootstrap's
     own variable is told the same number the centred box reserves a full-height
     row PLUS the real margins -- overflowing by (2 * gutter - 16px) and handing
     the modal a vertical scrollbar at every viewport size. */
  --bs-modal-margin: var(--video-gutter);
}

/* Cap the dialog by viewport HEIGHT as well as width, so a 16:9 frame can never
   grow taller than a short or landscape screen and push its close button
   off-screen. dvh accounts for mobile browser chrome. */
.video-modal .modal-dialog {
  max-width: min(1100px, calc((100dvh - 2 * var(--video-gutter)) * 16 / 9));
  margin: var(--video-gutter) auto;
}

.video-modal__content {
  background: #000;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.video-modal__frame { max-height: 100%; }

.video-modal__frame iframe { border: 0; }

/* Sits over the video rather than above the dialog, so it stays on-screen at
   every viewport size. The extra selector out-specifies Bootstrap's
   ".ratio > *" rule, which would otherwise pin this to the top-left. */
.video-modal .video-modal__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(12, 28, 16, 0.62);
  background-size: 15px;
  opacity: 1;
  transition: background-color 160ms ease;
}

.video-modal .video-modal__close:hover,
.video-modal .video-modal__close:focus-visible { background-color: rgba(12, 28, 16, 0.85); }

/* 15. Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--lph-stone);
  padding: clamp(46px, 6vw, 78px) 0 30px;
  color: var(--lph-ink);
}

.site-footer__title {
  font-family: var(--lph-font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--lph-green-700);
  margin: 0 0 18px;
}

.site-footer address { margin: 0 0 22px; font-style: normal; }

.site-footer__logo { width: 300px; height: auto; }

.social-list {
  display: flex;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* 44px minimum touch target */
  height: 44px;
  color: var(--lph-ink);
}

.site-footer__legal {
  text-align: center;
  font-family: var(--lph-font-sans);
  font-size: 14px;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding-top: 26px;
  border-top: 1px solid #cdc8bd;
}

/* Motion preferences ------------------------------------------------------ */

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