/* ==========================================================================
   JP Fleet Ltd — Driver Recruitment
   Dark navy theme + fleet orange, taken from the JP Fleet logo.

   PHOTO SLOTS
   Every photographic panel is layered as an ::before over a CSS-drawn fallback
   scene. Drop the file in and it takes over automatically; leave it out and the
   fallback still looks finished. Expected files (see README.md):
     assets/img/hero-truck.jpg        assets/img/why-bg.jpg
     assets/img/driver-wheel.jpg      assets/img/closing-road.jpg
     assets/img/cities/{carlisle,york,leeds,birmingham,leicester,coventry}.jpg
   ========================================================================== */

:root{
  /* Brand — navy + orange from the logo */
  --navy-950:#040b1b;
  --navy-900:#071229;
  --navy-850:#0a1934;
  --navy-800:#0d2144;
  --navy-700:#123059;
  --navy-600:#1a4177;

  --orange-600:#e05c05;
  --orange-500:#f97316;
  --orange-400:#ff9247;

  --ink-on-dark:#ffffff;
  --muted:#93a7c6;
  --muted-2:#6d82a3;
  --line-dark:rgba(255,255,255,.1);

  --light:#f4f6fa;
  --light-ink:#0b1b35;
  --light-muted:#56657f;

  --radius:14px;
  --radius-lg:20px;
  --shadow:0 26px 60px -24px rgba(0,0,0,.75);

  --head:"Poppins",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --script:"Caveat","Segoe Script",cursive;

  --shell:1220px;
  --header-h:72px;
}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy-950);color:var(--ink-on-dark);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-weight:700;line-height:1.14;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,4.6vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:1.05rem;font-weight:600}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 28px}
.accent{color:var(--orange-500)}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--orange-500);color:#fff}
:focus-visible{outline:3px solid var(--orange-500);outline-offset:3px;border-radius:6px}

.script{
  font-family:var(--script);font-weight:700;color:#fff;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;display:block;
}
.script--lg{font-size:clamp(2rem,4.2vw,3.4rem);position:relative}
.script--lg::after{
  content:"";display:block;height:5px;width:62%;margin:.35rem 0 0 auto;border-radius:6px;
  background:linear-gradient(90deg,transparent,var(--orange-500));
}

.kicker{
  font-family:var(--head);font-weight:600;font-size:.76rem;
  letter-spacing:.17em;text-transform:uppercase;color:#cfe0ff;margin-bottom:1rem;
}
.kicker span{color:var(--orange-500)}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--orange-500);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.7rem;border:1.5px solid var(--bd);border-radius:999px;
  background:var(--bg);color:var(--fg);cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:.92rem;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn--primary{box-shadow:0 14px 30px -14px rgba(249,115,22,.95)}
.btn:hover{transform:translateY(-2px)}
.btn--primary:hover{background:var(--orange-600);box-shadow:0 20px 36px -14px rgba(249,115,22,1)}
.btn--ghost{--bg:transparent;--bd:rgba(255,255,255,.35)}
.btn--ghost:hover{--bg:rgba(255,255,255,.1)}
.btn--sm{padding:.62rem 1.25rem;font-size:.86rem}
.btn--lg{padding:1rem 2rem;font-size:1rem}
.btn--block{width:100%}
.arw{
  width:15px;height:9px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'><path d='M1 7h20M15 1l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'><path d='M1 7h20M15 1l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  transition:transform .18s ease;
}
.btn:hover .arw{transform:translateX(3px)}

/* ---------------- Header ---------------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(4,11,27,.55);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s;
}
.header.is-stuck{background:rgba(4,11,27,.94);border-bottom-color:var(--line-dark)}
.header__inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
/* The logo is navy-on-transparent, so it disappears on a navy header.
   A light badge gives it the ground it needs; swap for a white knockout
   version of the logo and the badge can go. */
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand__badge{
  width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 0 62%,#eef2f9 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.55);
  transition:transform .2s ease,box-shadow .2s ease;
}
.brand__badge img{width:48px;height:48px;object-fit:contain}
.brand:hover .brand__badge{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 1px var(--orange-500)}
.brand__word{
  font-family:var(--head);font-weight:800;font-size:1.02rem;letter-spacing:.02em;
  color:#fff;line-height:1;white-space:nowrap;
}
.brand__word em{color:var(--orange-500);font-style:normal}
.brand__badge--lg{width:84px;height:84px;margin-bottom:1rem}
.brand__badge--lg img{width:72px;height:72px}

.nav{margin:0 auto;display:flex;align-items:center;gap:2rem}
.nav > ul{display:flex;align-items:center;gap:2rem}
.nav a{
  position:relative;font-size:.9rem;font-weight:500;color:#c6d5ec;
  padding:.4rem 0;transition:color .18s;
}
.nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:2px;
  background:var(--orange-500);border-radius:2px;transition:left .22s,right .22s;
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.is-active::after{left:0;right:0}
.nav a.is-active{color:#fff;font-weight:600}
.nav__apply{display:none}
.header__cta{margin-left:auto;flex:none}

.burger{display:none;width:42px;height:42px;background:none;border:1px solid var(--line-dark);border-radius:11px;cursor:pointer;padding:0}
.burger span{display:block;width:19px;height:2px;margin:4px auto;background:#fff;border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------- Shared scenery (CSS fallbacks) ---------------- */
.road{
  position:absolute;left:0;right:0;bottom:0;height:46%;
  background:
    linear-gradient(to bottom,#12203b 0%,#0a1428 55%,#060e1e 100%);
}
.road::before{
  content:"";position:absolute;left:50%;bottom:0;width:170%;height:100%;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.22) 0 22px,transparent 22px 70px) center/6px 100% no-repeat,
    linear-gradient(to right,transparent 46%,rgba(255,255,255,.07) 50%,transparent 54%);
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 78%);
  mask-image:linear-gradient(to top,#000 5%,transparent 78%);
}
.road--far{height:58%;opacity:.85}
.sun{
  position:absolute;right:16%;top:28%;width:min(420px,42vw);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,120,.85),rgba(249,115,22,.45) 38%,transparent 66%);
  filter:blur(6px);
}
.skyline{
  position:absolute;left:0;right:0;bottom:44%;height:26%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 18px,rgba(10,22,46,.95) 18px 34px,transparent 34px 46px,
      rgba(8,18,40,.95) 46px 74px,transparent 74px 88px,rgba(12,26,52,.95) 88px 112px,transparent 112px 128px);
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 100%);
  mask-image:linear-gradient(to top,#000 30%,transparent 100%);
  opacity:.9;
}
.skyline--far{bottom:0;height:52%;opacity:.5;filter:blur(1px)}

