/* ==========================================================================
   ProVision Alliance, design system

   Derived from one structural fact: the mark is a rhombus built from nested
   hard-edged frames (outer rule, white band, inner rule, solid core) with an
   X-axis that runs past the shape. Three flat colours, no gradients, no soft
   corners, perfect symmetry.

   So the page is built the same way: zero radius, hairline rules, flat colour
   blocks, nested offset frames, and one band clipped to the rhombus peak.
   Type is a single grotesk worked hard across its width axis, condensed and
   oversized for display against tiny wide-tracked labels.

   No framework, no build step. The site is the live TechSoup/Goodstack
   vetting artifact and has to stay trivially hostable.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Sampled from assets/img/gallery/pv-logo.jpeg. Flat, never gradient. */
  --brand: #f4cc44;
  --brand-deep: #d9af1f;

  /* True neutrals. Deliberately cool: a warm cream base is the tell of a
     stock template, and it fights a black-and-yellow graphic mark. */
  --ink: #0b0b0c;
  --ink-2: #26262a;
  --ink-mute: #6a6a70;
  --paper: #ffffff;
  --paper-2: #f2f2f3;
  --rule: #d8d8db;
  --rule-ink: rgba(255, 255, 255, 0.16);

  --focus: #1b6ef3;

  /* One superfamily, two axes. Width does the work a second family usually
     does, which also keeps the font payload to a single file. */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step--2: 0.688rem;
  --step--1: 0.8rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --step-3: clamp(2rem, 1.55rem + 2.2vw, 3.4rem);
  --step-4: clamp(2.9rem, 1.9rem + 4.9vw, 6.4rem);

  --gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  --section-y: clamp(3.5rem, 2.6rem + 4.5vw, 6.5rem);
  --wrap: 1240px;
  --pad: clamp(1.1rem, 0.6rem + 2.4vw, 2.75rem);

  --header-h: 68px;
}

/* Display: condensed, heavy, tight. The compositional risk of the page. */
.display {
  font-weight: 800;
  font-stretch: 76%;
  letter-spacing: -0.018em;
  line-height: 0.94;
  text-transform: uppercase;
}

/* Label: the opposite end of the width axis. Wide, tiny, heavily tracked. */
.label {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- 2. Base reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0 0 1em; padding-left: 1.1em; }
li { margin-bottom: 0.3em; }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  background: var(--brand);
  color: var(--ink);
  padding: 0.8rem 1.2rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; top: 0; }

/* ------------------------------------------------------ 3. Layout & rhythm */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-y); }
.section--grey { background: var(--paper-2); }

