/* ============ Grift custom typeface ============ */
@font-face {
  font-family: 'Grift';
  src: url('../fonts/grift/Grift-Variable.ttf?v=2') format('truetype-variations'),
       url('../fonts/grift/Grift-Variable.ttf?v=2') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('../fonts/grift/Grift-Italic.woff2?v=2') format('woff2'),
       url('../fonts/grift/Grift-Italic.woff?v=2')  format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Grift';
  src: url('../fonts/grift/Grift-BoldItalic.woff2?v=2') format('woff2'),
       url('../fonts/grift/Grift-BoldItalic.woff?v=2')  format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =============================================================
   #MyLittleBigThing · v4 design system
   "Youthful · Vibrant · Innovative · On-brand"
   Strict palette: GREEN + RED + INK + CREAM only.
   ============================================================= */

:root {
  /* ---------- Palette (brand-only) ---------- */
  --green-50:   #EFF8E8;
  --green-100:  #DAEFC4;
  --green-300:  #95D87C;
  --green-500:  #4FB549;  /* logo green */
  --green-600:  #3A9E36;
  --green-700:  #2D8B36;
  --green-800:  #1F6B2B;
  --green-900:  #0E4A1A;

  /* Formerly the MK-Africa red palette. Repointed to warm clay/amber across the
     site (user direction). All ~60 existing call-sites pick the new values up
     automatically. The variable names are kept for backwards-compatibility. */
  --red-50:     #FFF1E1;
  --red-100:    #FFD9B5;
  --red-500:    #D2691E;  /* burnt amber — primary "warm" accent */
  --red-600:    #B8541A;
  --red-700:    #8C3E11;

  --ink:        #0F0F0F;
  --ink-soft:   #1F1F1F;
  --ink-700:    #2E2E2E;
  --ink-500:    #4A4A4A;
  --slate-700:  #555555;
  --slate-500:  #777777;
  --slate-400:  #A6A6A6;
  --slate-200:  #DEDEDE;
  --line:       #ECE7DA;
  --line-soft:  #F6F1E6;
  --mist:       #E7E2D6;   /* image-placeholder grey; MUST stay defined — many `background: var(--mist) center/cover` shorthands silently break if it's missing */

  --cream-50:   #FBF8F2;
  --cream-100:  #F4EFE3;
  --paper:      #FFFFFF;

  /* ---------- Type ---------- */
  --f-display: 'Grift', 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-sans:    'Grift', 'DM Sans', system-ui, -apple-system, sans-serif;
  --f-hand:    'Caveat', cursive;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Radii ---------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl:44px;

  /* ---------- Shadows / depth ---------- */
  --sh-1: 0 1px 2px rgba(15,15,15,.04), 0 1px 1px rgba(15,15,15,.03);
  --sh-2: 0 12px 32px -12px rgba(15,15,15,.14);
  --sh-3: 0 28px 60px -22px rgba(15,15,15,.22);
  --glow-green: 0 24px 60px -22px rgba(79,181,73,.55);
  --glow-red:   0 24px 60px -22px rgba(230,57,70,.45);
  --ring-green: 0 0 0 4px rgba(79,181,73,.18);

  --space-section: 90px;

  /* Header dimensions — used by the hero to fit the viewport exactly */
  --announce-h: 38px;
  --nav-h: 70px;
  --header-h: calc(var(--announce-h) + var(--nav-h));

  /* Easing */
  --ease-soft:   cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(.33, 1, .68, 1);
  --ease-bounce: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 100, 'opsz' 32;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: clamp(3rem, 5.5vw + 1rem, 6.2rem); font-variation-settings: 'wdth' 100, 'opsz' 96; line-height: .96; letter-spacing: -.04em; }
h2 { font-size: clamp(2.2rem, 3vw + 1rem, 3.6rem); letter-spacing: -.03em; }
h3 { font-size: 1.5rem; line-height: 1.15; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--f-sans); letter-spacing: -.01em; }
p  { margin: 0 0 1rem; }

::selection { background: var(--green-500); color: var(--ink); }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .wrap, .wrap-narrow { padding: 0 22px; } }

/* ---------- Atoms ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6;
}

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
}
.tag.green  { background: var(--green-500); color: var(--ink); border-color: var(--green-600); }
.tag.green-soft { background: var(--green-50); color: var(--green-800); border-color: var(--green-100); }
.tag.red    { background: var(--red-500); color: #fff; border-color: var(--red-600); }
.tag.red-soft { background: var(--red-50); color: var(--red-700); border-color: var(--red-100); }
.tag.dark   { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.tag.glass  { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(10px); }

/* Accent — handwritten Caveat in brand green, NO underline */
.accent {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  color: var(--green-700);
  font-size: 1.18em;
  line-height: .9;
  letter-spacing: 0;
  padding: 0 .04em;
  display: inline-block;
  background: none;
}
.accent.red, .accent.fill.red, .italic.red { color: var(--red-600); }
.accent.green { color: var(--green-700); }
.accent.fill { background: none; }

/* .italic accent — Caveat handwriting */
.italic {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  color: var(--green-700);
  font-size: 1.18em;
  line-height: .9;
  padding: 0 .04em;
  display: inline-block;
}

/* Hand-only used VERY rarely */
.hand { font-family: var(--f-hand); font-weight: 700; font-size: 1.15em; line-height: .9; display: inline-block; color: var(--green-700); }
.hand.red { color: var(--red-600); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--f-sans); font-weight: 600; font-size: 15px;
  background: var(--ink); color: var(--cream-50);
  border: 1px solid var(--ink);
  transition: transform .25s var(--ease-soft), box-shadow .3s var(--ease-soft), background .2s;
  position: relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(15,15,15,.4); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green-500); color: var(--ink); border-color: var(--green-600);
}
.btn-primary:hover { background: var(--green-600); box-shadow: var(--glow-green); }

.btn-red {
  background: var(--red-500); color: #fff; border-color: var(--red-600);
}
.btn-red:hover { background: var(--red-600); box-shadow: var(--glow-red); }

.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream-50); }

.btn-glass {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,.18); border-color: #fff; }

.btn-link {
  background: transparent; border: 0; color: var(--ink);
  padding: 10px 0; font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.btn-link .arrow { display: inline-block; transition: transform .3s var(--ease-bounce); }
.btn-link:hover .arrow { transform: translateX(4px); }
.btn-link::after {
  content: ""; position: absolute; left: 0; right: 22px; bottom: 4px; height: 1.5px;
  background: var(--green-500); transform-origin: left;
  transform: scaleX(0); transition: transform .35s var(--ease-soft);
}
.btn-link:hover::after { transform: scaleX(1); }
.btn-link:hover { box-shadow: none; transform: none; }
.btn-link.on-dark { color: var(--cream-50); }
.btn-link.on-dark::after { background: var(--green-500); }

/* ============================================================
   NAV v7 — announcement strip + floating glass-pill nav
   ============================================================ */

/* Top announcement strip — bulletproof single line, strict height */
.nav-announce {
  background: var(--ink);
  color: var(--cream-50);
  font-family: var(--f-sans); font-size: 13px;
  position: relative; z-index: 60;
  height: var(--announce-h);
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
}
.nav-announce::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(79,181,73,.18) 0%, transparent 55%, rgba(230,57,70,.12) 100%);
  pointer-events: none;
}
.nav-announce .wrap {
  position: relative;
  height: 100%;
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  padding-top: 0; padding-bottom: 0;
  box-sizing: border-box;
}
.nav-announce .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500); box-shadow: 0 0 0 4px rgba(79,181,73,.2);
  animation: pulse 2s infinite;
  flex-shrink: 0;
  display: inline-block;
}
.nav-announce .msg {
  color: rgba(255,255,255,.88);
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  display: inline-block;
}
.nav-announce .msg strong { color: var(--green-500); font-weight: 600; }
.nav-announce .cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; border-radius: 999px;
  font-weight: 600; font-size: 12.5px; color: var(--cream-50);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0; line-height: 1;
}
.nav-announce .cta:hover { background: var(--green-500); color: var(--ink); border-color: var(--green-500); }
.nav-announce .cta .arrow { transition: transform .25s var(--ease-bounce); }
.nav-announce .cta:hover .arrow { transform: translateX(3px); }
.nav-announce .dismiss {
  flex-shrink: 0;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,.5);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
  line-height: 1; padding: 0;
}
.nav-announce .dismiss:hover { color: var(--cream-50); background: rgba(255,255,255,.08); }
.nav-announce.hidden { display: none; }
body.no-announce { --announce-h: 0px; }

@media (max-width: 700px) {
  .nav-announce { font-size: 12.5px; }
  .nav-announce .cta { font-size: 12px; padding: 0 10px; }
}
@media (max-width: 500px) {
  .nav-announce .dismiss { display: none; }
}

/* Main floating nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background .3s, backdrop-filter .3s;
}
.nav.scrolled {
  background: rgba(251, 248, 242, .65);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.nav-float { height: var(--nav-h); }
.nav-float .nav-inner {
  height: 100%;
  padding: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
.nav-logo {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.08);
  transition: transform .25s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.nav-logo:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.18); }
.nav-logo img { height: 30px; width: auto; display: block; }
/* The 10th-anniversary logo is busier + a taller aspect, so give it a little more height
   and trim the pill padding so the overall nav height barely changes. */
.nav-logo-anniv { padding: 3px 12px; }
.nav-logo-anniv img { height: 40px; }
@media (max-width: 600px) { .nav-logo-anniv img { height: 34px; } }

/* The glass pill */
.nav-pill {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav-pill-item {
  position: relative;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--f-sans); font-weight: 500; font-size: 14px;
  color: var(--slate-700);
  transition: color .2s, background .2s;
}
.nav-pill-item:hover { color: var(--ink); background: rgba(255,255,255,.5); }
.nav-pill-item.active {
  color: var(--ink); background: var(--ink); color: var(--cream-50);
  box-shadow: 0 4px 12px -4px rgba(15,15,15,.35);
}
.nav-pill-sep { width: 1px; height: 14px; background: rgba(0,0,0,.08); }

/* Nav dropdowns */
.nav-has-drop { cursor: default; display: inline-flex; align-items: center; gap: 4px; outline: none; }
.nav-has-drop .nav-caret { opacity: .55; transition: transform .2s ease, opacity .2s; }
.nav-has-drop:hover .nav-caret,
.nav-has-drop:focus-within .nav-caret { opacity: 1; transform: translateY(1px); }
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -22px rgba(15,15,15,.22), 0 6px 16px -8px rgba(15,15,15,.08);
  padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .22s var(--ease-soft), visibility .18s;
  z-index: 50;
}
.nav-drop::before {
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
.nav-drop::after {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--paper);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-top-left-radius: 3px;
}
.nav-has-drop:hover > .nav-drop,
.nav-has-drop:focus-within > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-inner { display: flex; flex-direction: column; gap: 2px; }
.nav-drop-item {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: var(--f-sans);
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease;
}
.nav-drop-item:hover { background: var(--cream-100); }
.nav-drop-item .ndi-label { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; }
.nav-drop-item .ndi-sub   { display: block; font-size: 12.5px; color: var(--slate-500); margin-top: 3px; line-height: 1.35; }

/* Mobile menu groups */
.mm-group { padding: 4px 0 8px; }
.mm-group-label {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-500); padding: 16px 32px 6px;
}

/* Right CTA cluster */
.nav-cta { display: inline-flex; align-items: center; gap: 12px; }
.nav-text {
  font-family: var(--f-sans); font-weight: 500; font-size: 14px;
  color: var(--slate-700);
  padding: 8px 4px;
  transition: color .15s;
}
.nav-text:hover { color: var(--ink); }
.nav-apply {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 6px 10px 22px;
  border-radius: 999px;
  background: var(--green-500); color: var(--ink);
  font-family: var(--f-sans); font-weight: 600; font-size: 14px;
  border: 1px solid var(--green-600);
  transition: transform .25s var(--ease-soft), box-shadow .3s var(--ease-soft), background .2s;
}
.nav-apply .dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--green-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
  position: relative;
}
.nav-apply .dot::after {
  content: "→"; font-size: 13px; font-weight: 600;
}
.nav-apply:hover { background: var(--green-600); transform: translateY(-2px); box-shadow: var(--glow-green); }

/* Mobile toggle (3-line burger) */
.nav-toggle {
  display: none; width: 42px; height: 42px;
  border-radius: 12px; background: var(--paper);
  border: 1px solid var(--line);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 999px; }
.nav-toggle:hover { background: var(--green-50); }

@media (max-width: 960px) {
  .nav-pill { display: none; }
  .nav-cta .nav-text, .nav-cta .user-menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-float .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-cta { justify-self: end; }
}

.mobile-menu { display: none; padding: 12px 0 18px; border-top: 1px solid var(--line); background: var(--paper); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 32px; font-weight: 500; color: var(--slate-700); }
.mobile-menu a:hover { background: var(--green-50); color: var(--green-800); }

/* ============================================================
   HERO SLIDER — sleek, auto-advancing, Ken-Burns
   ============================================================ */
.hero-slider {
  position: relative;
  height: 92vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--ink);
}
.slides {
  position: absolute; inset: 0;
}
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
  pointer-events: none;
  will-change: opacity;
}
.slide.active { opacity: 1; pointer-events: auto; z-index: 2; }
.slide .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 8s linear;
}
.slide.active .bg { transform: scale(1.18); }    /* Ken Burns zoom */
.slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,15,15,.1) 0%, rgba(15,15,15,.25) 45%, rgba(15,15,15,.85) 100%),
    linear-gradient(95deg, rgba(15,15,15,.65) 0%, rgba(15,15,15,.2) 55%, transparent 100%);
  z-index: 1;
}

/* Slide content */
.slide-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 0 110px;
  z-index: 2;
  color: var(--cream-50);
}
@media (max-width: 700px) { .slide-body { padding: 0 0 130px; } }
.slide-eyebrow {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green-300);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .9s .2s var(--ease-soft), transform .9s .2s var(--ease-soft);
}
.slide-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.slide.active .slide-eyebrow { opacity: 1; transform: none; }

.slide-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw + 1rem, 6rem);
  line-height: .98; letter-spacing: -.035em;
  color: var(--cream-50);
  max-width: 1000px;
  margin: 0 0 26px;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s .35s var(--ease-soft), transform 1s .35s var(--ease-soft);
}
.slide.active .slide-title { opacity: 1; transform: none; }
.slide-title .em { color: var(--green-500); }
.slide-title .red { color: var(--red-500); }

.slide-lead {
  font-size: 1.15rem; line-height: 1.55; color: rgba(255,255,255,.78);
  max-width: 600px; margin: 0 0 36px;
  opacity: 0; transform: translateY(15px);
  transition: opacity 1s .55s var(--ease-soft), transform 1s .55s var(--ease-soft);
}
.slide.active .slide-lead { opacity: 1; transform: none; }

.slide-cta {
  display: flex; gap: 16px; flex-wrap: wrap;
  opacity: 0; transform: translateY(15px);
  transition: opacity 1s .7s var(--ease-soft), transform 1s .7s var(--ease-soft);
}
.slide.active .slide-cta { opacity: 1; transform: none; }

/* Slider navigation (numbered + progress) */
.slider-nav {
  position: absolute; left: 0; right: 0; bottom: 36px;
  z-index: 5;
}
.slider-nav .wrap { display: flex; gap: 28px; align-items: center; }
.slide-dot {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 8px 0; min-width: 60px;
  transition: color .25s;
  position: relative;
}
.slide-dot:hover { color: rgba(255,255,255,.85); }
.slide-dot.on { color: var(--cream-50); }
.slide-dot .num { font-size: 14px; }
.slide-dot .bar {
  height: 2px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; width: 100%;
}
.slide-dot .bar > i {
  display: block; height: 100%; width: 0; background: var(--green-500); border-radius: inherit;
  transition: width .15s linear;
}
.slide-dot.on .bar > i { width: var(--p, 0%); }

.slider-arrows {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 5;
}
@media (max-width: 800px) { .slider-arrows { display: none; } }
.slider-arrows button {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  color: #fff; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); transition: background .2s, transform .2s, border-color .2s;
}
.slider-arrows button:hover { background: var(--green-500); color: var(--ink); border-color: var(--green-500); transform: scale(1.06); }

/* Floating slider stats panel */
.slider-stats {
  position: absolute; right: 32px; top: 32px; z-index: 4;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width: 280px;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .8s .8s var(--ease-soft), transform .8s .8s var(--ease-soft);
}
.slide.active ~ .slider-stats,
.hero-slider:has(.slide.active) .slider-stats { opacity: 1; transform: none; }
.slider-stats .cell {
  background: rgba(15,15,15,.45);
  padding: 18px 20px; color: #fff;
}
.slider-stats .lbl { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.slider-stats .val { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; }
.slider-stats .val .accent-dot { color: var(--green-500); }
@media (max-width: 800px) { .slider-stats { display: none; } }

/* ============================================================
   PAGINATION (Laravel paginator → vendor.pagination.mlbt)
   ============================================================ */
.pgnav {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 40px; flex-wrap: wrap;
}
.pgnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 38px; height: 38px; padding: 0 14px;
  border-radius: 999px;
  font-family: var(--f-sans); font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
  justify-content: center;
}
.pgnav-link:hover:not(.is-disabled):not(.is-current) {
  border-color: var(--green-500); color: var(--green-800); background: var(--green-50);
}
.pgnav-link.is-current {
  background: var(--ink); color: var(--cream-50); border-color: var(--ink);
}
.pgnav-link.is-disabled { opacity: .35; cursor: not-allowed; }
.pgnav-pages { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pgnav-dots { color: var(--slate-400); padding: 0 4px; font-weight: 600; }

/* ============================================================
   COMMUNITY message role pills + delete button
   ============================================================ */
.role-pill {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em;
  padding: 1px 6px; border-radius: 4px;
  margin-left: 6px; display: inline-block;
}
.role-pill.owner  { color: #fff; background: var(--ink); }
.role-pill.mod    { color: var(--cream-50); background: var(--green-700); }
.role-pill.mentor { color: var(--green-800); background: var(--green-50); border: 1px solid var(--green-100); }
.msg-del {
  position: absolute; top: -6px; right: -6px;
  opacity: 0; transition: opacity .15s;
  margin: 0;
}
.msg:hover .msg-del { opacity: 1; }
.msg-del button {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--slate-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.msg-del button:hover { background: var(--red-50); color: var(--red-700); border-color: var(--red-500); }

/* ============================================================
   MISSION (manifesto)
   ============================================================ */
.mission {
  padding: 130px 0; position: relative; overflow: hidden;
}
.mission::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 50% 50% at 15% 30%, rgba(79,181,73,.16), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 70%, rgba(230,57,70,.10), transparent 60%);
  filter: blur(40px); z-index: -1;
}
.mission .manifesto {
  max-width: 1000px;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3.6rem);
  line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink);
}
.mission .manifesto .em { color: var(--green-700); }
.mission .manifesto .em-red { color: var(--red-600); }
.mission .manifesto .muted { color: var(--slate-400); }

/* ============================================================
   STATS row
   ============================================================ */
.stats {
  padding: 70px 0;
  background: var(--ink); color: var(--cream-50);
  position: relative; overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 92% 50%, rgba(79,181,73,.16), transparent 60%),
    radial-gradient(ellipse 30% 60% at 8% 50%, rgba(230,57,70,.10), transparent 60%);
  pointer-events: none;
}
.stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.stats .grid > div + div { border-left: 1px solid rgba(255,255,255,.10); }
.stats .stat { padding: 0 28px; }
.stats .num { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1; color: var(--cream-50); letter-spacing: -.04em; font-variation-settings: 'wdth' 100, 'opsz' 96; }
.stats .num .plus { color: var(--green-500); }
.stats .lab { color: rgba(255,255,255,.62); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin-top: 12px; font-weight: 500; }
@media (max-width: 800px) {
  .stats .grid { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .stats .grid > div { border-left: 0 !important; }
  .stats .grid > div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.10) !important; }
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: var(--space-section) 0; position: relative; }
@media (max-width: 700px) { .section { padding: 90px 0; } }
.section.tight { padding: 80px 0; }
.section.green-tint { background: var(--green-50); }
.section.cream { background: var(--cream-100); }
.section.dark { background: var(--ink); color: var(--cream-50); }
.section.dark h1, .section.dark h2, .section.dark h3 { color: var(--cream-50); }

.section-head { max-width: 780px; margin: 0 auto 50px; text-align: center; }
.section-head.left { margin: 0 0 50px; text-align: left; max-width: 920px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { color: var(--slate-500); font-size: 1.05rem; margin-top: 18px; line-height: 1.6; }

/* ============================================================
   How it works — 3 numbered steps
   ============================================================ */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative;
}
@media (max-width: 960px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 36px 32px 32px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .25s;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 360px;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }
.step .num {
  font-family: var(--f-display); font-weight: 700;
  font-size: 2.4rem; line-height: 1; color: var(--green-500); letter-spacing: -.04em;
}
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.08; letter-spacing: -.02em; }
.step p  { color: var(--slate-500); font-size: 14.5px; line-height: 1.6; margin: 0; }
.step .step-link { margin-top: auto; color: var(--ink); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.step .step-link:hover { color: var(--green-700); }
.step .step-link .arrow { transition: transform .3s var(--ease-bounce); }
.step:hover .step-link .arrow { transform: translateX(6px); }

.step.dark { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.step.dark h3 { color: var(--cream-50); }
.step.dark p { color: rgba(255,255,255,.7); }
.step.dark .step-link { color: var(--cream-50); }
.step.dark:hover { box-shadow: 0 30px 70px -20px rgba(79,181,73,.45); }
.step.dark .num { color: var(--green-500); }

.step.red { background: var(--red-500); color: #fff; border-color: var(--red-500); }
.step.red h3 { color: #fff; }
.step.red p { color: rgba(255,255,255,.86); }
.step.red .step-link { color: #fff; }
.step.red .num { color: rgba(255,255,255,.7); }
.step.red:hover { box-shadow: var(--glow-red); }

/* ============================================================
   Split sections (academy / community)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.split.reverse { grid-template-columns: 1.1fr 1fr; }
.split.reverse .split-vis { order: -1; }
@media (max-width: 960px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 50px; } .split.reverse .split-vis { order: 0; } }

.feats { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 4px; }
.feats li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.feats li:first-child { padding-top: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.feats .fi { width: 36px; height: 36px; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.feats h4 { font-family: var(--f-sans); font-weight: 600; font-size: 15.5px; margin: 4px 0 6px; color: var(--ink); }
.feats p  { font-size: 14px; color: var(--slate-500); margin: 0; line-height: 1.55; }

/* ============================================================
   FRAME (LMS preview)
   ============================================================ */
.frame {
  position: relative; border-radius: var(--r-lg);
  background: var(--paper); padding: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
}
.frame-head { display: flex; align-items: center; gap: 8px; padding: 0 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.frame-head .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--slate-200); }
.frame-head .dot.r { background: #FF7B72; }
.frame-head .dot.y { background: #FFC93C; }
.frame-head .dot.g { background: var(--green-500); }
.frame-head .ttl { margin-left: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); }

.row-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.row-item:last-child { border-bottom: 0; }
.row-item .ri { width: 84px; height: 60px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.row-item h5 { font-family: var(--f-sans); font-weight: 600; font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.row-item .meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--slate-500); }
.row-item .prog { width: 100%; height: 5px; border-radius: 999px; background: var(--line); margin-top: 8px; overflow: hidden; }
.row-item .prog > i { display: block; height: 100%; background: var(--green-500); border-radius: inherit; }
.row-item .pct { font-family: var(--f-mono); font-size: 14px; font-weight: 700; color: var(--green-700); }

/* ============================================================
   CHAT preview
   ============================================================ */
.chat { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden; }
.chat-grid { display: grid; grid-template-columns: 220px 1fr; min-height: 480px; }
@media (max-width: 700px) { .chat-grid { grid-template-columns: 1fr; } .chat-side { display: none; } }
.chat-side { background: var(--ink); color: var(--cream-50); padding: 22px 16px; }
.chat-side .ws { font-family: var(--f-display); font-weight: 700; font-size: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; color: #fff; }
.chat-side .ws .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.chat-side .ch { font-family: var(--f-mono); font-size: 13px; padding: 7px 10px; border-radius: 6px; color: var(--slate-400); cursor: pointer; transition: background .15s, color .15s; }
.chat-side .ch.active { background: var(--green-500); color: var(--ink); font-weight: 600; }
.chat-side .ch:hover:not(.active) { background: rgba(255,255,255,.06); color: var(--cream-50); }
.chat-side .sec-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.4); margin: 18px 0 6px; font-weight: 600; }

.chat-main { padding: 22px 26px; display: flex; flex-direction: column; }
.chat-main .topic { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.chat-main .topic strong { font-family: var(--f-mono); font-size: 14.5px; color: var(--ink); }
.chat-main .topic span { color: var(--slate-500); font-size: 13px; }
.msg { display: grid; grid-template-columns: 38px 1fr; gap: 12px; margin-bottom: 14px; }
.msg .av { width: 38px; height: 38px; border-radius: 10px; background: var(--green-500); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; font-size: 13px; }
.msg .av.r { background: var(--red-500); color: #fff; }
.msg .av.d { background: var(--ink); color: var(--green-500); }
.msg .who { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.msg .ts  { font-size: 11.5px; color: var(--slate-400); margin-left: 8px; font-weight: 400; }
.msg .body { font-size: 14.5px; color: var(--slate-700); line-height: 1.55; }
.msg .reacts { margin-top: 6px; display: flex; gap: 6px; }
.msg .reacts span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }

.chat-input { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.chat-input .box { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--f-sans); font-size: 13.5px; color: var(--slate-500); background: var(--cream-50); }
.typing { font-size: 12px; color: var(--slate-400); margin-bottom: 6px; font-style: italic; }
.typing .blink { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); margin-left: 4px; animation: pulse 1s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(79,181,73,.4); }
  50%     { box-shadow: 0 0 0 8px rgba(79,181,73,0); }
}

/* ============================================================
   WINNERS — editorial 1+2
   ============================================================ */
.winners { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
@media (max-width: 800px) { .winners { grid-template-columns: 1fr; } }
.win-feature, .win-mini {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background-color: var(--ink); border: 1px solid var(--line);
  transition: transform .4s var(--ease-soft), box-shadow .35s;
}
.win-feature { aspect-ratio: 5/4; }
.win-mini    { aspect-ratio: 4/3; }
.win-feature:hover, .win-mini:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.win-feature .img, .win-mini .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .8s var(--ease-soft);
}
.win-feature:hover .img, .win-mini:hover .img { transform: scale(1.06); }
.win-feature::after, .win-mini::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,.95) 0%, rgba(15,15,15,.35) 50%, transparent 80%);
}
.win-feature .body, .win-mini .body { position: absolute; inset: auto 0 0 0; padding: 28px 32px; color: var(--cream-50); }
.win-feature h3 { font-family: var(--f-display); font-size: 2.2rem; font-weight: 700; color: var(--cream-50); margin: 0 0 6px; line-height: 1.04; letter-spacing: -.02em; }
.win-mini h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; color: var(--cream-50); margin: 0 0 4px; line-height: 1.1; }
.win-feature .uni, .win-mini .uni { font-size: 13.5px; color: rgba(255,255,255,.78); }
.win-feature .proj, .win-mini .proj { font-family: var(--f-display); font-style: italic; color: var(--green-300); margin-top: 10px; font-weight: 500; }
.win-feature .proj { font-size: 1.15rem; }
.win-mini .proj { font-size: 1rem; }
.win-feature .tag, .win-mini .tag { position: absolute; top: 22px; left: 22px; }
.win-stack { display: grid; gap: 24px; }

/* ============================================================
   STORY (Maathai)
   ============================================================ */
.story {
  background: var(--ink); color: var(--cream-50);
  border-radius: var(--r-2xl); padding: 90px 60px;
  position: relative; overflow: hidden;
}
@media (max-width: 700px) { .story { padding: 60px 28px; border-radius: var(--r-lg); } }
.story::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 10% 20%, rgba(79,181,73,.18), transparent 60%),
    radial-gradient(ellipse 40% 50% at 90% 90%, rgba(230,57,70,.10), transparent 65%);
  pointer-events: none;
}
.story-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; position: relative; }
@media (max-width: 800px) { .story-grid { grid-template-columns: 1fr; } }
.story blockquote {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 2vw + .9rem, 2.8rem);
  line-height: 1.15; margin: 0; color: var(--cream-50);
  letter-spacing: -.02em;
}
.story blockquote .h { color: var(--green-500); font-style: italic; font-weight: 500; }
.story cite { font-style: normal; display: block; margin-top: 28px; font-family: var(--f-mono); font-size: 12px; color: var(--green-300); letter-spacing: .12em; text-transform: uppercase; }
.story-meta { margin-top: 32px; color: rgba(255,255,255,.7); max-width: 540px; font-size: 15px; line-height: 1.7; }
.story-img {
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  background-size: cover; background-position: center;
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255,255,255,.08);
}

/* ============================================================
   ADVISORS — clean editorial grid
   ============================================================ */
.advisors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 800px) { .advisors { grid-template-columns: repeat(2, 1fr); } }
.advisor { padding: 28px 24px; background: var(--paper); transition: background .25s; }
.advisor:hover { background: var(--green-50); }
.advisor .av {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 16px;
  margin-bottom: 18px;
}
.advisor:nth-child(4n+2) .av { background: linear-gradient(135deg, var(--red-600), var(--red-500)); }
.advisor:nth-child(4n+3) .av { background: var(--ink); color: var(--green-500); }
.advisor .av.av-photo {
  background-size: cover; background-position: center top;
  background-repeat: no-repeat;
  width: 64px; height: 64px; border-radius: 14px;
  color: transparent;
  box-shadow: 0 6px 18px -8px rgba(15,15,15,.3);
}
.advisor h5 { font-family: var(--f-sans); font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.advisor .role { font-size: 12.5px; color: var(--slate-500); line-height: 1.5; }
.advisor .org { font-size: 11.5px; color: var(--slate-400); margin-top: 4px; font-family: var(--f-mono); letter-spacing: .02em; }

/* ============================================================
   PARTNERS marquee
   ============================================================ */
.partners {
  padding: 70px 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden;
}
.partners .lbl {
  text-align: center; font-family: var(--f-mono); font-size: 12px; color: var(--slate-500);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 36px; font-weight: 500;
}
.marquee { display: flex; gap: 80px; align-items: center; animation: scroll 32s linear infinite; width: max-content; }
.marquee:hover { animation-play-state: paused; }
.marquee img { height: 46px; width: auto; filter: grayscale(1); opacity: .58; transition: filter .3s, opacity .3s; }
.marquee img:hover { filter: grayscale(0); opacity: 1; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SDG list
   ============================================================ */
.sdg-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px;
}
.sdg-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink);
  transition: transform .2s, border-color .2s, box-shadow .25s;
}
.sdg-pill:hover { transform: translateY(-2px); border-color: var(--green-500); box-shadow: 0 12px 28px -14px rgba(79,181,73,.4); }
.sdg-pill .n {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 16px; color: #fff;
  flex-shrink: 0;
}
.sdg-pill .n.dark { color: var(--ink); }
.sdg-pill .t { font-size: 13.5px; font-weight: 500; line-height: 1.25; }

/* ============================================================
   CTA
   ============================================================ */
.cta-block {
  background: var(--ink); color: var(--cream-50);
  border-radius: var(--r-2xl);
  padding: 100px 60px; text-align: center;
  position: relative; overflow: hidden;
}
@media (max-width: 700px) { .cta-block { padding: 70px 28px; border-radius: var(--r-lg); } }
.cta-block::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 35% 45% at 18% 30%, rgba(79,181,73,.35), transparent 60%),
    radial-gradient(ellipse 30% 45% at 85% 80%, rgba(230,57,70,.20), transparent 60%);
  pointer-events: none;
}
.cta-block h2 {
  font-family: var(--f-display); font-weight: 700; color: var(--cream-50);
  font-size: clamp(2.4rem, 4vw + 1rem, 4.4rem); line-height: 1; position: relative; letter-spacing: -.035em;
}
.cta-block h2 .h { color: var(--green-500); font-style: italic; }
.cta-block p { color: rgba(255,255,255,.78); max-width: 560px; margin: 24px auto 36px; font-size: 1.1rem; position: relative; }
.cta-block .btn { position: relative; }

/* ============================================================
   Footer
   ============================================================ */
footer { background: var(--ink); color: var(--cream-50); padding: 100px 0 40px; }
footer h6 { font-family: var(--f-display); font-weight: 700; font-size: 13.5px; color: var(--cream-50); letter-spacing: .04em; margin: 0 0 22px; }
footer a { display: block; padding: 5px 0; font-size: 14.5px; color: rgba(255,255,255,.62); transition: color .15s; }
footer a:hover { color: var(--green-500); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; gap: 50px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.10); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
.foot-brand .logo { background: var(--cream-50); display: inline-block; padding: 10px 16px; border-radius: 12px; margin-bottom: 20px; }
.foot-brand .logo img { height: 30px; }
.foot-brand p { color: rgba(255,255,255,.6); font-size: 14.5px; max-width: 320px; line-height: 1.65; }
.foot-social { display: flex; gap: 8px; margin-top: 20px; }
.foot-social a { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--cream-50); transition: all .2s; }
.foot-social a:hover { background: var(--green-500); color: var(--ink); transform: translateY(-2px); }
.foot-bot { padding-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.42); }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .12s; }
.reveal.delay-2 { transition-delay: .24s; }
.reveal.delay-3 { transition-delay: .36s; }

/* ============================================================
   Interior pages — shared partials
   ============================================================ */
.page-hero {
  position: relative; padding: 80px 0 80px; overflow: hidden;
  background: var(--cream-50);
}
.page-hero::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 50% 50% at 18% 30%, rgba(79,181,73,.18), transparent 60%),
    radial-gradient(ellipse 40% 40% at 82% 80%, rgba(230,57,70,.10), transparent 60%);
  filter: blur(40px); z-index: -1;
}
.page-hero h1 { font-size: clamp(2.4rem, 3.5vw + 1rem, 4rem); max-width: 820px; }
.page-hero p.lead { font-size: 1.1rem; color: var(--slate-700); max-width: 640px; margin: 22px 0 0; line-height: 1.65; }
.page-hero .crumbs { font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); margin-bottom: 20px; letter-spacing: .02em; }
.page-hero .crumbs a { color: var(--green-700); font-weight: 500; }
.page-hero .crumbs a:hover { color: var(--green-800); }

/* Course grid */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .course-grid { grid-template-columns: 1fr; } }
.course {
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .3s, border-color .25s;
}
.course:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.course .cimg { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.course .cbody { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.course .ctags { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.course h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 10px; line-height: 1.1; }
.course .cdesc { color: var(--slate-500); font-size: 14px; flex: 1; line-height: 1.55; }
.course .cmeta { display: flex; gap: 14px; font-size: 12.5px; color: var(--slate-500); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; }
.filters .chip {
  padding: 9px 16px; border-radius: 999px; font-family: var(--f-sans); font-weight: 500; font-size: 13.5px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; transition: all .2s;
}
.filters .chip:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-800); }
.filters .chip.on { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.filters .label { font-size: 12.5px; color: var(--slate-500); margin-right: 4px; font-weight: 500; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 880px) { .form-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--paper); padding: 40px; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.field { margin-bottom: 20px; }
.field label { display: block; font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line); font-family: var(--f-sans); font-size: 15px;
  background: var(--cream-50); color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-500); background: var(--paper);
  box-shadow: var(--ring-green);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field .hint { font-size: 12px; color: var(--slate-500); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 500px) { .field-row { grid-template-columns: 1fr; } }
.success { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-800); padding: 14px 18px; border-radius: 10px; font-weight: 500; margin-bottom: 18px; font-size: 14.5px; }
.error-list { background: var(--red-50); border: 1px solid var(--red-100); color: var(--red-700); padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }

/* Channel list */
.ch-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .ch-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .ch-list { grid-template-columns: 1fr; } }
.ch-tile { background: var(--paper); border: 1px solid var(--line); padding: 20px 22px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 4px; transition: all .2s; }
.ch-tile:hover { transform: translateY(-2px); border-color: var(--green-500); box-shadow: var(--sh-2); }
.ch-tile .name { font-family: var(--f-mono); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ch-tile .desc { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.ch-tile .mem { font-size: 12px; color: var(--green-700); font-weight: 600; margin-top: 6px; }

/* Timeline */
.timeline { position: relative; padding-left: 32px; margin-top: 40px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--green-500), var(--red-500)); border-radius: 999px; }
.tl { position: relative; padding-bottom: 36px; }
.tl::before { content: ""; position: absolute; left: -28px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--green-500); }
.tl .year { font-family: var(--f-display); font-weight: 700; font-size: 1.8rem; color: var(--green-700); line-height: 1; }
.tl h4 { font-family: var(--f-sans); font-weight: 600; font-size: 1.05rem; margin: 6px 0 6px; color: var(--ink); }
.tl p { color: var(--slate-500); margin: 0; font-size: 14.5px; line-height: 1.6; }

/* User menu */
.user-menu { position: relative; }
.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  font-weight: 500; font-size: 13.5px; color: var(--ink);
  transition: all .2s;
}
.user-chip:hover { border-color: var(--green-500); }
.user-chip .ua { width: 30px; height: 30px; border-radius: 50%; background: var(--green-500); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; font-size: 12px; }
.user-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--paper); border-radius: 14px; padding: 8px; border: 1px solid var(--line); box-shadow: var(--sh-3); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60; }
.user-menu:hover .user-pop, .user-chip[aria-expanded="true"] + .user-pop { opacity: 1; transform: none; pointer-events: auto; }
.user-pop a, .user-pop button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--slate-700); font-weight: 500; }
.user-pop a:hover, .user-pop button:hover { background: var(--green-50); color: var(--green-800); }
.user-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

/* ============================================================
   DASHBOARD v2 — visual + interactive
   ============================================================ */

