/* Beyond the Net — Houston
   Static rebuild of beyondthenethtx.wixsite.com/beyond-the-net */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Mulish:wght@400;500;600;700&display=swap');

:root {
  --brand:  #c2274b;   /* crimson blocks, footer, accents */
  --brand-dark: #96173a;
  --ink:    #14151c;   /* harder than the old #282936 */
  --paper:  #f2f0ed;   /* alternating band */
  --white:  #ffffff;
  --muted:  #5a5c66;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Full-strength hairlines, not the old 14%-alpha grey */
  --rule: var(--ink);
  --rule-soft: rgba(20, 21, 28, .22);

  --design: 1425px;
  --gutter: 40px;

  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 32px;
  --space-6: 44px;
  --space-7: 64px;
  --space-8: 88px;

  /* Display scale — uppercase, tight, set in the grotesque */
  --display-xl: clamp(56px, 11vw, 168px);
  --display-l:  clamp(44px, 8vw, 112px);
  --display-m:  clamp(32px, 4.5vw, 64px);
  --display-s:  clamp(20px, 2vw, 28px);

  --offset: 5px;   /* hard block offset used instead of shadows */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --out:  cubic-bezier(.16, 1, .3, 1);   /* long, settled ease for reveals */
  --fast: .16s var(--ease);
  --slow: .4s var(--ease);
}

/* One display treatment, applied by class rather than repeated per section */
.u-display,
.home-top__copy h1, .page-intro h1,
.values h2, .team h2, .how h2, .past-events h2, .post__recent-title,
.supporters h2, .notfound h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.03em;
}

/* Tracked meta: eyebrows, nav, labels, indices */
.u-meta,
.statement__label, .impact h2, .brand__city,
.nav__list > li > a, .nav__more-btn, .supporters__more,
.footer__nav a, .post-card__meta, .post__meta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Section index numerals (01 / 02 …) — an index, not new copy */
.idx {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--brand);
}

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

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

::selection { background: var(--brand); color: var(--white); }

/* A single visible focus treatment everywhere — there was none before, so
   keyboard users had only the browser default (invisible on crimson). */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.site-footer :focus-visible,
