/* ============================================================
   Ventures Beyond Borders — prototype stylesheet
   Colours sampled from VBB-Logo-Transparent-PNG.png
   ============================================================ */

:root{
  --teal:#0b464a;
  --teal-deep:#062b2e;
  --teal-mid:#12595e;
  --orange:#f75d29;
  --orange-deep:#d94718;
  --sage:#7a8c8b;
  --cream:#f4efe7;
  --paper:#fffdf9;
  --ink:#10201f;
  --muted:#435455;
  --rule:rgba(11,70,74,.13);

  --fdisp:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fbody:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fserif:"Newsreader",Georgia,"Times New Roman",serif;

  --gut:clamp(20px,4vw,56px);
  --maxw:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 var(--fbody);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--fdisp);font-weight:700;letter-spacing:-.032em;line-height:1.03}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:980px}

/* ---------- shared bits ---------------------------------------------- */
.eyebrow{
  font:600 12px/1 var(--fbody);letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin:0 0 26px
}
.eyebrow.sage{color:var(--sage)}
.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;
  text-decoration:none;padding:14px 26px;border-radius:100px;
  font:600 15px/1 var(--fbody);letter-spacing:-.01em;white-space:nowrap;
  transition:background .16s ease,transform .16s ease
}
.btn:hover{background:var(--orange-deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 1.5px rgba(11,70,74,.28)}
.btn.ghost:hover{background:rgba(11,70,74,.05)}
.btn.light{background:#fff;color:var(--teal)}
.btn.outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn.outline-light:hover{background:rgba(255,255,255,.1)}

/* .ph marks content that is still placeholder. The on-page toggle button is
   gone — it had no business on a live site — but the markers and this rule
   stay: they are the record of what still needs writing, and running
   document.body.classList.add('show-ph') in the console still lights them up. */
.ph{position:relative;border-radius:3px}
body.show-ph .ph{background:rgba(247,93,41,.15);box-shadow:0 0 0 2px rgba(247,93,41,.4)}

section{padding:clamp(72px,9vw,132px) 0;border-bottom:1px solid var(--rule)}
.sechead{margin-bottom:clamp(44px,5vw,72px)}
h2{font-size:clamp(30px,4.6vw,60px);color:var(--teal);max-width:17ch}
.sechead p{max-width:52ch;font-size:19px;color:var(--muted);margin:22px 0 0}

/* ---------- nav -------------------------------------------------------- */
nav{
  position:sticky;top:0;z-index:100;background:rgba(255,253,249,.9);
  backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--rule)
}
nav .wrap{display:flex;align-items:center;gap:40px;height:80px}
nav .logo img{height:34px;width:auto}
.navlinks{margin-left:auto;display:flex;gap:30px;align-items:center}
.navlinks a{
  text-decoration:none;color:var(--teal);font:500 15px/1 var(--fbody);
  letter-spacing:-.01em;opacity:.78;transition:opacity .15s
}
.navlinks a:hover,.navlinks a[aria-current]{opacity:1}

/* ---------- nav dropdown ------------------------------------------------ */
.navdrop{position:relative}
.navdroplink{
  display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--teal);font:500 15px/1 var(--fbody);letter-spacing:-.01em;opacity:.78;
  transition:opacity .15s
}
.navdroplink:hover,.navdrop.open .navdroplink,.navdroplink[data-active]{opacity:1}
.navdroplink .caret{
  width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease
}
.navdrop.open .navdroplink .caret{transform:rotate(-135deg) translate(-3px,-3px)}

.navmenu{
  position:absolute;top:calc(100% + 22px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:326px;padding:10px;background:var(--paper);
  border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 22px 50px rgba(6,43,46,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .17s ease,transform .17s ease,visibility .17s
}
/* bridges the gap between the trigger and the panel so hover isn't lost */
.navmenu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.navdrop:hover .navmenu,
.navdrop:focus-within .navmenu,
.navdrop.open .navmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
.navmenu a{
  display:block;padding:13px 15px;border-radius:11px;opacity:1;
  transition:background .14s ease
}
.navmenu a:hover{background:var(--cream)}
.navmenu a[aria-current]{background:var(--cream)}
.navmenu .mi{
  font:600 15px/1.25 var(--fbody);color:var(--teal);letter-spacing:-.015em;
  display:flex;align-items:center;gap:8px
}
.navmenu .mi .count{
  font:600 10px/1 var(--fbody);letter-spacing:.08em;
  background:rgba(11,70,74,.1);color:var(--teal);padding:4px 7px;border-radius:100px
}
.navmenu .md{font:400 13px/1.45 var(--fbody);color:var(--sage);margin-top:4px}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.navtoggle span{display:block;width:24px;height:2px;background:var(--teal);margin:5px 0}

/* ---------- hero -------------------------------------------------------- */
.hero{padding:clamp(70px,9vw,120px) 0 0;border-bottom:0}
.hero h1{
  font-size:clamp(46px,8.6vw,124px);color:var(--teal);font-weight:800;
  letter-spacing:-.045em;text-wrap:balance
}
.hero h1 em{font-style:normal;color:var(--orange)}
.herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:end}
.hero .lede{font-size:clamp(18px,1.5vw,21px);color:var(--muted);margin:0 0 30px;max-width:46ch}
.herocta{display:flex;gap:12px;flex-wrap:wrap}
.heroimg{margin-top:clamp(48px,6vw,80px);overflow:hidden;border-radius:22px}
.heroimg img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:center 42%}
.heroimg figcaption,.herovideo figcaption{
  font:500 13px/1.5 var(--fbody);color:var(--sage);margin-top:14px;letter-spacing:.01em
}

/* ---------- hero film ---------------------------------------------------- */
/* The source is 1.85:1. A 2.35:1 crop keeps the band shape the still had
   without throwing away as much of the frame as the old 21:8 would. */
/* The bottom margin keeps the film off the teal stats band below it. Without
   it the two meet flush and the video reads as part of the banner. */
.herovideo{margin:clamp(48px,6vw,80px) 0 clamp(22px,2.6vw,36px)}
/* Controls anchor to .vframe, not the <figure> — the figure also contains the
   caption, so bottom-right of the figure is below the picture, not on it. */
.vframe{position:relative;border-radius:22px;overflow:hidden;background:var(--teal-deep)}
.herovideo video{
  display:block;width:100%;aspect-ratio:2.35/1;object-fit:cover
}
.vcontrols{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}

/* Only appears when autoplay was refused — see .blocked in site.js. A hero that
   is silently paused is indistinguishable from a still photo, which is how a
   working fallback still reads as a bug. */
.vplaybadge{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;
  display:none;place-items:center;cursor:pointer;
  background:rgba(6,43,46,.66);color:#fff;border:0;border-radius:50%;
  backdrop-filter:blur(8px);padding-left:5px;
  transition:background .16s ease,transform .16s ease
}
.vplaybadge:hover{background:rgba(6,43,46,.86);transform:scale(1.04)}
.vplaybadge:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vframe.blocked .vplaybadge{display:grid}
.vbtn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(6,43,46,.62);color:#fff;border:0;border-radius:100px;
  padding:9px 14px;font:600 12.5px/1 var(--fbody);letter-spacing:.01em;
  backdrop-filter:blur(8px);transition:background .15s ease
}
.vbtn:hover{background:rgba(6,43,46,.85)}
.vbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vbtn.icononly{padding:9px 11px}
.vicon{display:inline-flex}

@media (max-width:560px){
  .herovideo video{aspect-ratio:16/9}
  .vcontrols{right:10px;bottom:10px}
  .vbtn .vlabel{display:none}
  .vbtn{padding:9px 11px}
}

/* Someone who has asked the OS for less motion should not be handed an
   autoplaying film. The poster stays; the play button becomes the way in. */
@media (prefers-reduced-motion:reduce){
  .herovideo video{transition:none}
}

/* ---------- stats ------------------------------------------------------- */
.stats{background:var(--teal);color:#fff;border-bottom:0}
.stats{padding:clamp(56px,7vw,88px) 0}
.statgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3.5vw,56px);align-items:start
}
/* Each stat is its own column with the number on a shared baseline and the
   label pushed to a common top edge, so four labels of different lengths stop
   looking like a ragged staircase. */
.stat{display:flex;flex-direction:column;height:100%}
.stat .n{
  font-family:var(--fdisp);font-size:clamp(40px,5vw,68px);font-weight:800;
  letter-spacing:-.05em;line-height:1;margin-bottom:16px
}
.stat .n small{font-size:.42em;font-weight:600;letter-spacing:-.02em;vertical-align:.35em;margin-left:2px}
.stat .l{
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.72);
  max-width:24ch;border-top:1px solid rgba(255,255,255,.16);padding-top:14px
}

/* ---------- philosophy / funnel ------------------------------------------ */
.philo{background:var(--cream)}
/* The funnel actually tapers — four equal blocks showed a pipeline, not a filter.
   Bar widths are illustrative (a true linear scale would render the last rung
   invisible at 8 of 1,200), so the real counts are printed on every bar. */
.funnel{margin-bottom:clamp(56px,6vw,88px)}
.rung{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(20px,3vw,40px);align-items:center;margin-bottom:10px
}
.track{min-width:0}
.bar{
  width:var(--w);min-width:184px;border-radius:12px;color:#fff;
  padding:20px 24px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  transition:width .5s cubic-bezier(.2,.7,.3,1)
}
.tone-a{background:var(--teal-deep)}
.tone-b{background:var(--teal)}
.tone-c{background:var(--teal-mid)}
.tone-d{background:var(--orange)}
.rstage{
  font:600 11px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;opacity:.74
}
/* The number hugs its label rather than being pushed to the bar's far edge —
   at narrow widths that keeps every rung on one line. */
.rnum{
  font-family:var(--fdisp);font-size:clamp(22px,2.4vw,32px);font-weight:800;
  letter-spacing:-.045em
}
.rnote{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--ink);max-width:34ch}
.radv{
  display:block;font:700 12px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:9px
}
.funnelcap{
  margin:22px 0 0;font-size:13.5px;line-height:1.5;color:var(--sage);max-width:56ch
}

.stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--rule)
}
.stage:nth-child(even) .stagetext{order:2}
.stagenum{
  font-family:var(--fdisp);font-size:clamp(56px,7vw,104px);font-weight:800;
  letter-spacing:-.06em;line-height:.8;color:var(--orange);margin-bottom:20px;
  -webkit-text-stroke:0
}
.stage h3{font-size:clamp(26px,3.2vw,42px);color:var(--teal);margin-bottom:18px}
.stage p{font-size:18px;color:var(--muted);margin:0 0 16px;max-width:46ch}
.stage .crit{
  margin-top:30px;padding:22px 24px;border-top:0;border-radius:14px;
  background:rgba(11,70,74,.06);
  font:700 11px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);max-width:46ch
}
.stage .crit span{
  display:block;font:500 17px/1.55 var(--fbody);letter-spacing:-.005em;
  text-transform:none;color:var(--teal);margin-top:11px
}
.stage figure{margin:0;overflow:hidden;border-radius:18px}
.stage figure img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- thesis -------------------------------------------------------- */
.thesis{background:var(--teal-deep);color:#fff;border-bottom:0}
.thesis h2{color:#fff}
.thesis .quote{
  font-family:var(--fserif);font-size:clamp(26px,3.4vw,44px);line-height:1.22;
  font-weight:400;letter-spacing:-.02em;max-width:20ch;color:#fff
}
.thesis .quote em{color:var(--orange);font-style:italic}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.tenets{counter-reset:t;margin:0;padding:0;list-style:none}
.tenets li{
  counter-increment:t;padding:26px 0;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:44px 1fr;gap:18px
}
.tenets li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tenets li::before{
  content:"0" counter(t);font-family:var(--fdisp);font-weight:700;font-size:14px;
  letter-spacing:.06em;color:var(--orange);padding-top:5px
}
.tenets h4{font-size:19px;color:#fff;margin-bottom:7px;letter-spacing:-.02em}
.tenets p{margin:0;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.66)}

/* ---------- venture cards -------------------------------------------------- */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px)}
.vgrid.three{grid-template-columns:repeat(3,1fr)}
.vcard{
  position:relative;
  text-decoration:none;display:flex;flex-direction:column;
  background:var(--cream);border-radius:16px;padding:20px 20px 24px;
  transition:transform .18s ease,box-shadow .18s ease
}
.vcard .badge{
  position:absolute;top:14px;right:14px;
  font:600 10.5px/1 var(--fbody);letter-spacing:.1em;text-transform:uppercase;
  background:var(--teal);color:#fff;padding:6px 10px;border-radius:100px
}
.vcard .vloc{font-size:13.5px;color:var(--sage);margin-top:6px}
.vcard .vraised{
  margin-top:12px;font:600 14px/1.4 var(--fbody);color:var(--teal)
}
.vcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,70,74,.13)}
.vcard .pic{
  aspect-ratio:1/1;border-radius:999px;overflow:hidden;margin:6px auto 20px;
  width:72%;background:var(--teal);display:grid;place-items:center
}
.vcard .pic img{width:100%;height:100%;object-fit:cover}
.vcard .pic.tone-anon,.gpic.tone-anon{background:var(--sage)}
.initials.anon{font-size:34px;opacity:.75}
.tag.anon{background:rgba(247,93,41,.14);color:var(--orange-deep);font-weight:600}
.sbrow.anonnote b{font-weight:500;color:var(--muted);text-align:right}
/* A logo is artwork with its own margins — contain it on white rather than
   cropping it to fill the circle. */
.vcard .pic.tone-mark,.gpic.tone-mark{background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.pic .ismark,.gpic .ismark{object-fit:contain;padding:14%}
.pic .ismark[data-fit="cover"],.gpic .ismark[data-fit="cover"]{object-fit:cover;padding:0}
/* set by fitMarks() once the image reports its dimensions */
.ismark[data-fit="cover"]{object-fit:cover;padding:0;width:100%;height:100%}
.ismark[data-fit="contain"]{object-fit:contain}
.vcard .pic.tone1{background:var(--teal)}
.vcard .pic.tone2{background:var(--orange)}
.vcard .pic.tone3{background:var(--sage)}
.vcard .pic.tone4{background:var(--teal-mid)}
.vcard .pic .initials{
  font-family:var(--fdisp);font-size:40px;font-weight:800;color:#fff;letter-spacing:-.04em
}
.vcard .vn{font-family:var(--fdisp);font-size:21px;font-weight:700;color:var(--teal);letter-spacing:-.03em}
.vcard .vf{
  font:600 12px/1.3 var(--fbody);letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);margin-top:7px
}
.vcard .vf b{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;font-size:13.5px}
.vcard .vd{font-size:15px;line-height:1.5;color:var(--muted);margin-top:13px}
.vcard .tags{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font:500 11.5px/1 var(--fbody);letter-spacing:.04em;color:var(--teal);
  background:rgba(11,70,74,.09);padding:6px 10px;border-radius:100px
}

/* ---------- portfolio filters ---------------------------------------------- */
.filters{
  position:sticky;top:80px;z-index:60;background:rgba(255,253,249,.94);
  backdrop-filter:blur(14px);padding:16px 0;border-bottom:1px solid var(--rule);
  margin-bottom:clamp(36px,4vw,56px)
}

/* Five facet rows pinned to the top ate half the viewport on scroll. The panel
   now collapses to this one line as soon as you scroll past it, and re-opens
   when you scroll back up — or on demand from the toggle. */
.fhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ftoggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--teal);color:#fff;border:0;border-radius:100px;
  padding:10px 16px;font:600 13px/1 var(--fbody);letter-spacing:.01em
}
.ftoggle .caret{
  width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease
}
.filters:not(.collapsed) .ftoggle .caret{transform:rotate(-135deg) translate(-2px,-2px)}
.ftoggle .n{
  font-size:11px;background:rgba(255,255,255,.24);padding:3px 7px;border-radius:100px
}
.factive{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.apill{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(247,93,41,.12);color:var(--orange-deep);
  font:600 12px/1 var(--fbody);padding:7px 8px 7px 12px;border-radius:100px
}
.apill b{font-weight:600;opacity:.62;text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.apill button{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:600 14px/1 var(--fbody);opacity:.6
}
.apill button:hover{opacity:1}
.fclear{
  background:none;border:0;padding:0;cursor:pointer;color:var(--sage);
  font:500 13px/1 var(--fbody);text-decoration:underline;text-underline-offset:3px
}
.fclear:hover{color:var(--teal)}
.fcount{
  margin-left:auto;font:600 12px/1 var(--fbody);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage);white-space:nowrap
}
/* The panel floats over the grid instead of sitting in the flow. Inline, six
   facet rows pushed the results most of a screen down whether or not anyone was
   filtering; as an overlay it costs nothing until you open it. Closed by
   default — the bar alone is the resting state. */
.filters .wrap{position:relative}
.fbody{
  position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 14px);z-index:80;
  background:var(--paper);border:1px solid var(--rule);border-radius:18px;
  box-shadow:0 26px 64px rgba(6,43,46,.18);
  padding:24px 26px;max-height:min(60vh,540px);overflow-y:auto
}
.filters.collapsed .fbody{display:none}
/* Grid rather than a wrapping flex row: the sector facet runs to three lines and
   every one of them has to start under the first chip, not under the label. */
.frow{display:grid;grid-template-columns:98px minmax(0,1fr);gap:14px;
  align-items:start;margin-bottom:10px}
.frow:last-child{margin-bottom:0}
.frow .flabel{
  font:600 11px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);padding-top:12px
}
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(11,70,74,.22);background:transparent;color:var(--teal);
  font:500 13.5px/1 var(--fbody);padding:8px 12px 8px 14px;border-radius:100px;cursor:pointer;
  transition:all .14s ease
}
.chip:hover{border-color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chip .cnt{
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  background:rgba(11,70,74,.1);color:var(--teal);
  padding:3px 6px;border-radius:100px;min-width:19px;text-align:center
}
.chip[aria-pressed="true"] .cnt{background:rgba(255,255,255,.22);color:#fff}
/* An option with nothing in it stays visible — an empty cohort is information —
   but recedes so it doesn't compete with the ones worth clicking. */
.chip[data-empty="true"]{opacity:.42}
.chip[data-empty="true"]:hover{opacity:.72}

.empty{padding:80px 0;text-align:center;color:var(--sage);grid-column:1/-1}
.linkbtn{
  background:none;border:0;padding:0 0 1px;margin-left:6px;cursor:pointer;
  font:inherit;color:var(--orange);border-bottom:1px solid currentColor
}

/* ---------- search box ------------------------------------------------------ */
.searchwrap{position:relative;flex:1;min-width:220px;max-width:340px}
.searchwrap input{
  width:100%;border:1px solid rgba(11,70,74,.22);border-radius:100px;
  padding:10px 18px;font:400 14.5px/1 var(--fbody);color:var(--ink);
  background:var(--paper);transition:border-color .14s
}
.searchwrap input:focus{outline:none;border-color:var(--teal)}
.searchwrap input::placeholder{color:var(--sage)}

/* ---------- graduates: cohort groups --------------------------------------- */
.cgroup{border-bottom:1px solid var(--rule)}
.cgroup:first-of-type{border-top:1px solid var(--rule)}

/* The whole row is the control, so the click target is the full width rather
   than the year alone. */
.chead{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:22px 4px;user-select:none
}
.chead::-webkit-details-marker{display:none}
.chead:hover .cyear{color:var(--orange)}
.cgroup summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:6px}

.cyear{
  font-family:var(--fdisp);font-size:clamp(24px,2.6vw,34px);font-weight:800;
  letter-spacing:-.04em;color:var(--teal);transition:color .14s ease
}
.ccount{
  font:600 11px/1 var(--fbody);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);background:rgba(11,70,74,.07);padding:6px 10px;border-radius:100px
}
.ccaret{
  margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease
}
.cgroup[open] .ccaret{transform:rotate(-135deg) translate(-3px,-3px)}
.cgroup[open] .chead{padding-bottom:16px}
.cgroup > .ggrid{padding-bottom:clamp(28px,3vw,40px)}

/* Cards beyond the preview are hidden with CSS rather than removed, so
   expanding is instant and browser find-in-page still reaches them. */
.ggrid.capped > .gcard:nth-child(n+4){display:none}
.showall{
  display:inline-flex;align-items:center;gap:9px;margin:16px 0 4px;cursor:pointer;
  background:transparent;border:1px solid rgba(11,70,74,.24);border-radius:100px;
  padding:11px 20px;font:600 14px/1 var(--fbody);color:var(--teal);
  transition:background .14s ease,border-color .14s ease
}
.showall:hover{background:var(--cream);border-color:var(--teal)}
.showall::after{
  content:"";width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px)
}

/* ---------- graduates directory rows ---------------------------------------- */
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
.gcard{
  text-decoration:none;display:grid;grid-template-columns:72px 1fr;gap:20px;
  background:var(--cream);border-radius:14px;padding:22px 24px;align-items:start;
  transition:transform .16s ease,box-shadow .16s ease
}
.gcard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,70,74,.12)}
.gpic{
  width:72px;height:72px;border-radius:999px;overflow:hidden;
  display:grid;place-items:center;background:var(--teal)
}
.gpic.tone1{background:var(--teal)}
.gpic.tone2{background:var(--orange)}
.gpic.tone3{background:var(--sage)}
.gpic.tone4{background:var(--teal-mid)}
.gpic img{width:100%;height:100%;object-fit:cover}
.gpic .initials{
  font-family:var(--fdisp);font-size:24px;font-weight:800;color:#fff;letter-spacing:-.04em
}
.ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gn{font-family:var(--fdisp);font-size:19px;font-weight:700;color:var(--teal);letter-spacing:-.03em}
.gstage{
  font:600 10px/1 var(--fbody);letter-spacing:.11em;text-transform:uppercase;
  padding:5px 9px;border-radius:100px;white-space:nowrap
}
.gs-portfolio{background:var(--orange);color:#fff}
.gs-accelerator{background:rgba(11,70,74,.12);color:var(--teal)}
.gs-bootcamp{background:transparent;color:var(--sage);box-shadow:inset 0 0 0 1px rgba(122,140,139,.45)}
.gloc{font-size:13px;color:var(--sage);margin-top:6px}
.gd{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:11px}
.gfounder{
  margin-top:13px;padding-top:11px;border-top:1px solid var(--rule);
  font:600 14px/1.3 var(--fbody);color:var(--teal)
}
.gfounder span{
  display:block;font:600 10px/1 var(--fbody);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-bottom:5px
}

/* ---------- gallery ---------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gallery figure{margin:0;overflow:hidden;border-radius:12px}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery figure:nth-child(1) img{aspect-ratio:1/1}
.gallery figure:nth-child(4){grid-column:span 2}
.gallery figure:nth-child(4) img{aspect-ratio:2/1}

/* ---------- team ------------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,26px)}
.member .pic{
  aspect-ratio:4/5;border-radius:14px;background:var(--cream);
  display:grid;place-items:center;overflow:hidden;margin-bottom:16px
}
.member .pic img{width:100%;height:100%;object-fit:cover}
.member .pic .initials{
  font-family:var(--fdisp);font-size:38px;font-weight:800;color:var(--sage);letter-spacing:-.04em
}
.member .mn{font-family:var(--fdisp);font-size:18px;font-weight:700;color:var(--teal);letter-spacing:-.025em}
.member .mr{font-size:14px;color:var(--orange);margin-top:3px;font-weight:500}
.member .mb{font-size:14px;line-height:1.5;color:var(--muted);margin-top:9px}
/* Sits where the bio used to. An arrow rather than a logo: one wordmark in a
   grid of five cards would read as a badge on those two people. */
.member .mlink{
  display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  font:500 13.5px/1 var(--fbody);color:var(--teal);text-decoration:none;
  border-bottom:1px solid rgba(11,70,74,.28);padding-bottom:3px;
  transition:color .14s ease,border-color .14s ease
}
.member .mlink::after{content:"↗";font-size:12px;opacity:.65}
.member .mlink:hover{color:var(--orange);border-bottom-color:currentColor}

/* ---------- partners ---------------------------------------------------------- */
.plogos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:center}
/* White tiles, not cream: supplied logos arrive in mixed formats and the
   Rutgers file is a JPEG with a baked-in white background. On white it sits
   flush; on cream it would show as a pale rectangle. */