/* Hero greeting band */
.dh {
  padding: 50px 0 30px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 92% 10%, rgba(230,57,70,.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 8% 100%, rgba(79,181,73,.18), transparent 60%),
    var(--cream-50);
  border-bottom: 1px solid var(--line);
}
.dh-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.dh-hello { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 2.4vw + 1rem, 2.8rem); line-height: 1; letter-spacing: -.025em; color: var(--ink); }
.dh-hello .wave { display: inline-block; animation: wave 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
.dh-sub { color: var(--slate-700); font-size: 1rem; margin-top: 10px; }
.dh-sub strong { color: var(--green-700); font-weight: 700; }

.dh-streak {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 999px;
  background: var(--ink); color: var(--cream-50);
  box-shadow: 0 16px 32px -16px rgba(15,15,15,.4);
}
.dh-streak .flame {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red-500), #FF8550);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.dh-streak .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.dh-streak .val { font-family: var(--f-display); font-weight: 700; font-size: 16px; }

/* Stat hero row */
.dh-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 800px) { .dh-stats { grid-template-columns: repeat(2, 1fr); } }
.dh-stat {
  position: relative; overflow: hidden;
  padding: 24px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .25s;
}
.dh-stat:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.dh-stat .ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 16px;
  background: var(--green-50); color: var(--green-700);
}
.dh-stat .num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 3vw + .5rem, 3.2rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.dh-stat .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin-top: 8px; }
.dh-stat .delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--green-700); margin-top: 6px; font-weight: 600; }

.dh-stat.dark { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.dh-stat.dark .num { color: var(--cream-50); }
.dh-stat.dark .lbl { color: rgba(255,255,255,.55); }
.dh-stat.dark .ic { background: rgba(255,255,255,.08); color: var(--green-500); }
.dh-stat.green { background: var(--green-500); border-color: var(--green-500); }
.dh-stat.green .num { color: var(--ink); }
.dh-stat.green .lbl { color: rgba(0,0,0,.55); }
.dh-stat.green .ic { background: rgba(0,0,0,.1); color: var(--ink); }
.dh-stat.red { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.dh-stat.red .num { color: #fff; }
.dh-stat.red .lbl { color: rgba(255,255,255,.65); }
.dh-stat.red .ic { background: rgba(255,255,255,.15); color: #fff; }

/* Section nav (tabs) */
.dh-tabs {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: calc(var(--header-h) + 0px); z-index: 30;
}
.dh-tabs.no-stick { position: static; }
.dh-tabs-inner { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0; }
.dh-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 18px 18px; white-space: nowrap;
  font-family: var(--f-sans); font-weight: 500; font-size: 14px; color: var(--slate-500);
  border: 0; background: transparent; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .2s, border-color .2s;
  text-decoration: none;
}
.dh-tab:hover { color: var(--ink); }
.dh-tab.on { color: var(--ink); border-bottom-color: var(--green-500); font-weight: 600; }
.dh-tab .icon { opacity: .7; stroke: currentColor; }
.dh-tab.on .icon { opacity: 1; color: var(--green-700); }

/* Stat-icon palette so SVGs sit nicely in the dh-stat tiles */
.dh-stat .ic { background: var(--green-50); color: var(--green-700); }
.dh-stat.dark .ic { background: rgba(255,255,255,.08); color: var(--green-500); }
.dh-stat.green .ic { background: rgba(0,0,0,.08); color: var(--ink); }
.dh-stat.red .ic { background: rgba(255,255,255,.15); color: #fff; }
.dh-streak .flame { color: #fff; }
.dc-quick a .icon { color: var(--green-700); stroke: currentColor; }
.dc-quick a:hover .icon { color: var(--green-800); }
.dh-tab .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--green-50); color: var(--green-800);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
}

/* Dashboard main grid */
.dh-body { padding: 40px 0 90px; }
.dh-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .dh-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border-radius: var(--r-lg);
  border: 1px solid var(--line); padding: 26px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 18px;
}
.card-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; margin: 0; letter-spacing: -.015em; }
.card-head .meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); }
.card-head .link { font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; color: var(--green-700); display: inline-flex; align-items: center; gap: 6px; }
.card-head .link:hover { color: var(--green-800); }

/* Continue learning — interactive course tiles with circular SVG progress */
.dc-list { display: flex; flex-direction: column; gap: 12px; }
.dc-tile {
  display: grid; grid-template-columns: 80px 1fr 60px; gap: 18px; align-items: center;
  padding: 14px; border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--cream-50);
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease-soft), border-color .25s, box-shadow .25s;
}
.dc-tile:hover { transform: translateY(-2px); border-color: var(--green-300); box-shadow: 0 12px 24px -14px rgba(0,0,0,.15); background: var(--paper); }
.dc-tile .img { width: 80px; height: 60px; border-radius: 10px; background-size: cover; background-position: center; }
.dc-tile .body h5 { font-family: var(--f-sans); font-weight: 700; font-size: 14.5px; margin: 0 0 4px; color: var(--ink); }
.dc-tile .body .m { display: flex; gap: 10px; font-size: 12px; color: var(--slate-500); }
.dc-tile .body .bar { height: 4px; background: var(--line); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.dc-tile .body .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-300)); border-radius: inherit; }
.dc-tile .ring { width: 50px; height: 50px; position: relative; }
.dc-tile .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dc-tile .ring svg circle { fill: none; stroke-width: 4; }
.dc-tile .ring .track { stroke: var(--line); }
.dc-tile .ring .fill  { stroke: var(--green-500); stroke-linecap: round; }
.dc-tile .ring .pct  {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--ink);
}

/* Live activity feed (community) */
.dc-feed { display: flex; flex-direction: column; gap: 2px; }
.dc-feed-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  padding: 12px 8px; border-radius: 10px; transition: background .15s;
  text-decoration: none; color: inherit;
}
.dc-feed-item:hover { background: var(--green-50); }
.dc-feed-item .av {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--green-500); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 700; font-size: 13px;
}
.dc-feed-item .av.r { background: var(--red-500); color: #fff; }
.dc-feed-item .av.d { background: var(--ink); color: var(--green-500); }
.dc-feed-item .body { font-size: 13.5px; color: var(--slate-700); line-height: 1.5; }
.dc-feed-item .body strong { color: var(--ink); font-weight: 700; }
.dc-feed-item .body .ch { color: var(--green-700); font-family: var(--f-mono); font-weight: 600; font-size: 12.5px; }
.dc-feed-item .when { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-400); margin-top: 3px; letter-spacing: .04em; }

/* Aside cards */
.dc-quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.dc-quick a {
  padding: 14px; border-radius: 12px;
  background: var(--cream-50); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--ink);
  transition: transform .2s, border-color .2s, background .2s;
}
.dc-quick a:hover { transform: translateY(-2px); border-color: var(--green-500); background: var(--paper); }
.dc-quick a .ic { font-size: 18px; }
.dc-quick a span { font-family: var(--f-sans); font-weight: 600; font-size: 13px; }

/* Upcoming events list */
.dc-events { display: flex; flex-direction: column; gap: 12px; }
.dc-event {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream-50);
}
.dc-event .date {
  width: 56px; aspect-ratio: 1;
  background: var(--ink); color: var(--cream-50);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.dc-event .date .d { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1; }
.dc-event .date .m { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); }
.dc-event h5 { font-family: var(--f-sans); font-weight: 700; font-size: 14px; margin: 0; color: var(--ink); }
.dc-event .meta { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); letter-spacing: .04em; }

/* Badges row */
.dc-badges {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.dc-badge {
  text-align: center; padding: 16px 10px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--cream-50);
}
.dc-badge .emoji { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.dc-badge.locked .emoji { filter: grayscale(1); opacity: .35; }
.dc-badge h6 { font-family: var(--f-sans); font-weight: 700; font-size: 11.5px; margin: 0; color: var(--ink); }
.dc-badge.locked h6 { color: var(--slate-400); }

/* Application status pill timeline */
.app-card {
  padding: 24px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  margin-bottom: 14px;
}
.app-card-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.app-card-head h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.app-card-head .submitted { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500); letter-spacing: .04em; }
.app-track {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px;
  align-items: start;
}
.app-track .step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; position: relative;
}
.app-track .step .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--slate-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.app-track .step.done .dot { background: var(--green-500); color: var(--ink); box-shadow: 0 0 0 1px var(--green-500); }
.app-track .step.on  .dot { background: var(--ink); color: var(--green-500); box-shadow: 0 0 0 4px rgba(15,15,15,.1), 0 0 0 1px var(--ink); }
.app-track .step .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
.app-track .step.on .lbl, .app-track .step.done .lbl { color: var(--ink); font-weight: 600; }
.app-track .conn {
  position: absolute; left: 50%; top: 11px; width: 100%; height: 2px;
  background: var(--line); z-index: -1;
}
.app-track .step:last-child .conn { display: none; }
.app-track .step.done .conn { background: var(--green-500); }
.app-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.app-summary .field { font-family: var(--f-sans); }
.app-summary .field .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 4px; }
.app-summary .field .v { font-size: 14px; color: var(--ink); font-weight: 600; }

/* Badge gallery — trophy room */
.bg-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
.bg-card {
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 20px 22px;
  text-align: center;
  transition: transform .3s var(--ease-soft), box-shadow .3s, border-color .25s;
  position: relative; overflow: hidden;
}
.bg-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.bg-card.locked { background: var(--cream-100); }
.bg-card .emoji {
  font-size: 56px; line-height: 1; margin-bottom: 14px;
  display: inline-block;
  transition: transform .4s var(--ease-bounce);
}
.bg-card:hover .emoji { transform: scale(1.1) rotate(-6deg); }
.bg-card.locked .emoji { filter: grayscale(1); opacity: .3; }
.bg-card h5 { font-family: var(--f-display); font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--ink); letter-spacing: -.01em; }
.bg-card.locked h5 { color: var(--slate-500); }
.bg-card p { font-size: 12.5px; color: var(--slate-500); margin: 0; line-height: 1.45; }
.bg-card .award {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--green-700); font-weight: 600;
}
.bg-card.locked .award { color: var(--slate-400); }

/* Welcome banner mini */
.dh-mini-banner {
  background: var(--ink); color: var(--cream-50);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; overflow: hidden;
  margin-top: 24px;
}
.dh-mini-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 100% 50%, rgba(79,181,73,.18), transparent 60%);
  pointer-events: none;
}
.dh-mini-banner > div { position: relative; }
.dh-mini-banner h4 { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; margin: 0 0 4px; color: var(--cream-50); }
.dh-mini-banner p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; }
.dh-mini-banner .btn { background: var(--green-500); color: var(--ink); border-color: var(--green-500); padding: 10px 18px; }

/* Lesson player */
.lesson-shell { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 48px 0 80px; }
@media (max-width: 880px) { .lesson-shell { grid-template-columns: 1fr; } }
.lesson-side { background: var(--paper); border-radius: var(--r-md); padding: 22px; border: 1px solid var(--line); height: fit-content; position: sticky; top: 90px; }
.lesson-side h4 { font-family: var(--f-sans); font-weight: 600; font-size: 12px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px; }
.lesson-side .ll { display: flex; gap: 12px; padding: 10px 12px; border-radius: 8px; align-items: center; font-size: 14px; color: var(--slate-700); transition: background .15s, color .15s; }
.lesson-side .ll:hover { background: var(--green-50); color: var(--green-800); }
.lesson-side .ll.active { background: var(--ink); color: var(--cream-50); font-weight: 600; }
.lesson-side .ll.done { color: var(--slate-500); }
.lesson-side .ll .ln { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--f-mono); flex-shrink: 0; }
.lesson-side .ll.active .ln, .lesson-side .ll.done .ln { background: var(--green-500); color: var(--ink); }
.lesson-main h1 { font-size: 2.4rem; margin-bottom: 8px; }
.video-frame { aspect-ratio: 16/9; background: var(--ink); border-radius: var(--r-md); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--cream-50); margin: 24px 0; }
.video-frame::after { content: "▶"; position: absolute; width: 76px; height: 76px; border-radius: 50%; background: var(--green-500); display: flex; align-items: center; justify-content: center; font-size: 28px; padding-left: 6px; color: var(--ink); }
.lesson-body { font-size: 16.5px; line-height: 1.8; color: var(--slate-700); }
.lesson-body h2, .lesson-body h3 { font-family: var(--f-display); font-weight: 700; color: var(--ink); margin: 32px 0 12px; }
.lesson-body p { margin: 0 0 16px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }

/* ============================================================
   Helpers
   ============================================================ */
.text-center { text-align: center; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 60px; }
.hide-mobile { display: initial; } @media (max-width: 700px) { .hide-mobile { display: none; } }

/* Legacy aliases for interior view classes */
/* Cleaner accent: highlighter-pen background swatch, no underline */
.u-scribble {
  position: relative; display: inline-block;
  color: var(--ink); font-style: normal; font-weight: inherit;
  background: linear-gradient(transparent 55%, rgba(79,181,73,.38) 55%, rgba(79,181,73,.38) 92%, transparent 92%);
  padding: 0 .12em;
  border-radius: 2px;
}
.u-scribble.red {
  color: var(--ink);
  background: linear-gradient(transparent 55%, rgba(230,57,70,.3) 55%, rgba(230,57,70,.3) 92%, transparent 92%);
}
.section-eyebrow { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--green-700); display: inline-block; margin-bottom: 14px; }
.section-eyebrow::before { content: "— "; }
.hi-display { color: var(--red-500); font-style: italic; }
.hi-green   { color: var(--green-700); font-style: italic; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .cards-3 { grid-template-columns: 1fr; } }
.pcard { background: var(--paper); border-radius: var(--r-lg); padding: 36px 32px; border: 1px solid var(--line); transition: transform .25s, box-shadow .3s, border-color .2s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.pcard .pico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); font-size: 22px; margin-bottom: 22px; }
.pcard.red .pico { background: var(--red-50); color: var(--red-600); border-color: var(--red-100); }
.pcard.yellow .pico { background: var(--green-500); color: var(--ink); border-color: var(--green-600); }
.pcard .pico.pico-photo {
  width: 92px; height: 92px; border-radius: 18px;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  color: transparent; border: 0;
  box-shadow: 0 12px 28px -14px rgba(15,15,15,.4);
}
.pcard h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin-bottom: 12px; }
.pcard p { color: var(--slate-500); font-size: 14.5px; }
.pcard ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.pcard li { display: flex; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--slate-700); }
.pcard li::before { content: "→"; color: var(--green-700); font-weight: 600; }
.pcard .plink { color: var(--ink); font-weight: 600; font-size: 14px; }
.pcard .plink:hover { color: var(--green-700); }

.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 800px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
.board { padding: 24px 22px; background: var(--paper); transition: background .25s; }
.board:hover { background: var(--green-50); }
.board .av { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, var(--green-700), var(--green-500)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.board:nth-child(4n+2) .av { background: linear-gradient(135deg, var(--red-600), var(--red-500)); }
.board:nth-child(4n+3) .av { background: var(--ink); color: var(--green-500); }
.board .av.av-photo {
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  width: 64px; height: 64px; border-radius: 14px;
  color: transparent;
  box-shadow: 0 6px 18px -8px rgba(15,15,15,.3);
}
.board h5 { font-family: var(--f-sans); font-weight: 700; font-size: 14.5px; margin: 0 0 4px; color: var(--ink); }
.board .role { font-size: 12.5px; color: var(--slate-500); line-height: 1.5; }
.board .org { font-size: 11.5px; color: var(--slate-400); margin-top: 4px; font-family: var(--f-mono); letter-spacing: .02em; }

.winners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .winners-grid { grid-template-columns: 1fr; } }
.winner { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; background-size: cover; background-position: center; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.winner:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.winner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,15,.95) 0%, rgba(15,15,15,.3) 50%, transparent 100%); }
.winner > div { position: absolute; inset: auto 24px 24px; z-index: 2; color: var(--cream-50); }
.winner .badge { position: absolute; top: 18px; left: 18px; z-index: 2; }
.winner h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 6px; color: var(--cream-50); }
.winner .uni { font-size: 13px; color: rgba(255,255,255,.78); }
.winner .proj { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--green-300); margin-top: 8px; font-weight: 500; }

.split-feats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; }
.split-feats li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.split-feats li:first-child { padding-top: 0; }
.split-feats .fi { width: 36px; height: 36px; border-radius: 10px; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.split-feats h4 { font-family: var(--f-sans); font-weight: 600; font-size: 15.5px; margin: 4px 0 6px; color: var(--ink); }
.split-feats p { font-size: 14px; color: var(--slate-500); margin: 0; line-height: 1.55; }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 960px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { padding: 28px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); transition: all .25s; }
.feat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.feat .fic { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); }
.feat h4 { font-size: 1.05rem; margin: 0 0 8px; }
.feat p { color: var(--slate-500); margin: 0; font-size: 13.5px; line-height: 1.55; }
.feat .new { font-size: 10.5px; font-weight: 700; color: #fff; background: var(--red-500); padding: 2px 8px; border-radius: 999px; letter-spacing: .08em; margin-left: 6px; }

.cta-banner { background: var(--ink); border-radius: var(--r-2xl); padding: 80px 50px; color: var(--cream-50); text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(79,181,73,.20), transparent 60%); pointer-events: none; }
.cta-banner h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem); color: var(--cream-50); position: relative; }
.cta-banner h2 .h { color: var(--green-500); font-style: italic; }
.cta-banner p { color: rgba(255,255,255,.78); max-width: 540px; margin: 22px auto 32px; position: relative; }
.cta-banner .btn { background: var(--green-500); color: var(--ink); border-color: var(--green-500); }
.cta-banner .btn:hover { background: var(--green-600); box-shadow: var(--glow-green); }

/* Old hero remnants — hide */
.hero-blob, .hero-side-note, .hero-img.front, .hero-img.back, .hero-deco, .hero-float, .hero-stage, .hero-card, .pill { display: none; }
.hero { display: none; }

/* ============================================================
   v5 ADDITIONS — innovation hero, asymmetric bento, alumni mosaic
   ============================================================ */

/* Scroll progress bar at very top of page */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 100; pointer-events: none;
}
.scroll-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green-500), var(--red-500));
}

/* ============================================================
   HERO SLIDER v5 — innovation cues
   ============================================================ */

/* Huge watermark number per slide */
.slide-watermark {
  position: absolute;
  right: 8vw; top: 12vh;
  z-index: 2; pointer-events: none;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(10rem, 22vw, 24rem);
  line-height: .85; letter-spacing: -.06em;
  color: rgba(255,255,255,.05);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  user-select: none;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.3s var(--ease-soft), transform 1.3s var(--ease-soft);
}
.slide.active .slide-watermark { opacity: 1; transform: none; }

@media (max-width: 960px) { .slide-watermark { font-size: clamp(7rem, 30vw, 14rem); right: 4vw; top: 8vh; } }

/* Frame counter top-left */
.slide-counter {
  position: absolute; top: 26px; right: 32px;
  z-index: 5;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .15em;
  color: rgba(255,255,255,.7);
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.06);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
}
.slide-counter .live { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 4px rgba(79,181,73,.18); animation: pulse 2s infinite; }
@media (max-width: 700px) { .slide-counter { right: 22px; } }

/* Replace bar-style dots with circular ring */
.slide-dot { position: relative; padding: 8px 0 8px 50px; min-width: 110px; display: flex; flex-direction: column; gap: 4px; }
.slide-dot .ring {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
}
.slide-dot .ring circle { fill: none; stroke-width: 2; transform: rotate(-90deg); transform-origin: 50% 50%; }
.slide-dot .ring .track { stroke: rgba(255,255,255,.15); }
.slide-dot .ring .fill  { stroke: var(--green-500); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .15s linear; }
.slide-dot.on .ring .fill { stroke-dashoffset: calc(100 - var(--p, 0)); }
.slide-dot .num { font-family: var(--f-mono); font-size: 11px; opacity: .8; letter-spacing: .12em; }
.slide-dot .lbl { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.85); letter-spacing: -.01em; }
.slide-dot.on .lbl { color: var(--cream-50); }
.slide-dot.on .num { opacity: 1; color: var(--green-300); }
.slide-dot:hover .lbl { color: #fff; }
.slide-dot .bar { display: none; }    /* hide old bar */

/* Scroll-hint at bottom-left */
.scroll-hint {
  position: absolute; left: 32px; bottom: 36px;
  z-index: 5;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 28px;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
  animation: scrollHint 2.4s var(--ease-soft) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(0);  opacity: .6; }
  50%  { transform: translateY(8px); opacity: 1; }
  100% { transform: translateY(0);   opacity: .6; }
}
@media (max-width: 800px) { .scroll-hint { display: none; } }

/* Push slide nav up so it doesn't collide with stats */
.slider-nav { bottom: 50px; }
.slider-nav .wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) { .slider-nav { bottom: 28px; } .slider-nav .wrap { gap: 12px; } .slide-dot { min-width: 80px; padding-left: 42px; } .slide-dot .ring { width: 30px; height: 30px; } }

/* ============================================================
   MISSION v5 — visual big-number callouts (replaces paragraph)
   ============================================================ */
.manifesto-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  margin-top: 50px;
}
.mf-cell { padding: 36px 32px; border-radius: var(--r-lg); position: relative; overflow: hidden; }
.mf-cell .mf-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1;
  letter-spacing: -.04em; margin: 0 0 14px;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.mf-cell .mf-lbl { font-size: 14.5px; color: var(--slate-500); max-width: 280px; line-height: 1.5; }
.mf-cell.a { grid-column: span 5; background: var(--ink); color: var(--cream-50); padding: 50px 44px; }
.mf-cell.a .mf-num { color: var(--green-500); font-size: clamp(4rem, 7vw, 6.8rem); }
.mf-cell.a .mf-lbl { color: rgba(255,255,255,.8); font-size: 17px; max-width: 360px; }
.mf-cell.b { grid-column: span 4; background: var(--paper); border: 1px solid var(--line); }
.mf-cell.c { grid-column: span 3; background: var(--green-500); color: var(--ink); }
.mf-cell.c .mf-num { color: var(--ink); }
.mf-cell.c .mf-lbl { color: var(--ink); opacity: .8; }
.mf-cell.d { grid-column: span 4; background: var(--cream-100); }
.mf-cell.e { grid-column: span 4; background: var(--paper); border: 1px solid var(--line); }
.mf-cell.f { grid-column: span 4; background: var(--red-500); color: #fff; }
.mf-cell.f .mf-num { color: #fff; }
.mf-cell.f .mf-lbl { color: rgba(255,255,255,.88); }
@media (max-width: 800px) {
  .manifesto-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mf-cell, .mf-cell.a, .mf-cell.b, .mf-cell.c, .mf-cell.d, .mf-cell.e, .mf-cell.f { grid-column: span 1; padding: 28px 24px; }
  .mf-cell.a { grid-column: span 2; }
}
.mf-headline {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
  line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink);
  max-width: 800px;
}
.mf-headline .em { color: var(--green-700); }

/* ============================================================
   PROGRAMS BENTO v5 — asymmetric, photo-heavy, balanced
   ============================================================ */
.bento-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 280px 280px;
  gap: 18px;
}
@media (max-width: 960px) {
  .bento-12 { grid-template-columns: 1fr; grid-template-rows: none; }
}
.bcard {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  text-decoration: none; color: inherit;
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.bcard.feature { grid-column: span 7; grid-row: span 2; padding: 0; min-height: 580px; }
.bcard.feature .img-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1s var(--ease-soft);
}
.bcard.feature:hover .img-bg { transform: scale(1.04); }
.bcard.feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,.05) 0%, rgba(15,15,15,.55) 60%, rgba(15,15,15,.92) 100%);
}
.bcard.feature .body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 44px; color: var(--cream-50); z-index: 2;
}
.bcard.feature .body .num { font-family: var(--f-mono); font-size: 12px; color: var(--green-300); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; display: block; }
.bcard.feature .body h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 3vw + .5rem, 3rem); color: #fff; margin: 0 0 14px; line-height: 1.02; letter-spacing: -.025em; max-width: 540px; }
.bcard.feature .body p { color: rgba(255,255,255,.82); max-width: 540px; font-size: 15.5px; line-height: 1.55; margin: 0; }
.bcard.feature .body .blink { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; background: var(--green-500); color: var(--ink); border-radius: 999px; font-weight: 600; font-size: 13.5px; }
.bcard.feature .body .blink::after { content: "→"; transition: transform .3s var(--ease-bounce); }
.bcard.feature:hover .body .blink::after { transform: translateX(4px); }

.bcard.compact { grid-column: span 5; min-height: 280px; }
.bcard.compact .num { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-400); letter-spacing: .14em; }
.bcard.compact h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1.08; margin: 12px 0 10px; letter-spacing: -.02em; }
.bcard.compact p { color: var(--slate-500); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
.bcard.compact .arrow { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--cream-50); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-top: 16px; align-self: flex-start; transition: background .25s, transform .35s var(--ease-bounce); }
.bcard.compact:hover .arrow { background: var(--green-500); color: var(--ink); transform: rotate(-45deg); }

.bcard.dark { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.bcard.dark h3 { color: #fff; }
.bcard.dark p { color: rgba(255,255,255,.7); }
.bcard.dark .num { color: rgba(255,255,255,.45); }
.bcard.dark .arrow { background: var(--green-500); color: var(--ink); }
.bcard.dark:hover .arrow { background: #fff; }

.bcard.red { background: var(--red-500); color: #fff; border-color: var(--red-500); }
.bcard.red h3 { color: #fff; }
.bcard.red p { color: rgba(255,255,255,.86); }
.bcard.red .num { color: rgba(255,255,255,.6); }
.bcard.red .arrow { background: #fff; color: var(--red-600); }
.bcard.red:hover .arrow { background: var(--ink); color: var(--red-500); }

@media (max-width: 960px) {
  .bcard.feature, .bcard.compact { grid-column: span 1; min-height: 360px; }
  .bcard.feature .body { padding: 28px; }
}

/* ============================================================
   ALUMNI MOSAIC v5 — photo wall with offset rows
   ============================================================ */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
.mtile {
  position: relative; overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 3/4;
  background-color: var(--ink);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.mtile:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.mtile .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease-soft); }
.mtile:hover .img { transform: scale(1.06); }
.mtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,15,.85) 0%, rgba(15,15,15,.1) 50%, transparent 100%); }
.mtile .body { position: absolute; inset: auto 0 0 0; padding: 14px 14px; color: var(--cream-50); z-index: 2; }
.mtile .name { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: #fff; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
.mtile .meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--green-300); margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }
.mtile.shift { transform: translateY(28px); }
.mtile.shift:hover { transform: translateY(24px); }
@media (max-width: 800px) { .mtile.shift { transform: none; } .mtile.shift:hover { transform: translateY(-4px); } }

/* "More alumni" tile */
.mtile.more { background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 24px; }
.mtile.more::after { display: none; }
.mtile.more .body { position: static; padding: 0; text-align: center; color: var(--cream-50); }
.mtile.more .body .arrow { font-family: var(--f-display); font-size: 2.6rem; font-weight: 700; color: var(--green-500); line-height: 1; letter-spacing: -.04em; }
.mtile.more .body .name { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 8px; font-weight: 500; }

/* ============================================================
   MAGNETIC button (very subtle)
   ============================================================ */
.btn.magnetic { will-change: transform; transition: transform .25s var(--ease-soft), background .2s, box-shadow .3s var(--ease-soft); }

/* ============================================================
   TILT card class
   ============================================================ */
.tilt { transition: transform .35s var(--ease-soft); transform-style: preserve-3d; will-change: transform; }

/* ============================================================
   Eyebrow with mono frame counter style
   ============================================================ */
.eyebrow .ct { font-family: var(--f-mono); color: var(--slate-500); margin-left: 10px; }

/* Section pair (two sections close together) */
.section.tight + .section { padding-top: 40px; }
.section + .section.cream { margin-top: 0; }

/* ============================================================
   WANGARI — floating AI tutor chat widget
   ============================================================ */
.wangari { position: fixed; bottom: 22px; right: 22px; z-index: 90; }
@media (max-width: 700px) { .wangari { bottom: 14px; right: 14px; } }

/* ---------- Mascot FAB — gentle bob only, no swing, no hand ---------- */
.wn-fab {
  position: relative;
  width: 100px; height: 190px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  transition: transform .25s var(--ease-bounce);
  outline: none;
}
.wn-fab:hover { transform: translateY(-4px) scale(1.03); }
.wn-fab:focus-visible { outline: 3px solid var(--green-500); outline-offset: 6px; border-radius: 24px; }
.wn-fab-img {
  width: 100% !important; height: auto !important; display: block;
  filter: drop-shadow(0 14px 22px rgba(46,122,42,.35));
  animation: wnBreathe 3s ease-in-out infinite;
  transform-origin: 50% 90%;
  pointer-events: none;
}
@keyframes wnBreathe {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%      { transform: translateY(-4px) scale(1.02); }
}
.wn-fab-pulse {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 84px; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(79,181,73,.45), transparent 70%);
  animation: wnGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wnGlow {
  0%, 100% { transform: translateX(-50%) scale(1);   opacity: .35; }
  50%      { transform: translateX(-50%) scale(1.2); opacity: .15; }
}

/* FLOATING INVITE — always visible, rotates prompts, points at mascot */
.wn-invite {
  position: absolute;
  bottom: 145px; right: 110px;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 14px 10px 12px;
  border-radius: 18px 18px 4px 18px;
  border: 1.5px solid var(--line);
  box-shadow: 0 18px 36px -10px rgba(0,0,0,.22);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-weight: 600; font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  animation: wnInviteBob 4s ease-in-out infinite;
  z-index: 5;
  min-width: 200px;
}
@keyframes wnInviteBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1deg); }
}
.wn-invite-tail {
  position: absolute; right: -10px; bottom: -1px;
  width: 18px; height: 18px;
  background: var(--paper);
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  transform: rotate(-45deg);
  border-radius: 0 0 4px 0;
}
.wn-invite-ico {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.wn-invite-text {
  position: relative;
  height: 1.4em; min-width: 170px;
  overflow: hidden;
}
.wn-invite-rotator {
  position: absolute; inset: 0;
}
.wn-invite-rotator span {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transition: opacity .5s, transform .5s var(--ease-soft);
  transform: translateY(8px);
}
.wn-invite-rotator span.on {
  opacity: 1; transform: translateY(0);
}

@media (max-width: 700px) {
  .wn-invite { display: none; } /* save space on mobile */
}

.wangari.open .wn-fab,
.wangari.open .wn-invite { display: none; }

/* Intro popup mascot — same gentle bob */
.wn-illu-mascot {
  animation: wnBreathe 3s ease-in-out infinite !important;
  transform-origin: 50% 90%;
}

/* Perks list in step 1 — Lucide icons (no emojis) */
.wn-perks {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.wn-perks li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.wn-perks li .ic {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green-50); color: var(--green-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wn-fab-img, .wn-fab-pulse, .wn-invite, .wn-illu-mascot { animation: none !important; }
}

.wn-panel {
  position: absolute; bottom: 0; right: 0;
  width: min(420px, calc(100vw - 28px));
  height: min(640px, calc(100vh - 80px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 32px 80px -20px rgba(15,15,15,.45);
  display: none; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
}
.wangari.open .wn-panel {
  display: flex;
  animation: wnIn .35s var(--ease-soft);
}
@keyframes wnIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.wn-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--ink); color: var(--cream-50);
  position: relative; overflow: hidden;
}
.wn-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(79,181,73,.25), transparent 65%);
  pointer-events: none;
}
.wn-head-id { position: relative; display: flex; gap: 12px; align-items: center; }
.wn-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 16px; color: #fff;
}
.wn-name { font-family: var(--f-display); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.wn-name .wn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px rgba(79,181,73,.25); }
.wn-meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 2px; }
.wn-close {
  background: rgba(255,255,255,.08); border: 0; color: var(--cream-50);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  position: relative;
}
.wn-close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }

.wn-body {
  flex: 1;
  padding: 18px 16px;
  overflow-y: auto;
  background: var(--cream-50);
  display: flex; flex-direction: column; gap: 12px;
}
.wn-body::-webkit-scrollbar { width: 6px; }
.wn-body::-webkit-scrollbar-track { background: transparent; }
.wn-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.wn-msg {
  padding: 12px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  max-width: 88%; word-wrap: break-word;
}
.wn-msg p { margin: 0 0 8px; }
.wn-msg p:last-child { margin: 0; }
.wn-msg ul, .wn-msg ol { margin: 6px 0 6px 18px; padding: 0; }
.wn-msg code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; font-family: var(--f-mono); font-size: .92em; }
.wn-msg strong { font-weight: 700; color: var(--ink); }
.wn-msg em { font-style: italic; opacity: .8; }

.wn-msg-bot {
  background: var(--paper); border: 1px solid var(--line);
  color: var(--slate-700); align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.wn-msg-user {
  background: var(--ink); color: var(--cream-50);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.wn-typing {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 14px 16px;
}
.wn-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--slate-400);
  animation: wnBlink 1.2s ease-in-out infinite;
}
.wn-typing span:nth-child(2) { animation-delay: .15s; }
.wn-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wnBlink {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40%           { opacity: 1;  transform: translateY(-3px); }
}

.wn-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wn-chip {
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--slate-700); cursor: pointer;
  transition: all .2s;
}
.wn-chip:hover { border-color: var(--green-500); color: var(--green-800); background: var(--green-50); }

.wn-input {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.wn-input input {
  flex: 1; min-width: 0;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cream-50);
  font-family: var(--f-sans); font-size: 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wn-input input:focus {
  outline: none; border-color: var(--green-500); background: var(--paper);
  box-shadow: 0 0 0 3px rgba(79,181,73,.12);
}
.wn-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-500); color: var(--ink); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.wn-send:hover { background: var(--green-600); color: #fff; }
.wn-send:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   DIRECT MESSAGES — thread + input + voice recorder
   ============================================================ */
.dm-thread {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 18px;
  min-height: 400px;
  max-height: 60vh;
  overflow-y: auto;
}
.dm-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 80%; }
.dm-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-msg.theirs { align-self: flex-start; }
.dm-bubble { padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.dm-msg.theirs .dm-bubble { background: var(--cream-100); color: var(--ink); border-bottom-left-radius: 4px; }
.dm-msg.mine   .dm-bubble { background: var(--ink); color: var(--cream-50); border-bottom-right-radius: 4px; }
.dm-time { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--slate-400); margin-top: 4px; }
.dm-msg.mine .dm-time { color: rgba(255,255,255,.55); }

.dm-input-form { display: flex; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 14px; }
.dm-input-form input[type=text] { flex: 1; border: 0; background: transparent; font-family: var(--f-sans); font-size: 14.5px; padding: 10px 4px; min-width: 0; }
.dm-input-form input[type=text]:focus { outline: none; }
.dm-rec, .dm-send { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; flex-shrink: 0; border: 0; }
.dm-rec  { background: var(--cream-100); color: var(--ink); }
.dm-rec:hover { background: var(--red-50); color: var(--red-600); }
.dm-send { background: var(--green-500); color: var(--ink); }
.dm-send:hover { background: var(--green-600); color: #fff; }

.dm-rec-state {
  display: none; margin-top: 14px;
  padding: 12px 16px; background: var(--red-50);
  border: 1px solid var(--red-100); border-radius: 999px;
  align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 13px; color: var(--red-700);
}
.dm-rec-state.on { display: inline-flex; }
.dm-rec-state .pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red-500); box-shadow: 0 0 0 4px rgba(230,57,70,.2);
  animation: pulse 1s infinite;
}
.dm-rec-state .t { flex: 1; }
.dm-rec-stop, .dm-rec-cancel { padding: 6px 12px; border-radius: 999px; font-family: var(--f-sans); font-size: 12px; font-weight: 600; border: 0; cursor: pointer; }
.dm-rec-stop { background: var(--green-500); color: var(--ink); }
.dm-rec-cancel { background: transparent; color: var(--red-700); text-decoration: underline; }

/* ============================================================
   SDG IMPACT MAP (Africa)
   ============================================================ */
.im-stats {
  display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr;
  gap: 16px; margin-bottom: 26px;
}
@media (max-width: 800px) { .im-stats { grid-template-columns: repeat(2, 1fr); } .im-stats .im-stat-cta { grid-column: 1 / -1; } }
.im-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.im-stat .num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 3vw, 3rem); line-height: 1;
  letter-spacing: -.04em; color: var(--ink);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.im-stat .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); }
.im-stat-cta { display: flex; align-items: center; justify-content: flex-end; }

.im-map {
  position: relative;
  background: #0E2D1B;
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(79,181,73,.18);
  box-shadow: var(--sh-3);
}

/* Leaflet map container */
.im-leaflet { width: 100%; height: clamp(440px, 65vh, 720px); background: #0E2D1B; }

/* Slight green tint over the CARTO Dark tiles to match the brand */
.im-tiles { filter: hue-rotate(-12deg) saturate(.85) brightness(.9); }
.im-labels { opacity: .55; }

/* Custom DivIcon markers — pulsing dot, brand-coloured */
.im-marker { background: transparent !important; border: 0 !important; }
.im-marker-core,
.im-marker-pulse {
  position: absolute;
  width: var(--ms, 12px); height: var(--ms, 12px);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.im-marker-core {
  background: var(--green-300);
  box-shadow: 0 0 0 2px #0E2D1B, 0 4px 10px -2px rgba(0,0,0,.45);
}
.im-marker.is-winner .im-marker-core {
  background: var(--green-500);
  box-shadow: 0 0 0 3px #0E2D1B, 0 6px 14px -2px rgba(0,0,0,.55);
}
.im-marker-pulse {
  background: transparent;
  border: 2px solid var(--green-500);
  animation: imPulse 2.4s var(--ease-soft, ease-out) infinite;
}
@keyframes imPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}
.im-marker:hover .im-marker-core { background: var(--cream-50); }

/* Leaflet controls — tucked into the corner, dark glassy */
.leaflet-control-zoom a {
  background: rgba(15,15,15,.75) !important;
  color: var(--cream-50) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
}
.leaflet-control-zoom a:hover { background: rgba(15,15,15,.95) !important; color: var(--green-500) !important; }
.leaflet-control-attribution {
  background: rgba(15,15,15,.6) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 10px !important; padding: 2px 8px !important;
}
.leaflet-control-attribution a { color: var(--green-500) !important; }

/* Popup — re-skin Leaflet's bubble to match the dark theme */
.leaflet-popup.im-pop .leaflet-popup-content-wrapper {
  background: var(--ink); color: var(--cream-50);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.6);
  padding: 0;
}
.leaflet-popup.im-pop .leaflet-popup-content { margin: 0; min-width: 240px; max-width: 320px; }
.leaflet-popup.im-pop .leaflet-popup-tip { background: var(--ink); border: 1px solid rgba(255,255,255,.12); border-top: 0; border-left: 0; }
.leaflet-popup.im-pop .leaflet-popup-close-button { color: rgba(255,255,255,.55) !important; padding: 6px 8px 0 0 !important; }
.leaflet-popup.im-pop .leaflet-popup-close-button:hover { color: var(--green-500) !important; }
.im-pop-body { padding: 14px 16px; }
.im-pop-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-500); margin-bottom: 8px;
}
.im-pop-body h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; color: var(--cream-50); letter-spacing: -.01em; }
.im-pop-place { font-family: var(--f-mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .04em; margin-bottom: 10px; }
.im-pop-body p { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.78); margin: 0 0 12px; }
.im-pop-link { font-family: var(--f-sans); font-weight: 600; font-size: 12.5px; color: var(--green-500); text-decoration: none; }
.im-pop-link:hover { color: var(--green-300); }