.impact :focus-visible,
.home-top__panel :focus-visible,
.services__panel :focus-visible,
.split__panel :focus-visible,
.feature__panel :focus-visible,
.card--fill :focus-visible {
  outline-color: var(--white);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

/* height:auto is required — without it the HTML height attribute supplies the used
   height and any aspect-ratio below is ignored. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; font-size: 12px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* The Wix canvas is 1425px wide with 60px gutters, so content sits in 1305px. */
.canvas {
  width: 100%;
  max-width: var(--design);
  margin-inline: auto;
}

.container {
  width: 100%;
  max-width: calc(var(--design) - var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: 0;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.site-header.is-scrolled { border-bottom-width: 2px; }

.site-header__inner {
  max-width: var(--design);
  margin-inline: auto;
  min-height: 96px;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height var(--fast), padding var(--fast);
}
.site-header.is-scrolled .site-header__inner {
  min-height: 72px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand__name, .nav { transition: font-size var(--fast); }
.site-header.is-scrolled .brand__name { font-size: 24px; }

/* Logo sits on one line now — the stacked three-line lockup was the single
   biggest reason the header needed 183px of height. */
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand__city {
  line-height: 1;
  color: var(--brand);
}

.nav { display: flex; align-items: center; gap: 0; }
.nav__list {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.nav__list > li > a {
  display: block;
  padding: 0 14px;
  line-height: 44px;
  color: var(--ink);
  position: relative;
  white-space: nowrap;   /* never break "Programs & Services" mid-phrase */
  transition: color var(--fast);
}
.nav__list > li > a::before {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 10px;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--fast);
}
.nav__list > li > a:hover::before,
.nav__list > li > a[aria-current="page"]::before { transform: scaleX(1); }
.nav__list > li > a[aria-current="page"] { color: var(--brand); }

/* Square bordered control, matching the hard-edged buttons */
.nav__search {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-left: var(--space-3);
  background: none;
  border: 2px solid var(--ink);
  padding: 0;
  color: var(--ink); cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.nav__search:hover { background: var(--ink); color: var(--white); }
.nav__search svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------ More dropdown */

.nav__more { position: relative; }
.nav__more-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px;
  height: 44px;
  background: none; border: 0;
  color: var(--ink); cursor: pointer;
}
.nav__more-btn:hover { color: var(--brand); }
.nav__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s;
}
.nav__more-btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__submenu {
  position: absolute; right: 0; top: 100%;
  min-width: 200px;
  list-style: none; margin: 0; padding: 0;
  background: var(--white);
  border: 2px solid var(--ink);
  opacity: 0; visibility: hidden;
  transform: translate(4px, -4px);
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
  z-index: 60;
}
.nav__more.is-open .nav__submenu { opacity: 1; visibility: visible; transform: none; }
.nav__submenu li + li { border-top: 1px solid var(--rule-soft); }
.nav__submenu a {
  display: block; padding: 0 18px; line-height: 46px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--fast), color var(--fast);
}
.nav__submenu a:hover { background: var(--ink); color: var(--white); }

/* ------------------------------------------------------------ search panel */

body.search-open { overflow: hidden; }

/* The panel is fully visible by default; the entrance animation is opt-in via
   .anim, which JS adds after unhiding. Two earlier attempts got this backwards
   — starting at opacity:0 meant a missed class, or an animation that never ran
   because the element was display:none, left the panel open but blank. The safe
   state must be "visible", with motion as the enhancement. */
.search-panel {
  position: fixed; inset: 0; z-index: 90;
  background: var(--white);
  overflow-y: auto;
  padding: 40px var(--gutter) 80px;
}
.search-panel[hidden] { display: none; }

.search-panel.anim { animation: panel-in .32s var(--out); }
.search-panel.anim .search-panel__bar { animation: bar-in .36s var(--out) .06s backwards; }
.search-panel.anim .search-panel__results { animation: results-in .4s var(--out) .14s backwards; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bar-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes results-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Result groups stagger as they render */
@keyframes hit-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.search-group { animation: hit-in .45s var(--out) both; }
.search-group:nth-child(2) { animation-delay: .05s; }
.search-group:nth-child(3) { animation-delay: .1s; }
.search-group:nth-child(4) { animation-delay: .15s; }

.search-panel__bar {
  display: flex; align-items: center; gap: var(--space-5);
  max-width: calc(var(--design) - var(--gutter) * 2);
  margin: 0 auto var(--space-7);
}
.search-panel__field {
  flex: 1;
  display: flex; align-items: center; gap: var(--space-3);
  border: 2px solid var(--ink);
  padding: 0 var(--space-4);
  height: 60px;
  transition: border-color var(--fast);
}
.search-panel__field:focus-within { border-color: var(--brand); }
.search-panel__field svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.search-panel__field input {
  flex: 1;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 18px; color: var(--ink);
  height: 100%;
}
.search-panel__close {
  background: none; border: 0; padding: var(--space-3);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  transition: color var(--fast);
}
.search-panel__close:hover { color: var(--brand); }

.search-panel__results {
  max-width: calc(var(--design) - var(--gutter) * 2);
  margin-inline: auto;
}
.search-panel__empty { font-size: 17px; color: var(--muted); }

.search-group + .search-group { margin-top: var(--space-7); }
.search-group__title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
}
.search-group__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 34px;
}
.search-hit { display: flex; gap: 18px; align-items: flex-start; }
.search-hit img,
.search-hit__placeholder {
  width: 92px; height: 68px; flex: none;
  object-fit: cover;
  background: #ececec;
}
.search-hit__text { display: block; min-width: 0; }
.search-hit__title {
  display: block;
  font-size: 15px;
  margin-bottom: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-hit:hover .search-hit__title { color: var(--brand); }
.search-hit__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px; line-height: 1.5;
}

.nav-toggle {
  display: none;
  flex: none;              /* must never be squeezed out by the brand lockup */
  width: 44px; height: 44px;
  margin-top: 18px;
  background: none; border: 0; padding: 0;
  color: var(--ink); cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 26px;
  margin: 6px auto; background: currentColor;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------------------- home hero */

/* Columns trace the measured x-boundaries of the Wix layout:
   0 | 60 | 570 | 948 | 1335 | 1425 — which lets the mission panel and the
   hero photo overlap on the same grid without absolute positioning.
   Expressed as percentages of the 1425px canvas so the design scales down
   between the 1120px breakpoint and full width instead of overflowing. */
.home-top {
  display: grid;
  max-width: var(--design);
  margin-inline: auto;
  grid-template-columns: 4.2105% 35.7895% 26.5263% 27.1579% 6.3158%;
  /* Row 1 is auto so the display headline can never overflow into the panel
     below it — a fixed height clipped it at large display sizes. */
  grid-template-rows: auto minmax(520px, auto) 44px;
}

/* Ends at column 4, where the hero photo begins. A fixed max-width here collided
   with the photo below ~1150px, because the photo's edge is a percentage. */
.home-top__copy {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: center;
  padding: var(--space-8) var(--space-6) var(--space-7) 0;
  position: relative; z-index: 3;
}
/* Sized off the column it sits in, not the full viewport — the hero copy only
   ever gets ~62% of the canvas before the photo starts. */
.home-top__copy h1 {
  font-size: clamp(36px, 6vw, 92px);
  color: var(--ink);
}
/* "Beyond the Net." was italic serif; now it's the crimson emphasis */
.home-top__copy h1 em { font-style: normal; color: var(--brand); display: block; }
.home-top__copy p {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--rule);
  font-size: 19px;
  line-height: 1.5;
  max-width: 460px;
  color: var(--ink);
}

.home-top__photo {
  grid-column: 4 / -1;
  grid-row: 1 / -1;
  position: relative; z-index: 1;
}
.home-top__photo img { width: 100%; height: 100%; object-fit: cover; }

.home-top__aside {
  grid-column: 2;
  grid-row: 2;
  position: relative; z-index: 2;
}
.home-top__aside img { width: 100%; height: 100%; object-fit: cover; }

.home-top__panel {
  grid-column: 3 / 5;
  grid-row: 2;
  position: relative; z-index: 2;
  background: var(--brand);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-6) 8% var(--space-6) 11%;
}

