/* The First Rung - website styles (HTML V3 SZ, 23OCT26, built from SZ V7 15OCT26; version blocks V1.2 to V3 SZ at the end)
   Plain CSS, no build step. Desktop layout from 1024px up, stacked phone layout below.
   Type sizes scale fluidly between the V7 phone (390px) and desktop (1440px) artboards. */

/* ---------- Fonts ---------- */
/* DM Sans: SIL Open Font License, self-hosted (assets/fonts/OFL-DMSans.txt). */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Titles: Copperplate is the V7 face and is used as a system font, never self-hosted (no web licence bought).
   Stack: "Copperplate" (macOS, iOS), then "Copperplate Gothic" / "Copperplate Gothic Light" (Windows with Microsoft Office),
   then Cinzel (SIL OFL, self-hosted below) on every other device, then the generic serif. See README.md "Fonts". */
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/cinzel-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- Tokens (Brand Identity Directory: The First Rung palette, as placed in V7) ---------- */
:root {
  --burgundy: #611319;
  --forest: #053b37;
  --brown: #452611;
  --cream: #f0e9d5;
  --diploma: #f7f5ed;
  --gold: #baa057;
  --gold-deep: #7d6721;
  --hold: #ff00ff;

  --display: "Copperplate", "Copperplate Gothic", "Copperplate Gothic Light", "Cinzel", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --gutter: 24px;
  --wrap: 1200px;
}
@media (min-width: 600px) { :root { --gutter: 48px; } }
@media (min-width: 1024px) { :root { --gutter: clamp(48px, 8.333vw, 120px); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--burgundy); color: var(--cream);
  padding: 12px 18px;
}
.skip-link:focus { top: 8px; }
.br-phone { display: inline; }
@media (min-width: 600px) { .br-phone { display: none; } }
.br-desk { display: none; }
@media (min-width: 1024px) { .br-desk { display: inline; } }

/* ---------- Type ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}
/* Page titles: 34.7px (phone) to 84px (desktop) */
.t-title {
  font-size: clamp(34.7px, calc(34.7px + (100vw - 390px) * 0.04695), 84px);
  line-height: 0.81;
}
@media (min-width: 1024px) { .t-title { line-height: 0.69; } }
/* Large display lines (quotes, closing bands): 34.7px to 56px */
.t-display-l {
  font-size: clamp(34.7px, calc(34.7px + (100vw - 390px) * 0.02029), 56px);
  line-height: 0.81;
}
@media (min-width: 1024px) { .t-display-l { line-height: 0.84; } }
/* Band titles / section heads: 34.7px always */
.t-display-m { font-size: 34.7px; line-height: 0.81; }
/* Lede: 21.3px to 30.7px */
.t-lede {
  font-weight: 500;
  font-size: clamp(21.3px, calc(21.3px + (100vw - 390px) * 0.00895), 30.7px);
  line-height: 1.375;
}
@media (min-width: 1024px) { .t-lede { line-height: 1.303; } }
/* Statement: 37.3px to 56px */
.t-statement {
  font-weight: 500;
  font-size: clamp(37.3px, calc(37.3px + (100vw - 390px) * 0.01781), 56px);
  line-height: 1.314;
}
@media (min-width: 1024px) { .t-statement { line-height: 1.116; } }
.t-body { font-size: 16px; line-height: 1.43; }
.t-small { font-size: 14px; line-height: 1.43; }
.t-label { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--gold); }

/* ---------- Buttons and links (V7 page 16 states) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 53px;
  padding: 2px 29px;
  font-family: var(--sans); font-weight: 500; font-size: 17.3px; line-height: 24px;
  text-align: center;
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.btn--burgundy { background: var(--burgundy); color: var(--cream); }
.btn--burgundy:hover { background: var(--brown); }
.btn--cream { background: var(--cream); color: var(--forest); }
.btn--cream:hover { background: var(--diploma); }
.btn--cream-burgundy { background: var(--cream); color: var(--burgundy); }
.btn--cream-burgundy:hover { background: var(--diploma); }
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.btn--cream:focus-visible, .btn--cream-burgundy:focus-visible { outline-color: var(--gold); }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.text-link {
  font-weight: 500; font-size: 17.3px; line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 12px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-deep);
}
.on-dark .text-link { text-decoration-color: var(--gold); }
.text-link:hover, .text-link:focus-visible { text-decoration-line: underline; outline: none; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.hold { color: var(--hold); }
.hold-box { display: block; background: var(--hold); color: #fff; font-weight: 500; font-size: 14.7px; line-height: 1.25; padding: 1px 6px; }

/* ---------- Header ---------- */
.site-header { background: var(--cream); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 120px;
}
.brand img { width: 200px; height: auto; }
.nav-desktop, .header-cta { display: none; }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  color: var(--burgundy); font-weight: 500; font-size: 17.3px; line-height: 1.2;
  padding: 8px 0;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 20;
  min-width: 220px;
  background: var(--cream);
  padding: 12px 24px 20px;
  box-shadow: 0 10px 24px rgba(69, 38, 17, 0.18);
}
.menu-panel a { display: block; padding: 8px 0; font-size: 17.3px; color: var(--brown); }
.menu-panel a[aria-current="page"] { color: var(--burgundy); }
.menu-panel .btn { margin-top: 12px; display: flex; color: var(--cream); }
@media (min-width: 1024px) {
  .site-header .wrap { height: 197px; }
  .brand img { width: 240px; }
  .menu { display: none; }
  .nav-desktop { display: flex; gap: clamp(20px, 2.7vw, 39px); margin-left: auto; margin-right: auto; padding-left: clamp(24px, 3.54vw, 51px); }
  .nav-desktop a { font-size: 16px; color: var(--brown); padding: 4px 0; }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: var(--gold-deep); }
  .header-cta { display: inline-flex; min-width: 134px; padding-inline: 27px; }
}