.im-legend {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.7);
  letter-spacing: .04em;
  background: rgba(15,15,15,.7); border: 1px solid rgba(255,255,255,.08);
  padding: 8px 14px; border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 500;
}
.im-legend i {
  display: inline-block; border-radius: 50%; margin-right: 6px; vertical-align: middle;
}

/* ============================================================
   MILESTONE FOREST counter
   ============================================================ */
.forest-counter {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-xl);
  padding: 32px;
}
.fc-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(4rem, 7vw, 6rem); line-height: .9;
  letter-spacing: -.05em;
  background: linear-gradient(90deg, var(--green-300), var(--green-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fc-lbl { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 12px; }
.fc-bar {
  margin-top: 22px; height: 6px; background: rgba(255,255,255,.08);
  border-radius: 999px; overflow: hidden;
}
.fc-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-300));
  border-radius: 999px; transition: width 1.5s var(--ease-soft);
}
.fc-goal { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.5); margin-top: 10px; text-transform: uppercase; }

/* ============================================================
   QUIZ block (in lesson)
   ============================================================ */
.quiz-block {
  margin-top: 40px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.quiz-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px dashed var(--line);
}
.quiz-eye {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-700);
}
.quiz-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; margin: 6px 0 0; letter-spacing: -.02em; }
.quiz-meta { font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); letter-spacing: .04em; }

.quiz-banner {
  padding: 12px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  margin-bottom: 18px;
}
.quiz-banner.fail { background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-100); }
.quiz-banner.pass { background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }

.quiz-q {
  border: 0; padding: 0; margin: 0 0 26px;
}
.quiz-q legend {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); line-height: 1.4; letter-spacing: -.01em;
  margin-bottom: 14px;
}
.quiz-q .qn {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px;
  margin-top: 2px;
}

.quiz-opts { display: grid; gap: 8px; }
.quiz-opt {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center;
  padding: 14px 16px;
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: all .2s;
}
.quiz-opt:hover { border-color: var(--green-500); background: var(--green-50); }
.quiz-opt:has(input:checked) {
  border-color: var(--green-500);
  background: var(--green-50);
  box-shadow: 0 0 0 3px rgba(79,181,73,.08);
}
.quiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-opt .bullet {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 12px; color: var(--slate-500);
}
.quiz-opt:has(input:checked) .bullet { background: var(--green-500); color: var(--ink); border-color: var(--green-500); }
.quiz-opt .text { font-family: var(--f-sans); font-size: 14.5px; color: var(--ink); line-height: 1.45; }

.quiz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding-top: 22px; margin-top: 8px; border-top: 1px dashed var(--line);
}

/* ============================================================
   CERTIFICATE page (printable)
   ============================================================ */
.cert-page {
  background:
    radial-gradient(ellipse 50% 50% at 15% 20%, rgba(79,181,73,.10), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(230,57,70,.08), transparent 60%),
    var(--cream-50);
  padding: 60px 0 100px; min-height: 80vh;
}
.cert-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 28px;
}
.cert-toolbar-eye { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--green-700); }
.cert-toolbar-hash { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500); margin-top: 4px; }
.cert-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cert {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 60px 60px 50px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.41 / 1;     /* A4 landscape feel */
  display: flex; flex-direction: column;
}
.cert::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(79,181,73,.06), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(230,57,70,.04), transparent 30%);
}
.cert::after {
  content: ""; position: absolute; left: 40px; right: 40px; top: 40px; bottom: 40px;
  border: 1px dashed var(--line); border-radius: 22px; pointer-events: none;
}
.cert-head { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; margin-bottom: 30px; }
.cert-head img { height: 38px; }
.cert-head-meta { text-align: right; }
.cert-head-meta .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--slate-500); }
.cert-head-meta .k + .k { margin-top: 4px; }

.cert-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 2; gap: 14px; }
.cert-eye { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--green-700); }
.cert-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 4vw + .5rem, 4rem);
  line-height: 1; letter-spacing: -.035em;
  color: var(--ink); margin: 6px 0 0;
  font-style: italic;
}
.cert-statement { font-size: 1rem; color: var(--slate-500); margin: 8px 0; }
.cert-course {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.6rem, 2vw + .4rem, 2.4rem);
  background: linear-gradient(90deg, var(--green-700), var(--green-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 4px 0;
}
.cert-detail { font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); letter-spacing: .08em; text-transform: uppercase; margin: 0; }

.cert-badge {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 22px 12px 12px; border-radius: 999px;
  background: var(--cream-50); border: 1px solid var(--line);
  margin-top: 22px;
}
.cert-badge-ico { font-size: 28px; line-height: 1; }
.cert-badge-lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 2px; }
.cert-badge-name { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); }

.cert-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: end; margin-top: 30px; position: relative; z-index: 2; }
.cert-sig-line { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 1.2rem; padding-bottom: 6px; border-bottom: 1px solid var(--ink); color: var(--ink); }
.cert-sig-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--slate-500); margin-top: 6px; text-transform: uppercase; }
.cert-stamp { text-align: center; }
.cert-stamp-ring {
  width: 70px; height: 70px; border-radius: 50%;
  border: 2px dashed var(--green-700);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-15deg);
}
.cert-stamp-inner {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--green-500); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
}
.cert-stamp-text { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--green-700); margin-top: 8px; font-weight: 600; }
.cert-verify { text-align: right; }
.cert-verify-lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 4px; }
.cert-verify-url { font-family: var(--f-mono); font-size: 11px; color: var(--ink); }

.cert-after {
  display: grid; grid-template-columns: 1.5fr auto; gap: 28px; align-items: center;
  margin-top: 36px; padding: 24px 28px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cert-after h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.cert-after p { font-size: 13.5px; color: var(--slate-500); margin: 0; line-height: 1.55; }
.cert-after-cta { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 800px) {
  .cert { padding: 36px 28px; aspect-ratio: auto; }
  .cert::after { left: 20px; right: 20px; top: 20px; bottom: 20px; }
  .cert-foot { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .cert-sig-line, .cert-verify { text-align: center; }
}

/* ============================================================
   COFOUNDER swipe board
   ============================================================ */
.cf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}
.cf-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s var(--ease-soft), box-shadow .3s, border-color .25s;
}
.cf-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: transparent; }

.cf-head {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
}
.cf-av {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em;
}
.cf-av.r { background: linear-gradient(135deg, var(--red-600), var(--red-500)); }
.cf-av.d { background: var(--ink); color: var(--green-500); }
.cf-head h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
.cf-meta { font-size: 12.5px; color: var(--slate-500); margin-top: 2px; }
.cf-sdg {
  padding: 5px 10px; border-radius: 999px;
  background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
}

.cf-blurb { color: var(--slate-700); font-size: 14px; line-height: 1.55; margin: 0; }

.cf-skills {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px; border-radius: 12px; background: var(--cream-50); border: 1px dashed var(--line);
}
.cf-skills-lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
.cf-skills-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-skills-tags .tag { font-size: 11px; padding: 4px 8px; }

.cf-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.cf-action-form { margin: 0; }
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 14px; border-radius: 999px;
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  border: 1px solid var(--line); cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: all .2s;
}
.cf-skip { background: var(--cream-50); color: var(--slate-700); }
.cf-skip:hover { background: var(--paper); border-color: var(--slate-400); }
.cf-view { background: var(--paper); color: var(--ink); white-space: nowrap; }
.cf-view:hover { background: var(--cream-100); }
.cf-like { background: var(--green-500); color: var(--ink); border-color: var(--green-500); }
.cf-like:hover { background: var(--green-600); color: #fff; box-shadow: var(--glow-green); }

/* ============================================================
   MENTORS directory + booking
   ============================================================ */
.mentors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

.mentor-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s var(--ease-soft), box-shadow .3s, border-color .25s;
  text-decoration: none; color: inherit;
}
.mentor-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.mentor-card .av {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, var(--green-700), var(--green-500));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em;
}
.mentor-card:nth-child(4n+2) .av { background: linear-gradient(135deg, var(--red-600), var(--red-500)); }
.mentor-card:nth-child(4n+3) .av { background: var(--ink); color: var(--green-500); }
.mentor-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; margin: 0; letter-spacing: -.02em; }
.mentor-card .role { font-size: 13.5px; color: var(--slate-500); line-height: 1.5; }
.mentor-card .availability {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.mentor-card .availability .open { color: var(--green-700); font-weight: 600; }
.mentor-card .availability .arrow { font-family: var(--f-sans); font-size: 14px; color: var(--ink); text-transform: none; }

.slots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.slot-btn {
  padding: 14px 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  transition: all .2s;
  font-family: var(--f-sans);
}
.slot-btn:hover:not(:disabled) { border-color: var(--green-500); background: var(--green-50); transform: translateY(-2px); }
.slot-btn:disabled { opacity: .35; cursor: not-allowed; background: var(--cream-100); }
.slot-btn .d { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--slate-500); text-transform: uppercase; }
.slot-btn .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -.01em; }
.slot-btn .dur { font-size: 11.5px; color: var(--slate-500); }
.slot-btn.taken { background: var(--cream-100); }
.slot-btn.taken .t { color: var(--slate-400); text-decoration: line-through; }

.slots-day {
  margin-bottom: 22px;
}
.slots-day h4 {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-500); font-weight: 500;
  margin: 0 0 12px;
}

.booking-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 14px;
  background: var(--cream-50); border: 1px solid var(--line);
  margin-bottom: 10px;
}
.booking-card .when {
  width: 64px; aspect-ratio: 1;
  background: var(--ink); color: var(--cream-50);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  flex-shrink: 0;
}
.booking-card .when .d { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1; }
.booking-card .when .m { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--green-500); text-transform: uppercase; }
.booking-card .info { flex: 1; min-width: 0; }
.booking-card .info h5 { font-family: var(--f-sans); font-weight: 700; font-size: 14.5px; margin: 0 0 4px; color: var(--ink); }
.booking-card .info .m { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500); letter-spacing: .04em; }
.booking-card .room {
  padding: 9px 16px; border-radius: 999px;
  background: var(--green-500); color: var(--ink);
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  text-decoration: none;
  flex-shrink: 0;
}
.booking-card .room:hover { background: var(--green-600); color: #fff; }

/* ============================================================
   FULL-BLEED HERO v7.1 — flex-column for natural spacing
   ============================================================ */
.hero-cover {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  min-height: 600px;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream-50);
  isolation: isolate;
  display: flex; flex-direction: column;
}
.hero-cover .wrap { padding: 0 40px; }
@media (max-width: 700px) {
  .hero-cover .wrap { padding: 0 22px; }
  .hero-cover { height: calc(100svh - var(--header-h)); min-height: 560px; }
}

/* Background images stack (absolute behind everything) */
.hc-bgs { position: absolute; inset: 0; z-index: 0; }
.hc-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
  will-change: opacity, transform;
}
.hc-bg.active {
  opacity: 1;
  animation: kenBurnsHC 10s linear forwards;
}
@keyframes kenBurnsHC {
  from { transform: scale(1.05); }
  to   { transform: scale(1.18); }
}
.hc-bgs::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.15) 30%, rgba(15,15,15,.55) 65%, rgba(15,15,15,.95) 100%),
    linear-gradient(100deg, rgba(15,15,15,.65) 0%, rgba(15,15,15,.15) 55%, transparent 100%);
  pointer-events: none;
}

/* Progress bar pinned at very top */
.hc-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.06);
  z-index: 10;
}
.hc-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  transition: width .1s linear;
}

/* Row container — all three rows live on a flex column above the BG */
.hc-row { position: relative; z-index: 5; }

/* ---- Row 1: top utility bar ---- */
.hc-row-top { padding: 24px 0 0; }
.hc-top-inner { display: flex; align-items: center; justify-content: space-between; }
.hc-live {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hc-live .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500); box-shadow: 0 0 0 4px rgba(79,181,73,.2);
  animation: pulse 2s infinite;
}
.hc-counter {
  font-family: var(--f-mono); font-size: 12.5px;
  color: rgba(255,255,255,.55); letter-spacing: .14em;
}
.hc-counter .now { color: var(--cream-50); font-weight: 600; font-size: 14.5px; }
.hc-counter .dim { margin: 0 5px; opacity: .35; }

/* ---- Row 2: main stage (flex 1, centred) ---- */
.hc-row-stage {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 32px 0 24px;
  min-height: 0;
}
.hc-slides { position: relative; width: 100%; }
.hc-slide {
  display: none;
  max-width: 920px;
}
.hc-slide.active { display: block; }

.hc-eyebrow {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 22px;
  padding: 6px 0 0;
  border-top: 1px solid rgba(79,181,73,.35);
}

.hc-title {
  font-family: var(--f-display); font-weight: 700;
  /* clamp by both viewport width AND height so it fits short screens */
  font-size: clamp(2.2rem, min(5vw + .6rem, 11vh), 5.2rem);
  line-height: 1; letter-spacing: -.035em;
  color: var(--cream-50);
  margin: 0 0 20px;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.hc-title .hc-line { display: block; }
.hc-title .hc-line.em {
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic; font-weight: 500;
}

.hc-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  max-width: 540px; margin: 0 0 26px;
  line-height: 1.55;
}

.hc-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hc-cta .btn { padding: 12px 24px; font-size: 14px; }
.hc-cta .btn .arrow { transition: transform .25s var(--ease-bounce); }
.hc-cta .btn:hover .arrow { transform: translateX(4px); }
.hc-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px;
  color: var(--cream-50);
  padding: 8px 0;
  position: relative;
}
.hc-link::after {
  content: ""; position: absolute; left: 0; right: 22px; bottom: 4px; height: 1.5px;
  background: var(--green-500);
  transform-origin: left; transform: scaleX(0);
  transition: transform .35s var(--ease-soft);
}
.hc-link:hover::after { transform: scaleX(1); }
.hc-link .arrow { transition: transform .25s var(--ease-bounce); }
.hc-link:hover .arrow { transform: translateX(4px); }

/* ---- Row 3: bottom rail ---- */
.hc-row-bottom { padding: 0 0 22px; }

/* Stats strip */
.hc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: end;
  padding: 16px 0 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.hc-stat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 28px 0 0;
  position: relative;
}
.hc-stat:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: rgba(255,255,255,.08);
}
.hc-stat:not(:first-child) { padding-left: 28px; }
.hc-stat .lbl {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.hc-stat .val {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 2vw + .3rem, 2rem);
  line-height: 1; letter-spacing: -.025em;
  color: var(--cream-50);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.hc-stat .plus { color: var(--green-500); }

.hc-arrows { display: flex; gap: 8px; padding-left: 22px; align-self: end; padding-bottom: 2px; }
.hc-arrows button {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--cream-50);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s, color .2s;
}
.hc-arrows button:hover { background: var(--green-500); border-color: var(--green-500); color: var(--ink); transform: scale(1.06); }

@media (max-width: 800px) {
  .hc-stats { grid-template-columns: repeat(4, 1fr); }
  .hc-stat { padding-right: 14px; }
  .hc-stat:not(:first-child) { padding-left: 14px; }
  .hc-arrows { grid-column: 1 / -1; padding-left: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 10px; justify-content: flex-end; align-self: stretch; }
}

/* Segmented progress nav */
.hc-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 16px;
}
.hc-seg {
  background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; text-align: left;
}
.hc-seg .hc-seg-bar {
  display: block; height: 2px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  position: relative;
  border-radius: 1px;
}
.hc-seg .hc-seg-bar > i {
  display: block; height: 100%; width: 0;
  background: var(--green-500);
  transition: width .1s linear;
}
.hc-seg.on .hc-seg-bar { background: rgba(79,181,73,.18); }
.hc-seg.done .hc-seg-bar > i { width: 100%; transition: width .25s; }
.hc-seg .hc-seg-label {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--f-sans);
}
.hc-seg .num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: rgba(255,255,255,.45);
}
.hc-seg .lbl {
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
  color: rgba(255,255,255,.6);
  letter-spacing: -.01em;
  transition: color .25s;
}
.hc-seg:hover .lbl { color: var(--cream-50); }
.hc-seg.on .lbl { color: var(--cream-50); }
.hc-seg.on .num { color: var(--green-500); }

@media (max-width: 700px) {
  .hc-nav { gap: 8px; }
  .hc-seg .num { font-size: 10px; }
  .hc-seg .lbl { font-size: 12px; }
}

/* ============================================================
   v6 — SPLIT EDITORIAL HERO (hero2)
   ============================================================ */
.hero2 {
  position: relative;
  padding: 60px 0 80px;
  min-height: 92vh;
  overflow: hidden;
  background: var(--cream-50);
}
.hero2-mesh {
  position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 50% at 12% 22%, rgba(79,181,73,.22), transparent 65%),
    radial-gradient(ellipse 45% 50% at 88% 78%, rgba(230,57,70,.13), transparent 65%),
    radial-gradient(ellipse 40% 40% at 60% 5%,  rgba(255,255,255,.55), transparent 70%);
  filter: blur(30px);
}
.hero2-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center;
  min-height: calc(92vh - 140px);
}
@media (max-width: 960px) { .hero2-grid { grid-template-columns: 1fr; gap: 50px; } }

/* Counter pill above the title */
.hero2-counter {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em;
  color: var(--slate-500); margin-bottom: 30px;
}
.hero2-now  { color: var(--ink); font-weight: 600; font-size: 16px; }
.hero2-divider { width: 60px; height: 1px; background: var(--ink); opacity: .25; }
.hero2-total { font-weight: 500; }

/* Stacked slides — only active visible */
.hero2-slides { position: relative; }
.hero2-slide { display: none; }
.hero2-slide.active { display: block; }

.hero2-eyebrow {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--green-50); border: 1px solid var(--green-100);
  margin-bottom: 28px;
}

.hero2-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.8rem, 5vw + 1rem, 5.8rem);
  line-height: .97; letter-spacing: -.04em; color: var(--ink);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  margin: 0 0 28px;
}
.hero2-title .em { color: var(--green-700); font-style: italic; font-weight: 500; }
.hero2-title .red { color: var(--red-600); }
.hero2-line { display: inline-block; }

.hero2-lead { font-size: 1.18rem; line-height: 1.55; color: var(--slate-700); max-width: 540px; margin: 0 0 36px; }

.hero2-cta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* Slide nav at bottom of left column */
.hero2-nav {
  margin-top: 50px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.hero2-dot {
  padding: 14px 4px 0; text-align: left;
  border-top: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .35s var(--ease-soft), color .25s;
  cursor: pointer;
  position: relative;
}
.hero2-dot:hover { border-color: var(--slate-400); }
.hero2-dot.on { border-color: var(--green-500); }
.hero2-dot .num { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); letter-spacing: .12em; }
.hero2-dot .lbl { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: -.01em; }
.hero2-dot.on .num { color: var(--green-700); }
.hero2-dot .bar { display: none; }    /* not used here */
@media (max-width: 600px) { .hero2-nav { grid-template-columns: repeat(2, 1fr); } }

/* Photo stage on right */
.hero2-stage {
  position: relative;
  aspect-ratio: 4/5;
  perspective: 1500px;
}
@media (max-width: 960px) { .hero2-stage { aspect-ratio: 5/4; max-height: 500px; } }
.hero2-cards { position: absolute; inset: 0; }
.hero2-card {
  position: absolute; inset: 0;
  border-radius: 28px; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04);
  opacity: 0; transform: scale(.96) translateY(20px);
  transition: opacity .9s var(--ease-soft), transform 1.4s var(--ease-soft);
  pointer-events: none;
}
.hero2-card.active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; z-index: 2; }
.hero2-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, transparent 30%, rgba(0,0,0,.4) 100%);
}
/* Auto Ken-Burns on the active card */
.hero2-card.active { animation: kenBurns 9s linear forwards; }
@keyframes kenBurns {
  from { background-size: 105% auto; background-position: 50% 50%; }
  to   { background-size: 120% auto; background-position: 50% 45%; }
}

/* Live badge */
.hero2-badge {
  position: absolute; top: 24px; left: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.hero2-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 4px rgba(79,181,73,.18); animation: pulse 2s infinite; }

/* Mini stats panel on the card */
.hero2-stats {
  position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.18);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hero2-stats .cell { background: rgba(0,0,0,.35); padding: 12px 14px; color: #fff; }
.hero2-stats .lbl { display: block; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-bottom: 4px; }
.hero2-stats .val { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1; letter-spacing: -.02em; }

/* Big chapter number behind photo (subtle) */
.hero2-bignum {
  position: absolute; left: -7%; top: -8%; z-index: 1; pointer-events: none;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(10rem, 22vw, 26rem);
  line-height: .8; letter-spacing: -.08em;
  color: var(--ink); opacity: .05;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  user-select: none;
}

/* Scroll cue */
.hero2-scroll {
  position: absolute; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--slate-500); text-transform: uppercase;
  z-index: 3;
}
.hero2-scroll .line {
  width: 1px; height: 26px;
  background: linear-gradient(to bottom, var(--slate-500), transparent);
  animation: scrollHint 2.4s var(--ease-soft) infinite;
}

/* ============================================================
   MANIFESTO v9 — editorial poster (marquee + huge type + collage + quote)
   ============================================================ */
.manifesto {
  position: relative;
  padding: 0 0 90px;
  overflow: hidden;
  background: var(--cream-50);
}
@media (max-width: 700px) { .manifesto { padding: 0 0 60px; } }

/* --- Marquee tape (full-width scrolling stat ribbon) --- */
.mf-tape {
  background: var(--ink);
  color: var(--cream-50);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
  padding: 18px 0;
  margin-bottom: 90px;
  position: relative;
  isolation: isolate;
}
.mf-tape::before, .mf-tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2;
  pointer-events: none;
}
.mf-tape::before { left: 0;  background: linear-gradient(to right, var(--ink), transparent); }
.mf-tape::after  { right: 0; background: linear-gradient(to left,  var(--ink), transparent); }

.mf-tape-track {
  display: flex; gap: 32px; align-items: center;
  white-space: nowrap;
  animation: mfMarquee 42s linear infinite;
  width: max-content;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 2vw + .5rem, 2.2rem);
  letter-spacing: -.02em;
  color: var(--cream-50);
}
.mf-tape-track span { padding: 0 4px; }
.mf-tape-track .sep { color: var(--green-500); font-size: .65em; }
.mf-tape-track span:nth-child(odd):not(.sep) {
  /* No special — keep uniform; alt colour handled via :nth-of-type below */
}
.mf-tape-track > span:not(.sep):nth-of-type(2n) { color: var(--green-500); font-style: italic; font-weight: 600; }
@keyframes mfMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mf-tape:hover .mf-tape-track { animation-play-state: paused; }
@media (max-width: 700px) { .mf-tape { margin-bottom: 60px; padding: 14px 0; } }

/* --- Main grid: poster left + face stack right --- */
.mf-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center;
  margin-bottom: 90px;
}
@media (max-width: 960px) { .mf-grid { grid-template-columns: 1fr; gap: 60px; margin-bottom: 70px; } }

.mf-poster .eyebrow { margin-bottom: 32px; display: inline-flex; }

.mf-display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw + 1rem, 5.4rem);
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--ink);
  margin: 0 0 32px;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.mf-display .l { display: block; }
.mf-display .mf-mega {
  font-size: clamp(5rem, 12vw, 11rem);
  line-height: .85;
  letter-spacing: -.06em;
  background: linear-gradient(180deg, var(--green-500) 0%, var(--green-700) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
  position: relative;
  padding: .04em 0;
}
.mf-display .mf-ital {
  font-style: italic; font-weight: 500;
  color: var(--red-600);
  font-size: 1em;
}

.mf-sub {
  font-size: 1.1rem; line-height: 1.5; color: var(--slate-700);
  max-width: 480px; margin: 0;
}
.mf-sub strong { color: var(--green-700); font-weight: 700; }
.mf-sub .mf-cursor {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  color: var(--ink); position: relative; padding-right: 10px;
}
.mf-sub .mf-cursor::after {
  content: "→"; font-family: var(--f-sans); font-weight: 600;
  color: var(--green-700); margin-left: 6px;
  animation: mfArrow 1.4s var(--ease-bounce) infinite;
  display: inline-block;
}
@keyframes mfArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* --- Tilted face stack on the right --- */
.mf-stack {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 420px;
}
@media (max-width: 960px) { .mf-stack { max-width: 460px; margin: 0 auto; } }

.mf-card {
  position: absolute;
  width: 56%; aspect-ratio: 3/4;
  border-radius: 22px;
  background-size: cover; background-position: center;
  box-shadow: 0 22px 50px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04);
  transition: transform .4s var(--ease-soft), box-shadow .4s;
  overflow: hidden;
}
.mf-card:hover { z-index: 5 !important; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)) scale(1.04) !important; }
.mf-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,.7) 0%, transparent 50%);
}
.mf-card-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  color: var(--cream-50);
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mf-card-1 { top: 2%;  left: 18%; --r: -4deg;  transform: rotate(-4deg);  z-index: 2; }
.mf-card-2 { top: 8%;  right: 4%; --r:  6deg;  transform: rotate(6deg);   z-index: 3; }
.mf-card-3 { bottom: 4%; left: 4%; --r: -8deg; transform: rotate(-8deg);  z-index: 4; width: 50%; }
.mf-card-4 { bottom: 12%; right: 14%; --r: 3deg; transform: rotate(3deg); z-index: 1; width: 52%; }

.mf-stack-count {
  position: absolute; bottom: -12px; right: -10px; z-index: 6;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1rem; letter-spacing: -.01em;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--green-500);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.4);
  transform: rotate(-3deg);
}
@media (max-width: 500px) { .mf-stack { min-height: 360px; } }

/* --- Pull quote bar --- */
.mf-quote {
  position: relative;
  background: var(--ink); color: var(--cream-50);
  border-radius: var(--r-xl);
  padding: 60px 60px;
  display: grid; grid-template-columns: 60px 1fr auto; gap: 36px; align-items: center;
  overflow: hidden;
}
.mf-quote::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 50% at 15% 50%, rgba(79,181,73,.18), transparent 60%),
    radial-gradient(ellipse 30% 50% at 85% 50%, rgba(230,57,70,.10), transparent 60%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .mf-quote { grid-template-columns: 1fr; gap: 24px; padding: 40px 32px; border-radius: var(--r-lg); }
}
.mf-q-mark {
  font-family: var(--f-display); font-weight: 700;
  font-size: 7rem; line-height: .8;
  color: var(--green-500); opacity: .6;
  align-self: start;
}
.mf-q-text {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.4rem, 2vw + .4rem, 2.1rem);
  line-height: 1.25; letter-spacing: -.02em;
  color: var(--cream-50); margin: 0;
  font-style: italic;
}
.mf-q-em { color: var(--green-500); font-weight: 600; }
.mf-q-author {
  display: flex; align-items: center; gap: 14px;
  min-width: 240px;
}
.mf-q-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.mf-q-meta { display: flex; flex-direction: column; gap: 4px; }
.mf-q-meta strong { font-family: var(--f-sans); font-weight: 700; font-size: 15px; color: var(--cream-50); }
.mf-q-meta span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; color: rgba(255,255,255,.55); }

/* ============================================================
   NUMBERS v8 — visual composition (headline + 2 big photo cards + ribbon)
   ============================================================ */
.numbers {
  padding: 110px 0 130px;
  position: relative; overflow: hidden;
}
.numbers::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 40% 50% at 12% 25%, rgba(79,181,73,.10), transparent 60%),
    radial-gradient(ellipse 40% 40% at 88% 75%, rgba(230,57,70,.08), transparent 60%);
  filter: blur(40px); z-index: -1;
}
@media (max-width: 700px) { .numbers { padding: 80px 0 90px; } }

.nb-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  flex-wrap: wrap; margin-bottom: 56px;
}
.nb-headline {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
  line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink); margin: 0;
  max-width: 820px;
}
.nb-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-weight: 600; font-size: 14px; color: var(--ink);
  transition: transform .25s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .25s;
}
.nb-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.15); border-color: var(--green-500); color: var(--green-800); }
.nb-cta .arrow { transition: transform .25s var(--ease-bounce); }
.nb-cta:hover .arrow { transform: translateX(4px); }

/* Big photo stat cards */
.nb-big {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px;
  margin-bottom: 22px;
}
@media (max-width: 800px) { .nb-big { grid-template-columns: 1fr; } }

.nb-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  aspect-ratio: 16/10;
  min-height: 360px;
  background: var(--ink);
  isolation: isolate;
}
.nb-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 1s var(--ease-soft);
  z-index: 0;
}
.nb-card:hover .nb-img { transform: scale(1.12); }
.nb-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,15,15,.1) 0%, rgba(15,15,15,.3) 35%, rgba(15,15,15,.92) 100%);
}
.nb-pill {
  position: absolute; top: 24px; left: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.85);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
}
.nb-pill.on-dark {
  background: rgba(255,255,255,.12); color: var(--cream-50);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nb-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 32px 36px 30px;
  color: var(--cream-50);
}
.nb-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .9; letter-spacing: -.05em;
  color: var(--cream-50);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  display: inline-flex; align-items: baseline;
}
.nb-num.accent-green {
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.nb-num .unit {
  font-family: var(--f-display); font-weight: 600;
  font-size: .42em; margin-left: 6px; color: var(--green-500); letter-spacing: -.02em;
}
.nb-num.accent-green .unit {
  background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nb-lbl {
  margin-top: 12px;
  font-size: 1.05rem; line-height: 1.4;
  color: rgba(255,255,255,.88);
  max-width: 380px;
}

/* Stat ribbon */
.nb-ribbon {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 800px) { .nb-ribbon { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .nb-ribbon { grid-template-columns: 1fr; } }

.nb-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 30px 30px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .25s;
  position: relative;
  overflow: hidden;
}
.nb-stat:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.nb-stat::before {
  content: ""; position: absolute; left: 30px; top: 30px;
  width: 28px; height: 2px; background: var(--green-500);
  border-radius: 2px;
}
.nb-stat .num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  margin-top: 20px;
}
.nb-stat .lbl {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-500); font-weight: 500;
  margin-top: 6px;
}
.nb-stat.nb-stat-red { background: var(--red-500); border-color: var(--red-500); }
.nb-stat.nb-stat-red::before { background: var(--cream-50); }
.nb-stat.nb-stat-red .num { color: var(--cream-50); }
.nb-stat.nb-stat-red .lbl { color: rgba(255,255,255,.85); }
.nb-stat.nb-stat-red:hover { box-shadow: var(--glow-red); }

/* ============================================================
   MISSION v6 — symmetric 3x2 grid (legacy, no longer used on home)
   ============================================================ */
.mission2 { padding: 130px 0; position: relative; overflow: hidden; }
.mission2::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(ellipse 40% 40% at 15% 30%, rgba(79,181,73,.10), transparent 60%),
    radial-gradient(ellipse 35% 35% at 85% 70%, rgba(230,57,70,.08), transparent 60%);
  filter: blur(40px);
}
.mf-headline {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3.6rem);
  line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink); max-width: 880px;
}
.mf-headline .em { color: var(--green-700); }

.manifesto2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 50px;
}
@media (max-width: 800px) { .manifesto2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .manifesto2 { grid-template-columns: 1fr; } }
.m2-cell {
  padding: 36px 32px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .25s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .25s;
}
.m2-cell:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: transparent; }
.m2-cell .m2-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variation-settings: 'wdth' 100, 'opsz' 96;
}
.m2-cell .m2-suffix { font-family: var(--f-sans); font-size: .35em; vertical-align: middle; margin-left: 8px; font-weight: 600; color: var(--slate-500); }
.m2-cell .m2-lbl { font-size: 14.5px; color: var(--slate-500); line-height: 1.5; }

.m2-cell.big { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.m2-cell.big .m2-num { color: var(--green-500); font-size: clamp(3.5rem, 6vw, 5.4rem); }
.m2-cell.big .m2-lbl { color: rgba(255,255,255,.78); }

.m2-cell.green { background: var(--green-500); border-color: var(--green-500); }
.m2-cell.green .m2-num, .m2-cell.green .m2-lbl { color: var(--ink); }

.m2-cell.red { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.m2-cell.red .m2-num { color: #fff; }
.m2-cell.red .m2-lbl { color: rgba(255,255,255,.88); }
.m2-cell.red .m2-suffix { color: rgba(255,255,255,.6); }

/* ============================================================
   PROGRAM CARDS — symmetric 3-up with photo
   ============================================================ */
.program-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 960px) { .program-grid { grid-template-columns: 1fr; } }
.pgcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .25s;
  text-decoration: none;
  color: inherit;
}
.pgcard:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }
.pgcard .pgimg {
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.pgcard .pgimg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
  transition: opacity .35s;
}
.pgcard:hover .pgimg::after { opacity: .7; }
.pgcard .pgnum {
  position: absolute; top: 20px; left: 24px; z-index: 2;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.6rem; color: #fff; letter-spacing: -.02em;
  padding: 6px 14px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pgcard .pgbody {
  padding: 28px 28px 30px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.pgcard .pgkicker { font-family: var(--f-mono); font-size: 11.5px; color: var(--green-700); letter-spacing: .12em; text-transform: uppercase; }
.pgcard h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.02em; }
.pgcard p { color: var(--slate-500); font-size: 14.5px; margin: 0; flex: 1; line-height: 1.55; }
.pgcard .pglink {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px; color: var(--ink);
  position: relative;
}
.pgcard .pglink .arrow { transition: transform .3s var(--ease-bounce); }
.pgcard:hover .pglink .arrow { transform: translateX(5px); }

/* ============================================================
   SDG GRID v2 — clickable icons
   ============================================================ */
.sdg-grid-v2 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}
@media (max-width: 800px) { .sdg-grid-v2 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 460px) { .sdg-grid-v2 { grid-template-columns: repeat(4, 1fr); } }
.sdg-cell {
  position: relative;
  aspect-ratio: 1; padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-soft);
}
.sdg-cell:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 28px -10px rgba(0,0,0,.25); z-index: 3; }
.sdg-cell:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; }
.sdg-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   SDG MODAL
   ============================================================ */
.sdg-modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 28px;
}
.sdg-modal.open { display: flex; animation: modalIn .35s var(--ease-soft); }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.sdg-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(15,15,15,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.sdg-modal-card {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-xl);
  max-width: 760px; width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.6);
  animation: modalCardIn .45s var(--ease-bounce);
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.sdg-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-50); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s;
  z-index: 5;
}
.sdg-modal-close:hover { background: var(--ink); color: var(--cream-50); transform: rotate(90deg); }
.sdg-modal-grid {
  display: grid; grid-template-columns: 280px 1fr;
}
@media (max-width: 700px) { .sdg-modal-grid { grid-template-columns: 1fr; } }
.sdg-modal-icon {
  background: var(--cream-100);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sdg-modal-icon img { width: 100%; max-width: 220px; height: auto; }
@media (max-width: 700px) { .sdg-modal-icon { aspect-ratio: auto; padding: 30px; } .sdg-modal-icon img { max-width: 160px; } }
.sdg-modal-body { padding: 40px 36px; }
@media (max-width: 700px) { .sdg-modal-body { padding: 28px 24px; } }
.sdg-modal-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--slate-500); letter-spacing: .08em;
  margin-bottom: 14px;
}
.sdg-modal-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--slate-400); }
.sdg-modal-meta .num { color: var(--green-700); font-weight: 600; }
.sdg-modal-body h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.9rem; line-height: 1.1; letter-spacing: -.025em;
  margin: 0 0 14px; color: var(--ink);
}
.sdg-modal-tag {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: 1.15rem; line-height: 1.35;
  color: var(--green-700); margin: 0 0 18px;
}
.sdg-modal-desc { font-size: 15px; line-height: 1.7; color: var(--slate-700); margin: 0 0 28px; }
.sdg-modal-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

body.modal-open { overflow: hidden; }

/* ============================================================
   HOME v10 — mascot, scrollytelling, horizontal pin, bento, stack
   ============================================================ */

/* ---------- Hero: mascot peek + decorative orbs + scroll cue ---------- */
.hc-mascot {
  position: absolute; right: -40px; bottom: 90px;
  width: clamp(180px, 22vw, 320px); height: auto;
  z-index: 4; pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)) drop-shadow(0 0 30px rgba(79,181,73,.22));
  animation: hcMascotFloat 8s ease-in-out infinite;
  transform-origin: 60% 80%;
  opacity: .96;
  transition: transform .25s ease-out;
}
@media (max-width: 880px) { .hc-mascot { display: none; } }
@keyframes hcMascotFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(-1.5deg); }
}
.hc-orb {
  position: absolute; border-radius: 50%; z-index: 3;
  pointer-events: none; mix-blend-mode: screen; filter: blur(40px); opacity: .55;
}
.hc-orb-1 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(79,181,73,.55), transparent 65%); top: -120px; left: -100px; animation: hcOrb 14s ease-in-out infinite; }
.hc-orb-2 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(230,57,70,.45), transparent 65%); bottom: -80px; right: 18%; animation: hcOrb 18s ease-in-out -3s infinite reverse; }
.hc-orb-3 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(252,195,11,.5), transparent 65%); top: 30%; right: -60px; animation: hcOrb 16s ease-in-out -6s infinite; }
@keyframes hcOrb {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.15); }
}
.hc-scrollcue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 6; color: rgba(255,255,255,.78);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.hc-scrollcue .mouse {
  width: 18px; height: 28px; border: 1.5px solid rgba(255,255,255,.65); border-radius: 12px;
  position: relative;
}
.hc-scrollcue .mouse i {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 3px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.85);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ---------- TRAVELLING MASCOT — runs around the page ---------- */
.flying-mascot {
  position: fixed;
  left: 0; top: 0;
  width: 120px; height: auto;
  z-index: 60;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.28));
  transform: translate(-200px, 50vh) scale(1);
}
.flying-mascot img { width: 100%; height: auto; display: block; transform-origin: 60% 80%; }
.flying-mascot .fm-speech {
  position: absolute; bottom: 100%; left: 60%;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  border: 1.5px solid var(--line);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.25);
  white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .25s, transform .25s var(--ease-soft);
}
.flying-mascot.show-speech .fm-speech { opacity: 1; transform: translateY(-4px) scale(1); }
.flying-mascot.dance img { animation: fmDance 1s ease-in-out infinite; }
.flying-mascot.wave  img { animation: fmWave  1.3s ease-in-out infinite; }
.flying-mascot.run   img { animation: fmRun   .5s ease-in-out infinite; }
@keyframes fmDance {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(6deg) translateY(-8px); }
}
@keyframes fmWave {
  0%,100% { transform: rotate(-4deg); }
  50%     { transform: rotate(8deg); }
}
@keyframes fmRun {
  0%,100% { transform: translateY(0) skewX(0deg); }
  50%     { transform: translateY(-6px) skewX(-3deg); }
}
@media (max-width: 720px) { .flying-mascot { display: none; } }
@media (prefers-reduced-motion: reduce) { .flying-mascot { display: none; } }

/* ---------- WANGARI INTRO ---------- */
.wgi { position: relative; padding: 0 0 100px; background: var(--cream-50); overflow: hidden; }
.wgi-tape {
  display: flex; padding: 20px 0; background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.wgi-tape-track {
  display: inline-flex; gap: 26px; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--cream-50);
  animation: wgiTape 40s linear infinite;
  padding-left: 100vw;
}
.wgi-tape-track .sep { color: var(--green-500); }
@keyframes wgiTape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.wgi-grid {
  margin-top: 90px;
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: 60px; align-items: center;
}
@media (max-width: 880px) { .wgi-grid { grid-template-columns: 1fr; gap: 30px; } }

.wgi-mascot {
  position: relative; margin: 0; max-width: 380px; justify-self: center;
  isolation: isolate;
}
.wgi-mascot img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.18));
  transition: transform .3s ease-out;
}
.wgi-mascot-halo {
  position: absolute; inset: -8% -10% -2% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(79,181,73,.35), transparent 60%);
  filter: blur(30px);
  animation: hcOrb 8s ease-in-out infinite;
}
.wgi-bubble {
  position: absolute; top: 6%; right: -16%;
  background: var(--paper); padding: 14px 18px; border-radius: 18px 18px 6px 18px;
  border: 1.5px solid var(--line); box-shadow: 0 18px 36px -16px rgba(15,15,15,.25);
  max-width: 260px; font-size: 14px; line-height: 1.45; color: var(--ink);
  transform: rotate(2deg); animation: bubbleBob 4.5s ease-in-out infinite;
}
.wgi-bubble strong { display: block; font-family: var(--f-display); color: var(--green-700); margin-bottom: 2px; font-size: 15.5px; }
.wgi-bubble em { font-style: normal; color: var(--slate-500); font-size: 13px; }
@keyframes bubbleBob { 0%,100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
@media (max-width: 880px) { .wgi-bubble { right: 2%; max-width: 200px; } }

.wgi-copy .eyebrow {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green-700); display: inline-block; margin-bottom: 18px;
}
.wgi-h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.04;
  letter-spacing: -.025em; color: var(--ink); margin: 0;
}
.wgi-lead {
  margin-top: 22px; font-size: 1.05rem; line-height: 1.7;
  color: var(--slate-700); max-width: 560px;
}
.wgi-lead em { font-style: italic; color: var(--green-700); font-weight: 500; }
.wgi-quick { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.wgi-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--f-sans); font-weight: 600; font-size: 13.5px;
  color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease-soft), border-color .2s, background .2s;
}
.wgi-chip:hover { transform: translateY(-3px); border-color: var(--green-500); background: var(--green-50); }
.wgi-chip .num { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); }
.wgi-chip:hover .num { color: var(--green-700); }

/* split-chars: char-reveal */
.split-chars { overflow: hidden; }
.split-chars .sc-word { display: inline-block; white-space: nowrap; }
.split-chars .sc-char { display: inline-block; will-change: transform, opacity; }

/* ---------- FACES STRIP — dense image collage of African students ---------- */
.faces-strip { padding: 80px 0; background: var(--paper); overflow: hidden; }
.faces-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 38px; padding: 0 var(--gutter); max-width: 1280px; margin-left: auto; margin-right: auto; }
.faces-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.025em; margin: 6px 0 0; }
.faces-head h2 em { font-style: italic; color: var(--green-700); }
.faces-head .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-500); }
.faces-row {
  display: flex; gap: 14px;
  width: max-content;
  animation: facesScroll 50s linear infinite;
}
.faces-row.reverse { animation-direction: reverse; animation-duration: 60s; margin-top: 14px; }
/* Carousel keeps scrolling on hover (intentional) */
@keyframes facesScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.face-tile {
  flex: 0 0 auto; width: 220px; height: 280px; border-radius: 22px; overflow: hidden;
  background-size: cover; background-position: center;
  position: relative;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.25);
  transform: translateY(0) rotate(0deg);
  transition: transform .35s var(--ease-soft);
}
.face-tile:nth-child(odd)  { transform: translateY(0) rotate(-1.5deg); }
.face-tile:nth-child(even) { transform: translateY(20px) rotate(1deg); }
.face-tile:hover { transform: translateY(-10px) rotate(0); }
.face-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, transparent 50%, rgba(0,0,0,.55));
  pointer-events: none;
}
.face-tile .ft-cap {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  color: #fff; font-family: var(--f-sans); font-weight: 600; font-size: 14px;
  display: flex; justify-content: space-between; gap: 10px;
}
.face-tile .ft-cap em { font-family: var(--f-mono); font-style: normal; font-size: 11px; opacity: .8; letter-spacing: .05em; }

/* ---------- PINNED HORIZONTAL PILLARS ---------- */
.pillars { background: var(--ink); color: var(--cream-50); overflow: hidden; }
.pillars-stage {
  height: 100vh; min-height: 640px;
  width: 100%;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.pillars-track {
  display: flex; gap: 36px; padding: 0 8vw;
  will-change: transform;
}
@media (max-width: 880px) {
  .pillars-stage { height: auto; padding: 80px 0; }
  .pillars-track { flex-direction: column; padding: 0 24px; gap: 24px; }
}

.pillar {
  flex: 0 0 auto;
  width: min(780px, 78vw);
  height: 78vh; min-height: 540px;
  border-radius: 28px; overflow: hidden;
  position: relative;
}
@media (max-width: 880px) { .pillar { width: 100%; height: auto; min-height: 0; aspect-ratio: 4/5; } }

.pillar-intro {
  background: linear-gradient(155deg, var(--green-500), var(--green-700) 55%, #1a3a18);
  color: var(--ink-900);
  padding: 60px 50px;
  display: flex; flex-direction: column; justify-content: space-between;
  width: min(520px, 78vw);
}
.pillar-intro .eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(15,15,15,.7);
}
.pillar-h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.0;
  letter-spacing: -.03em; margin: 22px 0 0;
  color: var(--ink-900);
}
.pillar-h .ital { font-style: italic; font-weight: 500; color: #fff; }
.pillar-sub {
  font-size: 1.02rem; line-height: 1.65; color: rgba(15,15,15,.78);
  margin: 22px 0 0; max-width: 380px;
}
.pillar-arrow {
  display: inline-block; font-size: 80px; color: var(--ink-900); line-height: 1;
  font-family: var(--f-display); font-weight: 300;
  align-self: flex-end;
}

.pillar-card {
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: 56% 44%;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
@media (max-width: 880px) { .pillar-card { grid-template-rows: 240px 1fr; } }
.pillar-img {
  background-size: cover; background-position: center;
  position: relative;
}
.pillar-img::after {
  content: ""; position: absolute; inset: auto 0 0; height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent);
}
.pillar-body {
  padding: 32px 38px 36px;
  display: flex; flex-direction: column;
}
.pillar-meta { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.pillar-num {
  font-family: var(--f-mono); font-size: 13px; color: var(--green-700);
  letter-spacing: .15em; font-weight: 600;
}
.pillar-kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--slate-500);
}
.pillar-body h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 12px;
}
.pillar-body > p {
  font-size: 14.5px; line-height: 1.6; color: var(--slate-700);
  margin: 0 0 16px;
}
.pillar-bullets {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.pillar-bullets li {
  position: relative; padding-left: 22px; font-size: 13.5px; color: var(--slate-700);
  line-height: 1.55;
}
.pillar-bullets li::before {
  content: "→"; position: absolute; left: 0; top: 0; color: var(--green-700); font-weight: 700;
}
.pillar-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- BENTO STATS ---------- */
.bento-sec { background: var(--cream-50); }
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 130px;
  gap: 18px;
  margin-top: 40px;
}
.bento-cell {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 22px; padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: inherit; text-decoration: none;
  transition: transform .35s var(--ease-soft), box-shadow .35s, border-color .25s;
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(15,15,15,.22); border-color: transparent; }
.bento-cell.tilt { will-change: transform; }
.bn-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.03em;
  color: var(--ink); display: flex; align-items: baseline; gap: 4px;
}
.bn-num .plus { color: var(--green-700); font-size: .6em; }
.bn-lbl { font-size: 13.5px; line-height: 1.45; color: var(--slate-700); }
.bn-arr { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--green-700); margin-top: 10px; }
.bento-cell:hover .bn-arr { color: var(--ink); }
.bento-cell.accent-red { background: var(--red-50); border-color: var(--red-100); }
.bento-cell.accent-red .bn-num { color: var(--red-700); }
.bento-cell.accent-red .bn-arr { color: var(--red-700); }

.bento-1 { grid-column: span 4; grid-row: span 2; }
.bento-2 { grid-column: span 4; grid-row: span 2; background: var(--ink); color: var(--cream-50); border-color: transparent; }
.bento-2 .bn-num { color: var(--cream-50); }
.bento-2 .bn-lbl { color: rgba(251,248,242,.7); }
.bento-2 .bn-arr { color: var(--green-500); }
.bento-3 { grid-column: span 4; grid-row: span 2; }
.bento-4 {
  grid-column: span 5; grid-row: span 3;
  background-size: cover; background-position: center;
  border: 0; min-height: 320px; color: #fff;
  padding: 0;
}
.bento-4::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, transparent 30%, rgba(0,0,0,.55));
  pointer-events: none;
}
.bento-4 .bn-tag {
  position: absolute; top: 18px; left: 22px; z-index: 2;
  background: rgba(0,0,0,.4); color: #fff; backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px;
  font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.bento-4 .bn-proj {
  position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2;
  font-family: var(--f-display); font-weight: 700; font-size: 1.8rem;
  letter-spacing: -.02em; color: #fff;
}
.bento-5 { grid-column: span 4; grid-row: span 2; }
.bento-6 { grid-column: span 3; grid-row: span 2; background: var(--green-500); border-color: var(--green-600); }
.bento-6 .bn-num, .bento-6 .bn-arr { color: var(--ink-900); }
.bento-6 .bn-lbl { color: var(--ink); }
.bento-7 { grid-column: span 7; grid-row: span 1; flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 28px; }
.bento-7 .bn-num { font-size: 2rem; }
.bento-7 .bn-lbl { flex: 1; padding: 0 24px; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; }
  .bento-1, .bento-2, .bento-3, .bento-5 { grid-column: span 3; grid-row: span 2; }
  .bento-4 { grid-column: span 6; grid-row: span 3; min-height: 280px; }
  .bento-6 { grid-column: span 3; grid-row: span 2; }
  .bento-7 { grid-column: span 6; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; }
  .bento-7 .bn-lbl { padding: 0; }
}

/* ---------- STACKED WINNERS ---------- */
.winners-stack { padding: 120px 0 80px; background: var(--paper); position: relative; }
.ws-head { max-width: 1180px; margin: 0 auto 60px; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px; }
.ws-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em; margin: 8px 0 0; }
.ws-head .accent { color: var(--green-700); font-style: italic; }
.ws-head .eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-500); }
.ws-stack { position: relative; max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }
.ws-card {
  position: sticky; top: 110px;
  display: grid; grid-template-columns: 1fr 1.05fr;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 28px; overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 30px 70px -30px rgba(15,15,15,.25);
  transform-origin: top center;
}
.ws-card[data-i="0"] { background: var(--cream-100); }
.ws-card[data-i="1"] { background: var(--paper); }
.ws-card[data-i="2"] { background: linear-gradient(160deg, var(--red-50), var(--paper) 65%); }
.ws-img { min-height: 360px; background-size: cover; background-position: center top; }
.ws-body { padding: 40px 44px 44px; display: flex; flex-direction: column; justify-content: center; }
.ws-badge {
  display: inline-block; align-self: flex-start;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--ink); color: var(--green-500); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.ws-card[data-i="0"] .ws-badge { background: var(--green-500); color: var(--ink-900); }
.ws-body h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; margin: 0;
}
.ws-proj {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: 1.25rem; color: var(--green-700); margin: 10px 0 18px;
}
.ws-meta { font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); letter-spacing: .04em; margin: 0 0 22px; }
.ws-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 14px;
  color: var(--ink); text-decoration: none; padding: 10px 16px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  transition: background .2s, color .2s, transform .2s;
}
.ws-link:hover { background: var(--ink); color: var(--cream-50); transform: translateX(4px); }
.ws-link .arrow { transition: transform .25s; }
.ws-link:hover .arrow { transform: translateX(4px); }
@media (max-width: 880px) {
  .ws-card { position: relative; top: auto; grid-template-columns: 1fr; }
  .ws-img { min-height: 240px; }
  .ws-body { padding: 28px; }
}

/* ---------- JOURNEY scrollyte ---------- */
.journey { background: var(--cream-50); padding: 120px 0; position: relative; }
.journey-wrap { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 80px; align-items: start; }
@media (max-width: 880px) { .journey-wrap { grid-template-columns: 1fr; gap: 40px; } }

.journey-pin {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 20px;
}
.journey-pin .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--green-700); }
.journey-h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em;
  margin: 0; color: var(--ink);
}
.journey-h em { font-style: italic; font-weight: 500; color: var(--green-700); }
.journey-mascot { margin: 18px 0 0; max-width: 280px; }
.journey-mascot img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.15));
  transition: transform .3s ease-out;
}
.journey-progress {
  display: inline-flex; gap: 4px; padding: 8px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--f-mono); font-size: 13px; color: var(--ink); width: fit-content;
}
.journey-progress .now { color: var(--green-700); font-weight: 700; }
.journey-progress .dim { color: var(--slate-400); }

.journey-beats { display: flex; flex-direction: column; gap: 80px; padding-top: 20px; }
.journey-beat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 36px 40px;
  position: relative;
  opacity: .4;
  transition: opacity .4s, border-color .4s, box-shadow .4s;
}
.journey-beat.on {
  opacity: 1; border-color: var(--green-500);
  box-shadow: 0 20px 50px -22px rgba(79,181,73,.35);
}
.journey-beat .jb-photo {
  height: 200px; width: calc(100% + 80px); margin: -36px -40px 24px;
  background-size: cover; background-position: center;
  border-radius: 22px 22px 0 0;
}
.jb-year {
  font-family: var(--f-display); font-weight: 700; font-style: italic;
  font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1;
  color: var(--green-700); display: block; margin-bottom: 14px;
}
.journey-beat h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.12;
  letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink);
}
.journey-beat p { font-size: 15px; line-height: 1.7; color: var(--slate-700); margin: 0; }
.jb-num {
  position: absolute; top: 24px; right: 32px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-400); letter-spacing: .12em;
}
@media (max-width: 880px) { .journey-beats { gap: 30px; } .journey-beat { padding: 28px 24px; opacity: 1; } .journey-beat .jb-photo { width: calc(100% + 48px); margin: -28px -24px 20px; } }

/* ---------- FINAL CTA with mascot ---------- */
.final-cta { padding: 80px 0 120px; background: var(--cream-50); }
.fc-card {
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, #1a1a1a 60%, var(--green-700));
  color: var(--cream-50);
  border-radius: 36px; padding: 70px 80px;
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.7fr; gap: 50px;
  align-items: center;
}
@media (max-width: 880px) { .fc-card { grid-template-columns: 1fr; padding: 50px 32px; gap: 30px; text-align: center; } }
.fc-card::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.6), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.fc-mascot { position: relative; margin: 0; max-width: 320px; justify-self: center; }
.fc-mascot img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.5));
  transition: transform .3s ease-out;
}
.fc-mascot-wave {
  position: absolute; top: -10px; right: -10px;
  font-size: 42px;
  animation: cwave 2.6s ease-in-out infinite;
  transform-origin: 70% 80%;
}
@keyframes cwave {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(18deg); }
  40%      { transform: rotate(-12deg); }
  60%      { transform: rotate(18deg); }
  80%      { transform: rotate(-6deg); }
}
.fc-body .tag.glass { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.fc-h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.03em;
  margin: 16px 0 18px; color: #fff;
}
.fc-h .h { font-style: italic; color: var(--green-500); }
.fc-body > p { font-size: 1.05rem; line-height: 1.65; color: rgba(251,248,242,.78); margin: 0 0 24px; max-width: 520px; }
@media (max-width: 880px) { .fc-body > p { margin-left: auto; margin-right: auto; } }
.fc-cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
@media (max-width: 880px) { .fc-cta { justify-content: center; } }
.fc-cta .btn-link { color: rgba(251,248,242,.85); }
.fc-cta .btn-link:hover { color: var(--green-500); }

/* Reduced motion: kill animations */
@media (prefers-reduced-motion: reduce) {
  .hc-mascot, .hc-orb, .wgi-mascot-halo, .wgi-bubble, .fc-mascot-wave { animation: none !important; }
  .wgi-tape-track, .marquee, .faces-row { animation: none !important; }
  .hc-scrollcue .mouse i { animation: none !important; }
}

/* ---------- Floating photo bubbles around Wangari intro mascot ---------- */
.wgi-pic {
  position: absolute;
  background-size: cover; background-position: center;
  border-radius: 22px;
  box-shadow: 0 16px 34px -14px rgba(15,15,15,.4);
  border: 3px solid var(--paper);
  z-index: 2; pointer-events: none;
}
.wgi-pic-1 { width: 100px; height: 120px; top: -20px;   left: -40px;  transform: rotate(-6deg); animation: wgPic 7s ease-in-out infinite; }
.wgi-pic-2 { width: 90px;  height: 110px; bottom: 30px; left: -50px;  transform: rotate(8deg);  animation: wgPic 9s ease-in-out -2s infinite reverse; }
.wgi-pic-3 { width: 110px; height: 90px;  bottom: -10px; right: 10px; transform: rotate(-4deg); animation: wgPic 8s ease-in-out -4s infinite; }
.wgi-pic-4 { width: 80px;  height: 100px; top: 40%;     right: -50px; transform: rotate(6deg);  animation: wgPic 10s ease-in-out -3s infinite reverse; }
@keyframes wgPic {
  0%,100% { transform: translateY(0) rotate(var(--r,0deg)); }
  50%     { transform: translateY(-10px) rotate(var(--r,0deg)); }
}
.wgi-pic-1 { --r: -6deg; }
.wgi-pic-2 { --r: 8deg; }
.wgi-pic-3 { --r: -4deg; }
.wgi-pic-4 { --r: 6deg; }
@media (max-width: 720px) { .wgi-pic { display: none; } }

/* ---------- Final CTA: photo bubbles + avatar row ---------- */
.fc-pic {
  position: absolute;
  background-size: cover; background-position: center;
  border-radius: 18px; border: 3px solid var(--cream-50);
  box-shadow: 0 14px 26px -10px rgba(0,0,0,.5);
  pointer-events: none; z-index: 2;
}
.fc-pic-1 { width: 80px;  height: 90px;  top: 0;     left: -40px;  transform: rotate(-8deg); animation: wgPic 8s ease-in-out infinite; --r:-8deg; }
.fc-pic-2 { width: 90px;  height: 70px;  bottom: 30px; right: -40px; transform: rotate(6deg); animation: wgPic 10s ease-in-out -2s infinite reverse; --r:6deg; }
.fc-pic-3 { width: 70px;  height: 90px;  bottom: -10px; left: 30px; transform: rotate(-4deg); animation: wgPic 9s ease-in-out -4s infinite; --r:-4deg; }
@media (max-width: 720px) { .fc-pic { display: none; } }

.fc-avatars {
  display: inline-flex; align-items: center; gap: 0; margin-top: 28px;
  background: rgba(255,255,255,.08); padding: 8px 16px 8px 8px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
}
.fc-av {
  width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ink);
  background-size: cover; background-position: center top;
  margin-left: -10px;
  transition: transform .25s var(--ease-soft);
}
.fc-av:first-child { margin-left: 0; }
.fc-avatars:hover .fc-av { transform: translateY(-3px); }
.fc-av-more {
  margin-left: 14px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(251,248,242,.85);
}
@media (max-width: 880px) { .fc-avatars { margin-top: 20px; } }


/* ============================================================
   MLBT MASCOT v2 — real PNG, CSS animations
   ============================================================ */
.mascot {
  display: inline-block;
  position: relative;
  line-height: 0;
  filter: drop-shadow(0 12px 16px rgba(46,122,42,.22));
  transform-origin: 50% 90%;
}
.mascot img { width: 100%; height: auto; display: block; }

/* IDLE — gentle breathing */
@keyframes msIdle { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.02); } }
.mascot--idle { animation: msIdle 4s ease-in-out infinite; }

/* WAVE — tilts side-to-side as if waving the whole body */
@keyframes msWave { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-6px); } }
.mascot--wave { animation: msWave 1.4s ease-in-out infinite; }

/* DANCE — wider, faster sway with vertical pop */
@keyframes msDance { 0%,100% { transform: rotate(-9deg) translateY(0) scale(1); } 50% { transform: rotate(9deg) translateY(-8px) scale(1.04); } }
.mascot--dance { animation: msDance 0.85s ease-in-out infinite; }

/* RUN — vertical hop + forward lean */
@keyframes msRun { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(-4deg); } }
.mascot--run { animation: msRun 0.4s ease-in-out infinite; }

/* POINT — tilt forward, still */
.mascot--point { transform: rotate(-8deg); }

@media (prefers-reduced-motion: reduce) { .mascot { animation: none !important; transform: none !important; } }

/* ============================================================
   HOME v12 — kill mascot mass, tighten white space,
   image-fill every card, redesign carousels
   ============================================================ */

/* ---------- AGGRESSIVE SPACING CUTS ---------- */
.section          { padding-block: 56px !important; }
.section.tight    { padding-block: 36px !important; }
.wgi              { padding: 0 0 40px !important; }
.wgi-grid         { margin-top: 44px !important; gap: 44px !important; }
.bento-sec        { padding: 48px 0 !important; }
.winners-stack    { padding: 56px 0 40px !important; }
.winners-stack .ws-head { margin-bottom: 36px !important; }
.journey          { padding: 60px 0 !important; }
.journey-beats    { gap: 48px !important; padding-top: 0 !important; }
.faces-strip      { padding: 40px 0 !important; }
.faces-head       { margin-bottom: 24px !important; }
.partners-rich    { padding: 60px 0 !important; }
.prh-head         { margin: 0 auto 32px !important; }
.final-cta        { padding: 40px 0 80px !important; }
.section-head     { margin-bottom: 28px !important; }
.fc-card          { padding: 50px 60px !important; }
@media (max-width: 880px) { .fc-card { padding: 36px 24px !important; } }

/* Hero scroll cue should sit at very bottom and not push padding */
.hc-row-bottom { padding-bottom: 8px !important; }

/* ---------- KILL old SVG-mascot animations + body sub-parts (PNG now) ---------- */
.mascot .m-body, .mascot .m-arm, .mascot .m-leg, .mascot .m-eye,
.mascot .m-shadow, .mascot .m-face { animation: none !important; transform: none !important; }

/* ---------- KILL all the floating image-bubbles around old mascots ---------- */
.wgi-pic, .wgi-mascot-halo, .wgi-bubble, .fc-pic, .fc-mascot-wave, .hc-mascot { display: none !important; }

/* ---------- WGI: 4-tile photo collage instead of mascot ---------- */
.wgi-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  aspect-ratio: 1/1;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.wgc-tile {
  position: relative;
  border-radius: 22px;
  background-size: cover; background-position: center;
  box-shadow: 0 22px 40px -22px rgba(15,15,15,.32);
  overflow: hidden;
  transition: transform .35s var(--ease-soft);
}
.wgc-tile:hover { transform: scale(1.03); z-index: 2; }
.wgc-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, transparent 55%, rgba(0,0,0,.55));
  pointer-events: none;
}
.wgc-tag {
  position: absolute; bottom: 10px; left: 12px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(8px);
  padding: 5px 10px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.wgc-1 { transform: translateY(-12px) rotate(-2deg); }
.wgc-2 { transform: translateY(8px)  rotate(2deg); }
.wgc-3 { transform: translateY(0)    rotate(1.5deg); }
.wgc-4 { transform: translateY(-6px) rotate(-1deg); }
.wgc-tile:hover { transform: scale(1.04) rotate(0); }
.wgc-mini-mascot {
  position: absolute; bottom: -22px; right: -22px; z-index: 5;
  pointer-events: none;
}
@media (max-width: 880px) { .wgi-collage { max-width: 380px; } }

/* ---------- PILLAR INTRO with hero photo ---------- */
.pillar-intro {
  padding: 0 !important;
  width: min(560px, 80vw) !important;
  display: grid !important;
  grid-template-rows: 220px 1fr;
}
.pi-photo {
  background-size: cover; background-position: center;
  position: relative;
}
.pi-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(46,122,42,.85), transparent);
}
.pi-body {
  padding: 32px 44px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(155deg, var(--green-500), var(--green-700));
}
.pi-body .eyebrow { color: rgba(15,15,15,.7); }

/* ---------- FINAL CTA: photo grid instead of single mascot ---------- */
.fc-visual {
  position: relative;
  justify-self: center;
  max-width: 360px; width: 100%;
}
.fc-pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  aspect-ratio: 1/1;
}
.fc-pcell {
  background-size: cover; background-position: center top;
  border-radius: 18px;
  box-shadow: 0 16px 32px -14px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-soft);
}
.fc-pcell:nth-child(1) { transform: rotate(-2deg); }
.fc-pcell:nth-child(2) { transform: rotate(2deg); }
.fc-pcell:nth-child(3) { transform: rotate(1.5deg); }
.fc-pcell:nth-child(4) { transform: rotate(-1deg); }
.fc-pgrid:hover .fc-pcell { transform: rotate(0) scale(1.02); }
.fc-mascot-mini {
  position: absolute; bottom: -34px; right: -28px; z-index: 5;
  pointer-events: none;
}

/* ---------- REDESIGNED faces strip: varied tile sizes ---------- */
.faces-row {
  display: flex; gap: 10px;
  align-items: center;
  width: max-content;
  animation: facesScroll 60s linear infinite;
}
.faces-row.reverse { animation-direction: reverse; animation-duration: 75s; margin-top: 10px; }
.face-tile {
  flex: 0 0 auto;
  border-radius: 18px;
  background-size: cover; background-position: center;
  position: relative;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.25);
  transition: transform .35s var(--ease-soft), box-shadow .35s;
}
.face-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, transparent 55%, rgba(0,0,0,.55));
  pointer-events: none; border-radius: inherit;
}
.face-tile:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 22px 40px -16px rgba(0,0,0,.35);
  z-index: 5;
}
/* Vary sizes — every nth tile is bigger/smaller for visual rhythm */
.face-tile:nth-child(3n+1) { width: 180px; height: 220px; }
.face-tile:nth-child(3n+2) { width: 220px; height: 280px; }
.face-tile:nth-child(3n+3) { width: 160px; height: 200px; }
.face-tile:nth-child(odd)  { margin-top: 12px; }
.face-tile:nth-child(even) { margin-top: -12px; }
.faces-row.reverse .face-tile:nth-child(3n+1) { width: 200px; height: 260px; }
.faces-row.reverse .face-tile:nth-child(3n+2) { width: 170px; height: 210px; }
.faces-row.reverse .face-tile:nth-child(3n+3) { width: 230px; height: 290px; }
.face-tile .ft-cap {
  position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 2;
  color: #fff;
  display: flex; justify-content: space-between; gap: 10px; align-items: flex-end;
}
.face-tile .ft-cap span { font-family: var(--f-sans); font-weight: 700; font-size: 13px; }
.face-tile .ft-cap em   { font-family: var(--f-mono); font-style: normal; font-size: 10.5px; opacity: .8; letter-spacing: .04em; }

/* ---------- ADVISORS grid — tighter, less white space ---------- */
.section.tight .advisors { gap: 0; }

/* ---------- Wangari-tape: cut some padding ---------- */
.wgi-tape { padding: 14px 0 !important; }
.wgi-tape-track { animation-duration: 50s !important; }

/* ---------- Mascot drop-shadow muted everywhere by default ---------- */
.mascot { filter: drop-shadow(0 10px 14px rgba(46,122,42,.2)); }
.fm-svg { width: 120px !important; }
.fm-svg img { width: 100%; height: auto; }

/* Flying mascot wrapper: re-anchor for PNG */
.flying-mascot { width: 120px !important; height: auto !important; }
.flying-mascot .mascot, .flying-mascot img { width: 100% !important; height: auto !important; }

/* ============================================================
   HOME v13 — re-restored partners-rich + bento accents
   ============================================================ */

/* PARTNERS RICH cluster */
.partners-rich    { padding: 60px 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prh-head { text-align: center; max-width: 700px; margin: 0 auto 32px; }
.prh-head .eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-700); display: inline-block; margin-bottom: 14px;
}
.prh-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.prh-head h2 em { font-style: italic; color: var(--green-700); }
.prh-head p { color: var(--slate-500); font-size: 1rem; margin: 16px 0 0; }
.prh-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1200px; margin: 0 auto;
}
@media (max-width: 880px) { .prh-grid { grid-template-columns: 1fr; } }
.prh-tile {
  position: relative;
  display: grid; grid-template-columns: 110px 1fr; gap: 20px;
  padding: 20px; border: 1.5px solid var(--line); border-radius: 22px;
  background: var(--cream-50);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease-soft), border-color .25s, box-shadow .3s, background .25s;
  overflow: hidden;
  min-height: 130px;
}
.prh-tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--green-500), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.prh-tile:hover {
  transform: translateY(-5px); border-color: var(--green-500);
  box-shadow: 0 24px 50px -22px rgba(15,15,15,.22); background: var(--paper);
}
.prh-tile:hover::before { opacity: .08; }
.prh-logo {
  width: 110px !important; height: 110px !important;
  border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 10px; position: relative; z-index: 1;
  flex-shrink: 0;
}
.prh-logo img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; }
.prh-meta { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.prh-meta h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em; margin: 0 0 6px; color: var(--ink); }
.prh-meta p { font-size: 13px; color: var(--slate-700); line-height: 1.5; margin: 0 0 10px; }
.prh-arr { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--green-700); }

/* BENTO image accents */
.bento-cell { isolation: isolate; position: relative; }
.bn-bg {
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  background-size: cover !important; background-position: center !important;
  opacity: .12; transition: opacity .35s var(--ease-soft);
  filter: saturate(.85);
  pointer-events: none;
}
.bento-cell:hover .bn-bg { opacity: .25; }
.bento-cell.bento-2:hover .bn-bg { opacity: .35; }
.bn-num, .bn-lbl, .bn-arr, .bn-stack, .bn-sdgs, .bn-avstack, .bn-mini { position: relative; z-index: 1; }

.bn-stack { display: inline-flex !important; align-self: flex-start !important; width: auto !important; max-width: 100%; }
.bn-stack > span {
  width: 38px !important; height: 38px !important; border-radius: 12px;
  background-size: cover; background-position: center top;
  border: 2.5px solid var(--paper);
  margin-left: -10px; flex-shrink: 0;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.25);
}
.bn-stack > span:first-child { margin-left: 0; }

.bn-sdgs { display: flex !important; gap: 4px; flex-wrap: wrap; align-self: flex-start !important; width: auto !important; max-width: 100%; }
.bn-sdgs img { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.15); flex-shrink: 0; }

.bn-avstack { display: inline-flex !important; align-self: flex-start !important; width: auto !important; max-width: 100%; }
.bn-avstack > span {
  width: 30px !important; height: 30px !important; border-radius: 50%;
  background-size: cover; background-position: center top;
  border: 2.5px solid var(--green-500);
  margin-left: -8px; flex-shrink: 0;
}
.bn-avstack > span:first-child { margin-left: 0; }

.bn-mini {
  width: 56px !important; height: 56px !important; border-radius: 14px;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}

/* Hide old marquee partners (replaced by partners-rich) */
.partners + .partners-rich { display: none; }

/* SDG cells in the modal section — keep them visible */
.sdg-grid-v2 img { width: 100%; height: auto; }

/* ============================================================
   WANGARI ASSISTANT v2 — multistep popup
   ============================================================ */
.wn-head-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-500);
  object-fit: cover; object-position: center 25%;
  border: 2px solid rgba(255,255,255,.2);
}

/* Hide chat-only elements during intro */
.wangari[data-stage="intro"] .wn-chat { display: none; }
.wangari[data-stage="chat"]  .wn-stepper { display: none; }
.wangari[data-stage="chat"]  .wn-step-panel { display: none; }

/* Stepper */
.wn-stepper {
  display: flex; gap: 8px; padding: 16px 22px 0;
  background: var(--paper);
}
.wn-step {
  flex: 1; height: 4px; border-radius: 4px;
  background: var(--line); transition: background .3s;
}
.wn-step.on { background: var(--green-500); }

/* Step panels */
.wn-step-panel {
  display: none;
  flex-direction: column;
  padding: 24px 24px 22px;
  flex: 1; overflow-y: auto;
}
.wn-step-panel.on { display: flex; }

.wn-illu {
  position: relative;
  align-self: center;
  width: 120px; height: 200px;
  margin-bottom: 4px;
}
.wn-illu-mascot {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 22px rgba(46,122,42,.4));
  animation: wnWave 1.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.wn-illu-burst {
  position: absolute; inset: -10px; z-index: -1;
  background: radial-gradient(circle, rgba(79,181,73,.35), transparent 65%);
  filter: blur(20px);
  animation: wnGlow 3s ease-in-out infinite;
}

.wn-h {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.45rem; line-height: 1.15; letter-spacing: -.015em;
  margin: 0 0 12px; color: var(--ink);
}
.wn-h .em { font-style: italic; color: var(--green-700); font-weight: 600; }
.wn-p {
  font-size: 14px; line-height: 1.55; color: var(--slate-700);
  margin: 0 0 22px;
}
.wn-note {
  font-size: 12px; color: var(--slate-500);
  margin: 8px 0 0; text-align: center; font-style: italic;
}

/* Paths grid (step 2) */
.wn-paths {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.wn-path {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--cream-50); border: 1.5px solid var(--line); border-radius: 14px;
  text-align: left; cursor: pointer;
  transition: transform .2s var(--ease-soft), border-color .2s, background .2s;
  font-family: var(--f-sans);
}
.wn-path:hover {
  transform: translateY(-2px);
  border-color: var(--green-500);
  background: var(--paper);
}
.wn-path-ico { font-size: 22px; flex-shrink: 0; }
.wn-path-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wn-path-body strong {
  font-family: var(--f-display); font-weight: 700; font-size: 13.5px;
  color: var(--ink); display: block;
}
.wn-path-body em {
  font-style: normal; font-size: 11.5px; color: var(--slate-500);
  margin-top: 2px;
}

/* Language picker (step 3) */
.wn-langs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.wn-lang {
  padding: 12px 14px;
  background: var(--cream-50); border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 13.5px;
  color: var(--ink);
  transition: all .2s var(--ease-soft);
}
.wn-lang:hover { border-color: var(--green-500); }
.wn-lang.on {
  background: var(--green-500); color: var(--ink-900);
  border-color: var(--green-600);
  box-shadow: 0 6px 16px -6px rgba(79,181,73,.5);
}

/* Action rows */
.wn-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px;
}
.wn-actions-tight { padding-top: 8px; }
.wn-btn-primary {
  flex: 1;
  padding: 12px 18px;
  background: var(--ink); color: var(--cream-50);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  transition: transform .2s, background .2s;
}
.wn-btn-primary:hover { background: var(--green-700); transform: translateY(-2px); }
.wn-btn-skip, .wn-btn-text {
  background: none; border: 0; cursor: pointer;
  color: var(--slate-500); font-family: var(--f-sans);
  font-size: 13px; padding: 8px 4px;
  transition: color .2s;
}
.wn-btn-skip:hover, .wn-btn-text:hover { color: var(--ink); }

/* Chat reveal (step "chat") */
.wn-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wn-chat .wn-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.wn-chat .wn-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.wn-chat .wn-input input {
  flex: 1; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--f-sans); font-size: 14px; outline: none;
  transition: border-color .2s;
}
.wn-chat .wn-input input:focus { border-color: var(--green-500); }
.wn-chat .wn-send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.wn-chat .wn-send:hover { background: var(--green-600); transform: scale(1.06); }
.wn-guest-note {
  font-size: 12px; color: var(--slate-500);
  margin: 0; padding: 8px 18px 14px;
  text-align: center; border-top: 1px solid var(--line); background: var(--cream-50);
}
.wn-guest-note a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.wn-guest-note a:hover { text-decoration: underline; }

/* Body messages */
.wn-msg { margin-bottom: 14px; max-width: 85%; }
.wn-msg-bot {
  background: var(--cream-100); padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.wn-msg-user {
  background: var(--ink); color: var(--cream-50);
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  margin-left: auto;
  font-size: 14px; line-height: 1.5;
}
.wn-msg p { margin: 0 0 6px; }
.wn-msg p:last-child { margin-bottom: 0; }
.wn-typing { display: inline-flex; gap: 4px; padding: 12px 16px !important; }
.wn-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-400);
  animation: wnTyping 1.4s ease-in-out infinite;
}
.wn-typing span:nth-child(2) { animation-delay: .2s; }
.wn-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes wnTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wn-fab-img, .wn-fab-pulse, .wn-illu-mascot, .wn-illu-burst { animation: none !important; }
}