.section--ink { background: var(--ink); color: #b9b9be; }
.section--ink h2, .section--ink h3 { color: #fff; }

/* The rhombus peak from the mark, used once, as the entry to the impact band. */
.section--brand {
  --peak: clamp(22px, 3.4vw, 54px);
  background: var(--brand);
  color: var(--ink);
  clip-path: polygon(0 var(--peak), 50% 0, 100% var(--peak), 100% 100%, 0 100%);
  padding-top: calc(var(--section-y) + var(--peak));
}
.section--brand h2 { color: var(--ink); }

/* Section marker: solid diamond, index, then a rule running to the edge. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  flex: none;
  background: var(--brand);
  transform: rotate(45deg);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.section--ink .eyebrow { color: #fff; }
.section--ink .eyebrow::after { background: var(--rule-ink); }
.section--brand .eyebrow::before { background: var(--ink); }
.section--brand .eyebrow::after { background: rgba(11, 11, 12, 0.25); }

.section-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.section-head h2 {
  font-weight: 800;
  font-stretch: 76%;
  letter-spacing: -0.018em;
  line-height: 0.96;
  text-transform: uppercase;
  font-size: var(--step-3);
  max-width: 20ch;
  margin-bottom: 0;
}
.section-head .lede { margin-top: 1.2rem; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

/* --------------------------------------------------------------- 4. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.05rem 1.75rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }

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

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

.section--ink .btn--ghost,
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-stretch: 108%;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--brand);
  transition: gap 0.15s linear, border-color 0.15s linear;
}
.link-more:hover { gap: 0.95rem; border-color: var(--ink); }

/* ---------------------------------------------------------------- 5. Header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-ink);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.brand img { width: 36px; height: 36px; object-fit: cover; }
.brand-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
}
.brand-tag {
  display: block;
  font-size: 0.56rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 2px;
}

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 0.1rem + 1.1vw, 1.7rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d3d3d8;
  text-decoration: none;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s linear;
}
.nav a:hover { color: #fff; }
.nav a:hover::after,
.nav a[aria-current="true"]::after { transform: scaleX(1); }

.header-cta { flex: none; padding: 0.8rem 1.3rem; font-size: var(--step--2); }

.nav-toggle {
  display: none;
  flex: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  background: transparent;
  border: 1px solid var(--rule-ink);
  color: #fff;
  cursor: pointer;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 12, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0.2s linear;
  z-index: 98;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    background: var(--ink);
    border-left: 2px solid var(--brand);
    padding: calc(var(--header-h) + 1rem) 1.6rem 2rem;
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    z-index: 99;
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--rule-ink); }
  .nav a { padding: 1.05rem 0; font-size: 0.8rem; }
  .nav a::after { display: none; }
  .header-cta { display: none; }
}

/* ------------------------------------------------------------------ 6. Hero */

/* The hero occupies exactly one screenful on open, desktop and mobile.
   min-height rather than height, so it still grows instead of clipping when
   the content is taller than a short viewport. svh is the small viewport
   height, which excludes mobile browser chrome and so does not jump as the
   address bar collapses; vh is the fallback for older engines. */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
}
.hero-texture {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.14;
  filter: grayscale(1) contrast(1.2);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.hero .eyebrow { color: #fff; }
.hero .eyebrow::after { background: var(--rule-ink); }

.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  font-stretch: 74%;
  letter-spacing: -0.022em;
  line-height: 0.9;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.32em;
}
.hero h1 em { font-style: normal; color: var(--brand); }

.hero-lede {
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Nested offset frame, the logo's construction applied to a photograph. */
.hero-figure { position: relative; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--brand);
  pointer-events: none;
  z-index: 0;
}
.hero-figure img.hero-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
}
.hero-badge {
  position: absolute;
  z-index: 2;
  left: -14px; bottom: -14px;
  width: clamp(84px, 11vw, 116px);
  border: 3px solid var(--ink);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); }
  .hero-figure { margin: 0.5rem 16px 1rem 0; max-width: 520px; }
  .hero-badge { left: auto; right: -10px; }

  /* Cap the photograph against the viewport, not just its own aspect ratio,
     so a stacked hero cannot push the image past the fold on short screens.
     object-fit: cover keeps the framing while the box shrinks. */
  .hero-figure img.hero-photo { max-height: 36svh; }
}

/* Short viewports: 360x640 and landscape phones. Tighten the vertical rhythm
   and the display size so the whole hero still lands in one screen. */
@media (max-width: 900px) and (max-height: 720px) {
  .hero h1 { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.5rem); }
  .hero-lede { margin-bottom: 1.4rem; font-size: 0.72rem; letter-spacing: 0.18em; }
  .hero .eyebrow { margin-bottom: 1rem; }
  .hero-figure img.hero-photo { max-height: 30svh; }
}

/* Landscape phone: short but wide. Stacking wastes the horizontal space and
   pushes the hero past the fold, so go back to two columns and use it. */
/* Keyed on height, not width: a landscape iPhone 14 Pro Max is 932px wide, so a
   max-width cutoff would miss exactly the devices this is for. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .hero-figure { margin: 0 16px 0 0; }
  .hero-figure img.hero-photo { max-height: 50svh; }
  .hero h1 { font-size: clamp(1.7rem, 1rem + 3.4vw, 2.3rem); }
  /* Pull in the offset frame and badge; their overhang is what tips the hero
     past a 414px-tall viewport. */
  .hero-figure::before { inset: 10px -10px -10px 10px; }
  .hero-badge { width: clamp(58px, 8vw, 80px); left: auto; right: -6px; bottom: -8px; }
}

/* Below ~400px the two hero buttons wrapped onto separate lines. */
@media (max-width: 400px) {
  .btn { padding: 0.9rem 1.1rem; font-size: 0.72rem; letter-spacing: 0.07em; }
  .hero-actions { gap: 0.5rem; }
}

/* A full-screen hero needs to say that there is more below it. Width and
   padding mirror .wrap so the cue sits on the same left edge as the headline
   instead of floating in the centre. */
.hero-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(0.8rem, 2.2vh, 1.9rem);
  transform: translateX(-50%);
  width: min(var(--wrap), 100%);
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s linear;
}
.hero-scroll:hover { color: var(--brand); }
.hero-scroll i { animation: hero-nudge 1.9s ease-in-out infinite; }

