/* ==========================================================================
   Kyimolung Foundation Nepal — kyimolung5
   Charity template visual language: crest maroon + ink, arched imagery, pill buttons
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --brand: #630406;      /* the maroon from the foundation crest */
  --brand-dk: #7e1114;   /* hover goes lighter — #630406 is already near-black */
  --brand-soft: #f9eceb; /* blush tint for chips, callouts and icon plates */
  --brand-light: #e09a96;/* 8:1 on ink, for accents on dark grounds */
  --brand-2: #252161;    /* the navy from the crest — secondary */
  --ink: #15151b;
  --ink-2: #1d1d25;
  --ink-3: #2a2a34;
  --body: #5f5f6b;
  --body-2: #8a8a96;
  --line: #ebe6e0;
  --line-dk: #33333f;
  --cream: #faf5f0;
  --white: #fff;
  --shadow-sm: 0 2px 10px rgba(21, 21, 27, .05);
  --shadow: 0 18px 48px rgba(21, 21, 27, .09);
  --shadow-lg: 0 28px 70px rgba(21, 21, 27, .14);
  --r: 14px;
  --r-lg: 24px;
  --r-xl: 34px;
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --text: "Inter", "Segoe UI", system-ui, sans-serif;
  --wrap: 1240px;
  --header-h: 94px;
  --strip-pull: calc(var(--sec) - 40px);
  --sec: clamp(64px, 7vw, 104px);
}

/* ------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font: 400 16px/1.75 var(--text);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .55em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand); color: #fff; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: #b6b6c2; }
.center { text-align: center; }

/* ------------------------------------------------------------ type bits */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--brand);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--brand-light); }
.eyebrow--light::before { background: var(--brand-light); }

