/* ==========================================================================
   Friends of Peres Academic Center — peresimpact.org
   Design system: light blue / secondary blue / white. No yellow, anywhere.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
/* Links inside body copy need to read as links, since the base rule strips them. */
.link-inline { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }
.link-inline:hover { color: var(--blue-700); }
.section--deep .link-inline, .callout .link-inline { color: var(--green-cta-hover); }
button { cursor: pointer; border: none; background: none; }

/* ---- Design tokens ---- */
:root {
  /* Blue scale — the entire palette. No yellow / gold anywhere in this file. */
  --blue-25:  #F6FAFE;
  --blue-50:  #EBF4FC;
  --blue-100: #D7E9F8;
  --blue-150: #C3DEF3;
  --blue-200: #AAD2EE;
  --blue-300: #7DB8E3;
  --blue-400: #4E9CD6;
  --blue-500: #2E82C4;
  --blue-600: #1E6BAA;   /* primary action blue */
  --blue-700: #185A8E;
  --blue-800: #123F68;   /* secondary deep blue */
  --blue-900: #0B2740;   /* darkest — footer, hero overlays */
  --blue-950: #071B2E;

  /* Peres Academic Center brand green - the donation CTA only. */
  --green-cta:       #2FF7BF;   /* vivid CTA green */
  --green-cta-hover: #7CFAD7;   /* light mint, hover */
  --green-cta-ink:   #0F193C;   /* dark navy text on green */
  --green-label:     #06B785;   /* text-safe green for section labels */

  --white: #FFFFFF;
  --ink: #14263B;         /* body copy — deep navy, not black */
  --ink-muted: #4C6B85;
  --ink-soft: #6C89A3;

  /* Gold, for the one distinction the Center has earned - nothing else. */
  --gold: #E3C069;
  --gold-deep: #C9A227;

  --border: #DCEAF7;
  --border-soft: #EAF3FC;

  --shadow-sm: 0 1px 2px rgba(11, 39, 64, 0.06), 0 1px 3px rgba(11, 39, 64, 0.08);
  --shadow-md: 0 4px 14px rgba(11, 39, 64, 0.10);
  --shadow-lg: 0 18px 40px rgba(11, 39, 64, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Matching pac.ac.il: Georgia for headings, the system sans for text. */
  --font-head: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1180px;
  --header-container: 1400px;
  --header-h: 84px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--blue-900);
  line-height: 1.15;
  font-weight: 400;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem); letter-spacing: -0.01em; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { color: var(--ink-muted); }
p + p { margin-top: 1em; }

.lede { font-size: 1.18rem; color: var(--ink-muted); line-height: 1.6; }

a.link {
  color: var(--blue-600);
  font-weight: 600;
  border-bottom: 1.5px solid var(--blue-200);
  transition: border-color .15s ease, color .15s ease;
}
a.link:hover { color: var(--blue-700); border-color: var(--blue-600); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 60px 0; }
.section--blue { background: var(--blue-50); }
.section--deep { background: var(--blue-900); color: var(--blue-100); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--white); }
.section--deep p { color: var(--blue-100); }
.section--border-top { border-top: 1px solid var(--border-soft); }

.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Four short cards go to two before they go to one. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Five equal cards in three columns leave the second row stopping two-thirds
   of the way across. Six half-columns give the same card width as .grid-3 and
   let the last two sit centred under the first three, so the row reads as
   finished without ranking one story above another. */
.grid--3then2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--3then2 > * { grid-column: span 2; }
.grid--3then2 > :nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 900px) {
  .grid--3then2 { grid-template-columns: 1fr; }
  .grid--3then2 > *, .grid--3then2 > :nth-child(4) { grid-column: auto; }
}

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; align-items: center; }
.gap-sm { gap: 10px; }
.gap-md { gap: 18px; }
.gap-lg { gap: 32px; }

/* Section labels follow pac.ac.il: green text over a short green rule. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-label);
  margin-bottom: 14px;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--green-cta);
  margin-top: 10px;
}
.text-center .eyebrow::after { margin-left: auto; margin-right: auto; }
/* Label form for use inside a card, where the rule under it reads as clutter. */
.eyebrow--plain::after { display: none; }
.eyebrow--plain { margin-bottom: 6px; }

