:root {
  --night: #0a1630;
  --night-2: #10224a;
  --navy: #1b3668;
  --ink: #13213d;
  --ink-2: #44506a;
  --paper: #f7f2e8;
  --cream: #fffbf4;
  --gold: #e9b949;
  --gold-2: #f7d888;
  --teal: #2d6f71; /* 4.8:1 or better on paper, cream, white and blush (WCAG AA for small text) */
  --blush: #f5e6df;
  --line: rgba(27, 54, 104, 0.14);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --r: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: min(1200px, calc(100% - 40px));
  --navh: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.section { padding: clamp(72px, 10vw, 128px) 0; }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.eyebrow--gold { color: var(--gold); }
.h2 {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 120;
  font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--navy); margin-bottom: 20px; text-wrap: balance;
}
.h2 em { color: var(--teal); font-weight: 400; }
.h2--light { color: #fff; }
.h2--light em { color: var(--gold-2); }

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.section-head--row .h2 { margin-bottom: 0; }
.section-head__lede { font-size: 19px; color: var(--ink-2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1.5px solid transparent; white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--gold { background: var(--gold); color: var(--night); box-shadow: 0 8px 24px -10px rgba(233, 185, 73, 0.8); }
.btn--gold:hover { background: var(--gold-2); }
.btn--ink { background: var(--navy); color: #fff; }
.btn--ink:hover { background: var(--night-2); }
.btn--ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.btn--ghost:hover { border-color: #fff; }
.btn--line { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--line:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.btn--soft { background: var(--paper); color: var(--navy); border-color: var(--line); }
.btn--soft:hover { border-color: var(--navy); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); text-decoration: none; margin-top: 18px; }
.link-arrow::after { content: "→"; transition: transform 0.25s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow--light { color: var(--gold-2); }

[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: utility bar + main nav with dropdowns */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; transition: background 0.35s, box-shadow 0.35s; }
.site-head.is-solid, .site-head.is-open { background: rgba(10, 22, 48, 0.94); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.util { height: 34px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.1); transition: height 0.3s var(--ease), opacity 0.3s, border-color 0.3s; }
.site-head.is-solid .util { height: 0; opacity: 0; border-color: transparent; }
.util__in { width: var(--wrap); max-width: 1240px; margin-inline: auto; height: 34px; display: flex; justify-content: flex-end; align-items: center; gap: 22px; font-size: 13px; }
.util a { color: rgba(255,255,255,0.72); text-decoration: none; font-weight: 500; }
.util a:hover, .util a.is-active { color: var(--gold-2); }
.nav {
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 max(20px, calc((100% - 1240px) / 2)); transition: height 0.35s;
}
.site-head.is-solid .nav { height: var(--navh); }
.nav__logo img { height: 34px; width: auto; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.dd { position: relative; display: flex; align-items: center; }
.dd__top { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 2px 10px 10px; background: none; border: 0; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.dd__btn { background: none; border: 0; color: rgba(255,255,255,0.65); width: 26px; height: 34px; display: grid; place-items: center; padding: 0; }
.dd__btn--label { width: auto; height: auto; color: rgba(255,255,255,0.85); padding: 10px 10px; display: inline-flex; }
.dd__btn svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.dd:hover .dd__btn svg, .dd.is-open .dd__btn svg { transform: rotate(180deg); }
.dd:hover .dd__top, .dd.is-current .dd__top { color: #fff; }
.dd.is-current .dd__top::after { content: ""; position: absolute; left: 10px; right: 2px; bottom: 2px; height: 2px; background: var(--gold); border-radius: 2px; }
.dd__menu {
  position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px; margin-top: 4px;
  background: var(--cream); border-radius: 16px; box-shadow: 0 24px 50px -16px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.dd:hover .dd__menu, .dd.is-open .dd__menu { opacity: 1; visibility: visible; transform: none; }
.dd__menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.dd__menu a:hover, .dd__menu a:focus-visible { background: var(--paper); }
.dd__note { font-size: 12px; color: var(--ink-2); padding: 8px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.ext { color: var(--teal); font-size: 0.85em; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: none; position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform 0.3s var(--ease); }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.drawer {
  position: fixed; left: 0; right: 0; top: 72px; z-index: 49; background: var(--night);
  display: grid; padding: 4px 20px 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto;
}
.drawer details { border-bottom: 1px solid rgba(255,255,255,0.08); }
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; color: #fff; font-family: var(--serif); font-size: 24px; padding: 12px 0; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer__sub { display: grid; padding: 0 0 12px; }
.drawer__sub a { color: rgba(255,255,255,0.82); text-decoration: none; padding: 9px 0 9px 12px; font-size: 16px; }
.drawer__util { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 18px 0 4px; }
.drawer__util a { color: var(--gold-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.drawer .btn { margin-top: 16px; }

/* Hero */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; color: #fff;
  background: radial-gradient(1200px 700px at 80% 0%, #1d3a75 0%, transparent 60%), radial-gradient(900px 600px at 0% 100%, #173263 0%, transparent 60%), var(--night);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: 160px 0 80px;
}
.hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__inner {
  position: relative; width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(32px, 6vw, 90px); align-items: center;
  pointer-events: none;
}
.hero__inner a, .hero__inner button { pointer-events: auto; }
.star4 { width: 12px; height: 12px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.hero__title {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 7.4vw, 104px); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 28px;
}
.hero__title em { color: var(--gold-2); }
.hero__title .w { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(8px); animation: rise 0.9s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.hero__lede { font-size: 18px; color: rgba(255,255,255,0.8); max-width: 46ch; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.play-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; position: relative; }
.play-dot::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid var(--night); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.hero__legend { margin-top: 26px; font-size: 14px; color: rgba(255,255,255,0.8); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero__legend .lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero__legend .hint { color: rgba(255,255,255,0.55); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot--blue { background: #bcd3ff; box-shadow: 0 0 8px #9fc0ff; }
.dot--gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.hero__card { position: relative; pointer-events: auto; }
.hero__photo {
  border-radius: 999px 999px var(--r) var(--r); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12);
  transform: perspective(900px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.6s var(--ease);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transform: scale(1.06); }
.northstar {
  position: absolute; left: -36px; bottom: 34px; right: 30px;
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  background: rgba(255, 251, 244, 0.97); color: var(--ink); border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.5);
}
.northstar__icon { flex: none; width: 30px; height: 30px; background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.northstar__k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.northstar__v { font-family: var(--serif); font-size: 18px; line-height: 1.25; }

/* Impact */
.impact { background: var(--navy); color: #fff; position: relative; }
.impact__grid { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 40px 28px; border-left: 1px solid rgba(255,255,255,0.12); }
.stat:first-child { border-left: 0; }
.stat__n { font-family: var(--serif); font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__n small { font-size: 0.5em; color: var(--gold-2); margin-left: 2px; }
.stat__n .stat__pre { display: block; font-size: 15px; font-family: var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 6px; }
.stat__l { margin-top: 10px; color: rgba(255,255,255,0.72); font-size: 15px; }

/* Video */
.video { background: var(--cream); }
.video__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.video__copy p { color: var(--ink-2); font-size: 18px; }
.video__player {
  position: relative; border: 0; padding: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; width: 100%;
  background: #000; box-shadow: 0 40px 70px -40px rgba(19, 33, 61, 0.6);
}
.video__player img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.video__player:hover img { transform: scale(1.03); }
.video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
  --s: clamp(54px, 12vw, 88px);
  position: absolute; left: 50%; top: 62%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: var(--gold); display: grid; place-items: center; transition: transform 0.35s var(--ease);
  box-shadow: 0 0 0 10px rgba(233,185,73,0.25);
}
.video__play svg { width: 32px; fill: var(--night); margin-left: 4px; }
.video__player:hover .video__play { transform: scale(1.08); }
.video__tag { position: absolute; left: 16px; top: 16px; background: rgba(10,22,48,0.78); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); }

/* Journey */
.journey { background: var(--paper); }
.journey__bar {
  position: sticky; top: var(--navh); z-index: 5; background: var(--paper);
  margin: 0 -20px 26px; padding: 8px 20px 4px;
  box-shadow: 0 1px 0 transparent; transition: box-shadow 0.3s;
}
.journey__bar.is-stuck { box-shadow: 0 12px 24px -20px rgba(19,33,61,0.5); }
.track { position: relative; height: 92px; user-select: none; }
.track__rail { position: absolute; left: 10%; right: 10%; top: 26px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.track__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: 99px; transition: width 0.5s var(--ease); }
.track__stops { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.stop { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 0; position: relative; z-index: 2; }
.stop__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); border: 2px solid var(--line); display: grid; place-items: center; transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s, box-shadow 0.35s; }
.stop__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background 0.35s; }
.stop.is-past .stop__dot { border-color: var(--teal); }
.stop.is-past .stop__dot::after { background: var(--teal); }
.stop.is-on .stop__dot { transform: scale(1.25); border-color: var(--gold); background: var(--navy); box-shadow: 0 0 0 8px rgba(233,185,73,0.2); }
.stop.is-on .stop__dot::after { background: var(--gold); }
.track:has(.track__range:focus-visible) .stop.is-on .stop__dot { outline: 3px solid var(--gold); outline-offset: 6px; }
.stop__label { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--navy); transition: color 0.3s; }
.stop__name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); font-weight: 600; }
.stop:not(.is-on) .stop__label { color: #5f6b82; } /* muted but still 4.8:1 on paper */
.track__range { position: absolute; left: 10%; right: 10%; top: 16px; width: 80%; opacity: 0; height: 28px; cursor: grab; z-index: 3; margin: 0; }
.journey__count { text-align: center; color: var(--ink-2); margin: 6px 0 8px; font-size: 17px; min-height: 1.6em; }
.journey__count strong { color: var(--navy); font-family: var(--serif); font-size: 22px; font-weight: 600; }

.programs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prog {
  background: var(--cream); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.prog__img { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.prog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease); }
.prog:hover .prog__img img { transform: scale(1.04); }
.prog__tag { position: absolute; left: 14px; top: 14px; background: rgba(255,251,244,0.94); color: var(--navy); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.prog__body { padding: 20px 22px 24px; }
.prog__title { font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--navy); margin-bottom: 8px; font-weight: 500; }
.prog__text { font-size: 15px; color: var(--ink-2); }
.prog__stages { display: flex; gap: 4px; margin-top: 16px; }
.prog__stages i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.prog__stages i.on { background: var(--teal); }
/* Out-of-stage programs recede through the photo and card surface only, so their text stays readable. */
.prog.is-dim { background: transparent; border-color: transparent; }
.prog.is-dim .prog__img img { opacity: 0.3; filter: grayscale(1); }
.prog.is-dim .prog__title { color: var(--ink-2); }
.prog.is-lit { box-shadow: 0 30px 60px -36px rgba(27,54,104,0.55); border-color: rgba(45,111,113,0.4); }
.journey__more { display: block; margin: 22px auto 0; background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 20px; font-weight: 600; color: var(--navy); }
.journey__more:hover { border-color: var(--navy); }

/* Teachers */
.teachers { background: var(--night); color: rgba(255,255,255,0.8); position: relative; overflow: hidden; }
.teachers::before { content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -400px; background: radial-gradient(circle, rgba(63,138,140,0.35), transparent 60%); }
.teachers__grid { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.teachers__intro > p:not(.eyebrow) { font-size: 18px; }
.awards { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.awards li { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); color: #fff; }
.awards:not(.is-in) li { opacity: 0; }
.awards.is-in li { animation: reveal 0.5s var(--ease) backwards; }
.award-feature { background: var(--cream); color: var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.7); }
.award-feature__photo { aspect-ratio: 16 / 8; overflow: hidden; background: #fff; position: relative; }
.award-feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.award-feature__photo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background: rgba(10, 22, 48, 0.62); backdrop-filter: grayscale(1);
  transform: translateX(100%); transition: transform 0.6s var(--ease);
}
.award-feature[data-w="1"] .award-feature__photo::after { transform: translateX(0); }
.award-feature__body { padding: 26px 28px 30px; }
.award-feature__k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.winners { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.winner { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; transition: background 0.3s var(--ease), color 0.3s, border-color 0.3s; }
.winner.is-on { border-color: var(--navy); background: var(--navy); color: #fff; }
.winner__name { display: block; font-family: var(--serif); font-size: 19px; }
.winner__school { display: block; font-size: 13px; opacity: 0.75; }
.winner__story { color: var(--ink-2); min-height: 6.4em; transition: opacity 0.2s; }
.split { margin-top: 18px; }
.split__bar { display: flex; border-radius: 12px; overflow: hidden; font-size: 13px; font-weight: 600; }
.split__bar span { width: 0; padding: 12px; white-space: nowrap; overflow: hidden; transition: width 1.1s var(--ease); }
.split.is-in .split__bar span { width: var(--w); }
.split__a { background: var(--gold); color: var(--night); }
.split__b { background: var(--teal); color: #fff; }
.split__note { font-size: 13px; color: var(--ink-2); margin-top: 10px; }

/* GEMs */
.gems { background: linear-gradient(180deg, var(--cream), var(--blush)); overflow: hidden; padding-bottom: 0; }
.gems__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.gems__stage { position: relative; aspect-ratio: 1; max-width: 540px; width: 100%; margin-inline: auto; }
.gems__stage::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, var(--gemglow, rgba(210,58,85,0.35)), transparent 65%); transition: background 0.8s; }
.gem3d { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.gem3d:active { cursor: grabbing; }
.gem3d canvas { width: 100% !important; height: 100% !important; }
.gem-fallback { position: absolute; inset: 22%; width: 56%; height: 56%; }
.gem-fallback #gemSvg > polygon:first-child { fill: var(--gemcolor, #D23A55); transition: fill 0.6s; }
.gem3d.is-3d .gem-fallback { display: none; }
.gems__caption { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-family: var(--serif); font-size: 22px; color: var(--navy); font-style: italic; }
.gems__lede { color: var(--ink-2); font-size: 18px; }
.gems__panel strong { color: var(--navy); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(27,54,104,0.08); margin: 26px 0 18px; }
.seg__btn { border: 0; background: none; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); transition: background 0.3s var(--ease), color 0.3s, box-shadow 0.3s; }
.seg__btn.is-on { background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(19,33,61,0.12); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier {
  text-align: left; border: 1.5px solid var(--line); background: rgba(255,255,255,0.7); border-radius: 16px; padding: 14px 14px 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s, box-shadow 0.3s; position: relative; overflow: hidden;
}
.tier::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.tier:hover { transform: translateY(-2px); border-color: var(--c); }
.tier.is-on { border-color: var(--c); background: #fff; box-shadow: 0 16px 30px -18px var(--c); }
.tier.is-on::before { transform: scaleX(1); }
.tier__swatch { width: 18px; height: 18px; background: var(--c); clip-path: polygon(25% 0, 75% 0, 100% 35%, 50% 100%, 0 35%); margin-bottom: 10px; flex: none; }
.tier__name { display: block; font-family: var(--serif); font-size: 19px; color: var(--navy); line-height: 1.15; }
.tier__amt { display: block; font-size: 14px; color: var(--ink-2); }
.gems__sum { margin-top: 22px; padding: 20px 22px; border-radius: 18px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gems__sum-k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-2); font-weight: 600; }
.gems__sum-v { font-family: var(--serif); font-size: 34px; line-height: 1.1; }
.gems__sum-v small { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,0.72); }
.gems__fine { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.gems__fine a { color: var(--navy); }

.gemwall { margin-top: clamp(56px, 8vw, 96px); padding: 22px 0; border-top: 1px solid var(--line); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gemwall__row { display: flex; width: max-content; animation: marquee 120s linear infinite; }
.gemwall__set { display: flex; gap: 34px; padding-right: 34px; }
.gemwall:hover .gemwall__row { animation-play-state: paused; }
.gemwall__item { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 19px; color: var(--navy); white-space: nowrap; }
.gemwall__item i { width: 12px; height: 12px; clip-path: polygon(25% 0, 75% 0, 100% 35%, 50% 100%, 0 35%); background: var(--c); }
.gemwall__lead { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--teal); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Matcher */
.match { background: var(--paper); }
.matcher { max-width: 900px; margin-inline: auto; background: var(--cream); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 40px 80px -50px rgba(19,33,61,0.5); }
.matcher__step { animation: fadeUp 0.5s var(--ease); }
.matcher__step + .matcher__step { margin-top: 30px; padding-top: 30px; border-top: 1px dashed var(--line); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
.matcher__q { font-family: var(--serif); font-size: 26px; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.matcher__q span { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--gold-2); font-family: var(--sans); font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1.5px solid var(--line); background: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 500; font-size: 15px; transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s; }
.chip:hover { border-color: var(--navy); transform: translateY(-2px); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.matcher__result { margin-top: 30px; border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 0.8fr 1.2fr; background: var(--navy); color: #fff; animation: fadeUp 0.6s var(--ease); }
.matcher__result img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.result__body { padding: 28px 30px; }
.result__k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-2); font-weight: 600; margin-bottom: 8px; }
.result__t { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin-bottom: 10px; }
.result__d { color: rgba(255,255,255,0.8); margin-bottom: 20px; }
.result__alt { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,0.68); }
.result__alt a { color: var(--gold-2); }

/* Events */
.events { background: var(--cream); }
.events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.event { border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.event:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(19,33,61,0.5); }
.event__art { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--bg); position: relative; }
.event__art img { width: 58%; mix-blend-mode: multiply; transition: transform 0.6s var(--ease); }
.event:hover .event__art img { transform: scale(1.05); }
.event__date { position: absolute; left: 14px; top: 14px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.event__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.event__name { font-family: var(--serif); font-size: 26px; color: var(--navy); line-height: 1.1; }
.event__text { font-size: 15px; color: var(--ink-2); }
.countdown { margin-top: auto; display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--paper); }
.countdown b { font-family: var(--serif); font-size: 34px; font-weight: 500; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 14px; color: var(--ink-2); }
.event__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.event__actions .btn { flex: 1; }
.events__sponsor { text-align: center; margin-top: 34px; color: var(--ink-2); }
.events__sponsor a { color: var(--navy); font-weight: 600; }

/* Partners */
.partners { background: var(--paper); }
.partners__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.partners__grid > div > p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; }
.priorities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.priority {
  width: 100%; height: 100%; text-align: left; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; padding: 22px; min-height: 160px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  transition: background 0.35s var(--ease), color 0.35s, transform 0.35s var(--ease), border-color 0.35s;
}
.priority:hover { background: var(--navy); color: #fff; transform: translateY(-4px); border-color: var(--navy); }
.priority svg { width: 38px; height: 38px; stroke: var(--teal); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s; }
.priority:hover svg { stroke: var(--gold); }
.priority__t { font-family: var(--serif); font-size: 21px; line-height: 1.15; display: block; }
.priority__go { font-size: 13px; font-weight: 600; color: var(--teal); transition: color 0.35s; }
.priority:hover .priority__go { color: var(--gold-2); }

.biz { margin-top: clamp(56px, 7vw, 84px); }
.biz__k, .patrons__k { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); font-weight: 600; margin-bottom: 18px; }
.biz__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bcard { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; background: var(--navy); color: rgba(255,255,255,0.8); text-decoration: none; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.bcard:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(19,33,61,0.7); }
.bcard__t { font-family: var(--serif); font-size: 24px; color: #fff; line-height: 1.15; }
.bcard__d { font-size: 15px; flex: 1; }
.bcard__go { font-weight: 600; color: var(--gold-2); margin-top: 6px; }
.bcard__go::after { content: " →"; }
.patrons { margin-top: clamp(48px, 6vw, 72px); }
.patrons__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.patron { height: 120px; background: #fff; border-radius: 18px; border: 1px solid var(--line); display: grid; place-items: center; padding: 14px; transition: border-color 0.3s; }
.patron:hover { border-color: var(--navy); }
.patron img { max-height: 92px; object-fit: contain; }

/* Stories */
.stories { background: var(--cream); }
.stories__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.story { text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
.story__img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.story:first-child .story__img { aspect-ratio: 5 / 3; background: #fff; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.story:hover .story__img img { transform: scale(1.04); }
.story__date { font-size: 13px; color: var(--teal); font-weight: 600; }
.story__t { font-family: var(--serif); font-size: 23px; line-height: 1.18; color: var(--navy); }
.story:first-child .story__t { font-size: 28px; }
.story__d { color: var(--ink-2); font-size: 15px; }

/* Trust */
.trust { background: var(--night); color: rgba(255,255,255,0.8); }
.trust__grid { display: grid; grid-template-columns: 0.6fr 1.4fr 0.8fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.trust__seal { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--gold-2); font-size: 14px; font-weight: 600; }
.trust__seal img { width: min(180px, 100%); height: auto; border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7); transition: transform 0.35s var(--ease); }
.trust__seal:hover img { transform: translateY(-4px); }
.trust__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
.trust__list li { padding-left: 28px; position: relative; }
.trust__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.trust__list strong { color: #fff; }
.person { margin: 0 0 18px; display: flex; gap: 14px; align-items: center; }
.person img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--gold); }
.person figcaption strong { display: block; color: #fff; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.person figcaption span { font-size: 14px; }
.trust__values { display: flex; flex-wrap: wrap; gap: 8px; }
.trust__values span { font-size: 13px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 6px 12px; color: #fff; }

/* Give */
.give { background: var(--gold); }
.give .h2 em { color: var(--navy); }
.give__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.give__copy p { font-size: 18px; color: var(--ink); }
.give__options { display: grid; gap: 12px; }
.gcard { display: grid; grid-template-columns: 130px 1fr; gap: 4px 20px; padding: 22px 24px; background: var(--cream); border-radius: 20px; text-decoration: none; position: relative; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.gcard::after { content: "→"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--navy); transition: transform 0.35s var(--ease); }
.gcard:hover { transform: translateX(6px); box-shadow: 0 20px 40px -24px rgba(19,33,61,0.6); }
.gcard:hover::after { transform: translate(5px, -50%); }
.gcard__k { grid-row: span 2; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--teal); padding-top: 6px; }
.gcard__t { font-family: var(--serif); font-size: 24px; color: var(--navy); line-height: 1.15; padding-right: 30px; }
.gcard__d { font-size: 15px; color: var(--ink-2); padding-right: 30px; }

/* Footer */
.foot { background: var(--night); color: rgba(255,255,255,0.72); padding: 72px 0 30px; font-size: 15px; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.foot__logo { height: 38px; width: auto; margin-bottom: 18px; }
.foot__mission { max-width: 380px; }
.foot__h { color: #fff; font-weight: 600; margin-bottom: 10px; }
.foot p + p { margin-top: 10px; }
.foot a:not(.btn) { color: rgba(255,255,255,0.85); }
.foot .btn { margin-top: 14px; }
.foot__social { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px !important; }
.foot__social a { font-size: 14px; }
.foot__base { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 50px; padding-top: 22px; font-size: 13px; display: grid; gap: 6px; }
.foot__credit { opacity: 0.65; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 40px)); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 15px; z-index: 60; transition: transform 0.4s var(--ease); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4); }
.toast.is-on { transform: translate(-50%, 0); }

/* Reveal: an animation, so it never overrides a component's own transitions */
.rv:not(.is-in) { opacity: 0; }
.rv.is-in { animation: reveal 0.9s var(--ease) backwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } }

/* Responsive */
@media (max-width: 1080px) {
  .nav__links, .util { display: none; }
  .nav__burger { display: block; }
  .hero { padding-top: 120px; }
  .trust__grid { grid-template-columns: 0.6fr 1.4fr; }
  .trust__people { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .trust__people .person { margin: 0; }
  .trust__people .link-arrow { margin-top: 0; }
}
@media (max-width: 900px) {
  .hero { padding-top: 104px; padding-bottom: 72px; }
  .hero__inner, .video__grid, .teachers__grid, .partners__grid, .give__grid { grid-template-columns: 1fr; }
  .hero__card { max-width: 420px; margin-top: 40px; }
  .northstar { left: -10px; right: -10px; }
  .impact__grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.12); }
  .programs, .events__grid, .biz__grid { grid-template-columns: 1fr 1fr; }
  .programs:not(.show-all) .prog.is-dim { display: none; }
  .stories__grid { grid-template-columns: 1fr 1fr; }
  .stories__grid .story:first-child { grid-column: 1 / -1; }
  .biz__grid .bcard:last-child { grid-column: 1 / -1; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > div:first-child { grid-column: 1 / -1; }

  /* GEMs: picker first, gem sits right above the yearly total */
  .gems__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .gems__panel { display: contents; }
  .gems__panel > * { order: 1; }
  .gems__stage { order: 2; width: 230px; max-width: 230px; margin: 10px auto -6px; }
  .gems__caption { font-size: 18px; bottom: 2%; }
  .gems__sum, .gems__fine { order: 3; }
  .seg { align-self: flex-start; }
}
@media (max-width: 640px) {
  :root { --wrap: calc(100% - 32px); --navh: 64px; }
  body { font-size: 16px; }
  .nav { padding: 0 16px; }
  .nav__find { display: none; }
  .nav__logo img { height: 28px; }
  .hero__ctas .btn { width: 100%; }
  .hero__legend { font-size: 13px; }
  .hero__legend .hint { display: none; }
  .stat { padding: 28px 16px; }
  .journey__bar { margin: 0 -16px 20px; padding: 6px 16px 2px; }
  .track { height: 64px; }
  .stop__name { display: none; }
  .stop__label { font-size: 16px; }
  .journey__count { font-size: 15px; }
  .journey__count strong { font-size: 19px; }
  .programs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin: 0 -16px; padding: 4px 16px 18px; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .programs::-webkit-scrollbar { display: none; }
  .prog { scroll-snap-align: start; }
  .events__grid, .stories__grid, .tiers, .priorities, .trust__grid, .foot__grid, .biz__grid { grid-template-columns: 1fr; }
  .biz__grid .bcard:last-child { grid-column: auto; }
  .patrons__grid { grid-template-columns: 1fr 1fr; }
  .winners { grid-template-columns: 1fr; }
  .split__bar { flex-direction: column; }
  .split.is-in .split__bar span { width: 100%; }
  .matcher__result { grid-template-columns: 1fr; }
  .matcher__result img { min-height: 0; aspect-ratio: 16 / 9; }
  .gcard { grid-template-columns: 1fr; }
  .gcard__k { grid-row: auto; padding-top: 0; }
  .tier { display: flex; align-items: center; gap: 12px; }
  .tier__swatch { margin: 0; }
  .gems__stage { width: 200px; max-width: 200px; }
  .trust__seal { align-items: flex-start; }
  .trust__seal img { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .rv:not(.is-in), .awards:not(.is-in) li, .hero__title .w { opacity: 1; transform: none; filter: none; }
  .gemwall__row { animation: none; }
  .gemwall { overflow-x: auto; }
}

/* =========================================================
   Multi-page additions
   ========================================================= */
html:has(.subnav) { scroll-padding-top: 130px; }

/* Media Visionary credit */
.mv-badge {
  position: absolute; right: clamp(16px, 3vw, 36px); bottom: 22px; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: rgba(250, 250, 248, .94); color: #0C1E3E; text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(12,30,62,.08);
  backdrop-filter: blur(8px); transition: transform .3s var(--ease), box-shadow .3s;
  animation: mvIn .8s var(--ease) 2.6s both;
}
.phero .mv-badge { animation-delay: .6s; }
.mv-badge:hover { transform: translateY(-2px); }
.mv-badge img { width: 40px; height: auto; }
.mv-badge span { display: flex; flex-direction: column; font: 700 13px/1.15 var(--sans); letter-spacing: .01em; }
.mv-badge small { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #687080; }
.footer-mv { text-decoration: underline; text-underline-offset: 3px; }
@keyframes mvIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Homepage: mission strip */
.mission { border-top: 1px solid rgba(255,255,255,0.12); }
.mission__in { width: var(--wrap); margin-inline: auto; padding: 34px 0 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px 40px; align-items: baseline; }
.mission__k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); }
.mission__v { font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; color: #fff; max-width: 54ch; }
.mission__meta { font-size: 14px; color: rgba(255,255,255,0.72); white-space: nowrap; }
.mission__meta .link-arrow { margin: 0 0 0 4px; }

/* Homepage: teachers teaser + doorway */
.teachers__count { margin-top: 26px; font-size: 16px; max-width: 44ch; }
.teachers__count strong { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--gold-2); margin-right: 4px; }
.teachers__links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.teachers__links .link-arrow { margin: 0; }
.doorway { background: var(--cream); padding: clamp(40px, 6vw, 64px) 0 0; }
.doorway__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doorway__card { position: relative; display: grid; gap: 4px; padding: 24px 60px 24px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s var(--ease); }
.doorway__card::after { content: "→"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--navy); transition: transform 0.3s var(--ease); }
.doorway__card:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 20px 40px -26px rgba(19,33,61,0.6); }
.doorway__card:hover::after { transform: translate(5px, -50%); }
.doorway__k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.doorway__t { font-family: var(--serif); font-size: 26px; color: var(--navy); line-height: 1.15; }
.doorway__d { font-size: 15px; color: var(--ink-2); }
.prog__more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--navy); text-decoration: none; }
.prog__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.match__more { text-align: center; margin-top: 26px; }
.patrons__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.patrons__head .patrons__k { margin: 0; }
.patrons__head .link-arrow { margin: 0; }

/* Homepage: compact trust band */
.trustband { background: var(--night); color: rgba(255,255,255,0.8); padding: clamp(48px, 6vw, 72px) 0; }
.trustband__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
.trustband .trust__seal img { width: 116px; }
.trustband .h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 12px; }
.trustband__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15px; }
.trustband__facts li { position: relative; padding-left: 20px; }
.trustband__facts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.trustband__facts strong { color: #fff; }

/* Inner page hero */
.phero {
  position: relative; overflow: hidden; color: #fff; padding: 176px 0 76px;
  background: radial-gradient(900px 500px at 85% 0%, #1d3a75 0%, transparent 60%), var(--night);
}
.phero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(rgba(198,216,255,0.7) 1px, transparent 1.6px), radial-gradient(rgba(240,196,92,0.7) 1px, transparent 1.8px);
  background-size: 110px 96px, 290px 240px; background-position: 0 0, 70px 50px;
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.phero__in { position: relative; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 22px; }
.crumbs a { color: rgba(255,255,255,0.82); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.phero__title { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144; font-size: clamp(40px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.025em; max-width: 17ch; margin-bottom: 22px; text-wrap: balance; }
.phero__lede { font-size: 18px; color: rgba(255,255,255,0.82); max-width: 62ch; }
.phero__jump { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* Sticky in-page subnav */
.subnav { position: sticky; top: var(--navh); z-index: 20; background: rgba(247,242,232,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.subnav__in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background 0.25s, color 0.25s; }
.subnav a:hover { color: var(--navy); }
.subnav a.is-active { background: var(--navy); color: #fff; }

/* About */
.story { background: var(--cream); }
.story__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.lede { font-size: 19px; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0 0; }
.facts div { border-top: 2px solid var(--gold); padding-top: 12px; }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); color: var(--navy); line-height: 1.1; }
.story__photo { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 70px -40px rgba(19,33,61,0.6); }
.story__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.purpose { background: var(--navy); }
.purpose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.purpose__card { border-radius: 26px; padding: clamp(28px, 4vw, 44px); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.purpose__card--gold { background: var(--gold); border-color: var(--gold); }
.purpose__k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 14px; }
.purpose__card--gold .purpose__k { color: var(--navy); }
.purpose__v { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.22; color: #fff; text-wrap: pretty; }
.purpose__card--gold .purpose__v { color: var(--night); }
.values { background: var(--paper); }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.value__n { font-family: var(--serif); font-size: 20px; color: #8a6411; } /* deep gold: 5.2:1 on cream (brand gold is 1.8:1) */
.value__t { font-family: var(--serif); font-weight: 500; font-size: 30px; color: var(--navy); margin: 10px 0 8px; }
.value p { color: var(--ink-2); }
.board { background: var(--cream); }
.board__status { max-width: 820px; color: var(--ink-2); padding: 18px 22px; border-left: 3px solid var(--gold); background: var(--paper); border-radius: 0 14px 14px 0; }
.board__status strong { color: var(--navy); }
.board__h { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--navy); margin: 44px 0 18px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 20px; }
.people--sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.person-card { margin: 0; }
.person-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 18px; background: var(--paper); margin-bottom: 12px; }
.person-card strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--navy); line-height: 1.2; }
.person-card__role { display: block; font-size: 13px; font-weight: 600; color: var(--teal); margin-top: 4px; }
.person-card__org { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.board__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fin__grid { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.fin__links { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.fin__links .link-arrow { margin: 0; }

/* Next-step cards (end of inner pages) */
.nextband { background: var(--paper); padding: clamp(48px, 7vw, 80px) 0; }
.nextband__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nextcard { display: grid; gap: 6px; padding: 28px; border-radius: 22px; background: var(--navy); color: rgba(255,255,255,0.78); text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.nextcard:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(19,33,61,0.7); }
.nextcard__k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); }
.nextcard__t { font-family: var(--serif); font-size: 28px; color: #fff; line-height: 1.15; }
.nextcard--light { background: var(--cream); border: 1px solid var(--line); color: var(--ink-2); }
.nextcard--light .nextcard__k { color: var(--teal); }
.nextcard--light .nextcard__t { color: var(--navy); }

/* Supporters */
.supp-gems { background: var(--cream); }
.supp-gems .section-head { max-width: none; }
.supp-gems .section-head__lede { max-width: 640px; }
.gemtiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gemtier { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 18px; padding: 22px 24px; }
.gemtier:nth-child(2) { grid-column: 1 / -1; order: -1; }
.gemtier:nth-child(2) .names { columns: 4; }
.gemtier__k { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.gemtier__k i { width: 14px; height: 14px; background: var(--c); clip-path: polygon(25% 0, 75% 0, 100% 35%, 50% 100%, 0 35%); }
.gemtier__anon { font-size: 13px; font-style: italic; color: var(--ink-2); margin-top: 12px; }
.names { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.names li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.names--cols { columns: 4; }
.partnerwall { background: var(--paper); }
.partnerwall .section-head { max-width: none; align-items: end; }
.partnerwall .section-head__lede { max-width: 620px; }
.partnerwall__count { color: var(--ink-2); margin-bottom: 16px; font-size: 15px; }
.search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 18px; background: #fff; min-width: 280px; transition: border-color 0.25s; }
.search:focus-within { border-color: var(--navy); }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { border: 0; outline: 0; font: inherit; background: none; width: 100%; color: var(--ink); }

/* Get involved */
.match--tight { padding-top: clamp(56px, 7vw, 88px); }
.ways-sec { background: var(--cream); }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.way { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: background 0.35s var(--ease), border-color 0.35s, transform 0.35s var(--ease), color 0.35s; }
.way svg { width: 34px; height: 34px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s; }
.way__t { font-family: var(--serif); font-size: 24px; color: var(--navy); line-height: 1.15; transition: color 0.35s; }
.way__d { font-size: 15px; color: var(--ink-2); transition: color 0.35s; }
.way:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-4px); }
.way:hover svg { stroke: var(--gold); }
.way:hover .way__t { color: #fff; }
.way:hover .way__d { color: rgba(255,255,255,0.78); }
.volunteer { background: var(--night); color: rgba(255,255,255,0.8); }
.vol__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.vol__grid > div > p { font-size: 18px; }
.vol__ctas { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 26px; }
.vol__ctas .link-arrow { margin: 0; }
.vol__list { list-style: none; margin: 0; padding: 0; }
.vol__list li { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.vol__list li:first-child { padding-top: 0; }
.vol__n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--night); font-weight: 700; display: grid; place-items: center; }
.vol__list h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: #fff; margin-bottom: 4px; }
.vol__list p { font-size: 15px; }
.biz-sec { background: var(--paper); }
.biz-sec .section-head__lede a { color: var(--navy); font-weight: 600; }

/* Scholarships & awards */
.schol-sec { background: var(--paper); }
.schol-sec .section-head { max-width: none; }
.schol-sec .section-head__lede { max-width: 640px; }
.schoolpick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.schol__count { color: var(--ink-2); margin-bottom: 22px; }
.schol__count strong { color: var(--navy); font-family: var(--serif); font-size: 22px; font-weight: 600; }
.schol__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.schol { background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.schol__amt { font-size: 13px; font-weight: 700; color: var(--teal); }
.schol__t { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy); line-height: 1.15; margin: 6px 0 2px; }
.schol__sp { font-size: 14px; font-style: italic; color: var(--ink-2); }
.schol__who { font-size: 15px; margin-top: 10px; }
.schol__gpa { display: inline-block; margin-top: 10px; font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--paper); color: var(--ink-2); }
.schol__gpa strong { color: var(--navy); }
.schol details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; color: var(--ink-2); }
.schol summary { cursor: pointer; font-weight: 600; color: var(--navy); font-size: 15px; }
.schol details[open] summary { margin-bottom: 8px; }
.schol details ul { padding-left: 18px; margin: 10px 0; }
.schol details li + li { margin-top: 4px; }
.schol__essay { margin-top: 6px; }
.schol__note { margin-top: 24px; color: var(--ink-2); }
.schol__note a { color: var(--navy); font-weight: 600; }
.awards-sec { background: var(--night); color: rgba(255,255,255,0.8); }
.award__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.award { padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.award__prize { font-family: var(--serif); font-size: clamp(44px, 5vw, 60px); line-height: 1; color: var(--gold-2); }
.award__prize small { font-family: var(--sans); font-size: 15px; color: rgba(255,255,255,0.7); }
.award__t { font-family: var(--serif); font-weight: 500; font-size: 26px; color: #fff; line-height: 1.15; }
.award__sp { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); }
.award .btn { margin-top: 10px; white-space: normal; text-align: left; }
.others { margin-top: 48px; }
.others h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: #fff; margin-bottom: 14px; }
.others__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.others__list li { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); color: #fff; }

/* Footer link row */
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.foot__base { border-top: 0; margin-top: 18px; padding-top: 0; }

@media (max-width: 1080px) {
  .phero { padding-top: 132px; }
}
@media (max-width: 900px) {
  .mission__in { grid-template-columns: 1fr; }
  .mission__meta { white-space: normal; }
  .doorway__grid, .story__grid, .purpose__grid, .vol__grid, .award__grid, .nextband__grid, .fin__grid, .board__split { grid-template-columns: 1fr; }
  .trustband__grid { grid-template-columns: auto 1fr; }
  .trustband__grid > .btn { grid-column: 1 / -1; justify-self: start; }
  .values__grid, .ways, .gemtiers { grid-template-columns: 1fr 1fr; }
  .gemtier:nth-child(2) .names, .names--cols { columns: 3; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fin__grid .trust__seal { align-items: flex-start; }
}
@media (max-width: 640px) {
  .phero { padding: 116px 0 104px; }
  .phero__lede { font-size: 16px; }
  .mv-badge { right: 16px; bottom: 16px; padding: 6px 12px 6px 6px; gap: 8px; }
  .mv-badge img { width: 32px; }
  .mv-badge span { font-size: 12px; }
  .values__grid, .ways, .gemtiers { grid-template-columns: 1fr; }
  .gemtier:nth-child(2) .names, .names--cols { columns: 2; }
  .search { min-width: 0; width: 100%; }
  .schol__grid { grid-template-columns: 1fr; }
  .trustband__grid { grid-template-columns: 1fr; }
  .trustband .trust__seal img { width: 96px; }
  .people { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .people--sm { grid-template-columns: 1fr 1fr; }
  .doorway__t { font-size: 22px; }
}

/* External links already carry their own arrow */
.link-arrow:has(> span[aria-hidden="true"])::after { content: none; }
.awards-sec .section-head__lede { color: rgba(255,255,255,0.78); }
.award__prize small { display: block; margin-top: 8px; }

/* Giving invitation after the TI award story */
.story-cta { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.story-cta__k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.story-cta__t { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.15; color: var(--navy); margin-bottom: 8px; text-wrap: balance; }
.story-cta__d { color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.story-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.story-cta__actions .link-arrow { margin: 0; }
.story-cta__fine { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
/* Gold focus rings are too faint on the cream card; use navy there */
.award-feature :focus-visible { outline-color: var(--navy); }

/* =========================================================
   Our Impact page
   Chart colors validated with the dataviz palette checker on the cream card surface:
   #2c5aa8 blue, #008f86 teal, #b8820c gold, #c0463a red (all six checks pass, all >= 3:1).
   ========================================================= */
.dd__top--solo { padding-right: 10px; }
.drawer__solo { display: block; color: #fff; text-decoration: none; font-family: var(--serif); font-size: 24px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.drawer__solo[aria-current="page"] { color: var(--gold-2); }

.impact-hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.impact-hero__photo { margin: 0; }
.impact-hero__photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 24px; box-shadow: 0 40px 70px -30px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12); }
.impact-hero__photo figcaption { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.72); }

/* 1. Highlight tiles */
.impact-hl { background: var(--cream); }
.hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hl { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 28px; }
.hl__v { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 58px); line-height: 1; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.hl__t { color: var(--ink-2); font-size: 15px; }
.hl--total { background: var(--navy); border-color: var(--navy); }
.hl--total .hl__v { color: var(--gold-2); }
.hl--total .hl__t { color: rgba(255,255,255,0.85); }

/* 2. Part-to-whole charts */
.impact-money { background: var(--paper); }
.split-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.chart { margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 30px); }
.chart__t { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy); line-height: 1.15; }
.chart__lead { color: var(--ink-2); font-size: 15px; margin: 6px 0 18px; }
.stackbar { display: flex; gap: 2px; height: 30px; border-radius: 4px; overflow: hidden; }
.stackbar__seg { display: block; min-width: 4px; transition: filter 0.2s; }
.stackbar__seg:hover { filter: brightness(1.12); }
.stackbar__seg:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; position: relative; z-index: 1; border-radius: 2px; }
.legend { list-style: none; margin: 18px 0 0; padding: 0; }
.legend li { display: grid; grid-template-columns: 14px 1fr auto 4.5em; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.legend__v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.legend__p { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.legend__total { font-weight: 700; border-bottom: 0 !important; }
.legend__total .legend__k { grid-column: 2; }
.chart__table { margin-top: 14px; font-size: 14px; }
.chart__table summary { cursor: pointer; color: var(--navy); font-weight: 600; width: max-content; }
.chart__table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.chart__table th, .chart__table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.chart__table th[scope="row"], .chart__table thead th:first-child { text-align: left; }
.chart__table thead th { color: var(--ink-2); font-weight: 600; font-size: 13px; }
.chart__table tfoot th, .chart__table tfoot td { font-weight: 700; border-bottom: 0; }

/* 3. Five-year columns */
.impact-trend { background: var(--cream); }
.chart--wide { background: #fff; }
.cols { position: relative; height: 340px; margin-top: 26px; }
.cols__grid { position: absolute; inset: 0 0 30px 56px; pointer-events: none; }
.cols__grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cols__grid span:first-child { border-top-color: rgba(27,54,104,0.35); }
.cols__grid em { position: absolute; left: -56px; top: 0; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cols__plot { position: absolute; inset: 0 0 0 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 3vw, 36px); }
.col { position: relative; height: 100%; }
.col__track { position: absolute; inset: 0 0 30px 0; }
.col__bar { position: absolute; left: 12%; right: 12%; bottom: 0; background: #2c5aa8; border-radius: 4px 4px 0 0; cursor: default; transition: filter 0.2s; }
.col--now .col__bar { background: #b8820c; }
.col__bar:hover { filter: brightness(1.12); }
.col__bar:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.col__val { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.col__y { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: grid; place-items: center; font-size: 13px; color: var(--ink-2); }
.col--now .col__y { color: var(--ink); font-weight: 700; }
.chart__note { font-size: 13px; color: var(--ink-2); margin-top: 16px; }

/* Tooltip */
.ctip { position: fixed; z-index: 70; pointer-events: none; background: var(--night); color: #fff; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.5); max-width: 260px; }
.ctip strong { display: block; color: var(--gold-2); font-weight: 600; }

/* 4. Stories */
.impact-stories { background: var(--paper); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.istory { display: grid; grid-template-columns: 190px 1fr; background: var(--cream); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.istory img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 25%; }
.istory__body { padding: 22px 24px 24px; }
.istory__chip { display: inline-block; font-size: 12px; font-weight: 700; color: var(--teal); background: rgba(45,111,113,0.1); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.istory__name { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy); line-height: 1.15; }
.istory__role { font-size: 13px; color: var(--ink-2); margin: 2px 0 10px; }
.istory__text { font-size: 15px; color: var(--ink); }
.istory__quote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35; color: var(--navy); }
.istory__part { font-size: 13px; font-weight: 600; color: var(--teal); }

/* What's next */
.impact-next { background: var(--navy); color: #fff; padding: clamp(44px, 6vw, 68px) 0; }
.impact-next__in { display: grid; grid-template-columns: auto 1fr; gap: 6px 40px; align-items: baseline; }
.impact-next__k { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); }
.impact-next__t { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); }
.impact-next__d { color: rgba(255,255,255,0.85); max-width: 62ch; font-size: 17px; }

@media (max-width: 900px) {
  .impact-hero, .split-charts, .story-grid, .impact-next__in { grid-template-columns: 1fr; }
  .impact-hero__photo { max-width: 460px; }
  .hl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hl-grid { grid-template-columns: 1fr; }
  .istory { grid-template-columns: 1fr; }
  .istory img { min-height: 0; aspect-ratio: 4 / 3; }
  .cols { height: 280px; }
  .cols__grid { left: 44px; }
  .cols__grid em { left: -44px; }
  .cols__plot { left: 44px; gap: 6px; }
  .col__bar { left: 6%; right: 6%; }
  .col__y { font-size: 11px; }
  .col__val { font-size: 11px; }
  .legend li { grid-template-columns: 12px 1fr auto 4em; gap: 8px; font-size: 14px; }
}