/* ============================================================
   v14 — script-italic accent (matches logo font feel)
   ============================================================ */

/* Italic / em in display headings → Caveat (matches logo's casual marker feel) */
h1 em, h2 em, h3 em,
.italic, .pi-script, .ital,
.section-head h2 em,
.fc-h .h, .hc-line.em em {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: .95;
  color: var(--green-700);
  /* Caveat reads bigger optically — scale up a bit */
  font-size: 1.15em;
  padding-top: .04em;
  padding-bottom: 0;
  display: inline-block;
}
h2 em, h1 em { font-size: 1.18em; line-height: .9; }

/* Brand wordmark — big footer logo text */
.wordmark {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--green-700);
}

/* ============================================================
   v15 — light pillars + new footer + chat visual upgrade
   ============================================================ */

/* ------------ Pillars: was dark + clipped. Now cream + roomy. ------------ */
.pillars { background: var(--cream-50) !important; color: var(--ink) !important; }
.pillars-stage { padding: 60px 0 !important; height: auto !important; min-height: 100vh; }
.pillars-track { gap: 28px !important; padding: 0 6vw !important; align-items: stretch; }
.pillar { height: auto !important; min-height: 0 !important; }
.pillar.pillar-card,
.pillar.pillar-intro {
  width: min(640px, 80vw) !important;
  display: grid !important;
}

/* Kill old dark pillar-card grid; use new pc-* markup */
.pillar.pillar-card {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(15,15,15,.18);
  grid-template-rows: 280px 1fr;
}
@media (max-width: 880px) { .pillar.pillar-card { grid-template-rows: 220px 1fr; } }
.pc-img {
  background-size: cover; background-position: center;
  position: relative;
  padding: 20px 22px;
  display: flex; align-items: flex-start; justify-content: space-between;
  color: #fff;
}
.pc-img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 35%, transparent 65%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.pc-img > * { position: relative; z-index: 1; }
.pc-num { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .18em; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(8px); }
.pc-kicker { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-500); background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(8px); }
.pc-body {
  padding: 30px 36px 34px;
  display: flex; flex-direction: column;
  min-height: 0; overflow-wrap: anywhere;
}
.pc-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.55rem, 2.4vw, 1.95rem); line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--ink);
}
.pc-desc { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0 0 18px; }
.pc-bullets { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.pc-bullets li {
  position: relative; padding-left: 22px;
  font-size: 13.5px; color: var(--ink); line-height: 1.5;
}
.pc-bullets li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 2px; background: var(--green-500); border-radius: 2px;
}
.pc-cta {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--ink); color: var(--cream-50);
  border-radius: 999px; text-decoration: none;
  font-family: var(--f-sans); font-weight: 600; font-size: 14px;
  transition: background .2s, transform .2s;
}
.pc-cta:hover { background: var(--green-700); transform: translateY(-2px); }
.pc-cta .arrow { transition: transform .25s; }
.pc-cta:hover .arrow { transform: translateX(4px); }

/* Pillar intro — light cream card with editorial type */
.pillar.pillar-intro {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 28px;
  padding: 42px 44px !important;
  display: flex !important; flex-direction: column !important;
  width: min(540px, 80vw) !important;
  position: relative; overflow: hidden;
}
.pillar.pillar-intro::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.18), transparent 65%);
  pointer-events: none;
}
.pi-eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--green-700); }
.pi-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.03em; margin: 22px 0 0;
  color: var(--ink);
}
.pi-em { color: var(--ink); }
.pi-script {
  font-family: 'Caveat', cursive; font-weight: 700;
  color: var(--green-700);
  font-size: 1.15em;
  letter-spacing: 0; line-height: .85;
  display: inline-block;
  margin-top: 4px;
}
.pi-sub { margin: 22px 0 0; font-size: 14.5px; color: var(--slate-700); line-height: 1.6; max-width: 420px; position: relative; }
.pi-dots { display: flex; gap: 8px; margin: 28px 0 0; }
.pi-dot { width: 18px; height: 4px; border-radius: 4px; background: var(--line); }
.pi-dot.on { background: var(--green-500); width: 32px; }
.pi-pics { display: flex; margin: 24px 0 0; }
.pi-pics > span {
  width: 52px; height: 52px; border-radius: 14px;
  background-size: cover; background-position: center top;
  border: 2.5px solid var(--paper);
  margin-left: -12px; flex-shrink: 0;
  box-shadow: 0 8px 16px -6px rgba(0,0,0,.2);
}
.pi-pics > span:first-child { margin-left: 0; }

/* ------------ FOOTER v2 ------------ */
.foot {
  background: var(--ink); color: var(--cream-50);
  padding: 60px 0 26px;
}
.foot .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.foot-wordmark { text-align: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.08); }
.foot-wordmark .wordmark {
  display: block;
  font-size: clamp(3.5rem, 9vw, 7rem);
  color: var(--green-500);
  margin-bottom: 14px;
}
.foot-tag { display: block; max-width: 580px; margin: 0 auto; color: rgba(251,248,242,.65); font-size: 14.5px; line-height: 1.6; }

.foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.foot-links a {
  font-family: var(--f-sans); font-weight: 500; font-size: 14px;
  color: rgba(251,248,242,.75); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.foot-links a:hover { color: var(--green-500); border-color: var(--green-500); }
.foot-links .apply {
  color: var(--ink); background: var(--green-500); padding: 6px 18px;
  border-radius: 999px; font-weight: 700;
  border-bottom: 0;
}
.foot-links .apply:hover { background: var(--green-600); color: var(--ink); border-bottom: 0; }

.foot-meta {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 18px; padding: 24px 0;
}
.foot-social { display: inline-flex; gap: 12px; }
.foot-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: var(--cream-50);
  transition: background .2s, transform .2s;
}
.foot-social a:hover { background: var(--green-500); color: var(--ink); transform: translateY(-2px); }
.foot-contact {
  display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
  color: rgba(251,248,242,.7); font-size: 13px;
}
.foot-contact a { color: rgba(251,248,242,.85); text-decoration: none; }
.foot-contact a:hover { color: var(--green-500); }
.foot-contact .dot { color: rgba(255,255,255,.25); }

.foot-bot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; color: rgba(251,248,242,.55);
}
.foot-bot > div { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.foot-bot a { color: rgba(251,248,242,.7); text-decoration: none; }
.foot-bot a:hover { color: var(--green-500); }
.foot-bot .dot { color: rgba(255,255,255,.25); }
.foot-bot .pinch { color: var(--green-500); font-weight: 700; }

/* Kill old footer styles */
footer:not(.foot) { display: none; }
.foot-grid, .foot-brand { display: none; }

/* ------------ CHAT POPUP v2 — more visual + photo path tiles ------------ */
.wn-panel {
  width: min(440px, calc(100vw - 24px)) !important;
  height: min(700px, calc(100vh - 70px)) !important;
}
.wn-head {
  background: linear-gradient(135deg, var(--ink) 0%, #1a3a18 100%) !important;
}
.wn-head::before {
  background: radial-gradient(circle at 100% 0%, rgba(79,181,73,.45), transparent 60%) !important;
}
.wn-stepper { padding: 14px 22px 0 !important; }

/* Step 1 illu — bigger, with a green wash bg, fit the WHOLE mascot */
.wn-illu {
  width: 100% !important; height: 260px !important;
  background: linear-gradient(180deg, rgba(79,181,73,.12), rgba(79,181,73,0));
  border-radius: 18px;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative; overflow: visible !important;
  margin-bottom: 18px;
  padding: 10px 0;
}
.wn-illu-mascot {
  width: auto !important; height: 240px !important; max-width: 140px;
  object-fit: contain !important;
}
.wn-illu::after { display: none !important; }

/* Step 2 — make path tiles visual with color washes + emoji bigger */
.wn-paths { gap: 12px !important; }
.wn-path {
  flex-direction: column !important; align-items: flex-start !important;
  padding: 16px !important; min-height: 110px;
  position: relative; overflow: hidden;
}
.wn-path::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-bg, var(--green-500)), transparent 60%);
  opacity: .08; transition: opacity .25s;
}
.wn-path:hover::before { opacity: .16; }
.wn-path[data-path="explore"] { --c-bg: #26BDE2; }
.wn-path[data-path="apply"]   { --c-bg: var(--red-500); }
.wn-path[data-path="idea"]    { --c-bg: #FCC30B; }
.wn-path[data-path="learn"]   { --c-bg: var(--green-500); }
.wn-path-ico {
  font-size: 30px !important;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); border-radius: 14px;
  margin-bottom: 8px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.15);
  position: relative; z-index: 1;
}
.wn-path-body { position: relative; z-index: 1; }
.wn-path-body strong { font-size: 14px !important; }

/* Step 3 — language picker richer */
.wn-langs { gap: 10px !important; }
.wn-lang {
  padding: 14px 12px !important; text-align: center;
  font-size: 15px !important;
}
.wn-lang.on {
  background: linear-gradient(135deg, var(--green-500), var(--green-700)) !important;
  color: #fff !important;
}

/* Chat body — quick-suggest chips below first bot message */
.wn-chat-suggest {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px;
}
.wn-chat-suggest .wn-chip {
  padding: 6px 12px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--f-sans); font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--ink);
  transition: all .2s;
}
.wn-chat-suggest .wn-chip:hover {
  border-color: var(--green-500); background: var(--green-50);
}

/* Bot message — show a tiny mascot avatar next to each */
.wn-chat .wn-msg-bot {
  position: relative;
  margin-left: 34px !important;
  padding: 10px 14px !important;
}
.wn-chat .wn-msg-bot::before {
  content: ""; position: absolute; left: -38px; top: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: url('/assets/img/mascot/mascot.png') center 20%/180% no-repeat, var(--green-500);
  border: 2px solid var(--paper);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.2);
}
.wn-chat .wn-msg-user { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .wn-illu-mascot { animation: none !important; }
}

/* ============================================================
   v16 — kill underlines, fix bento, force-show staggered cells
   ============================================================ */

/* Kill any remaining underline/italic on accent-like elements */
.accent, .accent *, .italic, .italic *, .u-scribble, .u-scribble *,
.pi-script, .pi-script *, .hi-display, .hi-green, .ws-proj,
h1 em, h2 em, h3 em, .fc-h .h, .hc-line.em em {
  text-decoration: none !important;
  background-image: none !important; /* drop the SVG curved-underline */
  font-style: normal !important;
}
/* Preserve the highlighter swatch on .u-scribble though (re-state) */
.u-scribble {
  background: linear-gradient(transparent 55%, rgba(79,181,73,.38) 55%, rgba(79,181,73,.38) 92%, transparent 92%) !important;
}
.u-scribble.red {
  background: linear-gradient(transparent 55%, rgba(230,57,70,.3) 55%, rgba(230,57,70,.3) 92%, transparent 92%) !important;
}
/* Keep Caveat as the accent face globally */
h1 em, h2 em, h3 em,
.accent, .italic, .pi-script, .ital,
.fc-h .h, .hc-line.em em, .ws-proj {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  color: var(--green-700);
  font-size: 1.18em !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
}
.accent.red, .italic.red, .fc-h .h.red { color: var(--red-600) !important; }

/* ------------ BENTO bullet-proof rebuild ------------ */
/* Force the grid to be applied even if .section padding/overflow tries to break it */
.bento-sec .bento {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: 130px !important;
  gap: 16px !important;
  margin-top: 32px !important;
  width: 100% !important;
}
.bento-sec .bento > * { min-width: 0 !important; }

/* Force bento cells to be visible — kill .reveal opacity-0 conflict */
.bento-sec .bento .bento-cell {
  opacity: 1 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.bento-sec .bento .bento-cell.bento-7 { flex-direction: row !important; align-items: center !important; }

/* Make sure column spans are applied */
.bento-1 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-2 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-3 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-4 { grid-column: span 5 !important; grid-row: span 3 !important; }
.bento-5 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-6 { grid-column: span 3 !important; grid-row: span 2 !important; }
.bento-7 { grid-column: span 7 !important; grid-row: span 1 !important; }

@media (max-width: 960px) {
  .bento-sec .bento { grid-template-columns: repeat(6, 1fr) !important; }
  .bento-1, .bento-2, .bento-3, .bento-5 { grid-column: span 3 !important; grid-row: span 2 !important; }
  .bento-4 { grid-column: span 6 !important; grid-row: span 3 !important; }
  .bento-6 { grid-column: span 3 !important; grid-row: span 2 !important; }
  .bento-7 { grid-column: span 6 !important; grid-row: span 1 !important; flex-direction: column !important; align-items: flex-start !important; }
}

/* ------------ Reduce remaining white space ------------ */
.bento-sec { padding: 40px 0 !important; }
.winners-stack { padding: 50px 0 30px !important; }
.journey { padding: 50px 0 !important; }
.section { padding-block: 48px !important; }
.section.tight { padding-block: 28px !important; }
.faces-strip { padding: 32px 0 !important; }
.final-cta { padding: 32px 0 60px !important; }
.partners-rich { padding: 48px 0 !important; }
.prh-head { margin: 0 auto 24px !important; }
.section-head { margin-bottom: 22px !important; }

/* Pillars: stage padding tighter */
.pillars-stage { padding: 40px 0 !important; }

/* Force show on .reveal sections too (defensive: GSAP sometimes misses) */
.reveal { opacity: 1 !important; transform: none !important; }

/* ============================================================
   v17 — Auth split-screen (login / register)
   ============================================================ */
.auth-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 60px);
  background: var(--cream-50);
}
@media (max-width: 880px) { .auth-split { grid-template-columns: 1fr; } }

/* ----- LEFT: form ----- */
.as-form {
  padding: 50px 56px 60px;
  display: flex; flex-direction: column;
  background: var(--cream-50);
  position: relative;
  overflow-y: auto;
}
@media (max-width: 880px) { .as-form { padding: 40px 26px; } }
.as-logo { display: inline-block; align-self: flex-start; margin-bottom: 36px; }
.as-logo img { height: 38px; width: auto; display: block; }
.as-form-inner { max-width: 480px; width: 100%; margin: 0 auto; flex: 1; }

.as-eyebrow {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-50);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.as-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05;
  letter-spacing: -.025em; color: var(--ink); margin: 0;
}
.as-sub { margin-top: 14px; font-size: 1.02rem; line-height: 1.6; color: var(--slate-700); }

.as-perks { list-style: none; padding: 0; margin: 24px 0 28px; display: flex; flex-direction: column; gap: 8px; }
.as-perks li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.as-perk-ic {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}

.as-fields { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.as-fields .field { display: flex; flex-direction: column; gap: 6px; }
.as-fields .field label {
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.as-fields .field input {
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: 12px;
  font-family: var(--f-sans); font-size: 15px;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
}
.as-fields .field input::placeholder { color: var(--slate-400); }
.as-fields .field input:hover { border-color: var(--slate-400); }
.as-fields .field input:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(79,181,73,.12);
}
.as-fields .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.as-forgot {
  font-family: var(--f-sans); font-weight: 600; font-size: 12px;
  color: var(--green-700); text-decoration: none;
}
.as-forgot:hover { text-decoration: underline; }

.as-remember {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--slate-700);
  cursor: pointer;
  margin: 4px 0 0;
}
.as-remember input { width: 16px; height: 16px; accent-color: var(--green-700); }

.as-submit {
  margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink); color: var(--cream-50);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  transition: background .2s, transform .2s, box-shadow .25s;
  width: 100%;
}
.as-submit:hover { background: var(--green-700); transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(79,181,73,.5); }
.as-submit .arrow { transition: transform .25s; }
.as-submit:hover .arrow { transform: translateX(4px); }
.as-fineprint { font-size: 11.5px; color: var(--slate-500); margin: 10px 0 0; text-align: center; line-height: 1.5; }
.as-fineprint a { color: var(--green-700); }

.as-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 14px;
  color: var(--slate-400);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.as-divider::before, .as-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.as-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.as-soc {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
  font-family: var(--f-sans); font-weight: 600; font-size: 14px;
  color: var(--ink); cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.as-soc:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
.as-soc:disabled { opacity: .55; cursor: not-allowed; }
.as-soc-note { font-size: 11px; color: var(--slate-400); margin: 8px 0 0; text-align: center; }

.as-altline {
  margin: 36px 0 0;
  text-align: center; font-size: 14px; color: var(--slate-500);
}
.as-altline a { color: var(--green-700); font-weight: 700; text-decoration: none; margin-left: 6px; }
.as-altline a:hover { color: var(--ink); }

/* ----- RIGHT: visual panel ----- */
.as-visual {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #1a3a18 0%, #0e2710 100%);
  color: var(--cream-50);
  display: flex; align-items: center; justify-content: center;
  min-height: 600px;
}
@media (max-width: 880px) { .as-visual { display: none; } }
.av-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(79,181,73,.35), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(230,57,70,.25), transparent 55%);
  pointer-events: none;
}
.av-orbs { position: absolute; inset: 0; pointer-events: none; }
.av-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; mix-blend-mode: screen; }
.av-orb-1 { width: 280px; height: 280px; background: var(--green-500); top: 10%; left: 8%; animation: avOrb 14s ease-in-out infinite; }
.av-orb-2 { width: 220px; height: 220px; background: #FCC30B; bottom: 18%; right: 12%; animation: avOrb 18s ease-in-out -4s infinite reverse; }
.av-orb-3 { width: 180px; height: 180px; background: var(--red-500); top: 50%; left: 60%; animation: avOrb 16s ease-in-out -7s infinite; }
@keyframes avOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px,-30px) scale(1.2); }
}

.av-content {
  position: relative; z-index: 2;
  max-width: 440px; padding: 60px 40px;
  text-align: center;
}

/* Floating photo collage */
.av-collage {
  position: relative; height: 360px; margin-bottom: 36px;
  display: flex; align-items: center; justify-content: center;
}
.av-tile {
  position: absolute;
  background-size: cover; background-position: center top;
  border-radius: 18px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
  border: 3px solid var(--cream-50);
  animation: avFloat 7s ease-in-out infinite;
}
.av-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: 15px;
  background: linear-gradient(170deg, transparent 55%, rgba(0,0,0,.55));
}
.av-cap {
  position: absolute; bottom: 8px; left: 10px; right: 10px; z-index: 2;
  color: #fff; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; text-align: left;
}
.av-tile-1 { width: 160px; height: 200px; top: 0;    left: 8%;  --rot: -7deg; animation-delay: 0s; }
.av-tile-2 { width: 130px; height: 160px; top: 30px; right: 10%; --rot: 6deg; animation-delay: -1.5s; }
.av-tile-3 { width: 140px; height: 110px; bottom: 0; left: 18%; --rot: -3deg; animation-delay: -3s; }
.av-tile-4 { width: 120px; height: 150px; bottom: 20px; right: 18%; --rot: 4deg; animation-delay: -4.5s; }
.av-mascot {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  width: 100px; height: auto; z-index: 5;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
  animation: avWave 1.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes avFloat {
  0%, 100% { transform: translateY(0)    rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
@keyframes avWave {
  0%, 100% { transform: translateX(-50%) rotate(-6deg); }
  50%      { transform: translateX(-50%) rotate(6deg); }
}

.av-quote {
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.35rem; line-height: 1.35; letter-spacing: -.01em;
  color: var(--cream-50); margin: 0;
  position: relative;
}
.av-quote em {
  font-family: 'Caveat', cursive; font-style: normal; font-weight: 700;
  color: var(--green-500); font-size: 1.4em; line-height: .9;
  display: block; margin-top: 6px;
}
.av-q-mark {
  font-family: 'Caveat', cursive; color: var(--green-500);
  font-size: 4rem; line-height: 0; position: absolute; top: 4px; left: -8px;
  opacity: .6;
}
.av-quote-author {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(251,248,242,.55);
}
.av-quote-author span { color: rgba(251,248,242,.4); }

.av-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.av-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-stats strong {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.8rem; line-height: 1; color: var(--cream-50);
}
.av-stats span {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(251,248,242,.55);
}

/* Hide nav + footer + AI widget when on auth pages */
body:has(.auth-split) .nav-announce,
body:has(.auth-split) .nav,
body:has(.auth-split) .foot,
body:has(.auth-split) .wangari { display: none !important; }
body:has(.auth-split) main { padding: 0 !important; }

/* ============================================================
   v18 — Shared hero-page + visual cards for inner pages
   ============================================================ */

/* HERO-PAGE — used across about/team/challenge/etc */
.hero-page {
  position: relative;
  background: var(--cream-50);
  padding: 90px 0 70px;
  overflow: hidden;
}
.hero-page .wrap { position: relative; z-index: 2; }
.hp-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 60px; align-items: center;
}
@media (max-width: 880px) { .hp-grid { grid-template-columns: 1fr; gap: 40px; } }

.hp-crumbs {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-500); margin-bottom: 16px;
}
.hp-crumbs a { color: var(--slate-700); text-decoration: none; }
.hp-crumbs a:hover { color: var(--green-700); }
.hp-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-50);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.hp-tag.red { color: var(--red-700); background: var(--red-50); }
.hp-tag.yellow { color: #8c5b00; background: #FFF1CC; }
.hp-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02;
  letter-spacing: -.03em; color: var(--ink); margin: 0;
}
.hp-lead { margin: 22px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--slate-700); max-width: 540px; }
.hp-ctas { margin: 26px 0 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hp-stats {
  margin: 36px 0 0; padding-top: 28px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, auto); gap: 40px;
}
.hp-stats > div { display: flex; flex-direction: column; gap: 4px; }
.hp-stats strong {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1;
}
.hp-stats span {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--slate-500);
}

/* HP-VISUAL: collage of tilted photo tiles */
.hp-visual {
  position: relative;
  aspect-ratio: 1/1; max-width: 540px; width: 100%; justify-self: end;
}
.hpv-tile {
  position: absolute;
  background-size: cover; background-position: center;
  border-radius: 22px;
  box-shadow: 0 20px 40px -16px rgba(15,15,15,.32);
  border: 4px solid var(--paper);
  overflow: hidden;
  animation: hpvFloat 8s ease-in-out infinite;
}
.hpv-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, transparent 60%, rgba(0,0,0,.45));
  pointer-events: none;
}
.hpv-tile .hpv-cap {
  position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 2;
  color: #fff; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.hpv-1 { width: 60%; height: 70%; top: 0;   left: 0;  --rot: -4deg; animation-delay: 0s; }
.hpv-2 { width: 48%; height: 55%; top: 8%;  right: 0; --rot: 5deg;  animation-delay: -2s; }
.hpv-3 { width: 52%; height: 50%; bottom: 0; left: 6%; --rot: 3deg; animation-delay: -4s; }
.hpv-4 { width: 38%; height: 42%; bottom: 8%; right: 4%; --rot: -6deg; animation-delay: -6s; }
@keyframes hpvFloat {
  0%, 100% { transform: translateY(0)    rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
.hpv-badge {
  position: absolute; z-index: 10;
  background: var(--paper);
  padding: 12px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  box-shadow: 0 12px 28px -8px rgba(15,15,15,.18);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  display: flex; align-items: center; gap: 10px;
}
.hpv-badge strong { font-family: var(--f-display); font-size: 22px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.hpv-badge .ic {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.hpv-badge-1 { top: 4%; right: -5%; }
.hpv-badge-2 { bottom: -5%; left: -3%; }

/* Decorative orbs behind hero */
.hp-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hp-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; }
.hp-orb-1 { width: 360px; height: 360px; background: var(--green-500); top: -120px; left: -120px; animation: hpvFloat 14s ease-in-out infinite; --rot: 0deg; }
.hp-orb-2 { width: 280px; height: 280px; background: var(--red-500); bottom: -100px; right: -80px; animation: hpvFloat 18s ease-in-out -4s infinite reverse; --rot: 0deg; }

/* VISUAL CARDS — generic .vcard for inner pages */
.vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 880px) { .vcards { grid-template-columns: 1fr; } }
.vcards.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .vcards.cols-2 { grid-template-columns: 1fr; } }
.vcards.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .vcards.cols-4 { grid-template-columns: repeat(2, 1fr); } }

.vcard {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .3s var(--ease-soft), box-shadow .3s, border-color .25s;
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}
.vcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(15,15,15,.22); border-color: transparent; }
.vcard .vc-img {
  aspect-ratio: 5/3;
  background-size: cover; background-position: center;
  position: relative;
}
.vcard .vc-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4));
  pointer-events: none;
}
.vcard .vc-num {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em;
  background: rgba(0,0,0,.45); color: #fff;
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(8px);
}
.vcard .vc-tag {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  background: var(--green-500); color: var(--ink-900);
  padding: 5px 10px; border-radius: 999px;
}
.vcard .vc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.vcard .vc-kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: 4px;
}
.vcard h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.3rem; line-height: 1.15; letter-spacing: -.018em;
  margin: 0; color: var(--ink);
}
.vcard p {
  font-size: 14px; color: var(--slate-700); line-height: 1.55; margin: 0;
}
.vcard .vc-meta {
  margin-top: auto; padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); letter-spacing: .05em;
}
.vcard .vc-meta .arr { color: var(--green-700); font-weight: 600; }

/* Icon-style visual cards (no big image) */
.icard {
  position: relative;
  padding: 28px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .3s var(--ease-soft), box-shadow .3s, border-color .25s;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
}
.icard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(15,15,15,.2); border-color: transparent; }
.icard .ic-bg {
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-bg, var(--green-200)), transparent 65%);
  opacity: .35; pointer-events: none;
}
.icard:nth-child(4n+1) { --c-bg: rgba(79,181,73,.4); }
.icard:nth-child(4n+2) { --c-bg: rgba(230,57,70,.35); }
.icard:nth-child(4n+3) { --c-bg: rgba(252,195,11,.4); }
.icard:nth-child(4n)   { --c-bg: rgba(38,189,226,.35); }
.icard .ic-ic {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--ink); color: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  position: relative; z-index: 1;
}
.icard h4 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.015em; margin: 0; color: var(--ink); position: relative;
}
.icard p {
  font-size: 14px; line-height: 1.55; color: var(--slate-700); margin: 0; position: relative;
}

/* CTA banner reusable */
.cta-banner {
  margin: 60px auto; max-width: 1180px; padding: 0 var(--gutter);
}
.cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, #1a3a18 60%, var(--green-700));
  color: var(--cream-50);
  border-radius: 28px; padding: 60px 70px;
  overflow: hidden;
  display: grid; grid-template-columns: 1.5fr auto; gap: 40px; align-items: center;
}
@media (max-width: 880px) { .cta-card { grid-template-columns: 1fr; padding: 40px 28px; text-align: center; } }
.cta-card::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.55), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.cta-card h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05;
  letter-spacing: -.025em; margin: 0; color: #fff;
}
.cta-card h2 em { font-family: 'Caveat', cursive; font-weight: 700; color: var(--green-500); font-style: normal; font-size: 1.18em; }
.cta-card p { margin: 14px 0 0; color: rgba(251,248,242,.78); max-width: 540px; font-size: 1rem; }
.cta-card .cta-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 880px) { .cta-card .cta-acts { justify-content: center; } }
.cta-card .btn-primary { background: var(--green-500); color: var(--ink-900); }
.cta-card .btn-primary:hover { background: #fff; }
.cta-card .btn-link { color: rgba(251,248,242,.85); }
.cta-card .btn-link:hover { color: var(--green-500); }

/* ============================================================
   v19 — Unique per-page designs (no more hero-page formula)
   ============================================================ */

/* ABOUT — editorial mag layout */
.about-hero {
  background: var(--ink); color: var(--cream-50);
  padding: 80px 0 100px;
  position: relative; overflow: hidden;
}
.about-hero::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.45), transparent 60%);
  pointer-events: none;
}
.about-hero .wrap { position: relative; z-index: 2; }
.about-crumbs { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 20px; }
.about-crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.about-headline {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 7vw, 6rem); line-height: .98; letter-spacing: -.035em;
  color: var(--cream-50); margin: 0; max-width: 900px;
}
.about-headline em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.18em; }
.about-byline {
  margin-top: 28px; display: flex; gap: 40px; flex-wrap: wrap; align-items: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.about-byline .pip { color: var(--green-500); }

.about-pullquote {
  background: var(--cream-50);
  padding: 80px 0;
  position: relative;
}
.about-pullquote-inner {
  max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); text-align: center;
}
.about-pullquote blockquote {
  font-family: var(--f-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.3; letter-spacing: -.015em;
  color: var(--ink); margin: 0; position: relative;
}
.about-pullquote blockquote::before {
  content: "\201C"; font-family: 'Caveat', cursive; font-size: 6rem; color: var(--green-500);
  position: absolute; top: -30px; left: -8px; line-height: 1;
}
.about-pullquote cite {
  display: block; margin-top: 22px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-500); font-style: normal;
}

.about-timeline {
  background: var(--paper); padding: 80px 0;
}
.tline {
  max-width: 880px; margin: 36px auto 0; padding: 0 var(--gutter);
  position: relative;
}
.tline::before {
  content: ""; position: absolute; left: 90px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--green-500), var(--green-700), transparent);
}
@media (max-width: 720px) { .tline::before { left: 30px; } }
.tline-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 36px;
  padding: 28px 0; align-items: start;
  position: relative;
}
@media (max-width: 720px) { .tline-row { grid-template-columns: 60px 1fr; gap: 18px; } }
.tline-year {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 3rem; line-height: 1;
  color: var(--green-700); text-align: right;
  position: sticky; top: 80px;
}
.tline-card {
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 32px; position: relative;
  transition: transform .25s, box-shadow .25s;
}
.tline-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(15,15,15,.2); }
.tline-card::before {
  content: ""; position: absolute; left: -41px; top: 36px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green-500); border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--green-500);
}
@media (max-width: 720px) { .tline-card::before { left: -23px; } }
.tline-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.015em; margin: 0 0 8px; color: var(--ink); }
.tline-card p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0; }
.tline-card .tag {
  display: inline-block; margin-bottom: 8px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-50); padding: 3px 10px; border-radius: 999px;
}
.tline-card.win .tag { color: var(--red-700); background: var(--red-50); }
.tline-img {
  margin-top: 18px; height: 200px; border-radius: 12px;
  background-size: cover; background-position: center;
}

/* TEAM — rolodex (mini cards in a wall, hover-flip) */
.team-hero {
  background: var(--cream-50); padding: 80px 0 40px;
}
.team-hero .wrap { text-align: center; max-width: 760px; margin: 0 auto; }
.team-hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.025em;
  margin: 14px 0 0;
}
.team-hero h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.team-hero p { color: var(--slate-700); font-size: 1.05rem; line-height: 1.6; margin: 18px auto 0; max-width: 600px; }

.team-wall { background: var(--paper); padding: 60px 0 90px; }
.team-wall-section { margin-top: 30px; }
.team-wall-label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate-500); text-align: center; margin-bottom: 28px;
}
.team-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 22px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-grid.lead { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 720px) { .team-grid.lead { grid-template-columns: 1fr; } }

.member {
  background: var(--cream-50);
  border-radius: 22px; overflow: hidden;
  position: relative;
  transition: transform .35s var(--ease-soft), box-shadow .35s;
}
.member:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -22px rgba(15,15,15,.22); }
.member-photo {
  aspect-ratio: 1/1;
  background-size: cover; background-position: center top;
  position: relative;
}
.member-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,15,15,.85));
}
.member-info {
  position: absolute; bottom: 16px; left: 18px; right: 18px; z-index: 2;
  color: #fff;
}
.member-info .nm { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.member-info .rl { font-size: 12px; opacity: .85; margin-top: 2px; }
.member-info .or { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); margin-top: 4px; }
.member.lead-card { display: grid; grid-template-columns: 200px 1fr; gap: 0; align-items: stretch; aspect-ratio: auto; }
.member.lead-card .member-photo { aspect-ratio: auto; }
.member.lead-card .member-photo::after { display: none; }
.member.lead-card .member-info { position: relative; bottom: auto; left: auto; right: auto; padding: 30px 30px; color: var(--ink); }
.member.lead-card .member-info .nm { font-size: 1.5rem; }
.member.lead-card .member-info .rl { color: var(--green-700); font-weight: 600; margin: 6px 0 12px; }
.member.lead-card .member-info .or { color: var(--slate-500); }
.member.lead-card .member-bio { font-size: 14px; color: var(--slate-700); line-height: 1.6; margin-top: 10px; }
@media (max-width: 720px) {
  .member.lead-card { grid-template-columns: 1fr; }
  .member.lead-card .member-photo { aspect-ratio: 5/4; }
}

/* CHALLENGE — vertical step timeline + huge prize hero */
.challenge-hero {
  background: linear-gradient(155deg, var(--green-500) 0%, var(--green-700) 100%);
  color: var(--ink-900);
  padding: 80px 0; position: relative; overflow: hidden;
}
.challenge-hero::after {
  content: ""; position: absolute; top: -100px; left: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%);
}
.challenge-hero .wrap { position: relative; z-index: 2; }
.ch-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; align-items: end; }
@media (max-width: 880px) { .ch-grid { grid-template-columns: 1fr; } }
.ch-lead { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(15,15,15,.7); margin-bottom: 14px; }
.ch-h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.5rem); line-height: .92; letter-spacing: -.04em;
  margin: 0; color: var(--ink-900);
}
.ch-h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.1em; }
.ch-sub { margin: 24px 0 0; font-size: 1.1rem; line-height: 1.55; color: rgba(15,15,15,.85); max-width: 460px; }
.ch-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.ch-ctas .btn-primary { background: var(--ink); color: var(--green-500); }
.ch-ctas .btn-primary:hover { background: #1a1a1a; }
.ch-meta {
  background: var(--ink); color: var(--cream-50);
  padding: 28px 32px; border-radius: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.ch-meta .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ch-meta .val { font-family: var(--f-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--cream-50); margin-top: 4px; }
.ch-meta .val em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-size: 1em; }
.ch-meta .row { border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.ch-meta .row:first-child { border-top: 0; padding-top: 0; }

.ch-steps { background: var(--cream-50); padding: 80px 0; }
.ch-rail {
  max-width: 760px; margin: 0 auto; padding: 0 var(--gutter);
  position: relative;
}
.ch-rail::before {
  content: ""; position: absolute; left: 36px; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(to bottom, var(--green-500), transparent);
  border-radius: 4px;
}
.ch-step {
  position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 28px;
  padding: 24px 0;
  align-items: start;
}
.ch-step-num {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--ink); color: var(--green-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.6rem;
  position: relative; z-index: 2;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.4);
}
.ch-step:nth-child(odd) .ch-step-num { background: var(--green-500); color: var(--ink-900); }
.ch-step-body {
  background: var(--paper); border-radius: 22px; padding: 28px 32px;
  border: 1px solid var(--line);
  position: relative;
}
.ch-step-body::before {
  content: ""; position: absolute; top: 30px; left: -10px;
  width: 20px; height: 20px; background: var(--paper);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.ch-step-body h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.ch-step-body .when { display: inline-block; margin-top: 6px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-700); }
.ch-step-body p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 12px 0 0; }

/* ACADEMY — Netflix-style shelf rows */
.aca-hero {
  background: var(--ink); color: var(--cream-50);
  padding: 70px 0;
  position: relative; overflow: hidden;
}
.aca-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(79,181,73,.35), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(38,189,226,.25), transparent 55%);
}
.aca-hero .wrap { position: relative; z-index: 2; max-width: 900px; }
.aca-h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.03em;
  margin: 16px 0 0; color: var(--cream-50);
}
.aca-h1 em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.1em; }
.aca-sub { margin: 22px 0 0; font-size: 1.08rem; color: rgba(251,248,242,.7); max-width: 560px; line-height: 1.55; }
.aca-search {
  margin: 32px 0 0; display: flex; gap: 0; max-width: 520px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 4px;
}
.aca-search input {
  flex: 1; padding: 12px 20px; background: transparent;
  border: 0; outline: 0; font-family: var(--f-sans); font-size: 14.5px;
  color: var(--cream-50);
}
.aca-search input::placeholder { color: rgba(255,255,255,.5); }
.aca-search button {
  padding: 10px 22px; border-radius: 999px; border: 0;
  background: var(--green-500); color: var(--ink-900);
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
}

.shelf-row { padding: 50px 0; }
.shelf-row:nth-child(even) { background: var(--paper); }
.shelf-head {
  max-width: 1280px; margin: 0 auto 24px; padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.shelf-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.015em; margin: 0; }
.shelf-head h2 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-size: 1.18em; }
.shelf-head .ct { font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); }
.shelf {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.s-tile {
  background: var(--cream-50); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .3s, box-shadow .3s;
}
.s-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(15,15,15,.25); }
.s-tile-img { aspect-ratio: 16/10; background-size: cover; background-position: center; position: relative; }
.s-tile-img .ribbon {
  position: absolute; top: 12px; left: 12px;
  background: var(--green-500); color: var(--ink-900);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.s-tile-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.s-tile h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; margin: 0; }
.s-tile p { font-size: 13px; color: var(--slate-700); line-height: 1.5; margin: 0; flex: 1; }
.s-tile .meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--slate-500); display: flex; justify-content: space-between; margin-top: 8px; }
.s-tile .meta .arr { color: var(--green-700); font-weight: 700; }

/* WINNERS — podium hero + year scrubber */
.win-hero {
  background: var(--cream-50);
  padding: 60px 0; position: relative; overflow: hidden;
}
.win-hero h1 {
  text-align: center;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.03em;
  margin: 0;
}
.win-hero h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.win-hero .sub { text-align: center; color: var(--slate-700); margin: 18px auto 0; max-width: 540px; font-size: 1rem; line-height: 1.55; }

.podium {
  max-width: 980px; margin: 50px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  gap: 18px; align-items: end;
}
@media (max-width: 720px) { .podium { grid-template-columns: 1fr; } }
.pod {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 24px; overflow: hidden;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}
.pod:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -22px rgba(15,15,15,.25); }
.pod-img { aspect-ratio: 4/5; background-size: cover; background-position: center top; }
.pod-rank {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--f-display); font-weight: 700; font-size: 2.2rem; line-height: 1;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5);
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
  padding: 6px 14px; border-radius: 50px;
}
.pod-body { padding: 22px 24px 24px; }
.pod-body .placement { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-700); }
.pod-body h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em; margin: 6px 0 0; }
.pod-body .proj { font-family: 'Caveat', cursive; color: var(--green-700); font-size: 1.4rem; font-weight: 700; margin: 4px 0 8px; line-height: 1.05; }
.pod-body .uni { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500); }
.pod.first { transform: translateY(-20px); border-color: var(--green-500); }
.pod.first .pod-img { aspect-ratio: 3/4; }
.pod.first .pod-rank { background: var(--green-500); color: var(--ink-900); text-shadow: none; }
.pod.first .placement { color: var(--ink); }