@keyframes hero-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* No room for it on short screens, where the hero is already tight. */
@media (max-height: 660px) { .hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll i { animation: none; } }

/* --------------------------------------------------------------- 7. Mission */

/* Statement on the left, supporting text stacked on the right. A single narrow
   column left half the row empty and read as an unfinished page. */
.mission-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
.mission-body > p:first-of-type { grid-column: 1; grid-row: 1 / span 3; }
.mission-body > p + p { grid-column: 2; max-width: 52ch; }

@media (max-width: 860px) {
  .mission-body { grid-template-columns: 1fr; }
  .mission-body > p:first-of-type { grid-column: 1; grid-row: auto; }
  .mission-body > p + p { grid-column: 1; }
}

.mission-body > p:first-of-type {
  font-size: var(--step-2);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------- 8. Programmes (no box) */
/* Numbered editorial entries on hairline rules, not cards. */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 1rem + 3vw, 4rem);
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: pillar;
}
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  counter-increment: pillar;
  margin: 0;
  padding: 1.9rem 0 2.1rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
.pillar::before {
  content: counter(pillar, decimal-leading-zero);
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  color: var(--brand-deep);
  margin-bottom: 0.9rem;
}
.pillar i { display: none; }
.pillar h3 {
  font-size: var(--step-1);
  font-weight: 800;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 0.55rem;
}
.pillar p { color: var(--ink-2); margin: 0; max-width: 46ch; }

/* --------------------------------------------------- 9. Capability listing */

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: cap;
}
.capability {
  counter-increment: cap;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: start;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.capability::before {
  content: counter(cap, decimal-leading-zero);
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  padding-top: 0.15em;
}
.capability i { display: none; }

/* -------------------------------------------------------------- 10. Process */

.process-step {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(1.75rem, 1rem + 3.5vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  border-top: 1px solid var(--rule);
}
.process-step:nth-child(even) .process-figure { order: 2; }
.process-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.step-index {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
}
.step-index span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--ink);
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: 0;
}

.process-body h3 {
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.process-body p { max-width: 54ch; color: var(--ink-2); }

@media (max-width: 860px) {
  .process-step { grid-template-columns: 1fr; }
  .process-step:nth-child(even) .process-figure { order: 0; }
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--rule);
}
.social-row li { margin: 0; }
.social-row .social-label {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.5rem;
}
.social-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s linear, color 0.15s linear;
}
.social-row a:hover { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- 11. Stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
  border-left: 1px solid rgba(11, 11, 12, 0.22);
}
/* Four stacked figures made the band needlessly long on a phone. */
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid rgba(11, 11, 12, 0.22); }
}

.stat {
  margin: 0;
  padding: clamp(1.2rem, 1rem + 1vw, 2rem) clamp(1rem, 0.8rem + 1vw, 1.8rem);
  border-right: 1px solid rgba(11, 11, 12, 0.22);
}
.stat i { display: none; }
.stat .stat-value {
  display: block;
  font-size: clamp(3rem, 2rem + 4vw, 5.2rem);
  font-weight: 800;
  font-stretch: 74%;
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.stat .stat-label {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 11, 12, 0.72);
  margin: 0;
}

/* -------------------------------------------------------------- 12. Gallery */

/* Fixed divisors of 12 so the grid always completes. auto-fit gave 5 columns
   and left a ragged two-item row. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery-grid a { display: block; overflow: hidden; background: var(--ink); }
.gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 0.2s linear, transform 0.4s ease-out;
}
.gallery-grid a:hover img { opacity: 0.72; transform: scale(1.04); }

/* --------------------------------------------------------------- 13. Voices */

