/*
 * GLI public site: GainLove 2 "Home 2" visual language, GLI content.
 * Source of truth for every value: docs/design/ (system/gainlove-system.md,
 * system/gl-shell.html, home/GL-Home.template.html). No build step.
 *
 * Contents: 1. Tokens and base  2. Shared components  3. Header  4. Footer
 *           5. Homepage sections  6. Responsive (sections 1-5)
 *           7. Inner-page banner  8. Donate page  9. Apply page  10. Application form
 *           11. About, Team, Gallery, Contact  12. Error pages
 *           (each with its own breakpoints)
 */

/* ===== 1. Tokens and base ===== */
:root {
  --ink: #0E1A22;
  --body: #5B6670;
  --page: #F7F8F9;
  --surface: #FFFFFF;
  --hairline: #E6E9EC;
  --ghost: #ECE9E2;
  --halftone: #DDD8CE;
  --brand: #019CDE;
  --blue: #0072A8;
  --blue-dark: #005A85;
  --tint: #E5F4FB;
  --amber: #FF9F0D;
  --green: #2E9E6A;
  --coral: #EF5B3A;
  --input: #8C969E;
  --track: #ECEFF2;
  --display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --leaf: 0 40px;
  --leaf-sm: 0 24px;
  --pill: 0 100px 100px;
  --shadow: 0 12px 32px rgba(14, 26, 34, .06);
  --zoom: 1;
}

/* Laptops and desktops see the site as at 85% browser zoom (user's choice, 5 Nov 2026). Phones and tablets
   (1024px and narrower) stay at 100%. Media queries still see the real window width. zoom shrinks vh too,
   so full-height rules divide 100vh by --zoom. */
@media (width > 1024px) { /* range syntax: no gap at fractional widths such as 1024.4px */
  :root { zoom: .85; --zoom: .85; }
}

body {
  margin: 0;
  background: var(--page);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
}

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
::placeholder { color: var(--body); }
img { max-width: 100%; }

.gl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gl-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--pill);
  font-weight: 700;
  text-decoration: none;
}
.gl-skip:focus { top: 12px; color: #FFFFFF; }

/* GLI logo mark (Africa + hands) and the solid Africa silhouette as masks */
.gli-mask, .gli-ghost, .africa-mask {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.gli-mask, .gli-ghost {
  -webkit-mask-image: url(img/gli-mark.png);
  mask-image: url(img/gli-mark.png);
}
.gli-ghost { background: var(--ghost); aspect-ratio: 463 / 526; }
.africa-mask {
  -webkit-mask-image: url(img/africa-mask.png);
  mask-image: url(img/africa-mask.png);
}

/* ===== 2. Shared components ===== */
.gl-wrap {
  position: relative;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}

.gl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--pill);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease, color .15s ease;
}
.gl-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.gl-btn--ink, .gl-btn--ink:hover { background: var(--ink); color: #FFFFFF; }
.gl-btn--amber, .gl-btn--amber:hover { background: var(--amber); color: var(--ink); }
.gl-btn--ghost { background: #FFFFFF; color: var(--ink); border: 1.5px solid var(--ink); }
.gl-btn--ghost:hover { background: var(--ink); color: #FFFFFF; }
.gl-btn--sm { height: 48px; padding: 0 22px; font-size: 13px; }

.gl-eyebrow {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
}
.gl-eyebrow--amber { color: var(--amber); }
.gl-eyebrow--ink { color: var(--ink); }

.gl-h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1.12;
  color: var(--ink);
}
.gl-h2--light { color: #FFFFFF; }

.gl-sec { padding: 120px 0 0; }
.gl-sec-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.gl-lede { margin: 18px auto 0; max-width: 620px; font-size: 16px; line-height: 1.65; color: var(--body); }

.gl-ulink:hover { text-decoration: underline !important; text-underline-offset: 4px; }

.gl-dot { position: absolute; border-radius: 50%; }

.gl-list { list-style: none; margin: 0; padding: 0; }

/* Result of a form post (subscribe) */
.gl-msg {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 0 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.gl-msg--ok { background: #E6F4EC; color: #17704A; }
.gl-msg--error { background: #FBE9E6; color: #A3301F; }

/* ===== 3. Header ===== */
.gl-header { position: relative; z-index: 10; background: var(--page); }
.gl-head {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  height: 96px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.gl-logo-link { display: flex; flex: none; }
.gl-logo { width: 150px; height: auto; display: block; }

.gl-nav { flex: 1; }
.gl-nav-list {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.gl-nav-item { position: relative; padding: 26px 0; }
.gl-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.gl-nav-link:hover, .gl-nav-link[aria-current] { color: var(--blue); }

/* Dropdowns behind the chevrons: open on hover and while focus is inside */
.gl-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 230px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #FFFFFF;
  border-radius: var(--leaf-sm);
  box-shadow: 0 12px 32px rgba(14, 26, 34, .10);
  text-transform: none;
  letter-spacing: 0;
}
.gl-nav-item:hover .gl-sub, .gl-nav-item:focus-within .gl-sub { display: block; }
.gl-sub a {
  display: block;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
.gl-sub a:hover { color: var(--blue); }

.gl-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.gl-lang {
  display: flex;
  align-items: center;
  margin-right: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.gl-lang a {
  min-width: 30px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--body);
  text-decoration: none;
}
.gl-lang a[aria-current="true"] { color: var(--ink); }
.gl-lang-sep { color: var(--input); }

.gl-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.gl-icon:hover { background: var(--track); color: var(--ink); }

.gl-menu {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--pill);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Mobile menu panel (shown by the menu button below 1180px) */
.gl-mnav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh / var(--zoom) - 96px);
  overflow-y: auto;
  background: var(--page);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 24px 32px rgba(14, 26, 34, .10);
}
.gl-mnav.is-open { display: block; }
.gl-mnav-inner { max-width: 1290px; margin: 0 auto; padding: 8px 24px 28px; }
.gl-mnav-list > li { border-bottom: 1px solid var(--hairline); }
.gl-mnav-link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.gl-mnav-link[aria-current] { color: var(--blue); }
.gl-mnav-sub { padding: 0 0 12px 14px; }
.gl-mnav-sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
}
.gl-mnav-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 20px; }
.gl-mnav-extra .gl-lang { margin: 0; }
.gl-mnav-signin { font-weight: 700; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* ===== 4. Footer ===== */
/* The footer sits on the warm stone tone of the design (#E7E4DB). Text is darkened for contrast on it:
   body text is #4A5560 and links #2F3B44, both above 4.5:1. */
.gl-foot { --foot-text: #4A5560; --foot-link: #2F3B44; --foot-line: rgba(14, 26, 34, .14); color: var(--foot-text); background: #E7E4DB; }
.gl-foot a:not(.gl-btn):hover { color: var(--blue) !important; }
.gl-foot-inner { max-width: 1290px; margin: 0 auto; padding: 64px 24px 0; }

.gl-news {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--foot-line);
}
.gl-news-intro { flex: none; }
.gl-news-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 24px; color: var(--ink); }
.gl-news-sub { margin: 6px 0 0; font-size: 14px; }
.gl-news-box { width: 420px; max-width: 100%; }
.gl-news-form { display: flex; align-items: stretch; }
.gl-news-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--input);
  border-right: 0;
  border-radius: 0 0 0 100px;
  padding: 0 18px;
  height: 52px;
}
.gl-news-field input {
  border: 0;
  outline-offset: 6px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  width: 100%;
  height: 48px;
}
.gl-news-btn { height: 54px; border-radius: 0 100px 100px 0; }

.gl-contact { display: flex; gap: 48px; margin-left: auto; flex-wrap: wrap; }
.gl-news--contact-only .gl-contact { margin-left: 0; }
.gl-contact-item { display: flex; align-items: center; gap: 16px; }
.gl-contact-item > svg { flex: none; box-sizing: border-box; width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: #FFFFFF; }
.gl-contact-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--foot-text); }
.gl-contact-value { display: inline-block; margin-top: 2px; color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; }
.gl-contact-value:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.gl-foot-cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 52px 0 56px;
}
.gl-foot-logo { width: 132px; height: auto; display: block; }
.gl-foot-blurb { margin: 20px 0 26px; font-size: 15px; line-height: 1.7; max-width: 300px; color: var(--foot-text); }
.gl-foot-h { margin: 0 0 20px; font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.gl-foot-list { display: grid; gap: 12px; font-size: 15px; }
.gl-foot-list a { color: var(--foot-link); text-decoration: none; }
.gl-foot-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-social { display: flex; gap: 10px; flex-wrap: wrap; margin-left: -4px; }
.gl-foot .gl-icon { width: 42px; height: 42px; background: #FFFFFF; color: var(--ink); }
.gl-foot .gl-icon:hover { background: var(--ink); color: #FFFFFF; }
.gl-foot-lang { margin-top: 18px; font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.gl-foot-lang a { color: var(--foot-text); text-decoration: none; }
.gl-foot-lang a[aria-current="true"] { color: var(--ink); }

.gl-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--foot-line);
  font-size: 14px;
}
.gl-foot-bottom a { color: var(--ink); font-weight: 600; text-decoration: none; }
.gl-foot-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 32px; }
.gl-foot-bottom a.gl-foot-dev { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--foot-text); font-weight: 400; }
.gl-foot-dev img { display: block; width: auto; height: 30px; margin-right: -22px; } /* the logo file has blank space on its right */

/* ===== 5. Homepage sections ===== */

/* 5.1 Hero + Institute status */
.h-hero { position: relative; overflow: hidden; padding: 16px 0 0; }
.h-ghost-hero { position: absolute; top: -110px; right: -330px; width: 900px; }
.h-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.h-hero-eyebrow { margin-bottom: 18px; }
.h-h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 88px;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
}
.h-mission { margin: 26px 0 0; max-width: 540px; font-size: 20px; font-weight: 500; line-height: 1.6; }
.h-mission strong { font-weight: 700; color: var(--ink); }
.h-hero-cta { margin-top: 34px; }
/* Wider than its column on desktop, reaching into the gap: the headline keeps its line length */
.h-hero-art { position: relative; justify-self: start; width: calc(100% + 96px); max-width: 760px; }
/* Smaller laptops: the overhang stops short of the window edge */
@media (1024px < width <= 1280px) { .h-hero-art { width: calc(100% + 24px); } }
@media (1024px < width <= 1180px) { .h-hero-art { width: 100%; } }
.h-hero-dot-1 { left: 3%; top: 4%; width: 16px; height: 16px; background: var(--amber); }
.h-hero-dot-2 { right: -1%; top: 15%; width: 18px; height: 18px; background: var(--coral); }
.h-hero-dot-3 { left: -2%; top: 47%; width: 12px; height: 12px; background: var(--green); }
.h-hero-dot-4 { left: 30%; bottom: 9%; width: 12px; height: 12px; background: var(--brand); }
.h-hero-dot-5 { right: 16%; bottom: 2%; width: 10px; height: 10px; background: var(--amber); }
.h-hero-photo { aspect-ratio: 900 / 944; width: 100%; }
.h-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }

.h-status {
  position: relative;
  margin-top: 36px;
  max-width: 1242px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: var(--leaf-sm);
  padding: 40px 48px;
  box-shadow: var(--shadow);
  scroll-margin-top: 24px;
}
/* On desktop the card sits closer under the photo: the photo box's empty lower-left corner is not wasted space */
@media (width > 1024px) { .h-status { margin-top: 20px; } }
.h-status-grid { display: grid; gap: 28px; }
.h-status-grid--open { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.h-status-grid--closed { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; }
.h-status-grid--plain { grid-template-columns: minmax(0, 1fr); }
.h-status-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.h-status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.h-status-dot--open { background: #1F8A5B; box-shadow: 0 0 0 4px #E6F4EC; }
.h-status-dot--closed { background: #B26A00; box-shadow: 0 0 0 4px #FCF1DF; }
.h-status-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.h-badge {
  padding: 5px 12px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.h-badge--open { background: #E6F4EC; color: #17704A; }
.h-badge--closed { background: #FCF1DF; color: #8A5200; }
.h-status-text { margin: 14px 0 0; font-size: 22px; line-height: 1.55; }
.h-status-dates { font-weight: 700; color: var(--ink); }
.h-status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
.h-signin { margin: 0; font-size: 16px; }
.h-signin a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.h-notify { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.h-notify-field { flex: 1 1 200px; min-width: 0; }
.h-notify .gl-msg { flex: 1 1 100%; margin: 0; }
.h-notify .gl-label { font-size: 16px; }
.h-notify .gl-input { height: 56px; font-size: 17px; }
.h-status-actions .gl-btn, .h-notify .gl-btn { height: 56px; padding: 0 30px; font-size: 16px; }

/* Countdown to the next Institute, at the foot of the status card (site.js ticks it) */
.h-count { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.h-count-before { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.h-count-before[hidden], .h-count-now[hidden] { display: none; }
.h-count-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
/* French ordinal (16ᵉ, 1ᵉʳ): stays lower case and raised in the capitals, without making the line taller */
.h-ord { font-size: .78em; line-height: 0; letter-spacing: 0; text-transform: none; vertical-align: .42em; }
.h-count-body { display: flex; flex: 1 1 auto; gap: 16px; }
.h-count-unit { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 0; min-width: 150px; padding: 24px 16px 20px; border-radius: 0 16px 16px; background: var(--tint); }
.h-count-n { font-family: var(--display); font-weight: 700; font-size: clamp(50px, 4.4vw, 76px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.h-count-l { font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--blue-dark); }
.h-count-now { display: flex; align-items: flex-start; gap: 16px; margin: 0; font-size: 22px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.h-count-now .h-status-dot { margin-top: 11px; }

.gl-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.gl-input {
  display: block;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--input);
  border-radius: 0 16px;
  background: #FFFFFF;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

/* Honeypot: off-screen for people, still in the form for bots */
.gl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 5.2 Who we are */
.h-grid4, .h-grid3 { display: grid; gap: 30px; }
.h-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-pillar { background: #FFFFFF; border-radius: var(--leaf); padding: 46px 30px 42px; text-align: center; }
.h-pillar svg { display: block; margin: 0 auto; }
.h-pillar-title { margin: 24px 0 10px; font-family: var(--display); font-weight: 500; font-size: 23px; line-height: 1.3; color: var(--ink); }
.h-pillar-text { margin: 0; font-size: 15px; line-height: 1.6; }

/* 5.3 About us */
.h-about-sec { position: relative; overflow: hidden; }
.h-ghost-about { position: absolute; top: 60px; right: -320px; width: 640px; }
.h-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.h-cluster { position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 540; }
.h-halftone { position: absolute; left: 0; top: 0; width: 64%; height: auto; display: block; }
.h-cluster-dot-1 { left: 7%; top: 13%; width: 16px; height: 16px; background: var(--amber); }
.h-cluster-dot-2 { left: 52%; top: 6%; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--brand); }
.h-cluster-dot-3 { left: 74%; top: 81%; width: 12px; height: 12px; background: var(--green); }
.h-cluster-img { position: absolute; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; object-fit: cover; display: block; }
.h-cluster-img--main { left: 15%; top: 17%; width: 60%; }
.h-cluster-img--a { left: 63%; top: 9%; width: 33%; border: 6px solid var(--page); }
.h-cluster-img--b { left: 1%; top: 60%; width: 23%; border: 5px solid var(--page); }
.h-years {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--blue);
}
.h-years-line { display: inline-block; width: 56px; height: 2px; background: var(--amber); }
.h-about-lead { margin: 22px 0 0; font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--ink); }
.h-about-text { margin: 16px 0 0; font-size: 16px; line-height: 1.65; }
.h-about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 34px; }
.h-iconlink {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.h-iconlink-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #FFFFFF;
}
.h-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.h-partners .gl-eyebrow { margin: 0; }
.h-partners-list { display: flex; flex-wrap: wrap; gap: 14px; }
.h-partners-list img { display: block; width: 60px; height: 60px; object-fit: contain; border-radius: 0 16px; }
.h-partners-list a { display: block; border-radius: 0 16px; } /* a logo linked to the partner's website: the focus ring hugs the logo */

/* 5.4 Ways to give */
.h-grid3 > li { display: flex; }
/* Two cards only (third not supplied yet): same card width, centred */
.h-grid3--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 850px; margin: 0 auto; }
.h-cause {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--leaf);
  overflow: hidden;
}
.h-cause-media { position: relative; }
.h-cause-img { display: block; width: 100%; height: 240px; object-fit: cover; }
.h-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 12px;
  background: #FFFFFF;
  color: var(--ink);
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.h-progress { height: 6px; background: var(--track); }
.h-progress-bar { height: 6px; background: var(--amber); border-radius: 0 8px 8px 0; }
.h-cause-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin: 0 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.h-cause-stat { padding: 0 4px; }
.h-cause-stat--mid { padding: 2px 12px; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.h-cause-label { margin: 0; font-size: 13px; line-height: 1.3; }
.h-cause-value { margin: 6px 0 0; font-family: var(--display); font-size: 17px; line-height: 1.2; color: var(--ink); }
.h-cause-stat--mid .h-cause-value { margin-top: 2px; font-size: 28px; line-height: 1.1; white-space: nowrap; }
.h-cause-body { padding: 20px 28px 76px; text-align: center; }
.h-cause-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--ink); }
.h-cause-text { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.h-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: var(--ink);
  border-radius: 40px 0 0 0;
  transition: filter .15s ease;
}
.h-corner:hover { color: var(--ink); filter: brightness(.92); }
.h-give-more { margin-top: 48px; text-align: center; }

/* 5.5 Where we work */
.h-where { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.h-where .gl-lede { margin: 18px 0 0; max-width: 520px; }
.h-stats { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.h-stat { display: flex; align-items: flex-start; gap: 16px; background: #FFFFFF; border-radius: var(--leaf-sm); padding: 24px 22px; }
.h-stat svg { flex: none; }
.h-statnum { margin: 0; font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1; color: var(--ink); }
.h-stat-label { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.h-countries { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.h-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.h-country-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.h-country-dot--office { background: var(--amber); }
.h-map { position: relative; width: 100%; max-width: 600px; margin-left: auto; }
.h-map-img { display: block; width: 100%; height: auto; }
.h-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .5), 0 2px 6px rgba(14, 26, 34, .25);
}
.h-pin--office {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: var(--amber);
  border-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255, 159, 13, .35), 0 2px 6px rgba(14, 26, 34, .25);
}
.h-office {
  position: absolute;
  left: 74%;
  top: 40.5%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: #FFFFFF;
  border-radius: 0 12px;
  box-shadow: 0 8px 24px rgba(14, 26, 34, .12);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
/* On small laptops the map reaches the window edge, and the French label ("Bureau de l'IGL · Kampala")
   ran past it. Sit it above the pin, flush with the map, as on phones. */
@media (1024px < width <= 1240px) {
  .h-office { left: auto; right: 0; top: 29%; }
}

/* 5.6 How we work: photo banner + tabbed card */
.h-banner { position: relative; margin-right: 110px; border-radius: var(--leaf); overflow: hidden; background: var(--ink); }
.h-banner-img { display: block; width: 100%; height: 500px; object-fit: cover; }
.h-banner-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(14, 26, 34, .8); }
.h-banner-copy { position: absolute; top: 96px; left: 64px; max-width: 480px; }
.h-tabcard {
  position: relative;
  z-index: 2;
  width: 620px;
  max-width: 100%;
  box-sizing: border-box;
  margin: -230px 0 0 auto;
  background: #FFFFFF;
  border-radius: var(--leaf);
  padding: 34px 44px 44px;
  box-shadow: var(--shadow);
}
.h-tabs {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--hairline);
  scrollbar-width: none;
}
.h-tabs::-webkit-scrollbar { display: none; }
.h-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 -1px;
  padding: 6px 6px 14px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--body);
  text-align: center;
  cursor: pointer;
}
.h-tab:hover { color: var(--ink); }
.h-tab[aria-selected="true"] { border-bottom-color: var(--amber); font-weight: 700; color: var(--ink); }
.h-tab[aria-selected="true"] svg { color: var(--amber); }
.h-panel { padding-top: 28px; }
.h-panel[hidden] { display: none; }
.no-js .h-panel[hidden] { display: block; } /* without JS every panel shows, stacked */
.h-panel-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--ink); }
.h-panel-text { margin: 12px 0 0; font-size: 15px; line-height: 1.65; }
.h-panel .gl-eyebrow { margin: 20px 0 10px; }
.h-panel .gl-btn { margin-top: 28px; }
.h-qs { display: grid; gap: 8px; }
.h-q { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.h-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
}
.h-q strong { font-weight: 600; }
.h-q-theme { color: var(--body); }
.h-reports { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.h-report {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.h-report svg { color: var(--blue); flex: none; }
.h-report:hover { border-color: var(--ink); color: var(--ink); }
.h-panel .h-iconlink { margin-top: 18px; }

/* 5.7 Stories */
.h-story { flex: 1; display: flex; flex-direction: column; background: #FFFFFF; border-radius: var(--leaf); overflow: hidden; }
.h-story-img { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: var(--leaf); }
.h-story-body { flex: 1; display: flex; flex-direction: column; padding: 24px 30px 12px; }
.h-story-meta { margin: 0; font-size: 13px; line-height: 1.4; }
.h-story-title { margin: 10px 0 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.32; color: var(--ink); }
.h-story-title a { color: var(--ink); text-decoration: none; }
.h-story-title a:hover { color: var(--blue); }
.h-story-text { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }
.h-story-foot { margin-top: auto; padding-top: 20px; }
.h-story-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.h-story-by { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.h-story-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
}
.h-story-avatar .gli-mask { display: block; width: 15px; aspect-ratio: 463 / 526; background: var(--brand); }

/* 5.8 Voices from the region */
.h-voices-sec { position: relative; overflow: hidden; }
.h-voices-sec .gl-sec-head { margin-bottom: 48px; }
.h-ghost-voices { position: absolute; left: 50%; top: 150px; width: 600px; margin-left: -300px; }
.h-stage { position: relative; padding: 40px 0 60px; }
.h-ava {
  position: absolute;
  box-sizing: border-box;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(14, 26, 34, .10);
}
.h-ava-1 { left: 9%; top: 10px; width: 72px; height: 72px; }
.h-ava-2 { left: 3%; top: 190px; width: 56px; height: 56px; }
.h-ava-3 { left: 13%; top: 320px; width: 64px; height: 64px; }
.h-ava-4 { left: 17%; top: 120px; width: 44px; height: 44px; border-width: 3px; }
.h-ava-5 { left: 85%; top: 70px; width: 64px; height: 64px; }
.h-ava-6 { left: 80%; top: 300px; width: 48px; height: 48px; border-width: 3px; }
.h-quote-wrap { position: relative; max-width: 600px; margin: 0 auto; }
.h-frame { position: absolute; top: 30px; left: -40px; right: -40px; bottom: -30px; border: 1px solid var(--halftone); border-radius: var(--leaf); }
.h-quote {
  position: relative;
  margin: 0;
  background: #FFFFFF;
  border-radius: var(--leaf);
  padding: 48px 56px 44px;
  text-align: center;
  box-shadow: var(--shadow);
}
.h-quote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--brand);
}
.h-quote-text { margin: 26px 0 0; font-size: 19px; line-height: 1.6; font-style: italic; color: var(--ink); }
.h-quote-cap { margin-top: 22px; font-size: 14px; line-height: 1.5; }
.h-quote-who { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }

/* 5.9 Partner with us */
.h-cta-sec { padding-bottom: 48px; }
.h-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink);
  border-radius: var(--leaf);
  overflow: hidden;
}
.h-cta-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 72px 64px; }
.h-cta-h2 { font-size: 46px; line-height: 1.14; }
.h-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 36px; }
.h-cta-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #FFFFFF; font-size: 16px; font-weight: 600; text-decoration: none; }
.h-cta-link:hover { color: #FFFFFF; }
.h-cta-photo { position: relative; }
.h-cta-img { display: block; width: 100%; height: 460px; object-fit: cover; }
.h-cta-dot-1 { left: 28px; top: 32px; width: 16px; height: 16px; background: var(--amber); }
.h-cta-dot-2 { right: 40px; bottom: 36px; width: 12px; height: 12px; background: var(--brand); }

/* ===== 6. Responsive (breakpoints from the approved artboard) ===== */
@media (min-width: 1181px) {
  .gl-mnav, .gl-mnav.is-open { display: none; }
}

@media (max-width: 1180px) {
  .gl-nav { display: none; }
  .gl-menu { display: inline-flex; }
  .no-js .gl-mnav { display: block; position: static; box-shadow: none; max-height: none; }
  .h-grid3, .h-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .gl-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-news { flex-wrap: wrap; }

  .h-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .h-h1 { font-size: 76px; }
  .h-mission { font-size: 19px; max-width: 620px; }
  .h-hero-art { justify-self: center; width: 100%; max-width: 680px; }
  .h-ghost-hero { top: auto; bottom: 40px; right: -260px; width: 640px; }
  .h-about { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .h-cluster { margin: 0 auto; }
  .h-where { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .h-map { margin: 0 auto; }
  .h-banner { margin-right: 0; }
  .h-banner-img { height: 380px; }
  .h-banner-copy { top: auto; bottom: 44px; left: 40px; right: 40px; }
  .h-tabcard { margin: 24px 0 0; width: auto; }
  .h-tabs { overflow-x: auto; justify-content: flex-start; }
  .h-tab { flex: 0 0 136px; }
  .h-stage { padding: 104px 0 96px; }
  .h-ava-1 { left: 4%; top: 0; }
  .h-ava-2 { left: 20%; top: 30px; }
  .h-ava-3 { left: 8%; top: auto; bottom: 8px; }
  .h-ava-4 { left: 68%; top: 40px; }
  .h-ava-5 { left: 84%; top: 0; }
  .h-ava-6 { left: 80%; top: auto; bottom: 22px; }
  .h-cta-copy { padding: 56px 40px; }
  .h-cta-h2 { font-size: 36px; }
}

@media (max-width: 720px) {
  .gl-hide-sm { display: none !important; }
  .gl-head { height: 76px; gap: 8px; }
  .gl-mnav { max-height: calc(100vh - 76px); }
  .gl-logo { width: 100px; }
  .gl-head .gl-lang-cur { display: none; }
  .gl-donate { height: 46px; padding: 0 14px; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
  .gl-donate-icon { display: none; }
  .gl-foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gl-foot-brand { grid-column: 1 / -1; }
  .gl-news { flex-direction: column; align-items: stretch; }
  .gl-news-box { width: 100%; }
  .gl-foot-bottom { flex-direction: column; align-items: flex-start; }
  .gl-foot-right { justify-content: flex-start; }

  .gl-sec { padding-top: 68px; }
  .h-cta-sec { padding-bottom: 24px; }
  .h-h1 { font-size: clamp(38px, 13vw, 56px); }
  .h-mission { font-size: 18px; }
  .gl-h2 { font-size: 34px; }
  .gl-sec-head, .h-voices-sec .gl-sec-head { margin-bottom: 36px; }
  .h-hero-art { max-width: none; }
  .h-ghost-hero { width: 520px; right: -250px; bottom: 150px; }
  .h-status { padding: 28px 22px; }
  .h-status-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .h-status-title, .h-count-title { font-size: 17px; }
  .h-status-head { flex-wrap: nowrap; align-items: flex-start; }
  .h-status-head .h-status-title { min-width: 0; }
  .h-status-head .h-status-dot { margin-top: 5px; }
  .h-status-text, .h-count-now { font-size: 19px; }
  .h-status-actions .gl-btn, .h-notify .gl-btn { flex: 1 1 100%; justify-content: center; }
  .h-count { margin-top: 20px; padding-top: 18px; }
  .h-count-before { flex-direction: column; align-items: stretch; gap: 14px; }
  .h-count-body { gap: 10px; }
  .h-count-unit { flex: 1 1 0; min-width: 0; padding: 18px 6px 16px; }
  .h-count-n { font-size: 44px; }
  .h-count-l { font-size: 16px; }
  .h-grid3, .h-grid4 { grid-template-columns: minmax(0, 1fr); }
  .h-stat { flex-direction: column; gap: 10px; padding: 18px; }
  .h-statnum { font-size: 34px; }
  .h-office { left: auto; right: 0; top: 29%; }
  .h-banner-img { height: 300px; }
  .h-banner-copy { left: 24px; right: 24px; bottom: 30px; }
  .h-tabcard { padding: 24px 20px 30px; }
  .h-quote { padding: 40px 24px 36px; }
  .h-quote-text { font-size: 17px; }
  .h-frame { left: -10px; right: -10px; }
  .h-stage { padding: 84px 0 0; }
  .h-ava-x { display: none; }
  .h-ava-1 { left: 2%; top: 0; width: 60px; height: 60px; }
  .h-ava-5 { left: auto; right: 4%; top: 12px; width: 52px; height: 52px; }
  .h-ghost-about { display: none; }
  .h-ghost-voices { width: 420px; margin-left: -210px; }
  .h-cta { grid-template-columns: minmax(0, 1fr); }
  .h-cta-photo { order: -1; }
  .h-cta-copy { padding: 32px 24px 36px; }
  .h-cta-h2 { font-size: 34px; }
  .h-cta-img { height: 220px; }
  .h-pin { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-width: 2px; }
  .h-pin--office { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2px; }
}

/* Poppins is wide: keep "Faire un don" on one line on small phones. The menu has its own EN/FR switch. */
@media (max-width: 389px) {
  .gl-head .gl-lang { display: none; }
}
@media (max-width: 480px) {
  /* Four big tiles do not fit a phone: two by two */
  .h-count-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-count-n { font-size: 50px; }
  .h-count-unit { padding: 20px 8px 18px; }
}
@media (max-width: 359px) {
  .gl-logo { width: 84px; }
}

/* ===== 7. Inner-page banner (docs/design/donate/main.html, section 1) ===== */
.gl-banner-sec { padding: 8px 0 0; }
.gl-banner {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  background: var(--ink);
  border-radius: var(--leaf);
  overflow: hidden;
}
.gl-banner-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(56%, 720px);
  border-radius: 0 0 0 40px;
  overflow: hidden;
}
.gl-banner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%; display: block; }
.gl-banner-ovl { position: absolute; inset: 0; background: rgba(14, 26, 34, .16); }
.gl-banner-halftone {
  position: absolute;
  left: calc(44% - 40px);
  bottom: -56px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(255, 255, 255, .2) 1.6px, transparent 2px);
  background-size: 12px 12px;
}
.gl-banner-dot-1 { top: 30px; left: calc(44% - 7px); width: 14px; height: 14px; background: var(--amber); }
.gl-banner-dot-2 { bottom: 36px; left: 36%; width: 10px; height: 10px; background: var(--brand); }
.gl-banner-dot-3 { top: 42px; right: 46px; width: 12px; height: 12px; background: var(--coral); }
.gl-banner-dot-4 { bottom: 34px; right: 30%; width: 10px; height: 10px; background: var(--green); }
.gl-banner-copy { position: relative; z-index: 2; max-width: 440px; padding: 24px 0 36px 64px; } /* grows when a title wraps */
.gl-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gl-crumb a, .gl-crumb [aria-current] { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; text-decoration: none; }
.gl-crumb a:hover, .gl-crumb [aria-current] { color: var(--amber); }
.gl-crumb-sep { color: var(--input); }
.gl-banner-h1 {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 78px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.gl-banner-text { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: #FFFFFF; }
.gl-banner a:focus-visible { outline-color: #FFFFFF; }

@media (max-width: 1024px) {
  .gl-banner-copy { max-width: 300px; padding-left: 40px; }
  .gl-banner-h1 { font-size: 64px; }
}
@media (max-width: 720px) {
  .gl-banner { align-items: flex-end; }
  .gl-banner-photo { width: 100%; border-radius: 0; }
  .gl-banner-ovl { background: rgba(14, 26, 34, .8); }
  .gl-banner-copy { max-width: none; padding: 72px 24px 36px; }
  .gl-banner-h1 { font-size: 44px; }
}

/* ===== 8. Donate page (docs/design/donate/: main.html + page.css) ===== */

/* 8.1 Form + side column */
.dn-form-sec { padding: 64px 0 0; scroll-margin-top: 16px; }
.dn-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.dn-form { min-width: 0; box-sizing: border-box; background: #FFFFFF; border-radius: var(--leaf); padding: 48px 48px 44px; }
.dn-form-head { margin-bottom: 32px; }
.dn-form .gl-eyebrow, .dn-card-eyebrow { margin: 0 0 10px; line-height: 1.4; }
.dn-form-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 38px; line-height: 1.15; color: var(--ink); }
.dn-form-lede { margin: 12px 0 0; font-size: 16px; line-height: 1.65; }

.dn-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: #FBE9E6;
  border-radius: 0 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: #A3301F;
}
.dn-notice svg, .dn-err svg { flex: none; margin-top: 1px; }
.dn-errors { margin: 0 0 28px; padding: 20px 24px; border: 2px solid #C2412D; border-radius: 0 16px; }
.dn-errors:focus { outline: 2px solid var(--blue); outline-offset: 3px; }
.dn-errors-title { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); }
.dn-errors ul { margin: 0; padding-left: 20px; }
.dn-errors li + li { margin-top: 4px; }
.dn-errors a { font-weight: 600; color: #A3301F; }

.dn-group { border-top: 1px solid var(--hairline); padding: 32px 0; }
.dn-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.dn-step { margin: 0; display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ink); }
.dn-step--block { margin-bottom: 24px; }
.dn-step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0 12px;
  background: #EAF6FC;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}
.dn-fieldset, .dn-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.dn-legend, .dn-label { display: block; padding: 0; margin: 0 0 12px; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); }
.dn-label { margin-bottom: 8px; }

/* Native radios and checkbox, visually replaced by the face next to them */
.dn-seg input, .dn-tile input, .dn-cb input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

/* Give once / Monthly */
.dn-seg { position: relative; }
.dn-seg-track { display: flex; padding: 3px; background: #FFFFFF; border: 1px solid var(--input); border-radius: var(--pill); }
.dn-seg label { position: relative; flex: 1; display: flex; cursor: pointer; }
.dn-seg-face {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.dn-seg label:hover .dn-seg-face { color: var(--blue); }
.dn-seg input:checked + .dn-seg-face { background: var(--ink); color: #FFFFFF; }
.dn-seg input:focus-visible + .dn-seg-face { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Amount and payment tiles */
.dn-amts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dn-tile { position: relative; display: flex; cursor: pointer; }
.dn-tile--feat { grid-column: 1 / -1; }
.dn-face { flex: 1; box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--input); border-radius: var(--leaf-sm); color: var(--ink); }
.dn-ib { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.dn-feat { display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
.dn-feat-ic { width: 56px; height: 56px; border-radius: 0 16px; background: #FFF3E0; }
.dn-feat-copy { flex: 1; min-width: 0; padding-right: 28px; }
.dn-feat-amt { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.1; }
.dn-feat-title { display: block; margin-top: 6px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.dn-feat-text { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--body); }
.dn-amt { display: flex; align-items: center; justify-content: center; height: 72px; font-family: var(--display); font-weight: 500; font-size: 24px; }
.dn-check {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
}
.dn-check--sm { top: 8px; right: 8px; width: 20px; height: 20px; }
.dn-tile:hover .dn-face { border-color: var(--ink); }
.dn-tile input:checked + .dn-face { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: #EAF6FC; }
.dn-tile input:checked + .dn-face .dn-check { display: inline-flex; }
.dn-tile input:checked + .dn-face .dn-ib { background: #FFFFFF; }
.dn-tile input:focus-visible + .dn-face { outline: 2px solid var(--blue); outline-offset: 3px; }

.dn-other {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 72px;
  box-sizing: border-box;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--input);
  border-radius: 0 16px;
  cursor: text;
}
.dn-other:hover { border-color: var(--ink); }
.dn-other:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.dn-other.is-filled { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: #EAF6FC; }
.dn-other-label { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); }
.dn-other-row { display: flex; align-items: center; gap: 6px; }
.dn-other-cur { flex: none; font-weight: 700; font-size: 16px; color: var(--ink); }
.dn-other input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.dn-other input:focus-visible { outline: none; }

/* Text fields and selects */
.dn-field-wrap { margin-top: 24px; }
.dn-select { position: relative; }
.dn-select svg { position: absolute; right: 18px; top: 19px; pointer-events: none; }
.dn-field {
  display: block;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--input);
  border-radius: 0 16px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
select.dn-field { -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer; }
.dn-field:hover { border-color: var(--ink); }
.dn-field[aria-invalid="true"], .dn-other.is-invalid { border-color: #C2412D; box-shadow: inset 0 0 0 1px #C2412D; }
.dn-err { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: #A3301F; }
.dn-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dn-two--mm { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }

.dn-cb { position: relative; margin-top: 16px; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.dn-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1.5px solid var(--input);
  border-radius: 0 7px;
}
.dn-box svg { display: none; }
.dn-cb:hover .dn-box { border-color: var(--ink); }
.dn-cb input:checked + .dn-box { background: var(--blue); border-color: var(--blue); }
.dn-cb input:checked + .dn-box svg { display: block; }
.dn-cb input:focus-visible + .dn-box { outline: 2px solid var(--blue); outline-offset: 3px; }
.dn-cb-text { font-weight: 600; font-size: 15px; color: var(--ink); }

/* Payment method: mobile money details, or a note that card details come next */
.dn-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dn-method { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 18px 48px 18px 18px; }
.dn-method-ic { width: 52px; height: 52px; border-radius: 0 14px; background: var(--page); }
.dn-method-copy { min-width: 0; }
.dn-method-title { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; }
.dn-method-text { display: block; font-size: 14px; line-height: 1.45; color: var(--body); }
.dn-mmpanel { margin-top: 16px; padding: 24px; background: var(--page); border-radius: var(--leaf-sm); }
.dn-cardpanel {
  margin: 16px 0 0;
  padding: 20px 24px;
  align-items: flex-start;
  gap: 12px;
  background: var(--page);
  border-radius: var(--leaf-sm);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.dn-cardpanel svg { flex: none; margin-top: 1px; }

/* Submit */
.dn-submit-sec { border-top: 1px solid var(--hairline); padding-top: 32px; }
.dn-submit { display: flex; align-items: center; gap: 20px 28px; }
.dn-submit-btn { flex: none; gap: 12px; height: 64px; padding: 0 40px; font-size: 16px; letter-spacing: .05em; }
.js .dn-label-plain, .no-js .dn-label-amount { display: none; }
.dn-submit-help { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.dn-submit-help > span { display: flex; align-items: center; gap: 10px; }
.dn-submit-help svg { flex: none; }
.dn-secure { margin: 24px 0 0; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; }
.dn-secure svg { flex: none; }

/* Mobile money is the default; card swaps the panels (data-method is set by site.js) */
.dn-cardnote, .dn-submit-help > .dn-cardnote { display: none; }
.dn-form:has(#pm-card:checked) .dn-mm, .dn-form[data-method="card"] .dn-mm { display: none; }
.dn-form:has(#pm-card:checked) .dn-cardnote, .dn-form[data-method="card"] .dn-cardnote { display: flex; }

/* No payment provider yet: the short card runs full width, the side cards sit in a row below */
.dn-offline-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.dn-main--offline { grid-template-columns: minmax(0, 1fr); }
.dn-main--offline .dn-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

/* Side column */
.dn-side { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.dn-card { position: relative; background: #FFFFFF; border-radius: var(--leaf); padding: 32px; }
.dn-card-eyebrow { margin-bottom: 8px; }
.dn-card-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--ink); }
.dn-covers { overflow: hidden; padding: 32px 32px 30px; }
.dn-covers-art { position: relative; width: 260px; max-width: 100%; margin: 0 auto 24px; }
.dn-covers-dots {
  position: absolute;
  left: -34px;
  top: 44px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-image: radial-gradient(var(--halftone) 1.7px, transparent 2px);
  background-size: 11px 11px;
}
.dn-covers-photo { position: relative; aspect-ratio: 900 / 944; width: 100%; }
.dn-covers-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.dn-covers-dot-1 { top: 14px; right: -2px; width: 14px; height: 14px; background: var(--amber); }
.dn-covers-dot-2 { bottom: 58px; left: -12px; width: 10px; height: 10px; background: var(--brand); }
.dn-covers-dot-3 { bottom: 6px; right: 34px; width: 10px; height: 10px; background: var(--green); }
.dn-covers-lede { margin: 8px 0 18px; font-size: 15px; line-height: 1.6; }
.dn-covers-list { display: grid; gap: 10px; }
.dn-covers-list li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); }
.dn-ib--40 { width: 40px; height: 40px; border-radius: 0 12px; background: var(--page); }
.dn-covers-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.dn-covers-note svg { flex: none; margin-top: 2px; }
.dn-trust { margin-top: 22px; display: grid; gap: 18px; }
.dn-trust li { display: flex; align-items: flex-start; gap: 14px; }
.dn-trust li > div { min-width: 0; }
.dn-trust strong { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ink); }
.dn-trust strong + span { display: block; font-size: 14px; line-height: 1.5; }
.dn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 14px; color: var(--blue); text-decoration: none; }
.dn-link:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.dn-logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dn-logos img { width: 52px; height: 52px; border-radius: 0 14px; display: block; }
.dn-logos-note { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; }
.dn-help { overflow: hidden; background: var(--ink); padding: 30px 32px; }
.dn-help-dot { top: 22px; right: 26px; width: 12px; height: 12px; background: var(--amber); }
.dn-help-h2 { margin: 0; padding-right: 24px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.25; color: #FFFFFF; }
.dn-help-text { margin: 8px 0 10px; font-size: 15px; line-height: 1.6; color: #C5CDD3; }
.dn-help-mail { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--amber); text-decoration: none; }
.dn-help-mail:hover { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }
.dn-help a:focus-visible { outline-color: #FFFFFF; }

/* 8.2 Ways to give (campaign cards: homepage component) */
.dn-ways-sec { position: relative; overflow: hidden; }
.dn-ghost-ways { position: absolute; top: 40px; right: -140px; width: 560px; z-index: 0; }
.dn-ways-sec .gl-wrap, .dn-faq-sec .gl-wrap { z-index: 1; }

/* 8.3 Other ways to give */
.dn-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.dn-way { display: flex; flex-direction: column; gap: 22px; background: #FFFFFF; border-radius: var(--leaf); padding: 40px 36px; }
.dn-ib--72 { width: 72px; height: 72px; border-radius: 0 20px; background: var(--page); }
.dn-way-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dn-way-h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.dn-way-text { margin: 10px 0 0; font-size: 15px; line-height: 1.65; }
.dn-way-details {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--page);
  border-radius: 0 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.dn-way-link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.dn-way-link:hover { color: var(--blue); }

/* 8.4 Questions */
.dn-faq-sec { position: relative; overflow: hidden; padding-bottom: 120px; }
.dn-ghost-faq { position: absolute; left: -180px; bottom: -60px; width: 520px; z-index: 0; }
.dn-faqgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.dn-faq-intro { position: relative; }
.dn-faq-lede { margin: 14px 0 0; max-width: 400px; font-size: 16px; line-height: 1.65; }
.dn-faq-lede a { font-weight: 600; }
.dn-faq-dot-1 { top: 2px; right: 18%; width: 14px; height: 14px; background: var(--amber); }
.dn-faq-dot-2 { bottom: -40px; left: 42%; width: 10px; height: 10px; background: var(--brand); }
.dn-faq { display: grid; gap: 14px; }
.dn-faq details { background: #FFFFFF; border-radius: var(--leaf-sm); }
.dn-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  box-sizing: border-box;
  padding: 16px 20px 16px 28px;
  list-style: none;
  cursor: pointer;
}
.dn-faq summary::-webkit-details-marker { display: none; }
.dn-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dn-faq-q { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.35; color: var(--ink); }
.dn-faq summary:hover .dn-faq-q { color: var(--blue); }
.dn-faq-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 1.5px solid var(--input);
  border-radius: 50%;
  color: var(--ink);
}
.dn-faq details[open] .dn-faq-v { display: none; }
.dn-faq details[open] .dn-faq-ic { background: var(--amber); border-color: var(--amber); }
.dn-faq-a { padding: 0 28px 26px; font-size: 16px; line-height: 1.65; }
.dn-faq-a p { margin: 0; }

/* 8.5 Thank-you page */
.dn-thanks-sec { padding-bottom: 96px; }
.dn-thanks { max-width: 760px; margin: 0 auto; }
.dn-thanks-line { margin: 0; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.25; color: var(--ink); }
.dn-thanks-facts { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dn-thanks-facts div { padding: 18px 20px; background: var(--page); border-radius: 0 16px; }
.dn-thanks-facts dt { font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.dn-thanks-facts dd { margin: 4px 0 0; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--ink); }
.dn-thanks-ref { font-family: var(--display); letter-spacing: .04em; }
.dn-thanks-keep { margin: 18px 0 0; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; }
.dn-thanks-keep svg { flex: none; margin-top: 2px; }

@media (max-width: 1180px) {
  .dn-main { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .dn-main--offline { grid-template-columns: minmax(0, 1fr); }
  .dn-form { padding: 40px 36px; }
}
@media (max-width: 1024px) {
  .dn-main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dn-side, .dn-main--offline .dn-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-span2 { grid-column: 1 / -1; }
  .dn-amts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-pay { grid-template-columns: minmax(0, 1fr); }
  .dn-ways { grid-template-columns: minmax(0, 1fr); }
  .dn-way { flex-direction: row; gap: 28px; }
  .dn-faqgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dn-sec { padding-top: 96px; }
  .dn-faq-sec { padding-bottom: 96px; }
}
@media (max-width: 720px) {
  .dn-form-sec { padding-top: 40px; }
  .dn-side, .dn-main--offline .dn-side { grid-template-columns: minmax(0, 1fr); }
  .dn-form, .dn-card { padding: 28px 20px; }
  .dn-form-h2 { font-size: 30px; }
  .dn-seg { width: 100%; }
  .dn-two, .dn-two--mm { grid-template-columns: minmax(0, 1fr); }
  .dn-feat { gap: 14px; padding: 20px 16px; }
  .dn-feat-ic { width: 48px; height: 48px; }
  .dn-mmpanel { padding: 20px 16px; }
  .dn-submit { flex-direction: column; align-items: stretch; }
  .dn-submit-btn { justify-content: center; padding: 0 20px; }
  .dn-offline-actions .gl-btn { flex: 1 1 100%; justify-content: center; }
  .dn-way { flex-direction: column; gap: 20px; padding: 32px 24px; }
  .dn-sec { padding-top: 72px; }
  .dn-faq-sec { padding-bottom: 72px; }
  .dn-faq summary { padding: 14px 14px 14px 20px; }
  .dn-faq-a { padding: 0 20px 22px; }
  .dn-ghost-ways, .dn-ghost-faq { width: 340px; }
  .dn-thanks-line { font-size: 24px; }
  .dn-thanks-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 9. Apply page: sign in / create account (docs/design/apply/signin.tpl.html) ===== */

/* Error under a form field (shared by later forms) */
.gl-err { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: #A3301F; }
.gl-err svg { flex: none; margin-top: 1px; }

/* 9.1 Hero */
.ap-hero-sec { position: relative; overflow: hidden; padding: 36px 0 24px; }
.ap-ghost { position: absolute; top: -40px; right: -180px; width: 680px; pointer-events: none; }
.ap-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  grid-template-areas: "text card" "photo card";
  column-gap: 72px;
  row-gap: 28px;
  align-items: start;
}
.ap-hero-text { grid-area: text; padding-top: 40px; }
.ap-eyebrow { margin-bottom: 18px; }
.ap-h1 {
  margin: 0;
  max-width: 620px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 76px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ap-lede { margin: 26px 0 0; max-width: 480px; font-size: 18px; line-height: 1.65; }
.ap-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 28px 0 0;
  padding: 9px 18px 9px 14px;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}
.ap-pill--open { background: #E6F4EC; color: #17704A; }
.ap-pill--closed { background: #FCF1DF; color: #8A5200; }
.ap-pill-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ap-pill--open .ap-pill-dot { background: #1F8A5B; }
.ap-pill--closed .ap-pill-dot { background: #B26A00; }

.ap-photo { grid-area: photo; position: relative; width: 100%; max-width: 420px; justify-self: center; }
.ap-photo-mask { aspect-ratio: 900 / 944; width: 100%; }
.ap-photo-mask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.ap-photo-dot-1 { top: -6px; left: 10%; width: 16px; height: 16px; background: var(--amber); }
.ap-photo-dot-2 { top: 9%; right: 6%; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--brand); }
.ap-photo-dot-3 { top: 38%; right: -22px; width: 12px; height: 12px; background: var(--brand); }
.ap-photo-dot-4 { bottom: 26%; left: -18px; width: 10px; height: 10px; background: var(--green); }
.ap-photo-dot-5 { bottom: 2%; right: 24%; width: 14px; height: 14px; background: var(--coral); }

/* 9.2 Account card */
.ap-card {
  grid-area: card;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: var(--leaf);
  box-shadow: var(--shadow);
  padding: 36px 44px 40px;
  scroll-margin-top: 16px;
}
.ap-notice { margin: 0 0 24px; }
.ap-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); margin: 0 0 32px; }
.ap-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 8px;
  margin: 0 0 -1px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--body);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ap-tab[aria-selected="true"] { border-bottom-color: var(--ink); font-weight: 700; color: var(--ink); }
.ap-tab[aria-selected="false"]:hover { color: var(--ink); border-bottom-color: #C9CFD4; }
.ap-tab:focus-visible { outline-offset: -3px; }
.no-js .ap-tabs { display: none; }
.no-js .ap-panel[hidden] { display: block; }
.no-js .ap-panel + .ap-panel { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.ap-panel, .ap-returning, .ap-paused { scroll-margin-top: 24px; }

.ap-card-h1, .ap-card-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--ink); }
.ap-card-h1 { font-size: 34px; line-height: 1.2; }
.ap-card-lede { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.ap-formmsg { margin: 20px 0 0; }
.ap-form { margin-top: 28px; display: grid; gap: 22px; }
.ap-label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); }
.ap-in {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--input);
  border-radius: 0 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .15s ease;
}
.ap-in:hover { border-color: var(--ink); }
.ap-in[aria-invalid="true"] { border-color: #C2412D; box-shadow: inset 0 0 0 1px #C2412D; }
.ap-hint { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.ap-pw { position: relative; }
.ap-pw .ap-in { padding-right: 120px; }
.ap-show {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  border-radius: 0 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.ap-show:hover { background: var(--track); }
.no-js .ap-show { display: none; }
.no-js .ap-pw .ap-in { padding-right: 16px; }
.ap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.ap-signin-row { justify-content: space-between; gap: 12px 20px; }
.ap-btn { justify-content: center; padding: 0 30px; }
.ap-aside { margin: 0; font-size: 15px; }
.ap-textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.ap-textlink:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }
.ap-help-line { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.5; }
.ap-help-line svg { flex: none; }
.ap-help-line a { font-weight: 600; }

/* Closed: notify-me card, then sign in for returning applicants */
.ap-paused { background: #FCF1DF; border-radius: var(--leaf-sm); padding: 24px 24px 26px; }
.ap-paused-tag { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #8A5200; }
.ap-paused-title { margin: 12px 0 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--ink); }
.ap-paused-dates { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.ap-notify-form { margin-top: 22px; }
.ap-notify { display: flex; align-items: stretch; gap: 10px; }
.ap-notify .ap-in { flex: 1 1 auto; min-width: 0; }
.ap-notify .ap-btn { flex: none; padding: 0 24px; }
.ap-returning { margin-top: 34px; }
.ap-eyebrow-sm { margin: 0 0 10px; }
.ap-returning .ap-card-lede { margin-top: 8px; }
.ap-returning .ap-form { margin-top: 24px; }

/* 9.3 Lower sections */
.ap-sec { padding: 100px 0; }
.ap-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ap-step { position: relative; background: #FFFFFF; border-radius: var(--leaf); padding: 52px 28px 38px; text-align: center; }
.ap-step-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: var(--ink);
  border-radius: 0 0 18px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
}
.ap-step-ic { display: block; margin: 0 auto; }
.ap-step-h3 { margin: 22px 0 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.ap-step-text { margin: 12px 0 0; font-size: 15px; line-height: 1.65; }
.ap-arrow {
  position: absolute;
  top: 50%;
  right: -25px;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--body);
}

.ap-fee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.ap-cluster { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; }
.ap-halftone {
  position: absolute;
  inset: -4% -2% 0 -6%;
  background-image: radial-gradient(circle, var(--halftone) 2.2px, transparent 2.7px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.ap-cluster img {
  position: absolute;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 8px solid #FFFFFF;
  box-sizing: border-box;
  display: block;
}
.ap-cluster .ap-cl-main { left: 14%; top: 17%; width: 64%; border-width: 10px; }
.ap-cl-top { left: 64%; top: 5%; width: 33%; }
.ap-cl-low { left: 0; top: 66%; width: 27%; }
.ap-cl-dot-1 { left: 9%; top: 9%; width: 16px; height: 16px; background: var(--amber); }
.ap-cl-dot-2 { left: 54%; top: 4%; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--brand); }
.ap-cl-dot-3 { right: 6%; top: 62%; width: 12px; height: 12px; background: var(--green); }
.ap-cl-dot-4 { left: 46%; bottom: 2%; width: 10px; height: 10px; background: var(--coral); }
.ap-fee-lede { margin: 18px 0 0; max-width: 520px; font-size: 17px; line-height: 1.65; }
.ap-fee-grid { margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ap-fee-grid li {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border-radius: var(--leaf-sm);
  padding: 20px 22px;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.ap-fee-grid svg { flex: none; }
.ap-fee-note { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; max-width: 540px; font-size: 15px; line-height: 1.6; }
.ap-fee-note svg { flex: none; margin-top: 1px; }
.ap-fee-note strong { font-weight: 600; color: var(--ink); }
.ap-sponsor { margin-top: 28px; }

.ap-q-sec { position: relative; overflow: hidden; padding-bottom: 120px; }
.ap-ghost2 { position: absolute; left: -210px; top: 40px; width: 560px; pointer-events: none; }
.ap-qs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.ap-q { background: #FFFFFF; border-radius: var(--leaf); padding: 32px 26px 34px; }
.ap-q-num { display: block; font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; color: var(--brand); }
.ap-q-h3 { margin: 22px 0 0; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--ink); }
.ap-q-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.ap-help {
  margin-top: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  background: var(--ink);
  border-radius: var(--leaf);
  padding: 40px 48px;
}
.ap-help-h { margin: 0; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.25; color: #FFFFFF; }
.ap-help-text { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: #C9D1D7; }
.ap-help-text a { font-weight: 600; color: #FFFFFF; }
.ap-help a:focus-visible { outline-color: #FFFFFF; }

/* 9.4 Forgot / reset password pages */
.ap-solo-sec { position: relative; overflow: hidden; padding: 56px 0 120px; }
.ap-card--solo { max-width: 560px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .ap-tab, .ap-in { transition: none; }
}
@media (max-width: 1100px) {
  .ap-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "card" "photo"; row-gap: 48px; }
  .ap-hero-text { padding-top: 8px; }
  .ap-card { max-width: 600px; width: 100%; }
  .ap-photo { max-width: 360px; }
  .ap-h1 { font-size: 60px; }
  .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-arrow { display: none; }
  .ap-fee { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .ap-cluster { max-width: 440px; margin: 0 auto; }
  .ap-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-q:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ap-hero-sec { padding-top: 12px; padding-bottom: 8px; }
  .ap-hero { row-gap: 36px; }
  .ap-sec { padding-top: 64px; padding-bottom: 64px; }
  .ap-q-sec { padding-bottom: 72px; }
  .ap-h1 { font-size: 44px; }
  .ap-lede { font-size: 17px; }
  .ap-card { padding: 24px 20px 28px; border-radius: 0 32px; }
  .ap-photo { max-width: 280px; }
  .ap-ghost { width: 380px; right: -210px; top: 0; }
  .ap-steps, .ap-qs, .ap-fee-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-notify { flex-direction: column; align-items: stretch; }
  .ap-full-sm { width: 100%; justify-content: center; }
  .ap-signin-row { flex-direction: column; align-items: stretch; }
  .ap-help { padding: 28px 22px; flex-direction: column; align-items: stretch; }
  .ap-help-h { font-size: 24px; }
  .ap-ghost2 { display: none; }
  .ap-sponsor { height: auto; min-height: 52px; padding: 12px 22px; line-height: 1.35; }
  .ap-solo-sec { padding: 32px 0 72px; }
  .ap-card-h1 { font-size: 28px; }
}
@media (max-width: 420px) {
  .ap-tab svg { display: none; }
}

/* ===== 10. Application form: applicant shell, stepper, steps (docs/design/apply/step.tpl.html) ===== */

/* 10.1 Shell */
.st-header { position: relative; z-index: 10; background: #FFFFFF; border-bottom: 1px solid var(--hairline); }
.st-head { max-width: 1290px; margin: 0 auto; padding: 0 24px; height: 80px; display: flex; align-items: center; gap: 20px; }
.st-logo-link { display: flex; flex: none; }
.st-logo { width: 124px; height: auto; display: block; }
.st-head-rule { flex: none; width: 1px; height: 32px; background: var(--hairline); }
.st-head-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--ink); }
.st-head-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.st-status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.st-status svg { flex: none; }
.st-lang { display: flex; align-items: center; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--input); }
.st-lang a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--body); text-decoration: none; }
.st-lang a[aria-current] { color: var(--ink); }
.st-lang a:hover { color: var(--blue); }
.st-tert { background: #FFFFFF; color: var(--ink); border: 1.5px solid var(--ink); }
.st-tert:hover { background: var(--ink); color: #FFFFFF; filter: none; }
.st-exit { height: 44px; padding: 0 18px; gap: 8px; font-size: 13px; }
.st-account { position: relative; }
.st-avatar { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 2px; color: var(--ink); cursor: pointer; list-style: none; }
.st-avatar::-webkit-details-marker { display: none; }
.st-avatar-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  transition: box-shadow .15s ease;
}
.st-avatar:hover .st-avatar-dot { box-shadow: 0 0 0 3px var(--track); }
.st-account[open] .st-avatar-chev { transform: rotate(180deg); }
.st-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  background: #FFFFFF;
  border-radius: 0 16px;
  box-shadow: 0 12px 32px rgba(14, 26, 34, .12);
}
.st-account-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 0 12px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.st-account-menu a:hover { background: var(--page); color: var(--blue); }

.st-footer { background: var(--page); border-top: 1px solid var(--hairline); }
.st-foot { max-width: 1290px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.st-foot p { margin: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.st-foot a { font-weight: 600; }

/* 10.2 Layout: stepper | step card | Your Institute */
.st-main { min-height: calc(100vh / var(--zoom) - 146px); }
.st-wrap {
  max-width: 1290px;
  margin: 0 auto;
  padding: 40px 24px 96px;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 288px;
  grid-template-areas: "steps form aside";
  column-gap: 32px;
  align-items: start;
}
.st-wrap--solo { display: block; max-width: 760px; }
.st-col { grid-area: form; min-width: 0; }

.st-steps { grid-area: steps; position: sticky; top: 24px; background: #FFFFFF; border-radius: var(--leaf); padding: 28px 24px 22px; }
.st-steps-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 19px; color: var(--ink); }
.st-steps-count { margin: 14px 0 0; font-weight: 700; font-size: 14px; color: var(--ink); }
.st-bar { margin-top: 10px; height: 6px; border-radius: 8px; background: var(--track); overflow: hidden; }
.st-bar div { height: 100%; border-radius: 8px; background: var(--amber); }
.st-steplist { margin: 22px 0 0; display: grid; gap: 4px; }
.st-stepitem { position: relative; }
.st-stepitem:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 46px; bottom: -10px; width: 2px; border-radius: 2px; background: var(--hairline); }
.st-stepitem--done:not(:last-child)::after { background: #1F8A5B; }
.st-step-link { display: flex; align-items: flex-start; gap: 14px; margin: 0 -12px; padding: 10px 12px; min-height: 44px; border-radius: 0 16px; text-decoration: none; }
a.st-step-link:hover { background: #F1F3F5; }
.st-stepitem--current .st-step-link, .st-stepitem--current a.st-step-link:hover { background: #FFF4E2; }
.st-step-num {
  flex: none;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid var(--input);
  color: var(--body);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.st-stepitem--done .st-step-num { background: #1F8A5B; border-color: #1F8A5B; }
.st-stepitem--current .st-step-num { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.st-step-num--sm { width: 26px; height: 26px; font-size: 13px; }
.st-step-text { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; min-width: 0; }
.st-step-name { font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--body); }
.st-stepitem--done .st-step-name { font-weight: 600; color: var(--ink); }
.st-stepitem--current .st-step-name { font-weight: 700; color: var(--ink); }
.st-step-state { font-size: 13px; line-height: 1.4; }
.st-stepitem--done .st-step-state { color: #17704A; }
.st-stepitem--current .st-step-state { color: #8A5200; }
.st-stepitem--todo .st-step-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.st-compact { display: none; grid-area: bar; background: #FFFFFF; border-radius: var(--leaf-sm); padding: 12px 18px 16px; }
.st-sum { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
.st-sum::-webkit-details-marker { display: none; }
.st-sum-text { flex: 1; min-width: 0; }
.st-sum-sub { display: block; font-size: 13px; line-height: 1.4; }
.st-sum-main { display: block; margin-top: 2px; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); }
.st-sum-ic { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: #F1F3F5; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.st-compact details[open] .st-chev { transform: rotate(180deg); }
.st-compact-list { margin: 10px 0 4px; padding: 12px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 2px; }
.st-compact-list a, .st-compact-off { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--body); }
.st-compact-list .st-stepitem--done a, .st-compact-list .st-stepitem--current a { font-weight: 600; color: var(--ink); }
.st-compact-list [aria-current] { font-weight: 700; }
.st-compact-state { margin-left: auto; font-weight: 500; font-size: 13px; }
.st-stepitem--done .st-compact-state { color: #17704A; }
.st-stepitem--current .st-compact-state { color: #8A5200; }
.st-stepitem--todo .st-compact-state { display: none; }

/* 10.3 Step card */
.st-note { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 20px; background: #FCF1DF; border-radius: var(--leaf-sm); font-size: 15px; line-height: 1.55; color: #8A5200; }
.st-note svg { flex: none; margin-top: 1px; }
.st-note a { font-weight: 600; color: #8A5200; }
.st-card { background: #FFFFFF; border-radius: var(--leaf); box-shadow: var(--shadow); padding: 46px 48px 44px; scroll-margin-top: 16px; }
.st-card:focus { outline: none; }
.st-eyebrow { margin: 0 0 12px; }
.st-h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1.15; color: var(--ink); }
.st-lede { margin: 14px 0 0; max-width: 560px; font-size: 16px; line-height: 1.65; }
.st-required { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.st-required span { font-weight: 600; color: var(--ink); }
.st-errors { margin: 28px 0 0; }
.st-form { margin-top: 36px; display: grid; gap: 36px; }
.st-form > .pf-section + .pf-section { padding-top: 34px; border-top: 1px solid var(--hairline); }
.st-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding-top: 30px; border-top: 1px solid var(--hairline); }
.st-actions--start { justify-content: flex-start; flex-wrap: wrap; margin-top: 28px; padding-top: 0; border-top: 0; }
.st-next { margin: 20px 0 0; max-width: 560px; font-size: 16px; line-height: 1.65; }

/* Fields */
.pf-section { min-width: 0; }
.pf-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-legend { padding: 0; margin: 0 0 20px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.pf-stack { display: grid; gap: 26px; }
.pf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pf-two--end { align-items: end; }
.pf-half { max-width: calc(50% - 12px); }
.pf-label { display: block; margin: 0 0 8px; padding: 0; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); }
.pf-optional { font-weight: 400; color: var(--body); }
.pf-in {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--input);
  border-radius: 0 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .15s ease;
}
.pf-in:hover { border-color: var(--ink); }
.pf-in[aria-invalid="true"] { padding: 0 15px; border: 2px solid #C2412D; }
.pf-in[readonly], .pf-in[readonly]:hover { background: #F1F3F5; border-color: #D5DADF; }
.pf-select { position: relative; }
.pf-select select { -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer; }
.pf-select svg { position: absolute; right: 18px; top: 19px; pointer-events: none; }
.pf-textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.pf-in.pf-textarea[aria-invalid="true"] { padding: 13px 15px; }
.pf-hint { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.pf-under { display: flex; justify-content: space-between; gap: 16px; }
.pf-words { margin: 8px 0 0 auto; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-radios { display: grid; gap: 14px; }
.pf-radios--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-radio {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 18px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--input);
  border-radius: 0 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease;
}
.pf-radio input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.pf-radio:hover { border-color: var(--ink); }
.pf-radio:has(input:checked) { padding: 0 17px; background: #EAF6FC; border: 2px solid var(--brand); }
.pf-radio:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.pf-radio input:focus-visible { outline: none; }
.pf-fieldset[disabled] .pf-radio { cursor: default; }
.pf-fieldset[disabled] .pf-radio:not(:has(input:checked)) { background: #F7F8F9; border-color: #D5DADF; color: var(--body); }
.pf-sem-list .pf-radio { align-items: flex-start; min-height: 52px; padding-top: 13px; padding-bottom: 13px; font-size: 15px; line-height: 1.4; }
.pf-sem-list .pf-radio:has(input:checked) { padding-top: 12px; padding-bottom: 12px; }
.pf-sem-list .pf-radio input { margin-top: 1px; }
.pf-more { margin-top: 12px; padding: 20px 20px 22px; background: var(--page); border-radius: var(--leaf-sm); }
.pf-note { margin: 0 0 18px; padding: 16px 20px; background: #EAF6FC; border-radius: 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.pf-sem-about { display: grid; gap: 8px; }
.pf-sem { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 0 16px; }
.pf-sem summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 16px; cursor: pointer; list-style: none; }
.pf-sem summary::-webkit-details-marker { display: none; }
.pf-sem summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pf-sem-title { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink); }
.pf-sem-more { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--blue); }
.pf-sem[open] .pf-sem-more svg { transform: rotate(180deg); }
.pf-sem-text { padding: 0 16px 14px; font-size: 15px; line-height: 1.65; }
.pf-sem-text p { margin: 0 0 10px; }
.pf-release { padding: 22px 24px; background: var(--page); border-radius: var(--leaf-sm); font-size: 15px; line-height: 1.7; color: var(--ink); }
.pf-release p { margin: 0 0 12px; }
.pf-release p:last-child { margin-bottom: 0; }
.pf-release ul { margin: 0 0 12px; padding-left: 20px; }
.pf-release li + li { margin-top: 8px; }

/* Review */
.st-review { margin-top: 32px; display: grid; gap: 28px; }
.rv-sec { padding-top: 26px; border-top: 1px solid var(--hairline); }
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rv-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.rv-edit { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.rv-list { margin: 10px 0 0; }
.rv-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid #F1F3F5; }
.rv-row dt { font-size: 14px; line-height: 1.5; }
.rv-row dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.rv-none { font-style: italic; color: #8A5200; }
.rv-submit { padding: 24px; background: #FFF4E2; border-radius: var(--leaf-sm); }
.rv-missing { margin: 0; font-weight: 600; color: var(--ink); }
.rv-missing-list { margin: 8px 0 0; padding-left: 20px; }
.rv-ready { margin: 0 0 16px; font-size: 15px; color: var(--ink); }
.rv-ref { display: inline-flex; flex-direction: column; gap: 2px; margin: 24px 0 0; padding: 16px 22px; background: var(--page); border-radius: 0 16px; }
.rv-ref span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rv-ref strong { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--ink); }

/* 10.4 Your Institute */
.st-aside { grid-area: aside; position: relative; overflow: hidden; background: #FFFFFF; border-radius: var(--leaf); padding: 32px 28px 36px; }
.st-aside-ghost { position: absolute; right: -62px; bottom: -58px; width: 176px; pointer-events: none; }
.st-aside-in { position: relative; }
.st-eyebrow-sm { margin: 0 0 10px; }
.st-aside-h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--ink); }
.st-facts { margin: 22px 0 0; display: grid; gap: 14px; }
.st-facts dt { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.st-facts dd { margin: 4px 0 0 26px; font-weight: 600; font-size: 16px; color: var(--ink); }
.st-ai-b { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.st-fee-label { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.st-fee { margin: 4px 0 0; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.2; color: var(--ink); }
.st-covers { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }
.st-cover-list { margin: 8px 0 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.st-cover-list li { display: flex; align-items: flex-start; gap: 10px; }
.st-cover-list svg { flex: none; margin-top: 1px; }
.st-not { margin: 14px 0 0; font-size: 14px; line-height: 1.55; }
.st-ai-c { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.st-help-h { margin: 0; font-weight: 700; font-size: 15px; color: var(--ink); }
.st-help-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .pf-in, .pf-radio, .st-avatar-dot { transition: none; }
}
@media (max-width: 1180px) {
  .st-wrap { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "steps form" ". aside"; row-gap: 28px; column-gap: 28px; }
}
@media (max-width: 1024px) {
  .st-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "form" "aside"; padding-top: 20px; row-gap: 20px; }
  .st-steps { display: none; }
  .st-compact { display: block; }
  .st-hide-md { display: none; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .st-aside-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c b"; column-gap: 48px; }
  .st-ai-a { grid-area: a; }
  .st-ai-b { grid-area: b; margin-top: 0; padding-top: 0; border-top: 0; }
  .st-ai-c { grid-area: c; }
}
@media (max-width: 720px) {
  .st-head { height: 68px; gap: 10px; padding: 0 16px; }
  .st-logo { width: 92px; }
  .st-head-tools { gap: 8px; }
  .st-sr-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .st-exit { width: 44px; padding: 0; justify-content: center; }
  .st-avatar-chev { display: none; }
  .st-wrap { padding: 16px 16px 64px; }
  .st-card { padding: 28px 20px 30px; border-radius: 0 32px; }
  .st-h1 { font-size: 32px; }
  .pf-two { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .pf-half { max-width: none; }
  .st-actions { flex-direction: column; align-items: stretch; }
  .st-actions > * { width: 100%; justify-content: center; }
  .st-actions > span:empty { display: none; }
  .st-aside { padding: 28px 22px 30px; }
  .st-foot { flex-direction: column; align-items: flex-start; gap: 0; }
  .rv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ===== 11. About, Board & team, Gallery, Contact (the old pages in the new design) ===== */
.pg-sec { padding-top: 96px; }
.pg-last { padding-bottom: 120px; }
.pg-last--band { padding-bottom: 48px; } /* ends with the dark band, like the homepage */
.pg-center { text-align: center; }
.pg-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.pg-text { margin: 16px 0 0; font-size: 16px; line-height: 1.7; }
.pg-text--sm { margin-top: 8px; font-size: 15px; }
.pg-h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.25; color: var(--ink); }
.pg-card { position: relative; background: #FFFFFF; border-radius: var(--leaf); padding: 36px 36px 38px; }
.pg-timeline ol { margin-top: 22px; display: grid; gap: 0; }
.pg-timeline li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.pg-timeline li:first-child { border-top: 0; }
.pg-year { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--blue); }
.pg-tl-text { font-size: 15px; line-height: 1.6; color: var(--ink); }
.pg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.pg-two--plain { gap: 64px; }
.pg-ic { display: inline-flex; margin-bottom: 18px; }
.pg-partners ul { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pg-partners li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink); }
.pg-partners img { flex: none; width: 64px; height: 64px; border-radius: 0 18px; }
.pg-partners li > a { flex: none; display: flex; border-radius: 0 18px; } /* a logo linked to the partner's website: same size, focus ring on the leaf */
.pg-cta { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; background: var(--ink); border-radius: var(--leaf); padding: 40px 48px; }
.pg-cta-h { margin: 0; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.25; color: #FFFFFF; }
.pg-cta-text { margin: 8px 0 0; font-size: 16px; color: #C9D1D7; }
.pg-cta-text a { font-weight: 600; color: #FFFFFF; }
.pg-cta a:focus-visible { outline-color: #FFFFFF; }

.pg-people { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pg-people--two { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.pg-person { display: flex; flex-direction: column; align-items: center; text-align: center; background: #FFFFFF; border-radius: var(--leaf); padding: 32px 22px 30px; }
.pg-ava { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 0 28px; background: #EAF6FC; font: 700 26px/1 var(--display); color: var(--blue); }
.pg-ava--sm { width: 40px; height: 40px; border-radius: 0 14px; font-size: 14px; }
.pg-person-name { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--ink); }
.pg-person-role { margin-top: 4px; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #8A5200; }
.pg-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 374px) { .pg-mail { font-size: 13px; } } /* keeps gliregionalcoordinator@gmail.com on one line */
.pg-members { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pg-members li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #FFFFFF; border-radius: 0 20px; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); }
.pg-members .pg-ava { flex: none; }

.pg-gallery { columns: 3 300px; column-gap: 20px; }
.pg-gallery li { break-inside: avoid; margin-bottom: 20px; }
.pg-gallery a { display: block; border-radius: 0 24px; overflow: hidden; }
.pg-gallery img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.pg-gallery a:hover img { transform: scale(1.03); }

.pg-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 30px; align-items: start; }
.pg-details dl { margin: 22px 0 0; display: grid; gap: 4px; }
.pg-details dl > div { padding: 14px 0; border-top: 1px solid var(--hairline); }
.pg-details dl > div:first-child { border-top: 0; }
.pg-details dt { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.pg-details dt svg { flex: none; width: 26px; height: 26px; }
.pg-details dd { margin: 6px 0 0 36px; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.pg-form-card .gl-msg { margin: 18px 0 0; }
.pg-textarea { height: auto; min-height: 160px; padding: 14px 16px; line-height: 1.6; resize: vertical; }

@media (prefers-reduced-motion: reduce) { .pg-gallery img { transition: none; } }
@media (max-width: 1024px) {
  .pg-split, .pg-two, .pg-contact { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pg-people, .pg-members, .pg-partners ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-sec { padding-top: 72px; }
}
@media (max-width: 720px) {
  .pg-sec { padding-top: 56px; }
  .pg-last { padding-bottom: 72px; }
  .pg-last--band { padding-bottom: 24px; }
  .pg-card { padding: 26px 20px 28px; }
  .pg-h3 { font-size: 23px; }
  .pg-timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pg-people, .pg-people--two, .pg-members, .pg-partners ul { grid-template-columns: minmax(0, 1fr); }
  .pg-cta { padding: 28px 22px; flex-direction: column; align-items: stretch; }
  .pg-cta .gl-btn { justify-content: center; }
  .pg-cta-h { font-size: 24px; }
  .pg-details dd { margin-left: 0; }
}

/* ===== 12. Error pages: the site's 404 (nf-) and standalone pages (er-, views/errors/html/) ===== */
.nf-sec { padding: 64px 0 120px; }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.nf-h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 56px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.nf-text { margin: 20px 0 0; max-width: 470px; font-size: 18px; line-height: 1.6; }
.nf-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.nf-art { position: relative; display: grid; place-items: center; height: 380px; background: var(--ink); border-radius: var(--leaf); overflow: hidden; }
.nf-ghost { position: absolute; right: -60px; bottom: -110px; width: 340px; background: #13232D; }
.nf-halftone {
  position: absolute;
  left: 34px;
  bottom: -56px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(255, 255, 255, .2) 1.6px, transparent 2px);
  background-size: 12px 12px;
}
.nf-dot-1 { top: 40px; left: 48px; width: 14px; height: 14px; background: var(--amber); }
.nf-dot-2 { top: 54px; right: 56px; width: 12px; height: 12px; background: var(--coral); }
.nf-dot-3 { bottom: 48px; right: 36%; width: 10px; height: 10px; background: var(--brand); }
.nf-num { position: relative; margin: 0; font: 700 168px/1 var(--display); letter-spacing: -.02em; color: #FFFFFF; }
.nf-num span { color: var(--amber); }
.nf-more { margin-top: 96px; }
.nf-more-h { margin: 0; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.25; color: var(--ink); }
.nf-links { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nf-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 22px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 0 22px;
  font: 600 16px/1.3 var(--sans);
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.nf-links a:hover { color: var(--blue); transform: translateY(-1px); }
.nf-links svg { flex: none; color: var(--amber); }

/* Standalone (no header or footer, no database): views/errors/html/_shell.php and the 404 outside the public site */
.er-body { margin: 0; min-height: calc(100vh / var(--zoom)); background: var(--page); }
.er-page { position: relative; min-height: calc(100vh / var(--zoom)); display: grid; place-items: center; padding: 48px 20px; box-sizing: border-box; overflow: hidden; }
.er-ghost { position: absolute; right: -120px; bottom: -150px; width: 520px; }
.er-card { position: relative; width: min(100%, 560px); box-sizing: border-box; padding: 44px 48px 40px; background: #FFFFFF; border-radius: var(--leaf); }
.er-logo { display: block; width: 132px; height: auto; }
.er-card .gl-eyebrow { margin: 34px 0 10px; }
.er-h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1.15; color: var(--ink); }
.er-text { margin: 16px 0 0; font-size: 17px; line-height: 1.6; }
.er-card .gl-btn { margin-top: 28px; }
.er-detail { margin: 20px 0 0; padding: 14px 16px; background: #FFF4E5; border-radius: 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.er-detail p { margin: 0; }
.er-help { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 15px; }
.er-help a { font-weight: 600; color: var(--blue); }

@media (prefers-reduced-motion: reduce) { .nf-links a { transition: none; } }
@media (max-width: 1024px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .nf-art { height: 280px; }
  .nf-num { font-size: 132px; }
  .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nf-sec { padding: 32px 0 72px; }
  .nf-h1 { font-size: 38px; }
  .nf-text { font-size: 17px; }
  .nf-actions .gl-btn { flex: 1 1 100%; justify-content: center; }
  .nf-art { display: none; } /* decorative; the eyebrow already says 404 */
  .nf-more { margin-top: 48px; }
  .nf-more-h { font-size: 23px; }
  .nf-links { grid-template-columns: minmax(0, 1fr); }
  .er-page { padding: 24px 16px; }
  .er-card { padding: 32px 22px 28px; }
  .er-h1 { font-size: 30px; }
  .er-card .gl-btn { width: 100%; justify-content: center; }
}

/* An administrator's preview of unpublished changes (Website › Preview) */
.gl-preview-bar { position: sticky; top: 0; z-index: 60; margin: 0; padding: 10px 20px; background: var(--amber); color: var(--ink); font: 600 14px/1.4 var(--sans); text-align: center; }

/* ===== Motion =====
   Kept together at the end, and all of it optional. Without JavaScript the hero entrance and the slow decorative
   drift still play; a visitor whose system asks for reduced motion gets neither, and every section is simply
   visible. site.js adds .js-motion (and .h-reveal) only after it has set up the scroll observer. */

@media (prefers-reduced-motion: no-preference) {
  /* The hero arrives in a short stagger */
  .h-hero-copy > * { animation: h-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
  .h-hero-copy > *:nth-child(2) { animation-delay: .06s; }
  .h-hero-copy > *:nth-child(3) { animation-delay: .12s; }
  .h-hero-copy > *:nth-child(4) { animation-delay: .18s; }
  .h-hero-art { animation: h-rise .8s cubic-bezier(.2, .7, .3, 1) .1s both; }
  .h-status { animation: h-rise .7s cubic-bezier(.2, .7, .3, 1) .24s both; }

  /* The decorative GLI marks drift very slowly, and the hero dots breathe, so the page is never quite still */
  .h-ghost-hero, .h-ghost-about, .h-ghost-voices { animation: h-drift 24s ease-in-out infinite alternate; }
  .h-hero-dot-1, .h-hero-dot-2, .h-hero-dot-3, .h-hero-dot-4, .h-hero-dot-5 { animation: h-bob 7s ease-in-out infinite alternate; }
  .h-hero-dot-2 { animation-delay: -2s; }
  .h-hero-dot-3 { animation-delay: -4s; }
  .h-hero-dot-4 { animation-delay: -1s; }
  .h-hero-dot-5 { animation-delay: -3s; }
}

@keyframes h-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes h-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-14px, 20px, 0) rotate(1.5deg); }
}
@keyframes h-bob {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -6px, 0); }
}

/* Scroll reveals: site.js marks what it will show, then adds .h-reveal is-in as each part comes into view.
   Nothing in the HTML depends on this, so content is never left hidden. */
.js-motion .h-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .55s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2, .7, .3, 1) var(--reveal-delay, 0ms);
}
.js-motion .h-reveal.is-in { opacity: 1; transform: none; }

/* A card answers the pointer with its shadow, not by moving (which would fight the reveal) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .h-pillar, .h-stat, .h-story, .h-cause { transition: box-shadow .25s ease; }
  .h-pillar:hover, .h-stat:hover, .h-story:hover, .h-cause:hover { box-shadow: 0 20px 44px rgba(14, 26, 34, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .h-hero-copy > *, .h-hero-art, .h-status,
  .h-ghost-hero, .h-ghost-about, .h-ghost-voices,
  .h-hero-dot-1, .h-hero-dot-2, .h-hero-dot-3, .h-hero-dot-4, .h-hero-dot-5 { animation: none; }
  .js-motion .h-reveal { opacity: 1; transform: none; transition: none; }
}

/* On paper there is no scrolling, so show everything the observer has not reached */
@media print {
  .js-motion .h-reveal { opacity: 1; transform: none; }
}