/* ==========================================================================
   NOVATIV AI ACADEMY — SHARED STYLESHEET
   Built against Homepage Build Specification v2 (rev. 08/16/26)
   and Catalog Standards 08/01/26.

   One file. Every page links to it. Change a token here and it changes
   everywhere. Nothing in this file is page-specific.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   The only place colours and sizes are defined. Do not hardcode a hex
   anywhere else in the site.
   -------------------------------------------------------------------------- */

:root {
  /* Colour — global palette */
  --brand-blue:   #0033E7;  /* Logo mark only. Never a UI colour. */
  --navy-900:     #0C2351;
  --navy-700:     #14336B;
  --ink:          #18232D;
  --slate:        #5A6B7D;
  --paper:        #FFFFFF;
  --warm-paper:   #FAF8F5;
  --gold:         #FBBF24;
  --gold-hover:   #F0B01A;
  --hairline:     #E4E8EE;

  /* Colour — flattened text on Navy 900 and Navy 700 only.
     These are not part of the global palette. They exist so text on dark
     backgrounds has a hierarchy without introducing new brand colours. */
  --on-navy-heading:    #FFFFFF;
  --on-navy-body:       #BBC1CE;
  --on-navy-muted:      #929CB1;
  --on-navy-disclaimer: #8C97AC;
  --on-navy-divider:    #2A3A63;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --size-hero:        64px;
  --size-section:     44px;
  --size-story:       26px;
  --size-absolution:  24px;
  --size-intro:       22px;
  --size-card-head:   22px;
  --size-body:        18px;
  --size-card-body:   17px;
  --size-button:      17px;
  --size-nav:         17px;
  --size-caption:     15px;

  /* Spacing */
  --section-pad:      128px;
  --section-pad-tall: 160px;   /* Story and Founder only */
  --max-width:        1200px;
  --measure:          760px;   /* Story block text width */
  --card-gap:         32px;
  --space-headline:   24px;    /* below a headline */
  --space-para:       20px;    /* between paragraphs */

  /* Components */
  --radius-button: 6px;
  --radius-card:   12px;
  --header-height: 84px;
  --header-shrunk: 64px;

  /* Motion — one effect on the whole site */
  --motion-duration: 400ms;
  --motion-rise:     12px;
  --motion-ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. TYPEFACE

   Inter, three weights. Served from Google Fonts with preconnect in the
   document head so it deploys to Netlify Drop with no build step.

   TO SELF-HOST INSTEAD: download Inter woff2 files into /assets/fonts/,
   uncomment the @font-face rules below, and delete the two <link> tags
   from every page head. Nothing else changes.

   TO SWAP THE FAMILY: change --font above and the <link> href. Figtree is
   the alternative that was discussed.
   -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   3. RESET AND BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

p { margin: 0 0 var(--space-para); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

/* Keyboard focus must always be visible. Do not remove. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: var(--navy-900);
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--radius-button) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* Blocks that get more room than everything else. */
.section--tall {
  padding-top: var(--section-pad-tall);
  padding-bottom: var(--section-pad-tall);
}

/* Blocks that run straight on from the block above with no seam. */
.section--joined { padding-top: 0; }

.section--navy900 { background: var(--navy-900); color: var(--on-navy-body); }
.section--navy700 { background: var(--navy-700); color: var(--on-navy-body); }
.section--paper   { background: var(--paper); }
.section--warm    { background: var(--warm-paper); }

.section--navy900 h1,
.section--navy900 h2,
.section--navy900 h3,
.section--navy700 h2,
.section--navy700 h3 { color: var(--on-navy-heading); }

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

.measure { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   5. TYPE ROLES
   -------------------------------------------------------------------------- */

.t-hero {
  font-size: var(--size-hero);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;   /* Inter runs loose at display sizes */
}

.t-section {
  font-size: var(--size-section);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-headline);
}

.t-story {
  font-size: var(--size-story);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.t-absolution {
  font-size: var(--size-absolution);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.t-intro {
  font-size: var(--size-intro);
  line-height: 1.5;
  font-weight: 400;
}

.t-card-head {
  font-size: var(--size-card-head);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-card-body {
  font-size: var(--size-card-body);
  line-height: 1.6;
}

.t-caption {
  font-size: var(--size-caption);
  font-weight: 500;
  line-height: 1.5;
}

.t-emphasis { font-weight: 700; }

.t-muted { color: var(--slate); }
.section--navy900 .t-muted,
.section--navy700 .t-muted { color: var(--on-navy-muted); }

/* --------------------------------------------------------------------------
   6. BUTTONS AND LINKS

   One primary button per section, maximum. The secondary action is always
   a text link with a trailing arrow, never a second button.

   Gold buttons always carry Navy 900 text. Navy 900 on Gold is 9.15:1.
   White on Gold is 1.67:1 and fails, so it is never used.
   -------------------------------------------------------------------------- */

.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-900);
  font-size: var(--size-button);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color 200ms var(--motion-ease);
  /* No shadow, no gradient, no glow. */
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--gold-hover);
  color: var(--navy-900);
}

.link-arrow {
  display: inline-block;
  font-size: var(--size-button);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: border-color 200ms var(--motion-ease);
}
.link-arrow:hover,
.link-arrow:focus-visible { border-bottom-color: currentColor; }

.section--navy900 .link-arrow,
.section--navy700 .link-arrow {
  color: var(--on-navy-heading);
  border-bottom-color: var(--on-navy-divider);
}

.link-arrow .arrow { margin-left: 6px; }

.actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.actions--center { justify-content: center; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 32px;
}

.card--navy {
  background: var(--navy-700);
  border-color: var(--on-navy-divider);
}

.grid {
  display: grid;
  gap: var(--card-gap);
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   8. HEADER

   84px at rest, shrinking to 64px on scroll with a shadow appearing.
   Solid white. No container, panel, or box behind the logo.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  height: var(--header-height);
  transition: height 200ms var(--motion-ease),
              box-shadow 200ms var(--motion-ease);
}

.site-header.is-scrolled {
  height: var(--header-shrunk);
  box-shadow: 0 1px 0 var(--hairline), 0 4px 16px rgba(12, 35, 81, 0.06);
}

.header-inner {
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo-link { display: flex; align-items: center; text-decoration: none; }

/* Always set logo height explicitly. The artwork carries hardcoded
   dimensions and the SVG viewBox is tight while the PNGs carry padding,
   so the two are not interchangeable at the same declared height. */
.logo-lockup { height: 54px; width: auto; transition: height 200ms var(--motion-ease); }
.site-header.is-scrolled .logo-lockup { height: 40px; }

.logo-mark { display: none; height: 36px; width: auto; }

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  font-size: var(--size-nav);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms var(--motion-ease);
}
.site-nav a:hover,
.site-nav a:focus-visible { border-bottom-color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 20px; }

/* The gold CTA stays visible at every breakpoint. */
.header-actions .btn-gold { padding: 12px 24px; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-body);
  padding: 96px 0 56px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

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

.footer-tagline { font-size: var(--size-card-body); line-height: 1.6; }

.footer-parent,
.footer-address {
  font-size: var(--size-card-body);
  line-height: 1.6;
  color: var(--on-navy-muted);
}

.footer-heading {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-navy-heading);
  margin: 0 0 20px;
}

.footer-links li { margin-bottom: 12px; }

.footer-links a {
  font-size: var(--size-card-body);
  color: var(--on-navy-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--motion-ease);
}
.footer-links a:hover,
.footer-links a:focus-visible { border-bottom-color: var(--on-navy-body); }

.footer-next {
  margin-top: 24px;
  font-size: var(--size-card-body);
  color: var(--on-navy-body);
}

.footer-legal-bar {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--on-navy-divider);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-size: var(--size-card-body);
  color: var(--on-navy-muted);
}

