/* ============================================================
   PROGRAMS PAGE — built on the v2 design system (tokens + components)
   ============================================================ */

/* ---- HERO (blue) ---- */
.phero { position: relative; z-index: 2; padding: clamp(200px, 26vh, 300px) 0 clamp(80px, 12vh, 140px); }
.phero .overline { display: block; margin: 0 0 20px; color: var(--b300); }
.phero-title {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(40px, 6.5vw, 92px); line-height: 0.98; letter-spacing: -0.01em;
  color: #fff; margin: 0; max-width: none;
}
/* keep each explicit line on one row above mobile; mobile wraps naturally */
@media (min-width: 680px) { .phero-title .word { white-space: nowrap; } }
.phero-sub {
  font-family: var(--body); font-size: var(--fs-lead); line-height: 1.5;
  color: rgba(255, 255, 255, 0.82); margin: clamp(20px, 3vh, 32px) 0 0; max-width: 58ch;
}
.phero-cta { margin-top: clamp(30px, 4.5vh, 48px); }
.phero-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(40px, 6vh, 72px); padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label);
  letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85);
}

/* section headers use the shared --fs-h1 token (same as homepage sections) */
.ways-head .display-head,
.chal-lead .display-head,
.includes-head .display-head { font-size: var(--fs-h1); }

/* ---- WAYS TO WORK (white) ---- */
.ways { position: relative; z-index: 2; background: #fff; color: var(--n900); padding: clamp(80px, 12vh, 150px) 0; }
.ways-head { margin-bottom: clamp(48px, 7vh, 88px); }
.ways-head .overline { display: block; margin: 0 0 16px; color: var(--n500); }
.ways-head .display-head { color: var(--n900); }
.ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.way-card {
  position: relative; overflow: hidden; z-index: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--n300); padding: clamp(24px, 2.5vw, 36px);
  min-height: clamp(220px, 20vw, 280px); text-decoration: none;
  transition: border-color 0.25s ease;
}
.way-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--n900); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.way-card:hover { border-color: var(--n900); }
.way-card:hover::before { transform: scaleY(1); }
.way-num { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--n500); transition: color 0.25s ease; }
.way-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h2); color: var(--n900); margin: 14px 0 12px; transition: color 0.25s ease; }
.way-desc { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.55; color: var(--n600); margin: 0 0 18px; max-width: 34ch; transition: color 0.25s ease; }
.way-learn { margin-top: auto; font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--n500); display: inline-flex; align-items: center; gap: 7px; transition: color 0.25s ease; }
.way-learn .arrow { transition: transform 0.3s ease; }
.way-card:hover .way-num,
.way-card:hover .way-title,
.way-card:hover .way-learn { color: #fff; }
.way-card:hover .way-desc { color: rgba(255, 255, 255, 0.92); }
.way-card:hover .way-learn .arrow { transform: translateX(4px); }

/* ---- WHO WE WORK WITH (white — continues the Ways to Work surface) ---- */
.challengers { position: relative; z-index: 2; background: #fff; color: var(--n900); padding: clamp(64px, 9vh, 120px) 0 clamp(80px, 12vh, 150px); }
.chal-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.chal-lead .overline { display: block; margin: 0 0 16px; color: var(--n500); }
.chal-lead .display-head { color: var(--n900); max-width: 18ch; }
.chal-body { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.55; color: var(--n600); margin: clamp(20px, 3vh, 32px) 0 0; max-width: 48ch; }
.chal-areas { padding-top: 8px; }
.chal-areas .overline { display: block; margin: 0 0 24px; color: var(--n500); }
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chip {
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.04em;
  color: var(--n700); border: 1px solid var(--n300); padding: 9px 14px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.area-chip:hover { color: var(--n900); border-color: var(--n900); background: var(--n100); }
/* Seed -> Scale: measuring-ruler — a continuous line with minor ticks and 4
   labeled majors, so it reads as full, even coverage across every stage
   (the old gradient faded out at Seed, which read as "we only do Scale") */
.spectrum { margin-top: clamp(28px, 4vh, 44px); max-width: 540px; }
.spectrum-cap { display: block; font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--n500); margin-bottom: 20px; }
.spectrum-ruler { position: relative; height: 26px; border-bottom: 1.5px solid var(--n900); }
.spectrum-ruler i { position: absolute; bottom: 0; }
.spectrum-ruler .minor { width: 1px; height: 6px; background: var(--n300); }
.spectrum-ruler .major { width: 1.5px; height: 14px; background: var(--n900); }
.spectrum-labels { display: flex; justify-content: space-between; margin-top: 12px; }
.spectrum-labels span { font-family: var(--mono); font-weight: 400; text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--n700); }

/* ---- WHAT EVERY PROGRAM INCLUDES (dark) ---- */
.includes { position: relative; z-index: 2; background: var(--n900); padding: clamp(80px, 12vh, 150px) 0; }
.includes-head { margin-bottom: clamp(48px, 7vh, 88px); }
.includes-head .overline { display: block; margin: 0 0 16px; color: var(--n500); }
.includes-head .display-head { color: #fff; max-width: 22ch; }
.inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.inc-card { border: 1px solid rgba(255, 255, 255, 0.16); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; min-height: clamp(220px, 22vw, 280px); }
.inc-num { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--n500); }
.inc-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h2); color: #fff; margin: 16px 0; }
.inc-desc { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.55; color: var(--n400); margin: 0; }

