/* ══════════════════════════════════════════════════
   DESIGN SYSTEM — Grace of Giving
   Color hierarchy, typography, motion, spacing
   ══════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --ivory:      #F7F2E8;  /* main background */
  --sand:       #CBBD93;  /* warm sand — dividers, soft surfaces */
  --beige:      #E9DDCC;  /* secondary surface */
  --rose:       #B98B8B;  /* dusty rose — soft support */
  --burgundy:   #7A4B4B;  /* main accent / CTAs */
  --burgundy-d: #5E3838;  /* hover */
  --gold:       #C8A96B;  /* sacred accent */
  --gold-soft:  #E0CEA0;  /* gold tint */
  --plum:       #3E2B2B;  /* deep text */
  --plum-soft:  #6B5454;  /* secondary text */

  /* Typography */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --pill: 999px;

  /* Shadows — soft, diffused, warm */
  --shadow-sm: 0 2px 10px rgba(122, 75, 75, 0.05), 0 1px 3px rgba(62, 43, 43, 0.04);
  --shadow:    0 8px 24px rgba(122, 75, 75, 0.07), 0 2px 8px rgba(62, 43, 43, 0.05);
  --shadow-lg: 0 24px 60px rgba(122, 75, 75, 0.10), 0 8px 24px rgba(62, 43, 43, 0.06);

  /* Spacing — section padding caps at ~64px (40-48px on mobile)
     per CLAUDE.md "Espaçamento vertical" rule. */
  --section-y: 64px;
  --section-y-sm: 44px;
  --container: 1180px;

  /* Intra-section vertical rhythm — use these instead of hardcoded px.
     Titles → content and items → items should sit in the 16-20px range
     (use --space-sm or --space-md). */
  --space-xs:  6px;
  --space-sm:  16px;   /* title → content, fine-tune gaps */
  --space-md:  20px;   /* item → next item (cards, list rows) */
  --space-lg:  28px;   /* block separator inside a section */
  --space-xl:  48px;   /* between major blocks (e.g. before CTA band) */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--plum);
  line-height: 1.65;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--burgundy); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--burgundy-d); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  display: inline-block;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--plum);
  letter-spacing: -0.01em;
  line-height: 1.12;
}

h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 500; }
h2 { font-size: clamp(32px, 4.2vw, 48px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; }
h4 { font-size: 19px; font-weight: 600; }

.italic-grace {
  font-style: italic;
  color: var(--burgundy);
  font-weight: 400;
}

.lede {
  font-size: 18px;
  color: var(--plum-soft);
  line-height: 1.75;
  max-width: 56ch;
}

.highlight {
  background: linear-gradient(180deg, transparent 62%, rgba(200, 169, 107, 0.35) 62%);
  padding: 0 4px;
}

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
  line-height: 1;
  /* Buttons in this project carry short labels (2–3 words). Keeping
     the label and any trailing icon on one line prevents the awkward
     two-line wrap that happens inside narrow containers like the
     sidebar card or sticky bar before .cd-sticky-btn flex-bases. */
  white-space: nowrap;
}

.btn-primary {
  background: var(--burgundy);
  color: var(--ivory);
  box-shadow: 0 8px 22px rgba(122, 75, 75, 0.22), 0 2px 6px rgba(122, 75, 75, 0.12);
}
.btn-primary:hover {
  background: var(--burgundy-d);
  color: var(--ivory);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(122, 75, 75, 0.28), 0 4px 10px rgba(122, 75, 75, 0.15);
}

.btn-secondary {
  background: transparent;
  color: var(--plum);
  border-color: var(--sand);
}
.btn-secondary:hover {
  background: var(--beige);
  color: var(--plum);
  border-color: var(--gold);
}

.btn-text {
  background: transparent;
  color: var(--burgundy);
  padding: 8px 0;
  font-weight: 600;
}
.btn-text svg { transition: transform .25s ease; }
.btn-text:hover svg { transform: translateX(4px); }

/* ══════════════════════════════════════════════════
   NAVIGATION — centered logo, search left, menu right
   ══════════════════════════════════════════════════ */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 242, 232, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(203, 189, 147, 0.25);
}

.nav {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto;
}

.logo-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-logo {
  /* Desktop logo — bumped from 64px so the icon has real presence
     in the 120px nav, matching the prominence it gets on mobile.
     Mobile keeps its own max-width via the ≤768px override below. */
  height: 96px;
  width: auto;
  display: block;
}

.search-button,
.menu-button {
  background: transparent;
  border: 1px solid rgba(203, 189, 147, 0.55);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--plum);
  transition: background .2s ease, border-color .2s ease;
}
.search-button:hover,
.menu-button:hover { background: var(--beige); border-color: var(--gold); }

.search-button {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.menu-button {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .nav { height: 100px; }
  .search-button { left: 24px; }
  .menu-button { right: 24px; }
  .site-logo { max-width: 110px; height: auto; }
}

/* ══════════════════════════════════════════════════
   MOBILE DRAWER
   ══════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(62, 43, 43, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 80;
}
.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(440px, 92vw);
  background: var(--ivory);
  z-index: 90;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(62, 43, 43, 0.18);
}
.drawer.open { transform: translateX(0); }

/* No images inside the drawer — clean text wordmark only */
.drawer-text-logo,
.drawer-logo { display: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 32px 24px;
}

.drawer-wordmark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--plum);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.drawer-wordmark:hover { color: var(--plum); }
.drawer-wordmark em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  margin: 0 4px;
  font-size: 0.92em;
}

@media (max-width: 480px) {
  .drawer-head { padding: 40px 28px 20px; }
  .drawer-wordmark { font-size: 24px; }
}

.drawer-close {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--beige);
  border: 1px solid rgba(203, 189, 147, 0.55);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--plum);
  transition: background .2s ease;
}
.drawer-close:hover { background: var(--sand); }

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 28px;
}

.drawer-section { margin-bottom: 28px; }

.drawer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  padding-left: 4px;
}
.drawer-eyebrow::before {
  content: "";
  width: 6px; height: 9px;
  background: var(--gold);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(-15deg);
  display: inline-block;
}

.drawer-list {
  list-style: none;
  display: grid;
  gap: 22px;
  padding-left: 6px;
}
.drawer-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  font-weight: 500;
  color: var(--plum);
  padding: 2px 4px;
  font-family: var(--sans);
  letter-spacing: -0.005em;
  transition: color .2s ease;
}
.drawer-list a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sand);
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease;
}
.drawer-list a:hover { color: var(--burgundy); }
.drawer-list a:hover::before { background: var(--gold); transform: scale(1.3); }

.drawer-divider {
  border: none;
  border-top: 1px dashed rgba(203, 189, 147, 0.7);
  margin: 8px 0 28px;
}

.drawer-footer {
  padding: 20px 24px 24px;
  background: var(--beige);
  border-top: 1px solid rgba(203, 189, 147, 0.5);
}
.drawer-footer .btn {
  width: 100%;
  justify-content: center;
  padding: 18px 28px;
  font-size: 16px;
}

body.drawer-open { overflow: hidden; }

/* ══════════════════════════════════════════════════
   SECTION HEADER ROW (title left, controls right)
   Roots structural pattern — reused for browsable grids
   ══════════════════════════════════════════════════ */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-header-text { max-width: 580px; }
.section-header-text h2 { margin-top: 14px; }
.section-header-text .section-sub {
  margin-top: 14px;
  color: var(--plum-soft);
  font-size: 16px;
  max-width: 56ch;
}
.section-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Filter dropdown */
.filter-wrap { position: relative; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  padding: 11px 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--plum);
  cursor: pointer;
  transition: all .2s ease;
}
.filter-btn:hover { border-color: var(--gold); background: var(--beige); }
.filter-btn > svg:first-child { color: var(--burgundy); }
.filter-btn > svg:last-child { transition: transform .2s ease; }
.filter-wrap.open .filter-btn > svg:last-child { transform: rotate(180deg); }

.filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: var(--r);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .2s ease;
  z-index: 40;
  /* The list grew to 20 entries (All + 19 categories). Cap the
     height and scroll inside so the menu never overflows the
     viewport on small screens. */
  max-height: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 75, 75, 0.3) transparent;
}
.filter-menu::-webkit-scrollbar { width: 8px; }
.filter-menu::-webkit-scrollbar-thumb {
  background: rgba(122, 75, 75, 0.3);
  border-radius: 8px;
}
.filter-menu::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 640px) {
  /* On mobile the filter button sits at the left of the section
     header. Anchor the menu to the button's left edge instead of
     its right edge so it never spills past the viewport's left
     side. Slight width cap keeps the dropdown comfortable. */
  .filter-menu {
    left: 0;
    right: auto;
    min-width: 200px;
    max-width: calc(100vw - 48px);
  }
}
.filter-wrap.open .filter-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.filter-option {
  text-align: left;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--plum);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .2s ease;
}
.filter-option:hover { background: var(--beige); color: var(--burgundy); }
.filter-option.active { background: var(--burgundy); color: var(--ivory); }

/* Arrow pagination */
.arrow-controls { display: flex; gap: 8px; }
.arrow-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--sand);
  display: grid; place-items: center;
  color: var(--plum);
  cursor: pointer;
  transition: all .2s ease;
}
.arrow-btn:hover { background: var(--burgundy); color: var(--ivory); border-color: var(--burgundy); }
.arrow-btn:disabled { opacity: .4; cursor: not-allowed; }
.arrow-btn:disabled:hover { background: var(--ivory); color: var(--plum); border-color: var(--sand); }

/* See-all link */
.see-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.see-all svg { transition: transform .2s ease; }
.see-all:hover svg { transform: translateX(4px); }

/* Badge chip (left of section title in urgent section) */
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(185, 139, 139, 0.18);
  color: var(--burgundy);
  border-radius: var(--pill);
  padding: 6px 14px 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--burgundy);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(.8); }
}

/* ══════════════════════════════════════════════════
   DISC LAYOUT — composite 1 large + 4 small grid
   Roots structural pattern, reused for Featured & Urgent
   ══════════════════════════════════════════════════ */
