.pillars { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem,1fr)); margin-top: 2rem; }
.pillars article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pillars img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.pillars .in { padding: 1.05rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.pillars h3 { font-size: 1.1rem; line-height: 1.25; }
.pillars p { font-size: .93rem; color: var(--ink-soft); line-height: 1.5; }

.hero {
  position: relative; min-height: min(92svh, 54rem);
  display: grid; align-items: end;
  /* Fixed dark, NOT var(--ink). Everything in this band -- h1, .kicker, .sub, the ghost button
     border -- is hardcoded #fff, because the band is a photograph with a dark scrim over it. A
     theme token flips: in dark mode --ink resolves to #EDEDE8, so if the hero image ever fails to
     load, the fallback is white text on a near-white ground at 1.17:1, which is invisible. Every
     other var(--ink) background on the site pairs with color: var(--ground) and flips in step,
     which is why this was the only one that could break.
     Value matches the scrim's own base (rgba(10,12,17,...)) so the fallback looks intentional. */
  background: #0A0C11; overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,17,.62) 0%, rgba(10,12,17,.12) 32%, rgba(10,12,17,.88) 100%);
}
.hero-in { position: relative; padding-block: 3rem 3.4rem; color: #fff; }
.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 6rem); font-weight: 800;
  letter-spacing: -.045em; max-width: 16ch; color: #fff;
}
.hero .kicker {
  color: #fff; opacity: .92; font-family: var(--font-ui); font-size: .72rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem;
}
.hero .sub {
  margin-top: 1.1rem; font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  color: #fff; opacity: .93; max-width: 34rem; line-height: 1.45;
}
.hero-cta { margin-top: 1.9rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.hero-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.hero-cta .btn-ghost:hover { border-color: #fff; }

.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad); color: #fff;
}
.topbar .mark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.topbar nav { display: none; gap: 1.4rem; font-family: var(--font-ui); font-size: .9rem; font-weight: 600; }
.topbar nav a { text-decoration: none; opacity: .9; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
@media (min-width: 54rem) { .topbar nav { display: flex; } }
.topbar .btn { padding: .55rem 1.1rem; min-height: 40px; font-size: .9rem; }

.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band h2 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); }
.band .lede { font-size: 1.18rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.5; }

.mosaic { display: grid; gap: .5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.2rem; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic figure:nth-child(1) img { aspect-ratio: 1; }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem;
  background: linear-gradient(transparent, rgba(10,12,17,.85));
  color: #fff; font-family: var(--font-ui); font-size: .76rem; font-weight: 600; line-height: 1.3;
}
@media (max-width: 44rem) { .mosaic { grid-template-columns: repeat(2, 1fr); } }

.give-band { background: var(--surface-2); }
.give-band .inner { display: grid; gap: 2.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .give-band .inner { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }

.voices-band { background: var(--ink); color: var(--ground); }
.voices-band .voice q { color: var(--ground); }
.voices-band cite, .voices-band .eyebrow.on-ink { color: var(--on-ink-faint); }
.voices-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2rem; }
.voices-band h2 { color: var(--ground); }

.aud { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }
.aud a {
  text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.15rem 1.2rem 1.25rem;
  display: flex; flex-direction: column; gap: .35rem; transition: border-color .12s ease;
}
.aud a:hover { border-color: var(--accent); }
.aud .l { font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; }
.aud .b { font-size: .92rem; color: var(--ink-soft); line-height: 1.42; }
.aud .c { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }