/* Report layout and components */

/* ---------- Pillar themes ----------
   Set --accent / --accent-text / --accent-tint / --panel / --band for everything inside.
   Climate green (#57A773) fails contrast as text on white, so text uses the guide's darker shade. */
.theme-navy   { --accent: var(--navy); --accent-tint: var(--sky); --band: var(--sky); }
.theme-purple {
  --accent: var(--purple); --accent-tint: var(--purple-tint);
  --panel: radial-gradient(130% 62% at 0% 100%, #3289B3 0%, rgba(50, 137, 179, 0) 72%), linear-gradient(180deg, #884989, #7C4380 55%, #884989);
  --banner-icon: var(--purple-tint);
  --band: linear-gradient(90deg, var(--sky), var(--purple-tint) 55%, #CFB6D0);
}
.theme-green, .theme-teal {
  --accent: var(--green); --accent-text: var(--green-shade); --accent-tint: var(--green-tint);
  --panel: radial-gradient(120% 52% at 0% 0%, rgba(250, 223, 99, 0.55) 0%, rgba(250, 223, 99, 0) 70%), linear-gradient(180deg, #498C61, #3C734F);
  --banner-icon: var(--green-tint);
  --band: linear-gradient(90deg, var(--green-tint), #BCDBC7 55%, var(--sky));
}
.theme-teal { --accent: var(--teal); --accent-text: var(--teal); --accent-tint: var(--teal-tint); }
.theme-coral {
  --accent: var(--coral); --accent-tint: var(--coral-tint);
  --panel: linear-gradient(180deg, #D45949 0%, #BA4E40 100%);
  --banner-icon: var(--yellow);
  --band: linear-gradient(90deg, var(--paper), var(--coral-tint) 60%, #F8C1BA);
}

/* Film grain over gradient panels (matches the print texture) */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain) 0 0 / 240px auto; opacity: 0.7; mix-blend-mode: overlay; }

/* Recolorable icon: any alpha-mask PNG, filled with --fill (default: the accent) */
.icon { display: inline-block; flex: none; width: var(--s, 2.75rem); height: var(--s, 2.75rem); background: var(--fill, var(--accent)); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

.icon--democracy { --icon: url(../assets/img/pillar-democracy.png); }
.icon--climate { --icon: url(../assets/img/pillar-climate.png); }
.icon--civil { --icon: url(../assets/img/pillar-civil.png); }

/* ---------- Chapter navigation (sticky) with reading progress ---------- */
.report-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.report-nav .wrap { height: 100%; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.report-nav__brand {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--navy); white-space: nowrap;
}
.report-nav nav { flex: 0 1 auto; min-width: 0; }
.report-nav ul {
  display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.report-nav ul::-webkit-scrollbar { display: none; }
.report-nav li { margin: 0; padding: 0; }
.chapter-link {
  display: block; padding: 0.5rem 0.7rem; white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--navy);
  border-bottom: 2px solid transparent;
}
.chapter-link:hover { color: var(--coral); }
.chapter-link[aria-current="true"] { color: var(--coral); border-bottom-color: var(--coral); }
.report-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--sky-line); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
@media (max-width: 40rem) { .report-nav ul { margin-left: 0; } }

/* ---------- Scroll reveal (only when JS is present) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

:root { --blend: radial-gradient(75% 70% at 50% -8%, rgba(128,226,250,.95) 0%, rgba(128,226,250,0) 72%), radial-gradient(70% 95% at -6% 72%, rgba(34,150,152,.95) 0%, rgba(34,150,152,0) 74%), radial-gradient(85% 100% at 108% 108%, rgba(52,78,170,.95) 0%, rgba(52,78,170,0) 72%), linear-gradient(165deg, #4BC2E8 0%, #3DA5CB 45%, #3079AF 100%); }
/* ---------- Cover: live title over the print artwork ---------- */
.cover {
  position: relative; overflow: hidden; isolation: isolate; color: var(--navy);
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
  display: grid; align-content: center;
  padding-block: clamp(1rem, 3vh, 2.5rem);
  /* one continuous gradient behind title + art (no box behind the artwork) */
  background: var(--blend);
}
.cover__inner { position: relative; z-index: 2; padding-inline: var(--gutter); }
/* One centered column that always fits the screen: its width is capped by the viewport HEIGHT as well as width,
   so the title + full artwork (natural proportions, never stretched or cropped) are visible at once. */
.cover__lockup {
  --h-budget: calc(100vh - var(--nav-h) - 3rem); --h-budget: calc(100svh - var(--nav-h) - 3rem);
  width: min(100%, 76rem, calc(var(--h-budget) / 1.3));
  margin-inline: auto; container-type: inline-size;
}
.cover h1 { margin: 0; font-size: 14.2cqi; font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: var(--navy); }
.cover h1 em { font-style: italic; font-weight: 500; font-size: 0.62em; }
.cover__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 1.6cqi 0 2.4cqi; font-family: var(--font-ui); font-size: clamp(0.625rem, 1.55cqi, 1rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cover__art { display: block; width: 100%; height: auto; }
/* Film grain image (--grain-strong) over the whole cover, under the title. Tweak opacity to taste. */
.cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grain-strong) 0 0 / 240px auto; opacity: 0.55; mix-blend-mode: overlay; }

/* ---------- Mission ---------- */
.mission {
  color: var(--white); text-align: center; padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  background: radial-gradient(75% 55% at 0% 88%, rgba(28,146,226,.95) 0%, rgba(28,146,226,0) 75%), radial-gradient(65% 50% at 100% 100%, rgba(22,98,124,.95) 0%, rgba(22,98,124,0) 75%), radial-gradient(90% 40% at 70% 40%, rgba(30,92,170,.5) 0%, rgba(30,92,170,0) 80%), linear-gradient(180deg, #131E5C 0%, #1B4296 50%, #1C6DB8 100%);
}
.mission__inner { max-width: 44rem; margin-inline: auto; display: grid; gap: 2rem; justify-items: center; }
.mission .logo { width: 3.5rem; }
.mission .statement { margin: 0; }

/* ---------- Letter from the Executive Director ---------- */
.letter__grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.letter__who { display: grid; gap: 1.25rem; justify-items: start; }
.letter__who h2 { margin: 0; }
.portrait { width: min(12.5rem, 60vw); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.letter__who h5 { margin: 0; color: var(--navy); }
.letter__who p { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.letter__body h5 { margin-bottom: 1rem; }
.letter__body .lede { max-width: 34rem; }
.signature { width: 7.5rem; margin-top: 0.5rem; }
@media (min-width: 62rem) { .letter__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); } }
.letter__text { max-width: var(--measure-text); }

/* ---------- 10 Years of Impact + arc timeline ---------- */
.decade__head { display: grid; gap: 1.5rem 3rem; align-items: start; margin-bottom: 3.5rem; }
.decade__head .lede { max-width: 26rem; margin: 0; }
@media (min-width: 56rem) { .decade__head { grid-template-columns: 1fr 1fr; } .decade__head .lede { padding-top: 0.75rem; } }

.arcs {
  --arc-h: clamp(3.5rem, 7vw, 5.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--arc-h);
  border-top: 2px solid var(--sky-line);
}
.step { position: relative; padding-top: 1.5rem; }
.step h3 { margin-bottom: 0.9rem; }
.step::after { content: ""; position: absolute; left: 0; top: -0.45rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--white); border: 2px solid var(--c); }
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 0.375rem; top: calc(-1 * var(--arc-h) - 2px);
  width: calc(100% + clamp(1.5rem, 3vw, 3rem)); height: var(--arc-h);
  border: 2px solid var(--c); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.step--1 { --c: var(--arc-1); } .step--2 { --c: var(--arc-2); } .step--3 { --c: var(--arc-3); }
@media (max-width: 48rem) {
  .arcs { grid-template-columns: 1fr; margin-top: 0; border-top: 0; border-left: 2px solid var(--sky-line); padding-left: 1.5rem; row-gap: 1.5rem; }
  .step { padding-top: 0; }
  .step::before { display: none; }
  .step::after { left: calc(-1.5rem - 0.45rem); top: 0.6rem; }
}
.decade__more { margin-top: 3rem; max-width: var(--measure-text); }

/* ---------- Running text: one column, ~66 characters per line (--measure-text) ---------- */
.cols-2, .cols-3 { max-width: var(--measure-text); }

/* ---------- Where We Are Now ---------- */
.now__grid { display: grid; gap: 2rem 3rem; }
.now__img { width: 100%; height: 100%; min-height: 18rem; max-height: 28rem; object-fit: cover; }
@media (min-width: 56rem) { .now__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; } }
.now__text .lede { max-width: 32rem; }

/* ---------- How Our Programs Grew (collage on gradient) ---------- */
.programs { display: grid; grid-template-columns: minmax(0, 1fr); }
.programs__collage {
  padding: 3rem var(--gutter) 0; color: var(--white);
  background: var(--blend);
}
.programs__collage h1 { color: var(--white); text-wrap: balance; }
.collage { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(3.25rem, 8vw, 5rem); gap: 0.5rem; margin-top: 2rem; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { grid-column: 1 / span 4; grid-row: 1 / span 5; }
.collage .c2 { grid-column: 5 / span 2; grid-row: 1 / span 3; }
.collage .c3 { grid-column: 5 / span 2; grid-row: 4 / span 2; }
.collage .c4 { grid-column: 1 / span 3; grid-row: 6 / span 3; }
.collage .c5 { grid-column: 4 / span 3; grid-row: 6 / span 3; }
.programs__text { padding: 3rem var(--gutter); }
@media (min-width: 62rem) {
  .programs { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .programs__collage { padding: 4rem 0 0 max(var(--gutter), calc((var(--vw, 100vw) - var(--wrap)) / 2)); }
  .programs__text { padding: 4rem max(var(--gutter), calc((var(--vw, 100vw) - var(--wrap)) / 2)) 4rem 3rem; }
}

/* ---------- The pillars of our work ---------- */
.pillars { background: var(--sky); padding-block: clamp(2.5rem, 5vw, 4rem); }
.pillars > .wrap > h5 { margin-bottom: 2rem; }
.pillars__grid { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 56rem) { .pillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar-card { display: grid; gap: 0.9rem; align-content: start; justify-items: start; }
.pillar-card h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin: 0; }
.pillar-card h3 a { color: var(--navy); text-decoration: none; }
.pillar-card h3 a:hover { color: var(--accent); }
.pillar-card p { margin: 0; font-weight: 500; color: var(--navy); max-width: 24rem; }

/* ---------- Powered by pro bono ---------- */

/* ---------- Impact Docket ---------- */
.docket { background: var(--docket); overflow: hidden; padding-top: clamp(3rem, 6vw, 5rem); }
.docket__grid { display: grid; gap: 2rem 3rem; align-items: stretch; }
.docket__text { padding-bottom: clamp(2rem, 5vw, 4rem); }
.docket__text h5 { margin-bottom: 0.75rem; }
.docket__text h2 { margin-bottom: 1.5rem; }
.docket__phone { width: min(18rem, 78%); margin-inline: auto; align-self: end; max-height: 30rem; overflow: hidden; }
@media (min-width: 56rem) { .docket__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 3.4fr); } .docket__phone { width: 100%; margin: 0; } }

/* ---------- Timelines ----------
   Pillar timelines run on a centered baseline with entries above and below (R5). Each entry's stem length is --h;
   --tl-h is the total height. .tl--elbow puts the stem on the right and runs a rule from the date to it. */
.tl-title { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--navy); margin: 0 0 1.25rem; }
.timeline { position: relative; min-width: 0; }
.timeline__nav { position: absolute; top: 0.5rem; right: 1rem; z-index: 3; display: flex; gap: 0.5rem; }
.timeline__nav button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--navy); background: rgba(255, 255, 255, 0.9); color: var(--navy);
  font: 700 1rem/1 var(--font-ui); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.timeline__nav button:hover { background: var(--navy); color: var(--white); }
