/* ==========================================================================
   Ryan Hamilton Coaching
   Block order is fixed. Add rules inside the matching block, never at the end.
   1. Tokens  2. Reset  3. Base type  4. Layout  5. Components
   6. Sections  7. Media queries
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root {
  --navy: #1B2A4A;
  --navy-deep: #14203A;
  --navy-surface: #23345A;
  --gold: #C9A24B;
  --gold-soft: #E3CB93;
  --cream: #FBF8F2;
  --cream-deep: #F3EDE1;
  --ink: #2E3338;
  --error: #B3261E;

  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --nav-h: 4.5rem;
}

/* 2. Reset =============================================================== */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:root { scroll-behavior: smooth; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--cream :where(a, button, input, select, textarea, summary):focus-visible,
.legal :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--navy);
}

.btn--gold:focus-visible { outline-color: var(--navy); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 0; }
/* 3. Base type =========================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
}

h1, h2, h3, .wordmark {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }

p { max-width: var(--measure); }
/* 4. Layout ============================================================== */

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gap);
}

.section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.section--navy { background: var(--navy); color: var(--cream); }
.section--cream { background: var(--cream); color: var(--ink); }
.section--navy-deep { background: var(--navy-deep); color: var(--cream); }
.section--cream-deep { background: var(--cream-deep); color: var(--ink); }
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy-deep h1, .section--navy-deep h2, .section--navy-deep h3 { color: var(--cream); }
.section--cream h1, .section--cream h2, .section--cream h3,
.section--cream-deep h1, .section--cream-deep h2, .section--cream-deep h3 { color: var(--navy); }

.section__lead { font-size: 1.125rem; }
.rule { width: 4rem; height: 3px; background: var(--gold); border: 0; margin: 1.5rem 0; }
/* 5. Components ========================================================== */

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn--gold { background: var(--gold); color: var(--navy); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--cream);
  transition: padding 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-condensed {
  background: var(--navy-deep);
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.28);
}

/* The header is the one row that does not sit inside the 72rem text column.
   Wordmark, six nav links and the CTA need about 1200px between them, which
   does not fit in the 1088px the column leaves once gutters are removed. It
   used to overflow silently into the page margins; a longer CTA label pushed
   that overflow past the viewport edge and produced a horizontal scrollbar at
   1280 and 1366, the two commonest laptop widths. The header now spans the
   full page width and aligns to the page gutter instead. */
.site-header__inner {
  display: flex;
  align-items: center;
  /* Stays responsive. A flat 1.5rem is wider than --gap at phone widths and
     pushes the hamburger off the right edge at 375. */
  gap: clamp(1rem, 2vw, 1.5rem);
  min-height: var(--nav-h);
  max-width: none;
  transition: min-height 0.2s ease;
}
.site-header.is-condensed .site-header__inner { min-height: 3.5rem; }

.wordmark {
  font-size: 1.15rem;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
}

/* Logo lockup: the mark sits beside the name, and the name stays real text
   so it is selectable, searchable and readable if the image fails. */
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; }
.wordmark__mark { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; }
.wordmark__name { white-space: nowrap; }
.site-header.is-condensed .wordmark__mark { width: 1.75rem; height: 1.75rem; }
.wordmark--footer .wordmark__mark { width: 1.9rem; height: 1.9rem; }

/* The CTA must never wrap. Adding the logo mark widened the wordmark and
   squeezed this button until it broke one word per line, which tripled the
   height of a sticky header. */
.site-header__cta { white-space: nowrap; flex: 0 0 auto; }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: 1.15rem; }
.site-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: 3px;
  color: var(--cream);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--gold);
  content: "";
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after { position: absolute; top: 6px; }
.nav-toggle__label { display: none; }

.form { margin-top: 2rem; display: grid; gap: 1.1rem; max-width: 34rem; }
.form--inline { max-width: 46rem; }

.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field input,
.field select {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border: 2px solid var(--error); }

.field-error { font-size: 0.85rem; color: var(--gold-soft); min-height: 1em; }
.field-error:empty { min-height: 0; }

