/* ============================================================
   LES PETITS CUISINIERS — ANTENNE DE MARSEILLE
   Main stylesheet — Warm & Human Community archetype
   Brand: #D4522A terracotta + #FFF3E0 cream
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ── */
:root {
  --cream:         #FFF3E0;
  --cream-mid:     #FAE8D4;
  --cream-dark:    #EDD5BC;
  --tc:            #D4522A;
  --tc-lt:         #E8775A;
  --tc-dk:         #B03D1E;
  --brown:         #3D2B1F;
  --brown-lt:      #6B4C3B;
  --brown-xlt:     #9A7468;
  --white:         #FFFFFF;
  --sh-sm:         0 2px 12px rgba(61,43,31,0.09);
  --sh:            0 4px 24px rgba(61,43,31,0.13);
  --sh-lg:         0 8px 40px rgba(61,43,31,0.18);
  --sh-xl:         0 16px 60px rgba(61,43,31,0.22);
  --r-xs:   10px;
  --r-sm:   16px;
  --r:      24px;
  --r-lg:   32px;
}

/* ── 2. RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--brown);
  line-height: 1.78;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: var(--tc); }
a:hover { text-decoration: underline; }
ul  { list-style: none; }
button { font-family: inherit; }

/* ── 3. TYPOGRAPHY ── */
h1 { font-size: clamp(2.1rem, 5.5vw, 3.7rem);  font-weight: 900; line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 4vw, 2.45rem);   font-weight: 800; line-height: 1.2;  }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 700; line-height: 1.3;  }
h4 { font-size: 1.08rem; font-weight: 700; }
p  { max-width: 68ch; }

/* ── 4. LAYOUT ── */
.container { width: min(1200px, 92vw); margin-inline: auto; }
.section    { padding-block: 5.5rem; }
.section--sm { padding-block: 3.5rem; }
.section--white  { background: var(--white); }
.section--cream  { background: var(--cream); }
.section--mid    { background: var(--cream-mid); }
.section--brown  { background: var(--brown); color: white; }
.section--tc     { background: var(--tc); color: white; }

/* ── 5. NAVIGATION ── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--cream);
  border-bottom: 2px solid var(--cream-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem clamp(1rem, 4vw, 3rem);
  gap: 1rem;
}
.brand-lockup {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex-shrink: 0;
}
.brand-lockup:hover { text-decoration: none; }
.brand-icon     { height: 50px; width: auto; }
.brand-wordmark { height: 33px; width: auto; }
.nav-links { display: flex; gap: clamp(0.4rem, 1.8vw, 1.5rem); align-items: center; }
.nav-links a {
  font-weight: 700; font-size: 0.93rem; color: var(--brown);
  text-decoration: none; padding: 0.25rem 0;
  border-bottom: 2.5px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--tc); border-bottom-color: var(--tc); text-decoration: none; }
.nav-links .nav-cta {
  background: var(--tc); color: white !important;
  border-radius: 999px; padding: 0.5rem 1.2rem;
  border-bottom: none !important; margin-left: 0.2rem;
  transition: background .18s, transform .15s;
}
.nav-links .nav-cta:hover { background: var(--tc-dk); transform: translateY(-1px); }
.nav-toggle {
  display: none; background: none;
  border: 2px solid var(--tc); border-radius: 8px;
  padding: 0.38rem 0.65rem; cursor: pointer;
  font-size: 1.25rem; color: var(--tc); line-height: 1;
}

/* ── 6. HOMEPAGE HERO ── */
.hero-home {
  position: relative; min-height: 86vh;
  display: flex; flex-direction: column;
  justify-content: flex-start; overflow: visible;
}
.hero-home__bg {
  position: absolute; inset: 0;
  background: url('img/hero.jpg') center / cover no-repeat;
}
.hero-home__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(165deg,
    rgba(61,43,31,.62) 0%, rgba(61,43,31,.32) 55%, rgba(212,82,42,.1) 100%);
}
.hero-home__content {
  position: relative; z-index: 2;
  padding: clamp(3.5rem,9vw,6.5rem) clamp(1.5rem,5vw,4rem) clamp(6rem,12vw,9rem);
  max-width: 790px;
}
.hero-home__eyebrow {
  display: inline-block; background: var(--tc); color: white;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem 1rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.hero-home__title {
  color: white; text-shadow: 0 2px 20px rgba(0,0,0,.28); margin-bottom: 1.4rem;
}
.hero-home__sub {
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem,1.8vw,1.15rem); line-height: 1.75; max-width: 560px;
}

