/* ============================================================
   components.css: Pegler Training & Resources. Loaded after base.css (CONVENTIONS.md ordering).
   The visual signature: dark cinematic surfaces built on Glen's own plant photography, one turbine
   rotor drawn in code (tools/turbine-svg.mjs) that turns slowly behind the About and course headers,
   and soft geometry everywhere (large radii, light display weights) so the whole site reads as one
   machined, rounded object rather than a template. Motion is transform and opacity only, never the
   LCP element, and every animation stops under prefers-reduced-motion.
   ============================================================ */

/* ---------- Global type tuning ---------- */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.012em; }
h1 { font-weight: 300; line-height: 1.05; }
h2 { font-weight: 300; line-height: 1.1; }
strong { font-weight: 500; }
.lede { font-family: var(--font-display); font-weight: 300; line-height: 1.45; }
.muted { color: var(--ink-soft); }
.wrap-narrow { max-width: 48rem; margin-inline: auto; }
.section-head { max-width: 40rem; margin-bottom: var(--space-5); }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); }
.section-head h2 + p { margin-top: var(--space-2); }
@media (min-width: 1024px) { .section-head { max-width: 56rem; } .section-head p { max-width: 40rem; } }
/* design-qa-gate, 24 Sep 2026: the Title Case "Verification of Competency" group heading on courses.html was 343.8px in a
   342px column at 390 (iPhone 12 to 14) and wrapped where v14 fitted. -0.02em puts it on one line from 386px (4px spare at
   390) and keeps the intended "Verification / of Competency" break below that. Used on that one heading only. */
.section-head--tight h2 { letter-spacing: -0.02em; }