.footer-legal-bar a { color: var(--on-navy-muted); text-decoration: none; }
.footer-legal-bar a:hover,
.footer-legal-bar a:focus-visible { text-decoration: underline; }

.footer-disclaimers {
  margin-top: 40px;
  font-size: var(--size-card-body);
  line-height: 1.6;
  color: var(--on-navy-disclaimer);
  max-width: 1100px;
}
.footer-disclaimers p { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   10. IMAGE PLACEHOLDERS

   Used where a real photograph has not been supplied yet. They hold the
   correct aspect ratio so dropping the real image in later does not shift
   the layout. Delete the placeholder div and uncomment the <img>.
   -------------------------------------------------------------------------- */

.img-frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

/* Subtle navy overlay at 15 percent so photographs sit in the section
   rather than on it. Applied to every photograph on the site. */
.img-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-900);
  opacity: 0.15;
  pointer-events: none;
}

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background: var(--navy-700);
  color: var(--on-navy-muted);
  font-size: var(--size-card-body);
  line-height: 1.6;
  border: 1px dashed var(--on-navy-divider);
  border-radius: var(--radius-card);
}

.img-placeholder--hero { aspect-ratio: 4 / 3; }
.img-placeholder--founder { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   11. MOTION

   One effect on the whole site: a 400ms fade and 12px rise as a section
   enters the viewport. Nothing else.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-duration) var(--motion-ease),
              transform var(--motion-duration) var(--motion-ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE

   1440+       as specified
   1024–1439   hero drops to 52px, section padding to 96px
   900–1023    two-column blocks stack
   below 900   logo swaps to the circle mark, nav collapses,
               gold CTA stays visible
   below 768   everything single column, hero 40px, story 21px
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  :root {
    --size-hero: 52px;
    --section-pad: 96px;
    --section-pad-tall: 120px;
  }
}