/* On the dark navy surfaces the lighter mint keeps the label legible. */
.page-header .eyebrow,
.hero .eyebrow,
.section--deep .eyebrow,
.callout .eyebrow,
.quote-card .eyebrow { color: var(--green-cta-hover); }

/* A closing statement that carries weight without becoming a box. */
.statement {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 700;
  color: var(--blue-800); line-height: 1.45;
  border-left: 3px solid var(--green-cta); padding-left: 22px;
}
@media (max-width: 640px) { .statement { font-size: 1.15rem; padding-left: 16px; } }
/* The founder's words are a quotation, so they lean. The mission statement does not. */
.statement--quote { font-style: italic; }
/* A fact stated in the flow of the text, not set apart: no rule, no indent. */
.statement--plain { border-left: 0; padding-left: 0; }
.statement__by {
  margin-top: 12px; font-size: 0.9rem; font-weight: 700; font-style: italic;
  color: var(--ink-soft);
}
.page-header .eyebrow::after,
.hero .eyebrow::after,
.section--deep .eyebrow::after,
.callout .eyebrow::after,
.quote-card .eyebrow::after { background: var(--green-cta-hover); }

/* A break the copy asks for on a wide screen, where the line would otherwise
   split mid-phrase. Narrower than that the heading wraps on its own. */
.br-wide { display: none; }
@media (min-width: 760px) { .br-wide { display: inline; } }

.text-center { text-align: center; }
.max-prose { max-width: 700px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 28px; }
.mt-lg { margin-top: 48px; }
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 28px; }
.mb-lg { margin-bottom: 48px; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--blue-800); color: var(--white); padding: 12px 18px;
  border-radius: var(--radius-sm); font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
  padding: 14px 26px; border-radius: var(--radius-pill);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-donate { background: var(--green-cta); color: var(--green-cta-ink); box-shadow: 0 6px 18px rgba(6, 183, 133, 0.35); }
.btn-donate:hover { background: var(--green-cta-hover); color: var(--green-cta-ink); transform: translateY(-2px); }
.btn-donate:active { transform: translateY(0); }
.btn-outline { background: transparent; color: var(--blue-700); border: 1.5px solid var(--blue-300); }
.btn-outline:hover { background: var(--blue-50); border-color: var(--blue-600); }
.btn-white { background: var(--white); color: var(--blue-700); box-shadow: var(--shadow-sm); }
.btn-white:hover { background: var(--blue-50); transform: translateY(-1px); }
.btn-ghost-light { background: rgba(255,255,255,0.08); color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.6); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  height: var(--header-h);
  display: flex; align-items: center;
}
.site-header__inner {
  width: 100%; max-width: var(--header-container); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* 64px inside an 84px header leaves 10px clear top and bottom, so the seal
   reads at a glance without the header growing and shifting every page. */
.brand__mark {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: var(--shadow-sm); overflow: hidden;
  border: 1px solid var(--border);
}
.brand__mark svg { width: 24px; height: 24px; }
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
/* The footer takes the white colourway straight on the navy. At 64px it has the
   ink to read, which it did not at 46px, and it sits better than a bright white
   disc does on a dark ground. No border and no shadow: the seal is drawn with its
   own outer ring, and a second ring around it reads as a mistake. */
.site-footer .brand__mark { background: transparent; border: 0; box-shadow: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__title { font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; color: var(--blue-900); }
.brand__subtitle { font-size: 0.72rem; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; }

.nav-primary { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.nav-primary > li { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 11px; border-radius: var(--radius-pill);
  font-size: 0.95rem; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--blue-700); background: var(--blue-50); }
.has-dropdown:hover .nav-link svg,
.has-dropdown:focus-within .nav-link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 260px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px;
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .15s ease, visibility .15s ease, translate .15s ease;
  z-index: 50;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; translate: 0 0; }
.dropdown a {
  display: block; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 0.89rem; font-weight: 600; color: var(--ink);
}
.dropdown a:hover { background: var(--blue-50); color: var(--blue-700); }
.dropdown a small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.78rem; margin-top: 2px; }