/* ---------- Dark surfaces ---------- */
.dark {
  background: var(--dark);
  color: var(--dark-text);
}
.dark .lede,
.dark .muted,
.dark .section-head p { color: var(--dark-text-soft); }
.dark h1, .dark h2, .dark h3 { color: #ffffff; }
.dark a:not(.btn) { color: inherit; }
.dark :focus-visible { outline-color: var(--brand-accent); }
/* Two-tone focus ring (a11y-gate B3, 21 Sep 2026): the accent outline alone measured 2.4:1 on paper and 2.7:1 on
   white; the 2px ink ring inside it gives 16:1 there and disappears on the dark surfaces, where the accent already
   passes. Text fields keep their own border-to-ink indicator (more specific rule below). */
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
/* B6: a newly focused control must not land under the sticky header or the call bar. */
html { scroll-padding-top: calc(var(--header-h) + 12px); }
@media (max-width: 720px) { html { scroll-padding-bottom: 4.5rem; } }

/* ---------- Header ---------- */
.site-header {
  background: rgba(14, 20, 24, 0.94);
  color: var(--dark-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--dark-line); background: rgba(14, 20, 24, 0.98); }
.header-row { min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: auto; height: 44px; }
.site-nav a:not(.btn) { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; color: var(--dark-text); }
.site-nav a:hover:not(.btn) { text-decoration: none; color: #ffffff; }
.site-nav a[aria-current="page"]:not(.btn) { text-decoration: none; color: #ffffff; position: relative; }
.site-nav a[aria-current="page"]:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.45em; height: 2px; border-radius: 2px; background: var(--brand-accent);
}
.nav-phone a { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-phone svg { width: 18px; height: 18px; }
.site-nav .btn { padding: 0.6rem 1.15rem; }
.nav-toggle { min-height: 44px; color: var(--dark-text); border-color: var(--dark-line); border-radius: var(--radius-pill); font-family: var(--font-display); }
@media (max-width: 760px) {
  .site-nav { background: var(--dark); color: var(--dark-text); }
  .site-nav a:not(.btn) { font-size: 1.5rem; }
  .nav-close { color: var(--dark-text); }
  .site-nav a[aria-current="page"]:not(.btn)::after { display: none; }
  .site-nav a[aria-current="page"]:not(.btn) { color: var(--brand-accent); }
}
@media (max-width: 1040px) and (min-width: 761px) {
  .site-nav ul { gap: var(--space-3); }
  .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav a[aria-current="page"]:not(.btn)::after { bottom: 6px; }
  .site-nav .btn { min-height: 44px; }
  .nav-phone { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  border: 1px solid currentColor;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: transparent; transform: translateY(-1px); }
.dark .btn:not(.btn-accent) { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.dark .btn:not(.btn-accent):hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.btn-accent { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-accent-ink); }
.btn-accent:hover { background: #ea9530; filter: none; transform: translateY(-1px); }
.btn-ghost { border-color: transparent; background: transparent; color: inherit; }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.05); transform: none; }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.07); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ---------- Rotor (the signature) ---------- */
.rotor {
  position: absolute;
  pointer-events: none;
  color: var(--steel);
  line-height: 0;
}
.rotor svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }
.rotor-hero { width: min(72vw, 600px); aspect-ratio: 1; right: -12vw; top: 4%; opacity: 0.24; }
.rotor-quote { width: min(60vw, 520px); aspect-ratio: 1; left: -22vw; bottom: -18%; opacity: 0.18; }
.rotor-cta { width: min(50vw, 420px); aspect-ratio: 1; right: -12vw; top: -30%; opacity: 0.2; }
.rotor-page { width: min(56vw, 480px); aspect-ratio: 1; right: -16vw; top: -20%; opacity: 0.22; }
@keyframes rotor-spin { to { transform: rotate(360deg); } }
/* M2 fix 2: only About and course headers turn (body.rotor-turns, partials.mjs layout()), 240 s a turn. pixelate.js
   pauses it off screen (.is-off) and stops it at first input (.is-still, WCAG 2.2.2). No JS, no turn. */
@media (prefers-reduced-motion: no-preference) {
  html.js .rotor-turns .rotor-page svg { animation: rotor-spin 240s linear infinite; }
  html.js .rotor-turns .rotor-page.is-off svg, html.js .rotor-turns .rotor-page.is-still svg { animation-play-state: paused; }
}
@media (max-width: 760px) {
  .rotor-hero { width: 92vw; right: -46vw; top: 10%; opacity: 0.26; }
  .rotor-quote { width: 80vw; left: -50vw; bottom: -10%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 11vw, 9rem) clamp(4.5rem, 9vw, 7rem);
  min-height: min(94vh, 960px);
  display: flex;
  align-items: center;
  isolation: isolate;
  background: #05080b;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
/* The blades fill the frame at close to their natural crop, slightly cool and a touch brighter than the
   previous photo so the machine reads at a glance; the scrims keep the left third dark for the type and
   leave the fan of blades lit on the right (the grain layer was removed in v36: banned by the brief).
   Never animated (LCP, M2 fix 1): scale(1.04) is the crop a11y-gate measured. */
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 45%;
  filter: saturate(1.05) brightness(0.86) contrast(1.08);
  transform: scale(1.04);
}
.hero-media::after {
  /* a11y-gate B4, 29 Sep 2026: the dark stops follow the right edge of the text column (the wrap's left gutter plus
     36rem, the lede's 34rem plus 2rem) instead of fixed percentages, so the lede and points stay at 4.5:1 or better from
     1024px up; the blades stay lit to the right of the text. design-qa-gate, same night: 46rem blacked out the hero at
     tablet widths, so 761 to 1023px uses the phone treatment below instead. */
  --text-edge: calc(max(var(--space-4), (100% - var(--wrap)) / 2 + var(--space-4)) + 36rem);
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 11, 0.96) 0%, rgba(5, 8, 11, 0.86) calc(var(--text-edge) - 10rem), rgba(5, 8, 11, 0.8) var(--text-edge), rgba(5, 8, 11, 0.42) calc(var(--text-edge) + 8rem), rgba(5, 8, 11, 0.12) calc(var(--text-edge) + 20rem), rgba(5, 8, 11, 0.3) 100%),
    linear-gradient(180deg, rgba(5, 8, 11, 0.55) 0%, rgba(5, 8, 11, 0) 28%, rgba(5, 8, 11, 0.15) 70%, rgba(5, 8, 11, 0.9) 100%),
    radial-gradient(120% 90% at 78% 48%, rgba(5, 8, 11, 0) 0%, rgba(5, 8, 11, 0) 45%, rgba(5, 8, 11, 0.55) 100%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero-inner { max-width: 46rem; }
/* The H1 is two set lines ("Boiler and turbine" / "training", a <br> from docs/copy/home.md). Measured in Rubik 300 the
   first line is 7.6 times the font size wide, so on phones of 320 to 380px, at the DEFAULT text size only, the media
   query below caps the size at the column width / 7.8 (360px: 40px, 320px: 34.9px) and the line never breaks. It is
   scoped with an em min-width on purpose (a11y-gate, 24 Sep 2026, WCAG 1.4.4 / F94): an unconditional vw cap stopped
   browser zoom reaching 200% on laptops and shrank the heading when a user enlarged their text. Media-query em follows
   the user's own default size, so the cap switches off when text is enlarged and under 320 CSS px (heavy zoom). The
   / 3.4 cap here only keeps the longest word ("training", 3.28em) inside the column at large text sizes. Re-measure
   both divisors if the H1 wording or font changes. From 380px up the clamp alone decides, as before. */
.hero h1 { color: #ffffff; margin-bottom: var(--space-4); font-size: min(clamp(2.6rem, 1.4rem + 5vw, 5.2rem), calc((100vw - 2 * var(--space-4)) / 3.4)); letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(5, 8, 11, 0.6); }
@media (min-width: 20em) and (max-width: 379.98px) { .hero h1 { font-size: min(2.6rem, calc((100vw - 2 * var(--space-4)) / 7.8)); } }
.hero .lede { color: #d7dee3; max-width: 34rem; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); }
.hero-cta { gap: var(--space-3); margin-top: var(--space-5); }
.hero-points {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--dark-line);
  color: #d7dee3; font-size: var(--step--1);
}
.hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-points li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); flex: none; }
@media (min-width: 761px) and (max-width: 1023px) {
  .hero-media img { filter: saturate(1.05) brightness(0.62) contrast(1.08); }
  .hero-media::after { background: linear-gradient(180deg, rgba(5, 8, 11, 0.62) 0%, rgba(5, 8, 11, 0.5) 30%, rgba(5, 8, 11, 0.62) 60%, rgba(5, 8, 11, 0.92) 100%); }
}
@media (max-width: 760px) {
  .hero { min-height: min(86vh, 760px); padding-top: 3.5rem; }
  .hero-media img { object-position: 62% 50%; filter: saturate(1.05) brightness(0.62) contrast(1.08); }
  .hero-media::after { background: linear-gradient(180deg, rgba(5, 8, 11, 0.62) 0%, rgba(5, 8, 11, 0.5) 30%, rgba(5, 8, 11, 0.62) 60%, rgba(5, 8, 11, 0.92) 100%); }
}