/* ── 7. PULLED-UP IMPACT BAR ── */
.hero-overlap-wrap {
  position: relative; z-index: 10;
  padding-inline: clamp(1rem, 5vw, 4rem);
  margin-top: -90px;
}
.impact-bar {
  background: white; border-radius: var(--r-lg);
  padding: 2rem 2.5rem; box-shadow: var(--sh-xl);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.impact-bar__item {
  flex: 1; min-width: 130px; text-align: center; padding: .5rem 1rem;
}
.impact-bar__stat {
  display: block; font-size: clamp(2.1rem,4vw,2.9rem);
  font-weight: 900; color: var(--tc); line-height: 1; margin-bottom: .35rem;
}
.impact-bar__label {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--brown-lt); line-height: 1.3;
}
.impact-bar__sep {
  width: 2px; height: 56px; background: var(--cream-dark);
  border-radius: 2px; flex-shrink: 0;
}

/* ── 8. SQUIGGLE / WAVE TRANSITIONS ── */
.wave-wrap { line-height: 0; display: block; overflow: hidden; }

/* ── 9. SECTION LABELS ── */
.label-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.section-label {
  font-size: .76rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tc);
}
.label-line {
  height: 2px; background: var(--tc); border-radius: 2px;
  width: 36px; opacity: .55;
}

/* ── 10. SPLIT SECTION ── */
.split-section {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,6vw,5rem); align-items: center;
}
.split-section--rev { direction: rtl; }
.split-section--rev > * { direction: ltr; }
.split-text h2  { color: var(--brown); margin-bottom: 1.2rem; }
.split-text p   { color: var(--brown-lt); line-height: 1.85; margin-bottom: 1.4rem; }

/* ── 11. POLAROID CARDS ── */
.polaroid {
  background: white; border-radius: 10px; box-shadow: var(--sh-lg);
  padding: 10px 10px 44px; display: inline-block; position: relative;
}
.polaroid img {
  border-radius: 6px; width: 100%;
  height: 280px; object-fit: cover; display: block;
}
.polaroid__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 8px 10px 10px;
  font-size: .88rem; font-weight: 700; font-style: italic; color: var(--brown-lt);
}
.pol--tl  { transform: rotate(-4deg); }
.pol--tr  { transform: rotate(3.5deg); }
.pol--tl2 { transform: rotate(-2deg); }
.pol--tr2 { transform: rotate(5.5deg); }
.pol--t0  { transform: rotate(-1deg); }

/* Photo cluster (stacked polaroids + stamp) */
.photo-cluster {
  position: relative; padding: 1.5rem 2.5rem 5rem 1.5rem;
}
.photo-cluster .polaroid-secondary {
  position: absolute; bottom: 0; right: 0; z-index: 2; width: 52%;
}

/* ── 12. STAMP BADGE ── */
.stamp {
  width: 116px; height: 116px; border-radius: 50%;
  border: 3px dashed var(--tc); background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px;
  position: absolute; z-index: 6;
}
.stamp--tilt  { transform: rotate(14deg); }
.stamp--tilt2 { transform: rotate(-9deg); }
.stamp__big   { font-size: 1.65rem; font-weight: 900; color: var(--tc); line-height: 1; display: block; }
.stamp__text  {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tc); line-height: 1.35;
}

/* ── 13. HIGHLIGHT CARDS ── */
.highlights-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1.75rem; align-items: start; margin-top: 3rem;
}
.highlight-card {
  background: white; border-radius: var(--r); padding: 2rem 1.75rem;
  box-shadow: var(--sh); border: 2.5px dashed var(--cream-dark);
  transition: transform .25s, box-shadow .25s;
}
.highlight-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--sh-lg); }
.highlight-card:nth-child(2) { margin-top: 2.5rem; }
.highlight-card__icon  { font-size: 2.4rem; margin-bottom: 1rem; display: block; }
.highlight-card__title { font-size: 1.18rem; font-weight: 800; color: var(--brown); margin-bottom: .7rem; }
.highlight-card__blurb { font-size: .94rem; color: var(--brown-lt); line-height: 1.78; max-width: 100%; }

