/* ================================================
   VIBRANT HEALTH ADVOCATES – JUNO
   Warm & Human Community Design System
   ================================================ */

:root {
  --cream:           #FAF6F0;
  --cream-card:      #FFFDF8;
  --cream-border:    #E4D3C0;
  --cream-dark:      #F0E6D8;
  --terracotta:      #C1603A;
  --terracotta-lt:   #E8A87C;
  --terracotta-pale: #F7EDE3;
  --purple:          #7B2D8B;
  --purple-lt:       #F0D9F5;
  --purple-mid:      #C49ED0;
  --brown-dark:      #2C1810;
  --brown-mid:       #6B4534;
  --brown-lt:        #A0795E;
  --warm-white:      #FFFDF8;
  --shadow-soft:     0 4px 20px rgba(44,24,16,.09);
  --shadow-card:     0 8px 36px rgba(44,24,16,.13);
  --shadow-lift:     0 16px 48px rgba(44,24,16,.18);
  --r-sm:  12px;
  --r-md:  24px;
  --r-lg:  32px;
  --r-xl:  48px;
}

/* ── Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--cream);
  color: var(--brown-dark);
  line-height: 1.75;
  font-size: 1rem;
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a { color: var(--purple); }
a:hover { text-decoration: underline; }

/* ── Typography ───────────────────────────────── */
h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.13; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.2; }
h3 { font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.3; }
h4 { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 800; }

/* ── Layout ───────────────────────────────────── */
.container        { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width:  820px; margin: 0 auto; padding: 0 1.5rem; }
.container-wide   { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Bands ────────────────────────────────────── */
.band         { padding: 5rem 0; }
.band-tight   { padding: 3rem 0; }
.band-cream   { background: var(--cream); }
.band-warm    { background: var(--terracotta-pale); }
.band-purple  { background: var(--purple-lt); }
.band-white   { background: var(--cream-card); }
.band-dark    { background: var(--brown-dark); color: var(--cream); }

/* ── Section Heading ──────────────────────────── */
.section-heading { text-align: center; margin-bottom: 3rem; }
.section-heading h2 { color: var(--brown-dark); }
.section-heading p  { color: var(--brown-mid); max-width: 640px; margin: .75rem auto 0; font-size: 1.05rem; }

/* ── Eyebrow Tag ──────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--terracotta);
  background: var(--terracotta-pale);
  border-radius: 999px;
  padding: .28rem .9rem;
  margin-bottom: .65rem;
}
.eyebrow-purple {
  color: var(--purple);
  background: var(--purple-lt);
}

/* ================================================
   NAVIGATION
   ================================================ */
.site-nav {
  background: var(--cream-card);
  border-bottom: 2px dotted var(--cream-border);
  position: sticky; top: 0; z-index: 200;
}
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  max-width: 1200px; margin: 0 auto;
  padding: .7rem 1.5rem; gap: 1rem;
}
.brand {
  display: flex; align-items: center;
  gap: .55rem; text-decoration: none; flex-shrink: 0;
}
.nav-logo     { height: 42px; width: auto; }
.nav-wordmark { height: 26px; width: auto; }
.nav-links    { display: flex; gap: .15rem; flex-wrap: wrap; }
.nav-links a  {
  color: var(--brown-mid); font-weight: 700; font-size: .875rem;
  padding: .38rem .75rem; border-radius: 999px;
  transition: background .18s, color .18s; text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--purple-lt); color: var(--purple);
}
.nav-toggle {
  display: none; background: none;
  border: 2px solid var(--cream-border); border-radius: 8px;
  padding: .4rem .55rem; cursor: pointer;
  flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--brown-dark); border-radius: 2px; }

/* ================================================
   FOOTER
   ================================================ */
