/* ===========================================================
   about.css — the About section design system.
   Rich editorial layouts: full-bleed hero, stat counters, split
   sections, SEEL pillars, values rail, leadership + advisors,
   recognition timeline, comparison, quote & CTA bands.
   Loads alongside styles.css (brand tokens live there).
   =========================================================== */

.ab-main { padding: 0 0 90px; overflow-x: clip; }
.ab-main section { margin-top: 84px; }
.ab-main section:first-of-type { margin-top: clamp(52px, 6vw, 84px); }

/* ---------- section heading kit ---------- */
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--green); font-weight: 700; letter-spacing: .18em;
  font-size: 12.5px; text-transform: uppercase;
}
.ab-eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--green); border-radius: 2px; }
.ab-h2 {
  font-family: 'aesthet-nova', 'Fraunces', serif;
  color: var(--navy); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12;
  margin: 14px 0 0;
}
.ab-h2 .grn { color: var(--green); }
.ab-lead { color: var(--navy); font-size: 18px; line-height: 1.65; max-width: 860px; margin-top: 18px; }
.ab-lead p { margin: 0 0 14px; }

/* ---------- breadcrumb + section subnav ---------- */
/* flex + gap so the separators breathe whether or not they carry .sep */
.ab-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 26px 0 0; font-size: 14px; color: var(--muted); }
.ab-crumb a { color: var(--navy); text-decoration: none; font-weight: 600; }
.ab-crumb a:hover { color: var(--green); }
.ab-crumb .sep { margin: 0; opacity: .55; }

.ab-subnav {
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  padding: 16px 0 6px; scrollbar-width: none; -ms-overflow-style: none;
}
.ab-subnav::-webkit-scrollbar { display: none; }
.ab-subnav a {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--bg-soft); color: var(--navy);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border-radius: 999px; padding: 9px 18px;
  transition: background .18s ease, color .18s ease;
}
.ab-subnav a:hover { background: var(--pale-green-2); color: var(--navy); }
.ab-subnav a.on { background: var(--navy); color: #fff; }

/* ---------- HERO (full-bleed navy) ---------- */
.ab-hero {
  position: relative; border-radius: 26px; overflow: hidden;
  background: linear-gradient(118deg, #1d2559 0%, var(--navy) 46%, #35418f 100%);
  color: #fff; margin-top: 18px;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 0; min-height: 480px;
}
.ab-hero__txt { padding: clamp(34px, 5vw, 68px); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.ab-hero__kicker { color: var(--green); font-weight: 700; letter-spacing: .2em; font-size: 12.5px; text-transform: uppercase; }
.ab-hero__title {
  font-family: 'aesthet-nova', 'Fraunces', serif;
  font-weight: 700; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06;
  margin: 16px 0 0; color: #fff;
}
.ab-hero__title .grn { color: var(--green); }
.ab-hero__sub { margin-top: 20px; font-size: 17.5px; line-height: 1.65; opacity: .92; max-width: 560px; }
.ab-hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ab-hero__tags span {
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; padding: 8px 16px;
}
.ab-hero__media { position: relative; min-height: 320px; overflow: hidden; }
.ab-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(39,48,112,.25) 34%, rgba(39,48,112,0) 68%);
}

/* ---------- STATS band ---------- */
.ab-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 40px; position: relative; z-index: 5; padding: 0 clamp(14px, 3vw, 44px);
}
/* straddle the hero only when the stats band sits directly under it */
.ab-hero + .ab-stats { margin-top: -44px; }
.ab-stat {
  background: #fff; border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: 0 22px 45px -24px rgba(20,28,70,.35);
  border-top: 4px solid var(--green);
}
.ab-stat .num {
  font-family: 'aesthet-nova', 'Fraunces', serif;
  color: var(--green); font-weight: 700; font-size: clamp(30px, 3vw, 44px); line-height: 1;
}
.ab-stat .lbl { color: var(--navy); font-weight: 600; font-size: 14.5px; margin-top: 8px; line-height: 1.35; }

