/* AI Literacy Lab — learner platform stylesheet
   Self-contained. No external CSS. No JS. */

:root {
  --paper: #ffffff;
  --paper-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #4a4a4f;
  --accent: #065f46;
  --accent-ink: #ffffff;
  --mint: #34d399;
  --tint: #dceee5;
  --border: #e3e3e6;
  --deep: #101b16;
  --deep-ink: #f4f1ea;
  /* The soft brand-green edge that encloses a carousel rail, reused by the
     course cover so the page has ONE outline language. Defined here and
     consumed by homepage-carousel.css too -- the two were separate files with
     the same four values, which is how they drift. */
  --edge: 4px solid rgba(6, 95, 70, 0.24);
  --edge-radius: 16px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --radius: 12px;
  --wrap: 1140px;
  --pad-y: 96px;
  --pad-y-tight: 56px;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Layout */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--pad-y) 0;
}

.section--alt {
  background: var(--paper-alt);
}

.section--tight {
  padding: var(--pad-y-tight) 0;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--ink);
}

.section-lede {
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 40px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.brand-logo {
  height: 32px;
  width: auto;
}

.brand-word {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover { color: var(--accent); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-menu { display: none; }

.nav-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink);
}

.nav-menu summary::-webkit-details-marker { display: none; }

.nav-menu[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.nav-menu ul {
  position: absolute;
  right: 24px;
  margin: 0;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  list-style: none;
  min-width: 220px;
  box-shadow: var(--shadow);
}

.nav-menu li a {
  display: block;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}

.nav-menu li a:hover { background: var(--paper-alt); }

.nav-cta { margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-solid:hover { background: #044a36; border-color: #044a36; }

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

.btn-muted {
  background: #e5e7e6;
  color: var(--ink);
  border-color: #d2d5d3;
}
.btn-muted:hover { background: #d9dcda; border-color: #c6cac7; }

.btn-cta {
  background: var(--mint);
  color: var(--deep);
  border-color: var(--mint);
}
.btn-cta:hover { background: #2bbf8a; border-color: #2bbf8a; }

/* Hero */
.hero {
  padding: 72px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-copy .kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 16px;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.lede {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin: 0 0 28px;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent;
}

/* Trust strip */
.trust {
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--border);
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.trust-list li {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Course grid */
.course-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.course-thumb {
  background: var(--tint);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.course-thumb img {
  height: 56px;
  width: auto;
  opacity: 0.85;
}

.course-thumb--cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
}

.course-thumb--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.course-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Chips sit on ONE line under the cover image. .course-body is a flex COLUMN,
   so without this wrapper each chip becomes its own row. The three labels come
   to 362px at the default chip size against a 298px card, so the sizing below
   is scoped to this row only — chips elsewhere on the site keep their size. */
.course-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

.course-chips .chip {
  align-self: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 3px 7px;
}

.chip {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent);
}

.chip--muted {
  background: transparent;
  color: var(--ink-2);
  border: 1px dashed var(--border);
  text-transform: none;
  letter-spacing: 0.02em;
}

.chip--lifecycle {
  background: #dff7ed;
  color: #065f46;
}

.chip--recent {
  background: #dbeafe;
  color: #1d4ed8;
}

.course-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 4px 0 0;
  color: var(--ink);
}

.course-meta {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin: 0;
}

.course-desc {
  color: var(--ink-2);
  margin: 8px 0 0;
  flex: 1;
}

.course-link {
  margin-top: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.course-link:hover { text-decoration: underline; }

/* A course is a full-width panel while there is one of them: a ticker of one
   has arrows that do nothing. Side by side above 720px, stacked below, and
   the thumbnail is capped so a wide card does not become a poster. */
.course-card--wide {
  flex-direction: column;
}

/* 16:9, because that is what the cover art actually is (1536x864). The
   desktop rule used to say `aspect-ratio: auto`, which let the image stretch
   to the card's height -- 414x357, near enough square -- and `object-fit:
   cover` then quietly cropped the sides off every cover. align-self keeps it
   from stretching again when the body column is taller. */
/* THREE classes deliberately. `.course-card .course-thumb` further down sets
   `border-bottom: 1px solid var(--border)` -- the separator a normal module
   card needs under a flush thumbnail -- and at two classes each it has the
   same specificity as this rule and comes later, so it won the bottom edge:
   the cover rendered 3px green on three sides and 1px grey on the fourth,
   which reads as a missing line rather than a wrong one.

   The border also lives here rather than in the desktop media query, or
   there is no border at all below 720px. */
.course-card.course-card--wide .course-thumb {
  aspect-ratio: 16 / 9;
  border: var(--edge);
  border-radius: var(--edge-radius);
  box-sizing: border-box;
  overflow: hidden;
  margin: 16px;
}

@media (min-width: 720px) {
  .course-card--wide {
    flex-direction: row;
    align-items: stretch;
  }
  .course-card.course-card--wide .course-thumb {
    flex: 0 0 38%;
    margin: 16px 0 16px 16px;
    /* Centred, not top-aligned: the body column is taller than a 16:9 image,
       and pinning it to the top left the whitespace in one lump underneath.
       It still must not STRETCH, which is what align-self is doing here --
       the parent is align-items: stretch. */
    align-self: center;
  }
  .course-card--wide .course-body {
    flex: 1 1 auto;
  }
}

.course-card--placeholder {
  background: var(--paper);
  border-style: dashed;
}

.course-card--placeholder .course-thumb {
  opacity: 0.65;
}

.course-card--placeholder .course-thumb--cover { opacity: 1; }

/* Steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.step-number {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.step-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--ink);
}

.step-body {
  margin: 0;
  color: var(--ink-2);
}

/* Feature grid */
.feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.feature-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--ink);
}

.feature-body {
  margin: 0;
  color: var(--ink-2);
}

/* CTA band */
.cta-band {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 80px 0;
}

.cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
  color: var(--deep-ink);
}

.cta-sub {
  color: var(--deep-ink);
  opacity: 0.82;
  max-width: 52ch;
  margin: 0 0 12px;
}

/* Footer */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: 40px 0 32px;
  margin-top: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-logo {
  height: 28px;
  width: auto;
}

.footer-tag {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-links a:hover { color: var(--accent); }

.footer-copy {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9rem;
}

/* Contact page */
.contact-main { padding-top: 16px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}

.contact-copy h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ink);
}

.contact-email {
  margin-top: 12px;
}

.contact-aside {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.aside-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 16px;
  color: var(--ink);
}

.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aside-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aside-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 600;
}

.aside-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.aside-list a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 960px) {
  .hero { padding: 48px 0 64px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-stage { order: 2; }
  .lab-slot { aspect-ratio: 16 / 10; }
  :root { --pad-y: 56px; }
  .course-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
  }
}

/* Phone sizing. The desktop/burger nav swap deliberately does NOT live here
   any more — it moved to its own 900px rule at the end of this file when the
   nav grew a fifth link. Keeping both copies of the nav selectors invited a
   one-sided edit that would break the swap at one width and not the other. */
@media (max-width: 720px) {
  .brand-word { font-size: 1rem; }
  .header-inner { min-height: 64px; }
  .cta-band { padding: 56px 0; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .trust-list { justify-content: flex-start; }
  .trust-list li { width: 100%; text-align: center; }
}

/* ─── Social enterprise + who-makes-this (27 Jul 2026) ─────────────── */
.mission-grid,
.who-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;      /* the panel sits against the middle of the copy */
}
.who-grid { grid-template-columns: 0.75fr 1.25fr; }
.mission-lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 18px;
}
.mission-body { color: var(--ink); margin-bottom: 26px; }   /* match the lede above it */
.mission-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mission-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px;
  border-top: 1px solid var(--border);
}
.mission-list li:first-child { border-top: 0; }
.mission-list strong { display: block; font-size: 0.98rem; margin-bottom: 4px; }
.mission-list span { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.mission-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tint); position: relative; margin-top: 1px;
}
.mission-tick::before {
  content: ""; position: absolute;
  left: 7px; top: 4px; width: 6px; height: 11px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.who-portrait img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--border);
}
.who-body { color: var(--ink-2); margin-bottom: 22px; }
.who-creds { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.who-creds li {
  border-left: 3px solid var(--tint);
  padding-left: 14px;
}
.who-creds strong { display: block; font-size: 0.98rem; line-height: 1.4; }
.who-creds span { color: var(--ink-2); font-size: 0.9rem; }
.who-link { font-weight: 600; }

@media (max-width: 860px) {
  .mission-grid, .who-grid { grid-template-columns: 1fr; gap: 32px; }
  .who-portrait { max-width: 320px; }
}

.mission-copy .kicker,
.who-copy .kicker {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}

/* ─── Two paths + FAQ (27 Jul 2026) ──────────────────────────────── */
.path-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px;
}
.path-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 32px 30px; display: flex; flex-direction: column;
}
.path-card--community { background: var(--paper-alt); }
.path-title {
  font-family: var(--font-serif);
  font-size: 1.5rem; line-height: 1.25; margin-bottom: 14px;
}
.path-body { color: var(--ink-2); margin-bottom: 18px; }
.path-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.path-list li {
  position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--ink);
}
.path-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}
.path-card .btn { align-self: flex-start; margin-top: auto; }