.win-scrub {
  background: var(--ink); color: var(--cream-50);
  padding: 50px 0; margin-top: 60px;
  text-align: center;
}
.win-scrub h2 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.6rem;
  letter-spacing: -.015em; margin: 0; color: var(--cream-50);
}
.win-scrub-pills {
  margin: 22px auto 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 0 var(--gutter);
}
.win-scrub-pill {
  padding: 10px 22px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: var(--cream-50); font-family: var(--f-display); font-weight: 700;
  font-size: 1.05rem; text-decoration: none;
  transition: all .2s;
}
.win-scrub-pill:hover { background: var(--green-500); color: var(--ink-900); border-color: var(--green-500); transform: translateY(-2px); }

.cohort-block { padding: 60px 0; }
.cohort-block:nth-child(odd) { background: var(--paper); }
.cohort-block .cb-head {
  max-width: 1180px; margin: 0 auto 32px; padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px;
}
.cohort-block .cb-year {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1; color: var(--green-700);
}
.cohort-block .cb-meta { font-family: var(--f-mono); font-size: 12px; color: var(--slate-500); }
.cohort-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 880px) { .cohort-grid { grid-template-columns: 1fr; } }

/* COMMUNITY — live feed mockup */
.comm-hero {
  background: var(--ink); color: var(--cream-50);
  padding: 0; min-height: 600px;
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch;
  overflow: hidden;
}
@media (max-width: 960px) { .comm-hero { grid-template-columns: 1fr; min-height: 0; } }
.comm-text {
  padding: 80px 60px; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 960px) { .comm-text { padding: 60px 24px; } }
.comm-text h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1; letter-spacing: -.03em;
  margin: 14px 0 0; color: var(--cream-50);
}
.comm-text h1 em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.15em; }
.comm-text .live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green-500);
}
.comm-text .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(79,181,73,.25); animation: commPulse 1.6s ease-in-out infinite;
}
@keyframes commPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(79,181,73,.25); } 50% { box-shadow: 0 0 0 8px rgba(79,181,73,0); } }
.comm-text p { font-size: 1.05rem; color: rgba(251,248,242,.7); line-height: 1.55; margin: 22px 0 0; max-width: 460px; }
.comm-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.comm-feed {
  background: linear-gradient(180deg, #0a1b08 0%, #06120a 100%);
  padding: 60px 50px;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.comm-feed::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, var(--ink), transparent); z-index: 2;
}
.comm-feed::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to top, #06120a, transparent); z-index: 2;
}
@media (max-width: 960px) { .comm-feed { padding: 40px 24px; min-height: 500px; } }
.feed-msg {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  padding: 14px 18px; border-radius: 16px;
  animation: feedSlideIn 6s ease-in-out infinite;
}
.feed-msg:nth-child(1) { animation-delay: 0s; }
.feed-msg:nth-child(2) { animation-delay: -1s; }
.feed-msg:nth-child(3) { animation-delay: -2s; }
.feed-msg:nth-child(4) { animation-delay: -3s; }
.feed-msg:nth-child(5) { animation-delay: -4s; }
@keyframes feedSlideIn {
  0%   { opacity: .4; transform: translateX(-10px); }
  20%, 80% { opacity: 1; transform: translateX(0); }
  100% { opacity: .4; transform: translateX(-10px); }
}
.feed-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center top;
  border: 2px solid rgba(79,181,73,.4);
}
.feed-msg .body { flex: 1; font-size: 13.5px; color: var(--cream-50); line-height: 1.45; }
.feed-msg .who { font-weight: 700; color: var(--green-500); margin-right: 6px; }
.feed-msg .ch { font-family: var(--f-mono); font-size: 10.5px; color: rgba(255,255,255,.5); letter-spacing: .05em; margin-left: 4px; }
.feed-msg .ts { display: block; font-family: var(--f-mono); font-size: 10px; color: rgba(255,255,255,.35); margin-top: 4px; letter-spacing: .05em; }

.comm-channels { background: var(--cream-50); padding: 80px 0; }
.comm-channels h2 {
  text-align: center; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.02em; margin: 0 0 8px;
}
.comm-channels h2 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.comm-channels .sub { text-align: center; color: var(--slate-500); margin: 0 auto 40px; max-width: 540px; }
.ch-grid-v2 {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 880px) { .ch-grid-v2 { grid-template-columns: 1fr; } }
.ch-tile {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 22px 24px;
  display: flex; align-items: center; gap: 16px;
  text-decoration: none; color: inherit;
  transition: all .2s;
}
.ch-tile:hover { border-color: var(--green-500); transform: translateY(-2px); }
.ch-tile-name {
  font-family: var(--f-mono); font-size: 17px; color: var(--ink); font-weight: 600;
  flex: 1;
}
.ch-tile-name .hash { color: var(--green-700); }
.ch-tile-count {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500);
  background: var(--cream-100); padding: 4px 10px; border-radius: 999px;
}

/* APPLY — wizard */
.apply-wrap {
  max-width: 800px; margin: 0 auto; padding: 60px var(--gutter) 80px;
}
.apply-head { text-align: center; margin-bottom: 28px; }
.apply-head .deadline {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-700); background: var(--red-50); padding: 6px 14px; border-radius: 999px;
}
.apply-head h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.025em;
  margin: 16px 0 12px;
}
.apply-head h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.apply-head p { color: var(--slate-700); font-size: 1rem; max-width: 540px; margin: 0 auto; }
.apply-progress {
  display: flex; gap: 8px; margin: 36px 0;
  justify-content: center;
}
.apply-progress .pip {
  height: 4px; flex: 1; max-width: 120px; border-radius: 4px; background: var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.apply-progress .pip.on { background: var(--green-500); }
.apply-progress .pip.done { background: var(--green-700); }
.apply-form { background: var(--paper); border-radius: 24px; padding: 40px 44px; border: 1px solid var(--line); }
.apply-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.apply-section:last-of-type { border-bottom: 0; }
.apply-section h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
}
.apply-section h3 .n {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}

/* CONTACT — split with map illustration */
.contact-page {
  display: grid; grid-template-columns: 1fr 1.1fr;
  min-height: calc(100vh - 60px);
}
@media (max-width: 880px) { .contact-page { grid-template-columns: 1fr; } }
.contact-left {
  padding: 80px 60px; display: flex; flex-direction: column; justify-content: center;
  background: var(--cream-50);
}
@media (max-width: 880px) { .contact-left { padding: 50px 28px; } }
.contact-left h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.025em;
  margin: 0;
}
.contact-left h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.contact-left .lead { color: var(--slate-700); margin: 18px 0 0; max-width: 460px; line-height: 1.55; }
/* The left panel is light cream, so the global white !important crumb is invisible here — force dark. */
.contact-left .about-crumbs { color: var(--ink-500) !important; }
.contact-left .about-crumbs a { color: var(--green-700) !important; font-weight: 600; }
.contact-meta { display: grid; gap: 14px; margin: 32px 0 0; max-width: 460px; }
.contact-meta a, .contact-meta div { font-family: var(--f-mono); font-size: 13px; color: var(--ink); text-decoration: none; display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-meta a:hover { color: var(--green-700); }
.contact-meta .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

.contact-right {
  background: var(--ink); color: var(--cream-50);
  padding: 80px 60px; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.contact-right::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.35), transparent 60%);
}
@media (max-width: 880px) { .contact-right { padding: 50px 28px; } }
.contact-right h2 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.4rem;
  margin: 0 0 24px; color: var(--cream-50); position: relative;
}
.contact-form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; position: relative; }
.contact-form-field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.contact-form-field input,
.contact-form-field textarea {
  padding: 12px 16px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.32);
  border-radius: 12px; color: var(--cream-50); font-family: var(--f-sans); font-size: 14.5px;
  outline: none; transition: all .2s;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus { border-color: var(--green-500); background: rgba(255,255,255,.12); }
.contact-form-field input::placeholder, .contact-form-field textarea::placeholder { color: rgba(255,255,255,.55); }
.contact-form-field textarea { min-height: 120px; resize: vertical; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-submit {
  width: 100%; padding: 14px 22px;
  background: var(--green-500); color: var(--ink-900);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  transition: background .2s, transform .2s;
  position: relative;
}
.contact-submit:hover { background: #fff; transform: translateY(-2px); }

/* PARTNERS — logo wall + tiers */
.partner-hero {
  background: var(--cream-50); padding: 80px 0 40px;
  text-align: center;
}
.partner-hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.025em;
  margin: 14px 0 0;
}
.partner-hero h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.partner-hero p { color: var(--slate-700); margin: 18px auto 0; max-width: 600px; }
.partner-wall {
  max-width: 1180px; margin: 60px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  background: var(--paper);
}
@media (max-width: 880px) { .partner-wall { grid-template-columns: repeat(2, 1fr); } }
.pw-cell {
  aspect-ratio: 1/1; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; transition: background .2s;
}
.pw-cell:hover { background: var(--cream-100); }
.pw-cell img { max-width: 80%; max-height: 70%; object-fit: contain; transition: transform .25s; }
.pw-cell:hover img { transform: scale(1.08); }
.pw-cell .pw-name {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-500);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transition: opacity .2s;
}
.pw-cell:hover .pw-name { opacity: 1; }

.partner-tiers { background: var(--paper); padding: 80px 0; }

/* MENTORSHIP — advisor deck */
.mentor-hero {
  background: var(--cream-50); padding: 70px 0 50px;
}
.mentor-hero .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 880px) { .mentor-hero .wrap { grid-template-columns: 1fr; } }
.mentor-hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.025em;
  margin: 14px 0 0;
}
.mentor-hero h1 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.mentor-deck {
  position: relative; width: 100%; max-width: 380px; height: 460px; justify-self: end;
}
.mentor-deck .deck-card {
  position: absolute; inset: 0;
  border-radius: 22px; overflow: hidden;
  background-size: cover; background-position: center top;
  box-shadow: 0 22px 50px -22px rgba(15,15,15,.4);
  border: 4px solid var(--paper);
  transition: transform .3s var(--ease-soft);
}
.mentor-deck .deck-card:nth-child(1) { transform: rotate(-6deg) translate(-12px, 0); z-index: 1; }
.mentor-deck .deck-card:nth-child(2) { transform: rotate(3deg)  translate(8px, -10px); z-index: 2; }
.mentor-deck .deck-card:nth-child(3) { transform: rotate(-2deg) translate(20px, 4px); z-index: 3; }
.mentor-deck:hover .deck-card:nth-child(1) { transform: rotate(-12deg) translate(-30px, 12px); }
.mentor-deck:hover .deck-card:nth-child(2) { transform: rotate(0deg)   translate(0, -20px); }
.mentor-deck:hover .deck-card:nth-child(3) { transform: rotate(6deg)   translate(30px, 14px); }
.mentor-deck .deck-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7));
}
.mentor-deck .deck-card .label {
  position: absolute; bottom: 18px; left: 18px; right: 18px;
  color: #fff;
}
.mentor-deck .deck-card .label .nm { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.mentor-deck .deck-card .label .rl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); margin-top: 4px; }

/* ============================================================
   v20 — Real About page + new home hero + bento fix + scroll-tline
   ============================================================ */

/* ----------------------------------------------
   ABOUT v2 — full magazine, image-backed hero
   ---------------------------------------------- */
.about-hero {
  background: var(--ink); color: var(--cream-50);
  padding: 0; min-height: 720px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.about-hero .ah-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.about-hero .ah-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,.45) 0%, rgba(15,15,15,.7) 60%, rgba(15,15,15,.95) 100%);
}
.about-hero .ah-orb {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.5), transparent 60%);
  top: -120px; right: -120px; z-index: 1; filter: blur(40px); pointer-events: none;
}
.about-hero .wrap { position: relative; z-index: 2; padding-bottom: 80px; padding-top: 100px; width: 100%; }
.about-crumbs { color: rgba(255,255,255,.6) !important; }
.about-headline {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 7rem); line-height: .95; letter-spacing: -.04em;
  color: var(--cream-50); margin: 0; max-width: 1000px;
}
.about-headline em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.18em; }
.about-byline {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, auto); gap: 30px 60px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.15);
  align-items: end;
}
@media (max-width: 880px) { .about-byline { grid-template-columns: 1fr 1fr; gap: 22px 24px; } }
.ab-stat { display: flex; flex-direction: column; gap: 4px; }
.ab-stat strong { font-family: var(--f-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--green-500); }
.ab-stat span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Big "Why we exist" block */
.about-mission { background: var(--cream-50); padding: 90px 0; }
.about-mission-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
}
@media (max-width: 880px) { .about-mission-grid { grid-template-columns: 1fr; gap: 40px; } }
.amg-eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--green-700); display: inline-block; margin-bottom: 18px; }
.amg-heading {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.025em;
  margin: 0; color: var(--ink);
}
.amg-heading em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.amg-portrait { margin: 34px 0 0; max-width: 430px; }
.amg-portrait img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 14px 34px -16px rgba(15,15,15,.28);
}
.amg-portrait figcaption {
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.55;
  letter-spacing: .02em; color: var(--ink-500); margin-top: 14px; max-width: 360px;
}
.amg-portrait figcaption em { font-family: 'Caveat', cursive; font-style: normal; font-size: 1.4em; color: var(--green-700); }
@media (max-width: 880px) { .amg-portrait { max-width: 300px; } }
.amg-body { font-size: 1.08rem; line-height: 1.7; color: var(--slate-700); margin: 0; }
.amg-body p { margin: 0 0 20px; }
.amg-body p strong { color: var(--ink); font-weight: 700; }
.amg-body .lead-line {
  font-family: var(--f-display); font-weight: 500; font-style: italic;
  font-size: 1.4rem; line-height: 1.35;
  color: var(--ink); margin: 0 0 28px; padding-left: 18px;
  border-left: 3px solid var(--green-500);
}

/* What we do — 3 pillar feature cards */
.about-pillars {
  background: var(--paper); padding: 90px 0; border-top: 1px solid var(--line);
}
.ap-head { text-align: center; max-width: 700px; margin: 0 auto 56px; padding: 0 var(--gutter); }
.ap-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.025em; margin: 14px 0 0; }
.ap-head h2 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.ap-head p { color: var(--slate-700); margin: 18px auto 0; max-width: 540px; font-size: 1rem; line-height: 1.6; }
.ap-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 880px) { .ap-grid { grid-template-columns: 1fr; } }
.ap-card {
  position: relative; overflow: hidden;
  background: var(--cream-50);
  border: 1px solid var(--line); border-radius: 26px;
  padding: 0; display: flex; flex-direction: column;
  transition: transform .35s var(--ease-soft), box-shadow .35s, border-color .25s;
}
.ap-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(15,15,15,.25); border-color: transparent; }
.ap-card .ap-img {
  height: 260px; background-size: cover; background-position: center; position: relative;
}
.ap-card .ap-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
}
.ap-card .ap-num {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.6rem; color: var(--cream-50);
  line-height: 1; text-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.ap-card .ap-name {
  position: absolute; bottom: 18px; left: 20px; right: 20px; z-index: 2;
  color: var(--cream-50); font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.015em;
}
.ap-card .ap-body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.ap-card .ap-body p { color: var(--slate-700); font-size: 14.5px; line-height: 1.6; margin: 0; }
.ap-card .ap-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-card .ap-bullets li {
  position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ink); line-height: 1.45;
}
.ap-card .ap-bullets li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 2px; background: var(--green-500); border-radius: 2px;
}

/* Values strip — image background with dark overlay so it stops looking like a flat black panel */
.about-values {
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,15,15,.82) 0%, rgba(15,15,15,.92) 100%),
    url('/assets/img/community/community-2.jpg') center/cover no-repeat;
  color: var(--cream-50);
  padding: 80px 0;
  overflow: hidden;
}
.about-values::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(79,181,73,.18), transparent 60%);
  pointer-events: none; z-index: 0;
}
.about-values > * { position: relative; z-index: 1; }
.av-grid {
  max-width: 1180px; margin: 50px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid rgba(255,255,255,.12); border-radius: 22px; overflow: hidden;
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(2px);
}
@media (max-width: 880px) { .av-grid { grid-template-columns: 1fr 1fr; } }
.av-cell {
  padding: 32px 28px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.av-cell:last-child { border-right: 0; }
.av-cell .av-n {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-500); margin-bottom: 12px; display: block;
}
.av-cell h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; margin: 0 0 12px; color: var(--cream-50); }
.av-cell p { font-size: 13.5px; line-height: 1.55; color: rgba(251,248,242,.65); margin: 0; }
.about-values h2 {
  text-align: center; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.025em; margin: 0;
}
.about-values h2 em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.18em; }
.about-values .av-sub { text-align: center; color: rgba(251,248,242,.6); margin: 16px auto 0; max-width: 540px; }

/* Editorial pullquote v2 — bigger, photo-backed */
.about-pullquote {
  background: var(--cream-50); padding: 90px 0;
  position: relative;
}
.about-pullquote-inner {
  max-width: 980px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 220px 1fr; gap: 50px; align-items: center;
}
@media (max-width: 720px) { .about-pullquote-inner { grid-template-columns: 1fr; text-align: center; } }
.apq-portrait {
  width: 220px; height: 220px; border-radius: 50%;
  background-size: cover; background-position: center; flex-shrink: 0;
  border: 6px solid var(--paper); box-shadow: 0 20px 50px -20px rgba(0,0,0,.4);
}
@media (max-width: 720px) { .apq-portrait { margin: 0 auto; } }
.apq-text { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); margin: 0; position: relative; padding-top: 30px; }
.apq-text::before {
  content: "\201C"; font-family: 'Caveat', cursive;
  font-size: 5.5rem; color: var(--green-500); position: absolute; top: -20px; left: -10px; line-height: 1;
}
.apq-text em { font-family: 'Caveat', cursive; font-style: normal; font-weight: 700; color: var(--green-700); font-size: 1.18em; line-height: .9; }
.apq-cite { display: block; margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-500); }

/* ----------------------------------------------
   SCROLLYTELLING TIMELINE — alternating zigzag
   ---------------------------------------------- */
.story-tl { padding: 90px 0; background: var(--paper); position: relative; }
.story-tl h2 {
  text-align: center; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem); letter-spacing: -.025em; margin: 0;
}
.story-tl h2 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.18em; }
.story-tl .story-sub { text-align: center; color: var(--slate-500); max-width: 540px; margin: 16px auto 60px; }

.zig {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  position: relative;
}
.zig::before {
  content: ""; position: absolute; left: 50%; top: 60px; bottom: 60px;
  width: 4px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--green-500) 0, var(--green-500) 8px, transparent 8px, transparent 16px);
  border-radius: 4px;
}
@media (max-width: 880px) { .zig::before { left: 22px; } }
.zig-row {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  padding: 36px 0;
  position: relative;
}
@media (max-width: 880px) { .zig-row { grid-template-columns: 44px 1fr; } }
.zig-row .zig-dot {
  width: 80px; display: flex; align-items: flex-start; justify-content: center;
  position: relative;
  padding-top: 30px;
}
@media (max-width: 880px) { .zig-row .zig-dot { width: 44px; padding-top: 32px; justify-content: flex-start; } }
.zig-dot .yr {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.4rem; line-height: 1;
  background: var(--cream-50); color: var(--green-700);
  padding: 12px 16px; border-radius: 16px; border: 2px solid var(--green-500);
  box-shadow: 0 12px 28px -10px rgba(79,181,73,.4);
  position: relative; z-index: 2;
}
.zig-card {
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 22px;
  padding: 28px 32px; position: relative; overflow: hidden;
  transition: transform .35s var(--ease-soft), box-shadow .35s;
}
.zig-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px rgba(15,15,15,.2); }
.zig-row.left .zig-card { grid-column: 1; text-align: right; }
.zig-row.right .zig-card { grid-column: 3; text-align: left; }
@media (max-width: 880px) {
  .zig-row.left .zig-card,
  .zig-row.right .zig-card { grid-column: 2; text-align: left; }
}
.zig-card .tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--green-50); color: var(--green-700);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.zig-card.win .tag { background: var(--red-50); color: var(--red-700); }
.zig-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.015em; margin: 0 0 10px; color: var(--ink); }
.zig-card p { font-size: 14.5px; line-height: 1.6; color: var(--slate-700); margin: 0; }
.zig-card .zig-img {
  margin-top: 18px; height: 200px; border-radius: 14px;
  background-size: cover; background-position: center;
}
.zig-row.left .zig-card .zig-bullets,
.zig-row.left .zig-card p {
  /* mirror text alignment cleanly when right-aligned */
}
.zig-row.cta .zig-card {
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: var(--ink-900);
}
.zig-row.cta .zig-card h3, .zig-row.cta .zig-card p { color: var(--ink-900); }
.zig-row.cta .zig-card .tag { background: rgba(15,15,15,.15); color: var(--ink-900); }
.zig-row.cta .zig-card a {
  display: inline-block; margin-top: 14px;
  background: var(--ink); color: var(--green-500); padding: 10px 22px; border-radius: 999px;
  text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 14px;
}

/* ----------------------------------------------
   HOME HERO v2 — magazine cover style
   ---------------------------------------------- */
.hero-mag {
  position: relative;
  background: var(--cream-50);
  padding: 60px 0 40px;
  overflow: hidden;
}
.hero-mag .hm-orb {
  position: absolute; pointer-events: none;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.25), transparent 65%);
  filter: blur(60px);
  top: -150px; left: -100px;
}
.hero-mag .hm-orb-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(252,195,11,.25), transparent 65%);
  top: 50%; right: -120px; left: auto;
}
.hero-mag .wrap { position: relative; z-index: 2; }

/* Top utility band */
.hm-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate-500); margin-bottom: 32px;
}
.hm-meta .live { display: inline-flex; align-items: center; gap: 8px; color: var(--green-700); font-weight: 700; }
.hm-meta .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(79,181,73,.25); animation: hmPulse 1.8s ease-in-out infinite;
}
@keyframes hmPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(79,181,73,.25); } 50% { box-shadow: 0 0 0 8px rgba(79,181,73,0); } }

/* Asymmetric grid: massive headline + photo collage on right */
.hm-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 50px; align-items: end;
}
@media (max-width: 980px) { .hm-grid { grid-template-columns: 1fr; gap: 40px; } }
.hm-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 7.6rem); line-height: .92; letter-spacing: -.045em;
  margin: 0; color: var(--ink);
}
.hm-title em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.12em; }
.hm-title .strike { position: relative; }
.hm-rotator {
  display: block; position: relative;
  height: 1.05em; line-height: 1;
  font-family: 'Caveat', cursive; font-weight: 700;
  color: var(--green-700);
  overflow: visible;
}
.hm-rotator span {
  display: block; position: absolute; left: 0; top: 0;
  font: inherit; color: inherit; white-space: nowrap;
  opacity: 0;
  animation: hmRot 8s ease-in-out infinite;
}
.hm-rotator span:nth-child(1) { animation-delay: 0s; }
.hm-rotator span:nth-child(2) { animation-delay: 2s; }
.hm-rotator span:nth-child(3) { animation-delay: 4s; }
.hm-rotator span:nth-child(4) { animation-delay: 6s; }
@keyframes hmRot {
  0%, 2%    { opacity: 0; transform: translateY(20px); }
  6%, 22%   { opacity: 1; transform: translateY(0); }
  26%, 100% { opacity: 0; transform: translateY(-20px); }
}
.hm-sub { margin: 28px 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--slate-700); max-width: 480px; }
.hm-ctas { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* RHS: kinetic photo collage */
.hm-collage {
  position: relative;
  height: 480px;
  width: 100%;
  min-width: 0;
}
@media (max-width: 980px) { .hm-collage { height: 360px; } }
.hm-tile {
  position: absolute;
  background-size: cover; background-position: center;
  border-radius: 22px;
  box-shadow: 0 24px 50px -22px rgba(15,15,15,.4);
  border: 4px solid var(--paper);
  overflow: hidden;
}
.hm-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55));
}
.hm-tile .hm-cap {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase;
}
.hm-t-1 { width: 56%; height: 65%; top: 0;    left: 0;  --rot: -4deg; transform: rotate(-4deg); animation: hmFloat 9s ease-in-out infinite; }
.hm-t-2 { width: 42%; height: 50%; top: 10%;  right: 0; --rot: 5deg;  transform: rotate(5deg);  animation: hmFloat 11s ease-in-out -2s infinite reverse; }
.hm-t-3 { width: 46%; height: 45%; bottom: 0; left: 8%; --rot: -2deg; transform: rotate(-2deg); animation: hmFloat 10s ease-in-out -4s infinite; }
.hm-t-4 { width: 36%; height: 40%; bottom: 5%; right: 5%; --rot: 6deg; transform: rotate(6deg); animation: hmFloat 12s ease-in-out -6s infinite reverse; }
@keyframes hmFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50%      { transform: translateY(-12px) rotate(var(--rot)); }
}
.hm-badge {
  position: absolute; z-index: 10;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 14px 32px -10px rgba(15,15,15,.2);
  display: flex; align-items: center; gap: 10px;
}
.hm-badge .ic {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.hm-badge .bb { display: flex; flex-direction: column; }
.hm-badge strong { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1; color: var(--ink); }
.hm-badge span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-top: 2px; }
.hm-badge-1 { top: -16px; right: 12%; transform: rotate(-3deg); }
.hm-badge-2 { bottom: -20px; left: 4%; transform: rotate(2deg); }

/* Bottom stat marquee */
.hm-marquee {
  margin-top: 50px; padding: 22px 0;
  background: var(--ink); color: var(--cream-50);
  border-radius: 999px;
  display: flex; overflow: hidden;
  position: relative;
}
.hm-marquee::before, .hm-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.hm-marquee::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.hm-marquee::after  { right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.hm-mq-track {
  display: inline-flex; gap: 50px; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  letter-spacing: -.01em;
  animation: hmMq 30s linear infinite;
  padding-left: 100%;
}
.hm-mq-track .sep { color: var(--green-500); }
.hm-mq-track em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.2em; }
@keyframes hmMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------
   BENTO FIX — uniform grid, fill all rows
   ---------------------------------------------- */
.bento-sec .bento {
  grid-auto-rows: 180px !important;
  gap: 16px !important;
}
.bento-1 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-2 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-3 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-4 { grid-column: span 5 !important; grid-row: span 3 !important; }
.bento-5 { grid-column: span 4 !important; grid-row: span 2 !important; }
.bento-6 { grid-column: span 3 !important; grid-row: span 2 !important; }
.bento-7 { grid-column: span 7 !important; grid-row: span 1 !important; }

/* The big Pine-Kazi photo card should be readable */
.bento-4 { min-height: 0 !important; }
.bento-4::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55));
}
.bento-4 .bn-proj {
  font-size: clamp(1.4rem, 2vw, 1.9rem) !important;
}

/* Generic hero background image helper for other pages */
.hp-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .25;
}
.hero-page .hp-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251,248,242,.4), var(--cream-50));
}

/* ============================================================
   v21 — Bento v2 — visually richer, no awkward crops
   ============================================================ */

/* Override old bento — only this new grid */
.bento.bento-v2 {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: minmax(180px, auto) !important;
  gap: 16px !important;
  margin-top: 32px !important;
}
@media (max-width: 960px) {
  .bento.bento-v2 { grid-template-columns: repeat(6, 1fr) !important; }
}

.b2 {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease-soft), box-shadow .35s, border-color .25s;
  isolation: isolate;
}
.b2:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -24px rgba(15,15,15,.22); border-color: transparent; }
.b2-body { padding: 22px 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.b2-eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-700); font-weight: 600;
}
.b2-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.03em;
  color: var(--ink); display: flex; align-items: baseline; gap: 6px;
  margin-top: 4px;
}
.b2-num .plus { color: var(--green-700); font-size: .55em; font-weight: 700; }
.b2-lbl { font-size: 13.5px; line-height: 1.45; color: var(--slate-700); margin-top: 4px; }
.b2-arr {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--green-700); margin-top: 12px;
}

/* 01 · photo-top card */
.b2-1 { grid-column: span 4; grid-row: span 2; }
.b-photo .b2-img { aspect-ratio: 5/3; background-size: cover; background-position: center; position: relative; }
.b-photo .b2-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45));
}

/* 02 · dark with photo backdrop */
.b2-2 { grid-column: span 4; grid-row: span 2; }
.b-dark { background: var(--ink); border-color: transparent; color: var(--cream-50); }
.b-dark .b2-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .35; z-index: 0;
}
.b-dark .b2-body { position: relative; z-index: 1; justify-content: flex-end; flex: 1; padding: 26px; }
.b-dark .b2-eyebrow { color: var(--green-500); }
.b-dark .b2-num { color: var(--cream-50); }
.b-dark .b2-lbl { color: rgba(251,248,242,.75); }
.b-dark .b2-arr { color: var(--green-500); }

/* 03 · clean card with avatars */
.b2-3 { grid-column: span 4; grid-row: span 2; }
.b-clean .b2-cohorts {
  display: flex; padding: 22px 26px 0;
}
.b-clean .b2-cohorts > span {
  width: 34px; height: 34px; border-radius: 50%;
  background-size: cover; background-position: center top;
  border: 2.5px solid var(--paper); margin-left: -10px; flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.2);
}
.b-clean .b2-cohorts > span:first-child { margin-left: 0; }

/* 04 · feature photo BIG (Pine-Kazi) */
.b2-4 {
  grid-column: span 5;
  grid-row: span 3;
  position: relative;
  min-height: 460px;
  padding: 0;
}
.b-feature .b2-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 15%;
  z-index: 0;
}
.b-feature .b2-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 30px 30px;
  color: #fff;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85));
}
.b-feature .b2-pill {
  display: inline-block; align-self: flex-start;
  background: var(--green-500); color: var(--ink-900);
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 14px;
}
.b-feature .b2-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 3.5vw, 3.4rem); line-height: 1; letter-spacing: -.025em;
  color: #fff; margin-bottom: 8px;
}
.b-feature .b2-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 12px;
  color: rgba(255,255,255,.75); letter-spacing: .04em;
}
.b-feature .b2-fcta {
  margin-top: 16px;
  font-family: var(--f-sans); font-weight: 600; font-size: 13.5px;
  color: var(--green-500);
}

/* 05 · 17 SDG icons grid */
.b2-5 { grid-column: span 4; grid-row: span 2; }
.b-icons .b2-icons {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
  padding: 20px 22px 0;
}
.b-icons .b2-icons img {
  width: 100%; height: auto; aspect-ratio: 1/1;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

/* 06 · green tile with avatar pile */
.b2-6 { grid-column: span 3; grid-row: span 2; }
.b-green { background: linear-gradient(160deg, var(--green-500), var(--green-700)); border-color: transparent; color: var(--ink-900); }
.b-green .b2-eyebrow { color: rgba(15,15,15,.7); }
.b-green .b2-num { color: var(--ink-900); }
.b-green .b2-lbl { color: rgba(15,15,15,.78); }
.b-green .b2-arr { color: var(--ink-900); }
.b-green .b2-avs {
  display: flex; padding: 22px 26px 0;
}
.b-green .b2-avs > span {
  width: 34px; height: 34px; border-radius: 50%;
  background-size: cover; background-position: center top;
  border: 2.5px solid var(--green-700); margin-left: -10px; flex-shrink: 0;
}
.b-green .b2-avs > span:first-child { margin-left: 0; }

/* 07 · Bottom-right CTA card — fills the 7×1 gap to make the grid rectangular */
.b2-7 {
  grid-column: span 7; grid-row: span 1;
  background: linear-gradient(135deg, var(--red-500), var(--red-700));
  color: #fff;
  border-color: transparent;
  min-height: 0;
  position: relative; overflow: hidden;
}
.b-cta::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 60%);
  pointer-events: none;
}
.b-cta .b2-cta-grid {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  padding: 22px 28px;
  position: relative; z-index: 1;
}
@media (max-width: 720px) {
  .b-cta .b2-cta-grid { grid-template-columns: auto 1fr; gap: 16px; }
}
.b2-cta-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.03em;
  color: #fff;
}
.b2-cta-body { min-width: 0; }
.b2-cta-eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-weight: 600;
}
.b2-cta-h {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -.015em; color: #fff; line-height: 1.15;
  margin-top: 6px;
}
.b2-cta-h em {
  font-family: 'Caveat', cursive; font-style: normal; font-weight: 700;
  color: #fff; font-size: 1.2em; padding: 0 .05em;
}
.b2-cta-sub { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.8); margin-top: 4px; }
.b2-cta-go {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--red-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .25s var(--ease-bounce);
}
@media (max-width: 720px) { .b2-cta-go { display: none; } }
.b2-7:hover .b2-cta-go { transform: translateX(4px) scale(1.08); }

/* Responsive bento spans — keep the rectangle on smaller screens */
@media (max-width: 960px) {
  .b2-1, .b2-2, .b2-3, .b2-5 { grid-column: span 3 !important; }
  .b2-4 { grid-column: span 6 !important; grid-row: span 2 !important; }
  .b2-6 { grid-column: span 3 !important; }
  .b2-7 { grid-column: span 6 !important; grid-row: span 1 !important; }
}
@media (max-width: 600px) {
  .b2-1, .b2-2, .b2-3, .b2-4, .b2-5, .b2-6, .b2-7 { grid-column: span 6 !important; }
}

/* ============================================================
   v22 — Slider Revolution-style hero polish + grid with side asset
   ============================================================ */

/* Side-by-side grid: slide text + asset card */
.hero-cover .hc-row-stage { padding: 60px 0 40px; }
.hero-cover .hc-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: center;
  width: 100%;
}
@media (max-width: 980px) { .hero-cover .hc-grid { grid-template-columns: 1fr; gap: 30px; } }
.hero-cover .hc-slides { max-width: none; }
.hero-cover .hc-slide { max-width: 720px; }

/* The asset card on the right — sleek glassy panel */
.hc-assets {
  position: relative;
  min-height: 380px;
}
@media (max-width: 980px) { .hc-assets { min-height: 200px; } }
.hc-asset {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  transform: translateY(20px);
}
.hc-asset.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Stat asset */
.hc-asset-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  padding: 50px 44px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.hc-asset-stat::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.35), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.hc-asset-eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--green-500);
  position: relative; z-index: 1;
}
.hc-asset-big {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -.04em;
  color: var(--cream-50);
  position: relative; z-index: 1;
}
.hc-asset-sm {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  position: relative; z-index: 1;
}

/* Winner-style asset */
.hc-asset-win {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  min-height: 380px;
}
.hc-asset-photo {
  background-size: cover;
  position: relative;
}
.hc-asset-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6));
}
.hc-asset-cap {
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0,0,0,.4);
  border-top: 1px solid rgba(255,255,255,.08);
}
.hc-asset-name {
  font-family: var(--f-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -.015em; color: var(--cream-50);
}
.hc-asset-meta {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}

/* Bottom rail: nav segments + arrows */
.hc-row-bottom { padding: 0 0 28px; }
.hc-bottom-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap;
}
.hc-nav {
  display: flex; gap: 6px;
  flex: 1;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 16px;
}
.hc-seg {
  flex: 1; max-width: 200px;
  background: transparent; border: 0; padding: 0; cursor: pointer; outline: none;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.hc-seg-bar {
  height: 3px; background: rgba(255,255,255,.12); border-radius: 3px;
  position: relative; overflow: hidden;
}
.hc-seg-bar > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  transition: width .1s linear;
}
.hc-seg.done .hc-seg-bar > i { width: 100% !important; }
.hc-seg-label {
  display: inline-flex; gap: 10px; align-items: baseline;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  transition: color .25s;
}
.hc-seg-label .num { color: rgba(255,255,255,.5); font-weight: 600; }
.hc-seg.on .hc-seg-label, .hc-seg.on .hc-seg-label .num { color: var(--cream-50); }
.hc-seg:hover .hc-seg-label { color: var(--green-500); }

.hc-arrows {
  display: inline-flex; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.hc-arrows button {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: var(--cream-50); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.hc-arrows button:hover {
  background: var(--green-500); color: var(--ink-900); border-color: var(--green-500);
  transform: translateY(-2px);
}

/* Polished slide-text entrance — replace block display with stacked positioning */
.hc-slide { display: block !important; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-soft); position: absolute; inset: 0; }
.hc-slides { position: relative; min-height: 420px; }
.hc-slide.active { opacity: 1; pointer-events: auto; position: relative; }
@media (max-width: 980px) { .hc-slides { min-height: 360px; } }

/* Disable the old hc-stats grid (we no longer render those rows) */
.hc-stats { display: none; }
.hc-scrollcue { display: none; }

/* Drop the .hero-mag section visibility just in case it lingers */
.hero-mag { display: none; }

/* ============================================================
   v23 — DASHBOARD beef-up: nav + Overview widgets + AI Studio +
   Messages + Mentors + Broadcasts + Analytics + Settings
   ============================================================ */

/* ---------- TOP-RIGHT chips (AI quick-open + streak) ---------- */
.dh-top-right { display: flex; gap: 12px; align-items: center; }
.dh-aichip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: var(--ink-900); border-radius: 999px;
  font-family: var(--f-sans); font-weight: 700; font-size: 13px;
  text-decoration: none; box-shadow: 0 8px 22px -8px rgba(79,181,73,.5);
  transition: transform .2s var(--ease-bounce);
}
.dh-aichip:hover { transform: translateY(-2px) scale(1.03); }
.dh-aichip-ic {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-900); color: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- TAB NAV — pills + counters + separator ---------- */
.dh-tabs-inner { display: flex; gap: 4px; overflow-x: auto; align-items: center; }
.dh-tab .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 0 6px; height: 18px; margin-left: 4px;
  background: var(--cream-100); color: var(--slate-700);
  border-radius: 999px; font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 700;
}
.dh-tab .count.alert { background: var(--red-500); color: #fff; }
.dh-tab .count.green { background: var(--green-500); color: var(--ink-900); }
.dh-tab.on .count { background: rgba(255,255,255,.18); color: var(--cream-50); }
.dh-tab-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex-shrink: 0; }
.dh-tab.dh-tab-end { margin-left: auto; }