/* ---------- Sections ---------- */
.bg-burgundy { background: var(--burgundy); color: var(--cream); }
.bg-forest { background: var(--forest); color: var(--cream); }
.bg-brown { background: var(--brown); color: var(--cream); }
.bg-cream { background: var(--cream); color: var(--brown); }
.bg-diploma { background: var(--diploma); color: var(--brown); }
.bg-gold { background: var(--gold); color: var(--brown); }
.c-burgundy { color: var(--burgundy); }
/* 6px cream seam between stacked colour bands (V7) */
.seam { border-top: 6px solid var(--cream); }

/* ---------- Home: hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--burgundy); color: var(--cream); }
.hero picture { position: absolute; inset: 0; }
.hero .hero-photo { width: 100%; height: 100%; object-fit: cover; opacity: 0.445; }
.hero .wrap { position: relative; padding: 226px 0 80px; }
.hero-mark { position: absolute; right: 0; top: 22px; width: 24px; }
.hero .t-lede { margin-top: 44px; max-width: 830px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 38px; margin-top: 37px; }
.hero-actions .btn { width: 100%; padding-inline: 12px; }
@media (min-width: 600px) { .hero-actions .btn { width: auto; padding-inline: 29px; } }
@media (min-width: 1024px) {
  .hero { min-height: 820px; }
  .hero .wrap { padding: 338px 0 110px; }
  .hero-mark { top: 107px; width: 32px; }
  .hero .t-lede { margin-top: 45px; }
  .hero-actions { flex-direction: row; align-items: center; margin-top: 38px; }
}

/* ---------- Home: stats ---------- */
.stats { padding: 102px 0 90px; text-align: center; }
.stats ul { width: min(320px, 100%); margin-inline: auto; }
.stats li { padding-bottom: 29px; }
.stats li + li { border-top: 1px solid var(--cream); padding-top: 13px; }
.stats .num { display: block; font-size: 56px; line-height: 1.1; }
.stats .lbl { display: block; margin-top: 11px; color: var(--diploma); font-weight: 500; font-size: 18.3px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 1024px) { .stats ul { width: 420px; } }