.faq-list { display: grid; gap: 4px; margin-top: 30px; max-width: 860px; }
.faq-item {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px;
}
.faq-q { font-size: 1.08rem; margin-bottom: 8px; }
.faq-a { color: var(--ink-2); margin: 0; }

@media (max-width: 860px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ─── Narrow-screen safety (27 Jul 2026) ──────────────────────────────
   Grid items default to min-width:auto, so a long word in a large serif
   pushes its column wider than the container and eats the right-hand
   gutter. These three rules keep every side margin honest down to 320px. */
.hero-grid > *,
.path-grid > *,
.mission-grid > *,
.who-grid > *,
.course-grid > *,
.feature-grid > *,
.steps > * { min-width: 0; }

/* Base page title (1 Aug 2026). There was NO h1 rule: only .hero h1,
   .standards-h1, .contact-title, .business-title and .membership-title were
   styled, so ten pages -- Modules, Resources, Guides, Reports, Events,
   Videos, Lives, Newsletter, Catalogue, Learn -- fell through to the browser
   default and rendered their title in DM Sans bold 34px while the rest of
   the site used the serif display face. That is the inconsistency, and it is
   fixed here rather than page by page so a new page inherits it.

   Every rule that already styles an h1 is more specific, so none of them
   move. Deliberately sets no margin: page spacing stays as authored. */
h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1, h2, h3, .section-title, .path-title, .faq-q, .course-title {
  overflow-wrap: break-word;
}

@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  .hero h1 { font-size: 2.05rem; }
}