.hp { position: absolute; left: -9999px; }

.site-footer { background: var(--navy-deep); color: var(--cream); padding-block: 3rem 1.5rem; }
.site-footer__inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: var(--gap); align-items: start; }
.wordmark--footer { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.site-footer__tagline { color: var(--gold-soft); font-size: 0.9rem; margin-top: 0.35rem; }
.site-footer__nav ul { display: grid; gap: 0.4rem; font-size: 0.9rem; }
.site-footer__legal { display: flex; gap: 1rem; font-size: 0.9rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__copy {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  text-align: center;
  font-size: 0.85rem;
  color: var(--gold-soft);
  max-width: none;
}

/* 6. Sections ============================================================ */

/* Hero */
.hero { padding-block: clamp(4rem, 11vw, 8rem); }
.hero h1 { max-width: 20ch; }
.hero .section__lead { max-width: 58ch; color: var(--cream); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
  max-width: none;
}
.hero__secondary { color: var(--gold-soft); font-size: 0.95rem; }

/* Why This Is Different */
#why p + p { margin-top: 1.25rem; }

.steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3rem;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  padding: 1.1rem 1.25rem;
  font-weight: 600;
  color: var(--navy);
}
.steps__num {
  flex: 0 0 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-head);
}

/* Cards, shared by Who This Is For and Coaching Options */
.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
}
.card {
  background: var(--navy-surface);
  border-top: 3px solid var(--gold);
  padding: 1.5rem 1.35rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.95rem; }

.closing {
  margin: 2.5rem auto 0;
  text-align: center;
  max-width: 46ch;
  font-size: 1.1rem;
  color: var(--gold-soft);
}

/* What We Work On */
.checklist { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 2rem; }
.checklist li {
  position: relative;
  padding-left: 2rem;
  max-width: 46ch;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  transform: rotate(45deg);
}

/* A Note to Parents */
.letter {
  background: var(--cream);
  color: var(--ink);
  border-left: 4px solid var(--gold);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 60rem;
  font-size: 1.075rem;
}
.letter h2 { color: var(--navy); margin-bottom: 1.25rem; }
.letter p + p { margin-top: 1.15rem; }

/* Coaching Options */
.cards--price .card { background: var(--cream-deep); }
.card--price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card--price h3 { color: var(--navy); }
.card--price p { max-width: none; }
.card--featured { outline: 2px solid var(--gold); }

.card__price {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
}
.card__for { margin-top: auto; }

.ribbon {
  position: absolute;
  top: -0.85rem;
  right: 1rem;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
}

.note { margin-top: 1.5rem; font-size: 0.95rem; }
.closing--dark { color: var(--navy); }
.center { text-align: center; margin-top: 2rem; max-width: none; }

/* Free Question Bank / Booking */
/* Booking: the Calendly link is the primary path, the form the alternative. */
.booking-cta { margin-top: 2.25rem; max-width: none; }
.booking-alt {
  margin-top: 2.5rem;
  color: var(--gold-soft);
  font-size: 0.95rem;
}

.contact { margin-top: 2rem; color: var(--gold-soft); }

/* About */
.about { display: grid; grid-template-columns: 22rem 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.about__photo img { width: 100%; height: auto; border-top: 4px solid var(--gold); }
.about__body p + p { margin-top: 1.15rem; }

.credentials { margin-top: 1.75rem; display: grid; gap: 0.75rem; }
.credentials li { position: relative; padding-left: 1.6rem; max-width: var(--measure); }
.credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Legal pages */
.legal h1 { color: var(--navy); }
.legal h2 { font-size: 1.25rem; margin-top: 2.25rem; margin-bottom: 0.6rem; }
.legal p { margin-bottom: 0.85rem; }
.legal-banner {
  background: var(--cream-deep);
  border-left: 4px solid var(--gold);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  max-width: none;
}


/* Question bank preview. Navy section, so cards sit on navy-surface and gold
   is used only for pips and borders, never for text on a light ground. */
.qbank { margin-top: 3rem; border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: 2.5rem; }
.qbank h3 { margin-bottom: 0.5rem; }
.qbank__intro { font-size: 0.95rem; color: var(--gold-soft); }

.qbank__controls { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); margin-top: 1.75rem; }
.qbank__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.qbank__filter-label { font-size: 0.85rem; color: var(--gold-soft); margin-right: 0.25rem; }
.qbank__group { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  color: var(--cream);
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--gold); }
.chip.is-on { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 700; }