.timeline__scroller { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.timeline__track {
  --tl-h: 42rem; --base: 0.55; position: relative; list-style: none; margin: 0; padding: 0 1.5rem 0 0.75rem;
  display: flex; align-items: flex-start; gap: 1.1rem; width: max-content; min-width: 100%; height: var(--tl-h);
}
.timeline__track::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tl-h) * var(--base) - 1px); height: 2px; background: var(--accent); }
.tl { position: relative; flex: 0 0 15.5rem; box-sizing: border-box; margin: 0; --len: calc(var(--h, 6rem) + 3.5rem); height: var(--len); padding: 0.1rem 0.5rem 0 1rem; border-left: 1.5px solid var(--navy); }
.tl::after { content: ""; position: absolute; left: -0.34rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--navy); }
.tl--up { margin-top: calc(var(--tl-h) * var(--base) - var(--len)); }
.tl--up::after { bottom: -0.3rem; }
.tl--up:has(img) { --len: calc(var(--h, 6rem) + 3.5rem + 9.2rem); }
.tl--down { margin-top: calc(var(--tl-h) * var(--base)); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0.5rem 0 1rem; }
.tl--down::after { top: -0.3rem; }
.tl img { display: block; width: 8.5rem; aspect-ratio: 1; object-fit: cover; margin: 0 0 0.7rem; }
.tl time { display: block; margin-bottom: 0.5rem; font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.tl p { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.tl--elbow { flex-basis: 17rem; border-left: 0; border-right: 1.5px solid var(--navy); padding: 0.1rem 1rem 0 0.25rem; }
.tl--elbow::after { left: auto; right: -0.34rem; }
.tl--elbow time { display: flex; align-items: center; gap: 0.7rem; }
.tl--elbow time::after { content: ""; flex: 1; height: 1.5px; background: var(--navy); }
@media (max-width: 48rem) {
  .timeline__nav { display: none; }
  .timeline__scroller { overflow: visible; }
  .timeline__track { display: block; width: fit-content; max-width: 100%; min-width: 0; height: auto; padding: 0 0 0 1.25rem; margin: 0 auto; }
  .timeline__track::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .tl, .tl--elbow, .tl--down { display: block; height: auto; margin: 0 0 1.75rem; padding: 0; border: 0; }
  .tl::after, .tl--elbow::after { left: calc(-1.25rem - 0.15rem); right: auto; top: 0.3rem; bottom: auto; }
  .tl--elbow time::after { display: none; }
  .tl img { width: 12rem; }
}

/* L4GG from 2016–2026: photo + a staggered timeline on a center baseline, with year markers */
.chrono { padding: 0; }
.chrono__row { display: grid; }
.chrono__photo { width: 100%; height: 100%; min-height: 16rem; max-height: 26rem; object-fit: cover; object-position: 50% 20%; }
.chrono__main { padding: clamp(2rem, 4vw, 3.5rem) var(--gutter); min-width: 0; }
.chrono .timeline { --accent: var(--blue-line); }
.chrono .timeline__track { --tl-h: 32rem; --base: 0.5; gap: 0; padding-left: 0.25rem; padding-right: 8rem; }
.chrono .tl { --pitch: 7.25rem; flex: 0 0 13.5rem; margin-right: calc(var(--pitch) - 13.5rem); --len: calc(var(--h, 6rem) + 3.2rem); }
.chrono .tl img.tl-shot { display: block; width: 17rem; height: auto; aspect-ratio: auto; margin: 0; border: 1px solid var(--rule); }
.tl-shot-btn { display: block; margin: 0 0 0.7rem; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tl-shot-btn:focus-visible { outline: 3px solid var(--sky-line); outline-offset: 3px; }
.shot-dialog { max-width: min(92vw, 62rem); padding: 0; border: 0; background: transparent; }
.shot-dialog::backdrop { background: rgba(2, 17, 46, 0.78); }
.shot-dialog img { display: block; width: 100%; height: auto; background: #fff; }
.tl-year { flex: 0 0 4.75rem; align-self: flex-start; margin: calc(var(--tl-h) * var(--base) - 1.1rem) 0 0; position: relative; z-index: 2; list-style: none; }
.tl-year span { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 1rem; background: var(--navy); border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; line-height: 1; color: var(--white); box-shadow: 0 0 0 4px var(--tl-bg, #fff), 0 3px 10px rgba(5, 36, 96, 0.22); }
@media (min-width: 62rem) { .chrono__row { grid-template-columns: minmax(12rem, 22%) minmax(0, 1fr); } .chrono__photo { max-height: none; } .chrono__main { padding-left: 2.5rem; } }
@media (max-width: 48rem) {
  .chrono .tl, .chrono .tl--up, .chrono .tl--down { margin-right: 0; margin-left: 0 !important; flex-basis: auto; }
  .tl-year { margin: 1.5rem 0 1rem -1.25rem; }
  .tl-year span { height: 2rem; font-size: 0.8125rem; }
  .chrono .tl img.tl-shot { width: min(100%, 20rem); }
}

/* ---------- Pillar stage: gradient panel at the left + timeline (R5) ---------- */
.pillar__stage { --base: 0.55; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.pillar__panel {
  --pad: clamp(1.5rem, 2.4vw, 2.5rem);
  position: relative; container-type: inline-size; color: var(--white); background: var(--panel);
  padding: var(--pad); display: flex; flex-direction: column; justify-content: flex-start;
}
.pillar__panel .icon { --s: clamp(3rem, 4.2vw, 4.25rem); --fill: var(--banner-icon); margin-bottom: clamp(1.1rem, 2vw, 1.75rem); }
.pillar__panel h1 { color: var(--white); margin: 0 0 1.25rem; font-size: clamp(1.75rem, 9.4cqi, 2.875rem); font-weight: 600; line-height: 0.9; }
.pillar__def { margin: 0; max-width: 24rem; font-weight: 700; font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); line-height: 1.45; color: var(--white); }
.pillar__stage .timeline { background: var(--white); padding-block: 1rem; }
@media (min-width: 62rem) {
  /* intro is a full-width band above its timeline */
  .pillar__stage { grid-template-columns: minmax(0, 1fr); }
  .pillar__panel { padding: clamp(3rem, 6vw, 5.5rem) max(var(--pad), calc((100% - var(--wrap)) / 2)); }
  .pillar__panel h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); }
  .pillar__def { max-width: var(--measure-text); font-size: 1rem; font-weight: 500; line-height: 1.55; }
  .pillar__stage .timeline { padding-block: 0; height: var(--tl-h); }
  .pillar__stage .timeline__track { --tl-h: inherit; }
}
@media (max-width: 61.99rem) { .pillar__stage .timeline { padding: 2rem var(--gutter) 2.5rem; } .pillar__stage .timeline__track { height: auto; } }
.pillar__timeline { display: none; }

/* We Are Powered by Pro Bono: large display heading (R5) */
.display-h { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 600; line-height: 0.9; margin: 0 0 1.75rem; color: var(--navy); }

/* ---------- Pillar program spread ---------- */
.program__top { display: grid; grid-template-columns: minmax(0, 1fr); }
.program__intro { padding: 3rem var(--gutter) 1.5rem; container-type: inline-size; }
.program__tag { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 2.5rem; }
.program__tag .icon { --s: 2rem; }
.program__tag h5 { margin: 0; }
/* Size to the column so the longest word always fits on one line — never break big headings */
.program__intro h2 { font-size: clamp(1.875rem, 16cqi, 2.875rem); margin-bottom: 1.25rem; }
.program__intro .lede { margin-bottom: 2.5rem; }
.program__intro p:not(.lede), .program__content p { max-width: var(--measure-text); }
.program__media { background: var(--sky); padding: 2rem var(--gutter); }
.program__media figure { max-width: 26rem; margin-inline: auto; }
@media (min-width: 62rem) { .program__media figure, .program__media .stickybox { position: sticky; top: calc(var(--nav-h) + 1.5rem); width: 100%; } }
.program__media .photo { border-top: 0.5rem solid var(--accent); }
.program__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.program__media .pullquote { margin-top: 0; }
.illus { display: grid; place-items: center; width: clamp(7rem, 12vw, 9rem); aspect-ratio: 1; margin: 2rem 0; border-radius: 50%; background: var(--accent); color: var(--white); text-align: center; font-size: 0.8125rem; line-height: 1.3; padding: 1rem; }
.program__content { padding: 2.5rem var(--gutter) 3rem; }
.program__content .pullquote { margin-top: 0; }
.program__pair { display: grid; gap: 1.5rem 2rem; margin-top: 2rem; max-width: var(--measure-text); }
.program__pair h4 { margin-bottom: 0.75rem; }
.callout { background: var(--sky); padding: 1.75rem; margin-top: 2.5rem; }
.callout h5 { margin-bottom: 1rem; }
.callout p { font-size: 0.9375rem; line-height: 1.5; }
.callout hr { background: var(--accent); margin: 1.5rem 0; }
.callout__stat { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; margin: 0; }
.callout__stat img { width: 3rem; }
.callout__stat p { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 0.9375rem; color: var(--navy); }
@media (min-width: 62rem) {
  .program__top {
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 3.6fr) minmax(0, 5.4fr);
    padding-left: max(var(--gutter), calc((100% - 84rem) / 2));
    padding-right: max(var(--gutter), calc((100% - 84rem) / 2));
  }
  .program__intro { padding: 4rem 2rem 3rem 0; }
  .program__media { padding: 3rem 2rem; display: grid; align-items: start; }
  .program__content { padding: 4rem 0 3rem 3rem; }
}

/* ---------- Stat band (gradient per pillar) ---------- */
.statband { position: relative; isolation: isolate; background: var(--band, var(--accent-tint)); padding-block: 2.75rem 3.25rem; }
.statband::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain) 0 0 / 240px auto; opacity: 0.6; mix-blend-mode: overlay; }
.statband__title { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2.25rem; color: var(--navy); }
.statband__title::after { content: ""; flex: 1; height: 1px; background: var(--accent); }
/* Stats ease in and count up when their band scrolls into view (see js/report.js) */
.js .stat { opacity: 0; transform: translateY(14px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.js .stat.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .stat { opacity: 1; transform: none; transition: none; } }
.stats { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.statband .wrap { container-type: inline-size; }
@container (min-width: 64rem) { .stats { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 2rem 1.5rem; } }
.stat__num { display: block; white-space: nowrap; font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.02em; font-size: var(--fs-stat); line-height: 1; color: var(--accent-text); }
.statband .stat__num { font-size: clamp(1.75rem, calc(18cqi / var(--cols, 6)), 3.25rem); }
.stat__label { display: block; margin-top: 0.75rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem; line-height: 1.35; color: var(--navy); max-width: 15rem; }
.panel-navy .stat__num { color: var(--white); }
.panel-navy .stat__label { color: var(--sky); }

/* ---------- Hero banner (reusable) ---------- */
.hero { position: relative; isolation: isolate; display: grid; place-items: center; text-align: center; min-height: 60vh; padding: 4rem var(--gutter); background: var(--navy) center / cover no-repeat; color: var(--white); }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(5, 36, 96, 0.72); z-index: -1; }
.hero > * { max-width: 56rem; }

/* ---------- Footer ---------- */
.report-footer { background: var(--navy); color: var(--white); padding-block: clamp(2.5rem, 5vw, 4rem); }
.report-footer .wrap { display: grid; gap: 1.5rem; justify-items: start; }
.report-footer .logo { width: 2.75rem; }
.report-footer .logo--full { width: clamp(11rem, 18vw, 14rem); height: auto; }
.report-footer p { margin: 0; font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: 0.04em; }
.report-footer a:not(.btn) { color: var(--white); }
@media (min-width: 48rem) { .report-footer .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } }


.timeline__nav[hidden] { display: none; }
.timeline__nav button:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.timeline__scroller:focus-visible { outline: 3px solid var(--sky-line); outline-offset: -3px; }

/* Pro bono: block centered, text left-aligned */
.probono .wrap{width:fit-content;max-width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.probono .cols-3{max-width:var(--measure-text)}

/* ---------- Design update (Oct 29 print) ---------- */
/* arc timeline draws on when it enters the viewport */
.js .step:not(:last-child)::before { clip-path: inset(-2px 100% -2px -2px); transition: clip-path 1.3s cubic-bezier(0.5, 0.05, 0.25, 1) 0.25s; }
.js .step--2:not(:last-child)::before { transition-delay: 1.6s; }
.js .step::after { opacity: 0; transform: scale(0.3); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.js .step--2::after { transition-delay: 1.35s; } .js .step--3::after { transition-delay: 2.65s; }
.js .arcs.is-in .step:not(:last-child)::before { clip-path: inset(-2px -2px -2px -2px); }
.js .arcs.is-in .step::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .step::before, .js .step::after { transition: none !important; } }

/* 10 years by the numbers: a full-screen moment */
.numbers { position: relative; color: var(--white); display: grid; align-content: center; min-height: max(100svh, 44rem); padding-block: clamp(3rem, 8vw, 6rem);
  background: radial-gradient(70% 60% at 100% 85%, rgba(34,150,228,.95) 0%, rgba(34,150,228,0) 75%), radial-gradient(60% 55% at 0% 100%, rgba(22,100,128,.9) 0%, rgba(22,100,128,0) 75%), linear-gradient(180deg, #131E5C 0%, #1B3F94 55%, #1C5CAA 100%); }
.numbers .display-h { color: var(--white); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.numbers .stats.numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(91,211,247,.55); }
.numbers .stat { display: grid; justify-items: center; align-content: center; text-align: center; padding: clamp(1.75rem, 4.5vw, 3.5rem) 1rem; border-bottom: 1px solid rgba(91,211,247,.55); }
.numbers .stat:nth-child(odd) { border-right: 1px solid rgba(91,211,247,.55); }
.numbers .stat__num { color: #5BD3F7; font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.5rem); }
.numbers .stat__label { color: var(--white); font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.25rem); line-height: 1.3; max-width: 17rem; margin-top: 0.9rem; }

/* What Sets L4GG Apart: gradient page with floating, drifting photos */
.programs { position: relative; overflow: hidden; color: var(--white); background: var(--blend); display: grid; grid-template-columns: minmax(0, 1fr); }
.programs h5, .programs h1 { color: var(--white); }
.programs__text { padding: clamp(3rem, 6vw, 5rem) var(--gutter); max-width: none; }
.programs__text h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 600; margin-bottom: clamp(2rem, 8vw, 7rem); }
.programs__text p { color: var(--white); font-family: var(--font-ui); font-weight: 500; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.4; max-width: 30rem; }
.programs__float { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0 var(--gutter) 2rem; position: relative; z-index: 1; }
.float { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; will-change: transform; }
@media (min-width: 56rem) {
  .programs { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 64rem; }
  .programs__text { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
  .programs__float { display: block; padding: 0; }
  .float { position: absolute; height: auto; transform: translate3d(0, var(--py, 0px), 0); }
  .float--a { left: 0; top: 0; width: 36%; aspect-ratio: 1; }
  .float--b { left: 22%; top: 6%; width: 80%; aspect-ratio: 7 / 5; }
  .float--c { left: 0; top: 33%; width: 36%; aspect-ratio: 1; }
  .float--d { left: 51%; top: 44%; width: 55%; aspect-ratio: 1; }
  .float--e { left: 0; top: 59%; width: 64%; aspect-ratio: 4 / 3; }
  .float--f { left: 64%; top: 84%; width: 50%; aspect-ratio: 1; }
}

/* Our Distinctive Organizational Model */
.probono .wrap.model { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: grid; gap: 2.5rem 4rem; }
@media (min-width: 56rem) { .probono .wrap.model { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.model__intro h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 600; margin-bottom: 2rem; }
.model__lede p { font-family: var(--font-ui); font-weight: 500; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.4; color: var(--navy); max-width: 26rem; }
.model__img { display: block; width: 72%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 2.5rem; will-change: transform; }
.model__list { list-style: none; margin: 0; padding: 0 0 0 clamp(1.25rem, 3vw, 2rem); border-left: 1px solid var(--sky-line); display: grid; gap: 3rem; }
.model__list li { position: relative; }
.model__list li::before { content: ""; position: absolute; left: calc(-1 * clamp(1.25rem, 3vw, 2rem) - 0.4rem); top: 0.55rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--sky-line); }
.model__list h3 { font-family: var(--font-ui); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; margin-bottom: 0.6rem; }
.model__list p { margin: 0; max-width: var(--measure-text); }

/* ---------- Outline content additions ---------- */
.pillar__def + .pillar__def { margin-top: 1rem; }
.cases__grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
.case h3 { margin-bottom: 1rem; }
.case p { font-size: 0.9375rem; line-height: 1.5; }
.ahead { position: relative; color: var(--white); padding: clamp(4rem, 10vw, 8rem) var(--gutter); background: radial-gradient(75% 55% at 0% 88%, rgba(28,146,226,.95) 0%, rgba(28,146,226,0) 75%), radial-gradient(65% 50% at 100% 100%, rgba(22,98,124,.95) 0%, rgba(22,98,124,0) 75%), radial-gradient(90% 40% at 70% 40%, rgba(30,92,170,.5) 0%, rgba(30,92,170,0) 80%), linear-gradient(180deg, #131E5C 0%, #1B4296 50%, #1C6DB8 100%); }
.ahead__inner { max-width: 44rem; margin-inline: auto; }
.ahead h2 { color: var(--white); margin-bottom: 1.5rem; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 600; }
.ahead p { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); line-height: 1.3; }
.cta .wrap, .thanks .wrap { max-width: 44rem; }
.cta h2, .thanks h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 600; margin-bottom: 1.25rem; }
.cta .btn { margin-top: 1.5rem; }
.thanks__cols { display: grid; gap: 2rem 3rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .thanks__cols { grid-template-columns: 1fr 2fr; } }
.thanks ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; line-height: 1.7; }
.thanks__staff { columns: 3 11rem; column-gap: 2rem; }
.thanks__sub { margin: 0 0 0.75rem; font-size: 0.875rem; }
.pullquote--long { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.25; }

/* ---------- Horizontal timelines: tinted stage + "more to the right" cues ---------- */
.chrono { --tl-bg: var(--sky); }
.chrono__main { background: var(--tl-bg); box-shadow: inset 0 4px 0 var(--sky-line); }
.pillar { --tl-bg: color-mix(in srgb, var(--accent-tint) 70%, #fff); }
.pillar__stage .timeline { background: var(--tl-bg); box-shadow: inset 0 4px 0 var(--accent); }
.timeline::before, .timeline::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(3.5rem, 9vw, 7rem); z-index: 2; pointer-events: none; transition: opacity 0.5s ease; }
.timeline::after { right: 0; background: linear-gradient(to right, transparent, var(--tl-bg, #fff) 85%); }
.timeline::before { left: 0; width: clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(to left, transparent, var(--tl-bg, #fff) 85%); opacity: 0; }
.timeline:not(.is-start)::before { opacity: 1; }
.timeline.is-end::after, .timeline.is-fit::after { opacity: 0; }
.timeline__hint { position: absolute; right: clamp(0.75rem, 2vw, 1.5rem); top: 50%; z-index: 4; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--navy); color: var(--white); font: 700 1.125rem/1 var(--font-ui); box-shadow: 0 4px 14px rgba(5, 36, 96, 0.28); animation: tl-nudge 1.8s ease-in-out infinite; transition: opacity 0.5s ease, visibility 0.5s; }
.timeline__hint:hover { background: var(--navy-shade); }
.timeline.has-moved .timeline__hint, .timeline.is-end .timeline__hint, .timeline.is-fit .timeline__hint { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
@keyframes tl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { .timeline__hint { animation: none; } }
@media (max-width: 48rem) { .timeline__hint, .timeline::before, .timeline::after { display: none; } }

/* Pillar intro bands: icon + title centered, text column centered but left-aligned */
.pillar__panel { display: block; text-align: left; }
.pillar__panel .icon { display: block; margin-left: max(0px, calc((100% - 31rem) / 2)); }
.pillar__panel h1, .pillar__def { width: 100%; max-width: 31rem; margin-inline: auto; }
.pillar__panel h1 { margin-bottom: 1.25rem; }

/* ---------- Mobile menu (hamburger) ---------- */
.nav-toggle, .nav-title, .nav-panel { display: none; }
@media (max-width: 62rem) {
  .report-nav nav, body .side-nav > h2, body .side-nav > ul, body .side-nav .side-nav__brand, body .side-nav .side-nav__foot, body .side-nav .side-nav__logo { display: none; }
  .report-nav .wrap { justify-content: space-between; }
  body.opt-b .side-nav { justify-content: space-between; padding: 0 1rem; overflow: visible; }
  .nav-title { display: block; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
  .nav-toggle { display: grid; align-content: center; gap: 0.3rem; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; padding: 0 0.7rem; background: none; border: 0; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: var(--white); border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }
  .nav-panel { display: block; position: fixed; z-index: 49; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    background: rgba(5, 36, 96, 0.98); border-bottom: 3px solid var(--sky-line); box-shadow: 0 18px 30px rgba(2, 17, 46, 0.35);
    opacity: 0; visibility: hidden; transform: translateY(-0.75rem); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
  .nav-open .nav-panel { opacity: 1; visibility: visible; transform: none; }
  .nav-panel ul { display: block; list-style: none; margin: 0; padding: 0.5rem 0 1rem; }
  .nav-panel li { margin: 0; }
  .nav-panel .chapter-link { display: block; padding: 0.95rem var(--gutter, 1.25rem); font-size: 0.875rem; color: rgba(255, 255, 255, 0.88); border-bottom: 0; border-left: 4px solid transparent; }
  .nav-panel .chapter-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
  .nav-panel .chapter-link[aria-current="true"] { color: var(--white); background: rgba(255, 255, 255, 0.1); border-left-color: var(--coral); }
}
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav-toggle span { transition: none; } }

@media (max-width: 48rem) { .tl img, .chrono .tl img.tl-shot, .tl-shot-btn { max-width: 100%; } .timeline__scroller { padding-left: 0.5rem; } }

/* Timeline arrows: round navy buttons at the left/right edges, vertically centered */
.timeline__nav, .chrono .timeline__nav { position: absolute; inset: 0; top: 0; right: 0; z-index: 4; display: block; gap: 0; pointer-events: none; }
.timeline__nav button { position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border: 0; background: var(--navy); color: var(--white); font-size: 1.125rem; pointer-events: auto;
  box-shadow: 0 4px 14px rgba(5, 36, 96, 0.28); transition: opacity 0.35s ease, background-color 0.15s ease, visibility 0.35s; }
.timeline__nav button:first-child { left: clamp(0.75rem, 2vw, 1.5rem); }
.timeline__nav button:last-child { right: clamp(0.75rem, 2vw, 1.5rem); animation: tl-nudge 1.8s ease-in-out infinite; }
.timeline.has-moved .timeline__nav button:last-child { animation: none; }
.timeline__nav button:hover { background: var(--navy-shade); color: var(--white); }
.timeline__nav button:disabled { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .timeline__nav button:last-child { animation: none; } }

/* ---------- Program articles: centered text column, photo and quotes in the margins ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); }
.article__main { max-width: 34rem; margin-inline: auto; width: 100%; font-size: 1.0625rem; line-height: 1.6; }
.article__main p { margin: 0 0 1.1em; max-width: none; }
.article__main .program__tag { margin-bottom: 1.75rem; }
.article__main h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 500; line-height: 0.95; margin-bottom: 1.25rem; }
.article__main .lede { font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.3; margin: 0 0 2.25rem; }
.article__main h4 { margin: 2.25rem 0 0.75rem; font-size: 1.5rem; }
.article__left, .article__right { max-width: 34rem; margin-inline: auto; width: 100%; min-width: 0; }
.article__left figure { margin: 0; }
.article__left .photo { border-top: 0.5rem solid var(--accent); }
.article__left img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.article__right .pullquote { margin: 0 0 1.75rem; font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem); line-height: 1.3; }
.article__right .callout { margin: 0 0 1.5rem; padding: 1.25rem; }
.article__right .callout p { font-size: 0.875rem; line-height: 1.5; }
.article__right .callout h5 { margin-bottom: 0.75rem; }
@media (min-width: 72rem) {
  .article { grid-template-columns: minmax(11rem, 1fr) minmax(0, 34rem) minmax(13rem, 1.15fr); gap: 3.5rem; }
  .article__main { order: 2; } .article__left { order: 1; } .article__right { order: 3; }
  .article__left, .article__right { max-width: none; margin: 0; }
  .article__left .article__rail.is-sticky, .article__right .article__rail.is-sticky { position: sticky; top: var(--rail-top, calc(var(--nav-h) + 1.75rem)); }
}

/* Call to action: fully centered */
.cta .wrap { text-align: center; }
.cta .prose, .cta .prose p { margin-inline: auto; }