/* Sora variable, self-hosted (Fontsource 5.3.0, OFL-1.1) - replaces Google Fonts */
@font-face{font-family:"Sora";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/sora-latin-wght.woff2) format("woff2-variations"),url(/assets/fonts/sora-latin-wght.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   MOT EXPERT - site theme
   Everard-theme recreation, rebranded MOT Expert (training).
   Decoded from everard.co.uk: dark navy industrial, full-bleed
   autoplay background-video heroes, bold-caps Inter display
   (tracking -0.04em), square buttons, 4-up tiles, dark video
   feature bands, alternating image/text rows, timeline, team
   grid, product/course detail, dark 4-col footer.
   Brand: royal blue #0360AD (verified from logo), ink, white.
   ============================================================ */
:root{
  --blue:#0360AD; --blue-light:#2E84C7; --blue-dark:#024B86; --blue-deep:#013560;
  --navy:#0B1622; --navy-2:#0F1D2E;
  --ink:#171717; --body:#5E5E5E;
  --surface:#FFFFFF; --soft:#F4F6F8; --line:#E4E8EC;
  --white:#FFFFFF;
  --maxw:1360px;
  /* Everard type system (measured from live CSS):
     body = system-ui 15/400; headings = Inter, tracking -0.03em, line-height ~1.0 */
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:clip;}
button,input,select,textarea{font-family:inherit;}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
/* any element with an inline background-image renders it cover/centred */
[style*="background-image"]{background-size:cover !important;background-position:center center !important;background-repeat:no-repeat !important;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;}
.cap{text-transform:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.kick{color:var(--blue);font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:13px;margin-bottom:12px;}
.kick.lt{color:var(--blue-light);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;
  letter-spacing:normal;text-transform:none;padding:16px 26px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;transition:.18s;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue-dark);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:var(--blue);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff;}

/* topbar - transparent over the hero, solid navy on scroll */
.topbar{position:fixed;top:0;left:0;width:100%;z-index:60;
  background:transparent;
  transition:background .3s,box-shadow .3s,border-color .3s,transform .5s cubic-bezier(.6,0,.4,1);
  border-bottom:1px solid transparent;}
.topbar.nav-hidden{transform:translateY(-100%);}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,15,25,.75) 0%,rgba(7,15,25,0) 100%);
  opacity:1;transition:opacity .3s;}
.topbar.scrolled{background:var(--navy);border-bottom-color:rgba(255,255,255,.07);box-shadow:0 6px 24px rgba(0,0,0,.25);}
.topbar.scrolled::before{opacity:0;}