.site-footer { background: var(--brown-dark); color: var(--cream); padding: 3.5rem 0 1.5rem; }
.footer-inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 2.5rem; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
}
.footer-brand-link { display: flex; align-items: center; gap: .5rem; text-decoration: none; margin-bottom: .8rem; }
.footer-logo     { height: 38px; width: auto; filter: brightness(0) invert(1); }
.footer-wordmark { height: 24px; width: auto; filter: invert(1) brightness(3); }
.footer-brand p  { font-size: .875rem; color: var(--brown-lt); line-height: 1.65; }
.footer-nav h4   { color: var(--terracotta-lt); margin-bottom: .75rem; }
.footer-nav a    { color: var(--brown-lt); font-size: .875rem; text-decoration: none; display: block; margin-bottom: .35rem; }
.footer-nav a:hover { color: var(--cream); }
.footer-contact h4 { color: var(--terracotta-lt); margin-bottom: .75rem; }
.footer-contact p  { color: var(--brown-lt); font-size: .85rem; margin-bottom: .5rem; }
.footer-contact a  {
  color: var(--purple-mid); font-size: .82rem; display: block;
  margin-bottom: .4rem; word-break: break-all; text-decoration: none;
}
.footer-contact a:hover { color: var(--purple-lt); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 2.5rem; padding-top: 1.25rem;
  text-align: center; font-size: .78rem; color: var(--brown-lt);
  max-width: 1200px; margin-left: auto; margin-right: auto;
  padding-left: 1.5rem; padding-right: 1.5rem;
}

/* ================================================
   HERO
   ================================================ */
.hero-wrap { position: relative; }

.hero-photo-strip {
  width: 100%; height: 72vh;
  min-height: 580px; max-height: 880px;
  overflow: hidden; position: relative;
}
.hero-photo-strip img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(44,24,16,.08) 0%,
    rgba(44,24,16,.35) 50%,
    rgba(44,24,16,.72) 100%
  );
}
.hero-text-on-photo {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 1.5rem 130px;
  max-width: 1200px; margin: 0 auto;
  /* only goes down to 130px from bottom — the pull-up card covers the bottom 110px */
}
.hero-text-on-photo .hero-tag {
  display: inline-block;
  background: var(--terracotta); color: #fff;
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .11em;
  border-radius: 999px; padding: .3rem .9rem;
  margin-bottom: .75rem;
}
.hero-text-on-photo h1 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
  max-width: 660px;
}

/* Pull-up card */
.hero-pull-up {
  position: relative; z-index: 10;
  margin-top: -110px;
  padding: 0 1.5rem 0;
}
.hero-card {
  background: var(--cream-card);
  border-radius: var(--r-lg);
  padding: 2.5rem 3rem;
  box-shadow: var(--shadow-lift);
  border: 3px dotted var(--cream-border);
  max-width: 860px;
  display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
}
.hero-card-text { flex: 1; min-width: 260px; }
.hero-card-text p {
  font-size: 1.05rem; line-height: 1.8;
  color: var(--brown-mid); margin-bottom: 1.25rem;
}
.hero-card-cta { flex-shrink: 0; }

/* ================================================
   SQUIGGLE DIVIDER
   ================================================ */
.squiggle { width: 100%; overflow: hidden; line-height: 0; padding: 1rem 0; }
.squiggle svg { width: 100%; display: block; }

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--purple); color: #fff;
  font-weight: 800; font-size: .9rem;
  padding: .65rem 1.4rem; border-radius: 999px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn:hover { background: var(--brown-dark); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(123,45,139,.25); }
