/* ==========================================================================
   Newton Box — stylesheet
   Authored from scratch for the rebuild. No framework dependency.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------ */
:root {
  --navy-900: #05053e;
  --navy-800: #081b34;
  --navy-700: #131b48;
  --navy-600: #151b54;
  --blue-700: #113d78;
  --blue-500: #2485c4;
  --orange:   #f89722;
  --orange-d: #dd7f0d;
  --green:    #4caf50;

  /* Accessible companions to the brand orange. The orange fill stays; only the
     ink on it changes. White on --orange is 2.22:1 and fails WCAG 1.4.3 badly,
     which mattered most on the employment-verification call to action.
       --on-orange  #26160a on --orange   = 7.86:1  (already proven by .notice)
       --on-orange  #26160a on --orange-d = 6.27:1  (hover state)
       --orange-ink #8a4d00 on #ffffff    = 6.68:1  (orange *text* on light) */
  --on-orange:  #26160a;
  --orange-ink: #8a4d00;

  --ink:      #16213a;
  --ink-soft: #56607a;
  --line:     #e2e6f0;
  --surface:  #ffffff;
  --surface-2:#f8f9fe;

  --radius:   14px;
  --radius-s: 8px;
  --shadow:   0 10px 30px rgba(5, 5, 62, .08);
  --shadow-l: 0 18px 48px rgba(5, 5, 62, .14);

  --wrap:     1180px;
  --gap:      28px;

  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top keeps a fragment target (and a focused control scrolled to)
   clear of the 66px sticky nav — WCAG 2.2 SC 2.4.11 Focus Not Obscured. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
img { height: auto; }
/* --blue-500 is 4.02:1 on white — short of the 4.5:1 body-text threshold. It is
   kept for large headings (>=24px, where 3:1 applies) but inline links use
   --blue-700, which is 10.71:1 on #fff and 10.19:1 on --surface-2. */
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1em; }
/* The focus indicator is defined near the end of this file, not here — several
   components declare their own box-shadow later and would otherwise win on
   equal specificity and erase half the ring. See "Focus indicator" below. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Layout primitives -------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.section { padding: 72px 0; }
.section--tight { padding: 56px 0; }
.center { text-align: center; }

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: var(--on-orange); font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Section heading with the little rule underneath, as on the original */
.sec-head { text-align: center; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); color: var(--navy-900); }
.sec-head h2 em { font-style: normal; color: var(--blue-500); }
.sec-head p { color: var(--ink-soft); max-width: 720px; margin-inline: auto; }
.sec-head .rule { margin: 14px auto 18px; display: block; width: 166px; }
.sec-head--light h2 { color: #fff; }
.sec-head--light p { color: rgba(255, 255, 255, .78); }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border: 0; border-radius: 999px;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
/* The verification CTA is the most important control on the site, so it keeps the
   full orange fill and the glow. Only the label changes: #26160a rather than #fff
   takes it from 2.22:1 to 7.86:1. The inset hairline gives the pill a defined edge
   against --surface-2 now that the label no longer supplies the contrast. */
.btn--primary {
  background: var(--orange); color: var(--on-orange);
  box-shadow: inset 0 0 0 1px rgba(38, 22, 10, .28), 0 8px 20px rgba(248, 151, 34, .38);
}
.btn--primary:hover { background: var(--orange-d); color: var(--on-orange); }
.btn--ghost { background: transparent; color: var(--blue-700); border: 2px solid var(--blue-700); }
.btn--ghost:hover { background: var(--blue-700); color: #fff; }
.btn--sm { padding: 9px 18px; font-size: .85rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--navy-900); color: rgba(255, 255, 255, .85);
  font-size: .8rem; padding: 7px 0;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; justify-content: space-between; }
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.topbar__contact span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Announcement bar --------------------------------------------- */
/* The company is closed. That has to be the first thing anyone reads, on every
   page — a visitor who thinks this is a trading business has been misled. */
.notice { background: var(--orange); color: #26160a; }
.notice .wrap { padding-block: 11px; }
.notice p { margin: 0; font-size: .92rem; line-height: 1.5; }
.notice strong { font-weight: 900; }
.notice a { color: #26160a; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.notice a:hover { color: #000; }

.nav { background: var(--navy-600); position: sticky; top: 0; z-index: 60; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.nav__logo img { width: 160px; }
.nav__toggle {
  display: none; background: none; border: 0; padding: 8px;
  width: 44px; height: 44px; color: #fff;
}
.nav__toggle span {
  display: block; height: 2px; background: currentColor; margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__menu a {
  display: block; padding: 10px 14px; border-radius: var(--radius-s);
  color: rgba(255, 255, 255, .82); font-size: .9rem; font-weight: 500;
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.nav__menu a.nav__cta {
  background: var(--orange); color: var(--on-orange); font-weight: 700; margin-left: 6px;
}
.nav__menu a.nav__cta:hover { background: var(--orange-d); color: var(--on-orange); }

@media (max-width: 980px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--navy-600); padding: 8px 16px 20px; gap: 0;
    box-shadow: var(--shadow-l);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { padding: 13px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* landing-bg.png is not the dark canvas the white hero copy assumes: the region
   behind the eyebrow and headline is 82% #6494d2 (a light cornflower blue) with
   some pure-white pixels. Measured against it, .hero__eyebrow was 1.41:1 and
   .hero__lead 2.74:1 — both well below AA. A navy scrim over the artwork is the
   only CSS-only fix: making the text white is not enough (white on #6494d2 is
   3.13:1, still short of 4.5:1 for the 1.02rem lead).
   The binding constraint is the small bold orange eyebrow over a *white* pixel;
   at .80 alpha that lands at 4.98:1, so .80 is the floor at the light end. */
.hero {
  background-color: var(--navy-900);
  background-image:
    linear-gradient(105deg, rgba(5, 5, 62, .94) 0%, rgba(5, 5, 62, .86) 50%, rgba(5, 5, 62, .80) 100%),
    url("../assets/images/landing-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff; padding: 60px 0 70px; overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px; align-items: center;
}
.hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: .15em; }

/* Rotating keyword — one visible line, no layout shift */
.rotator { height: 1.35em; overflow: hidden; margin-bottom: 22px; }
.rotator__list { padding: 0; margin: 0; animation: rotate-words 12s cubic-bezier(.85, 0, .15, 1) infinite; }
.rotator__list li {
  height: 1.35em; line-height: 1.35em;
  font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; color: var(--orange);
}
@keyframes rotate-words {
  0%, 20%   { transform: translateY(0); }
  25%, 45%  { transform: translateY(-1.35em); }
  50%, 70%  { transform: translateY(-2.7em); }
  75%, 95%  { transform: translateY(-4.05em); }
  100%      { transform: translateY(-5.4em); }
}
@media (prefers-reduced-motion: reduce) {
  .rotator { height: auto; }
  .rotator__list { animation: none; }
  .rotator__list li { display: inline; font-size: 1.4rem; }
  .rotator__list li::after { content: " · "; color: rgba(255,255,255,.5); }
  .rotator__list li:last-child::after { content: ""; }
}

.hero__eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange); font-weight: 700; margin-bottom: 14px;
}
.hero__lead { font-size: 1.02rem; color: rgba(255, 255, 255, .9); max-width: 46ch; }
.hero__grade { font-weight: 700; color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__media video { width: 100%; border-radius: var(--radius); }
.btn--onDark { background: rgba(255, 255, 255, .12); color: #fff; border: 2px solid rgba(255, 255, 255, .45); }
.btn--onDark:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .rotator__list li { text-align: center; }
}

/* ==========================================================================
   Team tribute — the emotional centre of the page. Given room to breathe.
   ========================================================================== */
.team-tribute { background: var(--surface-2); }
.tribute { max-width: 760px; margin-inline: auto; }
.tribute p { font-size: 1.05rem; line-height: 1.85; color: var(--ink); }
.tribute__lead { font-size: 1.28rem; line-height: 1.65; font-weight: 500; color: var(--navy-900); }
.tribute__pledge {
  background: #fff; border-left: 5px solid var(--orange);
  border-radius: var(--radius); padding: 24px 28px; margin-top: 30px;
  box-shadow: var(--shadow); font-weight: 500;
}
.tribute__sign { margin-top: 28px; text-align: center; }

/* ==========================================================================
   Free materials
   ========================================================================== */
.free { background: #fff; }
.price-was { text-decoration: line-through; color: var(--ink-soft); white-space: nowrap; font-weight: 500; }
.price-now { color: #2e7d32; font-weight: 900; white-space: nowrap; }
.plan__price caption {
  caption-side: top; text-align: left; padding-bottom: 8px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.plan__price thead th {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; text-align: right; padding-bottom: 6px;
}
.plan__price thead th:first-child { text-align: left; }
.plan__price tbody td { text-align: right; }

.free__note {
  max-width: 820px; margin: 46px auto 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 32px;
}
.free__note h3 { font-size: 1.1rem; color: var(--navy-900); }
.free__note ul { list-style: none; }
.free__note li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--ink-soft); }
.free__note li::before { content: "→"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.free__pricenote {
  margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}

/* ==========================================================================
   Self-hosted archive
   ========================================================================== */
.archive { background: var(--surface-2); }
.archive .video-card { aspect-ratio: 16 / 9; background-color: var(--navy-700); }

/* Artwork whose video is lost — shown as artwork, never wired to a guess. */
.orphan-card { max-width: 560px; margin: 48px auto 0; text-align: center; }
.orphan-card h3 {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px;
}
.quote-card--sm figcaption {
  padding: 14px 18px; font-size: .85rem; color: var(--ink-soft);
  background: #fff; text-align: left;
}

/* The quote is printed on the artwork; this repeats it as selectable text. */
.quote-card figcaption { padding: 18px 22px; background: var(--surface-2); text-align: left; }
.quote-card blockquote {
  margin: 0 0 8px; font-size: 1rem; line-height: 1.6;
  color: var(--navy-900); font-weight: 500;
}
.quote-card blockquote::before { content: "\201C"; }
.quote-card blockquote::after  { content: "\201D"; }
.quote-card cite { font-style: normal; font-size: .85rem; color: var(--ink-soft); }
.quote-card cite::before { content: "— "; }

.superstar__credit {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--ink-soft); font-style: italic;
}
.incubated__note { font-size: .9rem; color: rgba(255, 255, 255, .72); }
.teachers__note {
  margin-top: 22px; padding: 16px 20px; background: rgba(36, 133, 196, .07);
  border-radius: var(--radius-s); font-size: .92rem;
}

/* ==========================================================================
   What is Newton Box
   ========================================================================== */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 46px; align-items: center;
}
.about h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); color: var(--navy-900); }
.about h2 em { font-style: normal; color: var(--blue-500); }
/* Orange body text on the white .about background was 2.22:1; --orange-ink keeps
   the warm accent at 6.68:1. */
.about__tag { color: var(--orange-ink); font-weight: 700; margin-bottom: 18px; }
.about__list li {
  position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--ink-soft);
}
.about__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px rgba(248, 151, 34, .2);
}
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: 30px; } }

/* Click-to-load video poster (facade) — avoids loading YouTube until asked */
.video-card {
  position: relative; display: block; width: 100%;
  border: 0; padding: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-700) center/cover no-repeat;
  box-shadow: var(--shadow-l); cursor: pointer;
  aspect-ratio: 16 / 9;
}
.video-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,62,0) 45%, rgba(5,5,62,.55) 100%);
  transition: background .25s ease;
}
.video-card:hover::after { background: linear-gradient(180deg, rgba(5,5,62,.15) 0%, rgba(5,5,62,.6) 100%); }
.video-card__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid; place-items: center;
  transition: transform .22s ease, background .22s ease;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}
/* The play triangle is a graphical object, so WCAG 1.4.11 wants 3:1 against its
   white disc. The brand orange manages only 2.22:1; this deeper shade reaches
   3.65:1 and still reads as orange. */
.video-card__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 22px solid #c96f00;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
/* The label is white text over an arbitrary photographic thumbnail. The card's
   ::after scrim alone bottoms out at rgba(5,5,62,.55), which over a worst-case
   white thumbnail is only 4.38:1. Giving the label its own backing puts the text
   band at >=.90 alpha (15.4:1 in the same worst case) regardless of the image. */
.video-card__label {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 16px 18px; color: #fff; font-weight: 500; font-size: .9rem;
  text-align: left; line-height: 1.4;
  background: linear-gradient(180deg, rgba(5, 5, 62, .55) 0%, rgba(5, 5, 62, .90) 30%, rgba(5, 5, 62, .94) 100%);
}