.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; background: var(--blue-50);
  flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; color: var(--blue-800); }

/* On phones the brand, the Donate button and the menu button did not fit, so the
   header row overflowed and the Donate button covered the menu button. Let the
   brand shrink and wrap, and tighten everything around it. */
@media (max-width: 620px) {
  .site-header__inner { padding: 0 16px; gap: 10px; }
  .brand { gap: 9px; flex-shrink: 1; min-width: 0; }
  .brand__mark { width: 48px; height: 48px; }
  .brand__text { min-width: 0; }
  .brand__title { font-size: 0.78rem; }
  .brand__subtitle { display: none; }
  .header-cta { gap: 8px; }
  .header-cta .btn-donate { padding-left: 14px; padding-right: 14px; font-size: 0.78rem; }
}
@media (max-width: 380px) {
  .brand__text { display: none; }
}

@media (max-width: 1100px) {
  .nav-primary { display: none; }
  .nav-toggle { display: flex; }

  .mobile-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--white);
    z-index: 90; overflow-y: auto; padding: 18px 20px 40px;
    transform: translateX(100%); transition: transform .22s ease;
  }
  .mobile-nav.is-open { transform: translateX(0); }
  .mobile-nav ul { display: flex; flex-direction: column; gap: 2px; }
  .mobile-nav > ul > li { border-bottom: 1px solid var(--border-soft); }
  .mobile-nav .nav-link { width: 100%; padding: 15px 6px; border-radius: 0; justify-content: space-between; }
  .mobile-nav .dropdown {
    position: static; opacity: 1; visibility: visible; translate: 0; transform: none;
    box-shadow: none; border: none; padding: 0 0 8px 14px; display: none; min-width: 0;
  }
  .mobile-nav .has-dropdown.is-open .dropdown { display: block; }
  .mobile-nav .has-dropdown.is-open .nav-link svg { transform: rotate(180deg); }
  .mobile-nav .btn { width: 100%; margin-top: 18px; }
}
@media (min-width: 1101px) { .mobile-nav { display: none; } }

/* ---- Hero (home) ---- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--blue-900) 0%, var(--blue-800) 46%, var(--blue-700) 100%);
  color: var(--white);
  padding: 96px 0 0;
}

/* Full-bleed photograph behind the hero, with the brand gradient laid over it
   so the headline stays readable. Unused at the moment: the home page is back
   to plain blue until there is a photograph with the resolution to carry it. */
.hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: center 38%;
  opacity: 0.55;
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,39,64,0.94) 0%, rgba(11,39,64,0.78) 42%, rgba(18,63,104,0.42) 100%),
    linear-gradient(0deg, rgba(11,39,64,0.85) 0%, transparent 42%);
}
.hero--photo .hero__inner { position: relative; z-index: 1; }
@media (max-width: 980px) {
  .hero--photo::after {
    background:
      linear-gradient(180deg, rgba(11,39,64,0.86) 0%, rgba(11,39,64,0.80) 55%, rgba(11,39,64,0.92) 100%);
  }
}
.hero__decor {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
}
.hero__inner {
  position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px 90px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center;
}
@media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; padding-bottom: 60px; } }
/* With nothing beside it the hero is a single column, capped so the line
   length stays readable rather than running the width of the container. */
.hero__inner--solo { grid-template-columns: minmax(0, 1fr); }
.hero__inner--solo .hero__lede { max-width: 820px; }
.hero h1 { color: var(--white); }
.hero__lede { color: var(--blue-100); font-size: 1.15rem; max-width: 540px; margin-top: 20px; }
/* the organization's own name lifts to white, so it reads out of the paragraph */
.hero__lede strong { color: var(--white); font-weight: 700; }
.hero__actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero__art {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.14);
  aspect-ratio: 4/3;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,39,64,0.55), transparent 55%);
}
.hero__art--brand {
  background: var(--white);
  aspect-ratio: 728 / 768;
}
.hero__art--brand::after { content: none; }
.hero__art--brand img { width: 100%; height: 100%; object-fit: cover; }