/* Shared "eyebrow label + big serif statement" block used in the crimson panels.
   The eyebrow is tracked small caps — the old 18px bold read as a second heading
   competing with the statement under it. */
.statement__label {
  color: var(--white);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid rgba(255, 255, 255, .5);
  display: inline-block;
}
.statement__body {
  font-family: var(--display);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--white);
  max-width: 20ch;
}

/* Hard offset block rather than a soft shadow; hover collapses the offset. */
.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-5);
  padding: 16px 28px;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: var(--offset) var(--offset) 0 var(--brand);
  transition: transform var(--fast), box-shadow var(--fast),
              background var(--fast), color var(--fast);
}
.btn::after {
  content: '';
  width: 7px; height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fast);
}
.btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translate(var(--offset), var(--offset));
  box-shadow: 0 0 0 var(--brand);
}
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.btn:active { transform: translate(var(--offset), var(--offset)); }

/* On crimson surfaces the offset flips to ink so it stays visible */
.home-top__panel .btn,
.split__panel .btn,
.feature__panel .btn,
.card--fill .btn {
  background: var(--white); color: var(--ink); border-color: var(--white);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
}
.home-top__panel .btn:hover,
.split__panel .btn:hover,
.feature__panel .btn:hover,
.card--fill .btn:hover {
  background: var(--ink); color: var(--white); border-color: var(--ink);
  box-shadow: 0 0 0 var(--ink);
}

/* ----------------------------------------------------------- home impact */

.impact {
  background: var(--brand);
  min-height: 0;
  display: flex; align-items: center;
}
/* The old 301px left indent pushed the most important content on the site into
   the middle of the band and left a third of it empty. */
.impact__inner {
  max-width: calc(var(--design) - var(--gutter) * 2);
  margin-inline: auto;
  width: 100%;
  padding: var(--space-8) var(--gutter);
}
.impact h2 {
  color: var(--white);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid rgba(255, 255, 255, .5);
  display: inline-block;
}

/* The two figures are the most-scanned content on the site, so they read as
   hero numbers rather than sentences. Labels stay full white: at 90% opacity
   contrast on crimson falls to 4.48, just under the 4.5 AA floor. */
.stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  max-width: none;
}
.stat {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 3px solid var(--white);
}
.stat__value {
  font-family: var(--display);
  font-weight: 900;
  /* 96px floor overflowed a 320px screen: the numeral is inline text, so it
     grew the scroll region without widening any element box. */
  font-size: clamp(64px, 14vw, 200px);
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--white);
  max-width: 24ch;
}

/* --------------------------------------------------------- home services */

/* Boundaries: 0 | 60 | 370 | 400 | 1025 | 1055 | 1365 | 1425, as percentages */
.services {
  display: grid;
  max-width: var(--design);
  margin-inline: auto;
  grid-template-columns: 4.2105% 21.7544% 2.1053% 43.8596% 2.1053% 21.7544% 4.2105%;
  min-height: 620px;
}
.services__img--left  { grid-column: 2; }
.services__img--right { grid-column: 6; }
.services__img img { width: 100%; height: 100%; object-fit: cover; }
.services__panel {
  grid-column: 4;
  background: var(--brand);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-6) 9% var(--space-6) 11%;
}

/* ------------------------------------------------------- home supporters */

/* Was a centred column with a 248px box that was mostly empty. Now the heading
   and blurb sit side by side and the strip is only as tall as the logo. */
.supporters { padding: var(--space-8) 0 var(--space-7); }
.supporters > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  align-items: end;
}
.supporters h2 {
  font-size: var(--display-m);
  color: var(--ink);
  max-width: 12ch;
}
.supporters p {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* A single logo stranded across a full-width row read as empty. The logo now
   sits in a bordered tile with the CTA directly beside it, so the group reads
   as one object instead of two items pushed to opposite edges. */
.supporters__strip {
  grid-column: 1 / -1;
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 0;
  margin-top: var(--space-6);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 0;
  min-height: 0;
}
.supporters__cell {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-6);
  min-width: 220px;
}
.supporters__cell:first-child { border-right: 1px solid var(--rule-soft); }
.supporters__cell img {
  max-height: 76px; width: auto;
  transition: transform var(--fast);
}
.supporters__cell:first-child:hover img { transform: scale(1.04); }