.voices {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 1000px) {
  .voices {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}
.voice {
  scroll-snap-align: start;
  margin: 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  border: 1px solid var(--rule-ink);
  display: flex;
  flex-direction: column;
}
.voice blockquote {
  margin: 0 0 1.6rem;
  font-size: var(--step-1);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.34;
  color: #fff;
}
.voice blockquote::before {
  content: "";
  display: block;
  width: 12px; height: 12px;
  background: var(--brand);
  transform: rotate(45deg);
  margin-bottom: 1.2rem;
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-ink);
}
.voice img {
  width: 46px; height: 46px;
  object-fit: cover;
  flex: none;
  filter: grayscale(1);
}
.voice .voice-name {
  display: block;
  font-weight: 700;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  color: #fff;
}
.voice .voice-role { display: block; font-size: 0.78rem; color: #8e8e96; }
.voice .stars { color: var(--brand); font-size: 0.72rem; letter-spacing: 0.14em; }

/* ------------------------------------------------------------------ 14. Team */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
.team-grid a {
  display: block;
  border: 1px solid var(--rule);
  transition: border-color 0.15s linear, transform 0.15s ease-out;
}
.team-grid a:hover { border-color: var(--ink); transform: translateY(-3px); }
.team-grid img { width: 100%; }

/* ------------------------------------------------------------- 15. Resources */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.resource-card { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.resource-card + .resource-card { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.resource-card h3 {
  font-size: var(--step--1);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.resource-card ul { list-style: none; padding: 0; margin: 0; }
.resource-card li { margin: 0; }
.resource-card a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.15s linear, padding-left 0.15s linear;
}
.resource-card a::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  background: var(--brand);
  transform: rotate(45deg);
}
.resource-card a:hover { color: var(--ink); padding-left: 0.35rem; }

/* Touch targets: these rows are the most-tapped links on the page. */
@media (pointer: coarse) {
  .resource-card a { padding: 0.8rem 0; }
  .site-footer a, .social-row a { padding-block: 0.35rem; display: inline-flex; }
}
.resource-card a[target="_blank"]::after {
  content: "\F1C5";
  font-family: "bootstrap-icons";
  font-size: 0.68em;
  color: var(--ink-mute);
  margin-left: auto;
}
.resource-note {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.4rem 0 0; }
.tag-list li { margin: 0; }
.tag-list span {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------------ 16. FAQ */

.faq-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-figure { order: -1; }
}
.faq-figure img { filter: grayscale(0.3); }

.faq-title {
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 76%;
  letter-spacing: -0.018em;
  line-height: 0.96;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.faq-item { border-bottom: 1px solid var(--ink); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.2;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 11px; height: 11px;
  margin-top: 0.45em;
  background: var(--brand);
  transform: rotate(45deg);
  transition: transform 0.2s linear, background-color 0.15s linear;
}
/* A square has 90deg rotational symmetry, so rotating the marker cannot signal
   state. Scale and colour do. */
.faq-item[open] summary::after { transform: rotate(45deg) scale(0.55); background: var(--ink); }
.faq-answer { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 62ch; }
.faq-answer ul { padding-left: 1.1rem; }
.faq-answer li::marker { color: var(--brand-deep); }

/* --------------------------------------------------------------- 17. Donate */

.donate-band {
  background: var(--brand);
  padding: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: center;
}
@media (max-width: 760px) { .donate-band { grid-template-columns: 1fr; } }
.donate-band h2 {
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 80%;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 20ch;
}

/* --------------------------------------------------------------- 18. Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-item { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.contact-item:first-child { border-top: 1px solid var(--rule); }
.contact-item i {
  flex: none;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--brand);
  font-size: 1rem;
}
.contact-item h3 {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.contact-item p { margin: 0; color: var(--ink-2); }
.contact-item a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.contact-item a:hover { color: var(--ink); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  transition: box-shadow 0.15s linear;
}
.field input:focus, .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--brand);
}
.field textarea { resize: vertical; min-height: 150px; }

.form-status { margin: 0; font-weight: 700; font-size: 0.88rem; align-self: center; }
.form-status[data-state="ok"] { color: #14663c; }
.form-status[data-state="error"] { color: #a3231b; }

/* ---------------------------------------------------------------- 19. Footer */

.site-footer { background: var(--ink); color: #9a9aa2; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  font-size: var(--step--2);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: #9a9aa2; text-decoration: none; font-size: 0.9rem; }
.site-footer a:hover { color: var(--brand); }
.footer-contact p { margin: 0 0 0.25rem; font-size: 0.9rem; }

.social-links { display: flex; gap: 0.5rem; margin-top: 1.4rem; }
.social-links a {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-ink);
  font-size: 1rem;
  transition: background 0.15s linear, color 0.15s linear;
}
.social-links a:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }

.footer-bottom {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.82rem;
}
.footer-bottom p { margin: 0; }

/* ------------------------------------------------------- 20. Scroll to top */

.to-top {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--ink);
  font-size: 1.35rem;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0.2s linear;
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--ink); color: var(--brand); }

/* ----------------------------------------------------------- 21. Motion/rev */
/* Scoped to .js, set inline in <head>. Without that guard the whole page
   starts at opacity 0 and only JavaScript can reveal it, so any script
   failure leaves a blank site. */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.js .reveal.is-in { opacity: 1; transform: none; }

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

@media print {
  .site-header, .to-top, .nav-backdrop, .donate-band { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}