.qbank__count { margin-top: 1.5rem; font-size: 0.9rem; color: var(--gold-soft); }
.qbank__empty { margin-top: 1rem; color: var(--gold-soft); }

.qbank__list { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(2, 1fr); }
.qcard {
  background: var(--navy-surface);
  border-left: 3px solid var(--gold);
  padding: 1.1rem 1.25rem;
}
.qcard[hidden] { display: none; }
.qcard__q { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; max-width: none; }
.qcard__theme { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-soft); margin-top: 0.4rem; }
.qcard__testing { font-size: 0.9rem; margin-top: 0.75rem; max-width: none; }
.qcard__label { color: var(--gold-soft); }
.qcard__meta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 0.9rem; font-size: 0.8rem; color: var(--gold-soft); max-width: none; }
.qcard__rating { display: inline-flex; align-items: center; gap: 0.35rem; }
.pips { display: inline-flex; gap: 2px; }
.pip { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold); }
.pip--on { background: var(--gold); }

/* The four-layer reveal. These rules only ever apply once JavaScript has
   collapsed the layers, so a card with JS off keeps its original look. */
.qcard { display: flex; flex-direction: column; }
.qcard__layer { position: relative; padding-left: 1.6rem; }
.qcard__layer[hidden] { display: none; }
.qcard__layer::before {
  content: attr(data-layer);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.68rem;
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qcard__more {
  margin-top: 0.9rem;
  margin-right: auto;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-soft);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.qcard__more:hover:not(:disabled) { background: var(--gold); color: var(--navy); }
/* Spent, not broken: it stays legible rather than fading to unreadable. */
.qcard__more:disabled { cursor: default; opacity: 0.75; border-style: dashed; }
.qbank__expand {
  justify-self: start;
  align-self: end;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-soft);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
}
.qbank__expand:hover { background: var(--gold); color: var(--navy); }


/* Diagnostic quiz. Sits on the cream Coaching Options section, so gold is
   used for fills and borders only and never for text. */
.quiz { background: var(--cream-deep); border-left: 4px solid var(--gold); padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 3rem; }
.quiz h3 { color: var(--navy); }
.quiz__intro { margin-top: 0.5rem; }
.quiz__noscript { margin-top: 1rem; font-weight: 600; }
.quiz__scale-note { margin-top: 1.75rem; font-weight: 600; color: var(--navy); }

.qz-q { border: 0; padding: 0; margin: 1.5rem 0 0; }
.qz-q legend { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--navy); display: flex; align-items: center; gap: 0.6rem; }
.qz-q__n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 0.85rem; }
.qz-q__help { font-size: 0.92rem; margin-top: 0.35rem; }

.scale { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.scale__end { font-size: 0.8rem; color: var(--ink); opacity: 0.75; }
.scale__opt { display: inline-flex; align-items: center; }
.scale__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.scale__opt span {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--navy); border-radius: 50%;
  cursor: pointer; font-weight: 600; color: var(--navy);
}
.scale__opt input:checked + span { background: var(--navy); color: var(--cream); }
.scale__opt input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 3px; }