/* CTA cell stretches to fill the remaining width and inverts on hover */
.supporters__cell:last-child {
  position: relative;   /* anchor for the stretched link below */
  flex: 1;
  justify-content: space-between;
  gap: var(--space-5);
  transition: background var(--fast), color var(--fast);
}
.supporters__cell:last-child:hover { background: var(--ink); color: var(--white); }
.supporters__more {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  justify-content: space-between;
  color: inherit;
  border-bottom: 0;
  padding-bottom: 0;
}
/* Stretched link: the whole cell is the hit area, not just the words */
.supporters__more::before {
  content: '';
  position: absolute;
  inset: 0;
}
.supporters__cell:last-child:focus-within { background: var(--ink); color: var(--white); }
.supporters__more::after {
  content: '';
  width: 10px; height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fast);
}
.supporters__cell:last-child:hover .supporters__more::after { transform: rotate(45deg) translate(3px, -3px); }

/* ------------------------------------------------------------ page intro */

.page-intro { padding: var(--space-8) 0 0; }
.page-intro h1 {
  font-size: var(--display-l);
  color: var(--ink);
  max-width: 14ch;
}
.page-intro p {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--rule);
  max-width: 56ch;
  font-size: 19px;
  line-height: 1.55;
}

/* Section headings: one treatment, with a crimson rule above */
.values h2, .team h2, .how h2, .past-events h2,
.post__recent-title, .supporters h2 {
  font-size: var(--display-m);
  color: var(--ink);
}
.values h2, .team h2, .how h2, .past-events h2 {
  padding-top: var(--space-4);
  border-top: 3px solid var(--brand);
}

/* ------------------------------------------------------------ about page */

.pillars {
  margin-top: var(--space-8);
  background: var(--brand);
  color: var(--white);
  padding: var(--space-8) var(--gutter);
}
/* The divider is a pseudo-element centred in the gap, not a border plus
   padding on the second column — padding there pushed its images out of
   alignment with the first column's. */
.pillars__grid {
  position: relative;
  max-width: calc(var(--design) - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
}
.pillars__grid::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .4);
}
.pillar { display: flex; flex-direction: column; }
.pillar h2 {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 42px);
  line-height: .95; letter-spacing: -.03em;
  color: var(--white);
  padding-bottom: var(--space-4);
  border-bottom: 3px solid var(--white);
}
.pillar p {
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);   /* guaranteed gap above the pinned media */
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
}
/* Sizes are the crops the Wix layout renders, so object-fit does the cropping */
/* Both columns carry the same visual weight: one wide image on the left, two
   side by side on the right, all landing at the same height. Previously the
   mission photo was near-square and huge while the vision pair sat small and
   high, leaving the band lopsided. */
/* margin-top:auto pins the media to the bottom of both columns so the blocks
   start and end on the same lines despite unequal copy length. An explicit
   shared height makes the two vision images add up to exactly the one mission
   image — same height, same total width. */
.pillar__media {
  margin-top: auto;
  display: grid;
  grid-auto-rows: 1fr;   /* without this the row auto-sizes to the image's
                            intrinsic height and height:100% resolves circularly,
                            leaving the single image taller than the pair */
  gap: var(--space-4);
  height: clamp(240px, 26vw, 380px);
}
.pillar__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* Grid items default to min-height:auto, which floors the row at the image's
     intrinsic height — that made the single mission photo taller than the pair. */
  min-height: 0;
  min-width: 0;
  border: 2px solid rgba(255, 255, 255, .85);
}
.pillar--mission .pillar__media { grid-template-columns: 1fr; }
.pillar--vision .pillar__media { grid-template-columns: 1fr 1fr; }

.values { padding: var(--space-8) 0 0; }
/* A full-width manifesto list rather than five cramped boxes: the index sits
   left, the value fills the row at display scale, and crimson wipes across
   from the left on hover. */
.values__grid {
  margin-top: var(--space-6);
  display: block;
  border-top: 2px solid var(--ink);
}
.values__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--rule-soft);
  transition: color .3s var(--out), padding-left .3s var(--out);
}
.values__item:last-child { border-bottom: 2px solid var(--ink); }
.values__item::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--out);
}
.values__item:hover { color: var(--white); padding-left: var(--space-6); }
.values__item:hover::before { transform: scaleX(1); }

/* Arrow appears in the third column on hover */
.values__item::after {
  content: '';
  grid-column: 3;
  width: 9px; height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateX(-8px);
  opacity: 0;
  transition: opacity .3s var(--out), transform .3s var(--out);
}
.values__item:hover::after { opacity: 1; transform: rotate(45deg) translateX(0); }

.values__mark {
  font-family: var(--display);
  font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: .14em;
  color: var(--brand);
  transition: color var(--fast);
}
.values__item:hover .values__mark { color: var(--white); }