/* ---------- Quote funnel ---------- */
.quote-section { position: relative; overflow: hidden; isolation: isolate; }
.quote-section .wrap { position: relative; }
.quote-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) {
  .quote-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
  .quote-intro { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.quote-intro h2 { max-width: 16ch; }
.quote-assure { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); color: var(--dark-text-soft); }
.quote-assure li { display: flex; gap: 0.75rem; align-items: flex-start; }
.quote-assure svg { width: 22px; height: 22px; flex: none; color: var(--brand-accent); margin-top: 0.1rem; }
.quote-call {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: var(--space-4);
  padding: 0.8rem 1.1rem; border-radius: var(--radius-pill); text-decoration: none;
  border: 1px solid var(--dark-line); color: var(--dark-text);
}
.quote-call:hover { border-color: rgba(255, 255, 255, 0.5); }
.quote-call svg { width: 20px; height: 20px; color: var(--brand-accent); }

.quote-panel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.quote-progress { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--space-3); letter-spacing: 0.02em; }
.steps-rail { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; align-items: center; gap: 0.4rem; }
.steps-rail li { display: flex; align-items: center; flex: 1; }
.steps-rail li:last-child { flex: 0; }
.steps-rail li span {
  width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 0.85rem; font-weight: 500;
  border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--surface);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.steps-rail li::after { content: ""; flex: 1; height: 2px; border-radius: 2px; margin-inline: 0.4rem; background: var(--line); transition: background 0.2s ease; }