/* ---------- Home: story ---------- */
.story { padding: 110px 0 113px; }
.story .t-lede { max-width: 720px; }
.story .t-statement { margin-top: 51px; color: var(--burgundy); max-width: 720px; }
.story-climber { display: none; }
@media (min-width: 1024px) {
  .story { padding: 92px 0 85px; }
  .story .t-statement { margin-top: 55px; }
  .story .wrap { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .story-climber { display: block; width: 213px; margin-top: 18px; }
}

/* ---------- Title-left / text-right bands ---------- */
.split-band { padding: 44px 0 63px; min-height: 260px; }
.split-band.seam { min-height: 266px; }
.split-band .t-display-m { display: block; }
.split-band .body { margin-top: 27px; font-size: 16px; line-height: 1.43; max-width: 640px; }
.split-band .text-link { display: inline-block; margin-top: 28px; }
@media (min-width: 600px) { .split-band .body { font-size: 18px; } }
@media (min-width: 1024px) {
  .split-band { min-height: 262px; display: flex; align-items: center; padding: 56px 0; }
  .split-band .wrap { display: grid; grid-template-columns: 384px 1fr; align-items: center; }
  .split-band .body { margin-top: 0; font-weight: 500; font-size: 21.3px; line-height: 1.38; max-width: 730px; }
  .split-band.seam { min-height: 267px; }
}

/* ---------- Home: quote with photo ---------- */
.quote-band { display: grid; grid-template-columns: 1fr; }
.quote-band .quote { padding: 60px var(--gutter); }
.quote-band blockquote p { max-width: 780px; }
.quote-band figcaption { max-width: 300px; margin-top: 33px; font-size: 14px; line-height: 1.43; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.quote-band picture { display: block; }
.quote-band picture img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .quote-band { grid-template-columns: 1fr 29.4%; min-height: 620px; }
  .quote-band .quote { padding: 230px 0 80px max(var(--gutter), 50vw - 600px); }
  .quote-band figcaption { max-width: none; margin-top: 37px; }
}

/* ---------- Closing band ---------- */
.closing { padding: 44px 0 48px; }
.closing .t-statement { margin-top: 37px; }
.closing .btn { margin-top: 93px; width: 100%; }
@media (min-width: 600px) { .closing .btn { width: auto; } }
@media (min-width: 1024px) {
  .closing { padding: 55px 0 72px; }
  .closing .btn { margin-top: 73px; }
  .closing .t-statement { max-width: 900px; }
}
.closing--home .t-display-l { max-width: 1050px; }
@media (min-width: 1024px) { .closing--home .t-display-l { line-height: 1.125; } }
/* Inner-page closing: Copperplate question + button (V7 p3/p5/p7) */
.closing--page { padding: 98px 0 63px; min-height: 417px; }
.closing--page h2 { max-width: 320px; }
.closing--page .btn { margin-top: 81px; }
@media (min-width: 1024px) {
  .closing--page { padding: 119px 0 128px; min-height: 475px; }
  .closing--page h2 { max-width: 1000px; }
  .closing--page .btn { margin-top: 80px; }
}

/* ---------- Inner page intro (title band) ---------- */
.page-intro { padding: 118px 0 60px; min-height: 300px; }
@media (min-width: 1024px) { .page-intro { padding: 125px 0 80px; min-height: 380px; } }

/* ---------- Our Story ---------- */
.founder { padding: 70px 0 67px; }
.founder .wrap { display: grid; grid-template-columns: 1fr; }
.founder-photo { background: var(--gold); padding: 30px 35px 0; }
.founder-photo img { width: 100%; max-width: 272px; margin-inline: auto; }
.founder .t-lede { margin-top: 48px; }
.founder .t-body { margin-top: 29px; }
@media (min-width: 600px) { .founder-photo img { max-width: 383px; } }
@media (min-width: 1024px) {
  .founder { padding: 90px 0 90px; }
  .founder .wrap { grid-template-columns: 460px 1fr; column-gap: 120px; align-items: start; }
  .founder-photo { height: 660px; padding: 30px 38px 0; }
  .founder-photo img { margin-inline: 0; }
  .founder .t-lede { margin-top: 60px; max-width: 640px; }
  .founder .t-body { margin-top: 28px; max-width: 630px; }
}
.why { padding: 194px 0 195px; }
/* ---------- How It Works ---------- */
.page-intro--3 { padding-top: 104px; }
@media (min-width: 1024px) { .page-intro--3 { padding-top: 125px; } }
.steps { padding: 0 0 49px; }
.steps ol { border-top: 1px solid var(--gold); }
.steps li { display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 29px 0; border-bottom: 1px solid var(--gold); }
.steps .n { font-family: var(--display); font-size: 34.7px; line-height: 1; color: var(--burgundy); }
.steps .t { font-size: 16px; line-height: 1.415; }
@media (min-width: 1024px) {
  .steps { padding-bottom: 72px; }
  .steps li { grid-template-columns: 96px 1fr; align-items: start; padding: 21px 0 30px; }
  .steps .t { margin-top: 7px; font-weight: 500; font-size: 21.3px; line-height: 1.375; }
}
.nominee { position: relative; overflow: hidden; padding: 189px 0 180px; }
.nominee .intro { margin-top: 24px; font-size: 16px; line-height: 1.415; }
.nominee ul { margin-top: 7px; }
.nominee li { display: grid; grid-template-columns: 51px 1fr; align-items: center; padding: 14.5px 0; font-size: 16px; line-height: 1.415; }
.nominee li::before { content: ""; width: 21px; height: 21px; border: 1.3px solid var(--gold); }
.nominee-climber { display: none; }
@media (min-width: 1024px) {
  .nominee { padding: 149px 0 140px; min-height: 738px; }
  .nominee .intro { margin-top: 33px; font-weight: 500; font-size: 21.3px; line-height: 1.375; max-width: 760px; }
  .nominee ul { margin-top: 5px; max-width: 780px; }
  .nominee li { grid-template-columns: 58px 1fr; padding: 14.7px 0; font-weight: 500; font-size: 21.3px; line-height: 1.375; }
  .nominee li::before { width: 29px; height: 29px; margin-left: 1px; }
}
@media (min-width: 1200px) {
  .nominee-climber { display: block; position: absolute; bottom: 0; width: 263px; left: min(50% + 397px, 100% - 283px); }
}

/* ---------- Give ---------- */
.page-intro--lede { padding-top: 55px; padding-bottom: 40px; }
.page-intro--lede .t-lede { margin-top: 43px; max-width: 840px; }
@media (min-width: 1024px) {
  .page-intro--lede { padding-top: 66px; }
  .page-intro--lede .t-lede { margin-top: 45px; }
}
.split-band--option { display: flex; align-items: center; min-height: 300px; padding: 40px 0; }
.split-band--option.seam { min-height: 306px; }
.split-band--option .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); }
.split-band--option .body { margin-top: 23px; }
@media (min-width: 1024px) {
  .split-band--option { min-height: 280px; }
  .split-band--option.seam { min-height: 286px; }
  .split-band--option .body { margin-top: 0; }
}
.download { padding-top: 56px; }
.download .btn { width: 100%; }
.download .note { margin-top: 12px; font-size: 14px; line-height: 1.43; max-width: 720px; }
@media (min-width: 600px) { .download .btn { width: auto; } }
@media (min-width: 1024px) { .download { padding-top: 88px; } .download .note { margin-top: 13px; } }
.two-col { padding: 161px 0 105px; }
.two-col .wrap { display: grid; grid-template-columns: 1fr; row-gap: 44px; }
.two-col .t-lede { margin-top: 21px; }
@media (min-width: 1024px) {
  .two-col { padding: 159px 0 96px; }
  .two-col .wrap { grid-template-columns: 530px 1fr; column-gap: 110px; }
  .two-col .t-lede { margin-top: 37px; }
}