@media (max-width: 1023px) {
  .grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 899px) {
  .logo-lockup { display: none; }
  .logo-mark { display: block; }
  .site-header.is-scrolled .logo-mark { height: 32px; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 12px 24px rgba(12, 35, 81, 0.08);
    padding: 8px 0 20px;
  }
  .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--hairline); }
  .site-nav a { display: block; padding: 16px 24px; }
  .site-nav a:hover { border-bottom-color: transparent; background: var(--warm-paper); }

  .nav-toggle { display: block; }
  .header-inner { padding: 0 24px; position: relative; }
  .wrap { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 767px) {
  :root {
    --size-hero: 40px;
    --size-section: 32px;
    --size-story: 21px;
    --size-absolution: 20px;
    --size-intro: 19px;
    --section-pad: 72px;
    --section-pad-tall: 88px;
  }

  .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-legal-bar { flex-direction: column; gap: 12px; }
  .actions { gap: 20px; }
  .header-actions .btn-gold { padding: 10px 18px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   13. BLOCK LAYOUTS

   Reusable across pages. Kept here rather than in a page so a change lands
   everywhere at once.
   -------------------------------------------------------------------------- */

/* Two-column split — hero, founder, and any page using the same shape. */
.split {
  display: grid;
  gap: 64px;
  align-items: center;
}
.split--55-45 { grid-template-columns: 55fr 45fr; }
.split--45-55 { grid-template-columns: 45fr 55fr; }

/* Dated session list. A list, not cards. */
.session-list { border-top: 1px solid var(--hairline); }

.session-row {
  display: grid;
  grid-template-columns: 180px 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
}

.session-date {
  font-size: var(--size-card-body);
  font-weight: 600;
  color: var(--ink);
}

.session-name { font-size: var(--size-body); font-weight: 600; }
.session-note { font-size: var(--size-caption); font-weight: 500; color: var(--slate); }

.session-price {
  font-size: var(--size-card-body);
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
}

.session-action {
  font-size: var(--size-card-body);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  white-space: nowrap;
}
.session-action:hover,
.session-action:focus-visible { border-bottom-color: currentColor; }

/* Paired comparison rows. Left column muted, right column white. */
.compare { border-top: 1px solid var(--on-navy-divider); }

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 24px 0;
  border-bottom: 1px solid var(--on-navy-divider);
}

.compare-head {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 16px;
}
.compare-head--left { color: var(--on-navy-muted); }
.compare-head--right { color: var(--on-navy-heading); }

.compare-left  { color: var(--on-navy-muted); font-size: var(--size-card-body); line-height: 1.6; }
.compare-right { color: var(--on-navy-heading); font-size: var(--size-card-body); line-height: 1.6; }

/* Low-weight catalogue cards. Name and one line only. */
.catalogue-card {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.catalogue-name {
  font-size: var(--size-card-body);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
}
.catalogue-line {
  font-size: var(--size-card-body);
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 16px;
}

/* Routing cards — the only place icons appear on the homepage. */
.route-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  color: var(--navy-700);
}
.route-card { display: flex; flex-direction: column; }
.route-card .t-card-body { flex: 1; margin-bottom: 24px; }

/* Four-point grid. */
.point-title {
  font-size: var(--size-card-head);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 12px;
}

@media (max-width: 1023px) {
  .split--55-45,
  .split--45-55 { grid-template-columns: 1fr; gap: 48px; }
  .session-row { grid-template-columns: 150px 1fr auto; }
  .session-price { grid-column: 2; text-align: right; }
}

@media (max-width: 767px) {
  .session-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }
  .session-price { grid-column: auto; text-align: left; }
  .session-action { justify-self: start; }
  .compare-row { grid-template-columns: 1fr; gap: 8px; }
  .compare-head { padding-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   14. CONTENT AND LEGAL PAGES

   Single contained column. Body drops to 17px because these are reference
   documents rather than persuasive pages, and a shorter measure at a smaller
   size is easier to scan for a specific clause.
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--warm-paper);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--hairline);
}

.page-title {
  font-size: var(--size-section);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.page-updated {
  font-size: var(--size-caption);
  font-weight: 500;
  color: var(--slate);
  margin: 0;
}

.legal {
  max-width: 760px;
  padding-top: 64px;
  padding-bottom: 96px;
  font-size: var(--size-card-body);
  line-height: 1.7;
}

.legal .lede {
  font-size: var(--size-intro);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 40px;
}

.legal h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}
.legal h2:first-child { margin-top: 0; }

.legal h3 {
  font-size: var(--size-card-body);
  font-weight: 600;
  margin: 28px 0 8px;
}

.legal p { margin-bottom: 16px; }

.legal ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.legal ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate);
}

.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }

.legal strong { font-weight: 600; }

.legal-contact {
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--warm-paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.legal-contact p { margin-bottom: 4px; }
.legal-contact p:last-child { margin-bottom: 0; }

.legal-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: var(--size-card-body);
  color: var(--slate);
}
.legal-related a { color: var(--ink); }