/* utility bar */
.util{color:#cdd9e5;font-size:12.5px;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.12);transition:border-color .3s;}
.topbar.scrolled .util{border-bottom-color:rgba(255,255,255,.08);}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;}
.util a{color:#cdd9e5;}.util a:hover{color:#fff;}
.util .u-right{display:flex;gap:22px;align-items:center;}
.util .u-right span{display:flex;align-items:center;gap:7px;}

/* header */
header.site{background:transparent;}
.head-row{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;align-items:center;}
.brand img{height:44px;width:auto;}
nav.main{display:flex;gap:30px;}
nav.main a{color:#e8eef4;font-weight:500;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:6px 0;position:relative;}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--blue-light);transition:.2s;}
nav.main a:hover::after,nav.main a.active::after{width:100%;}
.head-cta{display:flex;align-items:center;gap:18px;}
.icns{display:flex;gap:16px;color:#cdd9e5;}
.icns svg{width:20px;height:20px;}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;}
.mobnav{display:none;background:var(--navy-2);}
.mobnav a{display:block;color:#e8eef4;padding:14px 28px;border-top:1px solid rgba(255,255,255,.06);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;}
.mobnav.open{display:block;}

/* hero (video) */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;background:var(--navy);}
.hero.short{min-height:52vh;}
.hero video,.hero .photo,.hero .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.scene{background:
  radial-gradient(120% 90% at 20% 10%,#1c3450 0%,transparent 55%),
  radial-gradient(120% 90% at 90% 90%,#08305c 0%,transparent 50%),
  linear-gradient(120deg,#0a1422 0%,#0e2236 45%,#0a1626 100%);
  animation:drift 18s ease-in-out infinite alternate;}
@keyframes drift{from{transform:scale(1.05) translate3d(0,0,0);}to{transform:scale(1.14) translate3d(-2%,-2%,0);}}
.scene::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(46,132,199,.07) 0 2px,transparent 2px 26px);
  animation:sweep 9s linear infinite;}
@keyframes sweep{from{background-position:0 0;}to{background-position:340px 0;}}
.vid-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,25,.88) 0%,rgba(7,15,25,.55) 45%,rgba(7,15,25,.25) 100%);}
.hero .wrap{position:relative;z-index:2;color:#fff;width:100%;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(14px,1.2vw,16.5px);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-light);margin-bottom:18px;}
.eyebrow::before{content:none;}
.hero h1{font-size:clamp(40px,4.8vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:18ch;margin-left:auto;margin-right:auto;}
.hero h1 .reg{font-size:.28em;vertical-align:super;font-weight:700;letter-spacing:0;}
.hero.short h1{font-size:clamp(34px,4vw,48px);max-width:26ch;}
.hero p.sub{margin:20px auto 30px;font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:64ch;color:#d4dde6;font-weight:400;}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}.breadcrumb{position:relative;z-index:2;color:#9fb3c6;font-size:13px;letter-spacing:.04em;margin-bottom:14px;}
.breadcrumb a:hover{color:#fff;}

/* intro statement */
.intro{padding:72px 0;text-align:center;}
.intro p{max-width:50ch;margin:0 auto;font-family:var(--display);font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.025em;line-height:1.3;}
.intro p .hl{color:var(--blue);}

/* stat strip */
.stats{background:var(--navy);color:#fff;}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);}
.stat{padding:52px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.08);}
.stat:last-child{border-right:0;}
.stat .n{font-size:clamp(40px,5vw,64px);font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1;}
.stat .n b{color:var(--blue-light);}
.stat .l{margin-top:12px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#9fb3c6;font-weight:700;}

/* section heading */
.sec{padding:84px 0;}
.sec.soft{background:var(--soft);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;flex-wrap:wrap;gap:14px;}
.sec-head h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;}
.sec-head.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;}

/* 4-up tiles */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.tile{position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;overflow:hidden;isolation:isolate;border-radius:12px;}
/* Everard-style interlocking collage (homepage category tiles) */
.grid4.collage{gap:8px;grid-auto-rows:200px;}
.grid4.collage .tile{min-height:0;}
.grid4.collage .tile:nth-child(1){grid-column:span 2;}
.grid4.collage .tile:nth-child(2){grid-row:span 2;}
.grid4.collage .tile:nth-child(3){grid-row:span 2;}
.grid4.collage .tile:nth-child(4){grid-column:span 2;}
.grid4.collage .tnum{display:none;}
.grid4.collage h3{font-size:26px;letter-spacing:-.02em;}
.grid4.collage .more{margin-top:6px;font-size:15px;font-weight:400;letter-spacing:normal;text-transform:none;color:#e6edf3;}
.tile .bg{position:absolute;inset:0;z-index:-2;transition:.5s;}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,15,25,.15) 0%,rgba(7,15,25,.82) 100%);}
.tile:hover .bg{transform:scale(1.08);}
.tile .tnum{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--blue-light);margin-bottom:auto;}
.tile h3{font-size:23px;letter-spacing:-.02em;}
.tile .more{margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#dfe7ee;}
.bg-a{background:linear-gradient(150deg,#0a3a6b,#0360AD 60%,#2E84C7);}
.bg-b{background:linear-gradient(150deg,#10243a,#1c4368);}
.bg-c{background:linear-gradient(150deg,#062a4f,#0b3e74);}
.bg-d{background:linear-gradient(150deg,#161f2b,#22364d);}

/* 3-col feature grid */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.feat3.four{grid-template-columns:repeat(4,1fr);gap:24px;}
.fcell .ic{width:54px;height:54px;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:18px;}
.fcell .ic svg{width:26px;height:26px;}
.fcell h3{font-size:20px;margin-bottom:10px;}
.fcell p{color:var(--body);font-size:15.5px;margin:0;}

/* alternating image/text rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
.row2 .media{min-height:420px;background:linear-gradient(150deg,#0b3e74,#0360AD);position:relative;overflow:hidden;}
.row2 .media.b{background:linear-gradient(150deg,#10243a,#1c4368);}
.row2 .media.c{background:linear-gradient(150deg,#062a4f,#0b3e74);}.row2 .txt{padding:60px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;}
.row2.flip .media{order:2;}
.row2 .txt h2{font-size:clamp(26px,3vw,38px);margin-bottom:16px;}
.row2 .txt p{color:var(--body);margin:0 0 16px;}
.row2 ul{margin:0 0 22px;padding-left:0;list-style:none;}
.row2 li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--ink);}
.row2 li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--blue);font-weight:900;}

/* feature band (2nd video) */
.feature{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:var(--navy);color:#fff;}
.feature video,.feature .photo,.feature .scene2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feature .scene2{background:radial-gradient(100% 100% at 80% 0%,#0a3766 0,transparent 55%),linear-gradient(120deg,#08111d,#0c2138);animation:drift 22s ease-in-out infinite alternate;}
.feature .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,20,.9),rgba(6,12,20,.45));}
.feature .wrap{position:relative;z-index:2;}
.feature .box{max-width:580px;}
.feature h2{font-size:clamp(34px,5vw,68px);font-weight:900;letter-spacing:-.04em;}
.feature p{margin:22px 0 30px;font-size:18px;color:#cfd9e3;max-width:48ch;}

/* card grid (courses / products) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid3.few{display:flex;flex-wrap:wrap;justify-content:center;}
.grid3.few>*{flex:0 1 calc((100% - 44px)/3);}
.card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:.2s;border-radius:15px;overflow:hidden;}
.card:hover{box-shadow:0 18px 40px rgba(11,22,34,.12);transform:translateY(-3px);}
.card .thumb{height:190px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#0b3e74,#0360AD);color:#fff;}
.card.t-b .thumb{background:linear-gradient(150deg,#10243a,#1c4368);}
.card.t-c .thumb{background:linear-gradient(150deg,#062a4f,#0b3e74);}.card .tag{position:absolute;top:14px;left:14px;background:var(--blue);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;}
.card .body{padding:22px;flex:1;display:flex;flex-direction:column;}
.card .lvl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
.card h3{font-size:20px;margin:10px 0 8px;letter-spacing:-.02em;}
.card p{color:var(--body);font-size:15px;margin:0 0 18px;}
.card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;}
.card .price{font-weight:700;font-size:17px;}
.card .price small{font-weight:600;color:var(--body);font-size:12px;}
.card .view{display:inline-flex;align-items:center;padding:9px 20px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--ink);transition:.18s;}
.card:hover .view{background:var(--ink);color:#fff;border-color:var(--ink);}

/* timeline */
.timeline{position:relative;max-width:880px;margin:0 auto;}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%);}
.tevent{position:relative;width:50%;padding:0 44px 44px;}
.tevent:nth-child(odd){left:0;text-align:right;}
.tevent:nth-child(even){left:50%;}
.tevent .dot{position:absolute;top:4px;width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 2px var(--blue);}
.tevent:nth-child(odd) .dot{right:-8px;}
.tevent:nth-child(even) .dot{left:-8px;}
.tevent .yr{font-size:26px;font-weight:900;color:var(--blue);letter-spacing:-.03em;}
.tevent h3{font-size:18px;margin:4px 0 6px;}
.tevent p{color:var(--body);font-size:15px;margin:0;}

/* team grid */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.member{text-align:center;}
.member .ph{width:120px;height:120px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(150deg,#0b3e74,#0360AD);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:30px;letter-spacing:-.02em;}
.member h3{font-size:17px;}
.member .role{color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.04em;margin-top:3px;}
.member p{color:var(--body);font-size:14px;margin:8px 0 0;}

/* accreditation badges */
.badges{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.badge{border:1px solid var(--line);padding:18px 28px;font-weight:900;letter-spacing:.06em;color:var(--ink);font-size:18px;}
.badge small{display:block;font-size:11px;font-weight:700;color:var(--body);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;}

/* course detail */
.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;padding:64px 0;}
.detail .media{position:sticky;top:104px;}
.detail .media .big{aspect-ratio:4/3;background:linear-gradient(150deg,#0b3e74,#0360AD);display:flex;align-items:center;justify-content:center;color:#fff;}
.detail .media .big svg{width:120px;height:120px;}
.detail .lvl{color:var(--blue);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(14px,1.2vw,17px);}
.detail h1{font-size:clamp(30px,4vw,46px);margin:10px 0 16px;letter-spacing:-.03em;}
.detail .lede{font-size:19px;color:var(--ink);margin-bottom:24px;}
.specbox{border:1px solid var(--line);padding:26px;margin-bottom:24px;}
.specbox .price{font-size:30px;font-weight:900;letter-spacing:-.03em;}
.specbox .price small{font-size:13px;font-weight:600;color:var(--body);}
.specrow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;}
.specrow:last-of-type{border-bottom:0;}
.specrow b{font-weight:700;}
.detail h2{font-size:24px;margin:30px 0 14px;}
.detail ul.checks{list-style:none;padding:0;margin:0 0 16px;}
.detail ul.checks li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--ink);}
.detail ul.checks li::before{content:"\2713";position:absolute;left:0;color:var(--blue);font-weight:900;}

/* FAQ accordion */
.faq{max-width:860px;margin:0 auto;}
.qa{border-bottom:1px solid var(--line);}
.qa button{width:100%;text-align:left;background:none;border:0;padding:22px 0;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;}
.qa button .pm{color:var(--blue);font-size:26px;font-weight:400;transition:.2s;flex-shrink:0;}
.qa.open button .pm{transform:rotate(45deg);}
.qa .ans{max-height:0;overflow:hidden;transition:.3s;color:var(--body);}
.qa.open .ans{max-height:400px;padding-bottom:22px;}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.cinfo .line{display:flex;gap:14px;margin-bottom:20px;}
.cinfo .line svg{width:22px;height:22px;color:var(--blue);flex-shrink:0;margin-top:3px;}
.cinfo .line b{display:block;}
.form label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px;color:var(--ink);}
.form input,.form select,.form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:0;font-family:inherit;font-size:15px;margin-bottom:18px;background:#fff;}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);border-color:var(--blue);}
.mapbox{height:300px;background:linear-gradient(150deg,#10243a,#1c4368);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);margin-top:30px;}

/* news */
.npost{background:#fff;border:1px solid var(--line);}
.npost .nt{height:170px;background:linear-gradient(150deg,#0b3e74,#0360AD);}
.npost.t-b .nt{background:linear-gradient(150deg,#10243a,#1c4368);}
.npost.t-c .nt{background:linear-gradient(150deg,#062a4f,#0b3e74);}
.npost .nb{padding:22px;}
.npost .date{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;}
.npost h3{font-size:19px;margin:10px 0;letter-spacing:-.02em;}
.npost p{color:var(--body);font-size:14.5px;margin:0 0 14px;}
.npost .rm{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:40px;}
.pagination a{width:42px;height:42px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;}
.pagination a.on{background:var(--blue);color:#fff;border-color:var(--blue);}

/* article */
.article{max-width:760px;margin:0 auto;padding:64px 0;}
.article .meta{color:var(--blue);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-bottom:14px;}
.article h1{font-size:clamp(30px,4vw,48px);margin-bottom:24px;letter-spacing:-.03em;}
.article p{color:#33414e;margin:0 0 22px;font-size:18px;line-height:1.7;}
.article .img{aspect-ratio:16/9;background:linear-gradient(150deg,#0b3e74,#0360AD);margin:34px 0;}

/* cta band */
.ctaband{background:var(--blue);color:#fff;padding:70px 0;text-align:center;}
.ctaband h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.03em;}
.ctaband p{margin:16px auto 28px;max-width:50ch;color:#e7f0fa;font-size:18px;}

/* footer */
footer.site{background:var(--navy);color:#9fb3c6;padding:0;font-size:14.5px;}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
footer.site .brand img{height:42px;margin-bottom:18px;}
footer.site h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;}
footer.site ul{list-style:none;margin:0;padding:0;}
footer.site li{margin-bottom:10px;}
footer.site a:hover{color:var(--blue-light);}
.fcontact p{margin:6px 0;color:#bccbd9;}
.accred{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.accred span{border:1px solid rgba(255,255,255,.2);padding:7px 12px;font-size:11px;font-weight:800;letter-spacing:.1em;color:#cdd9e5;}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:14px;font-size:13px;}
.social{display:flex;gap:14px;}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;}
.social svg{width:16px;height:16px;}

@media(max-width:980px){
  nav.main,.util .u-right{display:none;}
  .burger{display:block;}
  .grid4{grid-template-columns:repeat(2,1fr);}
  .feat3,.feat3.four,.grid3{grid-template-columns:1fr;}
  .grid3.few>*{flex:1 1 100%;}
  .stats .wrap{grid-template-columns:1fr;}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);}
  .row2,.detail,.contact-grid{grid-template-columns:1fr;}
  .row2.flip .media{order:0;}
  .detail .media{position:static;}
  .team{grid-template-columns:repeat(2,1fr);}
  .fgrid{grid-template-columns:1fr 1fr;}
  .timeline::before{left:8px;}
  .tevent{width:100%;left:0 !important;text-align:left !important;padding-left:40px;padding-right:0;}
  .tevent .dot{left:0 !important;right:auto !important;}
}

/* ===================== FUTURE LAYER v2 — motion & depth ===================== */
/* Glass header on scroll (modern) */
.topbar.scrolled{background:rgba(9,18,29,.70);backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);box-shadow:0 12px 34px rgba(0,0,0,.30);}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--blue-light),transparent);opacity:0;transition:opacity .35s;}
.topbar.scrolled::after{opacity:.9;}

/* Richer hero overlay + blue glow rising from below (pure CSS, no markup) */
.vid-overlay{background:linear-gradient(90deg,rgba(6,13,23,.9) 0%,rgba(6,16,30,.55) 45%,rgba(3,40,86,.25) 100%);}
.hero::after,.feature::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(85% 70% at 50% 135%,rgba(3,96,173,.45),transparent 60%);}

/* Buttons: gradient + glow + lift */
.btn-blue{background:linear-gradient(135deg,#0a72c4,#024b86);box-shadow:0 6px 18px rgba(3,96,173,.30);}
.btn-blue:hover{background:linear-gradient(135deg,#0c7ed8,#0360AD);box-shadow:0 12px 32px rgba(3,96,173,.5);transform:translateY(-2px);}
.btn-ghost:hover,.btn-outline:hover,.btn-ink:hover{transform:translateY(-2px);}

/* Gradient numerals on stats */
.stat .n,.stat .n b{background:linear-gradient(135deg,#ffffff,#7fb4e3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* Aurora depth in dark bands */
.stats,.feature{position:relative;}
.stats::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 120% at 15% 0%,rgba(46,132,199,.18),transparent 60%),radial-gradient(60% 120% at 85% 100%,rgba(3,96,173,.22),transparent 60%);}
.stats .wrap{position:relative;z-index:1;}

/* Card / tile hover polish */
.card{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.tile .bg{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.tile:hover .bg{transform:scale(1.1);}

@media (prefers-reduced-motion: no-preference){
  /* Scroll reveal — .reveal is added by site.js; if JS never runs the class is absent, so content stays visible */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  /* Gentle glow pulse in the stat band (opacity only — no movement) */
  .stats::after{animation:aurora 14s ease-in-out infinite alternate;}
  @keyframes aurora{0%{opacity:.45;}100%{opacity:.9;}}
}

/* ------------------------------------------------------------------
   HEADER CLEARANCE 2026-09-03 (matched to motcg-site).
   The fixed header (utility bar + nav) overlapped the hero eyebrow/H1.
   Give the hero top padding so centred content clears the header. ------ */
.hero{padding-top:132px;padding-bottom:56px;}
@media(max-width:1024px){ .hero{padding-top:104px;padding-bottom:44px;} }
@media(max-width:820px){ .hero{padding-top:92px;padding-bottom:40px;min-height:auto;} }

/* ------------------------------------------------------------------
   TIGHTEN VERTICAL RHYTHM + button polish 2026-09-03 (matched to motcg) */
.sec,.sec.soft{padding:58px 0;}
.intro{padding:44px 0;}
.ctaband{padding:60px 0;}
.row2 .txt{padding:44px clamp(24px,4vw,56px);}
.feat3{gap:24px;}
.sec-head{margin-bottom:30px;}
.btn{font-size:15px;letter-spacing:normal;padding:16px 26px;font-weight:500;
  transition:transform .16s ease, background .18s ease, box-shadow .18s ease;}
.btn-blue:hover{transform:translateY(-2px);}
.btn-outline:hover,.btn-ghost:hover{transform:translateY(-2px);}
@media(max-width:820px){
  .sec,.sec.soft{padding:40px 0;}
  .ctaband{padding:42px 0;}
  .intro{padding:32px 0;}
  .row2 .txt{padding:32px 20px;}
}

/* ---- Falling Sky, the MOT Expert brand face (installed 2026-09-04) ---------
   Kim supplied the family 2026-09-04; Ben is buying the web licence before this
   goes live (his decision, taken with the licence position stated). Four cuts
   only - the design uses regular, semibold, bold and the black-oblique slogan
   voice; the family ships 26. -------------------------------------------- */
:root{
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---- Footer matched to motcg-site (Ben 2026-09-04: "sorting on both") -----
   Everard's two-column asymmetry with a right-aligned link list. Spacing uses an
   explicit grid gap rather than margins, because the first cut had gaps of
   16/21/0/26px - the 0 was a collapsed margin jamming the trust badge against
   the contact block. ------------------------------------------------------ */
footer.site .fnew{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;
  padding:64px 0 52px;align-items:start;}
.fnew-brand{display:grid;justify-items:start;gap:20px;align-content:start;}
.fnew-seal{width:130px;height:auto;display:block;margin:0;}
.fnew-name{font-family:var(--display);font-weight:900;font-size:19px;
  letter-spacing:-.01em;color:#fff;margin:0;}
.fnew-contact{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.fnew-contact li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;
  line-height:1.5;color:var(--body);}
.fnew-contact a{color:var(--body);text-decoration:none;}
.fnew-contact a:hover{color:#fff;}
.fi{width:16px;height:16px;flex:0 0 16px;margin-top:2px;}
.fnew-contact .fi{color:var(--blue-light,#2F91C9);}
.fnew-trust{margin:0;}
.fnew-trust-line{display:inline-block;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#9aa7b4;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 15px;}
.fnew-links{display:flex;flex-direction:column;align-items:flex-end;gap:22px;}
.fnew-social{display:flex;gap:14px;margin:0;}
.fnew-social a{color:#fff;opacity:.85;transition:.16s;}
.fnew-social a:hover{opacity:1;color:var(--blue-light,#2F91C9);}
.fnew-social .fi{width:19px;height:19px;flex:0 0 19px;margin:0;}
.fnew-links ul{list-style:none;margin:0;padding:0;text-align:right;display:block;column-count:2;column-gap:30px;}
.fnew-links ul li{margin-bottom:9px;break-inside:avoid;}
.fnew-links a{color:var(--body);text-decoration:none;font-size:14.5px;transition:.16s;}
.fnew-links a:hover{color:#fff;}
.fnew-bar{border-top:1px solid var(--line);padding:20px 0;}
.fnew-bar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;}
.fnew-bar span,.fnew-bar a{font-size:12.5px;color:#8E8888;text-decoration:none;}
.fnew-bar a:hover{color:#fff;}
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;gap:32px;padding:48px 0 36px;text-align:center;}
  .fnew-brand{justify-items:center;gap:18px;}
  .fnew-contact li{justify-content:center;text-align:left;}
  .fnew-links{align-items:center;}
  .fnew-links ul{text-align:center;}
  .fnew-bar .wrap{justify-content:center;text-align:center;}
}

/* ---- Footer right-column compaction, matched to motcg-site 2026-09-04 ----- */
footer.site .fnew{grid-template-columns:1.15fr .85fr;gap:40px;}
.fnew-links{align-self:start;gap:18px;}
.fnew-links ul{gap:7px;}
.fnew-links a{font-size:14px;line-height:1.3;}
.fnew-social{gap:12px;}
.fnew-seal{width:112px;}

/* ---- Hero video: same compositor treatment as motcg-site's montage --------
   This site's hero is a <video> rather than a cross-fading montage, but the same
   principle applies: give it its own layer so decoding does not compete with
   scroll paint, and contain the hero's paint work. ----------------------- */
.hero{contain:paint;}
.hero video{transform:translateZ(0);backface-visibility:hidden;}
@media (prefers-reduced-motion: reduce){
  .hero video{transform:none;}
}

/* ---- Junction + footer compaction, matched to motcg-site 2026-09-05 ------- */
.sec + .sec, .sec + .sec.soft, .sec.soft + .sec, .sec.soft + .sec.soft,
.intro + .stats, .hero + .sec, .row2 + .sec, .row2 + .sec.soft,
.sec + .ctaband, .sec.soft + .ctaband{padding-top:26px;}
.ctaband{padding:48px 0;}
footer.site .fnew{padding:42px 0 34px;gap:32px;}
.fnew-brand{gap:15px;}
.fnew-seal{width:96px;}
.fnew-contact{gap:8px;}
.fnew-contact li{font-size:14px;}
.fnew-trust-line{font-size:10.5px;padding:6px 10px;}
.fnew-links{gap:14px;}
.fnew-links ul{gap:5px;}
.fnew-social{gap:11px;}
.fnew-bar{padding:13px 0;}
@media(max-width:820px){
  footer.site .fnew{padding:34px 0 26px;gap:24px;}
}

/* footer decisive shrink, matched to motcg-site 2026-09-05 */
footer.site .fnew{padding:40px 0 30px;gap:28px;}
.fnew-brand{gap:12px;}
.fnew-seal{width:60px;}
.fnew-contact{gap:6px;}
.fnew-contact li{font-size:13.5px;line-height:1.4;}
.fi{width:14px;height:14px;flex:0 0 14px;margin-top:2px;}
.fnew-trust-line{font-size:10px;padding:5px 9px;letter-spacing:.06em;}
.fnew-links{gap:12px;}
.fnew-social{gap:10px;}
.fnew-social .fi{width:16px;height:16px;flex:0 0 16px;}
.fnew-links ul{gap:3px;}
.fnew-links a{font-size:13.5px;line-height:1.35;}
.fnew-bar{padding:10px 0;}
.fnew-bar span,.fnew-bar a{font-size:12px;}

/* ---- Process pipeline (the TIR-site draw-path pattern) 2026-09-05 ---------
   Ben: "we can do one for the processes like we done on our tir site."
   A path draws itself left to right; each stage pops in as it arrives; the
   final node lands pass-green with a pulse. All animation is gated behind
   .reveal.in from site.js, so it fires when scrolled into view, once. ------ */
.process-flow{margin-top:6px;}
.process-flow svg{width:100%;height:auto;display:block;overflow:visible;}
.pp-draw{stroke-dasharray:880;stroke-dashoffset:880;}
.process-flow.in .pp-draw{animation:ppDraw 2.6s cubic-bezier(.4,0,.2,1) .2s forwards;}
@keyframes ppDraw{to{stroke-dashoffset:0;}}
.pp-stage{opacity:0;transform-origin:center;transform-box:fill-box;}
.process-flow.in .s1{animation:ppIn .55s cubic-bezier(.16,1,.3,1) .15s forwards;}
.process-flow.in .s2{animation:ppIn .55s cubic-bezier(.16,1,.3,1) .95s forwards;}
.process-flow.in .s3{animation:ppIn .55s cubic-bezier(.16,1,.3,1) 1.75s forwards;}
.process-flow.in .s4{animation:ppIn .55s cubic-bezier(.16,1,.3,1) 2.55s forwards;}
@keyframes ppIn{from{opacity:0;transform:scale(.55) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}}
.process-flow.in .pp-pulse{animation:ppPulse 2.4s ease-out 3.2s infinite;}
@keyframes ppPulse{0%{filter:drop-shadow(0 0 0 rgba(31,122,69,.7));}
  60%{filter:drop-shadow(0 0 14px rgba(31,122,69,.0));}
  100%{filter:drop-shadow(0 0 0 rgba(31,122,69,0));}}
.pp-labels{position:relative;margin-top:8px;min-height:88px;}
.pp-label{opacity:0;position:absolute;top:0;width:220px;text-align:center;
  transform:translate(-50%,10px);transition:opacity .6s ease,transform .6s ease;}
.process-flow.in .pp-label{opacity:1;transform:translate(-50%,0);}
.process-flow.in .pp-label:nth-child(1){transition-delay:.35s;}
.process-flow.in .pp-label:nth-child(2){transition-delay:1.15s;}
.process-flow.in .pp-label:nth-child(3){transition-delay:1.95s;}
.process-flow.in .pp-label:nth-child(4){transition-delay:2.75s;}
.pp-label strong{display:block;color:var(--ink);font-family:var(--display);
  font-weight:800;font-size:16px;margin-bottom:3px;}
.pp-label span{font-size:13px;color:var(--body);line-height:1.45;display:block;max-width:24ch;}
.pp-label:nth-child(1){left:6%;}
.pp-label:nth-child(2){left:35.3%;}
.pp-label:nth-child(3){left:64.7%;}
.pp-label:nth-child(4){left:94%;}
.pp-label span{margin-left:auto;margin-right:auto;}
@media(max-width:820px){
  .process-flow svg{display:none;}
  .pp-labels{min-height:0;margin-top:0;}
  .pp-label{opacity:1;position:static;width:auto;transform:none;text-align:center !important;padding:14px 0 !important;
    border-left:0;border-bottom:1px solid var(--line);}
  .pp-label:last-child{border-bottom:0;}
  .pp-label span{margin:0 auto;}
}
@media (prefers-reduced-motion: reduce){
  .pp-draw{stroke-dashoffset:0;animation:none !important;}
  .pp-stage{opacity:1;animation:none !important;}
  .pp-label{opacity:1;transform:translate(-50%,0);transition:none;}
  .pp-pulse{animation:none !important;}
}


/* ---- WCAG AA contrast pass, matched (axe: 501 nodes, same token causes) --- */
:root{--blue-light:#3D9FD6;}
.fnew-trust-line,.fnew-bar span,.fnew-bar a,.pp-label span{color:#9A9494;}
.ctaband p,.ctaband .lede,.ctaband .kick{color:#E7F0F8;}

/* contrast pass 2 (axe): this site is LIGHT-bodied with a NAVY footer, so the
   footer classes ported from motcg resolved var(--body) to light-theme grey
   #5e5e5e on navy (2.8:1), and pass 1's #9A9494 landed on WHITE pages (2.98).
   Site-appropriate values: footer text takes the navy-tuned grey; pipeline
   labels revert to the body grey that passes on white. */
.fnew-contact li,.fnew-contact a,.fnew-links a{color:#9fb3c6;}
.fnew-trust-line,.fnew-bar span,.fnew-bar a{color:#9fb3c6;}
.fnew-contact a:hover,.fnew-links a:hover,.fnew-bar a:hover{color:#fff;}
.pp-label span{color:#5E5E5E;}

/* narrow screens: hero type scales down instead of clipping */
@media(max-width:640px){
  .hero h1{font-size:clamp(28px,10.5vw,44px);max-width:100%;}
  .hero.short h1{font-size:clamp(24px,9vw,38px);max-width:100%;}
}

/* scale-up pass (Ben 2026-09-06): bigger type, use the page width */
.btn{font-size:16px;padding:17px 28px;}
.card p{font-size:16px;}
.card h3{font-size:21px;}
.hero p.sub{font-size:clamp(16px,1.25vw,18.5px);}
.kick{font-size:14px;}
h2.cap, .sec-head h2{font-size:clamp(30px,3.2vw,44px);}
.fnew-links a, .fnew-contact li{font-size:15px;}
@media(max-width:640px){
  .fnew-links ul{column-count:1;}
}

/* Request a Callback modal */
.cb-overlay{position:fixed;inset:0;z-index:200;background:rgba(7,15,25,.66);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.cb-overlay[hidden]{display:none;}
.cb-modal{background:#fff;color:#17222E;border-radius:15px;max-width:430px;width:100%;
  padding:34px 32px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.cb-modal h3{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;color:#17222E;}
.cb-modal .cb-sub{color:#43535F;font-size:15.5px;line-height:1.55;margin:0 0 12px;}
.cb-modal .cb-talk{margin:0 0 20px;}
.cb-modal .cb-talk strong{color:#17222E;}
.cb-modal .cb-sub a{color:var(--blue,#0360AD);font-weight:700;text-decoration:none;}
.cb-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:28px;
  line-height:1;color:#17222E;cursor:pointer;padding:4px;}
.cb-form{display:grid;gap:14px;}
.cb-form label{display:block;font-size:14px;font-weight:600;color:#17222E;}
.cb-form input,.cb-form select{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid #CBD5DE;border-radius:10px;font-family:inherit;font-size:16px;
  background:#fff;color:#17222E;}
.cb-form .btn{width:100%;justify-content:center;margin-top:4px;}
.cb-done{font-size:16px;color:#17222E;margin:8px 0 0;}

/* sticky mobile action bar - tap to call or request a callback */
.actionbar{display:none;}
@media(max-width:820px){
  .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;gap:1px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(9,14,22,.94);backdrop-filter:blur(8px);}
  .actionbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 10px;font-size:15.5px;font-weight:600;text-decoration:none;border-radius:12px;}
  .actionbar .ab-call{background:#1F9E5A;color:#fff;margin-right:9px;}
  .actionbar .ab-cb{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);}
  body{padding-bottom:76px;}
}

/* trust strip under the hero */
.truststrip{background:#0B1622;border-bottom:1px solid rgba(255,255,255,.08);}
.truststrip .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:12px 22px;padding-top:16px;padding-bottom:16px;}
.ts-badge{display:inline-flex;align-items:center;font-size:13.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--blue-light,#2F91C9);white-space:nowrap;}
.ts-fact{font-size:14.5px;font-weight:600;color:#e6edf3;}
.ts-quote{font-size:14.5px;font-style:italic;color:#cfdae4;}
.ts-quote cite{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8fa5b8;margin-left:8px;}
@media(max-width:640px){ .ts-quote{display:none;} .ts-fact{font-size:13.5px;} }
/* course-card price CTA */
.price-cta{font-size:15px;font-weight:700;color:var(--blue,#0360AD);text-decoration:none;}

/* fluid sizing pass 2026-09-06: labels and card type scale with the viewport */
.kick{font-size:clamp(14px,1.2vw,16.5px);font-weight:700;}
.card .lvl{font-size:clamp(12px,.95vw,13.5px);}
.card h3{font-size:clamp(18px,1.5vw,21px);}
.card p{font-size:clamp(14.5px,1.15vw,16px);}
.tile h3{font-size:clamp(20px,1.8vw,26px);}
.pp-label strong{font-size:clamp(15px,1.2vw,17px);}
.stat .l{font-size:clamp(12px,1vw,13.5px);}
/* header CTA: never wraps - hide on small screens (mobile nav + action bar carry it) */
@media(max-width:860px){ .head-cta .btn{display:none;} }

/* mobile buttons: centred text, larger (full-width CTAs read left+small otherwise) */
@media(max-width:820px){
  .btn{justify-content:center;text-align:center;font-size:17px;}
}

/* text links bigger, decorative arrows off (house rule) */
.more-link,.tile-go,.npost .rm,.fcell .more-link{font-size:15.5px;}
.tile-go::after,.more-link::after,.npost .rm::after,.tile .more::after,.btn.arrow::after,.btn .arrow::after{content:none;}
.tu-card h3{font-size:clamp(22px,2vw,27px);}

/* footer: logo flush left + bigger; accreditation as highlighted text */
.fnew-seal{margin:0;justify-self:start;}
.fnew-trust-line{border:0;border-radius:0;padding:0;font-size:13px;font-weight:700;
  letter-spacing:.09em;color:var(--blue-light,#4a9fd8);}

/* footer brand: logo in its own column, text in the next */
.fnew-brand{display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:10px;align-items:start;}
.fnew-seal{grid-column:1;grid-row:1 / span 4;width:150px;margin:0;}
.fnew-name,.fnew-contact,.fnew-trust{grid-column:2;}
@media(max-width:820px){
  .fnew-brand{grid-template-columns:1fr;justify-items:center;}
  .fnew-seal{grid-row:auto;grid-column:1;margin:0 auto;}
  .fnew-name,.fnew-contact,.fnew-trust{grid-column:1;}
}

/* footer split into 4 even columns: logo | contact | links x2 */
footer.site .fnew{grid-template-columns:1.15fr 1fr;gap:40px;}
.fnew-links{align-items:stretch;}
.fnew-links ul{text-align:left;width:100%;column-gap:56px;}
.fnew-links li{text-align:left;}
.fnew-social{justify-content:flex-end;}
@media(max-width:820px){
  .fnew-links ul{text-align:center;column-count:1;}
  .fnew-social{justify-content:center;}
}

/* hero CTAs: bigger buttons */
.hero .cta-row .btn{font-size:clamp(16px,1.3vw,18.5px);padding:18px 32px;font-weight:600;}

/* trust logo band: badge lockups (official logo files drop into these slots) */
.ts-logos{gap:18px 44px;}
.ts-logo{display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--blue-light,#4a9fd8);}
.ts-logo svg{width:52px;height:52px;}
.ts-logo b{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#dfe7ee;white-space:nowrap;}
.truststrip .wrap{flex-direction:column;gap:14px;padding-top:26px;padding-bottom:22px;}
.ts-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 34px;}
@media(max-width:640px){ .ts-logo svg{width:42px;height:42px;} .ts-logos{gap:14px 22px;} }

/* hero opened up: everything else scaled, the hero must lead the page */
.hero h1{font-size:clamp(46px,5.8vw,76px);max-width:20ch;}
.hero-head .hh-heavy{font-size:clamp(44px,5.6vw,74px);}
.hero-head .hh-light{font-size:clamp(24px,2.8vw,38px);}
.hero p.sub{font-size:clamp(17px,1.4vw,20px);max-width:60ch;}
.hero.short h1{font-size:clamp(38px,4.6vw,56px);max-width:26ch;}
@media(max-width:640px){
  .hero h1,.hero-head .hh-heavy{font-size:clamp(32px,11vw,46px);}
}

/* section colour blending: light theme eases between white / soft / navy bands */
.truststrip{background:linear-gradient(180deg,#070D1A 0%,#0B1622 100%);}
.stats{background:linear-gradient(180deg,#0B1622 0%,#10233c 55%,#0B1622 100%);}
.sec.soft{background:linear-gradient(180deg,#F2F5F8 0%,#F8FAFC 100%);}
.feature{background:linear-gradient(170deg,#0a3e6e 0%,#0B1622 70%);}
footer.site{background:linear-gradient(180deg,#101c2c 0%,#0B1622 100%);}

/* footer alignment pass: logo bigger, all columns share one top line */
.fnew-seal{width:170px;}
.fnew-name{font-size:20px;line-height:1.2;margin:0;}
footer.site .fnew{align-items:start;}
.fnew-brand{align-content:start;row-gap:12px;}
.fnew-links{gap:14px;justify-content:flex-start;}
.fnew-social{margin:0 0 2px;}

/* ------------------------------------------------------------------
   2026-09-06 live review, round 2 (mirrored from motcg) */

/* buttons: label always centred, type up a step everywhere */
.btn{justify-content:center;text-align:center;font-size:17px;}
.hero .cta-row .btn{font-size:clamp(17px,1.4vw,19.5px);}

/* header: permanently sticky - never slides away on scroll down */
.topbar.nav-hidden{transform:none;}

/* process strip: bigger titles, bigger info lines */
.pp-label{width:260px;}
.pp-label strong{font-size:clamp(18px,1.5vw,21px);margin-bottom:6px;}
.pp-label span{font-size:clamp(14.5px,1.15vw,16.5px);max-width:26ch;line-height:1.5;}
.pp-labels{min-height:108px;}

/* CTA band outline button: white with blue text - visible on the blue */
.ctaband .btn-outline{background:#fff;color:var(--blue,#0360AD);border-color:#fff;}
.ctaband .btn-outline:hover{background:#eaf3fb;color:var(--blue-dark,#024b86);border-color:#eaf3fb;}

/* footer links column: list tops out level with the logo/contact info */
.fnew-links{display:flex;flex-direction:column;}
.fnew-links ul{order:1;}
.fnew-links .fnew-social,.fnew-social{order:2;justify-content:flex-start;margin:6px 0 0;}
@media(max-width:820px){ .fnew-social{justify-content:center;} }

/* real accreditation logos: recoloured to brand blue, transparent ground,
   equal heights so the row reads as one family */
.ts-logo .chip{background:transparent;border-radius:0;padding:0;display:flex;
  align-items:center;justify-content:center;min-height:64px;min-width:0;box-shadow:none;}
.ts-logo .chip img{height:52px;width:auto;max-width:none;display:block;}
@media(max-width:640px){
  .ts-logo .chip{min-height:48px;}
  .ts-logo .chip img{height:40px;}
}

/* trust strip alignment: every mark shares the roundels' 52px icon box,
   row bottom-aligned so all labels sit on one line */
.ts-logos{align-items:flex-end;}
.ts-logo .chip{min-height:0;}
@media(max-width:640px){ .ts-logo .chip{min-height:0;} }

/* crafted roundels up to the logos'' visual weight */
.ts-logo svg{width:62px;height:62px;}
@media(max-width:640px){ .ts-logo svg{width:48px;height:48px;} }

/* header up a size: logo more visible */
.head-row{height:98px;}
.brand img{height:66px;}
.topbar.scrolled .head-row{height:84px;}
.topbar.scrolled .brand img{height:56px;}
@media(max-width:980px){
  .head-row{height:86px;}
  .brand img{height:56px;}
  .topbar.scrolled .head-row{height:76px;}
  .topbar.scrolled .brand img{height:50px;}
}

/* trust strip breathing room: wider gaps between marks, deeper band padding */
.truststrip .wrap{gap:26px;padding-top:44px;padding-bottom:38px;}
.ts-logos{gap:26px 72px;}
.ts-row{gap:16px 48px;}
.ts-logo{gap:14px;}
@media(max-width:640px){
  .truststrip .wrap{gap:20px;padding-top:32px;padding-bottom:28px;}
  .ts-logos{gap:20px 32px;}
}

/* fact line up a size */
.ts-fact{font-size:clamp(18px,1.6vw,22px);font-weight:600;}

/* marks spread the full row width */
.ts-logos{justify-content:space-between;width:100%;}
@media(max-width:820px){ .ts-logos{justify-content:center;} }

/* mobile: marks stack vertically, centred */
@media(max-width:640px){
  .ts-logos{flex-direction:column;align-items:center;gap:24px;}
}

/* utility bar: bigger, more obvious */
.util{font-size:15px;letter-spacing:.06em;font-weight:700;color:#e8eef4;}
.util .wrap{height:48px;}
.util a{color:#e8eef4;}
.util a:hover{color:var(--blue-light,#2F91C9);}

/* trust strip labels up a size */
.ts-logo b{font-size:15.5px;letter-spacing:.06em;}
@media(max-width:640px){ .ts-logo b{font-size:14px;} }

/* strip fits one line: marks share the row evenly, labels wrap under
   their icon instead of stretching the row */
.ts-logos{flex-wrap:nowrap;gap:20px 26px;}
.ts-logos .ts-logo{flex:1 1 0;min-width:0;}
.ts-logo b{white-space:normal;text-align:center;line-height:1.3;}
.ts-logo .chip img{height:46px;max-width:100%;object-fit:contain;}
.ts-logo svg{width:56px;height:56px;flex:0 0 auto;}
@media(max-width:900px){ .ts-logos{flex-wrap:wrap;} .ts-logos .ts-logo{flex:0 1 auto;} }
@media(max-width:640px){ .ts-logos{flex-direction:column;align-items:center;} }

/* card/section text links: bigger, more obvious (the "Our services /
   motexpert.org / Request a demo" row is these) */
.more-link,.tile-go,.npost .rm,.fcell .more-link{font-size:17.5px;font-weight:700;}

/* intro statement: wide enough to sit on two lines, not four */
.intro p{max-width:80ch;}

/* button effect: lift + deeper shadow + sheen sweep across on hover */
.btn{position:relative;overflow:hidden;}
.btn::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .45s ease;pointer-events:none;}
.btn:hover::before{left:130%;}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.28);}
.ctaband .btn-outline:hover,.team-band .btn-outline:hover{box-shadow:0 14px 30px rgba(1,53,96,.45);}

/* buttons: capitals everywhere */
.btn{text-transform:uppercase;letter-spacing:.05em;}

/* hero breadcrumb + eyebrow up a size */
.breadcrumb{font-size:15.5px;}
.eyebrow{font-size:clamp(16px,1.4vw,19px);}

/* arrows off for good - a later .tiles rule was re-adding them */
.tiles .tile-go::after,.tile-go::after,.more-link::after,.npost .rm::after{content:none !important;}

/* blue bands: fade in from the navy ground - no hard seam */
.ctaband,.feature{position:relative;}
.ctaband::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;
  background:linear-gradient(180deg,rgba(11,22,34,.85),transparent);pointer-events:none;}
.ctaband>.wrap{position:relative;z-index:1;}

/* CTAs on blue bands: one urgent treatment everywhere */
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5);}70%{box-shadow:0 0 0 14px rgba(255,255,255,0);}}
.ctaband .btn{background:#fff;color:var(--blue,#0360AD);
  border-color:#fff;font-weight:700;font-size:18px;padding:19px 38px;animation:ctaPulse 2.4s infinite;}
.ctaband .btn:hover{background:#eaf3fb;color:var(--blue-dark,#024B86);}
@media (prefers-reduced-motion: reduce){ .ctaband .btn{animation:none;} }

/* course/service tiles: bigger copy */
.tiles .tile h3{font-size:23px;}
.tiles .tile p{font-size:16.5px;line-height:1.6;}
.tiles .tile-go{font-size:15px;}
.tiles .tile .lvl,.tile .kick,.tile-body .kick{font-size:14px;}

/* headings: ease the tight display tracking - -.03em was reading as
   warped/mangled in Lato bold at band sizes */
h1,h2,h3,h4,h1.cap,h2.cap{letter-spacing:-.01em;}

/* tiles: use the box - full-width body at the foot, up to 7 lines of
   copy instead of 3, bigger read-more */
.tiles .tile{display:flex;flex-direction:column;justify-content:flex-end;}
.tiles .tile-body{margin-top:auto;}
.tiles .tile p{-webkit-line-clamp:7;}

/* p.intro (class on the paragraph itself) gets the full intro-statement
   treatment - it was rendering as plain body text */
p.intro{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:700;
  letter-spacing:-.01em;line-height:1.35;color:var(--ink);max-width:80ch;
  margin-left:auto;margin-right:auto;text-align:center;}

/* intro statement: blue, bigger, display face - the page''s stand-out line */
p.intro,.intro p{font-size:clamp(24px,2.8vw,34px);color:var(--blue-light,#2F91C9);}
p.intro{font-weight:800;}

/* trust strip: every mark one 64px icon box, one-line labels, level row */
.ts-logos{flex-wrap:nowrap;gap:18px;justify-content:space-between;align-items:flex-end;}
.ts-logos .ts-logo{flex:0 1 auto;min-width:0;}
.ts-logo b{white-space:nowrap;font-size:14.5px;}
.ts-logo .chip{height:64px;min-height:64px;}
.ts-logo .chip img{height:64px;max-width:none;width:auto;}
.ts-logo svg{width:64px;height:64px;}
@media(max-width:1100px){ .ts-logos{flex-wrap:wrap;justify-content:center;gap:20px 32px;} }
@media(max-width:640px){
  .ts-logos{flex-direction:column;align-items:center;}
  .ts-logo .chip,.ts-logo .chip img{height:52px;min-height:52px;}
  .ts-logo svg{width:52px;height:52px;}
}

/* more air between icon and label, and between strip rows */
.ts-logo{gap:18px;}
.truststrip .wrap{gap:34px;}

/* intro statement: ink lead, blue payoff (light theme) */
.intro p{color:var(--ink);}
.intro p .hl{color:var(--blue,#0360AD);}

/* p.intro variant follows ink */
p.intro{color:var(--ink);}

/* hero sub up a size */
.hero p.sub{font-size:clamp(20px,1.8vw,26px);line-height:1.55;}
.hero p.sub strong{font-size:1.15em;}

/* util bar: bigger again - the top strip should read at a glance */
.util{font-size:16.5px;font-weight:700;letter-spacing:.05em;color:#fff;}
.util .wrap{height:54px;}
.util a{color:#fff;}
.util .u-right{gap:28px;}

/* content text up to match motcg''s reading size */
.sec p,.row2 .txt p,.feature p,.detail p,.tu-card p,.sec li{font-size:17px;line-height:1.65;}
.sec-head .lede,.lede{font-size:18.5px;line-height:1.6;}
.card .body p{font-size:15.5px;}
.fcell p{font-size:16.5px;}

/* main nav links bigger */
nav.main a{font-size:15.5px;}

/* feature box (31 March deadline etc): bigger everything */
.feature .box .kick{font-size:17px;letter-spacing:.2em;}
.feature .box h2{font-size:clamp(48px,6vw,88px);}
.feature .box p{font-size:clamp(17px,1.5vw,20px);line-height:1.65;}

/* 3-up cells: bottom links share one baseline regardless of copy length */
.feat3{align-items:stretch;}
.feat3 .fcell{display:flex;flex-direction:column;}
.feat3 .fcell .more-link{margin-top:auto;padding-top:16px;}

/* section titles at motcg weight - 700 was reading lighter/smaller at
   the same px */
h2,h2.cap,.sec-head h2{font-weight:800;}
h3,.card .body h3{font-weight:800;}
.hero h1,.hero.short h1{font-weight:800;}

/* callback modal: urgent treatment - pulsing submit, stronger title */
.cb-modal h3,.cb-modal h2{font-size:30px;font-weight:900;}
.cb-form .btn{font-size:18px;font-weight:800;padding:18px;animation:ctaPulse 2.4s infinite;
  box-shadow:0 8px 24px rgba(3,96,173,.35);}
@media (prefers-reduced-motion: reduce){ .cb-form .btn{animation:none;} }

/* callback modal: font sizing pass - copy, labels, fields all up */
.cb-modal p{font-size:16.5px;line-height:1.6;}
.cb-form label{font-size:15.5px;font-weight:700;}
.cb-form input,.cb-form select{font-size:16.5px;padding:14px 15px;}
.cb-modal .kick{font-size:15px;}

/* use the full page: wider content column + wider feature box,
   copy spreads the full box width */
:root{--maxw:1520px;}
.feature .box{max-width:800px;}
.feature .box p{max-width:none;}

/* course + news cards: bigger text, titles at motcg tile scale */
.card .body h3,.npost .nb h3{font-size:22px;line-height:1.25;}
.card .body p,.npost .nb p{font-size:16px;line-height:1.6;}
.card .lvl,.npost .date{font-size:14px;}
.card .foot .price-cta,.card .foot .view,.npost .rm{font-size:15.5px;font-weight:700;}

/* tracking ease, scoped: the earlier h1/h2 easing loses to these
   higher-specificity rules - pin them all at -.01em */
.feature h2,.ctaband h2,.detail h2,.intro p,p.intro,.stat .n,.stat .n b,
.hero h1,.hero.short h1,.hero-head .hh-heavy,.tu-card h3,.cons-name{letter-spacing:-.01em;}

/* ------------------------------------------------------------------
   TYPEFACE UNIFIED WITH MOTCG - Lato (the family''s real brand face,
   measured off motcg.co.uk). Inter was rendering bolder/optically
   different at the same px, which kept reading as a mismatch. Falling
   Sky stays first in the stack, same as motcg, pending a web licence. */
:root{
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
/* weights back to motcg''s actual values: heroes 700, section titles 800 */
.hero h1,.hero.short h1{font-weight:700;}

/* ------------------------------------------------------------------
   FALLING SKY - the real brand face, webfonts from Kim''s 2026-09-04
   family pack (raw/2026-09-04-kim-consultant-profiles/fonts). Ben:
   "falling sky for all" - display AND body. Lato stays as fallback. */
:root{
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* scrolled header goes black */
.topbar.scrolled{background:#000;border-bottom-color:rgba(255,255,255,.09);}

/* ------------------------------------------------------------------
   FALLING SKY SCALE-UP - the face runs optically smaller than Lato,
   so the whole type scale steps up one notch (headers left as tuned) */
body{font-size:18px;}
.sec p,.row2 .txt p,.feature p,.detail p,.tu-card p,.sec li{font-size:18px;line-height:1.65;}
h2.cap,.sec-head h2{font-size:clamp(32px,3.4vw,48px);}
.tiles .tile h3,.card .body h3,.npost .nb h3{font-size:24px;}
.tiles .tile p,.card .body p,.npost .nb p{font-size:17.5px;}
.btn{font-size:18px;}
.hero .cta-row .btn{font-size:clamp(18px,1.5vw,20.5px);}
.sec-head .lede,.lede{font-size:20px;}
.hero p.sub{font-size:clamp(21px,1.9vw,28px);}
.ts-logo b{font-size:15.5px;}
.ts-fact{font-size:clamp(19px,1.7vw,24px);}
.more-link,.tile-go,.npost .rm,.fcell .more-link{font-size:18px;}
.qa button{font-size:20px;}
.qa .ans{font-size:17.5px;}
.pp-label strong{font-size:clamp(19px,1.6vw,23px);}
.pp-label span{font-size:clamp(15.5px,1.25vw,17.5px);}
.fcell p{font-size:17.5px;}

/* strip must never force page overflow: labels may wrap below 1560,
   marks wrap to a second row below 1200 */
@media(max-width:1560px){
  .ts-logo b{white-space:normal;text-align:center;}
  .ts-logos{gap:16px 20px;}
}
@media(max-width:1200px){
  .ts-logos{flex-wrap:wrap;justify-content:center;gap:20px 32px;}
  .ts-logos .ts-logo{flex:0 1 auto;}
}

/* tiles: uniform internal layout - every text block is the same-height
   panel at the foot, so titles start level and links share a baseline */
.tiles .tile-body{margin-top:auto;min-height:315px;display:flex;flex-direction:column;}
.tiles .tile-go{margin-top:auto;}
.tiles .tile p{margin-bottom:18px;}
@media(max-width:820px){ .tiles .tile-body{min-height:0;} }

/* statement paragraphs: re-asserted ABOVE the scale-up layer, which
   was flattening them back to 18px via .sec p */
.sec p.intro,p.intro{font-family:var(--display);font-size:clamp(26px,3vw,38px) !important;
  font-weight:800;color:#fff;line-height:1.35;max-width:80ch;
  margin-left:auto;margin-right:auto;text-align:center;}
.intro p,.sec .intro p{font-size:clamp(26px,3vw,38px) !important;}

/* header keeps its own tighter column - the 1520px page width was
   stranding the logo at the far edge */
.topbar .wrap{max-width:1380px;}

/* ------------------------------------------------------------------
   FONT DECISION 2026-09-06 (Ben): back to LATO - "clearer". Falling
   Sky webfonts stay hosted but out of the stack; swap the token order
   to bring them back if the call changes. Type scale stays as sized. */
:root{
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* gallery grid: full-bleed photo cells */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcell{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;
  border-radius:10px;transition:transform .2s,box-shadow .2s;}
.gcell:hover{transform:scale(1.02);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.gcell:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
@media(max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} .gcell:nth-child(1){grid-column:span 2;grid-row:span 1;aspect-ratio:16/9;} }
@media(max-width:560px){ .gallery-grid{grid-template-columns:1fr;} .gcell:nth-child(1){grid-column:span 1;} }

/* motexpert reads smaller to Ben - one more notch on content type */
body{font-size:19px;}
.sec p,.row2 .txt p,.feature p,.detail p,.tu-card p,.sec li{font-size:19px;}
h2.cap,.sec-head h2{font-size:clamp(34px,3.6vw,52px);}
.card .body h3,.npost .nb h3{font-size:26px;}
.card .body p,.npost .nb p{font-size:17.5px;}
.card .lvl,.npost .date{font-size:15px;}
.sec-head .lede,.lede{font-size:21px;}
.article p{font-size:18.5px;line-height:1.7;}
.article .meta{font-size:15px;}

/* display-scale elements re-asserted over the broad .sec p scale-up */
.sec .pullquote,.pullquote{font-size:clamp(24px,3.2vw,38px) !important;}
.hero h1,.hero-head .hh-heavy{font-size:clamp(46px,5.8vw,76px);}
.hero.short h1{font-size:clamp(38px,4.6vw,56px);}
.stat .n{font-size:clamp(40px,5vw,64px);}

/* footer accreditation line: bold white */
.fnew-trust-line{color:#fff;font-weight:900;font-size:14.5px;}

/* button text bold everywhere */
.btn{font-weight:700;}

/* breadcrumb bold */
.breadcrumb{font-weight:700;}

/* article CTA centred */
.article > .btn{display:flex;width:max-content;margin:30px auto 0;}

/* footer tidy: two balanced halves, brand block left, link columns
   right, socials seated under the lists, one vertical rhythm */
footer.site .fnew{grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
.fnew-seal{width:140px;}
.fnew-name{font-size:23px;margin-bottom:4px;}
.fnew-contact li{margin:0 0 12px;font-size:16.5px;}
.fnew-links{display:flex;flex-direction:column;gap:0;}
.fnew-links ul{order:1;column-count:2;column-gap:56px;margin:0;padding:0;}
.fnew-links li{margin:0 0 12px;break-inside:avoid;}
.fnew-links a{font-size:16px;line-height:1.4;}
.fnew-links .fnew-social{order:2;justify-content:flex-start;margin:18px 0 0;gap:18px;}
.fnew-social .fi{width:22px;height:22px;flex:0 0 22px;}
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;gap:36px;}
  .fnew-links ul{column-count:1;text-align:center;}
  .fnew-links .fnew-social{justify-content:center;}
}

/* process strip labels up another notch */
.pp-label{width:300px;}
.pp-label strong{font-size:clamp(22px,1.8vw,26px);margin-bottom:8px;}
.pp-label span{font-size:clamp(17px,1.4vw,19px);max-width:30ch;line-height:1.55;}
.pp-labels{min-height:130px;}

/* footer: more room for the link columns so nothing wraps, sizes up a touch */
footer.site .fnew{grid-template-columns:1fr 1.25fr;gap:48px;}
.fnew-links a{font-size:16.5px;white-space:nowrap;}
.fnew-links ul{column-gap:64px;}
.fnew-contact li{font-size:17px;}
.fnew-name{font-size:24px;}

/* ==================================================================
   MATCH MOTCG - final type authority. motcg is the reference; every
   earlier motexpert-only "extra notch" is pinned back to motcg's
   exact values here. Change sizes on BOTH sites or not at all. */
body{font-size:18px;}
.sec p,.row2 .txt p,.feature p,.detail p,.tu-card p,.sec li{font-size:18px;line-height:1.65;}
h2.cap,.sec-head h2{font-size:clamp(32px,3.4vw,48px);}
.card .body h3,.npost .nb h3,.grid4 .tile h3{font-size:24px;}
.card .body p,.npost .nb p{font-size:17.5px;}
.card .lvl,.npost .date{font-size:14px;}
.sec-head .lede,.lede{font-size:20px;}
.article p{font-size:18px;line-height:1.7;}
.pp-label{width:260px;}
.pp-label strong{font-size:clamp(19px,1.6vw,23px);}
.pp-label span{font-size:clamp(15.5px,1.25vw,17.5px);}
.fnew-name{font-size:20px;}
.fnew-links a{font-size:14px;}
.fnew-contact li{font-size:14.5px;}

/* footer links/contact exact motcg match */
.fnew-links a{font-size:15px;}
.fnew-contact li{font-size:15px;}

/* learning journey: video + why-join grid */
.lj-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;margin-top:34px;align-items:start;}
.lj-video{position:relative;aspect-ratio:16/9;background:#0B1622;border-radius:12px;overflow:hidden;}
.lj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lj-side h3{font-size:26px;margin:0 0 14px;color:var(--ink);}
@media(max-width:900px){ .lj-grid{grid-template-columns:1fr;} }

/* instagram grid */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px;}
.ig-tile{display:block;aspect-ratio:1/1;background-size:cover;background-position:center;
  border-radius:10px;transition:transform .2s,box-shadow .2s;}
.ig-tile:hover{transform:scale(1.03);box-shadow:0 14px 34px rgba(0,0,0,.3);}
@media(max-width:640px){ .ig-grid{grid-template-columns:repeat(2,1fr);} }

/* map + hours */
.map-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:stretch;margin-top:10px;}
.map-embed{position:relative;min-height:360px;border-radius:12px;overflow:hidden;background:#0B1622;}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.hours-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:30px;}
.hours-card h3{font-size:24px;margin:0 0 16px;color:var(--ink);}
ul.hours{list-style:none;margin:0;padding:0;}
ul.hours li{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px;}
ul.hours li:last-child{border-bottom:0;}
@media(max-width:900px){ .map-grid{grid-template-columns:1fr;} }

/* whatsapp float */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.35);transition:transform .18s;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:32px;height:32px;fill:#fff;}
@media(max-width:640px){ .wa-float{right:14px;bottom:76px;} }

/* newsletter form in footer */
.fnew-nl{margin-top:22px;}
.fnew-nl-t{font-weight:700;font-size:15.5px;color:#fff;margin-bottom:10px;}
.nlform{display:flex;gap:10px;flex-wrap:wrap;}
.nlform input{flex:1 1 200px;min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#fff;border-radius:10px;font-size:15px;font-family:inherit;}
.nlform input::placeholder{color:#9fb3c6;}
.nlform .btn{padding:12px 20px;font-size:14px;}

/* software screenshots */
.sw-shots{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start;margin-top:10px;}
.sw-shots img{width:100%;height:auto;border-radius:12px;}
@media(max-width:820px){ .sw-shots{grid-template-columns:1fr;} }

/* callback modal v2: bigger title, blue accent, trust line */
.cb-modal{border-top:6px solid var(--blue,#0360AD);}
.cb-modal h3,.cb-modal h2{font-size:36px;font-weight:900;line-height:1.1;margin:6px 0 14px;}
.cb-modal .kick{font-size:15px;letter-spacing:.16em;}
.cb-trust{margin-top:14px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue,#0360AD);}

/* live instagram embeds: compact grid like the old site */
.ig-grid.ig-live{grid-template-columns:repeat(3,1fr);gap:14px;max-width:1060px;margin:10px auto 0;}
.ig-embed{position:relative;aspect-ratio:1/1.18;border-radius:10px;overflow:hidden;background:#0F1D2E;}
.ig-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media(max-width:700px){ .ig-grid.ig-live{grid-template-columns:repeat(2,1fr);} }

/* half/half reviews + instagram */
.half-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
.rv-rotator{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:34px 32px;min-height:300px;}
.rv-meta{margin:-8px 0 14px;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--blue,#0360AD);}
.rv-slide{display:none;margin:0;}
.rv-slide.on{display:block;animation:rvFade .5s ease;}
@keyframes rvFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.rv-stars{color:#F5B301;font-size:22px;letter-spacing:3px;margin-bottom:14px;}
.rv-slide blockquote{margin:0 0 16px;font-size:18.5px;line-height:1.65;color:var(--ink);}
.rv-slide figcaption{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue,#0360AD);}
.ig-grid.ig-half{grid-template-columns:repeat(2,1fr);max-width:none;margin:0;}
@media(max-width:900px){ .half-grid{grid-template-columns:1fr;gap:40px;} }

/* instagram tiles like the old site: square crops of the live embeds,
   post chrome hidden, media fills the tile */
.ig-grid.ig-half{grid-template-columns:repeat(3,1fr);gap:10px;}
.ig-embed.ig-tilecrop{aspect-ratio:1/1;border-radius:8px;}
.ig-embed.ig-tilecrop iframe{height:calc(100% + 168px);top:-54px;}

/* process strip up a step - BOTH SITES (uniform) */
.pp-label{width:300px;}
.pp-label strong{font-size:clamp(22px,1.8vw,26px);margin-bottom:8px;}
.pp-label span{font-size:clamp(17px,1.4vw,19px);max-width:30ch;line-height:1.55;}
.pp-labels{min-height:130px;}

/* kicks up a size (uniform) */
.kick{font-size:16.5px;}

/* process strip: labels pulled up close to the icon row */
.pp-labels{margin-top:-52px;}
@media(max-width:820px){ .pp-labels{margin-top:0;} }

/* whatsapp header icon */
.hd-wa{display:inline-flex;align-items:center;color:#25D366;}
.hd-wa svg{width:24px;height:24px;}
.hd-wa:hover{color:#4be284;}
.icns .hd-wa svg{width:22px;height:22px;}

/* 3-up feature cells: bigger */
.fcell h3{font-size:24px;}
.fcell p{font-size:18px;line-height:1.6;}

/* kicks up again + CTA band sub copy bigger (uniform) */
.kick,.feature .box .kick{font-size:18px;}
.ctaband p{font-size:clamp(18px,1.5vw,21px);}

/* find-us: text first then map, hours text bigger */
.map-grid{grid-template-columns:1fr 1.4fr;}
.hours-card{order:-1;}
.hours-card h3{font-size:28px;}
ul.hours li{font-size:19px;padding:12px 0;}
.hours-card p{font-size:18px;line-height:1.6;}

/* hours card: call button centred */
.hours-card .btn{display:flex;width:max-content;margin-left:auto;margin-right:auto;}

/* footer link columns flush to the right-hand side */
footer.site .fnew{grid-template-columns:1.2fr auto;}
.fnew-links{justify-self:end;}
.fnew-links ul{column-gap:72px;}
@media(max-width:820px){ .fnew-links{justify-self:center;} }

/* footer logo: far left, bigger */
.fnew-seal{width:190px;margin:0;justify-self:start;}
.fnew-brand{grid-template-columns:auto 1fr;column-gap:30px;}
@media(max-width:820px){ .fnew-seal{margin:0 auto;justify-self:center;} }

/* whatsapp header: green icon + green label */
.hd-wa{gap:7px;font-weight:700;font-size:14.5px;letter-spacing:.04em;color:#25D366;}
.hd-wa span{color:#25D366;}
.hd-wa:hover,.hd-wa:hover span{color:#4be284;}

/* whatsapp: icon stays green, label matches the header font */
.hd-wa span{color:#e8eef4;}
.hd-wa:hover span{color:#fff;}
.hd-wa svg{color:#25D366;}
.hd-wa:hover svg{color:#4be284;}

/* header safety: WhatsApp label hides before the row can touch the logo */
@media(max-width:1750px){ .hd-wa span{display:none;} }
.head-cta{min-width:0;}
.head-cta > a{flex-shrink:0;}

/* util bar whatsapp */
.u-wa{display:inline-flex;align-items:center;gap:6px;}
.u-wa svg{width:17px;height:17px;color:#25D366;}

/* taller header, bigger logo (uniform) */
.head-row{height:112px;}
.brand img{height:88px;}
.topbar.scrolled .head-row{height:92px;}
.topbar.scrolled .brand img{height:70px;}
@media(max-width:980px){
  .head-row{height:92px;}
  .brand img{height:62px;}
}

/* logo must never clip: sized to the row with breathing room */
.brand img{height:84px;max-height:calc(100% - 14px);width:auto;}
.head-row{overflow:visible;align-items:center;}
.topbar{overflow:visible;}

/* contact page: info lines + form up a size */
.line{font-size:18px;}
.line b{font-size:19px;}
.form label{font-size:15px;font-weight:700;letter-spacing:.06em;}
.form input,.form select,.form textarea{font-size:17px;padding:15px 16px;}
.form ::placeholder{font-size:16px;}

/* imagery motion OFF: no drifting/zooming backdrops, longer gentler
   crossfades - photos hold still (Ben: "imagery is shaky") */
.scene,.feature .scene2,.hero .scene{animation:none !important;transform:none !important;}
.scene::before{animation:none !important;}
.hero .slides .frame{transition:opacity 1.6s ease;}
.tiles .tile:hover .tile-bg{transform:none;}
.gcell:hover,.ig-tile:hover{transform:none;}

/* stillness pass 2 (Ben: "every image shakes - worse than ever").
   Nothing on the page translates, scales or drifts any more:
   - scroll reveal becomes fade-only (no 28px slide-up)
   - hero frames: no drift animation at all
   - hover zooms on tiles/cards/floats gone
   - review rotator fades without the 8px rise */
.reveal,.reveal.in{transform:none !important;}
.hero .slides .frame,.hero .slides .frame.on{animation:none !important;transform:none !important;}
.tile .bg,.tile:hover .bg{transform:none !important;}
.card,.card:hover{transform:none !important;}
.wa-float:hover,.hd-wa:hover{transform:none !important;}
.gcell:hover,.ig-tile:hover{transform:none !important;}
@keyframes rvFade{from{opacity:0;}to{opacity:1;}}

/* ------------------------------------------------------------------
   2026-09-07 mobile sweep. Same footer regression as motcg: a later
   unconditional 2-column footer layer beat the 820px collapse, and
   .fnew-brand's inner auto/1fr grid had no mobile override at all.
   Final layer so mobile wins the append cascade. Everything centred. */
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;gap:34px;text-align:center;}
  .fnew-brand{grid-template-columns:1fr;justify-items:center;}
  .fnew-seal{grid-row:auto;grid-column:auto;margin:0 auto;}
  .fnew-name,.fnew-contact,.fnew-trust,.fnew-nl{grid-column:auto;}
  .fnew-nl{width:100%;max-width:360px;margin:14px auto 0;}
  .nlform{justify-content:center;}
  .fnew-links{justify-content:center;align-items:center;}
  .fnew-links ul{text-align:center;}
  .fnew-links li{text-align:center;}
  .fnew-social{justify-content:center;}
}

/* article bodies: wide tables scroll inside their own box, long
   pasted links wrap instead of pushing the page sideways */
article.article table{display:block;max-width:100%;overflow-x:auto;}
article.article a{overflow-wrap:anywhere;}

/* process-flow labels: 220px cards clip on the narrowest phones */
@media(max-width:360px){.pp-label{width:170px;}}

/* narrowest phones: hours card button was max-content and set the
   card's min width past the viewport */
@media(max-width:360px){
  .hours-card{padding:20px;}
  .hours-card .btn{width:100%;}
}

/* ==================================================================
   2026-09-07 review round 1 (Ben, live) - shared header spec with
   motcg, standard buttons restored, IG sized to reviews, footer
   right-hand newsletter + smaller/centred. Final layer. */

/* 1. util strip: smaller + dynamic - must NEVER wrap to two lines */
.util{font-size:clamp(11.5px,.4vw + 8px,13.5px);font-weight:600;letter-spacing:.04em;}
.util .wrap{height:40px;flex-wrap:nowrap;}
.util .wrap>div{white-space:nowrap;min-width:0;}
.util .u-right{gap:clamp(12px,1.4vw,24px);flex-wrap:nowrap;}
.u-wa svg{width:15px;height:15px;}

/* 2. main header row down from 112px - shared spec, both sites */
.head-row{height:88px;}
.brand img{height:60px;max-height:calc(100% - 12px);width:auto;}
.topbar.scrolled .head-row{height:74px;}
.topbar.scrolled .brand img{height:52px;}
nav.main a{font-size:14px;}
@media(max-width:980px){
  .head-row{height:76px;}
  .brand img{height:48px;}
}

/* 3. ctaband buttons: back to the site standard - white pulsing
   "urgent" treatment removed (Ben, review round 1) */
.ctaband .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);
  font-size:18px;font-weight:700;padding:17px 28px;animation:none;box-shadow:none;}
.ctaband .btn:hover{background:#fff;color:var(--navy);border-color:#fff;box-shadow:none;}

/* 4. instagram block sized down to sit level with the reviews column */
.ig-grid.ig-half{max-width:560px;gap:8px;}
.ig-grid.ig-half + p .btn{font-size:15px;padding:13px 22px;}
.ig-embed.ig-tilecrop iframe{height:calc(100% + 130px);top:-42px;}

/* 5. footer: smaller + composition pulled to the centre; newsletter
   now lives in the right-hand column (markup moved in site.js) */
footer.site .fnew{grid-template-columns:auto auto;justify-content:center;
  gap:clamp(48px,7vw,110px);padding:44px 0 32px;}
.fnew-seal{width:120px;}
.fnew-name{font-size:20px;}
.fnew-contact li{font-size:14.5px;margin:0 0 8px;}
.fnew-links a{font-size:14.5px;}
.fnew-links li{margin:0 0 8px;}
.fnew-links ul{column-gap:48px;}
.fnew-social .fi{width:18px;height:18px;flex:0 0 18px;}
.fnew-links .fnew-nl{order:3;width:100%;max-width:380px;margin:18px 0 0;}
.fnew-nl-t{font-size:14.5px;}
.fnew-bar span,.fnew-bar a{font-size:12px;}
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;justify-content:stretch;}
  .fnew-links .fnew-nl{margin:14px auto 0;}
}

/* ==================================================================
   2026-09-07 review round 2 (Ben, live) - inner pages. */

/* inner-page heroes: content was tucked under the fixed header */
.hero.short{padding-top:170px;}
@media(max-width:820px){ .hero.short{padding-top:124px;} }

/* courses By Stage tiles: numbers removed (markup), copy up a step */
.grid4 .tile h3{font-size:26px;}
.tile .more{font-size:16.5px;}

/* cta bands: copy + buttons up a step - still the standard button,
   no white/pulse effects */
.ctaband p{font-size:clamp(19px,1.6vw,22px);}
.ctaband .btn{font-size:19px;padding:18px 32px;}

/* about accreditation: real marks instead of text badges */
.badges-logos .badge{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:24px 30px;min-width:200px;}
.badges-logos .chip{display:flex;align-items:center;justify-content:center;height:52px;}
.badges-logos .chip img{height:48px;width:auto;display:block;}
.badges-logos .badge-cg{font-weight:900;font-size:19px;letter-spacing:.04em;
  color:var(--blue-light,#2F91C9);}

/* ==================================================================
   2026-09-07 review round 3 (Ben, live). */

/* newsletter: bottom centre of the footer, own centred block */
.fnew-nl-bottom{max-width:440px;margin:6px auto 36px;text-align:center;}
.fnew-nl-bottom .nlform{justify-content:center;}
.fnew-nl-bottom .fnew-nl-t{margin-bottom:12px;}

/* callback modal: opens on click only (js) and much smaller - it was
   filling the screen */
.cb-modal{max-width:460px;padding:26px 26px 22px;}
.cb-modal h3,.cb-modal h2{font-size:24px;}
.cb-modal p,.cb-modal .cb-sub{font-size:14.5px;line-height:1.5;}
.cb-modal .kick{font-size:12.5px;letter-spacing:.12em;}
.cb-form label{font-size:13.5px;}
.cb-form input,.cb-form select{font-size:15px;padding:10px 12px;}
.cb-form .btn{font-size:15.5px;padding:13px;animation:none;box-shadow:none;}
.cb-trust{font-size:11px;}

/* 2026-09-07 review r4 (Ben): with the newsletter now bottom-centre, the
   two footer columns spread across the full content width evenly instead
   of hugging the centre */
footer.site .fnew{grid-template-columns:auto auto;justify-content:space-between;gap:48px;}
@media(max-width:820px){ footer.site .fnew{grid-template-columns:1fr;} }

/* ==================================================================
   2026-09-07 review r5 (Ben, live): footer four equal columns; util
   bar items spaced evenly; accreditation logos only. */
footer.site .fnew.fnew-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;
  justify-content:stretch;padding:44px 0 26px;}
.fnew-col{min-width:0;}
.fnew-brand2 .fnew-seal{width:120px;margin:0 0 12px;}
.fnew-brand2 .fnew-social{justify-content:flex-start;margin:16px 0 0;gap:14px;}
.fnew-list{list-style:none;margin:0;padding:0;}
.fnew-list li{margin:0 0 9px;}
.fnew-list a{font-size:14.5px;color:var(--body);text-decoration:none;transition:.16s;}
.fnew-list a:hover{color:#fff;}
@media(max-width:820px){
  footer.site .fnew.fnew-4col{grid-template-columns:1fr;gap:28px;text-align:center;}
  .fnew-brand2 .fnew-seal{margin:0 auto 12px;}
  .fnew-brand2 .fnew-social{justify-content:center;}
  .fnew-contact li{justify-content:center;}
}

/* util strip: all items distributed evenly across the full bar */
@media(min-width:981px){
  .util .wrap{justify-content:space-between;}
  .util .u-right{display:contents;}
}

/* accreditation badges: logos only - labels removed (Ben r5) */
.badges-logos .badge{padding:26px 34px;min-width:0;}
.badges-logos .chip{height:56px;}
.badges-logos .chip img{height:52px;max-width:180px;object-fit:contain;}

/* =========================================================================
   Practice Quizzes (quizzes.html + quiz.js) - added 2026-09-08
   Free self-test quizzes, keyed from the QSM bank. Everard light system.
   ========================================================================= */
.wrap-narrow{max-width:860px;margin-left:auto;margin-right:auto;}
.quiz-intro{max-width:820px;margin:48px auto 8px;text-align:center;}
.quiz-intro .lede{font-size:20px;color:var(--ink);line-height:1.55;margin-bottom:14px;}
.quiz-note{font-size:14px;color:var(--body);border-left:3px solid var(--line);padding-left:14px;}

/* picker cards */
#quiz-cards{align-items:stretch;}
.quiz-card{display:flex;flex-direction:column;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;cursor:pointer;
  font:inherit;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s;}
.quiz-card:hover{border-color:var(--blue-light);box-shadow:0 14px 40px rgba(3,96,173,.12);transform:translateY(-3px);}
.quiz-card-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-light);margin-bottom:12px;}
.quiz-card h3{font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;}
.quiz-card p{color:var(--body);font-size:15px;line-height:1.55;margin:0 0 20px;flex:1;}
.quiz-card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;}
.quiz-card-n{font-size:13px;color:var(--body);}
.quiz-card-go{font-weight:700;color:var(--blue);font-size:15px;}

/* runner */
.quiz-back{background:none;border:0;color:var(--blue);font:inherit;font-weight:700;cursor:pointer;padding:0;margin-bottom:18px;}
.quiz-back:hover{text-decoration:underline;}
.quiz-head{margin-bottom:26px;}
.quiz-head h2{margin:0 0 18px;}
.quiz-progress{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;}
.quiz-progress-bar{height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .35s ease;}
.quiz-meta{margin-top:10px;font-size:14px;color:var(--body);}

.quiz-q{border:1px solid var(--line);border-radius:14px;padding:22px 22px 8px;margin:0 0 18px;background:var(--surface);}
.quiz-q legend{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);line-height:1.45;padding:0;display:flex;gap:12px;align-items:flex-start;}
.quiz-q-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.quiz-opts{margin:16px 0 6px;display:grid;gap:10px;}
.quiz-opt{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;}
.quiz-opt:hover{border-color:var(--blue-light);background:var(--soft);}
.quiz-opt input{position:absolute;opacity:0;width:0;height:0;}
.quiz-opt-mark{flex:none;width:20px;height:20px;border:2px solid var(--line);border-radius:50%;margin-top:2px;position:relative;transition:border-color .15s;}
.quiz-opt input:checked ~ .quiz-opt-mark{border-color:var(--blue);}
.quiz-opt input:checked ~ .quiz-opt-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue);}
.quiz-opt input:focus-visible ~ .quiz-opt-mark{outline:2px solid var(--blue);outline-offset:2px;}
.quiz-opt-text{font-size:16px;color:var(--ink);line-height:1.4;}

/* graded states */
.quiz-opt.opt-correct{border-color:#1a8a4a;background:#e9f7ef;}
.quiz-opt.opt-correct .quiz-opt-mark{border-color:#1a8a4a;}
.quiz-opt.opt-wrong{border-color:#c0392b;background:#fdece9;}
.quiz-opt.opt-wrong .quiz-opt-mark{border-color:#c0392b;}
.quiz-fb{margin:6px 0 14px;font-size:14.5px;color:var(--body);padding:10px 14px;border-radius:8px;background:var(--soft);}
.quiz-q.is-correct{border-color:#1a8a4a;}
.quiz-q.is-wrong{border-color:#c0392b;}
.quiz-q.is-blank{border-color:#d9a441;}

.quiz-actions{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 4px;}
.quiz-result{margin-top:24px;padding:26px 28px;border-radius:16px;text-align:center;}
.quiz-result.quiz-pass{background:#e9f7ef;border:1px solid #1a8a4a;}
.quiz-result.quiz-fail{background:#fef6ec;border:1px solid #d9a441;}
.quiz-score{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-.02em;color:var(--ink);}
.quiz-score-pct{font-size:24px;color:var(--body);}
.quiz-result p{margin:10px auto 0;max-width:52ch;color:var(--ink);font-size:16px;}
.quiz-err{color:var(--body);padding:40px;text-align:center;}

@media(max-width:760px){
  .quiz-q{padding:18px 16px 6px;}
  .quiz-q legend{font-size:16.5px;}
  .quiz-score{font-size:34px;}
}

/* Global hidden reset - author display rules (e.g. .btn inline-flex) otherwise
   beat the [hidden] attribute; needed for quiz submit/retake toggling. */
[hidden]{display:none!important;}

/* ---- 2026-09-09 Ben desktop review punch list ------------------------------
   stats band tighter + bigger labels; nav + top-of-page type up; quiz cards
   bigger, no arrow, note panel instead of the left-bar indent; submit centred;
   stronger primary CTA; callback modal title on the display font. */
.stat{padding:36px 24px;}
.stat .l{margin-top:10px;font-size:16px;letter-spacing:.12em;}
nav.main{gap:26px;}
nav.main a{font-size:15px;font-weight:600;}
.mobnav a{font-size:15px;}
.hero.short h1{font-size:clamp(38px,4.4vw,54px);}
.eyebrow{font-size:clamp(15px,1.3vw,18px);font-weight:800;}
.quiz-card h3{font-size:24px;}
.quiz-card p{font-size:16px;}
.quiz-card-go{font-size:16px;}
.quiz-card-cat{font-size:12px;}
.quiz-card-n{font-size:14px;}
.quiz-note{border-left:0;background:var(--surface,#f4f7fa);border:1px solid var(--line);
  border-radius:12px;padding:16px 22px;max-width:760px;margin:18px auto 0;text-align:center;font-size:15px;}
#rq-submit{display:block;margin:26px auto 0;}
.btn-blue{font-size:16px;font-weight:600;padding:17px 30px;}
.cb-modal{border-radius:18px;}
.cb-modal h3,.cb-modal h2{font-family:var(--display);font-size:27px;font-weight:900;letter-spacing:-.02em;}
@media(min-width:820px){.oneline{white-space:nowrap;}}

/* ---- 2026-09-09 title shadowing (Ben) - depth on photo heroes, a whisper on light ground.
   Gradient-filled stat numbers excluded: text-shadow shows through transparent fill. */
.hero h1{text-shadow:0 3px 26px rgba(0,0,0,.50),0 1px 3px rgba(0,0,0,.35);}
.hero .sub,.hero .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.45);}
h2.cap,.sec-head h2{text-shadow:0 1px 2px rgba(16,24,32,.10);}
.stats .stat .l{text-shadow:0 2px 10px rgba(0,0,0,.35);}
.detail h1,.article h1{text-shadow:0 1px 2px rgba(16,24,32,.10);}
/* Sora runs wider: keep nav items one line each, one row total */
nav.main{gap:22px;}
nav.main a{white-space:nowrap;font-size:14px;}
/* header: room for the wordmark - it was cramped in the 78px row */
.head-row{height:96px;}
.brand{flex-shrink:0;margin-right:26px;}
.brand img{height:64px;}
.brand{margin-right:10px;}
.head-row{gap:clamp(10px,1.2vw,22px);}
nav.main{gap:clamp(10px,1.2vw,22px);}

/* ---- headline accents (2026-09-13): hand-drawn scribbles that draw on scroll
   + word-mask hero reveal. Colourways: default = --blue on light ground,
   .lite = --blue-light over photo/video, .wht = white on the blue ctaband. ---- */
.scb{position:relative;display:inline-block;white-space:nowrap;}
.scb svg{position:absolute;pointer-events:none;overflow:visible;color:var(--blue);}
.scb.lite svg{color:var(--blue-light);}
.scb.wht svg{color:#fff;}
.scb svg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;}
.scb.draw svg path{animation:hl-draw 1.1s cubic-bezier(.65,0,.35,1) var(--scb-delay,.3s) forwards;}
@keyframes hl-draw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.scb-circle svg{left:-8%;top:-18%;width:116%;height:136%;}
.scb-underline svg{left:-2%;bottom:-.16em;width:104%;height:.36em;}
.scb-squiggle svg{left:4%;bottom:-.34em;width:92%;height:.52em;}
.wm-w{display:inline-block;overflow:hidden;vertical-align:bottom;}
.wm.done .wm-w{overflow:visible;}
.wm-i{display:inline-block;transform:translateY(115%);}
.wm.play .wm-i{animation:wm-up .75s cubic-bezier(.22,1,.36,1) var(--wm-delay,0s) forwards;}
@keyframes wm-up{to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .scb svg path,.scb.draw svg path{opacity:1;stroke-dashoffset:0;animation:none;}
  .wm-i,.wm.play .wm-i{transform:none;animation:none;}
}

/* WhatsApp pill (Ross/Lea 2026-10-12: the WhatsApp call to action was too small - make it a button) */
.wa-pill{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px 14px 16px;border-radius:999px;background:#25D366;color:#fff !important;
  font-weight:800;font-size:16px;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.32);transition:transform .18s,background .18s;}
.wa-pill svg{width:26px;height:26px;fill:#fff;flex:0 0 auto;}
.wa-pill:hover{transform:translateY(-2px);background:#1fbf5b;color:#fff !important;}
@media(max-width:640px){ .wa-pill{right:12px;bottom:118px;padding:12px 18px 12px 14px;font-size:15px;} }
@media print{ .wa-pill{display:none;} }

/* quiz picker: 4 cards = 4-up on desktop, 2-up on tablet, 1-up on phone (Ben 2026-10-12: orphan card + left-aligned intro) */
#quiz-cards{grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:1100px){ #quiz-cards{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ #quiz-cards{grid-template-columns:1fr;} .quiz-intro{text-align:center;} }

/* tick lists outside .detail too (annual / training / employers / about rewrite, 2026-10-12) */
.wrap-narrow ul.checks,.wrap-narrow ul.checks:not(.x){list-style:none;padding:0;margin:0 0 16px;}
.wrap-narrow ul.checks li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--ink);line-height:1.55;}
.wrap-narrow ul.checks li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900;}
.wrap-narrow .kick{margin-bottom:8px;}

/* ---- 2026-10-13 mobile pass (Ross/Ben: overlapping elements on phones) ----
   The floating WhatsApp pill sat on top of hero buttons, the trust strip, the footer address and
   the newsletter Subscribe button. On phones it now lives in the action bar as a third button;
   the pill stays on desktop where there is room for it. */
.actionbar .ab-wa{display:none;}
@media(max-width:820px){
  .wa-pill{display:none;}
  .actionbar{gap:8px;}
  .actionbar a{padding:13px 6px;font-size:15px;gap:7px;white-space:nowrap;min-width:0;}
  .actionbar .ab-call{margin-right:0;background:var(--blue);}
  .actionbar .ab-wa{display:inline-flex;background:#25D366;color:#fff;}
  .actionbar .ab-wa svg{width:19px;height:19px;flex:0 0 auto;}
  .actionbar .ab-long{display:none;}
}
@media(max-width:380px){
  .actionbar{gap:6px;padding-left:8px;padding-right:8px;}
  .actionbar a{font-size:13.5px;gap:5px;padding:13px 4px;}
}
/* the homepage hero started under the fixed header on phones: the eyebrow ran into the logo */
@media(max-width:1180px){ .hero:not(.short){padding-top:156px;} }
@media(max-width:820px){ .hero:not(.short){padding-top:140px;} }
/* laptop widths: the full nav + CTA did not fit between 981px and ~1400px, so "Become an MOT Tester"
   ran off the right edge (half gone at 1280, all gone at 1024). Tighten to 1400, burger from 1180 down. */
@media(max-width:1400px){
  nav.main{gap:14px;}
  nav.main a{font-size:13px;letter-spacing:.03em;}
  .head-cta{gap:12px;}
  .head-cta .btn{padding:12px 16px;font-size:13.5px;white-space:nowrap;}
  .brand img{height:54px;}
}
@media(max-width:1180px){
  nav.main{display:none;}
  .burger{display:block;}
}
/* desktop: the WhatsApp pill sat on the footer's bottom-right links (Privacy / GDPR / Contact) once
   the page was scrolled to the end - keep that corner clear */
@media(min-width:821px){ footer.site .fnew-bar .wrap{padding-right:232px;} }
/* "How it works" timeline: the first and last labels are centred on nodes that sit 6% in from each
   edge, but were 300px wide - so "Find the right course..." was cut off on the left and "Testing"
   ran off the right. Size the two outer labels to the room they actually have. */
@media(min-width:821px){
  .pp-label:nth-child(1),.pp-label:nth-child(4){width:calc(12% + 44px);}
  .pp-labels{min-height:150px;}
}
@media(min-width:821px) and (max-width:1180px){ .pp-label:nth-child(2),.pp-label:nth-child(3){width:240px;} }
/* short laptop screens: the centred hero content rode up under the fixed header */
.hero:not(.short){padding-top:168px;}
@media(max-width:1180px){ .hero:not(.short){padding-top:156px;} }
@media(max-width:820px){ .hero:not(.short){padding-top:140px;} }
/* phones: the timeline labels were pulled half off the left edge - the desktop "centre on the node"
   transform and fixed width were still winning over the stacked mobile layout */
@media(max-width:820px){
  .process-flow .pp-label,.process-flow.in .pp-label{position:static;left:auto;width:auto;transform:none;}
}

/* ---- 2026-10-13 mobile pass 3 (Ben: optimisation + centring on phones) ---- */
@media(max-width:820px){ .hero .cta-row .btn{width:100%;max-width:340px;} }
/* "Training for Every Stage" collage: 26px headings inside a half-width tile clipped "Assessment" */
@media(max-width:480px){
  .grid4.collage .tile{padding:16px;}
  .grid4.collage .tile h3,.grid4 .tile h3{font-size:18px;line-height:1.15;}
  .grid4.collage .more{font-size:13px;}
}

/* page enquiry forms wired to the relay (2026-10-14): validation note + thank-you line */
.enq-err{font-size:14px;color:#B3261E;margin:-6px 0 14px;}
.form .enq-done{font-size:17px;line-height:1.55;color:var(--ink);margin:0;padding:18px 0;}

/* Ross 2026-10-13 review: POA removed from every course card - "View" now sits alone, keep it right-aligned */
.card .foot{justify-content:flex-end;}
/* Ross 2026-10-13: "Not Sure Which Course?" buttons stacked out of line on phones (inline margin-left on the 2nd) */
@media(max-width:640px){ .ctaband .btn{display:flex;width:100%;max-width:340px;margin:0 auto 12px !important;} }

/* Ben 15/10 mobile review */
/* mobile only (desktop unchanged) */
@media(max-width:820px){
  /* about: accreditation marks sit free, no boxes */
  .badges-logos .badge{border:0;background:none;box-shadow:none;}
  /* homepage feature: breathing room under the button */
  .feature .wrap{padding-top:44px;padding-bottom:56px;}
  /* news articles: body off the screen edge */
  .article{padding-left:20px;padding-right:20px;box-sizing:border-box;}
}

/* ==================================================================
   Ben's standing rule: centre ALL content on mobile. One inherited
   rule, final layer so it wins the cascade (2026-10-15). */
@media(max-width:820px){
  body, main, section, article, .wrap, .box, .card, .body, .txt, .detail,
  h1, h2, h3, h4, h5, h6, p, blockquote, figcaption, label, .meta, .kick, .lede, .sub,
  .sec-head, .article, .feature .box, .cons-body, .tu-card, .faq, details, summary { text-align:center; }
  .feature .box, .sec-head, .article p, .lede { margin-left:auto; margin-right:auto; }
  /* plain content lists: block centred, bullets + text left inside it */
  .sec ul:not([class]), .sec ol:not([class]), .article ul, .article ol, .prose ul, .prose ol, .detail ul:not([class]) { display:inline-block; text-align:left; margin-left:auto; margin-right:auto; max-width:100%; }
  .sec ul:not([class]) li, .sec ol:not([class]) li, .article li, .prose li, .detail li { text-align:left; }
  /* exceptions */
  input, textarea, select { text-align:left; }
  .mobnav, .mobnav * { text-align:left; }
}

/* mobile nav: fixed under the header so it opens on screen at any scroll depth (Ben 15/10) */
.mobnav.open{position:fixed;left:0;right:0;z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* quiz lead gate (Ross 15/10) */
.quiz-gate{max-width:560px;margin:0 auto;}
.quiz-gate-lede{margin:0 0 22px;}
.quiz-gate .btn{width:100%;justify-content:center;}
.quiz-gate-note{font-size:13px;color:var(--body);margin:14px 0 0;}
.quiz-done .quiz-score{font-size:clamp(28px,4vw,40px);}
.quiz-done a{font-weight:700;white-space:nowrap;}

/* mobile: section heads with a button (e.g. "View all courses") stack and centre (Ben 15/10) */
@media(max-width:820px){
  .sec-head{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
  .sec-head > div{width:100%;text-align:center;}
  .sec-head > .btn, .sec-head > a.btn{margin-left:auto;margin-right:auto;align-self:center;}
}