.values__item span:last-of-type {
  font-family: var(--display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1; letter-spacing: -.01em;
}

.team { padding: var(--space-8) 0 var(--space-8); }
.team__grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
/* The plate is now an inverted ink block sitting flush in the corner rather
   than a floating white card. */
.team__card { position: relative; border: 2px solid var(--ink); }
.team__card > img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}
.team__plate {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--ink);
  color: var(--white);
  padding: var(--space-5) var(--space-5) var(--space-5);
  width: min(360px, 82%);
}
.team__card--right .team__plate { left: auto; right: 0; }
.team__plate h3 {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: 22px; line-height: 1; letter-spacing: -.02em;
}
.team__plate p { margin-top: var(--space-3); font-size: 15px; line-height: 1.5; }
.team__plate p:first-of-type {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
  margin-top: var(--space-2);
}
.team__plate a { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.team__plate a:hover { border-bottom-color: var(--white); }

/* --------------------------------------------------------- programs page */

.feature {
  margin: 56px auto 0;
  width: 100%;
  max-width: calc(var(--design) - var(--gutter) * 2);
  display: grid;
  grid-template-columns: minmax(0, 786px) minmax(0, 519px);
  min-height: 555px;
}
.feature__panel {
  background: var(--brand);
  color: var(--white);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-8) var(--space-7);
}
.feature__panel h2 {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: .95; letter-spacing: -.03em;
  padding-bottom: var(--space-4);
  border-bottom: 3px solid var(--white);
}
.feature__panel p {
  margin-top: var(--space-5);
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.6;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.how { padding: var(--space-8) 0 0; }
.how > .container > p {
  margin-top: var(--space-4);
  font-size: 19px;
  color: var(--muted);
  max-width: 58ch;
}

.cards {
  margin: var(--space-6) auto 0;
  width: 100%;
  max-width: calc(var(--design) - var(--gutter) * 2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}
.card {
  padding: var(--space-6) var(--space-6) var(--space-7);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transition: background var(--fast), color var(--fast);
}
.card h3 {
  font-family: var(--display);
  font-size: var(--display-s); font-weight: 800;
  text-transform: uppercase;
  line-height: 1; letter-spacing: -.02em;
}
.card p { margin-top: var(--space-4); font-size: 16px; line-height: 1.6; }
.card--fill { background: var(--brand); color: var(--white); }
.card:not(.card--fill):hover { background: var(--paper); }
.card--fill:hover { background: var(--brand-dark); }

/* ----------------------------------------------------- get involved page */

/* Was centred text floating in a tall crimson box; now left-aligned and tighter */
.split {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
}
.split__panel {
  background: var(--brand);
  color: var(--white);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left;
  padding: var(--space-8) var(--space-7);
}
.split__panel h2 {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: .95; letter-spacing: -.03em;
  padding-bottom: var(--space-4);
  border-bottom: 3px solid var(--white);
}
.split__panel p {
  margin-top: var(--space-5);
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.6;
}
.split__panel p + p { margin-top: var(--space-4); }
.split__panel a {
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  transition: border-color var(--fast);
}
.split__panel a:hover { border-bottom-color: var(--white); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Three bordered columns filling the band, instead of narrow centred text
   floating over a washed-out photo. */
.trio {
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--design) - var(--gutter) * 2);
  position: relative;
  background: var(--ink) url('../img/get-involved-bg.jpg') center / cover no-repeat;
  padding: 0;
  border-bottom: 2px solid var(--ink);
}
.trio::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .9);
}
.trio__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  text-align: left;
  border-top: 2px solid var(--ink);
}
.trio__grid > * {
  padding: var(--space-7) var(--space-5);
  border-left: 1px solid var(--ink);
}
.trio__grid > *:first-child { border-left: 0; }
.trio h2 {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--brand);
}
.trio p { margin-top: var(--space-4); font-size: 16px; line-height: 1.6; }
.trio a {
  border-bottom: 1px solid var(--rule-soft);
  transition: border-color var(--fast), color var(--fast);
}
.trio a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ----------------------------------------------------------- events page */

.events { padding: var(--space-7) 0 var(--space-6); }
.events__empty {
  margin-top: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -.02em;
  color: var(--ink);
}

/* -------------------------------------------------------------- blog list */