.plogo{
  height:104px;border-radius:12px;display:grid;place-items:center;text-align:center;
  background:#fff;border:1px solid var(--rule);padding:16px 18px
}
/* Explicit px cap, not a percentage: inside a centred grid tile a percentage
   max-height has no definite box to resolve against and the mark overflows.
   Capping height rather than width is also what makes these read as one set —
   a 4:1 wordmark like Antler should sit shorter than a squarer mark, not be
   scaled to the same bounding box. */
.plogo img{max-height:54px;max-width:100%;width:auto;object-fit:contain}
.plogo.wordmark{
  font:600 15px/1.3 var(--fdisp);color:var(--teal);letter-spacing:-.02em;
  background:var(--cream);border-style:dashed
}

/* ---------- impact: stage blocks ------------------------------------------ */
.istage{padding-bottom:clamp(40px,5vw,60px)}
.istage + .istage{padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--rule)}
.istage .stagenum{margin-bottom:14px}
.istage h3{font-size:clamp(24px,2.8vw,36px);color:var(--teal);margin-bottom:14px}
.istage-intro{
  margin:0;font-size:18px;line-height:1.6;color:var(--muted);max-width:56ch
}
/* Full-container width makes these single-line and hard to scan; on the Get
   Involved page the same list is naturally narrowed by its column. */
.istage .asks{margin-top:26px;max-width:82ch}
/* the list's closing rule and the next stage's opening rule would double up */
.istage .asks li:last-child{border-bottom:0}
.istage:last-of-type .asks li:last-child{border-bottom:1px solid var(--rule)}

/* ---------- about: story timeline ---------------------------------------------- */
.timeline{margin-top:clamp(40px,5vw,64px)}
.tentry{
  --yw:132px;
  display:grid;grid-template-columns:var(--yw) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding-bottom:clamp(40px,5vw,60px);position:relative
}
.tentry:last-child{padding-bottom:0}
.tyear{position:relative;padding-left:34px}
/* the spine + node, drawn per entry so the last one can terminate cleanly */
.tyear::before{
  content:"";position:absolute;left:5px;top:26px;bottom:calc(-1 * clamp(40px,5vw,60px));
  width:2px;background:var(--rule)
}
.tentry:last-child .tyear::before{display:none}
.tyear::after{
  content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px var(--paper)
}
.tentry.now .tyear::after{background:var(--teal)}
.tyear span{
  font-family:var(--fdisp);font-size:clamp(22px,2.4vw,30px);font-weight:800;
  color:var(--teal);letter-spacing:-.04em;line-height:1
}
.tbody h3{font-size:clamp(21px,2.3vw,29px);color:var(--teal);margin-bottom:14px}
.tbody p{margin:0 0 14px;font-size:17px;line-height:1.62;color:var(--muted);max-width:60ch}
.tbody p:last-child{margin-bottom:0}

/* ---------- about: the argument ------------------------------------------------ */
.argument{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.argument .big{
  font-family:var(--fserif);font-size:clamp(26px,3.2vw,40px);line-height:1.24;
  color:var(--teal);letter-spacing:-.02em;margin:0
}
.argument .big em{font-style:italic;color:var(--orange)}
.argument p{font-size:18px;line-height:1.65;color:var(--muted);margin:0 0 20px}
.argument p:last-child{margin-bottom:0}

/* ---------- founder profile ---------------------------------------------------- */
.phero{padding:clamp(40px,5vw,64px) 0 clamp(44px,5vw,64px);border-bottom:1px solid var(--rule)}
.backlink{
  display:inline-block;text-decoration:none;color:var(--sage);
  font:500 14px/1 var(--fbody);margin-bottom:clamp(30px,4vw,48px)
}
.backlink:hover{color:var(--teal)}
.pherogrid{
  display:grid;grid-template-columns:minmax(0,1fr) 200px;
  gap:clamp(28px,5vw,60px);align-items:center
}
.pmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.phero h1{font-size:clamp(38px,6vw,76px);color:var(--teal);letter-spacing:-.045em}
.phero .lede{
  font-size:clamp(18px,1.5vw,21px);color:var(--muted);margin:22px 0 0;max-width:50ch
}
.pportrait{
  margin:0;width:200px;height:200px;border-radius:999px;overflow:hidden;
  display:grid;place-items:center;justify-self:end
}
.pportrait.tone1{background:var(--teal)}
.pportrait.tone-anon{background:var(--sage)}
/* A logo keeps the circle but is contained inside it on white — cropping a
   mark to fill a circle destroys the mark. Photos still cover. */
.pportrait.tone-mark{background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.pportrait img{width:100%;height:100%;object-fit:cover}
.pportrait .ismark{object-fit:contain;padding:16%}
.pportrait .ismark[data-fit="cover"]{object-fit:cover;padding:0}
.pportrait .initials{
  font-family:var(--fdisp);font-size:62px;font-weight:800;color:#fff;letter-spacing:-.04em
}

.pbody{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(36px,5vw,72px);align-items:start;
  padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(72px,9vw,120px)
}
.pblock{padding:0 0 clamp(34px,4vw,48px);border-bottom:0}
.pblock + .pblock{padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--rule)}
.pblock h2{font-size:clamp(24px,2.6vw,34px);color:var(--teal);margin-bottom:18px;max-width:none}
.pblock p{margin:0;font-size:18px;line-height:1.65;color:var(--muted);max-width:62ch}

/* Founder-written prose. The story fields are typed into plain textareas and
   rendered through the markdown-lite pass in site.js, so this has to style
   paragraphs, bullets, emphasis and links — everything that pass can emit and
   nothing it cannot. */
.prose{max-width:62ch}
.prose p{margin:0 0 1.1em;font-size:18px;line-height:1.65;color:var(--muted)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose ul{margin:0 0 1.1em;padding:0;list-style:none}
.prose ul:last-child{margin-bottom:0}
.prose li{
  position:relative;padding-left:26px;margin-bottom:.6em;
  font-size:18px;line-height:1.6;color:var(--muted)
}
.prose li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:100px;background:var(--orange)
}
.prose a{
  color:var(--teal);text-decoration:underline;
  text-decoration-color:rgba(11,70,74,.32);text-underline-offset:3px
}
.prose a:hover{text-decoration-color:currentColor}

.psidebar{position:sticky;top:104px;display:flex;flex-direction:column;gap:16px}
.sbcard{background:var(--cream);border-radius:18px;padding:24px 24px 26px}
.sbcard h3{
  font:600 11px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin-bottom:18px
}
.sbcard.accent{background:var(--teal);color:#fff}
.sbcard.accent h3{color:rgba(255,255,255,.6)}
.sbcard.accent p{margin:0 0 20px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.78)}

.sbfounder{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sbfounder .gpic{width:56px;height:56px;flex:none}
.sbfounder .gpic .initials{font-size:19px}
.sbname{font-family:var(--fdisp);font-size:18px;font-weight:700;color:var(--teal);letter-spacing:-.025em}
.sbrole{font-size:13.5px;color:var(--sage);margin-top:2px}

.sbrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 0;border-top:1px solid var(--rule);text-decoration:none
}
.sbrow span{font:500 13px/1.3 var(--fbody);color:var(--sage);flex:none}
.sbrow b{
  font:600 13.5px/1.35 var(--fbody);color:var(--teal);text-align:right;
  overflow-wrap:anywhere
}
a.sbrow:hover b{color:var(--orange)}
.sbrow.ph b{font-weight:400;color:var(--sage)}

.sbfacts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 18px;align-items:baseline}
.sbfacts dt{font:500 13px/1.35 var(--fbody);color:var(--sage)}
.sbfacts dd{margin:0;font:600 13.5px/1.35 var(--fbody);color:var(--teal);text-align:right}