/* ── 14. PHOTO STRIP ── */
.photo-strip-wrap { overflow: hidden; background: var(--cream-mid); padding: 3rem 0; }
.photo-strip {
  display: flex; gap: 1.25rem;
  padding-inline: clamp(1rem,4vw,3rem); align-items: flex-end;
}
.photo-strip__item {
  flex-shrink: 0; background: white; padding: 8px 8px 38px;
  border-radius: 10px; box-shadow: var(--sh-lg);
}
.photo-strip__item img { border-radius: 6px; object-fit: cover; height: 200px; }
.photo-strip__item:nth-child(1) { width: 28%; transform: rotate(-2.5deg); }
.photo-strip__item:nth-child(2) { width: 24%; transform: rotate(2deg); margin-bottom: 1.5rem; }
.photo-strip__item:nth-child(3) { width: 26%; transform: rotate(-1.5deg); }
.photo-strip__item:nth-child(4) { width: 22%; transform: rotate(3deg); margin-bottom: .75rem; }

/* ── 15. PAGE HERO (inner pages) ── */
.page-hero {
  position: relative; min-height: 360px;
  display: flex; align-items: flex-end;
}
.page-hero__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(61,43,31,.74) 0%, rgba(61,43,31,.18) 100%);
}
.page-hero__content {
  position: relative; z-index: 2;
  padding: 3rem clamp(1.5rem,5vw,4rem); color: white; width: 100%;
}
.page-hero__title { color: white; margin-bottom: .5rem; }
.page-hero__dek   {
  color: rgba(255,255,255,.84); font-size: 1.08rem;
  line-height: 1.7; max-width: 580px;
}

/* ── 16. PROGRAMME CARDS ── */
.programmes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; align-items: start; margin-top: 3rem;
}
.programme-card {
  background: white; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh);
  transition: transform .3s, box-shadow .3s;
}
.programme-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.programme-card:nth-child(even) { margin-top: 2.5rem; }
.programme-card__head { background: var(--tc); padding: 1.5rem 1.75rem; }
.programme-card__icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; background: rgba(255,255,255,.22);
  border-radius: 50%; font-size: 1.6rem; margin-bottom: .85rem;
}
.programme-card__title { font-size: 1.18rem; font-weight: 800; color: white; margin-bottom: .3rem; }
.programme-card__blurb { font-size: .88rem; color: rgba(255,255,255,.84); line-height: 1.6; max-width: 100%; }
.programme-card__body  { padding: 1.75rem; }
.programme-card__detail { font-size: .94rem; color: var(--brown-lt); line-height: 1.85; max-width: 100%; }

/* ── 17. WHAT WE DO ── */
.what-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
.what-text p { color: var(--brown-lt); line-height: 1.9; margin-bottom: 1.5rem; font-size: 1.04rem; }

/* ── 18. WAYS TO HELP ── */
.ways-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem; align-items: start; margin-top: 3rem;
}
.way-card {
  background: white; border-radius: var(--r); padding: 2.5rem 2rem;
  box-shadow: var(--sh); text-align: center; border-top: 5px solid var(--tc);
  transition: transform .25s, box-shadow .25s;
}
.way-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.way-card:nth-child(2) { margin-top: 2rem; }
.way-card__icon  { font-size: 2.8rem; display: block; margin-bottom: 1.2rem; }
.way-card__title { font-size: 1.18rem; font-weight: 800; color: var(--brown); margin-bottom: .9rem; }
.way-card__blurb { font-size: .94rem; color: var(--brown-lt); line-height: 1.78; max-width: 100%; }

/* ── 19. BLOG CARDS ── */
.blog-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem; align-items: start; margin-top: 3rem;
}
.blog-card {
  background: white; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh);
  transition: transform .25s, box-shadow .25s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.blog-card:nth-child(2) { margin-top: 2rem; }