.disc-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}
.cause-card--large {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.cause-illust--large {
  height: auto;
  min-height: 280px;
  flex: 1;
}
.cause-card--large .cause-body { padding: 32px; }
.cause-card--large h3 { font-size: clamp(22px, 2.4vw, 28px); }

/* Card chip (absolute corner badge) */
.cause-illust { position: relative; }
.card-chip {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(247, 242, 232, 0.95);
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.card-chip--urgent {
  background: var(--burgundy);
  color: var(--ivory);
}

/* Cause meta line */
.cause-org {
  font-size: 13px;
  color: var(--plum-soft);
  margin: -4px 0 14px;
}

.btn-sm {
  padding: 12px 22px;
  font-size: 14px;
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 1024px) {
  .disc-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .cause-card--large {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .cause-illust--large { min-height: 240px; }
}
@media (max-width: 640px) {
  /* Mobile carousel — both Featured and Urgent disc-layouts switch
     from a stacking grid to a horizontal swipe rail. Each card is
     ~one viewport wide minus a small peek of the next so users can
     see there's more to scroll. Snap points align cards cleanly. */
  .disc-layout {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    /* Extend past .container's 24px padding so the rail can bleed
       to the viewport edges; restore the padding inside the flex
       box so the first/last cards don't kiss the edge. */
    margin-left: -24px;
    margin-right: -24px;
    padding: 4px 24px 12px;
  }
  .disc-layout::-webkit-scrollbar { display: none; }
  .disc-layout > .cause-card,
  .disc-layout > .cause-card--large {
    flex: 0 0 calc(100% - 48px);
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: start;
  }
  .cause-illust--large { min-height: 220px; }

  .section-controls { width: 100%; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════
   HOW IT WORKS — 4-step grid
   ══════════════════════════════════════════════════ */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}
.how-step {
  padding: 36px 28px;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.4);
  border-radius: var(--r-lg);
  position: relative;
  transition: all .3s ease;
}
.how-step:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.how-step-num {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  font-style: italic;
}
.how-step h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: -0.005em;
}
.how-step p { font-size: 15px; color: var(--plum-soft); line-height: 1.65; }

.how-cta { text-align: center; }

@media (max-width: 768px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* Tighter rhythm for back-to-back grid sections */
.urgent-causes { padding-top: var(--section-y-sm); }

/* Hide a card when filtered out */
.cause-card.is-hidden { display: none; }

/* Footer brand mark (uses old .logo class) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: -0.01em;
}
/* Footer brand mark — just the white logo, no surrounding circle.
   The wrapper kept only for layout (sizing + flex alignment in the
   brand block); the gold gradient/shadow used to live here. */
.logo-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
}
/* Logo-Icon.png rendered fully white at the wrapper's full size.
   brightness(0) crushes the artwork to pure black, then invert(1)
   flips it to pure white — works on any colored PNG with alpha. */
.logo-mark-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════
   HERO — mobile-first, illustration anchors the bottom
   ══════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - 100px);
  background: var(--ivory);
  overflow: hidden;
  padding: 0;
  isolation: isolate;
}

/* Decorative background layer (halos + sparkles) */
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-halo-1 {
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at center, rgba(233, 221, 204, 0.85) 0%, rgba(247, 242, 232, 0) 70%);
}
.hero-halo-2 {
  top: 30%;
  left: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, rgba(200, 169, 107, 0.18) 0%, rgba(247, 242, 232, 0) 70%);
}
.hero-sparkles {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 75%;
}

/* The illustration anchors the bottom of the hero. A soft radial
   mask feathers the edges so the artwork dissolves into the ivory
   background instead of looking like a cropped sticker. */
.hero-illustration {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 125%;
  max-width: 720px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at 50% 58%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 88% at 50% 58%, #000 55%, transparent 100%);
}

/* Soft ivory fade behind text so readability never breaks */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(247, 242, 232, 0.92) 0%, rgba(247, 242, 232, 0.7) 55%, rgba(247, 242, 232, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Golden arc echoing the logo dome. Sits above the ivory wash and
   behind the headline text — z-index 2 stacks above ::before via DOM
   order. Fades in on load for a calm reveal. */
.hero-arc {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 116%;
  max-width: 720px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: hero-arc-in 1.6s cubic-bezier(.4, 0, .2, 1) .25s forwards;
}
.hero-arc svg { width: 100%; height: auto; display: block; }
@keyframes hero-arc-in { to { opacity: 1; } }

@media (min-width: 600px) {
  .hero-arc { top: 6%; max-width: 880px; }
}
@media (min-width: 900px) {
  .hero-arc { top: 8%; max-width: 1080px; }
}

/* Floating leaf field. Each leaf rises from near the illustration,
   builds glow, and burns off before reaching the headline. Variance
   in delay/duration/rotation keeps the motion from looking robotic. */
.hero-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.hero-leaf {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation-name: leaf-float;
  animation-timing-function: cubic-bezier(.4, 0, .25, 1);
  animation-iteration-count: infinite;
}
.hero-leaf svg { width: 100%; height: 100%; display: block; }

.hero-leaf--1 { left:  8%; bottom: 14%; --rot:  -8deg; animation-duration: 10s; animation-delay: 0.5s; }
.hero-leaf--2 { left: 22%; bottom:  6%; --rot:  14deg; animation-duration: 11s; animation-delay: 2.7s; }
.hero-leaf--3 { left: 40%; bottom: 20%; --rot: -22deg; animation-duration: 12s; animation-delay: 5.2s; }
.hero-leaf--4 { left: 56%; bottom:  8%; --rot:  10deg; animation-duration: 13s; animation-delay: 1.9s; }
.hero-leaf--5 { left: 70%; bottom: 16%; --rot:  -6deg; animation-duration: 11s; animation-delay: 6.6s; }
.hero-leaf--6 { left: 84%; bottom: 10%; --rot:  18deg; animation-duration: 14s; animation-delay: 3.8s; }
.hero-leaf--7 { left: 32%; bottom: 30%; --rot: -16deg; animation-duration: 12s; animation-delay: 8.1s; }

@keyframes leaf-float {
  0% {
    transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(0.85);
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }
  10% { opacity: 0.6; }
  55% {
    opacity: 0.78;
    transform: translate(6px, -40vh) rotate(calc(var(--rot, 0deg) + -10deg)) scale(1.05);
    filter: drop-shadow(0 0 4px rgba(232, 200, 130, 0.35));
  }
  82% {
    opacity: 1;
    transform: translate(14px, -56vh) rotate(calc(var(--rot, 0deg) + -18deg)) scale(1.18);
    filter: drop-shadow(0 0 16px rgba(232, 200, 130, 0.95)) brightness(1.55);
  }
  100% {
    opacity: 0;
    transform: translate(20px, -68vh) rotate(calc(var(--rot, 0deg) + -26deg)) scale(0.6);
    filter: drop-shadow(0 0 24px rgba(232, 200, 130, 0)) brightness(2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-arc { animation: none; opacity: 1; }
  .hero-leaf { animation: none; opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  /* Mobile: pull the content up so it lives clearly in the upper
     zone of the hero, above the illustration anchored at the bottom.
     Tablet/desktop bump this back up via min-width media queries. */
  padding-top: clamp(20px, 5vh, 48px);
  padding-bottom: 24px;
  text-align: left;
}

.hero-content .eyebrow { margin-bottom: 18px; }

.hero-content h1 {
  margin: 0 0 22px;
  font-size: clamp(36px, 9vw, 60px);
  line-height: 1.05;
}

.hero-content .lede {
  margin-bottom: 32px;
  font-size: clamp(15px, 4vw, 18px);
  max-width: 30ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-actions .btn { padding: 16px 28px; font-size: 15px; }

/* ─── Tablet (≥ 600px) ─── */
@media (min-width: 600px) {
  /* Was clamp(80px, 14vh, 140px) — pulled up so the content sits
     clearly above the illustration without redesigning the hero. */
  .hero-content { padding-top: clamp(32px, 7vh, 72px); }
  .hero-illustration { width: 100%; max-width: 820px; }
}

/* ─── Desktop (≥ 900px) ─── */
@media (min-width: 900px) {
  .hero { min-height: calc(100vh - 120px); }
  .hero-content {
    /* Was clamp(80px, 12vh, 130px) — moved up so the headline and
       CTA pair stay in the upper third of the hero, clear of the
       illustration anchored at the bottom. */
    padding-top: clamp(40px, 7vh, 80px);
    max-width: 760px;
  }
  .hero-content h1 { font-size: clamp(48px, 5.4vw, 68px); }
  .hero-content .lede { max-width: 46ch; }
  /* Smaller, lower-sitting illustration on desktop. Shrinking it
     drops the cross/hands motif into the visible center of the
     viewport (instead of looming up over the text) and gives the
     edge-fade mask more ivory to dissolve into. */
  .hero-illustration {
    width: 56%;
    max-width: 760px;
  }
  .hero-halo-1 { width: 520px; height: 520px; top: -180px; right: -160px; }
  .hero-halo-2 { width: 420px; height: 420px; left: -140px; }
}

/* ─── Small mobile tweaks (≤ 430px) ─── */
@media (max-width: 430px) {
  .hero-content { padding-top: 28px; padding-bottom: 12px; }
  .hero-content h1 { font-size: clamp(32px, 9vw, 42px); }
  .hero-illustration { width: 130%; }
}

/* ─── Very tall screens — let the illustration breathe ─── */
@media (min-height: 800px) and (max-width: 900px) {
  .hero-illustration { max-height: 62vh; width: auto; max-width: none; }
}

/* ══════════════════════════════════════════════════
   SECTION FRAMEWORK
   ══════════════════════════════════════════════════ */
section { padding: var(--section-y) 0; position: relative; }
@media (max-width: 900px) { section { padding: var(--section-y-sm) 0; } }

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { color: var(--plum-soft); font-size: 17px; }

/* Divider — ornamental */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: 0 auto;
  max-width: 200px;
  color: var(--gold);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sand), transparent);
}

/* ══════════════════════════════════════════════════
   VALUES STRIP
   ══════════════════════════════════════════════════ */
.values {
  background: var(--ivory);
  padding-top: var(--section-y-sm);
  padding-bottom: var(--section-y-sm);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value {
  text-align: center;
  padding: 28px 20px;
}
.value-icon {
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--beige);
  display: grid; place-items: center;
  color: var(--burgundy);
  position: relative;
}
.value-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(200,169,107,0.5);
}
.value h4 { margin-bottom: 6px; font-family: var(--serif); font-weight: 600; font-size: 18px; }
.value p { font-size: 14px; color: var(--plum-soft); line-height: 1.6; }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ══════════════════════════════════════════════════
   MISSION / STORY SECTION
   ══════════════════════════════════════════════════ */
.story {
  background: var(--beige);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.story::before {
  content: "";
  position: absolute;
  top: -200px; right: -160px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(247,242,232,0.6), transparent 70%);
}
.story-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.story-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ivory), var(--sand));
  box-shadow: var(--shadow);
}
.story-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-art .frame-arch {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(200,169,107,0.4);
  border-radius: 50% 50% 12px 12px / 35% 35% 4% 4%;
  pointer-events: none;
}
.story-text h2 { margin-bottom: 20px; }
.story-text .lede { margin-bottom: 28px; }
.story-pillars { display: grid; gap: 18px; margin-top: 32px; }
.pillar {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px;
  background: rgba(247,242,232,0.6);
  border-radius: var(--r);
  border: 1px solid rgba(203,189,147,0.4);
}
.pillar-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--ivory);
  display: grid; place-items: center;
  color: var(--burgundy);
}
.pillar h4 { margin-bottom: 4px; font-size: 16px; font-family: var(--sans); font-weight: 600; }
.pillar p { font-size: 14px; color: var(--plum-soft); }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-art { max-width: 420px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════
   CAUSES / CAMPAIGNS
   ══════════════════════════════════════════════════ */
.causes { background: var(--ivory); }
.causes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cause-card {
  background: var(--ivory);
  border: 1px solid rgba(203,189,147,0.4);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cause-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.cause-illust {
  height: 200px;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.cause-illust.shelter   { background: linear-gradient(160deg, #EFE3D0, #CBBD93); }
.cause-illust.water     { background: linear-gradient(160deg, #E9DDCC, #B98B8B); }
.cause-illust.education { background: linear-gradient(160deg, #F2E7D2, #C8A96B); }
.cause-illust svg { width: 60%; height: 60%; }

.cause-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.cause-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin-bottom: 12px;
}
.cause-card h3 { font-size: 22px; margin-bottom: 10px; font-weight: 500; }
.cause-card p { color: var(--plum-soft); font-size: 15px; margin-bottom: 22px; flex: 1; }

.progress {
  height: 6px;
  background: var(--beige);
  border-radius: var(--pill);
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold), var(--burgundy));
  border-radius: var(--pill);
}
.progress-meta {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: var(--plum-soft);
  margin-bottom: 20px;
}
.progress-meta strong { color: var(--plum); font-weight: 600; }

@media (max-width: 900px) {
  .causes-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ══════════════════════════════════════════════════
   IMPACT NUMBERS
   ══════════════════════════════════════════════════ */
.impact {
  background: var(--ivory);
  padding-top: 0;
}
.impact-panel {
  background: var(--burgundy);
  color: var(--ivory);
  border-radius: var(--r-lg);
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
}
.impact-panel::before {
  content: "";
  position: absolute;
  top: -160px; right: -160px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(200,169,107,0.25), transparent 70%);
}
.impact-panel::after {
  content: "";
  position: absolute;
  bottom: -120px; left: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(185,139,139,0.18), transparent 70%);
}

.impact-head { text-align: center; margin-bottom: 56px; position: relative; }
.impact-head .eyebrow { color: var(--gold-soft); }
.impact-head h2 { color: var(--ivory); font-family: var(--serif); font-weight: 500; margin-top: 14px; }
.impact-head h2 em { color: var(--gold-soft); font-style: italic; }

.impact-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.impact-stat {
  text-align: center;
  padding: 16px;
}
.impact-stat .num {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 500;
  color: var(--gold-soft);
  line-height: 1;
  letter-spacing: -0.02em;
}
.impact-stat .lbl {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,242,232,0.78);
}

@media (max-width: 900px) {
  .impact-panel { padding: 48px 24px; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ══════════════════════════════════════════════════
   STORIES / TESTIMONIALS
   ══════════════════════════════════════════════════ */
.stories { background: var(--ivory); }
.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.testimonial {
  background: var(--beige);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.testimonial::before {
  content: "“";
  position: absolute;
  top: 6px; left: 26px;
  font-family: var(--serif);
  font-size: 120px;
  color: rgba(200,169,107,0.35);
  line-height: 1;
}
.testimonial blockquote {
  position: relative;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--plum);
  margin-top: 28px;
  margin-bottom: 28px;
  font-style: italic;
}
.testimonial cite {
  display: flex; align-items: center; gap: 14px;
  font-style: normal;
}
.testimonial cite .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--burgundy));
  display: grid; place-items: center;
  color: var(--ivory);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
}
.testimonial cite .who strong {
  display: block; color: var(--plum); font-weight: 600;
}
.testimonial cite .who span {
  font-size: 13px; color: var(--plum-soft);
}

@media (max-width: 900px) {
  .stories-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   WAYS TO GIVE
   ══════════════════════════════════════════════════ */
.ways {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--beige) 100%);
}
.ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.way {
  background: var(--ivory);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  border: 1px solid rgba(203,189,147,0.4);
  transition: all .3s ease;
  text-align: left;
}
.way:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.way-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--beige);
  display: grid; place-items: center;
  color: var(--burgundy);
  margin-bottom: 20px;
}
.way h3 { font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.way p { font-size: 15px; color: var(--plum-soft); margin-bottom: 20px; }

@media (max-width: 900px) {
  .ways-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   VERSE / QUOTE BAND
   ══════════════════════════════════════════════════ */
.verse {
  text-align: center;
  background: var(--ivory);
  position: relative;
}
.verse-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px;
}
.verse svg.rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 520px; height: 520px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.verse-inner blockquote {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 400;
  font-style: italic;
  color: var(--plum);
  line-height: 1.4;
}
.verse-inner blockquote em { color: var(--burgundy); font-weight: 500; }
.verse-inner cite {
  position: relative; z-index: 1;
  display: block;
  margin-top: 24px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════
   FINAL CTA
   ══════════════════════════════════════════════════ */
.cta {
  background: var(--ivory);
  padding-bottom: var(--section-y);
}
.cta-panel {
  position: relative;
  background: linear-gradient(160deg, var(--beige), var(--ivory));
  border: 1px solid rgba(200,169,107,0.4);
  border-radius: var(--r-lg);
  padding: 72px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  overflow: hidden;
}
.cta-panel::before {
  content: "";
  position: absolute;
  top: -180px; right: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(200,169,107,0.22), transparent 70%);
}
.cta-text { position: relative; }
.cta-text h2 { margin-bottom: 18px; }
.cta-text p { color: var(--plum-soft); font-size: 17px; margin-bottom: 32px; max-width: 48ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.cta-form {
  position: relative;
  background: var(--ivory);
  border-radius: var(--r);
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(203,189,147,0.4);
}
.cta-form label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 10px;
}
.amount-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.amount-row button {
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  padding: 12px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--plum);
  cursor: pointer;
  transition: all .2s ease;
}
.amount-row button:hover { border-color: var(--gold); background: var(--beige); }
.amount-row button.active {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
}
.cta-form input[type="text"] {
  width: 100%;
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  background: var(--ivory);
  padding: 14px 20px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--plum);
  margin-bottom: 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cta-form input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200,169,107,0.18);
}
.cta-form .btn-primary { width: 100%; justify-content: center; }
.cta-form .note {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--plum-soft);
}

