@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 ----------
   THE THING THAT WENT WRONG SEVEN TIMES, FINALLY UNDERSTOOD.
   The original hero-wide.jpg was 2400px wide with ~800px of flat navy baked
   into its left. That looked like a bug and was removed — but the padding was
   doing REAL WORK. It made the file roughly the same shape as the banner
   (3.16:1), so `cover` scaled it by width and the photograph sat at the right,
   at full height, complete. Strip the padding and the file becomes 2.2:1 in a
   3.1:1 band, so `cover` magnifies it 1.37x and slices the top and bottom off
   the lorry. Every version after that "fix" was quietly cropping the truck, and
   the user's read of the result was right every time: "still a downgrade".

   So the padding is reproduced properly, in CSS, where it can adapt:
   the photo box is PINNED RIGHT and sized by `aspect-ratio: var(--hero-ar)`
   against the full band height. It is therefore exactly as wide as that
   photograph needs in order not to be cropped at all — no vertical slicing, no
   horizontal slicing, on any hero, at any width. `--hero-ar` is emitted per
   page by hero() from the file's real dimensions. `.hero{overflow:hidden}`
   clips it on narrow desktops where the box is wider than the viewport.

   ::before is the photograph, ::after is the navy. The gradient has to span the
   FULL band, not just the photo box, so it cannot live on ::before — and on
   mobile ::after becomes the photo band instead, which is why the mobile rule
   has to reset `top`.

   THE FLOOR IS SET BY MEASUREMENT, NOT TASTE. Every hero has near-white sky or
   chrome somewhere under the words, and the headline's last line runs to the
   end of the text column. Re-run /tmp/dcontrast.py after ANY change to these
   stops: it hides .hero-inner, re-shoots and samples the real pixels under each
   LINE of text at 1025/1280/1440/1920. Stops are fractions of --textend so the
   ramp lands in the same place relative to the words at every width; a
   percentage of the viewport does not (tuned at 1440, it failed at 1025). */
.hero{--textend:calc(max((100vw - var(--wrap)) / 2, 0px) + 24px + 490px)}
.hero.short{--textend:calc(max((100vw - var(--wrap)) / 2, 0px) + 24px + 560px)}
/* THE GRADIENT AND THE PHOTOGRAPH MUST BE THE SAME BOX. This was split apart
   for a while — photo in ::before sized by aspect-ratio, navy in ::after over
   the whole band — to guarantee nothing was ever cropped. It did guarantee
   that, and it looked worse, because the two edges no longer lined up: the
   wash reached full transparency at --textend + 100px, but the photo box did
   not start until aspect-ratio said so, usually further right. Between those
   two x-positions sat flat navy, and then the picture began at full strength.
   A hard vertical seam down the middle of every hero.

   One element, both layers, and the seam cannot exist: the box starts 190px
   BEFORE the text ends, and the gradient is measured in pixels from the box's
   own left edge — opaque navy at 0, gone by 300px. Wherever that left edge
   falls, the pixel at it is 100% navy, identical to the flat navy beside it.
   The photograph underneath is `cover` across the whole box, so it runs to
   the right edge with no gap. `cover` here crops: the box is about 1.6:1, so
   a squarer picture is scaled to the box width and trimmed top and bottom —
   which is what --hero-pos steers (Y for most files, X for the wide ones). */
.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. */
/* Pure white, not the softer #e8eefc the rest of the hero uses: this line sits
   furthest right, where the navy has almost run out, and at 1025px it measured
   4.39:1 against the brightest pixel behind it — just under the 4.5 AA floor
   for text this size. White takes it to ~5.1. The shadow is belt and braces
   for the chrome and sky that move around behind it at other widths. */
.strap{margin:0 0 26px;font-size:.72rem;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,18,46,.65)}
.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)}
/* min-height 46px, not the 42px the padding alone gave: these are the controls
   an enquiry actually depends on, and a mis-tap on a phone costs a lead.
   16px on the field text stops iOS Safari zooming the page on focus, which it
   does silently for anything under 16px and which then leaves the form
   half off-screen. */
form.enq input,form.enq select,form.enq textarea{width:100%;padding:11px 12px;min-height:46px;border:1px solid #767e9c;border-radius:6px;font:inherit;font-size:.93rem;color:var(--ink);background:#fff}
@media(max-width:1024px){form.enq input,form.enq select,form.enq textarea{font-size:16px}}
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 ---------- */
/* The ADR class table is 462px of content; a phone gives it about 335. It
   scrolls, which is right, but a table that is silently cut off at the edge
   reads as a broken page — so the edges carry a shadow that shows there is
   more. `background-attachment:local` on the white masks and `scroll` on the
   shadows is what makes them fade out when you reach each end. */
.tablewrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:10px;
  background:
    linear-gradient(to right,#fff 32%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,#fff 32%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(0,22,60,.17),rgba(0,22,60,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(0,22,60,.17),rgba(0,22,60,0)) right center,
    #fff;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,15px 100%,15px 100%,100% 100%;
  background-attachment:local,local,scroll,scroll,local}
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}
}


/* The ADR class table is the only three-column table on the site, and on a
   phone it was the worst thing on it: "Carried, subject to load details" is
   nowrap, so the table could never be narrower than 462px, and the one column
   a reader actually wants — whether we take the class — was the one hanging
   off the right edge. Below 620px each row becomes a small block instead, so
   the answer sits directly under the class it belongs to and nothing scrolls.
   Scoped to .stacks: the two-column key/value tables elsewhere already fit. */
@media(max-width:620px){
  .tablewrap:has(.spec.stacks){overflow-x:visible;background:#fff}
  table.spec.stacks,table.spec.stacks tbody,table.spec.stacks tr,
  table.spec.stacks th,table.spec.stacks td{display:block;width:auto}
  table.spec.stacks thead{position:absolute;left:-9999px}
  table.spec.stacks tbody tr{padding:13px 16px 15px}
  table.spec.stacks th[scope=row]{width:auto;padding:0;font-size:.7rem;font-weight:700;
    letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
  table.spec.stacks th[scope=row]::before{content:"Class "}
  table.spec.stacks td{padding:4px 0 0}
  table.spec.stacks td.yes,table.spec.stacks td.no{white-space:normal;padding-top:7px;font-size:.93rem}
}

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