/* ==========================================================================
   Community First Uganda
   Layout, scale and components reproduced from the non-profit template,
   recoloured to the Community First Uganda orange.

   Reference values taken from the template:
     container 1200px, gutter 40px, section padding 100px
     h1 80/88 -1px w600 | h2 48/57.6 -1px w600 | h3 40/52 -0.5px w600
     h5 24/32.4 w600 | body 16/25.6 w400 | eyebrow 14/16.8 2px uppercase
     buttons 18/18 w700, padding 18px 24px, radius 8px
     panels radius 20px, 1px hairline, columns divided by 1px rules
     media radius 16px, shadow 0 24px 64px -24px
   ========================================================================== */

:root {
  /* Brand, carrying the template's colour roles onto CFU orange */
  --accent: #ff6b35;          /* template #66b40b */
  --accent-dark: #e55a2b;     /* template #5b9f0c */
  --ink: #33190f;             /* template #2c3a04, headings */
  --body: #5f4638;            /* template #46512a, copy */
  --tint: #fdf7f3;            /* template #f7f9f1, section wash */
  --subtle: #e8d3c6;          /* template #d2d8c0, rules and numerals */
  --white: #ffffff;

  --container: 1200px;
  --gutter: 40px;
  --section-y: 100px;

  --radius-panel: 20px;
  --radius-box: 16px;
  --radius-btn: 8px;
  --radius-input: 6px;

  --media-shadow: 0 24px 64px -24px rgba(51, 25, 15, 0.4);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 600; }
p { margin: 0; }

h1, .h1 { font-size: 80px; line-height: 88px; letter-spacing: -1px; }
h2, .h2 { font-size: 48px; line-height: 57.6px; letter-spacing: -1px; }
h3, .h3 { font-size: 40px; line-height: 52px; letter-spacing: -0.5px; }
h4, .h4 { font-size: 30px; line-height: 40px; letter-spacing: -0.5px; }
h5, .h5 { font-size: 24px; line-height: 32.4px; }
h6, .h6 { font-size: 22px; line-height: 35.2px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.section { padding-inline: var(--gutter); }
.section__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--section-y);
}
.section--tint { background: var(--tint); }
.section--flush-top > .section__inner { padding-top: 0; }
.section--flush-bottom > .section__inner { padding-bottom: 0; }

.stack > * + * { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 14px;
  line-height: 16.8px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 16px;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }

.lead { font-size: 16px; line-height: 25.6px; }
.muted { color: var(--body); }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  font-family: inherit;
}

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--outline { background: var(--tint); border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--white { background: #fff; border-color: #fff; color: var(--ink); }
.btn--white:hover { background: var(--tint); border-color: var(--tint); }

/* Bold text link with a trailing arrow, as used on the template's cards */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ink);
  transition: color .2s ease, gap .2s ease;
}
.arrow-link:hover { color: var(--accent); gap: 16px; }
.arrow-link svg { width: 18px; height: 12px; flex: none; }

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.media { border-radius: var(--radius-box); box-shadow: var(--media-shadow); object-fit: cover; width: 100%; }
.media--flat { border-radius: var(--radius-box); object-fit: cover; width: 100%; }

/* Staggered 2x2 collage: the right column drops by 100px, matching the template */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.collage__col { display: grid; gap: 20px; }
.collage__col:last-child { padding-top: 100px; }
.collage img:nth-child(odd)  { height: 339px; }
.collage img:nth-child(even) { height: 248px; }
.collage__col:last-child img:nth-child(odd)  { height: 248px; }
.collage__col:last-child img:nth-child(even) { height: 339px; }

/* --------------------------------------------------------------------------
   Panel: the template's signature surface.
   One white card, hairline border, columns separated by vertical rules.
   -------------------------------------------------------------------------- */

.panel {
  background: #fff;
  border: 1px solid var(--subtle);
  border-radius: var(--radius-panel);
  display: flex;
  flex-wrap: wrap;
}
.panel__col { flex: 1 1 0; min-width: 0; padding: 32px 40px 36px; border-right: 1px solid var(--subtle); }
.panel__col:last-child { border-right: 0; }

/* Pulls the panel up over the section above it, as on the template's home page */
.panel--overlap { margin-top: -80px; position: relative; z-index: 2; }

.panel__numeral {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: var(--subtle);
  margin: 0 0 4px;
}
.panel__title { font-size: 24px; line-height: 32.4px; letter-spacing: normal; margin: 0 0 12px; }