/* ---------- get involved: the three paths ------------------------------------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.path{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--cream);border-radius:18px;padding:32px 30px 30px;min-height:280px;
  transition:transform .18s ease,box-shadow .18s ease
}
.path:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(11,70,74,.13)}
.path .pnum{
  font:700 12px/1 var(--fbody);letter-spacing:.14em;color:var(--orange);margin-bottom:22px
}
.path h3{font-size:clamp(22px,2.3vw,29px);color:var(--teal);margin-bottom:14px}
.path p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.path .go{
  margin-top:auto;padding-top:26px;font:600 15px/1 var(--fbody);color:var(--orange)
}

/* an offer block: image beside a list of concrete asks */
.offer{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,5vw,72px);align-items:start
}
.offer:nth-of-type(even) .offerpic{order:2}
.offerpic{margin:0;overflow:hidden;border-radius:18px;position:sticky;top:112px}
.offerpic img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* group line-ups can't survive a 4:5 crop — give them a landscape frame */
.offerpic.wide img{aspect-ratio:4/3}
.offerpic figcaption{font-size:13px;color:var(--sage);margin-top:12px}

.asks{list-style:none;margin:34px 0 0;padding:0}
.asks li{padding:24px 0;border-top:1px solid var(--rule)}
.asks li:last-child{border-bottom:1px solid var(--rule)}
.asks h4{
  font-size:19px;color:var(--teal);margin-bottom:8px;letter-spacing:-.022em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
.asks p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.soon{
  font:600 10px/1 var(--fbody);letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);background:rgba(247,93,41,.12);padding:5px 9px;border-radius:100px
}
.commit{
  margin-top:30px;padding:22px 24px;background:var(--cream);border-radius:14px;
  font-size:15px;line-height:1.55;color:var(--muted)
}
.commit strong{
  display:block;font:600 11px/1 var(--fbody);letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:9px
}
.offer .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- cta + footer --------------------------------------------------------- */
.cta{background:var(--orange);color:#fff;border-bottom:0;text-align:center}
.cta h2{color:#fff;max-width:22ch;margin:0 auto 20px}
.cta p{max-width:50ch;margin:0 auto 34px;font-size:19px;color:rgba(255,255,255,.9)}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

footer{background:var(--teal-deep);color:rgba(255,255,255,.6);padding:78px 0 40px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:40px;padding-bottom:52px}
footer .brand img{height:32px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:20px}
footer .brand p{margin:0;max-width:36ch;line-height:1.6}
footer h4{
  color:#fff;font:700 11px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px
}
footer a{display:block;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:11px}
footer a:hover{color:#fff}
footer .btm{
  border-top:1px solid rgba(255,255,255,.14);padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px
}

/* ---------- founders: per-cohort footer row --------------------------------- */
/* "Show all" and the link through to that cohort's numbers share a line, so
   the two things you can do with a cohort sit together rather than one being
   buried under the cards and the other in the nav. */
.cfoot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:clamp(28px,3vw,40px)
}
.cfoot .showall{margin:0}
.csumlink{
  font:600 14px/1 var(--fbody);color:var(--orange);text-decoration:none;
  border-bottom:1px solid rgba(247,93,41,.35);padding-bottom:2px
}
.csumlink:hover{border-bottom-color:currentColor}
/* the grid's own bottom padding would double up with the row's */
.cgroup > .ggrid{padding-bottom:20px}

/* ---------- cohort summary ---------------------------------------------------- */
/* Spacing on this page is deliberately tighter than the marketing pages. Those
   are paced for reading one section at a time; this is a dense sheet somebody
   scans in one go, and the section rhythm that suits an essay left it looking
   like disconnected islands. */
.chero{
  padding:clamp(24px,2.4vw,34px) 0 clamp(18px,1.8vw,23px);
  border-bottom:1px solid var(--rule)
}
.chero h1{font-size:clamp(38px,5.6vw,68px);color:var(--teal);letter-spacing:-.045em}
.chero .lede{
  font-size:clamp(17px,1.4vw,20px);color:var(--muted);margin:13px 0 0;max-width:44ch
}
.cswitch{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
/* Anchors styled as the filter chips elsewhere — same affordance, and each one
   is a real URL so a cohort can be linked to, opened in a tab and shared. */
.cswitch .chip{text-decoration:none}
.cswitch .chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.cswitch .chip[aria-pressed="true"] .cnt{background:rgba(255,255,255,.22);color:#fff}

/* Headline figures. Big enough to be read off a shared screenshot, which is
   how most of these pages will actually be looked at. */
.kfigs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
  padding:clamp(21px,2.1vw,27px) 0;border-bottom:1px solid var(--rule)
}
.kfig b{
  display:block;font-family:var(--fdisp);font-weight:800;
  font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.05em;
  color:var(--orange);font-variant-numeric:tabular-nums
}
.kfig span{
  display:block;margin-top:10px;font:600 11px/1.35 var(--fbody);
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage)
}

/* ---------- cohort: the map --------------------------------------------------- */
/* THE ONE THAT ACTUALLY MATTERED. renderCohort emits these blocks as <section>
   elements, so the global `section{padding:clamp(72px,9vw,132px) 0}` rule was
   adding 126px above and below each of them — inside the wrappers whose padding
   this file spends its time tuning. Three rounds of trimming .cgeos and .cstats
   moved 20px at a time while 252px per block sat underneath, untouched.
   The rule belongs to the marketing pages; on this page the wrappers own the
   rhythm and the blocks own none of it. */
.cgeo,.cblock{padding:0;border-bottom:0}

.cgeos{padding:clamp(21px,2.2vw,30px) 0 clamp(14px,1.4vw,19px);border-bottom:1px solid var(--rule)}
.cgeo h2{font-size:clamp(21px,2vw,27px);color:var(--teal);max-width:28ch}

.cmap{margin:clamp(14px,1.5vw,20px) 0 0;max-width:1120px}
.cmap svg{display:block;width:100%;height:auto}
/* Three states and nothing in between. No data is the map's resting state, not
   an error, so it stays a quiet tint of the page rather than a grey that reads
   as "missing". */
.cmap path{stroke:var(--paper);stroke-width:1.4;vector-effect:non-scaling-stroke}
.cmap .s0{fill:#e7e0d4}
.cmap .from{fill:var(--teal)}
.cmap .here{fill:var(--orange)}
.cmap .both{fill:url(#cboth)}
.cmap .from,.cmap .here,.cmap .both{cursor:help}

.cmap figcaption{
  display:flex;flex-direction:column;gap:9px;margin-top:14px;
  font:500 12px/1.5 var(--fbody);color:var(--sage)
}
.mlegend{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mkey{
  display:inline-flex;align-items:center;gap:8px;
  font:600 11px/1 var(--fbody);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)
}
.sw{width:26px;height:11px;border-radius:2px;display:inline-block;flex:none}
.sw.from{background:var(--teal)}
.sw.here{background:var(--orange)}
/* The legend cannot reference the SVG pattern, so it restates it in CSS. Same
   angle, same two colours — if you change one, change both. Bands are wider
   here than on the map: in a 26px swatch, map-width stripes anti-alias into a
   single muddy brown instead of reading as two colours. */
.sw.both{background:repeating-linear-gradient(45deg,
  var(--orange) 0 6px, var(--teal) 6px 12px)}
.mstray{font-size:12.5px;color:var(--sage);max-width:60ch}

/* The numbers the map deliberately does not encode. */
.cgeolists{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.2vw,40px);margin-top:clamp(16px,1.7vw,24px)
}
.cgeolist h3{
  font:600 11px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage)
}
/* Each list is tinted to its half of the map, so which column is which needs no
   second look. */
.cgeolist.here .statbar i{background:var(--orange)}

/* Sector gets the wide column: it has thirteen possible values and the longest
   labels on the page, and in an even split "Trades, Manufacturing &
   Agriculture" wrapped to three lines while org type sat half empty beside
   it. */
.cstats{
  display:grid;grid-template-columns:1.7fr 1fr;align-items:start;
  gap:clamp(21px,2.1vw,29px) clamp(36px,4vw,72px);
  padding:clamp(14px,1.4vw,19px) 0 clamp(21px,2.2vw,30px)
}
.cblock h2,.cgeo .statlist{margin-top:0}
.cblock h2{font-size:clamp(19px,1.7vw,23px);color:var(--teal);max-width:none}
.statlist{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule)}
/* Icon, label, bar, count on one baseline. Every column but the bar is fixed
   width so the bars all start and end in the same place and can be compared
   down the column — a bar that starts wherever its own label ended is a
   decoration, not a chart. min-height keeps a wrapped label from making one
   row twice the height of its neighbours. */
.statrow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,.85fr) 54px;
  align-items:center;gap:6px 14px;padding:9px 0;min-height:44px;
  border-bottom:1px solid var(--rule)
}
.statrow.hasico{grid-template-columns:22px minmax(0,1fr) minmax(48px,.85fr) 54px}
.statrow:last-child{border-bottom:0}
.ico{width:20px;height:20px;color:var(--sage);flex:none}
.statlabel{font-size:14px;color:var(--ink);line-height:1.3}
.statbar{display:block;height:8px;border-radius:100px;background:rgba(11,70,74,.09)}
.statbar i{
  display:block;height:100%;border-radius:100px;background:var(--teal);
  min-width:4px
}
.statn{
  text-align:right;font:700 15px/1 var(--fdisp);color:var(--teal);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums
}
.statn em{
  display:block;margin-top:4px;font:500 11px/1 var(--fbody);font-style:normal;
  color:var(--sage)
}
.cgeolist .statlist{margin-top:12px}
/* A gap in the data is shown, not hidden — it is the one row on this page that
   is a to-do rather than a finding. */