@media (max-width: 767px) {
  .page-head { padding: 48px 0 36px; }
  .legal { padding-top: 48px; padding-bottom: 72px; }
  .legal h2 { font-size: 21px; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   15. REFINEMENTS (17 Aug 2026)

   Four changes after the first deploy review: more air in the Story block,
   a gold accent where the eye needs somewhere to land, cards that behave
   like targets without becoming buttons, and a date that sits with the
   event it belongs to.
   -------------------------------------------------------------------------- */

/* Story block: more air between paragraphs. It is the quietest block on the
   page by design, but at 26px in one weight it was reading flat rather than
   composed. */
.t-story p { margin-bottom: 34px; }
.t-story p:last-child { margin-bottom: 0; }

/* The closing line of the Story carries a gold rule. This is the pull-quote
   pattern already used on the registration page, so it is not a new device.
   It is one of only two places gold appears outside a button. */
.story-close {
  font-weight: 700;
  border-left: 3px solid var(--gold);
  padding-left: 28px;
  margin-top: 8px;
}

/* The second and last non-button use of gold: the right-hand column heading
   in the comparison block, matching the registration page treatment. */
.compare-head.is-gold { color: var(--gold); }

/* Comparison block: seven rows of dense two-column text on navy needed
   room to breathe. */
.compare-row { padding: 30px 0; gap: 64px; }

/* Cards behave like targets. The whole card is clickable and responds, but
   nothing becomes a second button, because gold is scarce and the hero and
   close CTAs must not have competition. */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.catalogue-card {
  position: relative;
  padding: 24px 20px 26px;
  margin: 0 -20px;
  border-radius: var(--radius-card);
  transition: background-color 200ms var(--motion-ease),
              border-top-color 200ms var(--motion-ease);
}

.catalogue-card:hover,
.catalogue-card:focus-within {
  background: var(--warm-paper);
  border-top-color: var(--slate);
}
.catalogue-card:hover .link-arrow,
.catalogue-card:focus-within .link-arrow { border-bottom-color: currentColor; }

.route-card {
  position: relative;
  transition: border-color 200ms var(--motion-ease),
              background-color 200ms var(--motion-ease);
}
.route-card:hover,
.route-card:focus-within {
  background: var(--warm-paper);
  border-color: var(--slate);
}
.route-card:hover .link-arrow,
.route-card:focus-within .link-arrow { border-bottom-color: currentColor; }

/* Footer: the session date belongs to the event above it, not to the link
   below it. */
.footer-when {
  display: block;
  margin-top: 4px;
  font-size: var(--size-caption);
  color: var(--on-navy-muted);
}
.footer-links li:has(.footer-when) { margin-bottom: 18px; }

@media (max-width: 767px) {
  .t-story p { margin-bottom: 26px; }
  .story-close { padding-left: 20px; }
  .compare-row { gap: 8px; padding: 24px 0; }
}

/* --------------------------------------------------------------------------
   16. HOMEPAGE v3

   New blocks introduced by Homepage Build Specification v3: the four-card
   routing grid, the stacked flagship bands, and the free-event highlight
   card. Everything here is reusable on the program and workshop pages.
   -------------------------------------------------------------------------- */

/* Eyebrow above a card or band headline. */
.eyebrow {
  font-size: var(--size-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}
.section--navy900 .eyebrow,
.section--navy700 .eyebrow { color: var(--on-navy-muted); }
.eyebrow--gold { color: var(--gold); }

/* Four-card routing grid, two by two. */
.grid--2x2 { grid-template-columns: repeat(2, 1fr); }

/* Flagship bands. Stacked, never side by side, and no prices. */
.band {
  max-width: 860px;
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
}
.band:first-of-type { border-top: 0; padding-top: 24px; }

.band-name {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.band-promise {
  font-size: var(--size-intro);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}

.band-detail {
  font-size: var(--size-caption);
  font-weight: 500;
  color: var(--slate);
  margin: 24px 0 20px;
}

/* Outcome lines. No bullets, no icons, one per line. */
.outcomes { margin: 28px 0 0; }
.outcomes li {
  font-size: var(--size-card-body);
  line-height: 1.5;
  padding-left: 22px;
  margin-bottom: 12px;
  position: relative;
}
.outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--slate);
}
.outcomes li:last-child { margin-bottom: 0; }

/* Free-event highlight card. The only place a single event appears on the
   homepage. When the event is over this card is replaced and nothing else
   on the page changes. */
.highlight {
  background: var(--navy-900);
  border-radius: var(--radius-card);
  padding: 48px;
  max-width: 860px;
  margin-bottom: 56px;
  color: var(--on-navy-body);
}

.highlight-name {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-navy-heading);
  margin-bottom: 20px;
}

.highlight-detail {
  font-size: var(--size-card-body);
  font-weight: 600;
  color: var(--on-navy-heading);
  margin: 24px 0 28px;
}

@media (max-width: 1023px) {
  .grid--2x2 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .band { padding: 40px 0; }
  .band-name { font-size: 24px; }
  .highlight { padding: 32px 24px; }
  .highlight-name { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   17. HOMEPAGE v3 FINAL (17 Aug 2026)

   Approved after a block-by-block copy review. Adds the navy icon tile, the
   navy outline button, the gold-on-hover card treatment, the dark flagship
   bands, and the price anchor lines.
   -------------------------------------------------------------------------- */

/* Trust line under the hero. One line of credibility before the products. */
.trustline {
  font-size: var(--size-card-body);
  line-height: 1.6;
  color: var(--on-navy-body);
  border-left: 2px solid var(--on-navy-divider);
  padding-left: 20px;
  margin: 32px 0 0;
  max-width: 40em;
}

/* Navy icon tile. Four dark anchors in a light section. */
.tile {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: var(--navy-900);
  color: var(--paper);
  transition: background-color 200ms var(--motion-ease), color 200ms var(--motion-ease);
}

/* Second-tier button. Navy is the navigation colour, gold is the conversion
   colour. This keeps gold scarce without leaving cards with no affordance. */
.btn-outline {
  display: inline-block;
  align-self: flex-start;
  background: transparent;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 12px 23px;
  border: 1.5px solid var(--navy-900);
  border-radius: var(--radius-button);
  transition: background-color 200ms var(--motion-ease), color 200ms var(--motion-ease);
}
.btn-outline:hover,
.btn-outline:focus-visible { background: var(--navy-900); color: var(--paper); }

/* Card treatment: gold edge and gold tile appear on hover only, so the static
   gold budget is untouched. */
.route-card,
.catalogue-card {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  margin: 0;
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--motion-ease),
              box-shadow 200ms var(--motion-ease),
              border-color 200ms var(--motion-ease);
}
.route-card::before,
.catalogue-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--motion-ease);
}
.route-card:hover::before,
.route-card:focus-within::before,
.catalogue-card:hover::before,
.catalogue-card:focus-within::before { transform: scaleX(1); }

.route-card:hover, .route-card:focus-within,
.catalogue-card:hover, .catalogue-card:focus-within {
  background: var(--paper);
  border-color: var(--slate);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(12, 35, 81, 0.10);
}
.route-card:hover .tile,
.route-card:focus-within .tile { background: var(--gold); color: var(--navy-900); }

.route-card .t-card-head { font-size: 24px; line-height: 1.3; margin-bottom: 14px; }
.route-card .t-card-body { flex: 1; margin-bottom: 28px; }