/* ==========================================================================
   Features ("What makes Newton Box Extraordinary")
   ========================================================================== */
/* The original ships this section's curve as a near-white PNG, which is a
   *divider* rather than a background — stretching it over the section wipes out
   the dark canvas the white text needs. The curve is drawn in CSS instead so it
   always meets the white section above cleanly, at any width. */
.features {
  position: relative;
  background: linear-gradient(160deg, var(--navy-600) 0%, var(--navy-900) 60%);
  color: #fff;
  padding-top: 130px;
}
.features::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 92px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C160,86 320,108 490,101 C720,92 960,4 1200,10 L1200,0 Z' fill='%23ffffff'/%3E%3C/svg%3E")
              top center / 100% 100% no-repeat;
  pointer-events: none;
}
.features__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px;
}
.feature {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius); padding: 28px 24px;
  backdrop-filter: blur(4px);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.feature:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .12); border-color: rgba(248, 151, 34, .5); }
.feature img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 16px; }
.feature h3 { font-size: 1.02rem; color: #fff; }
.feature p { font-size: .88rem; color: rgba(255, 255, 255, .74); margin: 0; }

/* ==========================================================================
   Journey timeline
   ========================================================================== */
.journey { background: var(--surface-2); }
.journey__img {
  width: 100%; border-radius: var(--radius);
}
.journey__scroll { overflow-x: auto; }
.journey__scroll img { min-width: 640px; }

/* ==========================================================================
   Curriculum & pricing
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.plan {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: var(--orange); }
.plan__head { padding: 26px 26px 20px; border-bottom: 1px solid var(--line); }
.plan__head h3 { font-size: 1.3rem; color: var(--navy-900); margin-bottom: 4px; }
.plan__sub { color: var(--blue-700); font-weight: 500; font-size: .95rem; margin: 0; }
.plan__hours {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  background: rgba(36, 133, 196, .1); color: var(--blue-700);
  padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700;
}
.plan__body { padding: 22px 26px; flex: 1; }
.plan__body h4 {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 8px;
}
.plan__topics { color: var(--ink-soft); font-size: .93rem; margin-bottom: 20px; }
.plan__cert {
  display: flex; align-items: center; gap: 10px;
  background: rgba(76, 175, 80, .1); color: #2e7d32;
  border-radius: var(--radius-s); padding: 11px 14px;
  font-size: .88rem; font-weight: 700;
}
.plan__cert::before { content: "★"; font-size: 1rem; }

.plan__price { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: .88rem; }
.plan__price th, .plan__price td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan__price th { font-weight: 500; color: var(--ink-soft); padding-right: 14px; }
.plan__price td { text-align: right; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.plan__price tr:last-child th, .plan__price tr:last-child td { border-bottom: 0; }

.plan__foot { padding: 0 26px 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.plan__foot .btn { flex: 1 1 130px; }

/* ==========================================================================
   Super stars (featured alumnus)
   ========================================================================== */
.superstars { background: rgba(219, 255, 252, .22); }
.superstar__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 46px; align-items: center;
}
.superstar__news { position: relative; }
.superstar__news img { border-radius: var(--radius); box-shadow: var(--shadow-l); margin-inline: auto; }
.superstar__date {
  display: inline-block; background: var(--orange); color: var(--on-orange);
  padding: 5px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; margin-bottom: 14px;
}
.superstar h3 { font-size: 1.9rem; color: var(--navy-900); margin-bottom: 6px; }
.superstar__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.superstar__meta span {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; font-size: .82rem; font-weight: 700; color: var(--blue-700);
}
.superstar__quote {
  display: flex; gap: 18px; align-items: center;
  background: #fff; border-left: 5px solid var(--orange);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.superstar__quote img { width: 88px; flex: none; }
.superstar__quote p { margin: 0; font-style: italic; font-weight: 500; color: var(--navy-900); }
.superstar__list li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-soft); }
.superstar__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}
@media (max-width: 900px) { .superstar__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Awards ------------------------------------------------------- */
.awards { background: var(--navy-800); color: #fff; }
.awards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 30px; align-items: center; justify-items: center; }
.awards__grid img { max-width: 250px; }

/* ---------- Incubation banner -------------------------------------------- */
.incubated { background: var(--navy-600); color: #fff; }
.incubated__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px; align-items: center;
}
.incubated__grid img.photo { border-radius: var(--radius); box-shadow: var(--shadow-l); }
.incubated h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.incubated .badge { width: 130px; margin-top: 18px; }
@media (max-width: 900px) { .incubated__grid { grid-template-columns: 1fr; text-align: center; } .incubated .badge { margin-inline: auto; } }

/* ==========================================================================
   Video grids (student projects, leaders, testimonials)
   ========================================================================== */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.video-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Hidden overflow items revealed by "Show more" */
.video-grid .is-hidden { display: none; }

.projects { background: var(--surface-2); }
.leaders { background: #fff; }

/* Quote cards carry their text inside the artwork, so no overlay is drawn. */
.quote-card { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-l); }
.quote-card img { width: 100%; }

/* Posters that already have the message printed on them: keep the label for
   assistive tech, drop it visually so the words are not rendered twice. */
.video-card--titled .video-card__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.video-card--titled::after { background: linear-gradient(180deg, rgba(5,5,62,0) 60%, rgba(5,5,62,.25) 100%); }

/* The designed testimonial posters are 3:2, so the cards match that ratio —
   at 16:9 the wording printed along the bottom of each poster gets cropped. */
.testimonials { background: var(--surface-2); }
.testimonials .video-card { aspect-ratio: 3 / 2; }

.more-row { margin-top: 34px; text-align: center; }

/* ---------- Gallery ------------------------------------------------------ */
.gallery { background: var(--navy-700); color: #fff; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.gallery__grid img {
  width: 100%; aspect-ratio: 7 / 5; object-fit: cover;
  border-radius: var(--radius-s); transition: transform .25s ease, filter .25s ease;
}
.gallery__grid img:hover { transform: scale(1.04); filter: brightness(1.08); }

/* ==========================================================================
   Teachers / recruitment process
   ========================================================================== */
.teachers__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 50px; align-items: center;
}
.teachers h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); color: var(--navy-900); }
.teachers h2 em { font-style: normal; color: var(--blue-500); }
.steps { counter-reset: step; }
.step { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.step:last-child { border-bottom: 0; }
.step__icon {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(36, 133, 196, .1); display: grid; place-items: center;
}
.step__icon img { width: 26px; height: 26px; object-fit: contain; }
.step h3 { font-size: 1.02rem; color: var(--navy-900); margin-bottom: 3px; }
.step p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 900px) { .teachers__grid { grid-template-columns: 1fr; gap: 30px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--surface-2); }
.faq__tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px;
}
.faq__tab {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 22px; font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  transition: all .2s ease;
}
.faq__tab:hover { border-color: var(--blue-500); color: var(--blue-700); }
.faq__tab[aria-selected="true"] {
  background: var(--blue-700); border-color: var(--blue-700); color: #fff; font-weight: 700;
}