.statrow.unrec .statlabel{color:var(--sage);font-style:italic}
.statrow.unrec .statbar i,
.cgeolist.here .statrow.unrec .statbar i{background:var(--sage);opacity:.35}
.statrow.unrec .statn{color:var(--sage)}
.statnote{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--sage);max-width:46ch}

.cactions{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:clamp(2px,.6vw,8px) 0 clamp(42px,4.4vw,62px)
}
.cactions .btn{cursor:pointer;font-family:var(--fbody)}

/* ---------- impact: grants and bootcamp ---------------------------------------- */
.isplit{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(36px,4.5vw,80px);align-items:start
}
.isplit h3{font-size:clamp(19px,1.8vw,24px);color:var(--teal)}
.isub{margin:8px 0 0;font-size:15px;color:var(--muted)}
.inote{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:46ch}

.glist,.blist{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
/* Venture, founder, amount. The amount column is fixed and tabular so the
   figures line up on the decimal and can be read down the column. */
.grow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 110px;
  gap:6px 16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)
}
.gv{font:600 15px/1.35 var(--fbody);color:var(--teal)}
.gv a{text-decoration:none;border-bottom:1px solid rgba(11,70,74,.3)}
.gv a:hover{color:var(--orange);border-bottom-color:currentColor}
.gf{font-size:14px;color:var(--sage);line-height:1.35}
.ga{
  text-align:right;font:700 15px/1 var(--fdisp);color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums
}

