/* =============================================
   HERO - left-aligned editorial copy + stats
   Background: Freightroute fleet photo + horizontal gradient (dark on the left for legible text, clear on the right)
   ============================================= */

.hero {
  position: relative;
  /* Floor 720px so content never cramps on small/landscape screens.
     Preferred 100vh so the hero fills typical viewports.
     Ceiling 1100px so it doesn't balloon on tall ultrawides. */
  min-height: clamp(720px, 100vh, 1100px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav);
  background: var(--navy);
}

/* --- Background slideshow + gradient overlay --- */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* filter: the slideshow script lifts a too-dark uploaded photo a little (2026-10-08) - if that lands while the
     photo is already showing, it eases in instead of jumping. */
  transition: opacity .9s ease, filter .6s ease;
  pointer-events: none;
  background: #0B1628;
}
.hero-bg-img.is-active { opacity: 1; }
/* Photo grade (2026-10-08): a multiply layer between the photos and the gradient. White = no change (the two built-in
   photos); for a warmer or brighter uploaded photo the slideshow script tints it (red/green down more than blue) so the
   photo sits under the gradient like the built-in ones. It eases from photo to photo with the cross-fade. The hero is
   isolated so the multiply only ever mixes with the hero's own photos. */
.hero { isolation: isolate; }
.hero-bg-grade {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background-color: #fff;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: background-color .9s ease;
}

/* Slideshow controls - centred along the bottom of the hero, above the gradient overlay (owner, 2026-10-16: "centralise
   it at the bottom of the page and have dots that denote the picture, so 4 dots for 4 pictures, and a cool animation
   for swapping the dots", then "no need to have the arrows to the left and right"). One dark pill holding a dot per
   photo (made by the slideshow script) and nothing else; no white ring, no blur, no glow. */
.hero-slide-nav {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  max-width: calc(100% - 32px);
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(11,22,40,.66);
}
/* The dots. Each is a button with a 24px-wide tap area (it narrows only if there are a great many photos on a small
   screen); the dot itself is drawn by ::before, the red fill by ::after. The current photo's dot widens to 44px and its
   dot stretches into a 28px bar. When the photo moves on, that bar shrinks back into a dot while the next dot grows
   into the bar - the same easing both ways, so it reads as one hand-over - and while the photos move on by themselves
   the bar fills red, left to right, over the time the photo is shown (heroDotFill = AUTO_MS in index.html, 6s). */
