/* 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 (photo tiles; add .collage to a .grid4) */
.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;}
.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;}
  .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;}}
}

/* ============================================================
   MOT COMPLIANCE GROUP - brand override layer
   Appended 2026-08-22. Token values MEASURED from the V777
   folder proof (PDF vector fills + embedded font subsets), not
   sampled by eye. Record: BenVault/Brands/MOT Compliance Group.md

   The proof uses NO white ground anywhere - white is under 2% of
   surface area and all of it is type. So the light-surface tokens
   the training theme defines (--surface/--soft/--line/--ink/--body)
   are REDEFINED DARK here rather than recoloured. That is a design
   decision, not a measurement: the brochure is print and never had
   to answer "what does a light panel look like". Flagged for Ben.
   ============================================================ */
:root{
  /* measured */
  --blue:#095FAD;          /* primary - dominant fill, side 2 */
  --blue-light:#2F91C9;    /* lightest accent - ray motif, MOTXpert cloud */
  --blue-deep:#173958;     /* deepest navy */
  --navy:#231F20;          /* charcoal ground - rich black, NOT #000 */
  --navy-2:#1B325D;        /* inner panel navy, side 2 */

  /* derived - no equivalent in a print proof, needs sign-off */
  --blue-dark:#074784;     /* hover/pressed - primary darkened ~22% */
  --surface:#231F20;       /* page ground = charcoal, per "no white" */
  --soft:#2A2626;          /* raised panel */
  --line:#3A3535;          /* hairline on dark */
  --ink:#FFFFFF;           /* headline ink - inverted for a dark ground */
  --body:#C9C4C4;          /* running copy on dark */

  /* Falling Sky: PRINT subsets only in the proof. No web licence
     confirmed, no woff2 held. Stack falls back until that lands. */
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* the training theme alternates light/dark; MOTCG alternates
   charcoal/blue, so .soft becomes a raised dark panel and a new
   .brand band carries the blue full-bleed sections. */
.sec.soft{background:var(--soft);}
.sec.brand{background:var(--blue);color:#fff;}
.sec.brand .kick{color:#fff;opacity:.75;}
.sec.brand h2,.sec.brand h3{color:#fff;}

/* FAQ: the training build caps answers at max-height:400px, which
   silently clips a long answer. AEO answers must never be clipped
   - a truncated answer is a wrong answer to an answer engine. */
.qa{border-bottom:1px solid var(--line);}
.qa button{color:var(--ink);font-family:var(--display);}
.qa .ans{max-height:0;transition:max-height .35s ease,padding .35s ease;}
.qa.open .ans{max-height:1400px;padding-bottom:24px;}
.qa button:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;}
.qa .ans p{margin:0 0 12px;}
.qa .ans p:last-child{margin-bottom:0;}

/* Team grid - inherited from the June build Ross approved (.team /
   .member / .ph, 120px circular avatars with initials). Recoloured
   to MOTCG and taught to hold a real photograph: the demo only ever
   had initials because there were none to harvest. Initials stay as
   the fallback so the page looks finished before the photos land. */
.member .ph{background:linear-gradient(150deg,var(--blue-deep),var(--blue));overflow:hidden;}
.member .ph img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.member h3{color:var(--ink);font-family:var(--display);}
.member .role{color:var(--blue-light);}
.member .region{color:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;}
@media(max-width:980px){.team{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.team{grid-template-columns:1fr;}}

/* ------------------------------------------------------------
   Demo blocks that hard-code a light ground. The training build
   alternated white/navy; MOTCG is charcoal throughout, so these
   would render white-on-white. Overridden rather than re-authored
   so the block library stays the one Ross approved.
   ------------------------------------------------------------ */
.card{background:var(--soft);border-color:var(--line);}
.card:hover{box-shadow:0 18px 40px rgba(0,0,0,.45);}
.npost{background:var(--soft);border-color:var(--line);}
.form input,.form select,.form textarea{background:var(--soft);border-color:var(--line);color:var(--ink);}
.form input::placeholder,.form textarea::placeholder{color:#8A8383;}
.form label{color:var(--ink);}
.row2 .media{background:linear-gradient(150deg,var(--blue-deep),var(--blue));}
.row2 .media.b{background:linear-gradient(150deg,#1B325D,#095FAD);}
.row2 .media.c{background:linear-gradient(150deg,#231F20,#173958);}
.row2 li{color:var(--ink);}
.row2 li::before{color:var(--blue-light);}
.row2 .txt h2{color:var(--ink);}
.fcell h3{color:var(--ink);font-family:var(--display);}
.fcell .ic{border-color:var(--blue-light);color:var(--blue-light);}
.sec-head h2{color:var(--ink);font-family:var(--display);}
.ctaband{background:var(--blue);}
.intro{color:var(--ink);}
.hero.short .scene{background:
  radial-gradient(120% 90% at 20% 10%,#2A3B52 0%,transparent 55%),
  radial-gradient(100% 80% at 80% 90%,#173958 0%,transparent 60%),
  var(--navy);}

/* Service tiles for the hub - .tile exists in the demo for the 4-up
   category grid; extended here for a text-led services list. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px;}
.tiles .tile{display:block;background:var(--soft);border:1px solid var(--line);text-decoration:none;transition:.2s;}
.tiles .tile:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4);}
.tiles .tile-body{padding:26px;}
.tiles .tile h3{font-family:var(--display);font-size:19px;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em;}
.tiles .tile p{color:var(--body);font-size:14.5px;margin:0 0 16px;}
.tiles .tile-go{color:var(--blue-light);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.cinfo p{color:var(--body);margin:0 0 14px;}
.cinfo strong{display:block;margin-bottom:4px;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:34px;}}

/* ------------------------------------------------------------------
   FIX 2026-09-02 - .btn-ink was invisible on every page that used it.

   theme.css:46 sets  .btn-ink{background:var(--ink);color:#fff}
   and assumes --ink is the DARK training-theme value (#171717).
   The MOTCG override at :root re-points --ink to #FFFFFF, because on a
   charcoal ground "ink" is the HEADLINE colour. One token, two roles:
   the button then rendered white-on-white and could not be read.

   Found on 23 of 26 pages - it predates the article/training build.
   Fixed by giving the button its own ground rather than borrowing the
   headline token. Charcoal on the blue CTA band, white type. -------- */
.btn-ink{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-ink:hover{background:var(--blue-deep,#0b3e74);color:#fff;border-color:var(--blue-deep,#0b3e74);}

/* .ctaband sits on full-bleed blue, so the outline variant needs the
   same treatment - --ink as a border on blue is white-on-blue, legible,
   but the hover then flips to white bg + white text. Pin both. */
.ctaband .btn-outline{color:#fff;border-color:rgba(255,255,255,.6);}
.ctaband .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff;}

/* ------------------------------------------------------------------
   FOOTER FIX 2026-09-02.

   Three faults, all markup-vs-CSS mismatches rather than missing design:
   * every footer rule is scoped `footer.site`, but the markup shipped
     <footer class="fgrid"> - so the ground, the padding and all the link
     typography never applied.
   * .fgrid is a FOUR-column grid (contact + 3 link columns, the Everard
     pattern). The markup gave it one child, so it collapsed to a strip.
   * .social a is a 34px icon button expecting an <svg>; the markup put the
     word "Facebook" inside it, so five text labels overlapped in five
     small squares.

   Markup is rebuilt by build-footer.py. These are the few rules the new
   structure needs that did not already exist. ------------------------ */
footer.site a{color:#bccbd9;text-decoration:none;}
footer.site .fcontact strong{color:#fff;font-family:var(--display);font-size:16px;
  letter-spacing:-.01em;display:block;margin-bottom:14px;}
footer.site .fcontact a{color:#dfe7ee;}
footer.site .fcontact a:hover{color:var(--blue-light);}
.fcol h4{white-space:nowrap;}
.flegal{color:#8b9aa8;font-size:12.5px;line-height:1.6;}
.flegal .dim{color:#6d7c8a;}
.social a{color:#cdd9e5;transition:.2s;border-radius:2px;}
.social a:hover{border-color:var(--blue-light);color:#fff;background:rgba(46,132,199,.16);}

@media(max-width:860px){
  .fgrid{grid-template-columns:1fr 1fr;gap:30px;}
  .fbot{flex-direction:column;align-items:flex-start;}
}
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr;gap:26px;}
}

/* ------------------------------------------------------------------
   DESIGN-SYSTEM CLEANUP 2026-09-02.

   Audit of the rendered page found the spacing drift Ben flagged:

   * THREE container widths on one page - 1280 (the system), plus 820 and
     900 set as INLINE max-width. Containers were being overridden ad hoc
     instead of using a modifier, so nothing lined up down the page.
   * 22 elements carrying inline style, mostly the same three declarations
     repeated - the design system leaking into markup.
   * Section rhythm ran 84 / 84 / 70 / 64. The CTA band and footer sat on
     a different vertical grid to every .sec above them.

   Fixes: real modifiers for the narrow containers, classes for the
   repeated inline patterns, and one vertical rhythm. ----------------- */

/* container modifiers - replaces inline max-width overrides */
.wrap.narrow{max-width:820px;}
.wrap.mid{max-width:900px;}
.wrap.centred{text-align:center;}

/* the pull-quote band - was six inline declarations repeated per page */
.pullquote{font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(21px,3vw,34px);line-height:1.3;letter-spacing:-.02em;margin:0;}

/* the "read more" link under a feature cell - was two inline rules x9 */
.fcell .more-link{display:inline-block;margin-top:12px;color:var(--blue-light);
  font-weight:700;font-size:14px;}
.fcell .more-link:hover{color:#fff;}

/* one vertical rhythm. .sec is 84px; the CTA band and footer now agree
   rather than sitting 14px and 20px shy of it. */
.ctaband{padding:84px 0;}
footer.site{padding:0;}

/* the header logo needs room to breathe against the wordmark */
.brand img{margin-right:2px;}

/* ------------------------------------------------------------------
   HEADER 2026-09-02 - scaled up.

   Was a 78px bar with a 44px mark, which left the seal small and the
   whole header reading as a utility strip rather than the substantial
   sticky header the Everard reference uses. The logo also carried an
   inline height:44px that beat the stylesheet - removed, so size is
   controlled here in one place.

   The seal is a CIRCULAR mark with ring type around it, so it needs more
   height than a horizontal wordmark to stay legible. ---------------- */
.head-row{height:104px;}
.brand img{height:66px;width:auto;}
a.brand span{font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:#fff;margin-left:13px;white-space:nowrap;}
.head-cta{gap:24px;}
.head-cta > a:not(.btn){color:#e8eef4;font-weight:600;font-size:13.5px;
  letter-spacing:.04em;position:relative;padding:6px 0;}
.head-cta > a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;
  height:2px;width:0;background:var(--blue-light);transition:.2s;}
.head-cta > a:not(.btn):hover::after{width:100%;}

/* the hero sits under a fixed header, so its top padding has to grow too */
.hero .wrap{padding-top:26px;}

@media(max-width:980px){
  .head-row{height:80px;}
  .brand img{height:50px;}
  a.brand span{font-size:15px;}
}

/* ------------------------------------------------------------------
   STICKY HEADER ON SCROLL 2026-09-02.

   The header was already position:fixed and site.js already toggles
   .scrolled past 30px - but theme.css:318 overrode the solid background
   from :59 with rgba(9,18,29,.70) plus a 16px backdrop blur, so it went
   translucent blue rather than solid.

   Solid brand black. #231F20 not #000000 - the V777 proof measures the
   MOTCG ground as a rich black, and it matches the page and footer, so a
   true black header would read as a different colour sitting on top.
   Blur removed: a solid bar is what was asked for, and dropping
   backdrop-filter also avoids trapping position:fixed children.
   ------------------------------------------------------------------ */
.topbar{transition:background .28s ease, box-shadow .28s ease, height .28s ease;}
.topbar.scrolled{
  background:#231F20;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
/* tighten the bar slightly once it is stuck, so it takes less of the view */
.topbar.scrolled .head-row{height:82px;}
.topbar.scrolled .brand img{height:54px;}
.head-row,.brand img{transition:height .28s ease;}

@media(max-width:980px){
  .topbar.scrolled .head-row{height:70px;}
  .topbar.scrolled .brand img{height:44px;}
}

/* ------------------------------------------------------------------
   HERO MONTAGE 2026-09-02.

   Everard opens every page on a moving full-bleed hero; this is that,
   built as a crossfade rather than an mp4 (see build-hero-montage.py for
   why). Frames sit under the existing .vid-overlay gradient, so the
   headline contrast is unchanged.

   Deliberately NO transform/scale: ken-burns was removed from the June
   build because the images read as shaking. Opacity only. ---------- */
.hero .slides{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero .slides .frame{position:absolute;inset:0;background-size:cover;
  background-position:center;opacity:0;transition:opacity 1.4s ease-in-out;}
.hero .slides .frame.on{opacity:1;}
.hero .photo,.hero .scene{z-index:0;}
.hero .vid-overlay{z-index:1;}
.hero .wrap{position:relative;z-index:2;}

@media (prefers-reduced-motion: reduce){
  .hero .slides .frame{transition:none;}
  .hero .slides .frame:not(:first-child){display:none;}
  .hero .slides .frame:first-child{opacity:1;}
}

/* header nav + wordmark scaled up 2026-09-02 - was reading small against
   the 104px bar and the 66px mark */
a.brand span{font-size:21px;letter-spacing:-.015em;}
.head-cta{gap:28px;}
.head-cta > a:not(.btn){font-size:15.5px;letter-spacing:.02em;font-weight:600;}
.head-cta .btn{font-size:15px;padding:14px 24px;letter-spacing:normal;}
.topbar.scrolled a.brand span{font-size:19px;}
@media(max-width:1100px){
  .head-cta{gap:20px;}
  .head-cta > a:not(.btn){font-size:14px;}
  a.brand span{font-size:17px;}
}

/* ------------------------------------------------------------------
   TYPEFACE 2026-09-02 - Lato.

   What the client actually runs: motcg.co.uk serves Lato via Elementor
   (weights 300/400/700/900), headings Lato 700 at 48px, nav Lato 500 16px.
   Measured off the live site, not assumed.

   Kim's stated preference is Falling Sky, and the V777 proof confirms it -
   but the proof embeds PRINT subsets only and no web licence is held, so
   Falling Sky cannot legitimately ship. Until that licence question is
   answered, Lato is the honest choice: it is their real brand face in
   practice, it is free, and it is already what their audience sees.

   Falling Sky stays first in the stack so it takes over the moment a
   licensed webfont is dropped in. ---------------------------------- */
:root{
  --display:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Sora","Lato",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* header nav in caps, per Everard's uppercase letter-spaced navigation */
.head-cta > a:not(.btn){
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
  font-size:14px;
}
a.brand span{text-transform:uppercase;letter-spacing:.02em;font-weight:900;}

/* ------------------------------------------------------------------
   FALLING SKY - ready to switch on.

   Kim: "falling sky is the preferred font." Agreed, and it is already
   FIRST in --display and --sans, so it renders the moment the webfont
   exists. Two things stand between here and there:

   1. The V777 proof embeds PRINT subsets (Regular / SemiBold / Bold /
      Black Oblique). A desktop or print licence does not grant web use,
      and extracting the font out of the PDF to serve publicly would be a
      licence breach, not a shortcut. So it cannot ship from what we hold.
   2. Whoever holds the licence needs to confirm it covers web and send
      the .woff2 files - or we price the web licence as a line item.

   SWITCHED ON 2026-09-04: Kim supplied the family, Ben is buying the web
   licence before go-live. See assets/fonts/README.md for the licence position
   and the one-step rollback (delete the four files, the stack falls back to
   Lato). ------------------------------------------------------------------ */


/* Lato remains the fallback: their live site's real face, so if the licence
   question ever forces the files out, the site degrades to what their audience
   already sees rather than to something alien. ----------------------------- */

/* ------------------------------------------------------------------
   ELEMENTS RECOVERED FROM THE LIVE SITE 2026-09-02.
   Client Login, Call Us, newsletter and the annual-refresher prompt all
   exist on motcg.co.uk and were missing here. See add-missing-elements.py
   ------------------------------------------------------------------ */
.hd-call{display:inline-flex;align-items:center;gap:8px;color:#e8eef4;
  font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:none;}
.hd-call svg{width:17px;height:17px;color:var(--blue-light);}
.hd-call:hover{color:#fff;}
.hd-login{display:inline-flex;align-items:center;padding:11px 18px;
  border:1px solid rgba(255,255,255,.34);color:#fff;font-weight:700;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:.2s;}
.hd-login:hover{background:#fff;color:var(--navy);border-color:#fff;}

.twoup{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.tu-card{background:var(--surface);border:1px solid var(--line);padding:34px 32px;display:flex;flex-direction:column;align-items:flex-start;}
.tu-card .btn{margin-top:auto;margin-left:auto;margin-right:auto;}
.tu-card p{margin-bottom:26px;}
.tu-card h3{font-family:var(--display);font-size:23px;letter-spacing:-.02em;
  color:var(--ink);margin:8px 0 12px;}
.tu-card p{color:var(--body);margin:0 0 22px;}

.fnews p{font-size:13.5px;margin:0 0 14px;color:#bccbd9;}
.nl{display:flex;gap:8px;flex-wrap:wrap;}
.nl input{flex:1 1 150px;min-width:0;padding:11px 13px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);color:#fff;font-size:14px;border-radius:0;}
.nl input::placeholder{color:#8b9aa8;}
.nl input:focus{outline:2px solid var(--blue-light);outline-offset:1px;}
.nl .btn{padding:11px 18px;font-size:13px;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media(max-width:820px){ .twoup{grid-template-columns:1fr;} }
@media(max-width:1180px){ .hd-call span{display:none;} }

/* consultants grid - real working shots rather than initials avatars.
   .unnamed marks a confirmed consultant whose name we do not yet have. */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:26px;}
.member{background:var(--soft);border:1px solid var(--line);overflow:hidden;}
.mphoto{height:250px;background-color:var(--navy);}
.mbody{padding:22px 24px 26px;}
.member h3{font-family:var(--display);font-size:21px;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;}
.mrole{color:var(--blue-light);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;}
.mregion{color:var(--ink);font-weight:600;font-size:14px;margin-top:7px;}
.mregion.pending{color:var(--body);font-weight:400;font-style:italic;opacity:.75;}
.mcred{color:var(--body);font-size:14px;margin:12px 0 0;}
.member.unnamed h3{color:var(--body);font-weight:400;font-style:italic;}

/* ------------------------------------------------------------------
   HEADER OVERFLOW FIX 2026-09-03.

   Caught on the live deploy: the wordmark ran straight into the nav -
   "MOT COMPLIANCE GROUP" overlapping "SERVICES" at 1440px. Adding Client
   Login and the phone number to a bar that already carried a 21px
   uppercase wordmark and five nav links was simply too much for the row.

   The seal itself reads "MOT COMPLIANCE / GROUP" around its ring, so the
   wordmark beside it was duplicating the logo. Dropping it below very
   wide viewports frees the space and loses nothing.

   Also giving the row real flex behaviour so it can never overlap again -
   the previous version had no min-width:0 or shrink control, which is
   why it collided rather than compressing. ------------------------- */
.head-row{gap:20px;flex-wrap:nowrap;}
.brand{flex:0 0 auto;min-width:0;}
a.brand span{display:none;}
@media(min-width:1560px){
  a.brand span{display:inline;font-size:18px;}
}
.head-cta{flex:1 1 auto;justify-content:flex-end;min-width:0;gap:22px;}
.head-cta > a:not(.btn){white-space:nowrap;flex:0 0 auto;}
.hd-call{white-space:nowrap;flex:0 0 auto;}
.hd-call span{white-space:nowrap;}
.hd-login{white-space:nowrap;flex:0 0 auto;}
.head-cta .btn{white-space:nowrap;flex:0 0 auto;}

@media(max-width:1380px){
  .head-cta{gap:16px;}
  .head-cta > a:not(.btn){font-size:13px;letter-spacing:.06em;}
  .hd-call span{display:none;}
}
@media(max-width:1150px){
  .hd-login{display:none;}
}

/* ------------------------------------------------------------------
   MOBILE 2026-09-03.

   The site had no mobile navigation. theme.css hid `nav.main` below 980px
   but the markup uses `.head-cta`, so nothing was hidden and a phone got
   five nav links, a phone number and a button crammed into an 80px bar.
   .burger and .mobnav were already styled and already wired in site.js -
   only the markup was missing.

   Also: Ben's note that "nothing is centred" on mobile. On a narrow
   column, left-aligned hero type with a right-hand gutter reads as
   broken rather than deliberate, so the hero, section heads and CTA
   bands centre below 820px. The desktop layout is unchanged.
   ------------------------------------------------------------------ */

.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;
  padding:8px;margin:0;line-height:0;}
.burger svg{width:28px;height:28px;}
.burger:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px;}

.mobnav{display:none;background:var(--navy);border-top:1px solid rgba(255,255,255,.09);}
.mobnav.open{display:block;}
.mobnav a{display:block;color:#e8eef4;padding:15px 24px;
  border-bottom:1px solid rgba(255,255,255,.07);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:14px;}
.mobnav a:active{background:rgba(255,255,255,.06);}
.mobnav .mn-call{color:var(--blue-light);text-transform:none;letter-spacing:0;font-size:16px;}
.mobnav .mn-login{color:#fff;}
.mobnav .mn-cta{margin:16px 24px 22px;text-align:center;border-bottom:0;
  display:block;text-transform:uppercase;}

@media(max-width:1024px){
  /* the desktop actions come out; the burger goes in */
  .head-cta > a{display:none;}
  .head-cta .burger{display:inline-flex;}
  .head-cta{gap:0;}
  .topbar{position:sticky;}
  .head-row{height:72px;}
  .topbar.scrolled .head-row{height:64px;}
  .brand img{height:46px;}
  .topbar.scrolled .brand img{height:42px;}
  a.brand span{display:none;}
}

@media(max-width:820px){
  /* centre the narrow column - a left rag with a wide right gutter
     reads as a mistake on a phone */
  .hero .wrap,.hero.short .wrap{text-align:center;}
  .hero .cta-row{justify-content:center;}
  .hero .breadcrumb{justify-content:center;}
  .hero .sub{margin-left:auto;margin-right:auto;}
  .sec-head{text-align:center;}
  .intro{text-align:center;}
  .ctaband .wrap{text-align:center;}
  .stats{text-align:center;}
  .twoup .tu-card{text-align:center;}
  .tu-card{align-items:center;}
  .tu-card .btn{margin:18px auto 0;}

  h1,h1.cap{font-size:clamp(30px,8.5vw,40px);line-height:1.08;}
  h2,h2.cap{font-size:clamp(24px,6.5vw,32px);}
  .wrap{padding-left:20px;padding-right:20px;}
  .sec{padding:56px 0;}
  .ctaband{padding:56px 0;}
  footer.site{padding:0;}

  /* stacked rows: image above text, not a squeezed side-by-side */
  .row2,.row2.flip{grid-template-columns:1fr;}
  .row2 .media{min-height:240px;}
  .row2 .txt{padding:34px 20px;}
  .feat3,.feat3.four{grid-template-columns:1fr;gap:20px;}
  .tiles{grid-template-columns:1fr;}
  .team{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}
  .hero{min-height:78vh;}
  .btn{width:auto;}
  .cta-row{flex-wrap:wrap;gap:12px;}
}

@media(max-width:520px){
  .stats{grid-template-columns:1fr;gap:0;}
  .stat{padding:22px 0;}
  .nl{flex-direction:column;}
  .nl .btn{width:100%;}
}

/* ------------------------------------------------------------------
   MOBILE ALIGNMENT 2026-09-03 (second pass).

   First pass centred only the hero and the pull-quote and left every
   body section left-aligned, so the page read as half-finished rather
   than deliberate. That inconsistency is what "still not centred" meant.

   Centring the whole narrow column now, consistently.

   NOTE FOR THE REVIEW: everard.co.uk - the site Ross pointed at - is
   predominantly LEFT-aligned on mobile (measured 2026-09-03 at 390px:
   32 left/start against 8 centred). So this is a deliberate divergence
   from the reference, not a match to it. Easy to flip: change the
   `center` values below to `left`.
   ------------------------------------------------------------------ */
@media(max-width:820px){
  .row2 .txt{text-align:center;}
  .row2 .txt ul{list-style:none;padding-left:0;display:inline-block;text-align:left;}
  .row2 .txt .kick{text-align:center;}
  .row2 .txt .btn{margin-left:auto;margin-right:auto;}

  .feat3 .fcell{text-align:center;}
  .feat3 .fcell .ic{margin-left:auto;margin-right:auto;}
  .feat3 .fcell .more-link{display:block;}

  .tiles .tile,.tiles .tile-body{text-align:center;}
  .team .member,.team .mbody{text-align:center;}
  .team .mphoto{background-position:center top;}

  .quotes,.quote,.testimonial{text-align:center;}
  .sec .intro,.intro p{text-align:center;margin-left:auto;margin-right:auto;}
  .prose{text-align:left;}          /* article body stays readable, not centred */

  footer.site{text-align:center;}
  footer.site .fgrid{justify-items:center;}
  footer.site .nl{justify-content:center;}
  .fbot{flex-direction:column;align-items:center;text-align:center;gap:18px;}
  .social{justify-content:center;}
  .flegal{text-align:center;}
}

/* ==================================================================
   MOBILE: CENTRE EVERYTHING  (Ben, standing rule 2026-09-03)
   "Centre always when mobile view."

   Written as ONE inherited rule rather than a list of selectors. The
   previous two passes went section by section and kept missing things -
   service pages, form labels, FAQ accordions, list items. Setting it on
   the container and letting it inherit catches everything, including
   pages and components added later.

   Only genuine exceptions are reset below, and each has a reason.

   Divergence noted: everard.co.uk, the reference Ross liked, is mostly
   LEFT-aligned on mobile (measured 390px: 32 left vs 8 centred). This is
   a deliberate departure on Ben's instruction.
   ================================================================== */
@media(max-width:820px){

  body,
  section, .wrap, .txt, .fcell, .tile, .tile-body, .member, .mbody,
  .tu-card, .qa, .faq, .detail, .stat, .npost, .quotes, .quote,
  .sec-head, .intro, .form, form, .fgrid, .fcol, .fcontact, .fbot,
  h1, h2, h3, h4, p, li, label, blockquote,
  .kick, .eyebrow, .sub, .mrole, .mregion, .mcred, .flegal, .breadcrumb
  { text-align:center; }

  /* lists: centre the block, keep the text left inside it so the
     bullets do not stagger into a ragged column */
  ul, ol { list-style-position:inside; padding-left:0; }
  .row2 .txt ul, .detail ul, .prose ul, .prose ol
  { display:inline-block; text-align:left; margin-left:auto; margin-right:auto; }

  /* buttons and icons centre as blocks */
  .btn, .more-link, .tile-go { margin-left:auto; margin-right:auto; }
  .cta-row, .social, .accred, .head-row { justify-content:center; }
  .fcell .ic, .ic { margin-left:auto; margin-right:auto; }

  /* EXCEPTIONS - these stay left, and here is why:
     1. form fields: centred text inside an input fights the cursor and
        reads as broken while typing.
     2. the mobile nav: a full-width tap target list reads better as a
        left rag, and it matches every phone menu people already use. */
  input, textarea, select { text-align:left; }
  .mobnav a { text-align:left; }

  /* the header is a two-item row (mark, burger) - it must stay split,
     not centred, or the burger drifts into the middle */
  .head-row { justify-content:space-between; }
}

/* ==================================================================
   SIGNATURE - the DVSA verdict scale (2026-09-03)
   The four categories every MOT defect is graded against. This is the
   language the compliance business trades in, so it earns its place as
   the hero's one bold element. Restrained: charcoal chips, a single
   accent per tier, a one-time reveal that reads as a station being
   "checked" and cleared. Everything else on the page stays quiet.
   ================================================================== */
.verdict{margin-top:46px;display:flex;flex-direction:column;gap:16px;
  max-width:860px;margin-left:auto;margin-right:auto;}
.v-label{font-size:clamp(16px,1.4vw,19px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-light,#2F91C9);text-align:center;}
.v-scale{display:flex;gap:8px;flex-wrap:wrap;}
.v-step{flex:1 1 0;min-width:130px;text-align:center;padding:20px 14px 17px;
  font-weight:700;font-size:18px;letter-spacing:.01em;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.04);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:5px;align-items:center;
  transition:color .4s ease,border-color .4s ease,background .4s ease,transform .18s ease,box-shadow .25s ease;}
.v-step b{font-weight:800;}
.v-sub{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.55);
  transition:color .4s ease;}
.verdict.lit .v-step .v-sub{color:rgba(255,255,255,.78);}
.v-step:hover{transform:translateY(-3px);}
.verdict.lit .v-step[data-tier="pass"]:hover{box-shadow:0 10px 26px rgba(30,158,90,.35);}
.verdict.lit .v-step[data-tier="minor"]:hover{box-shadow:0 10px 26px rgba(201,138,26,.32);}
.verdict.lit .v-step[data-tier="major"]:hover{box-shadow:0 10px 26px rgba(201,106,26,.32);}
.verdict.lit .v-step[data-tier="danger"]:hover{box-shadow:0 10px 26px rgba(192,57,43,.35);}
/* each tier lights to its true DVSA colour, in sequence, once */
.verdict.lit .v-step[data-tier="pass"]{color:#fff;border-color:#1e9e5a;background:rgba(30,158,90,.30);}
.verdict.lit .v-step[data-tier="minor"]{color:#fff;border-color:#c98a1a;background:rgba(201,138,26,.30);}
.verdict.lit .v-step[data-tier="major"]{color:#fff;border-color:#c96a1a;background:rgba(201,106,26,.30);}
.verdict.lit .v-step[data-tier="danger"]{color:#fff;border-color:#c0392b;background:rgba(192,57,43,.30);}
.verdict.lit .v-step[data-tier="minor"]{transition-delay:.12s;}
.verdict.lit .v-step[data-tier="major"]{transition-delay:.24s;}
.verdict.lit .v-step[data-tier="danger"]{transition-delay:.36s;}
.v-you{font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.88);text-align:center;}
.v-you strong{color:#fff;}
.v-you strong{color:#fff;}
@media(max-width:820px){
  .verdict{margin:32px auto 0;align-items:center;text-align:center;}
  .v-scale{width:100%;}
  .v-step{min-width:0;flex:1 1 22%;font-size:12px;padding:11px 4px;}
}
@media(prefers-reduced-motion:reduce){
  .v-step{transition:none !important;}
}

/* ------------------------------------------------------------------
   HEADER CLEARANCE 2026-09-03.
   The hero is position-centred and became taller than the viewport once
   the verdict scale was added, so its top row (the eyebrow) rose UP under
   the fixed header. Give the hero top padding = header height so the
   centred content can never sit behind the header, and let it grow.
   Alignment and footer audited CLEAN - this is the only real fault. ---- */
.hero{padding-top:120px;padding-bottom:56px;}
.hero .wrap{padding-top:0;}          /* was 26px - clearance now on .hero */
@media(max-width:1024px){
  .hero{padding-top:96px;padding-bottom:44px;}
}
@media(max-width:820px){
  .hero{padding-top:88px;padding-bottom:40px;min-height:auto;}
}

/* ==================================================================
   TYPE VARIETY 2026-09-03
   Everything was uniform bold-caps Lato - the flat 'AI' register. The
   V777 brand proof shows MOT Expert's real treatment: big but LIGHT,
   scale carries emphasis, weight reserved for the line that matters.
   Introduce a real hierarchy: light display, heavy accent, sentence
   case for headings, caps only on small labels.
   ================================================================== */

/* Hero headline: two registers. "Your one stop" light + sentence-ish,
   the brand line black. Scale + weight contrast, not uniform shouting. */
.hero-head{margin:0;font-family:var(--display);line-height:1.05;letter-spacing:-.03em;
  display:flex;flex-direction:column;gap:2px;align-items:center;}
.hero-head .hh-light{font-weight:300;font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.02em;color:rgba(255,255,255,.86);text-transform:none;}
.hero-head .hh-heavy{font-weight:700;font-size:clamp(40px,4.8vw,62px);
  text-transform:none;letter-spacing:-.03em;color:#fff;}

/* Section headings: SENTENCE CASE, medium weight - stop shouting in caps.
   Caps is now reserved for .kick / .eyebrow / labels only, where it means
   'this is a label' rather than 'this is a heading'. */
h2.cap:not(.keep-caps){text-transform:none;font-weight:800;letter-spacing:-.02em;}
.sec-head h2{font-weight:800;letter-spacing:-.02em;}
/* a lighter lead-in weight option for big statements */
.h2-mixed .lw{font-weight:300;}
.h2-mixed .hw{font-weight:900;}

/* Pull-quote already italic-black; give it a touch more character */
.pullquote{font-style:italic;font-weight:900;}

/* Stat numbers: heavy + tight, labels light - real contrast in the stat block */
.stat .num,.stat .suf{font-size:clamp(44px,4.5vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,#ffffff,#7fb4e3);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;display:inline-block;}
.stat p{font-weight:400;}

/* Body intro: was bold - make it regular so it reads as prose, not another heading */
.intro p{font-weight:700;letter-spacing:-.02em;}

/* ------------------------------------------------------------------
   TIGHTEN VERTICAL RHYTHM 2026-09-03.
   Ben: 'sections have a lot of space between them'. 84px top+bottom read
   as gaps. Bring the whole page in - 56px desktop, less on mobile - so
   sections relate to each other instead of floating apart. Applied last
   so it wins the cascade. --------------------------------------------- */
.sec{padding:58px 0;}
.sec.soft{padding:58px 0;}
.intro{padding:44px 0;}
.ctaband{padding:60px 0;}
footer.site{padding:0;}
.row2 .txt{padding:44px clamp(24px,4vw,56px);}
.detail{padding:48px 0;}
.article{padding:48px 0;}
.feat3{gap:24px;}
.sec-head{margin-bottom:30px;}
.twoup{gap:22px;}
@media(max-width:820px){
  .sec,.sec.soft{padding:40px 0;}
  .ctaband{padding:42px 0;}
  footer.site{padding:0;}
  .intro{padding:32px 0;}
  .row2 .txt{padding:32px 20px;}
}

/* ------------------------------------------------------------------
   TILES + BUTTONS cleanup 2026-09-03.
   Two .tile systems were fighting - the full-bleed photo tile (.tile)
   and the light service card (.tiles .tile). Scope them apart, and give
   buttons a cleaner, more confident treatment with a consistent hover. -*/

/* buttons: slightly larger, letterspacing eased, arrow-free, firm hover lift */
.btn{font-size:15px;letter-spacing:normal;padding:16px 26px;font-weight:500;
  transition:transform .16s ease, background .18s ease, box-shadow .18s ease, color .18s;}
.btn-blue{box-shadow:0 4px 16px rgba(9,95,173,.28);}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(9,95,173,.42);}
.btn-outline:hover{transform:translateY(-2px);}
.btn-ink:hover{transform:translateY(-2px);}

/* service cards (.tiles .tile): consistent, calmer, clear affordance */
.tiles{gap:20px;}
.tiles .tile{background:var(--soft);border:1px solid var(--line);min-height:0;
  padding:0;justify-content:flex-start;color:var(--body);transition:.18s;}
.tiles .tile-body{padding:28px 26px 30px;}
.tiles .tile h3{font-size:20px;margin:0 0 10px;color:var(--ink);line-height:1.2;}
.tiles .tile p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0 0 18px;}
.tiles .tile:hover{border-color:var(--blue);transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.28);}
.tiles .tile-go{color:var(--blue-light);font-weight:700;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;display:inline-block;}
.tiles .tile:hover .tile-go{color:#fff;}

/* ------------------------------------------------------------------
   HEADER WORDMARK 2026-09-03 - remove the text beside the seal.
   The seal already reads "MOT COMPLIANCE / GROUP" around its ring, so the
   wordmark duplicated it AND collided with the nav at ~1400-1600px
   ("GROUP" running into "SERVICES"). Drop it - the seal is self-labelling
   and the header gets the room it needs. ----------------------------- */
a.brand span{display:none !important;}
.head-row{gap:28px;}

/* ---- Consultants: real profiles (Kim, 2026-09-04) ------------------------- */
.cons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:22px;}
.cons-card{display:grid;grid-template-columns:150px 1fr;background:var(--soft);
  border:1px solid var(--line);overflow:hidden;}
.cons-photo{min-height:100%;background-color:#2A2626;}
.cons-photo--mono{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#173958,#0B2033);}
.cons-photo--mono span{font-family:var(--display);font-weight:900;font-size:42px;
  letter-spacing:-.02em;color:rgba(255,255,255,.30);}
.cons-body{padding:24px 26px 22px;}
.cons-kick{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--blue-light);margin-bottom:9px;}
.cons-name{font-family:var(--display);font-size:23px;font-weight:900;letter-spacing:-.02em;
  margin:0 0 3px;color:var(--ink);}
.cons-role{font-size:13.5px;color:var(--body);margin-bottom:13px;}
.cons-copy p{font-size:14px;line-height:1.6;color:var(--body);margin:0 0 11px;}
.cons-pull{margin:14px 0 12px;padding-left:15px;border-left:3px solid var(--blue);
  font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:300;}
.cons-meta{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#8E8888);}
@media(max-width:820px){
  .cons-grid{grid-template-columns:1fr;}
  .cons-card{grid-template-columns:1fr;}
  .cons-photo{min-height:200px;}
  .cons-body{padding:20px;}
}

/* ---- Footer, Everard structure in MOT Expert theme (Ben 2026-09-04) --------
   Two-column asymmetry with a RIGHT-ALIGNED link list, which is the device that
   makes Everard's footer read as designed rather than generic. Their gold
   contact icons become our blue; their pure black becomes our charcoal. Icons
   are inline SVG - same shapes as their Font Awesome set, no CDN request. ---- */
footer.site .fnew{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;
  padding:70px 0 56px;}
.fnew-seal{width:66px;height:auto;display:block;margin-bottom:16px;}
.fnew-name{font-family:var(--display);font-weight:900;font-size:19px;
  letter-spacing:-.01em;color:#fff;margin-bottom:20px;}
.fnew-contact{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;}
.fnew-contact li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;
  line-height:1.45;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);}
.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;}
.fnew-social{display:flex;gap:14px;margin-bottom:26px;}
.fnew-social a{color:#fff;opacity:.85;transition:.16s;}
.fnew-social a:hover{opacity:1;color:var(--blue-light);}
.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:8px;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:12px 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:var(--muted,#8E8888);text-decoration:none;}
.fnew-bar a:hover{color:#fff;}
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;gap:34px;padding:48px 0 36px;text-align:center;}
  .fnew-seal{margin-left:auto;margin-right:auto;}
  .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;}
}

/* ==================================================================
   TIDY-UP PASS 2026-09-04. Ben: "needs some major tidying up",
   "its not smooth", "the footer needs sorting on both, spacing is all over".
   Two measured faults, not taste.
   ================================================================== */

/* ---- 1. ONE CONTENT MEASURE ---------------------------------------
   Measured text-left down the homepage was 28, 52, 251, 236, 61, 28. Three
   different measures were in play - full .wrap, .mid at 900px and .narrow at
   820px - so every section began at a different x and the eye had no edge to
   track. Each was defensible alone; together they read as ragged. Long-form
   article bodies keep a narrow measure (that IS a reading decision), but
   marketing sections all sit on the same gutter now. ------------------- */
.sec .wrap.narrow, .sec .wrap.mid,
.ctaband .wrap.narrow, .ctaband .wrap.mid,
.intro.narrow, .intro.mid{max-width:var(--maxw);}
.article .wrap.narrow, .article .wrap.mid{max-width:820px;}  /* reading measure kept */

/* The lone centred sentence under the hero was an orphan in a large empty
   band. Put it on the measure and give it a real width. */
.intro{text-align:center;}
.intro p{max-width:46ch;font-size:clamp(22px,2.4vw,30px);line-height:1.35;}

/* ---- 2. FOOTER RHYTHM ---------------------------------------------
   Stacked gaps measured 16 / 21 / 0 / 26px - the trust badge was touching the
   contact block because of margin collapse. Replaced margins with an explicit
   grid gap so the browser cannot collapse them, and the two columns now start
   on the same baseline. ------------------------------------------------ */
footer.site .fnew{padding:40px 0 30px;align-items:start;}
.fnew-brand{display:grid;justify-items:start;gap:14px;align-content:start;}
.fnew-seal{margin:0;}
.fnew-name{margin:0;}
.fnew-contact{margin:0;gap:8px;}
.fnew-trust{margin:0;}
.fnew-links{gap:16px;}
.fnew-social{margin:0;}

@media(max-width:820px){
  .fnew-brand{justify-items:center;gap:18px;}
  .intro{text-align:center;}
  .intro p{margin-left:auto;margin-right:auto;}
}

/* ---- Header CTAs + footer compaction, 2026-09-04 -------------------
   Ben: "not happy with the tiles in the header for log in or get started, look
   poor" and "spacing on the right side of footer is too much, need to compact".

   HEADER: Client Login was a thin 1px white outlined box sitting immediately
   beside the solid blue Get Started. Two boxes of near-equal weight next to each
   other read as two competing buttons, and a hairline outline over photography
   looks cheap. Everard's answer is the right one: an ACCOUNT ICON and text, not
   a box, so a single solid CTA carries the eye. Login becomes a quiet link with
   a person icon; Get Started stays the one button in the header. ---------- */
.hd-login{
  border:0;
  padding:8px 4px;
  gap:8px;
  color:#e8eef4;
  font-size:13.5px;
  letter-spacing:.06em;
  position:relative;
}
.hd-login::before{
  content:"";
  width:17px;height:17px;flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1.5c0-3-3.6-5.5-8-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.5-8 5.5V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1.5c0-3-3.6-5.5-8-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85;
}
.hd-login:hover{background:transparent;color:#fff;border:0;}
.hd-login:hover::before{opacity:1;}
/* the one real button in the header gets a little more presence */
.head-cta .btn.btn-blue{padding:13px 24px;font-size:15px;}

/* FOOTER: the right column was stretched to the left column's full height, so
   its 10 links sat on a tall loose stack against a lot of dead space. Compact
   the list and stop the column stretching. */
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;}

/* ---- Hero montage: GPU-promote the cross-fade, 2026-09-05 -----------------
   Ben: "the scrolling of the images on the heros is a bit choppy."

   The hero holds FOUR full-bleed 2560px background images stacked at
   position:absolute, cross-fading on opacity. With no layer promotion they all
   live on one compositor layer, so every step of a 1.4s fade repaints a
   full-screen bitmap - roughly 70MB of decoded image being pushed around. That
   stutters, and it stutters most while scrolling because the scroll and the fade
   compete for the same paint.

   translateZ(0) + will-change:opacity gives each frame its own layer, so the
   fade becomes a pure GPU composite with no repaint. contain:paint stops the
   hero's paint work leaking into the rest of the page during scroll.

   NOTE will-change is set only on .frame, not broadly - promoting everything
   costs memory and can make things worse. -------------------------------- */
.hero{contain:paint;}
.hero .slides .frame{
  transform:translateZ(0);
  will-change:opacity;
  backface-visibility:hidden;
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
}
/* the drifting Ken Burns move belongs on the ACTIVE frame only, so an idle
   hero has motion without four images animating at once */
.hero .slides .frame.on{
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:translateZ(0) scale(1.04);}
  to{transform:translateZ(0) scale(1.10) translate3d(-1.2%,-1%,0);}
}
@media (prefers-reduced-motion: reduce){
  .hero .slides .frame,.hero .slides .frame.on{
    animation:none; transition:none; transform:none; will-change:auto;}
}

/* ---- Junction + footer compaction 2026-09-05 ------------------------------
   Ben: "im seeing alot of space between elements" + "footer needs compacting".
   Measured, not eyeballed: every junction where two padded sections meet
   stacked 58px + 58px = 116-120px of void (hero->sec 114, sec->sec 116,
   ctaband->footer 120). Individually each section's padding was fine; PAIRED
   they doubled. Trim the follower's top padding at every stacked junction so a
   junction is ~70px, not ~116. ------------------------------------------- */
.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;}
.intro{padding:34px 0 26px;}
.ctaband{padding:48px 0;}
/* a coloured band is its own visual box - junction trims must not lopside it */
.sec.brand, .sec + .sec.brand, .sec.soft + .sec.brand{padding:44px 0;}

/* footer: tighter everywhere - the brand column and link list read as loose
   stacks against the page above once the junctions tightened */
footer.site .fnew{padding:42px 0 34px;gap:32px;}
.fnew-brand{gap:15px;}
.fnew-seal{width:54px;}
.fnew-name{font-size:17px;}
.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){
  .sec + .sec, .sec + .sec.soft, .sec.soft + .sec, .sec.soft + .sec.soft,
  .hero + .sec{padding-top:20px;}
  footer.site .fnew{padding:34px 0 26px;gap:24px;}
}

/* header seal up from 44px - Ben 2026-09-05: "logo to increase in header".
   The seal's ring text needs size to read; 62px against the 104px bar. */
.topbar .brand img{height:62px;}
@media(max-width:820px){ .topbar .brand img{height:48px;} }

/* ---- Ken Burns fix 2026-09-05. Ben: "really slow, bit glitchy". ------------
   The glitch: the drift ran only on .frame.on, so at every slide swap the
   outgoing frame's animation STOPPED and it snapped back to scale(1) while
   still visible mid-fade. Run the drift on ALL frames continuously instead -
   they are promoted layers now, so four drifting frames are composite-only and
   nothing ever snaps. Staggered delays so frames are never in lockstep.
   26s was also below perception; 14s with a slightly bigger move reads. ---- */
.hero .slides .frame,
.hero .slides .frame.on{
  animation:heroDrift 14s ease-in-out infinite alternate;
}
.hero .slides .frame:nth-child(2){animation-delay:-4s;}
.hero .slides .frame:nth-child(3){animation-delay:-8s;}
.hero .slides .frame:nth-child(4){animation-delay:-12s;}
@keyframes heroDrift{
  from{transform:translateZ(0) scale(1.06);}
  to{transform:translateZ(0) scale(1.14) translate3d(-1.6%,-1.2%,0);}
}
@media (prefers-reduced-motion: reduce){
  .hero .slides .frame,.hero .slides .frame.on{animation:none;transform:none;}
}

/* ---- Stats band rebuilt + verdict scale is now navigation 2026-09-05 ------ */
a.stat{display:block;color:inherit;text-decoration:none;transition:background .18s;}
a.stat:hover{background:rgba(255,255,255,.04);}
.st-kick{display:block;font-size:clamp(14px,1.2vw,16.5px);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-light);margin-bottom:12px;}
.st-rule{display:flex;width:56px;height:3px;margin:12px auto 12px;}
.st-rule::before,.st-rule::after{content:"";flex:1;}
.st-rule{background:linear-gradient(90deg,#1F7A45 0 25%,#8A7320 25% 50%,#B4571A 50% 75%,#A32020 75% 100%);}
.stat p{font-size:15.5px;color:#b8c7d4;max-width:30ch;margin:0 auto;}
/* verdict steps are links now */
.v-step{cursor:pointer;text-decoration:none;transition:transform .16s ease,filter .16s;}
.v-step:hover{transform:translateY(-2px);filter:brightness(1.25);}
.v-step:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px;}

/* ---- 2026-09-05 evening fixes ---------------------------------------------
   1. btn-outline hover went ALL WHITE: --ink is #FFFFFF on this dark theme, so
      hover was white bg + white text. Hover fills brand blue instead.
   2. Now booking / New enquiries cards bigger (Ben).                       */
.btn-outline:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.tu-card{padding:46px 44px;}
.tu-card h3{font-size:28px;}
.tu-card p{font-size:16px;margin:0 0 26px;}
.tu-card .kick{font-size:13px;}
@media(max-width:820px){ .tu-card{padding:32px 26px;} }

/* consultant pull-quote: Ben 2026-09-05 - drop the indented border-left
   treatment; set it as an italic bold-white line instead */
.cons-pull{border-left:0;padding-left:0;margin:14px 0 12px;
  font-style:italic;font-weight:700;color:#fff;font-size:14.5px;line-height:1.5;}

/* ---- Photo tiles 2026-09-05 (Ben: "tiles we will need to upgrade") --------
   Rebuild, not a patch: photo-backed cards in the Everard register. Graded
   photo, charcoal scrim, content pinned low, hover lifts the scrim and the
   card. Replaces the flat light-card .tiles treatment. -------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px;}
.tiles .tile{
  position:relative;display:flex;align-items:flex-end;min-height:340px;
  padding:0;overflow:hidden;isolation:isolate;border:1px solid var(--line);
  background:var(--soft);color:#fff;text-decoration:none;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s;
}
.tiles .tile .tile-bg{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transform:translateZ(0) scale(1.01);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.tiles .tile::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(21,18,19,.20) 0%,rgba(21,18,19,.55) 55%,rgba(21,18,19,.92) 100%);
  transition:background .25s;
}
.tiles .tile-body{position:relative;z-index:2;padding:26px 24px 24px;width:100%;}
.tiles .tile h3{font-family:var(--display);font-size:20px;font-weight:800;
  letter-spacing:-.015em;line-height:1.22;margin:0 0 9px;color:#fff;}
.tiles .tile p{color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.55;
  margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.tiles .tile-go{color:var(--blue-light);font-weight:700;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;}
.tiles .tile-go::after{content:"\2192";transition:transform .2s;}
.tiles .tile:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.45);border-color:var(--blue);}
.tiles .tile:hover .tile-bg{transform:translateZ(0) scale(1.06);}
.tiles .tile:hover .tile-go::after{transform:translateX(4px);}
.tiles .tile:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  .tiles .tile,.tiles .tile .tile-bg,.tiles .tile-go::after{transition:none;}
}
@media(max-width:820px){ .tiles .tile{min-height:280px;} }

/* more-link (Request a demo / Our services etc): same arrow hover as tile-go */
.more-link{display:inline-flex;align-items:center;gap:7px;color:var(--blue-light);
  font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;}
.more-link::after{content:"\2192";transition:transform .2s;}
.more-link:hover::after{transform:translateX(4px);}
.more-link:hover{color:#fff;}

/* ---- Footer, decisive shrink 2026-09-05 ('its still too big') -------------
   Target: the whole footer under ~340px. Everything one notch smaller. ---- */
footer.site .fnew{padding:40px 0 30px;gap:28px;}
.fnew-brand{gap:12px;}
.fnew-seal{width:46px;}
.fnew-name{font-size:16px;}
.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;}
}

/* Ken Burns, final form 2026-09-05: PAUSED on inactive frames, RUNNING on the
   active one. animation-play-state keeps a paused frame's transform where it
   was, so nothing snaps at a slide swap - and only one full-screen layer
   animates at a time instead of four. */
.hero .slides .frame,
.hero .slides .frame.on{animation:heroDrift 14s ease-in-out infinite alternate;}
.hero .slides .frame{animation-play-state:paused;}
.hero .slides .frame.on{animation-play-state:running;}

/* ---- Mobile overflow fix (TIR QA sweep 2026-09-05) ------------------------
   The testimonial .grid3 carries an INLINE grid-template-columns:1fr 1fr, which
   outranks the stylesheet's mobile collapse - phones kept two ~135px columns
   and the quotes pushed 19px of horizontal scroll. !important is justified
   here precisely because the competing declaration is inline. -------------- */
@media(max-width:820px){
  .grid3[style]{grid-template-columns:1fr !important;}
  blockquote{overflow-wrap:break-word;}
}

/* ---- WCAG AA contrast pass (TIR QA sweep 2026-09-05) ----------------------
   axe found 257 serious colour-contrast nodes. Decoded: --blue-light #2F91C9
   and the #8E8888 muted grey sit at 4.28-4.29 on the soft panels (AA needs
   4.5), and several greys sit on the solid blue bands at 1.9-3.7. Token-level
   fix so all ~250 nodes clear in one move; the shift is a barely visible
   half-step lighter. Verified: new blue-light 5.08 on panel / 5.53 on
   charcoal; new muted 5.01 on panel; blue-band text 5.6+. --------------- */
:root{--blue-light:#3D9FD6;}
.fnew-trust-line,.fnew-bar span,.fnew-bar a,.cons-meta,.pp-label span{color:#9A9494;}
.stat p{color:#9A9494;}
/* solid blue bands: every non-white grey fails on #095FAD - lift to tinted white */
.ctaband p,.sec.brand p,.ctaband .lede,.sec.brand .lede{color:#E7F0F8;}
.sec.brand .kick,.ctaband .kick{color:#E7F0F8;}

/* contrast pass 2: axe pinpointed the residue - .kick labels use the DARK
   primary #095FAD on dark grounds (2.5:1). Labels take the light accent. */
.kick{color:var(--blue-light);}

/* 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%;}
}
@media(max-width:640px){
  .hero-head .hh-heavy{font-size:clamp(28px,10.5vw,44px);}
  .hero-head .hh-light{font-size:clamp(18px,6vw,26px);}
}

/* 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 bigger + flush left; accreditation line as highlighted text */
.fnew-seal{width:96px;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,#2F91C9);}

/* verdict band: same dark navy as the trust strip above - reads as one block */
.verdict-sec{padding:10px 0 54px;background:#0B1622;}
.verdict-sec .verdict{margin-top:0;}
.truststrip{border-bottom:0;}

/* 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:96px;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 strip stand-out: rows, bigger marks */
.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;}
.ts-badge{font-size:clamp(14px,1.2vw,16.5px);letter-spacing:.1em;}
.ts-fact{font-size:clamp(15px,1.25vw,17.5px);color:#fff;}
.ts-quote{font-size:15px;}
@media(max-width:640px){ .ts-row{gap:10px 18px;} }

/* 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,#2F91C9);}
.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;}
@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: gradients ease each band into its neighbours */
.truststrip{background:linear-gradient(180deg,#070D1A 0%,#0B1622 100%);}
.verdict-sec{background:linear-gradient(180deg,#0B1622 0%,#101a29 55%,#1d1a1c 100%);}
.sec.brand{background:linear-gradient(170deg,#0a5492 0%,var(--blue,#0360AD) 45%,#02467e 100%);}
.ctaband{background:linear-gradient(170deg,#0a5492 0%,var(--blue,#0360AD) 45%,#02467e 100%);}
.stats{background:linear-gradient(180deg,#1d1a1c 0%,#12161e 50%,#1d1a1c 100%);}
.sec.soft{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));}
footer.site{background:linear-gradient(180deg,#161d28 0%,#0B1622 100%);}

/* Meet the consultants CTA at hero scale */
a.btn[href="consultants"]{font-size:clamp(16px,1.3vw,18.5px);padding:18px 34px;}

/* footer alignment pass: logo bigger, all columns share one top line */
.fnew-seal{width:120px;}
.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 */

/* buttons: label always centred (wide/full-width CTAs were reading
   left + small at tablet widths), and 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 (Review / Fix / Manage / Protected): 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 "Call us now": white button, 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;
   social icons drop below the list instead of pushing it down */
.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);}

/* Meet the consultants CTA: bigger, sits lower off the content above */
a.btn[href="consultants"]{font-size:clamp(18px,1.5vw,21px);padding:20px 40px;margin-top:34px;}

/* 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;} }

/* team band: brand blue break between the charcoal sections */
.team-band{color:#fff;}
.team-band h2{color:#fff;}
.team-band p{color:#e7f0fa !important;}
.team-band .kick.lt{color:#bfe0f5;}
.team-band .btn-outline{color:#fff;border-color:rgba(255,255,255,.7);}
.team-band .btn-outline:hover{background:#fff;color:var(--blue,#0360AD);border-color:#fff;}

/* 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);}

/* top Coverage grid: smaller boxes, 4 to a line */
.team{grid-template-columns:repeat(4,1fr);}
.mphoto{height:230px;aspect-ratio:auto;}
@media(max-width:980px){ .team{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .team{grid-template-columns:1fr;} }

/* consultant INFO cards: 2 to a line, square-set with a wider photo panel */
.cons-grid{grid-template-columns:repeat(2,1fr);}
.cons-card{grid-template-columns:220px 1fr;}
@media(max-width:820px){
  .cons-grid{grid-template-columns:1fr;}
  .cons-card{grid-template-columns:1fr;}
}

/* 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 dark page ground - no hard seam */
.ctaband,.sec.brand{position:relative;}
.ctaband::before,.sec.brand::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;
  background:linear-gradient(180deg,rgba(29,26,28,.85),transparent);pointer-events:none;}
.ctaband>.wrap,.sec.brand>.wrap{position:relative;z-index:1;}

/* CTAs on blue bands: one urgent treatment everywhere - white, bold,
   bigger, with a soft repeating pulse */
@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,.sec.brand .btn,.team-band .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,.sec.brand .btn:hover,.team-band .btn:hover{background:#eaf3fb;color:var(--blue-dark,#024b86);}
@media (prefers-reduced-motion: reduce){ .ctaband .btn,.sec.brand .btn,.team-band .btn{animation:none;} }

/* 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);}

/* 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: white lead, blue payoff */
.intro p{color:#fff;}
.intro p .hl{color:var(--blue-light,#2F91C9);}

/* p.intro variant goes white too */
p.intro{color:#fff;}

/* 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;}

/* header CTA matches motexpert: full-size, not compacted */
.head-cta .btn.btn-blue{font-size:17px;padding:17px 28px;}

/* header nav links bigger */
.head-cta > a:not(.btn){font-size:15.5px;}
@media(max-width:1380px){ .head-cta > a:not(.btn){font-size:14.5px;} }

/* header overflow fix: keep the bigger type but let the row fit -
   tighter tracking + gaps, brand can shrink, row never wraps over the logo */
.head-cta{gap:15px;flex-wrap:nowrap;}
.head-cta > a:not(.btn){font-size:14.5px;letter-spacing:.05em;}
.brand{flex:0 1 auto;min-width:0;}
.head-row{gap:18px;}
@media(max-width:1600px){
  .head-cta > a:not(.btn){font-size:13.5px;}
  .hd-call span{display:none;}
}

/* 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;}

/* use the full page: wider content column (uniform with motexpert) */
:root{--maxw:1520px;}

/* 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;}

/* ------------------------------------------------------------------
   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;
}

/* testimonials grid: masonry-ish quote cards */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.testi{margin:0;background:var(--soft);border:1px solid var(--line);padding:28px 26px;border-radius:12px;}
.testi blockquote{margin:0 0 16px;font-size:17.5px;line-height:1.6;color:var(--ink);font-style:italic;}
.testi figcaption{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-light,#2F91C9);}
@media(max-width:1100px){ .testi-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:700px){ .testi-grid{grid-template-columns:1fr;} }

/* display-scale elements re-asserted ABOVE the broad .sec p scale-up
   (same cascade trap that hit p.intro): these must never read as body */
.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);}
.hero-head .hh-light{font-size:clamp(24px,2.8vw,38px);}
.stat .n{font-size:clamp(40px,5vw,64px);}

/* header: logo up, tab cluster centred between logo and CTA */
.brand img{height:78px;}
.topbar.scrolled .brand img{height:64px;}
.head-cta{flex:1 1 auto;justify-content:center;gap:22px;}
.head-cta .btn{margin-left:26px;}

/* 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;}

/* 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:1fr 1fr;gap:34px 28px;align-items:start;margin-top:10px;}
.sw-shot{margin:0;text-align:center;}
.sw-shot.sw-feat{grid-column:1/-1;}
.sw-shot a{display:block;border-radius:12px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);}
.sw-shot img{width:100%;height:auto;display:block;}
.sw-shot figcaption{margin:14px auto 0;max-width:520px;font-size:16px;line-height:1.5;color:color-mix(in srgb,var(--ink) 78%,transparent);}
.sw-shot figcaption strong{display:block;color:var(--ink);font-size:18px;margin-bottom:2px;}
.sw-shot.sw-feat figcaption{max-width:640px;}
@media(max-width:820px){ .sw-shots{grid-template-columns:1fr;gap:28px;} }

/* 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);}

/* 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);}

/* 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;}

/* header overflow: centred tabs may NEVER spill over the logo -
   safe center falls back to start-aligned, and the row sheds weight
   earlier as it narrows */
.head-cta{justify-content:safe center;}
.brand{position:relative;z-index:2;}
@media(max-width:1560px){
  .hd-call span{display:none;}
  .head-cta{gap:13px;}
  .head-cta > a:not(.btn){font-size:13px;letter-spacing:.05em;}
  .head-cta .btn.btn-blue{font-size:15px;padding:14px 22px;}
}
@media(max-width:1280px){
  .hd-login{display:none;}
}

/* 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. The 09-06 "footer split into 4 even columns"
   layer set footer.site .fnew to 2 columns UNCONDITIONALLY, overriding
   the earlier 820px collapse; every page overflowed on phones. 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;}
}

/* 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) - FINAL LAYER.
   Four verdicts, one appended layer so the cascade stays auditable:
   1. SHARED HEADER SPEC (identical to motexpert-site, same numbers):
      util 40px strip / head-row 88px / logo 60px / scrolled 74-52 /
      nav 14px / topbar column 1380px. Header markup was also split
      into <nav class="main"> + <nav class="head-cta"> so the row
      composes logo-left, nav-centre, CTA flush right (space-between)
      exactly like motexpert. The off-centre Get Started came from
      .head-cta{flex:1;justify-content:center} centring the whole
      cluster in the space right of the logo.
   2. Urgent white/pulsing CTA treatment removed - band buttons back
      to standard btn sizes and variants.
   3. Footer: newsletter into the right column, sizes down, grid
      recomposed as a centred two-column block.
   4. WhatsApp: desaturated green, header link reads as a real CTA
      with a visible "Call us on WhatsApp" label; ghost WA button
      added to the home CTA band (markup).
   ================================================================== */

/* ---- 1a. util strip (kept for parity with motexpert; motcg ships no
   util markup today, so these are inert until one is added) */
.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;}

/* ---- 1b. main row: the shared spec numbers */
.topbar .wrap{max-width:1380px;}
.head-row{height:88px;gap:clamp(16px,2vw,32px);justify-content:space-between;}
.brand{flex:0 0 auto;}
.brand img,.topbar .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{display:flex;gap:clamp(14px,1.6vw,28px);flex:0 1 auto;min-width:0;align-items:center;}
nav.main a{font-size:14px;white-space:nowrap;}
@media(max-width:980px){
  .head-row{height:76px;}
  .brand img,.topbar .brand img{height:48px;}
}

/* ---- 1c. right cluster: CTA flush right against the header column */
.head-cta{flex:0 0 auto;justify-content:flex-end;gap:15px;min-width:0;}
.head-cta .btn{margin-left:0;}
.head-cta .btn.btn-blue{font-size:15px;padding:13px 22px;}
/* burger-mode guards: the split nav must vanish exactly where the old
   single-nav did, and the burger sits right, not centred */
@media(max-width:1024px){
  nav.main{display:none;}
  .head-cta{justify-content:flex-end;flex:1 1 auto;}
}

/* ---- 2. CTA buttons back to STANDARD - the white/pulsing oversized
   "urgent" treatment is gone everywhere it was applied */
.ctaband .btn,.sec.brand .btn,.team-band .btn{
  animation:none;font-size:18px;padding:17px 28px;font-weight:700;}
.ctaband .btn-blue,.sec.brand .btn-blue,.team-band .btn-blue{
  background:linear-gradient(135deg,#0a72c4,#024b86);color:#fff;border-color:transparent;}
.ctaband .btn-ink,.sec.brand .btn-ink,.team-band .btn-ink{
  background:var(--navy);color:#fff;border-color:var(--navy);}
.ctaband .btn-ink:hover,.sec.brand .btn-ink:hover,.team-band .btn-ink:hover{
  background:var(--blue-deep);color:#fff;border-color:var(--blue-deep);}
.ctaband .btn-ghost,.sec.brand .btn-ghost,.team-band .btn-ghost,
.ctaband .btn-outline,.sec.brand .btn-outline,.team-band .btn-outline{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.ctaband .btn-ghost:hover,.sec.brand .btn-ghost:hover,.team-band .btn-ghost:hover,
.ctaband .btn-outline:hover,.sec.brand .btn-outline:hover,.team-band .btn-outline:hover{
  background:#fff;color:var(--blue,#095FAD);border-color:#fff;}
/* the oversized Meet-the-consultants button (a.btn[href] outranks the
   class rules above, so it is pinned here at its own specificity) */
a.btn[href="consultants"]{font-size:18px;padding:17px 28px;}

/* ---- 3. footer: newsletter lives in the RIGHT column (markup moved),
   everything a notch smaller, grid centred instead of edge-to-edge */
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{gap:8px;}
.fnew-contact li{font-size:14.5px;line-height:1.45;}
.fnew-links{max-width:560px;}
.fnew-links a{font-size:14.5px;}
.fnew-links li{margin-bottom:8px;}
.fnew-links ul{column-gap:44px;}
.fnew-links .fnew-nl{order:3;width:100%;max-width:380px;margin-top:16px;}
.fnew-nl-t{font-size:14.5px;}
@media(max-width:820px){
  /* the mobile footer collapse must still win: one centred column */
  footer.site .fnew{grid-template-columns:1fr;justify-content:stretch;
    gap:30px;padding:36px 0 26px;}
  .fnew-links{max-width:none;}
  .fnew-links .fnew-nl{margin:12px auto 0;}
}

/* ---- 4. WhatsApp: desaturated brand green, and the header link is a
   real labelled CTA, not a bare icon */
.hd-wa{gap:8px;padding:9px 14px;border:1.5px solid rgba(29,168,81,.65);
  border-radius:12px;transition:.18s;}
.hd-wa svg{color:#1DA851;}
.hd-wa:hover{background:rgba(29,168,81,.14);border-color:#1DA851;}
.hd-wa:hover svg{color:#25b95c;}
.hd-wa span,.hd-wa:hover span{color:#fff;display:inline;}
/* label yields before the row can crowd; the pill stays */
@media(max-width:1300px){
  .hd-wa span{display:none;}
  .hd-wa{border:0;padding:6px 2px;}
  .hd-wa svg{width:22px;height:22px;}
}

/* ==================================================================
   2026-09-07 review round 2 (Ben) - FINAL LAYER.
   1. Header contact links are plain coloured TEXT (markup dropped the
      phone + WhatsApp SVGs): "Call us" in the accent blue, "Call us on
      WhatsApp" in desaturated WhatsApp green. Client Login / Get
      Started / burger untouched.
   2. Logo clip: the fault was IN THE ASSET - seal-motcg.png (and its
      600dpi vault source) were extracted from the print proof with the
      top of the ring text already sheared off at the canvas edge. The
      seal was rebuilt from the client's own complete site logo
      (assets/software/Asset-3mot-logo.png), ground knocked out, 4%
      safety margin. CSS here only retires the fragile percentage
      max-height so no engine can second-guess the explicit heights.
   3. Callback modal: compact (~460px, capped to the viewport, scrolls
      internally); auto-open removed in site.js - opens on click only.
   4. Footer: newsletter is now a full-width bottom-centre block above
      the copyright bar (markup moved); the remaining brand|links grid
      spreads across the full content width - flush left / flush right
      (identical treatment applied on motexpert). Mobile stays one
      centred column.
   ================================================================== */

/* ---- 1. header contact links: coloured text, no icons.
   Written at .head-cta > a specificity - the generic header-link rule
   (.head-cta > a:not(.btn){color:#e8eef4}) outranks a bare class. */
.head-cta > a.hd-call,.hd-call{color:var(--blue-light,#3D9FD6);font-weight:700;}
.head-cta > a.hd-call:hover,.hd-call:hover{color:#fff;}
.head-cta > a.hd-wa,.hd-wa{border:0;border-radius:0;padding:6px 0;background:none;
  color:#1DA851;font-weight:700;}
.head-cta > a.hd-wa:hover,.hd-wa:hover{background:none;color:#25c463;}
/* the old span-hiding breakpoints matched markup that no longer exists;
   whole links yield instead as the row narrows */
@media(max-width:1420px){.hd-wa{display:none;}}
@media(max-width:1150px){.hd-call{display:none;}}

/* ---- 2. logo: explicit heights only (asset itself was repaired) */
.brand img,.topbar .brand img{max-height:none;}

/* ---- 3. callback modal: compact, always clickable */
.cb-modal{max-width:460px;padding:24px 26px 22px;border-top-width:4px;
  max-height:calc(100vh - 48px);overflow:auto;}
.cb-modal h3,.cb-modal h2{font-size:25px;font-weight:800;margin:4px 0 10px;}
.cb-modal .kick{font-size:12px;letter-spacing:.12em;}
.cb-modal .cb-sub{font-size:14px;line-height:1.5;margin:0 0 10px;}
.cb-modal .cb-talk{margin:0 0 14px;}
.cb-form{gap:10px;}
.cb-form label{font-size:13px;}
.cb-form input,.cb-form select{padding:10px 12px;font-size:15px;margin-top:5px;}
.cb-form .btn{font-size:15px;padding:12px 18px;margin-top:2px;}
.cb-trust{font-size:11px;margin-top:10px;}
.cb-close{top:10px;right:12px;font-size:30px;line-height:1;padding:6px 10px;}
.cb-close:hover{color:var(--blue,#095FAD);}

/* ---- 4. footer: newsletter bottom-centre; grid uses the full width */
footer.site .fnew{grid-template-columns:auto auto;
  justify-content:space-between;gap:48px;padding:44px 0 18px;}
footer.site .wrap>.fnew-nl{max-width:420px;margin:0 auto;
  padding:6px 0 34px;text-align:center;}
footer.site .wrap>.fnew-nl .nlform{justify-content:center;}
footer.site .wrap>.fnew-nl .fnew-nl-t{font-size:15px;}
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;justify-content:stretch;
    gap:30px;padding:36px 0 10px;}
  footer.site .wrap>.fnew-nl{padding:4px 0 26px;}
}

/* ==================================================================
   2026-09-07 review round 3 (Ben) - FINAL LAYER.
   Footer = FOUR EQUAL COLUMNS, evenly spaced across the full content
   width: brand (seal + name + social) | contact | links A | links B.
   Markup restructured with fresh class names (.fnew-brand2 /
   .fnew-col / .fnew-list) so the legacy .fnew-brand grid-area and
   .fnew-links flex/order layers cannot fight the new composition -
   same escape motexpert uses. The link list is split into two real
   ULs, not CSS columns. Newsletter stays bottom-centre (approved);
   copyright bar unchanged. Mobile <=820px: one centred column.
   ================================================================== */
footer.site .fnew{grid-template-columns:repeat(4,1fr);
  justify-content:stretch;gap:36px;padding:44px 0 18px;align-items:start;}
.fnew-brand2{display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;min-width:0;}
.fnew-brand2 .fnew-seal{width:120px;margin:0;}
.fnew-brand2 .fnew-name{margin:0;}
.fnew-brand2 .fnew-social{margin:2px 0 0;justify-content:flex-start;}
.fnew-col{min-width:0;}
.fnew-list{list-style:none;margin:0;padding:0;}
.fnew-list li{margin-bottom:8px;}
.fnew-list a{color:var(--body);text-decoration:none;font-size:14.5px;
  line-height:1.35;transition:.16s;}
.fnew-list a:hover{color:#fff;}
@media(max-width:820px){
  footer.site .fnew{grid-template-columns:1fr;gap:28px;
    padding:36px 0 10px;text-align:center;}
  .fnew-brand2{align-items:center;}
  .fnew-brand2 .fnew-social{justify-content:center;margin:2px auto 0;}
  .fnew-col{text-align:center;}
  .fnew-contact li{justify-content:center;text-align:left;}
}

/* ==================================================================
   2026-09-07 review round 4 (Ben, laptop-width pass) - FINAL LAYER.
   1. Header contact links: BOTH "Call us" and "Call us on WhatsApp"
      stay visible down to ~1100px - the round-2 yield rules hid the
      WhatsApp link at <=1420 ("we've lost a WhatsApp"). The cluster
      shrinks font/gaps dynamically at laptop widths instead of
      dropping links; only <=1100 may they yield. Mobile burger
      behaviour unchanged (<=1024 hides all .head-cta links with a
      stronger selector than these).
   2. Accreditation strip: every mark normalised into an equal 54px
      chip - object-fit:contain, capped width, bottom-aligned row so
      the labels share one line.
   ================================================================== */

/* ---- 1. contact links back at laptop widths, tidy even cluster */
.hd-wa,.hd-call{display:inline-flex;align-items:center;}
@media(max-width:1380px){
  .head-cta{gap:10px;}
  .head-cta > a:not(.btn){font-size:12.5px;letter-spacing:.04em;}
  nav.main{gap:12px;}
  nav.main a{font-size:13px;}
  .head-cta .btn.btn-blue{font-size:14px;padding:12px 18px;}
}
@media(max-width:1100px){
  .hd-wa,.hd-call{display:none;}
}

/* ---- 2. accreditation strip: one consistent mark height */
.ts-logos{align-items:flex-end;justify-content:center;gap:18px 40px;}
.ts-logo{gap:12px;}
.ts-logo .chip{height:54px;min-height:54px;display:flex;
  align-items:center;justify-content:center;}
.ts-logo .chip img{height:54px;max-height:54px;width:auto;
  max-width:170px;object-fit:contain;}
.ts-logo svg{width:54px;height:54px;}
@media(max-width:640px){
  .ts-logo .chip,.ts-logo .chip img{height:46px;min-height:46px;}
  .ts-logo svg{width:46px;height:46px;}
}

/* ---- 2026-09-09 Ben desktop review punch list ------------------------------
   bigger logo + nav; service tiles aligned title starts; arrows off the tile
   links (house rule); topbar decrowded in the html (WhatsApp label). */
.brand img{height:58px;}
nav.main a{font-size:15px;font-weight:600;}
.tiles .tile h3{min-height:calc(1.22em * 2);}
.tiles .tile p{min-height:calc(1.55em * 3);}
.tile-go::after,.tiles .tile-go::after,.more-link::after{content:none;}
/* level title starts across a tile row: uniform reserves, clamp re-asserted */
.tiles .tile h3{min-height:calc(1.22em * 3);}
.tiles .tile p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.55em * 3);}

/* ---- 2026-09-09 title shadowing (Ben) - depth on photo heroes and photo tiles,
   a whisper on panel headings. */
.hero h1{text-shadow:0 3px 26px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.40);}
.hero .sub,.hero .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.45);}
.tiles .tile h3{text-shadow:0 2px 12px rgba(0,0,0,.65);}
.tiles .tile p{text-shadow:0 1px 8px rgba(0,0,0,.55);}
h2.cap,.sec-head h2{text-shadow:0 2px 10px rgba(0,0,0,.30);}
.cons-name{text-shadow:0 1px 6px rgba(0,0,0,.30);}
/* header seal bigger with room; footer seal + social icons up to visible size */
.head-row{height:96px;}
.brand{flex-shrink:0;margin-right:26px;}
.brand img{height:76px;}
footer.site .brand img{height:64px;margin-bottom:18px;}
.fnew-social{gap:18px;}
.fnew-social .fi{width:26px;height:26px;flex:0 0 26px;}
.social{gap:16px;}
.social a{width:42px;height:42px;}
.social svg{width:20px;height:20px;}
/* seal size override at the header-system's own specificity */
.head-row{height:100px;}
.brand img,.topbar .brand img{height:80px;max-height:none;}
.topbar.scrolled .head-row{height:80px;}
.topbar.scrolled .brand img{height:62px;}
/* 80px stole too much row: 72px seal, tighter gaps, keep everything clear */
.brand img,.topbar .brand img{height:72px;}
.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;} }

/* DVSA compliance band on the homepage: whole block centred, like its button (Ben 2026-10-12) */
.team-band .wrap{text-align:center;max-width:900px;}
.team-band .kick.lt{display:block;text-align:center;}

/* footer brand column: seal, company name and socials centred in the column (Ben 2026-10-12) */
.fnew-brand2{display:grid;grid-template-columns:1fr;grid-template-areas:none;justify-items:center;text-align:center;align-content:start;gap:12px;}
.fnew-brand2 > *{grid-column:1;grid-area:auto;}
.fnew-brand2 .fnew-social{justify-content:center;}

/* footer seal centred with the name (Ben 2026-10-12) - overrides the older justify-self:start rules */
.fnew-brand2 .fnew-seal{justify-self:center;margin:0 auto;grid-column:1;grid-row:auto;}

/* ---- 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;}
}
/* phones: the highlighted phrase in a heading is nowrap, so the ctaband heading ran off the right edge */
@media(max-width:480px){ .ctaband h2{font-size:clamp(21px,6.3vw,28px);} }
/* 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 the first label was cut off on the left and the last 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;} }
/* 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;}
}

/* wide screens (1561px and up): the header's type grows but its row was capped at 1380px, so "FAQs"
   ran into "Call us". Give the row the room. */
@media(min-width:1561px){ .topbar .wrap{max-width:min(1680px,94vw);} }

/* ---- 2026-10-13 mobile pass 3 (Ben: optimisation + centring on phones) ----
   Trust strip: a later desktop rule (.ts-logos align-items:flex-end) was winning over the stacked
   phone layout, so every logo + label sat pushed to the right of centre (home + consultants). */
@media(max-width:640px){
  .ts-logos{align-items:center;}
  .ts-logos .ts-logo{align-items:center;text-align:center;}
}
/* DVSA verdict: four pills across a phone made the labels unreadable - two per row */
@media(max-width:480px){
  .v-step{flex:1 1 42%;font-size:14px;padding:13px 8px;}
  .v-sub{font-size:12px;}
}
@media(max-width:820px){
  /* tick lists: the tick was pinned to the left edge while the text was centred */
  .row2 li,.detail ul.checks li{padding-left:0;}
  .row2 li::before,.detail ul.checks li::before{position:static;display:inline-block;margin-right:8px;}
  /* hero buttons: one consistent width when they stack */
  .hero .cta-row .btn{width:100%;max-width:340px;}
}

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

/* consultants: tagline stacks on mobile, no stray separators (Ross 14/10) */
@media(max-width:640px){ .tagline-list .tl-dot{display:none;} .tagline-list span{display:block;line-height:1.6;} }

/* consultants trust strip: tighter, 6 marks (Ross 14/10) */
.ts-tight .wrap{padding-top:30px;padding-bottom:26px;gap:0;}
.ts-tight .ts-logos{gap:18px 28px;align-items:flex-start;}
.ts-tight .ts-logo{gap:8px;flex:1 1 0;min-width:120px;max-width:190px;text-align:center;}
.ts-tight .ts-logo svg{width:50px;height:50px;}
.ts-tight .ts-logo .chip img{height:50px;}
.ts-tight .ts-logo b{font-size:13px;line-height:1.3;}
@media(max-width:820px){ .ts-tight .ts-logos{flex-direction:row;flex-wrap:wrap;justify-content:center;} .ts-tight .ts-logo{flex:0 0 42%;max-width:none;} }
@media(max-width:640px){ .ts-tight .wrap{padding-top:22px;padding-bottom:20px;} .ts-tight .ts-logos{gap:16px 10px;} .ts-tight .ts-logo svg{width:40px;height:40px;} .ts-tight .ts-logo .chip img{height:40px;} .ts-tight .ts-logo b{font-size:12px;} }

/* ==================================================================
   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;}
@media(max-width:820px){ .sec-head{justify-content:center;} .sec-head > div{width:100%;text-align:center;} }

/* consultants, phones: Phil + Dan are square headshots; the desktop fit (width-fit, top, faded
   bottom) showed only the top of the head on a 200px mobile frame (Ross 15/10 screenshots) */
@media(max-width:820px){
  .cons-photo{min-height:260px;}
  .cons-photo[aria-label="Phil Hicks"]{background:url(/assets/consultants/phil.webp?v=3) center 38%/cover no-repeat #CFCFCB !important;}
  .cons-photo[aria-label="Simon Francis"]{background-position:center 12% !important;}
  .cons-photo[aria-label="Dan Sheppard"]{background:url(/assets/consultants/dan.webp?v=3) center 38%/cover no-repeat #D8CFC5 !important;}
}

/* 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;}
}