.steps-rail li:last-child::after { display: none; }
.steps-rail li.is-current span { background: var(--ink); color: #ffffff; border-color: var(--ink); transform: scale(1.08); }
.steps-rail li.is-done span { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-accent-ink); }
.steps-rail li.is-done::after { background: var(--brand-accent); }
/* The rail is aria-hidden and repeats the visible "Step 1 of 5" text. Its ~237px minimum width fixed the form column
   too wide below 320 CSS px (heavy zoom) and at enlarged text on phones, clipping the name, phone and email inputs.
   Media-query em follows the user's default text size, so this only fires in those states (a11y-gate, 24 Sep 2026,
   tested on the v21 draft: 0 items clipped at 256, 273 and 288 CSS px; no change at 320 and up at default text). */
@media (max-width: 19.99em) { .steps-rail { display: none; } }

.quote-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quote-form legend, .mini-form legend {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; line-height: 1.2;
  padding: 0; margin-bottom: var(--space-3); color: var(--ink);
}
.quote-form legend:focus { outline: none; }
/* M2 fix 7: incoming step, 16px from the right over 240 ms. */
.step { animation: step-in 0.24s ease-out both; }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.step-help { color: var(--ink-soft); font-size: var(--step--1); margin: var(--space-2) 0 0; }
.sub-label { font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin: var(--space-4) 0 var(--space-2); grid-column: 1 / -1; }
.step-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
.step-actions .btn-accent { margin-left: auto; }