.hero-slide-dots {
  display: flex;
  align-items: center;
  min-width: 0;
}
.hero-dot {
  position: relative;
  flex: 0 1 auto;
  width: 24px;
  min-width: 10px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width .55s cubic-bezier(.65, 0, .35, 1);
}
.hero-dot::before,
.hero-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.hero-dot::before {   /* the dot - and, for the photo on show, the bar */
  width: 8px;
  background: rgba(255,255,255,.45);
  transition: width .55s cubic-bezier(.65, 0, .35, 1), background-color .3s ease;
}
.hero-dot::after {    /* the red fill inside the bar - it grows with the bar, so it can never show outside it */
  width: 8px;
  background: var(--red);
  opacity: 0;
  clip-path: inset(0 100% 0 0 round 999px);
  transition: width .55s cubic-bezier(.65, 0, .35, 1), opacity .2s ease;
}
.hero-dot:hover::before { background: rgba(255,255,255,.8); }
.hero-dot.is-active { flex-shrink: 0; width: 44px; cursor: default; }
.hero-dot.is-active::before { width: 28px; background: rgba(255,255,255,.3); }
.hero-dot.is-active::after { width: 28px; opacity: 1; clip-path: inset(0 0 0 0 round 999px); transition: width .55s cubic-bezier(.65, 0, .35, 1), opacity .3s ease .25s; }
.hero-slide-nav.is-auto .hero-dot.is-filling::after { animation: heroDotFill 6s linear both; }
@keyframes heroDotFill {
  from { clip-path: inset(0 100% 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}
.hero-dot:focus { outline: none; }
.hero-dot:focus-visible::before { box-shadow: 0 0 0 2px rgba(11,22,40,.9), 0 0 0 4px #fff; }   /* keyboard only: a crisp ring, no glow */
@media (prefers-reduced-motion: reduce) {
  .hero-dot, .hero-dot::before, .hero-dot::after { transition: none; }
  .hero-slide-nav.is-auto .hero-dot.is-filling::after { animation: none; }
}
@media (max-width: 600px) {
  .hero-slide-nav { bottom: 16px; }
}
.hero-bg-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  /* Strong navy on the LEFT so the left-aligned copy stays legible, fading to fully
     transparent on the RIGHT so the fleet photo reads at full strength there. */
  background: linear-gradient(90deg,
    rgba(11,22,40,.88) 0%,
    rgba(11,22,40,.80) 40%,
    rgba(11,22,40,.66) 56%,
    rgba(11,22,40,.34) 72%,
    rgba(11,22,40,.10) 88%,
    rgba(11,22,40,0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* --- Single left-aligned column holding the hero copy + stats.
   Spans the FULL hero width (minus the navbar above, handled by .hero's padding-top). */
.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 60px;
  width: 100%;
  max-width: none;                      /* full viewport width - no centre cap */
  margin: 20px;                         /* EVEN inset on all four sides */
  /* Mirrors the .hero clamp minus navbar (80px) + top/bottom margins (40px) = 120px subtracted. */
  min-height: clamp(600px, calc(100vh - 120px), 980px);
}
/* Comfortable left/right inset for the single-column hero (~60px total with the 20px margin)
   so the hero copy lines up with the section content below. */
.hero .container { padding-left: 40px; padding-right: 40px; }
/* Hero copy column: left-aligned, vertically centred, width-capped. */
.hero-content {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero-map-wrap {
  grid-column: 3;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;                 /* vertical centring of the card */
  justify-content: center;             /* horizontal centring of the card */
  /* Pull the whole right column 40px leftward to negate the grid gap so its left edge
     touches the right edge of the central column. (CSS Grid's `gap` is uniform across all
     columns - this negative margin selectively closes only the centre↔right gap.) */
  margin-left: -40px;
}

/* === LEFT COLUMN: fact bars (sidebar style, bleed off the left edge of the page) === */
.hero-facts-bars {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* first bar at top, last at bottom, equal gaps between */
  gap: 14px;                        /* minimum gap if column is short */
  position: relative;
  z-index: 2;
}
.hero-fact-bar {
  position: relative;
  display: flex;
  align-items: stretch;               /* halves stretch full height */
  justify-content: center;
  gap: 8px;                           /* transparent slot between icon-half and text-half */
  min-height: 80px;                   /* matches the navbar height (--nav) */
  margin-left: -20px;
  margin-right: 20%;                  /* bar ends 20% short of the column's right edge */
  color: #0a1525;
  cursor: default;
  /* NO background, NO clip-path here - moved to the two halves so the 4px gap between them
     stays transparent and reveals the navy hero/video behind. */
}
/* LEFT half: holds the icon. Plain rectangle. */
.hero-fact-bar-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: #ffffff;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
}
/* RIGHT half: holds the text. Carries the diagonal cut on its right edge. */
.hero-fact-bar-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  padding-right: 60px;                /* keeps text clear of the diagonal cut */
  background: #ffffff;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
  clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
  flex: 1 1 auto;                     /* let the text half take the remaining horizontal space */
  min-width: 0;
}
/* SVG polyline traces the bar's silhouette with a uniform 2px white stroke that stays the
   same thickness on every edge - including the diagonal - regardless of bar height.
   Stroke-width is 4 in the SVG: half (2px) is clipped away by the bar's clip-path because
   the path runs exactly along the edges, leaving 2px of stroke visible inside. */
.hero-fact-bar-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                    /* covers the full bar so polyline matches the clip-path edges exactly */
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
/* Bar content (icon, text) sits above the outline so the stroke never overlaps it. */
.hero-fact-bar > *:not(.hero-fact-bar-outline) {
  position: relative;
  z-index: 2;
}
/* Hover state intentionally has no background change - the description expanding is the
   sole affordance. Removed the red highlight as requested. */
.hero-fact-bar-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
/* Use the display:grid + grid-template-rows 0fr→1fr trick for buttery-smooth height
   animation. Browsers can interpolate fr-row sizes cleanly, unlike max-height. */
.hero-fact-bar-text {
  min-width: 0;
  align-self: stretch;              /* fill the bar's full content-box vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;          /* TRUE vertical centring - headline sits at the geometric middle */
  align-items: center;              /* horizontal centring */
  text-align: center;
}
/* Animation wrapper for the description. Using grid-template-rows 0fr → 1fr so the height
   transition stays smooth, while the parent .hero-fact-bar-text is a clean flex column
   purely for centring the headline. */
.hero-fact-bar-desc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows .55s cubic-bezier(.16, 1, .3, 1);
}
/* Number + label on a single horizontal line. Vertical centring is handled by the parent
   .hero-fact-bar-text (align-content: center on its grid). */
.hero-fact-bar-headline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  line-height: 1;
  transform: translateY(2px);       /* optical nudge: line-box is geometrically centred but
                                       cap-only text sits in the upper half of the line-box,
                                       so 2px downward correction makes it look truly centred */
}
.hero-fact-bar-num {
  font-family: var(--heading);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #0a1525;
}
.hero-fact-bar-label {
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #0a1525;
}
/* Description: always present in the DOM at full opacity. The text has NO animation
   of its own. The parent row (.hero-fact-bar-text) is what animates - it just clips
   the text via overflow:hidden when collapsed and reveals it when expanded. */
.hero-fact-bar-desc {
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0a1525;
  margin: 0;
  overflow: hidden;
  min-height: 0;
  padding-top: 0;                   /* zero by default so the desc's box truly collapses to 0
                                       and doesn't push the headline off-centre */
  text-align: center;
  transition: padding-top .55s cubic-bezier(.16, 1, .3, 1);
}
.hero-fact-bar:hover .hero-fact-bar-desc-wrap,
.hero-fact-bar:focus-within .hero-fact-bar-desc-wrap,
.hero-fact-bar.previewing .hero-fact-bar-desc-wrap {
  grid-template-rows: 1fr;
}
.hero-fact-bar:hover .hero-fact-bar-desc,
.hero-fact-bar:focus-within .hero-fact-bar-desc,
.hero-fact-bar.previewing .hero-fact-bar-desc {
  padding-top: 10px;                /* breathing room between headline and desc, only when revealed */
}
/* Preview state intentionally has no background change - only the description expansion
   plays during the cascade so users see they're hoverable without a colour pop. */

/* === LEFT: editorial copy === */
.hero-content {
  color: var(--white);
  animation: heroRise .6s cubic-bezier(.16,1,.3,1) both;
  text-align: left;
  text-shadow: 0 1px 2px rgba(11,22,40,.6), 0 2px 22px rgba(11,22,40,.5);
}

/* Accessible alt-text fallback (kept in DOM for CMS + screen readers). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero-title {
  font-family: var(--heading);
  font-size: clamp(3rem, 5.6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.04em;
  color: var(--white);
  margin: 0 0 28px;
}
.hero-title .line {
  display: block;
  white-space: nowrap;   /* keep each headline line unbroken (e.g. "A National Network") on desktop */
  animation: heroRise .7s cubic-bezier(.16,1,.3,1) both;
}
@media (max-width: 700px) {
  .hero-title .line { white-space: normal; }   /* allow wrapping on small screens to avoid overflow */
}
.hero-title .line:nth-child(2) { animation-delay: .08s; }
.hero-title .highlight {
  color: var(--red);
  font-weight: 800;
  /* Upright, like the rest of the headline (owner, 2026-10-09: "remove the italics from National"). It was italic - but
     Oxanium has no italic, so the browser faked one and Chrome / Edge cut the top off its last letter. Never put
     font-style: italic on Oxanium text. */
  font-style: normal;
}

.hero-description {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 480px;
  margin: 0 0 36px;
  animation: heroRise .7s .16s cubic-bezier(.16,1,.3,1) both;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  animation: heroRise .7s .24s cubic-bezier(.16,1,.3,1) both;
}
.hero-buttons .btn .btn-chevron { transition: transform .2s ease; display: inline-block; }
.hero-buttons .btn:hover .btn-chevron { transform: translateX(3px); }
/* No text shadow on the buttons (owner, 2026-10-09: "Our Services ... no shadow, same as Send an Enquiry"). They inherited
   .hero-content's shadow, which is for words over the photo; on the solid white button it showed as a dark smudge round
   the navy text. The headline, description and stats keep it. */
.hero-buttons .btn { text-shadow: none; }

.hero-phone {
  font-family: var(--heading);
  color: rgba(255,255,255,.7);
  font-size: .875rem;
  letter-spacing: .3px;
  margin: 0 0 36px;
  animation: heroRise .7s .28s cubic-bezier(.16,1,.3,1) both;
}
.hero-phone a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.hero-phone a:hover { border-color: var(--red); color: var(--red); }

/* --- Stats baseline --- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 28px;
  max-width: 480px;
  animation: heroRise .7s .32s cubic-bezier(.16,1,.3,1) both;
}
.hero-stat {
  padding-right: 28px;
}
.hero-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.1); }
.hero-stat:not(:first-child) { padding-left: 28px; }
.hero-stat-value {
  font-family: var(--heading);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  font-family: var(--heading);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* === RIGHT: UK depot map card ===
   Solid card with its own dark blue + grid backdrop, sitting on top of the video. */
.hero-map-wrap {
  position: relative;
  animation: heroFade .9s .2s ease both;
  /* Wrap fills the full column (so the column outline shows correctly).
     The card inside is the one that's size-capped. */
}
.hero-map-card {
  position: relative;
  /* Card stays at a sane fixed max size so its aspect ratio can't drag the row taller than
     the hero cap on wide screens. On ultrawide, empty space appears around the card instead
     of the card stretching to fill the column. */
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  aspect-ratio: 64 / 100;
  background:
    radial-gradient(800px 600px at 50% 0%, rgba(237, 28, 36,.06), transparent 70%),
    linear-gradient(180deg, #142648, #0F1D33);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 22px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-map-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;                 /* sits below the count footer at the bottom of the card */
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-map-title {
  font-family: var(--heading);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}
.hero-map-live {
  font-family: var(--heading);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.hero-map-live::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ee06a;
  box-shadow: 0 0 0 4px rgba(46,224,106,.15);
  animation: heroLivePulse 2.4s ease-in-out infinite;
}

/* --- The map itself --- */
.hero-map {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-map .map-inner {
  position: relative;
  width: 92%;
}
.hero-map .map-svg {
  display: block;
  width: 100%;
  height: auto;
  color: rgba(255,255,255,.22);  /* outline tint on dark card */
  stroke-width: .4;
}
.hero-map .map-pin {
  position: absolute;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -100%);
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
}
.hero-map .map-pin.visible { opacity: 1; }

/* Newton Abbot HQ - bigger, green pin (matches the operational indicator), permanent label.
   Filter is scoped to the Lottie SVG only - the label keeps its navy/white styling and is
   never affected by the hue-rotate (which previously made it look brown/orange). */
.hero-map .map-pin#hero-pin-london {
  width: 50px; height: 50px;
  z-index: 20;                              /* always sits above the other pins */
}
.hero-map .map-pin#hero-pin-london > svg {
  filter: hue-rotate(140deg) saturate(1.2); /* green tint applied only to the pin graphic */
}
.hero-map .map-pin#hero-pin-london .map-pin-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px) scale(1);
}
.hero-map .map-pin-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.9);
  background: var(--navy);
  color: var(--white);
  font-family: var(--heading);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 10;
  border: 1px solid rgba(255,255,255,.12);
}
.hero-map .map-pin-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}
.hero-map .map-pin:hover, .hero-map .map-pin:focus { z-index: 10; }
.hero-map .map-pin:hover .map-pin-label,
.hero-map .map-pin:focus .map-pin-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px) scale(1);
}