/* One-day course cards: price is the anchor instead of an icon. */
.price {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0 0 4px;
}
.price-anchor {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 16px;
}
.pay-line {
  font-size: 14px;
  color: var(--slate);
  margin: 0 0 22px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.catalogue-name { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 0 0 14px; }
.catalogue-line { flex: 1; margin-bottom: 24px; }

.catalogue-card--soon { background: var(--warm-paper); }
.catalogue-card--soon::before { display: none; }
.catalogue-card--soon:hover {
  transform: none; box-shadow: none; border-color: var(--hairline);
  background: var(--warm-paper);
}

.pdu-note {
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: var(--size-card-body);
  color: var(--slate);
  max-width: 56em;
}

/* Flagship bands. Full-width dark, stacked, never side by side, no prices. */
.flagship { padding: 96px 0; }
.flagship--a { background: var(--navy-900); }
.flagship--b { background: var(--navy-700); }
.flagship .split-band {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 72px;
  align-items: start;
}
.flagship-name {
  font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  color: var(--on-navy-heading); margin: 0 0 14px;
}
.flagship-promise {
  font-size: 24px; line-height: 1.35; font-weight: 600;
  color: var(--on-navy-heading); margin: 0 0 28px;
}
.flagship p { color: var(--on-navy-body); }
.flagship .band-detail { color: var(--on-navy-muted); margin: 28px 0; }

.leave-panel {
  border: 1px solid var(--on-navy-divider);
  border-radius: var(--radius-card);
  padding: 32px;
  background: rgba(255, 255, 255, 0.03);
}
.leave-panel h4 {
  font-size: var(--size-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--on-navy-muted); margin: 0 0 20px;
}
.leave-panel ul { list-style: none; margin: 0; padding: 0; }
.leave-panel li {
  color: var(--on-navy-heading); font-size: var(--size-card-body); line-height: 1.5;
  padding: 18px 0; border-top: 1px solid var(--on-navy-divider);
}
.leave-panel li:first-child { border-top: 0; padding-top: 0; }
.leave-panel li:last-child { padding-bottom: 0; }
.leave-panel li b {
  display: block; font-size: 26px; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 2px;
}

.band-divider { height: 1px; background: var(--on-navy-divider); }

@media (max-width: 1023px) {
  .flagship .split-band { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .flagship { padding: 64px 0; }
  .flagship-name { font-size: 28px; }
  .flagship-promise { font-size: 20px; }
  .route-card, .catalogue-card { padding: 28px; }
  .trustline { padding-left: 16px; }
}

/* Faculty note beneath the comparison block. States plainly that Merilyn
   teaches the two bootcamps and that everything else is taught by a trainer
   held to the same bar. */
.teaching-note {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--on-navy-divider);
  font-size: var(--size-card-body);
  color: var(--on-navy-body);
  max-width: 48em;
}

/* --------------------------------------------------------------------------
   18. PROGRAMS INDEX
   -------------------------------------------------------------------------- */

/* Dark page head. Shorter than the homepage hero, no photograph. */
.page-head--navy {
  background: var(--navy-900);
  border-bottom: 0;
  padding: 96px 0 88px;
}
.page-head--navy .page-title { color: var(--on-navy-heading); }
.page-head--navy p { color: var(--on-navy-body); }

/* The three sorting questions. Text and hairlines, no cards, no icons. */
.question {
  padding: 36px 0;
  border-top: 1px solid var(--hairline);
  max-width: 46em;
}
.question:last-of-type { border-bottom: 1px solid var(--hairline); }
.question h3 {
  font-size: var(--size-intro);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.question p { margin-bottom: 14px; }
.question p:last-child { margin-bottom: 0; }

/* Group heading pattern used by each course group. */
.group-head { margin-bottom: 40px; }
.group-head .t-section { margin-bottom: 20px; }
.group-head .t-intro { max-width: 40em; margin-bottom: 0; }

.group-note {
  margin: 32px 0 0;
  font-size: var(--size-card-body);
  color: var(--slate);
}

/* Private delivery panel. One panel, not cards. */
.private-panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 48px;
  max-width: 860px;
}
.private-panel p:last-of-type { margin-bottom: 32px; }

@media (max-width: 767px) {
  .page-head--navy { padding: 64px 0 56px; }
  .question { padding: 28px 0; }
  .private-panel { padding: 32px 24px; }
}

/* --------------------------------------------------------------------------
   19. HEADER DROPDOWN

   Four top-level nav items instead of five, with both bootcamps, the
   workshops index, and private training one click away from every page.
   Opens on hover for a mouse, on click or Enter for a keyboard, and becomes
   a nested list inside the hamburger below 900px.
   -------------------------------------------------------------------------- */

.has-menu { position: relative; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--size-nav);
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0 0 2px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--motion-ease);
}
.menu-toggle:hover,
.has-menu:hover .menu-toggle,
.menu-toggle[aria-expanded="true"] { border-bottom-color: var(--ink); }

.menu-toggle .chev {
  width: 10px; height: 10px;
  transition: transform 200ms var(--motion-ease);
}
.has-menu:hover .menu-toggle .chev,
.menu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.menu {
  display: block;
  width: max-content;
  max-width: 420px;
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 320px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 36px rgba(12, 35, 81, 0.12);
  padding: 12px 0;
  margin-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--motion-ease),
              transform 160ms var(--motion-ease),
              visibility 160ms;
  z-index: 120;
}
.has-menu:hover .menu,
.menu.is-open { opacity: 1; visibility: visible; transform: none; }

/* Keeps the menu reachable across the gap below the trigger. */
.menu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}