/* Contact details. The template sets these at 20/32 rather than card-title size,
   which keeps a long email address from swamping its column. `anywhere` lets it
   wrap cleanly instead of overflowing on narrow screens. */
.panel__value {
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
  margin: 0 0 6px;
  /* break-word rather than anywhere: the address carries a <wbr> after the "@",
     so when it has to wrap it splits there instead of mid-word. */
  overflow-wrap: break-word;
}
.panel__value a:hover { color: var(--accent); }

/* Evens up columns whose content differs in length */
.panel--contact .panel__col { display: flex; flex-direction: column; }
.panel__text { margin: 0 0 20px; }

/* Cards whose image overhangs the top edge of the panel, as the template does */
.panel--media { position: relative; }
.panel--media .panel__col { padding-top: 0; }
.panel--media .panel__media { margin-top: -32px; margin-bottom: 24px; height: 220px; }

/* Quotation cards */
.panel__quote { margin: 0; font-size: 16px; line-height: 25.6px; color: var(--body); }
.panel__cite {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--subtle);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.panel__cite span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Stats row: centred figures divided by vertical rules
   -------------------------------------------------------------------------- */

.stats { display: flex; flex-wrap: wrap; }
.stats__item { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 16px; border-right: 1px solid var(--subtle); }
.stats__item:last-child { border-right: 0; }
.stats__value { font-size: 48px; line-height: 57.6px; font-weight: 700; color: var(--ink); }
.stats__label { font-size: 16px; line-height: 25.6px; color: var(--ink); }

/* --------------------------------------------------------------------------
   Accent call-to-action box
   -------------------------------------------------------------------------- */