.hero-map-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--heading);
  font-size: .75rem;
  color: rgba(255,255,255,.65);
}
.hero-map-footer .count {
  color: var(--white);
  font-weight: 700;
  font-size: .8125rem;
}
.hero-map-footer .count .unit { color: var(--red); margin-left: 2px; font-weight: 600; }

/* --- Animations --- */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroLivePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(46,224,106,.15); }
  50%      { box-shadow: 0 0 0 7px rgba(46,224,106,.05); }
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr; max-width: 100%; }
  .hero-stat { padding: 0 12px; }
  .hero-stat:not(:first-child) { padding-left: 12px; }
  .hero-stat:not(:last-child) { padding-right: 12px; }
  .hero-map-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content, .hero-title .line, .hero-description, .hero-buttons, .hero-phone, .hero-stats, .hero-map-wrap {
    animation: none !important;
  }
  .hero-map-live::before { animation: none !important; }
}

/* =============================================
   CLOSED-NETWORK SECTION - copy (40%) + interactive OpenStreetMap (60%)
   ============================================= */
.network-glance {
  position: relative;
  overflow: hidden;
  padding: 100px 0;          /* a touch larger than before */
  background: var(--white);  /* white background (was navy) */
}
.network-grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 52px;
  align-items: stretch;
}
/* Depot Map toggled off in the CMS: hiding .network-map-wrap removes the item but not
   its 60fr track, which left the section 60% empty. Added by app JS (see index.html). */