.qz-check { display: block; margin-top: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.quiz__actions { margin-top: 2rem; max-width: none; }

.quiz__result { margin-top: 2rem; border-top: 2px solid var(--gold); padding-top: 1.5rem; }
.quiz__result:focus { outline: 3px solid var(--navy); outline-offset: 4px; }
.quiz__headline { font-weight: 600; color: var(--navy); }
/* The readiness band. Quieter than the package pick below it: the band is
   context, the recommendation is the answer. */
.quiz__band {
  margin-top: 1rem;
  background: var(--cream-deep);
  border-left: 4px solid var(--navy);
  padding: 1.1rem 1.25rem;
}
.quiz__band-label {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.quiz__band-name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 0.25rem;
}
.quiz__band-note { font-size: 0.92rem; margin-top: 0.5rem; max-width: var(--measure); }
.quiz__area { font-size: 0.9rem; margin-top: 0.6rem; max-width: var(--measure); }
.quiz__area-label { font-weight: 600; color: var(--navy); }

.quiz__pick { margin-top: 1rem; background: var(--cream); border: 1px solid var(--gold); padding: 1.25rem; }
.quiz__pkg { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--navy); }
.quiz__price { font-family: var(--font-head); font-size: 1.15rem; color: var(--navy); margin-top: 0.2rem; }
.quiz__shape { font-size: 0.95rem; margin-top: 0.5rem; }
.quiz__reason, .quiz__note { margin-top: 1rem; }
.quiz__note { border-left: 3px solid var(--gold); padding-left: 0.9rem; }
.quiz__cta { margin-top: 1.5rem; max-width: none; }
.quiz__caveat { margin-top: 0.9rem; font-size: 0.85rem; opacity: 0.8; }
.quiz__missing { font-weight: 600; color: var(--error); }


/* STAR builder. Sits on the cream What We Work On section, so gold is used
   for the Action emphasis and letter badges only, never for text on cream. */
.star { margin-top: 3rem; border-top: 1px solid rgb(27 42 74 / 0.15); padding-top: 2.5rem; }
.star h3 { color: var(--navy); }
.star__intro { margin-top: 0.5rem; }

.star__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; }
.star-tab {
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  padding: 0.4rem 0.95rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.star-tab:hover { background: rgb(27 42 74 / 0.06); }
.star-tab.is-on { background: var(--navy); color: var(--cream); font-weight: 600; }

/* Experience translation. The quote is set large and plain, the way a student
   actually says it; the competencies underneath are the payoff, so they get
   the gold. */
.xlist { display: grid; gap: 1rem; margin-top: 2rem; }
.xl-card {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 1.25rem 1.4rem;
}
.xl-card__label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.65;
}
.xl-card__label--gold { opacity: 1; color: var(--navy); }
.xl-card__sees {
  margin: 0.4rem 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  color: var(--navy);
  max-width: 34ch;
}
.xl-card__toggle {
  margin-top: 0.9rem;
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 1.1rem;
  /* 44px: this is the one control on the page a phone user is meant to tap
     repeatedly, so it gets a full-size tap target rather than a 36px pill. */
  min-height: 44px;
  cursor: pointer;
}
.xl-card__toggle:hover { background: var(--navy); color: var(--cream); }
.xl-card__body { margin-top: 1.1rem; }
.xl-card__body[hidden] { display: none; }
.xl-card__list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.xl-card__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  padding-left: 1.15rem;
  position: relative;
}
/* A gold tick, drawn rather than an icon font, and hidden from screen readers
   because the list already reads as a list. */
.xl-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.45rem;
  height: 0.75rem;
  border: solid var(--gold);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.xl-what { font-weight: 600; color: var(--navy); }
.xl-theme {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  white-space: nowrap;
}
.xl-card__evidence {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(27 42 74 / 0.14);
  font-size: 0.95rem;
  max-width: var(--measure);
}
.xl-card__ev-label { font-weight: 600; color: var(--navy); }
.xl-close {
  margin-top: 2rem;
  border-left: 4px solid var(--gold);
  padding-left: 1rem;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  max-width: var(--measure);
}

/* Long-term value. A numbered progression, static: it is a sequence, and the
   numbering is the information. */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.stage {
  background: var(--cream);
  border-top: 3px solid var(--gold);
  padding: 1.1rem 1.2rem;
}
/* Navy, not gold. Gold on cream is 2.26:1 and the site's rule is that gold
   never carries text on a light ground, only fills and rules. */
