@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* Delphic International Ltd — site styles
   Palette taken from the Schmitz Cargobull livery specification:
   Ultramarinblau SCB 50002, Signalgelb RAL 1003, Tiefschwarz RAL 9005 */

:root{
  --navy:#00346d;
  --navy-deep:#022a56;
  --blue:#0053ad;
  --blue-deep:#003c80;
  --gold:#ffc300;
  --gold-deep:#e0a800;
  --paper:#f6f8fc;
  --ink:#16203c;
  --muted:#5b6480;
  --line:#e3e7f2;
  --wrap:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#231d00;padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
header :focus-visible,footer :focus-visible,.band :focus-visible,.quote :focus-visible{outline-color:#fff}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
main :focus-visible{outline-color:var(--blue)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--navy);box-shadow:0 2px 14px rgba(2,20,60,.32)}
.nav{display:flex;align-items:center;gap:26px;height:74px;position:relative}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:38px;width:auto}
.logo small{color:#a9b6e2;font-size:.64rem;letter-spacing:.2em;font-weight:600;white-space:nowrap}
.nav ul{display:flex;gap:22px;list-style:none;margin-left:auto;align-items:center}
.nav a.link{color:#e2e8fb;text-decoration:none;font-weight:500;font-size:.93rem;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.nav a.link:hover{color:var(--gold)}
.nav a.link[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.btn{display:inline-block;background:var(--gold);color:#231d00;font-weight:700;padding:12px 22px;border-radius:6px;text-decoration:none;font-size:.95rem;border:none;cursor:pointer;font-family:inherit;transition:background .15s}
.btn:hover{background:var(--gold-deep)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}
/* header actions: outlined phone number, solid gold quote button */
.nav .btn.tel{order:3;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);
  padding:11px 16px;font-weight:700}
.nav .btn.tel:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.nav .btn.quote{order:4;margin-left:10px;background:var(--gold);color:#231d00;border:none}
.nav .btn.quote:hover{background:var(--gold-deep)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.small{padding:9px 16px;font-size:.86rem}
.burger{display:none;order:3;width:46px;height:46px;border:1px solid rgba(255,255,255,.34);border-radius:6px;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;background:#fff}

/* ---------- hero ---------- */
.hero{position:relative;min-height:570px;display:flex;align-items:center;background-color:var(--navy)}
/* ---------- desktop hero: solid navy, then the picture emerges ----------
   SIX shapes before this one. The two failure modes, so nobody repeats either:

   (a) A WASH OVER A FULL-WIDTH PHOTOGRAPH. Every photograph we own has its
       subject in the left half of the frame, so the navy and the truck always
       wanted the same pixels. Lighten it and the type fails contrast; darken it
       and the truck disappears. There is no setting that satisfies both, and
       four versions died proving it.
   (b) A HARD SPLIT with a gold rule. It fixed the framing but the seam was a
       line, and the user's read was that it had lost the thing the old navy did
       well: "walking the focus of the images away from the text".

   This is the resolution. The photo box starts 190px BEFORE the text ends, and
   a navy gradient is layered over its left edge — solid where it meets the
   panel, gone 110px past the last word. So:
     0            -> textend-190   flat navy. No photograph under it at all,
                                   so nothing is being muddied.
     textend-190  -> textend+110   the transition. The subject emerges through
                                   it rather than being revealed by an edge.
     textend+110  -> right edge    untouched photograph.
   The picture is still PUSHED right rather than tinted — that is what the box
   offset buys, and it is why the cab is visible at all.

   THE ONE VALUE THAT IS NOT FREE: .52 at 190px into the box, i.e. level with
   the end of the text column. The headline's last line reaches there, it is
   large text needing 3:1, and .52 over a blown-out sky measures about 3.4:1.
   Every hero has near-white sky or chrome somewhere under the words — that was
   measured by disabling this layer and sampling the bare photograph — so the
   fade cannot reach zero any earlier. Re-run /tmp/dcontrast.py after any change.

   Both layers live on ::before because ::after belongs to the mobile band.
   The gradient is in px from the BOX's left edge, so the transition is the same
   physical width at every viewport while the panel itself narrows with --textend. */
.hero{--textend:calc(max((100vw - var(--wrap)) / 2, 0px) + 24px + 490px)}
.hero.short{--textend:calc(max((100vw - var(--wrap)) / 2, 0px) + 24px + 560px)}
.hero::before{content:"";position:absolute;top:0;bottom:0;right:0;z-index:0;
  left:calc(var(--textend) - 190px);
  background-image:linear-gradient(90deg,
      var(--navy) 0px,
      rgba(0,52,109,.97) 100px,
      rgba(0,52,109,.82) 150px,
      rgba(0,52,109,.52) 195px,
      rgba(0,52,109,.18) 250px,
      rgba(0,52,109,0)   300px),
    var(--hero-img);
  background-size:100% 100%,cover;
  background-position:0 0,var(--hero-pos,58% 46%);
  background-repeat:no-repeat,no-repeat}
.hero>.wrap{width:100%}
.hero-inner{position:relative;z-index:2;padding:92px 0;color:#fff;max-width:490px}
.hero h1{font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:800;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 22px rgba(0,20,50,.5)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.sub{margin:20px 0 28px;font-size:1.06rem;color:#e6ecfb;max-width:430px;text-shadow:0 1px 14px rgba(0,20,50,.55)}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap}
.hero.short{min-height:340px}
.hero.short .hero-inner{padding:64px 0;max-width:560px}
.hero.short h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.crumb{font-size:.82rem;color:#9fb0e0;margin-bottom:12px}
.crumb a{color:#c9d5f5;text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* ---------- livery strip ----------
   Deliberately quiet: a thin navy rule carrying the strapline, no borders,
   no ornament. It separates the hero from the page and nothing more. */
.strap{margin:0 0 26px;font-size:.72rem;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;color:#e8eefc}
.strap span{color:var(--gold);padding:0 .45em;opacity:.85}

/* ---------- stats ---------- */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 24px}
.stat{text-align:center}
.stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--navy)}
.stat span{font-size:.85rem;color:var(--muted)}

/* ---------- sections ---------- */
section{padding:76px 0;scroll-margin-top:86px}
section.tight{padding:56px 0}
.kicker{color:var(--blue);font-weight:700;letter-spacing:.15em;font-size:.78rem;text-transform:uppercase;display:block}
h2{font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:800;margin:8px 0 14px;letter-spacing:-.01em}
h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.lede{color:var(--muted);max-width:660px;font-size:1.03rem}
p+p{margin-top:14px}
.prose p{color:#3a4468;margin-bottom:14px}
.prose h3{margin-top:26px}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 22px;border-top:4px solid var(--gold);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,52,109,.13)}
.card p{font-size:.92rem;color:var(--muted);flex:1}
.card .ico{width:46px;height:46px;border-radius:9px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.card .ico svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico.inv{background:var(--gold)!important}
.card .ico.inv svg{stroke:#00346d}
.card.oncolour{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.card.oncolour p{color:#c2cdee}
.more{margin-top:14px;font-weight:700;font-size:.88rem;color:var(--blue)}
.more::after{content:" →"}

/* ---------- split bands ---------- */
.split>.wrap,.wrap.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rev>.wrap>*:first-child,.wrap.split.rev>*:first-child{order:2}
.split img,.duo img,.figure img{width:100%;height:auto;border-radius:10px;box-shadow:0 16px 42px rgba(0,52,109,.16)}
.band{background:var(--navy);color:#fff}
.band h2,.band h3{color:#fff}
.band p,.band .lede{color:#c2cdee}
.band .kicker{color:var(--gold)}
.band .split img{box-shadow:0 16px 42px rgba(0,0,0,.34)}
ul.ticks{list-style:none;margin:20px 0 0}
ul.ticks li{padding-left:30px;position:relative;margin-bottom:11px}
ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:800}
.band ul.ticks li::before,.quote ul.ticks li::before{color:var(--gold)}
.band ul.ticks li{color:#e3e9fb}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}

/* image grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2 img,.grid3 img{width:100%;height:100%;object-fit:cover;border-radius:10px;min-height:180px;aspect-ratio:4/3}
figure{margin:0}
figcaption{font-size:.8rem;color:var(--muted);margin-top:8px}
.band figcaption{color:#a9b8e0}
.wide{width:100%;border-radius:12px;box-shadow:0 18px 46px rgba(0,52,109,.18)}

/* ---------- quote form ---------- */
.quote{background:linear-gradient(155deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff}
.quote .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.quote h2{color:#fff}
.quote .lede{color:#c9d6f6}
.quote .assure{list-style:none;margin-top:24px}
.quote .assure li{padding-left:30px;position:relative;margin-bottom:12px;color:#e3e9fb;font-size:.95rem}
.quote .assure li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800}
form.enq{background:#fff;border-radius:12px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:15px;box-shadow:0 20px 54px rgba(0,20,60,.34)}
form.enq label{font-size:.79rem;font-weight:600;display:block;margin-bottom:5px;color:var(--ink)}
form.enq input,form.enq select,form.enq textarea{width:100%;padding:11px 12px;border:1px solid #767e9c;border-radius:6px;font:inherit;font-size:.93rem;color:var(--ink);background:#fff}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
form.enq textarea{resize:vertical}
.field.full{grid-column:span 2}
form.enq .btn{grid-column:span 2;padding:14px;font-size:1rem}
form.enq .note{grid-column:span 2;font-size:.78rem;color:var(--muted);text-align:center}
form.enq .note.ok{color:var(--blue);font-weight:700}
form.enq .note.bad{color:#b3261e;font-weight:700}
form.enq .debugdetail{grid-column:span 2;background:#fff4f4;border:1px solid #f0c8c8;border-radius:6px;padding:10px 12px;font-size:.72rem;line-height:1.45;color:#7a1c16;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,Consolas,monospace}
form.enq .btn[disabled]{opacity:.65;cursor:progress}

/* ---------- contact / map ---------- */
.contactgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:start}
.infocard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;border-top:4px solid var(--gold)}
.infocard dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-top:18px}
.infocard dt:first-child{margin-top:0}
.infocard dd{font-size:1rem;margin-top:3px}
.infocard a{text-decoration:none;font-weight:600}
.mapwrap{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#e9eef7}
.mapwrap iframe{width:100%;height:420px;border:0;display:block}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#a9b6e2;padding:56px 0 24px;font-size:.92rem}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:34px}
footer h4{color:#fff;font-size:.93rem;margin-bottom:12px}
footer a{color:#dde4f8;text-decoration:none}
footer a:hover{color:var(--gold)}
footer ul{list-style:none}
footer li{margin-bottom:7px}
footer .flogo{height:42px;width:auto;margin-bottom:12px}
.fineprint{border-top:1px solid rgba(255,255,255,.13);padding-top:20px;font-size:.8rem;color:#a9b6e2;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- to-be-confirmed markers ---------- */
.tbc{border-bottom:2px dotted var(--gold-deep);cursor:help}

/* ---------- cookie banner ---------- */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:10px;padding:20px 22px;box-shadow:0 18px 48px rgba(2,20,60,.3);display:none;gap:22px;align-items:center;max-width:920px;margin:0 auto}
.cookiebar.show{display:flex}
.cookiebar p{font-size:.88rem;color:#3a4468;margin:0}
.cookiebar .acts{display:flex;gap:10px;flex-shrink:0}



/* ---------- dropdown navigation ---------- */
.has-sub{position:relative}
.caret{font-size:.7em;opacity:.8;margin-left:2px}
.nav .sub{display:none;position:absolute;top:100%;left:-16px;align-items:stretch;text-align:left;background:var(--navy);
  border-top:3px solid var(--gold);border-radius:0 0 8px 8px;padding:8px 0;min-width:250px;
  box-shadow:0 16px 34px rgba(2,20,60,.45);flex-direction:column;gap:0;margin:0}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.nav .sub li{margin:0}
.nav .sub a{display:block;padding:10px 20px;color:#e2e8fb;text-decoration:none;font-size:.92rem;
  white-space:nowrap;border-left:3px solid transparent}
.nav .sub a:hover,.nav .sub a[aria-current="page"]{color:var(--gold);background:rgba(255,255,255,.06);
  border-left-color:var(--gold)}
.nav a.link.on{color:var(--gold)}
.nav ul li{position:relative}

/* ---------- FAQ accordions ---------- */
.faqs{margin-top:26px;border-top:1px solid var(--line)}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:17px 34px 17px 0;font-weight:700;color:var(--navy);
  position:relative;list-style:none;font-size:1.02rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.4rem;
  font-weight:700;color:var(--navy);line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq summary:hover{color:var(--blue)}
details.faq>div{padding:0 34px 20px 0;color:#3a4468}
details.faq a{color:var(--blue)}

/* ---------- language switcher ---------- */
.langsel{margin-left:6px}
.nav a.link.lang{border:1px solid rgba(255,255,255,.36);border-radius:5px;padding:5px 10px;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;line-height:1}
.nav a.link.lang:hover{border-color:var(--gold);color:var(--gold)}
.langback{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;
  font-size:.92rem;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px}

.pillar{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:12px;padding:32px 30px}
.pillar h2{font-size:clamp(1.35rem,2vw,1.6rem)}
.pillar .lede{font-size:.98rem}

/* ---------- specification tables ---------- */
.tablewrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:10px;background:#fff}
table.spec{width:100%;border-collapse:collapse;font-size:.95rem}
table.spec caption{text-align:left}
table.spec thead th{background:var(--navy);color:#fff;text-align:left;padding:13px 18px;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
table.spec th[scope=row]{text-align:left;font-weight:700;color:var(--navy);width:32%;
  padding:13px 18px;vertical-align:top}
table.spec td{padding:13px 18px;color:#3a4468;vertical-align:top}
table.spec tbody tr{border-top:1px solid var(--line)}
table.spec tbody tr:first-child{border-top:none}
table.spec thead+tbody tr:first-child{border-top:1px solid var(--line)}
table.spec td.yes{font-weight:600;color:#1c6b2f;white-space:nowrap}
table.spec td.no{font-weight:600;color:#a3272a;white-space:nowrap}
/* A spec table on a navy band would otherwise inherit dark-on-dark text. */
.band table.spec th[scope=row]{color:#fff}
.band table.spec td{color:#dbe4fa}
.band table.spec tbody tr{border-top-color:rgba(255,255,255,.18)}
.band table.spec td.yes{color:#8fe0a6}
.band table.spec td.no{color:#ff9d9d}
.band table.spec a{color:#ffdf85}
.band .tablewrap{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
@media(max-width:620px){
  /* Side by side, not stacked. Stacking cost ~70px of hero for no gain, and the
     phone number is the main conversion on a haulage site so it does not get
     dropped. The font scales with the viewport because the translated pages
     carry "+44 (0)1270 628 975" behind a longer word than "Call". Padding keeps
     each button over the 44px minimum tap height. */
  .hero .cta .btn{flex:1 1 auto;min-width:0;text-align:center;
    padding:12px 10px;font-size:clamp(.68rem,2.9vw,.9rem);white-space:nowrap}
}
@media(max-width:600px){
  table.spec{font-size:.88rem}
  table.spec th[scope=row]{width:40%;padding:11px 13px}
  table.spec td{padding:11px 13px}
}

/* ---------- misc ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
ul.ticks.two{columns:2;column-gap:34px}
ul.ticks.two li{break-inside:avoid}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a.card:hover{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.cards.three{grid-template-columns:repeat(3,1fr)}
.goldlink{color:var(--gold);font-weight:700;text-decoration:none}
.goldlink:hover{text-decoration:underline}
/* The quote band is a mid-blue gradient: #ffc300 only reaches 3.8:1 on it, so
   lift the gold and underline the links to clear WCAG AA (4.5:1) there. */
.quote .goldlink{color:#ffdf85;text-decoration:underline;text-underline-offset:2px}
.tbcline{margin-top:16px;font-size:.93rem}
footer .creds{margin-top:12px;font-size:.86rem;color:#c2cdee;font-weight:600}
footer .intl{font-size:.85rem;color:#bcc7ea}
footer h2.fh{color:#fff;font-size:.95rem;margin-bottom:12px;font-weight:700;letter-spacing:0}
.infocard dl{margin:0}

@media(max-width:1000px){
  .cards,.cards.three{grid-template-columns:repeat(2,1fr)}
  .split>.wrap,.wrap.split,.quote .wrap,.contactgrid,.duo{grid-template-columns:1fr;gap:32px}
  .split.rev>.wrap>*:first-child,.wrap.split.rev>*:first-child{order:0}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:22px}
  footer .cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:1024px){
  section{padding:56px 0}
  .nav{height:62px;gap:10px}
  .logo img{height:30px}
  .logo small{display:none}
  .burger{display:flex}
  /* The language pages' header phone button is <a class="btn call"> with no
     .tel class, so it used to miss this rule entirely and wrapped
     "+44 (0)1270 628 975" onto two lines, doubling the header height. */
  .nav .btn.tel,.nav .btn.call:not(.quote){margin-left:auto;order:2;
    padding:13px 11px;font-size:clamp(.72rem,3.1vw,.82rem);white-space:nowrap}
  .nav .btn.quote{display:none}
  .nav ul{order:4}
  .langsel{margin-left:0}
  .nav a.link.lang{display:inline-block;margin:10px 0}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--navy);padding:4px 24px 14px;box-shadow:0 14px 26px rgba(2,20,60,.42)}
  .nav ul.open{display:flex}
  .nav ul li{border-top:1px solid rgba(255,255,255,.12)}
  .nav a.link{display:block;padding:14px 2px;border-bottom:none}
  .nav .sub{display:flex;position:static;background:transparent;border-top:none;box-shadow:none;
    padding:0 0 8px;min-width:0;border-radius:0}
  .nav .sub a{padding:11px 2px 11px 16px;font-size:.88rem;color:#b9c6ee;border-left:2px solid rgba(255,255,255,.18)}
  .caret{display:none}
  /* Mobile hero is stacked, not full-bleed. A landscape photograph behind a
     tall narrow panel gets sliced to a vertical strip that loses the subject
     (and the desktop banner, which carries its picture on the right, crops away
     to nothing). So: text on flat navy, photograph as a band underneath.
     --hero-sm must be a root-absolute url() — a relative one inside a custom
     property resolves against the stylesheet, not the page. */
  /* The photograph sits below the text rather than behind it, but it should look
     like part of the panel, not pasted under it: a navy-to-transparent gradient
     over its top edge melts the text block into the picture.
     HEIGHT: the first cut of this was ~750px on a 393px phone, so the hero alone
     filled almost a whole screen. The second cut got it to ~410px but did it
     partly by shrinking the photograph, which was the wrong thing to spend —
     the photograph is the only part of a hero anybody wants to look at. So the
     height now comes out of the NAVY instead, three ways:
       1. the photo band is TALLER than it ever was (263px at 393, vs 236 in the
          original and 130 in the over-trimmed version);
       2. the band is pulled UP UNDER the text — padding-bottom is ~65px less
          than the band height, so the CTA row sits on the picture, not above it;
       3. the gradient clears in the top third of the band instead of dawdling,
          so the truck reads through it almost immediately.
     Net at 393px: flat-navy area is 210px, down from 513px in the original,
     while the picture got bigger. Nothing was taken out of the copy. */
  .hero{min-height:0;display:block;
    background-color:var(--navy);padding-bottom:clamp(196px,50vw,280px)}
  .hero.short{min-height:0}
  .hero::before{display:none}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
    height:clamp(262px,67vw,375px);
    background-image:linear-gradient(180deg,var(--navy) 0%,rgba(0,52,109,.93) 13%,
                     rgba(0,52,109,.58) 22%,rgba(0,52,109,.18) 30%,rgba(0,52,109,0) 39%),
                     var(--hero-sm);
    background-size:100% 100%,var(--hero-size-sm,cover);
    background-position:center top,var(--hero-pos-sm,center 52%);
    background-repeat:no-repeat,no-repeat}
  .hero-inner,.hero.short .hero-inner{padding:18px 0 16px;max-width:none;z-index:2}
  .hero .crumb{margin-bottom:2px}
  .hero .kicker{font-size:.68rem;letter-spacing:.13em}
  .hero h1,.hero.short h1{font-size:clamp(1.42rem,5.1vw,1.72rem);line-height:1.16;margin-top:6px}
  .hero p.sub{font-size:.9rem;line-height:1.46;margin:8px 0 14px;max-width:none}
  /* The strapline repeats, in small caps, exactly what is painted on the trailer
     in the photograph directly beneath it. On a phone that is two wrapped lines
     of nothing. Desktop keeps it — there the photo is behind the text, not below. */
  .hero .strap{display:none}
  .hero .cta{gap:8px;flex-wrap:nowrap}
  .cards,.cards.three{grid-template-columns:1fr;gap:14px}
  .grid3{grid-template-columns:1fr 1fr}
  form.enq{grid-template-columns:1fr;padding:22px}
  .field.full,form.enq .btn,form.enq .note{grid-column:span 1}
  .strap{font-size:.62rem;letter-spacing:.18em;margin-bottom:20px}
  footer .cols{grid-template-columns:1fr}
  /* Tap targets: footer, quote-band and contact links render ~16px tall, well under
     the 44px minimum. Pad them out on touch layouts rather than growing the type. */
  footer li{margin-bottom:0}
  footer li a{display:inline-block;padding:12px 0;line-height:1.2}
  .fineprint a{display:inline-block;padding:12px 0}
  .logo{padding:8px 0}
  .quote .assure li{margin-bottom:4px}
  .quote .assure a,.infocard a,.crumb a{display:inline-block;padding:9px 0}
  .cookiebar{flex-direction:column;align-items:flex-start;gap:14px}
  .mapwrap iframe{height:320px}
}