.network-grid.no-map { grid-template-columns: 1fr; }

/* --- Left 40%: closed-network pitch --- */
.network-copy { display: flex; flex-direction: column; }
.network-copy .section-label { margin-bottom: 18px; }
.network-copy-title {
  font-family: var(--heading);
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 16px;
}
/* "closed-loop": upright, like the rest of the heading (owner, 2026-10-09) - still red. Never italic on Oxanium (no real
   italic: the browser fakes one and clips the last letter - see .hero-title .highlight). */
.network-copy-title .highlight { color: var(--red); font-style: normal; }
.network-copy-lede {
  font-family: var(--heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--g700);
  margin: 0 0 16px;
}
.network-copy-body {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--g600);
  margin: 0 0 22px;
}
.network-benefits {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 0 0 26px;
}
.network-benefit { display: flex; gap: 12px; align-items: flex-start; }
.network-benefit-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 24px; height: 24px;
  padding: 5px;
  border-radius: 6px;
  background: rgba(237, 28, 36,.10);
  color: var(--red);
}
.network-benefit-title {
  display: block;
  font-family: var(--heading);
  font-weight: 700;
  font-size: .98rem;
  color: var(--navy);
}
.network-benefit-desc {
  display: block;
  margin-top: 2px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--g600);
}
.network-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  border-top: 1px solid var(--g200);
  padding-top: 20px;
  margin: 0 0 26px;
}
.network-stat { padding-right: 26px; }
.network-stat:not(:first-child) { padding-left: 26px; border-left: 1px solid var(--g200); }
.network-stat-value {
  font-family: var(--heading);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.network-stat-label {
  display: block;
  margin-top: 7px;
  font-family: var(--heading);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--g500);
}
.network-cta { align-self: flex-start; }
.network-cta .btn-chevron { transition: transform .2s ease; display: inline-block; }
.network-cta:hover .btn-chevron { transform: translateX(3px); }