.btn-terracotta { background: var(--terracotta); }
.btn-terracotta:hover { background: #9e4a27; }
.btn-outline { background: transparent; border: 2.5px solid var(--purple); color: var(--purple); }
.btn-outline:hover { background: var(--purple); color: #fff; }
.btn-white { background: #fff; color: var(--purple); }
.btn-white:hover { background: var(--cream); color: var(--purple); }
.btn-sm { font-size: .8rem; padding: .45rem 1.05rem; }
.btn-lg { font-size: 1rem; padding: .85rem 2rem; }

/* ================================================
   HIGHLIGHTS / SERVICE CARDS
   ================================================ */
.highlights-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; align-items: start;
}
.highlight-card {
  background: var(--cream-card);
  border-radius: var(--r-md); padding: 2rem;
  border: 2.5px dotted var(--cream-border);
  box-shadow: var(--shadow-soft);
}
.highlight-card:nth-child(2) { margin-top: 2rem; }
.highlight-card:nth-child(3) { margin-top: 1rem; }
.highlight-icon { font-size: 2.2rem; margin-bottom: .75rem; display: block; }
.highlight-card h3 { color: var(--brown-dark); margin-bottom: .6rem; }
.highlight-card p  { color: var(--brown-mid); font-size: .94rem; }

/* ================================================
   IMPACT STAMPS
   ================================================ */
.impact-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem; text-align: center;
}
.stamp {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.stamp-ring {
  width: 148px; height: 148px;
  border: 3px dashed var(--purple);
  border-radius: 50%;
  background: var(--purple-lt);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .5rem;
}
.stamp-ring .stat-num {
  font-size: 2.1rem; font-weight: 900;
  color: var(--purple); line-height: 1;
}
.stamp-ring .stat-lbl {
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--purple); text-align: center;
  line-height: 1.35; margin-top: .2rem; padding: 0 .4rem;
}

/* ================================================
   POLAROID CARDS
   ================================================ */
.polaroid-wrap { display: flex; justify-content: center; align-items: center; }
.polaroid {
  background: #fff;
  padding: 10px 10px 40px 10px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  display: inline-block; position: relative;
}
.polaroid img {
  border-radius: calc(var(--r-sm) - 4px);
  display: block;
}
.polaroid-caption {
  text-align: center; font-size: .82rem; font-weight: 700;
  color: var(--brown-mid); position: absolute;
  bottom: 10px; left: 0; right: 0;
  padding: 0 .5rem;
}
.polaroid-tl { transform: rotate(-2.8deg); }
.polaroid-tr { transform: rotate(2.3deg); }
.polaroid-ts { transform: rotate(-1.2deg); }

/* ================================================
   PHOTO SPLIT
   ================================================ */
.photo-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3.5rem; align-items: center;
}
.photo-split img {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  width: 100%; height: 420px;
  object-fit: cover;
}
.photo-split-text h2 { margin-bottom: 1.25rem; }
.photo-split-text p  { color: var(--brown-mid); }

/* ================================================
   PROGRAMME CARDS
   ================================================ */
.programme-list { display: flex; flex-direction: column; gap: 1.5rem; }
.programme-card {
  background: var(--cream-card);
  border-radius: var(--r-md);
  padding: 2rem 2.5rem;
  border-left: 5px solid var(--terracotta);
  box-shadow: var(--shadow-soft);
  display: grid; grid-template-columns: 2.8rem 1fr;
  gap: 1.5rem; align-items: start;
}
.prog-icon { font-size: 2rem; line-height: 1; padding-top: .1rem; }
.programme-card h3 { color: var(--brown-dark); margin-bottom: .4rem; }
.prog-blurb { color: var(--terracotta); font-weight: 700; font-size: .93rem; margin-bottom: .6rem; }
.programme-card p  { color: var(--brown-mid); font-size: .93rem; }

/* ================================================
   WAYS / GET INVOLVED CARDS
   ================================================ */
.ways-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem;
}
.way-card {
  background: var(--cream-card);
  border-radius: var(--r-md); padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--cream-border);
}
.way-card:nth-child(2) {
  background: var(--purple-lt);
  border-color: var(--purple-mid);
}
.way-icon { font-size: 2.8rem; margin-bottom: .85rem; display: block; }
.way-card h3 { color: var(--brown-dark); margin-bottom: .65rem; }
.way-card p  { color: var(--brown-mid); font-size: .93rem; }

/* ================================================
   BLOG CARDS
   ================================================ */