.stat-strip {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); position: relative; z-index: 2;
  margin: 0 auto; max-width: var(--container);
  transform: translateY(46px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
}
@media (max-width: 720px) { .stat-strip { grid-template-columns: 1fr; transform: translateY(28px); } }
/* Inside a normal section the strip sits in the flow, with no hero to overlap. */
.stat-strip--flat { transform: none; }
@media (max-width: 720px) { .stat-strip--flat { transform: none; } }
/* Four figures stay on one line, shrinking rather than wrapping, until phones. */
.stat-strip--4 { grid-template-columns: repeat(4, 1fr); }
.stat-strip--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .stat-strip--5 .stat-strip__num { font-size: 1.9rem; } .stat-strip--5 .stat-strip__item { padding: 24px 12px; } }
@media (max-width: 860px) {
  .stat-strip--5 { grid-template-columns: repeat(2, 1fr); }
  .stat-strip--5 .stat-strip__item:nth-child(2n) { border-right: none; }
  .stat-strip--5 .stat-strip__item:not(:nth-last-child(-n+1)) { border-bottom: 1px solid var(--border-soft); }
  .stat-strip--5 .stat-strip__item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .stat-strip--5 { grid-template-columns: 1fr; }
  .stat-strip--5 .stat-strip__item { border-right: none; }
}
@media (max-width: 1080px) {
  .stat-strip--4 .stat-strip__item { padding: 26px 16px; }
  .stat-strip--4 .stat-strip__num { font-size: 2.1rem; }
}
@media (max-width: 820px) {
  .stat-strip--4 .stat-strip__item { padding: 22px 10px; }
  .stat-strip--4 .stat-strip__num { font-size: 1.75rem; }
  .stat-strip--4 .stat-strip__label { font-size: 0.78rem; }
}
@media (max-width: 560px) {
  .stat-strip--4 { grid-template-columns: 1fr; }
  .stat-strip--4 .stat-strip__item { border-right: none; padding: 24px 20px; }
  .stat-strip--4 .stat-strip__num { font-size: 2.4rem; }
  .stat-strip--4 .stat-strip__label { font-size: 0.92rem; }
}
.stat-strip__item {
  padding: 32px 28px; text-align: center; border-right: 1px solid var(--border-soft);
}
.stat-strip__item:last-child { border-right: none; }
@media (max-width: 720px) {
  .stat-strip__item { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .stat-strip__item:last-child { border-bottom: none; }
}
.stat-strip__num {
  font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--blue-600);
  line-height: 1;
}
.stat-strip__label { margin-top: 10px; font-size: 0.92rem; color: var(--ink-muted); font-weight: 500; }

/* ---- Page header (inner pages) ---- */
.page-header {
  background: linear-gradient(165deg, var(--blue-900), var(--blue-700));
  color: var(--white); padding: 68px 0 64px;
}
.page-header h1 { color: var(--white); max-width: 780px; }
.page-header p { color: var(--blue-100); max-width: 640px; margin-top: 16px; font-size: 1.08rem; }
.page-header__crumb { font-size: 0.82rem; color: var(--blue-200); margin-bottom: 22px; }
.page-header__crumb a { color: var(--blue-200); font-weight: 600; }
.page-header__crumb a:hover { color: var(--white); }
/* The page you are on, in the label green, so the trail says where you are
   now that the banner carries no label above the heading. */
.page-header__here { color: var(--green-cta-hover); font-weight: 700; }

/* ---- Cards ---- */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* A card heading that has to hold the page on its own takes the same green
   rule the section labels use. */