.cta-box {
  background: var(--accent);
  border-radius: var(--radius-box);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cta-box h3, .cta-box p { color: #fff; }
.cta-box p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Two column split used for About / Get Involved
   -------------------------------------------------------------------------- */

.split { display: grid; grid-template-columns: 529fr 651fr; gap: 0; align-items: center; }
.split > :first-child { padding-right: 120px; }
.split--media-left { grid-template-columns: 651fr 529fr; }
.split--media-left > :first-child { padding-right: 0; }
.split--media-left > :last-child { padding-left: 120px; }
.split--even { grid-template-columns: 1fr 1fr; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-inline: var(--gutter);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__logo img { height: 56px; width: auto; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 16px; font-weight: 700; color: #fff; transition: color .2s ease; }
.nav a:hover, .nav a.is-current { color: var(--accent); }

.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 16px; font-weight: 700; color: #fff;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav__toggle svg { width: 10px; height: 6px; transition: transform .2s ease; }
.nav__group[aria-expanded="true"] .nav__toggle svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 190px; background: #fff; border: 1px solid var(--subtle);
  border-radius: 12px; padding: 8px; display: none;
}
.nav__group[aria-expanded="true"] .nav__menu { display: block; }
.nav__menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink); font-weight: 500; }
.nav__menu a:hover { background: var(--tint); color: var(--accent); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }
.nav-toggle span + span { margin-top: 5px; }

/* Solid variant, used once the page is scrolled */
.site-header.is-solid { position: fixed; background: #fff; box-shadow: 0 1px 0 var(--subtle); }
.site-header.is-solid .nav a,
.site-header.is-solid .nav__toggle { color: var(--ink); }
.site-header.is-solid .nav a:hover, .site-header.is-solid .nav a.is-current { color: var(--accent); }
.site-header.is-solid .nav-toggle span { background: var(--ink); }
.site-header.is-solid .site-header__inner { height: 80px; }
/* The Donate button is white over the hero, which would make it invisible once
   the header turns solid, so it becomes the brand orange there. */
.site-header.is-solid .btn--white {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.site-header.is-solid .btn--white:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.site-header.is-solid .site-header__logo img { height: 46px; }

/* --------------------------------------------------------------------------
   Hero and page banner
   -------------------------------------------------------------------------- */

.hero { position: relative; padding-inline: var(--gutter); background-size: cover; background-position: 50% 50%; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .62) 0%,
    rgba(0, 0, 0, .40) 32%,
    rgba(0, 0, 0, .40) 68%,
    rgba(0, 0, 0, .62) 100%);
}
.hero__inner { max-width: var(--container); margin-inline: auto; padding: 200px 0 300px; text-align: center; }

/* Cross-fading background slides. The composition above them never moves,
   so the hero keeps the template's exact layout. */
.hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

.hero__dots { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; justify-content: center; gap: 10px; }
.hero__dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}
.hero__dots button:hover { background: rgba(255, 255, 255, .75); }
.hero__dots button.is-active { width: 30px; background: var(--accent); }
.hero h1 { color: #fff; max-width: 1080px; margin-inline: auto; }
/* The template's hero paragraph is noticeably larger than body copy:
   24/36 across 740px, with a 20px gap under the heading and 40px above the button. */
.hero p { color: #fff; font-size: 24px; line-height: 36px; font-weight: 700; max-width: 740px; margin: 20px auto 0; }
.hero .btn { margin-top: 40px; }

/* Pin the banner's proportions to the hero images' own 2.45:1. Left to grow
   with its content it reached 2.74:1 on a wide screen, and the extra width was
   paid for by cropping the top of the photograph. The floor and cap keep it
   sensible on very small and very large screens. */
.banner {
  position: relative;
  padding-inline: var(--gutter);
  background-size: cover;
  background-position: 50% 50%;
  isolation: isolate;
  /* Height is derived from the viewport width rather than aspect-ratio, which
     fed the min-height back into the width and made the banner wider than the
     screen on mobile. 40.8vw is 1/2.45 of the width, so the box matches the
     hero images' own proportions, with a floor and a cap. */
  min-height: clamp(560px, 40.8vw, 860px);
}
/* A flat dark wash over the whole photograph made these look murky. Darken
   only the side the text sits on and leave the rest of the image clear. */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .62) 30%,
    rgba(0, 0, 0, .28) 62%,
    rgba(0, 0, 0, .10) 100%);
}
.banner__inner { max-width: var(--container); margin-inline: auto; padding: 190px 0 150px; min-height: 600px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.banner h1 { color: #fff; }
.banner p { color: #fff; font-weight: 700; max-width: 600px; margin-top: 16px; }

/* Two-tone headings, echoing the logo where "Co" is black and "Fi" is orange. */
.hero h1 .tone-dark,
.banner h1 .tone-dark { color: #fff; }

/* The two-tone heading stays on the home hero, where the composition carries it.
   On the inner banners the orange half sat at almost exactly the luminance of
   the photographs behind it (1.3:1 on About), so those headings are all white. */
.hero h1 .tone-accent { color: var(--accent); }
.banner h1 .tone-accent { color: #fff; }

/* The brand orange sits at mid luminance, so against photography it needs a
   dark halo to separate from the image rather than a lighter substitute shade.
   The fill stays exactly the colour used on buttons. */
.hero h1,
.banner h1 {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .9),
    0 2px 14px rgba(0, 0, 0, .8),
    0 0 36px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: #000; margin-bottom: 6px; }
.field .hint { font-size: 14px; line-height: 20px; color: #6b7280; margin-top: 4px; }

.input, .select, .textarea {
  width: 100%;
  /* The template's fields are exactly 44px tall including the border. */
  height: 44px;
  padding: 10px 12px;
  /* Longhand: `font:` shorthand cannot take `inherit` as the family and the
     whole declaration would be discarded, dropping inputs to the browser
     default of 13px (which also makes iOS zoom on focus). */
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #1f2937;
  background: rgba(0, 0, 0, .02);
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: var(--radius-input);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea { height: auto; min-height: 140px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, .15);
}
.input::placeholder, .textarea::placeholder { color: #9ca3af; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .field--full { grid-column: 1 / -1; }

.form-note { margin-top: 14px; font-size: 14px; line-height: 20px; color: #6b7280; }

.alert { padding: 14px 16px; border-radius: var(--radius-input); margin-bottom: 20px; font-weight: 500; }
.alert--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Honeypot: present for bots, never shown to people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Labelled detail rows, used beside the volunteer form */
.info-card {
  background: var(--tint);
  border: 1px solid var(--subtle);
  border-radius: var(--radius-box);
  padding: 28px 32px;
  margin-top: 40px;
}
.info-card > p { margin-top: 6px; }
.info-list { margin-top: 20px; }
.info-list li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--subtle); }
.info-list .label {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 4px;
}
.info-list .value {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.info-list a.value:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: #fff; border-top: 1px solid var(--subtle); }
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding: 45px var(--gutter); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.site-footer h2 { font-size: 22px; line-height: 35.2px; margin-bottom: 12px; }
.site-footer a:hover { color: var(--accent); }
.site-footer__logo img { height: 52px; width: auto; margin-bottom: 16px; }
.site-footer li + li { margin-top: 8px; }

.site-footer__bar { border-top: 1px solid var(--subtle); }
.site-footer__bar-inner { max-width: var(--container); margin-inline: auto; padding: 20px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.social { display: flex; gap: 14px; }
.social a { display: inline-flex; }
.social svg { width: 18px; height: 18px; fill: var(--ink); transition: fill .2s ease; }
.social a:hover svg { fill: var(--accent); }

/* Partner / logo strip */
.logos { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.rule { border: 0; border-top: 1px solid var(--subtle); margin: 0; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; }
.filter button {
  font-family: inherit; font-size: 16px; line-height: 18px; font-weight: 700;
  padding: 14px 22px; border-radius: var(--radius-btn);
  background: var(--tint); border: 1px solid var(--subtle); color: var(--ink); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filter button:hover { border-color: var(--ink); }
.filter button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.tile { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.tile img { height: 300px; border-radius: var(--radius-box); transition: transform .4s ease; }
.tile:hover img { transform: scale(1.03); }
.tile figcaption { margin-top: 16px; }
.tile h3 { font-size: 24px; line-height: 32.4px; }
.tile p { margin-top: 6px; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92); display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 76vh; width: auto; border-radius: var(--radius-box); }
.lightbox figcaption { text-align: center; margin-top: 20px; color: #fff; }
.lightbox__close, .lightbox__nav { position: absolute; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 999px; width: 48px; height: 48px; cursor: pointer; font-size: 20px; line-height: 1; }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Between the full 1200px container and the point where the panel stacks, the
   columns are narrow enough that a long email address would wrap. */
@media (max-width: 1280px) {
  .panel__value { font-size: 18px; line-height: 30px; }
}

@media (max-width: 1024px) {
  h1, .h1 { font-size: 56px; line-height: 64px; }
  h2, .h2 { font-size: 38px; line-height: 46px; }
  h3, .h3 { font-size: 32px; line-height: 42px; }

  .hero p { font-size: 20px; line-height: 32px; }
  .split, .split--media-left, .split--even { grid-template-columns: 1fr; gap: 48px; }
  .split > :first-child, .split--media-left > :last-child { padding: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* flex-basis 0 keeps the columns on one row however narrow it gets,
     so the direction has to change for them to stack. */
  .panel { flex-direction: column; }
  .panel__col { border-right: 0; border-bottom: 1px solid var(--subtle); }
  .panel__col:last-child { border-bottom: 0; }
  .stats__item { flex-basis: 50%; border-right: 0; padding-block: 20px; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 64px; }

  h1, .h1 { font-size: 40px; line-height: 48px; }
  h2, .h2 { font-size: 30px; line-height: 38px; }
  h3, .h3 { font-size: 26px; line-height: 34px; }
  h5, .h5 { font-size: 21px; line-height: 29px; }

  .hero__inner { padding: 160px 0 180px; }
  .hero p { font-size: 18px; line-height: 28px; }
  .hero__dots { bottom: 36px; }
  .banner__inner { padding: 140px 0 80px; }


  .collage__col:last-child { padding-top: 0; }
  .collage img, .collage__col:last-child img { height: 200px; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-box { padding: 32px; }
  .panel--overlap { margin-top: -40px; }
  .panel--media .panel__media { height: 190px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .stats__item { flex-basis: 100%; border-bottom: 1px solid var(--subtle); }
  .stats__item:last-child { border-bottom: 0; }
}

/* The full navigation needs roughly 900px. Below that the items crowd and
   "Get Involved" wraps onto two lines, so tablets get the menu button too. */
@media (max-width: 900px) {
  .nav,
  .site-header__inner .btn { display: none; }
  .nav-toggle { display: block; }
}

.nav__toggle { white-space: nowrap; }

/* Mobile navigation panel */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 60; background: #fff; padding: 24px var(--gutter); overflow-y: auto; }
.mobile-nav.is-open { display: block; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mobile-nav__top img { height: 48px; width: auto; }
.mobile-nav a:not(.btn) { display: block; padding: 14px 0; font-size: 20px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--subtle); }
.mobile-nav a:not(.btn):hover { color: var(--accent); }
.mobile-nav .btn { margin-top: 24px; width: 100%; }
.mobile-nav__close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Section that carries the overlapping panel directly under the hero */
.section--panel > .section__inner { padding-top: 0; padding-bottom: 20px; }

/* Impact heading: H2 left, supporting paragraph right, as on the template */
.head-split { display: grid; grid-template-columns: 550fr 650fr; gap: 60px; align-items: start; margin-bottom: 60px; }
@media (max-width: 1024px) { .head-split { grid-template-columns: 1fr; gap: 24px; } }

.center-head { max-width: 760px; margin: 0 auto 60px; text-align: center; }