/* ─── FAQ as a centred accordion (27 Jul 2026) ───────────────────────
   Native <details>, so keyboard and screen-reader behaviour comes free. */
#faq .section-title { text-align: center; }
.faq-list { margin-left: auto; margin-right: auto; gap: 10px; }
.faq-item { padding: 0; }
.faq-item .faq-q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px 26px; margin: 0;
  font-size: 1.05rem; font-weight: 600;
}
.faq-item .faq-q::-webkit-details-marker { display: none; }
.faq-item .faq-q::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.faq-item[open] .faq-q::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item .faq-a {
  padding: 0 26px 22px; margin: 0;
  text-align: center;
  max-width: 68ch; margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item .faq-q::after { transition: none; }
}

/* The mobile menu's link colour was beating the button's own (`.nav-menu li a`
   is more specific than `.btn-solid`), so the solid CTA rendered dark-on-green
   and failed contrast. Buttons keep their own scheme inside the menu. */
.nav-menu li a.btn-solid { color: var(--accent-ink); }
.nav-menu li a.btn-ghost { color: var(--ink); }
.nav-menu li a.btn { display: inline-flex; }

/* The dropdown was pinned to right:24px on the page, so it drifted out of
   line with the Menu button whenever the gutter changed (18px under 400px).
   Anchor it to the button itself instead, so the right edges always align. */
