/* Haland Learning, instructor page stylesheet.
   All colour, type and spacing values trace to tokens.css,
   which was read out of the Figma file on 2026-09-07. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--surface);
  color: var(--text-body); font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-ls);
     font-weight: 800; color: #fff; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-ls);
     font-weight: 700; color: var(--ink); }
h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 700; color: var(--ink); }

.container { max-width: var(--container); margin-inline: auto; width: 100%; }

/* ---------- G1 utility bar (Figma 154:6620, tagline removed) ---------- */
.utility { background: var(--navy); }
.utility__inner { max-width: var(--container); margin-inline: auto;
  min-height: 46px; padding: 6px var(--gutter); display: flex; gap: 16px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
  font-family: var(--font-ui); }
.utility a { text-decoration: none; }
.utility__score { color: #fff; font-size: 16px; line-height: 1;
  text-transform: uppercase; letter-spacing: .6px; }
.utility__phone { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: var(--green-cta);
  border: 1px solid rgba(87,161,69,.45); }
.utility__phone svg { width: 17px; height: 17px; }

/* ---------- G2 masthead (Figma 154:6642) ---------- */
.masthead { background: #fff; }
.masthead__inner { max-width: var(--container); margin-inline: auto;
  min-height: 91px; padding-inline: var(--gutter); display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.masthead__logo { display: block; }
.masthead__logo img { width: var(--logo-w); height: var(--logo-h); object-fit: contain; }
.nav { display: flex; align-items: center; font-family: var(--font-ui); }
.nav a,
.nav button.nav__top { text-decoration: none; color: var(--navy); font-weight: 600;
  font-size: var(--nav-size); line-height: 1; letter-spacing: var(--nav-ls);
  text-transform: uppercase; padding: 15px; display: inline-flex;
  align-items: center; gap: 8px; }
.nav .caret { font-size: 14px; opacity: .9; }
.nav .btn { margin-left: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 40px; border-radius: var(--radius); font-size: 16px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; }
.btn--sm { padding: 14.25px 17.25px; border-radius: 2px; font-family: var(--font-ui);
  font-size: var(--nav-size); letter-spacing: .1px; text-transform: uppercase;
  background: var(--green-cta); border: 2px solid var(--green-cta); color: #fff; }
.btn--green { background: var(--green); color: #fff; }
.btn--ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
  color: #fff; backdrop-filter: blur(4px); }
.btn--outline { border-color: var(--green); color: #fff; padding: 12px 26px; }

/* ---------- Z1 hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); }
.hero__content { position: relative; max-width: var(--container); margin-inline: auto;
  padding: 101px var(--gutter) 64px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 20px; }
.hero__eyebrow { color: var(--orange); font-size: var(--eyebrow); font-weight: 700;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; }
.hero__sub { color: var(--text-on-dark); font-size: var(--lead);
  line-height: var(--lead-lh); max-width: 720px; }
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding-top: 20px; }

/* ---------- Z2 stat bar ---------- */
.stats { background: var(--ink-deep); border-top: 1px solid rgba(255,255,255,.07); }
.stats__inner { max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.stat { padding: 34px 24px; border-right: 1px solid rgba(255,255,255,.05); }
.stat:last-child { border-right: 0; }
.stat__value { color: #fff; font-size: var(--stat); line-height: var(--stat-lh); font-weight: 700; display: flex; align-items: baseline; min-height: calc(var(--stat-lh) + 4px); }
.stat__suffix { font-size: 15px; font-weight: 600; opacity: .75; margin-left: 8px; }
.stat__ast { color: var(--orange); font-size: 20px; vertical-align: super; margin-left: 2px; }
.stats__note { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 26px;
  color: var(--text-stat); font-size: 14px; line-height: 1.6; }
.stat__label { color: var(--text-stat); font-size: var(--stat-label); font-weight: 700;
  letter-spacing: var(--stat-label-ls); text-transform: uppercase; margin-top: 14px; }

/* ---------- shared section furniture ---------- */
.section { padding: var(--section-y) var(--gutter); background: var(--surface); }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--ink-deep); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--center { text-align: center; }
.section--center .section__head { align-items: center; }
.section__head { display: flex; flex-direction: column; gap: 15px; margin-bottom: 64px; }
.section__intro { font-size: var(--intro); line-height: var(--intro-lh);
  font-weight: 300; max-width: none; }
.section__intro--wide { max-width: none; }
.section__intro--onDark { color: var(--text-on-dark); }
.section__intro--center { margin-inline: auto; }

.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--orange);
  font-size: var(--eyebrow); line-height: var(--eyebrow-lh); font-weight: 700;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; }
.section--center .eyebrow { justify-content: center; }
.eyebrow__rule { width: 24px; height: 2px; background: var(--orange); flex: none; }

.grid { display: grid; gap: var(--grid-gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.stack { display: grid; gap: 20px; }

/* ---------- cards ---------- */
.card { background: #fff; border: 1px solid var(--line); box-shadow: var(--card-shadow);
  text-align: left; }
.card__body { padding: var(--card-pad); }
.card--topbar { border-top: 4px solid var(--orange); }
.card--topbar h3 { margin-bottom: 16px; }
.card--topbar p { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; }
.card--standard { margin-bottom: 20px; }
.card--standard h3 { margin: 14px 0 10px; }
.card--onDark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09);
  box-shadow: none; }
.card--onDark p { color: var(--text-on-dark); font-size: var(--body); line-height: var(--body-lh); }
.card--onDark h3 { margin-bottom: 10px; }
.card__num { color: var(--orange); font-size: 14px; font-weight: 700;
  letter-spacing: 1.4px; margin-bottom: 14px; }
.card--link { text-decoration: none; display: block; }
.card--link h3 { margin-bottom: 8px; }
.card--link p { font-size: var(--body); }
.card__go { color: var(--orange); font-weight: 700; font-size: 15px; margin-top: 16px; }

.daychip { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.daychip__n { width: 36px; height: 36px; border-radius: 18px; background: var(--ink);
  color: #fff; font-size: 16px; font-weight: 700; display: grid; place-items: center; }
.daychip__label { color: var(--text-muted); font-size: var(--eyebrow); font-weight: 700;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; }
.leavewith { border-top: 1px solid var(--line-soft); margin-top: 32px; padding-top: 28px; }
.leavewith__label { color: var(--text-muted); font-size: var(--eyebrow); font-weight: 700;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; margin-bottom: 8px; }
.leavewith__value { color: var(--text-strong); font-size: var(--small);
  line-height: var(--small-lh); font-weight: 500; }

/* ---------- Z4 included ---------- */
.included { border: 1px solid var(--line); background: #fff; box-shadow: var(--card-shadow); }
.included__row { display: flex; gap: 20px; align-items: center;
  padding: 22px var(--card-pad); border-bottom: 1px solid var(--line); }
.included__row:last-child { border-bottom: 0; }
.included__icon { width: 44px; height: 44px; flex: none; border-radius: 6px;
  background: var(--ink); color: #fff; display: grid; place-items: center; }
.included__icon svg { width: 20px; height: 20px; }
.included__row strong { display: block; color: var(--ink); font-size: 17px; }
.included__row em { font-style: normal; font-size: var(--body); }

.ongoing { background: var(--ink-deep); padding: 48px var(--card-pad); margin-top: var(--grid-gap); }
.eyebrow--onDark { color: var(--orange); }
.ongoing__figure { color: #fff; font-size: 64px; font-weight: 800; line-height: 1.1; margin-top: 22px; }
.ongoing__label { color: var(--text-stat); font-size: 14px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; margin-top: 6px; }
.ongoing__body { color: var(--text-on-dark); margin-top: 26px; max-width: none;
  font-size: var(--body); line-height: var(--body-lh); }

/* ---------- Z5 standards ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ink);
  color: #fff; border-radius: 999px; padding: 8px 18px; font-size: 14px;
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.pill--onDark { background: rgba(255,255,255,.08); }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.notice { display: flex; gap: 14px; background: #fdf3e7; border: 1px solid #f6d9b8;
  padding: 24px 28px; border-radius: var(--radius); }
.notice__mark { width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--orange); color: #fff; font-weight: 700; display: grid; place-items: center; }
.notice__title { color: #8a4b12; font-weight: 700; margin-bottom: 4px; }
.notice p { color: #8a4b12; font-size: var(--body); line-height: var(--body-lh); }

/* ---------- Z6 footnote ---------- */
.footnote { color: var(--text-muted); font-size: var(--small); line-height: 1.7;
  font-style: italic; margin-top: 28px; max-width: none; }

/* ---------- Z7 equipment ---------- */
.kit { border: 1px solid var(--line); margin-bottom: 24px; background: #fff; }
.kit__head { background: var(--ink); padding: 18px var(--card-pad); display: flex;
  align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kit__head h3 { color: #fff; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; }
.kit__tag { color: var(--orange); font-size: 14px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; }
.kit__list { padding: 26px var(--card-pad); display: grid; gap: 12px; }
.kit__list li { position: relative; padding-left: 22px; font-size: var(--body); }
.kit__list li::before { content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* ---------- Z8 reviews ---------- */
.score { font-size: 56px; font-weight: 800; color: var(--ink); margin-top: 24px; }
.score__stars { color: #f5b301; letter-spacing: 4px; font-size: 18px; }
.score__count { margin-top: 8px; }
.textlink { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }
.grid--reviews { margin-top: 40px; }
.card--review .quote { font-style: italic; font-size: var(--body);
  line-height: var(--body-lh); margin: 16px 0 26px; }
.byline { display: flex; gap: 14px; align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink);
  color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.byline strong { display: block; color: var(--ink); }
.byline em { font-style: normal; font-size: var(--small); }

/* ---------- Z9 audience ---------- */
.card--audience { text-align: left; }
.ticks { margin-top: 18px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 20px; color: var(--text-on-dark);
  font-size: var(--body); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px;
  height: 6px; border-radius: 50%; background: var(--orange); }
.section--center .hero__ctas { justify-content: center; margin-top: 40px; }

/* ---------- G3 footer ---------- */
.footer { background: #222; color: #cfcfcf; font-size: 17px; padding-inline: var(--gutter); }
.footer a { text-decoration: none; }
.footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 56px;
  padding: 56px 0 48px; align-items: start; text-align: left; }
.footer__label, .footer__links h4 { color: #6f6f6f; font-family: var(--font-ui); font-size: 22px;
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 4px; }
.footer__phone { font-size: 40px; line-height: 1.1; font-weight: 400; margin: 0 0 20px; }
.footer__phone a { color: #6aaa4f; }
.footer__line { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: #cfcfcf; }
.footer__line svg { width: 18px; height: 18px; color: #6aaa4f; flex: none; }
.footer__line a { color: #cfcfcf; }
.footer__buttons { margin: 22px 0 0; }
.footer__buttons .btn { border: 3px solid #5fa047; color: #fff; padding: 10px 20px; border-radius: 3px;
  font-family: var(--font-ui); font-weight: 700; font-size: 17px; text-transform: uppercase; }
.footer__note { color: #aaa; margin: 18px 0 0; }
.footer__bbb { margin: 24px 0 0; }
.footer__bbb img { border: 0; display: block; }
.footer__links h4:not(:first-child) { margin-top: 26px; }
.footer__links ul { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin: 0; }
.footer__links a { display: flex; align-items: center; gap: 12px; padding: 4px 0; color: #fff; font-size: 17px; }
.footer__links a::before { content: "\2192"; color: #6aaa4f; font-weight: 700; }
.footer__about p { color: #b5b5b5; line-height: 1.7; margin: 0 0 20px; }
.footer__ack { font-style: italic; font-size: 16px; color: #a8a8a8; }
.footer__logo { display: block; width: 100%; max-width: 380px; margin: 0 0 22px; }
.footer__bar { background: #181818; padding: 22px var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.footer__copy { margin: 0; font-size: 15px; color: #9a9a9a; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .stats__inner { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat { border-bottom: 1px solid rgba(255,255,255,.05); }
}
@media (max-width: 760px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .nav { gap: 14px; font-size: 15px; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .section__head { margin-bottom: 40px; }
  .utility__inner { justify-content: center; text-align: center; }
}

/* ---------- Z3 schedule + topic variants ---------- */
.sched { border: 1px solid var(--line); background: #fff; box-shadow: var(--card-shadow);
  border-top: 4px solid var(--orange); counter-reset: none; }
.sched__row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px;
  align-items: center; padding: 15px var(--card-pad); border-bottom: 1px solid var(--line-soft); }
.sched__row:last-child { border-bottom: 0; }
.sched__n { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.sched__t { color: var(--ink); font-size: var(--body); line-height: 1.4; }
.sched__k { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sched__k--cl { background: var(--line-soft); color: var(--text-strong); }
.sched__k--ic { background: #fdf3e7; color: #8a4b12; }
.sched__d { color: var(--text-body); font-size: var(--small); white-space: nowrap; min-width: 56px; text-align: right; }
.topics { border: 1px solid var(--line); background: #fff; box-shadow: var(--card-shadow);
  border-top: 4px solid var(--orange); padding: 26px var(--card-pad); display: grid; gap: 13px; }
.topics li { position: relative; padding-left: 22px; font-size: var(--body); line-height: 1.5; }
.topics li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--orange); }
@media (max-width: 640px) {
  .sched__row { grid-template-columns: 26px 1fr; }
  .sched__k, .sched__d { grid-column: 2; justify-self: start; text-align: left; }
}

/* ---------- Z11 FAQ ---------- */
.faq { border: 1px solid var(--line); background: #fff; box-shadow: var(--card-shadow); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__item summary { cursor: pointer; list-style: none; padding: 22px var(--card-pad);
  font-size: 17px; font-weight: 700; color: var(--ink); display: flex;
  align-items: center; justify-content: space-between; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--orange); font-size: 22px;
  font-weight: 400; line-height: 1; flex: none; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__a { padding: 0 var(--card-pad) 26px; }
.faq__a p { font-size: var(--body); line-height: var(--body-lh); max-width: none; }

/* ---------- Z12 ROI calculator (Linear HAL-155) ---------- */
.roi { border: 1px solid var(--line); border-top: 4px solid var(--orange); background: #fff;
  box-shadow: var(--card-shadow); padding: var(--card-pad); }
.roi__controls { display: grid; gap: 18px; margin-bottom: 32px; }
.roi__label { font-size: var(--body); color: var(--text-body); }
.roi__label strong { color: var(--ink); font-size: 22px; margin-left: 6px; }
.roi input[type=range] { width: 100%; accent-color: var(--green); height: 4px; }
.roi__toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.roi__toggle button { border: 0; background: #fff; padding: 11px 22px; font: inherit;
  font-size: 16px; font-weight: 600; color: var(--text-body); cursor: pointer; }
.roi__toggle button[aria-pressed=true] { background: var(--ink); color: #fff; }
.roi__table { width: 100%; border-collapse: collapse; }
.roi__table th, .roi__table td { padding: 15px 12px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.roi__table thead th { font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; }
.roi__table tbody th { text-align: left; font-weight: 600; color: var(--ink); font-size: var(--body); }
.roi__table td { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.roi__table td:last-child { color: var(--green); }
.roi__result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.roi__savings { font-size: 18px; color: var(--ink); }
.roi__savings strong { font-size: 26px; color: var(--green); font-variant-numeric: tabular-nums; }
.roi[data-savings=neg] .roi__savings strong { color: #b4472a; }
.roi__classes { font-size: var(--body); }
.roi__classes strong { color: var(--ink); }
.roi__export { margin-top: 26px; }
.roi__assume { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.roi__assume summary { cursor: pointer; font-size: var(--small); font-weight: 700;
  color: var(--text-strong); text-transform: uppercase; letter-spacing: 1px; }
.roi__assume ul { margin-top: 14px; display: grid; gap: 9px; }
.roi__assume li { position: relative; padding-left: 18px; font-size: var(--small); line-height: 1.6; }
.roi__assume li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--orange); }
@media print {
  .utility, .masthead, .footer, .hero, .roi__export, .roi input[type=range] { display: none !important; }
  section[data-zone]:not([data-zone="Z12"]) { display: none !important; }
  .roi__assume[open] summary { display: none; }
  .roi { border: 0; box-shadow: none; }
}

.reviews-fallback { font-size: var(--intro); line-height: var(--intro-lh); font-weight: 300; }

/* ---------- Z13 direct booking ----------
   DEAD as of 2026-10-01: the direct-booking section was folded into the
   inline enquiry intro. Rules kept in case the zone is reinstated. */
.section--tight { padding-block: 0; }
.direct { background: var(--ink-deep); padding: 38px var(--card-pad); display: flex;
  gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.direct h3 { color: #fff; margin-top: 12px; }
.direct__body { color: var(--text-on-dark); font-size: var(--body);
  line-height: var(--body-lh); margin-top: 8px; max-width: none; }

/* ---------- Z13 inline enquiry ---------- */
.enq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: start; }
@media (max-width: 900px) { .enq { grid-template-columns: 1fr; } }
.enq__intro h2 { margin: 6px 0 14px; }
.enq__alt { font-size: var(--body); margin-top: 14px; }
.enq__form { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange);
  box-shadow: var(--card-shadow); padding: 32px var(--card-pad); }
.enq__form .field { margin-bottom: 20px; }
.enq__form label { display: block; font-size: var(--small); font-weight: 700;
  color: var(--ink); margin-bottom: 8px; }
.req { color: var(--orange); }
.enq__form input, .enq__form select, .enq__form textarea { width: 100%; padding: 13px 14px;
  border: 1px solid #dde2e7; border-radius: var(--radius); font: inherit;
  font-size: var(--body); color: var(--ink); background: #fff; }
.enq__form select { max-width: 220px; }
.enq__form textarea { min-height: 92px; resize: vertical; }
.enq__form input:focus, .enq__form select:focus, .enq__form textarea:focus { outline: 0;
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(86,162,67,.13); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.enq__done { margin-top: 16px; color: var(--green); font-weight: 700; font-size: var(--body); }

/* ---------- Home: H1 hero variant ---------- */
.hero--page .hero__content { padding-block: 88px 80px; }
.hero--page h1 { margin: 0; }
.hero--home .hero__content { padding-block: 128px 112px; }
.hero--home h1 { max-width: 980px; }

/* ---------- Home H2: why Haland ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line);
  background: #fff; box-shadow: var(--card-shadow); }
.pillar { padding: 32px var(--card-pad) 40px; border-right: 1px solid var(--line); }
.pillar:last-child { border-right: 0; }
.pillar__icon { width: 64px; height: 64px; border-radius: 8px; background: var(--ink);
  color: #fff; display: grid; place-items: center; margin-bottom: 28px; }
.pillar__icon svg { width: 30px; height: 30px; }
.pillar h3 { margin-bottom: 16px; }
.pillar p { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; }
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: 0; }
}

/* ---------- Home H3: account tools ---------- */
.tool { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line);
  border-top: 4px solid var(--orange); box-shadow: var(--card-shadow); padding: 29px; }
.tool:hover, .tool:focus-visible { border-color: var(--green); }
.tool:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.tool__num { color: var(--orange); font-size: 14px; font-weight: 700; letter-spacing: 1.4px; }
.tool h3 { margin: 10px 0 12px; }
.tool__body { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; }
.tool__go { color: var(--green); font-weight: 700; font-size: 15px; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* ---------- Home H4: onsite course cards ---------- */
.course { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--card-shadow); overflow: hidden; }
.course:hover, .course:focus-visible { border-color: var(--green); }
.course:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.course__img { width: 100%; height: 224px; object-fit: cover; background: var(--line-soft); }
.course__body { padding: 24px; }
.course__body h3 { font-size: 19px; margin-bottom: 12px; }
.course__body p { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; }
.course__go { color: var(--orange); font-weight: 700; font-size: 15px; margin-top: 18px; }
.hero__ctas--left { justify-content: flex-start; padding-top: 56px; }
.btn--outline-ink { border-color: var(--ink); color: var(--ink); }
.btn--outline-ink:hover { background: var(--ink); color: #fff; }

/* ---------- Home H5: our approach ---------- */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: center; }
.approach h2 { margin: 12px 0 20px; }
.approach__cta { margin-top: 32px; }
.approach__img { width: 100%; height: auto; max-width: 100%; object-fit: cover;
  background: var(--line-soft); }
@media (max-width: 900px) { .approach { grid-template-columns: 1fr; } }

/* ---------- Home H7: client logos ---------- */
.clients { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line);
  background: #fff; }
.clients__cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 100px; display: grid; place-items: center; padding: 16px; }
.clients__cell:nth-child(4n) { border-right: 0; }
.clients__cell:nth-last-child(-n+2) { border-bottom: 0; }
.clients__cell img { max-width: 60%; max-height: 64px; width: auto; height: auto;
  object-fit: contain; filter: grayscale(1); opacity: .72; }
@media (max-width: 900px) {
  .clients { grid-template-columns: repeat(2, 1fr); }
  .clients__cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .clients__cell:nth-child(2n) { border-right: 0; }
}

/* ---------- end-user page ---------- */
.hero__lede p { color: var(--text-on-dark); font-size: var(--lead); line-height: var(--lead-lh);
  max-width: none; margin-bottom: 14px; }
.hero__lede p:last-child { margin-bottom: 0; }
.prose { max-width: none; }
.prose p { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose--after { margin-top: 40px; }
.section__closer { max-width: none; margin-top: 28px; font-size: var(--body);
  line-height: var(--body-lh); font-weight: 300; }

.agenda { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line);
  border-top: 4px solid var(--orange); box-shadow: var(--card-shadow); }
.agenda th, .agenda td { padding: 16px var(--card-pad); border-bottom: 1px solid var(--line-soft);
  text-align: left; font-size: var(--body); }
.agenda th { font-weight: 500; color: var(--ink); }
.agenda td { text-align: right; color: var(--text-body); white-space: nowrap; }
.agenda__row--on th, .agenda__row--on td { font-weight: 700; color: var(--ink); background: #fdf3e7; }
.agenda tfoot th, .agenda tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink);
  border-top: 2px solid var(--ink); }

.modules { display: grid; gap: 20px; }
.module { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange);
  box-shadow: var(--card-shadow); padding: 26px var(--card-pad); }
.module__n { color: var(--orange); font-size: 14px; font-weight: 700; letter-spacing: 1.4px; }
.module h3 { margin: 8px 0 12px; }
.module p { font-size: var(--body); line-height: var(--body-lh); font-weight: 300; max-width: none; }

.ticks--wide { max-width: none; }
.ticks--wide li { font-size: var(--body); line-height: var(--body-lh); }
.field__note { font-size: var(--small); color: var(--text-muted); margin-top: 7px; }

/* ── Main nav submenus (zone G2) ────────────────────────────────────────────
   Opens on hover, on keyboard focus (:focus-within), and on tap (.is-open,
   set by navScript). The CSS paths mean the menu works with JavaScript off. */
.nav__item { position: relative; }

.nav__sub {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 17rem; margin: 0; padding: .4rem 0; list-style: none;
  background: #fff; border: 1px solid var(--line, #dde2e7);
  border-top: 3px solid var(--orange, #f97316);
  box-shadow: 0 14px 34px rgba(16, 32, 56, .16);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
/* Three ways in, each for one input method, so they cannot latch each other open:
     hover       , mouse and trackpad only, hence the media query
     :focus-visible, keyboard only. Plain :focus-within would also match a mouse
                      click, which leaves the menu stuck open after the pointer
                      has gone. :has() scopes it to the parent.
     .is-open    , touch only, set by navScript, which does not bind on a
                    device that can hover. */
@media (hover: hover) {
  .nav__item:hover > .nav__sub { opacity: 1; visibility: visible; transform: none; }
}
.nav__item:has(.nav__top:focus-visible) > .nav__sub,
.nav__item:has(.nav__sub a:focus-visible) > .nav__sub,
.nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; }

/* Browsers without :has() fall back to :focus-within. Same latch-open quirk on
   a mouse click, but it keeps the menu reachable by keyboard, which matters more. */
@supports not selector(:has(*)) {
  .nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
}

.nav__sub a {
  display: block; padding: .62rem 1.15rem; white-space: nowrap;
  color: var(--navy, #1d3252); text-decoration: none; font-size: .95rem;
}
.nav__sub a:hover,
.nav__sub a:focus-visible { background: var(--rail, #eef1f4); color: var(--orange, #f97316); }

/* The parent is a <button>. Strip only the UA chrome, the size, weight, case
   and padding come from the shared `.nav a, .nav button.nav__top` rule above,
   so the two parents sit on the same baseline and spacing as their siblings. */
button.nav__top {
  font-family: inherit; background: none; border: 0; cursor: pointer;
}
.nav__top:focus-visible { outline: 3px solid var(--green, #56a243); outline-offset: 3px; }
@media (hover: hover) { .nav__item:hover .caret { transform: rotate(180deg); } }
.nav__item.is-open .caret,
.nav__item:has(.nav__top:focus-visible) .caret { transform: rotate(180deg); }
.caret { display: inline-block; transition: transform .13s ease; }

@media (max-width: 860px) {
  .nav__sub { position: static; min-width: 0; box-shadow: none; border: 0;
              border-left: 3px solid var(--orange, #f97316); }
}

/* Submenu entries are page titles, not nav labels, the uppercase treatment on
   `.nav a` is for the top row only. */
.nav__sub a { text-transform: none; letter-spacing: 0; font-weight: 500; padding: .62rem 1.15rem; }

/* ── Zone Z3, program structure. Figma 43:1267 ──────────────────────────────
   Horizontal rows, not a card grid: ghost numeral | day + title + body |
   "You Leave With". Replaced a 3-up card grid on 2026-10-01, which was a
   deviation from the design. */
.prog { border: 1px solid var(--line); border-bottom: 0; }
.prog__row { display: grid; grid-template-columns: 156px 1fr 312px;
             border-bottom: 1px solid var(--line); align-items: stretch; }
.prog__num { display: flex; align-items: center; justify-content: center;
             background: var(--rail); border-right: 1px solid var(--line);
             font-family: var(--font-ui); font-size: 64px; font-weight: 800;
             line-height: 1; color: #d7dde4; }
.prog__main { padding: 30px 34px; }
.prog__day { font-family: var(--font-ui); font-size: 14px; font-weight: 700;
             letter-spacing: 1.6px; text-transform: uppercase; color: var(--green);
             margin: 0 0 9px; }
.prog__title { font-size: 21px; font-weight: 700; margin: 0 0 10px; color: var(--navy); }
.prog__body { margin: 0; color: var(--muted); font-weight: 300; max-width: none; }
.prog__leave { padding: 30px 30px; border-left: 1px solid var(--line);
               display: flex; flex-direction: column; justify-content: center; }
.prog__leaveLabel { font-family: var(--font-ui); font-size: 14px; font-weight: 700;
                    letter-spacing: 1.6px; text-transform: uppercase;
                    color: var(--green); margin: 0 0 8px; }
.prog__leaveValue { margin: 0; color: var(--muted); font-weight: 300; font-size: 17px; }

@media (max-width: 900px) {
  .prog__row { grid-template-columns: 76px 1fr; }
  .prog__num { font-size: 38px; }
  .prog__leave { grid-column: 2; border-left: 0; border-top: 1px solid var(--line);
                 padding-top: 18px; }
  .prog__main { padding: 22px 22px 18px; }
}

/* Zone Z4 sits side by side in Figma 154:6825, the included list on the left,
   the ongoing-value panel on the right. It was stacking full width. */
.inclGrid { display: grid; grid-template-columns: 1fr 440px; gap: var(--grid-gap);
            align-items: start; }
.inclGrid .ongoing { margin-top: 0; height: 100%; }
@media (max-width: 1000px) {
  .inclGrid { grid-template-columns: 1fr; }
  .inclGrid .ongoing { height: auto; }
}

/* ============================================================
   Pricing page. Figma 148:4331. Values are the design's own
   (navy #1d3252, Inter / Karla), scoped under body.pricing so
   nothing here touches the other templates.
   P3 and P5 read from get_design_context. P2 and P4 were built
   from node metadata and a screenshot only (Figma tool limit hit
   before their design context could be read), so their spacing,
   type sizes and colours are approximate. Re-check against
   148:4366 and 148:4555.
   ============================================================ */
body.pricing { --px-navy: #1d3252; --px-green: #57a145; --px-body: #374151; --px-mute: #4b5563; --px-line: #e5e7eb; --px-orange: #f97316; }
.px-strip { position: relative; background: rgba(17,26,43,.95); padding: 50px 20px; text-align: center; overflow: hidden; }
.px-strip__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .15; }
.px-strip h1 { position: relative; margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 24px; line-height: 28.8px; letter-spacing: -.96px; color: #f4b900; }
.px-section { padding: 56px 80px; background: #fff; }
.px-section--white { background: #fff; }
.px-section--grey { background: #f7f8fa; }
.px-inner { max-width: 1280px; margin-inline: auto; padding-inline: 64px; display: flex; flex-direction: column; gap: 24px; }
.px-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--px-line); padding-bottom: 29px; }
.px-head__main { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.px-head__main h2 { margin: 0; font-family: var(--font); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: -1.32px; color: var(--px-navy); }
.px-head__intro { margin: 0; font-size: 17px; line-height: 24px; color: var(--px-body); }
.px-head__tag { margin: 0; font-size: 14px; line-height: 16.5px; letter-spacing: 1.54px; text-transform: uppercase; color: var(--px-mute); white-space: nowrap; }
.pricing .eyebrow { font-size: 14px; letter-spacing: 2.42px; }
.px-check { position: relative; display: inline-block; width: 14px; height: 8px; margin-right: 10px; border-left: 2px solid var(--px-green); border-bottom: 2px solid var(--px-green); transform: rotate(-45deg) translateY(-3px); flex: none; }
.px-btn { display: inline-flex; align-items: center; background: #56a145; color: #fff; padding: 12px 24px; border-radius: 6px; font-size: 16px; font-weight: 500; line-height: 20px; text-decoration: none; border: 1px solid #56a145; }
.px-btn--outline { background: #fff; color: var(--px-navy); border-color: var(--px-line); }
.px-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

/* P2 instructor training (approximate, see note above) */
.px-instr { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.px-feature { position: relative; background: #fff; border: 1px solid var(--px-line); border-radius: 8px; padding: 37px; }
.px-feature__label { margin: 0 0 12px; font-size: 14px; letter-spacing: 1.54px; text-transform: uppercase; color: var(--px-mute); }
.px-feature__badge { position: absolute; top: 25px; right: 25px; background: var(--px-green); color: #fff; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.px-feature h3 { margin: 0 0 16px; font-size: 28px; line-height: 36px; letter-spacing: -.56px; color: var(--px-navy); font-weight: 700; }
.px-feature__price { margin: 0 0 20px; font-family: var(--font-ui); font-weight: 700; font-size: 56px; line-height: 56px; color: var(--px-navy); display: flex; align-items: baseline; gap: 2px; }
.px-feature__sym { font-size: 28px; }
.px-feature__unit { font-family: var(--font); font-weight: 400; font-size: 16px; color: var(--px-mute); margin-left: 12px; }
.px-feature__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 16px; line-height: 21px; color: #1f2937; }
.px-feature__list li { display: flex; align-items: center; }
.px-feature__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.px-others { background: var(--px-navy); border-radius: 8px; overflow: hidden; color: #fff; }
.px-others__head { margin: 0; padding: 20px 24px; font-size: 17px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.12); }
.px-others__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.px-others__row strong { display: block; font-size: 17px; line-height: 24px; }
.px-others__row em { display: block; font-style: normal; font-size: 15px; line-height: 18px; color: rgba(255,255,255,.6); }
.px-others__row b { font-family: var(--font-ui); font-size: 24px; color: #7ac96a; }
.px-others__foot { margin: 0; padding: 18px 24px; font-size: 15px; line-height: 19.5px; color: rgba(255,255,255,.78); background: rgba(0,0,0,.12); }

/* P3 student activations (from design context) */
.px-group { background: #fff; border: 1px solid var(--px-line); border-radius: 8px; padding: 45px 37px 50px; display: flex; flex-direction: column; gap: 18px; }
.px-group__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 14px; }
.px-group__head h3 { margin: 0 0 6px; font-size: 22px; line-height: 33px; letter-spacing: -.22px; color: var(--px-navy); }
.px-group__head p { margin: 0; font-size: 16px; line-height: 21px; color: var(--px-body); }
.px-group__from { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.px-group__from span { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 15px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--px-mute); }
.px-group__from b { font-family: var(--font-ui); font-size: 36px; line-height: 36px; color: var(--px-green); }
.px-tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--px-line); border-radius: 12px; overflow: hidden; }
.px-tier { display: flex; flex-direction: column; gap: 8px; padding: 18px 17px 18px 16px; border-right: 1px solid var(--px-line); background: #fff; }
.px-tier:last-child { border-right: 0; }
.px-tier__range { font-size: 13px; line-height: 15px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--px-mute); }
.px-tier__price { font-size: 22px; line-height: 22px; letter-spacing: -.22px; font-weight: 700; color: var(--px-navy); }
.px-tier--2 { background: #f7fcf6; } .px-tier--3 { background: #f5fcf2; } .px-tier--4 { background: #f1ffea; } .px-tier--5 { background: #e5fad9; }
.px-tier--6 { background: #d2f5be; } .px-tier--6 .px-tier__price { color: #166004; }
.px-group__note { margin: 0; font-size: 15px; line-height: 19.5px; color: var(--px-mute); }

/* P4 safety training (approximate, see note above) */
.px-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.px-card { background: #fff; border: 1px solid var(--px-line); border-radius: 8px; padding: 25px; display: flex; flex-direction: column; gap: 12px; }
.px-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.px-card h3 { margin: 0; font-size: 18px; line-height: 22px; color: var(--px-navy); }
.px-card__kicker { margin: 5px 0 0; font-size: 14px; line-height: 15px; color: var(--px-mute); }
.px-card__top b { font-family: var(--font-ui); font-size: 22px; line-height: 24px; color: var(--px-green); }
.px-card__sub { margin: 0; font-size: 16px; line-height: 20px; color: var(--px-body); }
.px-card__tags { margin: 0; display: flex; gap: 6px; }
.px-card__tags span { border: 1px solid var(--px-line); border-radius: 4px; padding: 5px 9px; font-size: 13px; line-height: 15px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--px-mute); }
.px-card--quote { background: var(--px-navy); border-color: var(--px-navy); color: #fff; }
.px-card--quote h3 { color: #fff; }
.px-card--quote p { margin: 0; font-size: 16px; line-height: 19.5px; color: rgba(255,255,255,.78); }
.px-card--quote .px-btn { align-self: flex-start; margin-top: 4px; }

/* P5 decision matrix (from design context) */
.px-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.px-mx { background: #fff; border: 1px solid rgba(29,50,82,.08); border-radius: 8px; padding: 40px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.px-mx--dark { background: var(--px-navy); border-color: var(--px-line); color: #fff; }
.px-pill { background: rgba(83,138,86,.12); color: var(--px-green); font-size: 13px; line-height: 15px; letter-spacing: 1.4px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.px-mx--dark .px-pill { background: rgba(255,255,255,.12); color: #fff; }
.px-mx h3 { margin: 0; font-size: 30px; line-height: 33px; letter-spacing: -.6px; color: var(--px-navy); }
.px-mx--dark h3 { color: #fff; }
.px-mx__body { margin: 0; font-size: 17px; line-height: 24px; color: var(--px-body); }
.px-mx--dark .px-mx__body { color: rgba(255,255,255,.78); }
.px-mx__stats { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; padding: 21px 0; border-top: 1px solid var(--px-line); border-bottom: 1px solid var(--px-line); }
.px-mx--dark .px-mx__stats { border-color: rgba(255,255,255,.12); }
.px-mx__stat { margin: 0 0 6px; font-size: 28px; line-height: 28px; font-weight: 700; color: var(--px-navy); }
.px-mx--dark .px-mx__stat { color: #fff; }
.px-mx__label { margin: 0; font-size: 13px; line-height: 15px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--px-mute); }
.px-mx--dark .px-mx__label { color: rgba(255,255,255,.6); }
.px-mx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 21px; color: #1f2937; }
.px-mx__list li { display: flex; align-items: center; }
.px-mx--dark .px-mx__list { color: rgba(255,255,255,.85); }
.px-mx--dark .px-check { border-color: #fff; }
.px-mx .px-btn { margin-top: 12px; }

@media (max-width: 1100px) {
  .px-section { padding: 56px 24px; }
  .px-inner { padding-inline: 0; }
  .px-instr, .px-matrix { grid-template-columns: 1fr; }
  .px-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .px-head { flex-direction: column; align-items: flex-start; }
  .px-head__main h2 { font-size: 30px; line-height: 34px; }
  .px-cards { grid-template-columns: 1fr; }
  .px-feature__list { grid-template-columns: 1fr; }
  .px-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-tier:nth-child(3) { border-right: 0; }
  .px-group { padding: 28px 20px; }
  .px-group__head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Template reference pages (internal, noindex) ---------- */
.tpl-top { background: #f7f8fa; padding: 56px var(--gutter) 40px; }
.tpl-inner { max-width: var(--container); margin-inline: auto; }
.tpl-flag { display: inline-block; margin: 0 0 16px; padding: 4px 12px; border: 1px solid #f97316; color: #c2570c; border-radius: 999px; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; }
.tpl-top h1 { margin: 0 0 16px; font-size: 44px; line-height: 48px; letter-spacing: -1.2px; color: #1d3252; }
.tpl-lead { max-width: none; margin: 0 0 16px; font-size: 17px; line-height: 28px; color: #374151; }
.tpl-meta { margin: 0 0 20px; font-size: 15px; color: #4b5563; }
.tpl-meta code, .tpl-zone__fed code { background: #eef0f3; padding: 1px 6px; border-radius: 3px; font-size: 14px; }
.tpl-list { padding: 24px var(--gutter) 80px; }
.tpl-zones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tpl-zone { display: grid; grid-template-columns: 110px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid #e5e7eb; }
.tpl-zone__id span { display: inline-block; background: #1d3252; color: #fff; font-weight: 700; font-size: 17px; padding: 6px 12px; border-radius: 4px; }
.tpl-zone__id em { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: #6b7280; }
.tpl-zone__body h2 { margin: 0 0 12px; font-size: 24px; line-height: 30px; color: #1d3252; }
.tpl-zone__body h2 small { font-size: 14px; font-weight: 400; color: #6b7280; margin-left: 8px; }
.tpl-zone__body p { margin: 0 0 10px; font-size: 17px; line-height: 24px; color: #374151; max-width: none; }
.tpl-zone__fed { font-size: 15px !important; color: #6b7280 !important; }
@media (max-width: 760px) { .tpl-zone { grid-template-columns: 1fr; gap: 12px; } .tpl-top h1 { font-size: 32px; line-height: 36px; } }

/* ---------- About page. Figma 152:5568, from exported screenshots (approximate). ---------- */
body.about { --ab-navy: #1d3252; --ab-green: #67a352; --ab-line: #e5e7eb; --ab-body: #374151; --ab-mute: #4b5563; }
.ab-section { padding: 60px var(--gutter); background: #fff; }
.ab-section--grey { background: #f7f8fa; }
.ab-inner { max-width: var(--container); margin-inline: auto; }
.ab-big { margin: 0 0 56px; padding-bottom: 56px; border-bottom: 1px solid var(--ab-line); font-size: clamp(48px, 7vw, 92px); line-height: .98; letter-spacing: -3.5px; font-weight: 800; color: var(--ab-navy); }
.ab-big span { color: var(--ab-green); }
.ab-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.ab-facts { margin: 0; }
.ab-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--ab-line); }
.ab-facts div:first-child { padding-top: 0; }
.ab-facts dt { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--ab-mute); }
.ab-facts dd { margin: 0; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--ab-navy); }
.ab-intro__text p { margin: 0 0 20px; font-size: 19px; line-height: 30px; color: var(--ab-body); }
.ab-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px !important; }
.ab-outline { background: #fff; color: var(--ab-navy); border-color: var(--ab-navy); }
.ab-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--ab-line); }
.ab-head h2, .ab-name h2 { margin: 0; font-size: 40px; line-height: 44px; letter-spacing: -1.3px; color: var(--ab-navy); }
.ab-people { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ab-person { display: flex; gap: 28px; padding: 42px; background: #fff; border-radius: 8px; align-items: flex-start; }
.ab-person img { width: 140px; height: 164px; object-fit: cover; object-position: top; border-radius: 8px; filter: grayscale(1); flex: none; }
.ab-person__role { margin: 0 0 6px; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ab-green); }
.ab-person h3 { margin: 0 0 14px; font-size: 28px; line-height: 32px; letter-spacing: -.6px; color: var(--ab-navy); }
.ab-person p:not(.ab-person__role) { margin: 0 0 8px; font-size: 17px; line-height: 26px; color: var(--ab-body); }
.ab-name { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding-bottom: 36px; border-bottom: 1px solid var(--ab-line); }
.ab-name h2 span { color: var(--ab-green); }
.ab-name__text p { margin: 0 0 22px; font-size: 17px; line-height: 28px; color: var(--ab-body); }
.ab-wordmark { padding: 28px 0 24px; border-bottom: 1px solid var(--ab-line); text-align: center; }
.ab-wordmark__word { margin: 0; font-size: clamp(90px, 17vw, 240px); line-height: 1; letter-spacing: -.02em; font-weight: 800; color: var(--ab-green); }
.ab-wordmark ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--ab-navy); font-weight: 600; }
.ab-wordmark li::before { content: ""; display: block; width: 1px; height: 16px; margin: 0 auto 10px; background: var(--ab-green); }
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 40px 0; border-bottom: 1px solid var(--ab-line); }
.ab-card { padding: 28px; border: 1px solid var(--ab-line); border-radius: 8px; }
.ab-card__n { margin: 0; text-align: right; font-size: 14px; letter-spacing: 2px; color: var(--ab-mute); }
.ab-card__mark { margin: -6px 0 18px; font-size: 56px; line-height: 1; letter-spacing: -2px; font-weight: 800; color: #9ca3af; }
.ab-card__mark b { color: var(--ab-green); }
.ab-card__row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ab-line); }
.ab-card__row h3 { margin: 0; font-size: 20px; color: var(--ab-navy); }
.ab-card__row span { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--ab-mute); }
.ab-card > p:last-child { margin: 0; font-size: 17px; line-height: 24px; color: var(--ab-body); }
.ab-why { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ab-line); }
.ab-why__col { padding: 36px 48px 40px 0; }
.ab-why__col + .ab-why__col { padding-left: 48px; border-left: 1px solid var(--ab-line); }
.ab-why__col svg { width: 40px; height: 40px; color: var(--ab-green); margin-bottom: 16px; }
.ab-why__col h3 { margin: 0 0 14px; font-size: 26px; letter-spacing: -.5px; color: var(--ab-navy); }
.ab-why__col p { margin: 0; font-size: 17px; line-height: 27px; color: var(--ab-body); }
.ab-closer { margin: 36px 0 0; max-width: none; font-size: 19px; line-height: 30px; font-style: italic; color: var(--ab-body); }
@media (max-width: 1000px) { .ab-intro, .ab-name, .ab-people, .ab-cards, .ab-why { grid-template-columns: 1fr; gap: 32px; } .ab-why__col, .ab-why__col + .ab-why__col { padding: 24px 0; border-left: 0; } .ab-section { padding: 56px var(--gutter); } }
@media (max-width: 640px) { .ab-person { flex-direction: column; padding: 26px; } .ab-big { letter-spacing: -1.5px; } }

/* ---------- Header refinements (Cameron, 2026-10-02) ----------
   Utility bar: Reviews and the phone number sit together on the right, number visible.
   Masthead: wider than the content column so logo and nav stay on one row, more
   room around the logo. Below 980px the nav drops under the logo. */
.utility__inner { max-width: 1440px; justify-content: flex-end; gap: 28px; min-height: 44px; padding: 6px clamp(20px, 4vw, 64px); flex-wrap: nowrap; }
.utility__phone { width: auto; height: auto; border: 0; border-radius: 0; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.utility__phone svg { width: 16px; height: 16px; }
.masthead__inner { max-width: 1440px; min-height: 108px; padding: 18px clamp(20px, 4vw, 64px); flex-wrap: nowrap; gap: 32px; }
.masthead__logo img { width: 220px; height: auto; }
.nav { flex-wrap: nowrap; }
@media (max-width: 1360px) { .nav a, .nav button.nav__top { font-size: 17px; padding: 12px 10px; } .masthead__logo img { width: 190px; } .masthead__inner { gap: 20px; } }
@media (max-width: 1160px) { .nav a, .nav button.nav__top { font-size: 15px; padding: 10px 7px; gap: 5px; } .masthead__logo img { width: 160px; } .masthead__inner { gap: 12px; } }
@media (max-width: 980px) { .masthead__inner { flex-wrap: wrap; justify-content: center; padding-block: 14px; } .nav { flex-wrap: wrap; justify-content: center; } .utility__inner { justify-content: center; } }
/* A closed dropdown near the right edge must not widen the page. */
.nav__item:nth-last-child(-n+2) > .nav__sub { left: auto; right: 0; }
/* The Contact button is a nav link too; keep its text white (.nav a would make it navy). */
.nav a.btn, .nav a.btn:hover, .nav a.btn:focus-visible { color: #fff; }

/* Instructor program heroes share one height whatever the subhead length
   (Confined Space's subhead runs to three lines, the others to two). */

/* ---------- Course data reference page (internal) ---------- */
.cd-h { margin: 40px 0 16px; font-size: 24px; color: #1d3252; }
.cd-example { margin-bottom: 20px; }
.cd-example__label { margin: 0 0 8px; font-size: 15px; color: #4b5563; }
.cd-stats { border-radius: 6px; overflow: hidden; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cd-table th, .cd-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: top; color: #374151; }
.cd-table th { font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: #4b5563; background: #f7f8fa; }
.cd-table code { background: #eef0f3; padding: 1px 6px; border-radius: 3px; font-size: 14px; }
.cd-scroll { overflow-x: auto; }

/* Course data strip (Duration, Validity, Price): each stat centred in its cell,
   values on one baseline so the labels line up whether or not a unit follows. */
.stats[data-zone="Z2"] .stat, .stats[data-zone="E2"] .stat { text-align: center; }
.stats[data-zone="Z2"] .stat__value, .stats[data-zone="E2"] .stat__value { justify-content: center; height: 44px; min-height: 0; align-items: baseline; }

/* ---------- Section collapse button (added by partials.js navScript) ---------- */
.sec-box { position: relative; }
.sec-toggle { position: absolute; top: 0; right: 0; z-index: 2; width: 38px; height: 38px; border: 1px solid #d1d5db; border-radius: 50%;
  background: #fff; color: #1d3252; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sec-toggle:hover { border-color: #57a145; color: #57a145; }
.sec-toggle:focus-visible { outline: 3px solid #56a243; outline-offset: 2px; }
.section--dark .sec-toggle { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.is-collapsed .sec-fold { display: none !important; }
.is-collapsed .section__head, .is-collapsed .px-head, .is-collapsed .ab-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.is-collapsed { padding-block: 28px; }
@media (max-width: 640px) { .sec-toggle { width: 34px; height: 34px; } }

/* ---------- NCSO recognition badge (instructor Z5, end-user E7) ---------- */
.recognition { display: flex; align-items: center; gap: 28px; margin-top: 32px; padding: 24px 28px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; background: #fff; }
.recognition__badge { flex: none; display: block; width: 150px; height: 150px; }
.recognition__badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.recognition__text p { margin: 0 0 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink, #1e2430); }
.section--dark .recognition { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.section--dark .recognition__text p { color: #fff; }
.section--dark .textlink, .textlink--onDark { color: #d1d5db; }
@media (max-width: 640px) { .recognition { flex-direction: column; text-align: center; padding: 20px; } }

/* Page heroes with no photo get a plain navy ground (the overlay still sits on top). */
.hero--page { background: linear-gradient(135deg, #1d3252 0%, #111a2b 100%); }

/* ---------- Legibility pass (Cameron, 2026-10-02): larger type for readers over 50 ---------- */
.stat__suffix { font-size: 22px; font-weight: 600; opacity: .85; margin-left: 10px; }
.stat__label { margin-top: 12px; }
.stats[data-zone="Z2"] .stat__value, .stats[data-zone="E2"] .stat__value { height: 60px; }
.stat { padding: 40px 24px; }

/* Narrow screens: keep wide things inside the viewport. */
@media (max-width: 640px) {
  .roi__table { display: block; overflow-x: auto; }
  .ab-wordmark__word { font-size: clamp(56px, 20vw, 90px); }
}
@media (max-width: 760px) {
  .stats__inner { grid-auto-flow: row; grid-template-columns: 1fr; padding-inline: 20px; }
  .stat { padding: 24px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .stat:last-child { border-bottom: 0; }
  .stats[data-zone="Z2"] .stat__value, .stats[data-zone="E2"] .stat__value { height: auto; min-height: 56px; }
}

.btn { font-size: 17px; }
.btn--sm { font-size: 16px; }

/* ---------- Schedule page: Bookwhen embed ---------- */
.sc-section { padding: var(--section-y) var(--gutter); background: #fff; }
.sc-inner { max-width: var(--container); margin-inline: auto; }
.sc-inner h2 { margin: 0 0 16px; font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: -1px; color: #1d3252; }
.sc-intro { margin: 0 0 32px; font-size: var(--intro); line-height: var(--intro-lh); color: #374151; }
.sc-embed { width: 100%; border: 0; display: block; min-height: 900px; background: #fff; }
.sc-missing { padding: 28px; border: 2px dashed #d1d5db; border-radius: 8px; color: #4b5563; font-size: 18px; line-height: 28px; }
.sc-open { margin: 16px 0 0; font-size: 16px; }

/* Balance hero headings so a short last word ("7)") doesn't sit alone on a line. */
.hero h1 { text-wrap: balance; }

/* Dropdown menu items match the legibility pass: 17px. */
.nav .nav__sub a { font-size: 17px; }

/* Introduction below the stat strip (was the hero text). */
.section--intro { padding-block: 48px 8px; }
.intro-lede, .intro-prose p { margin: 0 0 20px; font-size: var(--intro); line-height: var(--intro-lh); color: #374151; }
.intro-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }

/* Course heroes with a photo: twice the height of the plain page heroes (240px to 480px). */
.hero--photo { min-height: 480px; display: flex; align-items: center; }
.hero--photo .hero__content { width: 100%; padding-block: 0; }
@media (max-width: 640px) { .hero--photo { min-height: 320px; } }

/* Sticky header on desktop; on narrow screens the header wraps and would eat the viewport. */
@media (min-width: 981px) { .masthead { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(0,0,0,.08); } html { scroll-padding-top: 120px; } }

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

.footer__phone { font-size: 32px; font-weight: 700; letter-spacing: -0.3px; }
.footer__phone a { color: var(--green-cta); }

.footer__grid { grid-template-columns: 1.1fr .7fr 1.1fr; }
.footer__mid { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.footer__mid p { margin: 0; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* Footer, one compact band: logo | contact | login + BBB, then a quiet legal line. */
.footer__grid { grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; padding-block: 40px 24px; }
.footer__logo { width: 190px; max-width: none; margin: 0; }
.footer__phone { font-size: 24px; margin: 0 0 14px; }
.footer__phone svg { width: 22px; height: 22px; }
.footer__line { margin: 0 0 10px; }
.footer__contact .footer__line:last-child { margin-bottom: 0; }
.footer__mid { flex-direction: row; align-items: center; gap: 24px; }
.footer__mid .btn { border: 3px solid #5fa047; color: #fff; padding: 10px 20px; border-radius: 3px; }
.footer__bbb { margin: 0; display: block; }
.footer__ack { font-style: normal; font-size: 14px; line-height: 1.6; color: #8f8f8f; margin: 0; padding-bottom: 24px; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; justify-items: start; } .footer__mid { flex-wrap: wrap; } }

.footer__grid { padding-block: 40px; }

/* Header shares the content column: same left and right edge as the page and the footer. */
.masthead__inner { max-width: calc(var(--container) + 2 * var(--gutter)); padding-inline: var(--gutter); }

.nav a, .nav__item > a, .nav > * { white-space: nowrap; }


.masthead__logo { flex: none; }


@media (min-width: 981px) { .masthead__logo img { width: 190px; height: auto; } }
@media (min-width: 1161px) { .nav a, .nav button.nav__top { padding-inline: 7px; } }


/* Contact: consent checkbox row and the error line. */
.enq__form .field--check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--text-strong, inherit); }
.enq__form .field--check input { width: auto; margin-top: 5px; flex: none; }
.enq__done--err { color: #b42318; }

/* Contact: shorter hero, direct details as the left column, hidden honeypot. */
.contact .enq { align-items: start; }
.contact__lede { font-size: var(--lede, 20px); color: var(--text-strong, inherit); margin: 0 0 28px; }
.contact__phone { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.contact__phone svg { width: 32px; height: 32px; color: var(--green-cta); flex: none; }
.contact__phone a { color: var(--navy); text-decoration: none; }
.contact__sub { margin: 8px 0 32px 46px; color: var(--text-muted, #4b5563); }
.contact__line { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.contact__line svg { width: 22px; height: 22px; color: var(--green-cta); flex: none; }
.contact__line a { color: inherit; text-decoration: none; }
.enq__form .field--check label { font-size: 14px; line-height: 1.5; }
body.contact .hero--page .hero__content { padding-block: 56px 48px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer band: logo left, contact centred, Login and BBB right, so the spare space is even. */
@media (min-width: 981px) {
  .footer__grid { grid-template-columns: 1fr auto 1fr; }
  .footer__mid { justify-self: end; }
}
@media (min-width: 981px) {
  .footer__grid { display: flex; justify-content: space-between; align-items: center; }
}

/* Certification Platform draft: CMP numbers and example screenshots. */
.cmpstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.cmpstat { background: #fff; border: 1px solid var(--line); box-shadow: var(--card-shadow); padding: 28px 24px; }
.cmpstat__value { font-size: 52px; font-weight: 700; line-height: 1; color: var(--navy); letter-spacing: -1px; margin: 0; }
.cmpstat__label { font-weight: 700; margin: 12px 0 6px; }
.cmpstat__note { font-size: var(--small); color: var(--text-muted, #4b5563); margin: 0; }
.cmpstats__source { font-size: var(--small); color: var(--text-muted, #4b5563); margin: 18px 0 0; }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }
.shot { margin: 0; background: #fff; border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 16px 20px 20px; font-size: var(--small); line-height: 1.5; }
.shot__flag { display: inline-block; margin-right: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: #fef3e7; color: #b45309; }
/* Six stat tiles: 3 x 2, then 2 x 3, then 1 column. No orphan row. */
.cmpstats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cmpstats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cmpstats { grid-template-columns: 1fr; } }