.faq__panel { max-width: 860px; margin-inline: auto; }
.faq__panel[hidden] { display: none; }

.acc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: none; border: 0; text-align: left;
  padding: 18px 22px; font-size: .98rem; font-weight: 500; color: var(--navy-900);
}
.acc__btn:hover { background: rgba(36, 133, 196, .04); }
.acc__btn .sign {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  /* The +/− is the only visual signal of open/closed state. --orange-d on this
     tint was 2.47:1; --orange-ink is 5.92:1. */
  background: rgba(248, 151, 34, .15); color: var(--orange-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; line-height: 1;
  transition: transform .25s ease;
}
.acc__btn[aria-expanded="true"] { color: var(--blue-700); }
.acc__btn[aria-expanded="true"] .sign { transform: rotate(45deg); }
.acc__panel { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.acc__panel.is-open { padding: 0 22px 20px; max-height: 900px; }
.acc__panel p { margin: 0 0 .7em; color: var(--ink-soft); font-size: .93rem; }
.acc__panel ul { list-style: disc; padding-left: 20px; color: var(--ink-soft); font-size: .93rem; }
.acc__panel li { margin-bottom: 6px; }
.acc__panel address { font-style: normal; color: var(--navy-900); font-weight: 500; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); padding: 56px 0 0; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: #fff; }
.footer li { margin-bottom: 9px; }
.footer__logo { width: 170px; margin-bottom: 16px; }
.footer address { font-style: normal; line-height: 1.8; }
.footer__bottom {
  margin-top: 44px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: .82rem; color: rgba(255, 255, 255, .55);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Video lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 5, 62, .93);
  display: none; place-items: center; padding: 24px;
}
.lightbox.is-open { display: grid; }
.lightbox__inner { width: min(1000px, 100%); }
.lightbox__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-l);
}
.lightbox__frame iframe, .lightbox__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; border: 0;
  font-size: 1.6rem; line-height: 1;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .28); }