.field-row { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; margin-bottom: var(--space-3); }
.field label, .mini-form label { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; }
.field-opt { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }
.field-help { color: var(--ink-soft); font-size: var(--step--1); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 0.8rem 1rem; border: 1.5px solid var(--steel-deep); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5860' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px; padding-right: 2.6rem; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(14, 20, 24, 0.1); }
.field.has-error input, .field.has-error textarea { border-color: #b3261e; }
.field-error, .group-error, .form-error { color: #b3261e; font-size: var(--step--1); font-weight: 600; }
.group-error { grid-column: 1 / -1; }
.form-error { margin-top: var(--space-3); }

.tile-grid { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tile-grid { grid-template-columns: 1fr 1fr; } .tile-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile-body {
  display: flex; flex-direction: column; gap: 0.15rem; min-height: 3.4rem; justify-content: center;
  padding: 0.75rem 1rem 0.75rem 2.75rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.tile-body::before {
  content: ""; position: absolute; left: 1rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem;
  border: 1.5px solid var(--steel-deep); border-radius: 6px; background: var(--surface); transition: background 0.2s ease, border-color 0.2s ease;
}
.tile-radio .tile-body::before { border-radius: 50%; }
.tile-body::after {
  content: ""; position: absolute; left: 1.32rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 2px;
  background: var(--brand-accent-ink); opacity: 0; transform: scale(0.4); transition: opacity 0.15s ease, transform 0.15s ease;
}
.tile-radio .tile-body::after { border-radius: 50%; }
.tile-name { font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; line-height: 1.25; }
.tile-note { font-size: var(--step--1); color: var(--ink-soft); }
.tile:hover .tile-body { border-color: var(--steel-deep); }
.tile input:checked + .tile-body { border-color: var(--ink); background: var(--accent-soft); }
.tile input:checked + .tile-body::before { background: var(--brand-accent); border-color: var(--brand-accent); }
.tile input:checked + .tile-body::after { opacity: 1; transform: scale(1); }
.tile input:focus-visible + .tile-body { outline: 3px solid var(--brand-accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.tile-grid.has-error .tile-body { border-color: #b3261e; }
.sub-group { margin-top: 0; }

/* no motion on the success message (ART-DIRECTION s3) */
.quote-done { text-align: center; padding: var(--space-4) 0; }
.done-mark {
  display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--brand-accent); color: var(--brand-accent-ink); margin-bottom: var(--space-3);
}
.done-mark svg { width: 2rem; height: 2rem; }
.quote-done h3 { margin-bottom: var(--space-2); }
.quote-done p { max-width: 30rem; margin-inline: auto; color: var(--ink-soft); }
.done-ref { font-size: var(--step--1); margin-top: var(--space-3); }
.quote-done .quote-call { border-color: var(--line); color: var(--ink); }
.mini-done { text-align: center; padding: var(--space-3) 0; }

/* no-JS: every step visible, buttons hidden, plain submit */
html:not(.funnel-js) .quote-form .step[hidden] { display: block; }
html:not(.funnel-js) .quote-form [data-next], html:not(.funnel-js) .quote-form [data-back] { display: none; }
html:not(.funnel-js) .steps-rail, html:not(.funnel-js) .quote-progress { display: none; }
html:not(.funnel-js) .sub-group[hidden] { display: grid; }
/* with JS a switched-off sub-group must really hide: .tile-grid's display:grid otherwise beats [hidden]
   (link-and-form-clicker, 29 Sep 2026: "How many people?" showed for "Just me") */
html.funnel-js .sub-group[hidden] { display: none; }

/* ---------- Mini forms (contact, interest) ---------- */
.mini-form { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); }
.dark .mini-form { background: var(--paper); color: var(--ink); border: 0; }
.mini-form .step-actions { justify-content: flex-start; }
.mini-form .step-actions .btn-accent { margin-left: 0; }

/* ---------- Course cards ---------- */
.course-grid { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .course-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .course-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1100px) { .course-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.course-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit; min-height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* M2 fix 5: focus lifts like hover; no shadow (none on cards, and it repaints). */
.course-card:hover, .course-card:focus-visible { transform: translateY(-3px); border-color: var(--steel); }
.course-card h3 { margin: 0; font-size: 1.25rem; }
.course-card .code { font-size: var(--step--1); color: var(--ink-soft); font-family: var(--font-display); letter-spacing: 0.02em; }
.course-card p { color: var(--ink-soft); font-size: 1rem; flex: 1; }
.course-card .more { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 500; margin-top: auto; }
.course-card .more svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.course-card:hover .more svg, .course-card:focus-visible .more svg { transform: translateX(4px); }
.course-card.is-soon { background: var(--paper); }
.course-card .soon { font-size: var(--step--1); color: var(--ink-soft); font-family: var(--font-display); }
.dark .course-card { background: var(--dark-2); border-color: var(--dark-line); color: var(--dark-text); }
.dark .course-card p, .dark .course-card .code, .dark .course-card .soon { color: var(--dark-text-soft); }
.dark .course-card:hover, .dark .course-card:focus-visible { border-color: var(--steel-deep); }

/* ---------- Feature / photo bands ---------- */
.band { position: relative; overflow: hidden; }
.band-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 880px) { .band-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .band-grid.flip > :first-child { order: 2; } }
.band-photo { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.band-photo img { width: 100%; height: 100%; object-fit: cover; }
.band-photo.wide { aspect-ratio: 4 / 3; }
.band-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.check-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: 0.7rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.check-list svg { width: 22px; height: 22px; flex: none; color: var(--brand-accent); margin-top: 0.15rem; }
.dark .check-list { color: var(--dark-text); }

/* ---------- Partner strip ---------- */
.partners { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.partner {
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.3rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-family: var(--font-display); font-weight: 500;
}
.partner img { height: 36px; width: auto; } /* true aspect (450x85 file, image-curator 21 Sep 2026) */
@media (max-width: 760px) { .partner img { height: auto; width: 150px; } } /* leaves the label two lines on a phone card */
.partner:hover { border-color: var(--steel); }
.partner svg { width: 18px; height: 18px; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--space-4); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
/* seo-optimizer, 28 Sep 2026: each question is now an <h3 class="faq-q"> inside the summary. This resets every heading
   rule that would otherwise reach it (base.css h3 size, margin and text-wrap: balance; components.css h3 weight and
   letter-spacing; .course-body h3; .dark h3 colour) back to the summary's own values, so the rendered question is
   unchanged. Measured in headless Chrome at 390 and 1280 against the previous build. */
.faq summary .faq-q { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-wrap: pretty; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 300; color: var(--steel-deep); transition: transform 0.25s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > ul { padding-bottom: var(--space-3); color: var(--ink-soft); }
.dark .faq details { background: var(--dark-2); border-color: var(--dark-line); }
.dark .faq details > p { color: var(--dark-text-soft); }

/* ---------- CTA band ---------- */
/* VOC band on the home page (21 Sep 2026): one assessment listed apart from the eight-card course grid. */
.voc-band { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.voc-band h2 { margin-bottom: var(--space-2); }
.voc-band p { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .voc-band { grid-template-columns: 1fr; } }
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band .wrap { position: relative; display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 800px) { .cta-band .wrap { grid-template-columns: 1fr auto; } }
.cta-band h2 { max-width: 20ch; margin-bottom: var(--space-2); }
.cta-band .hero-cta { margin-top: 0; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.page-hero .wrap { position: relative; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { max-width: 40rem; }
.page-hero .crumbs { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--step--1); color: var(--dark-text-soft); }
.page-hero .crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.page-hero .crumbs a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.page-hero .crumbs { align-items: center; }
.page-hero .crumbs a:hover { text-decoration: underline; }
.page-hero .code-line { font-family: var(--font-display); color: #d7dee3; margin: 0 0 var(--space-3); letter-spacing: 0.02em; } /* a11y-gate I8: 4.25:1 worst on the cutaway at --dark-text-soft */
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: saturate(0.85) brightness(0.55); }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 24, 0.95), rgba(14, 20, 24, 0.7) 60%, rgba(14, 20, 24, 0.5)); }

/* ---------- Course page layout ---------- */
.course-layout { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) { .course-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); } .course-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.course-body h2 { margin-top: var(--space-5); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.course-body h2:first-child { margin-top: 0; }
.course-body h3 { margin-top: var(--space-4); font-size: 1.15rem; font-weight: 500; }
.course-body ul { padding-left: 1.1em; }
.course-body li { margin-bottom: 0.35rem; }
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.aside-card h2 { font-size: 1.15rem; margin-bottom: var(--space-3); }
.aside-card dl { margin: 0; display: grid; gap: 0.6rem; }
.aside-card dt { font-size: var(--step--1); color: var(--ink-soft); }
.aside-card dd { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 500; }
.aside-card .btn { width: 100%; margin-top: var(--space-3); }
.aside-card .quote-call { margin-top: var(--space-3); border-color: var(--line); color: var(--ink); width: 100%; justify-content: center; }
/* Online booking (booking-link.js): shipped hidden, shown only once Glen's booking system says it is open. */
[data-booking][hidden], [data-booking-link][hidden], [data-booking-nav][hidden] { display: none; }
.booking-block { background: var(--surface); border-top: 1px solid var(--line); }
.booking-block .lede { max-width: 44rem; margin-block: var(--space-2) var(--space-4); }
.booking-frame { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.booking-iframe { display: block; width: 100%; min-height: 320px; border: 0; }
.booking-iframe.is-sized { min-height: 0; }
.outline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; counter-reset: outline; }
.outline li { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.outline li::before { counter-increment: outline; content: counter(outline, decimal-leading-zero); font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; color: var(--steel-deep); line-height: 1.2; }
.outline strong { display: block; font-family: var(--font-display); font-weight: 500; }
.outline span { color: var(--ink-soft); font-size: 1rem; }
.related { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .related { grid-template-columns: repeat(3, 1fr); } } /* v36: at 640-899 three columns squeezed the card titles */

/* ---------- Coming soon ---------- */
.soon-note { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); color: var(--dark-text-soft); margin: 0 0 var(--space-3); }
.soon-note::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); }
.online-grid { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .online-grid { grid-template-columns: 1fr 1fr; } }
.online-card { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--dark-2); border: 1px solid var(--dark-line); }
.online-card h3 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.online-card p { color: var(--dark-text-soft); font-size: 0.95rem; }
.dark .outline li { background: var(--dark-2); border-color: var(--dark-line); }
.dark .outline li::before { color: var(--steel); }
.dark .outline strong { color: #ffffff; }
.dark .outline span { color: var(--dark-text-soft); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 2fr 3fr; } }
.contact-cards { display: grid; gap: var(--space-3); }
.contact-card { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.contact-card svg { width: 24px; height: 24px; color: var(--brand-accent); flex: none; }
.contact-card strong { display: block; font-family: var(--font-display); font-weight: 500; }
.contact-card span { color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- Legal / prose pages ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.4rem; margin-top: var(--space-5); }
.prose p, .prose li { color: var(--ink-soft); }
/* design-qa-gate 29 Sep 2026: body lines ran 89 to 94 characters at 1280 and 1920 */
.prose p, .course-body > p, .voc-band p, .step-help { max-width: 34rem; } /* 68ch was 691px in Rubik (1ch = the wide 0), about 88 characters; 34rem is about 69 */
/* touch screens get 44px header targets at every width (iPad landscape is 1180 to 1366px) */
@media (pointer: coarse) {
  .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav a[aria-current="page"]:not(.btn)::after { bottom: 6px; }
  .site-nav .btn { min-height: 44px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: var(--dark-text); border-top: 1px solid var(--dark-line); }
.site-footer h2 { font-size: 1rem; font-weight: 500; color: #ffffff; margin-bottom: var(--space-3); }
.footer-brand img { width: 150px; height: auto; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--dark-text-soft); max-width: 26rem; font-size: 0.95rem; }
.footer-contact { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: 0.5rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; min-height: 44px; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact svg { width: 18px; height: 18px; color: var(--brand-accent); }
.footer-nav ul + h2 { margin-top: var(--space-4); }
.footer-nav a { text-decoration: none; color: var(--dark-text-soft); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer-nav li { margin-bottom: 0; }
.footer-nav a:hover { color: #ffffff; text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--dark-line); color: var(--dark-text-soft); font-size: var(--step--1); }
.footer-legal p { margin-bottom: 0.35rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Call bar ---------- */
/* M2 fix 6: no slide, the bar appears in place (a moving tap target). */
.call-bar { background: var(--dark); border-top: 1px solid var(--dark-line); visibility: hidden; transition: none; }
.call-bar.show { visibility: visible; }
.call-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 500; white-space: nowrap; }
.call-bar svg { width: 18px; height: 18px; }
.call-bar-call { color: #ffffff; }
.call-bar-book { background: var(--brand-accent); color: var(--brand-accent-ink); }

/* ---------- Utilities ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.spacer-5 { height: var(--space-5); }
[data-form-start] button { position: absolute; left: -9999px; }

/* ---------- Reveal: all in base.css (M2 fixes 3 and 4) ---------- */

/* ---------- Reduced motion: everything stops ---------- */
@media (prefers-reduced-motion: reduce) {
  .rotor svg { animation: none; }
  .step { animation: none; }
  .btn, .course-card, .tile-body, .steps-rail li span { transition: none; }
  .btn:hover, .course-card:hover, .course-card:focus-visible, .btn-accent:hover { transform: none; }
}

/* ---------- v36, 30 Sep 2026: M2 post-launch gate fixes ---------- */
/* phone-only heading breaks: "|" in a heading string renders <br class="m">, live at 480px and below */
@media (min-width: 500px) { br.m { display: none; } } /* v43: 481 was too early for Contact, Crane and one course group */
/* the accent is for quote and call actions only (ART-DIRECTION s1; design-taste 1) */
.hero-points li::before, .soon-note::before { background: var(--steel); }
.quote-assure svg, .dark .check-list svg, .footer-contact svg { color: var(--steel); }
.check-list svg, .contact-card svg { color: var(--steel-deep); }
/* secondary text at 16px (design-qa 5, design-taste 3); breadcrumbs and the footer legal line stay at 14px */
.hero-points, .quote-progress, .step-help, .field-help, .field-opt, .tile-note,
.course-card .soon, .aside-card dt, .contact-card span { font-size: 1rem; }
.field label, .mini-form label { font-size: 1rem; }
/* "Online refresher courses" and "Register your interest" sit on one line; only 1024 to 1180 needed a smaller size */
@media (min-width: 1024px) and (max-width: 1180px) { .online-teaser h2, #interest h2 { font-size: 2.4rem; } }
/* "Get a quote" lands on the form panel, clear of the sticky header */
#quote-form { scroll-margin-top: calc(var(--header-h) + 1rem); }
/* v40: "(VOC)" takes its own line only below 375px; the menu close button meets 44px; "Get a quote" focuses the panel */
@media (min-width: 375px) { br.m-xs { display: none; } }
.nav-close { min-width: 44px; min-height: 44px; }
#quote-form:focus { outline: none; }
/* v43: a second phone band for headings that only fit on one line from 640px (design-qa-gate v40 finding 5) */
@media (min-width: 640px) { br.m-sm { display: none; } }
/* v45, 20 Oct 2026: Halo Nation Training is the aligned partner and the strip sits centred (Jack, 20 Oct) */
.partners-section .section-head { margin-inline: auto; text-align: center; }
.partners-section .partners { justify-content: center; }
.partner img.partner-halo { height: 44px; width: auto; } /* 145x73 file: no stretch on a phone */