.blog-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem; align-items: start;
}
.blog-card {
  background: var(--cream-card); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.blog-card:nth-child(2) { margin-top: 1.75rem; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.blog-card-photo { width: 100%; height: 210px; object-fit: cover; }
.blog-card-body  { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-tag   {
  display: inline-block; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--purple); background: var(--purple-lt);
  border-radius: 999px; padding: .22rem .7rem; margin-bottom: .6rem;
}
.blog-card-body h3 { color: var(--brown-dark); margin-bottom: .5rem; font-size: 1.05rem; line-height: 1.35; }
.blog-card-dek  { color: var(--brown-mid); font-size: .88rem; margin-bottom: 1rem; flex: 1; }
.blog-card-body .btn { align-self: flex-start; }

/* ================================================
   FULL-BLEED BAND
   ================================================ */
.full-bleed {
  position: relative; overflow: hidden;
  height: 480px;
}
.full-bleed img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.full-bleed-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(44,24,16,.72) 0%,
    rgba(44,24,16,.42) 55%,
    rgba(44,24,16,.12) 100%
  );
}
.full-bleed-content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 1.5rem;
}
.full-bleed-content .inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.full-bleed-content h2 { color: #fff; max-width: 560px; margin-bottom: 1rem; }
.full-bleed-content p  { color: rgba(255,255,255,.9); max-width: 500px; margin-bottom: 1.5rem; font-size: 1.05rem; }

/* ================================================
   CTA BANNER
   ================================================ */
.cta-banner {
  background: var(--purple);
  border-radius: var(--r-xl);
  padding: 3.5rem 3rem;
  text-align: center;
  max-width: 900px; margin: 0 auto;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--purple-lt); opacity: .12;
}
.cta-banner::after {
  content: ''; position: absolute;
  bottom: -30px; left: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--terracotta); opacity: .14;
}
.cta-banner h2 { color: #fff; margin-bottom: .75rem; position: relative; z-index: 1; }
.cta-banner p  { color: var(--purple-lt); margin-bottom: 1.5rem; font-size: 1.05rem; position: relative; z-index: 1; }
.cta-banner .btn { position: relative; z-index: 1; }

/* ================================================
   PAGE HEADER (inner pages)
   ================================================ */
.page-header {
  background: var(--terracotta-pale);
  border-bottom: 3px dotted var(--cream-border);
  padding: 3.5rem 0 2.75rem;
  text-align: center;
}
.page-header h1 { color: var(--brown-dark); }
.page-header p  { color: var(--brown-mid); max-width: 580px; margin: .8rem auto 0; font-size: 1.05rem; line-height: 1.7; }

/* ================================================
   TRUSTEES
   ================================================ */
.trustees-grid {
  display: flex; gap: 1.5rem;
  flex-wrap: wrap; justify-content: center;
}
.trustee-card {
  background: var(--cream-card);
  border-radius: var(--r-md); padding: 1.75rem 2.25rem;
  text-align: center;
  border: 2.5px dotted var(--purple-mid);
  min-width: 200px; flex: 1; max-width: 270px;
  box-shadow: var(--shadow-soft);
}
.trustee-initial {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--purple-lt); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; color: var(--purple);
  margin: 0 auto .85rem;
}
.trustee-name { font-weight: 800; font-size: 1.05rem; color: var(--brown-dark); }
.trustee-role { color: var(--purple); font-size: .875rem; font-weight: 700; margin-top: .2rem; }

/* ================================================
   MISSION BOX
   ================================================ */
.mission-box {
  background: var(--purple);
  border-radius: var(--r-lg);
  padding: 3rem 3.5rem;
  position: relative; overflow: hidden;
}
.mission-box::before {
  content: '\201C';
  position: absolute; top: -20px; left: 24px;
  font-size: 10rem; font-weight: 900;
  color: rgba(255,255,255,.10); line-height: 1;
  font-family: Georgia, serif;
}
.mission-box p {
  color: #fff; font-size: 1.1rem; line-height: 1.8;
  position: relative; z-index: 1;
  margin-bottom: 0;
}

/* ================================================
   STORY / NARRATIVE SECTION
   ================================================ */
.story-band { position: relative; }
.story-lede {
  font-size: 1.1rem; font-weight: 700;
  color: var(--terracotta); margin-bottom: 1.25rem;
  line-height: 1.6;
}