.lightbox__title { color: #fff; margin: 16px 2px 0; font-size: .95rem; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   Legal / content pages
   ========================================================================== */
.page-head { background: var(--navy-600); color: #fff; padding: 54px 0; }
.page-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; }
.page-head p { margin: 8px 0 0; color: rgba(255, 255, 255, .75); font-size: .92rem; }
.prose { max-width: 820px; margin-inline: auto; padding: 56px 20px 72px; }
.prose h2 { font-size: 1.3rem; color: var(--navy-900); margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; color: var(--blue-700); margin-top: 1.6em; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose address { font-style: normal; color: var(--navy-900); font-weight: 500; }
.note {
  background: rgba(248, 151, 34, .1); border-left: 4px solid var(--orange);
  border-radius: var(--radius-s); padding: 16px 20px; margin-bottom: 32px; font-size: .9rem;
}
.note p:last-child { margin-bottom: 0; }
.note ul { margin-bottom: 0; }

/* ==========================================================================
   Employment verification page
   ========================================================================== */
.prose--wide { max-width: 900px; }

.verify-intro {
  background: var(--surface-2); border-left: 5px solid var(--orange);
  border-radius: var(--radius); padding: 26px 30px; margin-bottom: 40px;
}
.verify-intro p:last-child { margin-bottom: 0; }

/* The company record table is the part a screening agency reads — and may print. */
.record { width: 100%; border-collapse: collapse; margin-bottom: 30px; font-size: .93rem; }
.record th, .record td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.record th {
  width: 34%; font-weight: 700; color: var(--navy-900);
  background: var(--surface-2);
}
.record td { color: var(--ink); }
.record__note { display: inline-block; margin-top: 4px; font-size: .82rem; color: var(--ink-soft); }

/* Below ~480px a two-column table cannot shrink further without either
   overflowing or shredding the values onto one word per line. Stack each row
   into label-above-value instead — a verifier may well be reading this on a
   phone, and side-scrolling a company record is a poor way to check a fact. */
@media (max-width: 480px) {
  .record, .record tbody, .record tr, .record th, .record td { display: block; width: auto; }
  .record tr { border-bottom: 1px solid var(--line); padding: 4px 0 10px; }
  .record tr:last-child { border-bottom: 0; }
  .record th {
    background: none; padding: 10px 0 2px;
    font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-soft); border-bottom: 0;
  }
  .record td { padding: 0; border-bottom: 0; font-size: .95rem; }
}

/* Deliberately loud: these must not reach production unfilled. */
.todo {
  display: inline-block; background: #ffe8b3; color: #6b4a00;
  border: 1px dashed #b58100; border-radius: 4px;
  padding: 2px 9px; font-size: .85em; font-weight: 700;
}

.steps-list { padding-left: 22px; margin-bottom: 1.4em; }
.steps-list li { margin-bottom: 10px; color: var(--ink-soft); }

.sample {
  background: var(--navy-900); color: #e8ecf7;
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 34px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.7;
  overflow-x: auto; white-space: pre;
}

.verify-close {
  margin-top: 44px; padding: 26px 30px;
  background: var(--navy-900); color: #fff; border-radius: var(--radius);
}
.verify-close p { margin: 0; color: rgba(255, 255, 255, .92); font-size: 1.02rem; line-height: 1.8; }

/* ==========================================================================
   Focus indicator
   --------------------------------------------------------------------------
   Deliberately the last non-print block in the file. `:focus-visible` has the
   same specificity as a single class, so declaring it up in the reset let any
   later component box-shadow (.btn--primary, .video-card) silently delete the
   inner band. Declaring it here means it always wins.

   The site has both near-white and deep-navy sections, so a single-colour ring
   cannot reach 3:1 against everything adjacent (SC 1.4.11). The old ring was
   3px --orange: 8.60:1 on --navy-900 but only 2.22:1 on white. This is a
   two-tone ring instead — an orange band 0–2px out, a navy band 2–4px out:

     on white / --surface-2 : navy vs #fff        = 19.13:1  (visible)
     on --navy-900 / -600   : orange vs navy      =  8.60:1  (visible)
     between the two bands  : orange vs navy      =  8.60:1  (bands separable)

   so whichever section the control sits in, at least one band clears 3:1
   against every colour it touches.
   ========================================================================== */
/* No border-radius here. The old rule set one, which was harmless while this
   block sat in the reset above .btn — but now that it is declared last it would
   win, and every 999px pill would snap to a 4px box the moment it took keyboard
   focus. Outlines and box-shadows already follow the element's own radius. */
:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--orange);
}