/* ---------- For Schools ---------- */
.page-intro--schools { padding-top: 43px; padding-bottom: 51px; min-height: 337px; }
@media (min-width: 1024px) { .page-intro--schools { padding-top: 66px; padding-bottom: 74px; min-height: 418px; } }
.split-band--ask { min-height: 280px; display: flex; align-items: center; padding: 40px 0; }
.split-band--ask.seam { min-height: 286px; }
.split-band--ask .body { margin-top: 23px; }
@media (min-width: 1024px) {
  .split-band--ask { min-height: 260px; }
  .split-band--ask.seam { min-height: 266px; }
  .split-band--ask .body { margin-top: 0; }
}
.recognized { padding: 145px 0 132px; }
.recognized .wrap { display: grid; grid-template-columns: 1fr; }
.recognized figure img { width: 100%; }
.recognized h2 { margin-top: 36px; }
.recognized .t-lede { margin-top: 24px; }
.recognized .actions { margin-top: 31px; }
.recognized .btn { width: 100%; }
.recognized .note { margin-top: 13px; font-size: 14px; line-height: 1.43; }
.recognized .checklist { margin-top: 21px; }
.recognized .text-link { color: var(--burgundy); }
.recognized .checklist .text-link { display: inline-block; }
.recognized .checklist .note { margin-top: 4px; }
.recognized .hold-box { margin-top: 2px; width: fit-content; }
.recognized .email-link { display: inline-block; margin-top: 46px; }
@media (min-width: 600px) { .recognized .btn { width: auto; } .recognized figure { max-width: 420px; } }
@media (min-width: 1024px) {
  .recognized { padding: 176px 0 143px; }
  .recognized .wrap { grid-template-columns: 420px 1fr; column-gap: 140px; align-items: start; }
  .recognized h2 { margin-top: -20px; }
  .recognized .t-lede { margin-top: 36px; }
  .recognized .actions { margin-top: 40px; }
  .recognized .hold-box { width: max-content; padding: 2px 6px; font-size: 14.7px; }
  .recognized .email-link { margin-top: 26px; }
}

/* ---------- Contact ---------- */
.page-intro--contact { padding-top: 43px; padding-bottom: 40px; min-height: 308px; }
@media (min-width: 1024px) { .page-intro--contact { padding-top: 76px; min-height: 380px; } }
.contact { padding: 48px 0 54px; }
.contact .wrap { display: grid; grid-template-columns: 1fr; }
.field { margin-top: 29px; }
.field:first-child { margin-top: 0; }
.field > label, .field > legend { display: block; font-size: 14px; line-height: 1.25; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  display: block; width: 100%; height: 56px; margin-top: 12px;
  border: 0; border-radius: 0; background: var(--diploma); color: var(--brown);
  padding: 0 16px; font-size: 16px;
}
.field textarea { height: 160px; padding: 14px 16px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.field legend { padding: 0; float: left; width: 100%; }
.choices { clear: both; display: grid; grid-template-columns: 185px 1fr; gap: 17px 0; padding-top: 13px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.25; cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; margin: 0; background: var(--diploma); border: 0; border-radius: 0; cursor: pointer;
}
.check input:checked { background: var(--burgundy); box-shadow: inset 0 0 0 4px var(--diploma); }
.check input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.field--message { margin-top: 30px; }
.consent { margin-top: 28px; }
.consent .check { gap: 14px; line-height: 1.43; }
.privacy-note { margin-top: 20px; font-size: 14px; line-height: 1.43; }
.privacy-note a { text-decoration: underline; text-underline-offset: 3px; }
.contact form .btn { margin-top: 38px; min-width: 271px; }
.contact-card { margin-top: 48px; background: var(--burgundy); color: var(--cream); padding: 46px 48px 39px; align-self: start; }
@media (max-width: 389px) { .contact-card { padding-inline: 32px; } }
.contact-card h2 { font-size: 34.7px; line-height: 0.81; }
.contact-card p, .contact-card li { font-weight: 500; font-size: 21.3px; line-height: 1.375; }
.contact-card .role { margin-top: 15px; }
.contact-card ul { margin-top: 20px; }
.contact-card a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 1024px) {
  .contact { padding: 102px 0 102px; }
  .contact form .btn { margin-top: 38px; }
  .contact-card { padding-top: 51px; }
  .contact .wrap { grid-template-columns: 700px 1fr; column-gap: 100px; }
  .choices { display: flex; gap: 0 103px; }
  .consent { margin-top: 29px; }
  .contact-card { margin-top: 0; min-height: 428px; }
  .contact-card .role { margin-top: 15px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--brown); color: var(--cream); padding: 63px 0 0; min-height: 1294px; }