.card__title { font-size: 1.35rem; }
.card__title::after {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: var(--green-cta); margin-top: 12px;
}
.icon-circle {
  width: 52px; height: 52px; border-radius: 16px; background: var(--blue-50);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-bottom: 18px;
}
.icon-circle svg { width: 26px; height: 26px; color: var(--blue-600); }
/* Cards that carry their own motion: the tile lifts and the icon rises with it. */
.card--lift { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.card--lift:hover { transform: translateY(-6px); border-color: var(--blue-300); }
.card--lift .icon-circle { transition: transform .25s ease, background-color .25s ease; }
.card--lift:hover .icon-circle { transform: translateY(-3px) scale(1.06); background: var(--blue-100); }
/* Children of a .stagger reveal one after the other rather than all at once.
   The reveal runs as an animation, not a transition, so a stagger delay never
   also delays the card's own hover transition. */
@keyframes reveal-up { from { opacity: 0; translate: 0 18px; } }
.stagger > .fade-up { transition-property: box-shadow, transform, border-color, background-color; }
.stagger > .fade-up.is-visible { animation: reveal-up .55s ease backwards; }
.stagger > .fade-up:nth-child(2).is-visible { animation-delay: .1s; }
.stagger > .fade-up:nth-child(3).is-visible { animation-delay: .2s; }
.stagger > .fade-up:nth-child(4).is-visible { animation-delay: .3s; }
.icon-circle--deep { background: rgba(255,255,255,0.12); }
.icon-circle--deep svg { color: var(--white); }

.step-card {
  display: flex; gap: 18px; align-items: flex-start;
}
/* The first step carries the promise donors weigh most, so it leads the row. */
.steps-row { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
.step-card--lead .step-num { width: 56px; height: 56px; font-size: 1.35rem; }
.step-card--lead h3 { font-size: 1.55rem; }
.step-card--lead p { font-size: 1.08rem; color: var(--ink); }
@media (max-width: 900px) { .steps-row { grid-template-columns: 1fr; } }
/* The last step in a sequence is the outcome, so it carries the brand green. */
.step-num--impact { background: var(--green-cta); color: var(--green-cta-ink); }
.step-num--impact svg { width: 21px; height: 21px; }

.step-num {
  width: 42px; height: 42px; border-radius: 50%; background: var(--blue-600); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head);
  font-weight: 700; flex-shrink: 0; font-size: 1.05rem;
}

.tier-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 30px;
  background: var(--white); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tier-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tier-card--featured { border-color: var(--blue-500); background: var(--blue-50); position: relative; }
.tier-card__amount { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; color: var(--blue-700); }
.tier-card__badge {
  position: absolute; top: -13px; right: 24px; background: var(--blue-600); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--radius-pill);
}

/* Fund cards with a photo banner. 12/5 matches the widest source art, so
   those images need no cropping at all; the rest are cropped to fit. */
.tier-card--media, .card--media { padding: 0; overflow: hidden; }
.fund-card__media {
  display: block; width: 100%; aspect-ratio: 12/5;
  object-fit: cover; object-position: center; background: var(--blue-50);
}
.tier-card--media, .card--media { display: flex; flex-direction: column; }
.fund-card__body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.fund-card__body .btn { align-self: flex-start; margin-top: auto; }
/* Reserve two lines for the description so both cards break identically
   and their buttons sit the same distance below the text. */
.card--media .fund-card__body p { min-height: 3.1em; }

.quote-card {
  background: var(--blue-900); color: var(--white); border-radius: var(--radius-lg);
  padding: 44px; position: relative;
}
.quote-card p { color: var(--blue-100); font-size: 1.18rem; }

/* ---- Team ---- */
.team-card { text-align: left; }
.team-card__photo {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden;
  margin-bottom: 20px; background: var(--blue-100); box-shadow: var(--shadow-sm);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* A team card that is itself the link through to the full team page. */
.team-card--link { display: block; }
.team-card--link .team-card__photo { transition: transform .25s ease, box-shadow .25s ease; }
.team-card--link:hover .team-card__photo { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-card--link:hover h3 { color: var(--blue-700); }
@media (prefers-reduced-motion: reduce) {
  .team-card--link .team-card__photo, .team-card--link:hover .team-card__photo { transition: none; transform: none; }
}

.team-card__role {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-600); margin-bottom: 6px;
}

/* ---- Video placeholder ---- */
.video-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--blue-800), var(--blue-900));
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  color: var(--white); box-shadow: var(--shadow-md);
}
.video-card__play {
  width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, transform .15s ease;
}
.video-card__play svg { width: 26px; height: 26px; margin-left: 4px; }
.video-card:hover .video-card__play { background: rgba(255,255,255,0.24); transform: scale(1.05); }
.video-card__caption {
  position: absolute; left: 24px; bottom: 20px; font-size: 0.88rem; color: var(--blue-100);
  font-weight: 500;
}