/* ---------------- Hero ---------------- */
.hero{
  /* Height tracks viewport width so the photo stays near its native aspect
     ratio (2.48:1) instead of being blown up and cropped. */
  /* The band must be SHORT and WIDE to match the 3.68:1 artwork — a taller box
     makes `cover` scale to the height and crop the sides, which is what made
     the truck look magnified. Mockup proportion is ~3.3:1. */
  position:relative;min-height:clamp(420px,31vw,560px);display:flex;align-items:center;
  padding:calc(var(--header-h) + 1.6rem) 0 3.4rem;overflow:hidden;
  background:linear-gradient(175deg,#0a1a3a 0%,#123059 32%,#1b3b63 52%,#0a1428 100%);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media::before{
  /* The file is pre-composited: navy run-in on the left, truck at 33-69% of the
     width, edges feathered. Full bleed with no mask — any extra masking or
     width constraint here would re-introduce cropping. */
  content:"";position:absolute;inset:0;z-index:3;
  background:url("../img/hero-truck.jpg") center center/cover no-repeat;
}
.hero__scrim{
  position:absolute;inset:0;z-index:4;
  /* Lighter than before: the artwork already carries its own darkness on the
     left, so this only needs to guarantee text contrast. */
  background:
    linear-gradient(100deg,rgba(4,10,24,.9) 0%,rgba(4,11,27,.72) 28%,rgba(6,15,34,.3) 55%,transparent 82%),
    linear-gradient(to top,rgba(4,10,24,.8),transparent 34%);
}
.hero__truck{
  position:absolute;right:-2%;bottom:20%;width:min(760px,64vw);z-index:2;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.hero__truck svg{width:100%;height:auto}
.tr-body{fill:#14315c}
.tr-stripe{fill:#2b6fd0;opacity:.8}
.cab{fill:#16376a}
.cab-dark{fill:#0d2348}
.cab-win{fill:#8fb8e8;opacity:.85}
.grille{fill:#0b1c3a}
.lamp{fill:#ffd9a8}
.wheels circle{fill:#080f1f}
.hubs circle{fill:#43587c}
.tr-jp{font-family:var(--head);font-weight:800;font-size:58px;fill:#fff;letter-spacing:-.03em}
.tr-sub{font-family:var(--head);font-weight:600;font-size:17px;fill:#9fc4f3;letter-spacing:.22em}
.blur path{stroke:rgba(255,255,255,.28);stroke-width:5;stroke-linecap:round;fill:none}

.hero__inner{position:relative;z-index:5;width:100%}
.hero__copy{max-width:560px}
/* Type scaled to the shorter band so the content still fits without forcing
   the hero to grow (which would re-crop the photo). */
.hero h1{font-size:clamp(1.85rem,3.2vw,2.75rem);margin-bottom:.85rem;text-shadow:0 12px 34px rgba(0,0,0,.6)}
.hero .kicker{font-size:.7rem;margin-bottom:.7rem}
.hero__lead{color:#c3d4ee;font-size:.94rem;max-width:44ch;margin-bottom:1.25rem}
.hiring{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  font-size:.8rem;color:#b3c6e2;margin:1rem 0 1.3rem;
}
.hiring .ic{width:17px;height:17px;color:var(--orange-500)}
.hiring b{font-weight:600;color:#fff}

/* Partner wordmarks (placeholders — swap for official logo files) */
.partners{display:flex;align-items:center;flex-wrap:wrap;gap:1.6rem}
.pl span{
  font-family:var(--head);font-weight:800;letter-spacing:-.01em;line-height:1;
  display:inline-block;
}
.pl--dpd span{background:#dc0032;color:#fff;padding:.3rem .6rem;border-radius:5px;font-size:1.25rem}
.pl--dhl span{background:#ffcc00;color:#d40511;padding:.28rem .62rem;border-radius:3px;font-size:1.2rem;font-style:italic;letter-spacing:.06em}
.pl--inpost span{color:#ffb300;font-size:1.2rem}
.pl--inpost span::before{content:"✳ ";font-size:1rem}
.pl--yodel span{color:#8dc63f;font-size:1.2rem;letter-spacing:.04em}
.partners--hero{gap:1.3rem;margin-bottom:.3rem}
.partners--hero .pl--dpd span,.partners--hero .pl--dhl span{font-size:1.15rem}
.partners--hero .pl--inpost span,.partners--hero .pl--yodel span{font-size:1.12rem}
.hero__actions,.hero .btn--lg{margin-top:0}
.hero .btn--lg{padding:.85rem 1.7rem;font-size:.94rem}
.partners--band{gap:clamp(1.6rem,4vw,3.4rem)}
.partners--band .pl--inpost span,.partners--band .pl--yodel span{font-size:1.6rem}
.partners--band .pl--dpd span,.partners--band .pl--dhl span{font-size:1.6rem}

/* Scroll cue */
.scrolldown{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  font-size:.72rem;letter-spacing:.1em;color:#a9bddb;
}
.scrolldown__mouse{
  width:20px;height:31px;border:1.6px solid rgba(255,255,255,.55);border-radius:12px;
  display:grid;justify-items:center;padding-top:5px;
}
.scrolldown__mouse i{width:3px;height:6px;border-radius:3px;background:#fff;animation:wheel 1.6s infinite}
.scrolldown .ic{width:16px;height:16px;animation:nudge 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------------- Why drive ---------------- */
.why{position:relative;overflow:hidden;padding:clamp(2.8rem,4.4vw,4rem) 0;background:linear-gradient(160deg,#0a1934,#071229)}
.why__media{position:absolute;inset:0;z-index:0}
.why__media::before{
  /* Photo lives on the right and dissolves into flat navy on the left, so the
     heading and perk copy never sit on top of moving light trails. */
  /* Pre-composited like the hero: navy run-in on the left, scene on the right,
     2.93:1 so the short band barely crops it. No mask — that would crop again. */
  content:"";position:absolute;inset:0;z-index:2;
  background:url("../img/why-bg.jpg") center center/cover no-repeat;
  filter:brightness(.88);
}
.why__scrim{
  position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(90deg,rgba(5,12,28,.92) 0%,rgba(5,13,30,.72) 30%,rgba(6,15,34,.42) 58%,rgba(6,15,34,.3) 100%),
    linear-gradient(to bottom,rgba(5,12,28,.5) 0%,transparent 26%,transparent 68%,rgba(5,12,28,.58) 100%);
}
.why__inner{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:center}
.why h2{margin-bottom:2.2rem}

.perks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.perk{
  padding:0 1.1rem;text-align:center;
  border-left:1px solid var(--line-dark);
}
.perk:first-child{border-left:0;padding-left:0}
.perk__ic{
  width:34px;height:34px;margin:0 auto .8rem;display:block;
  fill:none;stroke:#cfe0ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.perk__ic .a{stroke:var(--orange-500)}
.perk h3{font-size:.86rem;font-weight:600;color:#fff;margin-bottom:.5rem;line-height:1.35;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.perk p{font-size:.76rem;color:#a4b6d4;margin:0;line-height:1.45;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.why h2{text-shadow:0 4px 18px rgba(0,0,0,.7)}

/* Signpost — planks hang off a post on the left and point right.
   The arrow tip lives inside the plank's own width, so nothing is clipped. */
.signpost{position:relative;display:grid;gap:9px;width:min(250px,34vw);padding-left:18px}
.signpost::before{                      /* the post */
  content:"";position:absolute;left:0;top:-10px;bottom:-18px;width:10px;border-radius:4px;
  background:linear-gradient(180deg,#31486e 0%,#1b2c4d 40%,#0c1830 100%);
  box-shadow:inset -3px 0 0 rgba(0,0,0,.45),0 10px 24px -10px rgba(0,0,0,.8);
}
.signpost li{
  position:relative;
  background:linear-gradient(100deg,rgba(13,28,56,.96),rgba(9,20,42,.92));
  border:1px solid rgba(255,255,255,.18);
  padding:.55rem 2.1rem .55rem .95rem;
  font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
/* slight width variation reads as a real signpost rather than a stack of bars */
.signpost li:nth-child(1){width:100%}
.signpost li:nth-child(2){width:92%}
.signpost li:nth-child(3){width:98%}
.signpost li:nth-child(4){width:100%}
.signpost li:nth-child(5){width:94%}
.signpost li:nth-child(6){width:97%}
.signpost li:hover{
  transform:translateX(6px);
  background:linear-gradient(100deg,var(--orange-500),var(--orange-600));
  border-color:transparent;
}

/* ---------------- Partners band (light) ---------------- */
.partnersband{position:relative;background:var(--light);color:var(--light-ink);padding:clamp(2.4rem,4vw,3.4rem) 0;overflow:hidden}
.swoosh{
  position:absolute;right:-8%;top:-40%;width:70%;height:200%;
  background:conic-gradient(from 200deg at 0% 50%,transparent 0 40%,rgba(11,27,53,.06) 40% 46%,transparent 46%);
  border-radius:50%;
}
.partnersband__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.partnersband h2{color:var(--light-ink);margin-bottom:.7rem}
.partnersband p{color:var(--light-muted);font-size:.9rem}

/* ---------------- Fleet ---------------- */
.fleet{
  position:relative;overflow:hidden;padding:clamp(3rem,5.2vw,4.8rem) 0;
  background:linear-gradient(170deg,#071229 0%,#0a1934 60%,#050f24 100%);
}
.fleet::before{
  content:"";position:absolute;right:-8%;top:-20%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(249,115,22,.13),transparent 66%);
  filter:blur(40px);pointer-events:none;
}
.fleet__inner{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:start;
}
/* the "— [ OUR FLEET ]" rule from the reference, in brand orange */
.tag{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange-500);
}
.tag span{width:34px;height:2px;border-radius:2px;background:var(--orange-500);flex:none}
.fleet h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:.9rem}
.fleet__lead{color:var(--muted);font-size:.96rem;max-width:36ch;margin-bottom:1.8rem}
/* Landscape, not portrait — with only three rows opposite it, a tall photo
   left a dead gap at the bottom of the list column. */
.fleet__photo{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;
  border:1px solid var(--line-dark);
  /* Photo set from the admin via --fleet-img; the gradient is the fallback. */
  background:var(--fleet-img,url("../img/fleet-van.jpg")) center 42%/cover no-repeat,
             linear-gradient(160deg,#14345f,#0a1b38);
  box-shadow:var(--shadow);
}

.fleetlist{list-style:none;margin:0;padding:0;counter-reset:none}
.fleetlist li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:1.2rem;
  padding:1.5rem .4rem;border-bottom:1px solid var(--line-dark);
  transition:background .22s ease,padding-left .22s ease;
}
.fleetlist li:first-child{border-top:1px solid var(--line-dark)}
.fleetlist li:hover{background:rgba(255,255,255,.035);padding-left:1rem}
.fleetlist__no{
  font-family:var(--head);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  color:var(--orange-500);align-self:start;padding-top:.2rem;
}
.fleetlist__body h3{font-size:1.28rem;line-height:1.25;margin-bottom:.35rem;color:#fff}
.fleetlist__body p{font-size:.88rem;color:var(--muted);margin:0}
.fleetlist__cap{
  flex:none;white-space:nowrap;
  padding:.45rem 1rem;border-radius:999px;
  border:1px solid rgba(249,115,22,.4);background:rgba(249,115,22,.1);
  color:var(--orange-400);font-size:.78rem;font-weight:600;letter-spacing:.04em;
}

/* Closes the column so it finishes level with the photo instead of trailing off */
.fleetlist__more{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:1.4rem;padding:1.4rem 1.5rem;border-bottom:0;
  border:1px solid rgba(249,115,22,.28);border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(249,115,22,.1),rgba(255,255,255,.03));
}
.fleetlist__more:hover{background:linear-gradient(120deg,rgba(249,115,22,.14),rgba(255,255,255,.05));padding-left:1.5rem}
.fleetlist__more h3{font-size:1.05rem;color:#fff;margin-bottom:.3rem}
.fleetlist__more p{font-size:.85rem;color:var(--muted);margin:0;max-width:44ch}
.fleetlist__more .btn{flex:none}

@media (max-width:1040px){
  .fleet__inner{grid-template-columns:1fr}
  .fleet__photo{max-width:460px;aspect-ratio:16/10}
}
@media (max-width:640px){
  .fleetlist li{grid-template-columns:auto minmax(0,1fr);gap:.8rem 1rem}
  .fleetlist__cap{grid-column:2;justify-self:start;margin-top:.5rem}
  .fleet__photo{max-width:none}
  .fleetlist__more{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------------- Locations ---------------- */
.locations{
  position:relative;overflow:hidden;padding:clamp(3rem,5.5vw,4.6rem) 0;
  background:linear-gradient(150deg,#0a1934 0%,#0d2144 45%,#071229 100%);
}
.locations__scrim{
  position:absolute;inset:0;
  background:radial-gradient(900px 500px at 88% 40%,rgba(249,115,22,.14),transparent 62%);
}
.locations__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:2.4rem;align-items:center}
.locations h2{margin-bottom:.8rem}
.locations__left > p{color:var(--muted);font-size:.94rem;margin-bottom:1.8rem}
.locations__left u{text-decoration-color:var(--orange-500);text-underline-offset:4px}

.citycards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.city a{
  position:relative;display:block;aspect-ratio:1/1.08;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  /* Fallback until a photo is dropped in: a night-skyline glow, hue-shifted per
     city so the six tiles don't read as six identical empty boxes. */
  background:
    radial-gradient(64% 38% at 50% 102%,rgba(255,176,102,.4),transparent 72%),
    linear-gradient(165deg,var(--c1,#1a3b68),var(--c2,#0a1b38));
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.city--carlisle   a{--c1:#1d4470;--c2:#091a36}
.city--york       a{--c1:#20406a;--c2:#0b1c3a}
.city--leeds      a{--c1:#1a3c66;--c2:#091830}
.city--birmingham a{--c1:#243f6d;--c2:#0c1e3c}
.city--leicester  a{--c1:#1b3a60;--c2:#081731}
.city--coventry   a{--c1:#22456f;--c2:#0a1c38}
.city a > i{                            /* CSS-drawn skyline silhouette */
  position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 5px,#050e20 5px 11px,transparent 11px 15px,
      #071230 15px 24px,transparent 24px 27px,#040c1d 27px 36px,transparent 36px 41px);
  -webkit-mask-image:linear-gradient(to top,#000 42%,transparent 100%);
  mask-image:linear-gradient(to top,#000 42%,transparent 100%);
  opacity:.85;
}
.city:nth-child(even) a > i{background-position:-9px 0}
.city:nth-child(3n) a > i{background-position:-17px 0}
.city a::before{                        /* photo slot — paints over the fallback */
  content:"";position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;
  /* UK daylight means flat grey skies; pull them toward the navy theme */
  filter:saturate(.8) contrast(1.06) brightness(.78);
  transition:filter .3s ease,transform .5s ease;
}
.city a:hover::before{filter:saturate(1) contrast(1.06) brightness(.95);transform:scale(1.05)}
/* City photography now comes from the database (admin → Locations). The tile
   sets --city-img inline; if a city has no photo the variable is unset and the
   per-city gradient underneath shows through instead. */
.city a::before,.loccard__photo::before{background-image:var(--city-img)}
.city a::after{                         /* navy wash + label scrim */
  content:"";position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(to top,rgba(4,11,27,.96) 0%,rgba(4,11,27,.5) 42%,rgba(6,18,42,.3) 100%),
    linear-gradient(160deg,rgba(18,48,89,.45),rgba(4,11,27,.2));
}
.city span{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:4;
  display:flex;align-items:center;gap:.3rem;
  font-size:.76rem;font-weight:600;color:#fff;
}
.city .ic{width:13px;height:13px;color:var(--orange-500)}
.city a:hover{transform:translateY(-5px);border-color:var(--orange-500);box-shadow:0 18px 32px -16px rgba(249,115,22,.8)}

/* Map */
.locations__map{position:relative;display:flex;align-items:center;justify-content:center;gap:1.4rem}
.locations__map::before{                /* soft light behind the landmass */
  content:"";position:absolute;left:18%;top:50%;width:62%;aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(47,111,196,.3),transparent 66%);
  filter:blur(26px);pointer-events:none;
}
/* Supplied map render. Its own background is near-black, so the edges are
   feathered away with a mask rather than left as a visible rectangle. */
.ukmap{
  /* No mix-blend-mode here — it creates its own stacking context and stops the
     mask feathering, which leaves the artwork as a visible rectangle. */
  position:relative;display:block;width:min(420px,56vw);height:auto;
  filter:brightness(1.06) saturate(1.12);
  -webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 50%,#000 38%,rgba(0,0,0,.5) 68%,transparent 90%);
  mask-image:radial-gradient(ellipse 66% 64% at 50% 50%,#000 38%,rgba(0,0,0,.5) 68%,transparent 90%);
}
.mapnote{max-width:160px}
.mapnote p{font-size:.82rem;color:var(--muted);margin:.35rem 0 0}

/* ---------------- Requirements ---------------- */
.reqs{
  position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  background:linear-gradient(120deg,#071229,#0a1934);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.reqs__photo{position:relative;min-height:290px;overflow:hidden}
.reqs__photo::after{                   /* photo slot */
  content:"";position:absolute;inset:0;z-index:2;
  /* driver sits on the left of the frame — anchor there so he is never cropped out */
  background:url("../img/driver-wheel.jpg") left center/cover no-repeat;
}
.reqs__photo::before{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,transparent 55%,rgba(7,18,41,.98) 100%);
}
.wheelview{
  position:absolute;inset:0;
  background:
    radial-gradient(600px 240px at 62% 44%,rgba(255,176,102,.5),transparent 62%),
    linear-gradient(to bottom,#1a2f52 0%,#101f3c 46%,#0a1631 100%);
}
.wheelview::before{  /* windscreen pillar + steering wheel silhouette */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 34% 108%,#03070f 0 26%,transparent 27%),
    linear-gradient(105deg,#04080f 0 22%,transparent 22%),
    linear-gradient(to top,#04080f 0 16%,transparent 16%);
}
.reqs__body{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:2.2rem;
  align-items:center;padding:clamp(2.2rem,4vw,3.2rem) clamp(1.6rem,4vw,3rem);
}
.reqs h2{margin-bottom:1.4rem}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 2rem}
.ticks li{position:relative;padding-left:2rem;font-size:.9rem;color:#dbe6f6}
.ticks li em{color:var(--muted-2);font-style:normal}
.ticks li::before{
  content:"";position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:6px;
  background:rgba(249,115,22,.16);border:1px solid rgba(249,115,22,.5);
}
.ticks li::after{
  content:"";position:absolute;left:5.5px;top:.42em;width:9px;height:5px;
  border-left:2px solid var(--orange-500);border-bottom:2px solid var(--orange-500);
  transform:rotate(-45deg);
}
.reqs__cta{
  border-left:1px solid var(--line-dark);padding-left:clamp(1.2rem,2.5vw,2rem);
}
.reqs__ic{
  width:40px;height:40px;margin-bottom:.9rem;display:block;
  fill:none;stroke:#cfe0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.reqs__ic .a{stroke:var(--orange-500);stroke-width:2.2}
.reqs__cta h3{font-size:1.1rem;margin-bottom:.5rem;line-height:1.3}
.reqs__cta p{font-size:.86rem;color:var(--muted);margin-bottom:1.1rem}

/* ---------------- Apply ---------------- */
.apply{padding:clamp(3.2rem,6vw,5rem) 0;background:linear-gradient(170deg,#071229,#040b1b)}
.apply__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem);align-items:start}
.apply__intro h2{margin-bottom:1rem}
.apply__intro > p{color:var(--muted);font-size:.95rem}
.steps{display:grid;gap:1rem;margin:1.8rem 0}
.steps li{display:flex;gap:1rem;align-items:flex-start}
.steps b{
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.45);
  color:var(--orange-500);font-family:var(--head);font-weight:700;font-size:.95rem;
}
.steps h4{font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.steps p{font-size:.84rem;color:var(--muted-2);margin:0}
.contactrow{display:flex;flex-wrap:wrap;gap:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-dark)}
.contactrow a{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#dbe6f6;transition:color .18s}
.contactrow a:hover{color:var(--orange-500)}
.contactrow .ic{width:18px;height:18px;color:var(--orange-500)}

.applyform{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow);
}
.field{margin-bottom:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{display:block;font-size:.8rem;font-weight:600;color:#c6d5ec;margin-bottom:.4rem}
.field label i{color:var(--orange-500);font-style:normal}
.field label .opt{font-weight:400;color:var(--muted-2)}
.field input,.field select,.field textarea{
  width:100%;padding:.78rem .95rem;border:1px solid rgba(255,255,255,.16);border-radius:11px;
  background:rgba(4,11,27,.6);font:inherit;font-size:.92rem;color:#fff;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.field input::placeholder,.field textarea::placeholder{color:#5c6f8e}
.field textarea{resize:vertical;min-height:92px}
.field select{
  appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:15px;
}
.field select option{background:#0a1934;color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange-500);background:rgba(4,11,27,.9);
  box-shadow:0 0 0 4px rgba(249,115,22,.16);
}
.field.is-error input,.field.is-error select{border-color:#f87171;box-shadow:0 0 0 4px rgba(248,113,113,.12)}
.err{display:block;color:#f87171;font-size:.76rem;font-weight:500;margin-top:.25rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 1.2rem;font-size:.84rem;color:var(--muted);cursor:pointer}
.consent input{width:17px;height:17px;margin-top:.15rem;accent-color:var(--orange-500);flex:none}
.consent i{color:var(--orange-500);font-style:normal}
.consent.is-error span{color:#f87171}
.formmsg{margin:.9rem 0 0;font-size:.88rem;font-weight:500;color:#4ade80;text-align:center}
.formmsg.is-bad{color:#f87171}

/* ---------------- Closing band ---------------- */
.closing{position:relative;overflow:hidden;min-height:230px;display:flex;align-items:center;padding:clamp(2.4rem,4vw,3.6rem) 0}
.closing__media{position:absolute;inset:0;background:linear-gradient(160deg,#0d2144,#071229)}
.closing__media::before{               /* photo slot */
  content:"";position:absolute;inset:0;z-index:2;
  background:url("../img/closing-road.jpg") center 55%/cover no-repeat;
}
.closing__scrim{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,rgba(4,11,27,.95) 0%,rgba(5,13,30,.7) 55%,rgba(5,13,30,.55) 100%);
}
.closing__inner{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.closing h2{margin-bottom:.4rem}
.closing p{color:var(--muted);font-size:.95rem}

/* ---------------- Footer ---------------- */
.footer{background:#030812;border-top:1px solid var(--line-dark);padding-top:clamp(2.4rem,4vw,3.4rem)}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2rem;padding-bottom:2.2rem}
.footer__brand .brand__badge--lg{box-shadow:0 6px 20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.35)}
.footer__brand p{font-size:.86rem;color:var(--muted-2);max-width:34ch}
.social{display:flex;gap:.55rem;margin-top:1.1rem}
.social a{
  width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  transition:background .2s,border-color .2s,transform .2s;
}
.social a:hover{background:var(--orange-500);border-color:var(--orange-500);transform:translateY(-3px)}
.social svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer__col h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:1rem;font-weight:600}
.footer__col ul{display:grid;gap:.55rem}
.footer__col a{font-size:.87rem;color:var(--muted-2);transition:color .18s,padding-left .18s}
.footer__col a:hover{color:var(--orange-500);padding-left:4px}
.footer__phone{display:block;font-family:var(--head);font-weight:700;font-size:1.3rem;color:#fff!important;margin-bottom:.3rem}
.footer__mail{display:block;margin-bottom:1rem}
/* CC licences require credit — keep this visible, not display:none */
.footer__credits{padding-top:1.1rem;border-top:1px solid var(--line-dark)}
.footer__credits p{font-size:.7rem;line-height:1.55;color:#4f6285;margin:0}
.footer__credits a{color:#67799b;text-decoration:underline;text-underline-offset:2px}
.footer__credits a:hover{color:var(--orange-500)}
.footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.2rem;padding-bottom:1.2rem;border-top:1px solid var(--line-dark);
  font-size:.82rem;color:var(--muted-2);
}
.footer__bottom p{margin:0}
.footer__bottom ul{display:flex;gap:1.3rem}
.footer__bottom a:hover{color:var(--orange-500)}

/* ---------------- Back to top ---------------- */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:95;width:44px;height:44px;
  display:grid;place-items:center;border-radius:13px;
  background:var(--orange-500);color:#fff;box-shadow:0 14px 28px -12px rgba(249,115,22,.95);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--orange-600)}
.totop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- Reveal ---------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Multi-page additions
   ========================================================================== */

.skiplink{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--orange-500);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:600;
}
.skiplink:focus{left:0}

/* ---------------- Generic section + heading ---------------- */
.section{padding:clamp(3rem,5.5vw,4.6rem) 0;background:linear-gradient(170deg,#071229,#040b1b)}
.section--deep{background:linear-gradient(160deg,#0a1934,#071229);border-block:1px solid var(--line-dark)}
.sechead{max-width:640px;margin:0 auto clamp(2rem,3.6vw,2.8rem);text-align:center}
.sechead p{color:var(--muted);margin-top:.8rem}

/* ---------------- Page hero (inner pages) ---------------- */
.pagehero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + clamp(2.4rem,5vw,4rem)) 0 clamp(2.2rem,4vw,3.2rem);
  background:linear-gradient(160deg,#0d2144 0%,#0a1934 55%,#050f24 100%);
}
.pagehero__media{position:absolute;inset:0}
.pagehero__media::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:url("../img/hero-truck.jpg") center 32%/cover no-repeat;
  filter:brightness(.5) saturate(.85);
}
.pagehero__scrim{
  position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(95deg,rgba(4,11,27,.94) 0%,rgba(5,13,30,.8) 48%,rgba(6,15,34,.55) 100%),
    radial-gradient(700px 300px at 85% 110%,rgba(249,115,22,.22),transparent 65%);
}
.pagehero__inner{position:relative;z-index:4}
.pagehero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);margin:.5rem 0 .7rem}
.pagehero p{color:#c3d4ee;max-width:56ch;margin:0}
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted-2)}
.crumbs a{color:var(--muted);transition:color .18s}
.crumbs a:hover{color:var(--orange-500)}
.crumbs span[aria-current]{color:#fff}

/* ---------------- Cards grid ---------------- */
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:1.6rem 1.4rem;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.card:hover{transform:translateY(-5px);border-color:rgba(249,115,22,.5);background:rgba(255,255,255,.06)}
.card__ic{
  width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.35);margin-bottom:1rem;
}
.card__ic svg{width:23px;height:23px;fill:none;stroke:#cfe0ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card__ic .a{stroke:var(--orange-500)}
.card h3{margin-bottom:.45rem;font-size:1.05rem}
.card p{color:var(--muted);font-size:.9rem;margin:0}

/* ---------------- Opportunities: two routes ---------------- */
.routecards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.routecard{
  position:relative;border-radius:var(--radius-lg);padding:2rem 1.8rem;
  background:linear-gradient(160deg,rgba(18,48,89,.7),rgba(7,18,41,.9));
  border:1px solid var(--line-dark);
}
.routecard--alt{background:linear-gradient(160deg,rgba(249,115,22,.14),rgba(7,18,41,.9));border-color:rgba(249,115,22,.3)}
.routecard__tag{
  position:absolute;right:1.4rem;top:1.4rem;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-400);
  background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.35);
  padding:.28rem .6rem;border-radius:999px;
}
.routecard__ic{width:42px;height:42px;margin-bottom:1rem;fill:none;stroke:#cfe0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.routecard__ic .a{stroke:var(--orange-500)}
.routecard h3{font-size:1.5rem;margin-bottom:.6rem}
.routecard > p{color:var(--muted);font-size:.93rem}
.routecard .ticks{margin:1.3rem 0 1.6rem}
.ticks--single{grid-template-columns:1fr}

/* ---------------- Locations page ---------------- */
.locmap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.4rem);align-items:center}
.locmap__copy p{color:var(--muted)}
.locmap__copy h2{margin-bottom:1rem}
.locmap__copy .btn{margin-top:.6rem}
.locmap__map{display:flex;justify-content:center}
.locmap__map .ukmap{width:min(480px,72vw)}

.loclist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.loccard{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.04);scroll-margin-top:calc(var(--header-h) + 20px);
  transition:transform .22s ease,border-color .22s ease;
}
.loccard:hover{transform:translateY(-5px);border-color:rgba(249,115,22,.5)}
.loccard__photo{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:
    radial-gradient(64% 38% at 50% 102%,rgba(255,176,102,.4),transparent 72%),
    linear-gradient(165deg,var(--c1,#1a3b68),var(--c2,#0a1b38));
}
.loccard__photo::before{
  content:"";position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;
  filter:saturate(.85) contrast(1.05) brightness(.82);
}
.loccard__photo::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(to top,rgba(7,18,41,.9),transparent 70%);
}
.loccard__photo > i{
  position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 5px,#050e20 5px 11px,transparent 11px 15px,#071230 15px 24px,transparent 24px 27px,#040c1d 27px 36px,transparent 36px 41px);
  -webkit-mask-image:linear-gradient(to top,#000 42%,transparent 100%);
  mask-image:linear-gradient(to top,#000 42%,transparent 100%);
  opacity:.85;
}
.loccard__body{padding:1.3rem 1.3rem 1.5rem}
.loccard__region{display:flex;align-items:center;gap:.4rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-500);margin-bottom:.35rem}
.loccard__region .ic{width:14px;height:14px}
.loccard h3{font-size:1.25rem;margin-bottom:.5rem}
.loccard__body > p{color:var(--muted);font-size:.88rem;margin-bottom:1.1rem}

/* ---------------- Requirements page ---------------- */
.reqpage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);gap:clamp(1.8rem,3.5vw,3rem);align-items:start}
.reqpage header{margin-bottom:1.8rem}
.reqpage header h2{margin-bottom:.8rem}
.reqpage header p{color:var(--muted)}
.reqlist{display:grid;gap:12px;counter-reset:req}
.reqlist li{
  display:flex;gap:1rem;align-items:flex-start;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:1.15rem 1.3rem;
  transition:border-color .2s ease,transform .2s ease;
}
.reqlist li:hover{border-color:rgba(249,115,22,.5);transform:translateX(4px)}
.reqlist__no{
  flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.45);
  color:var(--orange-500);font-family:var(--head);font-weight:700;font-size:.9rem;
}
.reqlist h3{font-size:1rem;margin-bottom:.2rem}
.reqlist p{font-size:.86rem;color:var(--muted);margin:0}

.reqpage__side{display:grid;gap:14px;position:sticky;top:calc(var(--header-h) + 18px)}
.sidecard{
  border-radius:var(--radius-lg);padding:1.7rem 1.5rem;
  background:linear-gradient(160deg,rgba(249,115,22,.16),rgba(7,18,41,.92));
  border:1px solid rgba(249,115,22,.3);
}
.sidecard--plain{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.sidecard h3{font-size:1.15rem;margin-bottom:.5rem;line-height:1.3}
.sidecard p{color:var(--muted);font-size:.87rem;margin-bottom:1rem}
.sidecard__phone{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--head);font-weight:700;font-size:1.15rem;color:#fff}
.sidecard__phone .ic{width:18px;height:18px;color:var(--orange-500)}
.sidecard__phone:hover{color:var(--orange-500)}

.processline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:step}
.processline li{position:relative;padding:1.4rem 1.2rem;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid var(--line-dark)}
.processline span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-bottom:.8rem;
  background:var(--orange-500);color:#fff;font-family:var(--head);font-weight:700;
}
.processline h3{font-size:.98rem;margin-bottom:.35rem}
.processline p{font-size:.82rem;color:var(--muted);margin:0}

/* ---------------- About page ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.split__copy h2{margin-bottom:1.1rem}
.split__copy p{color:var(--muted)}
.split__copy .btn{margin-top:.8rem}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.stat{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--radius);padding:1rem 1.1rem}
.stat b{display:block;font-family:var(--head);font-weight:700;font-size:2rem;color:var(--orange-500);line-height:1}
.stat span{font-size:.8rem;color:var(--muted-2)}
.visual-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:1.5rem 1.3rem 1.2rem;background:linear-gradient(150deg,#123059,#050f24);border:1px solid var(--line-dark)}
.visual-card::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.4),transparent 68%)}
.van{position:relative;width:100%;height:auto}
.van__body{fill:#fff}.van__win{fill:#3f6fa8}.van__panel{fill:#e6ecf7}
.van__tyre{fill:#050f24}.van__hub{fill:#5c7398}.van__lamp{fill:var(--orange-500)}
.speed path{stroke:var(--orange-500);stroke-width:5;stroke-linecap:round;fill:none;opacity:.85}
.visual-card__cap{position:relative;margin-top:.5rem}
.visual-card__cap strong{display:block;font-family:var(--head);font-weight:700;font-size:1.2rem}
.visual-card__cap span{font-size:.83rem;color:var(--muted)}

/* ---------------- Contact page ---------------- */
.contactcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contactcard{
  display:block;border-radius:var(--radius-lg);padding:1.8rem 1.6rem;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.contactcard:hover{transform:translateY(-5px);border-color:rgba(249,115,22,.55);background:rgba(255,255,255,.06)}
.contactcard__ic{width:38px;height:38px;margin-bottom:1rem;fill:none;stroke:#cfe0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contactcard__ic .a{stroke:var(--orange-500)}
.contactcard h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.5rem}
.contactcard strong{display:block;font-family:var(--head);font-weight:700;font-size:1.2rem;margin-bottom:.4rem;word-break:break-word}
.contactcard p{font-size:.85rem;color:var(--muted);margin:0}

/* ---------------- CTA band ---------------- */
.ctaband{position:relative;overflow:hidden;text-align:center;padding:clamp(2.8rem,5vw,4.2rem) 0;background:linear-gradient(160deg,#0d2144,#050f24)}
.ctaband__glow{position:absolute;left:50%;top:-40%;width:640px;height:320px;transform:translateX(-50%);background:radial-gradient(circle,rgba(249,115,22,.3),transparent 66%);filter:blur(28px)}
.ctaband__inner{position:relative;z-index:2}
.ctaband h2{margin-bottom:.6rem}
.ctaband p{color:var(--muted);margin-bottom:1.6rem}
.ctaband__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem}

/* ---------------- Misc page bits ---------------- */
.why__more,.locations__more,.reqs__more{margin-top:1.6rem}
.applynote{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-dark);font-size:.86rem;color:var(--muted)}
.applynote a{color:var(--orange-500);text-decoration:underline;text-underline-offset:3px}
.signpost li a{display:block;color:inherit}

@media (max-width:1040px){
  .routecards{grid-template-columns:1fr}
  .loclist{grid-template-columns:1fr 1fr}
  .reqpage{grid-template-columns:1fr}
  .reqpage__side{position:static;grid-template-columns:1fr 1fr}
  .processline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .locmap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .contactcards{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .loclist{grid-template-columns:1fr}
  .reqpage__side{grid-template-columns:1fr}
  .processline{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav > ul{gap:1.3rem}
  .nav a{font-size:.85rem}
  .brand__word{display:none}
  .brand__badge{width:50px;height:50px}
  .brand__badge img{width:43px;height:43px}
}

@media (max-width:1040px){
  .why__inner{grid-template-columns:1fr}
  /* Single column: show the right-hand scene and darken evenly for the copy */
  .why__media::before{background-position:right center;filter:brightness(.7)}
  .why__scrim{
    background:linear-gradient(to bottom,rgba(5,12,28,.94) 0%,rgba(5,13,30,.86) 42%,rgba(6,15,34,.8) 100%);
  }
  /* Stacked layout: the post reads as clutter, so drop it and square the planks off */
  .signpost{width:100%;max-width:420px;grid-template-columns:1fr 1fr;justify-self:start;padding-left:0}
  .signpost::before{display:none}
  .signpost li,.signpost li:nth-child(n){width:100%;clip-path:none;border-radius:8px;padding:.55rem .95rem}
  .signpost li:hover{transform:translateY(-2px)}
  .citycards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .locations__inner{grid-template-columns:1fr}
  .locations__map{justify-content:flex-start}
  .reqs{grid-template-columns:1fr}
  .reqs__photo{min-height:220px}
  .reqs__photo::before{background:linear-gradient(to bottom,transparent 55%,rgba(7,18,41,.98) 100%)}
  .footer__top{grid-template-columns:1fr 1fr;gap:1.8rem}
}

@media (max-width:900px){
  .burger{display:block;order:3}
  .header__cta{display:none}
  .brand{margin-right:auto}
  .brand__word{display:inline}          /* room again once the nav collapses */
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;order:4;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(4,11,27,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-dark);padding:1rem 28px 1.4rem;
    transform:translateY(-130%);transition:transform .3s ease;
    max-height:calc(100dvh - var(--header-h));overflow:auto;
  }
  .nav.is-open{transform:none}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line-dark);font-size:1rem}
  .nav a::after{display:none}
  .nav__apply{display:inline-flex;margin-top:1.1rem;width:100%}

  .perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 0}
  .perk{border-left:0;padding:0 .6rem}
  .hero__truck{width:min(620px,88vw);right:-8%;bottom:auto;top:16%;opacity:.5}
  .hero__copy{max-width:none}
  /* Below the two-column threshold the photo goes full width and fades upward
     instead of sideways, so the copy still sits on solid navy. */
  .hero{min-height:clamp(600px,88vw,720px)}
  .hero__media::before{
    inset:0;width:100%;background-position:center right;
    -webkit-mask-image:linear-gradient(to top,transparent 6%,rgba(0,0,0,.6) 34%,#000 62%);
    mask-image:linear-gradient(to top,transparent 6%,rgba(0,0,0,.6) 34%,#000 62%);
  }
  .hero__scrim{
    background:
      linear-gradient(to bottom,rgba(4,10,24,.96) 0%,rgba(4,11,27,.86) 34%,rgba(6,15,34,.42) 62%,rgba(6,15,34,.72) 100%);
  }
  .apply__inner{grid-template-columns:1fr}
  .reqs__body{grid-template-columns:1fr}
  .reqs__cta{border-left:0;border-top:1px solid var(--line-dark);padding:1.5rem 0 0}
  .partnersband__inner{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .partnersband p br{display:none}
}

@media (max-width:640px){
  .shell{padding:0 20px}
  .hero{min-height:clamp(560px,120vw,680px);padding-bottom:4.5rem}
  .hero__truck{display:none}
  .partners--hero{gap:1.1rem}
  .pl--dpd span,.pl--dhl span,.pl--inpost span,.pl--yodel span{font-size:1.02rem}
  .perks{grid-template-columns:1fr 1fr}
  .signpost{grid-template-columns:1fr 1fr}
  .citycards{grid-template-columns:1fr 1fr}
  .ticks{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
  .locations__map{flex-direction:column;align-items:flex-start}
  .mapnote{max-width:none}
  .script--lg::after{margin-left:0;width:40%}
}

@media (max-width:380px){
  .brand__word{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}


/* ---------------- Server-rendered form feedback ---------------- */
/* The forms now post to Laravel, so the confirmation and the error summary are
   rendered above the fields on the response rather than injected by script. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.applyform .formmsg{
  margin:0 0 1.1rem;padding:.85rem 1rem;border-radius:11px;text-align:left;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);
}
.applyform .formmsg.is-bad{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.38)}
.consent + .err{display:block;margin:-.8rem 0 1rem}
.footer__address{color:var(--muted-2);font-size:.86rem;line-height:1.55;margin:.2rem 0 .9rem}