.footer-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "brand" "news" "explore" "contact" "giving"; }
.footer-brand { grid-area: brand; }
.footer-brand img { width: 120px; }
.footer-brand .tagline { margin-top: 13px; font-size: 34.7px; line-height: 1.1; }
.footer-col h2, .footer-giving h2 { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 17px; color: var(--gold); }
.footer-col ul { margin-top: 10px; }
.footer-col li { font-size: 16px; line-height: 20px; padding: 3px 0 13px; }
.footer-col a:hover, .footer-legal a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.footer-explore { grid-area: explore; margin-top: 29px; }
.footer-contact { grid-area: contact; margin-top: 25px; }
.footer-news { grid-area: news; margin-top: 30px; }
.footer-news p { margin-top: 13px; font-size: 16px; line-height: 22.5px; }
.signup label { display: block; margin-top: 9px; font-size: 14px; line-height: 20px; }
.signup input {
  display: block; width: 100%; height: 48px; margin-top: 14px;
  border: 0; border-radius: 0; background: var(--diploma); color: var(--brown);
  padding: 0 16px; font-size: 16px;
}
.signup input::placeholder { color: var(--brown); opacity: 0.75; }
.signup input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.signup .btn { width: 100%; min-height: 48px; margin-top: 8px; background: var(--cream); color: var(--brown); }
.signup .btn:hover { background: var(--diploma); }
.footer-news .signup-consent { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--cream); }
.footer-news .signup-consent a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.footer-news .signup-consent a:hover, .footer-news .signup-consent a:focus-visible { color: var(--diploma); text-decoration-thickness: 2px; }
.footer-giving { grid-area: giving; margin-top: 26px; }
.footer-giving p { margin-top: 13px; font-size: 14px; line-height: 20px; max-width: 342px; }
.footer-legal { margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--cream); font-size: 14px; line-height: 20px; }
.footer-legal ul { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1023px) {
  .footer-brand .tagline { margin-top: 16px; }
  .footer-news { margin-top: 34px; }
  .footer-explore { margin-top: 41px; }
  .footer-contact { margin-top: 31px; }
  .footer-giving { margin-top: 31px; }
  .footer-legal { margin-top: 34px; }
}
@media (min-width: 1024px) {
  .site-footer { padding-top: 94px; min-height: 588px; }
  .footer-grid { grid-template-columns: 510px 204px 204px 282px; grid-template-areas: "brand explore contact news" "giving . . ."; row-gap: 64px; }
  .footer-brand img { width: 150px; }
  .footer-brand .tagline { margin-top: 14px; }
  .footer-explore, .footer-contact, .footer-news { margin-top: 2px; }
  .footer-col ul { margin-top: 19px; }
  .footer-col li { padding: 0 0 12px; }
  .footer-news p { margin-top: 19px; }
  .footer-giving { margin-top: 0; align-self: start; }
  .footer-giving p { max-width: 400px; margin-top: 12px; }
  .footer-legal { margin-top: 44px; }
  .footer-legal ul { flex-direction: row; gap: 0; }
  .footer-legal li + li::before { content: "\00b7"; padding: 0 0.95em; }
}