.post-list { padding: var(--space-7) 0 var(--space-6); }
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-top: 2px solid var(--ink);
}
.post-card:last-child { border-bottom: 2px solid var(--ink); }
.post-card__media { overflow: hidden; display: block; }
.post-card__media img {
  width: 100%; aspect-ratio: 1200 / 685; object-fit: cover;
  transition: transform var(--slow);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__meta { color: var(--brand); }
.post-card__body h2 {
  margin-top: var(--space-4);
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 800;
  text-transform: uppercase;
  line-height: .98; letter-spacing: -.03em;
}
.post-card__body h2 a:hover { color: var(--brand); }
.post-card__excerpt {
  margin-top: var(--space-4);
  font-size: 17px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__more,
.service-card__more {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 3px solid var(--brand);
  padding-bottom: 4px;
  transition: color var(--fast);
}
.post-card__more:hover,
.service-card__more:hover { color: var(--brand); }

/* ------------------------------------------------------------- blog post */

.post { padding: var(--space-7) 0 var(--space-6); }
.post__back {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.post__back a { color: var(--brand); }
.post h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 76px); font-weight: 800;
  text-transform: uppercase;
  line-height: .95; letter-spacing: -.035em;
  max-width: 20ch;
}
.post__meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  color: var(--brand);
}
.post__hero,
.service__hero,
.event__hero {
  width: 100%;
  margin: var(--space-6) 0;
  aspect-ratio: 1200 / 685;
  object-fit: cover;
  border: 2px solid var(--ink);
}
.post__body { max-width: 68ch; }
.post__body p { font-size: 18px; line-height: 1.75; }
.post__body p + p { margin-top: var(--space-5); }
.post__recent-title {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 3px solid var(--brand);
}
.post__recent { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.post__recent li { border-bottom: 1px solid var(--rule-soft); }
.post__recent a {
  display: block; padding: var(--space-4) 0;
  font-family: var(--display);
  font-weight: 700; text-transform: uppercase;
  font-size: 18px; letter-spacing: -.02em;
  transition: color var(--fast), padding-left var(--fast);
}
.post__recent a:hover { color: var(--brand); padding-left: var(--space-3); }

/* -------------------------------------------------------- services / book */

.service-list { padding: var(--space-7) 0 var(--space-6); }
.service-card {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) 0;
  border-top: 2px solid var(--ink);
}
.service-card:last-child { border-bottom: 2px solid var(--ink); }
.service-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.service-card__body h2 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 800;
  text-transform: uppercase;
  line-height: 1; letter-spacing: -.03em;
}
.service-card__body h2 a:hover { color: var(--brand); }
.service-card__tagline { margin-top: var(--space-3); font-size: 17px; }
.service-card__meta {
  margin-top: var(--space-3);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
}
.service-card .btn { margin-top: var(--space-5); }