/* The poster is the play control, so it is a button. Every player on the site
   opens this way, which keeps them looking alike whatever the host is. */
button.video-card { border: 0; padding: 0; width: 100%; font: inherit; cursor: pointer; }
button.video-card:focus-visible { outline: 3px solid var(--green-cta); outline-offset: 3px; }
.video-card--sm .video-card__play { width: 56px; height: 56px; }
.video-card--sm .video-card__play svg { width: 20px; height: 20px; }

/* A still from the film sits behind the play button. The scrim keeps the
   button and the caption readable whatever the frame turns out to be. */
.video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,27,46,0.72), rgba(7,27,46,0.20) 46%, rgba(7,27,46,0.34));
}
/* the caption keeps the absolute placement set above; both just need to sit
   over the still and its scrim */
.video-card__play { position: relative; z-index: 1; }
.video-card__caption { z-index: 1; }
.video-card--photo:hover .video-card__poster { transform: scale(1.03); }
.video-card__poster { transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .video-card__poster { transition: none; } }

.photo-band img {
  display: block; width: 100%; aspect-ratio: 12/5; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--blue-50);
}
/* Photo carousel: a scroll-snap track with arrow buttons. Touch and trackpad
   swipe natively; the arrows are for mouse and keyboard. */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; gap: 14px;
  grid-auto-columns: calc((100% - 56px) / 5);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  list-style: none; margin: 0; padding: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 4px; border-radius: var(--radius-md); }
.carousel__slide { scroll-snap-align: start; margin: 0; }
.carousel__slide img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--blue-50);
}
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 0;
  background: var(--green-cta); color: var(--green-cta-ink);
  box-shadow: 0 6px 18px rgba(6, 183, 133, 0.4); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.carousel__nav svg { width: 22px; height: 22px; }
.carousel__nav:hover:not([disabled]) { background: var(--green-cta-hover); transform: translateY(-50%) scale(1.08); }
.carousel__nav[disabled] { opacity: .35; cursor: default; }
/* Hidden outright when every photo already fits, so no dead control is on screen. */
.carousel__nav[hidden] { display: none; }
.carousel__nav--prev { left: -14px; }
.carousel__nav--next { right: -14px; }
@media (max-width: 1080px) { .carousel__track { grid-auto-columns: calc((100% - 42px) / 4); } }
@media (max-width: 900px)  { .carousel__track { grid-auto-columns: calc((100% - 28px) / 3); } }
@media (max-width: 760px) {
  .carousel__track { grid-auto-columns: calc((100% - 14px) / 2); }
  .carousel__nav--prev { left: 8px; }
  .carousel__nav--next { right: 8px; }
}
@media (max-width: 520px) {
  .carousel__track { grid-auto-columns: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .carousel__nav, .carousel__nav:hover:not([disabled]) { transition: none; transform: translateY(-50%); }
}
.photo-band figcaption {
  margin-top: 14px; font-size: 0.88rem; color: var(--ink-soft); text-align: center;
}

.video-embed {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); background: var(--blue-900);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* A story card is a player with a name and a single line under it, so three
   of them read as one row rather than three competing blocks. */
/* A student's card: the film on top, then what the film is about, then who
   it belongs to under a rule. */
.testimonial {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
}
.testimonial .video-card { border-radius: 0; box-shadow: none; }
.testimonial__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.testimonial__quote {
  font-family: var(--font-head); font-size: 1.05rem; color: var(--blue-900); line-height: 1.5;
  font-style: italic; margin-bottom: 14px;
}
/* auto margin drops the name to the foot of the card, so the three names and
   the rules above them line up however long the quotes run */
.testimonial__who {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.92rem;
}
.testimonial__name { font-weight: 700; color: var(--blue-600); display: block; }
/* Two lines' worth of room whether the role needs them or not, so the rule and the
   name land at the same height across every card in the row. */
.testimonial__role { color: var(--ink-soft); display: block; line-height: 1.45; min-height: 2.9em; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--blue-900); }
.field input, .field textarea, .field select {
  padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); font-size: 0.95rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px var(--blue-100);
}
.field textarea { resize: vertical; min-height: 120px; }

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 220px; }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .inline-form { flex-direction: column; } }