/* ================================================
   CONTACT FORM
   ================================================ */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start;
}
.contact-info h3 { color: var(--brown-dark); margin-bottom: 1rem; }
.contact-info p  { color: var(--brown-mid); }
.contact-detail {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.25rem;
}
.contact-detail-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--purple-lt); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.contact-detail-text { font-size: .9rem; color: var(--brown-mid); }
.contact-detail-text a { color: var(--purple); word-break: break-all; }
.contact-form-wrap {
  background: var(--cream-card);
  border-radius: var(--r-lg); padding: 2.5rem;
  box-shadow: var(--shadow-card);
  border: 2.5px dotted var(--cream-border);
}
.contact-form-wrap h3 { margin-bottom: 1.5rem; color: var(--brown-dark); }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-weight: 700; font-size: .875rem;
  color: var(--brown-dark); margin-bottom: .4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: .7rem 1rem;
  border: 2px solid var(--cream-border);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem;
  background: var(--warm-white); color: var(--brown-dark);
  transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--purple);
}
.form-group textarea { min-height: 130px; resize: vertical; }

/* ================================================
   ARTICLE PAGES
   ================================================ */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.article-hero-img {
  width: 100%; height: 440px; object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 2.5rem;
}
.article-meta  {
  display: flex; align-items: center;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.article-meta .tag {
  background: var(--purple-lt); color: var(--purple);
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  border-radius: 999px; padding: .22rem .75rem;
}
.article-meta .date { color: var(--brown-lt); font-size: .875rem; }
.article-title { color: var(--brown-dark); margin-bottom: .75rem; }
.article-dek {
  color: var(--brown-mid); font-size: 1.1rem; line-height: 1.7;
  font-weight: 600; border-left: 4px solid var(--terracotta);
  padding-left: 1rem; margin-bottom: 2rem;
}
.article-body { font-size: 1rem; line-height: 1.85; color: var(--brown-mid); }
.article-body p { margin-bottom: 1.4em; }
.article-body strong { color: var(--brown-dark); font-weight: 800; }
.article-body blockquote {
  border-left: 4px solid var(--purple-mid);
  padding-left: 1.25rem; margin: 1.5rem 0;
  color: var(--brown-mid); font-style: italic;
}
.article-back { margin: 3rem 0 1rem; }

/* ================================================
   DECORATIVE ELEMENTS
   ================================================ */
.dotted-border { border: 2.5px dotted var(--cream-border); border-radius: var(--r-md); }
.offset-image-wrap { position: relative; }

/* Scrapbook cluster on homepage */
.scrapbook-cluster {
  position: relative; height: 400px;
}
.scrapbook-cluster .polaroid:nth-child(1) {
  position: absolute; top: 0; left: 5%; z-index: 3;
  width: 55%; transform: rotate(-2.5deg);
}
.scrapbook-cluster .polaroid:nth-child(2) {
  position: absolute; bottom: 0; right: 5%; z-index: 2;
  width: 50%; transform: rotate(2.2deg);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 960px) {
  .highlights-grid { grid-template-columns: 1fr; }
  .highlight-card:nth-child(2),
  .highlight-card:nth-child(3) { margin-top: 0; }
  .ways-grid  { grid-template-columns: 1fr; }
  .blog-grid  { grid-template-columns: 1fr 1fr; }
  .blog-card:nth-child(2) { margin-top: 0; }
  .photo-split { grid-template-columns: 1fr; }
  .photo-split img { height: 300px; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .scrapbook-cluster { height: 280px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream-card); flex-direction: column; padding: 1rem 1.5rem;
    border-bottom: 2px dotted var(--cream-border); gap: .25rem; z-index: 200; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .site-nav { position: relative; }

  .hero-photo-strip { height: 80vw; min-height: 340px; max-height: 520px; }
  .hero-text-on-photo { padding-bottom: 100px; }
  .hero-pull-up { margin-top: -80px; }
  .hero-card { padding: 1.5rem; flex-direction: column; gap: 1rem; }

  section, .band { padding: 3rem 0; }
  .band-tight { padding: 2rem 0; }
  .impact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .blog-grid  { grid-template-columns: 1fr; }
  .blog-card:nth-child(2) { margin-top: 0; }
  .footer-inner { grid-template-columns: 1fr; }
  .cta-banner { padding: 2rem 1.5rem; border-radius: var(--r-lg); }
  .programme-card { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 1.5rem; }
  .full-bleed { height: 320px; }
  .mission-box { padding: 2rem 1.5rem; }
  .ways-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  .article-hero-img { height: 260px; }
  .scrapbook-cluster { height: 220px; }
}