/* ==========================================================================
   Creator's School — full-width, phone-first, content-led stylesheet.
   Palette from the original site. Motion kept to gentle section reveals.
   ========================================================================== */

:root {
  --paper: #f7f4ee;
  --paper-bright: #fbfaf7;
  --ink: #141519;
  --graphite: #383b40;
  --muted: #6e6f70;
  --yellow: #f5a623;
  --yellow-light: #ffc46b;
  --yellow-deep: #e07b10;
  --whatsapp: #1faa59;
  --line: rgba(20, 21, 25, 0.14);
  --line-strong: rgba(20, 21, 25, 0.26);

  --display: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto", Arial, sans-serif;

  --wrap: 1680px;
  --gutter: clamp(18px, 3.6vw, 64px);
  --bar: 0px;    /* height of the mobile action bar, set in media query */
  --header: 71px; /* sticky header height, used to offset sticky children */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: var(--bar);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
}

h1 { font-size: clamp(36px, 5.4vw, 74px); }
h2 { font-size: clamp(29px, 3.6vw, 50px); }
h3 { font-size: clamp(21px, 1.7vw, 26px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

em { font-style: normal; color: var(--yellow-deep); }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--yellow-deep); }

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

::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow-deep); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 300;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Gentle section reveal — the only scroll motion on the site.
   Only applies when JS is running, so content is never trapped behind it.
   -------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js .reveal.in { opacity: 1; transform: none; }

html.js .stagger > *   { transition-delay: 0ms; }
html.js .stagger > *:nth-child(2) { transition-delay: 70ms; }
html.js .stagger > *:nth-child(3) { transition-delay: 140ms; }
html.js .stagger > *:nth-child(4) { transition-delay: 210ms; }
html.js .stagger > *:nth-child(5) { transition-delay: 260ms; }
html.js .stagger > *:nth-child(n+6) { transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  border-bottom: none;
}
.brand img {
  height: 42px;
  width: auto;
  max-width: 100%;
}

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav ul { display: flex; gap: 26px; }
.site-nav a {
  text-decoration: none;
  font-size: 17px;
  color: var(--graphite);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--yellow); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); font-weight: 500; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 9px;
  font: 500 16px var(--body);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  padding: 11px 16px;
  cursor: pointer;
}
.nav-toggle .bars {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.btn:hover { background: var(--yellow-light); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: 0 0 auto; }

.btn-small { min-height: 46px; padding: 10px 18px; font-size: 16px; }

/* Outline button: a quiet hairline, not a hard black box. */
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: transparent; border-color: var(--ink); }

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--graphite); color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }

.link-arrow {
  display: inline-block;
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { border-bottom-color: var(--yellow-deep); }

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.section {
  padding: clamp(56px, 7vw, 104px) 0;
  border-bottom: 1px solid var(--line);
}
.section.alt { background: var(--paper-bright); }
.section.band { padding: clamp(34px, 4vw, 52px) 0; background: var(--paper-bright); }

.eyebrow {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  margin: 0 0 16px;
}

.lead { font-size: clamp(18px, 1.5vw, 22px); color: var(--graphite); max-width: 60ch; }
.section h2 { max-width: 22ch; }
.section p { max-width: 66ch; }

.note {
  margin-top: 24px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Wide two-part heading block: title left, supporting text right */
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: start;
  margin-bottom: 12px;
}
.head-split h2 { margin-bottom: 0; }
.head-split .lead { max-width: 52ch; }

/* --------------------------------------------------------------------------
   Hero — soft drifting background, no interaction
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(44px, 5vw, 84px);
}
.hero-bg {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
}
.hero-bg i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.hero-bg i:nth-child(1) {
  top: -6%; left: 46%;
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(245, 166, 35, 0.4), rgba(245, 166, 35, 0) 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.hero-bg i:nth-child(2) {
  bottom: -18%; left: -12%;
  width: 54vw; height: 54vw;
  max-width: 760px; max-height: 760px;
  background: radial-gradient(circle at 50% 50%, rgba(224, 123, 16, 0.22), rgba(224, 123, 16, 0) 68%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.hero-bg i:nth-child(3) {
  top: 24%; left: 8%;
  width: 40vw; height: 40vw;
  max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 196, 107, 0.3), rgba(255, 196, 107, 0) 70%);
  animation: drift-c 38s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 5%, 0) scale(1.09); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, -6%, 0) scale(1.12); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(6%, 7%, 0) scale(1); }
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.hero h1 { max-width: 16ch; }
.hero .lead { font-size: clamp(18px, 1.6vw, 23px); }

.hero-figure { margin: 0; }
.hero-figure img { width: 100%; border: 1px solid var(--line-strong); }
.hero-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}
.hero-figure figcaption strong { font-family: var(--display); font-size: 18px; color: var(--ink); }

/* Inner-page hero */
.page-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.page-hero h1 { max-width: 18ch; }

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 4vw, 56px);
  background: var(--line);
  border: 1px solid var(--line);
}
.stat-band li { background: var(--paper); padding: 22px clamp(16px, 2vw, 28px); }
.section.alt .stat-band li { background: var(--paper-bright); }
.stat-band strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat-band span { font-size: 15.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Quote strip
   -------------------------------------------------------------------------- */
.quote-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px);
}
.quote-strip li { padding-left: 20px; border-left: 3px solid var(--yellow); }
.quote-strip blockquote {
  font-family: var(--display);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.42;
  margin-bottom: 10px;
}
.quote-strip p { font-size: 15.5px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Before / after lists
   -------------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 80px);
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.col-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.num-list { counter-reset: n; }
.num-list li {
  counter-increment: n;
  position: relative;
  padding: 13px 0 13px 46px;
  border-bottom: 1px solid var(--line);
}
.num-list li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 13px;
  font-size: 15px;
  font-weight: 500;
  color: var(--yellow-deep);
}
.pull {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.35;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Numbered step rows (used on several pages)
   -------------------------------------------------------------------------- */
.steps { margin-top: 48px; }
.steps > li {
  display: grid;
  grid-template-columns: 88px minmax(0, 30ch) minmax(0, 1fr);
  gap: 10px clamp(20px, 3vw, 48px);
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.step-no {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--yellow-deep);
  padding-top: 6px;
}
.step-kicker {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.step-kicker .dot { color: var(--yellow); }
.step-body h3 { margin: 0 0 4px; }
.step-note { color: var(--graphite); padding-top: 6px; }

/* --------------------------------------------------------------------------
   Programs
   -------------------------------------------------------------------------- */
.program {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 260px);
  gap: 12px clamp(20px, 2.6vw, 48px);
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.program:first-of-type { margin-top: 44px; }
.program:last-of-type { border-bottom: 1px solid var(--line); }

.program-no {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--yellow-deep);
  padding-top: 8px;
}
.program-tag {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.program-main h3 { margin: 0 0 10px; }
.program-price { margin: 0 0 4px; line-height: 1.25; }
.program-price strong { display: block; font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); }
.program-price span { font-size: 15.5px; color: var(--muted); }
.program-desc { color: var(--graphite); margin-bottom: 14px; }

.tick-list li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 17px;
  color: var(--graphite);
}
.tick-list li::before { content: "—"; position: absolute; left: 0; color: var(--yellow-deep); }

.program-cta { padding-top: 6px; }
.note-line { margin-top: 32px; color: var(--muted); max-width: none; }

/* --------------------------------------------------------------------------
   Results / case rows
   -------------------------------------------------------------------------- */
.case {
  display: grid;
  /* Name, then the quote, then the number out on the right as a margin
     figure. The quote is placed explicitly rather than left to flow, because
     only four of the sixteen students claimed a number and the quotes have to
     line up down the page whether the row carries one or not. */
  grid-template-columns: minmax(0, 320px) minmax(0, 1.45fr) minmax(0, 0.85fr);
  gap: 14px clamp(20px, 3vw, 56px);
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.case:first-of-type { margin-top: 42px; }
.case:last-of-type { border-bottom: 1px solid var(--line); }

.case-who { margin: 0; }
.case-no { display: block; font-size: 15px; color: var(--yellow-deep); font-weight: 500; margin-bottom: 4px; }
.case-who strong { display: block; font-family: var(--display); font-size: 21px; }
.case-who span { font-size: 16px; color: var(--muted); }

.case-stat { margin: 0; }
.case-stat strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1;
}
.case-stat span { font-size: 16px; color: var(--muted); }

/* Only four of the sixteen put a figure on their card. The rest named a change
   instead, and that change goes in the same column at text size rather than
   number size, so the row still has a right-hand edge and nobody is handed a
   statistic they never claimed. */
.case-stat.is-words strong {
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--yellow-deep);
}

.case blockquote {
  font-family: var(--display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.42;
  padding-left: 20px;
  border-left: 3px solid var(--yellow);
  margin-bottom: 14px;
}
.case-note { color: var(--graphite); }

/* Only four students put a number on their own card. The rest keep the same
   row minus the middle column, rather than being handed a statistic they
   never claimed. */
.case-quote { grid-column: 2; }
.case-stat { grid-column: 3; }
.case-quote blockquote:last-child { margin-bottom: 0; }

.disclaimer { margin-top: 26px; font-size: 15.5px; color: var(--muted); max-width: 80ch; }

/* --------------------------------------------------------------------------
   Photos
   -------------------------------------------------------------------------- */
.photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 36px);
  margin: 44px 0;
}
.photo-row figure, .photo-grid figure { margin: 0; }
.photo-row img, .photo-grid img {
  width: 100%;
  border: 1px solid var(--line-strong);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.photo-row figcaption, .photo-grid figcaption { margin-top: 12px; font-size: 15.5px; color: var(--muted); }
.photo-grid figcaption strong { display: block; font-family: var(--display); font-size: 18px; color: var(--ink); margin-bottom: 2px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: 46px;
}

/* A guest photo that has not been sent yet. It holds the exact frame the real
   photograph will sit in, so nothing on the row moves when one arrives, and it
   says what it is instead of stretching a stand-in image. */
.guest-slot {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  background: var(--paper-bright);
}
.guest-slot span { font-size: 15px; color: var(--muted); letter-spacing: 0.02em; }

/* The line under a pair of buttons that says which one is yours. */
.btn-row-note { margin-top: 14px; font-size: 15.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Credentials, chips, big quote
   -------------------------------------------------------------------------- */
.credentials { padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cred-stat { margin-bottom: 16px; }
.cred-stat strong { font-family: var(--display); font-size: 30px; color: var(--yellow-deep); margin-right: 10px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.chip-list li {
  font-size: 16px;
  padding: 7px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--graphite);
}

/* Institution / press logo strip: brand marks, not photographs, so they are
   contained rather than cropped like a photo. Fixed at 5 across so a round
   number of logos sits in neat rows. Static — no hover state, no caption. */
.logo-strip {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.logo-strip li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  padding: 22px 14px;
}
.logo-strip img {
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}
@media (max-width: 900px) { .logo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ventures: one row per venture, a contained brand mark and a brief line —
   no photo, no bullets, just what it is. Each row links to the real thing. */
.venture-list { margin-top: 44px; border-top: 1px solid var(--line); }
.venture-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px clamp(20px, 3vw, 56px);
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.venture-row:hover { background: var(--paper-bright); }
.venture-row img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  background: var(--paper-bright);
  border: 1px solid var(--line-strong);
  padding: 16px;
}
.venture-row h3 { margin: 0 0 6px; }
.venture-row p { margin: 0; color: var(--graphite); }
@media (max-width: 700px) {
  .venture-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .venture-row img { width: 104px; height: 104px; padding: 12px; }
}

.big-quote {
  margin-top: 44px;
  padding-left: 24px;
  border-left: 4px solid var(--yellow);
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.35;
  max-width: 34ch;
}
.big-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--body);
  font-style: normal;
  font-size: 16px;
  color: var(--muted);
}
.big-quote.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-left: none;
  padding-left: 0;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Label / content rows (community notes, ecosystem, before-after pairs)
   -------------------------------------------------------------------------- */
.notes { margin-top: 46px; border-top: 1px solid var(--line); }
.note-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-tag img { height: 26px; width: auto; max-width: 96px; object-fit: contain; }
.note-item {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 56px);
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.note-tag {
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  margin: 0;
  padding-top: 6px;
}
.note-body h3 { margin: 0 0 6px; }
.note-body p { color: var(--graphite); margin: 0; max-width: 62ch; }

/* Ecosystem: text left, picture right */
.eco-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 420px);
  gap: 16px clamp(20px, 3vw, 56px);
  align-items: center;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.eco-item:last-of-type { border-bottom: 1px solid var(--line); }
.eco-item:first-of-type { margin-top: 44px; }
.eco-no { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--yellow-deep); }
.eco-body h3 { margin-bottom: 8px; }
.eco-body p { color: var(--graphite); margin: 0; }
/* These are brand marks, not photographs — contain them rather than crop. */
.eco-item img {
  width: 100%;
  border: 1px solid var(--line-strong);
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--paper);
  padding: 14px;
}

/* --------------------------------------------------------------------------
   Timeline (mentor journey)
   -------------------------------------------------------------------------- */
.timeline { margin-top: 46px; border-top: 1px solid var(--line); }
.timeline li {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 10px clamp(20px, 3vw, 56px);
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.tl-when {
  margin: 0;
  padding-top: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--yellow-deep);
}
.tl-when span { display: block; font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.tl-body h3 { margin: 0 0 8px; }
.tl-body p { color: var(--graphite); margin: 0; }

/* --------------------------------------------------------------------------
   Award blocks
   -------------------------------------------------------------------------- */
.award {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.award:last-of-type { border-bottom: 1px solid var(--line); }
.award:first-of-type { margin-top: 44px; }
.award img { width: 100%; border: 1px solid var(--line-strong); aspect-ratio: 3 / 2; object-fit: cover; }
.award-when { font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.award h3 { margin-bottom: 10px; }
.award p:last-child { color: var(--graphite); }

/* Purpose: these are logos/graphics, not photographs, so they sit centred
   and padded inside their frame rather than getting cropped like a photo. */
#purpose .award img {
  object-fit: contain;
  background: var(--paper-bright);
  padding: 25px;
  box-sizing: border-box;
}

/* Podcast highlight: the site's own dark/yellow pairing, not another
   photo-grid tile, since this is Lokesh's own platform rather than a photo. */
.podcast-feature {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  margin-top: 40px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--ink);
}
.podcast-feature img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(247, 244, 238, 0.15);
}
.podcast-feature .eyebrow { color: var(--yellow-light); }
.podcast-feature h3 { color: var(--paper); margin: 6px 0 12px; }
.podcast-feature p { color: rgba(247, 244, 238, 0.78); margin: 0 0 24px; max-width: 52ch; }
@media (max-width: 700px) { .podcast-feature { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: 46px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.35;
  list-style: none;
  transition: color 0.15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--yellow-deep);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--yellow-deep); }
.faq-no { font-size: 15px; font-weight: 500; color: var(--yellow-deep); flex: 0 0 auto; }
.faq details > p { padding: 0 40px 26px 40px; color: var(--graphite); max-width: 76ch; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.cta { background: var(--yellow); border-bottom: none; }
.cta .eyebrow, .cta .lead { color: var(--ink); }
.cta h2 { max-width: 24ch; }
.cta .chip-list { margin-top: 30px; }
.cta .chip-list li { border-color: rgba(20, 21, 25, 0.35); color: var(--ink); }
.cta em { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--paper); padding: clamp(46px, 6vw, 72px) 0 28px; }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(247, 244, 238, 0.2);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-brand img { height: 46px; width: auto; }
.footer-brand p { margin: 0; font-size: 16px; color: rgba(247, 244, 238, 0.72); }
.footer-nav ul, .footer-social ul { display: flex; flex-direction: column; gap: 11px; font-size: 17px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 15.5px;
  color: rgba(247, 244, 238, 0.66);
}
.footer-bottom p { margin: 0; }
.footer-bottom .link-arrow { color: var(--yellow); border-bottom-color: var(--yellow); font-size: 16px; }

/* --------------------------------------------------------------------------
   Mobile action bar — one obvious action, always reachable by thumb
   -------------------------------------------------------------------------- */
.action-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.action-bar .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .program { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); }
  .program-cta { grid-column: 2 / -1; }
  .case { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .case-quote, .case-stat { grid-column: 2; }
  .eco-item { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 320px); }
}