@media (max-width: 900px) {
  .cta-panel { grid-template-columns: 1fr; padding: 48px 28px; gap: 36px; }
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
footer {
  background: var(--plum);
  color: rgba(247,242,232,0.75);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.footer-brand .logo { color: var(--ivory); margin-bottom: 8px; }
.footer-ein {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
  margin: 0 0 16px;
  opacity: 0.85;
}
.footer-brand p { font-size: 14px; line-height: 1.7; max-width: 320px; }

.footer-col h5 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col ul { list-style: none; display: grid; gap: 12px; }
.footer-col a {
  color: rgba(247,242,232,0.78);
  font-size: 14px;
}
.footer-col a:hover { color: var(--ivory); }

.footer-bottom {
  border-top: 1px solid rgba(247,242,232,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(247,242,232,0.55);
  flex-wrap: wrap;
  gap: 12px;
}
.socials { display: flex; gap: 14px; }
.socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(247,242,232,0.22);
  display: grid; place-items: center;
  color: rgba(247,242,232,0.78);
  transition: all .2s ease;
}
.socials a:hover { background: var(--gold); color: var(--plum); border-color: var(--gold); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Mobile — single-column vertical stack, all left-aligned.
   Mirrors the cleaner Fellow Hope footer layout the user shared:
   brand block on top, then each column underneath in sequence,
   instead of the cramped two-column grid at tablet width. */
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }
  .footer-brand p { max-width: none; }
  .footer-bottom {
    text-align: left;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════
   FADE-IN on scroll
   ══════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════
   SUB-PAGE PATTERNS
   Smaller hero + listing grids + forms + accordions
   ══════════════════════════════════════════════════ */

/* Page hero — smaller and calmer than home hero */
.page-hero {
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -160px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(233, 221, 204, 0.7), transparent 70%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  max-width: 720px;
}
.page-hero h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  margin: 14px 0 18px;
}
.page-hero .lede { font-size: 17px; }

/* Search input bar */
.search-bar {
  position: relative;
  max-width: 480px;
  margin-top: 24px;
}
.search-bar input {
  width: 100%;
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  background: var(--ivory);
  padding: 14px 56px 14px 22px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--plum);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-bar input::placeholder { color: var(--plum-soft); }
.search-bar input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 169, 107, 0.18);
}
.search-bar button {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: var(--burgundy);
  color: var(--ivory);
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease;
}
.search-bar button:hover { background: var(--burgundy-d); }

/* ══════════════════════════════════════════════════
   CATEGORY MENU — collapsible filter on causes.html
   Toggle bar shows the active category; click expands
   a 19-tile grid (4 / 3 / 2 columns at desktop / tablet
   / mobile). Filtering is purely client-side via the
   .is-hidden class on .cause-card.
   ══════════════════════════════════════════════════ */
.cat-menu {
  position: relative;
  margin-bottom: var(--space-md);
}

.cat-menu-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.55);
  border-radius: 18px;
  padding: 12px 18px;
  cursor: pointer;
  color: var(--plum);
  font-family: var(--sans);
  text-align: left;
  box-shadow: 0 6px 18px -12px rgba(62, 43, 43, 0.18);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cat-menu-toggle:hover,
.cat-menu-toggle:focus-visible {
  border-color: var(--burgundy);
  outline: none;
  box-shadow: 0 10px 22px -14px rgba(122, 75, 75, 0.35);
}
.cat-menu-toggle-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cat-menu-toggle-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-menu-toggle-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum-soft);
}
.cat-menu-toggle-value {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--plum);
  line-height: 1.1;
}
.cat-menu-chevron {
  color: var(--plum-soft);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.cat-menu[data-open="true"] .cat-menu-chevron { transform: rotate(180deg); }

.cat-menu-grid {
  margin-top: 12px;
  background: var(--beige);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  box-shadow: 0 14px 30px -18px rgba(62, 43, 43, 0.25);
}
.cat-menu-grid[hidden] { display: none; }

.cat-tile {
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: 16px;
  padding: 16px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--plum);
  font-family: var(--sans);
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease;
}
.cat-tile:hover {
  background: rgba(203, 189, 147, 0.18);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.cat-tile-icon {
  color: var(--gold);
  display: grid;
  place-items: center;
}
.cat-tile-label {
  font-size: 13px;
  font-weight: 500;
}
.cat-tile.is-active {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
  box-shadow: 0 10px 22px -12px rgba(122, 75, 75, 0.5);
}
.cat-tile.is-active .cat-tile-icon { color: var(--gold-soft); }
.cat-tile.is-active:hover {
  background: var(--burgundy-d);
  border-color: var(--burgundy-d);
}

@media (max-width: 900px) {
  .cat-menu-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .cat-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
  .cat-tile { padding: 14px 8px; gap: 8px; }
  .cat-tile-label { font-size: 12px; }
  .cat-menu-toggle-icon { width: 36px; height: 36px; }
  .cat-menu-toggle-value { font-size: 17px; }
}

/* Empty state shown when the active category has zero matching cards */
.cat-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--beige);
  border: 1px solid rgba(203, 189, 147, 0.4);
  border-radius: var(--r-lg);
  margin-top: var(--space-md);
  color: var(--plum-soft);
  font-family: var(--sans);
}
.cat-empty p {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--plum);
  margin: 0 0 var(--space-sm);
}
.cat-empty[hidden] { display: none; }