.menu li { display: block; }
.menu a {
  display: block;
  padding: 12px 24px;
  font-size: var(--size-card-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
  transition: background-color 160ms var(--motion-ease);
}
.menu a:hover,
.menu a:focus-visible { background: var(--warm-paper); border-bottom: 0; }

.menu-divider {
  height: 1px;
  background: var(--hairline);
  margin: 10px 24px;
}

@media (max-width: 899px) {
  .has-menu { position: static; }
  .menu-toggle { display: none; }
  .menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .menu::before { display: none; }
  .menu li { border-bottom: 1px solid var(--hairline); }
  .menu a { padding: 16px 24px; }
  .menu-divider { display: none; }
}

/* --------------------------------------------------------------------------
   20. PROGRAM PAGE: AI CONSULTANT ELITE BOOTCAMP
   -------------------------------------------------------------------------- */

/* Emotional block: large type, short measure, generous air. */
.big-body { font-size: var(--size-story); line-height: 1.5; letter-spacing: -0.01em; }
.big-body p { margin-bottom: 34px; }
.big-body p:last-child { margin-bottom: 0; }

.consequence {
  font-size: var(--size-intro);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* The nine things, and other plain outcome lists. */
.plain-list { margin: 28px 0 0; }
.plain-list li {
  font-size: var(--size-body);
  line-height: 1.55;
  padding-left: 24px;
  margin-bottom: 14px;
  position: relative;
}
.plain-list li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--navy-900);
}
.section--navy900 .plain-list li::before,
.section--navy700 .plain-list li::before { color: var(--on-navy-body); }
.section--navy900 .plain-list li { color: var(--on-navy-body); }

/* Two-column comparison on a light background. */
.compare-light { border-top: 1px solid var(--hairline); margin-top: 40px; }
.compare-light .compare-row {
  border-bottom: 1px solid var(--hairline);
  gap: 48px;
}
.compare-light .compare-head--left { color: var(--slate); }
.compare-light .compare-head--right { color: var(--ink); }
.compare-light .compare-left { color: var(--slate); }
.compare-light .compare-right { color: var(--ink); font-weight: 600; }

/* The twelve-week arc. Four phases on one track, gold on the milestones. */
.arc { margin-top: 64px; position: relative; }
.arc-track {
  position: absolute; left: 0; right: 0; top: 96px;
  height: 2px; background: var(--on-navy-divider);
}
.arc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; position: relative;
}
.phase-weeks {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
.phase-name {
  font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--on-navy-heading); margin: 0 0 18px; min-height: 2.5em;
}
.arc-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); position: relative; z-index: 2;
  margin-bottom: 26px; box-shadow: 0 0 0 6px var(--navy-900);
}
.arc-phase p { font-size: var(--size-card-body); line-height: 1.55; color: var(--on-navy-body); margin: 0; }
.arc-milestone { border-left: 2px solid var(--gold); padding-left: 16px; margin-top: 20px; }
.arc-milestone b {
  display: block; color: var(--on-navy-heading);
  font-size: var(--size-card-body); font-weight: 600; margin-bottom: 4px;
}
.arc-milestone span { font-size: var(--size-caption); color: var(--on-navy-muted); line-height: 1.5; }
.arc-foot {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--on-navy-divider);
  font-size: var(--size-card-body); color: var(--on-navy-muted);
}

/* Bonus document cards. Objects, not a product render. */
.bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.bonus-card {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 36px;
  position: relative; overflow: hidden;
  transition: transform 200ms var(--motion-ease),
              box-shadow 200ms var(--motion-ease),
              border-color 200ms var(--motion-ease);
}
.bonus-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--motion-ease);
}
.bonus-card:hover::before { transform: scaleX(1); }
.bonus-card:hover {
  border-color: var(--slate); transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(12, 35, 81, 0.10);
}
.bonus-card .doc { margin-bottom: 26px; }
.bonus-card h3 {
  font-size: 21px; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; margin: 0 0 16px;
}
.fear-panel {
  background: var(--warm-paper); border-left: 3px solid var(--navy-900);
  padding: 14px 18px; margin: 0 0 18px; border-radius: 0 6px 6px 0;
  font-size: 16px; line-height: 1.5;
}
.fear-panel b {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 6px;
}
.bonus-card p { font-size: var(--size-card-body); line-height: 1.6; margin: 0; }

/* Disclosure and FAQ. */
details {
  border-top: 1px solid var(--hairline);
  padding: 24px 0;
}
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary {
  cursor: pointer; list-style: none;
  font-size: var(--size-body); font-weight: 600; line-height: 1.4;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; font-size: 24px; font-weight: 400;
  color: var(--slate); line-height: 1; flex-shrink: 0;
}
details[open] summary::after { content: "\2013"; }
details > *:not(summary) { margin-top: 16px; }
details p { font-size: var(--size-card-body); line-height: 1.65; margin-bottom: 0; }

.section--navy900 details { border-top-color: var(--on-navy-divider); }
.section--navy900 summary { color: var(--on-navy-heading); }

/* Price block. */
.price-figure {
  font-size: 52px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1; color: var(--on-navy-heading); margin: 0 0 12px;
}
.price-sub { font-size: var(--size-intro); color: var(--on-navy-body); margin: 0 0 32px; }

.exchange {
  border: 1px solid var(--on-navy-divider);
  border-radius: var(--radius-card);
  padding: 32px; margin: 40px 0;
  background: rgba(255, 255, 255, 0.03);
}
.exchange h3 {
  font-size: var(--size-card-head); font-weight: 600;
  color: var(--on-navy-heading); margin: 0 0 16px;
}
.exchange p { color: var(--on-navy-body); font-size: var(--size-card-body); line-height: 1.65; }

@media (max-width: 1023px) {
  .bonus-grid { grid-template-columns: 1fr; }
  .arc-track { display: none; }
  .arc-grid { grid-template-columns: 1fr; gap: 44px; }
  .phase-name { min-height: 0; }
}
@media (max-width: 767px) {
  .big-body p { margin-bottom: 26px; }
  .price-figure { font-size: 40px; }
  .exchange { padding: 24px; }
  .compare-light .compare-row { gap: 8px; }
}