.nav-menu { position: relative; }
.nav-menu ul { right: 0; left: auto; }

/* ─── Courses carousel (28 Jul 2026) ──────────────────────────────────
   Arrows flank the rail rather than sitting above it. Native scrolling
   with snap underneath, so touch and keyboard work without the buttons. */
.scroller-head {
  display: flex; align-items: center; justify-content: flex-end;
  margin: -18px 0 14px;
}
.scroller-all { font-weight: 600; }

.scroller-shell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
}

.scroller-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--paper);
  color: var(--ink); font-size: 18px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
}
.scroller-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.scroller-btn:disabled { opacity: .35; cursor: default; }
.scroller-btn--prev { justify-self: start; }
.scroller-btn--next { justify-self: end; }

.course-scroller {
  display: flex;
  min-width: 0;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding-bottom: 4px;
  /* the arrows are the control here, so the bar itself is hidden. Scrolling
     still works by wheel, trackpad, touch and keyboard. */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* old Edge */
}
.course-scroller::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
.course-scroller > .course-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

@media (max-width: 860px) {
  .scroller-shell { display: block; }
  .course-scroller > .course-card { flex-basis: 78vw; }
  .scroller-btn { display: none; }     /* touch users swipe */
}
/* the kicker was only styled inside the hero, so page intros rendered it as
   plain body text; make it the same eyebrow everywhere */
.kicker {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
/* wider cards so the courses rail has somewhere to scroll even with a
   small catalogue; the arrows are live rather than permanently greyed */
.course-scroller > .course-card { flex-basis: 360px; }

/* The 360px carousel card was appended AFTER the mobile rule, so it won on
   source order and forced the page wider than the phone (the footer then
   stretched to the expanded viewport, which is what showed). Re-assert the
   mobile size last so narrow screens get a card that fits. */
@media (max-width: 860px) {
  .course-scroller > .course-card { flex-basis: 78vw; }
}

/* Two more footer links were added tonight and the row does not wrap, so on a
   phone the footer laid out ~440px wide and stretched the whole document past
   the viewport. Wrap the row and let the grid collapse cleanly. */
.footer-links { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; gap: 18px; }
  .footer-links { gap: 14px; }
  .footer-brand { align-items: flex-start; }
}

/* ─── Neutral palette, site-wide (28 Jul 2026) ────────────────────────
   Jamie: text #1d1d1f, page stays white, and anywhere there are cards the
   cards are white on a #f5f5f7 band. Rather than tagging every section by
   hand across nine pages, any section that CONTAINS a card grid takes the
   band. :has() is unsupported on a few old browsers, where the section
   simply stays white: a graceful loss, not a broken layout. */
.section:has(.course-grid),
.section:has(.feature-grid),
.section:has(.path-grid),
.section:has(.steps),
.section:has(.faq-list),
.section:has(.mission-list),
.section:has(.tile-grid),
.section:has(.video-grid),
.section:has(.cat-grid) {
  background: var(--paper-alt);
}
/* the cards themselves stay white against it */
.course-card, .feature-card, .path-card, .faq-item, .tile, .video-card,
.mission-list, .step, .cat-card { background: var(--paper); }
.path-card--community { background: var(--paper); }

/* the hero mark keeps no background of its own */
.lab-slot { background: transparent; }