.stage__n {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  /* 0.7, not 0.6: at 0.6 this small number sits at 3.94:1 and misses AA. */
  opacity: 0.7;
}
.stage__name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 0.2rem;
}
.stage__note { font-size: 0.88rem; margin-top: 0.4rem; max-width: none; }
.lasting__close {
  margin-top: 2rem;
  border-left: 4px solid var(--gold);
  padding-left: 1rem;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  max-width: var(--measure);
}

/* Two doors. Not a filter and not a toggle: both cards stay on the page and
   both sets of links work, because plenty of parents want the student's
   answer and plenty of students want to see the price. */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 2rem; }
.path-card {
  background: var(--navy-surface);
  border-top: 3px solid var(--gold);
  padding: 1.4rem 1.5rem;
}
.path-card__who {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cream);
}
.path-card__lead { margin-top: 0.6rem; font-weight: 600; color: var(--gold-soft); max-width: var(--measure); }
.path-card__body { margin-top: 0.7rem; font-size: 0.95rem; max-width: var(--measure); }
.path-card__links {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
/* gold-soft on navy-surface is 7.74:1, so these carry text safely. Plain gold
   would be 5.12:1, which passes AA but not the 7:1 the rest of the site holds
   itself to on dark grounds. */
.path-card__links a {
  color: var(--gold-soft);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 2px solid rgb(201 162 75 / 0.6);
  padding-bottom: 2px;
}
.path-card__links a:hover { border-bottom-color: var(--gold); }

/* The method. Five steps, deliberately static: every other section on the
   page has something to click, and the spine of the thing reads better as a
   plain sequence than as one more widget. */
.method {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  counter-reset: none;
}
.method__step {
  position: relative;
  padding-left: 3.25rem;
}
.method__n {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
}
/* The line joining one step to the next. Decorative only: the numbers and the
   ordered list carry the sequence for anyone who cannot see it. */
.method__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(2.35rem / 2 - 1px);
  top: 2.6rem;
  bottom: -1.25rem;
  width: 2px;
  background: rgb(27 42 74 / 0.18);
}
.method__name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 2.35rem;
}
.method__what { margin-top: 0.35rem; max-width: var(--measure); }
.method__close {
  margin-top: 2rem;
  border-left: 4px solid var(--gold);
  padding-left: 1rem;
  font-weight: 600;
  color: var(--navy);
}

.star-panel__lead { margin-top: 1.5rem; font-weight: 600; color: var(--navy); }
.star-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.star-grid[hidden] { display: none; }

/* The weak answer. Deliberately plain: it is the version the visitor probably
   recognises as their own, and dressing it up would undercut that. */
.star-weak {
  margin-top: 1.25rem;
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  padding: 1.1rem 1.25rem;
}
.star-weak__label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.star-weak__quote {
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--navy);
  max-width: var(--measure);
}
.star-weak__diag { margin-top: 0.85rem; font-size: 0.92rem; max-width: var(--measure); }
.star-weak__diaglabel { font-weight: 600; color: var(--navy); }
.star-weak__cta { margin-top: 1.1rem; }
.star-strong__head {
  margin-top: 1.75rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}
.star-strong__head[hidden] { display: none; }

.star-step { background: var(--cream-deep); border-left: 3px solid rgb(27 42 74 / 0.25); padding: 1rem 1.15rem; }
.star-step__head { font-family: var(--font-head); font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 0.6rem; }
.star-step__letter { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: var(--cream); font-size: 0.9rem; }
.star-step__what { font-size: 0.9rem; margin-top: 0.35rem; }
.star-step__timing { font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; margin-top: 0.35rem; opacity: 0.75; }
.star-step__eg { margin-top: 0.75rem; }

/* The Action step is the point of the whole exercise, so it gets the weight. */
.star-step--a { background: var(--cream); border-left-width: 5px; border-left-color: var(--gold); }
.star-step--a .star-step__letter { background: var(--gold); color: var(--navy); }
.star-step--a .star-step__timing { opacity: 1; font-weight: 700; color: var(--navy); }

