/* ============================================================
   HIGH AIMS TRAINING — DESIGN SYSTEM
   Palette derived from BS 5499 / ISO 7010 safety sign colour
   semantics: mandatory blue, safe-condition green, warning amber,
   prohibition red. Not decorative — each colour means something.
   ============================================================ */
:root{
  --ink:#0B1220;          /* body copy / deepest surface */
  --steel:#13233D;        /* industrial navy — primary surface */
  --steel-2:#1D3355;      /* raised navy */
  --site:#1B4DB1;         /* mandatory blue — primary action */
  --site-lift:#2A63D8;
  --amber:#FF9E1B;        /* warning — deadlines, seats, offers */
  --amber-deep:#E07C00;
  --pass:#12805C;         /* safe condition — verified, pass, available */
  --pass-lift:#18A075;
  --stop:#C8102E;         /* prohibition — errors only */
  --paper:#FBFAF8;        /* page */
  --paper-2:#F2F1EC;      /* alt band */
  --line:#DEDDD6;
  --line-2:#C8C7BF;
  --muted:#5D6672;
  --white:#fff;

  /* CSCS card colour semantics — real qualification colour coding */
  --card-green:#1F9A57;
  --card-blue:#1B6EC2;
  --card-gold:#B07E00;
  --card-black:#2B2B2B;
  --card-red:#C8102E;
  --card-white:#8A94A3;

  /* Darker variants for solid tiles that carry white text (4.5:1 verified). */
  --tile-gold:#976C00;  --tile-green:#1A844A; --tile-blue:#1B6EC2;
  --tile-red:#C8102E;   --tile-black:#2B2B2B; --tile-white:#6B737F;
  --amber-text:#7A4300;  /* amber that passes 4.5:1 as body/link text */

  --d:'Archivo',system-ui,sans-serif;      /* display — signage grotesque */
  --b:'IBM Plex Sans',system-ui,sans-serif;/* body — engineered */
  --m:'IBM Plex Mono',ui-monospace,monospace; /* data, codes, dates */

  --r:10px; --r-lg:16px;
  --sh:0 1px 2px rgba(11,18,32,.06),0 4px 14px rgba(11,18,32,.05);
  --sh-lg:0 20px 50px -18px rgba(11,18,32,.32);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--b);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--d);margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.03em}