.blog-card__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.blog-card__body { padding: 1.75rem 1.6rem; }
.blog-card__title { font-size: 1.08rem; font-weight: 800; color: var(--brown); margin-bottom: .7rem; line-height: 1.4; }
.blog-card__dek   { font-size: .91rem; color: var(--brown-lt); line-height: 1.75; max-width: 100%; margin-bottom: 1.2rem; }
.blog-card__read {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .88rem; font-weight: 700; color: var(--tc);
  text-decoration: none; border-bottom: 2px solid var(--tc); padding-bottom: 1px;
}
.blog-card__read:hover { color: var(--tc-dk); text-decoration: none; }

/* ── 20. ARTICLE ── */
.article-cover {
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border-radius: var(--r); box-shadow: var(--sh-lg); margin-bottom: 3.5rem;
}
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; }
.article-cat    {
  display: inline-block; font-size: .76rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tc); margin-bottom: .7rem;
}
.article-title  { font-size: clamp(1.65rem,3.5vw,2.35rem); font-weight: 900; color: var(--brown); margin-bottom: 1rem; line-height: 1.2; }
.article-dek    {
  font-size: 1.08rem; color: var(--brown-lt);
  border-left: 4px solid var(--tc); padding-left: 1.1rem;
  line-height: 1.72; max-width: 58ch; margin-bottom: 2.5rem;
}
.article-body p { color: var(--brown-lt); line-height: 1.9; font-size: 1.04rem; margin-bottom: 1.5rem; max-width: 68ch; }
.article-sidebar { position: sticky; top: 90px; }
.sidebar-card {
  background: white; border-radius: var(--r-sm); padding: 1.75rem;
  box-shadow: var(--sh); margin-bottom: 1.75rem; border: 2.5px dashed var(--cream-dark);
}
.sidebar-card h4 { color: var(--brown); margin-bottom: .7rem; }
.sidebar-card p  { color: var(--brown-lt); font-size: .9rem; line-height: 1.7; max-width: 100%; }
.sidebar-card .btn { width: 100%; text-align: center; margin-top: 1rem; display: block; }

/* ── 21. CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.contact-info h2 { margin-bottom: 1.2rem; }
.contact-info p  { color: var(--brown-lt); line-height: 1.85; margin-bottom: 1rem; max-width: 100%; }
.contact-detail  { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .85rem; }
.contact-detail__icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.contact-detail__text { font-size: .92rem; color: var(--brown-lt); }
.contact-detail__text a { color: var(--tc); font-weight: 600; word-break: break-all; }
.form-card { background: white; border-radius: var(--r-lg); padding: 2.75rem; box-shadow: var(--sh-xl); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-weight: 700; font-size: .87rem; color: var(--brown); margin-bottom: .4rem; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: .8rem 1rem;
  border: 2px solid var(--cream-dark); border-radius: var(--r-xs);
  font-family: inherit; font-size: 1rem; color: var(--brown);
  background: var(--cream); outline: none; transition: border-color .2s;
  appearance: none; -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--tc); }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── 22. BUTTONS ── */
.btn {
  display: inline-block; padding: .85rem 2rem; border-radius: 999px;
  font-weight: 800; font-size: 1rem; font-family: inherit; cursor: pointer;
  transition: background .2s, transform .15s; text-decoration: none; border: none; line-height: 1;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn--primary  { background: var(--tc); color: white; }
.btn--primary:hover  { background: var(--tc-dk); }
.btn--outline  { background: transparent; color: var(--tc); border: 2.5px solid var(--tc); }
.btn--outline:hover  { background: var(--tc); color: white; }
.btn--white    { background: white; color: var(--tc); }
.btn--white:hover    { background: var(--cream); }
.btn--dark     { background: var(--brown); color: white; }
.btn--dark:hover     { background: #2a1e15; }
.btn--lg { padding: 1rem 2.5rem; font-size: 1.1rem; }

/* ── 23. CTA SECTION ── */
.cta-section {
  background: var(--tc); padding: 6rem clamp(1.5rem,5vw,4rem);
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: -70px; left: -70px;
  width: 260px; height: 260px; border: 52px solid rgba(255,255,255,.055); border-radius: 50%;
}
.cta-section::after {
  content: ''; position: absolute; bottom: -90px; right: -50px;
  width: 320px; height: 320px; border: 60px solid rgba(255,255,255,.038); border-radius: 50%;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2 { color: white; margin-bottom: 1.2rem; }
.cta-section p  { color: rgba(255,255,255,.86); margin: 0 auto 2.25rem; max-width: 54ch; }

/* ── 24. TRUSTEES ── */
.trustees-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }
.trustee-card {
  background: white; border-radius: var(--r-sm); padding: 1.75rem 1.5rem;
  box-shadow: var(--sh); text-align: center; border: 2.5px dashed var(--cream-dark);
}
.trustee-card__avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--cream-mid); display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem;
  margin: 0 auto 1rem; border: 3px solid var(--cream-dark);
}
.trustee-card__name { font-weight: 800; color: var(--brown); margin-bottom: .25rem; }
.trustee-card__role { font-size: .88rem; color: var(--tc); font-weight: 600; }