.service, .event { padding: var(--space-7) 0 var(--space-6); }
.service h1, .event h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 76px); font-weight: 800;
  text-transform: uppercase;
  line-height: .95; letter-spacing: -.035em;
  max-width: 18ch;
}
.service__tagline, .event__summary {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  max-width: 60ch;
  font-size: 18px; line-height: 1.6;
}
.service__notice, .event__status {
  margin-top: var(--space-5);
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  padding: 10px 18px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.event__when {
  margin-top: var(--space-4);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
}

.service__detail {
  margin: 0 0 var(--space-7);
  max-width: 560px;
  border-top: 2px solid var(--ink);
}
.service__row {
  display: flex; justify-content: space-between; gap: 24px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.service__row dt {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.service__row dd { margin: 0; font-size: 16px; font-weight: 600; }

.service__heading {
  font-family: var(--display);
  font-size: 22px; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--brand);
  display: inline-block;
}
.service__heading + .service__desc { margin-bottom: var(--space-7); }
.service__desc { max-width: 68ch; font-size: 17px; line-height: 1.7; }
.service .btn, .event .btn { margin-top: 0; }

/* ------------------------------------------------------------ past events */

.past-events { padding: var(--space-7) 0 var(--space-6); }
.past-events__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.past-event { border-top: 2px solid var(--ink); }
.past-event:last-child { border-bottom: 2px solid var(--ink); }
.past-event a {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  transition: background var(--fast), padding-left var(--fast), color var(--fast);
}
.past-event a:hover {
  background: var(--ink);
  color: var(--white);
  padding-left: var(--space-4);
}
.past-event a:hover .past-event__date,
.past-event a:hover .past-event__venue { color: var(--white); }
.past-event__date {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
  transition: color var(--fast);
}
.past-event__title {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1; letter-spacing: -.02em;
}
.past-event__venue { font-size: 15px; color: var(--muted); transition: color var(--fast); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--brand);
  color: var(--white);
  margin-top: var(--space-8);
}
/* The old footer was two columns pinned to opposite edges with 120px of bottom
   padding, leaving a large empty middle. Three tighter columns fill the width. */
.site-footer__inner {
  max-width: var(--design);
  margin-inline: auto;
  padding: var(--space-7) var(--gutter) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
}
.site-footer .brand { display: block; }
.site-footer .brand__name {
  color: var(--white);
  font-size: clamp(28px, 3vw, 44px);
}
.site-footer .brand__city {
  display: block;
  margin-top: var(--space-3);
  color: var(--white);
}
.footer__about,
.footer__contact {
  margin-top: var(--space-5);
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.6;
}
.footer__contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer__contact a:hover { text-decoration-thickness: 2px; }
.footer__social {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-top: var(--space-5);
  border: 2px solid var(--white);
  color: var(--white);
  transition: background var(--fast), color var(--fast);
}
.footer__social:hover { background: var(--white); color: var(--brand); }
.footer__social svg { width: 20px; height: 20px; }

.footer__nav ul { list-style: none; margin: 0; padding: 0; }
.footer__nav li { border-top: 1px solid rgba(255, 255, 255, .4); }
.footer__nav li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.footer__nav a {
  display: block;
  padding: var(--space-3) 0;
  transition: padding-left var(--fast);
}
.footer__nav a:hover { padding-left: var(--space-3); }

/* Subtle build credit. Kept at full white rather than a faded tint — on crimson
   a 90% white drops to 4.48 contrast, just under the AA floor. Subtlety comes
   from size and weight instead. */
.site-footer__credit {
  max-width: var(--design);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-6);
}
.site-footer__credit p {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__credit a {
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transition: border-color var(--fast);
}
.site-footer__credit a:hover { border-bottom-color: var(--white); }

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1120px) {
  .home-top {
    display: block;
  }
  .home-top__copy { padding: var(--space-7) var(--gutter) var(--space-5); max-width: none; }
  .home-top__photo { height: 300px; }
  .home-top__aside { height: 240px; }
  .home-top__panel { padding: var(--space-7) var(--gutter); }
  .statement__body { max-width: none; }

  .impact__inner { padding: var(--space-7) var(--gutter); }

  .services { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .services__img--left, .services__img--right { grid-column: 1; height: 260px; }
  .services__img--right { order: 3; }
  .services__panel { grid-column: 1; order: 2; padding: var(--space-7) var(--gutter); }

  .pillars__grid { gap: 56px; }
  /* The decorative indents on the text and the images must drop together —
     leaving the image margins on here pushed them past the viewport. */
  .pillar h2, .pillar p { padding-left: 0; }
  .pillar__media { justify-items: start; }
  .pillar--mission .pillar__media img,
  .pillar--vision .pillar__media img:first-child,
  .pillar--vision .pillar__media img:last-child { margin-left: 0; }

  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__panel { padding: 56px var(--gutter); order: 2; }
  .feature__media { height: 380px; }

  /* minmax(0, 1fr) — plain 1fr floors at min-content and overflows narrow screens */
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split__panel { padding: 56px var(--gutter); }
  .split__media { height: 420px; }

  .site-footer__inner { padding: 60px var(--gutter) 80px; }

  .search-group__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The nav collapses to a hamburger at 1080, not 900. With five items plus the
   More dropdown and the search control it runs out of horizontal room around
   1100px, and the labels were wrapping mid-phrase ("Programs & / Services")
   before the hamburger took over. */
@media (max-width: 1080px) {
  .site-header__inner {
    min-height: 0;
    padding: 20px var(--gutter);
    align-items: center;
  }
  .nav-toggle { display: block; margin-top: 0; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    margin-top: 0;
    padding: 0 var(--gutter) var(--space-4);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__list > li { border-bottom: 1px solid var(--rule-soft); }
  .nav__list > li > a { padding: 0; line-height: 54px; }
  .nav__list > li > a::before { display: none; }
  /* Full-width tap target rather than a 42px square */
  .nav__search {
    width: 100%; justify-content: flex-start;
    height: 52px; margin: var(--space-4) 0 0;
    padding: 0 var(--space-4); gap: var(--space-3);
  }
  .nav__search::after {
    content: 'Search';
    font-size: 12px; font-weight: 700; letter-spacing: .16em;
  }

  /* The More dropdown becomes a plain inline group inside the mobile panel */
  .nav__more { border-bottom: 0; }
  .nav__more-btn { display: none; }
  .nav__submenu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    border: 0; padding: 0; min-width: 0;
  }
  .nav__submenu li { border-top: 1px solid var(--rule-soft); }
  .nav__submenu a { padding: 0; line-height: 54px; }
  .nav__submenu a:hover { background: none; color: var(--brand); }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; }

  .container { padding-inline: var(--gutter); }
  .statement__body { font-size: 26px; max-width: none; }

  .pillars { padding: var(--space-7) var(--gutter); }
  .pillars__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .pillars__grid::before { display: none; }   /* columns are stacked here */
  .pillar__media {
    margin-top: var(--space-5); padding-top: 0;
    height: clamp(200px, 44vw, 300px);
  }

  .team__card > img { height: auto; aspect-ratio: 632 / 610; }
  .team__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .team__plate { position: static; width: auto; max-width: none; }

  .values__item { grid-template-columns: 48px minmax(0, 1fr) auto; }

  .cards { grid-template-columns: 1fr; border-left: 2px solid var(--ink); }
  .card { padding: var(--space-6) var(--space-5); }

  .trio__grid { grid-template-columns: 1fr; }
  .trio__grid > * { border-left: 0; border-top: 1px solid var(--ink); }
  .trio__grid > *:first-child { border-top: 0; }

  .supporters > .container { grid-template-columns: 1fr; }
  /* 12ch is narrower than "COLLABORATORS" once stacked, which forced a
     mid-word break. Full width here. */
  .supporters h2 { max-width: none; }
  .supporters__strip { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-6); }

  .search-panel { padding: var(--space-4) var(--gutter) var(--space-7); }
  .search-panel__bar { gap: var(--space-3); margin-bottom: var(--space-6); }
  .search-group__items { grid-template-columns: 1fr; gap: var(--space-4); }

  .post-card, .service-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .past-event a { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media (max-width: 620px) {
  /* --- Home, tuned for a phone rather than a squeezed desktop layout ---
     The hero and services stacked four tall full-width photos, which was most
     of the wasted space. Images become banners and the crimson panels lead. */
  .home-top__copy { padding: var(--space-6) var(--gutter) var(--space-4); }
  .home-top__photo { height: 210px; }
  .home-top__aside { height: 170px; }
  .home-top__panel { padding: var(--space-6) var(--gutter); }
  .home-top__panel .btn { margin-top: var(--space-4); width: 100%; justify-content: space-between; }

  .services__img--left, .services__img--right { height: 180px; }
  .services__panel { padding: var(--space-6) var(--gutter); }

  /* Stats read as one stacked block with a rule between, not two columns */
  .stats { grid-template-columns: 1fr; gap: var(--space-5); }
  .stat { padding-top: var(--space-3); }
  .stat__value { font-size: clamp(64px, 22vw, 96px); }
  .stat__label { font-size: 16px; max-width: none; }

  .supporters { padding: var(--space-7) 0 var(--space-6); }
  .supporters > .container { gap: var(--space-4); }
  .supporters__strip { flex-direction: row; flex-wrap: nowrap; }
  .supporters__cell { min-width: 0; padding: var(--space-4); }
  .supporters__cell:first-child { flex: 0 0 40%; }
  .supporters__cell img { max-height: 52px; }
  .supporters__more { font-size: 11px; }

  /* Stack the logo lockup on phones. On one nowrap line it consumed the whole
     header width and pushed the hamburger past the right edge. */
  .brand { flex-direction: column; align-items: flex-start; gap: 3px; }
  .brand__name { font-size: 20px; }
  .brand__city { font-size: 10px; }

  .page-intro { padding-top: var(--space-7); }
  .page-intro h1, .home-top__copy h1 { font-size: 34px; }
  .home-top__copy p { font-size: 18px; }
  .statement__body { font-size: 23px; }
  .pillar h2, .values h2, .team h2, .how h2,
  .supporters h2, .feature__panel h2, .split__panel h2, .trio h2 { font-size: 26px; }
  .post h1, .service h1, .event h1 { font-size: 30px; }
  .events__empty { padding: var(--space-7) var(--space-4); font-size: 19px; }

  /* Last-resort guard against a scrollbar. Headings get `normal` word-break so
     a long word only splits when it genuinely cannot fit, never by preference. */
  h1, h2, h3, .stat__value, .post-card__body h2, .past-event__title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  /* The mission panel and the impact band are both crimson and meet edge to
     edge once stacked; a white rule keeps them from reading as one slab. */
  .impact { border-top: 2px solid var(--white); }

  .site-footer__inner { padding: var(--space-6) var(--gutter) var(--space-5); }
  .values__item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-3); }
}