/* Uniform causes grid (3-col) for listing pages */
.causes-grid-uniform {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .causes-grid-uniform { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .causes-grid-uniform { grid-template-columns: 1fr; }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
}
.pagination button,
.pagination a {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--sand);
  display: grid;
  place-items: center;
  color: var(--plum);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  padding: 0 12px;
}
.pagination a:hover,
.pagination button:hover { background: var(--beige); border-color: var(--gold); color: var(--plum); }
.pagination .current {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
}
.pagination .ellipsis {
  border: none;
  background: transparent;
  color: var(--plum-soft);
}

/* ══════════════════════════════════════════════════
   CAUSE DETAIL PAGE
   ══════════════════════════════════════════════════ */
.cause-detail {
  /* Mobile: top padding 0 so the carousel sits flush against the nav
     — on small screens the photo runs edge-to-edge and any top gap
     reads as wasted ivory. Desktop bumps a margin back via the
     ≥900px override below. */
  padding: 0 0 var(--section-y);
}
@media (min-width: 900px) {
  .cause-detail { padding-top: 40px; }
}
.cause-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: flex-start;
}
.cause-hero-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--beige), var(--sand));
  position: relative;
}
.cause-hero-img svg { width: 100%; height: 100%; display: block; }

.cause-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--plum-soft);
}
.meta-item svg { color: var(--burgundy); }

.cause-detail-body h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 12px 0;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--sand);
  margin: 32px 0 24px;
}
.tab {
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--plum-soft);
  padding: 14px 18px;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid transparent;
  transition: all .2s ease;
}
.tab:hover { color: var(--plum); }
.tab.active {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel p { color: var(--plum); line-height: 1.8; margin-bottom: 18px; }

.update-item {
  padding: 22px 0;
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
}
.update-item:last-child { border-bottom: none; }
.update-date {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.update-item h4 {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 500;
}

.donor-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
}
.donor-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  display: grid; place-items: center;
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(203, 189, 147, 0.45);
}
/* Photo variant — used when the deterministic avatar pool returns an
   illustrated portrait. Background gradient is irrelevant; the img fills. */
.donor-avatar--photo {
  background: var(--beige);
  padding: 0;
}
.donor-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.donor-info { flex: 1; }
.donor-info strong { display: block; color: var(--plum); font-weight: 600; font-size: 15px; }
.donor-info span { font-size: 13px; color: var(--plum-soft); }
.donor-amount {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--burgundy);
  font-size: 18px;
}

/* Donate sidebar card */
.donate-card {
  background: var(--ivory);
  border: 1px solid rgba(200, 169, 107, 0.5);
  border-radius: var(--r-lg);
  padding: 32px;
  position: sticky;
  top: 100px;
  box-shadow: var(--shadow);
}
.donate-card .raised-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  color: var(--burgundy);
  line-height: 1;
}
.donate-card .raised-label {
  font-size: 13px;
  color: var(--plum-soft);
  margin-bottom: 18px;
  margin-top: 4px;
}
.donate-card .progress { margin-bottom: 8px; height: 8px; }
.donate-card .progress-meta { font-size: 13px; margin-bottom: 24px; }
.donate-card hr {
  border: none;
  border-top: 1px dashed var(--sand);
  margin: 24px 0;
}
.donate-card .amount-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.donate-card .amount-row button {
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  padding: 12px 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--plum);
  cursor: pointer;
  transition: all .2s ease;
}
.donate-card .amount-row button:hover { border-color: var(--gold); background: var(--beige); }
.donate-card .amount-row button.active {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
}
.donate-card input[type="text"] {
  width: 100%;
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  background: var(--ivory);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--plum);
  margin-bottom: 14px;
}
.donate-card input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 169, 107, 0.18);
}
.donate-card .btn-primary { width: 100%; justify-content: center; }
.donate-card .share-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.share-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--beige);
  border: none;
  display: grid; place-items: center;
  color: var(--burgundy);
  cursor: pointer;
  transition: all .2s ease;
}
.share-btn:hover { background: var(--burgundy); color: var(--ivory); }

@media (max-width: 900px) {
  .cause-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .donate-card { position: static; }
}

/* ══════════════════════════════════════════════════
   FORM SYSTEM
   ══════════════════════════════════════════════════ */
.form {
  max-width: 720px;
  margin: 0 auto;
}
.form-section {
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.4);
  border-radius: var(--r-lg);
  padding: 36px;
  margin-bottom: 24px;
}
.form-section h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 4px;
}
.form-section .section-step {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.form-section p.section-hint {
  color: var(--plum-soft);
  font-size: 14px;
  margin-bottom: 24px;
}

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--sand);
  border-radius: var(--r);
  background: var(--ivory);
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--plum);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--sans);
  line-height: 1.6;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 169, 107, 0.18);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

.form-submit {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

/* Steps indicator */
.steps {
  display: flex;
  gap: 12px;
  margin: 0 auto 40px;
  max-width: 720px;
}
.step {
  flex: 1;
  text-align: center;
  padding: 16px 12px;
  border-radius: var(--r);
  background: var(--ivory);
  border: 1px solid var(--sand);
  font-size: 13px;
  color: var(--plum-soft);
  font-weight: 500;
}
.step.active {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
}
.step .step-num {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 4px;
}
@media (max-width: 600px) {
  .step { padding: 12px 6px; font-size: 11px; }
  .step .step-num { font-size: 18px; }
}

/* ══════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════ */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(203, 189, 147, 0.5);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 24px 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--plum);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  transition: color .2s ease;
}
.faq-q:hover { color: var(--burgundy); }
.faq-q svg {
  flex-shrink: 0;
  color: var(--burgundy);
  transition: transform .3s ease;
}
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  color: var(--plum-soft);
  line-height: 1.75;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-bottom: 24px;
}

/* ══════════════════════════════════════════════════
   PROSE (privacy, terms, help articles)
   ══════════════════════════════════════════════════ */
.prose {
  max-width: 760px;
  margin: 0 auto;
}
.prose h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin: 40px 0 14px;
  color: var(--plum);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 28px 0 10px;
}
.prose p {
  color: var(--plum);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 16px;
}
.prose ul, .prose ol {
  margin: 0 0 18px 22px;
  color: var(--plum);
}
.prose li { margin-bottom: 8px; line-height: 1.75; }
.prose a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: flex-start;
}
.contact-info {
  background: var(--beige);
  border-radius: var(--r-lg);
  padding: 36px;
}
.contact-info h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
}
.contact-info p { color: var(--plum-soft); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(203, 189, 147, 0.5);
}
.contact-item:first-of-type { border-top: none; }
.contact-item-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ivory);
  display: grid; place-items: center;
  color: var(--burgundy);
  flex-shrink: 0;
}
.contact-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 2px;
}
.contact-item span { font-size: 14px; color: var(--plum-soft); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ══════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════ */
.about-mission {
  background: var(--beige);
  padding: var(--section-y) 0;
  margin: var(--section-y) 0;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.about-art {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ivory), var(--sand));
  box-shadow: var(--shadow);
  position: relative;
}
.about-art svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.value-card {
  text-align: center;
  padding: 28px 20px;
}
.value-card .value-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--beige);
  display: grid; place-items: center;
  color: var(--burgundy);
  position: relative;
}
.value-card .value-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 169, 107, 0.45);
}
.value-card h4 {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
}
.value-card p { font-size: 14px; color: var(--plum-soft); line-height: 1.6; }
@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Impact-style row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--burgundy);
  color: var(--ivory);
  border-radius: var(--r-lg);
  padding: 48px 32px;
  margin-top: 24px;
}
.stat {
  text-align: center;
}
.stat .num {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  color: var(--gold-soft);
  line-height: 1;
}
.stat .lbl {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 242, 232, 0.78);
}
@media (max-width: 600px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); padding: 32px 16px; }
}

/* Help categories */
.help-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.help-cat {
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.4);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: all .25s ease;
  text-decoration: none;
}
.help-cat:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.help-cat-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--beige);
  display: grid; place-items: center;
  color: var(--burgundy);
  margin-bottom: 18px;
}
.help-cat h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--plum);
}
.help-cat p {
  font-size: 14px;
  color: var(--plum-soft);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .help-cats { grid-template-columns: 1fr; }
}

/* CTA-band — reusable bottom CTA */
.cta-band {
  background: var(--beige);
  border-radius: var(--r-lg);
  padding: 56px 48px;
  text-align: center;
  margin: var(--section-y-sm) 0;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: var(--plum-soft); margin-bottom: 24px; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-band .btn { margin: 0 6px; }
@media (max-width: 600px) {
  .cta-band { padding: 40px 24px; }
}

/* ══════════════════════════════════════════════════
   CAMPAIGN CARDS — real-image variant
   ══════════════════════════════════════════════════ */
.cause-illust { background: var(--beige); }
.cause-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Trust the photographer's framing. A blanket top-bias breaks photos
     where the subject sits below the midline; center honors composed
     frames in both directions. For real outliers, append "#fx=NN&fy=NN"
     to the URL in Supabase to set an explicit focal point. */
  object-position: center;
  display: block;
}
.cause-illust > svg { display: none; }   /* hide old placeholder illustrations */

/* Category chips — warm tonal accents within Grace palette */
.card-chip.cat-health   { background: rgba(122, 75, 75, 0.95);  color: var(--ivory); }
.card-chip.cat-children { background: rgba(200, 169, 107, 0.95); color: var(--plum); }
.card-chip.cat-animals  { background: rgba(185, 139, 139, 0.95); color: var(--ivory); }
.card-chip.cat-housing  { background: rgba(203, 189, 147, 0.95); color: var(--plum); }
.card-chip.cat-other    { background: rgba(233, 221, 204, 0.95); color: var(--plum); }

/* Deadline / urgency emphasis stays burgundy */
.card-chip.cat-urgent   { background: var(--burgundy); color: var(--ivory); }

/* Cause-detail hero image — replace SVG with real photo */
.cause-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;  /* trust the photographer's framing */
  display: block;
}
.cause-hero-img > svg { display: none; }

/* ══════════════════════════════════════════════════
   CAUSE DETAIL — gallery thumbnails
   ══════════════════════════════════════════════════ */
.cause-gallery {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
}
.cause-gallery::-webkit-scrollbar { height: 6px; }
.cause-gallery::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }

.cd-thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 72px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--beige);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.cd-thumb:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.cd-thumb.active {
  border-color: var(--burgundy);
}
.cd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════
   CAUSE-SUBMITTED PAGE
   Thank-you / confirmation hero with halo + checklist
   ══════════════════════════════════════════════════ */
.submitted-hero {
  position: relative;
  background: var(--ivory);
  padding: clamp(56px, 10vh, 120px) 0 var(--section-y);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.submitted-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.submitted-halo {
  position: absolute;
  border-radius: 50%;
}
.submitted-halo-1 {
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 540px;
  height: 540px;
  background: radial-gradient(circle at center, rgba(233, 221, 204, 0.7) 0%, rgba(247, 242, 232, 0) 70%);
}
.submitted-halo-2 {
  bottom: -180px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at center, rgba(200, 169, 107, 0.18) 0%, rgba(247, 242, 232, 0) 70%);
}
.submitted-sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  max-width: 100%;
  opacity: 0.6;
}