.star__drill { margin-top: 1.75rem; background: var(--cream-deep); border-left: 4px solid var(--gold); padding: 1rem 1.25rem; }


/* Scorecard, investment summary and reframe cards. All three sit on navy
   sections, so gold appears as pips, borders and button fills only. */
.scorecard, .invest, .reframe { margin-top: 3rem; }
.scorecard { border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: 2.5rem; }
.scorecard__intro, .reframe__intro { margin-top: 0.5rem; color: var(--gold-soft); }

.scorecard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.metric { background: var(--navy-surface); border-top: 3px solid var(--gold); padding: 1.1rem 1.25rem; }
.metric__n { font-family: var(--font-head); font-size: 1.6rem; color: var(--gold-soft); line-height: 1; }
.metric__name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-top: 0.35rem; }
.metric__what { font-size: 0.9rem; margin-top: 0.5rem; }
.metric__scale { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; margin-top: 0.9rem; color: var(--gold-soft); }
.metric__pips { display: inline-flex; gap: 3px; }

/* What a 2 and a 4 sound like. The 4 is marked with a gold rule and the 2 with
   a muted one, so the pair reads as a direction of travel rather than as
   pass and fail. Gold is never used as text colour on these, only as a rule:
   on this ground it would not carry enough contrast. */
.metric__levels { margin-top: 1rem; display: grid; gap: 0.65rem; }
.metric__levels[hidden] { display: none; }
.metric__level {
  font-size: 0.87rem;
  line-height: 1.55;
  padding-left: 0.85rem;
  /* 0.55, not 0.35: at 0.35 this rule sat at 2.23:1 against the card and was
     effectively invisible. At 0.55 it clears 3:1 and still reads as the
     quieter of the pair against the solid gold on the 4. */
  border-left: 2px solid rgb(227 203 147 / 0.55);
  max-width: none;
}
.metric__level--four { border-left-color: var(--gold); }
.metric__leveln {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: baseline;
}
.metric__level--two .metric__leveln { background: rgb(227 203 147 / 0.4); color: var(--cream); }

.scorecard__levels-intro { margin-top: 1.75rem; }
.scorecard__toggle {
  margin-top: 0.9rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-soft);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
}
.scorecard__toggle:hover { background: var(--gold); color: var(--navy); }

.scorecard__close { margin-top: 1.75rem; border-left: 4px solid var(--gold); padding-left: 1rem; }

.invest__list { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.invest__list li { padding-left: 1.6rem; position: relative; max-width: var(--measure); }
.invest__list li::before { content: ; position: absolute; left: 0; top: 0.6em; width: 0.7rem; height: 0.7rem; background: var(--gold); transform: rotate(45deg); }
.invest__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; max-width: none; }
.invest__alt { color: var(--gold-soft); font-size: 0.95rem; }

.reframe { border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: 2.5rem; }
.reframe__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.75rem; }
.reframe__pair { background: var(--navy-surface); padding: 1.1rem 1.25rem; border-left: 3px solid var(--gold); }
.reframe__who { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-soft); }
.reframe__before { margin-top: 0.6rem; font-style: italic; opacity: 0.75; }
.reframe__after { margin-top: 0.75rem; margin-left: 0; padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.16); }


/* Thank-you page: the lead magnet the form promised. */
.grab { background: var(--cream-deep); border-left: 4px solid var(--gold); padding: clamp(1.25rem, 3vw, 2rem); margin: 2rem 0; }
.grab h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.grab__cta { margin-top: 1.25rem; max-width: none; }
.grab__note { margin-top: 1rem; font-size: 0.9rem; opacity: 0.85; }


/* --- Phase 1: hero, credibility strip, really-asking demo --- */

.hero__positioning { font-family: var(--font-head); font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--gold-soft); max-width: 44ch; margin-top: 1.25rem; }
.hero__note { margin-top: 1rem; font-size: 0.85rem; color: var(--gold-soft); opacity: 0.85; max-width: none; }

