/* Fonts, served from this domain rather than Google.
   Loading them from fonts.gstatic.com sent every visitor's IP to a US
   third party on every page view, undisclosed in the privacy notice, and
   cost two extra connections before any text could render. Both families
   are variable, so one file each covers every weight in use. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;
  font-display:swap;src:url('../fonts/montserrat-var.woff2') format('woff2-variations'),
  url('../fonts/montserrat-var.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;
  font-display:swap;src:url('../fonts/open-sans-var.woff2') format('woff2-variations'),
  url('../fonts/open-sans-var.woff2') format('woff2')}

/* ══════════════════════════════════════════════════════════════
   Vertiq Training — replica of vertiqtraining.com
   Same visual language as the live site: light utility bar over a
   white nav, navy hero panel with an orange rule, white cards with
   pastel icon tiles, full-width orange buttons, navy footer.
   ══════════════════════════════════════════════════════════════ */
:root{
  --orange:#FF6A00;          /* the brand orange, as used on the live site */
  --orange-btn:#C24E00;      /* buttons: passes AA with white text (4.79:1) */
  --orange-btn-hover:#A84300;
  --orange-tint:#FFF3EA;
  --navy-900:#0B1120; --navy-800:#12213A;
  --ink-900:#0F172A; --ink-600:#475569; --ink-500:#5A6472; --ink-400:#94A3B8;
  --blue:#2563EB;
  --paper:#FFFFFF; --mist:#F7F8FA; --line:#E5E7EB;
  --tile-blue:#DBEAFE; --tile-amber:#FEF3C7; --tile-teal:#CCFBF1; --tile-violet:#EDE9FE;
  --ok:#2E7D5B; --warn:#9A5309;
  --display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --body:'Open Sans','Segoe UI',system-ui,sans-serif;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:5.5rem;
  --radius:8px; --radius-lg:14px;
  --shadow:0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-600);font-family:var(--body);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-900);line-height:1.18;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;text-wrap:balance}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:.95rem;font-weight:700}
p{margin:0 0 var(--s4)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange-btn);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.section{padding-block:var(--s9)}
.section--mist{background:var(--mist)}
.section--navy{background:var(--navy-900);color:#DDE3EC}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.sec-head{margin-bottom:var(--s8)}
.sec-head h2{margin-bottom:var(--s3)}
.measure{max-width:62ch;margin-inline:auto}
.center{text-align:center}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2--align{align-items:center;gap:var(--s8)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.eyebrow{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-btn);margin:0 0 var(--s3)}
.section--navy .eyebrow{color:var(--orange)}

/* ── Buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.95rem 1.75rem;border-radius:var(--radius);
  border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn--primary{background:var(--orange-btn);color:#fff;border-color:var(--orange-btn)}
.btn--primary:hover{background:var(--orange-btn-hover);border-color:var(--orange-btn-hover);
  transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--outline{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.btn--outline:hover{background:var(--ink-900);color:#fff}
.hero .btn--outline,.section--navy .btn--outline,.card--contact .btn--outline{color:#fff;border-color:#fff}
.hero .btn--outline:hover,.section--navy .btn--outline:hover,.card--contact .btn--outline:hover{background:#fff;color:var(--navy-900)}
.btn--sm{padding:.6rem 1.1rem;font-size:.75rem}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.center .btn-row{justify-content:center}

/* ── Header ──────────────────────────────────────── */
/* .mock-bar removed 23 Aug 2026. It was a leftover from v4 being the fourth
   mockup direction shown to Mark, rendered unconditionally on all 18 pages,
   and every local check passed with it in place. audit.js now hard-fails on
   it so it cannot return. */
.hdr{position:sticky;top:0;z-index:60;background:#fff;box-shadow:var(--shadow)}
.hdr__util{background:#E8EAEE;font-size:.82rem;font-family:var(--display);font-weight:600}
.hdr__util .wrap{display:flex;justify-content:space-around;gap:var(--s4);padding-block:.6rem;flex-wrap:wrap}
.hdr__util a{color:var(--ink-900);text-decoration:none;display:flex;align-items:center;gap:.4rem;transition:color .15s}
.hdr__util a:hover{color:var(--orange-btn)}
.hdr__util svg{color:var(--orange-btn);flex:none}
.hdr__main .wrap{display:flex;align-items:center;gap:var(--s5);padding-block:var(--s3)}
.brand{flex:none;display:block}
.brand img{width:150px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav>a,.nav__drop>button{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--ink-900);
  text-decoration:none;padding:.6rem .85rem;border-radius:var(--radius);background:none;border:0;
  cursor:pointer;transition:color .15s;position:relative;display:flex;align-items:center;gap:.35rem}
.nav>a:hover,.nav__drop>button:hover{color:var(--orange-btn)}
.nav>a.is-active{color:var(--orange-btn)}
.nav>a.is-active::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.25rem;height:2px;background:var(--orange)}
.nav>a.btn--primary{color:#fff}
.nav>a.btn--primary:hover{color:#fff}
.nav__drop{position:relative}
.nav__menu{position:absolute;top:calc(100% + .4rem);left:0;min-width:275px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.4rem;display:none}
.nav__drop.open .nav__menu{display:block}
.nav__menu a{display:block;color:var(--ink-900);padding:.65rem .8rem;border-radius:var(--radius);
  font-family:var(--body);font-size:1rem;font-weight:600;text-decoration:none}
.nav__menu a:hover{background:var(--mist);color:var(--orange-btn)}
.nav__grp{font-family:var(--display);font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-500);margin:0;padding:.7rem .8rem .25rem}
.nav__menu>div+div{margin-top:.15rem;border-top:1px solid var(--line);padding-top:.15rem}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{display:block;width:24px;height:2px;background:var(--ink-900);margin:5px 0}
@media(max-width:1040px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:var(--s3);gap:0;box-shadow:var(--shadow-lg)}
  .nav.open{display:flex}
  .nav>a,.nav__drop>button{width:100%;padding:.85rem}
  .nav__menu{position:static;display:block;box-shadow:none;border:0;padding-left:var(--s4)}
  .burger{display:block}
  .hdr__main .wrap{position:relative;flex-wrap:wrap}
  .nav .btn{margin-top:var(--s3)}
}

/* ── Hero ────────────────────────────────────────── */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding-block:var(--s9) var(--s8)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,17,32,.94) 0%,rgba(11,17,32,.86) 46%,rgba(11,17,32,.62) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero__panel{max-width:760px;border-left:5px solid var(--orange);padding-left:var(--s6)}
.hero__kicker{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);margin:0 0 var(--s3)}
.hero h1{color:#fff;margin-bottom:var(--s3)}
.hero__tag{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 var(--s5)}
.hero__lede{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:60ch;margin:0}
.hero__note{margin:var(--s8) 0 0;display:inline-block;font-size:.85rem;color:rgba(255,255,255,.9);
  background:rgba(11,17,32,.82);border-left:3px solid var(--orange);padding:.55rem 1.1rem;border-radius:var(--radius)}

/* ── Cards ───────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s6);display:flex;flex-direction:column;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card--link{text-decoration:none;color:inherit}
.card--link:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:#D5DAE2}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--ink-600);font-size:1rem;flex:1;margin-bottom:0}
.card__go{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--orange-btn);
  text-transform:uppercase;letter-spacing:.05em;margin-top:var(--s5);display:inline-flex;align-items:center;gap:.4rem}
.card--link:hover .card__go{gap:.7rem}
.card__go::after{content:'\2192';transition:transform .2s}
.card--split{padding:0;overflow:hidden}
.card--split .card__body{padding:var(--s6)}
.card--split .card__media img{width:100%;height:260px;object-fit:cover}
.card--contact{background:var(--navy-900);border-color:var(--navy-800);color:#DDE3EC}
.card--contact .eyebrow{color:var(--orange)}
.card--contact p{color:#DDE3EC}
.bignum{font-family:var(--display);font-weight:800;font-size:1.9rem;color:#fff;
  text-decoration:none;display:block;margin-bottom:var(--s4)}
.bignum:hover{color:var(--orange)}

.tile{width:56px;height:56px;border-radius:var(--radius);display:grid;place-items:center;margin-bottom:var(--s5);flex:none}
.tile--blue{background:var(--tile-blue);color:var(--blue)}
.tile--amber{background:var(--tile-amber);color:#B45309}
.tile--teal{background:var(--tile-teal);color:#0F766E}
.tile--violet{background:var(--tile-violet);color:#6D28D9}
.tile--orange{background:var(--orange-tint);color:var(--orange-btn)}

.pill{display:inline-block;font-family:var(--display);font-size:.625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:100px;
  vertical-align:middle;margin-left:.4rem}
.pill--soon{background:#FDF6EC;color:var(--warn);border:1px solid #F0D7B6}
.section--navy .pill--soon{background:rgba(240,179,102,.12);color:#F0B366;border-color:rgba(240,179,102,.4)}

/* ── Lists ───────────────────────────────────────── */
.checks{list-style:none;margin:0 0 var(--s4);padding:0}
.checks li{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s3);color:var(--ink-600)}
.checks svg{flex:none;margin-top:.35rem;color:var(--blue)}
.checks--two{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s5)}
@media(max-width:680px){.checks--two{grid-template-columns:1fr}}