.submitted-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}

.submitted-illustration {
  width: 180px;
  margin: 0 auto 24px;
}
.submitted-illustration svg { width: 100%; height: auto; display: block; }

.submitted-content .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
}

.submitted-content h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.1;
  margin-bottom: 22px;
}

.submitted-content .lede {
  margin: 0 auto 44px;
  max-width: 58ch;
}

.submitted-checklist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto 56px;
}
.submitted-step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.45);
  border-radius: var(--r);
  padding: 18px 20px;
  text-align: left;
}
.submitted-step-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--ivory);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.submitted-step-icon--soft {
  background: var(--beige);
  color: var(--burgundy);
}
.submitted-step strong {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 2px;
}
.submitted-step span {
  font-size: 13px;
  color: var(--plum-soft);
  line-height: 1.4;
}

.submitted-verse {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--plum-soft);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
.submitted-verse em {
  color: var(--burgundy);
  font-style: italic;
}

.submitted-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.submitted-fineprint {
  font-size: 14px;
  color: var(--plum-soft);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .submitted-checklist {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* ══════════════════════════════════════════════════
   CAUSE DETAIL v2 — carousel + sticky + organizer + sidebar
   ══════════════════════════════════════════════════ */

/* ─── Grid wrap (mobile single col, desktop split) ─── */
.cd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .cd-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
  }
}
.cd-main { min-width: 0; }

/* Desktop title — only visible ≥900px */
.cd-title-desktop {
  display: none;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 8px 0 22px;
  line-height: 1.1;
}
@media (min-width: 900px) {
  .cd-title-desktop { display: block; }
}

/* ─── CAROUSEL ────────────────────────────────── */
.cd-carousel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--beige), var(--sand));
  aspect-ratio: 16 / 11;
  box-shadow: var(--shadow);
  outline: none;
}
.cd-carousel:focus-visible {
  box-shadow: var(--shadow), 0 0 0 3px rgba(200, 169, 107, .45);
}
.cd-carousel.dragging { cursor: grabbing; }
.cd-carousel.dragging .cd-carousel-slide img { transition: none; }

.cd-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.cd-carousel.dragging .cd-carousel-track { cursor: grabbing; }

.cd-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--beige);
  overflow: hidden;
}

/* Blurred backdrop — hidden by default; only revealed when the slide
   is in contain mode (very tall image or explicit #mode=contain). */
.cd-carousel-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: blur(22px) saturate(1.05);
  transform: scale(1.15);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .25s ease;
}

/* Foreground — cover with center framing. Trusts the photographer's
   composition. A blanket top-bias breaks photos where the subject sits
   below the midline. Per-image override via URL fragment lands as
   inline `object-position` on this element (use it when the face is
   well off-center). */
.cd-carousel-slide-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* Contain mode — main image fits whole, backdrop fills empty space.
   !important wins over any per-image inline object-position from
   the cover path. Desktop only — small screens kill the backdrop
   below and fall back to cover. */
.cd-carousel-slide.is-contain .cd-carousel-slide-bg { opacity: 0.45; }
.cd-carousel-slide.is-contain .cd-carousel-slide-img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* Mobile/tablet (≤899px) — no blur backdrop, always cover with center.
   The blur trick is a desktop-only device for absorbing landscape vs
   portrait mismatch in the wider slot; on small screens it just looks
   washed out and crowds the photo. We also override the .is-contain
   class (set by auto-detect for tall portraits) so the image still
   fills the slide edge-to-edge. */
@media (max-width: 899px) {
  .cd-carousel-slide { background: var(--ivory); }
  .cd-carousel-slide-bg,
  .cd-carousel-slide.is-contain .cd-carousel-slide-bg { display: none !important; }
  .cd-carousel-slide.is-contain .cd-carousel-slide-img {
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Edge-to-edge layout for the carousel + content overlap card.
   Scoped tighter than the photo rules above because this only kicks
   in once the slot gets narrow enough to need the "rising sheet" UX. */
@media (max-width: 768px) {

  /* Edge-to-edge carousel — extend past .container's 24px padding so
     the image reaches both viewport edges. Square aspect ratio mirrors
     the reference's bleeding hero photo. */
  .cd-carousel {
    margin-left: -24px;
    margin-right: -24px;
    border-radius: 0;
    aspect-ratio: 1 / 1;
  }

  /* Content card rises over the bottom of the photo with rounded top
     corners, like a sheet of ivory lifting over the image. */
  .cd-content {
    position: relative;
    z-index: 3;
    margin: -28px -24px 0;
    background: var(--ivory);
    border-radius: 36px 36px 0 0;
    padding: 36px 24px 0;
  }

  /* Title overlay sits just above the card edge so it stays readable
     even when the card rises 28px over the image. Lifted higher so
     descenders (y/g/p) don't clip against the card boundary. */
  .cd-title-overlay { bottom: 64px; }
}

.cd-carousel-empty {
  background: linear-gradient(160deg, var(--beige), var(--sand));
}

/* Bottom gradient for legibility */
.cd-carousel-grad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  /* Strongest at the bottom so the title overlay stays readable
     even on bright photos. Intermediate stops smooth the fade so
     there's no visible band partway up the image. */
  background: linear-gradient(
    to top,
    rgba(62, 43, 43, 0.62) 0%,
    rgba(62, 43, 43, 0.30) 35%,
    rgba(62, 43, 43, 0.08) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Organizer chip overlay (top-left) */
.cd-org-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(247, 242, 232, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--pill);
  padding: 6px 14px 6px 6px;
  z-index: 3;
  max-width: calc(100% - 28px);
}
.cd-org-overlay-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cd-org-overlay-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--plum);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title overlay (anchored to the bottom-left of the carousel — mobile-only) */
.cd-title-overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 44px;            /* lifted so descenders (y, p, g) don't clip */
  z-index: 3;
  color: var(--ivory);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.25;       /* extra breathing room for two-line titles */
  margin: 0;
  padding-bottom: 4px;     /* small safety pad below the last baseline */
  text-shadow: 0 2px 12px rgba(62, 43, 43, 0.45);
  pointer-events: none;
}
@media (min-width: 700px) {
  .cd-title-overlay { left: 32px; right: 32px; bottom: 52px; }
}
@media (min-width: 900px) {
  .cd-title-overlay { display: none; }   /* desktop has dedicated title */
}

/* Arrows */
.cd-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(247, 242, 232, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  color: var(--plum);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 4;
  transition: background .2s ease, transform .2s ease;
}
.cd-carousel-btn:hover { background: var(--ivory); transform: translateY(-50%) scale(1.05); }
.cd-carousel-prev { left: 14px; }
.cd-carousel-next { right: 14px; }

/* Dots */
.cd-carousel-dots {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
.cd-dot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(247, 242, 232, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.cd-dot.active {
  background: var(--ivory);
  width: 30px;
}

/* ─── PROGRESS RING (small + sidebar) ─────────── */
.cd-ring-bg {
  fill: none;
  stroke: var(--beige);
  stroke-width: 8;
}
.cd-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.cd-ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.cd-ring-pct {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--burgundy);
}

/* ─── CONTENT block (under carousel on mobile) ─── */
.cd-content { padding-top: 28px; }

/* The category chip lives inside the Organizer block now, sitting
   right below the "Organizer · Location" meta line. Tight top
   spacing keeps it visually attached to that meta row. */
.cd-tag.cd-tag { display: inline-flex; margin: 6px 0 0; }
/* In-flow campaign title: hidden on every viewport. Mobile already
   shows the title as an overlay on the carousel, and desktop shows
   `.cd-title-desktop` above the carousel. Keeping this h1 in the DOM
   for SEO/structure but removing it from the visual layout. */
.cd-title { display: none; }

/* Progress bloc */
.cd-progress-bloc {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: var(--r);
  margin-bottom: 18px;
}
.cd-progress-ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.cd-progress-ring-wrap svg { width: 100%; height: 100%; }
.cd-progress-values { flex: 1; min-width: 0; }
.cd-val-raised {
  font-family: var(--serif);
  font-size: clamp(22px, 4.4vw, 28px);
  font-weight: 600;
  color: var(--burgundy);
  line-height: 1.1;
}
.cd-val-raised-suffix {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--plum-soft);
}
.cd-val-goal {
  font-size: 13px;
  color: var(--plum-soft);
  margin: 2px 0 10px;
}
.cd-val-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--burgundy);
  background: var(--beige);
  padding: 6px 12px;
  border-radius: var(--pill);
  text-decoration: none;
  transition: background .2s ease;
}
.cd-val-ticker:hover { background: var(--sand); }
.cd-ticker-icon, .cd-ticker-arrow { display: inline-flex; align-items: center; }

/* Action buttons row */
.cd-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}
.cd-actions .btn { flex: 1; justify-content: center; }
.cd-btn-share { gap: 8px; }

/* ─── Description with read more ────────────── */
.cd-description-bloc { margin-bottom: 36px; }
.cd-description-wrap {
  position: relative;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}
.cd-description-wrap.collapsed {
  max-height: 280px;
}
.cd-description-wrap.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(247, 242, 232, 0), var(--ivory));
  pointer-events: none;
}
.cd-description p {
  color: var(--plum);
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 16px;
}
.cd-description-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 14px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--burgundy);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.cd-description-toggle:hover { color: var(--burgundy-d); }
.cd-description-toggle-icon { transition: transform .25s ease; }
.cd-description-toggle.open .cd-description-toggle-icon { transform: rotate(180deg); }

/* ─── Section headers (donations, words) ────── */
.cd-section-header {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-sm);   /* title → list ≈ 16px per CLAUDE.md */
}
.cd-section-header h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.cd-count {
  display: inline-block;
  background: var(--beige);
  color: var(--burgundy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--pill);
  margin-left: 6px;
  vertical-align: middle;
}
.cd-words-sub {
  font-size: 14px;
  color: var(--plum-soft);
  margin-top: 6px;
}
/* Unified rhythm for everything inside the main column.
   Wipe every child's own vertical margin and use an owl rule (* + *)
   to enforce a single, consistent gap between consecutive sections.
   Per CLAUDE.md, item-to-item sits at ~16-20px; sections inside the
   main column are a bit bigger units, so we land at 20px mobile /
   28px desktop — tight but not cramped. */
.cd-content > * { margin-top: 0; margin-bottom: 0; }
.cd-content > * + * { margin-top: var(--space-md); }   /* 20px mobile */
@media (min-width: 900px) {
  .cd-content > * + * { margin-top: var(--space-lg); } /* 28px desktop */
}

/* Donations → Words of support tightening. The "See all donations"
   button keeps its natural spacing (no line below it). The next section
   ("Words of support") sits close to where donations ends — overriding
   the global owl-rule (20–28px) down to a small gap so the heading
   doesn't float far below the button. */
.cd-content > .cd-donations + .cd-words,
.cd-content > .cd-modal-overlay + .cd-words {
  margin-top: var(--space-sm);
}
/* Tighten the h3 line-height so the visible glyph hugs the section top
   — body inherits 1.65 which adds ~8px of ghost space above the caps. */