/* ── 25. BREADCRUMB ── */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--brown-xlt);
  margin-bottom: 2rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--tc); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { opacity: .45; }

/* ── 26. MISSION BOX ── */
.mission-box {
  background: white; border-radius: var(--r-lg); padding: 3rem;
  box-shadow: var(--sh); border: 3px dotted var(--cream-dark);
  position: relative;
}
.mission-box p { color: var(--brown-lt); line-height: 1.9; font-size: 1.04rem; max-width: 100%; }

/* ── 27. FOOTER ── */
.site-footer {
  background: var(--brown); color: rgba(255,255,255,.68);
  padding: 4.5rem clamp(1.5rem,5vw,4rem) 2rem;
}
.footer-inner {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 2rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 1.2rem; }
.footer-lockup { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.footer-lockup:hover { text-decoration: none; }
.footer-logo     { height: 44px; width: auto; filter: brightness(0) invert(1); }
.footer-wordmark { height: 28px; width: auto; filter: brightness(0) invert(1); }
.footer-tagline  { font-size: .87rem; line-height: 1.65; color: rgba(255,255,255,.56); max-width: 270px; }
.footer-emails   { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.footer-emails a { color: rgba(255,255,255,.6); font-size: .86rem; word-break: break-all; text-decoration: none; transition: color .18s; }
.footer-emails a:hover { color: var(--tc-lt); text-decoration: none; }
.footer-col h4   {
  color: white; font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem;
}
.footer-col ul li + li { margin-top: .5rem; }
.footer-col ul a {
  color: rgba(255,255,255,.58); font-size: .9rem;
  text-decoration: none; transition: color .18s;
}
.footer-col ul a:hover { color: white; text-decoration: none; }
.footer-col .footer-note { font-size: .87rem; color: rgba(255,255,255,.54); line-height: 1.65; max-width: 100%; }
.footer-bottom {
  max-width: 1200px; margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-size: .8rem; color: rgba(255,255,255,.36);
}

/* ── 28. RESPONSIVE ── */
@media (max-width: 1020px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 860px) {
  .split-section,
  .what-grid,
  .contact-grid    { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-section--rev { direction: ltr; }
  .highlights-grid,
  .ways-grid       { grid-template-columns: 1fr; }
  .highlight-card:nth-child(2),
  .way-card:nth-child(2) { margin-top: 0; }
  .programmes-grid { grid-template-columns: 1fr; }
  .programme-card:nth-child(even) { margin-top: 0; }
  .trustees-grid   { grid-template-columns: 1fr 1fr; }
  .footer-inner    { grid-template-columns: 1fr 1fr; }
  .impact-bar__sep { display: none; }
  .article-sidebar { grid-template-columns: 1fr; }
  .form-row        { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav-links  { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 2px solid var(--cream-dark);
    padding: 1rem 1.5rem 1.5rem; gap: .85rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 199;
  }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card:nth-child(2) { margin-top: 0; }
  .trustees-grid { grid-template-columns: 1fr; }
  .footer-inner  { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-overlap-wrap { padding-inline: 1rem; margin-top: -50px; }
  .impact-bar { flex-direction: column; padding: 1.5rem; }
  .impact-bar__item { text-align: left; display: flex; align-items: center; gap: 1rem; }
  .photo-strip-wrap { display: none; }
  .photo-cluster .polaroid-secondary { display: none; }
  .hero-home { min-height: 72vh; }
}