/* --------------------------------------------------------------------------
   21. SHARED ADDITIONS, 21 AUGUST

   Punch list item 2 (dark session list) and the components the Workforce
   page needs. Everything here is written to be reused, not to belong to one
   page. Nothing above this line was restyled.
   -------------------------------------------------------------------------- */

/* Punch 2. Dark variant of the session list. The light one renders Ink on
   Navy 900 at about 1.3 to 1 inside the Elite twelve-week disclosure. Week
   label sits above the title rather than beside it, which also fixes the
   mobile case where a 90px label column next to wrapping text is the worst
   version of the layout. */
.session-list--dark { border-top-color: var(--on-navy-divider); }
.session-list--dark .session-row {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 26px 0;
  border-bottom-color: var(--on-navy-divider);
  align-items: start;
}
.session-list--dark .session-date {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.session-list--dark .session-name { color: var(--on-navy-heading); font-size: 19px; }
.session-list--dark .session-note { color: var(--on-navy-body); font-size: var(--size-card-body); }

/* Four bonus cards instead of three. The shared grid is not restyled. */
.bonus-grid--4 { grid-template-columns: repeat(2, 1fr); }

/* Three-column comparison. Same rows as .compare, one more column. */
.compare--three .compare-row { grid-template-columns: 200px 1fr 1fr; gap: 40px; }
.compare--three .compare-mid { color: var(--slate); font-size: var(--size-card-body); line-height: 1.6; }
.compare-light .compare-head--mid { color: var(--slate); }
.compare--three .compare-left { color: var(--ink); font-weight: 600; }

/* The named-pain grid. Four columns of the reader's own words. Renders as
   plain columns on desktop and as an accordion below 900px, because twenty
   lines stacked is two screens and nobody reads the fourth column. */
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 48px; }
.pain-col { border-top: 2px solid var(--navy-900); padding-top: 20px; }
.pain-col > summary {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: default;
  display: block;
  padding: 0;
  margin-bottom: 18px;
}
.pain-col > summary::after { content: none; }
.pain-col ul { margin: 0; }
.pain-col li {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 16px;
  padding-left: 22px;
  position: relative;
}
.pain-col li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-size: 14px; font-weight: 700; line-height: 1.55;
  color: var(--navy-900);
}
.pain-col li:last-child { margin-bottom: 0; }

/* Benefit groups. Three panels on navy, gold heading, white lines. */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 52px; }
.benefit-panel {
  background: var(--navy-700);
  border: 1px solid var(--on-navy-divider);
  border-radius: var(--radius-card);
  padding: 32px;
}
.benefit-panel h3 {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.benefit-panel .plain-list { margin-top: 0; }
.benefit-panel .plain-list li { color: var(--on-navy-heading); margin-bottom: 16px; }
.benefit-panel .plain-list li:last-child { margin-bottom: 0; }

@media (max-width: 1023px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .bonus-grid--4 { grid-template-columns: 1fr; }
  .compare--three .compare-row { grid-template-columns: 160px 1fr 1fr; gap: 24px; }
}

@media (max-width: 899px) {
  /* Accordion. The open attribute is stripped by script at this width, so
     the reader scans four headings and opens the one that is theirs. */
  .pain-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .pain-col { border-top: 1px solid var(--hairline); padding: 22px 0; }
  .pain-col > summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }
  .pain-col > summary::after {
    content: "+"; font-size: 24px; font-weight: 400;
    color: var(--slate); line-height: 1; text-transform: none; letter-spacing: 0;
  }
  .pain-col[open] > summary::after { content: "\2013"; }
  .pain-col[open] > summary { margin-bottom: 18px; }
}

@media (max-width: 767px) {
  .compare--three .compare-row { grid-template-columns: 1fr; gap: 8px; }
  .compare--three .compare-left { padding-bottom: 4px; }
}

/* --------------------------------------------------------------------------
   22. WORKSHOPS PAGE ADDITIONS, 21 AUGUST

   The course card carries more than the catalogue card did: a date, a
   transformation headline, three body paragraphs, six gains, and its own gold
   button. Every one of those extends .catalogue-card rather than replacing it,
   so the Programs index is untouched.
   -------------------------------------------------------------------------- */

.course-card { display: flex; flex-direction: column; }
.course-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.course-head {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
}
.course-card .t-card-body { margin: 0 0 14px; }
.course-card .t-card-body:last-of-type { margin-bottom: 26px; }
.gains-label {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}
.course-card .gains { margin: 0 0 24px; flex: 1; }
.course-card .gains li { font-size: 16px; margin-bottom: 12px; }
.course-card .gains li:last-child { margin-bottom: 0; }
.course-card .pay-line { margin-bottom: 24px; }
.card-buy { align-self: flex-start; }

/* Whole-card links for the four sorting cards. The inner span is styled as a
   button but must not be a nested interactive element. */
.route-card--link { text-decoration: none; color: inherit; }
.route-card--link .btn-outline { align-self: flex-start; pointer-events: none; }

/* What to expect. Two columns on desktop, stacked on mobile. */
.expect-list { border-top: 1px solid var(--hairline); }
.expect-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.expect-when { font-size: 17px; font-weight: 700; color: var(--ink); }
.expect-what { font-size: var(--size-card-body); line-height: 1.65; color: var(--slate); }