.brow{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule)
}
.by{font:600 15px/1 var(--fbody);color:var(--teal)}
.bn{font:700 17px/1 var(--fdisp);color:var(--ink);font-variant-numeric:tabular-nums}
/* A year with no bootcamp is not a year with nobody in it. */
.brow.none .by,.brow.none .bn{color:var(--sage)}
.brow.none .bn{font:400 14px/1.4 var(--fbody)}
.brow.none em{font-style:italic}

/* ---------- responsive ------------------------------------------------------------ */
@media (max-width:1080px){
  .vgrid{grid-template-columns:repeat(3,1fr)}
  .paths{grid-template-columns:1fr}
  .path{min-height:0}
  .team{grid-template-columns:repeat(3,1fr)}
  .plogos{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .navlinks{
    display:none;position:absolute;top:80px;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;padding:10px var(--gut) 22px;
    border-bottom:1px solid var(--rule)
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 0;font-size:17px;width:100%}
  .navlinks .btn{margin-top:10px}
  .navtoggle{display:block}

  /* the dropdown flattens into the stacked menu — no nested toggle to hunt for */
  .navdrop{width:100%}
  .navdroplink{display:none}
  .navmenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0;background:none;border:0;box-shadow:none
  }
  .navmenu::before{display:none}
  .navmenu a{padding:13px 0;border-radius:0}
  .navmenu a:hover,.navmenu a[aria-current]{background:none}
  .navmenu .mi{font-size:17px;font-weight:500}
  .navmenu .md{display:none}
  .herogrid{grid-template-columns:1fr;gap:32px;align-items:start}
  .statgrid{grid-template-columns:1fr 1fr;gap:34px}
  .cstats{grid-template-columns:1fr;gap:32px}
  .isplit{grid-template-columns:1fr;gap:38px}
  .cgeolists{grid-template-columns:1fr;gap:30px}
  .kfigs{grid-template-columns:repeat(2,1fr);row-gap:30px}
  /* keep the taper on small screens; the note drops beneath its bar */
  .rung{grid-template-columns:1fr;gap:12px;margin-bottom:22px;align-items:start}
  .stage{grid-template-columns:1fr;gap:28px}
  .stage:nth-child(even) .stagetext{order:0}
  .tgrid{grid-template-columns:1fr;gap:36px}
  .vgrid,.vgrid.three{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery figure:nth-child(1),.gallery figure:nth-child(4){grid-column:span 2}
  .gallery figure:nth-child(1){grid-row:span 1}
  .filters{position:static}
  .frow{grid-template-columns:1fr;gap:8px;margin-bottom:20px}
  .frow .flabel{padding-top:0}
  .ggrid{grid-template-columns:1fr}
  .argument{grid-template-columns:1fr;gap:26px}
  .tentry{--yw:84px;gap:20px}
  .pherogrid{grid-template-columns:1fr;gap:28px}
  .pportrait{justify-self:start;width:132px;height:132px}
  .pportrait .initials{font-size:42px}
  .pbody{grid-template-columns:1fr;gap:40px}
  .psidebar{position:static}
  .offer{grid-template-columns:1fr;gap:28px}
  .offer:nth-of-type(even) .offerpic{order:0}
  .offerpic{position:static}
  .offerpic img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .statgrid{grid-template-columns:1fr}
  .kfigs{grid-template-columns:1fr 1fr}
  .grow{grid-template-columns:1fr 96px}
  .gv{grid-column:1}
  .gf{grid-column:1;grid-row:2}
  .ga{grid-column:2;grid-row:1/3;align-self:center}
  /* On a phone the bar drops under the label rather than sharing the line —
     "Trades, Manufacturing & Agriculture" beside a bar leaves neither enough
     room to be read. The count stays on the right, spanning both rows. */
  .statrow{grid-template-columns:22px 1fr 48px;gap:5px 12px;padding:12px 0}
  .statrow:not(.hasico) .statlabel{grid-column:1/3}
  .statrow:not(.hasico) .statbar{grid-column:1/3;grid-row:2}
  .statrow.hasico .ico{grid-row:1/3;align-self:center}
  .statrow.hasico .statlabel{grid-column:2}
  .statrow.hasico .statbar{grid-column:2;grid-row:2}
  .statn{grid-column:3;grid-row:1/3;align-self:center}
  /* Compress the taper into 56–100% so the narrow rungs stay one line on a
     phone. Still visibly a funnel, just a shallower one. */
  .bar{width:calc(45% + var(--w) * .55);min-width:0;padding:16px 18px}
  .rnum{font-size:22px}
  .vgrid,.vgrid.three{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .plogos{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr}
  .heroimg img{aspect-ratio:4/3}
}