@media (max-width: 960px) {
  :root { --bar: 78px; --header: 59px; }

  .head-split { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 560px; }
  .quote-strip { grid-template-columns: 1fr; gap: 22px; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .action-bar { display: block; }

  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 18px 30px -22px rgba(20, 21, 25, 0.5);
    padding: 4px var(--gutter) 22px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav ul a {
    display: block;
    padding: 16px 0;
    font-size: 19px;
    border-bottom: none;
  }
  .site-nav ul a[aria-current="page"] { color: var(--yellow-deep); }
  .site-nav .btn { margin-top: 18px; width: 100%; }

  .header-inner { gap: 14px; padding-top: 11px; padding-bottom: 11px; }
  .brand img { height: 36px; }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  h1 { line-height: 1.1; }
  .section h2, .hero h1, .page-hero h1 { max-width: none; }

  .two-col { grid-template-columns: 1fr; }
  .photo-row { grid-template-columns: 1fr; }
  .steps > li { grid-template-columns: 44px minmax(0, 1fr); }
  .step-no { padding-top: 2px; }
  .step-note { grid-column: 2; padding-top: 0; }
  .note-item { grid-template-columns: 1fr; gap: 4px; }
  .note-tag { padding-top: 0; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .tl-when { padding-top: 0; }
  .award { grid-template-columns: 1fr; }
  .eco-item { grid-template-columns: 44px minmax(0, 1fr); }
  .eco-item img { grid-column: 1 / -1; }

  .program { grid-template-columns: 44px minmax(0, 1fr); }
  .program-price, .program-list, .program-cta { grid-column: 2; }
  .program-price { margin-top: -4px; }

  .case { grid-template-columns: 1fr; gap: 12px; }
  .case-stat, .case-quote { grid-column: 1; }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }

  .stat-band { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }

  .brand img { height: 32px; }
  .nav-toggle { min-height: 44px; padding: 10px 13px; font-size: 15px; }
  .footer-brand img { height: 40px; }
  .faq details > p { padding: 0 0 24px 0; }
  .faq summary { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg i { animation: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   The Spine — the 15-day syllabus.

   A sticky rail holds one rolling numeral and a progress track; the days
   themselves are plain index rows. Motion is one gesture repeated: the
   odometer roll (also used by the progress fill and the row recoil, which
   are all transform-only). Everything degrades to a readable list with no
   JS and no motion.
   -------------------------------------------------------------------------- */
.spine {
  position: relative; /* offsetParent for the day rows, so JS can measure them */
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  margin-top: clamp(34px, 4vw, 56px);
}

/* ---- Rail ---- */
.spine-rail {
  position: sticky;
  top: calc(var(--header) + 44px);
  align-self: start;
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr);
  gap: 0 22px;
}

.rail-track {
  position: relative;
  width: 2px;
  height: clamp(190px, 28vh, 310px);
  background: var(--line);
}
.rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--fill, 0%);
  background: var(--yellow-deep);
  transition: height 0.12s linear;
}
.rail-tick {
  position: absolute;
  left: -5px;
  top: var(--p, 0%);
  width: 12px;
  height: 1px;
  background: var(--line-strong);
  transition: background-color 0.2s linear;
}
.rail-tick.is-bonus { width: 6px; left: -2px; }
.rail-tick.is-past { background: var(--yellow-deep); }

.spine .rail-num {
  display: flex;
  margin: 0 0 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(54px, 6.2vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.roll { display: block; height: 1em; overflow: hidden; }
.roll-strip {
  display: block;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.roll-strip > span { display: block; height: 1em; }
/* With no JS the counter simply reads 01. */
.rail-num .roll:nth-child(2) .roll-strip { --d: 1; }

.spine .rail-of {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}
.spine .rail-label {
  margin: 0;
  max-width: 15ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.22;
  color: var(--ink);
  transition: opacity 0.16s linear;
}

/* ---- Day rows ---- */
.spine-days { border-top: 1px solid var(--line); }

.day {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 28px;
  padding: clamp(32px, 4.2vw, 60px) 0;
  border-bottom: 1px solid var(--line);
}

.spine .day-tag {
  margin: 0;
  padding-top: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  max-width: none;
}
.day.is-bonus .day-tag { color: var(--muted); }

.day-body { min-width: 0; }

/* The title sits in a box exactly its own width, so the hover recoil crops
   it against its own edge instead of sliding through a window. */
.day-clip {
  margin: 0 0 5px;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  overflow: clip;
  font-size: clamp(26px, 2.9vw, 40px);
}
.day-title { display: block; }
.spine .day-clip { margin-bottom: 17px; }

/* Points, not paragraphs. Short enough that the eye finishes a day in a
   couple of seconds, which is the whole point of a syllabus. */
.spine .day-points {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 58ch;
}
.spine .day-points li {
  position: relative;
  padding-left: 21px;
  margin: 0 0 9px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--graphite);
}
.spine .day-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.64em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow-deep);
}
.spine .day-points li:last-child { margin-bottom: 0; }

.spine .day-note {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
  max-width: 52ch;
}

.spine .day-who {
  margin: 20px 0 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}

/* ---- Outcome list ---- */
.take-list {
  margin-top: clamp(30px, 4vw, 50px);
  columns: 2;
  column-gap: clamp(30px, 4vw, 72px);
}
.take-list li { break-inside: avoid; }

@media (max-width: 1100px) {
  .spine { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
  .day { grid-template-columns: 82px minmax(0, 1fr); }
}

/* Below 960 the rail turns into a slim sticky bar with the same counter and
   the same progress track, laid on its side. Same information, same gesture. */
@media (max-width: 960px) {
  .spine { display: block; margin-top: 26px; }

  .spine-rail {
    position: sticky;
    top: var(--header);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 calc(var(--gutter) * -1) 4px;
    padding: 9px var(--gutter) 10px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .section.alt .spine-rail { background: var(--paper-bright); }

  .rail-read { order: 1; display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
  .rail-track { order: 2; flex: 1 1 auto; width: auto; height: 2px; }
  .rail-fill { width: var(--fill, 0%); height: 2px; transition: width 0.12s linear; }
  .rail-tick { top: -3px; left: var(--p, 0%); width: 1px; height: 8px; }
  .rail-tick.is-bonus { height: 5px; top: -1px; width: 1px; left: var(--p, 0%); }

  .spine .rail-num { font-size: 30px; margin: 0; }
  .spine .rail-of { margin: 0; font-size: 12px; }
  .spine .rail-label { display: none; }
}

@media (max-width: 700px) {
  .day { grid-template-columns: 1fr; gap: 8px; padding: 30px 0; }
  .spine .day-tag { padding-top: 0; }
  .spine .day-clip { margin-bottom: 14px; }
  .take-list { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .roll-strip, .rail-fill, .rail-tick, .spine .rail-label { transition: none; }
}

/* --------------------------------------------------------------------------
   Featured days — the three sessions taught by an outside specialist.
   Marked with a rule and a wash rather than a box, so the row stays part of
   the index instead of becoming a card.
   -------------------------------------------------------------------------- */
.day.is-featured {
  background: rgba(245, 166, 35, 0.06);
  box-shadow: inset 3px 0 0 var(--yellow);
  padding-left: 24px;
  padding-right: 20px;
}

.spine .day-flag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 11px 5px;
  max-width: none;
  border: 1px solid var(--yellow-deep);
  border-radius: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--yellow-deep);
}

/* The highlight carries into the rail: featured ticks are longer and always
   coloured, so you can see the three specialist days coming. */
.rail-tick.is-featured {
  width: 20px;
  left: -9px;
  height: 2px;
  background: var(--yellow-deep);
}

/* --------------------------------------------------------------------------
   Header: member log in
   -------------------------------------------------------------------------- */
.nav-cta { display: flex; align-items: center; gap: 10px; }

.login-wrap { position: relative; }
.login-btn { white-space: nowrap; }

.login-note {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  width: 310px;
  padding: 18px 20px 19px;
  background: var(--paper-bright);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 20px 38px -24px rgba(20, 21, 25, 0.55);
}
.login-note[hidden] { display: none; }

/* Small pointer up to the button it belongs to. */
.login-note::before,
.login-note::after {
  content: "";
  position: absolute;
  right: 26px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}
.login-note::before {
  top: -7px;
  background: var(--line-strong);
}
.login-note::after {
  top: -6px;
  background: var(--paper-bright);
}

.login-note p {
  margin: 0 0 10px;
  max-width: none;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--graphite);
}
.login-note p:last-child { margin-bottom: 0; }
.login-note strong { color: var(--ink); font-weight: 500; }
.login-note-link a {
  font-size: 15px;
  color: var(--yellow-deep);
  text-underline-offset: 3px;
}

@media (max-width: 960px) {
  .nav-cta { flex-direction: column; align-items: stretch; gap: 0; }
  .login-wrap { position: static; }
  .site-nav .login-btn { margin-top: 10px; }

  .login-note {
    position: static;
    width: auto;
    margin-top: 12px;
    box-shadow: none;
  }
  .login-note::before, .login-note::after { display: none; }
}

@media (max-width: 700px) {
  .day.is-featured { padding-left: 18px; padding-right: 14px; }
}

/* --------------------------------------------------------------------------
   YouTube embed — click-to-load.

   The poster is a plain button until someone presses it, so no request goes
   to YouTube on page load and the section costs nothing to scroll past.
   -------------------------------------------------------------------------- */
.video-embed {
  margin: clamp(36px, 4.4vw, 62px) 0 0;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  max-width: none;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.video-btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.video-btn:hover img,
.video-btn:focus-visible img { opacity: 1; }

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(58px, 6vw, 78px);
  height: clamp(58px, 6vw, 78px);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 14px 34px -14px rgba(20, 21, 25, 0.7);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.video-btn:hover .video-play,
.video-btn:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.09); }

.video-play svg {
  width: 40%;
  height: 40%;
  margin-left: 8%;
  fill: var(--ink);
}

.video-embed figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

/* ---- Full-bleed film band ---- */
.section.film {
  background: var(--ink);
  padding: clamp(48px, 6vw, 92px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}
.film-head { margin-bottom: clamp(28px, 3.4vw, 46px); }
.film .eyebrow { color: var(--yellow); }
.film h2 { color: var(--paper); max-width: 20ch; }
.film h2 em { color: var(--yellow); }

/* Edge to edge: the figure sits outside .wrap, so it spans the viewport. */
.film-embed { margin: 0; }
.film-embed .video-frame {
  border-left: 0;
  border-right: 0;
  border-color: rgba(255, 255, 255, 0.14);
}

.film-note {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-size: 15.5px;
  color: rgba(247, 244, 238, 0.62);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   The reel strip — vertical 9:16 video testimonials.

   Four across on desktop, a thumb-scrolled row on phones. Same click-to-load
   contract as the main embed: no player until someone asks for one.

   Motion is deliberately three timings and no more:
     160ms  anything the pointer touches   (Linear's measured interactive band)
     780ms  anything arriving              (the curtain, further down)
     300ms  anything crossfading
   -------------------------------------------------------------------------- */
.reels {
  display: grid;
  /* However many tiles there are, they share the row equally and the strip
     still reaches both edges. Hard-coding four columns left a hole the day a
     student came off the site. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(32px, 4vw, 54px);
}

.reel { min-width: 0; }

.reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  /* Siblings dim while one is playing. */
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reels.is-playing .reel:not(.is-active) .reel-frame { opacity: 0.45; }

.reel-frame iframe,
.reel-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: var(--ink);
}

.reel-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 14px;
  max-width: none;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}

.reel-btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reel-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transform: scale(1);
  transition: opacity 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reel-btn:hover img,
.reel-btn:focus-visible img { opacity: 1; transform: scale(1.03); }

.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(44px, 3.6vw, 56px);
  height: clamp(44px, 3.6vw, 56px);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 12px 28px -12px rgba(20, 21, 25, 0.75);
  transition: transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reel-btn:hover .reel-play,
.reel-btn:focus-visible .reel-play { transform: translate(-50%, -50%) scale(1.09); }

.reel-play svg { width: 38%; height: 38%; margin-left: 8%; fill: var(--ink); }

.reel-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 13px 0 0;
  max-width: none;
}
.reel-name {
  font-family: var(--display);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.3;
}
.reel-result {
  font-size: 14px;
  line-height: 1.4;
  color: var(--yellow-deep);
}

/* --------------------------------------------------------------------------
   How a reel arrives.

   The rest of the site fades up. The strip does not: four tiles fading in
   together read as a card grid, which is the one thing this row is not meant
   to look like. Instead an ink curtain slides up off each frame in turn, left
   to right, the way a filmstrip is pulled through. The poster underneath is
   already settling out of a slight push in, so the picture is alive by the
   moment it is uncovered, and the name arrives a beat later.

   One shared delay per tile drives all three, so they can never drift apart.
   -------------------------------------------------------------------------- */
html.js .reels > .reel:nth-child(1) { --reel-delay: 0ms; }
html.js .reels > .reel:nth-child(2) { --reel-delay: 110ms; }
html.js .reels > .reel:nth-child(3) { --reel-delay: 220ms; }
html.js .reels > .reel:nth-child(4) { --reel-delay: 330ms; }
html.js .reels > .reel:nth-child(n+5) { --reel-delay: 400ms; }

html.js .reel.reveal {
  /* The tile itself no longer moves. Only what is inside it does. */
  opacity: 1;
  transform: none;
  transition: none;
}

html.js .reel .reel-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--ink);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.78s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reel-delay, 0ms);
}
html.js .reel.in .reel-frame::after { transform: translateY(-101%); }

@keyframes reel-settle {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
/* backwards, not forwards: the push in holds through the delay, then the
   image is handed back to its ordinary state so hover still works. */
html.js .reel.in .reel-btn img {
  animation: reel-settle 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: var(--reel-delay, 0ms);
}

html.js .reel .reel-who {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--reel-delay, 0ms) + 300ms);
}
html.js .reel.in .reel-who { opacity: 1; transform: none; }

@media (max-width: 960px) {
  /* Thumb-scrolled row. Tiles keep their real width and snap. */
  .reels {
    display: flex;
    gap: 14px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel {
    flex: 0 0 63%;
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  .reel { flex-basis: 72%; }
}

/* ==========================================================================
   PENCIL LAYER
   Every drawing on this site is authored as SVG on the page, not shipped as
   an image. Two things make it read as pencil rather than as clipart: a
   turbulence displacement that puts a wobble in every line, and strokes drawn
   twice at different weights so the edge is never mechanically clean. Ink on
   the same paper the rest of the site is printed on, multiplied into it.
   ========================================================================== */

.sketch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sketch {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  mix-blend-mode: multiply;
  color: var(--graphite);
}
.sketch .ln {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the second pass: lighter, fractionally offset, the way a real line gets
   gone over twice */
.sketch .ln2 {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  transform: translate(0.8px, 0.7px);
}
.sketch .hl { fill: var(--yellow-light); opacity: 0.5; }
.sketch .sh { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: 0.3; stroke-linecap: round; }
.sketch .accent { stroke: var(--yellow-deep); }

@media (prefers-reduced-motion: no-preference) {
  .sketch { filter: url(#pencilWobble); }
}

/* ==========================================================================
   PAIN POINTS + WHO IS THIS FOR  (index #problem)
   ========================================================================== */

.pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
  margin-top: clamp(38px, 4.4vw, 70px);
}
.pain-fig {
  margin: 0 0 20px;
  max-width: 240px;
}
.pain h3 {
  font-size: clamp(20px, 1.6vw, 25px);
  margin-bottom: 0.4em;
}
.pain p {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.62;
}

.who {
  margin-top: clamp(48px, 5.5vw, 88px);
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 3.4vw, 50px);
}
.who-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 22px;
  margin-bottom: clamp(26px, 3vw, 44px);
}
.who-head h3 { margin: 0; font-size: clamp(22px, 2vw, 32px); }
.who-head p { margin: 0; color: var(--muted); font-size: 16.5px; }

.who-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 32px);
}
.who-one { text-align: center; }
.who-one svg { max-width: 122px; margin: 0 auto 16px; }
.who-one strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.who-one span {
  display: block;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 3px;
}
.who-all {
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 26px);
  letter-spacing: -0.015em;
}
.who-all em { font-style: normal; color: var(--yellow-deep); }

/* ==========================================================================
   THE FIFTEEN-DAY CURVE  (index #program)
   A graph, because the promise of the programme is a shape: nothing for two
   days, then a steep climb, then a plateau you can stand on.
   ========================================================================== */