/* ---------- SHARED CARD — base ---------- */
.dh-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 26px; position: relative; overflow: hidden;
}
.dh-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 14px;
}
.dh-card-head h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; margin: 0; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.dh-card-head h3 .ic { color: var(--green-700); }
.dh-card-head .link { font-family: var(--f-sans); font-weight: 600; font-size: 12.5px; color: var(--green-700); text-decoration: none; }
.dh-card-head .meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); }

/* ---------- OVERVIEW: massive widget grid ---------- */
.dh-overview-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 0;
}
@media (max-width: 980px) { .dh-overview-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .dh-overview-grid { grid-template-columns: 1fr; gap: 14px; } }

.w-continue   { grid-column: span 8; }
.w-ai-tips    { grid-column: span 4; }
.w-today      { grid-column: span 4; }
.w-xpchart    { grid-column: span 8; }
.w-activity   { grid-column: span 6; }
.w-leader     { grid-column: span 6; }
.w-badges     { grid-column: span 4; }
.w-quickact   { grid-column: span 4; }
.w-events     { grid-column: span 4; }
.w-cohort-cta { grid-column: span 12; }
.w-mentors    { grid-column: span 6; }
.w-cofounder  { grid-column: span 6; }
.w-certs      { grid-column: span 6; }
.w-suggested  { grid-column: span 6; }

@media (max-width: 980px) {
  .w-continue, .w-ai-tips, .w-today, .w-xpchart, .w-activity, .w-leader,
  .w-badges, .w-quickact, .w-events, .w-mentors, .w-cofounder, .w-certs, .w-suggested { grid-column: span 6; }
  .w-cohort-cta { grid-column: span 6; }
}
@media (max-width: 600px) {
  .w-continue, .w-ai-tips, .w-today, .w-xpchart, .w-activity, .w-leader,
  .w-badges, .w-quickact, .w-events, .w-mentors, .w-cofounder, .w-certs, .w-suggested, .w-cohort-cta { grid-column: span 1; }
}

/* AI tips widget */
.w-ai-tips { background: linear-gradient(165deg, var(--ink), #1a1a1a 70%, var(--green-700)); color: var(--cream-50); border-color: transparent; padding: 22px; }
.w-ai-tips .dh-card-head h3 { color: var(--cream-50); }
.w-ai-tips .ait-list { display: flex; flex-direction: column; gap: 10px; }
.w-ai-tips .ait {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; color: inherit;
  transition: background .2s, transform .2s;
}
.w-ai-tips .ait:hover { background: rgba(255,255,255,.08); transform: translateX(3px); }
.w-ai-tips .ait .ic-bg {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
}
.w-ai-tips .ait.red .ic-bg { background: var(--red-500); color: #fff; }
.w-ai-tips .ait.green .ic-bg { background: var(--green-500); }
.w-ai-tips .ait strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 13.5px; color: var(--cream-50); margin-bottom: 4px; }
.w-ai-tips .ait p { font-size: 12px; line-height: 1.45; color: rgba(251,248,242,.72); margin: 0; }
.w-ai-tips .ait .go { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--green-500); margin-top: 6px; display: block; }

/* Today schedule */
.w-today .today-list { display: flex; flex-direction: column; gap: 8px; }
.w-today .today-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--cream-50); border: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: all .2s;
}
.w-today .today-item:hover { border-color: var(--green-500); transform: translateX(3px); }
.w-today .today-item .time {
  font-family: var(--f-mono); font-weight: 700; font-size: 13px;
  color: var(--ink); min-width: 50px;
}
.w-today .today-item .title { font-family: var(--f-sans); font-weight: 600; font-size: 13px; flex: 1; }
.w-today .today-item .kind {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.w-today .today-item .kind.mentor { background: var(--green-50); color: var(--green-700); }
.w-today .today-item .kind.lesson { background: #FFE9CC; color: #C67100; }
.w-today .today-item .kind.cohort { background: var(--red-50); color: var(--red-700); }
.w-today .today-item .kind.social { background: #DBF0FF; color: #0270A0; }

/* XP chart widget */
.w-xpchart { background: var(--paper); }
.xp-chart {
  display: flex; align-items: flex-end; gap: 12px;
  height: 160px; padding: 8px 0; margin-top: 8px;
}
.xp-bar {
  flex: 1; position: relative;
  background: linear-gradient(to top, var(--green-700), var(--green-500));
  border-radius: 8px 8px 4px 4px;
  min-height: 6px;
  display: flex; align-items: flex-end; justify-content: center;
  transition: all .2s;
}
.xp-bar:hover { transform: translateY(-3px); filter: brightness(1.1); }
.xp-bar .val {
  position: absolute; top: -22px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; color: var(--ink);
  opacity: 0; transition: opacity .2s;
}
.xp-bar:hover .val { opacity: 1; }
.xp-bar.today {
  background: linear-gradient(to top, var(--ink), #1a1a1a);
}
.xp-bar.today .val { opacity: 1; color: var(--green-700); }
.xp-axis {
  display: flex; gap: 12px; margin-top: 10px;
}
.xp-axis span {
  flex: 1; text-align: center;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-500); letter-spacing: .08em; text-transform: uppercase;
}

/* Leaderboard widget */
.w-leader .lb-list { display: flex; flex-direction: column; gap: 6px; }
.w-leader .lb-row {
  display: grid; grid-template-columns: 30px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--cream-50); border: 1px solid transparent;
  text-decoration: none; color: inherit; transition: all .2s;
}
.w-leader .lb-row:hover { border-color: var(--green-500); background: var(--paper); }
.w-leader .lb-row.me { background: linear-gradient(135deg, var(--green-50), var(--paper)); border-color: var(--green-500); }
.w-leader .lb-rank {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.4rem;
  color: var(--slate-500); text-align: center; line-height: 1;
}
.w-leader .lb-row:nth-child(1) .lb-rank { color: #D4AF37; font-size: 1.7rem; }
.w-leader .lb-row:nth-child(2) .lb-rank { color: #999; font-size: 1.55rem; }
.w-leader .lb-row:nth-child(3) .lb-rank { color: #B87333; font-size: 1.45rem; }
.w-leader .lb-name { font-weight: 600; font-size: 13.5px; color: var(--ink); display: block; }
.w-leader .lb-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-500); letter-spacing: .05em; }
.w-leader .lb-xp { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--green-700); }
.w-leader .lb-row.me .lb-xp { color: var(--ink); }

/* Cohort CTA banner */
.w-cohort-cta {
  background: linear-gradient(135deg, var(--red-500), var(--red-700));
  color: #fff; border-color: transparent; padding: 0;
}
.w-cohort-cta-inner {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 30px;
  padding: 24px 36px;
}
@media (max-width: 980px) { .w-cohort-cta-inner { grid-template-columns: 1fr; text-align: center; gap: 16px; } }
.w-cohort-cta h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; color: #fff; margin: 0; }
.w-cohort-cta p { font-size: 13px; color: rgba(255,255,255,.85); margin: 4px 0 0; }
.w-cohort-cta .countdown { display: inline-flex; gap: 6px; font-family: var(--f-mono); font-size: 13px; align-items: baseline; }
.w-cohort-cta .countdown strong { font-family: var(--f-display); font-weight: 700; font-size: 1.8rem; line-height: 1; }
.w-cohort-cta .btn { background: #fff; color: var(--red-700); padding: 12px 22px; border-radius: 999px; font-weight: 700; }

/* ---------- AI STUDIO ---------- */
.aistudio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 24px;
}
@media (max-width: 880px) { .aistudio-grid { grid-template-columns: 1fr; } }
.ai-tool {
  position: relative; overflow: hidden;
  padding: 28px 30px; border-radius: 22px;
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease-soft), box-shadow .3s, border-color .25s;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.ai-tool:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -22px rgba(15,15,15,.22); }
.ai-tool .ai-glow {
  position: absolute; top: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--ai-c, var(--green-500)), transparent 60%);
  opacity: .25; pointer-events: none; filter: blur(20px);
}
.ai-tool.tone-green  { --ai-c: var(--green-500); }
.ai-tool.tone-red    { --ai-c: var(--red-500); }
.ai-tool.tone-cyan   { --ai-c: #26BDE2; }
.ai-tool.tone-yellow { --ai-c: #FCC30B; }
.ai-tool.tone-purple { --ai-c: #8E5AE2; }
.ai-tool .ai-ic {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--ai-c, var(--green-500));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-900); position: relative; z-index: 1;
}
.ai-tool.tone-red .ai-ic, .ai-tool.tone-purple .ai-ic { color: #fff; }
.ai-tool h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; margin: 0; color: var(--ink); position: relative; z-index: 1; }
.ai-tool p { font-size: 13.5px; line-height: 1.55; color: var(--slate-700); margin: 0; flex: 1; position: relative; z-index: 1; }
.ai-tool .ai-cta {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--green-700); font-weight: 700;
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}

.ai-recent { margin-top: 30px; }
.ai-recent h3 { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; margin: 0 0 14px; color: var(--ink); }
.ai-recent .list { display: flex; flex-direction: column; gap: 8px; }
.ai-recent .row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit;
}
.ai-recent .row .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--green-50); color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; }
.ai-recent .row .body { flex: 1; font-size: 13.5px; color: var(--ink); }
.ai-recent .row .when { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); }

/* AI Studio hero */
.aistudio-hero {
  background: linear-gradient(155deg, var(--ink) 0%, #1a3a18 60%, var(--green-700));
  color: var(--cream-50);
  border-radius: 28px;
  padding: 36px 40px;
  position: relative; overflow: hidden;
  margin-top: 18px;
}
.aistudio-hero::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,181,73,.5), transparent 60%); filter: blur(30px);
}
.aistudio-hero h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0; color: var(--cream-50); position: relative; z-index: 1; }
.aistudio-hero h2 em { font-family: 'Caveat', cursive; color: var(--green-500); font-style: normal; font-weight: 700; font-size: 1.18em; }
.aistudio-hero p { font-size: 1rem; line-height: 1.55; color: rgba(251,248,242,.78); margin: 12px 0 0; max-width: 580px; position: relative; z-index: 1; }
.aistudio-hero .quick { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; position: relative; z-index: 1; }
.aistudio-hero .quick a {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: var(--cream-50);
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 12.5px; font-weight: 600;
  transition: all .2s;
}
.aistudio-hero .quick a:hover { background: var(--green-500); color: var(--ink-900); border-color: var(--green-500); }

/* ---------- MESSAGES (DM inbox) ---------- */
.msg-page { display: grid; grid-template-columns: 360px 1fr; gap: 18px; min-height: 600px; }
@media (max-width: 880px) { .msg-page { grid-template-columns: 1fr; } }
.msg-list { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.msg-list-head {
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.msg-list-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin: 0; }
.msg-list-head .new {
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
}
.msg-search { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.msg-search input {
  width: 100%; padding: 10px 14px; background: var(--cream-50);
  border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--f-sans); font-size: 13px; outline: none;
}
.msg-rows { flex: 1; overflow-y: auto; max-height: 540px; }
.msg-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 12px; padding: 14px 18px; cursor: pointer;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.msg-row:hover, .msg-row.active { background: var(--cream-50); }
.msg-row .avp {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  position: relative;
}
.msg-row .avp.online::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--green-500);
  border: 2.5px solid var(--paper);
}
.msg-row .info { min-width: 0; }
.msg-row .info .nm { font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.msg-row .info .prev { font-size: 12.5px; color: var(--slate-500); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; margin-top: 2px; }
.msg-row .meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg-row .meta .when { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-500); }
.msg-row .meta .unread {
  background: var(--green-500); color: var(--ink-900);
  font-family: var(--f-mono); font-weight: 700; font-size: 10.5px;
  padding: 2px 7px; border-radius: 999px;
}
.msg-row.unread .info .nm::after { content: "•"; color: var(--green-500); margin-left: 6px; }

.msg-thread {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
}
.msg-thread-head {
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.msg-thread-head .who { display: flex; align-items: center; gap: 12px; }
.msg-thread-head .nm { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.msg-thread-head .stat { font-family: var(--f-mono); font-size: 10.5px; color: var(--green-700); letter-spacing: .12em; text-transform: uppercase; }
.msg-thread-head .actions { display: flex; gap: 8px; }
.msg-thread-head .actions button {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream-50); border: 1.5px solid var(--line); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.msg-body {
  flex: 1; padding: 24px; overflow-y: auto; min-height: 320px;
  display: flex; flex-direction: column; gap: 14px;
}
.msg-bubble {
  max-width: 65%; padding: 12px 16px; border-radius: 16px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  background: var(--cream-100); align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg-bubble.me {
  background: var(--ink); color: var(--cream-50); align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
}
.msg-bubble .time { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--slate-500); margin-top: 4px; }
.msg-bubble.me .time { color: rgba(255,255,255,.55); }
.msg-input {
  padding: 14px 18px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center;
}
.msg-input button.icbtn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cream-100); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-input input {
  flex: 1; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--f-sans); font-size: 14px; outline: none;
}
.msg-input .send {
  background: var(--green-500); color: var(--ink-900);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Empty state */
.dh-empty {
  text-align: center; padding: 40px 24px;
  color: var(--slate-500); background: var(--cream-50);
  border: 1px dashed var(--line); border-radius: 18px;
}
.dh-empty .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--cream-100); color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.dh-empty h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 0 0 6px; }
.dh-empty p { font-size: 13.5px; margin: 0 0 18px; }

/* ---------- MENTORS ---------- */
.mentors-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 980px) { .mentors-grid { grid-template-columns: 1fr; } }

.mentor-slots {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;
}
.slot {
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; gap: 12px; align-items: center;
  text-decoration: none; color: inherit; transition: all .2s;
}
.slot:hover { border-color: var(--green-500); transform: translateY(-2px); }
.slot .date {
  width: 48px; text-align: center; border-radius: 10px; background: var(--paper);
  padding: 6px 0; flex-shrink: 0; border: 1px solid var(--line);
}
.slot .date .d { display: block; font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1; }
.slot .date .m { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-top: 2px; }
.slot .info { flex: 1; min-width: 0; }
.slot .info .who { font-family: var(--f-sans); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.slot .info .when { font-family: var(--f-mono); font-size: 11px; color: var(--green-700); }
.slot .info .topic { font-size: 12px; color: var(--slate-500); margin-top: 2px; }

/* Mentor cards (people) */
.mentor-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mentor-cards .mc {
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; display: flex; gap: 12px; align-items: center;
}
.mentor-cards .mc .av {
  width: 52px; height: 52px; border-radius: 50%;
  background-size: cover; background-position: center top;
  background-color: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.mentor-cards .mc .info { min-width: 0; flex: 1; }
.mentor-cards .mc .nm { font-family: var(--f-sans); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.mentor-cards .mc .role { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; }

/* ---------- BROADCASTS ---------- */
.broadcast-wrap {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px;
}
@media (max-width: 980px) { .broadcast-wrap { grid-template-columns: 1fr; } }
.broadcast-compose {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 28px;
}
.broadcast-compose label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
.broadcast-compose input, .broadcast-compose select, .broadcast-compose textarea {
  width: 100%; padding: 12px 16px; background: var(--cream-50);
  border: 1.5px solid var(--line); border-radius: 12px;
  font-family: var(--f-sans); font-size: 14px; outline: none;
}
.broadcast-compose textarea { min-height: 140px; resize: vertical; }
.broadcast-compose .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.broadcast-compose .channels { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 18px; }
.broadcast-compose .channels button {
  background: var(--cream-50); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; font-family: var(--f-mono); font-size: 12px;
}
.broadcast-compose .channels button.on { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.broadcast-compose .actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.broadcast-compose .btn-send { background: var(--green-500); color: var(--ink-900); padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.broadcast-compose .btn-draft { background: transparent; color: var(--slate-700); border: 1.5px solid var(--line); padding: 12px 22px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; }

.broadcast-history { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.broadcast-history h3 { font-family: var(--f-display); font-weight: 700; font-size: 1rem; margin: 0 0 14px; }
.bh-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line);
  align-items: center;
}
.bh-row:last-child { border-bottom: 0; }
.bh-subj { font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.bh-to { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); margin-top: 2px; }
.bh-when { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); white-space: nowrap; }
.bh-opens { font-family: var(--f-mono); font-size: 11px; color: var(--green-700); font-weight: 700; }

/* ---------- ANALYTICS ---------- */
.an-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
@media (max-width: 880px) { .an-stat-grid { grid-template-columns: 1fr 1fr; } }
.an-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px;
}
.an-stat .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500); }
.an-stat .val { font-family: var(--f-display); font-weight: 700; font-size: 2.4rem; line-height: 1; margin: 10px 0 0; }
.an-stat .delta { font-family: var(--f-mono); font-size: 11px; color: var(--green-700); margin-top: 6px; }

/* ---------- SETTINGS ---------- */
.set-grid { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
@media (max-width: 720px) { .set-grid { grid-template-columns: 1fr; } }
.set-nav { display: flex; flex-direction: column; gap: 4px; }
.set-nav a {
  padding: 10px 14px; border-radius: 10px; color: var(--ink);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  transition: background .15s;
}
.set-nav a:hover, .set-nav a.on { background: var(--cream-100); }
.set-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px 32px; }
.set-panel h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 14px; }
.set-panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.set-panel label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
.set-panel input { width: 100%; padding: 12px 16px; background: var(--cream-50); border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--f-sans); font-size: 14px; outline: none; }
.toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .meta { font-size: 13px; color: var(--ink); }
.toggle-row .meta strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.toggle {
  position: relative; width: 44px; height: 24px; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: background .2s;
}
.toggle.on { background: var(--green-500); }
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .2s var(--ease-bounce);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.toggle.on::after { transform: translateX(20px); }

/* ============================================================
   v24 — Minimal hero + spinning circular CTA
   ============================================================ */
.hc-title-min {
  font-size: clamp(3rem, 7vw, 7.5rem) !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
  margin: 0 !important;
  font-weight: 700;
  color: var(--cream-50);
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
.hc-title-min .hc-line { display: block; }
.hc-title-min .hc-line.em {
  font-family: 'Caveat', cursive;
  font-style: normal; font-weight: 700;
  color: var(--green-500);
  font-size: 1.15em; line-height: .9;
  padding-top: .04em;
  -webkit-text-fill-color: initial; background: none !important;
}

/* Hide the lead + cta-rows in the minimal hero */
.hero-cover .hc-slide .hc-eyebrow,
.hero-cover .hc-slide .hc-lead,
.hero-cover .hc-slide .hc-cta { display: none !important; }

/* SPINNING CIRCULAR CTA — sits on the right of the hero */
.hc-spinwrap {
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 320px;
}
.hc-spin {
  position: relative;
  width: clamp(220px, 22vw, 300px);
  height: clamp(220px, 22vw, 300px);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
.hc-spin-text {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: hcSpin 14s linear infinite;
}
.hc-spin-text text {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--cream-50);
  font-weight: 600;
}
@keyframes hcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Big green core circle with CTA */
.hc-spin-core {
  position: relative; z-index: 2;
  width: 64%; height: 64%;
  border-radius: 50%;
  background: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease-bounce), background .2s;
  box-shadow: 0 0 0 8px rgba(15,15,15,.4), inset 0 -6px 16px rgba(0,0,0,.15);
}
.hc-spin:hover .hc-spin-core { background: #fff; transform: scale(1.06); }
.hc-spin-cta {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -.02em;
  color: var(--ink-900);
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
}
.hc-spin-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease-bounce);
}
.hc-spin:hover .hc-spin-arrow { transform: rotate(45deg); background: var(--green-700); color: #fff; }

/* On mobile, stack the spin badge below the title and shrink */
@media (max-width: 880px) {
  .hero-cover .hc-grid { grid-template-columns: 1fr !important; }
  .hc-spinwrap { min-height: 240px; margin-top: 20px; }
  .hc-spin { width: 200px; height: 200px; }
  .hc-title-min { font-size: clamp(2.6rem, 12vw, 4rem) !important; }
}

/* Reduce motion: stop spin */
@media (prefers-reduced-motion: reduce) {
  .hc-spin-text { animation: none !important; }
}

/* Drop the old asset card from this hero */
.hc-assets, .hc-asset { display: none !important; }

/* ============================================================
   v25 — Pattern background for footer + dashboard
   ============================================================ */

/* FOOTER — clean ink black with a subtle green glow at the top edge.
   (Replaces an older double-pattern overlay that came out muddy behind text.) */
.foot {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(79,181,73,.18), transparent 70%),
    linear-gradient(180deg, #0d130f 0%, #080a08 100%);
  background-color: var(--ink);
  overflow: hidden;
  border-top: 1px solid rgba(79,181,73,.18);
}
.foot::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(79,181,73,.10), transparent 35%),
    radial-gradient(circle at 88% 78%, rgba(255,201,71,.06), transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.foot > * { position: relative; z-index: 1; }

/* DASHBOARD — soft pattern wash in the body (faded so cards still pop) */
.dh-body {
  position: relative;
  background:
    linear-gradient(180deg, rgba(251,248,242,.92), rgba(251,248,242,.96)),
    url('/assets/img/bg/pattern.png') center -40px / 900px auto;
  background-attachment: fixed, scroll;
  background-color: var(--cream-50);
}
.dh-body::before {
  content: ""; position: absolute; inset: 0;
  background: url('/assets/img/bg/pattern.png') center top / 900px auto repeat;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.dh-body > * { position: relative; z-index: 1; }

/* Dashboard hero — accent pattern in the side */
.dh {
  position: relative; overflow: hidden;
}
.dh::after {
  content: ""; position: absolute; top: 0; right: -120px; width: 480px; height: 100%;
  background: url('/assets/img/bg/pattern.png') center / cover no-repeat;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.dh .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .dh-body { background-attachment: scroll, scroll; }
}

/* ============================================================
   v26 — MEGA MENU (interactive multi-column dropdowns)
   ============================================================ */

.nav-has-mega {
  cursor: default; display: inline-flex; align-items: center; gap: 4px;
  outline: none; position: relative;
}
.nav-has-mega .nav-caret { opacity: .55; transition: transform .2s ease, opacity .2s; }
.nav-has-mega:hover .nav-caret,
.nav-has-mega.on .nav-caret { opacity: 1; transform: rotate(180deg); }

/* Mega panel — full-width band sliding down from the nav */
.mega-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  width: min(1200px, calc(100vw - 32px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 32px 80px -20px rgba(15,15,15,.28), 0 8px 22px -10px rgba(15,15,15,.1);
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .28s var(--ease-soft), visibility .22s;
  z-index: 80;
}
.mega-panel::before {
  content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.mega-panel.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Slight blur tint when mega is open (gives backdrop depth) */
.nav.mega-open .nav-inner { position: relative; z-index: 81; }

/* Grid: 2 columns of links + 1 feature card on the right */
.mega-grid {
  display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 28px;
  width: 100% !important; padding: 0 !important;
}
@media (max-width: 980px) { .mega-grid { grid-template-columns: 1fr 1fr; } .mega-feature { display: none !important; } }
@media (max-width: 720px) { .mega-grid { grid-template-columns: 1fr; } }

.mega-col { display: flex; flex-direction: column; gap: 4px; }
.mega-col-title {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-700);
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.mega-link {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transition: background .15s ease;
}
.mega-link:hover { background: var(--cream-100); }
.mega-link .mega-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--green-50); color: var(--green-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s, transform .2s;
}
.mega-link:hover .mega-ic { background: var(--green-500); color: var(--ink-900); transform: scale(1.06); }
.mega-link .mega-text strong {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: 14.5px; color: var(--ink); line-height: 1.2;
}
.mega-link .mega-text em {
  display: block; font-style: normal;
  font-size: 12px; color: var(--slate-500); margin-top: 3px; line-height: 1.35;
}

/* Feature card on the right */
.mega-feature {
  position: relative; overflow: hidden;
  border-radius: 16px;
  min-height: 220px;
  background-size: cover; background-position: center;
  text-decoration: none; color: var(--cream-50);
  display: flex; align-items: flex-end;
  transition: transform .3s var(--ease-soft);
}
.mega-feature:hover { transform: translateY(-4px); }
.mega-feature-overlay {
  position: relative; z-index: 1;
  padding: 22px;
  width: 100%;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.88));
}
.mega-feature-kicker {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  background: var(--green-500); color: var(--ink-900);
  padding: 4px 9px; border-radius: 999px; margin-bottom: 10px;
}
.mega-feature-title {
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -.02em; line-height: 1.05; margin-bottom: 6px;
}
.mega-feature p { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.85); margin: 0 0 12px; }
.mega-feature-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 700; font-size: 12.5px;
  color: var(--green-500);
}

/* Hide the OLD dropdown completely (replaced by mega) */
.nav-has-drop .nav-drop { display: none !important; }

/* ============================================================
   v27 — Roadmap as an actual map (winding path + pins + flag)
   ============================================================ */
.roadmap {
  position: relative; padding: 80px 0 100px;
  background:
    radial-gradient(circle at 30% 0%, rgba(79,181,73,.06), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(252,195,11,.06), transparent 55%),
    var(--cream-50);
  overflow: hidden;
}
.roadmap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(15,15,15,.06) 1px, transparent 1px),
    radial-gradient(rgba(15,15,15,.04) 1px, transparent 1px);
  background-size: 24px 24px, 80px 80px;
  background-position: 0 0, 10px 10px;
  opacity: .5;
}

.rm-stage {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  padding: 30px var(--gutter) 50px;
  min-height: 1140px;
}
@media (max-width: 880px) {
  .rm-stage { min-height: 0; padding: 20px var(--gutter) 30px; }
}

/* MLBT doodle pattern in the negative space */
.rm-pat {
  position: absolute; inset: 0;
  background: url('/assets/img/bg/pattern.png') center top / 700px auto repeat;
  opacity: .2;
  pointer-events: none; z-index: 0;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at center, rgba(0,0,0,.95) 25%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.1) 100%);
          mask-image: radial-gradient(ellipse 70% 65% at center, rgba(0,0,0,.95) 25%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.1) 100%);
}

.rm-path {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 880px) { .rm-path { display: none; } .rm-pat { display: none; } }

/* Stops — absolutely positioned along the path */
.rm-stop {
  position: absolute; width: 340px;
  display: grid; grid-template-columns: 56px 1fr; gap: 14px;
  align-items: start;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
  z-index: 2;
}
.rm-stop.in { opacity: 1; transform: translateY(0); }

/* Tuned to the shortened path (viewBox 1200x1100) */
.rm-stop[data-stop="0"] { top: 20px;  left: 90px;  }
.rm-stop[data-stop="1"] { top: 220px; right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stop[data-stop="2"] { top: 470px; left: 90px;  }
.rm-stop[data-stop="3"] { top: 650px; right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stop[data-stop="4"] { top: 880px; left: 90px;  }

/* 6-stop layout (e.g. /about story roadmap) — adds a 6th pin and stretches the stage
   so the goal flag still sits at the bottom of the longer path. */
.rm-stops-6 .rm-stage { min-height: 1380px; }
.rm-stops-6 .rm-stop[data-stop="0"] { top: 20px;   left: 90px;  }
.rm-stops-6 .rm-stop[data-stop="1"] { top: 200px;  right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stops-6 .rm-stop[data-stop="2"] { top: 400px;  left: 90px;  }
.rm-stops-6 .rm-stop[data-stop="3"] { top: 580px;  right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stops-6 .rm-stop[data-stop="4"] { top: 780px;  left: 90px;  }
.rm-stops-6 .rm-stop[data-stop="5"] { top: 980px;  right: 90px; left: auto; grid-template-columns: 1fr 56px; }

/* 7-stop layout (/journey — seven cohort years) — one more pin, taller stage so the
   goal flag stays pinned to the bottom of the longer winding road. */
.rm-stops-7 .rm-stage { min-height: 1560px; }
.rm-stops-7 .rm-stop[data-stop="0"] { top: 20px;    left: 90px;  }
.rm-stops-7 .rm-stop[data-stop="1"] { top: 205px;   right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stops-7 .rm-stop[data-stop="2"] { top: 390px;   left: 90px;  }
.rm-stops-7 .rm-stop[data-stop="3"] { top: 575px;   right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stops-7 .rm-stop[data-stop="4"] { top: 760px;   left: 90px;  }
.rm-stops-7 .rm-stop[data-stop="5"] { top: 945px;   right: 90px; left: auto; grid-template-columns: 1fr 56px; }
.rm-stops-7 .rm-stop[data-stop="6"] { top: 1130px;  left: 90px;  }

/* Right-side stops have pin on right */
.rm-stop.rm-stop-r .rm-pin { grid-column: 2; }
.rm-stop.rm-stop-r .rm-card { grid-column: 1; text-align: right; }
.rm-stop.rm-stop-r .rm-card-head { flex-direction: row-reverse; }

@media (max-width: 880px) {
  .rm-stop {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    width: auto; max-width: 100%; margin-bottom: 18px;
    grid-template-columns: 60px 1fr !important;
  }
  .rm-stop.rm-stop-r .rm-pin { grid-column: 1; }
  .rm-stop.rm-stop-r .rm-card { grid-column: 2; text-align: left; }
  .rm-stop.rm-stop-r .rm-card-head { flex-direction: row; }
}

/* Pin */
.rm-pin {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--green-500); color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 18px;
  position: relative;
  box-shadow: 0 14px 28px -10px rgba(79,181,73,.5), 0 0 0 6px var(--paper), 0 0 0 7px var(--green-500);
  z-index: 2;
}
.rm-pin-num { position: relative; z-index: 1; }
.rm-pin-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  background: var(--green-500); opacity: .25;
  animation: rmPing 2.5s ease-out infinite;
}
@keyframes rmPing {
  0% { transform: scale(.8); opacity: .35; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(.8); opacity: 0; }
}
.rm-stop:nth-child(even) .rm-pin { background: var(--ink); color: var(--green-500); box-shadow: 0 14px 28px -10px rgba(15,15,15,.45), 0 0 0 6px var(--paper), 0 0 0 7px var(--ink); }
.rm-stop:nth-child(even) .rm-pin-ring { background: var(--ink); }

/* Card */
.rm-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px; position: relative;
  box-shadow: 0 16px 36px -16px rgba(15,15,15,.15);
}
.rm-card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.rm-card-head h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -.015em; margin: 0; color: var(--ink); line-height: 1.1;
}
.rm-when {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--green-700); display: block; margin-top: 2px;
}
.rm-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--green-50); color: var(--green-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.rm-badge {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--cream-50);
  padding: 4px 9px; border-radius: 999px;
  flex-shrink: 0;
}
.rm-stop.rm-stop-r .rm-badge { margin-left: 0; margin-right: auto; }
.rm-card p {
  font-size: 13.5px; line-height: 1.55; color: var(--slate-700); margin: 0;
}

/* Goal flag at the end */
.rm-flag {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.rm-flag-pole {
  width: 4px; height: 60px; background: var(--ink); border-radius: 4px;
}
.rm-flag-banner {
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: var(--ink-900);
  padding: 12px 22px; border-radius: 14px;
  text-align: center;
  box-shadow: 0 16px 32px -10px rgba(79,181,73,.5);
  position: relative;
}
.rm-flag-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  border-left: 24px solid transparent; border-right: 24px solid transparent;
  border-top: 12px solid var(--green-700); width: 0; height: 0; margin: 0 auto;
}
.rm-flag-banner strong { font-family: var(--f-display); font-weight: 700; font-size: 15px; display: block; line-height: 1; }
.rm-flag-banner em { font-style: normal; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(15,15,15,.7); margin-top: 4px; display: block; }
@media (max-width: 880px) { .rm-flag { position: relative; bottom: auto; left: auto; transform: none; margin: 20px auto 0; } }

/* v28 — tighter roadmap pins + section padding */
.roadmap { padding: 50px 0 60px !important; }
.rm-pin { width: 52px !important; height: 52px !important; font-size: 16px !important; box-shadow: 0 12px 24px -10px rgba(79,181,73,.5), 0 0 0 5px var(--paper), 0 0 0 6px var(--green-500) !important; }
.rm-stop:nth-child(even) .rm-pin { box-shadow: 0 12px 24px -10px rgba(15,15,15,.45), 0 0 0 5px var(--paper), 0 0 0 6px var(--ink) !important; }
.rm-card { padding: 14px 18px !important; }
.rm-card-head { margin-bottom: 8px !important; gap: 10px !important; }
.rm-ic { width: 34px !important; height: 34px !important; }
.rm-card h3 { font-size: 1.1rem !important; }
.rm-card p { font-size: 13px !important; line-height: 1.5 !important; }
.rm-flag-pole { height: 40px !important; }

/* ============ v29 · 2025 Demo Day gallery (winners + home recap) ============ */
.dd25 {
  padding: 80px 0 60px;
  background: var(--cream-50);
  position: relative;
}
.dd25-head {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px;
  align-items: end; max-width: 1280px; margin: 0 auto 36px; padding: 0 32px;
}
.dd25-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: 14px;
}
.dd25-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(79,181,73,.18);
  animation: dd25-pulse 1.8s ease-in-out infinite;
}
@keyframes dd25-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.85);opacity:.65} }
.dd25-head h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.025em;
  margin: 0 0 14px; color: var(--ink-900);
}
.dd25-head h2 em { font-family: 'Caveat', cursive; color: var(--green-700); font-style: normal; font-weight: 700; font-size: 1.1em; }
.dd25-head p { color: var(--slate-700); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 540px; }
.dd25-stats {
  display: flex; gap: 24px; padding-bottom: 8px; justify-content: flex-end;
}
.dd25-stats > div {
  display: flex; flex-direction: column; align-items: flex-start;
}
.dd25-stats strong {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: var(--ink-900);
}
.dd25-stats span {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-500); margin-top: 6px;
}

/* Asymmetric photo grid */
.dd25-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 14px;
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.dd25-cell {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 18px; background: var(--ink); cursor: zoom-in;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.dd25-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.dd25-cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,15,15,.85) 100%);
  color: #fff;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.dd25-cell:hover figcaption { opacity: 1; transform: none; }
.dd25-cell:hover img { transform: scale(1.04); filter: brightness(.85); }
.dd25-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--green-300, #a9e0a3);
}
.dd25-cap { font-size: 13.5px; line-height: 1.35; font-weight: 500; }
.dd25-big { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1024px) {
  .dd25-head { grid-template-columns: 1fr; gap: 24px; }
  .dd25-stats { justify-content: flex-start; }
  .dd25-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 700px) {
  .dd25-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 10px; }
  .dd25-cell figcaption { opacity: 1; transform: none; padding: 12px 10px 10px; }
  .dd25-cap { font-size: 12px; }
}

.dd25-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; max-width: 1280px; margin: 36px auto 0; padding: 24px 32px 0;
  border-top: 1px solid var(--line);
}
.dd25-foot p { margin: 0; color: var(--slate-700); font-size: .95rem; }