/* ── Steps ───────────────────────────────────────── */
.steps .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s6)}
.step__n{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--orange-btn);
  display:block;margin-bottom:var(--s3)}
.step h3{font-size:1.05rem;margin-bottom:var(--s2)}
.step p{font-size:.95rem;margin:0}

/* ── Coming soon grid ────────────────────────────── */
.soon__item{background:var(--navy-800);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);padding:var(--s5)}
.soon__item h3{font-size:1.05rem;margin-top:var(--s3)}

.shot{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.shot img{width:100%;height:100%;object-fit:cover}

/* ── Forms ───────────────────────────────────────── */
.form{display:grid;gap:var(--s4);max-width:720px}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field label{font-family:var(--display);font-size:.875rem;font-weight:700;color:var(--ink-900)}
.field .req{color:var(--orange-btn)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink-900);width:100%;
  transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-btn);
  box-shadow:0 0 0 3px var(--orange-tint)}
.field textarea{min-height:130px;resize:vertical}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:680px){.field--row{grid-template-columns:1fr}}
.consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:.9rem;color:var(--ink-600)}
.consent input{width:18px;height:18px;margin-top:.3rem;flex:none;accent-color:var(--orange-btn)}
.consent a{color:var(--orange-btn)}

.callout{border-left:4px solid var(--warn);background:#FDF6EC;padding:var(--s5);
  border-radius:0 var(--radius) var(--radius) 0;margin-bottom:var(--s6)}
.callout p:last-child{margin:0}
.callout strong{color:var(--ink-900)}

/* ── Footer ──────────────────────────────────────── */
.ftr{background:var(--navy-900);color:#AEB8C7;padding-block:var(--s8) var(--s5);font-size:1rem}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--s6)}
@media(max-width:960px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr__grid{grid-template-columns:1fr}}
.ftr__logo{width:160px;height:auto;margin-bottom:var(--s4)}
.ftr h3{font-family:var(--display);font-size:.9rem;color:#fff;margin:0 0 var(--s4)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:var(--s3)}
.ftr a{color:#AEB8C7;text-decoration:none;transition:color .15s}
.ftr a:hover{color:var(--orange)}
.ftr p{font-size:.95rem}
.social{display:flex;gap:var(--s3);margin-top:var(--s4)}
.social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);
  display:grid;place-items:center;transition:all .18s}
.social a:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,106,0,.1)}
.ftr__bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:.85rem}
.ftr__bottom p{margin:0}

/* ══════════════════════════════════════════════════════════════════════════
   v4 additions — the upgrade layer over the live site's own design language.
   Everything above this line is the site as it stands. Everything below
   exists because of something Mark asked for on 19 August.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero enquiry card ────────────────────────────────────────────────────
   "Drop your details here" — the live hero has two buttons and no way to
   leave a number. The panel keeps its orange rule; the form sits beside it
   so the front screen carries the ask instead of pointing at it. */
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
@media(max-width:1040px){.hero__grid{grid-template-columns:1fr;gap:var(--s7)}}
.hero__panel{max-width:none}
.hero .hero__lede{margin-bottom:var(--s5)}
.hero__points{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.hero__points li{display:flex;gap:var(--s3);align-items:flex-start;color:rgba(255,255,255,.9);font-size:1.02rem}
.hero__points svg{flex:none;margin-top:.3rem;color:var(--orange)}
.hero__reassure{margin:var(--s4) 0 0;font-size:.9rem;color:rgba(255,255,255,.72)}

.enq{background:#fff;border-radius:var(--radius-lg);padding:var(--s6);box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden}
.enq::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--orange)}
.enq h2{font-size:1.35rem;margin-bottom:var(--s2)}
.enq>p{font-size:.95rem;color:var(--ink-600);margin-bottom:var(--s5)}
.enq .form{gap:var(--s4);max-width:none}
.enq__small{font-size:.8rem;color:var(--ink-500);margin:0}
.enq__small a{color:var(--orange-btn)}
.btn--block{width:100%}

/* ── Proof strip ──────────────────────────────────────────────────────────
   "All CTAs and stats in one place." Sits directly under the hero so the
   numbers land before the visitor has to scroll for them. */
.proof{background:var(--navy-800);color:#fff;padding-block:var(--s5)}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);text-align:center}
@media(max-width:760px){.proof__grid{grid-template-columns:repeat(2,1fr);gap:var(--s4)}}
.proof strong{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--orange)}
.proof span{font-size:.86rem;color:#B9C4D4}

/* ── Course-page furniture ───────────────────────────────────────────────── */
.crumbs{background:var(--mist);border-bottom:1px solid var(--line);font-size:.85rem}
.crumbs .wrap{display:flex;gap:var(--s2);align-items:center;padding-block:.85rem}
.crumbs a{color:var(--ink-600);text-decoration:none}
.crumbs a:hover{color:var(--orange-btn)}
.crumbs span[aria-hidden]{color:var(--ink-400)}

.faq{display:grid;gap:var(--s3);max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5) var(--s6)}
.faq summary{font-family:var(--display);font-weight:700;color:var(--ink-900);cursor:pointer;
  font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--orange-btn);font-weight:800;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq details p{margin:var(--s4) 0 0;color:var(--ink-600)}

.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:960px){.rel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rel{grid-template-columns:1fr}}
.rel__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s5);text-decoration:none;color:inherit;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.rel__card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.rel__card h3{font-size:1rem;margin-bottom:var(--s2)}
.rel__card p{font-size:.9rem;margin:0}

/* ── Sticky mobile CTA ────────────────────────────────────────────────────
   On a phone the hero CTA scrolls away and never comes back. */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:flex;gap:var(--s2);position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:.6rem .8rem;
    box-shadow:0 -4px 18px rgba(15,23,42,.14)}
  .sticky-cta .btn{flex:1;padding:.85rem .8rem;font-size:.78rem}
  .sticky-cta .btn--outline{flex:0 0 92px}
  body{padding-bottom:4.5rem}
}