/* two grey bands running together read as one: keep a hairline between them */
.section:has(.course-grid) + .section:has(.feature-grid),
.section + .section { border-top: 1px solid var(--border); }
.section + .cta-band, .cta-band + .section { border-top: 0; }

/* pills: grey fill, dark text (28 Jul 2026) */
.trust-list li {
  background: var(--paper-alt);
  color: var(--ink);
  border-color: var(--border);
}
.chip, .chip--muted {
  background: var(--paper-alt);
  color: var(--ink);
}

/* Jamie, 28 Jul: invert those two — white section, grey cards. Applies to
   the courses rail, the courses page grid and the feature cards. */
.section:has(.course-grid),
.section:has(.feature-grid) { background: var(--paper); }
.course-card, .feature-card { background: var(--paper-alt); }
.course-card .course-thumb { background: #ececf0; }   /* a shade down so the thumb still reads */

/* Courses moved above Two ways in, so the bands swap to keep alternating:
   courses takes the grey band with white cards, Two ways in takes white
   with grey cards. Why it holds up stays white-with-grey-cards. */
.section:has(.course-grid) { background: var(--paper-alt); }
.course-card { background: var(--paper); }
.course-card .course-thumb { background: #ececf0; }
.section:has(.path-grid) { background: var(--paper); }
.path-card, .path-card--community { background: var(--paper-alt); }

/* Course cards sit on the grey band and their thumbnail is also grey, so the
   card edge was disappearing. Lift them with a real shadow plus a white ring,
   and give the thumbnail a hairline so the image area separates from the card. */
.course-card {
  border-color: transparent;
  box-shadow: 0 0 0 1px #ffffff, 0 2px 4px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .09);
}
.course-card--placeholder { box-shadow: 0 0 0 1px #ffffff, 0 2px 8px rgba(0, 0, 0, .05); }
.course-card .course-thumb { border-bottom: 1px solid var(--border); }
/* ─────────────────────────────────────────────────────────
   Contact page — 7/5 split, booking card, text rail
   28 Jul 2026
   ───────────────────────────────────────────────────────── */

/* intro block */
.contact-intro {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.contact-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 8px 0 18px;
  color: var(--ink);
}
.contact-lede {
  font-size: 1.06rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 auto 8px;
  max-width: 56ch;
}
.contact-reassure {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 56ch;
}

/* 7/5 split */
.contact-stage {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
}

/* form column */
.contact-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.contact-h2-sub {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.contact-form-mount {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  min-height: 220px;
}
.form-fallback {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 16px 0 0;
}

/* booking card */
.contact-book-card {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 96px;
}
.book-card-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 8px;
}
.book-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.book-card-person {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}
.book-card-photo {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.book-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.2;
}
.book-card-line {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.book-card-body {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 22px;
}
.book-card-cta {
  width: 100%;
  padding: 14px 18px;
}

/* text rail */
.contact-rail {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  margin-top: 24px;
}
.rail-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 56px;
}
.rail-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail-key {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 500;
}
.rail-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.rail-list a:hover { text-decoration: underline; }

/* booking modal (28 Jul 2026) */
body.book-modal-open { overflow: hidden; }

.book-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.book-modal[hidden] { display: none; }

.book-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 27, 22, 0.55);
  backdrop-filter: blur(2px);
}

.book-modal__panel {
  position: relative;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: book-modal-in 180ms ease-out;
}
@keyframes book-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.book-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}

.book-modal__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
  color: var(--ink);
}

.book-modal__close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.book-modal__close:hover { background: var(--paper-alt); }
.book-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.book-modal__body {
  padding: 0;
  overflow: auto;
  flex: 1;
}

.book-modal__body .book-embed {
  width: 100%;
  min-width: 0;
  height: min(640px, calc(100vh - 200px));
}