.cd-words .cd-section-header h3 { line-height: 1.1; }
.cd-words .cd-section-header { margin-bottom: var(--space-xs); }
.cd-donations-list, .cd-words-list {
  background: var(--beige);
  border-radius: var(--r);
  padding: 22px;
}
.cd-empty {
  font-style: italic;
  color: var(--plum-soft);
  margin: 0;
  font-size: 15px;
}
.cd-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--sand);
  border-radius: var(--pill);
  padding: 10px 18px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.cd-see-all:hover { background: var(--beige); border-color: var(--gold); }

/* ─── Organizer block ───────────────────────── */
.cd-organizer-bloc {
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 18px;
}
.cd-org-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 14px;
}
.cd-org-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cd-org-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cd-org-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--plum);
}
.cd-org-meta {
  font-size: 13px;
  color: var(--plum-soft);
  margin-top: 2px;
}
.cd-org-sep { color: var(--sand); margin: 0 4px; }
.cd-org-divider {
  border-top: 1px dashed rgba(203, 189, 147, 0.6);
  margin: 18px 0;
}
.cd-org-meta-line {
  font-size: 13px;
  color: var(--plum-soft);
  margin-bottom: 14px;
}
.cd-org-protected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200, 169, 107, 0.15);
  color: var(--burgundy);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--pill);
}

/* Report fundraiser */
.cd-report-bloc { margin: 12px 0 24px; text-align: center; }
.cd-report-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--plum-soft);
  font-weight: 500;
}
.cd-report-link:hover { color: var(--burgundy); }

/* ══════════════════════════════════════════════════
   SHARE IMPACT — full-width section between the main
   grid and the trust band. Has its own headline, icon
   row, and a layered preview-card stack of the current
   campaign so people can see "what they'd share".
   ══════════════════════════════════════════════════ */
.cd-share-impact {
  padding: var(--section-y) 0;
  background: var(--ivory);
  border-top: 1px solid rgba(203, 189, 147, 0.35);
}

.cd-share-impact-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}
.cd-share-impact-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.15;
  color: var(--plum);
  margin: 0 0 var(--space-sm);
}
.cd-share-impact-title .italic-grace {
  font-style: italic;
  color: var(--burgundy);
}
.cd-share-impact-lead {
  color: var(--plum-soft);
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.6;
  margin: 0;
}

.cd-share-impact-icons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto var(--space-sm);
}
.cd-share-impact-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.55);
  color: var(--burgundy);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -10px rgba(62, 43, 43, 0.22);
  transition: transform .2s ease, background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.cd-share-impact-btn:hover,
.cd-share-impact-btn:focus-visible {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -12px rgba(122, 75, 75, 0.55);
  outline: none;
}

.cd-share-impact-toast {
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--burgundy);
  margin: 0 auto;
  padding: 6px 14px;
  background: var(--gold-soft);
  border-radius: 999px;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.cd-share-impact-toast[hidden] { display: none; }

.cd-share-impact-intro {
  text-align: center;
  margin: var(--space-xl) auto var(--space-lg);
  max-width: 560px;
}
.cd-share-impact-subhead {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--plum);
  margin: 0 0 8px;
}
.cd-share-impact-subhead-lead {
  color: var(--plum-soft);
  font-size: 15px;
  margin: 0;
}

/* ─── Preview stack — 3 layered cards (left | main | right) ─── */
.cd-share-impact-stack {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 500px;
  margin: 0 auto;
  max-width: 760px;
  padding: 0 var(--space-md);
}
.cd-share-impact-stack > .cd-share-preview {
  grid-column: 1;
  grid-row: 1;
}

.cd-share-preview {
  width: 320px;
  max-width: 100%;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.45);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 54px -22px rgba(62, 43, 43, 0.32);
  display: flex;
  flex-direction: column;
  /* Decorative preview — mimics what the share image will look like.
     Nothing inside is interactive; the social share buttons above
     handle the actual sharing. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.cd-share-preview--main {
  z-index: 3;
  box-shadow: 0 30px 64px -22px rgba(62, 43, 43, 0.42);
}
.cd-share-preview--side {
  z-index: 1;
  opacity: 0.72;
  pointer-events: none;
  filter: saturate(0.92);
}
.cd-share-preview--left  { transform: translateX(-200px) rotate(-5deg); }
.cd-share-preview--right { transform: translateX(200px)  rotate(5deg);  }

.cd-share-preview-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--beige);
  overflow: hidden;
}
.cd-share-preview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cd-share-preview-img-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--beige), var(--sand));
}

.cd-share-preview-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-share-preview-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--plum);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-share-preview-org {
  font-size: 13px;
  color: var(--plum-soft);
  margin: 0;
}
.cd-share-preview-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--beige);
  overflow: hidden;
}
.cd-share-preview-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
  border-radius: 999px;
}
.cd-share-preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--plum-soft);
}
.cd-share-preview-meta strong {
  color: var(--plum);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}
.cd-share-preview-pct {
  font-family: var(--serif);
  color: var(--burgundy);
  font-weight: 600;
}
.cd-share-preview-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--burgundy);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 4px;
}

/* Tablet — pull the side cards in so the stack stays balanced */
@media (max-width: 900px) {
  .cd-share-impact-stack { min-height: 480px; max-width: 620px; }
  .cd-share-preview { width: 300px; }
  .cd-share-preview--left  { transform: translateX(-160px) rotate(-5deg); }
  .cd-share-preview--right { transform: translateX(160px)  rotate(5deg);  }
}

/* Mobile — tighter stack, side cards smaller + more transparent, no overflow */
@media (max-width: 600px) {
  .cd-share-impact { padding: var(--section-y-sm) 0; }
  .cd-share-impact-stack {
    min-height: 440px;
    overflow: hidden;
    /* Stretch the stack to the viewport edges so the side-card
       clipping lands at the screen border, not inside the container's
       horizontal padding (which used to show as an ivory strip on
       both sides that visually "cut" the cards). */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }
  .cd-share-impact-btn { width: 52px; height: 52px; }
  .cd-share-preview { width: 260px; border-radius: 24px; }
  .cd-share-preview--side { opacity: 0.55; }
  .cd-share-preview--left  { transform: translateX(-120px) rotate(-6deg) scale(0.92); }
  .cd-share-preview--right { transform: translateX(120px)  rotate(6deg)  scale(0.92); }
}

/* ─── DESKTOP SIDEBAR ────────────────────────── */
.cd-sidebar {
  display: none;
}
@media (min-width: 900px) {
  .cd-sidebar {
    display: block;
    position: sticky;
    top: 140px;
  }
  /* On desktop, the right-side sticky card already shows progress +
     raised/goal + Donate + Share + recent gifts. Hide the duplicated
     in-flow versions from the main column to avoid showing the same
     info twice. Mobile keeps the in-flow versions since the sidebar
     is hidden there. */
  .cd-progress-bloc,
  .cd-actions {
    display: none;
  }
}
.cd-sidebar-card {
  background: var(--ivory);
  border: 1px solid rgba(200, 169, 107, 0.5);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.cd-sidebar-progress {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}
.cd-sidebar-ring {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.cd-sidebar-ring svg { width: 100%; height: 100%; }
.cd-sidebar-raised strong {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--burgundy);
  display: block;
}
.cd-sidebar-raised span {
  font-size: 13px;
  color: var(--plum-soft);
}
.cd-sidebar-meta {
  font-size: 13px;
  color: var(--plum-soft);
}
.cd-sidebar-supporters {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}
.cd-sidebar-btn-donate {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}
.cd-sidebar-btn-share {
  width: 100%;
  justify-content: center;
  margin-bottom: 22px;
}
.cd-sidebar-recent { border-top: 1px solid rgba(203, 189, 147, 0.5); padding-top: 18px; }
.cd-sidebar-recent h4 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}
.cd-sidebar-recent-list .cd-empty { font-size: 14px; }

/* ─── STICKY MOBILE DONATE BAR ─────────────────
   Two-row layout on mobile: progress + raised/goal on top,
   full-width donate button below so tapping is comfortable
   and the values stay readable. Desktop hides the bar (the
   sidebar handles donation there). */
.cd-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ivory);
  border-top: 1px solid rgba(203, 189, 147, 0.5);
  padding: 14px 18px 16px;
  /* Respect iPhone safe-area on the bottom */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 12px;
  z-index: 100;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -10px 28px rgba(62, 43, 43, 0.10);
}
.cd-sticky.shown { transform: translateY(0); }
.cd-sticky-progress {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.cd-sticky-progress svg { width: 100%; height: 100%; }
.cd-sticky-ring-bg { fill: none; stroke: var(--beige); stroke-width: 5; }
.cd-sticky-ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.cd-sticky-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 11px;
  color: var(--burgundy);
}
.cd-sticky-info {
  flex: 1;
  min-width: 0;
}
.cd-sticky-raised {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--plum);
  line-height: 1.15;
}
.cd-sticky-meta {
  font-size: 13px;
  color: var(--plum-soft);
  margin-top: 2px;
}
/* Button wraps to its own line and takes the full row */
.cd-sticky-btn {
  flex-basis: 100%;
  width: 100%;
  min-height: 54px;
  padding: 14px 22px;
  font-size: 15px;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(122, 75, 75, 0.45);
}

/* Reserve room at the bottom of the page so the sticky bar never
   covers footer/related content. Scoped to pages that actually
   render .cd-sticky so other pages stay flush. */
@media (max-width: 899px) {
  body:has(.cd-sticky) { padding-bottom: 168px; }
}

@media (min-width: 900px) {
  .cd-sticky { display: none; }   /* desktop has the always-visible sidebar */
}

/* ─── TRUST SECTION ──────────────────────────── */
.cd-trust {
  background: var(--beige);
  padding: clamp(48px, 8vw, 80px) 0;
  margin-top: 60px;
}
.cd-trust-title {
  text-align: center;
  font-size: clamp(26px, 3.6vw, 38px);
  margin-bottom: 40px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.cd-trust-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .cd-trust-features { grid-template-columns: repeat(3, 1fr); }
}
.cd-trust-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cd-trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cd-trust-feature strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 4px;
}
.cd-trust-feature p {
  font-size: 14px;
  color: var(--plum-soft);
  line-height: 1.6;
  margin: 0;
}

/* ─── RELATED CAUSES RAIL ────────────────────── */
.cd-related {
  padding: clamp(48px, 8vw, 80px) 0;
}
.cd-related-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.cd-related-title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  margin: 0;
}
.cd-related-title em {
  font-style: italic;
  color: var(--burgundy);
  font-weight: 400;
}
.cd-related-nav { display: flex; gap: 8px; flex-shrink: 0; }
.cd-related-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--sand);
  color: var(--plum);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .2s ease;
}
.cd-related-btn:hover {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
}
.cd-related-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cd-related-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
}
.cd-related-rail::-webkit-scrollbar { height: 6px; }
.cd-related-rail::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }
.cd-related-cell {
  flex: 0 0 clamp(280px, 60vw, 320px);
  scroll-snap-align: start;
}
.cd-related-cell .cause-card { height: 100%; }

