:root{--brand:#12355b;--on-brand:#ffffff;--deep:#0d2540;--on-deep:#ffffff;--spark:#ffc629;--on-spark:#14181c;--tint:#f1f3f5;--line:#cbd3db;--ink:#0d161f;--soft:#404f5f}
/* Sign-written van: a strong colour, big condensed lettering, livery stripes and the phone number always in reach. */
:root{--display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--body:"Barlow","Segoe UI",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 clamp(1.0625rem,1rem + .22vw,1.1875rem)/1.55 var(--body);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;text-wrap:balance}
:focus-visible{outline:3px solid var(--spark);outline-offset:3px}
.wrap{width:100%;max-width:78rem;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem}
.logo{font:800 1.8rem/1 var(--display);letter-spacing:.015em;text-transform:uppercase;color:var(--brand);text-decoration:none}
.logo img{max-height:3rem;width:auto}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a:not(.tel){padding:.35rem 0;border-bottom:3px solid transparent;font-weight:600;text-decoration:none}
.nav a:not(.tel):hover,.nav a[aria-current]{border-color:var(--spark)}
.tel,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.1rem;border:2px solid transparent;border-radius:4px;font:800 1.45rem/1 var(--display);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer}
.tel{background:var(--spark);color:var(--on-spark)}
.tel svg{flex:none;width:1em;height:1em}
.btn{background:transparent;color:inherit;border-color:currentColor}
.menu{display:none;position:relative}
.menu summary{padding:.5rem .8rem;border:2px solid var(--brand);border-radius:4px;color:var(--brand);font:800 1.2rem/1 var(--display);list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + .5rem);display:grid;min-width:12rem;padding:.4rem;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 30px rgb(0 0 0 / .18)}
.menu nav a{padding:.6rem .7rem;font-weight:600;text-decoration:none}
.hero,.banner,.cta{position:relative;overflow:hidden;background:var(--brand);color:var(--on-brand)}
.livery{position:absolute;top:-6%;bottom:-6%;right:-8%;width:44%;display:flex;gap:.9rem;transform:skewX(-14deg);pointer-events:none}
.livery i{display:block}
.livery i:nth-child(1){flex:0 0 1.25rem;background:var(--spark)}
.livery i:nth-child(2){flex:0 0 .4rem;background:var(--spark)}
.livery i:nth-child(3){flex:1;background:var(--deep)}
.livery .ph{position:relative;flex:1;overflow:hidden}
.livery .ph img{position:absolute;top:0;left:-20%;width:140%;max-width:none;height:100%;object-fit:cover;transform:skewX(14deg)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(3rem,6.5vw,6rem)}
.hero h1{font-size:clamp(3.1rem,2.2rem + 4.2vw,6rem);line-height:.96}
.lead{margin-top:1.25rem;max-width:36rem;font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.4}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.jobcard{padding:1.35rem;background:#fff;color:var(--ink);border-radius:6px;box-shadow:0 20px 44px rgb(0 0 0 / .28)}
.jobcard h2{font-size:2rem}
.jobcard p{margin-top:.3rem;color:var(--soft);font-size:1rem;line-height:1.35}
.jobform{display:flex;gap:.5rem;margin-top:.9rem}
.field{width:100%;min-width:0;padding:.7rem .75rem;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:4px;font:inherit}
.field:focus{outline:none;border-color:var(--brand)}
.send{flex:none;padding:.7rem 1rem;background:var(--brand);color:var(--on-brand);border:0;border-radius:4px;font:800 1.3rem/1 var(--display);cursor:pointer}
.sugg{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.sugg button{padding:.42rem .7rem;background:var(--tint);color:var(--ink);border:0;border-radius:99px;font:500 .95rem/1.2 var(--body);text-align:left;cursor:pointer}
.plate{background:var(--deep);color:var(--on-deep)}
.plate-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 3rem;padding-block:1.2rem}
.plate small{display:block;color:var(--spark);font:800 1.05rem/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase}
.plate span,.plate a{font-weight:500;text-decoration:none}
.sec{padding-block:clamp(3rem,6vw,5.5rem)}
.sec h2,.h2{font-size:clamp(2.5rem,1.9rem + 2.5vw,4.25rem)}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem)}
.split.rev{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.jobs{margin:0;padding:0;list-style:none;border-top:4px solid var(--ink)}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.2rem 1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.job b{font:700 clamp(1.65rem,1.4rem + .9vw,2.3rem)/1.05 var(--display)}
.job span{grid-column:1;color:var(--soft)}
.job svg{grid-column:2;grid-row:1/3;width:1.6rem;height:1.6rem;color:var(--brand);transition:transform .15s}
@media (hover:hover){.job:hover svg{transform:translateX(5px)}}
.tinted{background:var(--tint)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin:2rem 0 0;padding:0;list-style:none}
.steps li{padding-top:.85rem;border-top:4px solid var(--brand)}
.steps .n{display:block;color:var(--brand);font:800 3.5rem/1 var(--display)}
.steps h3{margin-top:.2rem;font-size:1.85rem}
.steps p{margin-top:.4rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.75rem;margin-top:1.75rem}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.towns{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:1.25rem 0 0;padding:0;list-style:none;color:var(--brand);font:800 clamp(2.1rem,1.6rem + 2.6vw,3.75rem)/1.08 var(--display)}
.towns li:not(:last-child)::after{content:"/";margin-left:1rem;color:var(--spark)}
.areas-text{margin-top:1rem;max-width:42rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:4px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;font:700 clamp(1.45rem,1.3rem + .5vw,1.8rem)/1.12 var(--display);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--brand);font-size:1.5em;line-height:.8}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding-bottom:1.1rem;max-width:44rem}
.cta .livery{width:30%}
.cta-in{position:relative;padding-block:clamp(2.75rem,5.5vw,4.75rem)}
.cta h2{font-size:clamp(2.75rem,2rem + 3vw,4.75rem);max-width:16ch}
.cta p{margin-top:.75rem;max-width:34rem;font-size:1.2rem;line-height:1.4}
.foot{background:var(--deep);color:var(--on-deep);font-size:1rem}
.foot-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:1.75rem clamp(1.5rem,4vw,4rem);padding-block:2.75rem}
.foot b{display:block;margin-bottom:.4rem;font:800 1.6rem/1.05 var(--display);letter-spacing:.01em}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:.25rem}
.foot a{text-underline-offset:.15em}
.legal{padding-block:1rem;border-top:1px solid rgb(127 127 127 / .35);font-size:.9rem}
.banner .livery{width:30%}
.banner-in{position:relative;padding-block:clamp(2.5rem,5vw,4.5rem)}
.banner h1{font-size:clamp(3rem,2.2rem + 3.6vw,5.25rem);max-width:15ch}
.banner p{margin-top:.8rem;max-width:36rem;font-size:1.2rem;line-height:1.4}
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.75rem clamp(1.5rem,4vw,4rem);padding-block:2rem;border-top:1px solid var(--line);scroll-margin-top:6rem}
.svc:first-child{border-top:4px solid var(--ink)}
.svc h2{font-size:clamp(2rem,1.7rem + 1.3vw,3rem)}
.prose p+p{margin-top:1rem}
.prose{max-width:42rem;font-size:1.15em}
.facts{display:grid;gap:1rem;align-self:start;padding:1.35rem;background:var(--tint);border-top:4px solid var(--brand)}
.facts small{display:block;color:var(--brand);font:800 1.05rem/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase}
.bigtel{display:block;margin-top:.5rem;color:var(--brand);font:800 clamp(2.9rem,2rem + 4vw,4.75rem)/1 var(--display);text-decoration:none}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1.1rem}
.formgrid label{display:grid;gap:.25rem;font-weight:600}
.formgrid .wide{grid-column:1/-1}
.formdone{grid-column:1/-1;font-weight:600}
.h2.small{font-size:1.9rem}
.h2.spaced{margin-top:2.25rem}
.gap1{margin-top:1rem}
.formnote{color:var(--soft);font-size:.95rem;line-height:1.35}
.formstatus{font-weight:600}
.formstatus:empty{display:none}
.formgrid.sent>:not(.formstatus){display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.callbar{display:none}
@media (max-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1fr);padding-top:4.25rem}
  .hero .livery{top:-.5rem;bottom:auto;right:-5%;width:72%;height:3.25rem;gap:.6rem}
  .hero .livery i:nth-child(1){flex-basis:.9rem}
  .banner .livery,.cta .livery{top:-.5rem;bottom:auto;right:-5%;width:50%;height:1.9rem;gap:.5rem}
  .banner-in,.cta-in{padding-top:3.25rem}
  .banner .livery i:nth-child(1),.cta .livery i:nth-child(1){flex-basis:.7rem}
  .banner .livery i:nth-child(2),.cta .livery i:nth-child(2){flex-basis:.25rem}
}
@media (max-width:760px){
  .nav{display:none}
  .menu{display:block}
  .logo{font-size:1.55rem}
  .split,.split.rev,.svc,.foot-in,.steps{grid-template-columns:minmax(0,1fr)}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;padding:.55rem max(12px,env(safe-area-inset-right,0px)) calc(.55rem + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:#fff;border-top:1px solid var(--line)}
  .callbar .btn{color:var(--brand)}
  .callbar a,.callbar button{padding:.72rem .4rem;font-size:1.25rem}
  body{padding-bottom:4.4rem}
}
@media (prefers-reduced-motion:reduce){.job svg{transition:none}}
.fab{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:26;padding:.8rem 1.1rem;background:var(--brand);color:var(--on-brand);border:0;border-radius:99px;box-shadow:0 10px 26px rgb(0 0 0 / .3);font:800 1.3rem/1 var(--display);cursor:pointer}
.askbox{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;width:min(24rem,calc(100vw - 40px));height:min(34rem,calc(100vh - 40px));background:#fff;border-radius:8px;box-shadow:0 20px 50px rgb(0 0 0 / .35);overflow:hidden}
.askbox[hidden]{display:none}
.askhead{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;background:var(--brand);color:var(--on-brand)}
.askhead div{flex:1;min-width:0;line-height:1.15}
.askhead b{display:block;font:800 1.35rem/1.05 var(--display)}
.askhead span{font-size:.85rem}
.askhead button{width:2.4rem;height:2.4rem;padding:0;background:none;border:0;color:inherit;font-size:1.5rem;cursor:pointer}
.asklog{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5rem;padding:1rem;overflow-y:auto;font-size:1rem}
.askmsg{max-width:88%;padding:.5rem .75rem;border-radius:10px;line-height:1.35;overflow-wrap:anywhere}
.askmsg.bot{align-self:flex-start;background:var(--tint)}
.askmsg.me{align-self:flex-end;background:var(--brand);color:var(--on-brand)}
.askmsg.wait{opacity:.65}
.askbox form{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line)}
.askmsg.note{align-self:stretch;max-width:100%;padding:.15rem 0 .15rem .6rem;border-left:3px solid var(--spark);border-radius:0;font-size:.92rem;font-weight:600}
.asknote{padding:0 .75rem .6rem;color:var(--soft);font-size:.82rem;line-height:1.3}
@media (max-width:760px){.fab{display:none}.askbox{top:var(--vv-top,0px);right:0;left:0;bottom:auto;width:100%;height:var(--vv-h,100dvh);border-radius:0}body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}body:has(.field:focus) .callbar{display:none}}