/* -------------------------------------------------------------------- 404 */

.notfound { padding: var(--space-8) 0; }
.notfound__code {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--display-xl);
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--brand);
}
.notfound h1 {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 3px solid var(--ink);
  font-size: var(--display-m);
}
.notfound__text {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.6;
}
.notfound__links {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.notfound__links a {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.notfound__links a:hover { color: var(--brand); }

/* ------------------------------------------------------------- scroll reveal */

/* Only applied once JS confirms motion is welcome, so content is never hidden
   from users with JS off or reduced-motion set. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--out), transform .7s var(--out);
  transition-delay: var(--d, 0ms);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* Display headings wipe up behind their own rule rather than just fading */
.js-reveal .reveal-clip { overflow: hidden; }
.js-reveal .reveal-clip > * {
  display: block;
  transform: translateY(100%);
  transition: transform .8s var(--out);
  transition-delay: var(--d, 0ms);
}
.js-reveal .reveal-clip.is-visible > * { transform: none; }

/* Hero: staggered entrance on load */
.js-reveal .home-top__copy h1,
.js-reveal .home-top__copy p {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--out), transform .8s var(--out);
}
.js-reveal .home-top__copy p { transition-delay: .12s; }
.js-reveal.is-loaded .home-top__copy h1,
.js-reveal.is-loaded .home-top__copy p { opacity: 1; transform: none; }

.js-reveal .home-top__photo,
.js-reveal .home-top__aside { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--out); }
.js-reveal.is-loaded .home-top__photo,
.js-reveal.is-loaded .home-top__aside { clip-path: inset(0 0 0 0); }
.js-reveal .home-top__aside { transition-delay: .1s; }

/* ---------------------------------------------------------------- print */

@media print {
  .site-header, .search-panel, .nav, .skip-link, .footer__social { display: none !important; }
  body { color: #000; }
  .impact, .home-top__panel, .services__panel, .card--fill,
  .feature__panel, .split__panel, .site-footer {
    background: none !important; color: #000 !important;
  }
  .stat__value, .stat__label, .statement__body, .statement__label { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}