/* ---------- Newsletter pop-up (V7 p13-p15) ---------- */
.popup { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100% - 40px); overflow: auto; background: var(--forest); color: var(--cream); }
.popup::backdrop { background: rgba(69, 38, 17, 0.6); }
.popup-inner { position: relative; padding: 22px 24px 54px; }
.popup .close { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; padding: 4px; border: 0; background: transparent; cursor: pointer; }
.popup .close svg { display: block; width: 20px; height: 20px; stroke: var(--cream); stroke-width: 1.5; }
.popup .close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.popup h2 { font-size: 34.7px; line-height: 0.84; padding-right: 40px; }
.popup h2:focus { outline: none; }
.popup .intro { margin-top: 24px; font-size: 16px; line-height: 22px; }
.popup .hold-box { margin-top: 6px; padding: 2px 6px; font-size: 14.7px; line-height: 18.5px; }
.popup .signup label { margin-top: 23px; color: var(--cream); }
.popup .signup input { height: 56px; margin-top: 14px; }
.popup .signup .btn { min-height: 52px; margin-top: 16px; color: var(--forest); }
.popup .fine { margin-top: 15px; font-size: 14px; line-height: 20px; }
.popup .fine a { text-decoration: underline; text-underline-offset: 3px; }
.popup .no-thanks { display: block; margin-top: 9px; border: 0; padding: 0; background: none; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--cream); cursor: pointer; }
.popup .no-thanks:hover { text-decoration: underline; text-underline-offset: 4px; }
.popup .no-thanks:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.popup .thanks { margin-top: 18px; font-weight: 500; font-size: 21.3px; line-height: 30px; }
.popup [hidden] { display: none; }
@media (min-width: 600px) {
  .popup { margin: auto; width: 560px; max-height: calc(100% - 48px); }
  .popup-inner { padding: 46px 56px 53px; }
  .popup .close { top: 20px; right: 20px; }
  .popup.is-thanks .popup-inner { padding-bottom: 51px; }
}

/* Tablet (no V7 artboard): stacked phone layout with desktop proportions */
@media (min-width: 600px) and (max-width: 1023px) {
  .founder-photo { max-width: 460px; }
  .why { padding: 120px 0; }
  .nominee { padding: 110px 0 100px; }
  .two-col { padding-top: 100px; }
  .closing--home .t-display-l { max-width: 600px; }
  .footer-news { max-width: 420px; }
  .closing--page h2 { max-width: 640px; }
}
.why blockquote { display: flow-root; border-left: 1px solid var(--cream); padding-left: 39px; max-width: 820px; }
.why h2 { margin-top: -4px; }
.why .why-quote { margin-top: 33px; font-weight: 500; font-size: 21.3px; line-height: 1.375; }
@media (min-width: 1024px) {
  .why { padding: 95px 0 89px; }
  .why .why-quote { margin-top: 39px; font-size: 56px; line-height: 1.118; }
}

/* ===================== V1.2 (16OCT26): Lanka QA must-fixes ===================== */
/* Lanka ruling: titles at 300. Apple "Copperplate" selects its Light face; Copperplate Gothic Light and Cinzel resolve to 400 (no fake thin). */
.display, .steps .n { font-weight: 300; }

/* Must-fix 1: F1, hero button on one line at 360 and 375 */
/* V1.3: phone only, so the desktop button keeps its 29 px padding (Lanka ruling 1) */
@media (max-width: 599px) { .hero .btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; font-size: min(17.3px, 4.5vw); } }

/* Must-fix 2: phone headline breaks match the V7 phone artboard (390 wide) below 390 px */
@media (max-width: 389px) { .t-title, .t-display-m, .t-display-l { font-size: 8.9vw; } }

/* Must-fix 4: tap targets of at least 44 px. Links inside sentences are exempt. */
/* All widths: contact card links, Contact radios, pop-up Close and No thanks */
.contact-card a { display: inline-block; padding-block: 8px; margin-block: -8px; }
.choices { padding-top: 1px; row-gap: 0; }
.choices .check { min-height: 44px; align-items: center; }
.popup .close { width: 44px; height: 44px; padding: 12px; top: 12px; right: 12px; }
.popup .no-thanks { padding-block: 12px; margin-top: -3px; margin-bottom: -12px; }
@media (min-width: 600px) { .popup .close { top: 12px; right: 12px; } }
/* Phone and tablet: header, open menu, stand-alone text links, footer */
@media (max-width: 1023px) {
  .brand { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
  .menu summary { min-height: 44px; display: flex; align-items: center; padding-block: 0; }
  .menu-panel a { padding: 10px 0; }
  .menu-panel .btn { margin-top: 8px; }
  .text-link[href] { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .split-band .text-link[href] { margin-top: 16px; }
  .footer-col li { padding: 0; }
  .footer-col li a { display: flex; align-items: center; min-height: 44px; }
  .footer-legal ul { gap: 0; }
  .footer-legal a { display: flex; align-items: center; min-height: 44px; }
}

/* ===================== V1.3 (16OCT26): Lanka final list ===================== */
/* Desktop (1024 and up): stand-alone links at least 24 px tall. Padding with an equal negative margin, so type and layout stay the same.
   The nav (31 px) is left as is. Links inside sentences are exempt. */
@media (min-width: 1024px) {
  .brand { display: inline-block; padding-block: 3px; margin-block: -3px; }
  .footer-col li a { display: inline-block; padding-block: 3px; margin-block: -3px; }
  /* Legal links sit at the very bottom of the page: extend the hit area upward only, so the page does not grow */
  .footer-legal a { display: inline-block; padding-top: 6px; margin-top: -6px; }
  .text-link[href] { display: inline-block; padding-block: 3px; margin-block: -3px; }
  .split-band .text-link[href] { margin-top: 25px; }   /* 28 px visual gap kept */
  .recognized .email-link { margin-top: 23px; }        /* 26 px visual gap kept */
  /* Nit: Contact card email and phone no longer overlap on desktop (each about 29 px tall) */
  .contact-card a { padding-block: 0; margin-block: 0; }
}

/* ===================== V1.4 (16OCT26): footer fits from 1024 px up ===================== */
/* The desktop footer columns (510 + 204 + 204 + 282 = 1200 px) only fit once the wrap reaches 1200 px, at 1440.
   Below that, keep the same four columns and proportions but let them shrink, so nothing scrolls sideways.
   1440 and wider are unchanged. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .footer-grid { grid-template-columns: minmax(0, 510fr) minmax(0, 204fr) minmax(0, 204fr) minmax(0, 282fr); }
  /* Contact: the same sideways scroll at 1024 to about 1199 px (700 px form + 100 px gap left the card too little room).
     The form column shrinks, the card keeps at least 300 px, and the gaps ease from 48 px at 1024 to 100 px at 1440. */
  .contact .wrap { grid-template-columns: minmax(0, 700px) minmax(300px, 1fr); column-gap: clamp(48px, calc(48px + (100vw - 1024px) * 0.125), 100px); }
  .choices { flex-wrap: wrap; column-gap: clamp(40px, calc(40px + (100vw - 1024px) * 0.152), 103px); }
}

/* ===================== V1.5 (16OCT26): footer line breaks between 1024 and 1439 px ===================== */
/* The footer's two desktop breaks (Newsletter blurb, Giving note) are set for the 1440 column widths.
   In the narrower V1.4 columns they leave short or uneven lines, so let the text wrap naturally there.
   They stay hidden below 1024 (as before) and shown at 1440 and wider (unchanged). */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .site-footer .br-desk { display: none; }
}