/* legal pages: plain prose in the site's own voice */
.prose{max-width:76ch}
.prose h2{font-size:1.5rem;margin:var(--s7) 0 var(--s4)}
.prose h3{margin:var(--s5) 0 var(--s2)}
.prose ul,.prose ol{padding-left:1.3rem;margin-bottom:var(--s4)}
.prose li{margin-bottom:var(--s2)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:var(--s5);font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
.prose th{background:var(--mist);font-family:var(--display);font-size:.85rem}
.tbl-scroll{overflow-x:auto}

/* The lockup is stacked at 1.43:1, so sizing it by width made the white nav band
   145px tall and pushed the h1 down. Size by height instead. */
.brand img{width:auto;height:62px}
@media(max-width:1040px){.brand img{height:52px}}
.ftr__logo{width:auto;height:78px}

/* ── Hero with people in it ───────────────────────────────────────────────
   Mark: "nick some of the smiling faces". The live site's overlay is a flat
   90deg wash at .86–.62, which is fine over machinery and murders a group
   photo — the faces go to mud. Two gradients instead: a vertical one that
   keeps the top strip open so the people read, and a horizontal one that
   stays heavy only where the white type actually sits. The enquiry card is
   opaque, so nothing behind it needs protecting. */
.hero--people::after{
  background:
    linear-gradient(180deg, rgba(11,17,32,.30) 0%, rgba(11,17,32,.55) 30%, rgba(11,17,32,.72) 100%),
    linear-gradient(90deg,  rgba(11,17,32,.90) 0%, rgba(11,17,32,.82) 42%,
                            rgba(11,17,32,.30) 62%, rgba(11,17,32,.05) 100%);
}
.hero--people .hero__panel{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero--people .hero__media img{object-position:center 28%}
@media(max-width:1040px){
  /* the panel sits over the whole frame on a phone, so protect the type */
  .hero--people::after{background:linear-gradient(180deg,rgba(11,17,32,.62) 0%,rgba(11,17,32,.90) 34%,rgba(11,17,32,.94) 100%)}
}

/* ══════════════════════════════════════════════════════════════════════════
   Revision 2 — Mark's feedback, 19 August, after seeing the first v4 fold.

     "I want the website lighter than that too. I want it bright and fruity"
     "80+% will be mobile users. So, need to optimised for that"
     "It's the psychology of inviting smiles"
     "It's lift and escalator not lift only"
     "I do not want [the mobile] as the main number... I need this to look like
      an established company not a shit one man band"

   The dark navy hero and navy bands go. The scrim over the hero photograph is
   inverted — white instead of navy — so the smiling faces read at full
   brightness instead of through a dark wash, which also serves the "inviting
   smiles" point better than the dark treatment did. Section grounds rotate
   through the pastel tile palette that was already in the design system rather
   than alternating white and grey.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --cream:#FFFCF8;
  --band-blue:#EFF6FF; --band-amber:#FFFBEB; --band-teal:#F0FDFA; --band-violet:#F5F3FF;
  --ink-hero:#131C2E;
}

/* ── Hero, inverted to light ─────────────────────────────────────────────── */
.hero{background:var(--cream);color:var(--ink-600)}
.hero::after{
  background:
    linear-gradient(180deg, rgba(255,252,248,.30) 0%, rgba(255,252,248,.05) 55%, rgba(255,252,248,.35) 100%),
    linear-gradient(90deg,  rgba(255,252,248,.97) 0%,  rgba(255,252,248,.93) 40%,
                            rgba(255,252,248,.46) 60%, rgba(255,252,248,.08) 100%);
}
.hero--people::after{
  /* a group shot needs less veil than machinery, not more — the faces are the point */
  background:
    linear-gradient(180deg, rgba(255,252,248,.22) 0%, rgba(255,252,248,.02) 50%, rgba(255,252,248,.30) 100%),
    linear-gradient(90deg,  rgba(255,252,248,.96) 0%,  rgba(255,252,248,.90) 38%,
                            rgba(255,252,248,.34) 58%, rgba(255,252,248,.02) 100%);
}
.hero--people .hero__panel{text-shadow:none}
.hero__panel{border-left-width:6px}
.hero h1{color:var(--ink-hero)}
.hero .hero__lede{color:var(--ink-600)}
.hero .hero__lede strong{color:var(--ink-hero)}
.hero__tag{color:var(--ink-500)}
.hero__points li{color:var(--ink-600)}
.hero__points svg{color:var(--orange-btn)}
.hero__reassure{color:var(--ink-500)}
.hero .btn--outline{color:var(--ink-hero);border-color:var(--ink-hero)}
.hero .btn--outline:hover{background:var(--ink-hero);color:#fff;border-color:var(--ink-hero)}
.hero__note{background:#fff;color:var(--ink-600);box-shadow:var(--shadow-md)}
.enq{box-shadow:0 18px 50px rgba(15,23,42,.16)}

/* ── Proof strip: four colours, not one navy slab ────────────────────────── */
.proof{background:var(--cream);padding-block:0;color:inherit}
.proof__grid{gap:var(--s4);padding-bottom:var(--s7)}
.proof__grid>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s5) var(--s4);box-shadow:var(--shadow)}
.proof strong{font-size:1.45rem;margin-bottom:.15rem}
.proof span{color:var(--ink-500)}
.proof__grid>div:nth-child(1) strong{color:var(--orange-btn)}
.proof__grid>div:nth-child(2) strong{color:#1D4ED8}
.proof__grid>div:nth-child(3) strong{color:#0F766E}
.proof__grid>div:nth-child(4) strong{color:#6D28D9}

/* ── Section grounds: pastel rotation instead of grey, and no navy band ──── */
.section--mist{background:var(--band-blue)}
.section--mist+.section+.section--mist{background:var(--band-teal)}
.section--navy{background:var(--band-violet);color:var(--ink-600)}
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--ink-hero)}
.section--navy .eyebrow{color:var(--orange-btn)}
.section--navy .btn--outline{color:var(--ink-hero);border-color:var(--ink-hero)}
.section--navy .btn--outline:hover{background:var(--ink-hero);color:#fff}
.soon__item{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.soon__item h3{color:var(--ink-hero)}
.section--navy .pill--soon{background:#FFF7ED;color:var(--warn);border-color:#F3D9B5}

/* ── Direct-contact card: warm, not navy ─────────────────────────────────── */
.card--contact{background:linear-gradient(150deg,#FFF3E9 0%,#FFE9D6 100%);
  border-color:#F6D3B4;color:var(--ink-600)}
.card--contact .eyebrow{color:var(--orange-btn)}
.card--contact h3{color:var(--ink-hero)}
.card--contact p{color:var(--ink-600)}
.card--contact .bignum{color:var(--ink-hero);font-size:1.5rem;word-break:break-word}
.card--contact .bignum:hover{color:var(--orange-btn)}
.card--contact .btn--outline{color:var(--ink-hero);border-color:var(--ink-hero)}
.card--contact .btn--outline:hover{background:var(--ink-hero);color:#fff;border-color:var(--ink-hero)}

/* a number we do not have yet, marked as such rather than invented */
.pending{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.04em;
  color:var(--warn);background:#FFF7ED;border:1px dashed #E6C79A;border-radius:var(--radius);
  padding:.5rem .8rem;display:inline-block;margin:0 0 var(--s4)}

/* ── Mobile: 80%+ of the traffic, so this is the primary layout ──────────── */
@media(max-width:760px){
  .hero{padding-block:var(--s6) var(--s7)}
  .hero::after,.hero--people::after{
    background:linear-gradient(180deg,rgba(255,252,248,.62) 0%,rgba(255,252,248,.93) 42%,rgba(255,252,248,.97) 100%)}
  .hero__media img{object-position:center 22%}
  .hero__panel{border-left-width:4px;padding-left:var(--s4)}
  .hero h1{font-size:clamp(1.85rem,8.2vw,2.4rem)}
  .hero .hero__lede{font-size:1.05rem}
  .hero__grid{gap:var(--s6)}
  /* full-width taps: a 44px minimum is the difference between a lead and a bounce */
  .hero .btn-row .btn,.card .btn-row .btn{width:100%}
  .btn{padding:1rem 1.5rem;min-height:48px}
  .btn--sm{min-height:40px}
  .section{padding-block:var(--s7)}
  .sec-head{margin-bottom:var(--s6)}
  .enq{padding:var(--s5)}
  .field input,.field select,.field textarea{font-size:16px}  /* 16px stops iOS zooming on focus */
  .field input,.field select{min-height:48px}                 /* textarea sets its own height */
  .proof__grid{grid-template-columns:repeat(2,1fr)}
  .proof__grid>div{padding:var(--s4) var(--s3)}
  .hdr__util{font-size:.75rem}
  .hdr__util .wrap{justify-content:center;gap:var(--s4);padding-block:.5rem}
  .crumbs{display:none}
  .faq details{padding:var(--s4)}
  .faq summary{font-size:.98rem}
}

/* ── Mobile hero: show the photograph, don't veil it ──────────────────────
   A background-with-scrim has to choose between a readable headline and a
   visible photograph, and on a phone the panel covers the whole frame so the
   scrim wins and the faces disappear. Mark wants the smiles seen. So on a
   phone the image comes out of the background and into the flow: a bright,
   unveiled band above the headline, with the type on clean cream underneath.
   Both things then work properly instead of fighting. */
@media(max-width:760px){
  .hero{display:flex;flex-direction:column;padding-top:0}
  .hero::after{display:none}
  .hero__media{position:relative;inset:auto;height:216px;margin-bottom:var(--s6)}
  .hero__media img{object-position:center 26%}
  .hero__panel{border-left:0;padding-left:0;border-top:5px solid var(--orange);padding-top:var(--s5)}
  .hero--inner .hero__media{height:170px}
}
/* the left column carries the type — keep the photograph off it on desktop */
@media(min-width:761px){
  .hero--people::after{
    background:
      linear-gradient(180deg, rgba(255,252,248,.20) 0%, rgba(255,252,248,.02) 50%, rgba(255,252,248,.28) 100%),
      linear-gradient(90deg,  rgba(255,252,248,.975) 0%, rgba(255,252,248,.945) 42%,
                              rgba(255,252,248,.34) 60%, rgba(255,252,248,.02) 100%);
  }
}
/* The utility bar wraps onto a second row on a phone and costs ~34px before the
   headline, so one item has to go. That used to be the phone slot — wrong now
   that it carries click-to-call, which is the single most useful thing on the
   bar for a mobile visitor. Employer Zone goes instead: it is a page link, not
   an action, and it is in the nav and the footer. */
@media(max-width:560px){ .hdr__util a[href$="contact-us/"]:first-child{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   Revision 3 — Mark, 19 August, 12:04:
     "Brand colours with splashes of colour and white background"
     "It's on its way. It's better but still a bit boring"

   Revision 2 lightened the page but did it with a borrowed pastel palette —
   blue, teal, violet — which is not his brand and is exactly what made it
   read as pleasant and inert. This reverts the ground to plain white and
   puts the colour back where it belongs: his own two oranges, used loud and
   in fewer places.

   Both oranges are used deliberately. #FF6A00 is the website's, #F09E0F is
   the logo's, and they have been running side by side unnoticed (BRAND_NOTES
   §2, open decision 4.7). Pairing them as a gradient makes the pair look
   intentional and puts the question in front of Mark rather than hiding it.

   Text on orange is near-black, never white: #FF6A00 with white text is
   2.87:1 and fails AA, while near-black on it is 6.5:1. That constraint is
   why the splash bands read as bold rather than washed out.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --cream:#FFFFFF;                    /* white ground, as asked */
  --amber:#F09E0F;                    /* the logo's orange */
  --splash:linear-gradient(115deg,#FF6A00 0%,#FF8A1F 45%,#F09E0F 100%);
  --ink-on-splash:#231202;
  --hair:#EEF0F3;
}
body,.section--mist,.section--navy,.hero{background:#fff}
.section--mist{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.section--mist+.section+.section--mist{background:#fff}

/* ── Splash: the device that carries the colour ──────────────────────────── */
.splash{background:var(--splash);color:var(--ink-on-splash);position:relative;
  overflow:hidden}

/* Mark, 23 Aug: "something a bit fruity". A silver sheen travels slowly across
   the orange panels and fades out, so they read as a lit surface rather than a
   flat block of colour.

   Three things keep this safe rather than gimmicky:

   * It is DECORATIVE. It sits in a pseudo-element behind the content, carries
     no information and takes no pointer events, so nothing is lost if a
     browser ignores it.
   * It cannot hurt legibility. Splash text is dark brown on orange, so a pale
     sheen passing under it RAISES contrast rather than lowering it — the
     opposite of the usual risk with an overlay.
   * It respects prefers-reduced-motion. The global rule at the top of this
     file already collapses animation duration; the explicit rule below removes
     the element altogether, because a sheen frozen mid-sweep is a smear.

   Long pause, short travel: it should catch the eye once and then leave the
   reader alone, not strobe. Anything faster reads as a loading state. */
.splash::before{
  content:'';position:absolute;top:-60%;bottom:-60%;left:0;width:55%;
  pointer-events:none;z-index:0;will-change:transform,opacity;
  /* No mix-blend-mode. soft-light was tried first and is almost invisible over
     a colour this saturated — the element was animating correctly and simply
     could not be seen. A straight translucent white reads as silver against
     the orange, and is predictable rather than dependent on what is behind it.
     The faint cool tint at the edges is what makes it read as metal rather
     than as a smear of white. */
  background:linear-gradient(100deg,
    rgba(255,255,255,0)    0%,
    rgba(243,247,255,.16) 30%,
    rgba(255,255,255,.44) 44%,
    rgba(255,255,255,.60) 50%,
    rgba(255,255,255,.44) 56%,
    rgba(243,247,255,.16) 70%,
    rgba(255,255,255,0)  100%);
  transform:translate3d(-130%,0,0) rotate(9deg);
  /* linear, deliberately. An ease curve is fastest through the middle of the
     travel — which is exactly when the band is over the panel — so the one
     part anybody sees is the part that whips past. */
  animation:splash-sheen 11s linear infinite}
.splash>*{position:relative;z-index:1}

/* Travel occupies the first 58% of the cycle, leaving ~4.5s of stillness before
   it comes round again. The pause is the point: a sheen that runs continuously
   stops reading as a highlight and starts reading as a loading bar. */
@keyframes splash-sheen{
  0%        {transform:translate3d(-130%,0,0) rotate(9deg);opacity:0}
  4%        {opacity:1}
  52%       {opacity:1}
  58%,100%  {transform:translate3d(250%,0,0) rotate(9deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){.splash::before{display:none}}
.splash h2,.splash h3,.splash strong{color:var(--ink-on-splash)}
.splash .eyebrow{color:#5C2E00}
.splash p{color:#3A1C03}
.splash .btn--primary{background:var(--ink-hero);border-color:var(--ink-hero);color:#fff}
.splash .btn--primary:hover{background:#000;border-color:#000}
.splash .btn--outline{color:var(--ink-on-splash);border-color:var(--ink-on-splash)}
.splash .btn--outline:hover{background:var(--ink-on-splash);color:#fff}
.splash .checks svg{color:#7A3D00}
.splash .checks li{color:#3A1C03}

/* Proof strip becomes the first splash — straight under the hero, full width */
.proof{background:var(--splash);padding-block:var(--s6);color:var(--ink-on-splash)}
.proof__grid{padding-bottom:0;gap:var(--s5)}
.proof__grid>div{background:transparent;border:0;box-shadow:none;padding:0}
.proof__grid>div+div{border-left:1px solid rgba(35,18,2,.18)}
@media(max-width:760px){.proof__grid>div+div{border-left:0}}
.proof strong,
.proof__grid>div:nth-child(1) strong,.proof__grid>div:nth-child(2) strong,
.proof__grid>div:nth-child(3) strong,.proof__grid>div:nth-child(4) strong{
  color:var(--ink-on-splash);font-size:1.75rem;font-weight:900}
.proof span{color:#4A2405;font-weight:600}

/* ── Tiles back to brand ─────────────────────────────────────────────────── */
.tile{border-radius:12px}
.tile--blue,.tile--teal,.tile--violet,.tile--amber,.tile--orange{
  background:linear-gradient(140deg,#FFF1E4 0%,#FFE3C7 100%);color:var(--orange-btn)}
.tile--teal,.tile--violet{background:linear-gradient(140deg,#FFF6E2 0%,#FDE9BE 100%);color:#96610A}

/* ── Cards with some life in them ───────────────────────────────────────── */
.card{border-color:var(--hair)}
.card--link{position:relative;overflow:hidden}
.card--link::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--splash);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.card--link:hover::before{transform:scaleX(1)}
.card--feature{background:var(--splash);border-color:transparent}
.card--feature h3,.card--feature .card__go{color:var(--ink-on-splash)}
.card--feature p{color:#3A1C03}
.card--feature .tile{background:rgba(255,255,255,.85);color:var(--orange-btn)}

/* ── Steps: big outlined numerals instead of small orange text ───────────── */
.steps .step{border-color:var(--hair);position:relative;padding-top:var(--s7)}
.step__n{position:absolute;top:.3rem;right:1rem;font-size:3.6rem;font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:2px #FFD2AC;margin:0}
@supports not (-webkit-text-stroke:2px #FFD2AC){ .step__n{color:#FFD2AC} }

/* ── "Coming to Vertiq": white, warm pills ──────────────────────────────── */
.section--navy{border-top:1px solid var(--hair)}
.soon__item{background:#fff;border:1px solid var(--hair)}
.section--navy .pill--soon{background:#FFF1E4;color:#96610A;border-color:#F6D3B4}

/* ── Hero: white ground, orange rule, warm glow behind the form ─────────── */
.hero::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 40%,
                           rgba(255,255,255,.42) 60%, rgba(255,255,255,.04) 100%);
}
@media(min-width:761px){
  .hero--people::after{
    background:
      linear-gradient(90deg, rgba(255,255,255,.975) 0%, rgba(255,255,255,.94) 40%,
                             rgba(255,255,255,.32) 58%, rgba(255,255,255,0) 100%);
  }
}
.hero__panel{border-left:0;padding-left:0}
.hero__kicker{display:inline-block;background:var(--splash);color:var(--ink-on-splash);
  padding:.45rem .9rem;border-radius:100px;margin-bottom:var(--s5);letter-spacing:.12em}
.hero__points svg{color:var(--orange)}
.enq::before{height:6px;background:var(--splash)}

/* ── Section headings: left, not everything centred down the middle ─────── */
.sec-head--left{text-align:left}
.sec-head h2::after{content:'';display:block;width:56px;height:5px;border-radius:3px;
  background:var(--splash);margin:var(--s4) 0 0}
.center.sec-head h2::after{margin-inline:auto}

/* ── A little movement on scroll. Energy, not decoration. ────────────────── */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}

@media(max-width:760px){
  .hero__panel{border-top:0;padding-top:0}
  .hero__kicker{margin-bottom:var(--s4)}
  .step__n{font-size:2.6rem;top:.2rem;right:.8rem}
  .proof strong{font-size:1.45rem}
}
/* The outlined numeral sat behind the step heading and read as a smudge. Put it
   back in the flow where the live site has it, but big and filled with the brand
   gradient so it still carries colour. */
.steps .step{padding-top:var(--s6)}
.step__n{position:static;font-size:2.6rem;font-weight:900;line-height:1;margin:0 0 var(--s3);
  -webkit-text-stroke:0;color:var(--orange-btn);
  background:var(--splash);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;display:block}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .step__n{color:var(--orange-btn);-webkit-text-fill-color:currentColor}
}
@media(max-width:760px){.step__n{font-size:2.1rem}}

/* ══ Post-meeting changes, 19 August ═══════════════════════════════════════
   Item 2: qualification pathways immediately below the hero, "rectangular and
   thinner", mobile-first. Thin is the functional requirement, not a style one —
   a thin row is what lets all three levels sit above the fold on a phone, and
   80%+ of this traffic is on a phone.
   ══════════════════════════════════════════════════════════════════════════ */
.section--tight{padding-block:var(--s7) var(--s6)}
.sec-head--tight{margin-bottom:var(--s5)}
.sec-head--left h2::after{margin-inline:0}
.measure--flush{margin-inline:0}

.paths{display:grid;gap:var(--s3)}                 /* one column first: mobile-first */
.path{display:flex;align-items:center;gap:var(--s4);text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--hair);border-left:5px solid var(--orange);
  border-radius:var(--radius);padding:var(--s4) var(--s5);min-height:74px;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease)}
.path:hover{box-shadow:var(--shadow-md);transform:translateX(3px);border-left-color:var(--amber)}
.path__lvl{flex:none;font-family:var(--display);font-weight:900;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-on-splash);background:var(--splash);
  padding:.4rem .7rem;border-radius:100px}
.path__body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.path__title{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--ink-hero);
  line-height:1.25}
.path__note{font-size:.88rem;color:var(--ink-500);line-height:1.45}
.path__go{margin-left:auto;flex:none;font-size:1.3rem;color:var(--orange-btn);transition:transform .22s var(--ease)}
.path:hover .path__go{transform:translateX(4px)}
@media(min-width:900px){
  .paths{grid-template-columns:repeat(3,1fr)}
  .path{align-items:flex-start;flex-direction:column;gap:var(--s3);padding:var(--s5);min-height:0}
  .path__go{margin-left:0;margin-top:auto}
}

/* Item 7: bigger hero headline */
.hero h1{font-size:clamp(2.35rem,5.6vw,4.1rem);line-height:1.06}
@media(max-width:760px){ .hero h1{font-size:clamp(2rem,9vw,2.7rem)} }
/* Item 7: bigger logo — still capped so the nav band does not eat the fold */
.brand img{height:76px}
@media(max-width:1040px){.brand img{height:60px}}

/* Item 8, 19 Aug: "colour accents as feature-wall touches... do not apply
   full-page colour washes". Revision 3 had two large orange areas within a
   screen of each other — the stats band and the EOR band. A feature wall is
   one wall, so the EOR proposition keeps the solid colour (it is the strongest
   commercial message on the site) and the stats band drops back to white with
   the colour carried by a top rule and the numerals. */
.proof{background:#fff;border-top:4px solid transparent;
  border-image:var(--splash) 1;border-bottom:1px solid var(--hair);
  padding-block:var(--s6);color:inherit}
.proof__grid>div+div{border-left:1px solid var(--hair)}
.proof strong,
.proof__grid>div:nth-child(1) strong{color:var(--orange-btn)}
.proof__grid>div:nth-child(2) strong{color:#1D4ED8}
.proof__grid>div:nth-child(3) strong{color:#0F766E}
.proof__grid>div:nth-child(4) strong{color:var(--warn)}
.proof span{color:var(--ink-500);font-weight:400}
@media(max-width:760px){.proof__grid>div+div{border-left:0}}

/* accent touches that break the layout up without painting a whole section */
.section--mist{background:#fff}
.section--mist .wrap{position:relative}
.card--feature{box-shadow:0 10px 30px rgba(255,106,0,.18)}

/* ══ Homepage hero, restructured after the 19 Aug meeting ══════════════════
   Form on the left, headline to its right, and every course listed inside the
   hero. Mobile keeps the headline first — a form is not an opening line, and
   80%+ of this traffic is on a phone. */
.hero__grid--flip{grid-template-columns:.95fr 1.05fr}
@media(min-width:1041px){
  .hero__grid--flip .enq{order:1}
  .hero__grid--flip .hero__panel{order:2}
}
@media(max-width:1040px){
  .hero__grid--flip{grid-template-columns:1fr}
  .hero__grid--flip .hero__panel{order:1}
  .hero__grid--flip .enq{order:2}
}
/* the picture now sits behind the copy side, so flip the legibility gradient */
@media(min-width:761px){
  .hero--home.hero--people::after{
    background:
      linear-gradient(270deg, rgba(255,255,255,.975) 0%, rgba(255,255,255,.90) 34%,
                              rgba(255,255,255,.30) 56%, rgba(255,255,255,0) 100%);
  }
  .hero--home .hero__media img{object-position:left 30%}
}

.hero__courses{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(15,23,42,.10);
  position:relative;z-index:2}
.hero__courses-lbl{font-family:var(--display);font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-500);margin:0 0 var(--s3)}
.hcourses{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hcourse{font-family:var(--display);font-weight:700;font-size:.85rem;text-decoration:none;
  color:var(--ink-hero);background:#fff;border:1px solid var(--hair);border-radius:100px;
  padding:.5rem .95rem;min-height:40px;display:inline-flex;align-items:center;
  transition:border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.hcourse:hover{border-color:var(--orange);color:var(--orange-btn);box-shadow:var(--shadow)}
@media(max-width:760px){
  .hero__courses{margin-top:var(--s6)}
  .hcourse{font-size:.8rem;padding:.45rem .8rem}
}

/* With the form on the left and the headline to its right, the two of them use
   the full width and there is nowhere left for a background photograph to be
   seen — it was reduced to a texture behind an opaque card, which defeats the
   point of choosing a picture at all. So on the homepage the photograph comes
   out of the background on every screen size, not just phones: a bright,
   unveiled band across the top of the hero, then form and headline beneath it,
   then the course list. Same treatment mobile already used, now consistent. */
@media(min-width:761px){
  .hero--home{display:flex;flex-direction:column;padding-top:0}
  .hero--home::after{display:none}
  .hero--home .hero__media{position:relative;inset:auto;height:270px;margin-bottom:var(--s7)}
  .hero--home .hero__media img{object-position:center 24%}
  .hero--home .hero__panel{border-left:0;padding-left:0}
}
@media(min-width:1041px){
  .hero--home .hero__grid--flip{grid-template-columns:1fr 1.08fr;gap:var(--s7);align-items:center}
}
/* The source is portrait, so a short wide band only shows a thin slice of it —
   at 24% that landed on the top of his head. His face sits around a third down. */
@media(min-width:761px){
  .hero--home .hero__media{height:320px}
  .hero--home .hero__media img{object-position:center 34%}
}
@media(max-width:760px){
  .hero--home .hero__media img{object-position:center 34%}
}

/* Item 2, re-read: "the qualification pathway cards" is his existing "Choose
   your pathway" section, moved to the top and made "rectangular and thinner" —
   not a new NVQ strip. The cards keep their icon tile and copy; they just lie
   down. Mobile-first: a single column of rows, which is what makes six of them
   scannable on a phone. */
.grid--rows .card{flex-direction:row;align-items:flex-start;gap:var(--s4);padding:var(--s5)}
.grid--rows .card .tile{width:44px;height:44px;margin-bottom:0}
.grid--rows .card .tile svg{width:22px;height:22px}
.grid--rows .card h3{font-size:1.02rem;margin-bottom:.35rem}
.grid--rows .card p{font-size:.92rem}
.grid--rows .card__go{margin-top:var(--s3);font-size:.78rem}
.grid--rows .card__body{min-width:0}
@media(max-width:980px){.grid--rows{grid-template-columns:1fr}}
@media(min-width:981px){.grid--rows{grid-template-columns:repeat(2,1fr)}}
/* New hero photograph, 21 Aug — engineer at a lift landing door operator. The
   subject's face sits about a quarter down the frame, so the band centres there
   rather than on the middle of the image. */
@media(min-width:761px){ .hero--home .hero__media img{object-position:center 25%} }
@media(max-width:760px){ .hero--home .hero__media img{object-position:center 27%} }
/* Team hero, 21 Aug — faces sit across the top half, so the band centres higher. */
@media(min-width:761px){ .hero--home .hero__media img{object-position:center 30%} }
@media(max-width:760px){ .hero--home .hero__media img{object-position:center 32%} }
/* Skip link — WCAG 2.4.1. The header carries a utility bar, a logo, five nav
   items and a dropdown, so a keyboard or screen-reader user otherwise tabs
   through all of it on every page before reaching the content. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink-hero);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.9rem;padding:.85rem 1.4rem;
  border-radius:0 0 var(--radius) 0;text-decoration:none}
.skip:focus{left:0}

/* ══ Homepage hero, restructured 21 Aug ═══════════════════════════════════
   Three columns over the photograph: courses left, form middle, headline
   right. The picture goes back to a full-bleed background at the scale the
   earlier versions used, faded rather than cropped into a band. */
@media(min-width:761px){
  .hero--home{display:block;padding-block:var(--s7) var(--s7)}
  .hero--home .hero__media{position:absolute;inset:0;height:auto;margin:0}
  .hero--home .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
  .hero--home::after{display:block}
}
/* "faded slightly" — a flat white veil, not a directional gradient, so the
   photograph reads evenly across all three columns instead of surviving on
   one side and disappearing on the other. */
.hero--home::after,
.hero--home.hero--people::after{
  background:linear-gradient(0deg, rgba(255,255,255,.82), rgba(255,255,255,.82));
}

/* the headline column is narrower than it was, so the type scale comes down */
.hero--home h1{font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:1.06}
.hero--home .hero__lede{font-size:1.02rem}
.hero--home .hero__points li{font-size:.95rem}
.hero--home .enq{padding:var(--s5)}
.hero--home .enq h2{font-size:1.2rem}

/* courses column: a stacked list on desktop, wrapping pills on a phone */
.hero__courses{margin:0;padding:0;border-top:0}
.hero__courses-lbl{margin-bottom:var(--s3)}
@media(min-width:1041px){
  .hcourses{flex-direction:column;gap:.4rem;flex-wrap:nowrap}
  .hcourse{width:100%;justify-content:space-between;border-radius:var(--radius);
    background:rgba(255,255,255,.86);min-height:42px}
  .hcourse::after{content:'\2192';color:var(--orange-btn);font-weight:700}
}
@media(max-width:1040px){
  /* phone order: headline first, then the ask, then what we run */
  .hero__grid--three .hero__panel{order:1}
  .hero__grid--three .enq{order:2}
  .hero__grid--three .hero__courses{order:3}
}
/* At a lighter veil the photograph shows through behind the right-hand column,
   where dark navy polos sit under dark text. A soft white pad behind that
   column keeps the headline legible without veiling the whole picture. */
@media(min-width:1041px){
  .hero__courses-lbl{text-shadow:0 1px 8px rgba(255,255,255,.9)}
}

/* ══ Hero sizing, 21 Aug ═══════════════════════════════════════════════════
   Three columns had been made to fit by shrinking everything, which left the
   type too small to read comfortably. Give the hero a wider container than the
   rest of the site instead — it is the only three-column block on the page, so
   it is the only one that needs the extra width — and put the sizes back up. */
@media(min-width:1041px){
  .hero--home .wrap{max-width:1400px}
  .hero--home h1{font-size:clamp(2.2rem,3.5vw,3.4rem);line-height:1.05}
  .hero--home .hero__lede{font-size:1.12rem}
  .hero--home .hero__points li{font-size:1.02rem}
  .hero--home .hero__reassure{font-size:.95rem}
  .hero--home .enq{padding:var(--s6)}
  .hero--home .enq h2{font-size:1.38rem}
  .hero--home .enq>p{font-size:1rem}
  .hero--home .field label{font-size:.9rem}
  .hero--home .enq__small{font-size:.85rem}
  .hero--home .hero__courses-lbl{font-size:.8rem}
  .hero--home .hcourse{font-size:.95rem;min-height:48px;padding:.6rem 1rem}
  .hero--home .hero__kicker{font-size:.82rem}
}

/* ══ Hero grid — defined once, widest first ═══════════════════════════════
   Three columns need roughly 1280px before each one is comfortable. Below
   that the form and the headline keep the width and the course list becomes
   a full-width row of pills underneath, rather than squeezing all three. */
.hero__grid--three{align-items:start}

@media(min-width:1281px){
  .hero__grid--three{grid-template-columns:.66fr 1.06fr 1.28fr;gap:var(--s5)}
}
@media(min-width:1041px) and (max-width:1280px){
  .hero--home .wrap{max-width:none;padding-inline:var(--s6)}
  .hero__grid--three{grid-template-columns:1fr 1.15fr;gap:var(--s5)}
  .hero__grid--three .enq{order:1}
  .hero__grid--three .hero__panel{order:2}
  .hero__grid--three .hero__courses{grid-column:1 / -1;order:3;margin-top:var(--s3)}
  .hero--home .hcourses{flex-direction:row;flex-wrap:wrap;gap:var(--s2)}
  .hero--home .hcourse{width:auto;border-radius:100px;justify-content:center}
  .hero--home .hcourse::after{content:none}
  .hero--home h1{font-size:clamp(2rem,3.1vw,2.9rem)}
}
@media(max-width:1040px){
  .hero__grid--three{grid-template-columns:1fr}
}

/* ══ Qualification pages, 22 Aug ══════════════════════════════════════════
   Awarding-body facts and unit lists render as real tables — this is
   reference information people will scan and compare, not prose. */
.facts{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff;
  border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden}
.facts th,.facts td{text-align:left;vertical-align:top;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--hair)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th[scope=row]{font-family:var(--display);font-weight:700;color:var(--ink-hero);
  width:15rem;background:#FCFCFD}
.facts thead th{font-family:var(--display);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-500);background:#FCFCFD}
.facts--units th[scope=row]{width:9rem}
.facts code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;
  color:var(--orange-btn)}
.facts .muted{color:var(--ink-500);font-style:italic}
@media(max-width:640px){
  .facts th[scope=row],.facts--units th[scope=row]{width:auto}
  .facts th,.facts td{padding:.7rem .8rem;font-size:.92rem}
}
/* visually hidden, still read by screen readers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* three buttons on the sticky bar now that click-to-call is back */
@media(max-width:760px){
  .sticky-cta .btn{padding:.85rem .5rem;font-size:.74rem}
  .sticky-cta .btn--outline{flex:0 0 74px}
}

/* ══ Price list page ══════════════════════════════════════════════════════ */
.price-sec{margin-bottom:var(--s5)}
.price-sec::after{content:'';display:block;width:56px;height:5px;border-radius:3px;
  background:var(--splash);margin-top:var(--s4)}
.price-grp{font-size:1.05rem;margin:var(--s6) 0 var(--s3);color:var(--ink-hero)}
.price-tbl td{vertical-align:middle}
.price-tbl td a{color:var(--ink-hero);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:3px}
.price-tbl td a:hover{color:var(--orange-btn);text-decoration-color:currentColor}
/* The four qualifications Mark prices but that have no page yet. A price with
   nothing to click reads as an unfinished site, so this is the route through. */
.price-ask{display:inline-block;margin-top:.2rem;font-family:var(--display);
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--orange-btn) !important;text-decoration:none !important}
.price-ask:hover{text-decoration:underline !important}
.price-tbl .price{font-family:var(--display);font-weight:800;color:var(--ink-hero);
  white-space:nowrap;text-align:right;width:8rem}
.price-tbl .nowrap{white-space:nowrap;color:var(--ink-500);width:9rem}
.price-tbl thead th:last-child{text-align:right}
.price-note{color:var(--ink-500);font-size:.95rem;margin-top:var(--s4)}
.section--tight + .section--tight{padding-top:0}
@media(max-width:640px){
  .price-tbl .price{width:auto}
  .price-tbl .nowrap{width:auto;font-size:.88rem}
}
/* price and duration on a course card */
.card__price{margin:var(--s3) 0 0;font-family:var(--display);font-size:1.15rem;
  color:var(--ink-hero);line-height:1.2}
.card__price span{font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--ink-500)}
.card--feature .card__price,.card--feature .card__price span{color:var(--ink-on-splash)}

/* Enquiry form: honeypot and result message.
   The honeypot sits off-canvas rather than display:none -- some bots skip
   hidden inputs. Screen readers are kept out by aria-hidden and the negative
   tabindex instead, which is what actually matters for accessibility. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{margin:var(--s3) 0 0;font-size:.9rem;line-height:1.5}
.form__status:empty{display:none}
.form__status--ok{color:var(--ok);font-weight:600}
.form__status--warn{color:var(--warn)}
.form__status--err{color:#B42318}
.form__status--err a{color:#B42318;font-weight:600}