h3,h2.h3{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
h2.h4{font-size:1rem;font-weight:700}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec{padding:72px 0}
.sec-tight{padding:48px 0}
.band{background:var(--paper-2)}
.band-dark{background:var(--steel);color:#E9EEF6}
.band-dark h2,.band-dark h3{color:#fff}

/* eyebrow — reads as a site notice label, not decoration */
.eyebrow{font-family:var(--m);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--site);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:3px;background:var(--amber);flex:none}
.band-dark .eyebrow,.hero .eyebrow{color:var(--amber)}
.hero .eyebrow{flex-wrap:wrap}
.lede{font-size:1.08rem;color:var(--muted);max-width:62ch}
.band-dark .lede{color:#AFBDD1}
.band-dark .feat p,.band-dark p,.band-dark .cert-blurb{color:#B3C2D6}
.band-dark .logo-txt small,footer.site .logo-txt small{color:#93A3B8}

/* hazard chevrons — genuine site vernacular, used as a section rule */
.hazard{height:8px;background:repeating-linear-gradient(135deg,var(--amber) 0 14px,var(--ink) 14px 28px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--d);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:13px 22px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--site);color:#fff;box-shadow:0 3px 0 #0F3B8C}
.btn-primary:hover{background:var(--site-lift)}
.btn-amber{background:var(--amber);color:var(--ink);box-shadow:0 3px 0 var(--amber-deep)}
.btn-amber:hover{background:#FFB040}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.band-dark .btn-ghost,.hero .btn-ghost{border-color:#3E547A;color:#fff}
.band-dark .btn-ghost:hover,.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-sm{padding:9px 15px;font-size:.85rem}
.btn-block{width:100%}

/* ---------- header ---------- */
.utility{background:var(--ink);color:#C3CCDA;font-size:.8rem}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
.utility a{color:#fff;font-weight:600}
.util-list{display:flex;gap:18px;align-items:center}
.util-list span{display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--pass);flex:none;
  box-shadow:0 0 0 3px rgba(18,128,92,.25)}

header.site{position:sticky;top:0;z-index:60;background:rgba(251,250,248,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;height:70px;position:relative}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo-mark{width:38px;height:38px;border-radius:9px;background:var(--steel);
  display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.logo-mark::after{content:'';position:absolute;inset:auto 0 0 0;height:9px;
  background:repeating-linear-gradient(135deg,var(--amber) 0 6px,var(--steel) 6px 12px)}
.logo-mark svg{width:19px;height:19px;position:relative;z-index:1}
.logo-txt{font-family:var(--d);font-weight:800;font-size:1.02rem;line-height:1.05;letter-spacing:-.03em}
.logo-txt small{display:block;font-family:var(--m);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:2px}

.mainnav{display:flex;gap:2px;margin-left:auto;align-items:center}
.mainnav > a,.navitem > button{background:none;border:0;cursor:pointer;padding:9px 11px;white-space:nowrap;
  border-radius:8px;font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:5px;
  color:var(--ink);transition:background .15s}
.mainnav > a:hover,.navitem > button:hover{background:var(--paper-2)}
.mainnav > a.on{color:var(--site);background:rgba(27,77,177,.08)}
.navitem{position:relative}
.chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.navitem.open .chev{transform:rotate(-135deg) translateY(-2px)}

.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);
  padding:20px;width:min(680px,90vw);opacity:0;visibility:hidden;transition:.18s;z-index:70}
.navitem.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.navitem-wide{position:static}
.mega-wide{width:min(760px,calc(100vw - 48px));left:0;right:auto;transform:translateY(-6px)}
.navitem.open .mega-wide{transform:translateY(0)}
.mega-cols{display:grid;grid-template-columns:1.05fr 1.15fr 1fr;gap:4px 20px}
.mega-cols a{padding:8px 9px;font-size:.87rem}
@media (max-width:1180px){.mega-cols{grid-template-columns:1fr 1fr}
  .mega-cols > div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .mega-cols > div:last-child h4{grid-column:1/-1}}
.mega-cols h4{grid-column:auto;margin-top:0}
.mega h4{font-family:var(--m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:8px 0 6px;grid-column:1/-1}
.mega a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:.9rem;font-weight:500}
.mega a:hover{background:var(--paper-2)}
.mega a i{width:4px;height:22px;border-radius:2px;flex:none;background:var(--line-2)}
.mega-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mega-foot span{font-size:.84rem;color:var(--muted)}

.navactions{display:flex;gap:9px;align-items:center;flex:none}
.cart-btn{position:relative;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);
  background:#fff;display:grid;place-items:center;cursor:pointer}
.cart-btn:hover{border-color:var(--ink)}
.cart-n{position:absolute;top:-6px;right:-6px;background:var(--stop);color:#fff;font-family:var(--m);
  font-size:.66rem;font-weight:600;min-width:19px;height:19px;border-radius:10px;display:grid;
  place-items:center;padding:0 5px}
.searchbox{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line-2);
  border-radius:10px;padding:0 12px;height:42px;color:var(--muted);transition:border-color .15s,box-shadow .15s;min-width:0}
.searchbox:focus-within{border-color:var(--site);box-shadow:0 0 0 3px rgba(27,77,177,.13);color:var(--site)}
.searchbox input{border:0;outline:none;background:none;width:150px;font-size:.88rem;min-width:0;color:var(--ink)}
.searchbox input::-webkit-search-cancel-button{cursor:pointer}
.savebtn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;z-index:2;
  color:var(--muted);transition:.15s;padding:0}
.savebtn:hover{border-color:var(--stop);color:var(--stop);transform:scale(1.08)}
.savebtn.on{background:var(--stop);border-color:var(--stop);color:#fff}
.chatbtn{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;align-items:center;gap:9px;
  background:var(--steel);color:#fff;border:0;border-radius:30px;padding:13px 20px;cursor:pointer;
  font-family:var(--d);font-weight:700;font-size:.9rem;box-shadow:var(--sh-lg);transition:transform .16s}
.chatbtn:hover{transform:translateY(-2px);background:var(--site)}
.chatbtn i{width:8px;height:8px;border-radius:50%;background:var(--pass);
  box-shadow:0 0 0 3px rgba(18,128,92,.35);font-style:normal}
.tier{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff;text-align:center;position:relative}
.tier.on{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,158,27,.18)}
.tier b{display:block;font-family:var(--d);font-weight:800;font-size:2.2rem;color:var(--site);letter-spacing:-.04em}
.tier .lv{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);
  background:#fff;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger i{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:90;background:rgba(11,18,32,.55);opacity:0;visibility:hidden;transition:.2s;overflow:hidden}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--paper);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:18px}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer a{display:block;padding:13px 12px;border-radius:9px;font-weight:600;border-bottom:1px solid var(--line)}
.drawer a:hover{background:var(--paper-2)}
.drawer .dg{font-family:var(--m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 6px;font-weight:600}
.x{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);background:#fff;cursor:pointer;font-size:1.2rem;line-height:1}

/* ============================================================
   SIGNATURE: the certification card.
   Every course renders as the physical artifact the learner is
   actually buying — a carded qualification. The colour band maps
   to real CSCS/awarding-body card colour coding, the mono strip
   carries the data that decides a booking (body, hours, validity).
   ============================================================ */
.cert{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .22s ease,border-color .18s;
  box-shadow:var(--sh)}
.cert:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.cert-band{height:6px;background:var(--card-blue);flex:none}
.cert-top{padding:16px 18px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cert-body{padding:12px 18px 0;flex:1}
.cert-body h3{font-size:1.06rem;line-height:1.25;margin-bottom:8px}
.cert-body h3 a:hover{color:var(--site)}
.cert-blurb{font-size:.87rem;color:var(--muted);margin:0 0 12px;line-height:1.5}

/* awarding-body chip */
.awarder{font-family:var(--d);font-weight:800;font-size:.7rem;letter-spacing:.06em;
  padding:5px 9px;border-radius:6px;background:var(--paper-2);color:var(--steel);
  border:1px solid var(--line);text-transform:uppercase;flex:none}

/* the data strip — the numbers people actually choose on */
.cert-data{font-family:var(--m);font-size:.74rem;font-weight:500;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;display:flex;flex-wrap:wrap;gap:4px 10px;
  padding:0 18px 14px;border-bottom:1px dashed var(--line-2)}
.cert-data b{color:var(--ink);font-weight:600}

/* perforated foot, like a tear-off certificate stub */
.cert-foot{padding:14px 18px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.price{font-family:var(--d);font-weight:800;font-size:1.45rem;letter-spacing:-.035em;line-height:1}
.price small{display:block;font-family:var(--m);font-size:.62rem;font-weight:500;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;margin-top:4px}
.price s{font-size:.85rem;color:var(--muted);font-weight:500;margin-left:6px}

.stars{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--muted)}
.stars b{color:var(--ink);font-weight:600}
.star{color:var(--amber);letter-spacing:-1px}

/* availability — permit-board logic: green = seats, amber = filling, red = full */
.seats{font-family:var(--m);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:20px}
.seats-ok{background:rgba(18,128,92,.1);color:#0A5C42}
.seats-low{background:rgba(255,158,27,.16);color:#7A4300}
.seats-full{background:rgba(200,16,46,.1);color:#A00D25}

.tag{font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;background:var(--ink);color:#fff}
.tag-amber{background:var(--amber);color:var(--ink)}
.tag-pass{background:var(--pass);color:#fff}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- hero: a working course finder, not a stock photo ---------- */
.hero{background:var(--steel);color:#fff;position:relative;overflow:hidden;
  padding:64px 0 0}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(900px 420px at 15% -10%,rgba(27,77,177,.5),transparent 62%),
             radial-gradient(700px 380px at 92% 8%,rgba(255,158,27,.14),transparent 60%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:start}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-sub{font-size:1.1rem;color:#B7C6DB;max-width:46ch;margin-bottom:26px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.proof{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 13px;font-size:.85rem;font-weight:500}
.proof b{font-family:var(--d);font-weight:800}

/* the finder — hero thesis: the job is "book the right course, near me, by my deadline" */
.finder{background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-lg);color:var(--ink)}
.finder h3{font-size:1.12rem;margin-bottom:4px}
.finder p{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
/* ---------- individual / business toggle ----------
   Shown and hidden off the checked radio, with no script: a booking form must
   not depend on one. Everything here FAILS OPEN — without :has() the company
   block and the individual note stay visible, which is how the page read
   before the radios existed. Hiding is presentation only; the form's clean()
   is what drops a company name an individual left behind. */
.ctype{border:0;padding:0;margin:0 0 22px}
.ctype legend{padding:0;margin-bottom:10px}
.ctype-opts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:8px}
.ctype-opt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:600;font-size:.95rem}
.ctype-opt input{width:auto;margin:0;accent-color:var(--site)}
.ctype-note{margin-top:0}
.ctype-business{display:none}
.checkout-main:has(#id_customer_type_1:checked) .ctype-individual{display:none}
.checkout-main:has(#id_customer_type_1:checked) .ctype-business{display:block}
.checkout-main:has(#id_customer_type_0:checked) .company-block{display:none}

/* Signing out is a POST, so it is a form — but it sits among the header's
   links and must not break their row, hence the inline form with no spacing
   of its own. */
.nav-logout{display:inline-flex;margin:0}
.drawer-logout{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left}

/* Marks a compulsory field. <abbr title="Required"> carries the meaning for a
   screen reader; the colour is reinforcement, never the only signal. */
.field label .req{margin-left:3px;color:var(--stop);font-weight:700;
  text-decoration:none;border:0;cursor:help}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line-2);
  border-radius:9px;background:#fff;font-size:.95rem;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--site);
  box-shadow:0 0 0 3px rgba(27,77,177,.13)}
.field textarea{min-height:120px;resize:vertical;font-family:var(--b)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.err{font-size:.8rem;color:var(--stop);margin-top:6px;font-weight:500;display:none}
.field.bad input,.field.bad select{border-color:var(--stop)}
.field.bad .err{display:block}

/* live next-dates strip under the hero */
.dates-strip{background:var(--ink);border-top:1px solid rgba(255,255,255,.1);margin-top:54px}
.dates-strip .wrap{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px;overflow-x:auto}
.dates-lbl{font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);flex:none;display:flex;align-items:center;gap:8px}
.date-chip{flex:none;display:flex;align-items:center;gap:9px;font-size:.83rem;color:#CBD5E4;white-space:nowrap}
.date-chip b{font-family:var(--m);color:#fff;font-weight:600}

/* ---------- accreditation strip ---------- */
.accred{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.accred-item{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 20px;
  font-family:var(--d);font-weight:800;font-size:.95rem;letter-spacing:.02em;color:var(--steel);
  display:flex;align-items:center;gap:9px}
.accred-item span{font-family:var(--m);font-size:.6rem;font-weight:500;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase}

/* ---------- panels / features ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.panel-flat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(27,77,177,.09);color:var(--site);font-size:1.2rem}
.feat h3{font-size:1rem;margin-bottom:5px}
.feat p{font-size:.89rem;color:var(--muted);margin:0}

/* stat block */
.stat{text-align:left}
.stat b{display:block;font-family:var(--d);font-weight:800;font-size:clamp(1.9rem,4vw,2.8rem);
  letter-spacing:-.04em;line-height:1;color:var(--amber)}
.stat span{font-family:var(--m);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:#9FB0C7;display:block;margin-top:8px}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.83rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:18px 0}
.crumbs a:hover{color:var(--site);text-decoration:underline}
.crumbs i{color:var(--line-2);font-style:normal}

/* ---------- page head ---------- */
.phead{background:var(--steel);color:#fff;padding:34px 0 40px;position:relative;overflow:hidden}
.phead::before{content:'';position:absolute;inset:0;
  background:radial-gradient(700px 340px at 10% 0,rgba(27,77,177,.45),transparent 62%)}
.phead .wrap{position:relative;z-index:1}
.phead h1{color:#fff;margin-bottom:12px}
.phead .crumbs{color:#93A6C0;padding:0 0 16px}
.phead .crumbs a:hover{color:#fff}
.phead .crumbs i{color:#4A6188}
.phead p{color:#B7C6DB;max-width:64ch;margin:0}

/* ---------- filters / catalogue ---------- */
.cat-layout{display:grid;grid-template-columns:262px 1fr;gap:32px;align-items:start}
/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content width and push the page wider than the viewport. */
.grid > *,.cat-layout > *,.course-layout > *,.hero-grid > *,.auth > *,
.lms-shell > *,.learn-grid > *,.foot-grid > *,.cert,.panel,.enrol,.cart-row > *{min-width:0}
.nav,.finder,.booking,.lms-main,.auth-form{min-width:0}
.prose,.article,.tabpane{min-width:0;overflow-wrap:break-word}
.filters{position:sticky;top:92px}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:first-child{padding-top:0}
.fgroup h4,.fgroup .h4{font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px}
.check{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:.9rem}
.check input{width:17px;height:17px;accent-color:var(--site);cursor:pointer;flex:none}
.check span{flex:1}
.check em{font-style:normal;font-family:var(--m);font-size:.72rem;color:var(--muted)}
.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.cat-count{font-size:.9rem;color:var(--muted)}
.cat-count b{color:var(--ink)}
.sortbox{padding:9px 12px;border:1.5px solid var(--line-2);border-radius:9px;background:#fff;font-size:.88rem;cursor:pointer}
.empty{text-align:center;padding:56px 20px;border:2px dashed var(--line-2);border-radius:var(--r-lg);background:#fff}
.empty h3{margin-bottom:8px}
.empty p{color:var(--muted);max-width:44ch;margin:0 auto 18px}

/* ---------- course detail ---------- */
.course-layout{display:grid;grid-template-columns:1fr 370px;gap:36px;align-items:start}
.booking{position:sticky;top:92px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.booking-band{height:6px;background:var(--card-blue)}
.booking-in{padding:22px}
.booking .price{font-size:2rem}
.pricerow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-bottom:16px;border-bottom:1px dashed var(--line-2);margin-bottom:16px}

/* date picker — reads like a site diary */
.datelist{display:flex;flex-direction:column;gap:8px;max-height:290px;overflow-y:auto;margin-bottom:16px;padding-right:4px}
.dateopt{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff;text-align:left;width:100%}
.dateopt:hover{border-color:var(--line-2);background:var(--paper)}
.dateopt.on{border-color:var(--site);background:rgba(27,77,177,.05);box-shadow:0 0 0 2px rgba(27,77,177,.1)}
.dateopt[disabled]{opacity:.45;cursor:not-allowed}
.dateopt .dd{font-family:var(--m);font-weight:600;font-size:.82rem;line-height:1.35;flex:1}
.dateopt .dd span{display:block;font-size:.7rem;color:var(--muted);font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none;position:relative}
.dateopt.on .radio{border-color:var(--site)}
.dateopt.on .radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--site)}

.incl{list-style:none;padding:0;margin:16px 0 0;font-size:.87rem}
.incl li{display:flex;gap:9px;padding:7px 0;align-items:flex-start;color:var(--muted)}
.incl li b{color:var(--ink);font-weight:600}
.tick{color:var(--pass);font-weight:700;flex:none}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:26px;overflow-x:auto}
.tab{background:none;border:0;padding:13px 16px;font-family:var(--d);font-weight:700;font-size:.94rem;
  cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--site);border-bottom-color:var(--site)}
.tabpane{display:none}
.tabpane.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.prose h3{margin:26px 0 10px;font-size:1.2rem}
.prose h4{margin:20px 0 8px;font-size:1.02rem}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose p{color:#2C3745}

/* module accordion — a syllabus reads as a numbered sequence, so numbers earn their place */
.mod{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:#fff;overflow:hidden}
.mod-h{display:flex;align-items:center;gap:14px;padding:15px 17px;cursor:pointer;width:100%;
  background:none;border:0;text-align:left;font-size:.96rem;font-weight:600}
.mod-h:hover{background:var(--paper)}
.mod-n{font-family:var(--m);font-size:.75rem;font-weight:600;color:var(--site);
  background:rgba(27,77,177,.09);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;flex:none}
.mod-h .t{flex:1}
.mod-h .dur{font-family:var(--m);font-size:.72rem;color:var(--muted);flex:none}
.mod-b{padding:0 17px 17px 61px;font-size:.9rem;color:var(--muted);display:none}
.mod.open .mod-b{display:block}
.mod.open .mod-h{background:var(--paper)}
.plus{width:11px;height:11px;position:relative;flex:none}
.plus::before,.plus::after{content:'';position:absolute;background:var(--muted);border-radius:2px}
.plus::before{inset:4px 0;height:3px}
.plus::after{inset:0 4px;width:3px;transition:transform .2s}
.mod.open .plus::after{transform:scaleY(0)}

/* reviews */
.review{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.rev-head{display:flex;gap:12px;align-items:center;margin-bottom:11px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--steel);color:#fff;display:grid;
  place-items:center;font-family:var(--d);font-weight:700;font-size:.9rem;flex:none}
.rev-head b{display:block;font-size:.92rem}
.rev-head > div > span{font-family:var(--m);font-size:.7rem;color:var(--muted);letter-spacing:.04em}
.rev-head .avatar,.learner .avatar{color:#fff}
.review p{font-size:.91rem;margin:0;color:#2C3745}
.verified{font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pass);display:inline-flex;align-items:center;gap:4px;margin-top:9px}
/* The card links to the Google listing the review lives on. It keeps the
   card's own typography rather than link styling — the existing hover lift
   already reads as interactive — and adds the focus ring a keyboard needs. */
a.review{display:block;color:inherit;text-decoration:none}
a.review:focus-visible{outline:2px solid var(--site);outline-offset:2px}
/* Beats `.review p` on specificity, which would otherwise win on colour. */
.review .rev-course{font-family:var(--m);font-size:.68rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--site);margin:0 0 7px}
.rev-summary-link{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-2)}
.rev-summary-link:hover{text-decoration-color:currentColor}

/* ============================================================
   LMS — modelled on a permit-to-work board. Modules get stamped
   as they're signed off; the board shows at a glance what's
   outstanding before the certificate can be issued.
   ============================================================ */
.lms-shell{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 108px)}
.lms-side{background:var(--steel);color:#C9D6E8;padding:24px 18px;position:sticky;top:108px;
  height:calc(100vh - 108px);overflow-y:auto}
.lms-side h4{font-family:var(--m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7E93B2;margin:22px 0 9px;font-weight:600}
.lms-side h4:first-child{margin-top:0}
.lms-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:9px;
  font-size:.91rem;font-weight:500;color:#C9D6E8;transition:background .15s}
.lms-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.lms-nav a.on{background:var(--site);color:#fff;font-weight:600}
.lms-main{padding:32px 30px;background:var(--paper);min-width:0}

.learner{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,.06);
  border-radius:12px;margin-bottom:22px}
.learner .avatar{background:var(--amber);color:var(--ink)}
.learner b{display:block;color:#fff;font-size:.92rem}
.learner span{font-family:var(--m);font-size:.66rem;color:#8FA3C0;letter-spacing:.06em}

/* progress */
.bar{height:8px;background:var(--line);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--pass);border-radius:5px;transition:width .5s ease}
.bar-dark{background:rgba(255,255,255,.14)}
.bar-amber i{background:var(--amber)}

.enrol{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;
  grid-template-columns:56px 1fr auto;gap:18px;align-items:center;box-shadow:var(--sh)}
.enrol-ic{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-family:var(--d);
  font-weight:800;font-size:.82rem;color:#fff;background:var(--card-blue);text-align:center;line-height:1.1;
}
.enrol h3{font-size:1.02rem;margin-bottom:8px}
.enrol .meta{font-family:var(--m);font-size:.72rem;color:var(--muted);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:9px}

/* the board */
.board{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.board-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;background:var(--paper-2)}
.board-h h3{font-size:1rem}
.unit{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .15s;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.unit:last-child{border-bottom:0}
.unit:hover{background:var(--paper)}
.unit.locked{cursor:not-allowed;opacity:.55}
.unit-s{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.75rem;font-weight:700;border:2px solid var(--line-2);color:var(--muted);background:#fff}
.unit.done .unit-s{background:var(--pass);border-color:var(--pass);color:#fff}
.unit.now .unit-s{border-color:var(--site);color:var(--site);border-style:dashed}
.unit .un{flex:1;font-size:.93rem;font-weight:500}
.unit .un span{display:block;font-family:var(--m);font-size:.68rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.unit .ut{font-family:var(--m);font-size:.72rem;color:var(--muted);flex:none}

/* lesson player */
.player{background:var(--ink);border-radius:var(--r-lg);aspect-ratio:16/9;display:grid;place-items:center;
  color:#7E93B2;position:relative;overflow:hidden;margin-bottom:22px}
.player::before{content:'';position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 40%,rgba(27,77,177,.35),transparent 70%)}
.play{width:74px;height:74px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;
  place-items:center;font-size:1.6rem;position:relative;z-index:1;cursor:pointer;border:0;
  box-shadow:0 10px 34px rgba(255,158,27,.4);transition:transform .18s}
.play:hover{transform:scale(1.07)}
.learn-grid{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
@media (max-width:900px){.learn-grid{grid-template-columns:1fr}}
.player-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;z-index:1;
  background:linear-gradient(transparent,rgba(11,18,32,.9));font-family:var(--m);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:#C9D6E8}

/* quiz */
.q{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:16px}
.q-n{font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site);margin-bottom:10px}
.q h3{font-size:1.08rem;margin-bottom:16px;line-height:1.35}
.opt{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:11px;margin-bottom:9px;cursor:pointer;transition:.15s;background:#fff;width:100%;text-align:left;font-size:.94rem}
.opt:hover{border-color:var(--line-2);background:var(--paper)}
.opt.sel{border-color:var(--site);background:rgba(27,77,177,.05)}
.opt.right{border-color:var(--pass);background:rgba(18,128,92,.07)}
.opt.wrong{border-color:var(--stop);background:rgba(200,16,46,.05)}
.opt-k{font-family:var(--m);font-weight:600;font-size:.8rem;width:28px;height:28px;border-radius:7px;
  background:var(--paper-2);display:grid;place-items:center;flex:none}
.opt.right .opt-k{background:var(--pass);color:#fff}
.opt.wrong .opt-k{background:var(--stop);color:#fff}
.feedback{padding:14px 16px;border-radius:10px;font-size:.89rem;margin-top:12px;display:none}
.feedback.show{display:block}
.fb-ok{background:rgba(18,128,92,.09);color:#0B5C42;border-left:3px solid var(--pass)}
.fb-no{background:rgba(200,16,46,.07);color:#8E0B20;border-left:3px solid var(--stop)}

/* certificate */
.certificate{background:#fff;border:2px solid var(--steel);border-radius:14px;padding:34px;text-align:center;position:relative;overflow:hidden}
.certificate::before{content:'';position:absolute;inset:0;border:1px solid var(--line-2);margin:9px;border-radius:8px;pointer-events:none}
.certificate .seal{width:76px;height:76px;border-radius:50%;background:var(--pass);color:#fff;display:grid;
  place-items:center;margin:0 auto 18px;font-size:2rem;box-shadow:0 0 0 6px rgba(18,128,92,.14)}
.certificate .cn{font-family:var(--m);font-size:.74rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:14px}

/* ---------- auth ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 108px)}
.auth-aside{background:var(--steel);color:#fff;padding:56px 48px;display:flex;flex-direction:column;
  justify-content:center;position:relative;overflow:hidden}
.auth-aside::before{content:'';position:absolute;inset:0;
  background:radial-gradient(700px 400px at 20% 20%,rgba(27,77,177,.5),transparent 65%)}
.auth-aside > *{position:relative;z-index:1}
.auth-form{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;max-width:520px;margin:0 auto;width:100%}
.auth-form h1{font-size:2rem;margin-bottom:8px}
.divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:.82rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.sso{display:flex;gap:10px;flex-wrap:wrap}
.sso .btn{min-width:0;white-space:normal;flex:1 1 180px}
.sso .btn{flex:1;background:#fff;border-color:var(--line-2);color:var(--ink)}
.sso .btn:hover{border-color:var(--ink)}
.authlist{list-style:none;padding:0;margin:26px 0 0}
.authlist li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;color:#B7C6DB;font-size:.93rem}

/* ---------- blog ---------- */
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .2s;box-shadow:var(--sh)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.post-img{aspect-ratio:16/9;background:var(--steel);position:relative;display:grid;place-items:center;
  font-family:var(--d);font-weight:800;color:rgba(255,255,255,.38);font-size:2.4rem;letter-spacing:-.04em}
.post-img::after{content:'';position:absolute;inset:auto 0 0 0;height:5px;
  background:repeating-linear-gradient(135deg,var(--amber) 0 10px,transparent 10px 20px)}
.post-in{padding:18px;flex:1;display:flex;flex-direction:column}
.post-meta{font-family:var(--m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.post-meta b{color:var(--site);font-weight:600}
.post-in h3{font-size:1.04rem;line-height:1.3;margin-bottom:9px}
.post-in p{font-size:.88rem;color:var(--muted);flex:1;margin-bottom:12px}
.readmore{font-family:var(--d);font-weight:700;font-size:.87rem;color:var(--site);display:inline-flex;gap:6px;align-items:center}
.post-card:hover .readmore{gap:10px}
.article{max-width:720px;margin:0 auto}
.article p{font-size:1.05rem;line-height:1.75;color:#2C3745}
.article h2{margin:36px 0 14px;font-size:1.7rem}
.article h3{margin:28px 0 10px;font-size:1.22rem}
.article ul{padding-left:22px;margin-bottom:18px}
.article li{margin-bottom:9px;font-size:1.02rem;line-height:1.7}
.callout{background:rgba(27,77,177,.05);border-left:4px solid var(--site);padding:18px 22px;
  border-radius:0 10px 10px 0;margin:26px 0}
.callout p:last-child{margin:0}
.callout b{font-family:var(--d)}
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:32px}
.toc h4{font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:6px;font-size:.92rem}
.toc a:hover{color:var(--site);text-decoration:underline}

/* ---------- locations ---------- */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}
.loc-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;
  background:#fff;border:1px solid var(--line);border-radius:9px;font-size:.9rem;font-weight:500;transition:.15s}
.loc-link:hover{border-color:var(--site);color:var(--site);background:rgba(27,77,177,.03)}
.loc-link em{font-style:normal;font-family:var(--m);font-size:.68rem;color:var(--muted)}
.venue{display:flex;gap:16px;align-items:flex-start;padding:18px;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.venue-pin{width:42px;height:42px;border-radius:11px;background:rgba(255,158,27,.15);color:var(--amber-deep);
  display:grid;place-items:center;flex:none;font-size:1.1rem}
.venue b{display:block;margin-bottom:4px}
.venue p{font-size:.87rem;color:var(--muted);margin:0}

/* ---------- cart / checkout ---------- */
.cart-row{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cart-row h3{font-size:1rem;margin-bottom:5px}
.cart-row .meta{font-family:var(--m);font-size:.72rem;color:var(--muted);letter-spacing:.05em}
.qty{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:9px;overflow:hidden}
.qty button{width:32px;height:34px;background:#fff;border:0;cursor:pointer;font-size:1rem;color:var(--muted)}
.qty button:hover{background:var(--paper-2);color:var(--ink)}
.qty span{width:36px;text-align:center;font-family:var(--m);font-weight:600;font-size:.9rem}
.sumrow{display:flex;justify-content:space-between;padding:9px 0;font-size:.93rem;color:var(--muted)}
.sumrow.total{border-top:2px solid var(--line);margin-top:9px;padding-top:15px;
  font-family:var(--d);font-weight:800;font-size:1.3rem;color:var(--ink)}
.steps{display:flex;gap:0;margin-bottom:30px;counter-reset:s}
.step{flex:1;text-align:center;position:relative;padding-top:34px;font-size:.85rem;font-weight:600;color:var(--muted)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--m);font-size:.78rem;z-index:1}
.step::after{content:'';position:absolute;top:14px;left:0;right:0;height:2px;background:var(--line)}
.step:first-child::after{left:50%}
.step:last-child::after{right:50%}
.step.on{color:var(--ink)}
.step.on::before{background:var(--site);border-color:var(--site);color:#fff}
.step.done::before{background:var(--pass);border-color:var(--pass);color:#fff;content:'✓'}

/* ---------- misc ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;padding:15px 18px;border-radius:11px;font-size:.9rem}
.notice-amber{background:rgba(255,158,27,.11);border-left:4px solid var(--amber)}
.notice-blue{background:rgba(27,77,177,.06);border-left:4px solid var(--site)}
.notice-pass{background:rgba(18,128,92,.08);border-left:4px solid var(--pass)}
/* A failed assessment. Distinct from notice-amber, which warns; this reports
   an outcome, and reads as one. */
.notice-fail{background:rgba(200,16,46,.07);border-left:4px solid var(--card-red)}
.notice b{font-family:var(--d)}

/* ---------- self-paced course portal ---------- */
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--pass);border-radius:99px;
  transition:width .3s ease}
.lesson-media{width:100%;max-width:820px;border-radius:12px;background:#000;display:block}
.q{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.q>legend{font-family:var(--d);font-weight:700;font-size:1rem;padding:0 0 10px}
.q-img{max-width:260px;height:auto;border:1px solid var(--line);border-radius:8px;
  margin:0 0 14px;display:block}
.q-opt{display:flex;gap:10px;align-items:flex-start;padding:9px 0;cursor:pointer}
.q-opt input{margin-top:3px;flex:none}
.q-mark{font-weight:700}
.q-right{color:var(--pass)}
.q-wrong{color:var(--card-red)}
/* The exam clock. Sticky so it stays visible on a long paper. */
.q-clock{position:sticky;top:0;z-index:5;background:var(--paper);padding:12px 0;
  border-bottom:1px solid var(--line);font-family:var(--d);font-weight:700}
.q-clock.low{color:var(--card-red)}
.faq{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;text-align:left;padding:17px 0;font-family:var(--d);
  font-weight:700;font-size:1rem;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-q:hover{color:var(--site)}
.faq-a{padding:0 0 17px;color:var(--muted);font-size:.93rem;display:none;max-width:76ch}
.faq.open .faq-a{display:block}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;
  background:var(--paper-2);border:1px solid var(--line);font-size:.82rem;font-weight:500}
.pill:hover{border-color:var(--site);color:var(--site)}
.pill.on{background:var(--site);color:#fff;border-color:var(--site)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);z-index:200;
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:11px;font-size:.92rem;font-weight:500;
  box-shadow:var(--sh-lg);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;gap:11px;align-items:center;max-width:92vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .tick{color:var(--pass)}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#93A3B8;padding:56px 0 0;margin-top:auto}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px;padding-bottom:40px}
footer.site h4,footer.site .fh{font-family:var(--m);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;font-weight:600}
footer.site a{display:block;padding:5px 0;font-size:.89rem;color:#93A3B8}
footer.site a:hover{color:var(--amber)}
.foot-brand p{font-size:.89rem;margin:14px 0}
.foot-contact{font-family:var(--m);font-size:.88rem;color:#fff;font-weight:500}
.socials{display:flex;gap:9px;margin-top:16px}
.socials a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;
  place-items:center;padding:0;font-size:.8rem;font-weight:600;color:#C3CCDA}
.socials a:hover{background:var(--site);color:#fff}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.83rem}
.foot-bar a{display:inline;padding:0}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}

/* sticky mobile booking bar */
.mobk{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);
  padding:11px 16px;display:none;align-items:center;gap:14px;box-shadow:0 -6px 24px rgba(11,18,32,.1)}
.mobk .price{font-size:1.2rem}
body.has-mobk .chatbtn{bottom:88px}
@media (max-width:560px){.chatbtn{padding:11px 16px;font-size:.84rem;right:14px}}

/* ============================================================
   RESPONSIVE — mobile-first audience. Most of this niche books
   from a phone, often on site, often the night before.
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
  /* Left-hand utility items wrap awkwardly once the nav collapses. */
  .utility .util-list:first-child{display:none}
  .utility .wrap{justify-content:flex-end}
  .lms-shell{grid-template-columns:1fr}
  .lms-side{position:static;height:auto;border-radius:0}
  .lms-main{padding:24px 18px}
}
/* The header carries logo + 6 nav items + search + saved + basket + 2 CTAs.
   Below 1460px it cannot hold all of that, so items step aside in priority
   order: secondary CTA first, then search (which also lives in the drawer). */
@media (max-width:1400px) and (min-width:1025px){
  .mainnav > a,.navitem > button{padding:9px 8px;font-size:.88rem}
  .navactions .btn-amber{display:none}
  .searchbox input{width:112px}
  .nav{gap:14px}
}
@media (max-width:1180px) and (min-width:1025px){
  .searchbox{display:none}
}
/* At or below 1024px the full nav cannot fit. Tablets get the drawer. */
@media (max-width:1024px){
  .mainnav,.searchbox{display:none}
  .burger{display:flex}
  .navactions .btn{display:none}
  .nav{gap:12px;height:66px}
  /* .mainnav carries the margin-left:auto that pushes the basket/burger to
     the right edge on desktop. It is display:none here, so that push is
     gone unless .navactions takes it over itself. */
  .navactions{margin-left:auto}
}
@media (max-width:900px){
  .course-layout{grid-template-columns:1fr}
  .booking{position:static}
  .cat-layout{grid-template-columns:1fr}
  .filters{position:static;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-lg);padding:18px}
}
@media (max-width:820px){
  .utility .util-list a[href^="tel"]{display:inline-flex}
  .utility .util-list > span,.utility .util-list a:not([href^="tel"]){display:none}
  .utility .util-list:first-child{display:none}
  .utility .wrap{height:34px;justify-content:center}
  .utility .util-list{display:flex;gap:14px}
  .utility a[href^="tel"]::before{content:'\260E';margin-right:6px}
  .nav{height:64px}
  .logo-txt{font-size:.95rem}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero-sub{font-size:1rem}
  .hero .eyebrow{font-size:.64rem;letter-spacing:.12em}
  .sec{padding:52px 0}
  .utility .wrap{justify-content:center}
  .enrol{grid-template-columns:1fr;gap:14px}
  .enrol-ic{width:48px;height:48px}
  .hero{padding-top:44px}
  .steps{font-size:.75rem}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .auth-form{padding:34px 20px}
  .cert-foot{flex-direction:column;align-items:stretch;gap:14px}
  .cert-foot .btn{width:100%}
  .mobk{display:flex}
  body.has-mobk{padding-bottom:74px}
  .cart-row{grid-template-columns:1fr;gap:10px}
  .lms-main{padding:20px 14px}
  .sec{padding:40px 0}
  .tabs{gap:0}
  .tab{padding:11px 12px;font-size:.86rem}
}

/* ============================================================
   PRINT — people in this trade genuinely print: joining
   instructions, certificates, invoices and booking confirmations
   get taken to site or handed to an employer.
   ============================================================ */
@media print{
  :root{--paper:#fff;--paper-2:#fff}
  body{background:#fff;color:#000;font-size:11pt}
  /* chrome that is useless on paper */
  header.site,.utility,footer.site,.chatbtn,.drawer,.mobk,.hazard,.savebtn,
  .burger,.searchbox,.cart-btn,.navactions,.tabs,.sortbox,.filters,
  .dates-strip,.mega,.toast,.crumbs{display:none!important}
  /* a printed course page should carry every tab, not just the open one */
  .tabpane{display:block!important;page-break-inside:auto}
  .tabpane + .tabpane{margin-top:18pt;padding-top:14pt;border-top:1pt solid #999}
  .mod-b,.faq-a{display:block!important}
  /* unstick everything so content flows */
  .booking,.filters,.lms-side{position:static!important}
  .phead{background:#fff!important;color:#000;padding:0 0 12pt}
  .phead h1,.phead p,.band-dark,.band-dark h2,.band-dark h3,.band-dark p{color:#000!important}
  .band-dark,.hero{background:#fff!important}
  .hero::before,.phead::before{display:none}
  /* single column on paper */
  .course-layout,.cat-layout,.hero-grid,.lms-shell,.learn-grid,.auth{
    display:block!important}
  .grid{display:block!important}
  .cert,.panel,.review,.venue,.enrol,.certificate{
    border:1pt solid #999;box-shadow:none;page-break-inside:avoid;margin-bottom:10pt}
  h1{font-size:20pt} h2,h2.h3{font-size:14pt} h3{font-size:12pt}
  h1,h2,h3{page-break-after:avoid}
  p,li{orphans:3;widows:3}
  a{color:#000;text-decoration:underline}
  /* a printed page is useless without the destination of its links */
  .prose a[href^="#/"]::after,.article a[href^="#/"]::after{
    content:" (highaimstraining.co.uk" attr(href) ")";font-size:9pt;color:#444}
  .btn{border:1pt solid #666;background:#fff!important;color:#000!important;box-shadow:none}
  .certificate{page-break-inside:avoid;border:2pt solid #000}
  @page{margin:16mm}
}

/* ---- multi-page additions ---- */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.mode{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px;background:#fff;position:relative}
/* The most popular route. Lifted with the site blue rather than the amber
   CTA colour, so it reads as "this one" without competing with Add to basket. */
.mode-pop{border-color:var(--site);box-shadow:0 0 0 3px rgba(27,77,177,.09)}
.mode-badge{position:absolute;top:-10px;right:14px;background:var(--site);color:var(--white);
  font-family:var(--m);font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap}
/* Sits in the small uppercase line under the option name ("ZOOM · UK-WIDE ·
   MOST POPULAR") rather than beside the name, where it wrapped onto a second
   line and pushed the row out of alignment with its neighbour. */
.opt-badge{color:var(--site);font-weight:700}
/* When a delivery option actually runs, e.g. "Weekend classes only". */
.mode-when{font-family:var(--m);font-size:.72rem;font-weight:600;color:var(--site);
  letter-spacing:.04em;margin:0 0 10px;display:flex;gap:6px;align-items:center}
.pick-note{font-size:.78rem;color:var(--muted);margin:9px 0 0;text-align:center;
  line-height:1.45}

/* ---------- learning options ---------- */
/* Cards are equal height with the price and CTA pinned to the bottom, so the
   three line up however much copy each carries. */
.mode{display:flex;flex-direction:column}
.mode-foot{margin-top:auto;padding-top:14px;display:flex;gap:12px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.mode-foot .mp{margin:0}
/* Fills the gap the first card is left with once its copy runs out and its
   neighbours (a checklist, a quote) still have more below theirs. A fixed
   ratio rather than the native size, so a card never grows or shrinks with
   whatever is uploaded — but contained rather than cropped, like .cert-img:
   these illustrations are an awarding body's logo above a scheme name, and a
   crop takes the edge off the logo or loses the mark in the corner. */
.mode-hero{width:100%;aspect-ratio:16/9;object-fit:contain;
  background:var(--paper-2);border-radius:var(--r);margin-top:10px;display:block}
.mp-quote{font-size:.9rem!important;color:var(--muted)}
.team-list{list-style:none;margin:0 0 4px;padding:0;font-size:.86rem;color:var(--muted)}
.team-list li{padding:3px 0 3px 20px;position:relative}
.team-list li::before{content:'\2713';position:absolute;left:0;color:var(--pass);
  font-weight:700}
.date-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;
  background:rgba(255,255,255,.25);border-radius:99px;font-size:.72rem;
  font-family:var(--m);font-weight:700}

/* ---------- dates dialog ----------
   Header and footer are fixed; only .dates-body scrolls, so the delivery
   mode you opened and the VAT disclaimer stay put while you scan sittings —
   with nine-plus rows the old single-scroll dialog lost the heading. */
dialog.dates{border:0;border-radius:var(--r-lg);padding:0;width:min(720px,94vw);
  max-height:88vh;background:var(--white);color:var(--ink);
  box-shadow:0 24px 70px -18px rgba(11,18,32,.4);
  display:flex;flex-direction:column;overflow:hidden}
dialog.dates::backdrop{background:rgba(11,18,32,.55)}
/* Without JS the dialog stays closed but its content must still be reachable,
   so it is laid out inline rather than hidden. */
dialog.dates:not([open]){display:none}
.dates-head{position:relative;flex:none;padding:24px 56px 16px 26px;
  border-bottom:1px solid var(--line)}
.dates-close{position:absolute;top:14px;right:14px;margin:0}
.dates-close button{background:var(--paper-2);border:0;font-size:1.4rem;line-height:1;
  cursor:pointer;color:var(--muted);width:34px;height:34px;border-radius:99px;
  display:grid;place-items:center}
.dates-close button:hover{background:var(--line);color:var(--ink)}
.dates-h{font-family:var(--d);font-size:1.15rem;margin:0 0 4px;display:flex;
  gap:10px;align-items:center}
.dates-h .mode-ic{width:32px;height:32px;font-size:.95rem}
.dates-sub{color:var(--muted);font-size:.86rem;margin:0}
/* The scrolling region. A layered background paints a soft shadow at the top
   and bottom edges whenever there is more list to scroll to, and lets it fade
   as you reach either end — a lightweight cue that this is a long list. */
.dates-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 26px;
  background:
    linear-gradient(var(--white) 40%,rgba(255,255,255,0)) 0 0,
    linear-gradient(rgba(255,255,255,0),var(--white) 60%) 0 100%,
    radial-gradient(farthest-side at 50% 0,rgba(11,18,32,.1),rgba(11,18,32,0)) 0 0,
    radial-gradient(farthest-side at 50% 100%,rgba(11,18,32,.1),rgba(11,18,32,0)) 0 100%;
  background-repeat:no-repeat;
  background-size:100% 20px,100% 20px,100% 8px,100% 8px;
  background-attachment:local,local,scroll,scroll}
.dates-list{padding:6px 0}
.dates-row{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:14px;margin:8px 0;border-radius:12px;
  background:var(--paper-2);border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease}
.dates-row:hover{background:var(--white);border-color:var(--line-2)}
.dates-row.is-full{opacity:.6}
.dates-row.is-full:hover{background:var(--paper-2);border-color:transparent}
.dates-when{flex:1;min-width:175px;display:flex;flex-direction:column;gap:3px}
.dates-when b{font-family:var(--d);font-size:1.02rem}
.dates-when .meta{font-size:.8rem;color:var(--muted)}
.dates-when .seats{align-self:flex-start;margin-top:4px}
.dates-buy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dates-price{font-family:var(--d);font-weight:800;font-size:1.05rem;line-height:1.1;
  white-space:nowrap}
.dates-price span{display:block;font-family:var(--m);font-size:.65rem;
  font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dates-empty{padding:20px 0}
.dates-empty p{margin:0 0 12px;font-size:.92rem}
.dates-foot{flex:none;margin:0;padding:14px 26px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);background:var(--paper-2)}
/* Below 480px there is no room for mark + date + price + qty + button on
   one line, and letting flex wrap it item-by-item stacked mark and date on
   separate full-width lines too — wasteful, since the two are short enough
   to share one. A grid pins each part on purpose instead: mark and date
   share the top line, price and the qty stepper share the next, and "Book
   now" gets its own full-width line under a divider — the one action on
   the card, sized like it, not squeezed beside a number input. */
@media (max-width:480px){
  .dates-row{display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"mark when" "buy buy";column-gap:12px;row-gap:12px;
    align-items:center}
  .dates-mark{grid-area:mark}
  .dates-when{grid-area:when;min-width:0}
  .dates-buy{grid-area:buy;display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"price qty" "rule rule" "book book";
    column-gap:12px;row-gap:12px;align-items:center}
  /* The divider gets its own grid row rather than a border on the price or
     the button, so it lands as one straight line regardless of how tall
     either neighbour renders — a border on either would follow that
     element's own box, not a shared line across both columns. */
  .dates-buy::before{content:'';grid-area:rule;height:1px;background:var(--line)}
  .dates-price{grid-area:price}
  .dates-buy .qty{grid-area:qty;justify-self:end}
  .dates-buy .btn{grid-area:book;width:100%;justify-content:center;
    padding:15px 20px;font-size:1rem}
}

/* ---------- delegate count ---------- */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:9px;overflow:hidden;background:var(--white)}
.qty input{width:44px;border:0;text-align:center;font-family:var(--m);
  font-weight:600;font-size:.9rem;padding:8px 0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:2px solid var(--site);outline-offset:-2px}
.qty-b{border:0;background:var(--paper-2);width:32px;align-self:stretch;
  cursor:pointer;font-size:1rem;font-weight:700;color:var(--ink)}
.qty-b:hover{background:var(--line)}
.cart-qty{display:flex;gap:8px;align-items:center;margin-top:8px}
.cart-qty input{width:58px;padding:7px 8px;border:1.5px solid var(--line);
  border-radius:8px;font-family:var(--m);font-weight:600;text-align:center}
.plan-chip{display:inline-block;background:rgba(27,77,177,.1);color:var(--site);
  padding:1px 7px;border-radius:99px;font-size:.72rem;font-family:var(--m);
  letter-spacing:.04em;text-transform:uppercase}

/* ---------- checkout progress ---------- */
.checkout-head{border-bottom:1px solid var(--line);background:var(--white);
  padding:16px 0}
.checkout-head .wrap{display:flex;gap:20px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.ch-brand b{display:block;font-family:var(--d);font-size:1rem}
.ch-brand span{font-size:.8rem;color:var(--muted)}
.steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.steps li{display:flex;gap:7px;align-items:center;font-family:var(--m);
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0 10px}
.steps li span{width:21px;height:21px;border-radius:50%;display:grid;
  place-items:center;background:var(--line);color:var(--ink);font-size:.7rem}
.steps li[aria-current] {color:var(--site)}
.steps li[aria-current] span{background:var(--site);color:var(--white)}

/* ---------- checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;
  align-items:start}
@media (max-width:860px){
  .checkout-grid{grid-template-columns:1fr}
  /* Summary first on a phone: what you are paying should be visible before
     a screenful of fields. */
  .checkout-side{order:-1}
}
.checkout-main{min-width:0}
.summary{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;
  background:var(--white);position:sticky;top:20px}
.sum-line{display:flex;gap:14px;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--line)}
.sum-line b{font-family:var(--d);font-size:.92rem;display:block}
.sum-line span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.sum-amt{white-space:nowrap;font-size:.95rem!important}
.sum-plan{color:var(--site)!important;font-weight:600}
/* What this line is NOT. Amber and boxed rather than grey like the rest of
   the line's detail: it has to survive being skimmed, because it is the one
   thing somebody could otherwise pay without noticing. */
.sum-prep{color:var(--ink)!important;font-weight:600;line-height:1.5;
  margin-top:7px!important;padding:9px 11px;border-radius:9px;
  background:rgba(255,158,27,.12);border:1px solid rgba(255,158,27,.4)}
.guest-note{background:var(--paper-2);border-radius:10px;padding:13px 16px;
  font-size:.87rem;color:var(--muted);margin:0 0 22px}
.terms-note{font-size:.78rem;color:var(--muted);text-align:center;margin:14px 0 0}
#stripe-payment-element{min-height:80px}

/* ---------- pricing plans ---------- */
.plan-lede{max-width:64ch;color:var(--muted);font-size:.93rem;margin:0 0 24px}
/* stretch, not start: the three cards match height whatever they each carry,
   and the reserved rows below keep the Select buttons on one line. */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:18px;align-items:stretch}
.plan{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;
  background:var(--white);position:relative;display:flex;flex-direction:column}
.plan-pop{border-color:var(--site);box-shadow:0 0 0 3px rgba(27,77,177,.09)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--site);color:var(--white);font-family:var(--m);font-size:.64rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;
  border-radius:99px;white-space:nowrap}
.plan-name{font-family:var(--d);font-size:1.4rem;margin:0 0 4px}
.plan-tag{font-size:.85rem;color:var(--muted);margin:0 0 14px;min-height:2.4em}
/* The price block reserves the strikethrough line and the saving line even
   when a plan claims neither, so Saver's button sits level with Premium's
   rather than riding up the card. */
.plan-price{margin-bottom:4px;min-height:4.3em}
.plan-price s{color:var(--muted);font-size:.95rem;margin-right:8px}
.plan-price b{font-family:var(--d);font-size:1.9rem;line-height:1}
.plan-price span{display:block;font-size:.75rem;color:var(--muted);margin-top:4px}
.plan-save{font-size:.8rem;color:var(--pass);font-weight:600;margin:0 0 14px;
  min-height:1.2em}
/* margin-top:auto pushes the list down so every card's benefits start at the
   same line and the card fills its grid cell. */
.plan-list{list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.plan-list li{display:flex;gap:10px;font-size:.86rem;align-items:flex-start}
.plan-list li>span:first-child{flex:none;font-weight:700;line-height:1.4}
.plan-list li.yes>span:first-child{color:var(--pass)}
.plan-list li.no>span:first-child{color:var(--stop)}
.plan-list li.no{color:var(--muted)}
.plan-list b{display:block;font-family:var(--d);font-weight:700;font-size:.88rem}
.plan-list em{font-style:normal;color:var(--muted);font-size:.82rem}
/* The free courses a plan throws in. Out of the tick list and into a panel of
   their own: the certificate and the materials are identical on every plan,
   so these are the only thing the choice is actually about. Amber, because it
   is the one line on the card that is a gift rather than a term. */
.plan-bundle{margin-top:14px;padding:13px 15px;border-radius:12px;
  background:rgba(255,158,27,.1);border:1px solid rgba(255,158,27,.42)}
.plan-bundle b{display:block;font-family:var(--d);font-size:.86rem;
  letter-spacing:-.01em}
.plan-bundle ul{list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px}
.plan-bundle li{font:600 .79rem var(--b);background:var(--white);
  border:1px solid rgba(255,158,27,.5);border-radius:99px;padding:4px 11px}
.plan-bundle em{display:block;font-style:normal;color:var(--muted);
  font-size:.78rem;margin-top:9px}
.plan-total{margin:16px 0 0;font-size:.85rem;color:var(--muted)}
.mode.best{border-color:var(--site);box-shadow:0 0 0 3px rgba(27,77,177,.1)}
.mode h4{font-family:var(--d);font-size:1rem;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.mode p{font-size:.87rem;color:var(--muted);margin:0 0 10px}
.mode .mp{font-family:var(--d);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.mode-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:.9rem}
.mi-london{background:rgba(27,77,177,.1);color:var(--site)}
.mi-online{background:rgba(18,128,92,.1);color:#0A5C42}
.mi-lms{background:rgba(255,158,27,.16);color:#7A4300}
/* Team training — not a delivery mode, so it has no MODE_META entry. */
.mi-team{background:rgba(19,35,61,.09);color:var(--steel)}
.rail{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0}
.rail h4{font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.rail table{width:100%;border-collapse:collapse;font-size:.89rem}
.rail td{padding:6px 0;border-bottom:1px solid var(--line)}
.rail tr:last-child td{border-bottom:0}
.rail td:last-child{text-align:right;font-family:var(--m);font-weight:600}

/* skip link — visually hidden until focused */
.skip{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--site);color:#fff;
  padding:12px 20px;border-radius:8px;font-family:var(--d);font-weight:700;font-size:.95rem}
.skip:focus{left:8px}

/* Two-up panel grids must collapse on the narrowest phones. */
@media (max-width:400px){
  .g2,.grid.g2{grid-template-columns:1fr!important}
  /* Long button labels carry white-space:nowrap, which overflows a 320px screen.
     Let them wrap rather than truncating the label or shrinking the tap target. */
  .btn{white-space:normal;text-align:center}
  .panel{padding:18px}
  .rail{padding:14px}
  .rail table{font-size:.83rem}
  .mode-grid{grid-template-columns:1fr!important}
}

/* ════════════════════════════════════════════════════════════
   VISUAL SYSTEM UPGRADE
   The subject is a physical credential you carry in your wallet.
   The design leans into that: blueprint grids, hazard geometry,
   and a real card rendered as the hero object.
   ════════════════════════════════════════════════════════════ */

/* ── depth scale ── */
:root{
  --e1:0 1px 2px rgba(11,18,32,.05), 0 2px 6px rgba(11,18,32,.04);
  --e2:0 2px 4px rgba(11,18,32,.05), 0 8px 20px -6px rgba(11,18,32,.10);
  --e3:0 4px 8px rgba(11,18,32,.06), 0 18px 40px -12px rgba(11,18,32,.18);
  --e4:0 8px 16px rgba(11,18,32,.08), 0 40px 80px -20px rgba(11,18,32,.32);
  --glow-amber:0 0 0 1px rgba(255,158,27,.3), 0 8px 30px -6px rgba(255,158,27,.45);
}

/* ── blueprint grid: the drawing every site works from ── */
.blueprint{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(120% 90% at 30% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 0%,#000 20%,transparent 78%);}

/* ── HERO ─────────────────────────────────────────────── */
.hero{padding:0;isolation:isolate;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(1100px 520px at 12% -12%,rgba(42,99,216,.55),transparent 62%),
    radial-gradient(760px 420px at 88% 4%,rgba(255,158,27,.20),transparent 62%),
    linear-gradient(160deg,#16294a 0%,#101f3a 45%,#0B1220 100%);
  z-index:-2}
.hero-inner{position:relative;z-index:1;padding:76px 0 118px}
.hero-grid{grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.9rem);line-height:.94;letter-spacing:-.045em;
  margin-bottom:22px;text-wrap:balance}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:-.08em;height:6px;
  background:var(--amber);border-radius:3px}
.hero-sub{font-size:1.16rem;line-height:1.6;color:#C2D0E4;max-width:47ch;margin-bottom:32px}

/* stats — the strongest claims deserve real scale */
.statbar{display:flex;flex-wrap:wrap;gap:0;margin-bottom:34px;
  border:1px solid rgba(255,255,255,.13);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.045);backdrop-filter:blur(8px)}
.statbar > div,.statbar > .stat-link{flex:1 1 130px;padding:16px 18px;border-right:1px solid rgba(255,255,255,.11)}
.statbar > div:last-child,.statbar > .stat-link:last-child{border-right:0}
/* The review tile links to the Google listing it quotes. It keeps the tile's
   own typography rather than link styling, so the bar still reads as one
   object — the hover and focus states are what say it is clickable. */
.statbar > .stat-link{color:inherit;text-decoration:none;cursor:pointer;
  transition:background-color .15s}
.statbar > .stat-link:hover{background:rgba(255,255,255,.08)}
.statbar > .stat-link:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.statbar b{display:flex;align-items:baseline;gap:2px;font-family:var(--d);font-weight:800;font-size:1.9rem;letter-spacing:-.04em;line-height:1;color:#fff;white-space:nowrap}
.statbar b .u{color:var(--amber);font-size:.68em;display:inline;flex:none}
.statbar span{display:block;font-family:var(--m);font-size:.66rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:#8FA6C6;margin-top:8px}

/* ── THE CARD: the thing you are actually buying ────────── */
.cardstage{position:relative;display:grid;place-items:center;min-height:400px;perspective:1400px;
  padding:14px 6px}
.cardstage::before{content:'';position:absolute;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,158,27,.22),transparent 68%);filter:blur(30px)}
/* The scheme's own specimen card, not a drawing of one. It keeps the width,
   the lift and the tilt the drawing had, so the three floating chips still
   sit where they were placed around it. The angle is a transform rather than
   anything baked into the file, so the picture itself stays square-on and
   can be swapped for a newer card design without redoing the hero. */
.idcard-img{position:relative;display:block;width:min(400px,86%);height:auto;
  border-radius:14px;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.35);
  transform:rotateY(-15deg) rotateX(7deg) rotate(-2deg);
  transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.idcard-img:hover{transform:rotateY(-7deg) rotateX(3deg) rotate(-1deg) translateY(-6px)}
/* floating credential chips around the card */
.float{position:absolute;background:rgba(255,255,255,.97);color:var(--ink);border-radius:11px;
  padding:10px 14px;box-shadow:var(--e4);font-size:.82rem;font-weight:600;display:flex;
  align-items:center;gap:9px;white-space:nowrap;animation:bob 5s ease-in-out infinite}
.float i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal}
.f-1{top:4%;right:0;animation-delay:.2s}
.f-2{bottom:14%;left:0;animation-delay:1.6s}
.f-3{bottom:0;right:10%;animation-delay:2.9s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── DELIVERY MODE TILES ────────────────────────────────── */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;
  margin-top:-74px;position:relative;z-index:5}
.way{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--e3);position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.way:hover{transform:translateY(-5px);box-shadow:var(--e4)}
.way::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.way-1::before{background:var(--site)} .way-2::before{background:var(--pass)} .way-3::before{background:var(--amber)}
.way-fig{width:62px;height:62px;border-radius:15px;display:grid;place-items:center;margin-bottom:15px}
.way-1 .way-fig{background:rgba(27,77,177,.09)} .way-2 .way-fig{background:rgba(18,128,92,.09)}
.way-3 .way-fig{background:rgba(255,158,27,.13)}
.way h3{font-size:1.1rem;margin-bottom:7px}
.way p{font-size:.9rem;color:var(--muted);margin:0 0 14px}
.way .wprice{font-family:var(--m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:13px;border-top:1px dashed var(--line-2)}
.way .wprice b{font-family:var(--d);font-size:1.1rem;letter-spacing:-.02em;color:var(--ink)}

/* ── COURSE CARD upgrade: reads as a credential, not a box ── */
.cert{box-shadow:var(--e1);transition:transform .24s cubic-bezier(.22,.8,.3,1),box-shadow .24s ease,border-color .2s}
.cert:hover{transform:translateY(-6px);box-shadow:var(--e4);border-color:transparent}
.cert-band{height:7px;position:relative;overflow:hidden}
.cert-band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%)}
.cert:hover .cert-band::after{animation:bandsweep .85s ease}
@keyframes bandsweep{to{transform:translateX(100%)}}
.cert-body h3 a{background-image:linear-gradient(var(--site),var(--site));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s ease}
.cert:hover .cert-body h3 a{background-size:100% 2px}

/* ── SECTION RHYTHM ─────────────────────────────────────── */
.sec-head{max-width:60ch;margin-bottom:38px}
.sec-head h2{text-wrap:balance}
.eyebrow{font-size:.7rem}
/* a hairline rule that reads as a setting-out line */
.ruled{position:relative;padding-top:26px}
.ruled::before{content:'';position:absolute;top:0;left:0;width:64px;height:3px;background:var(--amber)}

/* dark band gets the blueprint too */
.band-dark{position:relative;overflow:hidden;isolation:isolate}
.band-dark > .wrap{position:relative;z-index:1}

/* ── TRUST BAR ──────────────────────────────────────────── */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center;
  padding-top:22px;padding-bottom:22px}
.trust-lbl{font-family:var(--m);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);flex:none}
.accred-item{border:0;background:none;padding:0;font-size:1.02rem;color:var(--steel);transition:.2s}
.accred-item span{color:#5A6472}

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .float{animation:none}
}

/* ── BUTTONS with more presence ─────────────────────────── */
.btn-amber{box-shadow:0 3px 0 var(--amber-deep),0 10px 26px -8px rgba(255,158,27,.5)}
.btn-amber:hover{box-shadow:0 3px 0 var(--amber-deep),0 14px 34px -8px rgba(255,158,27,.62)}
.btn-primary{box-shadow:0 3px 0 #0F3B8C,0 10px 26px -8px rgba(27,77,177,.45)}
.btn-lg{padding:16px 28px;font-size:1rem;border-radius:12px}

/* ── PANELS ─────────────────────────────────────────────── */
.panel{box-shadow:var(--e1)}
.review{box-shadow:var(--e1);transition:transform .2s,box-shadow .2s}
.review:hover{transform:translateY(-3px);box-shadow:var(--e3)}
.post-card{box-shadow:var(--e1)}
.post-card:hover{box-shadow:var(--e4);transform:translateY(-5px)}
.post-img{background:linear-gradient(150deg,#1E3358,#101F3A);overflow:hidden}
.post-img::before{content:'';position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:22px 22px}
.loc-link{transition:transform .16s,border-color .16s,box-shadow .16s}
.loc-link:hover{transform:translateY(-2px);box-shadow:var(--e2)}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .cardstage{min-height:330px;margin-top:8px}
  .hero-inner{padding:54px 0 76px}
  .ways{margin-top:-40px}
  .float{font-size:.76rem;padding:8px 11px}
}
@media (max-width:560px){
  .statbar > div,.statbar > .stat-link{flex:1 1 0;min-width:0;padding:13px 10px}
  .statbar b{font-size:1.3rem}
  .statbar span{font-size:.58rem;letter-spacing:.08em;margin-top:6px}
  .hero h1{font-size:clamp(2.2rem,10vw,3rem)}
  .hero-sub{font-size:1.02rem;margin-bottom:26px}
  .cardstage{min-height:270px}
  .f-2{left:0} .f-3{right:2%}
  .hero-inner{padding:40px 0 64px}
  .ways{margin-top:-28px}
}

/* Credential cards must bottom-align their price rows across a row of the grid,
   whatever the blurb length. */
.cardwrap{display:flex}
.cardwrap > .cert{width:100%}
.cert{height:100%}
.cert-body{flex:1 1 auto;display:flex;flex-direction:column}
.cert-blurb{flex:1 1 auto}
.cert-data{margin-top:auto}

/* One card carries a "most booked" flag so a row of seven has a focal point. */
.cert.featured{border-color:var(--site);box-shadow:0 0 0 3px rgba(27,77,177,.13),var(--e3)}
.cert.featured:hover{box-shadow:0 0 0 3px rgba(27,77,177,.2),var(--e4)}
.flag{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--m);
  font-size:.6rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;background:var(--site);
  color:#fff;padding:5px 12px 6px;border-radius:0 0 7px 7px}

/* very subtle paper tooth so large light areas are not dead flat */
.sec:not(.band):not(.band-dark){position:relative}
body{background-image:radial-gradient(circle at 1px 1px,rgba(11,18,32,.028) 1px,transparent 0);
  background-size:26px 26px}

/* The verified-booking badge is inline-flex, so its long label could not wrap
   and pushed past the viewport on narrow screens. */
.verified{flex-wrap:wrap;max-width:100%}

/* ============================================================
   COURSE VIDEO PLAYER
   Custom controls over the native <video>. The browser's own bar
   has no speed control, no shortcuts and nowhere to resume from,
   none of which are optional for a 55-minute safety video.
   ============================================================ */
.vplayer{position:relative;width:100%;max-width:900px;margin:0 auto;background:#000;
  border-radius:12px;overflow:hidden;line-height:0;outline:none}
.vplayer:focus-visible{box-shadow:0 0 0 3px var(--amber)}
.vplayer video{width:100%;display:block;aspect-ratio:16/9;background:#000;cursor:pointer}
.vplayer.is-full{max-width:none;border-radius:0;height:100vh}
.vplayer.is-full video{height:100vh;object-fit:contain}

/* Controls hide while playing and come back on pointer move. They stay put
   whenever the video is paused or anything inside has keyboard focus —
   a bar that vanishes from under a keyboard user is unusable. */
.vp-controls{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));line-height:1;
  opacity:1;transition:opacity .2s;z-index:2}
.vplayer.is-playing.is-idle .vp-controls{opacity:0;pointer-events:none}
.vplayer:focus-within .vp-controls{opacity:1;pointer-events:auto}

.vp-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;
  touch-action:none}
.vp-seek::before{content:'';position:absolute;left:0;right:0;height:4px;
  background:rgba(255,255,255,.3);border-radius:3px}
.vp-buffered,.vp-played{position:absolute;left:0;height:4px;border-radius:3px;width:0}
.vp-buffered{background:rgba(255,255,255,.45)}
.vp-played{background:var(--amber)}
.vp-knob{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--amber);
  left:0;transform:translateX(-50%) scale(0);transition:transform .12s;pointer-events:none}
.vp-seek:hover .vp-knob,.vp-seek:focus-visible .vp-knob{transform:translateX(-50%) scale(1)}
.vp-seek:hover::before{height:6px}
.vp-hover{position:absolute;bottom:20px;transform:translateX(-50%);padding:2px 6px;
  border-radius:4px;background:rgba(0,0,0,.85);color:#fff;font-family:var(--m);
  font-size:.7rem;opacity:0;pointer-events:none;white-space:nowrap}
.vp-seek:hover .vp-hover{opacity:1}

.vp-row{display:flex;align-items:center;gap:4px;margin-top:5px}
.vp-gap{flex:1}
.vp-btn{width:34px;height:34px;border:0;background:none;color:#fff;cursor:pointer;
  border-radius:7px;display:grid;place-items:center;padding:0;position:relative}
.vp-btn:hover{background:rgba(255,255,255,.16)}
.vp-btn:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.vp-time{color:#fff;font-family:var(--m);font-size:.74rem;margin-left:6px;white-space:nowrap}

/* Glyphs are drawn in CSS so the bar needs no icon font and no sprite. */
.vp-play::before{content:'';border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;margin-left:3px}
.vplayer.is-playing .vp-play::before{border-width:0;width:11px;height:13px;
  border-left:4px solid #fff;border-right:4px solid #fff;margin:0}
.vp-back::before,.vp-fwd::before{content:'10';font-family:var(--m);font-size:.6rem;
  font-weight:700;color:#fff}
.vp-back::after,.vp-fwd::after{content:'\21ba';position:absolute;font-size:1.25rem;
  color:#fff;opacity:.9}
.vp-fwd::after{content:'\21bb'}
.vp-mute::before{content:'\1F50A';font-size:.95rem}
.vplayer.is-muted .vp-mute::before{content:'\1F507'}
.vp-full::before{content:'\26F6';font-size:1rem}
.vp-pip::before{content:'\29C9';font-size:1rem}
.vp-speed{width:auto;min-width:58px;padding:0 9px;font-family:var(--m);font-size:.72rem;
  font-weight:600}

.vp-vol{display:flex;align-items:center}
.vp-volrange{width:0;opacity:0;transition:width .16s,opacity .16s;height:4px;
  accent-color:var(--amber);cursor:pointer;margin:0}
.vp-vol:hover .vp-volrange,.vp-volrange:focus-visible{width:76px;opacity:1;margin:0 6px}

.vp-menu{position:relative}
.vp-speeds{position:absolute;right:0;bottom:42px;background:rgba(18,22,30,.97);
  border-radius:9px;padding:5px;min-width:126px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vp-speeds button{display:block;width:100%;text-align:left;background:none;border:0;
  color:#fff;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:.82rem}
.vp-speeds button:hover{background:rgba(255,255,255,.14)}
.vp-speeds button[aria-checked=true]::after{content:'\2713';float:right;color:var(--amber)}

.vp-big{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  border:0;background:rgba(0,0,0,.55);cursor:pointer;display:grid;place-items:center;
  transition:opacity .2s,transform .2s;z-index:1}
.vp-big::before{content:'';border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;margin-left:6px}
.vplayer.is-playing .vp-big{opacity:0;transform:scale(.7);pointer-events:none}
.vp-big:focus-visible{outline:3px solid var(--amber)}

.vp-spinner{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:vpspin .8s linear infinite;
  z-index:1}
@keyframes vpspin{to{transform:rotate(360deg)}}

.vp-toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;
  padding:6px 13px;border-radius:20px;background:rgba(0,0,0,.78);color:#fff;
  font-family:var(--m);font-size:.74rem;opacity:0;transition:opacity .2s;
  pointer-events:none;z-index:3;line-height:1.4}
.vp-toast.on{opacity:1}

/* ---------- assessment, one question at a time ----------
   Everything here is added by assessment.js. Without the script the progress
   bar, the nav and the review screen stay hidden and the paper renders as one
   long form, which is still sittable. */
.q-progress{margin:0 0 18px}
.q-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.q-bar span{display:block;height:100%;width:0;background:var(--site);
  border-radius:4px;transition:width .25s}
.q-count{font-family:var(--m);font-size:.74rem;color:var(--muted);margin:8px 0 0;
  letter-spacing:.04em;text-transform:uppercase}
.q-count b{color:var(--ink)}

.q-nav{display:flex;align-items:center;gap:10px;margin-top:18px}
.q-nav-gap{flex:1}
.q-nav .btn:disabled{opacity:.4;cursor:not-allowed}

.q-review{border:1px solid var(--line);border-radius:12px;padding:20px;
  background:#fff;margin-top:4px}
.q-review h2:focus-visible{outline:2px solid var(--site);outline-offset:4px}
.q-grid{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.q-chip{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line-2);
  background:#fff;font-family:var(--m);font-size:.8rem;font-weight:600;
  cursor:pointer;color:var(--muted)}
.q-chip:hover{border-color:var(--site)}
.q-chip:focus-visible{outline:2px solid var(--site);outline-offset:2px}
/* Answered reads as done; unanswered is the one that needs attention, so it
   keeps the plain outline rather than being coloured as an error. */
.q-chip.on{background:var(--site);border-color:var(--site);color:#fff}
.q:focus-visible{outline:2px solid var(--site);outline-offset:6px}

/* Skipping the video is allowed but is not the ordinary path, so it does not
   get the primary button's weight. */
.btn-force{border-color:var(--amber);color:var(--amber-text,#8a5200)}
.btn-force:hover{background:rgba(255,158,27,.12)}

.vp-help{margin:12px 0 0}
.vp-help summary{cursor:pointer;font-size:.82rem;color:var(--muted)}
.vp-help b{font-family:var(--m);background:var(--line);padding:1px 5px;border-radius:4px;
  font-size:.74rem;color:var(--ink)}

@media (max-width:640px){
  .vp-pip,.vp-back,.vp-fwd{display:none}
  .vp-time{font-size:.68rem}
  .vp-vol:hover .vp-volrange{width:56px}
}
@media (prefers-reduced-motion:reduce){
  .vp-knob,.vp-big,.vp-controls,.vp-toast{transition:none}
  .vp-spinner{animation-duration:2s}
}

/* ---------- assessment paper, refreshed ----------
   Scoped to #paper so the result page and the mock tests keep their own look.
   `.btn` sets display, which beats the hidden attribute — the reason Submit
   used to show on question 1. */
#paper [hidden]{display:none!important}

#paper .q-top{position:sticky;top:71px;z-index:5;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:14px 18px;margin-bottom:18px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 22px}
@media (max-width:900px){#paper .q-top{top:65px}}
#paper .q-clock{position:static;display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:7px 12px;border:0;border-radius:99px;background:var(--paper-2);
  font-family:var(--d);font-weight:700;color:var(--ink);transition:background .2s,color .2s}
#paper .q-clock-l{font-size:.78rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
#paper .q-clock-t{font-family:var(--m);font-size:1.02rem;font-variant-numeric:tabular-nums}
#paper .q-clock.warn{background:rgba(255,158,27,.16);color:#8a5200}
#paper .q-clock.low{background:rgba(200,16,46,.1);color:var(--stop)}
#paper .q-clock.warn .q-clock-l,#paper .q-clock.low .q-clock-l{color:inherit}
#paper .q-clock.low svg{animation:q-pulse 1s ease-in-out infinite}
@keyframes q-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#paper .q-clock.low svg{animation:none}}

#paper .q-progress{flex:1;min-width:220px;margin:0}
#paper .q-count{margin:0 0 7px;font-size:.72rem}
#paper .q-count-sep{margin:0 4px;color:var(--line-2)}
#paper .q-bar{height:8px;border-radius:99px;background:var(--paper-2)}
#paper .q-bar span{border-radius:99px;
  background:linear-gradient(90deg,var(--site),var(--site-lift))}

/* The question card. Legend floated so it sits inside the card rather than
   cutting through its border. */
#paper .q{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:26px 28px 20px;margin:0 0 4px;min-width:0}
#paper .q>legend{float:left;width:100%;padding:0;margin:0 0 20px;
  font-size:1.18rem;line-height:1.4;letter-spacing:-.01em}
#paper .q>legend+*{clear:both}
#paper .q:focus,#paper .q:focus-visible{outline:none}
#paper .q-img{clear:both;max-width:220px;margin:0 0 18px}

#paper .q{counter-reset:opt}
#paper .q-opt{counter-increment:opt;position:relative;align-items:center;gap:14px;
  padding:14px 16px;margin:0 0 10px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font-size:.98rem;line-height:1.45;
  transition:border-color .15s,background .15s,box-shadow .15s}
#paper .q-opt:hover{border-color:var(--line-2);background:var(--paper)}
#paper .q-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#paper .q-key{flex:none;width:32px;height:32px;border-radius:8px;display:grid;
  place-items:center;background:var(--paper-2);font-family:var(--m);font-weight:600;
  font-size:.82rem;color:var(--muted);transition:background .15s,color .15s}
#paper .q-key::before{content:counter(opt,upper-alpha)}
#paper .q-opt:has(input:checked){border-color:var(--site);
  background:rgba(27,77,177,.05);box-shadow:0 0 0 3px rgba(27,77,177,.12)}
#paper .q-opt:has(input:checked) .q-key{background:var(--site);color:#fff}
#paper .q-opt:has(input:focus-visible){outline:2px solid var(--site);outline-offset:2px}

#paper .q-nav{margin-top:18px}
#paper .q-nav .btn{min-width:140px}
#paper .q-nav .btn{white-space:nowrap}
#paper .q-nav .btn-ghost:disabled{display:none}

#paper .q-review{border-radius:var(--r-lg);box-shadow:var(--sh);padding:26px 28px}
#paper #qsubmit{display:flex;width:100%;margin-top:16px}

@media (max-width:600px){
  #paper .q,#paper .q-review{padding:20px 18px 14px}
  #paper .q>legend{font-size:1.06rem}
  #paper .q-nav .btn{min-width:0;flex:1}
  #paper .q-nav-gap{display:none}
}

/* ---------- slide deck viewer ----------
   Without slide-viewer.js the slides stack in a column. With it (.deck.js)
   one shows at a time on a dark stage, with a PowerPoint-style bar below. */
.deck{max-width:900px;margin:0 auto;border-radius:14px;outline:none;
  background:var(--steel);box-shadow:var(--sh-lg);overflow:hidden;position:relative}
.deck:focus-visible{box-shadow:0 0 0 3px var(--amber),var(--sh-lg)}
.deck [hidden]{display:none!important}
.deck-slides{list-style:none;margin:0;padding:0}
.deck-slide img{display:block;width:100%;height:auto}
.deck:not(.js) .deck-stage{aspect-ratio:auto!important}
.deck:not(.js) .deck-slide+.deck-slide{border-top:4px solid var(--steel)}

.deck.js .deck-stage{position:relative;background:#0B1220;cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:pan-y}
.deck.js .deck-slides,.deck.js .deck-slide{position:absolute;inset:0}
.deck.js .deck-slide{display:none}
.deck.js .deck-slide.on{display:block}
.deck.js .deck-slide img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.deck-slide.from-fwd{animation:deck-in-r .28s ease-out}
.deck-slide.from-back{animation:deck-in-l .28s ease-out}
@keyframes deck-in-r{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes deck-in-l{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.deck-slide.from-fwd,.deck-slide.from-back{animation:none}}

/* Big side arrows, visible on hover or keyboard focus, always on touch. */
.deck-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;border:0;background:rgba(11,18,32,.62);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;transition:opacity .2s,background .2s;z-index:2}
.deck-prev{left:14px}.deck-next{right:14px}
.deck-stage:hover .deck-arrow,.deck-arrow:focus-visible{opacity:1}
.deck-arrow:hover{background:var(--site)}
.deck-arrow:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.deck-arrow:disabled{opacity:0!important;pointer-events:none}
@media (hover:none){.deck-arrow{opacity:.85;width:40px;height:40px}}

.deck-toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,8px);margin:0;
  padding:8px 14px;border-radius:99px;background:rgba(11,18,32,.86);color:#fff;
  font-size:.84rem;line-height:1.3;white-space:nowrap;max-width:calc(100% - 32px);
  overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:3}
.deck-toast.on{opacity:1;transform:translate(-50%,0)}

.deck-progress{height:4px;background:rgba(255,255,255,.12)}
.deck-progress span{display:block;height:100%;width:0;background:var(--amber);transition:width .25s}

.deck-bar{display:flex;align-items:center;gap:4px;padding:8px 10px;color:#fff;background:var(--steel)}
.deck-gap{flex:1}
.deck-count{display:flex;align-items:center;gap:7px;margin:0 8px;font-family:var(--m);
  font-size:.8rem;color:#C9D6E8;white-space:nowrap}
.deck-jump{width:3.6em;padding:5px 4px;border:1px solid rgba(255,255,255,.22);border-radius:7px;
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:600;text-align:center;
  -moz-appearance:textfield}
.deck-jump::-webkit-inner-spin-button,.deck-jump::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.deck-jump:focus{outline:2px solid var(--amber);outline-offset:1px}

.deck-btn{width:38px;height:38px;border:0;border-radius:8px;background:none;color:#fff;
  cursor:pointer;display:grid;place-items:center;flex:none}
.deck-btn:hover{background:rgba(255,255,255,.14)}
.deck-btn:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.deck-btn:disabled{opacity:.3;cursor:default;background:none}
.deck-btn.on{background:rgba(255,255,255,.18)}

/* Icons are masks over currentColor, so they follow hover and disabled. */
.deck-btn::before,.deck-arrow::before{content:'';width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.deck-back,.deck-prev{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.deck-fwd,.deck-next{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.deck-first{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 5l-7 7 7 7M6 5v14'/%3E%3C/svg%3E")}
.deck-last{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5l7 7-7 7M18 5v14'/%3E%3C/svg%3E")}
.deck-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.deck-dl{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E")}
.deck-full{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E")}
.deck.is-full .deck-full{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E")}

/* Every slide at a glance. */
.deck-thumbs{list-style:none;margin:0;padding:12px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-height:300px;overflow-y:auto;
  background:#0E1A2E;border-top:1px solid rgba(255,255,255,.08)}
.deck-thumbs button{position:relative;display:block;width:100%;padding:0;border:2px solid transparent;
  border-radius:7px;overflow:hidden;background:#000;cursor:pointer;line-height:0}
.deck-thumbs img{width:100%;height:auto;opacity:.8;transition:opacity .15s}
.deck-thumbs button:hover img,.deck-thumbs button[aria-current] img{opacity:1}
.deck-thumbs button[aria-current]{border-color:var(--amber)}
.deck-thumbs button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.deck-thumbs span{position:absolute;left:5px;bottom:5px;padding:2px 6px;border-radius:5px;
  background:rgba(11,18,32,.82);color:#fff;font-family:var(--m);font-size:.68rem;line-height:1.4}

/* Full screen: the stage takes whatever the bar leaves. */
.deck.is-full{position:fixed;inset:0;z-index:100;max-width:none;border-radius:0;
  display:flex;flex-direction:column;background:#000}
.deck.is-full .deck-stage{flex:1;aspect-ratio:auto!important;min-height:0}
.deck.is-full .deck-thumbs{max-height:40vh}

@media (max-width:600px){
  .deck{border-radius:10px;margin:0 -4px}
  .deck-bar{padding:6px;gap:0}
  .deck-first,.deck-last{display:none}
  .deck-btn{width:34px}
  .deck-count{margin:0 2px;gap:5px;font-size:.74rem}
}

/* Reaching the last slide nudges towards the completion button. */
.deck.at-end ~ form #done:not(:disabled){animation:deck-nudge 1.4s ease-in-out 2}
@keyframes deck-nudge{50%{box-shadow:0 0 0 6px rgba(255,158,27,.45)}}

/* Lesson handouts -------------------------------------------------------
   Files that go with a lesson and are meant to be kept, unlike the deck
   above them, which is view-only. Built from the existing card tokens so
   it sits with the rest of the portal rather than beside it. */
.attachments{margin:30px 0 0}
.attachments h2{margin:0 0 12px}

.attach{border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:14px 16px;margin:0 0 12px;display:grid;
  grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.attach h3{margin:0;font-size:1rem}
.attach .meta{margin:3px 0 0}

/* The file type, so nobody opens something blind. */
.attach-kind{font-family:var(--m);font-size:.68rem;font-weight:700;
  letter-spacing:.04em;color:#fff;background:var(--steel);
  padding:8px 9px;border-radius:8px;min-width:46px;text-align:center}

.attach-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Read-in-place. Spans all three columns so it sits under the row. */
.attach-view{grid-column:1/-1;margin:4px 0 0}
.attach-view summary{cursor:pointer;font-size:.82rem;color:var(--muted);
  padding:6px 0}
.attach-view summary:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px;border-radius:4px}
.attach-view iframe{width:100%;height:min(78vh,760px);border:1px solid var(--line);
  border-radius:10px;margin:8px 0 2px;background:var(--line)}

@media (max-width:640px){
  .attach{grid-template-columns:auto 1fr;gap:10px}
  .attach-actions{grid-column:1/-1;justify-content:flex-start}
  .attach-view iframe{height:62vh}
}

/* The two certificate routes on the result page. Weighted apart on purpose:
   saving the file is the action somebody came for, viewing it commits to
   nothing. Both sit inside .notice-pass, so they inherit its green. */
.cert-actions{margin:8px 0 0;display:flex;gap:18px;align-items:baseline;
  flex-wrap:wrap}
.cert-get{font-weight:700;letter-spacing:.01em;text-decoration:none}
.cert-get:hover,.cert-get:focus-visible{text-decoration:underline}
.cert-see{font-weight:400;text-decoration:underline}

/* "Checked against the Google listing on ..." — quieter than the claim it
   qualifies, and on its own line so the headline figure stays the headline. */
.rev-checked{display:block;margin-top:4px;font-size:.78rem;color:var(--muted)}

/* ---------- Google rating badge (course pages) ----------
   The pill under the course title, on the dark hero; .grate-sm is the
   compact copy at the top of the booking card. */
.grate{display:inline-flex;align-items:center;gap:10px;margin:18px 0 4px;padding:9px 16px 9px 11px;
  border-radius:99px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  color:#fff;text-decoration:none;font-size:.92rem;line-height:1;backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,176,32,.12),0 10px 30px -12px rgba(255,158,27,.55);
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.grate:hover{background:rgba(255,255,255,.14);border-color:rgba(255,190,70,.55);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,176,32,.3),0 14px 34px -12px rgba(255,158,27,.7)}
.grate:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.grate-g{width:22px;height:22px;flex:none;background:#fff;border-radius:50%;padding:3px;box-sizing:content-box}
.grate-stars{position:relative;display:inline-block;line-height:0;flex:none}
.grate-row{display:inline-flex;gap:2px}
.grate-row svg{width:20px;height:20px;fill:rgba(255,255,255,.22)}
.grate-on{position:absolute;inset:0 auto 0 0;width:var(--fill,100%);overflow:hidden;white-space:nowrap}
.grate-on svg{fill:#FFB020;filter:drop-shadow(0 0 5px rgba(255,176,32,.55));flex:none}
.grate-score{font-family:var(--d);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.grate-n{color:#C9D6E8}
.grate-n b{color:#fff;font-weight:700}
.grate-go{color:#FFB020;font-weight:700;transition:transform .2s}
.grate:hover .grate-go{transform:translateX(3px)}

.grate-sm{margin:0 0 14px;padding:6px 12px 6px 7px;gap:7px;font-size:.8rem;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);box-shadow:none;backdrop-filter:none}
.grate-sm:hover{background:#fff;border-color:var(--amber);box-shadow:0 6px 18px -10px rgba(255,158,27,.6)}
.grate-sm .grate-g{width:15px;height:15px;padding:2px}
.grate-sm .grate-row svg{width:15px;height:15px;fill:var(--line)}
.grate-sm .grate-on svg{fill:#F5A300;filter:none}
.grate-sm .grate-score{font-size:.95rem}
.grate-sm .grate-n{color:var(--muted)}

@media (max-width:600px){
  .grate{gap:8px;padding:8px 13px 8px 9px;font-size:.84rem}
  .grate-row svg{width:17px;height:17px}
  .grate-go{display:none}
}
@media (prefers-reduced-motion:reduce){.grate,.grate-go{transition:none}.grate:hover{transform:none}}

/* ---------- rating card (course hero) ----------
   Score first (the eye lands on the biggest thing), verdict and stars beside
   it, the source and a way to check it underneath; real quotes on the right. */
.rcard{display:inline-grid;grid-template-columns:auto;align-items:stretch;margin:20px 0 6px;
  max-width:100%;border-radius:18px;position:relative;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.rcard.has-quotes{grid-template-columns:auto minmax(0,340px)}
/* The gold edge: rating colour, and the brand's warning amber. */
.rcard::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;
  background:linear-gradient(#FFD166,#FF9E1B);box-shadow:0 0 14px rgba(255,176,32,.7)}

.rcard-score{display:flex;align-items:center;gap:16px;padding:16px 22px 16px 24px;color:#fff;
  text-decoration:none;border-radius:18px 0 0 18px;transition:background .2s}
.rcard-score:hover{background:rgba(255,255,255,.05)}
.rcard-score:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.rcard-num{font-family:var(--d);font-weight:800;font-size:3.1rem;line-height:.9;letter-spacing:-.05em;
  background:linear-gradient(180deg,#fff 30%,#FFD98A);-webkit-background-clip:text;background-clip:text;color:transparent}
.rcard-meta{display:flex;flex-direction:column;gap:9px}
.rcard-top{display:flex;align-items:center;gap:10px}
.rcard-verdict{font-family:var(--d);font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.rcard-stars .grate-row svg{width:22px;height:22px}
.rcard-stars .grate-on{animation:rcard-fill 1.1s .25s cubic-bezier(.3,.7,.3,1) both}
@keyframes rcard-fill{from{width:0}}
.rcard-src{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#C9D6E8;white-space:nowrap}
.rcard-src b{color:#fff}
.rcard-src .grate-g{width:15px;height:15px;padding:2px}
.rcard-cta{margin-left:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2);
  color:#FFB020;font-weight:700}
.rcard-cta i{font-style:normal;display:inline-block;transition:transform .2s}
.rcard-score:hover .rcard-cta i{transform:translateX(3px)}

.rcard-quotes{margin:0;padding:16px 22px 14px;border-left:1px solid rgba(255,255,255,.12);
  display:grid;align-content:center;min-height:100%}
.rcard-q{grid-area:1/1;margin:0;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;
  pointer-events:none}
.rcard-q.on{opacity:1;transform:none;pointer-events:auto}
.rcard-q p{margin:0 0 9px;color:#fff;font-size:.93rem;line-height:1.45;font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard-q footer{display:flex;align-items:center;gap:8px;font-size:.76rem;color:#93A6C0}
.rcard-q footer b{color:#C9D6E8;font-weight:600}
.rcard-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#2A63D8,#1B4DB1);color:#fff;font-size:.62rem;font-weight:700;
  box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.rcard-dots{grid-area:2/1;display:flex;gap:5px;margin-top:10px}
.rcard-dots span{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);transition:width .3s,background .3s}
.rcard-dots span.on{width:16px;background:#FFB020}

@media (max-width:860px){
  .rcard.has-quotes{grid-template-columns:1fr}
  .rcard-score{border-radius:18px 18px 0 0}
  .rcard-quotes{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:13px 20px 12px 24px}
}
@media (max-width:480px){
  .rcard{display:grid;width:100%}
  .rcard-score{gap:13px;padding:14px 16px 14px 20px}
  .rcard-num{font-size:2.6rem}
  .rcard-stars .grate-row svg{width:18px;height:18px}
  .rcard-src{flex-wrap:wrap;row-gap:4px;white-space:normal}
  .rcard-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rcard-stars .grate-on{animation:none}
  .rcard-q,.rcard-dots span,.rcard-cta i{transition:none}
}

/* Reviews, side by side ---------------------------------------------------
   A native scroll container, not a JS carousel: it scrolls by touch and
   trackpad before any script runs, Tab brings each card into view, and there
   is no drag handler to swallow a click on a card that is a link.
   reviews.js only adds the arrows. */
.revs{position:relative}

.revs-track{display:flex;gap:18px;margin:0;padding:4px 2px 10px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:2px;
  /* The scrollbar is replaced by the arrows and the cut-off card at the
     edge, both of which say "there is more" without a 15px grey bar. */
  scrollbar-width:none;-ms-overflow-style:none}
.revs-track::-webkit-scrollbar{display:none}
.revs-track:focus-visible{outline:2px solid var(--site);outline-offset:3px;
  border-radius:12px}

/* Three across on a desktop, two on a tablet, one and a peek on a phone —
   the peek is what tells a thumb the row moves. */
.revs-item{flex:0 0 clamp(270px,31.5%,380px);scroll-snap-align:start;display:flex}
.revs-item > .review{width:100%;display:flex;flex-direction:column}
/* Push the verified line to the bottom so cards of different lengths still
   line up along it. */
.revs-item .verified{margin-top:auto;padding-top:12px}

.revs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;box-shadow:var(--e2,0 2px 10px rgba(16,24,40,.10));
  cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:opacity .18s,transform .18s,box-shadow .18s}
.revs-prev{left:-10px}
.revs-next{right:-10px}
.revs-arrow:hover{box-shadow:var(--e3,0 8px 24px rgba(16,24,40,.16))}
.revs-arrow:focus-visible{outline:2px solid var(--site);outline-offset:2px}
.revs-arrow:disabled{opacity:0;pointer-events:none}
.revs-arrow::before{content:'';width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.revs-prev{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.revs-next{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}

/* The lift on .review moves the card up out of its own scroll box, which
   clips it. Inside the scroller it shows as a shadow instead. */
.revs-item .review:hover{transform:none;box-shadow:var(--e3,0 8px 24px rgba(16,24,40,.16))}

@media (max-width:900px){
  .revs-item{flex-basis:clamp(260px,46%,340px)}
  /* On a touch screen the arrows sit over the cards and are worth less than
     the space they cost — swiping is the obvious gesture. */
  .revs-arrow{display:none}
}
@media (max-width:560px){
  .revs-item{flex-basis:82%}
}
@media (prefers-reduced-motion:reduce){
  .revs-track{scroll-behavior:auto}
}

/* ---------- course-specific content (course_content/<slug>.html) ----------
   Section kit for a course's own body copy. Nothing here restyles the shared
   _course_content.html used by the other courses. */
.cx-sec{margin-top:40px}
.cx-sec>.h3{margin-bottom:14px}

.cx-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:34px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cx-facts>div{background:#fff;padding:16px 16px 15px}
.cx-facts dt{font-family:var(--m);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cx-facts dd{margin:0;font-family:var(--d);font-weight:800;font-size:1.08rem;letter-spacing:-.02em;line-height:1.2}
.cx-facts small{display:block;font-family:var(--b,inherit);font-weight:400;font-size:.76rem;
  letter-spacing:0;color:var(--muted);margin-top:3px}
@media (max-width:900px){.cx-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.cx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-facts>div:last-child{grid-column:1/-1}}

.cx-law{display:flex;gap:14px;align-items:flex-start;margin-top:6px;padding:16px 18px;
  border-radius:12px;background:rgba(27,77,177,.06);border:1px solid rgba(27,77,177,.18);
  font-size:.92rem;line-height:1.55}
.cx-law svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--site);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.cx-law b{color:var(--ink)}

.cx-aud{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cx-aud li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  border-top:3px solid var(--card-red,#C8102E)}
.cx-aud b{display:block;font-family:var(--d);font-size:.98rem;margin-bottom:4px}
.cx-aud span{font-size:.86rem;color:var(--muted);line-height:1.45}
@media (max-width:760px){.cx-aud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.cx-aud{grid-template-columns:1fr}}

.cx-cert{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center}
.cx-cert-card{position:relative;aspect-ratio:1/1.08;border-radius:12px;padding:20px 18px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center;
  background:linear-gradient(160deg,#fff,#F4F2EC);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.cx-cert-card::before{content:'';position:absolute;inset:9px;border:1.5px solid rgba(200,16,46,.35);border-radius:7px}
.cx-cert-k{font-family:var(--m);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#C00000}
.cx-cert-card b{font-family:var(--d);font-size:1.06rem;line-height:1.25;color:#00A0DC}
.cx-cert-card span{font-size:.8rem;color:var(--muted)}
.cx-cert-v{align-self:center;margin-top:6px;padding:4px 11px;border-radius:99px;
  background:var(--pass);color:#fff!important;font-weight:700;font-size:.74rem!important}
@media (max-width:640px){.cx-cert{grid-template-columns:1fr}.cx-cert-card{max-width:220px;margin:0 auto}}

.cx-ticks{list-style:none;padding:0!important;margin:12px 0 0}
.cx-ticks li{position:relative;padding:0 0 9px 28px;line-height:1.5}
.cx-ticks li::before{content:'';position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--pass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.cx-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
@media (max-width:560px){.cx-cols{grid-template-columns:1fr}}

.cx-onsite{margin-top:40px;padding:26px 28px;border-radius:var(--r-lg);color:#fff;
  background:linear-gradient(135deg,var(--steel),var(--steel-2));display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.cx-onsite::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(135deg,var(--amber) 0 12px,var(--steel) 12px 24px)}
.cx-onsite .h3{color:#fff;margin:4px 0 8px}
.cx-onsite p{color:#C9D6E8;margin:0}
.cx-onsite .cx-ticks li{color:#E4ECF7}
.cx-kicker{font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber)}
.cx-onsite-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.cx-phone{color:#C9D6E8;font-size:.86rem}
.cx-phone:hover{color:#fff}
@media (max-width:720px){.cx-onsite{grid-template-columns:1fr;padding:22px 20px 26px}
  .cx-onsite-cta{align-items:stretch}.cx-onsite-cta .btn{width:100%}}

/* Verbatim-content layout pieces (Fire Marshal). */
.cx-body{margin-top:34px}
.cx-body>.cx-sec:first-child{margin-top:0}
.cx-lead{font-family:var(--d);font-weight:700;font-size:1.22rem;line-height:1.45;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 16px;padding-left:16px;border-left:4px solid var(--card-red,#C8102E)}
.cx-callout{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.cx-callout svg{width:34px;height:34px;flex:none;fill:none;stroke:var(--site);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;padding:7px;border-radius:10px;background:rgba(27,77,177,.08);box-sizing:content-box}
.cx-callout p{margin:0 0 10px;line-height:1.6}
.cx-callout p:last-child{margin:0;color:var(--muted)}
.cx-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cx-fact{display:flex;gap:14px;align-items:center;padding:18px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line)}
.cx-fact-i{width:54px;height:54px;flex:none;border-radius:14px;display:grid;place-items:center;
  font-family:var(--d);font-weight:800;font-size:1.25rem;color:#fff;
  background:linear-gradient(135deg,#E0314B,var(--card-red,#C8102E))}
.cx-fact-h{font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.cx-fact p{margin:0;font-weight:600;line-height:1.45}
@media (max-width:620px){.cx-duo{grid-template-columns:1fr}}
.cx-kicker-dark{color:var(--muted);margin:0 0 10px;display:block}
.cx-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;counter-reset:none}
.cx-topics li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:11px;background:#fff;
  border:1px solid var(--line);font-size:.93rem;line-height:1.4}
.cx-topic-n{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--m);font-size:.74rem;font-weight:600;color:var(--site);background:rgba(27,77,177,.08)}
@media (max-width:620px){.cx-topics{grid-template-columns:1fr}}
.cx-onsite p+p{margin-top:10px}

/* Traffic Marshal page: hi-vis yellow / hazard theme on the shared cx- kit. */
.cx-tm .cx-lead{border-left-color:#F5B800}
.tm-role{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.tm-fig{margin:0;padding:10px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh);position:relative;overflow:hidden}
.tm-fig::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(135deg,#F5B800 0 10px,#111 10px 20px)}
.tm-fig img{display:block;width:100%;height:auto}
@media (max-width:560px){.tm-role{grid-template-columns:1fr;gap:14px}.tm-fig{width:120px}}

.tm-warn{display:flex;gap:18px;align-items:flex-start;padding:20px 22px 24px;border-radius:var(--r-lg);
  background:#FFF8E1;border:1px solid #F2D27A;position:relative;overflow:hidden}
.tm-warn::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(135deg,#F5B800 0 12px,#1a1a1a 12px 24px)}
.tm-warn-i{flex:none;width:58px;height:58px;display:grid;place-items:center;
  font-family:var(--d);font-weight:800;font-size:1.7rem;color:#1a1a1a;background:#F5B800;
  clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:14px;box-sizing:border-box}
.tm-warn p{margin:0 0 10px;line-height:1.6;color:#3d3300}
.tm-warn p:last-child{margin:0}
.tm-warn b{color:#1a1a1a}
.tm-reg svg{stroke:var(--pass);background:rgba(18,128,92,.1)}
.tm-i{background:linear-gradient(135deg,#FFC933,#E0A100)!important;color:#1a1a1a!important}
.tm-topics .cx-topic-n{color:#6B5000;background:#FFF1C2}
.tm-cert{border-color:#F2D27A}
.tm-cert::before{border-color:rgba(224,161,0,.5)!important}
.tm-cert b{color:#00A0DC}

.tm-contact{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:22px 24px;
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.tm-contact p{margin:0 0 8px;line-height:1.55}
.tm-contact-h{font-weight:600}
.tm-contact-s{color:var(--muted);font-size:.9rem;margin:0!important}
.tm-contact a{color:var(--site);font-weight:600}
.tm-contact-btns{display:flex;flex-direction:column;gap:8px}
.tm-cbtn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  border:1.5px solid var(--line);color:var(--ink)!important;text-decoration:none;font-size:.88rem;
  white-space:nowrap;transition:border-color .15s,background .15s}
.tm-cbtn:hover{border-color:var(--site);background:rgba(27,77,177,.04)}
.tm-cbtn svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--site);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){.tm-contact{grid-template-columns:1fr}.tm-cbtn{white-space:normal}}

/* SSSTS page: CITB navy / gold theme on the shared cx- kit. */
.cx-ss .cx-lead{border-left-color:#B07E00;font-size:1.12rem}
.ss-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media (max-width:760px){.ss-two{grid-template-columns:1fr}}
.ss-panel{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px}
.ss-panel .h3{margin:0 0 10px}
.ss-panel p{margin:0;line-height:1.65;color:#2b3440}
.ss-panel-accent{background:linear-gradient(160deg,#0F2344,#1D3355);border-color:transparent;color:#fff}
.ss-panel-accent .h3{color:#fff;padding-right:64px}
.ss-panel-accent p{color:#C9D6E8}
.ss-badge{position:absolute;top:18px;right:18px;font-family:var(--m);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  padding:5px 9px;border-radius:6px;background:#8A6400;color:#fff} /* darkened from #B07E00 to pass 4.5:1 */
.ss-intro{margin:0 0 12px;font-weight:600}
.ss-after{margin:14px 0 0}

.ss-roles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ss-roles li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:99px;
  background:#fff;border:1.5px solid var(--line);font-weight:600;font-size:.93rem}
.ss-roles svg{width:20px;height:20px;fill:none;stroke:#B07E00;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-topics .cx-topic-n{color:#7A5800;background:#FBF1D6}

.ss-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ss-facts li{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.ss-facts p{margin:0;line-height:1.5;font-size:.93rem}
.ss-facts b{display:block;font-family:var(--m);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-weight:600}
.ss-fi{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#0F2344}
.ss-fi svg{width:22px;height:22px;fill:none;stroke:#F5C04A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.ss-facts{grid-template-columns:1fr}}

/* auto-fit, not a fixed three: the SSSTS list is two items since the safety
   critical card was removed, and a hard 3-column grid left a hole where the
   third used to be. */
.ss-exam{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.ss-exam li{position:relative;padding:44px 16px 16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  line-height:1.5;font-size:.93rem;font-weight:600}
.ss-exam-n{position:absolute;top:14px;left:16px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;background:rgba(27,77,177,.1);color:var(--site)}
.ss-exam-crit{border-color:#E8B4BC!important;background:#FFF5F6!important}
.ss-exam-crit .ss-exam-n{background:var(--stop);color:#fff}
.ss-exam-note{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--paper-2);line-height:1.6}
.ss-exam-note b{color:var(--ink)}
@media (max-width:760px){.ss-exam{grid-template-columns:1fr}}

.ss-cert b{color:#0F2344!important}
.ss-cert .cx-cert-k{color:#B07E00}
.ss-cert::before{border-color:rgba(176,126,0,.45)!important}
.ss-dl{margin:0;display:grid;gap:8px}
.ss-dl div{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ss-dl dt{font-weight:700}
.ss-dl dd{margin:0}
@media (max-width:520px){.ss-dl div{grid-template-columns:1fr;gap:2px}}
.ss-refresh{margin:14px 0 0;line-height:1.6}
.ss-refresh a{color:var(--site);font-weight:700}

.ss-req{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ss-req li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.94rem}
.ss-req span{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#FBF1D6;color:#7A5800;font-family:var(--d);font-weight:800;font-size:.85rem}
.ss-req svg{width:20px;height:20px;fill:none;stroke:#7A5800;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ss-why{margin-top:40px;padding:24px 26px;border-radius:var(--r-lg);background:linear-gradient(135deg,#0F2344,#1D3355);color:#fff}
.ss-why .h3{color:#fff;margin:0 0 14px}
.ss-why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ss-why li{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);font-weight:600;font-size:.9rem;line-height:1.4}
.ss-why svg{width:26px;height:26px;fill:none;stroke:#F5C04A;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.ss-enrol{margin-top:40px;display:grid;grid-template-columns:1fr 230px;gap:24px;align-items:center;padding:26px 28px;
  border-radius:var(--r-lg);background:#FFF9EC;border:1px solid #F0DDA6;position:relative;overflow:hidden}
.ss-enrol::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:#B07E00}
.ss-enrol .h3{margin:0 0 8px}
.ss-enrol p{margin:0 0 10px;line-height:1.6}
.ss-enrol-h{font-family:var(--d);font-size:1rem;margin:16px 0 6px}
.ss-enrol a{color:var(--site);font-weight:700}
.ss-contact{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:4px;font-weight:700}
.ss-join{font-weight:600;margin:0!important}
.ss-enrol-btns{display:flex;flex-direction:column;gap:9px}
.ss-enrol-btns .btn{width:100%;color:var(--ink)!important}
.ss-wa,.ss-mail{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:10px;
  font-weight:700;text-decoration:none;color:#fff!important}
.ss-wa{background:#15803D} /* WhatsApp green darkened to pass 4.5:1 with white text */
.ss-wa:hover{background:#116B33}
.ss-wa svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.ss-mail{background:#0F2344}
.ss-mail:hover{background:#1D3355}
@media (max-width:760px){.ss-enrol{grid-template-columns:1fr;padding:22px 20px 22px 26px}}

.ss-rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ss-rel a{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.ss-rel a:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.ss-rel img{display:block;width:100%;height:auto;aspect-ratio:600/314;object-fit:cover}
.ss-rel span{padding:12px 14px;font-weight:700;font-size:.9rem;line-height:1.35}
@media (max-width:760px){.ss-rel{grid-template-columns:1fr}}

/* SMSTS page: extends the SSSTS (ss-) kit. */
.sm-p2{margin-top:10px!important}
.sm-essential{padding:22px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.sm-essential-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.sm-essential-h .h3{margin:0 0 6px}
.sm-essential-h p{margin:0;line-height:1.6;font-weight:600}
.sm-essential-i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#FFF1D6}
.sm-essential-i svg{width:24px;height:24px;fill:none;stroke:#B07E00;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-ess-list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding-left:58px!important}
@media (max-width:640px){.sm-ess-list{grid-template-columns:1fr;padding-left:0!important}}
.sm-facts{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:520px){.sm-facts{grid-template-columns:1fr}}
.sm-exam{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm-exam .ss-exam-crit{border-color:#EBD58F!important;background:#FFFAEB!important}
.sm-exam .ss-exam-crit .ss-exam-n{background:#B07E00;color:#fff}
@media (max-width:900px){.sm-exam{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sm-exam{grid-template-columns:1fr}}
.sm-resit{display:flex;gap:10px;align-items:center;margin:12px 0 0;padding:12px 16px;border-radius:12px;
  background:rgba(18,128,92,.08);border:1px solid rgba(18,128,92,.25);font-weight:600;color:#0B5C42}
.sm-resit svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--pass);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-why-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm-why-list li{padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  font-size:.88rem;font-weight:600;color:#fff;line-height:1.35}
.sm-why-list .sm-hl{background:#B07E00;border-color:#B07E00}
.sm-cta-line{color:#F5C04A!important;font-weight:700}
@media (max-width:420px){.sm-why-list{grid-template-columns:1fr}}

/* Non-clickable nav item, for a category with no page yet (NVQs). Sits in
   the bar like the anchors around it, but muted, with no hover and a small
   "soon" cue so it reads as deliberate rather than broken. */
.mainnav > .nav-soon{padding:9px 11px;font-weight:600;font-size:.92rem;
  display:flex;align-items:center;gap:6px;color:var(--muted);
  cursor:default;white-space:nowrap}
.nav-soon > i{font-family:var(--m);font-style:normal;font-size:.6rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--paper-2);border-radius:4px;padding:2px 5px}
/* In the mobile drawer the items are block links; keep the same muted look. */
.drawer .nav-soon{display:flex;align-items:center;gap:8px;color:var(--muted);
  padding:11px 0;cursor:default}

/* "Coming soon" badge on a placeholder course card, and the dimmed card it
   sits on: enough to read as not-yet-available without hiding the preview. */
.tag-soon{background:var(--line-2);color:var(--ink)}
.cardwrap.is-soon .cert{opacity:.92}
.cardwrap.is-soon .cert-foot .btn-ghost[aria-disabled]{cursor:default;
  color:var(--muted);border-color:var(--line)}
.cardwrap.is-soon .cert-foot .btn-ghost[aria-disabled]:hover{background:none}

/* Dates in the buy box ----------------------------------------------------
   The sittings used to sit behind a "See dates" dialog. They are what the
   page is for, so they are listed here instead. Capped in height and
   scrollable: nine weekends must not push the price match and the group
   quote off the bottom of a sticky sidebar. */
.bk-dates-h{font-size:.7rem;font-family:var(--m);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 9px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bk-dates-h > span{font-size:.66rem;color:var(--muted);letter-spacing:.08em}

/* Six rows, then scroll. --bk-row is the height of one row, so the cap is
   six of them plus half of the seventh: the clipped row is the scroll cue,
   and it is absent by construction when there is nothing more to show. */
.bk-dates{--bk-row:4.45rem;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  overflow-y:auto;max-height:calc(var(--bk-row) * 6.5);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  box-shadow:inset 0 -1px 0 var(--line)}
.bk-dates:focus-visible{outline:2px solid var(--site);outline-offset:2px}
.bk-dates::-webkit-scrollbar{width:8px}
.bk-dates::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
  border:2px solid #fff}
.bk-dates::-webkit-scrollbar-track{background:transparent}

.bk-date{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 12px;border-bottom:1px solid var(--line);
  transition:background .14s}
.bk-date:last-child{border-bottom:0}
.bk-date:hover{background:var(--paper-2)}
.bk-date.is-full{opacity:.6}
.bk-date.is-full:hover{background:none}

/* auto, not 100%: the awarding mark shares this first line with the date.
   min-width:0 lets a long date wrap rather than push the mark off. */
.bk-when{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.bk-mark{flex:none;height:18px;width:auto;max-width:52px;object-fit:contain;
  align-self:center}
.bk-date.is-full .bk-mark{filter:grayscale(1)}
.bk-when b{font-family:var(--d);font-size:.95rem;line-height:1.3;
  letter-spacing:-.01em}
.bk-when .meta{font-size:.72rem}

.bk-buy{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%}
.bk-price{font-family:var(--d);font-weight:800;font-size:.95rem;
  white-space:nowrap;margin-right:auto}
/* The stepper is sized for a full-width dialog; in a ~320px sidebar it has to
   give way before the Book button does. */
.bk-buy .qty{transform:scale(.86);transform-origin:center;flex:none}
.bk-buy .btn{flex:none;white-space:nowrap}

@media (max-width:1040px){
  /* Not a sidebar any more — it is a full-width block, so a short calendar
     can show in full rather than hiding two thirds behind a scroll. The cap
     is raised rather than removed: a course that runs daily has ninety-odd
     sittings, and ten screens of dates between the price and everything
     under it is worse than scrolling. A list shorter than the cap still
     shows whole, so nothing changes for the courses that run fortnightly. */
  .bk-dates{max-height:calc(var(--bk-row) * 10)}
}

/* The secondary link under the Team training card's button. It needs air
   above it — butted against the button it read as part of it. */
.team-or{margin:14px 0 0;font-size:.8rem;color:var(--muted);text-align:center}
.team-or a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* "Pick your two days" ----------------------------------------------------
   The reason the page exists, so it is a panel rather than two more boxes in
   a column. Side by side on anything wider than a phone, because the pair is
   one decision. */
.daypick{border:1.5px solid var(--site);border-radius:12px;
  background:rgba(27,77,177,.04);padding:16px 16px 4px;margin:0 0 18px}
.daypick > legend{font-family:var(--d);font-weight:800;font-size:1.02rem;
  padding:0 8px;margin-left:-4px;color:var(--ink)}
.daypick-note{font-size:.84rem;color:var(--muted);margin:0 0 12px}
.daypick-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.daypick-grid .field{margin-bottom:12px}
/* A date input is a small control by default and reads as an afterthought
   next to the full-width text boxes above it. */
.daypick input[type="date"]{width:100%;font-family:var(--d);font-weight:700;
  font-size:1rem;padding:12px 13px}
.daypick input[type="date"]:focus{border-color:var(--site);
  box-shadow:0 0 0 3px rgba(27,77,177,.16);outline:none}

@media (max-width:520px){
  .daypick-grid{grid-template-columns:1fr}
}

/* Course card image -------------------------------------------------------
   Sits where the blurb used to.

   Contained, never cropped. These are promotional images with the awarding
   body's logo and wording baked into them, and they range from 1.00 to 1.91
   wide — so a fixed box that crops took the "CITB" clean off one side of the
   widest ones. Whatever is lost to a letterbox bar is worth less than the
   half of a logo a crop removes.

   The box keeps a constant ratio so a row of cards still lines up, and the
   image is never scaled ABOVE its natural size: several of these files are
   tiny (144px wide), and stretching one across a 360px card turns it to
   mush. A small image sits at its own size, centred. */
.cert-img{display:flex;align-items:center;justify-content:center;
  margin:0 0 12px;padding:6px;border-radius:9px;overflow:hidden;
  background:var(--paper-2);aspect-ratio:16/10}
.cert-img img{display:block;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain}
a.cert-img:focus-visible{outline:2px solid var(--site);outline-offset:2px}

/* The near-miss resit offer, and the CITB mark under the SSSTS exam section.
   Green rather than amber: it is a reassurance, not a warning. */
.ss-resit{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;
  padding:13px 16px;border-radius:12px;line-height:1.55;
  background:rgba(18,128,92,.07);border:1px solid rgba(18,128,92,.22)}
.ss-resit-ic{flex:none;width:24px;height:24px;border-radius:7px;display:grid;
  place-items:center;font-size:.95rem;background:var(--pass);color:#fff}
.ss-resit b{color:var(--ink)}

.ss-accred{display:flex;align-items:center;gap:12px;margin:14px 0 0;
  font-size:.86rem;color:var(--muted)}
.ss-accred img{display:block;height:34px;width:auto;flex:none}
.ss-accred b{color:var(--ink)}

/* The awarding body's mark against each bookable date. Sits before the date
   in the row, sized by height so a wide mark and a square one occupy the
   same vertical space and the dates below stay aligned. flex:none so it
   never shrinks when the row wraps on a narrow screen. */
.dates-mark{flex:none;height:26px;width:auto;max-width:74px;object-fit:contain;
  align-self:center}
.dates-row.is-full .dates-mark{filter:grayscale(1)}
@media (max-width:560px){
  .dates-mark{height:22px;max-width:62px}
}

/* CSCS Green Card (CITB Health and Safety Awareness): extends the ss- kit
   with the card's own green. Layout only; the copy is the live page's. */
.cx-cg .cx-lead{border-left-color:var(--card-green);font-size:1.06rem;font-weight:600;line-height:1.6}
.cg-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0}
.cg-toc a{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:.82rem;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.cg-toc a:hover{border-color:var(--card-green);color:#0E6B3A;background:#F0F8F3}
.cx-cg .cx-sec{scroll-margin-top:96px}
.cg-intro{margin:0 0 14px;line-height:1.6;color:#2b3440}
.cg-who{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cg-who li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);font-weight:600;font-size:.93rem;line-height:1.45}
.cg-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#E8F5EE}
.cg-ic svg{width:22px;height:22px;fill:none;stroke:#0E6B3A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cg-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cg-topics>li{display:flex;gap:14px;align-items:flex-start;padding:16px 16px 14px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.cg-topics>li:hover{border-color:#A9D8BD;box-shadow:var(--sh)}
.cg-topic-n{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--m);font-size:.78rem;font-weight:600;color:#fff;background:#137A44}
.cg-topics h3{font-family:var(--d);font-size:.98rem;line-height:1.3;margin:5px 0 8px;letter-spacing:-.01em}
.cg-topics ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.cg-topics ul li{position:relative;padding-left:16px;font-size:.88rem;line-height:1.45;color:#3a4350}
.cg-topics ul li::before{content:'';position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:#7CC49A}
.cg-outcomes{padding:22px 24px 12px;border-radius:var(--r-lg);background:#F3FAF6;border:1px solid #CFE8DA}
.cg-outcomes .h3{margin-bottom:8px}
.cg-ticks{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:4px}
.cg-cert{display:grid;grid-template-columns:320px 1fr;gap:26px;align-items:center}
.cg-path{display:flex;align-items:stretch;gap:8px}
.cg-path-cert,.cg-path-card{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px;
  min-height:158px;padding:14px 12px;border-radius:12px;text-align:center}
.cg-path-cert{position:relative;background:linear-gradient(160deg,#fff,#F7F4EA);border:1px solid var(--line);box-shadow:var(--sh)}
.cg-path-cert::before{content:'';position:absolute;inset:6px;border:1.5px solid rgba(176,126,0,.4);border-radius:8px;pointer-events:none}
.cg-path-k{font-family:var(--m);font-size:.62rem;letter-spacing:.16em;color:#7A5800}
.cg-path-cert b{font-family:var(--d);font-size:.84rem;line-height:1.25;color:#0F2344}
.cg-path-v{align-self:center;padding:3px 9px;border-radius:99px;background:var(--pass);color:#fff;font-size:.68rem;font-weight:700}
.cg-path-arrow{align-self:center}
.cg-path-arrow svg{width:22px;height:22px;fill:none;stroke:var(--card-green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cg-path-card{align-items:flex-start;text-align:left;color:#fff;
  background:linear-gradient(145deg,#1C8A4D,#0F6636);box-shadow:0 12px 26px -12px rgba(21,122,67,.7)}
.cg-path-chip{width:26px;height:20px;border-radius:5px;background:linear-gradient(135deg,#F7D774,#C9A13A);margin-bottom:auto}
.cg-path-card b{font-family:var(--d);font-size:.9rem;line-height:1.2}
.cg-path-card span:last-child{font-size:.74rem;opacity:.9}
.cg-cert-p{margin:0;line-height:1.7}
.cg-cert-p b{color:var(--ink)}
.cg-enrol::before{background:var(--card-green)}
.cg-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){
  .cg-who,.cg-topics{grid-template-columns:1fr}
  .cg-ticks{grid-template-columns:1fr}
  .cg-cert{grid-template-columns:1fr;gap:18px}
  .cg-path{max-width:320px}
  .cg-outcomes{padding:18px 18px 8px}
}
@media (max-width:520px){.cg-rel{grid-template-columns:1fr}
  .cg-toc{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:0 16px 4px;scrollbar-width:none}
  .cg-toc a{flex:none}}

/* GQA CSCS Green Card: the full-card route. Builds on the cg- (CITB green
   card) and ss- kits; gq- adds the course-to-card steps, the facts grid and
   the GQA-vs-CITB comparison. */
.gq-important{display:flex;gap:12px;align-items:center;margin:0 0 26px;padding:13px 16px;border-radius:12px;
  background:#FFF6E0;border:1px solid #F1D48A;line-height:1.5}
.gq-important-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#7A5800;color:#fff;font-family:var(--d);font-weight:800;font-size:.9rem}
.gq-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:none}
.gq-steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line)}
.gq-steps li:not(:last-child)::after{content:'';position:absolute;top:38px;right:-13px;width:14px;height:2px;background:#7CC49A}
.gq-steps li:last-child{background:linear-gradient(145deg,#1C8A4D,#0F6636);border-color:transparent;color:#fff}
.gq-steps b{font-family:var(--d);font-size:1rem;margin-top:4px}
.gq-steps span:last-child{font-size:.88rem;line-height:1.45;color:#3a4350}
.gq-steps li:last-child span:last-child{color:#E3F4EA}
.gq-step-n{position:absolute;top:14px;right:14px;font-family:var(--m);font-size:.72rem;font-weight:600;color:var(--muted)}
.gq-steps li:last-child .gq-step-n{color:#CDEBD9}
.gq-step-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#E8F5EE}
.gq-step-ic svg{width:23px;height:23px;fill:none;stroke:#0E6B3A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gq-steps li:last-child .gq-step-ic{background:rgba(255,255,255,.16)}
.gq-steps li:last-child .gq-step-ic svg{stroke:#fff}
.gq-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--line);border:1px solid var(--line)}
.gq-facts div{background:#fff;padding:14px 16px}
.gq-facts .gq-wide{grid-column:span 3}
.gq-facts dt{font-family:var(--m);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.gq-facts dd{margin:0;font-weight:600;line-height:1.45}
.gq-mono{font-family:var(--m);letter-spacing:.02em}
.gq-topics .cx-topic-n{color:#fff;background:#137A44}
.gq-p2{margin-top:10px!important}
.gq-note{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper-2);font-size:.92rem;line-height:1.6}
.gq-why ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.gq-why li{gap:6px}
.gq-why li b{font-family:var(--d);font-size:.98rem;color:#fff}
.gq-why li span{font-weight:400;color:#C9D6E8;line-height:1.55}
.gq-compare-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.gq-compare{width:100%;border-collapse:collapse;font-size:.92rem}
.gq-compare th,.gq-compare td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.gq-compare tbody tr:last-child th,.gq-compare tbody tr:last-child td{border-bottom:0}
.gq-compare thead th{font-family:var(--d);font-size:.95rem;background:var(--paper-2)}
.gq-compare thead th a{color:var(--site)}
.gq-compare thead em{display:block;font-style:normal;font-family:var(--m);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-top:2px}
.gq-compare thead .gq-col-this{background:#137A44;color:#fff}
.gq-compare tbody th{width:26%;font-weight:700;color:var(--ink)}
.gq-compare td.gq-col-this{background:#F3FAF6;font-weight:600}
@media (max-width:760px){
  .gq-steps{grid-template-columns:1fr}
  .gq-steps li:not(:last-child)::after{top:auto;bottom:-13px;right:auto;left:37px;width:2px;height:14px}
  .gq-facts{grid-template-columns:1fr 1fr}.gq-facts .gq-wide{grid-column:span 2}
  .gq-why ul{grid-template-columns:1fr}
  .gq-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .gq-compare,.gq-compare tbody,.gq-compare tr,.gq-compare th,.gq-compare td{display:block;width:100%!important}
  .gq-compare tr{border-bottom:1px solid var(--line)}
  .gq-compare tbody tr:last-child{border-bottom:0}
  .gq-compare tbody th{padding:12px 14px 4px;border:0;font-family:var(--d)}
  .gq-compare td{border:0;padding:6px 14px}
  .gq-compare td:last-child{padding-bottom:12px}
  .gq-compare td::before{content:attr(data-label);display:block;font-family:var(--m);font-size:.64rem;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .gq-compare td.gq-col-this{border-radius:10px;margin:0 0 4px}
}
@media (max-width:340px){.gq-facts{grid-template-columns:1fr}.gq-facts .gq-wide{grid-column:auto}}

/* The phone booking bar jumps here; clear the sticky header. */
#book{scroll-margin-top:84px}

/* Portfolio NVQs (Level 3 / Level 6 health and safety): course_detail_nvq.html,
   their content templates and the eligibility check. Gold for the NVQ
   category, on the shared cx-/ss-/cg-/gq- kits. #8A6400 is the gold that
   passes 4.5:1 as text or as a fill under white text. */
.nv-tag-l{background:rgba(255,255,255,.12);color:#fff}
.nv-glance{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;color:#D5E0EE;font-size:.9rem}
.nv-glance li{display:inline-flex;align-items:center;gap:8px}
.nv-glance span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(245,192,74,.16)}
.nv-glance svg{width:15px;height:15px;fill:none;stroke:#F5C04A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nv-box-k{margin:14px 0 2px;font-family:var(--m);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A6400}
.nv-box-h{font-family:var(--d);font-size:1.35rem;letter-spacing:-.02em;margin:0 0 6px}
.nv-box-p{margin:0;font-size:.92rem;line-height:1.55;color:#3a4350}
.nv-box-or{margin:0;text-align:center;font-size:.86rem;color:var(--muted)}
.nv-box-or a{color:var(--site);font-weight:700}
.nv-box-sub{margin:18px 0 8px;padding-top:16px;border-top:1px dashed var(--line);font-family:var(--m);font-size:.68rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nv-feat{margin:0;display:grid;gap:8px}
.nv-feat div{display:grid;gap:1px;padding:8px 10px;border-radius:9px;background:var(--paper-2)}
.nv-feat dt{font-size:.72rem;font-weight:700;color:#8A6400}
.nv-feat dd{margin:0;font-size:.86rem;line-height:1.4;font-weight:600;color:var(--ink)}
.nv-box-alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.nv-box-alt p{margin:0 0 8px;font-size:.85rem;color:var(--muted)}
.nv-mobk-t{font-size:1rem!important}
.price-note small{font-size:.78rem;color:#8A6400;font-weight:700}

.nv-body .cx-lead{border-left-color:#B07E00;font-size:1.06rem;font-weight:600;line-height:1.6}
.nv-body .cx-sec{scroll-margin-top:96px}
.nv-qual{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;padding:10px 14px;border-radius:12px;
  background:#fff;border:1px solid var(--line);font-size:.9rem;line-height:1.45}
.nv-qual-k{padding:4px 9px;border-radius:6px;background:#0F2344;color:#fff;font-family:var(--m);font-size:.7rem;font-weight:700;letter-spacing:.1em}
.nv-mono{font-family:var(--m);letter-spacing:.02em;color:var(--ink)}
.nv-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nv-points li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);font-size:.92rem;line-height:1.5}
.nv-points-wide{grid-column:1/-1;background:#FFF9EA!important;border-color:#EBD58F!important;font-weight:600}
.nv-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#F4F1E6}
.nv-ic svg{width:21px;height:21px;fill:none;stroke:#7A5800;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nv-ic-gold{background:#8A6400}
.nv-ic-gold svg{stroke:#fff}
.nv-roles li{font-size:.88rem}
.nv-entry{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh)}
.nv-entry .h3{margin:2px 0 8px}
.nv-entry p{margin:0;line-height:1.65}
.nv-entry-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#0F2344}
.nv-entry-ic svg{width:24px;height:24px;fill:none;stroke:#F5C04A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nv-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:10px}
.nv-steps::before{content:'';position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(#E8CF86,#8A6400)}
.nv-steps li{position:relative;display:flex;gap:14px;align-items:flex-start}
.nv-steps p{flex:1;margin:0;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);line-height:1.55;font-size:.93rem}
.nv-steps b{color:var(--ink)}
.nv-step-n{position:relative;z-index:1;flex:none;width:36px;height:36px;margin-top:6px;border-radius:50%;display:grid;place-items:center;
  background:#8A6400;color:#fff;font-family:var(--d);font-weight:800;box-shadow:0 0 0 4px var(--paper)}
.nv-steps-sm p{padding:10px 12px;font-size:.88rem}
.nv-chip{display:inline-block;margin-right:6px;padding:3px 9px;border-radius:99px;background:#8A6400;color:#fff;
  font-family:var(--m);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;vertical-align:1px}
.nv-chip-soft{background:#F4F1E6;color:#7A5800}
.nv-topics .cx-topic-n{color:#fff;background:#8A6400}
.nv-optional{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:var(--r-lg);
  border:1.5px dashed #D9C27A;background:#FFFCF3}
.nv-optional p{margin:0;line-height:1.6;font-size:.93rem}
.nv-why li{font-weight:500;font-size:.9rem}
.nv-enrol::before{background:#8A6400}
.nv-compare thead .gq-col-this{background:#8A6400}
.nv-compare td.gq-col-this{background:#FFF9EA}
.nv-elig{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;max-width:980px}
.nv-elig-side{position:sticky;top:96px;padding:20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.nv-elig-side .h3{margin:0 0 12px;font-size:1.05rem}
@media (max-width:760px){
  .nv-points{grid-template-columns:1fr}
  .nv-entry{flex-direction:column;gap:12px;padding:18px}
  .nv-elig{grid-template-columns:1fr}
  .nv-elig-side{position:static}
}
.nv-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.nv-roles li{border-radius:12px;align-items:flex-start;line-height:1.45}
.nv-roles svg{flex:none;margin-top:1px}
@media (max-width:760px){.nv-roles{grid-template-columns:1fr}}

/* ── Occupational Work Supervision NVQ ──────────────────────
   Who the course is for, said once and said first. Bigger than the lead
   paragraph under it and carrying the gold rule, because it is the line that
   decides whether somebody keeps reading — not a heading, so it does not
   compete with the real one beneath it for the document outline. */
.ws-strap{margin:0 0 14px;padding:12px 0 12px 16px;
  border-left:4px solid #C79A1E;
  font-family:var(--d);font-weight:700;font-size:1.06rem;line-height:1.45;
  letter-spacing:-.01em;color:var(--ink)}
@media (max-width:620px){.ws-strap{font-size:.98rem;padding-left:13px}}

/* Nine job titles rather than five, so three to a row above the fold on a
   desktop and the list stops being a wall. */
.ws-roles{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.ws-roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ws-roles{grid-template-columns:1fr}}

.ws-why-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.ws-why-list li{position:relative;padding:10px 14px 10px 36px;border-radius:11px;
  background:#FFFCF3;border:1px solid #EADFBE;font-size:.9rem;line-height:1.5}
.ws-why-list li::before{content:'\2713';position:absolute;left:13px;top:10px;
  font-weight:800;color:#8A6400}
@media (max-width:760px){.ws-why-list{grid-template-columns:1fr}}

/* The six mandatory units. <details>, so the whole unit list is readable with
   no JavaScript at all and a keyboard opens one without any help from us.
   Six units and forty-odd points between them is too much to lay out flat;
   the summary row carries the count so a closed unit still says how big it
   is. The first is open so the pattern is obvious without a click. */
.ws-units{display:grid;gap:10px;margin-top:16px}
.ws-unit{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  overflow:hidden;box-shadow:var(--sh)}
.ws-unit[open]{border-color:#D9C27A;box-shadow:0 0 0 3px rgba(138,100,0,.08)}
.ws-unit summary{display:flex;align-items:center;gap:12px;padding:14px 16px;
  cursor:pointer;list-style:none;font-family:var(--d);font-weight:700;
  font-size:.95rem;letter-spacing:-.01em}
.ws-unit summary::-webkit-details-marker{display:none}
.ws-unit summary:hover{background:#FFFCF3}
.ws-unit summary:focus-visible{outline:2px solid var(--site);outline-offset:-2px}
.ws-unit-n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;
  place-items:center;background:#8A6400;color:#fff;font-size:.82rem}
.ws-unit-t{flex:1 1 auto;min-width:0}
.ws-unit-c{flex:none;font:500 .74rem var(--m);color:var(--muted);
  letter-spacing:.04em;white-space:nowrap}
.ws-unit-x{flex:none;width:11px;height:11px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s}
.ws-unit[open] .ws-unit-x{transform:rotate(225deg) translate(-3px,-3px)}
@media (prefers-reduced-motion:reduce){.ws-unit-x{transition:none}}
.ws-unit-b{padding:0 16px 16px 56px}
.ws-unit-b p{margin:0 0 10px;color:var(--muted);font-size:.9rem;line-height:1.6}
.ws-unit-b ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.ws-unit-b li{position:relative;padding-left:19px;font-size:.88rem;line-height:1.5}
.ws-unit-b li::before{content:'';position:absolute;left:0;top:.52em;width:7px;
  height:7px;border-radius:50%;background:#D9C27A}
@media (max-width:760px){
  .ws-unit-b{padding-left:16px}
  .ws-unit-b ul{grid-template-columns:1fr}
  .ws-unit-c{display:none}
}

/* Evidence: short noun phrases, so chips rather than a bulleted column. */
.ws-ev{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ws-ev li{padding:8px 14px;border-radius:99px;background:#fff;
  border:1px solid var(--line-2);font-size:.88rem;font-weight:500}
.ws-ev-note{margin:12px 0 0;font-size:.85rem;color:var(--muted)}

/* The Gold CSCS question. Amber, because the honest answer is a qualified
   yes, and the qualification is the part people miss. */
.ws-cscs{padding:20px 22px;border-radius:var(--r-lg);background:#FFFCF3;
  border:1.5px solid #D9C27A}
.ws-cscs p{margin:0 0 10px;line-height:1.65;font-size:.93rem}
.ws-cscs-note{margin:14px 0 0!important;padding:12px 14px;border-radius:10px;
  background:#fff;border:1px solid #EADFBE}

.ws-sub{font-family:var(--d);font-size:.98rem;margin:16px 0 6px}

.ws-glance{margin:0;display:grid;gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:#fff}
.ws-glance > div{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ws-glance > div:last-child{border-bottom:0}
.ws-glance > div:nth-child(odd){background:var(--paper-2)}
.ws-glance dt{font:600 .76rem var(--m);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);align-self:center}
.ws-glance dd{margin:0;font-size:.92rem;line-height:1.5}
@media (max-width:620px){
  .ws-glance > div{grid-template-columns:1fr;gap:4px}
}

/* IOSH Managing Safely / Working Safely: the course's own blue on the shared
   cx-/ss-/cg- kits. Layout only; the copy is the live pages'. */
.io-body .cx-lead{border-left-color:var(--site);font-size:1.06rem;font-weight:600;line-height:1.6}
.io-body .cx-sec{scroll-margin-top:96px}
.io-what{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:stretch}
.io-what-img{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:12px}
.io-what-img img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}
.io-topics .cx-topic-n{color:#fff;background:var(--site)}
.io-ic{background:rgba(27,77,177,.08)}
.io-ic svg{stroke:var(--site)}
.io-who-wide{grid-column:1/-1}
.io-note{display:flex;gap:10px;align-items:center;margin:12px 0 0;padding:11px 14px;border-radius:12px;
  background:rgba(18,128,92,.08);border:1px solid rgba(18,128,92,.25);font-weight:600;color:#0B5C42}
.io-note span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--pass);color:#fff;font-size:.75rem}
.io-assess{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh)}
.io-assess .h3{margin:2px 0 8px}
.io-assess p{margin:0 0 6px;line-height:1.6}
.io-assess p:last-child{margin:0}
.io-assess-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#0F2344}
.io-assess-ic svg{width:24px;height:24px;fill:none;stroke:#F5C04A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.io-cert{background:linear-gradient(160deg,#fff,#EEF3FC)!important}
.io-cert .cx-cert-k{color:var(--site)!important}
.io-cert::before{border-color:rgba(27,77,177,.35)!important}
.io-mock{display:flex;align-items:center;gap:14px;margin-top:24px;padding:14px 18px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.io-mock:hover{border-color:var(--site);box-shadow:var(--sh)}
.io-mock b{display:block;font-family:var(--d);font-size:.98rem}
.io-mock em{font-style:normal;font-size:.85rem;color:var(--muted)}
.io-mock-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(27,77,177,.08)}
.io-mock-ic svg{width:22px;height:22px;fill:none;stroke:var(--site);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.io-mock-go{margin-left:auto;font-size:1.2rem;color:var(--site)}
.io-enrol::before{background:var(--site)}
.io-group{font-size:.93rem}
.io-rel{grid-template-columns:minmax(0,1fr)}
.io-rel a{flex-direction:row;align-items:center}
.io-rel img{width:220px!important;flex:none}
.io-rel span{font-size:1rem}
@media (max-width:760px){
  .io-what{grid-template-columns:1fr}
  .io-what-img img{max-height:200px;width:auto;margin:0 auto}
  .io-assess{flex-direction:column;gap:12px;padding:18px}
}
@media (max-width:520px){.io-rel a{flex-direction:column;align-items:stretch}.io-rel img{width:100%!important}}

/* First aid (FAW / EFAW): safety-sign green for first aid, on the shared
   cx-/ss-/cg-/gq- kits. #12805C (--pass) and #0B5C42 pass 4.5:1 on white. */
.fa-body .cx-lead{border-left-color:var(--pass);font-size:1.06rem;font-weight:600;line-height:1.6}
.fa-body .cx-sec{scroll-margin-top:96px}
.fa-feat{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fa-feat li{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);
  font-weight:700;font-size:.86rem;line-height:1.35}
.fa-feat-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--pass)}
.fa-feat-ic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fa-blend{margin:0 0 14px;padding:14px 16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.fa-blend-bar{display:flex;gap:4px;height:34px;margin-bottom:10px;border-radius:9px;overflow:hidden;font-family:var(--m);font-size:.72rem;font-weight:600}
.fa-blend-bar span{display:flex;align-items:center;justify-content:center;white-space:nowrap}
.fa-blend-e{background:#E3F2EA;color:#0B5C42}
.fa-blend-c{background:var(--pass);color:#fff}
.fa-blend p{margin:0;font-size:.92rem;line-height:1.55}
.fa-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fa-roles li{position:relative;padding:11px 12px 11px 38px;border-radius:12px;background:#fff;border:1px solid var(--line);
  font-weight:600;font-size:.88rem;line-height:1.4}
.fa-roles li::before{content:'';position:absolute;left:12px;top:12px;width:16px;height:16px;border-radius:4px;background:var(--pass);
  -webkit-mask:linear-gradient(#000 0 0) center/10px 2.5px no-repeat,linear-gradient(#000 0 0) center/2.5px 10px no-repeat,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.fa-roles-wide{grid-column:1/-1}
.fa-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fa-group{padding:18px 18px 12px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.fa-group-plus{background:#F3FAF6;border-color:#CFE8DA}
.fa-group h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--d);font-size:1rem;margin:0 0 10px}
.fa-tag{padding:3px 8px;border-radius:99px;background:var(--paper-2);color:var(--muted);font-family:var(--m);font-size:.62rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fa-tag-plus{background:var(--pass);color:#fff}
.fa-checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.fa-checks li{position:relative;padding-left:24px;font-size:.9rem;line-height:1.45}
.fa-checks li::before{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--pass);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");}
.fa-checks li::after{content:'';position:absolute;left:5px;top:6px;width:6px;height:3.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.fa-checks-2{grid-template-columns:1fr 1fr;column-gap:20px;margin:12px 0}
.fa-topics .cx-topic-n{color:#fff;background:var(--pass)}
.fa-prac{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fa-prac li{padding:16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.fa-prac h3{font-family:var(--d);font-size:1rem;margin:10px 0 6px}
.fa-prac p{margin:0;font-size:.9rem;line-height:1.55;color:#3a4350}
.fa-prac-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#0F2344}
.fa-prac-ic svg{width:22px;height:22px;fill:none;stroke:#7FD7A9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fa-assess{padding:20px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.fa-assess .h3{margin:0 0 8px}
.fa-assess p{margin:0;line-height:1.6}
.fa-small{font-size:.9rem!important;font-weight:400!important;color:#3a4350}
.fa-important{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper-2);font-size:.92rem;line-height:1.6}
.fa-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fa-cmp-card{position:relative;padding:18px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.fa-cmp-card.is-this{border:2px solid var(--pass);background:#F3FAF6}
.fa-cmp-card h3{font-family:var(--d);font-size:1.02rem;margin:8px 0 6px}
.fa-cmp-card p{margin:0 0 10px;font-size:.92rem;line-height:1.55}
.fa-cmp-k{display:inline-block;padding:3px 9px;border-radius:99px;background:var(--paper-2);color:var(--muted);font-family:var(--m);
  font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.is-this .fa-cmp-k{background:var(--pass);color:#fff}
.fa-matters{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:var(--r-lg);color:#fff;
  background:linear-gradient(135deg,#0B5C42,#12805C)}
.fa-matters .h3{color:#fff;margin:2px 0 8px}
.fa-matters p{margin:0 0 8px;color:#E3F4EA;line-height:1.65}
.fa-matters p:last-child{margin:0}
.fa-matters-ic{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#fff}
.fa-matters-ic svg{width:28px;height:28px;fill:none;stroke:var(--pass);stroke-width:2.6;stroke-linecap:round}
.fa-grouptrain{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 22px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line)}
.fa-grouptrain .h3{margin:0 0 8px}
.fa-grouptrain p{margin:0 0 8px;line-height:1.6;font-size:.93rem}
.fa-chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fa-chips li{padding:5px 11px;border-radius:99px;background:#E3F2EA;color:#0B5C42;font-size:.8rem;font-weight:600}
.fa-enrol::before{background:var(--pass)}
@media (max-width:900px){.fa-feat{grid-template-columns:repeat(2,minmax(0,1fr))}.fa-roles{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .fa-groups,.fa-prac,.fa-cmp,.fa-checks-2{grid-template-columns:1fr}
  .fa-grouptrain{grid-template-columns:1fr}
  .fa-matters{flex-direction:column;gap:12px;padding:18px}
}
@media (max-width:480px){.fa-roles{grid-template-columns:1fr}
  .fa-feat{gap:8px}.fa-feat li{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;font-size:.8rem}
  .fa-feat-ic{width:30px;height:30px}.fa-feat-ic svg{width:16px;height:16px}}
.fa-cmp-card .link-arrow{color:var(--site);font-weight:700;font-size:.9rem;text-decoration:none}
.fa-cmp-card .link-arrow:hover{text-decoration:underline}
.nv-price{margin:14px 0 2px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.nv-price b{display:block;font-family:var(--d);font-size:2rem;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.nv-price small{font-family:var(--m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Level 3 Paediatric First Aid: the first aid (fa-) kit, plus a picture
   beside the intro and the EYFS/Ofsted line called out. */
.pf-intro{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:start}
.pf-img{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff}
.pf-img img{display:block;width:100%;height:auto}
.pf-for{margin:4px 0 14px!important}
.pf-eyfs{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;
  background:rgba(18,128,92,.08);border:1px solid rgba(18,128,92,.25);font-weight:600;color:#0B5C42;line-height:1.5}
.pf-eyfs span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--pass);color:#fff;font-size:.75rem;margin-top:1px}
.pf-desc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-desc p{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.92rem;line-height:1.6}
.pf-desc p:last-child:nth-child(odd){grid-column:1/-1;background:#F3FAF6;border-color:#CFE8DA;font-weight:600}
.pf-fact-h{margin:0 0 4px;font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pf-chip{background:var(--pass)!important}
.pf-cert{background:linear-gradient(160deg,#fff,#EEF8F2)!important}
.pf-cert .cx-cert-k{color:#0B5C42!important}
.pf-cert b{color:#0B5C42!important}
.pf-cert::before{border-color:rgba(18,128,92,.4)!important}
.pf-p{margin:0 0 10px;line-height:1.65}
@media (max-width:760px){
  .pf-intro{grid-template-columns:1fr}
  .pf-img{max-width:200px}
  .pf-desc{grid-template-columns:1fr}
}

/* NVQ buy box: Book now, then an instalment plan by phone or WhatsApp. */
.nv-book{margin:14px 0 6px!important}
.nv-book-note{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}
.nv-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--muted);font-family:var(--m);font-size:.66rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nv-or::before,.nv-or::after{content:'';flex:1;height:1px;background:var(--line)}
.nv-inst{padding:14px;border-radius:14px;background:linear-gradient(160deg,#FFFBF0,#FFF4D9);border:1px solid #EBD58F;scroll-margin-top:96px}
.nv-inst-h{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px}
.nv-inst-h h2{margin:0 0 3px;font-family:var(--d);font-size:1.02rem;letter-spacing:-.01em}
.nv-inst-h p{margin:0;font-size:.84rem;line-height:1.45;color:#4a4330}
.nv-inst-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#8A6400}
.nv-inst-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nv-inst-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nv-inst-btns a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;color:#fff;text-decoration:none;
  transition:transform .15s,filter .15s;min-height:48px}
.nv-inst-btns a:hover{transform:translateY(-1px);filter:brightness(1.08)}
.nv-inst-btns a:focus-visible{outline:3px solid var(--site);outline-offset:2px}
.nv-inst-btns svg{flex:none;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nv-inst-btns span{display:grid;line-height:1.2;min-width:0}
.nv-inst-btns b{font-family:var(--d);font-size:.92rem}
.nv-inst-btns em{font-style:normal;font-size:.72rem;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-inst-call{background:#0F2344}
.nv-inst-wa{background:#15803D}
.nv-mobk-inst{color:#8A6400;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (max-width:360px){.nv-inst-btns{grid-template-columns:1fr}}
.plan-grid:has(> .plan:only-child){max-width:440px}
.nv-plan-inst{max-width:440px;margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#FFF8E6;border:1px solid #EBD58F;font-size:.9rem;line-height:1.55}
.nv-plan-inst a{color:var(--site);font-weight:700}

/* Per-option awarding body on the course page (only where options differ). */
.mode-ab{margin:-2px 0 8px;font-family:var(--m);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mode-ab b{color:var(--ink)}
.mode-ab-chip{display:inline-block;margin-left:2px;padding:1px 6px;border-radius:5px;background:var(--paper-2);color:var(--ink);font-weight:700}

/* Course pass rate (Course.pass_rate_percent): hero tag, buy-box line, band. */
.tag-rate{background:#FF9E1B;color:#1F1300}
.bk-rate{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:.86rem;color:#3a4350}
.bk-rate span{color:#E07C00}
.bk-rate b{color:var(--ink)}
.gq-rate{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:14px 18px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#0F2344,#1D3355);color:#fff}
.gq-rate-n{font-family:var(--d);font-weight:800;font-size:2.4rem;letter-spacing:-.04em;line-height:1;color:#FFB84D}
.gq-rate-n small{font-size:1.2rem}
.gq-rate b{display:block;font-family:var(--d);font-size:1.05rem}
.gq-rate span{color:#C9D6E8;font-size:.88rem}
/* Four delivery options (e.g. CSCS: Zoom, classroom, self-paced, team) sit two by two, not 3 + 1. */
@media (min-width:640px){.mode-grid:has(> .mode:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
.dateopt .dd .mode-ab-chip{display:inline;padding:0 5px;margin:0;font-size:inherit;letter-spacing:inherit;line-height:inherit}

/* The dates count on "See dates": white on a translucent wash failed 4.5:1; a solid navy pill passes. */
.date-count{background:#0F2344;color:#fff}

/* Preparation portal (Course.lms_is_preparation): study -> practise -> exam. */
.pp-tag{background:rgba(255,255,255,.14);color:#fff;margin-bottom:12px}
.pp-wrap{max-width:900px}
.pp-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:none}
.pp-steps li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--line)}
.pp-steps b{display:block;font-family:var(--d);font-size:.98rem}
.pp-steps span:not(.pp-step-n){font-size:.82rem;color:var(--muted)}
.pp-step-n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--d);font-weight:800;
  background:var(--paper-2);color:var(--ink)}
.pp-steps .is-now{border-color:var(--site);box-shadow:0 0 0 3px rgba(27,77,177,.08)}
.pp-steps .is-now .pp-step-n{background:var(--site);color:#fff}
.pp-steps .is-done .pp-step-n{background:var(--pass);color:#fff}
.pp-steps .is-locked{opacity:.75}
.pp-steps .pp-step-go{border-color:var(--pass);background:#F3FAF6}
.pp-steps .pp-step-go .pp-step-n{background:var(--pass)}
.pp-ready{display:flex;gap:16px;align-items:flex-start;margin:0 0 26px;padding:22px 24px;border-radius:var(--r-lg);color:#fff;
  background:linear-gradient(135deg,#0B5C42,#12805C);box-shadow:var(--sh)}
.pp-ready-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--pass);
  font-size:1.6rem;font-weight:800}
.pp-ready h2{color:#fff;font-size:1.3rem;margin:2px 0 6px}
.pp-ready p{margin:0 0 12px;color:#E3F4EA;line-height:1.6}
.pp-ready a:not(.btn){color:#fff;font-weight:700}
.pp-ready-next{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.12)}
.pp-ready-help{font-size:.88rem;margin:10px 0 0!important}
.pp-sec{margin-top:30px}
.pp-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pp-sec-h h2{margin:0;font-size:1.25rem}
.pp-sec-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#0F2344;color:#fff;font-family:var(--d);font-weight:800}
.pp-intro{margin:0 0 14px;color:#3a4350;line-height:1.6}
.pp-paper{display:grid;grid-template-columns:1fr 190px;gap:20px;align-items:center;padding:20px 22px;border-radius:var(--r-lg);
  background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh)}
.pp-k{display:block;margin:0 0 4px;font-family:var(--m);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pp-paper h3{font-family:var(--d);font-size:1.15rem;margin:0 0 6px}
.pp-paper p{margin:0 0 14px;line-height:1.6;font-size:.93rem}
.pp-meter{text-align:center;padding:14px;border-radius:14px;background:var(--paper-2)}
.pp-meter b{display:block;font-family:var(--d);font-size:2.2rem;letter-spacing:-.03em;line-height:1}
.pp-meter b small{font-size:1rem;color:var(--muted)}
.pp-meter span{display:block;margin:4px 0 10px;font-size:.78rem;color:var(--muted)}
.pp-meter i{position:relative;display:block;height:8px;border-radius:99px;background:var(--line);overflow:visible}
.pp-meter i::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:#E07C00}
.pp-meter.is-pass i::before{background:var(--pass)}
.pp-meter em{position:absolute;top:-4px;bottom:-4px;left:var(--m);width:2px;background:var(--ink);border-radius:2px}
.pp-sub{font-family:var(--d);font-size:1rem;margin:22px 0 10px}
.pp-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pp-topics a{display:grid;gap:4px;padding:13px 14px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pp-topics a:hover{border-color:var(--site);box-shadow:var(--sh)}
.pp-topics b{font-family:var(--d);font-size:.94rem}
.pp-topics span{font-size:.8rem;color:var(--muted)}
.pp-topics i{position:relative;display:block;height:5px;margin-top:6px;border-radius:99px;background:var(--line)}
.pp-topics i::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:#E07C00}
.pp-topics i.is-pass::before{background:var(--pass)}
.pp-locked{padding:18px 20px;border-radius:var(--r-lg);border:1.5px dashed var(--line-2);background:var(--paper)}
.pp-locked p{margin:0 0 10px;line-height:1.6}
.pp-todo{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pp-todo li{position:relative;padding-left:28px;font-weight:600;font-size:.93rem}
.pp-todo li::before{content:'';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2)}
.pp-todo li.is-done{color:var(--muted);text-decoration:line-through}
.pp-todo li.is-done::before{background:var(--pass);border-color:var(--pass)}
.pp-note{margin:28px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper-2);font-size:.88rem;color:#3a4350}
.pp-finish{text-align:center;padding:30px 24px;border-radius:var(--r-lg);background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh)}
.pp-finish-ic{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#E07C00;color:#fff;
  font-size:1.8rem;font-weight:800}
.pp-finish.is-pass .pp-finish-ic{background:var(--pass)}
.pp-finish.is-ready{border-color:var(--pass);background:#F3FAF6}
.pp-finish.is-ready .pp-finish-ic{background:var(--pass)}
.pp-finish h2{margin:0 0 6px}
.pp-finish-lead{font-family:var(--d);font-weight:800;font-size:1.15rem;margin:0 0 6px}
.pp-finish p{max-width:52ch;margin:0 auto 10px;line-height:1.6}
.pp-finish-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
@media (max-width:760px){
  .pp-steps{grid-template-columns:1fr}
  .pp-paper{grid-template-columns:1fr}
  .pp-topics{grid-template-columns:1fr}
  .pp-ready{flex-direction:column;gap:12px;padding:18px}
}

/* Buy box: a delivery option with no date to pick links straight to the plan step. */
.dateopt-go{color:inherit;text-decoration:none}
.dateopt-go .dateopt-arrow{font-family:var(--d);font-weight:700;color:var(--site);margin-left:-4px;transition:transform .15s}
.dateopt-go:hover,.dateopt-go:focus-visible{border-color:var(--site)}
.dateopt-go:hover .dateopt-arrow,.dateopt-go:focus-visible .dateopt-arrow{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.dateopt-go .dateopt-arrow{transition:none}}
.plan-list + .plan-tag{margin:12px 0 16px}

/* Checkout summary: change or remove a line in place (no basket page in between). */
.sum-line .sum-acts{display:flex;gap:14px;margin-top:6px}
.sum-acts a,.sum-acts button{font:600 .78rem var(--b);color:var(--site);background:none;border:0;padding:2px 0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sum-acts a:hover,.sum-acts button:hover{color:var(--ink)}

/* Hero: the awarding bodies' marks above the card, level with the eyebrow.
   White tiles, because the marks are made for light backgrounds and need
   their clear space; small, but the brightest things in the column. */
.hero-grid{align-items:stretch}
.hero-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.hero-side .cardstage{flex:1}
.hero-accred{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;margin-top:-12px}
.ha-lbl{font-family:var(--m);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8FA6C6}
.hero-accred ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
/* Equal tiles, each logo fitted inside: a wide mark (CITB) fills the width, a
   square one (IOSH, TLM) the height, so they carry the same visual weight. */
.hero-accred li{width:78px;height:54px;padding:3px;display:grid;place-items:center;
  background:#fff;border-radius:10px;
  box-shadow:0 8px 20px rgba(3,10,25,.35),inset 0 0 0 1px rgba(15,35,68,.08);
  transition:transform .16s}
.hero-accred li:hover{transform:translateY(-2px)}
.hero-accred img{display:block;width:auto;height:auto;max-width:72px;max-height:48px}
@media (max-width:1024px){.hero-accred{margin-top:0}}
/* Phones: all five in one row. */
@media (max-width:560px){
  .hero-accred{flex-direction:column;gap:8px}
  .hero-accred ul{gap:6px;flex-wrap:nowrap}
  .hero-accred li{width:58px;height:44px;padding:3px;border-radius:8px}
  .hero-accred img{max-width:52px;max-height:38px}
}
@media (prefers-reduced-motion:reduce){.hero-accred li{transition:none}}

/* Homepage: three lead courses overlapping the foot of the hero.
   --fc is the course's own colour; the icon tile and top rule are tints of it. */
.fc-sec{padding-bottom:56px}
.fcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:-74px;position:relative;z-index:5}
.fc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 24px 20px;box-shadow:var(--e3);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.fc::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--fc,var(--site))}
.fc:hover{transform:translateY(-5px);box-shadow:var(--e4);border-color:var(--line-2)}
.fc:focus-within{box-shadow:var(--e4),0 0 0 2px var(--site)}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.fc-ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;flex:none;
  color:var(--fc,var(--site));background:rgba(15,35,68,.06);
  background:color-mix(in srgb,var(--fc,var(--site)) 12%,#fff)}
.fc-mark{height:44px;min-width:60px;max-width:104px;padding:4px 10px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);border-radius:10px}
.fc-mark img{display:block;max-width:100%;max-height:34px;width:auto;height:auto}
.fc-kicker{font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.fc h3{font-size:1.28rem;line-height:1.2;letter-spacing:-.025em;margin:0 0 8px}
.fc-link{color:inherit;text-decoration:none}
.fc-link::after{content:'';position:absolute;inset:0;z-index:1}
.fc-link:focus-visible{outline:none}
.fc-blurb{font-size:.92rem;line-height:1.55;color:var(--muted);margin:0 0 14px}
.fc-facts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0}
.fc-facts li{font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--ink);
  padding:4px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.fc-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:15px;border-top:1px dashed var(--line-2)}
.fc-foot .price{font-family:var(--d);font-weight:800;font-size:1.75rem;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.fc-foot .price small{display:block;font-family:var(--m);font-weight:500;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.fc-go{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:#fff;
  background:var(--site);padding:11px 16px;border-radius:10px;white-space:nowrap;transition:background .15s}
.fc-go i{font-style:normal;transition:transform .18s}
.fc:hover .fc-go{background:#143f94}
.fc:hover .fc-go i{transform:translateX(4px)}
@media (max-width:1024px){.fcs{margin-top:-40px}}
@media (max-width:900px){.fcs{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
@media (max-width:560px){.fcs{margin-top:-28px;gap:14px}.fc{padding:20px 18px 16px}.fc h3{font-size:1.15rem}}
@media (prefers-reduced-motion:reduce){.fc,.fc-go i,.fc-go{transition:none}.fc:hover{transform:none}.fc:hover .fc-go i{transform:none}}

/* "Trusted seller for more than 10 years": a gold medal beside the claim, on navy. */
.tseal{display:inline-flex;align-items:center;gap:16px;max-width:100%;margin:0 0 26px;padding:12px 22px 12px 12px;
  border-radius:999px;border:1px solid rgba(255,178,62,.45);
  background:linear-gradient(100deg,rgba(255,158,27,.20),rgba(255,255,255,.06) 70%);
  box-shadow:0 10px 28px rgba(3,10,25,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.tseal-medal{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 32% 28%,#FFD27A,#FFB23E 45%,#F08C00);color:#0F2344;
  box-shadow:0 0 0 3px rgba(255,178,62,.32),0 6px 14px rgba(3,10,25,.4),inset 0 0 0 3px rgba(255,255,255,.35)}
.tseal-medal b{font-family:var(--d);font-weight:800;font-size:1.65rem;line-height:.9;letter-spacing:-.05em}
.tseal-medal i{font-style:normal;font-family:var(--m);font-weight:700;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;margin:3px 0 0 .2em}
.tseal-copy{margin:0;color:#fff;line-height:1.25}
.tseal-copy strong{display:block;font-family:var(--d);font-weight:800;font-size:1.22rem;letter-spacing:-.025em;text-wrap:balance}
.tseal-copy span{display:block;margin-top:4px;font-size:.88rem;color:#C2D0E4}
/* The page header sets its own paragraph colour; the badge keeps its own. */
.phead .tseal{margin:6px 0 22px}
.phead .tseal-copy{color:#fff}
.phead .tseal-copy span{color:#C2D0E4}
@media (max-width:560px){
  .tseal{display:flex;gap:13px;padding:10px 16px 10px 10px;border-radius:22px;margin-bottom:22px}
  .tseal-medal{width:58px;height:58px}
  .tseal-medal b{font-size:1.4rem}
  .tseal-copy strong{font-size:1.04rem}
  .tseal-copy span{font-size:.82rem}
}