/* ============ Home recap strip ============ */
.recap25 {
  padding: 60px 0;
  background: var(--ink-900); color: var(--cream-50);
  position: relative; overflow: hidden;
}
.recap25 .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.recap25-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.recap25-head .l { max-width: 560px; }
.recap25-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-300, #a9e0a3); margin-bottom: 14px;
}
.recap25-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(79,181,73,.25);
}
.recap25-head h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em;
  margin: 0 0 12px; color: #fff;
}
.recap25-head h2 em { font-family: 'Caveat', cursive; color: var(--green-300, #a9e0a3); font-style: normal; font-weight: 700; font-size: 1.15em; }
.recap25-head p { color: rgba(255,255,255,.65); font-size: .95rem; line-height: 1.55; margin: 0; }
.recap25-head a.btn-link { color: var(--green-300, #a9e0a3); }

.recap25-rail {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
}
.recap25-cell {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 14px;
  background: #1a1a1a;
}
.recap25-cell:nth-child(1), .recap25-cell:nth-child(4) { aspect-ratio: 4/5; }
.recap25-cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s ease, filter .35s ease; }
.recap25-cell:hover img { transform: scale(1.06); filter: brightness(1.08); }
@media (max-width: 900px) {
  .recap25-rail { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .recap25-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ============ v30 · Lesson AI block ============ */
.lesson-ai-block {
  margin: 30px 0;
  background: linear-gradient(135deg, #F0FDF4 0%, #F7FAF3 100%);
  border: 1.5px solid var(--green-100, #DAEFC4);
  border-radius: 16px;
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.lesson-ai-block::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(79,181,73,.18) 0%, transparent 70%);
  pointer-events: none;
}
.lai-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; position: relative; z-index: 1;
}
.lai-h { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 220px; }
.lai-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--green-500, #4FB549); color: var(--ink, #0F0F0F);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lai-h strong {
  display: block; font-family: var(--f-head); font-weight: 700;
  color: var(--green-700, #2D8B36); font-size: 16px; margin-bottom: 4px;
}
.lai-h p {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-700, #353638);
  max-width: 540px;
}
.lai-shortcuts {
  margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.lai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--paper, #FFFFFF); border: 1px solid var(--green-100, #DAEFC4);
  font-family: var(--f-sans); font-size: 13px; font-weight: 600;
  color: var(--green-700, #2D8B36);
  cursor: pointer; transition: all .15s ease;
}
.lai-chip:hover {
  background: var(--green-500, #4FB549); border-color: var(--green-500, #4FB549);
  color: var(--ink, #0F0F0F); transform: translateY(-1px);
}

/* ============ v31 · Course detail outline panel ============ */
.split-feats { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.split-feats > li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; background: var(--paper, #FFFFFF);
  border: 1px solid var(--line, #E7E2D5); border-radius: 14px;
}
.split-feats .fi {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--green-50, #EFF8E8);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.split-feats h4 { margin: 0 0 4px; font-family: var(--f-head, var(--f-display)); font-weight: 700; font-size: 15px; color: var(--ink, #0F0F0F); }
.split-feats p  { margin: 0; font-size: 13.5px; color: var(--slate-700, #4B5563); line-height: 1.5; }

/* Course outline "mock window" — looks like a browser/IDE chrome with lesson rows */
.mock {
  background: var(--paper, #FFFFFF);
  border: 1px solid var(--line, #E7E2D5);
  border-radius: 18px;
  box-shadow: var(--sh-2, 0 12px 32px -12px rgba(15,15,15,.14));
  overflow: hidden;
  padding: 0;
  align-self: start; /* don't stretch inside the split grid */
}
.mock-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: var(--cream-100, #F4EFE3);
  border-bottom: 1px solid var(--line, #E7E2D5);
}
.mock-head .d { width: 11px; height: 11px; border-radius: 50%; }
.mock-head .d.r { background: #E63946; }
.mock-head .d.y { background: #F6BE00; }
.mock-head .d.g { background: #4FB549; }
.mock-head .ttl {
  margin-left: 10px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate-500, #6B7280);
}

.course-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cream-100, #F4EFE3);
  text-decoration: none;
}
.course-card:last-of-type { border-bottom: 0; }
.course-card:hover { background: var(--cream-50, #FBF8F2); }
.course-card > div:nth-child(2) { flex: 1; min-width: 0; }
.course-card h5 {
  font-family: var(--f-head, var(--f-display));
  font-weight: 600; font-size: 14.5px;
  color: var(--ink-900, #0F0F0F);
  line-height: 1.3;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.course-card .meta {
  display: flex; gap: 10px; align-items: center;
  margin-top: 3px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--slate-500, #6B7280);
}

/* Crumbs + section helpers used by the course detail page */
.crumbs { font-family: var(--f-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; color: var(--slate-500, #6B7280); }
.crumbs a { color: var(--green-700, #2D8B36); text-decoration: none; }
.page-hero { padding: 36px 0 14px; }
.page-hero .wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.page-hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05; letter-spacing: -.02em;
  margin: 6px 0 10px; color: var(--ink-900, #0F0F0F);
}
.page-hero .lead { font-size: 1.1rem; line-height: 1.55; color: var(--slate-700, #4B5563); max-width: 720px; margin: 0; }
.u-scribble {
  background: linear-gradient(180deg, transparent 60%, rgba(79,181,73,.4) 60%, rgba(79,181,73,.4) 92%, transparent 92%);
  padding: 0 2px;
}

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ v32 · LMS engagement (reviews / Q&A / announcements / wishlist) ============ */
.c-meta { display: flex; gap: 18px; font-family: var(--f-head); font-weight: 600; font-size: 14.5px; color: var(--ink-700); flex-wrap: wrap; align-items: center; }
.wishlist-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--paper); border: 1.5px solid var(--line);
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  color: var(--ink); cursor: pointer; transition: all .15s ease;
}
.wishlist-btn:hover { border-color: var(--green-500); color: var(--green-700); }

.eng-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.eng-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; margin: 0; }
.eng-head h3 small { font-size: 14px; font-weight: 500; color: var(--slate-500); margin-left: 6px; }

.ann-card, .rev-card, .qna-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.ann-head, .rev-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.ann-head strong, .rev-head strong { font-family: var(--f-head); font-weight: 700; font-size: 15px; }
.ann-head .when, .rev-head .when, .qna-meta .when { color: var(--slate-500); font-size: 12px; font-family: var(--f-mono); }
.ann-card p, .rev-card p, .qna-q p, .qna-r p { margin: 4px 0; font-size: 14px; line-height: 1.55; color: var(--ink-700); }
.ann-by { font-size: 12px; color: var(--slate-500); font-style: italic; margin-top: 6px; }
.rev-head .stars { color: var(--yellow-500, #F6BE00); font-size: 14px; letter-spacing: 1px; }

.review-form, .qna-form { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.review-form textarea, .qna-form textarea, .qna-reply input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical;
}
.rating-input { display: inline-flex; gap: 2px; margin-bottom: 8px; }
.rating-input label { cursor: pointer; }
.rating-input input { position: absolute; opacity: 0; }
.rating-input .star { font-size: 26px; color: var(--cream-100); transition: color .1s ease; }
.rating-input label:hover .star,
.rating-input label:hover ~ label .star { color: var(--yellow-500, #F6BE00); }
.rating-input input:checked ~ .star,
.rating-input label:has(input:checked) .star { color: var(--yellow-500, #F6BE00); }
/* Fallback for browsers without :has — simpler */
.rating-input input:checked + .star { color: var(--yellow-500, #F6BE00); }

.qna-q, .qna-r { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.qna-q + .qna-r,
.qna-r + .qna-r { border-top: 1px dashed var(--cream-100); }
.qna-r { padding-left: 36px; }
.qna-q .badge, .qna-r .badge {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--ink); color: var(--green-300, #A9E0A3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.qna-r .badge { background: var(--cream-100); color: var(--ink-700); }
.qna-r .badge.g { background: var(--green-500); color: var(--ink); }
.qna-meta { font-size: 12px; color: var(--slate-700); margin-bottom: 2px; }
.qna-reply { display: flex; gap: 8px; margin-top: 10px; }
.qna-reply input { flex: 1; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.qna-reply button { padding: 7px 14px; border-radius: 8px; background: var(--ink); color: var(--green-300, #A9E0A3); font-weight: 600; font-size: 13px; cursor: pointer; border: 0; }

.empty { color: var(--slate-500); font-style: italic; padding: 14px 0; }

@media (max-width: 880px) {
  section .wrap[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ============ v33 · Gradebook ============ */
.gb-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; flex-wrap: wrap; gap: 14px; }
.gb-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.8rem; margin: 0; }
.gb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.gb-stats > div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.gb-stats strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.1; }
.gb-stats span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-top: 6px; }

.gb-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: auto; }
.gb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gb-table th, .gb-table td { padding: 10px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--cream-100); white-space: nowrap; }
.gb-table th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); background: var(--cream-50); position: sticky; top: 0; }
.gb-table tr:last-child td { border-bottom: 0; }
.gb-table tr:hover td { background: var(--cream-50); }
.gb-bar { width: 110px; height: 6px; background: var(--cream-100); border-radius: 999px; overflow: hidden; margin: 0 auto; }
.gb-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-700)); }
.gb-score, .gb-cell {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
}
.gb-score.good, .gb-cell.good { background: rgba(79,181,73,.14); color: var(--green-700); }
.gb-score.meh,  .gb-cell.meh  { background: rgba(246,190,0,.18); color: #946800; }
.gb-score.bad                  { background: rgba(230,57,70,.14); color: var(--red-700, #9C1623); }
.gb-check { color: var(--green-700); font-weight: 700; }

/* ============ v34 · Workbook ============ */
.wb-shell {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 28px 28px 24px;
  margin-top: 30px;
  position: relative;
}
.wb-cover {
  display: flex; gap: 30px; justify-content: space-between; align-items: flex-end;
  padding: 0 0 22px;
  border-bottom: 1.5px dashed var(--cream-100);
  margin-bottom: 28px;
}
.wb-cover-inner { flex: 1; }
.wb-eyebrow { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .15em; color: var(--green-700); }
.wb-cover h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.1; margin: 6px 0 4px; }
.wb-sub { color: var(--slate-700); font-size: 14px; margin: 0 0 14px; }
.wb-quote { background: var(--cream-50); border-left: 3px solid var(--green-500); padding: 12px 16px; border-radius: 8px; font-style: italic; color: var(--ink-700); font-size: 14px; margin: 0; }
.wb-quote cite { display: block; font-style: normal; font-weight: 600; font-family: var(--f-mono); font-size: 11px; color: var(--slate-700); margin-top: 6px; }
.wb-cover-meta { min-width: 200px; max-width: 220px; }
.wb-progress { width: 100%; height: 8px; background: var(--cream-100); border-radius: 999px; overflow: hidden; }
.wb-progress-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-700)); transition: width .3s ease; }
.wb-progress-text { font-family: var(--f-mono); font-size: 11px; color: var(--slate-700); margin-top: 6px; display: flex; justify-content: space-between; }
.wb-percent { color: var(--green-700); font-weight: 700; }
.wb-submitted { color: var(--green-700); font-weight: 700; }

.wb-page { margin-bottom: 36px; }
.wb-page-title { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--slate-700); margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--cream-100); }

.wb-field { margin: 0 0 22px; }
.wb-label { display: block; font-family: var(--f-head); font-weight: 700; font-size: 14.5px; color: var(--ink-900); margin: 0 0 4px; }
.wb-label-sm { display: block; font-family: var(--f-head); font-weight: 600; font-size: 13.5px; color: var(--ink-900); margin: 0 0 3px; }
.wb-hint { font-size: 12.5px; color: var(--slate-500); margin: 0 0 8px; line-height: 1.45; }
.wb-h { font-family: var(--f-display); font-weight: 700; margin: 24px 0 4px; color: var(--ink-900); }
.wb-h2 { font-size: 1.4rem; } .wb-h3 { font-size: 1.15rem; } .wb-h4 { font-size: 1rem; }
.wb-p { color: var(--ink-700); font-size: 14px; line-height: 1.55; margin: 4px 0 14px; }
.wb-divider { border: 0; border-top: 1px dashed var(--cream-100); margin: 24px 0; }
.wb-inline-quote { background: var(--cream-50); border-left: 3px solid var(--cream-100); padding: 10px 14px; margin: 14px 0; font-style: italic; color: var(--slate-700); }

.wb-field input[type=text], .wb-field textarea, .wb-twocol textarea, .wb-five input, .wb-stake-card input, .wb-stake-card textarea, .wb-bio-cell input, .wb-bio-cell textarea, .wb-hmw-cell textarea, .wb-phase-card textarea, .wb-comic-cell textarea, .wb-impact-card textarea, .wb-list-cell input {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14px; line-height: 1.5;
  background: var(--paper); color: var(--ink-900); transition: border-color .15s ease;
  resize: vertical;
}
.wb-field input:focus, .wb-field textarea:focus, .wb-twocol textarea:focus, .wb-five input:focus { outline: none; border-color: var(--green-500); }

.wb-ai-btn { margin-top: 6px; background: transparent; border: 1px solid var(--green-100); color: var(--green-700); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.wb-ai-btn:hover { background: var(--green-50); }

.wb-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-choice { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }
.wb-choice input { margin: 0; }
.wb-choice:has(input:checked) { border-color: var(--green-500); background: var(--green-50); color: var(--green-700); }

.wb-list { display: flex; flex-direction: column; gap: 10px; }
.wb-list-row { display: flex; gap: 12px; align-items: flex-start; }
.wb-list-no { width: 26px; height: 26px; border-radius: 50%; background: var(--cream-100); color: var(--slate-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 22px; }
.wb-list-cell { flex: 1; }
.wb-list-add { background: transparent; border: 1px dashed var(--cream-100); padding: 8px 14px; border-radius: 8px; color: var(--green-700); font-weight: 600; cursor: pointer; align-self: flex-start; font-size: 13px; }
.wb-list-add:hover { border-color: var(--green-500); background: var(--green-50); }

.wb-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wb-col { background: var(--cream-50); padding: 14px; border-radius: 10px; border: 1px solid var(--cream-100); }

.wb-five { display: flex; flex-direction: column; gap: 8px; }
.wb-why-row { display: flex; gap: 12px; align-items: center; }
.wb-why-no { min-width: 80px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); font-weight: 700; }

.wb-stake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.wb-stake-card { background: var(--cream-50); padding: 14px; border-radius: 10px; border: 1px solid var(--cream-100); }
.wb-stake-card strong { display: block; font-family: var(--f-head); margin-bottom: 8px; color: var(--green-700); font-size: 13px; }
.wb-stake-card input, .wb-stake-card textarea { background: var(--paper); margin-top: 6px; }

.wb-bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wb-bio-cell { background: var(--cream-50); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cream-100); }

.wb-hmw-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 14px; }
.wb-hmw-cell { background: var(--cream-50); padding: 14px; border-radius: 10px; border: 1px solid var(--cream-100); }
.wb-hmw-question { background: var(--green-50); border-color: var(--green-100); }

.wb-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wb-phase-card { background: var(--cream-50); padding: 14px; border-radius: 10px; border: 1px solid var(--cream-100); }
.wb-phase-card strong { display: block; font-family: var(--f-head); color: var(--green-700); font-size: 14px; margin-bottom: 6px; }

.wb-sketch-wrap { position: relative; background: var(--paper); border: 2px dashed var(--cream-100); border-radius: 10px; overflow: hidden; margin-top: 6px; }
.wb-sketch-wrap canvas { display: block; touch-action: none; cursor: crosshair; }
.wb-sketch-tools { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wb-sketch-tools button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 13px; cursor: pointer; }
.wb-sketch-tools button:hover { border-color: var(--green-500); color: var(--green-700); }

.wb-comic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wb-comic-cell { background: var(--cream-50); padding: 10px; border-radius: 8px; border: 1px solid var(--cream-100); }
.wb-comic-cell strong { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-700); margin-bottom: 6px; }

.wb-impact { display: flex; flex-direction: column; gap: 14px; }
.wb-impact-card { background: var(--cream-50); padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--green-100); }

.wb-upload-preview { margin-top: 10px; max-width: 360px; }
.wb-upload-preview img { width: 100%; border-radius: 10px; border: 1px solid var(--cream-100); display: block; }

.wb-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1.5px dashed var(--cream-100); flex-wrap: wrap;
}
.wb-save-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500);
}
.wb-save-pill.saving { color: #946800; }
.wb-save-pill.saved  { color: var(--green-700); }
.wb-save-pill.error  { color: var(--red-700, #9C1623); }
.wb-submitted-large { color: var(--green-700); font-weight: 700; font-family: var(--f-head); }

@media (max-width: 880px) {
  .wb-cover { flex-direction: column; align-items: stretch; gap: 16px; }
  .wb-cover-meta { max-width: 100%; }
  .wb-twocol, .wb-bio-grid, .wb-phases { grid-template-columns: 1fr; }
  .wb-hmw-grid { grid-template-columns: 1fr; }
  .wb-comic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ v35 · Lesson live + assignment blocks ============ */
.live-block, .asgn-block { margin-top: 28px; }
.live-block h3, .asgn-block h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 12px; }
.live-card, .asgn-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; gap: 14px;
  text-decoration: none; color: inherit;
}
.live-card strong, .asgn-card strong { display: block; font-family: var(--f-head); font-weight: 700; font-size: 14.5px; color: var(--ink-900); }
.live-card .meta, .asgn-card .meta { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-500); margin-top: 4px; }
.asgn-card:hover { border-color: var(--green-500); background: var(--cream-50); }
.asgn-status { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--slate-700); padding: 4px 12px; border-radius: 999px; background: var(--cream-100); }
.asgn-status.submitted { color: var(--green-700); background: rgba(79,181,73,.14); }
.asgn-status.graded { color: var(--ink-900); background: rgba(246,190,0,.2); }

.asgn-brief { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.asgn-brief h3, .asgn-form h3, .asgn-grade-table h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 10px; }
.brief-md p { color: var(--ink-700); line-height: 1.6; }
.asgn-result { padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 14px; }
.asgn-result.graded   { background: rgba(246,190,0,.16); border: 1px solid rgba(246,190,0,.4); }
.asgn-result.submitted{ background: rgba(79,181,73,.12); border: 1px solid var(--green-100); }
.asgn-form { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin-bottom: 24px; }
.asgn-form label { display: block; font-family: var(--f-head); font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.asgn-form textarea, .asgn-form input[type=file] { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; }
.asgn-grade-table { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.grade-row { padding: 14px 0; border-bottom: 1px dashed var(--cream-100); }
.grade-row:last-child { border-bottom: 0; }
.grade-row header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.grade-row pre { background: var(--cream-50); padding: 10px; border-radius: 6px; white-space: pre-wrap; font-family: inherit; font-size: 13px; }
.grade-form { display: grid; grid-template-columns: 80px auto 1fr auto; gap: 10px; margin-top: 10px; align-items: center; }
.grade-form textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 13px; min-height: 36px; }

/* ============ v36 · Media tabs (video / slides / transcript), attachments, notes ============ */
.media-tabs {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 24px;
  box-shadow: var(--sh-1);
}
.media-tabnav {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 12px;
  background: var(--cream-50);
  border-bottom: 1px solid var(--line);
}
.media-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: transparent; border: 0;
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  color: var(--slate-700); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.media-tab:hover { background: rgba(0,0,0,.04); color: var(--ink-900); }
.media-tab.on   { background: var(--ink); color: var(--green-300, #A9E0A3); }
.media-tab.on .prov-pill { background: rgba(255,255,255,.18); color: #fff; }
.prov-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  background: var(--cream-100); color: var(--slate-700);
  letter-spacing: .05em;
}
.prov-pill.yt { background: rgba(230,57,70,.16); color: var(--red-700, #9C1623); }
.prov-pill.vm { background: rgba(36,179,201,.18); color: #0E7A8E; }
.prov-pill.ln { background: rgba(99,86,255,.16); color: #4338CA; }
.prov-pill.mp { background: rgba(15,15,15,.12); color: var(--ink-900); }
.prov-pill.gs { background: rgba(246,190,0,.22); color: #946800; }
.prov-pill.pd { background: rgba(220,38,38,.14); color: #9C1623; }
.prov-pill.pp { background: rgba(234,88,12,.16); color: #C2410C; }
.media-tab-spacer { flex: 1; }
.media-tab-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  color: var(--slate-500); text-decoration: none;
}
.media-tab-action:hover { background: rgba(0,0,0,.05); color: var(--ink-900); }

.media-pane { display: none; background: #000; }
.media-pane.on { display: block; }
.media-pane[data-pane="transcript"] { background: var(--paper); }
.media-frame {
  display: block; width: 100%; aspect-ratio: 16/9;
  border: 0; background: #000;
}
.media-pane video.media-frame { object-fit: contain; }
.media-foot { padding: 10px 18px; background: var(--cream-50); border-top: 1px solid var(--line); }
.media-transcript {
  padding: 22px 26px;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-700);
  max-height: 380px; overflow: auto;
}

.media-empty {
  background: var(--cream-50); border: 1.5px dashed var(--cream-100);
  padding: 18px 22px; border-radius: 14px; margin: 0 0 20px;
}
.media-empty strong { font-family: var(--f-head); color: var(--ink-900); }
.media-empty p { margin: 4px 0 0; color: var(--slate-700); font-size: 14px; }

/* Lesson attachments */
.lesson-atts { margin: 22px 0 0; }
.lesson-atts h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 10px; }
.att-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit;
  margin-bottom: 8px;
  transition: border-color .15s ease, transform .15s ease;
}
.att-row:hover { border-color: var(--green-500); transform: translateX(2px); }
.att-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--cream-50); display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.att-body { flex: 1; min-width: 0; }
.att-body strong { display: block; font-family: var(--f-head); font-size: 14px; color: var(--ink-900); }
.att-meta { font-family: var(--f-mono); font-size: 11px; color: var(--slate-500); }
.att-go { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; color: var(--green-700); }

/* Personal notes */
.lesson-notes {
  margin: 26px 0;
  background: linear-gradient(180deg, #FFF8E1 0%, #FFF3C4 100%);
  border: 1px solid #FBE187; border-radius: 14px; padding: 16px 18px;
}
.lesson-notes header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; gap: 12px; flex-wrap: wrap;
}
.lesson-notes strong { font-family: var(--f-head); font-size: 14px; color: #6B4D00; }
.lnotes-status { font-family: var(--f-mono); font-size: 11px; color: #946800; }
.lnotes-status.saving { color: #946800; }
.lnotes-status.saved  { color: var(--green-700); }
.lnotes-status.error  { color: var(--red-700, #9C1623); }
.lesson-notes textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #FBE187;
  border-radius: 10px; font-family: inherit; font-size: 14px; line-height: 1.55;
  background: rgba(255,255,255,.8); color: var(--ink-900); resize: vertical;
}
.lesson-notes textarea:focus { outline: none; border-color: #F4B400; background: #fff; }

/* ============================================================
   v37 — Mobile polish (≤600px / ≤500px / ≤360px)
   Targets the audit findings: footer wordmark overflow,
   chat sidebar replacement, media-tab wrap, stats stacking,
   workbook canvas, lesson sidebar height cap, tap targets.
   ============================================================ */

/* ---- Footer: stop the wordmark from overflowing narrow phones ---- */
@media (max-width: 600px) {
  .foot { padding: 44px 0 20px; }
  .foot-wordmark { padding-bottom: 22px; }
  .foot-wordmark .wordmark {
    font-size: clamp(2.25rem, 10vw, 3.5rem);
    line-height: 1.05;
    word-break: break-word;       /* `#MyLittleBigThing` is one long word — let it break */
    overflow-wrap: anywhere;
  }
  .foot-tag { font-size: 13.5px; padding: 0 12px; }
  .foot-links { gap: 6px 16px; padding: 20px 0; }
  .foot-links a { font-size: 13px; }
  .foot-meta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0; }
  .foot-contact { flex-direction: column; align-items: flex-start; gap: 4px; }
  .foot-contact .dot { display: none; }
}

/* ---- Community channels: mobile dropdown switcher ---- */
.chat-mobile-switch {
  display: none;
  width: 100%; margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--ink); color: var(--cream-50);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  font-family: var(--f-mono); font-size: 14px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--green-500) 50%),
                    linear-gradient(135deg, var(--green-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  .chat-mobile-switch { display: block; }
  .chat-grid { grid-template-rows: auto 1fr; gap: 0; }
}

/* ---- Lesson media tabs: scroll horizontally on phones rather than overflow ---- */
@media (max-width: 700px) {
  .media-tabnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .media-tabnav::-webkit-scrollbar { display: none; }
  .media-tab { flex-shrink: 0; }
  .media-tab-spacer { display: none; }
}

/* ---- Workbook sketch canvas: never spill past its container ---- */
.wb-sketch-wrap canvas {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* ---- Impact map: shorter on phones so it doesn't eat the viewport ---- */
@media (max-width: 700px) {
  .im-leaflet { height: clamp(320px, 55vh, 460px); }
  .im-legend { font-size: 10px; gap: 10px; padding: 6px 10px; bottom: 10px; }
}

/* ---- Impact stats + dashboard stats: collapse to single col on phones ---- */
@media (max-width: 500px) {
  .im-stats { grid-template-columns: 1fr; gap: 10px; }
  .im-stat { padding: 16px 18px; }
  .im-stat .num { font-size: 1.6rem; }
  .im-stat-cta { justify-content: stretch; }
  .im-stat-cta .btn { width: 100%; text-align: center; }

  .dh-stats { grid-template-columns: 1fr; gap: 10px; }
  .dh-card { padding: 18px; }
}

/* ---- Lesson sidebar: cap height on mobile so it doesn't push content below the fold ---- */
@media (max-width: 880px) {
  .lesson-side {
    position: static;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lesson-side .ll { padding: 8px 10px; font-size: 13.5px; }
}

/* ---- Tap targets: bump small inputs to 44px on touch devices ---- */
@media (max-width: 600px) and (pointer: coarse) {
  .dm-input-form input,
  .wb-field input,
  .wb-field textarea,
  .wb-field select {
    min-height: 44px;
    padding-top: 11px; padding-bottom: 11px;
    font-size: 16px;       /* iOS won't auto-zoom inputs ≥16px */
  }
}

/* ---- A couple of stray fixed widths only seen on the cofounder page ---- */
@media (max-width: 500px) {
  .fc-card { width: 100% !important; max-width: 100%; }
}

/* ============================================================
   v38 — Resources Centre: cards, flipbook viewer, loader.
   ============================================================ */

/* ---- Index: featured + grid ---- */
.rc-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-bottom: 50px;
}
@media (max-width: 900px) { .rc-featured { grid-template-columns: 1fr; } }
.rc-feat {
  position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 22px;
  text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; padding: 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rc-feat:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(0,0,0,.18); border-color: var(--green-300); }
.rc-feat-cover {
  width: 180px; height: 240px; border-radius: 10px;
  background: var(--mist) center/cover no-repeat;
  box-shadow: 4px 4px 0 0 var(--green-500);
}
.rc-feat-body { padding: 8px 0; display: flex; flex-direction: column; }
.rc-feat-eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-700); margin-bottom: 8px; }
.rc-feat-body h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 8px; line-height: 1.1; letter-spacing: -.02em; }
.rc-feat-sub { color: var(--ink-500); margin: 0 0 12px; font-size: 14px; }
.rc-feat-body p { color: var(--ink-700); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.rc-feat-cta { margin-top: auto; font-family: var(--f-mono); font-size: 13px; color: var(--green-700); font-weight: 600; }
.rc-feat-cta .arrow { display: inline-block; transition: transform .2s; }
.rc-feat:hover .arrow { transform: translateX(4px); }

@media (max-width: 600px) {
  .rc-feat { grid-template-columns: 1fr; padding: 16px; }
  .rc-feat-cover { width: 100%; height: 220px; }
}

.rc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.rc-tab {
  padding: 8px 16px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-700); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rc-tab:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-300); }
.rc-tab.on { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }

.rc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.rc-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.rc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(0,0,0,.2); border-color: var(--green-300); }
.rc-card-cover {
  position: relative; height: 260px;
  background: var(--mist) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.rc-cat {
  position: absolute; top: 12px; left: 12px;
  background: rgba(15,15,15,.78); color: var(--cream-50);
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.rc-pages {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(15,15,15,.6); color: var(--cream-50);
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 10.5px;
}
.rc-card-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.rc-card-body h4 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25;
  margin: 0 0 6px; letter-spacing: -.015em;
}
.rc-card-sub { color: var(--ink-500); font-size: 13.5px; margin: 0 0 12px; line-height: 1.45; flex: 1; }
.rc-card-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-500);
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
}
.rc-card-go { margin-left: auto; color: var(--green-700); font-weight: 600; }

.rc-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 24px;
  background: var(--paper); border: 1px dashed var(--line); border-radius: 16px;
  color: var(--ink-500);
}
.rc-empty h3 { font-family: var(--f-display); margin: 0 0 8px; color: var(--ink); }

/* ---- Show: flipbook reader ---- */
/* Dark e-reader stage so the white flipbook pages pop */
.rb-stage {
  background: radial-gradient(ellipse 90% 70% at 50% 0%, #16331f 0%, #0d130f 60%, #080a08 100%);
  padding: 46px 0 60px;
  min-height: 60vh;
}
.rb-loader {
  padding: 50px 24px 30px; color: rgba(251,248,242,.85);
  text-align: center;
}
.rb-loader-cover {
  width: 150px; height: 190px; margin: 0 auto 22px; border-radius: 12px;
  background: var(--mist) center/cover no-repeat;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.rb-loader-spin {
  width: 44px; height: 44px; margin: 0 auto 16px;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: var(--green-500);
  border-radius: 50%;
  animation: rbSpin .9s linear infinite;
}
@keyframes rbSpin { to { transform: rotate(360deg); } }
.rb-hint { color: rgba(251,248,242,.5); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; margin-top: 22px; }

.rb-book {
  margin: 0 auto;
  /* width is computed in JS to fit the viewport on both axes; keep a perspective
     so the page-curl reads as 3D and don't impose a min-height that overflows */
  perspective: 2400px;
  display: flex;
  justify-content: center;
}
.rb-book .stf__parent { margin: 0 auto; }
.rb-page {
  background: #fff;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,.25);
  overflow: hidden;
}
.rb-page img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  user-select: none; -webkit-user-drag: none;
}
/* Placeholder shown for not-yet-rasterized pages in the lazy flipbook */
.rb-page-loading {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #fbfbfb, #fbfbfb 12px, #f3f3f3 12px, #f3f3f3 24px);
}
.rb-page-loading .rb-page-ph {
  font-family: var(--f-mono); font-size: 12px; color: var(--slate-400);
  opacity: .6;
}
.rb-page-ph { display: none; }     /* hidden once the <img> replaces the placeholder content */

/* ============================================================
   v39 — Notification bell + onboarding hooks
   ============================================================ */
.notif-bell { position: relative; }
.notif-bell-btn {
  position: relative; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700);
  transition: background .15s, color .15s, border-color .15s;
}
.notif-bell-btn:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-300); }
.notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--green-600); color: #fff;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--paper);
}
.notif-pop {
  position: absolute; top: 48px; right: 0; width: 340px; max-width: 88vw;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.3); z-index: 200; overflow: hidden;
}
.notif-pop header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.notif-pop header strong { font-family: var(--f-display); font-size: 15px; }
.notif-pop header a { font-size: 12px; color: var(--green-700); text-decoration: none; }
.notif-pop-list { max-height: 380px; overflow-y: auto; }
.notif-pop-row { display: flex; gap: 11px; padding: 12px 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-soft); transition: background .12s; }
.notif-pop-row:last-child { border-bottom: 0; }
.notif-pop-row:hover { background: var(--cream-50); }
.notif-pop-row.unread { background: var(--green-50); }
.notif-pop-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--cream-50); border: 1px solid var(--line); color: var(--green-700); display: flex; align-items: center; justify-content: center; }
.notif-pop-txt { display: flex; flex-direction: column; min-width: 0; }
.notif-pop-txt strong { font-size: 13.5px; font-weight: 600; }
.notif-pop-txt span { font-size: 12.5px; color: var(--ink-700); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-pop-txt em { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-500); font-style: normal; margin-top: 2px; }
.notif-pop-empty { padding: 28px 16px; text-align: center; color: var(--ink-500); font-size: 13px; }

/* ============================================================
   v41 — base inline-icon alignment (emoji → branded icon pass)
   ============================================================ */
.icon { display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
/* When an icon is the lone child of a flex row it shouldn't get the baseline nudge */
.btn .icon, .nav-search-link .icon, .notif-bell-btn .icon, button .icon { vertical-align: middle; }

/* ============================================================
   v40 — Venture-Readiness Score
   ============================================================ */
.vr-card {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  background: linear-gradient(135deg, var(--ink) 0%, #16331f 55%, var(--green-900));
  color: var(--cream-50); border-radius: 22px; padding: 28px 32px; margin: 22px 0 4px;
  position: relative; overflow: hidden;
}
.vr-card::before { content: ""; position: absolute; top: -80px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(79,181,73,.4), transparent 65%); filter: blur(24px); pointer-events: none; }
.vr-ring-wrap { position: relative; z-index: 1; }
.vr-ring-num { font-family: var(--f-display); font-weight: 700; font-size: 30px; fill: var(--cream-50); }
.vr-ring-of  { font-family: var(--f-mono); font-size: 9px; fill: rgba(251,248,242,.55); letter-spacing: .1em; }
.vr-body { position: relative; z-index: 1; }
.vr-eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-300); }
.vr-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin: 4px 0 4px; letter-spacing: -.02em; }
.vr-head p { color: rgba(251,248,242,.7); font-size: 13px; line-height: 1.5; margin: 0 0 16px; max-width: 460px; }
.vr-components { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 16px; }
.vr-comp-top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: rgba(251,248,242,.8); margin-bottom: 4px; }
.vr-comp-bar { height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.vr-comp-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-300)); border-radius: 4px; }
.vr-tips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vr-tips-h { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,248,242,.5); width: 100%; }
.vr-tip { display: block; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px; text-decoration: none; color: var(--cream-50); transition: background .15s, transform .15s; flex: 1; min-width: 200px; }
.vr-tip:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.vr-tip strong { display: block; font-family: var(--f-display); font-size: 13.5px; margin-bottom: 2px; }
.vr-tip span { font-size: 12px; color: rgba(251,248,242,.7); line-height: 1.4; }
@media (max-width: 720px) {
  .vr-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .vr-components { grid-template-columns: 1fr; width: 100%; }
  .vr-head p { margin-left: auto; margin-right: auto; }
}

/* Readiness badge on co-founder cards */
.vr-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); }
.vr-badge.mid { background: #FFF1E1; color: #8C3E11; border-color: #FFD9B5; }
.vr-badge.low { background: var(--cream-100); color: var(--ink-500); border-color: var(--line); }

/* Nav search icon */
.nav-search-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--ink-700); border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.nav-search-link:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-300); }

/* Settings — real checkbox toggle */
.set-check { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-ui { width: 46px; height: 26px; border-radius: 999px; background: var(--mist); position: relative; transition: background .2s; flex-shrink: 0; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.set-check:checked + .toggle-ui { background: var(--green-500); }
.set-check:checked + .toggle-ui::after { transform: translateX(20px); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }

.rb-fallback {
  display: flex; gap: 16px;
  overflow-x: auto; padding: 16px 0;
  scroll-snap-type: x mandatory;
}
.rb-fallback .rb-page {
  flex-shrink: 0; width: min(720px, 90vw);
  scroll-snap-align: center;
  border-radius: 8px;
}

.rb-about {
  margin: 60px auto 0; max-width: 720px;
  text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 32px;
}
.rb-about h3 { font-family: var(--f-display); font-weight: 700; margin: 0 0 10px; }
.rb-about p { color: var(--ink-700); line-height: 1.6; margin: 0 0 12px; }

.rb-related { margin: 60px auto 0; max-width: 1100px; text-align: left; }
.rb-related h4 {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 18px;
}
.rb-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.rb-related-card {
  text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; display: block;
  transition: transform .2s, border-color .2s;
}
.rb-related-card:hover { transform: translateY(-3px); border-color: var(--green-300); }
.rb-rc-cover { height: 140px; border-radius: 8px; background: var(--mist) center/cover no-repeat; margin-bottom: 10px; }
.rb-related-card strong { display: block; font-family: var(--f-display); font-size: 14px; line-height: 1.3; margin-bottom: 4px; }
.rb-related-card span { font-family: var(--f-mono); font-size: 11px; color: var(--ink-500); letter-spacing: .05em; }

/* ============================================================
   v42 — Shared wizard doodle background + image cropper + preview
   ============================================================ */
/* The faint MLBT doodle pattern (same as the /journey roadmap) behind any wizard. */
.wiz-bg { position: relative; background: linear-gradient(180deg, var(--green-50) 0%, var(--cream) 55%); }
.wiz-bg::before {
  content: ""; position: absolute; inset: 0;
  background: url('/assets/img/bg/pattern.png') center top / 620px auto repeat;
  opacity: .16; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
}
.wiz-bg > * { position: relative; z-index: 1; }

/* Cropper modal */
.cropper-modal-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(15,15,15,.7); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.cropper-modal-ov.on { display: flex; }
.cropper-box { background: var(--paper); border-radius: 18px; width: 100%; max-width: 480px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); }
.cropper-box-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.cropper-box-head strong { font-family: var(--f-display); font-size: 1rem; }
.cropper-box-head button { background: none; border: 0; color: var(--ink-500); cursor: pointer; padding: 4px; }
.cropper-stage { background: #1b1b1b; max-height: 56vh; }
.cropper-stage img { display: block; max-width: 100%; }
.cropper-box-tools { padding: 14px 20px; display: flex; gap: 10px; align-items: center; }
.cropper-zoom { flex: 1; display: flex; gap: 10px; align-items: center; color: var(--ink-500); }
.cropper-zoom input[type=range] { flex: 1; accent-color: var(--green-500); }
.cropper-box-foot { padding: 0 20px 18px; display: flex; gap: 10px; justify-content: flex-end; }

/* Wizard preview card (story) */
.wzp-card { display: grid; grid-template-columns: 132px 1fr; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.wzp-photo { width: 132px; height: 164px; border-radius: 12px; background: var(--mist) center/cover no-repeat; }
.wzp-body h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; margin: 0 0 6px; }
.wzp-body .wzp-quote { color: var(--ink-700); font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; }
.wzp-body .wzp-meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-500); display: flex; flex-direction: column; gap: 2px; }
.wzp-empty { color: var(--ink-500); font-size: 13px; }
@media (max-width:560px){ .wzp-card{grid-template-columns:1fr} .wzp-photo{width:100%;height:200px} }

/* Disabled submit (gated until all fields valid) */
.btn[disabled], button.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---- Story / apply wizard shell (shared) ---- */
.sw-wrap { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 40px 18px; }
.sw-card { width: 100%; max-width: 680px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 0 0 28px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.25); overflow: hidden; }
.sw-progress { height: 6px; background: var(--mist); }
.sw-progress-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-700)); transition: width .35s ease; }
.sw-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px 0; }
.sw-step-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--green-700); }
.sw-skip { font-size: 12.5px; color: var(--ink-500); text-decoration: none; }
.sw-skip:hover { color: var(--ink); }
.sw-errors { margin: 14px 32px 0; background: #FFF1E1; border: 1px solid #FFD9B5; color: #8C3E11; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.sw-errors div { line-height: 1.5; }
.sw-step { display: none; padding: 18px 32px 0; animation: swIn .3s ease; }
.sw-step.on { display: block; }
@keyframes swIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sw-step h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 8px; }
.sw-sub { color: var(--ink-500); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }
.sw-field { display: block; margin-bottom: 16px; }
.sw-field > span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px; }
.sw-field input, .sw-field select, .sw-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 15px; background: var(--cream-50); }
.sw-field input:focus, .sw-field select:focus, .sw-field textarea:focus { outline: none; border-color: var(--green-500); }
.sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sw-counter { display: block; text-align: right; font-family: var(--f-mono); font-size: 11px; color: var(--ink-500); margin-top: 4px; }
.sw-sdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; padding: 2px; }
.sw-sdg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.sw-sdg:hover { border-color: var(--c); }
.sw-sdg:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.sw-sdg-n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: 13px; }
.sw-sdg-t { font-size: 12.5px; line-height: 1.2; font-weight: 500; }
.sw-upload { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: stretch; }
.sw-upload-preview { width: 120px; height: 150px; border-radius: 14px; background: var(--mist) center/cover no-repeat; border: 1px solid var(--line); display: none; }
.sw-upload-preview.on { display: block; }
.sw-upload-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 28px 20px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.sw-upload-drop:hover { border-color: var(--green-300); background: var(--green-50); }
.sw-upload-ic { color: var(--green-700); }
.sw-upload-drop strong { font-family: var(--f-display); font-size: 15px; }
.sw-upload-drop span { font-size: 12px; color: var(--ink-500); }
.sw-consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.sw-consent input { display: none; }
.sw-check { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--line); border-radius: 7px; margin-top: 1px; position: relative; transition: all .15s; }
.sw-consent input:checked + .sw-check { background: var(--green-500); border-color: var(--green-500); }
.sw-consent input:checked + .sw-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sw-consent-text { font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.sw-consent-member { background: var(--green-50); border-color: var(--green-100); }
.sw-member-note { display: flex; gap: 8px; align-items: center; background: var(--green-50); border: 1px solid var(--green-100); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--green-700); }
.sw-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 24px 32px 0; }
@media (max-width:600px){ .sw-row{grid-template-columns:1fr} .sw-upload{grid-template-columns:1fr} .sw-upload-preview{width:100%;height:200px} }