/* --- Right 60%: Leaflet / OpenStreetMap --- */
.network-map-wrap { position: relative; min-height: 600px; isolation: isolate; }  /* scope the overlay z-indexes so they can't paint over the navbar */
/* Higher specificity than Leaflet's .leaflet-container so our absolute fill always wins. */
.network-map-wrap .network-map {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--g200);
  box-shadow: 0 24px 60px -30px rgba(11,22,40,.35);
  background: #e8edf2;
}
/* Standard OpenStreetMap tiles - no dimming / colour filter (clean, as imported). */
.network-map .leaflet-container { background: #e8edf2; font-family: var(--body); }
/* Tile seams (both maps). Leaflet 1.9.4 draws tiles with mix-blend-mode: plus-lighter to hide
   Chromium's sub-pixel gaps, but at a fractional device-pixel ratio (Windows display scaling of
   125% / 150%) neighbouring tiles overlap by a sub-pixel and the additive blend paints those
   overlaps as thin WHITE lines across the map. Blend normally instead, and make every tile half a
   pixel larger so neighbours overlap slightly - no gap, and no bright seam where they meet. */
/* (.leaflet-tile-pane adds specificity: leaflet.css loads after this file with the same selector.) */
.leaflet-container .leaflet-tile-pane img.leaflet-tile { mix-blend-mode: normal; }
.leaflet-container .leaflet-tile-container img.leaflet-tile { width: 256.5px !important; height: 256.5px !important; }
.depot-icon-wrap { background: transparent; border: 0; }

/* Depot markers - our depots (red) vs trusted partners (navy). Plain dots (owner, 2026-10-09): no glow (the soft
   coloured ring and blurred shadow went first), and no white outline either - just the solid dot. Sizes unchanged, so
   the pins still sit exactly where depotIcon() anchors them. */
.depot-marker {
  display: block;
  position: relative;
  width: 18px; height: 18px;
  background: var(--red);
  border: 0;
  border-radius: 50%;
}
.depot-marker.depot-partner {
  width: 12px; height: 12px; background: var(--navy);
}
.depot-marker.depot-hq {
  width: 26px; height: 26px;
}
/* Compact map (under 600px wide): smaller pins so the Midlands cluster stays readable.
   Sizes must match depotIcon() in index.html (own 13 / partner 9 / HQ 18). */
.depot-marker.depot-sm {
  width: 13px; height: 13px;
}
.depot-marker.depot-partner.depot-sm {
  width: 9px; height: 9px;
}
.depot-marker.depot-hq.depot-sm {
  width: 18px; height: 18px;
}
.depot-marker.depot-hq.depot-sm::after { width: 5px; height: 5px; }
/* (No pin uses .depot-hq since 2026-10-09 - Vallance and Irthlingborough now have the same pin as every depot. Kept so
   a larger head-office pin can come back with one class.) */
.depot-marker.depot-hq::after {   /* inner white dot marks the HQ */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
/* ---- Depot pills: the hover tooltip (and the tap popup on phones / small maps) ----
   Every pill is the same plain white pill with navy text - our depots by name, partners reading
   just 'Partner Depot' - and the Contact map's permanent 'Vallance Depot' label matches (owner,
   2026-09-25: all white, no dot). Leaflet's ::before arrow is hidden. The fade uses opacity only,
   because Leaflet positions tooltips with transform. */
.leaflet-tooltip.depot-tip {
  padding: 7px 14px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--g200);
  border-radius: 999px;
  font-family: var(--heading);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -10px rgba(11,22,40,.45), 0 2px 6px rgba(11,22,40,.14);
  animation: depotPillIn .16s ease-out;
}
.leaflet-tooltip.depot-tip::before { display: none; }
@keyframes depotPillIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .leaflet-tooltip.depot-tip { animation: none; } }