@media (max-width: 767px) {
  .expect-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   23. ABOUT PAGE ADDITION, 21 AUGUST

   The transformation arc. Six lines set large, one per row, with a gold rule
   on the left. No bullets, because these are statements rather than a list of
   features.
   -------------------------------------------------------------------------- */

.arc-lines { list-style: none; margin: 0; padding: 0; }
.arc-lines li {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  padding: 0 0 0 22px;
  margin-bottom: 20px;
  border-left: 2px solid var(--gold);
}
.arc-lines li:last-child { margin-bottom: 0; }
.section--navy900 .arc-lines li,
.section--navy700 .arc-lines li { color: var(--on-navy-heading); }

@media (max-width: 767px) {
  .arc-lines li { font-size: 19px; padding-left: 16px; margin-bottom: 16px; }
}

/* Numbered tile. Same 34px navy square used by the homepage routing tiles,
   with a gold numeral instead of an icon. Six of them read as one system
   rather than as six separate uses of gold, which is why they sit outside
   the static gold budget, exactly as the gold week labels on the arc do. */
.num-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--navy-900);
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 18px;
}
.section--navy900 .num-tile,
.section--navy700 .num-tile { background: var(--navy-700); }

/* --------------------------------------------------------------------------
   24. COURSE PAGE ADDITIONS, 21 AUGUST

   The at-a-glance tile grid, used on every individual course page. Answers
   every logistics question in one screen so the FAQ does not have to carry
   that weight.
   -------------------------------------------------------------------------- */

.glance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.glance-tile {
  background: var(--warm-paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 24px;
}
.glance-label {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 10px;
}
.glance-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 8px;
}
.glance-note { font-size: 15px; line-height: 1.5; color: var(--slate); margin: 0; }

.section--navy900 .glance-tile,
.section--navy700 .glance-tile {
  background: var(--navy-700);
  border-color: var(--on-navy-divider);
}
.section--navy900 .glance-value { color: var(--on-navy-heading); }
.section--navy900 .glance-note  { color: var(--on-navy-body); }

/* Break row in an agenda. Recedes rather than competing with a module. */
.session-row--break .session-date,
.session-row--break .session-name,
.session-row--break .session-note { color: var(--slate); font-weight: 400; }
.session-row--break .session-name { font-size: 17px; }

@media (max-width: 1023px) { .glance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .glance-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   25. FORMS, 1 SEPTEMBER

   Contact is the first page carrying a form. Inputs at 17px minimum, hairline
   borders, a navy focus ring rather than the browser default, and generous
   vertical spacing so the fields do not feel crowded.
   -------------------------------------------------------------------------- */

.form { margin-top: 36px; }

.field { margin-bottom: 26px; }

.field label,
.label-as-legend {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.req {
  font-size: 13px;
  font-weight: 400;
  color: var(--slate);
  letter-spacing: 0.02em;
  margin-left: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field textarea { resize: vertical; min-height: 96px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px rgba(12, 35, 81, 0.12);
}

.field select { appearance: none; background-image: none; cursor: pointer; }

.field-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  margin: 8px 0 0;
}

.field-note--boxed {
  background: var(--warm-paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 18px;
}

.field-group { border: 0; padding: 0; margin: 0; }
.field-group[hidden] { display: none; }

.radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 10px;
  cursor: pointer;
}
.radio input { margin-top: 4px; flex-shrink: 0; }

/* Honeypot. Hidden from people, reachable by a screen reader and by a bot,
   which is the point. */
.hp-field { position: absolute; left: -9999px; }

button.btn-gold { border: 0; cursor: pointer; font-family: inherit; }

@media (max-width: 599px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   26. SCHEDULE ROWS, 1 SEPTEMBER

   Used on Upcoming Sessions. Three columns on desktop: when, what, and the
   action. Stacks on mobile with the price and button sitting together.
   -------------------------------------------------------------------------- */

.sched { border-top: 1px solid var(--hairline); }

.sched-row {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
  gap: 28px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
}

.sched-date {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 4px;
}

.sched-time { font-size: 15px; color: var(--slate); margin: 0; }

.sched-name {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
}
.sched-name a { color: var(--ink); text-decoration: none; }
.sched-name a:hover { text-decoration: underline; }

.sched-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0 0 4px;
}
.sched-note:last-child { margin-bottom: 0; }

.sched-act { text-align: right; }

.sched-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}

.btn-gold.sched-btn { padding: 10px 22px; font-size: 16px; }

/* Dark variant, used for the bootcamp block. */
.sched--dark { border-top-color: var(--on-navy-divider); }
.sched--dark .sched-row { border-bottom-color: var(--on-navy-divider); }
.sched--dark .sched-date,
.sched--dark .sched-price { color: var(--on-navy-heading); }
.sched--dark .sched-name a { color: var(--on-navy-heading); }
.sched--dark .sched-time,
.sched--dark .sched-note { color: var(--on-navy-body); }

@media (max-width: 899px) {
  .sched-row { grid-template-columns: 1fr; gap: 12px; }
  .sched-act { text-align: left; display: flex; align-items: center; gap: 20px; }
  .sched-price { margin: 0; }
}

/* Private training: rate cards and numbered steps. */
.rate-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 26px 28px;
}
.section--warm .rate-card { background: var(--paper); }

.step-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--on-navy-divider);
}
.step-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.step-row .num-tile { margin-bottom: 0; }
.section--navy900 .step-row .t-card-head { color: var(--on-navy-heading); }
.section--navy900 .step-row .t-card-body { color: var(--on-navy-body); }

/* --------------------------------------------------------------------------
   27. PHOTOGRAPHS, 2 SEPTEMBER

   Two images on the whole site, per the image direction. The hero and the
   founder. Both carry the same corner radius and the same crop discipline,
   so they read as one system rather than two stock choices.
   -------------------------------------------------------------------------- */

.img-frame {
  overflow: hidden;
  border-radius: var(--radius-card);
  line-height: 0;
}

.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-frame--hero { aspect-ratio: 16 / 9; }
.img-frame--founder { aspect-ratio: 4 / 5; }

@media (max-width: 767px) {
  .img-frame--hero { aspect-ratio: 3 / 2; }
}