.book-modal__note {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0;
  padding: 12px 24px 18px;
  text-align: center;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .book-modal { padding: 0; }
  .book-modal__panel { max-height: 100vh; height: 100vh; border-radius: 0; }
  .book-modal__body .book-embed { height: calc(100vh - 140px); }
  .rail-list { grid-template-columns: 1fr; gap: 16px; }
  .contact-book-card .book-card-cta { padding: 12px 18px; }
}

@media (max-width: 960px) {
  .contact-stage {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
  .contact-book-card {
    position: static;
    padding: 24px;
  }
  .contact-intro { margin-bottom: 40px; }
}

/* ─────────────────────────────────────────────────────────
   A.L.L. section — equity band, sits above #mission
   White outer / paper-alt inner panel, 5/7 grid, scene on right
   28 Jul 2026
   ───────────────────────────────────────────────────────── */

.all-section {
  padding: 96px 0;
  background: var(--paper);
}
.all-section .wrap {
  background: var(--paper-alt);
  border-radius: 18px;
  padding: 56px 64px;
}
.all-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}
.all-copy { max-width: 480px; }
.all-mark {
  font-family: var(--font-serif);
  font-size: clamp(3.6rem, 8vw, 5.6rem);
  line-height: 0.95;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.all-h {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.all-lead {
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 24px;
}
.all-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.all-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.all-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--mint);
  border-radius: 1px;
}
.all-closing {
  font-size: 0.95rem;
  color: var(--ink-2);
  font-style: italic;
  margin: 0;
}
.all-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
}
.all-stage canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 960px) {
  .all-section { padding: 64px 0; }
  .all-section .wrap { padding: 40px 32px; }
  .all-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .all-section .wrap { padding: 32px 22px; }
  .all-list { grid-template-columns: 1fr; }
}

/* Scholarship page and paired community-card actions — 28 Jul 2026 */
.path-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.path-actions .btn { margin-top: 0; }
.path-actions .btn-ghost { background: var(--paper); }
.path-actions .btn-ghost:hover { background: #fbfbfc; }

.scholarship-page-hero .hero-grid { align-items: stretch; }
.scholarship-page-hero .hero-copy { align-self: center; }
.scholarship-page-hero .lede { margin-bottom: 16px; }
.scholarship-page-hero .scholarship-lede--strong {
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 28px;
}
.scholarship-action-note {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: .86rem;
}
.scholarship-expectation {
  justify-content: center;
  padding: 36px;
}
.scholarship-expectation .chip {
  margin-bottom: 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .09em;
}
.scholarship-expectation .path-title {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin: 0 0 14px;
}
.scholarship-expectation .path-list { margin-bottom: 0; }
.section.scholarship-funding { background: var(--paper); }
.scholarship-funding .mission-list { background: var(--paper-alt); }

.scholarship-modal__panel { max-width: 760px; }
.scholarship-modal__eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.scholarship-modal__body { padding: 0 24px 24px; }
.scholarship-modal__intro {
  margin: 0 -24px 24px;
  padding: 18px 24px;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--border);
}
.scholarship-modal__intro p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.55;
}
.scholarship-form-mount { min-height: 420px; }
.scholarship-modal .form-fallback { margin: 18px 0 0; }
.scholarship-modal .book-modal__note {
  margin: 24px -24px -24px;
  padding: 14px 24px 18px;
}
@media (max-width: 640px) {
  .path-actions { align-items: stretch; }
  .path-actions .btn { justify-content: center; width: 100%; }
  .scholarship-expectation { padding: 28px 24px; }
  .scholarship-modal__body { padding-right: 18px; padding-left: 18px; }
  .scholarship-modal__intro { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }
  .scholarship-modal .book-modal__note { margin-right: -18px; margin-left: -18px; }
}

@media (min-width: 961px) {
  .contact-book-card { align-self: center; }
}

/* ─── "Learn more" links on the homepage feature cards (29 Jul 2026) ───
   Each card now points at its section of standards.html. The card becomes a
   flex column so the link sits on the baseline of every card in the row
   regardless of how long the body copy runs. */