/* ---------- SPLIT section (image + text, alternating) ---------- */
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.ab-split.rev .ab-split__media { order: 2; }
.ab-split__media { position: relative; }
.ab-split__media img { width: 100%; border-radius: 22px; display: block; object-fit: cover; aspect-ratio: 4/3.2; }
.ab-split__media .badge {
  position: absolute; left: 22px; bottom: 22px;
  background: var(--green); color: #fff; border-radius: 14px;
  padding: 14px 20px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.45);
  max-width: 240px; font-size: 14.5px;
}
.ab-split__media .badge .big { font-family: 'aesthet-nova', serif; font-size: 30px; display: block; }
.ab-split__txt .ab-lead { margin-top: 16px; }
.ab-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.ab-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--navy); font-size: 16px; line-height: 1.45; }
.ab-ticks li::before {
  content: "✓"; flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: var(--pale-green); color: #1c7a2f; font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ---------- QUOTE band ---------- */
.ab-quote {
  background: var(--bg-warm); border-radius: 24px;
  padding: clamp(36px, 5vw, 64px); text-align: center; position: relative;
}
.ab-quote::before {
  content: "“"; font-family: 'aesthet-nova', serif; color: var(--green);
  font-size: 110px; line-height: 0; display: block; margin: 26px auto 8px;
}
.ab-quote blockquote {
  margin: 0 auto; max-width: 900px;
  font-family: 'aesthet-nova', 'Fraunces', serif;
  color: var(--navy); font-weight: 500; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.4;
}
.ab-quote cite { display: block; margin-top: 20px; font-style: normal; color: var(--green); font-weight: 700; font-size: 15px; }
.ab-quote cite small { display: block; color: var(--muted); font-weight: 600; margin-top: 3px; }

/* ---------- SEEL pillars ---------- */
.ab-seel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.ab-seel .cell {
  border-radius: 20px; padding: 28px 24px; color: #fff; min-height: 210px;
  display: flex; flex-direction: column;
}
.ab-seel .cell:nth-child(1) { background: #2e9e44; }
.ab-seel .cell:nth-child(2) { background: var(--navy); }
.ab-seel .cell:nth-child(3) { background: #0F4F50; }
.ab-seel .cell:nth-child(4) { background: #35418f; }
.ab-seel .ltr { font-family: 'aesthet-nova', serif; font-size: 44px; font-weight: 700; opacity: .95; }
.ab-seel h4 { margin: 6px 0 8px; font-size: 21px; font-family: 'aesthet-nova', serif; font-weight: 700; }
.ab-seel p { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .88; }

/* ---------- VALUES rail (scroll-snap carousel) ---------- */
.ab-rail-wrap { position: relative; margin-top: 30px; }
.ab-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 320px);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 18px; scrollbar-width: none;
}
.ab-rail::-webkit-scrollbar { display: none; }
.ab-rail .vcard {
  scroll-snap-align: start; background: #fff; border: 1px solid #e8e8ee;
  border-radius: 20px; padding: 26px 24px; min-height: 210px;
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.ab-rail .vcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(39,48,112,.4); }
.ab-rail .vcard .no { color: var(--green); font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 15px; letter-spacing: .1em; }
.ab-rail .vcard h4 { color: var(--navy); font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 21px; margin: 10px 0 10px; }
.ab-rail .vcard p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.ab-rail-nav { display: flex; gap: 10px; margin-top: 4px; }
.ab-rail-nav button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); font-size: 18px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ab-rail-nav button:hover { background: var(--navy); color: #fff; }

/* ---------- LEADERSHIP ---------- */
.ab-leader-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.ab-leader {
  background: #fff; border: 1px solid #e8e8ee; border-radius: 20px; overflow: hidden;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; display: block;
}
.ab-leader:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(39,48,112,.45); }
.ab-leader .ava {
  height: 118px; display: flex; align-items: center; justify-content: center;
  font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 40px; color: #fff;
}
.ab-leader:nth-child(4n+1) .ava { background: linear-gradient(135deg, #2e9e44, #7bd389); }
.ab-leader:nth-child(4n+2) .ava { background: linear-gradient(135deg, #273070, #4a57b9); }
.ab-leader:nth-child(4n+3) .ava { background: linear-gradient(135deg, #0F4F50, #2b9d97); }
.ab-leader:nth-child(4n+4) .ava { background: linear-gradient(135deg, #35418f, #8a94d8); }
.ab-leader .inf { padding: 18px 20px 20px; }
.ab-leader .nm { color: var(--navy); font-weight: 700; font-size: 17px; }
.ab-leader .rl { color: var(--green); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }

/* full leadership profile blocks */
.ab-profile {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 3.6vw, 54px);
  background: #fff; border: 1px solid #e8e8ee; border-radius: 24px;
  padding: clamp(26px, 3.4vw, 46px); margin-top: 26px; align-items: start;
}
.ab-profile__id { text-align: center; }
.ab-profile__id .ava {
  width: 168px; height: 168px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 56px; color: #fff;
}
.ab-profile:nth-of-type(odd) .ab-profile__id .ava { background: linear-gradient(135deg, #2e9e44, #7bd389); }
.ab-profile:nth-of-type(even) .ab-profile__id .ava { background: linear-gradient(135deg, #273070, #4a57b9); }
.ab-profile__id .nm { font-family: 'aesthet-nova', serif; color: var(--navy); font-weight: 700; font-size: 23px; margin-top: 18px; }
.ab-profile__id .rl { color: var(--green); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.ab-profile__msg { color: var(--navy); font-size: 16.5px; line-height: 1.7; }
.ab-profile__msg p { margin: 0 0 15px; }
.ab-profile__msg .opener {
  font-family: 'aesthet-nova', serif; font-size: 21px; line-height: 1.4; font-weight: 500;
  color: var(--navy); border-left: 4px solid var(--green); padding-left: 18px; margin-bottom: 20px;
}

/* advisors grid */
.ab-advisors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.ab-advisor {
  background: var(--bg-warm); border-radius: 18px; padding: 24px 24px 22px;
  display: flex; gap: 16px; align-items: flex-start;
}
.ab-advisor .ava {
  flex: 0 0 54px; height: 54px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'aesthet-nova', serif;
}
.ab-advisor:nth-child(3n+2) .ava { background: #2e9e44; }
.ab-advisor:nth-child(3n) .ava { background: #0F4F50; }
.ab-advisor .nm { color: var(--navy); font-weight: 700; font-size: 16px; }
.ab-advisor .tg { color: var(--green); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin: 3px 0 7px; }
.ab-advisor p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---------- TIMELINE (recognition) ---------- */
.ab-timeline { position: relative; margin-top: 40px; padding-left: 30px; }
.ab-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; background: var(--pale-green); border-radius: 3px; }
.ab-tl-item { position: relative; padding: 0 0 38px 26px; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-item::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--green); border: 5px solid var(--pale-green-2);
}
.ab-tl-item .when { color: var(--green); font-weight: 700; letter-spacing: .1em; font-size: 12.5px; text-transform: uppercase; }
.ab-tl-item h4 { font-family: 'aesthet-nova', serif; color: var(--navy); font-weight: 700; font-size: 22px; margin: 7px 0 8px; }
.ab-tl-item p { margin: 0; color: var(--navy); font-size: 15.5px; line-height: 1.6; max-width: 760px; }

/* ---------- COMPARISON (conventional vs orchid) ---------- */
.ab-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.ab-compare .col { border-radius: 22px; padding: 30px 30px 26px; }
.ab-compare .col.conv { background: var(--bg-soft); color: var(--muted); }
.ab-compare .col.orch { background: var(--navy); color: #fff; }
.ab-compare h4 { font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 21px; margin: 0 0 18px; }
.ab-compare .col.conv h4 { color: #6a7088; }
.ab-compare .col.orch h4 { color: #9be88c; }
.ab-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ab-compare li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.45; align-items: flex-start; }
.ab-compare .conv li::before { content: "✕"; color: #b6bac9; font-weight: 800; margin-top: 1px; }
.ab-compare .orch li::before { content: "✓"; color: #6fdb84; font-weight: 800; margin-top: 1px; }

/* ---------- feature cards (generic 3-up) ---------- */
.ab-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.ab-card {
  background: var(--bg-warm); border-radius: 20px; padding: 30px 28px 26px;
  display: flex; flex-direction: column;
}
.ab-card .ic {
  width: 48px; height: 48px; border-radius: 14px; background: var(--pale-green);
  color: #1c7a2f; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}
.ab-card h4 { color: var(--navy); font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 20px; margin: 0 0 10px; line-height: 1.2; }
.ab-card p { color: var(--navy); opacity: .85; font-size: 14.5px; line-height: 1.55; margin: 0; }
.ab-card a.more { margin-top: 16px; color: var(--green); font-weight: 700; font-size: 14px; text-decoration: none; }
.ab-card a.more:hover { text-decoration: underline; }

/* explore-the-section grid (main about page) */
.ab-explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.ab-explore a {
  background: #fff; border: 1px solid #e8e8ee; border-radius: 20px; padding: 26px 26px 22px;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column; min-height: 150px;
}
.ab-explore a:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(39,48,112,.45); border-color: var(--pale-green); }
.ab-explore .t { font-family: 'aesthet-nova', serif; color: var(--navy); font-weight: 700; font-size: 20px; }
.ab-explore .d { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 8px; flex: 1; }
.ab-explore .go { color: var(--green); font-weight: 700; font-size: 14px; margin-top: 14px; }

/* ---------- logos band ---------- */
.ab-logos {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 26px;
  align-items: center; margin-top: 34px; background: #fff; border: 1px solid #e8e8ee;
  border-radius: 22px; padding: 30px 34px;
}
.ab-logos img { max-height: 46px; max-width: 100%; width: auto; margin: 0 auto; display: block; object-fit: contain; filter: grayscale(.15); }

/* ---------- CTA band ---------- */
.ab-cta {
  border-radius: 26px; overflow: hidden; position: relative;
  background: linear-gradient(112deg, #2e9e44, #35b755 55%, #6fdb84);
  color: #fff; padding: clamp(38px, 5vw, 64px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center;
}
.ab-cta h3 { font-family: 'aesthet-nova', serif; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; margin: 0; }
.ab-cta p { margin: 14px 0 0; font-size: 16.5px; opacity: .95; max-width: 560px; }
.ab-cta .btns { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.ab-cta .btn-w {
  background: #fff; color: #1c7a2f; font-weight: 700; border-radius: 12px;
  padding: 15px 30px; text-decoration: none; font-size: 15.5px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ab-cta .btn-o {
  border: 2px solid rgba(255,255,255,.75); color: #fff; font-weight: 700; border-radius: 12px;
  padding: 13px 28px; text-decoration: none; font-size: 15.5px;
}
.ab-cta .btn-w:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.ab-cta .btn-o:hover { background: rgba(255,255,255,.14); }

/* ---------- numbered manifesto rows ---------- */
.ab-rows { margin-top: 30px; border-top: 1px solid #e8e8ee; }
.ab-row {
  display: grid; grid-template-columns: 90px 1fr 1.3fr; gap: 24px;
  padding: 26px 6px; border-bottom: 1px solid #e8e8ee; align-items: start;
}
.ab-row .no { font-family: 'aesthet-nova', serif; color: var(--pale-green); -webkit-text-stroke: 1.6px var(--green); font-weight: 700; font-size: 44px; line-height: 1; }
.ab-row h4 { margin: 4px 0 0; color: var(--navy); font-family: 'aesthet-nova', serif; font-weight: 700; font-size: 21px; line-height: 1.2; }
.ab-row p { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- image mosaic ---------- */
.ab-mosaic { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 14px; margin-top: 34px; }
.ab-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.ab-mosaic img:first-child { grid-row: span 2; }

/* ---------- SDG chips ---------- */
.ab-sdgs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ab-sdgs span {
  background: var(--pale-green-3); color: #1c7a2f; border-radius: 12px;
  font-weight: 700; font-size: 14px; padding: 12px 18px;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ab-stats { grid-template-columns: repeat(2, 1fr); margin-top: 20px; padding: 0; }
  .ab-seel { grid-template-columns: repeat(2, 1fr); }
  .ab-leader-strip { grid-template-columns: repeat(2, 1fr); }
  .ab-advisors { grid-template-columns: repeat(2, 1fr); }
  .ab-cards3, .ab-explore { grid-template-columns: repeat(2, 1fr); }
  .ab-logos { grid-template-columns: repeat(4, 1fr); }
  .ab-hero { grid-template-columns: 1fr; }
  .ab-hero__media { min-height: 260px; order: -1; }
  .ab-hero__media::before { background: linear-gradient(0deg, var(--navy) 4%, rgba(39,48,112,0) 60%); }
}
@media (max-width: 700px) {
  .ab-main section { margin-top: 58px; }
  .ab-split, .ab-compare, .ab-cta { grid-template-columns: 1fr; }
  .ab-split.rev .ab-split__media { order: 0; }
  .ab-cta .btns { justify-content: flex-start; }
  .ab-profile { grid-template-columns: 1fr; }
  .ab-profile__id { display: flex; align-items: center; gap: 18px; text-align: left; }
  .ab-profile__id .ava { width: 84px; height: 84px; font-size: 30px; margin: 0; }
  .ab-cards3, .ab-explore, .ab-advisors, .ab-leader-strip, .ab-seel { grid-template-columns: 1fr; }
  .ab-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ab-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
  .ab-mosaic img:first-child { grid-row: auto; grid-column: span 2; }
  .ab-row { grid-template-columns: 60px 1fr; }
  .ab-row p { grid-column: 2; }
  .ab-logos { grid-template-columns: repeat(3, 1fr); padding: 24px; }
}

/* ===========================================================
   About — image components (carousel, marquee, image-CTA)
   =========================================================== */

/* ---- carousel ---- */
.ab-carousel-wrap { margin-top: 32px; }
.ab-carousel { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(20,28,70,.5); }
.ab-carousel__track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.ab-carousel__slide { flex: 0 0 100%; position: relative; }
.ab-carousel__slide img { width: 100%; height: clamp(330px, 46vw, 540px); object-fit: cover; display: block; }
.ab-carousel__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px,4vw,48px) clamp(24px,3.4vw,44px) clamp(24px,3vw,34px);
  color: #fff; background: linear-gradient(0deg, rgba(12,17,48,.94) 6%, rgba(12,17,48,.4) 55%, rgba(12,17,48,0) 100%);
}
.ab-carousel__cap .k { color: #9be88c; font-weight: 700; letter-spacing: .16em; font-size: 12px; text-transform: uppercase; }
.ab-carousel__cap h4 { font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: clamp(23px,3vw,36px); line-height: 1.1; margin: 8px 0 8px; }
.ab-carousel__cap p { max-width: 640px; font-size: 15.5px; line-height: 1.55; opacity: .92; margin: 0; }
.ab-carousel__btn {
  position: absolute; top: 46%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; cursor: pointer; font-size: 21px; color: var(--navy);
  display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .15s ease, transform .15s ease;
}
.ab-carousel__btn:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ab-carousel__btn.prev { left: 16px; } .ab-carousel__btn.next { right: 16px; }
.ab-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.ab-carousel__dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: #cfd2de; cursor: pointer; padding: 0; transition: width .2s ease, background .2s ease; }
.ab-carousel__dots button.on { background: var(--green); width: 26px; border-radius: 5px; }

/* ---- infinite marquee ---- */
.ab-marquee {
  margin-top: 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ab-marquee__row { display: flex; gap: 16px; width: max-content; animation: ab-scroll 46s linear infinite; }
.ab-marquee:hover .ab-marquee__row { animation-play-state: paused; }
.ab-marquee figure { margin: 0; flex: 0 0 auto; width: clamp(230px, 25vw, 310px); border-radius: 18px; overflow: hidden; position: relative; }
.ab-marquee img { width: 100%; height: 205px; object-fit: cover; display: block; }
.ab-marquee figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; color: #fff; font-weight: 600; font-size: 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.66), rgba(0,0,0,0));
}
@keyframes ab-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ab-marquee__row { animation: none; } }

/* ---- static (fixed-bg) image CTA ---- */
.ab-cta-img { position: relative; border-radius: 26px; overflow: hidden; color: #fff; isolation: isolate; }
/* scroll, not fixed: a fixed background is sized to the viewport rather than
   this box, which crops the image unpredictably and breaks on iOS Safari */
.ab-cta-img__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; background-attachment: scroll; }
.ab-cta-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(102deg, rgba(18,24,62,.93) 8%, rgba(18,24,62,.62) 58%, rgba(31,120,60,.5) 100%); }
.ab-cta-img__in { padding: clamp(46px,6vw,86px); max-width: 730px; }
.ab-cta-img .k { color: #9be88c; font-weight: 700; letter-spacing: .18em; font-size: 12.5px; text-transform: uppercase; }
.ab-cta-img h3 { font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: clamp(28px,3.7vw,46px); line-height: 1.1; margin: 12px 0 0; }
.ab-cta-img p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; opacity: .94; }
.ab-cta-img .btns { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.ab-cta-img .btn-w { background: #fff; color: #1c7a2f; font-weight: 700; border-radius: 12px; padding: 15px 30px; text-decoration: none; font-size: 15.5px; transition: transform .15s ease, box-shadow .15s ease; }
.ab-cta-img .btn-w:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(0,0,0,.5); }
.ab-cta-img .btn-o { border: 2px solid rgba(255,255,255,.8); color: #fff; font-weight: 700; border-radius: 12px; padding: 13px 28px; text-decoration: none; font-size: 15.5px; }
.ab-cta-img .btn-o:hover { background: rgba(255,255,255,.14); }

/* ===========================================================
   Shared UI patterns (used by About + all footer sections)
   tabs · accordion · hover-reveal grid · sticky two-column ·
   vertical/masonry image grid · offset split · feature list
   =========================================================== */

/* ---- sticky section subnav (landing pages) ---- */
.ab-subnav.sticky { position: sticky; top: 84px; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: 999px; }

/* ---- tabs ---- */
.ab-tabs { margin-top: 34px; }
.ab-tabs__nav { display: flex; gap: 26px; flex-wrap: wrap; border-bottom: 2px solid #ececf1; }
.ab-tabs__nav button { border: none; background: none; padding: 14px 2px; font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 18px; color: var(--muted); cursor: pointer; position: relative; transition: color .18s ease; }
.ab-tabs__nav button:hover { color: var(--navy); }
.ab-tabs__nav button.on { color: var(--navy); }
.ab-tabs__nav button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--green); border-radius: 3px; }
.ab-tabs__panel { display: none; padding-top: 30px; }
.ab-tabs__panel.on { display: block; animation: ab-fade .32s ease; }
@keyframes ab-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- accordion ---- */
.ab-acc { margin-top: 30px; border-top: 1px solid #e8e8ee; }
.ab-acc__item { border-bottom: 1px solid #e8e8ee; }
.ab-acc__head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 4px; display: flex; justify-content: space-between; align-items: center; gap: 22px; font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 19px; color: var(--navy); line-height: 1.25; }
.ab-acc__head:hover { color: var(--green); }
.ab-acc__head .ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--pale-green); color: #1c7a2f; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .28s ease, background .2s ease; }
.ab-acc__item.open .ic { transform: rotate(45deg); background: var(--green); color: #fff; }
.ab-acc__body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.ab-acc__body-in { padding: 0 4px 26px; color: var(--muted); font-size: 15.5px; line-height: 1.68; max-width: 820px; }

/* ---- hover-reveal image grid ---- */
.ab-hovergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.ab-hovergrid.wide { grid-auto-rows: 1fr; }
.ab-hovercard { position: relative; border-radius: 20px; overflow: hidden; min-height: 300px; display: block; text-decoration: none; }
.ab-hovercard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.ab-hovercard:hover img { transform: scale(1.07); }
.ab-hovercard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,17,48,.92) 4%, rgba(12,17,48,.2) 52%, rgba(12,17,48,0) 100%); }
.ab-hovercard__c { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px; color: #fff; z-index: 2; transform: translateY(16px); transition: transform .4s ease; }
.ab-hovercard:hover .ab-hovercard__c { transform: translateY(0); }
.ab-hovercard__c .k { color: #9be88c; font-weight: 700; letter-spacing: .12em; font-size: 11px; text-transform: uppercase; }
.ab-hovercard__c h4 { font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 22px; margin: 6px 0 0; }
.ab-hovercard__c p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s ease, max-height .4s ease; }
.ab-hovercard:hover .ab-hovercard__c p { opacity: .92; max-height: 140px; }
.ab-hovercard__c .go { display: inline-block; margin-top: 12px; color: #9be88c; font-weight: 700; font-size: 13px; opacity: 0; transition: opacity .4s ease .05s; }
.ab-hovercard:hover .ab-hovercard__c .go { opacity: 1; }

/* ---- sticky two-column (sticky aside/media + scrolling content) ---- */
.ab-sticky { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px,4vw,58px); align-items: start; margin-top: 34px; }
.ab-sticky.rev { grid-template-columns: 1fr 340px; }
.ab-sticky.rev .ab-sticky__side { order: 2; }
.ab-sticky__side { position: sticky; top: 104px; }
.ab-sticky__card { background: var(--navy); color: #fff; border-radius: 22px; padding: 30px 28px; }
.ab-sticky__card h3 { font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 24px; margin: 0 0 8px; color: #fff; }
.ab-sticky__card p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; opacity: .9; }
.ab-sticky__card .full { display: block; text-align: center; background: var(--green); color: #fff; font-weight: 700; border-radius: 12px; padding: 14px; text-decoration: none; margin-top: 8px; transition: background .2s ease; }
.ab-sticky__card .full:hover { background: var(--green-dark); }
.ab-sticky__toc { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e8e8ee; }
.ab-sticky__toc a { display: block; padding: 10px 0 10px 20px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .18s ease, border-color .18s ease; }
.ab-sticky__toc a:hover, .ab-sticky__toc a.on { color: var(--navy); border-left-color: var(--green); }
.ab-sticky__media img { width: 100%; border-radius: 22px; display: block; }
.ab-sticky__body > * + * { margin-top: 30px; }
.ab-sticky__block h3 { font-family: 'aesthet-nova','Fraunces',serif; color: var(--navy); font-weight: 700; font-size: 25px; margin: 0 0 12px; scroll-margin-top: 120px; }
.ab-sticky__block p { color: var(--navy); opacity: .86; font-size: 16px; line-height: 1.7; margin: 0 0 12px; }

/* ---- vertical / masonry image grid (staggered) ---- */
.ab-vgrid { columns: 3; column-gap: 16px; margin-top: 34px; }
.ab-vgrid figure { break-inside: avoid; margin: 0 0 16px; border-radius: 18px; overflow: hidden; position: relative; }
.ab-vgrid img { width: 100%; display: block; transition: transform .5s ease; }
.ab-vgrid figure:hover img { transform: scale(1.05); }
.ab-vgrid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px 12px; color: #fff; font-weight: 600; font-size: 13.5px; background: linear-gradient(0deg, rgba(0,0,0,.66), transparent); }
.ab-vgrid figure.tall img { min-height: 340px; object-fit: cover; }

/* ---- offset / varying-position split ---- */
.ab-split.offset .ab-split__media { transform: translateY(-30px); }
.ab-split.offset.rev .ab-split__txt { padding-top: 24px; }

/* ---- feature list (icon + text rows, 2-col) ---- */
.ab-featgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; margin-top: 34px; }
.ab-feat { display: flex; gap: 18px; align-items: flex-start; }
.ab-feat .ic { flex: 0 0 52px; height: 52px; border-radius: 14px; background: var(--pale-green); color: #1c7a2f; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.ab-feat h4 { margin: 4px 0 6px; color: var(--navy); font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 20px; }
.ab-feat p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---- pill filter row (static demo) ---- */
.ab-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ab-pills span { background: var(--bg-soft); color: var(--navy); border-radius: 999px; font-weight: 600; font-size: 13.5px; padding: 9px 18px; }
.ab-pills span.on { background: var(--navy); color: #fff; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .ab-hovergrid { grid-template-columns: repeat(2, 1fr); }
  .ab-vgrid { columns: 2; }
  .ab-featgrid { grid-template-columns: 1fr; }
  .ab-sticky, .ab-sticky.rev { grid-template-columns: 1fr; }
  .ab-sticky.rev .ab-sticky__side { order: 0; }
  .ab-sticky__side { position: static; }
}
@media (max-width: 700px) {
  .ab-hovergrid { grid-template-columns: 1fr; }
  .ab-vgrid { columns: 1; }
  .ab-tabs__nav { gap: 16px; overflow-x: auto; flex-wrap: nowrap; }
  .ab-split.offset .ab-split__media { transform: none; }
}

/* ===========================================================
   Careers job board + application form + initiative cards
   =========================================================== */
/* job board */
.ab-joblist { display: grid; gap: 14px; margin-top: 26px; }
.ab-job { background: #fff; border: 1px solid #e8e8ee; border-radius: 16px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; transition: box-shadow .2s ease, transform .2s ease; }
.ab-job:hover { box-shadow: 0 18px 40px -24px rgba(39,48,112,.4); transform: translateY(-2px); }
.ab-job__i h4 { margin: 0; font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 20px; color: var(--navy); }
.ab-job__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.ab-job__meta span { background: var(--bg-soft); color: var(--navy); border-radius: 999px; font-size: 12.5px; font-weight: 600; padding: 6px 13px; }
.ab-job__meta span.hot { background: var(--pale-green-2); color: #1c7a2f; }
.ab-job .apply { background: var(--navy); color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-weight: 700; cursor: pointer; text-decoration: none; font-size: 14px; white-space: nowrap; transition: background .2s ease; }
.ab-job .apply:hover { background: var(--green); }

/* application form */
.ab-form { background: #fff; border: 1px solid #e8e8ee; border-radius: 22px; padding: clamp(28px,3.4vw,44px); margin-top: 34px; box-shadow: 0 26px 55px -34px rgba(20,28,70,.4); }
.ab-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-form .fld { margin-bottom: 18px; }
.ab-form label { display: block; font-weight: 600; color: var(--navy); font-size: 14px; margin: 0 0 7px; }
.ab-form label .req { color: var(--green); }
.ab-form input, .ab-form select, .ab-form textarea { width: 100%; border: 1px solid #d7d9e2; border-radius: 11px; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--navy); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.ab-form textarea { min-height: 110px; resize: vertical; }
.ab-form input:focus, .ab-form select:focus, .ab-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(52,180,74,.15); }
.ab-file { border: 2px dashed #c7cbd8; border-radius: 14px; padding: 24px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ab-file:hover, .ab-file.drag { border-color: var(--green); background: var(--pale-green-3); }
.ab-file input { display: none; }
.ab-file .ic { font-size: 26px; color: var(--green); }
.ab-file .t { color: var(--navy); font-weight: 600; margin-top: 6px; }
.ab-file .h { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ab-file .name { color: var(--green); font-weight: 700; margin-top: 8px; word-break: break-all; }
.ab-form .submit { background: var(--green); color: #fff; border: none; border-radius: 12px; padding: 15px 36px; font-weight: 700; font-size: 15.5px; cursor: pointer; transition: background .2s ease; margin-top: 6px; }
.ab-form .submit:hover { background: var(--green-dark); }
.ab-form .ok { display: none; background: var(--pale-green-2); color: #1c7a2f; border-radius: 12px; padding: 16px 18px; font-weight: 600; margin-top: 18px; }
.ab-form.sent .ok { display: block; }
.ab-form.sent .ab-form__fields { display: none; }

/* initiative cards (logo + text) */
.ab-initgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.ab-initcard { background: #fff; border: 1px solid #e8e8ee; border-radius: 20px; padding: 28px 26px 24px; text-decoration: none; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ab-initcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(39,48,112,.45); border-color: var(--pale-green); }
.ab-initcard .logo { height: 54px; display: flex; align-items: center; margin-bottom: 16px; }
.ab-initcard .logo img { max-height: 50px; max-width: 160px; width: auto; object-fit: contain; }
.ab-initcard .cat { color: var(--green); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ab-initcard h4 { font-family: 'aesthet-nova','Fraunces',serif; color: var(--navy); font-weight: 700; font-size: 21px; margin: 4px 0 8px; }
.ab-initcard p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.ab-initcard .go { color: var(--green); font-weight: 700; font-size: 13.5px; margin-top: 14px; }

@media (max-width: 1024px) { .ab-initgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ab-form .row { grid-template-columns: 1fr; } .ab-initgrid { grid-template-columns: 1fr; } .ab-job { flex-direction: column; align-items: flex-start; } }

/* ===========================================================
   AWARD PASS — pointer grids · text ticker · zig-zag rows ·
   bento · pull-quote · 2-col · microanimations · roomier spacing
   =========================================================== */

/* roomier, organic spacing (overrides earlier compact values) */
.ab-main { padding: 0 0 clamp(90px, 10vw, 140px); }
.ab-main section { margin-top: clamp(72px, 8.5vw, 122px); }
.ab-lead { max-width: 900px; }

/* ---------- pointer grid (icons / numbers / images) ---------- */
.ab-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.ab-pgrid.c2 { grid-template-columns: repeat(2, 1fr); }
.ab-pnt { position: relative; background: #fff; border: 1px solid #ececf2; border-radius: 20px; padding: 34px 30px; overflow: hidden; transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, border-color .32s ease; }
.ab-pnt:hover { transform: translateY(-6px); box-shadow: 0 32px 58px -32px rgba(39,48,112,.5); border-color: var(--pale-green); }
.ab-pnt::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--green); transition: width .45s cubic-bezier(.2,.7,.3,1); }
.ab-pnt:hover::before { width: 100%; }
.ab-pnt .ic { width: 58px; height: 58px; border-radius: 16px; background: var(--pale-green-3); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 18px; transition: transform .32s ease; }
.ab-pnt:hover .ic { transform: scale(1.1) rotate(-5deg); }
.ab-pnt h4 { font-family: 'aesthet-nova','Fraunces',serif; color: var(--navy); font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.ab-pnt p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.ab-pnt .n { position: absolute; right: 24px; top: 18px; font-family: 'aesthet-nova',serif; font-size: 44px; font-weight: 700; color: #f1f2f7; z-index: 0; }
.ab-pnt.img { padding: 0; }
.ab-pnt.img .top { height: 150px; overflow: hidden; }
.ab-pnt.img .top img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ab-pnt.img:hover .top img { transform: scale(1.07); }
.ab-pnt.img .in { padding: 24px 26px 26px; }

/* ---------- text ticker (auto-scroll keywords) ---------- */
.ab-ticker { margin-top: 42px; background: var(--navy); border-radius: 16px; overflow: hidden; padding: 17px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ab-ticker.green { background: linear-gradient(90deg, #2e9e44, #35b755); }
.ab-ticker.warm { background: var(--bg-warm); }
.ab-ticker__row { display: flex; width: max-content; animation: ab-tick 34s linear infinite; }
.ab-ticker.rev .ab-ticker__row { animation-direction: reverse; }
.ab-ticker:hover .ab-ticker__row { animation-play-state: paused; }
.ab-ticker span { color: #fff; font-family: 'aesthet-nova','Fraunces',serif; font-weight: 700; font-size: 20px; padding: 0 30px; display: inline-flex; align-items: center; gap: 30px; white-space: nowrap; }
.ab-ticker.warm span { color: var(--navy); }
.ab-ticker span::after { content: "✦"; color: #9be88c; font-size: 13px; }
.ab-ticker.warm span::after { color: var(--green); }
@keyframes ab-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ab-ticker__row { animation: none; } }

/* ---------- zig-zag feature rows ---------- */
.ab-frows { margin-top: 40px; display: grid; gap: clamp(34px, 5vw, 76px); }
.ab-frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: center; }
.ab-frow:nth-child(even) .ab-frow__media { order: 2; }
.ab-frow__media { border-radius: 24px; overflow: hidden; position: relative; }
.ab-frow__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.ab-frow__media:hover img { transform: scale(1.05); }
.ab-frow__media .tag { position: absolute; top: 18px; left: 18px; background: #fff; color: var(--navy); font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 8px 16px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.ab-frow__txt .no { color: var(--pale-green); -webkit-text-stroke: 1.5px var(--green); font-family: 'aesthet-nova',serif; font-weight: 700; font-size: 48px; line-height: 1; }
.ab-frow__txt h3 { font-family: 'aesthet-nova','Fraunces',serif; color: var(--navy); font-size: clamp(24px, 2.9vw, 33px); font-weight: 700; margin: 10px 0 14px; line-height: 1.14; }
.ab-frow__txt p { color: var(--navy); opacity: .84; font-size: 16.5px; line-height: 1.72; margin: 0; }
.ab-frow__txt .mini { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ab-frow__txt .mini span { background: var(--bg-soft); color: var(--navy); border-radius: 999px; font-size: 12.5px; font-weight: 600; padding: 7px 14px; }

/* ---------- bento grid ---------- */
.ab-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 205px; gap: 16px; margin-top: 40px; }
.ab-bento > figure, .ab-bento > div { border-radius: 20px; overflow: hidden; position: relative; margin: 0; }
.ab-bento .b-img { grid-column: span 2; grid-row: span 2; }
.ab-bento .b-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ab-bento .b-img:hover img { transform: scale(1.06); }
.ab-bento .b-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 24px 18px; color: #fff; font-family: 'aesthet-nova',serif; font-size: 23px; font-weight: 700; background: linear-gradient(0deg, rgba(12,17,48,.86), transparent); z-index: 2; }
.ab-bento .b-stat { grid-column: span 1; background: var(--navy); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.ab-bento .b-stat .num { font-family: 'aesthet-nova',serif; color: #6fdb84; font-size: 42px; font-weight: 700; line-height: 1; }
.ab-bento .b-stat .lbl { font-size: 13.5px; margin-top: 8px; opacity: .9; line-height: 1.35; }
.ab-bento .b-quote { grid-column: span 2; background: var(--pale-green-3); padding: 30px; display: flex; align-items: center; }
.ab-bento .b-quote p { font-family: 'aesthet-nova','Fraunces',serif; color: var(--navy); font-size: 19px; line-height: 1.36; margin: 0; font-weight: 500; }
.ab-bento .b-green { grid-column: span 1; background: linear-gradient(135deg, #2e9e44, #6fdb84); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.ab-bento .b-green .bic { font-size: 26px; }
.ab-bento .b-green h4 { font-family: 'aesthet-nova',serif; font-size: 19px; margin: 8px 0 5px; }
.ab-bento .b-green p { font-size: 13px; margin: 0; opacity: .95; line-height: 1.4; }

/* ---------- pull-quote (inline) ---------- */
.ab-pullquote { margin: clamp(30px,4vw,52px) 0; border-left: 5px solid var(--green); padding: 8px 0 8px 32px; max-width: 900px; }
.ab-pullquote p { font-family: 'aesthet-nova','Fraunces',serif; color: var(--navy); font-size: clamp(22px, 2.9vw, 33px); line-height: 1.3; font-weight: 500; margin: 0; }
.ab-pullquote cite { display: block; margin-top: 14px; font-style: normal; color: var(--green); font-weight: 700; font-size: 14px; }

/* ---------- two-column prose ---------- */
.ab-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; margin-top: 26px; }
.ab-2col p { margin: 0; color: var(--navy); opacity: .86; font-size: 16.5px; line-height: 1.76; }

/* ---------- microanimations ---------- */
[data-reveal][data-anim="left"] { transform: translateX(-34px); }
[data-reveal][data-anim="right"] { transform: translateX(34px); }
[data-reveal][data-anim="scale"] { transform: scale(.93); }
[data-reveal].is-visible { transform: none; }
.ab-tilt { transform-style: preserve-3d; transition: transform .18s ease; will-change: transform; }
.ab-uline { position: relative; }
.ab-uline::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 4px; width: 0; background: var(--green); border-radius: 3px; transition: width .6s cubic-bezier(.2,.7,.3,1) .1s; }
[data-reveal].is-visible .ab-uline::after, .ab-uline.is-visible::after { width: 64px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ab-pgrid, .ab-pgrid.c2 { grid-template-columns: repeat(2, 1fr); }
  .ab-bento { grid-template-columns: repeat(2, 1fr); }
  .ab-bento .b-img { grid-column: span 2; }
  .ab-2col { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ab-pgrid, .ab-pgrid.c2 { grid-template-columns: 1fr; }
  .ab-frow { grid-template-columns: 1fr; }
  .ab-frow:nth-child(even) .ab-frow__media { order: 0; }
  .ab-bento { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .ab-bento .b-img, .ab-bento .b-quote { grid-column: span 1; }
  .ab-ticker span { font-size: 17px; }
}

/* ---------- Level catalog pages (Diploma / UG / PG) ---------- */
.lvl-wrap { margin-top: 24px; }
.lvl-school { margin-top: 40px; }
.lvl-school:first-child { margin-top: 0; }
.lvl-school__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 18px; }
.lvl-school__h a { font-family: 'aesthet-nova', serif; color: var(--navy); font-size: clamp(19px, 2.2vw, 25px); text-decoration: none; }
.lvl-school__h a:hover { color: var(--green); }
.lvl-school__h .n { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.lvl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lvl-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; text-decoration: none; background: #fff; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.lvl-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(20,28,70,.4); }
.lvl-card .pill { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--pale-green-3); color: #1c7a2f; }
.lvl-card .t { color: var(--navy); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
@media (max-width: 600px) { .lvl-grid { grid-template-columns: 1fr; } }

/* ── animated timeline (research intake) ─────────────────────────── */
.rtl { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.rtl-step { position: relative; padding-right: 30px; }

/* the rail joining this step's node to the next one */
.rtl-rail {
  position: absolute; left: 54px; right: 0; top: 26px; height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.rtl-step:last-child .rtl-rail { display: none; }
.rtl-rail__fill {
  position: absolute; inset: 0; background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .85s cubic-bezier(.4, 0, .2, 1);
}
.rtl-step.is-visible .rtl-rail__fill { transform: scaleX(1); }

.rtl-node {
  position: relative; z-index: 2; width: 54px; height: 54px; border-radius: 50%;
  background: #fff; border: 2px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: 'aesthet-nova', 'Fraunces', serif; font-weight: 700; font-size: 18px;
  color: var(--green);
  transform: scale(.55); opacity: 0;
  transition: transform .55s cubic-bezier(.22, 1.4, .36, 1), opacity .4s ease;
}
.rtl-step.is-visible .rtl-node { transform: scale(1); opacity: 1; }
/* halo that blooms out of the node as it lands */
.rtl-node::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--green); opacity: 0;
}
.rtl-step.is-visible .rtl-node::before { animation: rtl-ping 1.1s ease-out .15s 1; }
@keyframes rtl-ping {
  0%   { transform: scale(.85); opacity: .55; }
  100% { transform: scale(1.5);  opacity: 0; }
}

.rtl-card { margin-top: 26px; padding-right: 16px; }
.rtl-card h4 {
  color: var(--navy); font-family: 'aesthet-nova', 'Fraunces', serif; font-weight: 700;
  font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; margin: 0 0 10px;
}
.rtl-card p { color: var(--navy); opacity: .85; font-size: 15px; line-height: 1.6; margin: 0; }

/* stagger the rails + nodes so the line appears to travel along the timeline */
.rtl-step:nth-child(1) .rtl-rail__fill { transition-delay: .18s; }
.rtl-step:nth-child(2) .rtl-rail__fill { transition-delay: .38s; }
.rtl-step:nth-child(2) .rtl-node { transition-delay: .2s; }
.rtl-step:nth-child(3) .rtl-node { transition-delay: .4s; }

/* vertical on tablet + mobile */
@media (max-width: 900px) {
  .rtl { grid-template-columns: 1fr; margin-top: 34px; }
  .rtl-step { display: grid; grid-template-columns: 54px 1fr; column-gap: 22px; padding: 0 0 30px; }
  .rtl-step:last-child { padding-bottom: 0; }
  .rtl-rail {
    left: 26px; right: auto; top: 54px; bottom: 0; width: 2px; height: auto;
  }
  .rtl-rail__fill { transform: scaleY(0); transform-origin: center top; }
  .rtl-step.is-visible .rtl-rail__fill { transform: scaleY(1); }
  .rtl-card { margin-top: 0; padding: 4px 0 0; }
  /* each step reveals on its own as you scroll, so no cross-step stagger */
  .rtl-step .rtl-rail__fill,
  .rtl-step .rtl-node { transition-delay: .05s; }
}