/* The same pill as a tap popup (touch devices and compact maps). */
.leaflet-popup.depot-pop .leaflet-popup-content-wrapper {
  padding: 0;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--g200);
  border-radius: 999px;
  box-shadow: 0 12px 26px -10px rgba(11,22,40,.45), 0 2px 6px rgba(11,22,40,.14);
}
.leaflet-popup.depot-pop .leaflet-popup-content {
  margin: 7px 14px;
  font-family: var(--heading);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}
.leaflet-popup.depot-pop .leaflet-popup-tip { background: #fff; box-shadow: none; }

/* Map key (marker colours) */
.network-map-key {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 1100;
  display: flex;
  gap: 14px;
  padding: 9px 13px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--g200);
  border-radius: 9px;
  box-shadow: 0 8px 24px -12px rgba(11,22,40,.30);
  pointer-events: none;
}
.network-map-key-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--g700);
}
.network-map-dot { width: 10px; height: 10px; border-radius: 50%; }
.network-map-dot.dot-own { background: var(--red); }       /* no glow ring - matches the pins (2026-10-09) */
.network-map-dot.dot-partner { background: var(--navy); }

/* ---- Map controls, both maps (owner, 2026-10-09) - built by vtMapControls() in index.html ----
   leaflet.css loads AFTER this file, so these selectors are deliberately more specific than Leaflet's own. */