.feature-card {
  display: flex;
  flex-direction: column;
}
.feature-card .feature-body { margin-bottom: 18px; }
.feature-more {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.feature-more:hover { border-bottom-width: 2px; text-decoration: none; }
.feature-more .feature-more-arrow { display: inline-block; margin-left: 6px; }
.feature-more:hover .feature-more-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .feature-more .feature-more-arrow { transition: transform .15s ease; }
}

/* ─── standards.html ──────────────────────────────────────────────────
   The build standard behind every module, with the EU AI Act duty at the
   top. Homepage cards deep-link to #accessibility / #portability /
   #maintained, so every section needs to clear the sticky header. */
[id="eu-ai-act"], .standards-section, .standards-toc { scroll-margin-top: 88px; }

.standards-hero { padding-bottom: 64px; }
.standards-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 22ch;
}
.standards-hero-body { max-width: 58ch; color: var(--ink-2); }
.standards-hero-body p { margin: 0 0 16px; }

.standards-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 36px 0 32px;
}
.standards-panel {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.standards-panel--muted { background: var(--paper); }
.standards-panel-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}

.standards-list { list-style: none; margin: 0; padding: 0; }
.standards-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--ink-2);
}
.standards-list li:last-child { margin-bottom: 0; }
.standards-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.standards-list--open li::before {
  background: transparent;
  border: 2px solid var(--border);
  width: 10px;
  height: 10px;
  top: 0.58em;
}
.standards-list--wide li { padding-left: 28px; margin-bottom: 14px; }

.standards-toc {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 18px 0;
}
.standards-toc-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.standards-toc-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mint);
}
.standards-toc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
}
.standards-toc a {
  color: var(--deep-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, .35);
  padding-bottom: 2px;
  font-size: 0.95rem;
}
.standards-toc a:hover { border-bottom-color: var(--mint); }
.standards-toc a:focus-visible { outline-color: var(--mint); }

/* Rail on the left (eyebrow + heading), prose on the right. Capped at 55ch
   because DM Sans runs about 8.3px per average character against an 11.3px
   "0", so the ch unit reads far wider than the line actually measures: 74ch
   put 90 characters on a line. Measured, not eyeballed. */
.standards-block { display: grid; gap: 0; }
.standards-body { max-width: 55ch; }
.standards-body > :first-child { margin-top: 0; }
.standards-rail .section-title { margin-bottom: 0; }
@media (min-width: 961px) {
  .standards-block {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }
  .standards-rail { position: sticky; top: 104px; }
}
@media (max-width: 960px) {
  .standards-rail { margin-bottom: 20px; }
}
.standards-section .section-title { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.standards-lede {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin: 0 0 24px;
}
.standards-subhead {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 34px 0 10px;
  color: var(--ink);
}
/* Plain prose only. `.standards-body > p` unqualified beats .standards-lede
   and .standards-note on specificity and silently ate both their margins. */
.standards-body > p:not([class]) { color: var(--ink-2); margin: 0 0 14px; }

.standards-note {
  background: var(--paper-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0 0;
  color: var(--ink-2);
}
.standards-note strong { color: var(--ink); }

@media (max-width: 860px) {
  .standards-split { grid-template-columns: 1fr; }
  .standards-hero { padding-bottom: 44px; }
}

/* Screen-reader-only text. Used to extend a repeated "Learn more" link into a
   name that makes sense out of context (WCAG 2.4.4), without four different
   visible link labels breaking the card grid's rhythm. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Nav breakpoint follows the nav's width (29 Jul 2026) ────────────
   Adding Standards made it five links plus two buttons, which stopped
   fitting above the old 720px burger breakpoint: the header wrapped from
   860px down and pushed the document 37px wider than the viewport at 760px.
   This is the ONLY place the swap is declared; the 720px block above keeps
   brand-word size, header height and the CTA band, and no longer duplicates
   these two selectors. */
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .nav-menu { display: block; position: relative; }
}