/* Credibility strip. Tight vertical rhythm so it reads as a band, not a section. */
.section--tight { padding-block: clamp(2rem, 5vw, 3.25rem); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat { border-left: 3px solid var(--gold); padding-left: 1rem; }
.stat__n { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.95rem; font-weight: 600; margin-top: 0.35rem; color: var(--cream); }
.stat__sub { font-size: 0.82rem; margin-top: 0.25rem; color: var(--gold-soft); max-width: 28ch; }

/* The demo. Cream section, so gold is fills and borders only. */
.ra { background: var(--cream); border-left: 4px solid var(--gold); padding: clamp(1.25rem, 3vw, 2rem); margin-top: 2rem; }
.ra__count { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); opacity: 0.7; }
.ra__q { font-family: var(--font-head); font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 600; color: var(--navy); margin-top: 0.6rem; max-width: 40ch; }
.ra__q:focus { outline: 3px solid var(--navy); outline-offset: 4px; }
.ra__meta { font-size: 0.8rem; color: var(--ink); opacity: 0.7; margin-top: 0.5rem; }
.ra__prompt { font-weight: 600; color: var(--navy); margin-top: 1.5rem; }

.ra__opts { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.ra-opt {
  display: flex; align-items: flex-start; gap: 0.8rem; width: 100%; text-align: left;
  background: var(--cream); border: 1px solid rgb(27 42 74 / 0.25); border-radius: 4px;
  padding: 0.85rem 1rem; cursor: pointer; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ra-opt:hover:not(:disabled) { border-color: var(--navy); transform: translateY(-1px); }
.ra-opt:disabled { cursor: default; }
.ra-opt__letter { flex: 0 0 auto; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); color: var(--cream); font-size: 0.8rem; font-weight: 700; }
.ra-opt.is-right { border-color: #1E6B4F; border-width: 2px; background: #EAF3EE; }
.ra-opt.is-right .ra-opt__letter { background: #1E6B4F; }
.ra-opt.is-wrong { border-color: var(--error); border-width: 2px; background: #FBEDEC; }
.ra-opt.is-wrong .ra-opt__letter { background: var(--error); }

.ra__reveal { margin-top: 1.5rem; border-top: 2px solid var(--gold); padding-top: 1.25rem; }
.ra__verdict { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.ra__verdict.is-right { color: #1E6B4F; }
.ra__verdict.is-wrong { color: var(--navy); }
.ra__best { margin-top: 0.75rem; }
.ra__best-label { color: var(--navy); font-weight: 600; }
.ra__explain { margin-top: 0.9rem; }
.ra__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.5rem; max-width: none; }
.ra__cta { color: var(--navy); font-size: 0.95rem; }
.ra__noscript { margin-top: 1rem; font-weight: 600; }

/* 7. Media queries ======================================================= */

/* 82rem, not 80rem: the desktop header needs about 1204px of row plus gutters,
   so it does not actually fit at 1280. Keep this in step with the matchMedia
   query in js/main.js, which drives the toggle's aria state. */
@media (max-width: 82rem) {
  .site-header__cta { display: none; }
  .nav-toggle { display: flex; align-items: center; gap: 0.6rem; }
  .nav-toggle__label { display: inline; font-size: 0.9rem; }

  .site-nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--navy-deep);
    margin: 0;
    padding: 1rem var(--gap) 2rem;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; gap: 0.25rem; }
  .site-nav a { display: block; padding: 0.85rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); }

  body.nav-locked { overflow: hidden; }
}

@media (max-width: 60rem) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .scorecard__grid { grid-template-columns: 1fr 1fr; }
  .reframe__list { grid-template-columns: 1fr; }
  .qbank__list { grid-template-columns: 1fr; }
  .qbank__controls { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .paths { grid-template-columns: 1fr; }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: 1fr; }

  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 18rem; }

  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .stats { grid-template-columns: 1fr; }
  .scorecard__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .stages { grid-template-columns: 1fr; }
  /* The theme tag stops sharing a line with the competency once there is no
     room for both, rather than forcing a horizontal scroll. */
  .xl-theme { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 300ms ease;
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }
}