/* Zoom: one white card with the site's line icons - no hover effect (owner, 2026-10-09), no shadow, no glow. */
.leaflet-container .leaflet-control-zoom.leaflet-bar {
  border: 1px solid var(--g200);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  background-clip: padding-box;
  box-shadow: none;
}
.leaflet-container .leaflet-control-zoom.leaflet-bar a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; line-height: 36px;
  text-indent: 0;
  color: var(--navy);
  background: #fff;
  border-bottom: 1px solid var(--g200);
  border-radius: 0;
}
.leaflet-container .leaflet-control-zoom.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-container .leaflet-control-zoom.leaflet-bar a svg { display: block; }
/* No hover effect - this also cancels Leaflet's own grey hover. */
.leaflet-container .leaflet-control-zoom.leaflet-bar a:hover,
.leaflet-container .leaflet-control-zoom.leaflet-bar a:focus { background: #fff; color: var(--navy); }
.leaflet-container .leaflet-control-zoom.leaflet-bar a:focus { outline: none; }
.leaflet-container .leaflet-control-zoom.leaflet-bar a:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.leaflet-container .leaflet-control-zoom.leaflet-bar a.leaflet-disabled,
.leaflet-container .leaflet-control-zoom.leaflet-bar a.leaflet-disabled:hover { background: #fff; color: var(--g300); cursor: default; }
/* The OpenStreetMap credit: shown when the map is first seen, then folded into the (i), which opens / closes it. */
/* The (i) (owner, 2026-10-09: "make it much nicer"): ONE white card, the same as the +/- card - 38px tall, 1px edge, 10px
   corners - holding a proper info icon (circle + i, the same line-icon family as the + and -). Folded it is a 38px square
   matching the +/-; opened, the credit slides out of it to the left, inside the same card, behind a hairline divider -
   one tidy piece instead of two separate boxes. No hover effect. */
.leaflet-container .map-attr {
  display: flex;
  align-items: stretch;
  height: 38px;
  background: #fff;
  background-clip: padding-box;
  border: 1px solid var(--g200);
  border-radius: 10px;
  overflow: hidden;
}
.leaflet-container .map-attr-text {
  display: block;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;   /* folded: also out of the keyboard's way */
  font-family: var(--body);
  font-size: .72rem;
  line-height: 36px;    /* one line, centred in the 36px inside the card (block, not flex - flex would eat the spaces) */
  color: var(--g600);
  white-space: nowrap;
  transition: max-width .3s ease, padding .3s ease, visibility 0s linear .3s;
}
.leaflet-container .map-attr.is-open .map-attr-text {
  max-width: 260px;
  padding: 0 12px 0 13px;
  visibility: visible;
  transition: max-width .3s ease, padding .3s ease, visibility 0s;
}
.leaflet-container .map-attr-text a { color: var(--navy); font-weight: 600; text-decoration: none; }
.leaflet-container .map-attr-text a:hover,
.leaflet-container .map-attr-text a:focus-visible { text-decoration: underline; }
.leaflet-container .map-attr-btn {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-left: 1px solid transparent;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .3s ease;
}
.leaflet-container .map-attr.is-open .map-attr-btn { border-left-color: var(--g200); }   /* the hairline, as in the +/- card */
.leaflet-container .map-attr-btn svg { display: block; }
.leaflet-container .map-attr-btn:focus { outline: none; }
.leaflet-container .map-attr-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }   /* keyboard only, drawn inside */
@media (prefers-reduced-motion: reduce) {
  .leaflet-container .map-attr-text, .leaflet-container .map-attr.is-open .map-attr-text,
  .leaflet-container .map-attr-btn { transition: none; }
}


/* =============================================
   BY THE NUMBERS - relocated fact-bars band
   ============================================= */
.facts-band {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
  background: linear-gradient(180deg, #0d1a30, var(--navy));
}
.facts-band-head { text-align: center; margin-bottom: 44px; }
.facts-band-head .section-label { justify-content: center; }
.facts-band-title {
  font-family: var(--heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--navy);   /* now sits on the light merged section, not the navy band */
}
/* "The scale behind every delivery" - stat cards in the same language as the Freightroute
   family section: white card, hairline border, soft shadow, red-tinted icon box. */
.facts-band .hero-facts-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: none;
}
.facts-band .hero-fact-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  margin: 0;
  padding: 26px 26px 28px;
  background: var(--white);
  border: 1px solid var(--g100);
  border-radius: 14px;
  box-shadow: 0 12px 32px -22px rgba(11,22,40,.45);
  color: var(--navy);
  transition: transform .25s ease, box-shadow .25s ease;
}
.facts-band .hero-fact-bar:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -24px rgba(11,22,40,.5);
}
.facts-band .hero-fact-bar-icon {
  width: 48px; height: 48px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(237, 28, 36,.10);
  margin-bottom: 18px;
}
.facts-band .hero-fact-bar-num {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.facts-band .hero-fact-bar-label {
  margin-top: 8px;
  font-family: var(--heading);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--red);
}
.facts-band .hero-fact-bar-desc {
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--g600);
  text-align: left;
  padding-top: 0;
  overflow: visible;
}
/* The description is always shown in card form - neutralise the old hover/preview reveal nudge. */
.facts-band .hero-fact-bar:hover .hero-fact-bar-desc,
.facts-band .hero-fact-bar.previewing .hero-fact-bar-desc {
  padding-top: 0;
}

/* --- Merged into the Freightroute section: stats share its background, below a divider. --- */
.freightroute-section .facts-band {
  background: none;
  overflow: visible;
  margin: 72px 0 0;          /* full container width now, like the other sections */
  padding: 56px 0 0;
  border-top: 1px solid var(--g200);
}

@media (max-width: 1024px) {
  .network-grid { grid-template-columns: 1fr; gap: 36px; }
  .network-map-wrap { min-height: 520px; }
}
@media (max-width: 768px) {
  .facts-band .hero-facts-bars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .network-glance { padding: 64px 0; }
  .facts-band { padding: 56px 0; }
  .facts-band .hero-facts-bars { grid-template-columns: 1fr; }
  .network-map-wrap { min-height: 420px; }
  .network-map-key { left: 10px; bottom: 10px; gap: 10px; padding: 7px 10px; }
}