/* Controls whose own fill is --orange: the orange band would disappear into
   them, and on the navy nav the navy band disappears too. A white inner band
   is 19.13:1 against the navy outer band, so the ring stays legible on the
   orange CTA wherever it appears. */
.skip-link:focus-visible,
.btn--primary:focus-visible,
.nav__menu a.nav__cta:focus-visible,
.notice a:focus-visible {
  box-shadow: 0 0 0 2px #fff;
}

/* .acc has overflow:hidden to clip its rounded corners, and .acc__btn fills it
   edge to edge — an outward ring on the button is clipped away entirely. Draw
   the same two bands inward instead: orange 0–2px in, navy 2–4px in. */
.acc__btn:focus-visible {
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px var(--orange);
}

/* ==========================================================================
   Print — a verifier may print the company record as evidence for a file.
   ========================================================================== */
@media print {
  @page { margin: 15mm; }

  /* ---- Navigation and interactive furniture: nothing to click on paper ---- */
  .topbar, .notice, .nav, .skip-link, .footer, .lightbox,
  .more-row,                 /* the "Show more" button */
  .faq__tabs,                /* every panel is forced open below, so the tabs are noise */
  .hero__media,              /* an autoplaying <video> prints as a blank or frozen box */
  .video-card__play,         /* the play chrome on a card that is now just a line of text */
  .acc__btn .sign            /* the +/- indicator, meaningless once all panels are open */
  { display: none !important; }

  body { color: #000; background: #fff; font-size: 11pt; }
  .section, .section--tight { padding: 14pt 0; }
  .wrap { max-width: none; padding-inline: 0; }

  /* ---- Dark panels ------------------------------------------------------- */
  /* .hero, .features, .awards, .gallery and .incubated are white-on-navy on
     screen. Browsers drop background colours in print by default, so left alone
     these render white text on white paper; with "background graphics" enabled
     they instead flood the page with ink. Flatten both failure modes. */
  .hero, .features, .awards, .gallery, .incubated,
  .team-tribute, .archive, .projects, .testimonials, .journey, .faq, .superstars, .free {
    background: none !important;
    color: #000 !important;
    overflow: visible !important;
  }
  .features { padding-top: 14pt !important; }
  .features::before { display: none !important; }      /* the white SVG divider curve */
  .feature {
    background: none !important; border: 1px solid #999 !important;
    backdrop-filter: none !important; padding: 8pt 10pt;
  }
  .feature h3, .feature p,
  .hero h1, .hero__eyebrow, .hero__lead, .hero__grade,
  .incubated h2, .incubated__note,
  .sec-head--light h2, .sec-head--light p { color: #000 !important; }
  .page-head { background: none; color: #000; padding: 0 0 12pt; border-bottom: 2px solid #000; }
  .page-head h1 { color: #000; }
  .page-head p { color: #333; }

  /* ---- Tinted blocks and pills ------------------------------------------- */
  .tribute__pledge, .superstar__quote, .free__note, .teachers__note,
  .plan, .plan__cert, .plan__hours, .step__icon, .acc, .faq__tab,
  .superstar__date, .quote-card--sm figcaption {
    background: none !important; box-shadow: none !important; color: #000 !important;
  }
  .superstar__date, .plan__hours { border: 1px solid #666 !important; }
  .btn {
    background: none !important; color: #000 !important;
    border: 1px solid #666 !important; box-shadow: none !important;
    padding: 4pt 8pt !important; transform: none !important;
  }

  /* ---- FAQ: the answers are the point, and on screen they are collapsed --- */
  /* Only one of the four tab panels is visible at a time, and every accordion
     inside it is clipped to max-height:0 — so today the homepage FAQ prints as a
     column of empty boxes. Reveal all four panels and every answer within them. */
  .faq__panel, .faq__panel[hidden] { display: block !important; max-width: none; }
  .acc__panel {
    max-height: none !important; overflow: visible !important;
    padding: 0 12pt 10pt !important;
  }
  .acc__panel p, .acc__panel li, .acc__panel address { color: #000 !important; }

  /* ---- Video cards ------------------------------------------------------- */
  /* These are click-to-load facades: a background-image poster behind a play
     button, with the real record — the project label — overlaid on top. On paper
     the poster does not print and the button does nothing, so collapse each card
     to the one durable thing it carries, its label. The 19 cards held back by the
     "Show more" state are revealed so the full catalogue is on the printout. */
  .video-grid { display: block !important; }
  .video-grid .is-hidden { display: block !important; }
  .video-card {
    position: static !important; aspect-ratio: auto !important;
    width: auto !important; padding: 0 !important; overflow: visible !important;
    background: none !important; box-shadow: none !important; border: 0 !important;
    page-break-inside: avoid;
  }
  .video-card::after { display: none !important; }
  .video-card__label,
  .video-card--titled .video-card__label {
    position: static !important; width: auto !important; height: auto !important;
    clip: auto !important; margin: 0 !important; overflow: visible !important;
    white-space: normal !important;
    background: none !important; color: #000 !important;
    padding: 1pt 0 !important; font-size: 10pt; line-height: 1.35;
  }
  .video-card__label::before { content: "\25B8\00A0"; }

  /* ---- Wide / scrolling content that would otherwise be cut at the margin - */
  .journey__scroll { overflow: visible !important; }
  .journey__scroll img { min-width: 0 !important; }
  .sample { white-space: pre-wrap; word-break: break-word; }
  .gallery__grid img, .awards__grid img { max-height: 45mm; }

  /* ---- Verification page (unchanged behaviour, kept together) ------------- */
  .prose { max-width: none; padding: 12pt 0; }
  .prose p, .prose li { color: #000; }
  .verify-intro, .note, .verify-close { background: none; color: #000; border: 1px solid #999; }
  .verify-close p { color: #000; }
  .sample { background: none; color: #000; border: 1px solid #999; }
  .record th { background: none; }
  .record th, .record td { border-bottom: 1px solid #999; }
  .todo { border: 1px solid #000; background: none; color: #000; }

  /* ---- Links ------------------------------------------------------------- */
  a { color: #000; text-decoration: underline; }
  /* Make link targets visible on paper. Previously scoped to .prose, so every
     link on the homepage printed with no destination at all. */
  a[href^="http"]::after,
  a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  /* A button carries its own visible label, so a trailing http URL is clutter.
     Scoped to http deliberately: a mailto: must always print its address, since
     that address is the entire point of the verification page on paper. */
  .btn[href^="http"]::after,
  .video-card__label::after { content: none !important; }

  h2, h3 { page-break-after: avoid; }
  .record, .sample, .acc, .plan, .step, .feature { page-break-inside: avoid; }
}