/* ─── Donor message + compact sidebar variant ────── */
.donor-message {
  margin-top: 6px;
  color: var(--plum);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}
.donor-item--compact {
  padding: 10px 0;
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
}
.donor-item--compact:last-child { border-bottom: none; }
.donor-item--compact .donor-avatar { width: 36px; height: 36px; font-size: 13px; }
.donor-item--compact .donor-info strong { font-size: 14px; }
.donor-item--compact .donor-info span { font-size: 12px; }
.cd-sidebar-recent-list .donor-item--compact { padding: 8px 0; }

/* ─── Cause-submitted: timeline + contact card (refined) ─── */
.submitted-illustration {
  width: 220px;
  margin: 0 auto var(--space-lg);
}

.submitted-timeline {
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto var(--space-xl);
  padding: 0;
  text-align: left;
}
.submitted-stage {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: var(--r);
  padding: 18px 22px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.submitted-stage--active {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--ivory), rgba(200, 169, 107, 0.08));
  box-shadow: var(--shadow-sm);
}
.submitted-stage .stage-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  text-align: center;
}
.submitted-stage--active .stage-num { color: var(--burgundy); }
.submitted-stage .stage-body strong {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 4px;
}
.submitted-stage .stage-body span {
  font-size: 14px;
  color: var(--plum-soft);
  line-height: 1.55;
}

.submitted-contact {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: flex-start;
  max-width: 620px;
  margin: 0 auto var(--space-xl);
  padding: 22px 24px;
  background: var(--beige);
  border-radius: var(--r);
  text-align: left;
}
.submitted-contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.submitted-contact strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--plum);
  margin-bottom: 6px;
}
.submitted-contact p {
  font-size: 14px;
  color: var(--plum-soft);
  line-height: 1.6;
  margin: 0;
}
.submitted-contact a {
  color: var(--burgundy);
  font-weight: 600;
}

/* The legacy .submitted-checklist styles are no longer used on this page
   (we replaced it with .submitted-timeline). Leave them in CSS for now —
   any other page that needs the 3-card layout can keep using them. */

@media (max-width: 560px) {
  .submitted-stage {
    grid-template-columns: 42px 1fr;
    padding: 16px 18px;
    gap: 12px;
  }
  .submitted-stage .stage-num { font-size: 24px; }
}

/* ─── Animated heart on cause-submitted page ─── */
.submitted-illustration svg {
  overflow: visible;
  /* Whole heart drifts up/down — gentle float, same vibe as the
     hero's floating donor stat cards. */
  animation: heart-float 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes heart-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

.heart-halo {
  transform-origin: 100px 100px;
  animation: heart-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes heart-glow-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.heart-shape {
  transform-origin: 100px 110px;
  animation: heart-beat 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 20px rgba(122, 75, 75, 0.35));
}
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.06); }
  30%      { transform: scale(0.98); }
  45%      { transform: scale(1.03); }
  60%      { transform: scale(1); }
}

.heart-sweep {
  transform: rotate(20deg);
  animation: heart-shine 3.2s ease-in-out infinite;
}
@keyframes heart-shine {
  0%, 100% { transform: translateX(0) rotate(20deg); opacity: 0; }
  20%      { opacity: 1; }
  80%      { opacity: 1; }
  100%     { transform: translateX(260px) rotate(20deg); opacity: 0; }
}

.heart-sparkle {
  transform-origin: center;
  animation: heart-sparkle-twinkle 2.2s ease-in-out infinite;
}
.heart-sparkle-1 { animation-delay: 0s;   }
.heart-sparkle-2 { animation-delay: 0.7s; }
.heart-sparkle-3 { animation-delay: 1.4s; }
@keyframes heart-sparkle-twinkle {
  0%, 100% { transform: scale(0.5); opacity: 0; }
  40%      { transform: scale(1);   opacity: 1; }
  60%      { transform: scale(1);   opacity: 1; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .heart-halo, .heart-shape, .heart-sweep, .heart-sparkle { animation: none; }
}

/* ─── Donations modal overlay ─────────────────────
   Full-screen translucent backdrop with a centered card holding
   the scrollable list of donations. Opens when "See all donations"
   is clicked. */
.cd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(62, 43, 43, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;       /* mobile: sheet rises from bottom */
  justify-content: center;
  opacity: 0;
  transition: opacity .22s ease;
}
/* When the hidden attribute is set, fully remove from the layout so
   the invisible overlay doesn't capture clicks on the page below. */
.cd-modal-overlay[hidden] { display: none; }
@media (min-width: 700px) {
  .cd-modal-overlay { align-items: center; }     /* desktop: centered */
}
.cd-modal-overlay.is-open { opacity: 1; }

.cd-modal {
  background: var(--ivory);
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(62, 43, 43, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.cd-modal-overlay.is-open .cd-modal { transform: translateY(0); }
@media (min-width: 700px) {
  .cd-modal {
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(62, 43, 43, 0.22);
    margin: 24px;
  }
}

.cd-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
  flex-shrink: 0;
}
.cd-modal-head h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--plum);
  margin: 0 0 4px;
}
.cd-modal-sub {
  font-size: 13px;
  color: var(--plum-soft);
  margin: 0;
}

.cd-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--beige);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--plum);
  transition: background .2s ease;
  flex-shrink: 0;
}
.cd-modal-close:hover { background: var(--sand); }

.cd-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
}
.cd-modal-body::-webkit-scrollbar { width: 6px; }
.cd-modal-body::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }

.cd-modal-body .donor-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
}
.cd-modal-body .donor-item:last-child { border-bottom: none; }

body.cd-modal-locked { overflow: hidden; }

/* ══════════════════════════════════════════════════
   DONATE PAGE — dedicated donation flow
   Namespace: .dn-*
   ══════════════════════════════════════════════════ */
.dn-page {
  background: var(--ivory);
  padding: clamp(20px, 3vw, 36px) 0 80px;
}
.dn-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.dn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--plum-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: var(--space-md);
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.dn-back:hover {
  background: var(--beige);
  color: var(--burgundy);
}

/* ─── Hero image with overlay ─── */
.dn-hero { margin-bottom: var(--space-md); }
.dn-hero-image {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--beige), var(--sand));
  box-shadow: 0 22px 50px -22px rgba(62, 43, 43, 0.32);
}
.dn-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.dn-hero-grad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(to top,
    rgba(62, 43, 43, 0.78) 0%,
    rgba(62, 43, 43, 0.42) 45%,
    rgba(62, 43, 43, 0) 100%);
  pointer-events: none;
}
.dn-hero-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: var(--ivory);
  z-index: 1;
}
.dn-supporting {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  background: var(--burgundy);
  color: var(--ivory);
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px -6px rgba(122, 75, 75, 0.55);
}
.dn-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ivory);
  text-shadow: 0 2px 12px rgba(62, 43, 43, 0.55);
}
.dn-by {
  font-size: 14px;
  color: rgba(247, 242, 232, 0.88);
  margin: 0;
}

/* ─── Progress card ─── */
.dn-progress-card {
  background: var(--beige);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: 22px;
  padding: 20px 22px;
  box-shadow: 0 10px 28px -16px rgba(62, 43, 43, 0.22);
  margin-bottom: var(--space-md);
}
.dn-progress-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dn-progress-raised {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--plum);
  line-height: 1;
}
.dn-progress-goal {
  font-size: 14px;
  color: var(--plum-soft);
}
.dn-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(122, 75, 75, 0.14);
  overflow: hidden;
}
.dn-progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--burgundy));
  border-radius: 999px;
  transition: width .9s cubic-bezier(.4,0,.2,1);
}
.dn-progress-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  font-size: 13px;
  color: var(--plum-soft);
}
.dn-progress-pct {
  font-family: var(--serif);
  color: var(--burgundy);
  font-weight: 600;
  font-size: 15px;
}

.dn-momentum {
  text-align: center;
  color: var(--plum-soft);
  font-size: 15px;
  font-style: italic;
  margin: 0 0 var(--space-lg);
}

/* ─── Amount selector ─── */
.dn-amounts { margin-bottom: var(--space-md); }
.dn-section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--plum);
  margin: 0 0 var(--space-sm);
}
.dn-amounts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (min-width: 600px) {
  .dn-amounts-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
.dn-amount {
  position: relative;
  background: var(--ivory);
  border: 1.5px solid rgba(203, 189, 147, 0.55);
  border-radius: 16px;
  padding: 18px 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--plum);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dn-amount:hover {
  border-color: var(--burgundy);
  background: var(--gold-soft);
  transform: translateY(-1px);
}
.dn-amount.is-selected {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--burgundy);
  box-shadow: 0 10px 22px -10px rgba(122, 75, 75, 0.5);
}
.dn-amount.is-selected:hover {
  background: var(--burgundy-d);
  border-color: var(--burgundy-d);
}
.dn-suggested-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--plum);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(200, 169, 107, 0.6);
}

/* ─── Social proof line ─── sits flush against the next block;
   no surrounding margin. Names cycle with a soft opacity fade. */
.dn-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0;
  font-size: 14px;
  color: var(--plum-soft);
  opacity: 1;
  transition: opacity .38s ease;
}
.dn-social-proof.is-fading { opacity: 0; }
.dn-social-proof[hidden] { display: none; }
.dn-social-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dn-social-text { flex: 1; min-width: 0; }
.dn-social-text strong { color: var(--plum); font-weight: 600; }

/* Tighten the gap to the amounts section so the pill reads as a
   prelude to the amount grid rather than its own block. */
.dn-social-proof + .dn-amounts { margin-top: 12px; }

/* ─── Submit button ─── */
.dn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--burgundy);
  color: var(--ivory);
  border: none;
  border-radius: 999px;
  padding: 18px 24px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(122, 75, 75, 0.55);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dn-submit:hover {
  background: var(--burgundy-d);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(122, 75, 75, 0.65);
}
.dn-submit:active { transform: translateY(0); }
.dn-submit-amount {
  font-family: var(--serif);
  font-weight: 700;
}

.dn-tagline {
  text-align: center;
  font-style: italic;
  color: var(--plum-soft);
  font-size: 14px;
  margin: 14px 0 var(--space-xl);
}

/* ─── Trust card ─── */
.dn-trust {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--beige);
  border: 1px solid rgba(203, 189, 147, 0.5);
  border-radius: 20px;
  padding: 20px 22px;
}
.dn-trust-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--burgundy);
  display: grid;
  place-items: center;
}
.dn-trust-text h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--plum);
  margin: 0 0 4px;
}
.dn-trust-text p {
  font-size: 14px;
  color: var(--plum-soft);
  line-height: 1.55;
  margin: 0;
}

/* ─── Responsive — mobile edge-to-edge hero ─── */
@media (max-width: 600px) {
  .dn-hero {
    margin-left: -20px;
    margin-right: -20px;
  }
  .dn-hero-image {
    border-radius: 0;
    aspect-ratio: 4 / 5;
  }
  .dn-hero-content { left: 20px; right: 20px; bottom: 20px; }
  .dn-amount { font-size: 17px; padding: 16px 10px; }
}

@media (min-width: 900px) {
  .dn-page { padding: 36px 0 100px; }
  .dn-hero-image { aspect-ratio: 16 / 9; }
  .dn-title { font-size: clamp(28px, 3.4vw, 36px); }
  .dn-progress-card { padding: 24px 28px; }
}

/* ══════════════════════════════════════════════════
   UPLOAD TILES — file inputs on start-a-cause.html
   Dressed up as warm dropzone-style tiles: ivory
   background, dashed sand border, gold-soft icon
   circle. The native <input type="file"> is invisible
   but layered over the whole tile so the entire area
   is clickable. JS swaps title/hint + .is-filled when
   the user picks a file.
   ══════════════════════════════════════════════════ */
.upload-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ivory);
  border: 1.5px dashed rgba(203, 189, 147, 0.7);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.upload-tile:hover {
  border-color: var(--burgundy);
  background: var(--gold-soft);
  transform: translateY(-1px);
}
.upload-tile:focus-within {
  border-color: var(--burgundy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 75, 75, 0.18);
}
.upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  transition: background-color .2s ease, color .2s ease;
}
.upload-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.upload-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--plum);
  line-height: 1.2;
  /* Long filenames truncate with ellipsis instead of breaking the tile */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-hint {
  font-size: 12px;
  color: var(--plum-soft);
}
.upload-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--ivory);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .25s ease, transform .25s ease;
}
.upload-tile.is-filled {
  border-style: solid;
  border-color: var(--burgundy);
  background: var(--beige);
}
.upload-tile.is-filled:hover { background: var(--beige); }
.upload-tile.is-filled .upload-icon {
  background: var(--burgundy);
  color: var(--ivory);
}
.upload-tile.is-filled .upload-check {
  opacity: 1;
  transform: scale(1);
}

/* Compact variant for the optional additional-photo slots */
.upload-tile--sm {
  padding: 12px 14px;
  gap: 12px;
  border-radius: 14px;
}
.upload-tile--sm .upload-icon { width: 36px; height: 36px; }
.upload-tile--sm .upload-title { font-size: 14px; }
.upload-tile--sm .upload-hint { font-size: 11px; }
.upload-tile--sm .upload-check { width: 22px; height: 22px; }

.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .upload-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   RICH STORY EDITOR — contenteditable on start-a-cause
   Styled to feel like a generous, warm textarea. Paste
   support (images, image URLs, plain URLs) is wired up
   in the page's inline script.
   ══════════════════════════════════════════════════ */
.rich-editor {
  display: block;
  min-height: 280px;
  max-height: 640px;
  overflow-y: auto;
  background: var(--ivory);
  border: 1.5px solid rgba(203, 189, 147, 0.6);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--plum);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rich-editor:focus {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(122, 75, 75, 0.15);
}
/* Placeholder — fires only while the editor is truly empty. The
   browser keeps a stray <br> when the user clears the field; in
   that case we still hide the hint to avoid a stacked appearance. */
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--plum-soft);
  white-space: pre-line;
  opacity: 0.75;
  pointer-events: none;
}

.rich-editor p { margin: 0 0 12px; }
.rich-editor p:last-child { margin-bottom: 0; }
.rich-editor img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 12px 0;
}
.rich-editor a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rich-editor ul,
.rich-editor ol { margin: 0 0 12px 22px; }

.rich-editor-hint {
  font-size: 12px;
  color: var(--plum-soft);
  margin-top: 8px;
  font-style: italic;
}

/* Match the description rendering on cause-detail to the editor look
   so embedded media keeps the same rounded, breathable feel. */
.cd-description img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 14px 0;
}
.cd-description a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════
   TERMS OF USE PAGE — long-form legal document
   Namespace: .tos-*
   ══════════════════════════════════════════════════ */

/* Smooth anchor scrolling with offset for the sticky header.
   Scoped to the terms page via the body class so we don't change
   global scroll behavior site-wide. */
body.tos-page { scroll-behavior: smooth; }
html:has(body.tos-page) { scroll-padding-top: 140px; }

/* ─── Notice card just under the hero ────────────── */
.tos-notice-wrap {
  padding: 0 0 var(--space-md);
}
.tos-notice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--gold-soft);
  border: 1px solid rgba(200, 169, 107, 0.55);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  box-shadow: 0 14px 30px -18px rgba(122, 75, 75, 0.18);
}
.tos-notice-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -4px rgba(122, 75, 75, 0.22);
}
.tos-notice-body { min-width: 0; flex: 1; }
.tos-notice-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 2.1vw, 22px);
  color: var(--plum);
  margin: 0 0 8px;
  line-height: 1.25;
}
.tos-notice-body p {
  color: var(--plum);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 var(--space-sm);
}
.tos-notice-body p:last-child { margin-bottom: 0; }
.tos-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--plum-soft);
}
.tos-meta strong { color: var(--plum); font-weight: 600; }

/* ─── Section wrapper + 2-column layout ────────────── */
.tos-section {
  padding-top: var(--space-md);
  padding-bottom: var(--section-y);
}
.tos-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  align-items: flex-start;
}

/* ─── Sticky table of contents ─────────────────────── */
.tos-toc {
  position: sticky;
  top: 140px;
  align-self: start;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding-right: 12px;
}
.tos-toc-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum-soft);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
}
.tos-toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.tos-toc-list li { margin: 0; }
.tos-toc-list a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--plum-soft);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease;
  border-left: 2px solid transparent;
}
.tos-toc-list a:hover {
  background: var(--beige);
  color: var(--burgundy);
}
.tos-toc-list a.is-active {
  background: var(--gold-soft);
  color: var(--burgundy);
  border-left-color: var(--burgundy);
  font-weight: 600;
}
.tos-toc-num {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
  padding-top: 1px;
  min-width: 22px;
}
.tos-toc-list a.is-active .tos-toc-num { color: var(--burgundy); }
.tos-toc-text {
  min-width: 0;
  word-break: break-word;
}

/* ─── Article cards ────────────────────────────────── */
.tos-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.tos-article {
  background: var(--ivory);
  border: 1px solid rgba(203, 189, 147, 0.45);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  box-shadow: 0 8px 22px -16px rgba(62, 43, 43, 0.18);
  scroll-margin-top: 140px;
}
.tos-article-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(203, 189, 147, 0.4);
}
.tos-article-num {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(122, 75, 75, 0.12);
}
.tos-article-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--plum);
  margin: 0 0 6px;
  line-height: 1.18;
}
.tos-article-sub {
  font-size: 14px;
  color: var(--plum-soft);
  margin: 0;
  font-style: italic;
}
.tos-article p {
  color: var(--plum);
  font-size: 15px;
  line-height: 1.72;
  margin: 0 0 var(--space-sm);
}
.tos-article p:last-child { margin-bottom: 0; }
.tos-article strong { color: var(--plum); font-weight: 600; }
.tos-article em { font-style: italic; }
.tos-article a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tos-article a:hover { color: var(--burgundy-d); }
.tos-article h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--plum);
  margin: var(--space-md) 0 var(--space-sm);
  line-height: 1.3;
}
.tos-article ul,
.tos-article ol {
  margin: 0 0 var(--space-sm);
  padding-left: 22px;
}
.tos-article li {
  color: var(--plum);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.tos-article li::marker { color: var(--gold); }
.tos-article li:last-child { margin-bottom: 0; }

/* Definition list (Section 2 — Definitions) */
.tos-defs {
  margin: var(--space-sm) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.tos-defs dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--burgundy);
  margin-bottom: 2px;
}
.tos-defs dd {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--plum);
  margin: 0 0 var(--space-sm);
  padding-left: 14px;
  border-left: 2px solid rgba(200, 169, 107, 0.5);
}
.tos-defs dd:last-child { margin-bottom: 0; }
@media (min-width: 700px) {
  .tos-defs {
    grid-template-columns: 180px 1fr;
    column-gap: 24px;
    row-gap: 14px;
  }
  .tos-defs dt { margin-bottom: 0; padding-top: 2px; }
  .tos-defs dd { padding-left: 16px; margin-bottom: 0; }
}

/* Callout boxes for warnings / important notices */
.tos-callout {
  border-radius: var(--r-sm);
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  margin: var(--space-md) 0;
  border: 1px solid rgba(203, 189, 147, 0.55);
  background: var(--beige);
  color: var(--plum);
}
.tos-callout strong { color: var(--plum); font-weight: 600; }
.tos-callout--warning {
  background: rgba(185, 139, 139, 0.14);
  border-color: rgba(185, 139, 139, 0.45);
  border-left: 4px solid var(--burgundy);
}

/* Physical address block */
.tos-address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  color: var(--plum);
  padding: 18px 22px;
  background: var(--beige);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--gold);
  margin: var(--space-sm) 0;
}

/* Section 22 closing CTA pair */
.tos-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(203, 189, 147, 0.4);
}

/* ─── Tablet ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .tos-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
  .tos-article { padding: 32px 32px; }
}

/* ─── Mobile ───────────────────────────────────────── */
@media (max-width: 900px) {
  .tos-notice {
    flex-direction: column;
    padding: 20px 22px;
    gap: 14px;
  }
  .tos-notice-icon { width: 44px; height: 44px; }
  .tos-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* TOC stacks above the content; not sticky on mobile to avoid
     fighting the page scroll on small screens. */
  .tos-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    background: var(--ivory);
    border: 1px solid rgba(203, 189, 147, 0.45);
    border-radius: var(--r-lg);
    padding: 22px 22px 14px;
    box-shadow: 0 6px 18px -14px rgba(62, 43, 43, 0.18);
  }
  .tos-toc-list a { font-size: 14px; }
  .tos-article {
    padding: 26px 22px;
    border-radius: 20px;
  }
  .tos-article-head {
    gap: 14px;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
  .tos-article-num {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }
  .tos-article p,
  .tos-article li { font-size: 14.5px; }
  .tos-callout { padding: 14px 16px; font-size: 14px; }
  .tos-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ─── Small phones ─────────────────────────────────── */
@media (max-width: 480px) {
  .tos-article { padding: 22px 18px; }
  .tos-article-head { flex-direction: column; gap: 10px; }
  .tos-article-num { width: 42px; height: 42px; font-size: 16px; }
  .tos-article-head h2 { font-size: 22px; }
}

/* ══════════════════════════════════════════════════
   CONTACT FORM — Web3Forms states (success / error)
   ══════════════════════════════════════════════════ */
.contact-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-md);
  box-shadow: 0 10px 22px -10px rgba(122, 75, 75, 0.3);
}
.contact-success h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--plum);
  margin: 0 0 var(--space-sm);
}
.contact-success p {
  color: var(--plum-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 440px;
  margin: 0 auto var(--space-md);
}
.contact-form-error {
  margin: var(--space-sm) 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--burgundy);
  background: rgba(185, 139, 139, 0.14);
  border: 1px solid rgba(185, 139, 139, 0.45);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--r-sm);
}
.contact-form-error[hidden] { display: none; }