.form-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; }
.form-success {
  display: none; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius-sm);
  color: var(--blue-800); font-weight: 600; font-size: 0.92rem; margin-top: 14px;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Info list (contact details, quick facts) ---- */
.info-list { display: flex; flex-direction: column; gap: 18px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; }
.info-row .icon-circle { margin-bottom: 0; width: 44px; height: 44px; border-radius: 13px; }
.info-row .icon-circle svg { width: 20px; height: 20px; }
.info-row__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.info-row__value { font-weight: 600; color: var(--blue-900); margin-top: 2px; }

.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
.fact-grid dt { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.fact-grid dd { margin: 4px 0 0; font-weight: 600; color: var(--blue-900); }

/* ---- Callout / banner ---- */
.callout {
  background: linear-gradient(150deg, var(--blue-700), var(--blue-900));
  color: var(--white); border-radius: var(--radius-lg); padding: 56px;
  text-align: center; box-shadow: var(--shadow-lg);
}
.callout h2 { color: var(--white); }
.callout p { color: var(--blue-100); }
.callout__actions { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.callout__tax {
  margin-top: 22px; font-size: 0.82rem; line-height: 1.6;
  color: var(--blue-200); max-width: 74ch; margin-left: auto; margin-right: auto;
}
.callout p.callout__tax { color: var(--blue-200); }

.empty-state {
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  padding: 60px 30px; text-align: center; background: var(--blue-25);
}

/* ---- Badge / pill ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700);
  font-size: 0.8rem; font-weight: 700;
}

/* ---- Table ---- */
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); font-size: 0.92rem;
}
.simple-table th { color: var(--ink-soft); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.simple-table td { color: var(--ink); }

/* ---- Footer ---- */
.site-footer { background: var(--blue-900); color: var(--blue-100); padding: 72px 0 28px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
/* the footer seal and wordmark are one link home, like the header brand */
.footer-brand__home { text-decoration: none; color: inherit; }
.footer-brand__home .brand__mark { transition: box-shadow .15s ease; }
.footer-brand__home:hover .brand__mark { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.footer-brand__home:focus-visible { outline: 3px solid var(--green-cta); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .footer-brand__home .brand__mark { transition: none; } }
.footer-brand .brand__title { color: var(--white); }
.footer-brand .brand__subtitle { color: var(--blue-300); }
.footer-brand p { color: var(--blue-200); font-size: 0.92rem; max-width: 300px; }
.footer-heading { font-family: var(--font-head); font-weight: 700; color: var(--white); font-size: 0.86rem; letter-spacing: 0.04em; margin-bottom: 18px; text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 0.92rem; color: var(--blue-200); transition: color .15s ease; }
.footer-links a:hover { color: var(--white); }

.footer-tax {
  padding-top: 26px; font-size: 0.8rem; line-height: 1.65; color: var(--blue-300);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px;
}
.footer-tax p { margin: 0; }
@media (max-width: 820px) { .footer-tax { grid-template-columns: 1fr; gap: 14px; } }
.footer-tax strong { color: var(--blue-200); font-weight: 600; }

.footer-bottom {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-size: 0.84rem; color: var(--blue-300);
}
.footer-bottom a { color: var(--blue-300); }
.footer-bottom a:hover { color: var(--white); }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- FAQ accordion: cards on <details>, so it works with no JavaScript ---- */
.faq { display: grid; gap: 16px; }
.faq details {
  background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq details:hover { border-color: var(--blue-300); }
.faq details[open] { border-left-color: var(--green-cta); box-shadow: var(--shadow-md); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; padding: 26px 28px;
  font-family: var(--font-head); font-size: 1.35rem; line-height: 1.3; color: var(--blue-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-700); }
.faq summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: var(--radius-lg); }
.faq__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--green-cta); color: var(--green-cta-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; line-height: 1;
  transition: transform 0.22s ease;
}
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding: 0 28px 28px; }
.faq__answer p { font-size: 1rem; line-height: 1.7; }
.faq__answer > * + * { margin-top: 16px; }
@media (max-width: 560px) {
  .faq summary { padding: 22px 20px; font-size: 1.15rem; gap: 16px; }
  .faq__answer { padding: 0 20px 24px; }
}

/* ---- Ranking band ---- */
/* The label carries the gold, which stays out of the rest of the palette so
   it keeps meaning something; the heading itself stays white. */
.section--deep .ranking__label { color: var(--gold); }
.section--deep .ranking__label::after { background: var(--gold); }
.ranking__rule {
  width: 120px; height: 1px; margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
}

/* ---- Misc ---- */
.divider-list > * + * { border-top: 1px solid var(--border-soft); padding-top: 28px; margin-top: 28px; }

/* Expandable body copy: the opening paragraphs are always visible, the rest
   opens on demand. Uses <details> so it works with no JavaScript. */
.readmore > summary {
  list-style: none; cursor: pointer; display: inline-block;
  margin-top: 16px; font-weight: 700; font-size: 0.95rem; color: var(--blue-700);
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::after { content: " \2192"; }
.readmore > summary:hover { color: var(--blue-800); }
.readmore > summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 3px; }
.readmore__label--less { display: none; }
.readmore[open] .readmore__label--more { display: none; }
.readmore[open] .readmore__label--less { display: inline; }
.readmore__more > p + p { margin-top: 20px; }
.readmore__more { margin-top: 20px; }

/* Open figures: no box, a short green rule above each number. Lighter than the
   boxed strip, and it lets five sit side by side without feeling like a table. */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 40px 28px; text-align: center;
}
.stat-row__item { position: relative; padding-top: 22px; }
.stat-row__item::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 2px; border-radius: 2px; background: var(--green-cta);
}
.stat-row__num {
  font-family: var(--font-head); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--blue-800); letter-spacing: -0.01em;
}
.stat-row__suffix { color: inherit; }
.stat-row__label { margin-top: 10px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.4; }
.section--deep .stat-row__num, .callout .stat-row__num { color: var(--white); }
.section--deep .stat-row__label, .callout .stat-row__label { color: var(--blue-100); }