/* proof: stats + marquee inside the dark section */
.inc-proof { margin-top: clamp(64px, 9vh, 110px); }
.inc-proof .stats-grid { margin-bottom: clamp(48px, 7vh, 80px); }
/* marquee edge-fade matches the dark surface here (default fades to blue) */
.includes .marquee::before { background: linear-gradient(to right, var(--n900), rgba(23, 24, 24, 0)); }
.includes .marquee::after  { background: linear-gradient(to left,  var(--n900), rgba(23, 24, 24, 0)); }

/* ---- CTA BAND (blue) ---- */
.cta-band { position: relative; z-index: 2; padding: clamp(80px, 13vh, 160px) 0; }
.cta-band-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h1); line-height: 1.04; color: #fff; margin: 0; white-space: nowrap; }
.cta-band-sub { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin: 20px 0 0; max-width: 48ch; }
/* interactive program chips: white surface fills with each program's accent on hover */
.cta-progs { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(24px, 3.5vh, 36px) 0; }
.cta-prog {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.04em;
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); padding: 9px 14px; cursor: url("cursors/arrow.png") 0 0, default;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cta-prog::before { content: ''; width: 8px; height: 8px; flex: 0 0 auto; background: var(--accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.cta-prog:hover { background: #fff; color: var(--accent); border-color: #fff; }
.cta-band-btn {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.06em;
  color: #fff; border: 1px solid #fff; padding: 16px 32px; text-decoration: none;
  transition: color 0.25s ease;
}
.cta-band-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cta-band-btn:hover { color: var(--blue); }
.cta-band-btn:hover::before { transform: scaleY(1); }
.cta-band-btn .arrow { transition: transform 0.3s ease; }
.cta-band-btn:hover .arrow { transform: translateX(4px); }

/* ---- ALL PROGRAMS: big standalone cards (dark) ---- */
.programs-head { margin-bottom: clamp(40px, 6vh, 72px); }
.prog-cards { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.pcard {
  --accent: var(--blue);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(32px, 4vw, 60px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  transition: border-color 0.45s ease, background 0.45s ease;
}
.pcard:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }

.pcard-meta { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 2.5vh, 26px); }
.pcard-dot { width: 10px; height: 10px; flex: 0 0 auto; background: var(--accent); }
.pcard-num { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--n500); }
.pcard-name {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(36px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.02em;
  color: #fff; margin: 0; transition: color 0.4s ease;
}
.pcard:hover .pcard-name { color: var(--accent); }
.pcard-desc { font-family: var(--body); font-size: var(--fs-md); line-height: 1.55; color: var(--n400); margin: clamp(14px, 2vh, 22px) 0 0; max-width: 52ch; }
.pcard-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(18px, 2.5vh, 26px) 0 0; padding: 0; }
.pcard-tags li {
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.06em;
  color: var(--n400); border: 1px solid rgba(255, 255, 255, 0.16); padding: 6px 11px;
}
.pcard-cta {
  flex: 0 0 auto; align-self: end; white-space: nowrap;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.08em;
  color: #fff; display: inline-flex; align-items: center; gap: 9px; transition: color 0.35s ease;
}
.pcard-cta .arrow { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard:hover .pcard-cta { color: var(--accent); }
.pcard:hover .pcard-cta .arrow { transform: translateX(5px); }

/* accent corner brackets fade in on hover */
.pcard-brk { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pcard-brk i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--accent); opacity: 0; transition: opacity 0.4s ease; }
.pcard:hover .pcard-brk i { opacity: 0.85; }
.pcard-brk .tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.pcard-brk .tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.pcard-brk .bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.pcard-brk .br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .ways-grid { grid-template-columns: 1fr; gap: 32px; }
  .chal-grid { grid-template-columns: 1fr; gap: 40px; }
  .inc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pcard { grid-template-columns: 1fr; align-items: start; gap: clamp(22px, 5vw, 30px); }
  .pcard-cta { align-self: start; }
}
@media (max-width: 560px) {
  .cta-band-title { white-space: normal; }
}