.sec-title { font-size: clamp(28px, 3.5vw, 44px); max-width: 18ch; }
.sec-title--wide { max-width: 26ch; }
.sec-title--center { margin-inline: auto; }
.section--ink .sec-title, .section--ink h3 { color: #fff; }

.sec-lead { font-size: 17px; max-width: 62ch; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.sec-head > div { min-width: 0; }
.sec-head .sec-title { margin-bottom: 0; }

/* -------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
  padding: 13px 15px 13px 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background .22s ease, transform .22s ease, color .22s ease, box-shadow .22s ease;
}
.btn::after {
  content: ""; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .2) center/11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
  transition: transform .22s ease;
}
.btn:hover { background: var(--brand-dk); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(99, 4, 6, .34); }
.btn:hover::after { transform: rotate(45deg); }
.btn--ink { --btn-bg: var(--ink); }
.btn--ink:hover { background: var(--brand); box-shadow: 0 12px 26px rgba(99, 4, 6, .34); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--white::after { background-color: rgba(21, 21, 27, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.btn--white:hover { background: var(--ink); --btn-fg: #fff; box-shadow: none; }
.btn--white:hover::after { background-color: rgba(255, 255, 255, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.btn--outline { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.btn--outline::after { background-color: rgba(255, 255, 255, .14); }
.btn--outline:hover { background: #fff; --btn-fg: var(--ink); box-shadow: none; }
.btn--outline:hover::after { background-color: rgba(21, 21, 27, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.btn--sm { font-size: 13px; padding: 10px 12px 10px 20px; }
.btn--sm::after { width: 22px; height: 22px; background-size: 10px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease, gap .2s ease;
}
.link-arrow::after {
  content: ""; width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.link-arrow:hover { color: var(--brand); gap: 12px; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(21, 21, 27, .08); }
.header-inner {
  max-width: var(--wrap); margin-inline: auto; padding: 0 24px;
  min-height: var(--header-h); display: flex; align-items: center; gap: 26px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: auto; height: 74px; object-fit: contain; }
.brand b {
  font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.05;
  color: var(--brand); letter-spacing: -.03em; display: block;
}
.brand span { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-2); font-weight: 600; }

.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.nav-list > li > a:hover, .nav-list > li > a[aria-current="page"] { color: var(--brand); }
.nav-list > li > a[aria-current="page"] { background: var(--brand-soft); }
.has-sub > a::after {
  content: ""; width: 9px; height: 6px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s ease;
}
.has-sub:hover > a::after { transform: rotate(180deg); }

.sub-list {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
  min-width: 274px; margin: 0; padding: 10px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-sub:hover .sub-list, .has-sub:focus-within .sub-list { opacity: 1; visibility: visible; transform: none; }
.sub-list a {
  display: block; padding: 10px 14px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4;
  transition: background .18s ease, color .18s ease;
}
.sub-list a:hover { background: var(--brand-soft); color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.header-phone { display: flex; align-items: center; gap: 10px; }
.header-phone i {
  width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23630406'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.6a1 1 0 01-.25 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 17px;
}
.header-phone small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--body-2); font-weight: 600; }
.header-phone b { font-family: var(--display); font-size: 14.5px; color: var(--ink); white-space: nowrap; }

.nav-toggle {
  display: none; width: 46px; height: 46px; flex: none; margin-left: auto;
  background: var(--ink); border: 0; border-radius: 13px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 19px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; background: var(--ink); color: #b6b6c2; overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hero::before {
  content: ""; position: absolute; inset: auto auto -220px -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(153, 30, 28, .32), transparent 68%);
}
.hero-inner {
  max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 6vw, 96px) 24px clamp(64px, 6vw, 104px);
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 4vw, 68px); align-items: center;
  position: relative; z-index: 2;
}
.hero h1 {
  color: #fff; font-size: clamp(34px, 4.7vw, 62px); letter-spacing: -.035em; margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p { font-size: 17px; max-width: 52ch; color: #a9a9b6; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

.hero-trust { display: flex; align-items: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--ink); margin-left: -14px; background: var(--ink-3);
}
.avatars img:first-child { margin-left: 0; }
.hero-trust p { font-size: 14px; margin: 0; color: #9a9aa8; }
.hero-trust b { color: #fff; font-family: var(--display); display: block; font-size: 15px; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover;
  border-radius: 999px 999px var(--r-lg) var(--r-lg) / 46% 46% var(--r-lg) var(--r-lg);
}
.hero-badge {
  position: absolute; left: -14px; bottom: 34px;
  background: #fff; color: var(--ink); border-radius: 20px; padding: 16px 22px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 14px; max-width: 260px;
}
.hero-badge strong {
  font-family: var(--display); font-size: 30px; line-height: 1; color: var(--brand);
  display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hero-badge span { font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--body); }

/* ---------------------------------------------------------------- about */
.about-grid {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 5vw, 80px); align-items: center;
}
.heart-wrap { position: relative; padding: 12px 0 0 12px; }
.heart-wrap::before {
  content: ""; position: absolute; inset: 0 26% 24% 0; border-radius: 50% 50% 44% 56%;
  background: var(--brand-soft); transform: rotate(-6deg); z-index: 0;
}
.heart {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / .94;
  object-fit: cover;
  /* objectBoundingBox clip path scales with the element; CSS path() would not */
  -webkit-clip-path: url(#heartClip);
  clip-path: url(#heartClip);
}
.heart-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.years-badge {
  position: absolute; z-index: 2; right: -14px; top: 9%;
  width: 132px; height: 132px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-content: center; text-align: center; box-shadow: 0 18px 40px rgba(99, 4, 6, .38);
  border: 6px solid #fff;
}
.years-badge strong {
  display: block; font-family: var(--display); font-size: 30px; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.years-badge span { display: block; font-size: 10.5px; line-height: 1.3; margin-top: 6px; font-weight: 600; letter-spacing: .04em; }

.about-note {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--cream); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 28px 0;
}
.about-note h3 { font-size: 17px; margin: 0 0 3px; }
.about-note p { font-size: 14px; margin: 0; }
.about-foot { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }

/* ------------------------------------------------------------- programs */
.card-grid { display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.program {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.program:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: transparent; }
.program__media { position: relative; }
.program__media > img { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; }
.program__media > img.program__sdg {
  position: absolute; left: 16px; bottom: -22px; width: 60px; height: 60px; aspect-ratio: 1;
  border-radius: 14px; box-shadow: var(--shadow-sm); border: 3px solid #fff; object-fit: contain;
  background: #fff;
}
.program__body { padding: 34px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.program__body h3 { font-size: 19px; margin-bottom: 10px; }
.program__body h3 a { transition: color .2s ease; }
.program:hover .program__body h3 a { color: var(--brand); }
.program__body p { font-size: 14.5px; line-height: 1.7; }
.program__foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.tag {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}

/* ------------------------------------------------------------ give band */
.give { position: relative; padding-block: clamp(48px, 5vw, 72px); }
.give-inner {
  display: grid; grid-template-columns: .88fr 1.12fr; align-items: stretch;
  border-radius: var(--r-xl); overflow: hidden; background: var(--brand); box-shadow: var(--shadow);
}
.give-card { background: var(--ink); color: #a9a9b6; padding: clamp(30px, 3.4vw, 46px); }
.give-card h3 { color: #fff; font-size: 22px; }
.give-rows { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.give-rows li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; border-bottom: 1px dashed var(--line-dk); padding-bottom: 11px; }
.give-rows span { color: #83838f; }
.give-rows b { color: #fff; font-family: var(--display); font-weight: 700; text-align: right; }
.give-copy { padding: clamp(30px, 3.4vw, 50px); color: #f3dedd; display: flex; flex-direction: column; justify-content: center; }
.give-copy .eyebrow { color: #f0cfcd; }
.give-copy .eyebrow::before { background: #f0cfcd; }
.give-copy h2 { color: #fff; font-size: clamp(25px, 2.7vw, 36px); max-width: 20ch; }
.give-copy p { font-size: 15.5px; max-width: 50ch; }
.give-copy .btn { align-self: flex-start; margin-top: 26px; }

/* ---------------------------------------------------------------- stats */
.stats { background: var(--ink); border-radius: var(--r-xl); padding: clamp(44px, 5vw, 68px) clamp(20px, 3vw, 44px); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; position: relative; padding: 6px 12px; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--line-dk); }
.stat__ring {
  width: 116px; height: 116px; margin: 0 auto 18px; border-radius: 50%;
  border: 1px dashed #43434f; display: grid; place-content: center;
}
.stat__ring img { width: 46px; height: 46px; object-fit: contain; }
.stat b {
  /* inline-block so the reserved counter width is the text, not the column */
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3vw, 38px); color: #fff; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.stat span { display: block; font-size: 13.5px; color: #8b8b98; margin-top: 8px; }

/* --------------------------------------------------------------- events */
.event {
  display: grid; grid-template-columns: 200px 1fr; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.event:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.event__media { position: relative; }
.event__media img { height: 100%; width: 100%; object-fit: cover; min-height: 216px; }
.event__date {
  position: absolute; left: 14px; top: 14px; background: var(--brand); color: #fff;
  border-radius: 12px; padding: 9px 12px; text-align: center; line-height: 1.05;
  font-family: var(--display); font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.event__date b { display: block; font-size: 20px; }
.event__date span { display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; margin-top: 4px; font-weight: 600; }
.event__body { padding: 24px 24px 22px; display: flex; flex-direction: column; }
.event__body h3 { font-size: 18.5px; margin-bottom: 9px; }
.event__body h3 a { transition: color .2s ease; }
.event:hover h3 a { color: var(--brand); }
.event__body p { font-size: 14px; line-height: 1.65; }
.event__venue { margin: 14px 0 18px; font-size: 13.5px; color: var(--ink); }
.event__venue b { display: block; font-family: var(--display); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--body-2); margin-bottom: 3px; }
.event__body .btn { align-self: flex-start; margin-top: auto; }

/* ----------------------------------------------------------- volunteer  */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.frame { position: relative; padding: 0 0 24px 24px; }
.frame::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 72%; height: 72%;
  border: 2px solid var(--brand); border-radius: var(--r-lg); z-index: 0;
}
.frame img { position: relative; z-index: 1; border-radius: var(--r-lg); aspect-ratio: 4 / 3.1; object-fit: cover; width: 100%; }

.callout {
  background: var(--brand-soft); border-radius: var(--r); padding: 20px 22px; margin: 24px 0 26px;
}
.callout h3 { font-size: 15px; margin-bottom: 7px; }
.callout p { font-size: 14px; margin: 0; }

/* ---------------------------------------------------------- scholarship */
.icon-plate {
  width: 48px; height: 48px; flex: none; border-radius: var(--r); display: grid; place-content: center;
  background: var(--brand-soft); color: var(--brand);
}
.icon-plate svg {
  width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.pillars { list-style: none; padding: 0; margin: 30px 0 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.pillars li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; line-height: 1.55; }
.pillars b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); margin: 2px 0 3px; }
.scholars { margin-top: clamp(48px, 6vw, 80px); }
.scholar {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 36px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.scholar:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.scholar::after {
  content: "\201C"; position: absolute; top: -18px; right: 22px; pointer-events: none;
  font-family: Georgia, "Times New Roman", serif; font-size: 150px; line-height: 1; color: var(--brand-soft);
}
.scholar__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.scholar blockquote {
  position: relative; z-index: 1; margin: 0 0 26px;
  font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.65; color: var(--ink);
}
.scholar__by {
  margin-top: auto; padding-top: 20px; border-top: 1px dashed var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--body-2);
}
.scholar__by b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); }
.scholar__who { display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 1.5; color: var(--body-2); }
.scholar__who b { display: block; margin-bottom: 2px; font-family: var(--display); font-size: 16px; color: var(--ink); }
.scholar__who img {
  width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-soft);
}
/* Scholar stories: portrait beside the story, sticky while the story scrolls. */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.story__photo { position: sticky; top: calc(var(--header-h) + 24px); }
.story__photo img { aspect-ratio: 4 / 5; object-position: center 20%; }
.story__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.story__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .45s ease; }
/* Photos that open in the lightbox. */
.story__photo button, .story__photos button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.story__photo button { position: relative; z-index: 1; border-radius: var(--r-lg); }
.story__photos button { border-radius: var(--r); overflow: hidden; }
.story__photos button:hover img { transform: scale(1.05); }
/* Scholar index: one card per student, as many columns as fit. */
.scholar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 26px; }
.scholar--card::after { content: none; }
.scholar--card .scholar__top { margin-bottom: 20px; }
.scholar__summary { margin: 18px 0 24px; font-size: 15px; line-height: 1.7; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story__photo { position: relative; top: 0; max-width: 420px; }
}
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: none; border: 0; padding: 20px 2px; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 700; font-size: 16.5px; color: var(--ink);
  transition: color .2s ease;
}
.acc-btn:hover, .acc-item.is-open .acc-btn { color: var(--brand); }
.acc-btn i {
  width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--line);
  position: relative; transition: background .22s ease, border-color .22s ease;
}
.acc-btn i::before, .acc-btn i::after {
  content: ""; position: absolute; inset: 50% 8px auto; height: 2px; background: currentColor;
  transform: translateY(-1px); transition: transform .25s ease, opacity .2s ease;
}
.acc-btn i::after { transform: translateY(-1px) rotate(90deg); }
.acc-item.is-open .acc-btn i { background: var(--brand); border-color: var(--brand); color: #fff; }
.acc-item.is-open .acc-btn i::after { opacity: 0; }
.acc-panel { overflow: hidden; height: 0; transition: height .3s ease; }
.acc-panel > div { padding: 0 42px 22px 2px; font-size: 15px; }

/* ----------------------------------------------------------------- team */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.member { position: relative; }
.member--drop { margin-top: 44px; }
.member__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.member__photo img { aspect-ratio: 3 / 3.5; object-fit: cover; width: 100%; transition: transform .5s ease; }
.member:hover .member__photo img { transform: scale(1.05); }
.member__photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(transparent, rgba(21, 21, 27, .68)); opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.member:hover .member__photo::after { opacity: 1; }
.member__fb {
  position: absolute; z-index: 2; right: 14px; top: 14px; width: 36px; height: 36px;
  border-radius: 50%; background: #fff; display: grid; place-content: center;
  opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.member:hover .member__fb { opacity: 1; transform: none; }
.member__fb:hover { background: var(--brand); }
.member__fb img { width: 16px; height: 16px; }
.member__fb:hover img { filter: brightness(0) invert(1); }
.member__info {
  position: relative; z-index: 2; margin: -34px 16px 0; background: #fff;
  border-radius: var(--r); padding: 15px 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.member__info b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.member__info span { display: block; font-size: 12.5px; color: var(--brand); margin-top: 3px; }

/* Names and photos link to a profile page, or to the card on Who We Are.
   A card reached by its #anchor clears the sticky header and is outlined. */
.member__photo > a:not(.member__fb) { display: block; }
.member__info a { color: inherit; transition: color .2s ease; }
.member__info a:hover { color: var(--brand); }
.member { scroll-margin-top: calc(var(--header-h) + 24px); }
.member:target .member__info { box-shadow: 0 0 0 2px var(--brand), var(--shadow-sm); }

/* -------------------------------------------------------------- profile */
/* Arched portrait and key facts on the left (they stay in view on desktop),
   the biography on the right, opening with a larger first paragraph. */
.profile {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.profile__aside { position: sticky; top: calc(var(--header-h) + 28px); }
.profile__photo {
  overflow: hidden; background: var(--cream); box-shadow: var(--shadow);
  border-radius: 999px 999px var(--r-lg) var(--r-lg) / 46% 46% var(--r-lg) var(--r-lg);
}
.profile__photo img { display: block; width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; }
.profile__facts {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 22px;
  margin: 28px 0 24px; padding-top: 22px; border-top: 1px solid var(--line);
}
.profile__facts dt {
  font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--body-2); padding-top: 3px;
}
.profile__facts dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.profile__bio { max-width: 66ch; }
.profile__bio > p:first-child {
  font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.55; color: var(--ink); margin-bottom: 1.1em;
}
.profile__block { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.profile__label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 20px; }
.honours { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.honours li {
  display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: baseline;
  padding: 16px 20px; background: var(--cream); border-radius: var(--r);
}
.honours__year { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--brand); }
.honours b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.honours li > span:last-child { font-size: 14px; line-height: 1.5; }
.profile__quote { margin: 44px 0 0; padding: clamp(24px, 3vw, 34px); background: var(--brand-soft); border-radius: var(--r-lg); }
.profile__quote blockquote { margin: 0; }
.profile__quote p { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--ink); }
.profile__quote figcaption { margin-top: 16px; font-size: 13.5px; }
.profile__quote figcaption b { font-family: var(--display); color: var(--ink); }
.profile__quote figcaption span::before { content: " \00b7  "; }
.profile__back { margin-top: 40px; }
/* Narrow screens: a smaller portrait beside the facts, so the biography starts
   near the top instead of below a full-width photo. */
@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; }
  .profile__aside {
    position: static; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 22px 28px; align-items: center;
  }
  .profile__facts { margin: 0; padding-top: 0; border-top: 0; }
  .profile__aside .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .profile__aside { grid-template-columns: 116px minmax(0, 1fr); gap: 18px; }
  .profile__facts { grid-template-columns: 1fr; gap: 1px; }
  .profile__facts dd { font-size: 14px; margin-bottom: 7px; }
}

/* --------------------------------------------------------- testimonials */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 24px; display: flex; flex-direction: column; height: 100%;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.stars span {
  width: 15px; height: 15px; background: var(--brand);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.quote p { font-size: 14.5px; line-height: 1.72; }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
.quote__by i {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  display: grid; place-content: center; font-family: var(--display); font-weight: 800; font-size: 15px; font-style: normal;
}
.quote__by b { display: block; font-family: var(--display); font-size: 15px; color: var(--ink); }
.quote__by span { display: block; font-size: 12.5px; color: var(--body-2); }

/* -------------------------------------------------------------- reports */
.report {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.report:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.report__media { position: relative; }
.report__media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.report__pill {
  position: absolute; left: 14px; top: 14px; background: #fff; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.report__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.report__body h3 { font-size: 17.5px; margin-bottom: 9px; }
.report__body p { font-size: 14px; }
.report__body .link-arrow { margin-top: auto; padding-top: 18px; }

/* -------------------------------------------------------------- marquee */
.marquee { overflow: hidden; padding-block: 8px; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* Wider than the 26px the circles used: the arch tiles have straight sides, so
   the full gap is visible along their whole height rather than only at the
   widest point. */
.marquee__track { display: flex; gap: 38px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img {
  width: 200px; height: 200px; object-fit: cover; flex: none;
  /* Arch echoing the hero image. 50% keeps the two top radii summing to the
     width, so nothing is scaled down and the bottom corners keep their 24px. */
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg);
  border: 5px solid #fff; box-shadow: var(--shadow-sm);
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { overflow-x: auto; } }

/* -------------------------------------------------------- contact strip */
/* Sits inside the footer and is pulled up past its top edge, so the card's
   upper half straddles whatever section precedes it — cream on some pages,
   white on others — instead of a wrapper painting its own band. */
.contact-strip {
  position: relative; z-index: 2;
  margin-top: calc(var(--strip-pull) * -1); margin-bottom: 56px;
}
.contact-strip__inner {
  background: var(--brand); border-radius: var(--r-lg); color: #fff;
  padding: 34px clamp(22px, 3vw, 46px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
  box-shadow: 0 24px 60px rgba(99, 4, 6, .36);
}
.cinfo { display: flex; align-items: center; gap: 16px; position: relative; min-width: 0; }
/* The email address is one long word; let it break rather than widen the page on phones. */
.cinfo > span { min-width: 0; overflow-wrap: anywhere; }
.cinfo + .cinfo::before { content: ""; position: absolute; left: -13px; top: 8%; bottom: 8%; width: 1px; background: rgba(255, 255, 255, .28); }
.cinfo i {
  width: 50px; height: 50px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .18);
  background-repeat: no-repeat; background-position: center; background-size: 21px;
}
.cinfo--pin i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); }
.cinfo--mail i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4.2l-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.cinfo--tel i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.6a1 1 0 01-.25 1z'/%3E%3C/svg%3E"); }
.cinfo small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .82; font-weight: 600; }
.cinfo b { font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.35; display: block; }
.cinfo b a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- form */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow-sm); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card input, .form-card textarea {
  width: 100%; font: 400 15px/1.6 var(--text); color: var(--ink);
  background: var(--cream); border: 1px solid transparent; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; transition: border-color .2s ease, background .2s ease;
}
.form-card input::placeholder, .form-card textarea::placeholder { color: #9c9ca8; }
.form-card input:focus, .form-card textarea:focus { outline: 0; background: #fff; border-color: var(--brand); }
.form-card textarea { resize: vertical; min-height: 128px; }
.form-status { font-size: 14px; margin: 14px 0 0; color: var(--ink); }
.form-note { font-size: 13px; color: var(--body-2); margin-top: 14px; }

/* ------------------------------------------------------------ page hero */
.page-hero {
  background: var(--ink); color: #a9a9b6; position: relative; overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding-block: clamp(52px, 6vw, 90px);
}
.page-hero::before {
  content: ""; position: absolute; right: -140px; top: -160px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(153, 30, 28, .30), transparent 66%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 50px); max-width: 20ch; }
.page-hero p { max-width: 62ch; font-size: 16.5px; }
.crumbs { display: flex; gap: 9px; align-items: center; font-size: 13.5px; color: #8b8b98; margin-bottom: 16px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { opacity: .5; }

/* ----------------------------------------------------------- long prose */
.prose { font-size: 16px; line-height: 1.85; }
.prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  margin-top: 2.2em; margin-bottom: .8em;
}
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.3em; }
.prose li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 3px var(--brand);
}
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
/* Long bullet lists in two columns; one column on phones. */
.prose ul.list-cols { columns: 2; column-gap: 36px; }
.prose ul.list-cols li { break-inside: avoid; }
@media (max-width: 600px) { .prose ul.list-cols { columns: 1; } }
/* Tables inside prose; the wrapper scrolls sideways on narrow screens. */
.table-wrap { overflow-x: auto; margin: 0 0 1.3em; border: 1px solid var(--line); border-radius: var(--r); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.data-table th, .data-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.data-table thead th {
  background: var(--brand-soft); font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
.data-table tbody th { font-family: var(--display); font-weight: 700; color: var(--ink); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table td:last-child { white-space: nowrap; }

.rule { display: block; width: 54px; height: 3px; background: var(--brand); border-radius: 3px; margin: 0 0 26px; }
.rule--center { margin-inline: auto; }

.highlight {
  display: block; font-family: var(--display); font-weight: 800; font-size: 14px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  padding: 13px 18px; border-radius: 0 10px 10px 0; margin: 2.2em 0 1.4em; line-height: 1.5;
}

.figure-wide { margin: 0; }
.figure-wide img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 16 / 7.6; object-fit: cover; }
.figure-wide--full { max-width: 880px; margin-inline: auto; }
.figure-wide--full img { aspect-ratio: auto; object-fit: contain; }
.figure-wide figcaption { font-size: 13.5px; color: var(--body-2); margin-top: 14px; text-align: center; }

.pdf-link {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 26px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 22px 15px 16px; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pdf-link:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.pdf-link svg { width: 30px; height: 40px; flex: none; }
.pdf-link b { display: block; font-family: var(--display); font-size: 15px; color: var(--ink); }
.pdf-link span { display: block; font-size: 12.5px; color: var(--body-2); }

/* -------------------------------------------------------------- gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-grid button {
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r); overflow: hidden;
}
.gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .45s ease; }
.gallery-grid button:hover img { transform: scale(1.07); }

.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(10, 10, 14, .93);
  display: grid; place-items: center; padding: 30px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 84vh; border-radius: 12px; object-fit: contain; }
.lightbox button {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer;
  width: 50px; height: 50px; border-radius: 50%; font-size: 22px; line-height: 1;
  transition: background .2s ease;
}
.lightbox button:hover { background: var(--brand); }
.lightbox__close { top: 22px; right: 22px; font-size: 26px; }
.lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #b6b6c2; font-size: 14px; }

/* --------------------------------------------------------------- donate */
.bank {
  display: grid; grid-template-columns: 300px 1fr; gap: 0; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bank__logo { background: var(--cream); display: grid; place-content: center; padding: 36px; }
.bank__logo img { max-width: 210px; }
.bank__body { padding: clamp(28px, 3vw, 44px); }
.bank__body h2 { font-size: 25px; }
.bank-rows { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 26px; }
.bank-rows dt { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--body-2); }
.bank-rows dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); word-break: break-word; }
.bank-rows .gap { grid-column: 1 / -1; height: 1px; background: var(--line); }

.note-block { background: var(--cream); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); }
.note-block p:first-child { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--ink); color: #8b8b98;
  display: flow-root; /* contains the strip's negative margin instead of collapsing it */
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.15fr 1.1fr; gap: 40px; padding-bottom: 56px; }
.footer-grid h4 { color: #fff; font-size: 17px; margin-bottom: 22px; position: relative; padding-bottom: 14px; }
.footer-grid h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--brand); }
.footer-brand { margin-bottom: 24px; text-align: center; }
/* Shown in its own colours, so it needs a light plate: the maroon and navy
   artwork sits at ~1.3:1 against the ink footer and would be invisible on it. */
.footer-brand img {
  width: auto; height: 200px; display: inline-block;
  background: #fff; border-radius: var(--r-lg); padding: 10px 16px;
}
.footer-brand b { font-family: var(--display); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.03em; line-height: 1.05; display: block; }
.footer-brand span { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #6f6f7c; font-weight: 600; }
.site-footer p { font-size: 14.5px; line-height: 1.75; }
.f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.f-links a { font-size: 14.5px; display: inline-flex; align-items: center; gap: 9px; transition: color .2s ease, gap .2s ease; }
.f-links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: none; }
.f-links a:hover { color: #fff; gap: 12px; }
.f-post { display: flex; gap: 14px; margin-bottom: 18px; }
.f-post img { width: 66px; height: 62px; border-radius: 10px; object-fit: cover; flex: none; }
.f-post b { display: block; font-family: var(--display); font-weight: 600; font-size: 14px; color: #e6e6ee; line-height: 1.4; transition: color .2s ease; }
.f-post:hover b { color: var(--brand); }
.f-post span { display: block; font-size: 12.5px; color: #6f6f7c; margin-top: 5px; }
.f-follow p { margin: 0 0 22px; max-width: 26ch; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ink-3);
  display: grid; place-content: center; transition: background .22s ease, transform .22s ease;
}
.socials a:hover { background: var(--brand); transform: translateY(-3px); }
.socials img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.footer-bar {
  border-top: 1px solid var(--line-dk); padding-block: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 13.5px;
}
.footer-bar a:hover { color: var(--brand); }

/* --------------------------------------------------------------- to top */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; display: grid; place-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
  box-shadow: 0 12px 28px rgba(99, 4, 6, .42);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); }
.to-top::before {
  content: ""; width: 13px; height: 13px; border-left: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg) translate(2px, 2px);
}