/* ===================== V1.6 (19OCT26): For Schools email link gap on phone and tablet ===================== */
/* The V1.2 tap-target rule (.text-link[href] { padding-block: 12px; margin-block: -12px } below 1024 px) has the same
   specificity as .recognized .email-link and comes later, so it overrode the link's 46 px top margin with -12 px.
   The link sat flush under the HOLD box at 375 and 768 (visual gap 0 px, measured). V7 phone (p10) has 46 px.
   V1.3 already fixed the same thing for desktop (23 px + 3 px padding = 26 px, as V7). Desktop is unchanged. */
@media (max-width: 1023px) {
  .recognized .email-link[href] { margin-top: 34px; }   /* 34 px + 12 px padding = 46 px visual gap, as V7 phone */
}

/* ===================== V2 (22OCT26): DZ V4 feedback pass ===================== */
/* 1. One hover underline for every text link (DZ V4 note: full width under the whole link text, or none; Lana's 12OCT
   ruling: on hover only; V7 p16: 1 px, 12 px below the baseline, full text width). The stand-alone text links already
   had it. The desktop nav sat at 8 px, the footer and Contact card links at 5 px and "No thanks" at 4 px, and none of
   them showed it on keyboard focus. All now use the same line, on hover and keyboard focus. Colour: Placard on dark
   grounds (footer, Contact card, pop-up), Placard Ink on Cream (nav). Buttons, the logo and the phone menu (no hover
   on touch) have none. The desktop nav current-page underline and the inline Privacy Policy links are unchanged
   (open questions for Dasha). */
.nav-desktop a:hover, .nav-desktop a:focus-visible, .nav-desktop a[aria-current="page"],
.footer-legal a:hover, .footer-legal a:focus-visible,
.popup .no-thanks:hover, .popup .no-thanks:focus-visible {
  text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 1px; text-underline-offset: 12px;
}
/* Stacked lists (footer columns 32 px apart, the Contact card's email and phone 25 px apart): at 12 px the line sat
   nearer the NEXT link than its own, and on the card it ran into the phone number. Same full-width 1 px line, kept
   5 px under its own text (the V1.6 value), now also on keyboard focus. */