/* Degree programmes as tiles, so a list of sixteen reads as a catalogue
   rather than a shopping list. */
.degree-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.degree-tile {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--radius-md); padding: 18px 20px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.degree-tile:hover {
  background: var(--white); border-color: var(--blue-300);
  box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.degree-tile__tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-800); background: var(--white);
  border: 1.5px solid var(--green-label); padding: 4px 10px; border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.degree-tile:hover .degree-tile__tag { border-color: var(--green-cta); }
.degree-tile h4 { font-size: 1rem; line-height: 1.3; }
@media (max-width: 900px) { .degree-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .degree-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .degree-tile, .degree-tile:hover { transition: none; transform: none; } }

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  font-weight: 600; font-size: 0.88rem; color: var(--blue-800); background: var(--white);
}

.fade-up { opacity: 0; translate: 0 18px; transition: opacity .55s ease, translate .55s ease; }
.fade-up.is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; translate: none; transition: none; }
  .stagger > .fade-up.is-visible { animation: none; }
  .card--lift, .card--lift .icon-circle { transition: none; }
  .card--lift:hover { transform: none; }
  .card--lift:hover .icon-circle { transform: none; }
}

@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .callout { padding: 40px 24px; }
}

.back-to-top {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-700); color: var(--white); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .2s ease, visibility .2s ease, translate .2s ease, background-color .15s ease;
  z-index: 80;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.back-to-top:hover { background: var(--blue-800); }
.back-to-top svg { width: 18px; height: 18px; }

/* Trust strip: a quieter second line under a headline figure. */
.stat-note { font-size: 0.82rem; color: var(--ink-muted); margin-top: 4px; }

/* Typography: avoid a lone word on the last line of a paragraph, and split
   short centred labels evenly instead of leaving an orphan. Both degrade to
   normal wrapping in browsers that don't support them. */
p { text-wrap: pretty; }
.card.text-center p,
.grid.text-center p,
.stat-strip__label,
.stat-note { text-wrap: balance; }

/* Long-form explanatory card: keep the line length readable at full width. */
.card--prose p { max-width: 78ch; }