.curve {
  margin-top: clamp(34px, 4vw, 60px);
  position: relative;
}
.curve svg { width: 100%; height: auto; display: block; overflow: visible; }
.curve-grid { stroke: var(--line); stroke-width: 1; }
.curve-line {
  fill: none;
  stroke: var(--yellow-deep);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.curve-fill { fill: var(--yellow); opacity: 0.13; }
.curve-dot { fill: var(--paper-bright); stroke: var(--ink); stroke-width: 2.4; }
.curve-axis {
  font-family: var(--display);
  font-size: 13px;
  fill: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.curve-day {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}
.curve-what { font-size: 13.5px; fill: var(--muted); font-family: var(--body); }

@media (prefers-reduced-motion: no-preference) {
  html.js .curve-line {
    stroke-dasharray: var(--curve-len, 2000);
    stroke-dashoffset: var(--curve-len, 2000);
  }
  html.js .curve.is-in .curve-line {
    transition: stroke-dashoffset 1500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    stroke-dashoffset: 0;
  }
  html.js .curve-dot, html.js .curve-day, html.js .curve-what { opacity: 0; }
  html.js .curve.is-in .curve-dot,
  html.js .curve.is-in .curve-day,
  html.js .curve.is-in .curve-what {
    opacity: 1;
    transition: opacity 420ms ease var(--d, 0ms);
  }
}

.curve-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  font-size: 16px;
  color: var(--muted);
}
.curve-legend b { color: var(--ink); font-family: var(--display); }

/* ==========================================================================
   TESTIMONIAL CARDS  (index #results, programs)
   ========================================================================== */

.tcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(34px, 4vw, 56px);
}
.tcard {
  display: flex;
  flex-direction: column;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  padding: clamp(20px, 1.8vw, 30px);
  position: relative;
}
.tcard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--yellow);
}
.tcard-face {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.tcard-face img { width: 100%; height: 100%; object-fit: cover; }
.tcard-face span { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.2; padding: 4px; }
.tcard blockquote {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.015em;
}
.tcard-note {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  flex: 1 1 auto;
}
.tcard-who {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.tcard-who strong { font-family: var(--display); }
.tcard-who span { color: var(--muted); }
.tcard-stat {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 700;
  color: var(--yellow-deep);
}

/* ==========================================================================
   AUTO CAROUSEL  (index #film)
   ========================================================================== */

.film-head { text-align: center; max-width: 900px; margin: 0 auto; }
.film-head h2 { text-wrap: balance; }

.carousel {
  margin: clamp(30px, 3.4vw, 52px) auto 0;
  padding: 0 var(--gutter);
  max-width: 1180px;
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 6px;
}
.carousel-slide .video-embed { margin: 0; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.carousel-dots button {
  width: 34px;
  height: 4px;
  border: 0;
  padding: 0;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 260ms ease;
}
.carousel-dots button[aria-current="true"] { background: var(--yellow-deep); }
.carousel-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ==========================================================================
   MENTOR SPLIT: photos left, words right  (index #mentor)
   ========================================================================== */

.mentor-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 68px);
  align-items: start;
  margin-top: clamp(30px, 3.4vw, 54px);
}
.mentor-photos { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.mentor-photos figure { margin: 0; }
.mentor-photos img { width: 100%; }
.mentor-photos figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 7px;
  letter-spacing: 0.01em;
}
.mentor-photos .ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }

.mentor-read p {
  font-size: clamp(17.5px, 1.15vw, 19.5px);
  line-height: 1.72;
  max-width: 62ch;
}
.mentor-read p + p { margin-top: 1.1em; }

/* proof list: each credential can carry a photo, a link, or both */
.proof {
  list-style: none;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.proof li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.proof-shot {
  width: 76px;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-strong);
  background: var(--paper-bright);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
}
.proof-shot img { width: 100%; height: 100%; object-fit: cover; }
.proof-what { font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.proof-what span { display: block; font-family: var(--body); font-size: 14.5px; color: var(--muted); letter-spacing: 0; }
.proof-link { font-size: 14.5px; white-space: nowrap; }
.proof-link[aria-disabled="true"] { color: var(--muted); text-decoration: none; pointer-events: none; }

/* ==========================================================================
   THE PHOTO WALL  (index #community, community #inside)

   Every photograph keeps the shape it was taken in. The last version cropped
   each one to a square, which cuts the people off both ends of a line-up and
   is the reason it looked wrong. A column flow costs nothing to lay out and
   never crops anything.
   ========================================================================== */

.gallery {
  columns: 3 300px;
  column-gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(30px, 3.4vw, 52px);
}
.gallery figure {
  margin: 0 0 clamp(10px, 1.1vw, 16px);
  break-inside: avoid;
  overflow: hidden;
  background: var(--paper-bright);
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery figure:hover img { transform: scale(1.035); }

.gallery-note {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  max-width: 68ch;
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.7;
}

@media (max-width: 620px) { .gallery { columns: 2 140px; } }
@media (prefers-reduced-motion: reduce) {
  .gallery img { transition: none; }
  .gallery figure:hover img { transform: none; }
}

/* ==========================================================================
   QUESTION PICKER  (index #faq)
   ========================================================================== */

.qpick { margin-top: clamp(30px, 3.4vw, 52px); }
.qpick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 clamp(26px, 3vw, 40px);
  list-style: none;
}
.qpick-list button {
  font-family: var(--display);
  font-size: 15.5px;
  letter-spacing: -0.01em;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  background: var(--paper-bright);
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.qpick-list button:hover { border-color: var(--ink); }
.qpick-list button[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.qpick-list button:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 2px; }

.qpick-answer {
  border-top: 2px solid var(--ink);
  padding-top: clamp(22px, 2.4vw, 34px);
  min-height: 190px;
}
.qpick-answer h3 {
  font-size: clamp(22px, 2vw, 31px);
  margin-bottom: 0.5em;
  text-wrap: balance;
}
.qpick-answer p {
  margin: 0;
  max-width: 66ch;
  font-size: clamp(17px, 1.15vw, 19.5px);
  line-height: 1.72;
}
@media (prefers-reduced-motion: no-preference) {
  .qpick-answer > * { animation: qFade 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  .qpick-answer p { animation-delay: 70ms; }
}
@keyframes qFade {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
/* with JavaScript off the picker is meaningless, so the plain list shows */
html.js .qpick-fallback { display: none; }
html:not(.js) .qpick-live { display: none; }

/* ==========================================================================
   PLEDGE CARDS  (index #social)
   ========================================================================== */

.pledges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(34px, 4vw, 58px);
}
.pledge {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  background: var(--paper-bright);
  padding: clamp(24px, 2.6vw, 42px);
  text-decoration: none;
  color: inherit;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 300ms ease, border-color 300ms ease;
}
.pledge:hover, .pledge:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 14px 34px rgba(20, 21, 25, 0.09);
}
.pledge .sketch { max-width: 150px; margin-bottom: clamp(16px, 1.8vw, 26px); }
.pledge h3 { font-size: clamp(23px, 2vw, 31px); margin-bottom: 0.35em; }
.pledge p {
  margin: 0 0 clamp(22px, 2.4vw, 32px);
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.62;
  flex: 1 1 auto;
}
.pledge-go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--yellow-deep);
}
.pledge-go::after {
  content: "\2192";
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pledge:hover .pledge-go::after { transform: translateX(6px); }

/* ==========================================================================
   CENTRED CLOSING CALL TO ACTION
   ========================================================================== */

.cta-centre { text-align: center; }
.cta-centre > * { margin-left: auto; margin-right: auto; }
.cta-centre h2 { max-width: 18ch; text-wrap: balance; }
.cta-centre .lead { max-width: 56ch; }
.cta-centre .btn-row, .cta-centre .chip-list { justify-content: center; }

.cta-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px);
  max-width: 1020px;
  margin: clamp(38px, 4.4vw, 66px) auto 0;
  padding: clamp(30px, 3.4vw, 46px) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.cta-proof li { list-style: none; }
.cta-proof strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cta-proof span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}

/* ==========================================================================
   THE WALL: testimonial videos drifting in opposite directions
   The layout picked off the webinar page. Three columns here rather than
   five, because these cards carry a written line under the face and need the
   width to stay readable.
   ========================================================================== */

.wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  height: min(62vh, 640px);
  overflow: hidden;
  margin-top: clamp(32px, 3.8vw, 56px);
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
}
.wall-col { overflow: hidden; }
.wall-track {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.3vw, 20px);
  will-change: transform;
}
.wcard {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  display: block;
  text-align: left;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper-bright);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.wcard:hover, .wcard:focus-visible { border-color: var(--ink); box-shadow: 0 10px 26px rgba(20, 21, 25, 0.1); }