/* ------------------------------------------------------------- reveal   */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- responsive  */
@media (max-width: 1140px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .member--drop { margin-top: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

/* The header's phone number only fits beside the full menu on wide screens;
   the number is still in the contact strip at the foot of every page. */
@media (max-width: 1240px) {
  .header-phone { display: none; }
}
@media (max-width: 1024px) {
  .header-inner { gap: 10px; }
  .brand img { height: 56px; }
  .brand b { font-size: 17px; }
  .nav-list > li > a { padding: 10px 8px; font-size: 14px; }
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: 99; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    display: none; padding: 14px 20px 26px;
  }
  .main-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list > li > a { padding: 13px 8px; font-size: 16px; border-radius: 10px; }
  .has-sub > a::after { margin-left: auto; }
  .sub-list {
    position: static; opacity: 1; visibility: visible; transform: none; display: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
    margin: 2px 0 6px 12px; padding: 0 0 0 8px; min-width: 0;
  }
  .has-sub.is-open .sub-list { display: block; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: flex; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 460px; }
  .hero-media img { aspect-ratio: 4 / 3.4; }
  .hero-badge { left: auto; right: 0; bottom: 18px; }
  .about-grid, .split { grid-template-columns: 1fr; }
  .give-inner { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 12px; }
  .stat:nth-child(3)::before { display: none; }
  .contact-strip__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cinfo + .cinfo::before { display: none; }
  .bank { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  :root { --r-xl: 24px; --r-lg: 18px; }
  .card-grid, .card-grid--3, .card-grid--2, .team-grid { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; }
  .event__media img { min-height: 200px; aspect-ratio: 16 / 9; }
  .sec-head { align-items: flex-start; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat::before { display: none !important; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .marquee img { width: 160px; height: 160px; }
  .marquee__track { gap: 30px; } /* keeps the same gap-to-tile ratio as desktop */
  .bank-rows { grid-template-columns: 1fr; gap: 4px 0; }
  .bank-rows dd { margin-bottom: 12px; }
  .years-badge { width: 104px; height: 104px; }
  .years-badge strong { font-size: 24px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .footer-bar { justify-content: center; text-align: center; }
}

/* -------------------------------------------------- late additions ---- */
.nav-cta { display: none; }
.nav-cta .btn { width: 100%; justify-content: center; }
/* Declared after the base rule above so it actually wins on mobile, where the
   header's own Donate button is hidden. */
@media (max-width: 900px) {
  .nav-cta { display: block; margin-top: 14px; }
}
/* Declared after the base rule above so it actually wins on mobile, where the
   header's own Donate button is hidden. */
@media (max-width: 900px) {
}

.event--cta { background: var(--ink); border-color: transparent; grid-template-columns: 1fr; }
.event--cta .event__body { padding: clamp(26px, 3vw, 38px); justify-content: center; }
.event--cta h3 { color: #fff; font-size: 22px; max-width: 16ch; }
.event--cta p { color: #9a9aa8; }
.event--cta:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.quote--plain .stars { display: none; }

/* ---------------------------------------------------------- hero slider */
.hero-slider { position: relative; }
.hero-slider__slides {
  position: relative; width: 100%; aspect-ratio: 4 / 4.4; overflow: hidden;
  border-radius: 999px 999px var(--r-lg) var(--r-lg) / 46% 46% var(--r-lg) var(--r-lg);
  background: var(--ink-3);
}
.hero-slider__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1s ease, transform 6s ease;
}
.hero-slider__slides img.is-active { opacity: 1; transform: scale(1); }
.hero-slider__dots {
  position: absolute; right: 22px; bottom: 22px; z-index: 3;
  display: flex; gap: 8px;
}
.hero-slider__dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .5); transition: width .28s ease, background .28s ease;
}
.hero-slider__dots button[aria-current="true"] { width: 26px; background: var(--brand); }
.hero-slider__dots button:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slides img { transform: none; transition: opacity .2s ease; }
}
@media (max-width: 900px) {
  .hero-slider__slides { aspect-ratio: 4 / 3.4; }
}

/* ======================================================== motion ======= */
/* Purely additive: entrance choreography, hover payoffs and idle motion.
   Nothing here changes layout, type or colour. */

@keyframes rise   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes arch   { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes navIn  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------ hero entrance */
.js .hero-copy > * { animation: rise .85s cubic-bezier(.22, 1, .36, 1) backwards; }
.js .hero-copy > :nth-child(1) { animation-delay: .08s; }
.js .hero-copy > :nth-child(2) { animation-delay: .16s; }
.js .hero-copy > :nth-child(3) { animation-delay: .24s; }
.js .hero-copy > :nth-child(4) { animation-delay: .32s; }
.js .hero-copy > :nth-child(5) { animation-delay: .40s; }
.js .hero-media { animation: arch 1.1s cubic-bezier(.22, 1, .36, 1) .12s backwards; }
.js .hero-badge { animation: rise .7s cubic-bezier(.22, 1, .36, 1) .8s backwards, floaty 6s ease-in-out 1.7s infinite; }
.js .years-badge { animation: floaty 7s ease-in-out infinite; }

/* --------------------------------------------------- reveal variants */
.js .reveal--left  { transform: translateX(-34px); }
.js .reveal--right { transform: translateX(34px); }
.js .reveal--zoom  { transform: scale(.965); }

/* A not-yet-revealed element sits 34px outside its column, which would widen
   the document. `clip` contains it without creating a scroll container (so it
   does not break sticky), and stacked columns slide vertically instead. */
.section { overflow-x: clip; }
@media (max-width: 900px) {
  .js .reveal--left, .js .reveal--right { transform: translateY(22px); }
}

/* Children of a revealed container cascade in behind it. */
.js .stats .stat { opacity: 0; transform: translateY(18px); }
.js .stats.is-in .stat {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.js .stats.is-in .stat:nth-child(2) { transition-delay: .1s; }
.js .stats.is-in .stat:nth-child(3) { transition-delay: .2s; }
.js .stats.is-in .stat:nth-child(4) { transition-delay: .3s; }

.js .accordion .acc-item { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in .accordion .acc-item {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.js .reveal.is-in .accordion .acc-item:nth-child(2) { transition-delay: .1s; }
.js .reveal.is-in .accordion .acc-item:nth-child(3) { transition-delay: .2s; }

/* --------------------------------------------------------- hover work */
.program__media > img:not(.program__sdg),
.event__media img,
.report__media img { transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.program:hover .program__media > img:not(.program__sdg),
.event:hover .event__media img,
.report:hover .report__media img { transform: scale(1.07); }

.program__sdg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.program:hover .program__sdg { transform: translateY(-5px) rotate(-5deg); }

.quote:hover .stars span { animation: pop .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.quote:hover .stars span:nth-child(2) { animation-delay: .05s; }
.quote:hover .stars span:nth-child(3) { animation-delay: .1s; }
.quote:hover .stars span:nth-child(4) { animation-delay: .15s; }
.quote:hover .stars span:nth-child(5) { animation-delay: .2s; }

.btn:active, .to-top:active { transform: translateY(0) scale(.97); }
.gallery-grid button { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.gallery-grid button:active { transform: scale(.97); }

/* ---------------------------------------------------------- idle motion */
.js .stat__ring { animation: spin 34s linear infinite; }
.js .stat__ring img { animation: spin 34s linear infinite reverse; }

/* ------------------------------------------------------------- panels */
.acc-panel > div {
  opacity: 0; transform: translateY(-8px);
  transition: opacity .32s ease, transform .32s ease;
}
.acc-item.is-open .acc-panel > div { opacity: 1; transform: none; transition-delay: .06s; }

.lightbox { animation: fadeIn .25s ease; }
.lightbox img.is-swap { animation: pop .34s cubic-bezier(.22, 1, .36, 1); }

/* ------------------------------------------------------------ parallax */
.figure-wide__clip { display: block; overflow: hidden; border-radius: var(--r-lg); }
.js .figure-wide__clip img { will-change: transform; }

@media (max-width: 900px) {
  .main-nav.is-open { animation: navIn .28s cubic-bezier(.22, 1, .36, 1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .js .hero-copy > *, .js .hero-media, .js .hero-badge,
  .js .stats .stat, .js .accordion .acc-item { opacity: 1; transform: none; }
}

/* The core team is five people in a four-up grid, which would strand the last
   card alone on the left. Flex lets the trailing row centre instead. */
.team-grid--fit { display: flex; flex-wrap: wrap; justify-content: center; }
.team-grid--fit > .member { flex: 0 1 calc(25% - 18px); }
@media (max-width: 1140px) { .team-grid--fit > .member { flex-basis: calc(50% - 12px); } }
@media (max-width: 680px)  { .team-grid--fit > .member { flex-basis: 100%; } }

/* ------------------------------------------------------- partnership --- */
.countries { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.countries > li { display: flex; align-items: center; gap: 16px; }
.countries__code {
  flex: none; width: 60px; height: 36px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-content: center;
  font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .09em;
}
.countries b { display: block; font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.countries > li > span > span { display: block; font-size: 13.5px; line-height: 1.5; }

.partner-list { display: grid; gap: 18px; }
.partner {
  background: var(--cream); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0; padding: 20px 22px;
}
.partner h3 { font-size: 18px; margin: 0 0 3px; }
.partner__place {
  font-size: 13px; color: var(--brand); font-weight: 600; margin: 0 0 10px;
  letter-spacing: .04em;
}
.partner p:last-child { font-size: 14.5px; line-height: 1.7; margin: 0; }

.advisors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.advisor { margin: 0; text-align: center; }
.advisor img {
  width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 12px;
  border-radius: 50% 50% var(--r) var(--r) / 34% 34% var(--r) var(--r);
}
.advisor b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--ink); line-height: 1.3;
  min-height: 2.6em; /* two lines, so every role starts on the same baseline */
}
.advisor > a { display: block; }
.advisor b a { color: inherit; transition: color .2s ease; }
.advisor b a:hover { color: var(--brand); }
.advisor span { display: block; font-size: 11.5px; color: var(--body-2); margin-top: 5px; line-height: 1.45; }

@media (max-width: 680px) {
  .advisors { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ============================== brand on dark surfaces ================= */
/* #630406 sits at 1.34:1 against the ink ground, so anywhere the brand colour
   lands on ink it switches to the light variant (8:1) or a white fill. */

.hero h1 em { color: var(--brand-light); }

.footer-grid h4::after,
.f-links a::before { background: var(--brand-light); }

.socials a:hover { background: var(--brand-light); }
.socials a:hover img { filter: brightness(0); }

/* Primary buttons on ink panels take a white fill instead of the maroon one. */
.give-card .btn, .event--cta .btn {
  --btn-bg: #fff; --btn-fg: var(--ink);
}
.give-card .btn::after, .event--cta .btn::after {
  background-color: rgba(21, 21, 27, .1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
}
.give-card .btn:hover, .event--cta .btn:hover {
  background: var(--brand-light); box-shadow: none;
}

/* Defines the card's lower edge where it crosses onto the footer. */
.contact-strip__inner { box-shadow: 0 24px 60px rgba(99, 4, 6, .36), 0 0 0 1px rgba(255, 255, 255, .07); }

/* A maroon focus ring is invisible on ink. */
.hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible,
.section--ink :focus-visible, .stats :focus-visible,
.give-card :focus-visible, .event--cta :focus-visible { outline-color: var(--brand-light); }

/* Trim the header back on phones, where a 94px bar eats real estate. */
@media (max-width: 680px) {
  :root { --header-h: 78px; }
  .brand img { height: 60px; }
}
/* Small phones (320-400px): logo, name and menu button must share one row. */
@media (max-width: 400px) {
  .header-inner { padding: 0 16px; gap: 10px; }
  .brand { gap: 8px; }
  .brand img { height: 50px; }
  .brand b { font-size: 17px; }
  .brand span { font-size: 9.5px; letter-spacing: .12em; }
}

/* The inner-page banner is otherwise a bare dark block. The crest sits off the
   right edge as a watermark — knocked out to white, since the maroon and navy
   artwork is ~1.3:1 against this ground and would not show at all. */
.page-hero__mark {
  position: absolute; z-index: 0; right: 0; top: 0;
  width: auto; height: 100%;
  opacity: .085; filter: brightness(0) invert(1);
  pointer-events: none; user-select: none;
}
@media (max-width: 900px) {
  .page-hero__mark { opacity: .06; } /* keeps the heading legible over it */
}

/* Bottom bar runs copyright · credit, so the credit sits hard right. */
/* Only the last p drops its bottom margin, and align-items:center then lifts
   the other one off the shared baseline — so zero them both. */
.footer-bar p { margin: 0; }
.powered { white-space: nowrap; }
.powered b { color: #c4c4d0; font-family: var(--display); font-weight: 700; }
.powered a:hover b { color: var(--brand); }

/* The strip is pulled up into whatever section precedes it, so the pull has to
   stay inside that section's bottom padding. Deriving it from --sec keeps a
   constant ~18px of clearance at every width instead of colliding wherever the
   clamp bottoms out — a fixed 70px overlapped the homepage button by 28px on
   phones and by 6px around 1024px. */

/* ------------------------------------------------------------ trek band */
/* Full-bleed photo band for the Trek With Purpose expedition. The gateway photo
   sits behind an ink wash that runs heavier on the left, under the copy, and
   the facts panel is a frosted ink card so the photo still reads through it. */
.trek {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: #a9a9b6;
  padding-block: clamp(72px, 8vw, 120px);
}
.trek__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.trek::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(21, 21, 27, .92) 0%, rgba(21, 21, 27, .76) 46%, rgba(21, 21, 27, .46) 100%),
    linear-gradient(to bottom, rgba(21, 21, 27, .35), transparent 35%, rgba(21, 21, 27, .45));
}
.trek__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.trek .sec-title { color: #fff; }
.trek .sec-title em { font-style: normal; color: var(--brand-light); white-space: nowrap; }
.trek__copy > p:not(.eyebrow) { font-size: 17px; max-width: 52ch; }
.trek__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

.trek__facts {
  margin: 0; display: grid; counter-reset: fact;
  background: rgba(21, 21, 27, .66);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-xl);
  padding: clamp(8px, 1vw, 14px) clamp(22px, 2.6vw, 36px);
  box-shadow: var(--shadow-lg);
}
.trek__fact {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start;
  padding-block: clamp(18px, 2vw, 24px);
}
.trek__fact + .trek__fact { border-top: 1px dashed rgba(255, 255, 255, .16); }
.trek__fact::before {
  counter-increment: fact; content: counter(fact, decimal-leading-zero);
  grid-row: 1 / span 2; padding-top: 5px; min-width: 2.2ch; font-variant-numeric: tabular-nums;
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  color: var(--brand-light);
}
.trek__fact dt { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: #fff; }
.trek__fact dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #a9a9b6; }
.trek :focus-visible { outline-color: var(--brand-light); }

@media (max-width: 900px) {
  .trek__grid { grid-template-columns: 1fr; }
  .trek::before { background: linear-gradient(to bottom, rgba(21, 21, 27, .9), rgba(21, 21, 27, .78)); }
}

/* ---------------------------------------------------------- voices slider */
/* The testimonials scroll sideways so the list can grow past one row. Scroll
   snap does the paging; the arrows and dots are conveniences layered on top,
   and the script hides them when every card already fits. */
.quotes { --per: 3; --gap: 26px; position: relative; }
/* Field reports on the home page reuse the slider as a looping carousel, one
   row of four on desktop. The arrows stay in the row under the cards. */
.quotes--reports { --per: 4; }
.quotes--reports .quotes__track { cursor: grab; }
.quotes--reports.is-dragging .quotes__track { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.quotes__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* headroom so the hover lift and its shadow are not clipped by the scroller */
  padding: 10px 0 44px; margin: -10px 0 -44px;
  scrollbar-width: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track > * { scroll-snap-align: start; }
.quotes__nav { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.quotes__nav[hidden] { display: none; }
.quotes__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-content: center; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}
.quotes__btn::before {
  content: ""; width: 10px; height: 10px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}
.quotes__btn--next::before { transform: translateX(-2px) rotate(-135deg); }
.quotes__btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }
.quotes__btn:disabled { opacity: .35; cursor: default; background: #fff; color: var(--ink); border-color: var(--line); transform: none; }
.quotes__dots { display: flex; gap: 8px; }
.quotes__dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: #d9d2ca; transition: width .28s ease, background .28s ease;
}
.quotes__dots button[aria-current="true"] { width: 26px; background: var(--brand); }
.quotes__dots button:hover { background: var(--body-2); }
@media (max-width: 1140px) { .quotes { --per: 2; } }
@media (max-width: 680px)  { .quotes { --per: 1; --gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .quotes__track { scroll-behavior: auto; } }