.footer-col a:hover, .footer-col a:focus-visible, .contact-card a:hover, .contact-card a:focus-visible {
  text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.footer-col a, .footer-legal a, .contact-card a, .popup .no-thanks { text-decoration-color: var(--gold); }
.nav-desktop a { text-decoration-color: var(--gold-deep); }

/* 3. For Schools: "Download the nomination checklist" is a HOLD with no file behind it yet (aria-disabled, no href),
   but it still drew the hover underline like a working link. V7 p16: a disabled control gets no hover change. It
   keeps its V7 look (full colour, magenta HOLD tags under it); it just no longer promises a download on hover.
   When the PDF exists, add the href and remove aria-disabled, and the normal hover returns. */
.text-link[aria-disabled="true"]:hover, .text-link[aria-disabled="true"]:focus-visible { text-decoration-line: none; cursor: default; }

/* 4. Found in the V2 QA: the footer has no bottom padding, so the legal line sat on the very bottom edge of every
   page (1 px under the text on desktop, 13 px of tap padding on the phone). V7 leaves about 45 px of Leather under
   it on desktop (p1) and about 38 px on the phone (p2). */
.site-footer { padding-bottom: 24px; }                                  /* + the 13 px tap padding = 37 px, V7 p2 */
@media (min-width: 1024px) { .site-footer { padding-bottom: 44px; } }   /* 45 px under the legal line, V7 p1 */

/* 5. Found in the V2 QA: For Schools "How your school is recognized" at 1024 to 1179 px. The grid is 420 px + 140 px
   + 1fr, and the magenta checklist HOLD (width: max-content, about 358 px) would not let the text column shrink
   below 364 px, so the column ran 70 px past the content edge (16 px from the window at 1024). Below 1440 the
   1440 split (420 / 140 / 640) becomes proportional and the HOLD box may wrap; 1440 is unchanged. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .recognized .wrap { grid-template-columns: minmax(0, 420fr) minmax(0, 640fr); column-gap: 9.72vw; }
  .recognized .hold-box { width: fit-content; max-width: 100%; }
}

/* 6. Found in the V2 QA: from 1024 to about 1090 px the desktop nav did not fit between the wordmark and the
   "Email Gia" button, so every link wrapped to two lines (Our / Story, How It / Works, For / Schools) and Contact
   touched the button. From 1100 px it fits on one line. Below 1100 the header keeps the tablet "Menu" (the same
   menu as at 768, with Email Gia inside it); the desktop nav and button return at 1100. 1100 and up unchanged. */
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .nav-desktop, .header-cta { display: none; }
  .menu { display: block; }
}

/* 7. Found in the V2 QA: the .br-desk line breaks place V7's 1440 artboard breaks. Between 1024 and 1439 px the
   columns are narrower, the text also wraps on its own, and the two together stranded short lines ("sits / on /
   an outside committee" at 1280, a 113 px middle line on Give, "nominate and / how it works." on For Schools).
   The footer already dropped them in this range (V1.x); every page now does the same, so 1024 to 1439 wraps
   naturally and 1440 keeps V7's breaks exactly. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .br-desk { display: none; }
  /* the guide note still dropped "it works." alone (53 px at 1280) and Give's "Some perks for your / gift" left one
     word on line 2; balanced wrap evens both */
  .recognized .note, .two-col h2 { text-wrap: balance; }
  /* Give two columns were 530 px + 110 px + 1fr: at 1024 the right column was 213 px (a 3-line heading). The 1440
     split (530 / 110 / 560) as proportional tracks; exactly 530 / 110 / 560 at 1440 */
  .two-col .wrap { grid-template-columns: minmax(0, 530fr) minmax(0, 560fr); column-gap: 7.64vw; }
  /* Contact: the Gia card shrank to its 300 px minimum (204 px inside its padding) from 1024 to 1365, so "Gia /
     Lucchetta" and "Founder, The / First Rung" broke. The card keeps at least 368 px (its name needs about 264
     inside the 48 px padding) and reaches V7's 400 px at 1440; the form takes the rest */
  .contact .wrap { grid-template-columns: minmax(0, 1fr) clamp(368px, 27.8vw, 400px); }
  /* Our Story: 460 px photo + 120 px gap left the text 274 px wide at 1024 (a 13-line lede). The 1440 split
     (460 / 120 / 620) as proportional tracks; exactly 460 / 120 / 620 at 1440 */
  .founder .wrap { grid-template-columns: minmax(0, 460fr) minmax(0, 620fr); column-gap: 8.33vw; }
}

/* ===================== V3 SZ (23OCT26): Lanka QA 22OCT26 ===================== */
/* M1: hero link carries both classes on one element, so give it the Placard line on dark grounds */
.text-link.on-dark { text-decoration-color: var(--gold); }
/* N1: Contact card email and phone hover/focus line in Placard, not Cream */
.contact-card a:hover, .contact-card a:focus-visible { text-decoration-color: var(--gold); }
/* N2: keep the Contact and Newsletter footer columns apart from 1024 to 1439 */
@media (min-width: 1024px) and (max-width: 1439.98px) { .footer-grid { column-gap: 24px; } }
/* Forms: not-live-yet message */
.form-status { margin-top: 12px; font-size: 14px; line-height: 20px; }
.form-status:empty { display: none; }
.form-status a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- Privacy and Terms pages (added by Fred, 28OCT26) ---------- */
.legal { padding: 60px 0 96px; }
.legal .wrap > * { max-width: 760px; }
.legal h2 { font: 500 18px/1.3 var(--sans); color: var(--burgundy); margin: 36px 0 10px; }
.legal p { font-size: 16px; line-height: 1.55; }
.legal p + p { margin-top: 12px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }