/* ===========================================================
   Pleiades Housing Alliance — Global Stylesheet
   Palette inspired by the Pleiades star cluster:
   midnight sky, starlight, warm amber & terracotta hope.
   =========================================================== */

:root {
  --midnight: #0d1b3e;
  --midnight-2: #14264f;
  --deep: #1d3461;
  --slate: #2c3e5d;
  --amber: #f5a623;
  --amber-dark: #d98a0b;
  --terracotta: #d96c4a;
  --cream: #fbf7f0;
  --cream-2: #f3ece0;
  --ink: #1a1f2e;
  --muted: #5a6478;
  --line: #e3dccf;
  --white: #ffffff;
  --star: #ffd97a;

  --maxw: 1180px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(13, 27, 62, 0.06);
  --shadow: 0 14px 40px rgba(13, 27, 62, 0.12);
  --shadow-lg: 0 30px 70px rgba(13, 27, 62, 0.20);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", "Georgia", serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.12; font-weight: 600; color: var(--midnight); }

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

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dark);
  margin-bottom: 14px;
}
.eyebrow.light { color: var(--star); }

.section { padding: 96px 0; }
.section.tight { padding: 64px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  font-family: var(--font);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--amber); color: var(--midnight); box-shadow: 0 10px 24px rgba(245, 166, 35, 0.35); }
.btn-primary:hover { background: var(--amber-dark); box-shadow: 0 14px 30px rgba(245, 166, 35, 0.45); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--white); }
.btn-dark { background: var(--midnight); color: var(--white); }
.btn-dark:hover { background: var(--deep); }
.btn-lg { padding: 17px 36px; font-size: 1.05rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 240, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--midnight); }
/* Keep the header wordmark on one line so the nav flex row can't squeeze it into a wrap */
.site-header .brand { flex: none; white-space: nowrap; }
.brand .mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  flex: none;
}
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.site-footer .brand .mark { background: rgba(255,255,255,0.06); border-radius: 50%; padding: 3px; }
.brand small { display: block; font-family: var(--font); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--slate); transition: color 0.15s; position: relative; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--midnight); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--amber); border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta .btn { padding: 11px 18px; font-size: 0.9rem; white-space: nowrap; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--midnight); margin: 5px 0; transition: 0.25s; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(ellipse at 70% 20%, var(--deep), var(--midnight) 60%);
  color: var(--white);
  overflow: hidden;
  padding: 110px 0 120px;
}
.hero::before,
.page-hero::before {
  /* starfield — shared by the home hero and every interior page header */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,1), transparent),
    radial-gradient(3px 3px at 65% 15%, rgba(255,228,150,1), transparent),
    radial-gradient(2.5px 2.5px at 80% 45%, rgba(255,255,255,1), transparent),
    radial-gradient(2.5px 2.5px at 40% 70%, rgba(255,255,255,0.98), transparent),
    radial-gradient(3px 3px at 90% 80%, rgba(255,228,150,1), transparent),
    radial-gradient(2px 2px at 12% 80%, rgba(255,255,255,0.98), transparent),
    radial-gradient(2.5px 2.5px at 55% 55%, rgba(255,255,255,0.95), transparent),
    /* a few more, a touch smaller so the field reads as scattered starlight, not a pattern */
    radial-gradient(2px 2px at 30% 20%, rgba(255,255,255,0.92), transparent),
    radial-gradient(2px 2px at 48% 40%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 73% 62%, rgba(255,228,150,0.98), transparent),
    radial-gradient(2.5px 2.5px at 85% 24%, rgba(255,255,255,0.98), transparent),
    radial-gradient(2px 2px at 24% 55%, rgba(255,255,255,0.88), transparent),
    radial-gradient(2px 2px at 60% 84%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 6% 45%, rgba(255,255,255,0.92), transparent),
    radial-gradient(2.5px 2.5px at 95% 58%, rgba(255,228,150,0.98), transparent);
  opacity: 1;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.85; } to { opacity: 1; } }

/* Sparkling stars — individual twinkling points injected by main.js */
.starlayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.starlayer .spark {
  position: absolute; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.85);
  animation: sparkle 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.2); }
  50%      { opacity: 1; transform: scale(1.35); }
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.hero h1 { color: var(--white); font-size: clamp(2.4rem, 5vw, 3.7rem); letter-spacing: -0.01em; }
.hero h1 .hl { color: var(--star); }
.hero p.lead { font-size: 1.18rem; color: rgba(255,255,255,0.82); margin: 22px 0 32px; max-width: 36ch; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 34px;
  backdrop-filter: blur(6px);
}
.hero-card h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 18px; }
.hero-stat { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
.hero-stat:last-child { border-bottom: none; }
.hero-stat b { font-family: var(--serif); font-size: 1.9rem; color: var(--star); line-height: 1; }
.hero-stat span { font-size: 0.92rem; color: rgba(255,255,255,0.78); }

/* trust bar */
.trustbar { background: var(--midnight-2); color: rgba(255,255,255,0.75); padding: 18px 0; }
.trustbar .container { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; justify-content: center; font-size: 0.9rem; }
.trustbar .item { display: flex; align-items: center; gap: 8px; }
.trustbar svg { width: 18px; height: 18px; color: var(--star); flex: none; }

/* ---------- Section headings ---------- */
.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: 16px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .ico {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(145deg, var(--cream-2), #fff);
  border: 1px solid var(--line);
}
.card .ico svg { width: 26px; height: 26px; color: var(--terracotta); }
.card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.98rem; }

/* numbered steps */
.step .num {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--midnight); color: var(--star);
  display: grid; place-items: center; margin-bottom: 18px;
}

/* ---------- Impact stats band ---------- */
.band {
  background: linear-gradient(135deg, var(--midnight), var(--deep));
  color: var(--white);
  position: relative; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.22), transparent 70%);
}
.band::before {
  /* subtle starfield, matched to the hero */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 28%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 17% 62%, rgba(255,255,255,0.92), transparent),
    radial-gradient(3px 3px at 27% 38%, rgba(255,228,150,1), transparent),
    radial-gradient(2px 2px at 34% 78%, rgba(255,255,255,0.88), transparent),
    radial-gradient(2.5px 2.5px at 45% 22%, rgba(255,255,255,0.98), transparent),
    radial-gradient(2px 2px at 53% 66%, rgba(255,228,150,0.92), transparent),
    radial-gradient(2.5px 2.5px at 62% 42%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 71% 74%, rgba(255,255,255,0.88), transparent),
    radial-gradient(2.5px 2.5px at 80% 30%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 88% 58%, rgba(255,228,150,0.95), transparent),
    radial-gradient(2px 2px at 94% 80%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 97% 38%, rgba(255,255,255,0.88), transparent);
  opacity: 1;
  animation: twinkle 7s ease-in-out infinite alternate;
}
.band .container { position: relative; z-index: 2; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; position: relative; z-index: 2; }
.stat b { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--star); display: block; line-height: 1; }
.stat span { color: rgba(255,255,255,0.8); font-size: 0.96rem; margin-top: 10px; display: block; }
.stat .src { color: rgba(255,255,255,0.5); font-size: 0.72rem; margin-top: 10px; letter-spacing: 0.02em; display: block; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .visual {
  border-radius: var(--radius-lg);
  min-height: 420px;
  background:
    linear-gradient(160deg, rgba(13,27,62,0.10), rgba(217,108,74,0.18)),
    repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 22px, #fff 22px, #fff 44px);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.split .visual .badge {
  background: var(--white); border-radius: var(--radius); padding: 26px 30px;
  box-shadow: var(--shadow); text-align: center; max-width: 78%;
}
.split .visual .badge b { font-family: var(--serif); font-size: 2.4rem; color: var(--terracotta); display: block; }
ul.checks { list-style: none; margin-top: 24px; }
ul.checks li { display: flex; gap: 12px; padding: 10px 0; color: var(--slate); align-items: flex-start; }
ul.checks svg { width: 22px; height: 22px; color: var(--amber-dark); flex: none; margin-top: 2px; }

/* ---------- Values list ---------- */
.value { display: flex; gap: 18px; align-items: flex-start; }
.value .vico { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--cream-2); border: 1px solid var(--line); }
.value .vico svg { width: 24px; height: 24px; color: var(--midnight); }
.value h3 { font-size: 1.15rem; margin-bottom: 6px; }
.value p { color: var(--muted); font-size: 0.96rem; }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: 30px; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 36px 64px; }
.tl-item .dot {
  position: absolute; left: 11px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--amber); border: 4px solid var(--cream); box-shadow: 0 0 0 2px var(--amber);
}
.tl-item .phase { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-dark); }
.tl-item h3 { font-size: 1.3rem; margin: 4px 0 8px; }
.tl-item p { color: var(--muted); }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(135deg, var(--terracotta), var(--amber));
  color: var(--midnight);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta h2 { color: var(--midnight); font-size: clamp(2rem, 4vw, 2.8rem); }
.cta p { font-size: 1.15rem; max-width: 52ch; margin: 16px auto 30px; color: rgba(26,31,46,0.85); }
.cta .eyebrow { color: var(--midnight); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: radial-gradient(ellipse at 75% 10%, var(--deep), var(--midnight) 65%);
  color: var(--white); padding: 80px 0 70px; position: relative; overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); font-size: clamp(2.2rem, 4.5vw, 3.2rem); max-width: 18ch; }
.page-hero p { color: rgba(255,255,255,0.82); font-size: 1.15rem; margin-top: 18px; max-width: 56ch; }
.breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--star); }

/* ---------- Prose (privacy etc) ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.prose h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--slate); margin-bottom: 12px; }
.prose ul { margin: 0 0 16px 22px; }
.prose a { color: var(--terracotta); text-decoration: underline; }
.prose .updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 30px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: start; }
.contact-info .info-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-info .info-item:last-child { border-bottom: none; }
.contact-info .iico { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--midnight); }
.contact-info .iico svg { width: 22px; height: 22px; color: var(--star); }
.contact-info h4 { font-family: var(--font); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-info .info-item a, .contact-info .info-item p { color: var(--ink); font-size: 1.02rem; }
.contact-info .info-item a:hover { color: var(--terracotta); }

form .field { margin-bottom: 18px; }
form label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--slate); margin-bottom: 7px; }
form input, form textarea, form select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--font); font-size: 1rem; background: var(--white); color: var(--ink);
  transition: border 0.15s, box-shadow 0.15s;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,0.18);
}
form textarea { min-height: 140px; resize: vertical; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-sm); }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }
.form-success { display: none; background: #eaf7ee; border: 1px solid #b8e2c4; color: #1d6b38; padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 0.95rem; }

/* ---------- Donate tiers ---------- */
.tier { text-align: center; position: relative; }
.tier.featured { border-color: var(--amber); box-shadow: var(--shadow); }
.tier.featured::before {
  content: "Most impact"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: var(--midnight); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
}
.tier .amount { font-family: var(--serif); font-size: 2.6rem; color: var(--midnight); }
.tier .amount span { font-size: 1rem; color: var(--muted); }
.tier p { color: var(--muted); margin: 10px 0 22px; min-height: 48px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 22px 0; font-family: var(--serif); font-size: 1.15rem; color: var(--midnight);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-item button .chev { transition: transform 0.2s; flex: none; color: var(--amber-dark); }
.faq-item.open button .chev { transform: rotate(180deg); }
.faq-item .answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item .answer p { padding: 0 0 22px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--midnight); color: rgba(255,255,255,0.72); padding: 70px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: var(--white); font-family: var(--font); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer a { color: rgba(255,255,255,0.72); font-size: 0.95rem; display: block; padding: 5px 0; transition: color 0.15s; }
.site-footer a:hover { color: var(--star); }
.footer-brand p { font-size: 0.96rem; margin: 16px 0; max-width: 32ch; }
.footer-brand .brand { color: var(--white); }
.footer-brand .brand small { color: rgba(255,255,255,0.55); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: 50px; padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem;
}
.footer-bottom a { display: inline; }
.charity-no { font-size: 0.82rem; color: rgba(255,255,255,0.5); }

/* ---------- Imagery ---------- */
.hero-photo { position: relative; }
.hero-photo img {
  width: 100%; height: 100%; min-height: 380px; max-height: 520px;
  object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 4px solid rgba(255,255,255,0.10);
}
.hero-photo .float-badge {
  position: absolute; left: -18px; bottom: 26px;
  background: var(--white); color: var(--midnight);
  border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; max-width: 240px;
}
.hero-photo .float-badge b { font-family: var(--serif); font-size: 1.7rem; color: var(--terracotta); line-height: 1; }
.hero-photo .float-badge span { font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
.hero-photo .float-badge .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 0 rgba(245,166,35,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(245,166,35,0.55);} 70%{box-shadow:0 0 0 12px rgba(245,166,35,0);} 100%{box-shadow:0 0 0 0 rgba(245,166,35,0);} }

/* Photo used inside split .visual — replaces the patterned placeholder */
.visual.photo { padding: 0; background: none; border: none; }
.visual.photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.visual.photo { position: relative; }
.visual.photo .badge { position: absolute; left: 22px; bottom: 22px; margin: 0; max-width: 70%; }

/* generic rounded image */
.img-round { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; object-fit: cover; }

/* ---------- Video ---------- */
.video-section { background: var(--midnight); color: #fff; position: relative; overflow: hidden; }
.video-section::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 75% 30%, rgba(255,217,122,0.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.5), transparent);
  opacity: 0.7;
}
.video-section .container { position: relative; z-index: 2; }
.video-wrap {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.14);
  background: #000;
}
.video-wrap video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.video-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; }
.video-section h2 { color: #fff; }
.video-section p { color: rgba(255,255,255,0.82); }

@media (max-width: 980px) {
  .video-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Stat spotlight + bar chart (Housing Crisis) ---------- */
.spotlight-num {
  font-family: var(--serif); font-weight: 600; line-height: 0.9; letter-spacing: -0.02em;
  font-size: clamp(4.5rem, 13vw, 8.5rem); color: var(--terracotta); margin: 6px 0 4px;
}
.spotlight-cap { font-size: 1.12rem; color: var(--slate); max-width: 30ch; }
.spotlight-cap b { color: var(--midnight); font-weight: 700; }
.spotlight-src { font-size: 0.8rem; color: var(--muted); margin-top: 14px; max-width: 34ch; }

.barchart { display: grid; gap: 24px; }
.bar-row .bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.bar-row .bar-name { font-size: 0.96rem; color: var(--slate); font-weight: 500; }
.bar-row .bar-val { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--midnight); line-height: 1; }
.bar-track { height: 18px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px; transform-origin: left;
  background: linear-gradient(90deg, var(--terracotta), var(--amber));
  animation: growbar 1.1s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.bar-fill.muted { background: linear-gradient(90deg, var(--slate), var(--deep)); opacity: 0.5; }
@keyframes growbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .bar-fill, .hero::before, .page-hero::before, .band::before { animation: none; }
  .starlayer .spark { animation: none; opacity: 0.7; transform: none; }
}

.footnote { font-size: 0.82rem; color: var(--muted); margin-top: 34px; max-width: 72ch; }

/* ---------- Smooth cross-page view transitions (progressive enhancement) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split .visual { min-height: 300px; }
}
/* Collapse the nav into the hamburger before the links and CTA buttons run out of room.
   Once the menu button is showing, keep only the primary donate button in the bar — the
   secondary "Partner with us" (→ Contact) is reachable from the menu, and two buttons plus
   the toggle plus the wordmark won't fit until ~760px. */
@media (max-width: 1279px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta .btn:not(.btn-primary) { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--cream); padding: 16px 24px; gap: 6px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); z-index: 60;
  }
  .nav-links.open a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links.open a.active::after { display: none; }
}
@media (max-width: 680px) {
  .section { padding: 64px 0; }
  .brand small { display: none; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .cta { padding: 44px 26px; }
  .hero { padding: 70px 0 80px; }
}
/* Narrow phones: the wordmark can't fit beside the logo, donate button, and menu toggle
   (that config needs ~610px), so below here show the logo alone and tighten the row so it
   clears down to ~320px. */
@media (max-width: 640px) {
  .site-header .brand > span:not(.mark) { display: none; }
  .site-header .nav { gap: 10px; }
  .site-header .nav-cta .btn { padding: 10px 15px; }
}