.wcard-shot {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  overflow: hidden;
}
.wcard-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.wcard-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 12.5px;
  color: var(--muted);
}
.wcard-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(247, 244, 238, 0.92);
  border: 1px solid var(--ink);
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wcard-play::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 16px;
  border-left: 15px solid var(--ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.wcard:hover .wcard-play { transform: scale(1.1); }
.wcard-meta { display: block; padding: 14px 16px 16px; }
.wcard-q {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.wcard-who { display: block; margin-top: 7px; font-size: 13.5px; color: var(--muted); }

/* ==========================================================================
   ROADMAP  (community #steps)
   ========================================================================== */

.roadmap {
  position: relative;
  margin: clamp(38px, 4.4vw, 66px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px);
}
.roadmap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 9px, transparent 9px 17px);
}
.roadmap li { position: relative; }
.rm-pin {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.roadmap li:last-child .rm-pin { background: var(--yellow); border-color: var(--yellow-deep); }
.roadmap h3 { font-size: clamp(19px, 1.5vw, 24px); margin-bottom: 0.4em; }
.roadmap p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   GRAPHIC CARDS  (community #inside, programs)
   ========================================================================== */

.gcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(34px, 4vw, 56px);
}
.gcard {
  border: 1px solid var(--line);
  background: var(--paper-bright);
  padding: clamp(20px, 2vw, 30px);
  display: flex;
  flex-direction: column;
}
.gcard .sketch { max-width: 150px; margin-bottom: clamp(16px, 1.8vw, 26px); }
.gcard h3 { font-size: clamp(19px, 1.5vw, 24px); margin-bottom: 0.4em; }
.gcard p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* two-up: a drawing on one side, clean points on the other */
.split-draw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(30px, 3.4vw, 54px);
}
.split-draw .sketch { max-width: 460px; }
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding: 0 0 18px 38px;
  font-size: clamp(17px, 1.15vw, 19.5px);
  line-height: 1.55;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 17px;
  height: 9px;
  border-left: 2.4px solid var(--yellow-deep);
  border-bottom: 2.4px solid var(--yellow-deep);
  transform: rotate(-45deg);
}
.tick-list strong { font-family: var(--display); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .pains { grid-template-columns: 1fr 1fr; }
  .tcards { grid-template-columns: 1fr 1fr; }
  .gcards { grid-template-columns: 1fr 1fr; }
  .cta-proof { grid-template-columns: 1fr 1fr; }
  .roadmap { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .roadmap::before { display: none; }
  .mentor-split { grid-template-columns: 1fr; }
  .split-draw { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .who-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
}

@media (max-width: 700px) {
  .pains { grid-template-columns: 1fr; }
  .tcards { grid-template-columns: 1fr; }
  .gcards { grid-template-columns: 1fr; }
  .pledges { grid-template-columns: 1fr; }
  .who-row { grid-template-columns: 1fr 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .proof li { grid-template-columns: 60px minmax(0, 1fr); }
  .proof-shot { width: 60px; }
  .proof-link { grid-column: 2; }
  /* the wall stops drifting and becomes a plain swipeable row */
  .wall {
    display: flex;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scrollbar-width: none;
    gap: 14px;
  }
  .wall::-webkit-scrollbar { display: none; }
  .wall-col, .wall-track { display: contents; }
  .wall-col:nth-child(3), .wall-col:nth-child(4) { display: contents; }
  .wcard { flex: 0 0 68%; scroll-snap-align: start; }
  .wcard.is-dup { display: none; }
}

/* ==========================================================================
   BEFORE AND AFTER  (results #shift)
   A comparison, laid out as one. The old version was six loose notes and you
   had to work out for yourself which after belonged to which before.
   ========================================================================== */

.shift { margin-top: clamp(30px, 3.4vw, 52px); }
.shift-head, .shift-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
.shift-head {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.shift-label {
  grid-column: 2;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.shift-label.is-after { grid-column: 3; color: var(--yellow-deep); }
.shift-row {
  padding: clamp(22px, 2.4vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.shift-no {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.shift-cell h3 { font-size: clamp(19px, 1.5vw, 24px); margin-bottom: 0.35em; }
.shift-cell p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.shift-cell.is-before h3 { color: var(--muted); }
.shift-cell.is-after { position: relative; }
.shift-cell.is-after::before {
  content: "";
  position: absolute;
  left: calc(clamp(20px, 3vw, 56px) / -2);
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}

.wall-note {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

/* ==========================================================================
   ONE STORY, OPENED ON TOP  (results)
   ========================================================================== */

.vmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 21, 25, 0.72);
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 40px);
  overflow-y: auto;
}
.vmodal[hidden] { display: none; }
.vmodal-sheet {
  position: relative;
  background: var(--paper);
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 38px);
  padding: clamp(22px, 2.6vw, 40px);
}
.vmodal-x {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.vmodal-x:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 2px; }
.vmodal-media { min-width: 0; }
.vmodal-media video {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 68vh;
  background: var(--ink);
  display: block;
}
.vmodal-media .vmodal-still {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.vmodal-words { min-width: 0; align-self: center; }
.vmodal-words blockquote {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.vmodal-words p { margin: 0; font-size: 17px; line-height: 1.68; color: var(--graphite); }
.vmodal-who {
  margin-top: 22px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: 15.5px;
}
.vmodal-who strong { font-family: var(--display); }
.vmodal-who span { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .vmodal-sheet { animation: sheetIn 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .vmodal-sheet { grid-template-columns: 1fr; }
  .vmodal-media video { max-height: 46vh; }
  .shift-head, .shift-row { grid-template-columns: 40px minmax(0, 1fr); }
  .shift-label.is-after, .shift-cell.is-after { grid-column: 2; }
  .shift-cell.is-after { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
  .shift-cell.is-after::before { display: none; }
  .shift-head { display: none; }
  .shift-cell.is-before h3::before,
  .shift-cell.is-after h3::before {
    content: "Before";
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
  }
  .shift-cell.is-after h3::before { content: "After"; color: var(--yellow-deep); }
}

/* a hero image that has not arrived yet, drawn at the size it will be */
.hero-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-strong);
  background: var(--paper-bright);
  padding: 24px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

/* A hero with nothing beside it. The image on the community page came out, so
   the headline takes the full measure instead of leaving an empty column. */
.hero-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.hero-grid.is-single h1 { max-width: 20ch; }
.hero-grid.is-single .lead { max-width: 58ch; }

/* ==========================================================================
   PROGRAMME PAGE
   ========================================================================== */

/* The drawing and the points can lead from either side. */
.split-draw.is-flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
.split-draw.is-flip .sketch { order: 2; }
.split-draw.is-flip .tick-list { order: 1; }

/* ---- The rail, made the size it deserves ----
   It was a narrow column of small type against fifteen full-width rows. It is
   the thing that tells you where you are in the fortnight, so it now takes a
   real share of the width and the counter reads at arm's length. */
.spine { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
.spine .rail-num { font-size: clamp(74px, 9vw, 150px); }
.spine .rail-of { font-size: 15px; margin-bottom: 22px; }
.spine .rail-label { font-size: clamp(21px, 1.9vw, 28px); max-width: 17ch; }
.spine-rail { grid-template-columns: 3px minmax(0, 1fr); gap: 0 30px; }
.rail-track { width: 3px; height: clamp(240px, 40vh, 440px); }

/* ---- The bonus day, in yellow ----
   It is the one session that is recorded and yours to keep, so it should not
   look like the fifteen live ones. */
.day.is-bonus {
  background: var(--yellow);
  box-shadow: inset 4px 0 0 var(--yellow-deep);
  padding-left: 24px;
  padding-right: 20px;
}
.day.is-bonus .day-tag { color: var(--ink); opacity: 0.72; }
.day.is-bonus .day-points li { color: var(--ink); }
.day.is-bonus .day-who { color: var(--ink); opacity: 0.72; }
.day.is-bonus .day-flag { border-color: var(--ink); color: var(--ink); }

/* ---- Mentors as cards ---- */
.pcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(34px, 4vw, 56px);
}
.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper-bright);
}
.pcard-shot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 16px;
  line-height: 1.3;
}
.pcard-shot img { width: 100%; height: 100%; object-fit: cover; }
.pcard-when {
  margin: clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px) 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  max-width: none;
}
.pcard h3 {
  margin: 0 clamp(18px, 1.8vw, 26px) 0.4em;
  font-size: clamp(19px, 1.5vw, 24px);
}
.pcard-note {
  margin: 0 clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: none;
}

.note-line { margin-top: clamp(20px, 2.2vw, 30px); font-size: 15.5px; color: var(--muted); }

@media (max-width: 1100px) {
  .pcards { grid-template-columns: 1fr 1fr; }
  .spine { grid-template-columns: minmax(0, 1fr); }
  .split-draw.is-flip { grid-template-columns: minmax(0, 1fr); }
  .split-draw.is-flip .sketch { order: 1; }
  .split-draw.is-flip .tick-list { order: 2; }
}

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

/* The dots sit on the dark film band, where the ordinary hairline colour is
   invisible. */
.film .carousel-dots button { background: rgba(247, 244, 238, 0.3); }
.film .carousel-dots button[aria-current="true"] { background: var(--yellow); }
.film-note.is-centred { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   ROUND TWO OF THE FEEDBACK
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section headings, centred everywhere.

   They used to be a two-part block: title on the left, supporting line on the
   right. You asked for the title in the middle with a short line under it, so
   the same markup now stacks and centres. Nothing in the pages had to move.
   -------------------------------------------------------------------------- */
.head-split {
  display: block;
  text-align: center;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(30px, 3.4vw, 52px);
}
.head-split > div { display: contents; }
.head-split h2 { margin-bottom: 0; text-wrap: balance; }
.head-split .lead {
  max-width: 44ch;
  margin: clamp(14px, 1.4vw, 20px) auto 0;
  font-size: clamp(17px, 1.25vw, 19.5px);
}
.head-split .eyebrow { margin-bottom: 14px; }
.film h2 { margin-inline: auto; }

/* Filled pencil marks: eyes, pupils, small solid dots. */
.sketch .fl { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   The recurring figure.

   One character now appears in every drawing rather than a new stranger each
   time: same head, same tuft of hair, same shoulders. Only the object beside
   them changes. That is what makes a set of drawings read as a set instead of
   as clipart.
   -------------------------------------------------------------------------- */
.who-row { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.who-one svg { max-width: 132px; margin: 0 auto 14px; }
.who-head { display: block; text-align: center; }
.who-head h3 { margin: 0 auto; max-width: 20ch; }
.who-all { text-align: center; max-width: none; }

/* --------------------------------------------------------------------------
   The chat.

   You asked for the questions in a WhatsApp format, so they are a
   conversation now rather than a row of tabs. Tapping a question sends it,
   the reply takes a beat to be typed, and then it arrives. The delay is the
   whole point: an answer that appears instantly reads as a database, and an
   answer that is typed reads as a person.
   -------------------------------------------------------------------------- */
.wa {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  background: #ece5dd;
  box-shadow: 0 30px 60px -40px rgba(20, 21, 25, 0.55);
}

.wa-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--whatsapp);
  color: #fff;
}
.wa-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.wa-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wa-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wa-who strong { font-family: var(--display); font-size: 16px; letter-spacing: -0.01em; }
.wa-who span { font-size: 12.5px; opacity: 0.85; }

/* The thread. The wallpaper is two faint hatchings, so it reads as a chat
   background without loading an image. */
.wa-thread {
  height: clamp(360px, 46vh, 470px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 14px 6px;
  background-color: #ece5dd;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(20,21,25,0.02) 0 2px, transparent 2px 26px);
  scroll-behavior: smooth;
}
.wa-day {
  display: block;
  width: max-content;
  margin: 0 auto 16px;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.wa-msg {
  position: relative;
  max-width: 78%;
  margin: 0 0 10px;
  padding: 9px 13px 8px;
  border-radius: 9px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(20, 21, 25, 0.13);
  animation: wa-pop 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wa-msg.is-in  { background: #fff; margin-right: auto; border-top-left-radius: 2px; }
.wa-msg.is-out { background: #dcf8c6; margin-left: auto; border-top-right-radius: 2px; }
.wa-msg p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; }
.wa-msg p + p { margin-top: 8px; }
.wa-time {
  display: block;
  margin-top: 3px;
  text-align: right;
  font-size: 11px;
  color: rgba(20, 21, 25, 0.42);
}
.wa-msg.is-out .wa-time::after {
  content: " \2713\2713";
  color: #34b7f1;
  letter-spacing: -2px;
}

@keyframes wa-pop {
  from { opacity: 0; transform: translateY(9px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* The three dots, while the reply is being written. */
.wa-typing {
  display: flex;
  gap: 5px;
  width: max-content;
  margin: 0 auto 10px 0;
  padding: 13px 15px;
  border-radius: 9px;
  border-top-left-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(20, 21, 25, 0.13);
}
.wa-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(20, 21, 25, 0.3);
  animation: wa-blink 1.25s infinite ease-in-out;
}
.wa-typing i:nth-child(2) { animation-delay: 0.18s; }
.wa-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes wa-blink {
  0%, 60%, 100% { opacity: 0.28; transform: none; }
  30%           { opacity: 0.95; transform: translateY(-3px); }
}

/* The questions you can send, sitting where the keyboard would be. */
.wa-ask {
  padding: 12px 14px 14px;
  background: var(--paper-bright);
  border-top: 1px solid var(--line);
}
.wa-ask-label {
  margin: 0 0 9px;
  max-width: none;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.wa-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wa-chips button {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.wa-chips button:hover { background: var(--yellow-light); border-color: var(--yellow-deep); }
.wa-chips button:active { transform: translateY(1px); }
.wa-chips button[data-used="true"] { opacity: 0.4; }
.wa-chips button:disabled { cursor: default; opacity: 0.4; }

.wa-foot {
  margin: clamp(18px, 2vw, 26px) auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 15.5px;
  color: var(--muted);
}

/* No JavaScript, no chat: the plain list of questions and answers stands in. */
html:not(.js) .wa { display: none; }

@media (max-width: 640px) {
  .wa { border-radius: 14px; }
  .wa-msg { max-width: 88%; font-size: 15px; }
  .wa-thread { height: 60vh; }
}

/* --------------------------------------------------------------------------
   The swap  (results #shift)

   It was a neat two-column table, and a neat two-column table is the most
   boring shape on the internet. It is now a run of sentences down the page,
   stepping left and right, where the old habit is struck out in pencil as it
   comes into view and the new one is ringed in yellow.
   -------------------------------------------------------------------------- */
.swap { list-style: none; margin: clamp(20px, 3vw, 40px) 0 0; padding: 0; }
.swap li {
  position: relative;
  max-width: 760px;
  padding: clamp(24px, 2.6vw, 38px) 0;
  border-bottom: 1px solid var(--line);
}
.swap li:nth-child(even) { margin-left: auto; text-align: right; }
.swap li:last-child { border-bottom: none; }

.swap-n {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--yellow-deep);
  margin-bottom: 14px;
}
.swap-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  font-family: var(--display);
  font-size: clamp(23px, 2.9vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.025em;
}
.swap li:nth-child(even) .swap-line { justify-content: flex-end; }

.swap-was { position: relative; color: var(--muted); }
.swap-strike {
  position: absolute;
  left: -2%;
  top: 44%;
  width: 104%;
  height: 0.55em;
  overflow: visible;
  color: var(--ink);
  pointer-events: none;
}
.swap-strike path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 620ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.swap li.is-drawn .swap-strike path { stroke-dashoffset: 0; }

.swap-then {
  color: var(--yellow-deep);
  font-size: 0.46em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The new habit is marked the way somebody marks a book: a highlighter
   swipe that runs in behind the words a beat after the old one is crossed
   out. A drawn ring had to be stretched to fit every phrase width, and a
   stretched ring reads as a mistake; a swipe fits anything. */
.swap-now {
  position: relative;
  color: var(--ink);
  background-image: linear-gradient(var(--yellow-light), var(--yellow-light));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0% 40%;
  transition: background-size 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 360ms;
}
.swap li:nth-child(even) .swap-now { background-position: 100% 86%; }
.swap li.is-drawn .swap-now { background-size: 100% 40%; }

.swap-note {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}
.swap li:nth-child(even) .swap-note { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .swap-strike path { transition: none; stroke-dashoffset: 0; }
  .swap-now { transition: none; background-size: 100% 40%; }
  .wa-msg { animation: none; }
  .wa-typing i { animation: none; }
}

@media (max-width: 720px) {
  .swap li, .swap li:nth-child(even) { margin: 0; text-align: left; }
  .swap li:nth-child(even) .swap-line { justify-content: flex-start; }
  .swap li:nth-child(even) .swap-note { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   The wall, smaller.

   You asked for every testimonial and for each one to take less room. The
   cards are about a third shorter, so eight people now pass the eye instead
   of three, and the wall itself is taller on the page.
   -------------------------------------------------------------------------- */
.wall { height: min(76vh, 780px); gap: clamp(10px, 1vw, 16px); }
@media (min-width: 861px) {
  .wall.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wall .wcard-meta { padding: 12px 13px 14px; }
.wall .wcard-q { font-size: 14.5px; line-height: 1.38; }
.wall .wcard-who { font-size: 12.5px; margin-top: 5px; }
.wall .wcard-slot { font-size: 12px; }
.wall .wcard-play { width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   Boxed points  (programs)

   You asked for the text in boxes. Each line is its own panel now, ticked in
   the corner, so eleven separate things read as eleven separate things.
   -------------------------------------------------------------------------- */
.box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.box-list li {
  position: relative;
  margin: 0;
  padding: 15px 18px 15px 46px;
  border: 1px solid var(--line);
  background: var(--paper-bright);
  font-size: 16.5px;
  line-height: 1.5;
  transition: border-color 200ms ease, transform 200ms ease;
}
.box-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 13px;
  height: 8px;
  border-left: 2.4px solid var(--yellow-deep);
  border-bottom: 2.4px solid var(--yellow-deep);
  transform: rotate(-45deg);
}
.box-list li:hover { border-color: var(--line-strong); transform: translateX(3px); }
.box-list strong { font-weight: 700; }

.split-draw .box-list { align-self: center; }
@media (min-width: 900px) {
  .box-list.is-two { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   The graduation film, on its own.

   There is one film, so there is one player. It sits inside the page rather
   than bleeding to the edges, with room either side of it.
   -------------------------------------------------------------------------- */
.film h2 { max-width: 26ch; }
.film .wrap > .film-embed { max-width: 1180px; margin: 0 auto; }
.film .wrap > .film-embed .video-frame {
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.film-note { max-width: 56ch; margin-inline: auto; }

/* .section p caps paragraphs at 66ch, which was quietly holding the
   placeholder to a 477px box and pushing it off centre inside the frame. */
.video-frame .video-placeholder { max-width: none; }

/* h2 and the eyebrow both carry a max-width for line length. In a centred
   block that leaves the box hard against the left edge with the text centred
   inside it, which looks like a mistake. Auto margins put the box in the
   middle where it belongs. */
.head-split h2,
.head-split p,
.head-split .eyebrow { margin-left: auto; margin-right: auto; }
.split-draw .sketch { margin-inline: auto; }

/* A photograph fills its frame; the dashed placeholder keeps its padding. */
.pcard-shot.has-photo { padding: 0; }
.pcard-shot img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* --------------------------------------------------------------------------
   The wall below a laptop.

   It used to drop to two columns and hide the rest, which quietly threw away
   two students. Every one of them belongs on this page, so below 860px the
   wall stops drifting and becomes one swipeable row that carries all eight.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .wall, .wall.is-four {
    display: flex;
    grid-template-columns: none;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scrollbar-width: none;
    gap: 14px;
  }
  .wall::-webkit-scrollbar { display: none; }
  .wall-col,
  .wall-col:nth-child(3),
  .wall-col:nth-child(4),
  .wall-track { display: contents; }
  .wcard { flex: 0 0 44%; scroll-snap-align: start; }
  .wcard.is-dup { display: none; }
}

@media (max-width: 700px) {
  .wcard { flex: 0 0 68%; }
}

/* ==========================================================================
   ROUND THREE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header, a different shape.

   Brand on the left, the pages centred in the space between, the two actions
   on the right. The links are set small and spaced out rather than at reading
   size, which is what stops a navigation bar from competing with the headline
   under it. It is also about twenty pixels shorter, which the hero needs.
   -------------------------------------------------------------------------- */
@media (min-width: 961px) {
  .header-inner {
    gap: clamp(20px, 3vw, 56px);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .brand img { height: 34px; }

  .site-nav { flex: 1 1 auto; justify-content: space-between; gap: 0; }
  .site-nav ul { margin: 0 auto; gap: clamp(20px, 2.4vw, 36px); }
  .site-nav a {
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 5px;
  }
  .site-nav a:hover { color: var(--ink); }
  .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

  .nav-cta { flex: 0 0 auto; }
  .nav-cta .btn-small {
    min-height: 40px;
    padding: 8px 17px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   The hero fits on one screen.

   It was running past the fold, so the first thing a visitor saw was a
   headline with the bottom of the page cut off. The section is now exactly
   as tall as what is left under the header, and the photograph is capped so
   that it is the picture that gives way, not the words.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header));
    padding-top: clamp(20px, 2.4vw, 40px);
    padding-bottom: clamp(20px, 2.4vw, 40px);
  }
  .hero > .wrap { width: 100%; }
  .hero h1 { font-size: clamp(38px, 4.2vw, 68px); }
  .hero .lead { margin-top: 16px; }
  .hero .btn-row { margin-top: 26px; }
  .hero .note { margin-top: 16px; }

  .hero-figure img {
    max-height: calc(100svh - var(--header) - 190px);
    object-fit: cover;
    object-position: 50% 18%;
  }
}

/* --------------------------------------------------------------------------
   Two lines that were centred in name only.

   Both sat inside a block with a max width and no automatic margins, so the
   text was centred inside a box that was itself hard against the left edge.
   -------------------------------------------------------------------------- */
.who .who-all {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

#program .curve-legend {
  justify-content: center;
  text-align: center;
}
#program .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   The questions, asked in full.

   A shorthand chip and a full question in the bubble read as two different
   voices. The button now carries the exact sentence that gets sent, which
   means it no longer fits on a pill, so the questions stack.
   -------------------------------------------------------------------------- */
.wa-ask {
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.wa-chips {
  display: grid;
  gap: 6px;
}
.wa-chips li { margin: 0; }
.wa-chips button {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.35;
}
.wa-thread { height: clamp(320px, 40vh, 420px); }

@media (max-width: 560px) {
  .wa-ask { max-height: 156px; }
  .wa-chips button { font-size: 14.5px; padding: 9px 12px; }
}

/* Both of these are paragraphs, so .section p was capping them at 66ch. A
   capped box with no automatic margins sits hard left, and centring the text
   inside it only makes the box look misplaced. */
#program .curve-legend,
#program .btn-row {
  margin-left: auto;
  margin-right: auto;
}

/* The header height. Every sticky child and the hero are measured against
   this, so it has to match what the header actually is; the round eight block
   at the end of this file sets the number the new bar comes to. */

/* the new heading is a sentence, not a label, so it needs a wider line */
.who-head h3 { max-width: 32ch; }

/* ==========================================================================
   THE DRAWINGS, AS PICTURES

   Every sketch that used to be drawn in code is now a generated image. They
   arrive as grey illustrations on a flat light field; that field has been
   rescaled to pure white on the way in, so multiplying them onto the page
   leaves no rectangle behind and the drawing picks up the warmth of the paper
   rather than sitting on top of it.
   ========================================================================== */
.sketch-img,
.icon-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* the three reasons: the drawings are wider than the old ones, so the box
   they sit in grows with them */
.pain-fig { max-width: 300px; }

/* the five people: portrait now rather than a standing figure in a tall box */
.who-one .sketch-img { max-width: 168px; margin: 0 auto 14px; }

.pledge .sketch-img { max-width: 230px; margin-bottom: clamp(16px, 1.8vw, 26px); }
.gcard .sketch-img { max-width: 260px; margin-bottom: clamp(16px, 1.8vw, 26px); }

.split-draw .sketch-img { max-width: 520px; margin-inline: auto; }
.split-draw.is-flip .sketch-img { order: 2; }

/* --------------------------------------------------------------------------
   The six things you leave with.

   This was one drawing containing six marks. It is six pictures now, which
   means any one of them can be redone without touching the other five.
   -------------------------------------------------------------------------- */
.icon-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px) clamp(14px, 1.8vw, 26px);
  align-self: center;
}
.icon-row li {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.icon-row .icon-img { max-width: 96px; }
.icon-row span {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 15ch;
}

@media (max-width: 900px) {
  .split-draw .sketch-img { max-width: 420px; }
  .icon-row { gap: 20px 14px; }
  .icon-row .icon-img { max-width: 76px; }
}
@media (max-width: 620px) {
  .pain-fig { max-width: 260px; }
  .who-one .sketch-img { max-width: 132px; }
  .icon-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the pencil filter and its defs only ever applied to the code drawings, and
   there are none left; the rule is kept out of the way rather than deleted so
   that a hand-drawn SVG can still be dropped in later */
.sketch-defs { display: none; }

/* --------------------------------------------------------------------------
   A common baseline.

   The generated drawings do not share an aspect ratio the way the code ones
   did, so left alone each card's heading starts at a different height. Giving
   the figure a fixed box and standing the drawing on the bottom of it puts
   every heading back on one line.
   -------------------------------------------------------------------------- */
.pain-fig {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: clamp(180px, 17vw, 250px);
  max-width: 300px;
}
.pain-fig .sketch-img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.who-one .sketch-img {
  height: clamp(150px, 13vw, 190px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 14px;
}

.gcard .sketch-img {
  height: clamp(130px, 11vw, 165px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 0 clamp(16px, 1.8vw, 26px);
}

.pledge .sketch-img {
  height: clamp(150px, 13vw, 190px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: clamp(16px, 1.8vw, 26px);
}

.icon-row .icon-img {
  height: 82px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 900px) { .icon-row .icon-img { height: 68px; } }

/* ==========================================================================
   ROUND SIX  ·  19 August 2026

   Three instructions, kept together at the end of the sheet so the change
   reads as one decision instead of being hunted for across three thousand
   lines.

     1  The testimonial wall runs wider than the column of writing.
     2  Every title, and the line under it, sits in the middle.
     3  No title runs past two lines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · The wall, wider

   It used to sit inside the same 1680px column as the paragraphs. That is the
   right measure for a sentence and much too narrow for five columns of video,
   so the wall now takes the viewport and leaves only a gutter.
   -------------------------------------------------------------------------- */
.wall-wide {
  width: 100%;
  padding: 0 clamp(14px, 2.2vw, 48px);
}
@media (min-width: 861px) {
  .wall.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wall { height: min(80vh, 860px); }
}

/* The reel strip on the home page gets the same room. Five vertical films
   inside a text column left each one smaller than a phone. */
.reels-wide { width: 100%; padding: 0 clamp(14px, 2.2vw, 48px); }

/* --------------------------------------------------------------------------
   2 · Centred

   You asked for every title and whatever sits under it to be in the middle,
   across the whole site. The blocks below are the ones that are a heading
   with words beneath it. Running lists are the deliberate exception further
   down: a centred bullet list has no left edge for the eye to return to, and
   becomes slower to read the longer it gets.
   -------------------------------------------------------------------------- */
.page-hero .wrap,
.film-head,
.who-head,
.section > .wrap > h2,
.section > .wrap > .lead,
.section > .wrap > .note,
.section > .wrap > .note-line,
.cta .wrap,
.hero-copy {
  text-align: center;
}

/* anything centred that carries a measure has to be centred as a box too,
   or it stays pinned to the left of the column it sits in */
.section > .wrap > h2,
.section > .wrap > .lead,
.section > .wrap > p,
.page-hero h1,
.page-hero .lead,
.film-head h2,
.hero-copy h1,
.hero-copy .lead,
.cta h2,
.cta p,
.gallery-note,
.wall-note,
.note-line {
  margin-inline: auto;
}

/* the small blocks: a title with a line or two under it */
.pain,
.gcard,
.pledge,
.who-one,
.tcard,
.pcard,
.award,
.photo-grid figcaption,
.photo-row figcaption,
.proof-what,
.big-quote,
.swap-note,
.stat-band li,
.day-flag {
  text-align: center;
}
.pain p, .gcard p, .pledge p, .tcard p, .pcard p, .award p { margin-inline: auto; }

/* drawings inside a centred block have to be centred as objects too */
.pain-fig, .pledge .sketch-img, .gcard .sketch-img, .who-one .sketch-img,
.tcard-face, .pcard-shot { margin-inline: auto; }

/* buttons under a centred heading */
.btn-row, .btn-row-note, .cta-proof, .chip-list { justify-content: center; text-align: center; }

/* -- the exceptions, and why ---------------------------------------------
   A list of points, a question and its answer, and the written line under a
   face on the wall all read down a left edge. Centring them costs more than
   it gains, so these stay where they are. */
.day-points,
.day-body,
.faq p,
.box-list,
.wcard-meta,
.reel-who,
.vmodal-words,
.wa,
.roll,
.tl-body,
.site-footer,
.site-header { text-align: left; }
.day-points li, .box-list li { text-align: left; }

/* --------------------------------------------------------------------------
   3 · Two lines, not eight

   Every heading on the site is short enough to sit on two lines; what was
   putting them on four was the 22ch measure, which is a caption width being
   asked to hold a sentence. The measures below are set from the longest
   heading on each page, and `balance` keeps the two lines even rather than
   leaving one word stranded underneath.
   -------------------------------------------------------------------------- */
h1, h2 { text-wrap: balance; }

.section h2,
.section > .wrap > h2,
.head-split h2,
.film-head h2,
.cta h2 { max-width: 34ch; }

.page-hero h1 { max-width: 30ch; font-size: clamp(32px, 4.4vw, 62px); }
.hero-copy h1 { max-width: 26ch; }

.head-split .lead,
.page-hero .lead,
.film-head + .wrap .film-note,
.cta p { max-width: 52ch; }

@media (max-width: 700px) {
  /* on a phone the gutter already sets the measure, and a ch limit on top of
     it only makes the column narrower than the screen and adds a line */
  .section h2, .head-split h2, .film-head h2, .cta h2 { max-width: none; }
  .page-hero h1, .hero-copy h1 { max-width: none; }
}

/* The guest row now holds a real photograph. It is a portrait, as head-and-
   shoulders pictures of people almost always are, so the frame the two empty
   slots hold open changes shape to match rather than cropping him to a
   landscape letterbox. */
.photo-grid img, .guest-slot { aspect-ratio: 4 / 5; }
.photo-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* The home page headline is held by the width of its own column, not by a
   measure, so two lines is a question of size rather than of max-width. At
   67px it broke three ways; this is the largest it can be and still land on
   two. */
.hero-copy h1 { font-size: clamp(29px, 3.5vw, 54px); max-width: none; }
/* 54px is measured, not chosen: it is the largest size at which the
   longest headline on the site still lands on two lines in the column
   the hero gives it. */

/* a centred column needs its narrower children centred as boxes too */
.hero-copy .btn-row,
.hero-copy .note,
.section > .wrap > .btn-row,
.cta .btn-row { margin-inline: auto; }

/* Every poster is the school's own title card: logo, the claim, the face, the
   name plate, then a "Join Today" phone number along the bottom. A 4:5 window
   onto a 9:16 card shows almost exactly the first four of those, so the crop
   is taken from the top and lands just under the name plate. Centring it, as
   it was, sliced the phone number in half. */
.wcard-shot img { object-position: 50% 0%; }
.guest-slot span { text-align: center; }

/* On a phone the column is 376px wide, so two lines is a question of size
   again rather than of measure. These floors are the largest at which the
   headings on this site land on two lines at 412px, which is the width most
   of the traffic arrives at. */
@media (max-width: 700px) {
  h1 { font-size: clamp(24px, 6.2vw, 34px); }
  h2 { font-size: clamp(21px, 5.5vw, 29px); }
  .hero-copy h1, .page-hero h1 { font-size: clamp(24px, 6.2vw, 34px); }
}

/* Between a tablet and a wide laptop the hero keeps its two columns but the
   copy side loses width faster than the type shrinks, which put the longest
   headline back on three lines around 1280px. */
@media (min-width: 701px) and (max-width: 1500px) {
  .hero-copy h1 { font-size: clamp(28px, 3vw, 46px); }
}

/* ==========================================================================
   ROUND SEVEN · 19 August 2026
   Page feedback taken at 2048px on the home and programme pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A hero with nothing beside it.

   The portrait came off the home page and the poster slot came off the
   programme page, so both heroes are a single centred column now. The measure
   is still set in characters rather than left to the full width, because a
   headline running the whole of a 2048px screen has no shape.
   -------------------------------------------------------------------------- */
.hero-grid.is-single .hero-copy { margin-inline: auto; }
.hero-grid.is-single h1,
.hero-grid.is-single .lead,
.hero-grid.is-single .note,
.hero-grid.is-single .eyebrow { margin-left: auto; margin-right: auto; }
.hero-grid.is-single h1 { max-width: 19ch; }
.hero-grid.is-single .lead { max-width: 54ch; }
.page-hero .hero-grid.is-single h1 { max-width: 22ch; }

/* --------------------------------------------------------------------------
   Before and after.

   Two frames the same size: the illustrated day somebody walks in, and a
   matching illustrated day fifteen outcome. The second frame makes the change
   visible through a specific action rather than a caption alone.
   -------------------------------------------------------------------------- */
.ba {
  display: grid;
  gap: clamp(46px, 5vw, 88px);
  margin-top: clamp(30px, 3.4vw, 54px);
}
.ba-row {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
  justify-items: center;
}
.ba-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.8vw, 30px);
  width: 100%;
  max-width: 900px;
}
.ba-shot { margin: 0; }
.ba-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
}
.ba-shot.is-before img {
  object-fit: contain;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  padding: clamp(10px, 1.4vw, 22px);
}
.ba-shot.is-after img {
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.ba-shot figcaption {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.ba-shot.is-after figcaption { color: var(--yellow-deep); }
.ba-arrow { display: block; color: var(--line-strong); }
.ba-arrow svg { width: clamp(22px, 3vw, 44px); height: auto; display: block; }
.ba-words { max-width: 46ch; text-align: center; }
.ba-words h3 { margin: 0 0 0.4em; }
.ba-words p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.js .ba-shot.is-after img {
    filter: saturate(0.08) contrast(1.03);
    transform: scale(1.04);
  }
  html.js .ba-row.in .ba-shot.is-after img {
    filter: none;
    transform: none;
    transition: filter 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms,
                transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms;
  }
  html.js .ba-arrow svg { opacity: 0; transform: translateX(-8px); }
  html.js .ba-row.in .ba-arrow svg {
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease 180ms, transform 420ms ease 180ms;
  }
}

/* On a phone the two frames stack, so an arrow pointing right no longer
   describes what happened. It turns to point down. */
@media (max-width: 720px) {
  .ba-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ba-arrow svg { width: 28px; margin: 2px auto; transform: rotate(90deg); }
  html.js .ba-arrow svg { transform: rotate(90deg) translate(-8px, 0); }
  html.js .ba-row.in .ba-arrow svg { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   Why fifteen days, as three numbered lines rather than three boxes.
   -------------------------------------------------------------------------- */
.why-list {
  list-style: none;
  margin: clamp(30px, 3.4vw, 52px) auto 0;
  padding: 0;
  max-width: 760px;
  border-top: 1px solid var(--line);
}
.why-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: baseline;
  padding: clamp(15px, 1.7vw, 22px) 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
  text-align: left;
}
.why-list b {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--yellow-deep);
}
.why-list span { font-size: clamp(16px, 1.2vw, 18px); }

/* --------------------------------------------------------------------------
   The climb, made readable.

   The labels were 13.5px inside a drawing that scales with the page, so they
   shrank with it: on a phone they were landing near five pixels. They are
   larger now, darker, and carry a paper halo drawn behind the glyphs so a
   label crossing the yellow fill still reads. Each one lands as the line
   reaches it instead of all five arriving together. Below a tablet the drawing
   steps aside and the list takes over, because no type size survives that much
   shrinking.
   -------------------------------------------------------------------------- */
.curve-day {
  font-size: 19px;
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 5px;
  paint-order: stroke fill;
}
.curve-what {
  font-size: 16px;
  fill: var(--graphite);
  stroke: var(--paper);
  stroke-width: 5px;
  paint-order: stroke fill;
}
.curve-axis { font-size: 14px; }
.curve-dot { stroke-width: 3; }

/* Present for a screen reader at every width, drawn only where the chart
   is not. */
.curve-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .curve-day, html.js .curve-what { transform: translateY(7px); }
  html.js .curve.is-in .curve-day,
  html.js .curve.is-in .curve-what {
    transform: none;
    transition: opacity 320ms ease var(--d, 0ms),
                transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms);
  }
  html.js .curve.is-in .curve-dot {
    transition: opacity 260ms ease var(--d, 0ms);
  }
}

@media (max-width: 860px) {
  .curve svg { display: none; }
  .curve-steps {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    max-width: 460px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
  }
  .curve-steps li {
    display: grid;
    grid-template-columns: 5.2em minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
    text-align: left;
  }
  .curve-steps b {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow-deep);
  }
}

/* --------------------------------------------------------------------------
   ROUND EIGHT · 22 August 2026
   The header: the logo on its own, and one small rounded bar holding
   everything else.

   It is compact from the first pixel now rather than standing tall and then
   shrinking as you scroll. The bar carries its own edge and its own corner
   radius, so nothing needs to be ruled off underneath it while you are at the
   top of the page: the page simply begins. Once you have scrolled, the header
   takes a hairline and a soft shadow so it separates from whatever is sliding
   beneath it.
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom-color: transparent;
  transition: box-shadow 260ms ease, border-color 260ms ease;
}

@media (max-width: 960px) {
  /* the phone has one control, so it takes the same radius the bar does, and
     one size across the whole range rather than two. */
  .nav-toggle { min-height: 44px; border-radius: 999px; padding: 10px 18px; font-size: 15px; }

  /* the two actions in the open panel take the same radius, so the rounded
     language holds on a phone too */
  .site-nav .btn { border-radius: 999px; }

  /* The measured height of that header is 67px. The variable said 59, and
     every sticky child on the site is offset by it, so on a page that never
     ran the script they were sitting eight pixels too high. */
  :root { --header: 67px; }
}

@media (min-width: 961px) {
  :root { --header: 61px; }

  .header-inner {
    justify-content: space-between;
    gap: clamp(18px, 2.4vw, 40px);
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .brand img { height: 36px; }

  /* The bar. Everything that is not the logo lives inside it: the five pages
     first, then the two actions, so there is one object on the right to find
     rather than three loose groups. */
  .site-nav {
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
    padding: 4px 4px 4px clamp(13px, 1.3vw, 20px);
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 12px 26px -26px rgba(22, 22, 26, 0.6);
  }
  .site-nav ul { margin: 0; gap: 2px; }

  /* Each page is a chip inside the bar, so the page you are on can be filled
     in rather than underlined. An underline inside a rounded bar argues with
     the shape of the bar. */
  .site-nav ul a {
    display: block;
    padding: 7px clamp(9px, 0.9vw, 13px);
    border-bottom: none;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.09em;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .site-nav ul a:hover {
    background: var(--paper);
    color: var(--ink);
    border-bottom-color: transparent;
  }
  .site-nav ul a[aria-current="page"] {
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    border-bottom-color: transparent;
  }

  /* The two actions sit inside the same bar, small enough that the bar stays
     a bar. Sentence case, because shouting at somebody twice in forty pixels
     is once too many. */
  .nav-cta { gap: 6px; }
  .nav-cta .btn-small {
    min-height: 32px;
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* The popover hangs off a bar with a radius now, so it clears it by a
     little more than it used to and takes a radius of its own. Its link was
     being set in uppercase by the rule that sets the page links, which is a
     sentence, not a label. */
  .login-note { top: calc(100% + 16px); border-radius: 14px; }
  .login-note a { text-transform: none; letter-spacing: 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* --------------------------------------------------------------------------
   The two wide strips, corrected.

   The wall and the reel row both break out of their container's gutter with a
   negative margin, and both were still measuring that gutter as --gutter, the
   text column's. They have not lived in the text column since round six: they
   sit in .wall-wide and .reels-wide, whose padding is a different value. On a
   phone the difference pushed the page about twenty pixels wider than the
   screen and the whole document could be dragged sideways. One variable now
   holds the number, and the breakout reads it back.
   -------------------------------------------------------------------------- */
.wall-wide, .reels-wide { --wide-gutter: clamp(14px, 2.2vw, 48px); padding: 0 var(--wide-gutter); }

@media (max-width: 960px) {
  .reels-wide .reels {
    margin-left: calc(var(--wide-gutter) * -1);
    margin-right: calc(var(--wide-gutter) * -1);
    padding-left: var(--wide-gutter);
    padding-right: var(--wide-gutter);
  }
}
@media (max-width: 860px) {
  .wall-wide .wall,
  .wall-wide .wall.is-four,
  .wall-wide .wall.is-five {
    margin-left: calc(var(--wide-gutter) * -1);
    margin-right: calc(var(--wide-gutter) * -1);
    padding-left: var(--wide-gutter);
    padding-right: var(--wide-gutter);
  }
}

/* The home headline lost its second column, so it needs its own measure back:
   19ch was the caption width and put the sentence on three lines. */
.hero-grid.is-single h1 { max-width: 28ch; }

/* The audience row's phone and tablet counts were being overruled: a later
   unconditional `.who-row { repeat(5, ...) }` sat below both media queries in
   the file, so a 360px screen was laying five columns out in 324 pixels and
   pushing the page three pixels wider than itself. Restated here, after it.
   Six tiles divide evenly either way: three and three, or two and two and two. */
@media (max-width: 860px) {
  .who-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
}
@media (max-width: 700px) {
  .who-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The drawings are on white and the frame around them was cream, so each one
   sat inside a second visible rectangle. The frame matches the paper the
   drawing was made on. */
.ba-shot.is-before img { background: #ffffff; }

/* --------------------------------------------------------------------------
   Three mentors, not four.

   Sanju's card came off on instruction and his name stays in the schedule
   where it belongs. The grid was counting to four, so a fourth empty column
   sat on the right; and the day line that used to hold the heading down came
   off every card, which left the names sitting on the photographs.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pcard h3 { margin-top: clamp(18px, 1.8vw, 26px); }

/* ==========================================================================
   ROUND TEN · 22 August 2026
   The island.

   The header is no longer a bar across the top of the page. It is a floating
   glass panel, clear of all four edges, holding two things: the mark, and one
   square. Every page link and both actions live behind that square, and
   opening it grows this same panel downwards rather than dropping a separate
   menu over the page.

   Every number below is measured off reelo.framer.website and written up in
   downloads/engine-specs/reelo.framer.website/spec.md. Nothing here is a
   guess about how that site feels.

     surface     rgba(255,255,255,0.6) + backdrop-filter: blur(10px)
                 + 1px solid white + 20px radius + NO shadow
     geometry    650 x 70 closed, 15px padding, 20px clear of the top
     radii       20px panel / 15px button / 10px square, three steps down
     open        Framer layout animation, i.e. FLIP:
                 the panel is laid out at its final height, squashed back
                 with scaleY, and the contents counter-scaled by the exact
                 reciprocal so the type never distorts
     curve       critically damped spring, w = 19 rad/s, zeta = 1.0
                 50% at 100ms, 90% at 190ms, settled at 580ms, no overshoot
                 encoded below as linear() stops, so no library and no rAF

   Two things the original deliberately does NOT do, kept: the header has no
   scroll response of any kind, and the buttons have no hover state. Its whole
   motion budget is one 580ms event.
   ========================================================================== */

:root {
  /* The measured spring, as an easing function. Stops are
     p(t) = 1 - (1 + wt)e^(-wt) with w = 19, sampled across the 580ms. */
  --spring: linear(
    0, 0.106 5%, 0.302 10%, 0.492 15%, 0.647 20%, 0.761 25%,
    0.842 30%, 0.898 35%, 0.934 40%, 0.974 50%, 0.990 60%,
    0.996 70%, 0.9985 80%, 0.9995 90%, 1
  );
  --spring-ms: 580ms;

  /* 20px of air, a 70px panel, 20px of air. Everything sticky on the site
     offsets itself by this, and the body reserves it at the top. */
  --header: 112px;
}

html { scroll-padding-top: calc(var(--header) + 12px); }
body { padding-top: var(--header); }

/* The header element itself is now nothing: a fixed, zero-height anchor that
   the island hangs from. It carries no background, no rule and no shadow,
   because the island carries its own. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 100;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
  transition: none;
}

/* Centring lives on the wrapper and scaling lives on the panel, so the two
   transforms can never fight each other. The original splits them the same
   way for the same reason. */
.island-wrap {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: calc(100% - 40px);
}

.island {
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #fff;
  border-radius: 20px;
  box-shadow: none;

  transform-origin: 50% 0;
  will-change: transform;
}

/* The counter-scale wrapper. It shares the panel's transform-origin AND
   starts at the panel's own top edge, which is why the padding lives here
   rather than on the panel: if the panel carried the padding, the wrapper's
   origin would sit 15px lower than the panel's and the reciprocal scale
   would cancel the size but not the position. Same origin, exact cancel,
   no corrective translate needed. */
.island-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 15px;
  transform-origin: 50% 0;
  will-change: transform;
}

/* Closed, the panel is the height of its top row plus its padding and its
   border. The menu below stays laid out and is clipped away rather than
   removed, so it can be measured, counter-scaled on the way in, and still
   drawn on the way out. */
.island[data-open="false"] { height: 72px; }

/* ---------- the top row: mark, and one square ---------- */
.island-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 40px;
  flex: 0 0 auto;
}

.island-brand {
  display: flex;
  align-items: center;
  border: 0;
  text-decoration: none;
}
.island-brand img {
  height: 38px;
  width: auto;
}

.island-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  cursor: pointer;
}
.island-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Two 20x2 bars, 10px apart. Opening moves both to the centre line and turns
   them in opposite directions, which is what makes an X rather than a fold. */
.island-bars {
  position: absolute;
  inset: 0;
}
.island-bars i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  margin-top: -1px;
  border-radius: 2px;
  background: #fff;
  transition: transform 300ms var(--spring);
}
.island-bars i:nth-child(1) { transform: translateY(-5px); }
.island-bars i:nth-child(2) { transform: translateY(5px); }
.island[data-open="true"] .island-bars i:nth-child(1) { transform: rotate(45deg); }
.island[data-open="true"] .island-bars i:nth-child(2) { transform: rotate(-45deg); }

/* ---------- the menu ---------- */
.island-menu {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-right: 20px;
  flex: 0 0 auto;
  opacity: 0;
}
.island[data-open="true"] .island-menu { opacity: 1; }
.island-menu { transition: opacity 260ms var(--spring); }

.island-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.island-links a {
  display: inline-block;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  transition: color 140ms ease;
}
/* One colour step. The original's only hover, and it is this small. */
.island-links a:hover { color: var(--graphite); }
.island-links a[aria-current="page"] { color: var(--yellow-deep); }

.island-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 15px 20px;
  border: 0;
  border-radius: 15px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 18px;
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.island-cta:hover { background: var(--ink); color: var(--paper); }
.island-cta svg { flex: 0 0 auto; }

/* Log in is a quiet line under the action, not a second button. */
.island-menu .login-wrap { position: relative; text-align: center; }
.island-menu .login-btn {
  min-height: 0;
  padding: 2px 1px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.island-menu .login-btn:hover { color: var(--ink); }
.island-menu .login-note {
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  border-radius: 14px;
}
.island-menu .login-note::before,
.island-menu .login-note::after { display: none; }

/* ---------- responsive ----------
   The original swaps to its phone panel at 1024px and goes fluid at 768px.
   The panel keeps its 20px of air and its 20px radius at every width. */
@media (max-width: 1024px) {
  :root { --header: 106px; }
  .island[data-open="false"] { height: 66px; }
  .island-inner { padding: 12px; }
  .island-row { height: 40px; }
  .island-brand img { height: 34px; }
}

@media (max-width: 768px) {
  .island-wrap { width: auto; left: 20px; right: 20px; transform: none; }
  .island-menu { padding-right: 0; }
  .island-links { grid-template-columns: 1fr; gap: 12px; }
  .island-links a { font-size: 24px; }
}

@media (max-width: 420px) {
  .island-brand img { height: 30px; }
  .island-links a { font-size: 22px; }
}

/* ---------- without the script ----------
   There is no button to press, so the panel is simply open. Everything is
   reachable, nothing is animated, and no navigation is lost. */
html:not(.js) .island { height: auto !important; transform: none !important; }
html:not(.js) .island-inner { transform: none !important; }
html:not(.js) .island-menu { opacity: 1; }
html:not(.js) .island-toggle { display: none; }
html:not(.js) body { padding-top: 0; }
html:not(.js) .site-header { position: static; height: auto; }
html:not(.js) .island-wrap { position: static; transform: none; margin: 20px auto; }

@media (prefers-reduced-motion: reduce) {
  .island,
  .island-inner,
  .island-menu,
  .island-bars i { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   ROUND ELEVEN · Five audiences, unnumbered.

   The row lost "Looking for work" and its counters, and it now reads
   Business owner, Housewife, Freelancer, Employee, Student.

   Five does not divide the way six did. Six went three and three, or two and
   two and two, and always filled its last row; five leaves an orphan at every
   wrapped width. Grid cannot help with that: a part-filled last row sits hard
   left against the first column and reads as a mistake rather than as the end
   of a list. Flex can, so the row wraps centred and five lands as five, or as
   three and two, or as two and two and one, each row centred under the last.

   The column count is still pinned per breakpoint rather than left to the
   content, because these tiles must line up with each other, not merely fit.
   -------------------------------------------------------------------------- */
.who-row {
  --who-gap: clamp(14px, 1.8vw, 32px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--who-gap);
}
.who-one {
  flex: 0 0 calc((100% - 4 * var(--who-gap)) / 5);
  min-width: 0;
}

@media (max-width: 860px) {
  .who-row { row-gap: 26px; }
  .who-one { flex-basis: calc((100% - 2 * var(--who-gap)) / 3); }
}

@media (max-width: 700px) {
  .who-one { flex-basis: calc((100% - var(--who-gap)) / 2); }
}

/* --------------------------------------------------------------------------
   ROUND TWELVE · The drawings stand on the paper.

   Every illustration on the site now carries a real alpha channel: the flat
   grey field each one was drawn on has been cut away, so the figure sits on
   the page instead of on a tile. Three things in the stylesheet existed only
   to cope with that field, and all three now work against it.

   ONE. `mix-blend-mode: multiply` was the old fix. The drawings arrived on
   white, and multiplying them onto the paper made the white vanish. It was a
   good trick and it is now the wrong one: with genuine transparency there is
   no field left to hide, and multiply keeps working on what remains, dragging
   every mid-grey darker against the cream and muddying the soft edges the cut
   leaves behind. Straight compositing from here.

   TWO and THREE. The before and after shots were each drawn inside a hairline
   box, the before one on its own white fill. With the field gone those frames
   outline nothing: a rectangle of empty paper with a person standing in the
   middle of it. The fill and both borders come off, and the caption under each
   shot does the labelling on its own.
   -------------------------------------------------------------------------- */
.sketch-img,
.icon-img {
  mix-blend-mode: normal;
}

.ba-shot.is-before img,
.ba-shot.is-after img {
  background: none;
  border: 0;
}

/* ==========================================================================
   ROUND THIRTEEN · 27 August 2026
   Page feedback taken at 1600 x 912 across the home, programme and results
   pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ONE · The home page opens on one screen.

   The hero was a band of copy with the next section already showing under it,
   so the first thing the page said was "there is more below" rather than the
   sentence itself. It is now exactly one screen tall, the headline is set as
   large as that screen will carry, and the six things a student walks out with
   drift around it.

   svh, not vh: on a phone `100vh` is the height the viewport has once the
   browser's own chrome has retracted, which is taller than what you can
   actually see when the page first loads, so a vh hero always starts by
   hiding its own buttons. svh is the small viewport, the one that is true at
   the moment of arrival.
   -------------------------------------------------------------------------- */
.hero.is-screen {
  min-height: calc(100svh - var(--header));
  display: grid;
  align-items: center;
  padding-top: clamp(20px, 3vh, 44px);
  padding-bottom: clamp(20px, 3vh, 44px);
}

/* Size is the whole point of the note, so it is set against the height of the
   screen as well as its width: on a laptop in landscape the limit on a poster
   headline is how tall it is, not how wide. */
.hero.is-screen .hero-copy h1 {
  font-size: clamp(34px, min(6.6vw, 10.4vh), 104px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.hero.is-screen .hero-copy .lead {
  font-size: clamp(17px, min(1.9vw, 2.6vh), 27px);
  max-width: 46ch;
  margin-top: clamp(14px, 2.2vh, 30px);
}
.hero.is-screen .hero-copy .btn-row { margin-top: clamp(18px, 3vh, 38px); }
.hero.is-screen .hero-copy .note { margin-top: clamp(12px, 1.8vh, 22px); }

/* ---- The icons, all around ----
   Six drawings, placed by percentage so they hold their arrangement at every
   width, sitting under the copy and over the drifting light. They carry the
   same rise-and-settle the hero glow carries, offset by a negative delay each
   so no two are ever in step: one gesture, six phases, no new idea.

   `--s` is a per-icon size multiplier and `--r` its resting tilt, both read
   back inside the keyframes so the drift adds to them instead of replacing
   them. Without that the animation would flatten every tilt to zero on its
   first frame. */
.hero-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-orbit img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Smaller than the drawings were. A brand mark is solid colour edge to
     edge, where the pencil scenes filled about three quarters of their frame
     in grey line, so the same width reads far louder. */
  width: clamp(40px, 4.9vw, 80px);
  height: auto;
  opacity: 0.88;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: orbit-bob 17s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes orbit-bob {
  from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
  to   { transform: translate3d(0, -18px, 0) rotate(calc(var(--r, 0deg) * -0.55)) scale(calc(var(--s, 1) * 1.05)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit img { animation: none; }
}

/* Under a tablet the copy needs the whole width, so the two icons that sit
   nearest the middle stand down and the rest move out to the corners. */
@media (max-width: 900px) {
  .hero-orbit img { width: clamp(38px, 8.4vw, 58px); opacity: 0.8; }
  .hero-orbit img:nth-child(3),
  .hero-orbit img:nth-child(6) { display: none; }
  /* Held further in than the drawings were. A brand mark is a solid shape to
     its own edge, so one sitting 2% from the side reads as falling off it. */
  .hero-orbit img:nth-child(1) { left: 6%;  top: 9%; }
  .hero-orbit img:nth-child(2) { left: 7%;  top: 86%; }
  .hero-orbit img:nth-child(4) { left: 76%; top: 8%; }
  .hero-orbit img:nth-child(5) { left: 77%; top: 86%; }
}

/* --------------------------------------------------------------------------
   TWO · The climb, with its words outside the drawing.

   The labels used to be `<text>` inside the viewBox, which means their size
   was whatever the drawing's scale made it. Round eight pushed them to 19px
   and gave them a stroked halo to survive the yellow behind them, and they
   were still shrinking with the page. They are HTML now: real pixels, a real
   measure, a solid chip instead of a halo, and selectable.

   Each one is pinned to its own point on the line by percentage, so the label
   and the dot cannot drift apart when the chart is resized.
   -------------------------------------------------------------------------- */
.curve-marks {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 1000 / 400;   /* the svg's own box, so 0-100% maps to the drawing
                                 and not to whatever else the container holds */
  pointer-events: none;
}
.curve-mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin: 0;
  width: max-content;
  max-width: 21ch;
  transform: translate(-50%, calc(-100% - 20px));
  padding: 9px 13px 10px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(20, 21, 25, 0.04);
}
.curve-mark.is-end { transform: translate(-88%, calc(-100% - 20px)); }
.curve-mark b {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--yellow-deep);
}
.curve-mark span {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}

/* The two axis labels, likewise. */
.curve-axis-y {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.curve-axis-x {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  max-width: none;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- The new gesture ----
   Before, the yellow was already flooded in before the line moved, so the
   chart gave away its own ending and the draw had nothing to reveal. Now the
   fill is wiped left to right on exactly the line's clock, each dot pops in as
   the line passes it, and each label lifts on the spring the header uses. */
@media (prefers-reduced-motion: no-preference) {
  html.js .curve-fill {
    clip-path: inset(0 100% 0 0);
  }
  html.js .curve.is-in .curve-fill {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  html.js .curve-dot {
    opacity: 1;                     /* the pop is the arrival now, not a fade */
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  html.js .curve.is-in .curve-dot {
    transform: scale(1);
    transition: transform 420ms var(--spring) var(--d, 0ms);
  }

  html.js .curve-mark {
    opacity: 0;
    /* the resting transform, plus the distance it travels */
    transform: translate(-50%, calc(-100% - 6px)) scale(0.94);
  }
  html.js .curve-mark.is-end {
    transform: translate(-88%, calc(-100% - 6px)) scale(0.94);
  }
  html.js .curve.is-in .curve-mark {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 20px)) scale(1);
    transition: opacity 260ms ease var(--d, 0ms),
                transform 520ms var(--spring) var(--d, 0ms);
  }
  html.js .curve.is-in .curve-mark.is-end {
    transform: translate(-88%, calc(-100% - 20px)) scale(1);
  }
}

/* Where the chart steps aside, its labels go with it. */
@media (max-width: 860px) {
  .curve-marks,
  .curve-axis-y,
  .curve-axis-x { display: none; }
}

/* --------------------------------------------------------------------------
   THREE · Every question at once.

   The panel where the questions sit was capped at 180px with its own
   scrollbar, so four of the seven were below a fold inside a box that was
   itself below a fold. There are only seven, they are short, and a person
   deciding what to ask should be able to see all seven while deciding. The cap
   comes off and they run in two columns on anything wider than a tablet.
   -------------------------------------------------------------------------- */
.wa-ask {
  max-height: none;
  overflow: visible;
}
@media (min-width: 761px) {
  .wa-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 560px) {
  .wa-ask { max-height: none; }
}

/* --------------------------------------------------------------------------
   FOUR · The rail runs the whole left side.

   It was a short stub of track stuck to the top of a column fifteen rows tall,
   so for most of the scroll the left half of the section was empty paper. The
   rail is now a full screen tall and the track runs its whole length, which
   means the fortnight is drawn beside the fortnight at every point in it: the
   fill is a real measure of how far down you are rather than a token.

   The counter and its label centre against that full height, so the number
   still sits at eye level instead of climbing to the ceiling.
   -------------------------------------------------------------------------- */
.spine-rail {
  top: var(--header);
  height: calc(100svh - var(--header));
  align-items: stretch;
  padding: clamp(24px, 5vh, 56px) 0;
}
.rail-track { height: auto; align-self: stretch; }
.rail-read { align-self: center; }

@media (max-width: 900px) {
  /* Below a tablet the spine drops to one column and a full-height rail would
     be a screen of nothing before the first day. */
  .spine-rail { height: auto; padding: 0; }
  .rail-track { height: clamp(190px, 28vh, 310px); align-self: start; }
}

/* --------------------------------------------------------------------------
   FIVE · The account tile says which account.

   Line art at the drawings' own stroke weight, boxed to the same 96px the
   other five icons are drawn at, so the row still reads as one set.
   -------------------------------------------------------------------------- */
.icon-glyph {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  max-width: 96px;
  color: var(--graphite);
}
/* The drawings do not fill their own frames: a 240px tile carries about 78%
   of drawing and the rest is air. A glyph drawn edge to edge in the same box
   therefore reads as the biggest thing in the row. Sized to the drawings'
   optical size rather than to their frame, and centred in the frame so the
   six captions still sit on one line. */
.icon-glyph svg { width: 74px; height: 74px; display: block; }
@media (max-width: 900px) {
  .icon-glyph { width: 76px; height: 76px; max-width: 76px; }
  .icon-glyph svg { width: 59px; height: 59px; }
}

/* --------------------------------------------------------------------------
   SIX · The results hero, read left, seen big.

   Round six centred every hero on the site, which suits a page that opens on
   one sentence and nothing else. This page opens on a sentence and a
   photograph, and a centred column beside a picture reads as two things that
   were laid out separately. The copy goes back to the left, where a paragraph
   of that length is read fastest, and the photograph takes the larger half.
   -------------------------------------------------------------------------- */
.page-hero .hero-grid:not(.is-single) { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.page-hero .hero-grid:not(.is-single) .hero-copy { text-align: left; }
.page-hero .hero-grid:not(.is-single) .hero-copy > * { margin-inline: 0; }
.page-hero .hero-grid:not(.is-single) .hero-copy h1 { max-width: 15ch; }
.page-hero .hero-grid:not(.is-single) .hero-copy .lead { max-width: 44ch; }
.page-hero .hero-grid:not(.is-single) .hero-figure {
  /* out past its column and into the page gutter, so the picture is the
     largest thing on the screen rather than the second largest */
  margin-right: calc(-1 * clamp(0px, 4vw, 64px));
}

@media (max-width: 900px) {
  .page-hero .hero-grid:not(.is-single) { grid-template-columns: 1fr; }
  .page-hero .hero-grid:not(.is-single) .hero-figure { margin-right: 0; }
}

/* --------------------------------------------------------------------------
   SEVEN · The turn.

   Four rules, a hairline number, one line of large type and its explanation.
   The line is a slot exactly one line tall with the old habit and the new one
   stacked inside it; when the row arrives the pair slides up by one line, so
   the old habit leaves through the top as the new one takes the slot. The
   sentence changes where you are looking instead of being annotated.

   This is the odometer roll from the fifteen days, at the same travel of one
   line height and the same spring. One gesture, used twice.
   -------------------------------------------------------------------------- */
.turn {
  list-style: none;
  margin: clamp(30px, 3.4vw, 54px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.turn li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 44px);
  margin: 0;
  padding: clamp(26px, 3vw, 44px) 0;
  border-bottom: 1px solid var(--line);
}
.turn-n {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.turn-line {
  font-family: var(--display);
  font-size: clamp(25px, 3.1vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.turn-slot {
  display: block;
  height: 1.12em;              /* exactly the line-height above: one line tall */
  overflow: hidden;
}
.turn-was,
.turn-now {
  display: block;
  height: 1.12em;
  white-space: nowrap;
}
.turn-was { color: var(--muted); }
.turn-now { color: var(--ink); }
.turn-note {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--muted);
}

/* With no JavaScript, or with motion turned down, the slot opens to hold both
   lines and the pair is simply read in order. Nothing is hidden by default:
   the clip is only applied where the roll can actually run. */
@media (prefers-reduced-motion: no-preference) {
  html.js .turn-slot > * { will-change: transform; }
  html.js .turn li.reveal.in .turn-was,
  html.js .turn li.reveal.in .turn-now {
    transform: translateY(-1.12em);
    transition: transform 700ms var(--spring) 180ms;
  }
}
html:not(.js) .turn-slot { height: auto; }

@media (prefers-reduced-motion: reduce) {
  .turn-slot { height: auto; }
}

@media (max-width: 900px) {
  .turn li { grid-template-columns: 3rem minmax(0, 1fr); }
  .turn-note { grid-column: 2; max-width: none; }
  .turn-was, .turn-now { white-space: normal; }
  .turn-slot,
  .turn-was,
  .turn-now { height: auto; }
  html.js .turn li.reveal.in .turn-was,
  html.js .turn li.reveal.in .turn-now { transform: none; }
  .turn-was { display: none; }   /* no room to roll, so only the outcome shows */
}

/* --------------------------------------------------------------------------
   ROUND THIRTEEN, second pass · two things the chart got wrong.

   ONE. Day 9 and Day 15 are eighteen per cent of the width apart and both
   labels are wide, so hung above their points they overlapped. Day 9 goes
   below its dot instead. There is nothing under the line there but fill, and
   the label is a solid chip rather than haloed text, so it sits on the yellow
   without fighting it. Alternating them also stops the top-right corner
   reading as one block of text.

   TWO. `.section p` caps every paragraph in a section at 66ch, and that
   selector carries a tag as well as a class, so it outranked the plain
   `.curve-axis-x` that was meant to run the width of the drawing. Both axis
   labels ended up inside a 66-character box hard against the left, which put
   "Day 15" a third of the way across the page. Restated at a weight that
   wins, and pinned to the ends of the axis line rather than to the ends of
   the container: the drawing's own plot runs from 6% to 94%.
   -------------------------------------------------------------------------- */
.curve-mark.is-below { transform: translate(-50%, 34px); }

@media (prefers-reduced-motion: no-preference) {
  html.js .curve-mark.is-below { transform: translate(-50%, 20px) scale(0.94); }
  html.js .curve.is-in .curve-mark.is-below { transform: translate(-50%, 34px) scale(1); }
}

#program .curve-axis-x {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 87%;
  margin: 0;
  max-width: none;
}
#program .curve-axis-y { max-width: none; }

/* --------------------------------------------------------------------------
   ROUND THIRTEEN, third pass · the results hero, squared up.

   The photograph was pulled out past its column by a hand-picked 4vw, and the
   page gutter is 3.6vw, so it overshot the right edge of the screen by six
   pixels and the hero's own `overflow: hidden` quietly sliced them off. Six
   pixels of a person's shoulder is not a bleed, it is a mistake that happens
   to look like one. Pulled by the gutter variable itself now, so the picture
   lands exactly on the edge of the page at every width by construction rather
   than by a number that happened to be close.

   The caption was centred because every figure caption on the site is, which
   was right while every hero was a centred column. Under a picture in the
   right half of a left-read hero it should start where the picture starts.
   -------------------------------------------------------------------------- */
.page-hero .hero-grid:not(.is-single) .hero-figure {
  margin-right: calc(-1 * var(--gutter));
}
.page-hero .hero-grid:not(.is-single) .hero-figure figcaption {
  text-align: left;
  align-items: flex-start;
}

/* ==========================================================================
   ROUND FOURTEEN · 27 August 2026
   Reserve a seat: a form that lands in a sheet, then opens WhatsApp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The panel.

   Twenty-seven buttons across five pages used to open WhatsApp with a sentence
   already typed. Nothing about who was asking was ever recorded: the name, the
   number and the town arrived only if the person happened to say them, and only
   in a chat thread. They now open this instead, it lands in a sheet, and the
   chat opens straight after with the same message, so nothing is lost from the
   old path and a record is gained.

   It slides over whatever page you were on rather than taking you to a new one,
   because a person who has just read the fifteen days and pressed the button
   should not lose the page they were reading.

   Two states, one piece of markup:

     no JavaScript   an ordinary section at the end of the page. The buttons are
                     anchors to #join, so they scroll to it, and the form posts
                     for real. Nothing here is hidden by default.
     JavaScript      `html.js` lifts it out of the flow, and the same markup is
                     a panel that is off screen until a button is pressed.

   Written that way round on purpose. A panel that starts hidden and is revealed
   by script is invisible to anyone whose script did not run.
   -------------------------------------------------------------------------- */

/* ---- The static, no-script form ---- */
.join {
  padding: clamp(46px, 6vw, 90px) 0;
  background: var(--paper-bright);
  border-top: 1px solid var(--line-strong);
}
.join-sheet {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.join-close { display: none; }
.join-scrim { display: none; }

.join-head { margin-bottom: clamp(22px, 2.6vw, 34px); }
.join-head h2 { margin: 0 0 10px; max-width: none; }
.join-sub {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--muted);
}

/* ---- Fields ---- */
.join-form { display: grid; gap: clamp(15px, 1.6vw, 20px); }
.join-field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.join-field > label,
.join-field > legend {
  padding: 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.join-field > label span {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--muted);
}
.join-field input[type="text"],
.join-field input[type="tel"] {
  width: 100%;
  min-height: 48px;          /* a real touch target, not a styled line */
  padding: 12px 15px;
  font-family: var(--body);
  font-size: 16px;           /* 16 exactly: anything smaller and iOS Safari
                                zooms the page when the field is focused */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.join-field input::placeholder { color: var(--muted); opacity: 0.75; }
.join-field input:focus {
  outline: none;
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.28);
}
.join-field.is-bad input { border-color: #c0392b; }

.join-err {
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.4;
  color: #c0392b;
}

/* ---- Who you are ---- */
.join-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.join-chips label { margin: 0; }
.join-chips input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;                /* not display:none: a hidden input cannot be
                                focused, and the keyboard needs to reach it */
  pointer-events: none;
}
.join-chips span {
  display: block;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.join-chips label:hover span { background: var(--yellow-light); }
.join-chips input:focus-visible + span {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 2px;
}
.join-chips input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.join-who.is-bad .join-chips span { border-color: #c0392b; }

/* The field behind "Other". `:not([hidden])` carries the display, because a
   plain `display: grid` here would out-rank the hidden attribute and the field
   would never go away again. */
.join-other { margin: 10px 0 0; max-width: none; }
.join-other:not([hidden]) { display: grid; gap: 7px; }
.join-other label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--graphite);
}
.join-other input {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font-family: var(--body);
  font-size: 16px;           /* 16 exactly, for the same reason as the rest */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.join-other input::placeholder { color: var(--muted); opacity: 0.75; }
.join-other input:focus {
  outline: none;
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.28);
}

/* The honeypot. Off screen rather than display:none, because a machine that
   skips hidden fields is exactly the machine this is trying to catch. */
.join-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Submit ---- */
.join-submit {
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  font-family: var(--display);
  cursor: pointer;
}
.join-submit[disabled] { opacity: 0.6; cursor: default; }
.join-spin {
  display: none;
  width: 16px; height: 16px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.join-submit.is-sending .join-spin { display: inline-block; animation: join-spin 700ms linear infinite; }
@keyframes join-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .join-submit.is-sending .join-spin { animation-duration: 1600ms; }
}

.join-status {
  margin: 0;
  max-width: none;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}
.join-status.is-bad { color: #c0392b; }
.join-status:empty { display: none; }
.join-note {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   With script: the same markup, as a panel over the page.
   -------------------------------------------------------------------------- */
html.js .join {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 0;
  background: none;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}
html.js .join.is-open { visibility: visible; pointer-events: auto; }

html.js .join-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;      /* the scrim is written after the sheet in the markup, so
                      without these two the darkened backdrop paints on top of
                      the panel and swallows every click meant for the form */
  background: rgba(20, 21, 25, 0.42);
  opacity: 0;
  transition: opacity 320ms ease;
}
html.js .join.is-open .join-scrim { opacity: 1; }

html.js .join-sheet {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(470px, 100%);
  max-width: none;
  margin: 0;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 36px) clamp(32px, 4vw, 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-bright);
  border-left: 1px solid var(--line-strong);
  box-shadow: -18px 0 50px rgba(20, 21, 25, 0.14);
  transform: translateX(100%);
  transition: transform 480ms var(--spring);
}
html.js .join.is-open .join-sheet { transform: translateX(0); }

html.js .join-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
html.js .join-close:hover { background: var(--yellow-light); border-color: var(--yellow-deep); }
html.js .join-close svg { width: 19px; height: 19px; }
html.js .join-head { padding-right: 46px; }

/* On a phone it comes up from the bottom, which is where a thumb is, and stops
   short of the top so the page behind stays visible and the panel still reads
   as something laid over it rather than a new page. */
@media (max-width: 620px) {
  html.js .join-sheet {
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    max-height: 92svh;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 50px rgba(20, 21, 25, 0.18);
    transform: translateY(100%);
  }
  html.js .join.is-open .join-sheet { transform: translateY(0); }
}

/* The page behind does not scroll while the panel is open. */
html.js body.join-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.js .join-sheet,
  html.js .join-scrim { transition-duration: 1ms; }
}

/* --------------------------------------------------------------------------
   No script, no form.

   The address enquiries are posted to lives inside script.js, so if that script
   did not run there is nowhere for the form to go. A form that silently posts
   nowhere is worse than no form, so the section falls back to the WhatsApp link
   the buttons used to be. Same fallback the question-and-answer chat uses.
   -------------------------------------------------------------------------- */
html:not(.js) .join-form > *:not(.join-nojs) { display: none; }
html:not(.js) .join-nojs {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
html.js .join-nojs { display: none; }

/* ==========================================================================
   ROUND SIXTEEN · 27 August 2026
   The blog: an index of pieces, and the pieces themselves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The index.

   Rows, not cards. The same shape the fifteen days use on the programme page:
   the small facts down the left, the title and one line under it in the
   middle, a hairline between each. A grid of boxes would have made five short
   articles look like a shop, and would have been the third different way this
   site lists things you can go into.

   The whole row is the link, so the target is the width of the page rather
   than the width of a few words, which matters most on a phone.
   -------------------------------------------------------------------------- */
.post-list { border-top: 1px solid var(--line); }

.post-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) auto;
  gap: 0 clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(30px, 3.6vw, 52px) 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.post-row .post-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-top: 8px;
  max-width: none;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-topic {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--yellow-deep);
}

.post-body { min-width: 0; }

/* The day rows crop their title against its own edge as it moves, which reads
   as a gesture on a two-word session name. On a full sentence it reads as a
   missing letter, so the title here simply moves into the space beside it. */
.post-clip {
  margin: 0 0 9px;
  max-width: 100%;
  font-size: clamp(23px, 2.5vw, 36px);
}
.post-title {
  display: block;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease;
}
.post-row .post-dek {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--graphite);
}

.post-go {
  align-self: center;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 160ms ease;
}
.post-go::after {
  content: " \2192";
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .post-row:hover .post-title { transform: translateX(9px); color: var(--yellow-deep); }
  .post-row:hover .post-go { color: var(--yellow-deep); }
  .post-row:hover .post-go::after { transform: translateX(6px); }
}
.post-row:focus-visible { outline-offset: -4px; }

.section .post-list-note {
  margin: clamp(24px, 3vw, 38px) auto 0;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .post-row { grid-template-columns: minmax(0, 1fr); gap: 10px 0; padding: 26px 0; }
  .post-row .post-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-top: 0;
    font-size: 12.5px;
  }
  .post-go { display: none; }
}

/* --------------------------------------------------------------------------
   A piece.

   One column at a reading measure, centred on the page. Everything on this
   site is centred as a block; the words inside a long read are not, because
   nobody has ever enjoyed reading eight centred paragraphs.
   -------------------------------------------------------------------------- */
.hero-copy .post-byline {
  margin: clamp(18px, 2vw, 26px) auto 0;
  max-width: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.article-body {
  max-width: 68ch;
  margin: 0 auto;
  text-align: left;
  font-size: clamp(17px, 1.24vw, 19.5px);
  line-height: 1.78;
}
.article-body > *:first-child { margin-top: 0; }
.section .article-body p {
  max-width: none;
  margin: 0 0 1.15em;
  color: var(--graphite);
}
.article-body strong { color: var(--ink); }

/* `em` is the site's yellow accent, which is right in a heading and wrong in
   a paragraph: four yellow phrases down one page read as broken links. Inside
   a piece it goes back to meaning emphasis, which is what italics are for. */
.article-body p em,
.article-body li em { font-style: italic; color: var(--graphite); }
.article-body a { color: var(--ink); text-decoration-color: var(--yellow); }
.article-body a:hover { color: var(--yellow-deep); }

/* `.section h2` caps headings at 22ch, which is a caption width. A subhead
   inside a piece takes the measure of the piece. */
.article-body h2 {
  max-width: none;
  margin: 1.9em 0 0.55em;
  font-size: clamp(21px, 1.9vw, 28px);
  text-align: left;
  text-wrap: balance;
}

.article-body .post-points {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
}
.article-body .post-points li {
  position: relative;
  margin: 0 0 0.7em;
  padding-left: 22px;
  color: var(--graphite);
}
.article-body .post-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow-deep);
}

/* The one line worth stopping on. A rule and a size, not a box. Named
   `post-pull` because the site already has a `.pull`, which carries a hairline
   above it and a 30ch measure. */
.article-body .post-pull {
  margin: 1.7em 0;
  padding: 2px 0 2px clamp(18px, 2.2vw, 28px);
  border-left: 3px solid var(--yellow);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* The last line of every piece, pointing at the day of the course it belongs
   to. Set apart, because it is the school talking rather than the article. */
.article-body .post-more {
  margin: 2em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--muted);
}
.article-body .post-more a { color: var(--yellow-deep); }

/* --------------------------------------------------------------------------
   What to read next, and the way back.
   -------------------------------------------------------------------------- */
.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 28px);
  max-width: 68ch;
  margin: clamp(38px, 4.4vw, 64px) auto 0;
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--line);
}
/* Two links, not two boxes. A bordered pair at the foot of an article is the
   card layout coming back in through the side door. */
.post-nav-one {
  display: grid;
  gap: 7px;
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
}
.post-nav-one.is-older { text-align: right; }
.post-nav-tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow-deep);
}
.post-nav-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.post-nav-one:hover .post-nav-title { color: var(--yellow-deep); }

.post-back {
  margin: clamp(26px, 3vw, 38px) auto 0;
  text-align: center;
}

/* The blog link in the island is marked on the pieces as well as on the index,
   so the menu still says where you are. `page` is reserved for the index
   itself; a piece is only inside the section. */
.island-links a[aria-current="true"] { color: var(--yellow-deep); }

/* ==========================================================================
   ROUND SEVENTEEN · 27 August 2026
   A cover on every piece of writing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The drawings are files in assets/images/blog/ rather than markup on the
   page, so any one of them can be replaced with a photograph later without
   opening a page. They are drawn in the same pencil as the rest of the site
   and multiply into the paper, which means no rectangle around them and no
   box for the index to turn back into a grid of cards.
   -------------------------------------------------------------------------- */
.post-cover {
  margin: 0;
  align-self: center;
}
.post-cover img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The row grows a third column to hold it, and Read comes back in beside the
   line it is talking about. */
.post-row {
  grid-template-columns: minmax(130px, 172px) minmax(0, 1fr) clamp(184px, 24vw, 360px);
}
.post-body .post-go {
  display: inline-block;
  margin-top: clamp(11px, 1.2vw, 17px);
}

@media (hover: hover) and (pointer: fine) {
  .post-row:hover .post-cover img { transform: scale(1.035); }
}

@media (max-width: 900px) {
  /* The single column is restated here rather than left to the rule further
     up the sheet: this block comes later, so at equal weight it is this one
     the browser keeps. */
  .post-row { grid-template-columns: minmax(0, 1fr); }
  /* The drawing goes first on a phone. It is the thing you see before you
     have decided whether to read the title. */
  .post-cover { order: -1; margin: 0 0 6px; max-width: 320px; }
  .post-body .post-go { display: none; }
}

/* --------------------------------------------------------------------------
   The cover at the top of a piece: wider than the column you read in,
   narrower than the page, sitting under the byline as the last part of the
   opening rather than as a banner above it.
   -------------------------------------------------------------------------- */
.post-lead {
  max-width: 860px;
  margin: clamp(26px, 3.2vw, 48px) auto 0;
}
.post-lead img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* ==========================================================================
   ROUND EIGHTEEN · 27 August 2026
   Page feedback taken at 1600 x 912 on the home, programme and community
   pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ONE · A sixth audience.

   Content creator joins the five. Six across on a wide screen; the phone
   breakpoints are restated here rather than left to the blocks further up the
   sheet, because at equal weight the browser keeps whichever comes last and
   that is now this one.
   -------------------------------------------------------------------------- */
.who-one { flex-basis: calc((100% - 5 * var(--who-gap)) / 6); }

@media (max-width: 1180px) {
  /* Six at this width would be six thin slivers. Three and three. */
  .who-one { flex-basis: calc((100% - 2 * var(--who-gap)) / 3); }
}
@media (max-width: 700px) {
  .who-one { flex-basis: calc((100% - var(--who-gap)) / 2); }
}

/* --------------------------------------------------------------------------
   TWO · The climb now carries all fifteen days.

   It used to show five points and call itself the shape of fifteen days. Every
   day has a point on the line and a number under the axis; five of them still
   carry a sentence, and those five alternate above and below the line so two
   chips can never meet.
   -------------------------------------------------------------------------- */
.curve-dot.is-tick { stroke-width: 2; }
.curve-dot.is-tick circle { fill: var(--yellow-light); }

/* The line climbs steeply to the right, so a chip hung twenty pixels over its
   own dot ends up sitting on the stretch of line after it and hiding the next
   day's point. The chips hang higher, and narrower, so every one of the
   fifteen dots stays visible. */
.curve-mark { max-width: 19ch; }

/* The chips keep their pixel size while the plot narrows, so between the
   drawing's last width and the point where it hands over to the list they
   shrink with it. Below 860 the drawing goes and the list takes over. */
@media (max-width: 1180px) {
  .curve-mark { max-width: 16ch; padding: 7px 10px 8px; }
  .curve-mark b { font-size: 13.5px; }
  .curve-mark span { font-size: 14px; }
}
.curve-mark:not(.is-below) { transform: translate(-50%, calc(-100% - 40px)); }
.curve-mark.is-end { transform: translate(-88%, calc(-100% - 40px)); }
.curve-mark.is-below { transform: translate(-50%, 40px); }

@media (prefers-reduced-motion: no-preference) {
  html.js .curve-mark:not(.is-below) { transform: translate(-50%, calc(-100% - 28px)) scale(0.94); }
  html.js .curve-mark.is-end { transform: translate(-88%, calc(-100% - 28px)) scale(0.94); }
  html.js .curve-mark.is-below { transform: translate(-50%, 26px) scale(0.94); }
  html.js .curve.is-in .curve-mark:not(.is-below) { transform: translate(-50%, calc(-100% - 40px)) scale(1); }
  html.js .curve.is-in .curve-mark.is-end { transform: translate(-88%, calc(-100% - 40px)) scale(1); }
  html.js .curve.is-in .curve-mark.is-below { transform: translate(-50%, 40px) scale(1); }
}

/* Each number is pinned to its own day rather than spaced out by the browser:
   with one-digit and two-digit days in the same strip, space-between drifts. */
#program .curve-axis-x {
  display: block;
  height: 1.4em;
  top: 88%;
  letter-spacing: 0.04em;
}
#program .curve-axis-x span {
  position: absolute;
  top: 0;
  left: var(--x);
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   THREE · Every day in the spine gets a drawing.

   One line glyph per topic, in the same pencil weight as the rest of the
   drawings, sitting with the day number rather than inside the writing. They
   are decoration for a row that already says what it is, so they are hidden
   from a screen reader.
   -------------------------------------------------------------------------- */
.day-glyph {
  display: block;
  width: clamp(38px, 3.6vw, 52px);
  height: auto;
  margin: 10px 0 0;
  color: var(--yellow-deep);
  opacity: 0.9;
}
.day-glyph svg { width: 100%; height: auto; display: block; }
.day.is-featured .day-glyph { opacity: 1; }
/* The bonus row is a solid yellow band, so its glyph takes ink like the
   rest of that row rather than vanishing into the background. */
.day.is-bonus .day-glyph { color: var(--ink); opacity: 0.72; }

@media (max-width: 700px) {
  /* The day rows go to one column here, so the glyph sits beside the number
     rather than starting a second line above the title. */
  .spine .day-tag { display: flex; align-items: center; gap: 12px; }
  .day-glyph { margin: 0; width: 30px; }
}

/* --------------------------------------------------------------------------
   FOUR · Three mentors, three photographs the same size.

   The first shot is 864 x 1112 and the other two are 720 x 900. `height: 100%`
   inside a box whose own height comes from `aspect-ratio` resolves to auto, so
   that one photograph fell back to its own proportion and pushed its frame
   seventeen pixels taller than the other two. The ratio goes on the image, so
   all three are cut to the same shape whatever they were shot at.
   -------------------------------------------------------------------------- */
.pcard-shot img {
  aspect-ratio: 4 / 5;
  height: auto;
}

/* --------------------------------------------------------------------------
   FIVE · The chat, in the school's own colours.

   Green was WhatsApp's. The bar takes the brand orange with ink on top of it,
   the way the buttons do, the mark replaces the two letters, and the wallpaper
   goes: it was a hatched field that made every bubble work to be read. Plain
   paper behind, white bubbles in, a soft yellow tint out.

   Both pages get it. The chat is on the home page as well as the programme
   page, and it is one rule for both.
   -------------------------------------------------------------------------- */
.wa { background: var(--paper); }

.wa-bar {
  background: var(--yellow-deep);
  color: var(--ink);
}
.wa-avatar {
  background: var(--paper-bright);
  overflow: hidden;
  padding: 0;
}
.wa-avatar img { display: block; object-fit: contain; }
.wa-who span { opacity: 0.72; }

.wa-thread {
  background-color: var(--paper);
  background-image: none;
}
.wa-day {
  background: var(--paper-bright);
  border: 1px solid var(--line);
}
.wa-msg.is-in {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(20, 21, 25, 0.05);
}
.wa-msg.is-out {
  background: #fdeccd;
  border: 1px solid #f3d7a4;
  box-shadow: 0 1px 0 rgba(20, 21, 25, 0.05);
}
.wa-msg.is-out .wa-time::after { color: var(--yellow-deep); }
.wa-typing { background: var(--paper-bright); border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   SIX · Two actions outside the island.

   The island is one square that has to be opened before it offers anything, so
   on a wide screen the two things people come to the top of the page for now
   sit beside it and never move. Below 1240 they would run into the island, and
   there they stay inside the menu, which is where a phone finds them anyway.
   -------------------------------------------------------------------------- */
.top-actions {
  position: absolute;
  top: 20px;
  right: clamp(16px, 2vw, 34px);
  height: 72px;
  display: none;
  align-items: center;
  gap: 10px;
}
.top-actions .btn-small {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 999px;
}
.top-login .login-btn {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 18px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.top-login .login-btn:hover { border-color: var(--yellow-deep); background: #fff; }

/* The hover line. It says the one thing worth knowing before pressing, so
   nobody presses it, reads a panel and presses it again to get anywhere. */
.top-hint {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: 30ch;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.top-login:hover .top-hint,
.top-login .login-btn:focus-visible ~ .top-hint { opacity: 1; transform: none; }
.top-login .login-btn[aria-expanded="true"] ~ .top-hint { opacity: 0; }

.top-actions .login-note { top: calc(100% + 10px); left: auto; right: 0; }

@media (min-width: 1240px) {
  .top-actions { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .top-hint { transition: none; }
}

/* --------------------------------------------------------------------------
   SEVEN · The rail on a phone. Not asked for; found while checking.

   Below 960 the day rail turns on its side and becomes a slim sticky bar, and
   its track is meant to be two pixels tall. A later block, written for the
   full-height desktop rail, gave `.rail-track` a height of its own and told it
   to stretch. That block sits further down the sheet, so on a phone the track
   won at 256 pixels tall and full width: a grey slab across the top of the
   programme, over the day it was supposed to be measuring.

   The bar's own geometry is restated here, after both of them.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .spine-rail {
    height: auto;
    align-items: center;
    padding: 9px var(--gutter) 10px;
  }
  .rail-track { height: 2px; align-self: center; }
  .rail-read { align-self: center; }
}

/* ==========================================================================
   ROUND NINETEEN · 29 August 2026
   The new page copy, and the rotating hero word it asks for.
   ========================================================================== */

/* The full sentence a screen reader hears in place of the six fragments. Off
   the page, still in the accessibility tree. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The rotating hero word.

   Two lines. The fixed line above is the promise and is set smaller; the word
   below is the headline and carries the size. The cycle itself is in
   script.js.

   The whole job of this block is that nothing moves except the word. The slot
   is a block of fixed height taken from its own line-height, and the word
   inside it is nowrap, so "A second income" and "Skills" occupy exactly the
   same room and the buttons underneath never shift. The measure comes off the
   headline for the same reason: a ch limit plus nowrap would push the longest
   of the six out of the column.

   These carry .hero.is-screen in front of them because the full-screen hero
   block further up the sheet sets both size and measure on .hero-copy h1, and
   it is more specific than the plain selector.

   The motion is the site's own reveal, smaller and faster: up ten pixels and
   out, in from ten below. Nothing slides, flips or types.
   -------------------------------------------------------------------------- */
.hero-copy h1.hero-rotate,
.hero.is-screen .hero-copy h1.hero-rotate {
  max-width: none;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  /* one step down from the single-line headline this replaced: at 104px the
     longest of the six words ran past the column, and it cannot wrap */
  font-size: clamp(32px, min(5.6vw, 9vh), 88px);
}

.hero-fixed {
  display: block;
  font-size: 0.4em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--graphite);
  margin-bottom: 0.14em;
}

/* Fixed height, so a longer word cannot move anything under it. Named swap
   rather than slot because .hero-slot is already taken further up the sheet by
   a placeholder box that is no longer on any page. */
.hero-swap {
  display: block;
  min-height: 1.06em;
  white-space: nowrap;
}

.hero-word {
  display: inline-block;
  color: var(--yellow-deep);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.hero-word.is-out {
  opacity: 0;
  transform: translateY(-10px);
  transition-timing-function: ease-in;
}
/* the frame the incoming word starts from, before script.js releases it */
.hero-word.is-in {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

/* On a phone the ceiling is "A second income", the longest of the six, and it
   cannot wrap. 42px is the largest size at which it still lands on one line in
   a 360px column, measured rather than guessed, so the headline stays a
   headline instead of shrinking to the size of the line under it. */
@media (max-width: 700px) {
  .hero-copy h1.hero-rotate,
  .hero.is-screen .hero-copy h1.hero-rotate {
    font-size: clamp(30px, 9.2vw, 42px);
  }
  .hero-fixed { font-size: 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { transition: none; }
}

/* ==========================================================================
   ROUND TWENTY · 29 August 2026
   The new copy on the other ten pages, and the two-line rule it broke.

   Nothing here is a new idea. The headlines from Parts C to G are longer than
   the ones they replaced, and four page heroes ran to three and four lines
   because of it. In every case the constraint was the measure, not the size:
   these heroes are held to a ch limit set when the headlines were short.

   As everywhere else in this sheet, each rule restates the phone case in its
   own block. Appended rules sit after the earlier media queries and win at
   equal specificity, so a rule written once here would otherwise take the
   phone with it.
   ========================================================================== */

/* The centred heroes: programme, community and blog. 22ch put "Day 1 you have
   nothing. Day 15 your page is running." on three lines; measured, it needs 24,
   and 26 leaves room for the next headline without touching the size. */
.page-hero .hero-grid.is-single h1 { max-width: 26ch; }

/* The two heroes with a photograph beside them: results and Lokesh. Their copy
   column is the narrower half of the grid, and 15ch inside it put "He left
   school after 10th. He came back a gold medalist." on four lines at every
   width, phone included, because this rule sits below the one that lifts the
   measure on small screens.

   24ch is the measured minimum for the longer of the two. At that measure the
   Lokesh headline lands on two lines up to 46px, so the size comes down to
   meet it: 2.85vw is 45.6px at 1600 and 36.5px at 1280, both inside it. */
.page-hero .hero-grid:not(.is-single) .hero-copy h1 {
  max-width: 24ch;
  font-size: clamp(24px, 2.85vw, 46px);
}

@media (max-width: 700px) {
  /* the phone size these pages already used, restated so the rule above does
     not carry its desktop vw down here */
  .page-hero .hero-grid:not(.is-single) .hero-copy h1 { font-size: clamp(24px, 6.2vw, 34px); }
}

/* The community cards. "Guests take questions live. You keep the recording."
   is 50 characters, which is three lines in a 350px card at 24px and two at
   23px. One step down, and the six titles stay the same size as each other. */
.gcard h3 { font-size: clamp(19px, 1.5vw, 22px); }

/* The odometer rows on results.html. Both halves are nowrap inside a slot
   clipped to exactly one line, so a longer "before" does not wrap, it gets
   cut off at the edge and there is nothing in the line count to show it.

   Part D's second row is "Good at your work, invisible online", fourteen
   characters longer than the line it replaced, and it ran past the slot
   everywhere between the 900px breakpoint, where the before is dropped, and
   about 1500px, where the row is wide enough again. Measured worst case is
   440px of text in a 415px slot at 901px, so the size steps down about six
   per cent across that band and the row is whole again at every width. */
@media (min-width: 901px) and (max-width: 1500px) {
  .turn-line { font-size: clamp(25px, 2.85vw, 43px); }
}

/* ==========================================================================
   ROUND TWENTY-ONE · 29 August 2026
   A bigger promise line, and three more marks in the orbit.
   ========================================================================== */

/* The fixed half of the hero was set at 0.4em, which put it at 32px under an
   81px word: a caption above a headline rather than the first half of one
   sentence. At 0.6em it is 49px and reads as the line it is, and the rotating
   word still leads by a clear step.

   The ceiling is where it stops being one line. Measured on a phone, where the
   column is the whole screen and cannot grow: 31px at 412 and 27px at 360,
   against the 23px and 20px this sets. */
.hero-fixed { font-size: 0.6em; }

@media (max-width: 700px) {
  /* restated, or the desktop value above would carry down here */
  .hero-fixed { font-size: 0.62em; }
}

/* Under a tablet the copy needs the whole width, so nothing can sit beside it.
   The marks move into the two bands it leaves: everything above the headline,
   which is deep enough for two rows, and the strip between the note and the
   bar at the bottom, which is deep enough for one.

   Canva and Meta stand down. Nine marks around a phone hero is a crowd, and
   those two are the ones the other seven already imply.

   This replaces the four-corner arrangement written when there were six.
   Positions are measured against the hero box: the island clears it entirely,
   the headline starts at 23%, the note ends at 77% and the action bar begins
   at 88%. */
@media (max-width: 900px) {
  .hero-orbit img:nth-child(3),
  .hero-orbit img:nth-child(6) { display: none; }

  /* above the headline, two rows */
  .hero-orbit img:nth-child(1) { left: 4%;  top: 3%; }   /* Instagram */
  .hero-orbit img:nth-child(4) { left: 78%; top: 2%; }   /* Facebook */
  .hero-orbit img:nth-child(7) { left: 26%; top: 13%; }  /* ChatGPT */
  .hero-orbit img:nth-child(8) { left: 58%; top: 13%; }  /* Claude */

  /* and the strip along the bottom */
  .hero-orbit img:nth-child(2) { left: 4%;  top: 79%; }  /* YouTube */
  .hero-orbit img:nth-child(9) { left: 43%; top: 79%; }  /* Gemini */
  .hero-orbit img:nth-child(5) { left: 78%; top: 79%; }  /* WhatsApp */
}

/* The promise line set in italic, 29 August. It leans, the word under it does
   not, so the two halves of the sentence read as two different voices rather
   than one line that happens to break.

   No webfont is needed for it: the headline stack is Helvetica, Neue, Arial,
   and every one of those ships a real italic, so nothing here is a browser
   slanting an upright face. */
.hero-fixed { font-style: italic; }

/* index #mentor: real proof photos + compact stats */
.proof-shot:has(img) { border-style: solid; }
.proof-shot.logo img { object-fit: contain; padding: 8px; background: #fff; }
.mentor-stats { list-style: none; padding: 0; }
.mentor-stats li { padding: 16px clamp(14px, 1.6vw, 22px); }
.mentor-stats strong { font-size: clamp(24px, 2.2vw, 32px); }
.mentor-stats span { font-size: 14.5px; }
.proof-shot.dark { background: #000; }
.proof-shot.dark img { object-fit: contain; background: #000; transform: scale(1.5); }

/* index #mentor: tidy on phones */
@media (max-width: 700px) {
  .mentor-photos img { max-height: 440px; object-fit: cover; object-position: center top; }
  .mentor-photos figcaption { text-align: center; }
  .proof li { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; text-align: left; padding: 16px 0; align-items: center; }
  .proof-shot { width: 76px; grid-row: span 2; }
  .proof-what { text-align: left; font-size: 16.5px; }
  .proof-what span { margin-top: 2px; }
  .proof-link { grid-column: 2; justify-self: start; width: auto; font-size: 14px; }
  .mentor-stats li { padding: 14px 12px; }
}