/* ============================================================
   WHAT WE DO, v2 exploration (Oct 7 2026)
   One editorial section per spotlight program instead of the
   carousel, built from the client's program slideshow.
   Pillar colours are sampled from the client's pillar icons.
   ============================================================ */
:root {
  --p-aw: #1D92C0;  /* Awareness   */
  --p-me: #00AFA4;  /* Mentorship  */
  --p-co: #70BB46;  /* Community   */
  --p-de: #FFA600;  /* Development */
}

/* ---------- Page intro ---------- */
.pg-hero { background: var(--navy); color: var(--on-dark); padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); position: relative; overflow: hidden; }
.pg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gauge); }
.pg-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.pg-hero h1 { color: #fff; font-size: clamp(44px, 6.4vw, 84px); line-height: .98; text-transform: uppercase; letter-spacing: -0.03em; }
.pg-hero h1 em { font-style: normal; color: var(--brand-bright); }
.pg-hero .lede { color: var(--on-dark-soft); margin-top: 22px; font-size: 18px; }
.pillar-key { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pkey { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pkey img { width: 22px; height: 22px; background: #fff; border-radius: 50%; padding: 3px; }

/* Program index: replaces the "All programs" queue */
.p-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.p-index li { border-bottom: 1px solid rgba(255,255,255,.14); }
.p-index a { display: grid; grid-template-columns: 34px 64px 1fr auto; align-items: center; gap: 16px; padding: 12px 4px; color: #fff; transition: background .2s, padding .2s; border-radius: 8px; }
.p-index a:hover { background: rgba(255,255,255,.06); padding-left: 10px; }
.p-index .n { font: 600 13px 'Space Grotesk', sans-serif; color: var(--steel-light); }
.p-index .th { width: 64px; height: 44px; border-radius: 6px; overflow: hidden; }
.p-index .th img { width: 100%; height: 100%; object-fit: cover; }
.p-index .t { font: 600 16px/1.25 'Space Grotesk', sans-serif; }
.p-index .t small { display: block; font: 500 12px 'Inter', sans-serif; color: var(--on-dark-soft); margin-top: 3px; }
.p-index .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 25%, transparent); }

/* ---------- Program section (shared) ---------- */
.prog { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.prog + .prog:not(.prog--dark):not(.on-paper) { border-top: 1px solid var(--line); }
.prog-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.prog--flip .prog-grid { grid-template-columns: 1fr 1.15fr; }
.prog--flip .prog-media { order: 2; }

.prog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.prog-num { font: 700 13px 'Space Grotesk', sans-serif; letter-spacing: .14em; color: var(--muted); }
.ptag { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 14%, #fff); }
.ptag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.pdate { font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--body); }

.prog h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; text-transform: uppercase; margin-bottom: 10px; }
.prog-partner { font-weight: 600; color: var(--brand-deep); font-size: 15px; margin-bottom: 18px; }
.prog-body { font-size: 17px; color: var(--body); max-width: 54ch; }

.prog-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.pstat b { display: block; font: 700 clamp(44px, 5vw, 64px)/0.95 'Space Grotesk', sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.pstat b::after { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--pc); margin: 12px 0 10px; }
.pstat span { font-size: 14px; color: var(--body); max-width: 22ch; display: block; }
.prog-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { font-size: 12.5px; font-weight: 500; color: var(--body); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.chip--press { color: var(--brand-deep); border-color: rgba(21,155,215,.35); }

/* Media frame with a pillar-coloured offset block behind it */
.prog-media { position: relative; }
.frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--paper); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.prog:hover .frame img { transform: scale(1.03); }
.prog-media::before { content: ""; position: absolute; inset: 28px -18px -18px 28px; border-radius: var(--radius-lg); background: var(--pc); opacity: .9; z-index: -1; }
.prog--flip .prog-media::before { inset: 28px 28px -18px -18px; }
.frame--tall { aspect-ratio: 4 / 5; }
.prog-media .caption { position: absolute; left: 16px; bottom: 16px; z-index: 2; font: 600 11.5px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(15,26,48,.72); backdrop-filter: blur(6px); padding: 7px 11px; border-radius: 6px; }

/* ---------- Dark gallery variant (Take Our Kids to Work Day) ---------- */
.prog--dark { background: var(--navy-deep); color: var(--on-dark); }
.prog--dark h2 { color: #fff; }
.prog--dark .prog-body, .prog--dark .pstat span, .prog--dark .pdate { color: var(--on-dark-soft); }
.prog--dark .pstat b { color: #fff; }
.prog--dark .prog-partner { color: var(--brand-bright); }
.prog--dark .ptag { background: rgba(255,255,255,.08); color: #fff; }
.prog--dark .prog-stats { border-color: rgba(255,255,255,.14); }
.prog--dark .chip { background: transparent; color: var(--on-dark-soft); border-color: rgba(255,255,255,.2); }
.gal-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.gal-head .prog-stats { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
.bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(170px, 18vw, 250px)); gap: 12px; }
.bento figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: #0b1426; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.bento figure:hover img { transform: scale(1.05); }
.bento figure:first-child { grid-row: span 2; }
.bento figcaption { position: absolute; left: 12px; bottom: 12px; font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(15,26,48,.7); padding: 6px 10px; border-radius: 6px; }

/* ---------- Feature variant (portrait photo + oversized stat) ---------- */
.prog--feature .prog-grid { grid-template-columns: .8fr 1.2fr; }
.prog--feature.prog--flip .prog-grid { grid-template-columns: 1.2fr .8fr; }
.prog--feature .frame--tall { max-height: 640px; }
.prog--feature .big-stat { font: 700 clamp(88px, 12vw, 168px)/.85 'Space Grotesk', sans-serif; letter-spacing: -0.05em; color: var(--pc); margin: 6px 0 4px; }
.prog--feature .big-stat-label { font: 600 14px 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }

/* ---------- Full line-up by pillar ---------- */
.lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lu-col { background: #fff; border-radius: var(--radius); padding: 22px 22px 18px; border-top: 5px solid var(--pc); box-shadow: var(--shadow-sm); }
.lu-col h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.lu-col h3 img { width: 30px; height: 30px; }
.lu-col ul { list-style: none; padding: 0; margin: 0; }
.lu-col li { font-size: 15px; color: var(--body); padding: 8px 0; border-top: 1px solid var(--line); }
.lu-col li a { color: var(--ink); font-weight: 600; }
.lu-col li a::after { content: " ↓"; color: var(--brand); }
.lu-col li em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- Mentorship: collage + form ---------- */
.mentor { background: linear-gradient(180deg, color-mix(in srgb, var(--p-me) 9%, #fff) 0%, #fff 70%); --pc: var(--p-me); }
.mentor-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.mentor-head h2 { font-size: clamp(40px, 5.4vw, 72px); text-transform: uppercase; line-height: .95; }
.mentor-head p { font-size: 17px; color: var(--body); }
.mentor-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.collage { position: sticky; top: 120px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(70px, 7vw, 96px); gap: 12px; }
.collage > * { border-radius: var(--radius); overflow: hidden; position: relative; margin: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.c-main { grid-column: 1 / span 4; grid-row: span 5; }
.c-tile { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff; }
.c-tile b { font: 700 clamp(30px, 3vw, 42px)/.9 'Space Grotesk', sans-serif; letter-spacing: -0.03em; }
.c-tile span { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; opacity: .9; }
.c-teal { background: var(--p-me); }
.c-navy { background: var(--navy); }
.c-icon { grid-column: span 2; grid-row: span 1; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.c-icon img { width: 56px; height: 56px; object-fit: contain; }
.c-strip { grid-column: 1 / -1; grid-row: span 2; background: var(--navy-deep); color: #fff; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.c-strip .kicker { margin: 0; color: var(--brand-bright); }
.c-strip p { font: 600 clamp(16px, 1.5vw, 19px)/1.35 'Space Grotesk', sans-serif; }
.c-main .caption { position: absolute; left: 12px; bottom: 12px; font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(15,26,48,.72); padding: 6px 10px; border-radius: 6px; }
.mentor .form-embed { margin-top: 0; box-shadow: var(--shadow-md); }
.mentor .form-embed iframe { height: 1250px; }
.form-label { display: flex; justify-content: space-between; align-items: center; font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin-bottom: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pg-hero-grid, .prog-grid, .prog--flip .prog-grid, .prog--feature .prog-grid, .prog--feature.prog--flip .prog-grid, .gal-head, .mentor-head, .mentor-grid { grid-template-columns: 1fr; }
  .prog--flip .prog-media { order: 0; }
  .gal-head .prog-stats { justify-content: flex-start; }
  .lineup { grid-template-columns: repeat(2, 1fr); }
  .collage { position: static; }
  .prog-media::before { inset: 18px -10px -10px 18px; }
  .prog--flip .prog-media::before { inset: 18px 18px -10px -10px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 180px; }
  .bento figure:first-child { grid-column: 1 / -1; grid-row: span 1; }
  .lineup { grid-template-columns: 1fr; }
  .p-index a { grid-template-columns: 28px 52px 1fr auto; gap: 12px; }
  .p-index .th { width: 52px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .frame img, .bento img { transition: none; } }

/* ---------- Page intro v3 (Oct 7 2026): header row + quiet "run of the show" ----------
   Four pillar columns with no boxes, just a coloured rule. Programs that have
   a section below are links; the rest are plain text. Under 640px each pillar
   becomes a native <details> accordion (closed), so the intro stays short. */
.pg-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(36px, 4vw, 56px); }
.pg-hero-top { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.pg-hero-top h1 { font-size: clamp(42px, 6vw, 80px); }
.pg-hero-top .lede { margin: 0 0 6px; max-width: 46ch; }
.run-show { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 3vw, 40px); margin-top: clamp(36px, 5vw, 64px); }
.rs-col { border-top: 3px solid var(--pc); padding-top: 14px; }
.rs-col summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: default; pointer-events: none;
  font: 700 12.5px/1 'Space Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.rs-col summary::-webkit-details-marker { display: none; }
.rs-col summary img { width: 24px; height: 24px; background: #fff; border-radius: 50%; padding: 3px; flex: none; }
.rs-count { display: none; }
.rs-col ul { list-style: none; margin: 0; padding: 0; }
.rs-col li { font-size: 14.5px; line-height: 1.35; color: var(--on-dark-soft); padding: 5px 0; }
.rs-col li em { font-style: normal; color: var(--steel-light); font-size: 12.5px; }
.rs-col li a { color: #fff; font-weight: 600; background-image: linear-gradient(var(--pc), var(--pc)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s; }
.rs-col li a::after { content: " →" / ""; color: var(--brand-bright); }
.rs-col li a:hover, .rs-col li a:focus-visible { background-size: 100% 2px; outline: none; }
.rs-col li a:focus-visible { box-shadow: 0 0 0 2px var(--brand-bright); border-radius: 2px; }

@media (max-width: 960px) {
  .pg-hero-top { grid-template-columns: 1fr; }
  .run-show { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}
@media (max-width: 640px) {
  .run-show { grid-template-columns: 1fr; gap: 0; margin-top: 32px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .rs-col { border-top: 1px solid rgba(255,255,255,.14); padding: 0; position: relative; }
  .rs-col::before { content: ""; position: absolute; left: 0; top: 18px; width: 3px; height: 20px; border-radius: 3px; background: var(--pc); }
  .rs-col summary { pointer-events: auto; cursor: pointer; margin: 0; padding: 16px 4px 16px 14px; min-height: 56px; }
  .rs-count { display: inline-block; margin-left: auto; font: 600 12px 'Inter', sans-serif; letter-spacing: 0; color: var(--on-dark-soft); }
  .rs-count::after { content: "" / ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
    background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    transition: transform .2s; }
  .rs-col[open] .rs-count::after { transform: rotate(180deg); }
  .rs-col ul { padding: 0 4px 14px 48px; }
  .rs-col li { padding: 7px 0; font-size: 15px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Mentorship v2 (Oct 7 2026): collage row first, form underneath ----------
   The intake form is long, so it gets the full width instead of half a column. */
.mentor-grid { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); }
.collage { position: static; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(80px, 8vw, 118px); }
.c-main { grid-column: 1 / span 7; grid-row: 1 / span 4; }
.c-teal { grid-column: 8 / span 2; grid-row: 1 / span 2; }
.c-navy { grid-column: 10 / span 3; grid-row: 1 / span 2; }
.c-strip { grid-column: 8 / span 5; grid-row: 3 / span 2; }
.mentor-form-wrap { max-width: 860px; width: 100%; margin: 0 auto; }
@media (max-width: 760px) {
  .collage { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .c-main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .c-teal, .c-navy { grid-column: auto; grid-row: auto; min-height: 120px; }
  .c-strip { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 520px) { .form-label { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* ---------- Mentorship CTA (Oct 7 2026): button out to the Google Form instead of the embed ---------- */
.mentor-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--p-me); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow-md); }
.mentor-cta h3 { font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; margin-bottom: 8px; }
.mentor-cta p { color: var(--body); font-size: 15.5px; max-width: 58ch; }
.btn-apply { font-size: 15px; padding: 16px 28px; white-space: nowrap; }
@media (max-width: 640px) { .mentor-cta .btn-apply { width: 100%; justify-content: center; } }

/* ============================================================
   OCT 26 2026 ROUND (consolidated feedback, section 1)
   "Powered by Partnerships" line, CORE PROGRAMS / PROGRAM ARCHIVES
   headers, dates removed, photo carousels where a program has more
   than one picture, square archive tiles.
   ============================================================ */
.pg-powered { font: 700 12.5px 'Space Grotesk', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-bright); margin: 0 0 16px; }
.run-show li em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* Section headers for the two program groups, same treatment as the other section heads */
.prog-band { padding: clamp(44px, 5vw, 72px) 0 0; }
.prog-band .section-head { margin-bottom: 0; }
.prog-band .section-head h2 { text-transform: uppercase; letter-spacing: .015em; }
.prog-band .section-head p { max-width: 62ch; color: var(--body); }
.prog-band--archive { background: var(--paper); padding-bottom: clamp(56px, 7vw, 104px); }
.prog-band--archive .section-head { margin-bottom: clamp(24px, 3vw, 36px); }

/* Photo carousel: stacked images, crossfade, dots; pauses on hover/focus. */
.pc { position: relative; }
.pc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.pc > img.is-on { opacity: 1; }
.pc-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.pc-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s ease, background .25s ease; }
.pc-dots button.is-on { background: #fff; width: 22px; }
.pc-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.frame--wide { aspect-ratio: 2 / 1; }
.prog:hover .pc > img { transform: none; }   /* no zoom on the carousel frame; the fade is the motion */
.c-main.pc img { position: absolute; }

/* Archive tiles: square photo (or pillar-coloured panel) on top, text below */
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.arch-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease; }
.arch-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.arch-media { aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: var(--pc); }
.arch-media--text { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 45%, var(--navy))); }
.arch-media--text img { width: 36%; height: auto; opacity: .95; filter: brightness(0) invert(1) drop-shadow(0 6px 16px rgba(0,0,0,.18)); }
.arch-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.arch-body .ptag { align-self: flex-start; }
.arch-body h3 { font-size: 20px; line-height: 1.05; text-transform: uppercase; margin: 2px 0 0; }
.arch-body p { font-size: 14.5px; line-height: 1.5; color: var(--body); margin: 0; }
.arch-last { margin-top: auto; padding-top: 8px; font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px){ .arch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .arch-grid { grid-template-columns: 1fr; } .frame--wide { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce){ .pc > img { transition: none; } .arch-tile { transition: none; } }

/* ============================================================
   MENTORSHIP: Launch deck wording (Oct 26 2026, section 2)
   ============================================================ */
.mp-tagline { font: 700 clamp(15px, 1.4vw, 18px) 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); margin: 10px 0 0; }
.mp-h { font-size: clamp(17px, 1.5vw, 20px); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 12px; }
.mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mp-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--body); }
.mp-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 3px; border-radius: 2px; background: var(--pc); }
.mp-why { margin: 0 0 clamp(26px, 3vw, 36px); padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.mp-list--row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.mp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 22px; }
.mp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; }
.mp-card--dark { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.mp-card--dark .mp-h { color: #fff; }
.mp-card--dark .mp-list li { color: var(--on-dark); }
.mp-card--dark .mp-list li::before { background: var(--brand-bright); }
.mp-card--dark .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.mp-sub { font: 600 11.5px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); margin: 14px 0 8px; }
.mp-sub:first-of-type { margin-top: 0; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-snapshot { margin: 0 0 clamp(28px, 4vw, 48px); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.mp-snap-head .kicker { margin-bottom: 18px; }
.mp-snap-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(22px, 3vw, 48px); align-items: start; }
.mp-stats { display: flex; flex-direction: column; gap: 14px; }
.mp-stat { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mp-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.mp-stat b { font: 700 clamp(34px, 3.4vw, 46px)/.9 'Space Grotesk', sans-serif; letter-spacing: -0.03em; color: var(--pc); }
.mp-stat span { font-size: 14px; line-height: 1.4; color: var(--body); }
.mp-quotes { display: flex; flex-direction: column; gap: 16px; }
.mp-quote { margin: 0; padding: 16px 18px 14px 22px; border-left: 3px solid var(--pc); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; }
.mp-quote p { font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0 0 8px; }
.mp-quote footer { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 960px){ .mp-cols { grid-template-columns: 1fr; } .mp-snap-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px){ .mp-list--row { grid-template-columns: 1fr; } }
/* Programs page keeps only the streams + 2025 snapshot; the rest lives on mentorship.html */
.mp-snap-grid--solo { grid-template-columns: 1fr; }
.mp-snap-grid--solo .mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; }
.mp-snap-grid--solo .mp-stat { border-bottom: 0; padding-bottom: 0; }
.mentor-more { margin: 0; }
@media (max-width: 760px){ .mp-snap-grid--solo .mp-stats { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE PASS, OCT 26 2026
   ============================================================ */
/* Program stats on phones: bigger number with its label to the right,
   not a small number stranded on the left */
@media (max-width: 700px){
  .prog-stats { flex-direction: column; gap: 18px; }
  .pstat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
  .pstat b { font-size: clamp(54px, 17vw, 72px); line-height: .9; }
  .pstat b::after { display: none; }
  .pstat span { max-width: none; font-size: 15px; border-left: 3px solid var(--pc); padding-left: 14px; }
  .prog--dark .pstat span { border-color: var(--brand-bright); }
}
/* 2025 snapshot stats: the three-up row collapses to one column on phones */
.mp-stats--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; }
.mp-stats--row .mp-stat { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 760px){ .mp-stats--row { grid-template-columns: 1fr; gap: 14px; } .mp-stats--row .mp-stat { border-bottom: 1px solid var(--line); padding-bottom: 12px; } .mp-stats--row .mp-stat:last-child { border-bottom: 0; } }
@media (max-width: 640px){ .btn-apply { white-space: normal; text-align: center; } }

/* Client meeting Oct 26 2026, section 4 */
.pg-powered { font: 700 italic clamp(17px, 1.6vw, 22px) 'Space Grotesk', sans-serif; letter-spacing: .04em; text-transform: none; color: var(--brand-bright); margin: 0 0 18px; }
.mentor-more .btn.mentor-more-btn { display: flex; width: 100%; box-sizing: border-box; justify-content: center; font-size: clamp(15px, 1.3vw, 18px); padding: 20px 24px; letter-spacing: .1em; }
/* Program Archives: two tiles per row (Talissa, Oct 27) */
.arch-grid { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
.arch-media { aspect-ratio: 16 / 10; }
@media (max-width: 560px){ .arch-grid { grid-template-columns: 1fr; } }