/* =============================================
   RESPONSIVE - loads LAST in the cascade, so equal-specificity
   mobile rules here win over the per-file @media blocks in
   Hero.css / Sections.css / Contact-Footer.css.
   Every rule is mobile-scoped; desktop (>=1025px) is untouched.
   ============================================= */

/* =============================================
   TABLET (<=1024px)
   ============================================= */
/* =============================================
   DESKTOP NAV SIZES - FIVE general menus since the dropdown redesign (2026-10-07):
   Home | Network v | Services v | About Us v | Contact.  Seven plain links became five items,
   three of which carry a caret and open a panel; the panels are position:absolute and so add
   nothing to the row.
   These numbers are computed, not eyeballed: the real Oxanium 600 and Ersen advance widths plus
   GPOS kerning, run against this CSS (Build-Inputs/Nav-Width-Model.mjs, 2026-10-07 - it
   reproduces the shipped 1898px threshold to 0.00% and the three measured off-centre offsets to
   0.02px with no fitted constants). Default labels, the 376px wordmark, the 255px phone + Login
   pair, a 17px scrollbar:
   - icons + labels are 714px of row (was 963px). The row can sit exactly on the page centre from
     1700px, so the icons now show from 1700px instead of 1898px - a 198px win, and the first
     time a 1707px laptop (2560 at 150% scaling) sees them. Below 1700px they would be 8.5px
     right of centre, which is the complaint that produced the 1898px value on 2026-10-01.
     The tight-gap rule in Navbar.css MUST stay on the same number, or the row gets the icons
     with the wide gap and leans right anyway.
   - text-only links are 443px of row and overlap nothing down to 1220px, and sit exactly on the
     page centre down to 1347px - so the menu button takes over below 1300px instead of 1360px
     (the phone box still stays in the bar down to 1100px). Between 1300 and 1346px the 376px
     wordmark holds the row up to 20.5px right of centre; at the old 1360px hand-over it was
     47.3px, so this is better than what shipped, not a regression.
   - the <=1599px padding/gap rule is what lets the text row centre from 1347px (it hands the row
     56px). Leave it alone: without it the centring threshold would be ~1462px.
   Js/Main.js (fitNav) is the safety net if a menu heading is typed longer in FR8 Creator: from
   about 12 characters a heading costs the icons, and from about 14 the bar itself on a small
   laptop. It reacts to overlap only, never to off-centring.
   ============================================= */
/* .98: no gap at fractional widths (Windows display scaling, browser zoom) where neither query would match. */
@media (max-width: 1699.98px) {
  .nav-links .nav-icon { display: none; }
}
@media (max-width: 1599px) {
  .navbar .container { padding: 0 40px; gap: 24px; }
  .nav-links { gap: clamp(16px, 5vw - 50px, 28px); }
}

/* --- Nav: hand over to the hamburger sheet. Phone + Login stay in the bar beside it. --- */
@media (max-width: 1299.98px) {
  .nav-links { display: none; }
  .mobile-toggle { display: flex; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  /* With the links gone, space-between parked the phone/Login boxes mid-bar; keep them beside the menu button. */
  .nav-actions { margin-left: auto; }
}
@media (max-width: 1100px) {
  .nav-phone { display: none; }
  .navbar .container { gap: 12px; }
  .nav-actions { gap: 12px; }
}
/* fitNav (Js/Main.js) fallbacks, used only when the links measure too wide at the current
   width: drop the icons first, then hand over to the menu button. */
.navbar.nav-fit-noicons .nav-links .nav-icon { display: none; }
.navbar.nav-fit-menu .nav-links { display: none; }
.navbar.nav-fit-menu .mobile-toggle { display: flex; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
.navbar.nav-fit-menu .nav-actions { margin-left: auto; }

/* Centre the link row (icons + labels) on the PAGE. With flex it was centred in the gap between the 376px
   wordmark and the smaller phone/Login boxes, which put it ~61px right of centre at every width. Three columns
   instead: the two outer ones share the space equally, so the middle sits on the centre line; where the wordmark
   is wider than its half (below 1347px), the row stays as close to the centre as the wordmark allows rather than
   overlapping it. The menu-button layout (below 1300px / nav-fit-menu) stays flex. */
@media (min-width: 1300px) {
  .navbar:not(.nav-fit-menu) .container { display: grid; grid-template-columns: 1fr auto 1fr; }
  .navbar:not(.nav-fit-menu) .logo { justify-self: start; }
  .navbar:not(.nav-fit-menu) .nav-actions { justify-self: end; }
}

@media (max-width: 1024px) {
  .freightroute-intro,
  .about .container { grid-template-columns: 1fr; }
  .hero .container { gap: 40px; }
  .freightroute-intro { gap: 40px; }
  .freightroute-visual img { height: auto; }   /* natural ratio once the columns stack */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about .container { gap: 48px; }
  .contact .container { grid-template-columns: 1fr; gap: 44px; }
  /* (Footer: its in-between steps live at the end of Contact-Footer.css since the four-column version, 2026-10-13.) */

  /* The About photo's only child is an absolutely-positioned <img>; its height came
     ONLY from the 2-col grid's align-items:stretch. Once the grid is single-column
     there's nothing to stretch to, so it collapsed to ~0px. Neutralise the flex
     stretch chain and give the box an intrinsic aspect-ratio (the img's 120%/-10%
     bleed still feeds the scroll parallax). */
  .about-image, .about-image-stack { display: block; }
  /* aspect-ratio drives height from width; cap it so the wide 769-1024 tablet band (still
     on the 60px base gutter) doesn't blow the photo up to ~600px+. Phones compute well
     under 420px, so they're unaffected. */
  .about-image-main { flex: none; aspect-ratio: 4 / 3; min-height: 240px; max-height: 420px; }
  .about-content { padding-left: 0; margin-top: 0; }
}

/* =============================================
   MOBILE (<=768px) - primary phone breakpoint
   ============================================= */
@media (max-width: 768px) {
  :root { --nav: 70px; }

  /* The global container kept a 60px side gutter at every width (120px gone on a
     360px phone). Recover it - this is the single highest-impact mobile fix. */
  .container { padding: 0 24px; }
  /* Backstop: nothing should ever scroll the document sideways. */
  html, body { overflow-x: hidden; }

  /* Long unbreakable email/URL tokens must wrap, not widen the page. */
  .team-contact-email,
  .contact-item-content a,
  .contact-item-content p,
  .footer-column a { overflow-wrap: anywhere; word-break: break-word; }

  /* --- Nav --- */
  .nav-links, .nav-phone, .nav-login { display: none; }
  .mobile-toggle { display: flex; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .logo-text { font-size: 36px; }              /* wordmark in the 70px bar (desktop is 46px) */
  /* Audit 2026-10-09: at 36px the wordmark is 297px wide (VALLANCE in Ersen = 7.77em of letters, measured from
     Ersen.ttf, + .06em spacing x 8 = 8.25em), which left too little room on phones narrower than ~430px: the menu
     button was squeezed (390px), pushed into the edge (375px), half cut off (360px) or off the screen (320px). The bar
     now holds only the wordmark and the 44px menu button (the empty .nav-actions box and its 12px gap go), and the
     wordmark shrinks just enough to fit: 100vw - 2 x 24px padding - 12px gap - 44px button = 100vw - 104px.
     Still 36px from ~400px up; the plain 36px above stays for browsers without min(). */
  .logo-text { font-size: min(36px, calc((100vw - 104px) / 8.25)); }
  .nav-actions { display: none; }
  .mobile-toggle { flex: 0 0 44px; }

  /* --- Section vertical rhythm: trim large desktop padding on phones --- */
  .network-glance { padding: 64px 0; }
  .freightroute-section { padding: 56px 0; }
  .services, .about, .contact { padding: 52px 0; }

  /* --- Grids --- */
  .services-grid { grid-template-columns: 1fr; }
  .tech-grid, .tech-shots, .sustain-grid { grid-template-columns: 1fr; }
  .technology { padding: 52px 0; }
  .about-features { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fr-stats { grid-template-columns: repeat(2, 1fr); }   /* was a dead `.freightroute-stats` typo */
  /* The Freightroute link sat 68px below the stat cards (32px stat margin + 36px link margin) and read
     as orphaned at the foot of the section; it was also only a 22px-tall tap target. 33px above it now
     matches the 32px above the stats, and 11 + 22 + 11 = the site's 44px floor.
     2026-10-20 mobile spacing audit. */
  .fr-stats { margin-bottom: 0; }
  .freightroute-link { margin-top: 22px; padding: 11px 0; }
  .freightroute-link::after { bottom: 7px; }   /* keep the hover underline 4px under the text, not under the new padding */

  /* --- Hero copy: wrap + scale down across the 600-768 band; uniform scrim for legibility --- */
  .hero-title { font-size: clamp(2.25rem, 7vw, 3.5rem); }
  .hero-title .line { white-space: normal; }
  .hero-bg-overlay {
    background: linear-gradient(180deg,
      rgba(11,22,40,.86) 0%, rgba(11,22,40,.74) 55%, rgba(11,22,40,.6) 100%);
  }
  .hero-description { color: rgba(255,255,255,.86); }

  /* --- Maps: cap height so a finger can reach past them --- */
  .network-map-wrap { min-height: 460px; }
  .contact-map { min-height: 340px; }

  /* --- Contact stack. tel: and mailto: are the whole point of this section on a phone, so they get
     real 44px targets (they were 15px and 24px line boxes); the list gap tightens from 24px to pay
     for most of the extra height. 2026-10-20 mobile spacing audit. --- */
  .contact-details { gap: 18px; }
  /* Grow the HIT AREA, not the box (2026-10-20 mobile spacing audit, second pass). The first pass used
     min-height:44px + align-items:center, which made the box 44px tall and dropped the text ~10px, so
     the phone number and the email hung away from their TELEPHONE / EMAIL labels while the ADDRESS <p>
     (untouched) still sat tight under its label - three rows, two different label gaps.
     Padding plus a matching NEGATIVE margin gives the same 44px target on the ORIGINAL footprint:
     24px line + 2 x 10px padding = 44px tapped, 24px occupied, so the 6px label gap is unchanged.
     No min-height on purpose: where a long CMS address wraps to two lines the box is already 48px,
     min-height would not bind and the -10px would pull the text up into the label.
     display:flex (block-level) also makes the whole row width tappable, not just the text. */
  .contact-item-content a {
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: -10px 0;
  }
  /* Same technique on the card email, and the row gap goes back to its original 8px now that the
     email box no longer supplies that space itself. The first pass left ~11px of empty box under the
     email on top of the card's 14px padding, so all three cards were visibly bottom-heavy
     (~26px above the name against ~39px below the email). 22.4px line + 2 x 11px = 44.4px tapped,
     22.4px occupied, so the card is symmetric again. 2026-10-20 mobile spacing audit, second pass. */
  .team-contact { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 18px; }
  .team-contact-email { display: flex; align-items: center; padding: 11px 0; margin: -11px 0; }
  /* The Department Contacts hairline carried desktop air (52 + 36) into a 44px-padded phone section -
     about 100px of flat navy with a 1px line floating in it. Keep the break, lose half the hole.
     2026-10-20 mobile spacing audit. */
  .contact-team { margin-top: 36px; padding-top: 26px; }

  /* --- Footer (2026-10-13, four columns): the brand stacked (wordmark, address, Send an Enquiry), then Navigation |
     Explore side by side, then Services across with its links in the same two columns (the longest, "Timed & AM
     Deliveries", is 148px - it fits a half column down to 360px), then Contact across (the email needs 259px); real
     44px tap targets; the bottom bar stacked and centred --- */
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding: 40px 0 28px; }
  .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 24px; }
  .footer-cta { margin: 0; }
  .footer-services, .footer-contact { grid-column: 1 / -1; }
  .footer-column h3 { margin: 4px 0 10px; }
  .footer-column ul { gap: 0; }
  .footer-services ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .footer-column a { display: inline-block; padding: 10px 0; min-height: 44px; line-height: 24px; box-sizing: border-box; }
  .footer-contact li { align-items: center; }
  .footer-contact .footer-icon { margin-top: 0; }
  /* env() on the bottom padding (2026-10-20 mobile spacing audit): index.html sets viewport-fit=cover, so
     on a notched iPhone the last 34px of the page - including the bottom of the Back to top pill - sat
     under the home indicator. 28px is kept as the designed gap; env() adds 0 where there is no inset.
     The same pattern as the cookie banner below. */
  .footer-bottom { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "company" "legal" "top"; justify-items: center; text-align: center; row-gap: 10px; padding: 22px 0 calc(28px + env(safe-area-inset-bottom)); }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .footer-legal a, .footer-legal-placeholder { padding: 11px 14px; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  .footer-top { min-height: 44px; padding: 0 18px; }
  /* (The services-header label is already centred by Sections.css; do NOT blanket-centre
     .section-label here - that wrongly centres the left-aligned Network label.) */

  /* --- Cookie + floating UI: tap sizing, alignment, safe-area --- */
  /* gap 16 (was the base 24): the notice is one short line of copy above one small button on a phone,
     and 24px between them made the stacked sheet taller than it needs to be. 2026-10-20 mobile spacing audit. */
  .cookie-banner { flex-direction: column; text-align: center; gap: 16px; padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); }
  .cookie-buttons { width: 100%; justify-content: center; gap: 12px; }
  .cookie-btn { min-height: 44px; padding: 13px 20px; }
  .sticky-cta { bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; }
  .sticky-cta a { padding: 14px 22px; font-size: .75rem; min-height: 44px; box-sizing: border-box; }
  .back-to-top { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* The cookie banner is a tall stacked column on phones whose height varies with the copy,
     so rather than guess an offset, hide the floating controls while it's open. Main.js clears
     .cookie-banner-open on dismiss (accept OR decline) and both floats only appear after the
     user has scrolled well past the hero, so this is invisible in practice. */
  body.cookie-banner-open .sticky-cta,
  body.cookie-banner-open .back-to-top { display: none; }

  /* Closed off-canvas menu must leave the tab order / a11y tree (also kills phantom h-scroll). */
  .mobile-menu:not(.active) { visibility: hidden; pointer-events: none; }
}

/* =============================================
   HERO PHONE (<=600px)
   ============================================= */
@media (max-width: 600px) {
  /* Drop the double inset (20px margin + 40px pad) and the 720px min-height floor
     (which forced an over-tall hero in landscape / on short phones). */
  .hero { min-height: auto; }
  .hero-container { margin: 0; min-height: auto; }
  /* TWO classes on purpose (2026-10-20 mobile spacing audit): the `.container { padding: 0 18px }` /
     `{ padding: 0 14px }` SHORTHANDS further down this file (<=480 / <=360) are equally specific and
     come LATER, so the old one-class `.hero-container { padding-top/bottom }` measured 0 on every
     phone - no gap under the fixed white bar (the headline started on its edge at 320-390) and no
     room at the bottom, which is why the slideshow dots pill printed over the third stat.
     Longhand only here, so the `.hero .container` gutter rules below still own left/right.
     76px = the pill's 44px height + its 16px bottom offset + 16px clear above it. */
  .hero .hero-container { padding-top: 32px; padding-bottom: 76px; }
  .hero .container { padding-left: 20px; padding-right: 20px; }

  /* Phone type rhythm (2026-10-20 mobile spacing audit): tighter than desktop's 28/36 so the
     headline, lede, actions and facts read as one block instead of four loose pieces. */
  .hero-title { margin-bottom: 20px; }
  .hero-description { margin-bottom: 28px; }

  /* Buttons: clean full-width stack (previously only stacked at 480, leaving a ragged 481-600 row). */
  .hero-buttons { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; margin-bottom: 24px; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  /* .btn-outline-white carries a 2px border, so stacked it measured 60px against the primary's 56px -
     a visibly fatter white button under the red one. Take the border back out of the padding
     (14 + 24 + 14 + 4 = 56). 2026-10-20 mobile spacing audit. */
  .hero-buttons .btn-outline-white { padding-top: 14px; padding-bottom: 14px; }

  /* Stats: FULL-WIDTH rows, value left and label right, one hairline between (2026-10-20 mobile
     spacing audit). `.hero-content` is align-items:flex-start, so the old one-per-row grid
     shrink-wrapped to its widest stat (113px) and the rules were stubby stumps in a 292-394px
     column; the block also ate 252px of hero. As rows it is ~173px and the hairlines span the
     same width as the buttons. A very long CMS value/label pair simply wraps (flex-wrap). */
  .hero-stats { grid-template-columns: 1fr; gap: 0; width: 100%; max-width: 100%; padding-top: 20px; border-top-color: rgba(255,255,255,.16); }
  .hero-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 12px 0;
  }
  .hero-stat:not(:first-child) { padding-left: 0; }
  .hero-stat:not(:last-child) { border-right: 0; border-bottom: 0; padding-right: 0; }
  /* The divider sits on TOP of the following row, so a stat switched off in FR8 Creator
     (show_hero_stat_N sets display:none) can never leave a hairline dangling under the last one. */
  .hero-stat + .hero-stat { border-top: 1px solid rgba(255,255,255,.16); }
  .hero-stat-value { font-size: 1.5rem; margin-bottom: 0; }
  .hero-stat-label { color: rgba(255,255,255,.8); }

  /* Slideshow dots: a taller AND wider touch target on phones (the arrows went on 2026-10-16).
     24px wide was the only sub-44px control left in the hero; 30px takes the four-photo pill from
     136px to 154px, well inside its max-width. 2026-10-20 mobile spacing audit. */
  .hero-dot { width: 30px; height: 44px; }

  /* Network stats: even 3-up row (was content-width 3-col with borders -> overflow).
     Calmer value/label sizing across the whole phone range so the 3 columns sit at an
     even height (labels wrap consistently rather than raggedly in the 481-600 band). */
  /* Even columns for the stats SHOWN: one hidden in FR8 Creator used to leave an empty third column (audit 2026-10-09). */
  .network-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .network-stat { padding: 0 6px; }
  .network-stat:not(:first-child) { padding-left: 6px; }
  /* The 6px either side of the column divider also indented the FIRST value, so "11" sat 6px right
     of the heading, the body copy, the button and the hairline above it. 2026-10-20 mobile spacing audit. */
  .network-stat:first-child { padding-left: 0; }
  .network-stat-value { font-size: 1.45rem; }
  /* Back to the desktop .66rem (10.6px): .6rem was 9.6px, the smallest text on the page, and the
     three-column wrap it was shrunk for no longer applies (the third stat is hidden in the CMS).
     The reduced tracking stays - that is what keeps the label on one line. 2026-10-20 mobile spacing audit. */
  .network-stat-label { font-size: .66rem; letter-spacing: .5px; }
  /* Full width like the hero buttons: at content width the red bar filled the column at 320 but fell
     74px short at 430, straight above a full-bleed map. 2026-10-20 mobile spacing audit. */
  .network-cta { align-self: stretch; justify-content: center; text-align: center; }

  /* Map height on phones. */
  .network-map-wrap { min-height: 430px; }   /* tall enough for the UK to fill it; one-finger swipes still scroll the page */
}

/* =============================================
   SMALL MOBILE (<=480px)
   ============================================= */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero .container { padding-left: 18px; padding-right: 18px; }   /* keep hero copy aligned with sections */

  .freightroute-section, .services, .about, .contact { padding: 44px 0; }
  /* These three never got the <=480 trim, so the phone rhythm stepped 44 / 52 / 44 / 56 / 48 / 44 down
     the page (Technology kept its <=768 52px, Sustainability its <=860 56px and the enquiry card its
     <=768 48px). ONE value for every section - keep them on the same number as the line above.
     2026-10-20 mobile spacing audit. */
  .technology, .sustainability, .enquiry { padding: 44px 0; }
  .about-features { grid-template-columns: 1fr; }
  /* One per row now, so the 16px side padding (there to separate the desktop COLUMNS) pushed the six
     ticks 16px right of every other line in the section. Flush with the text column, and a tighter
     list: rows 53 -> 49px, gap 12 -> 10px. 2026-10-20 mobile spacing audit. */
  .about-features { gap: 10px; margin-top: 32px; }
  .about-feature { padding: 10px 0; gap: 12px; }

  /* Tighter type rhythm in the now-narrow column. */
  .freightroute-content p { line-height: 1.65; }
  .section-subtitle { line-height: 1.6; }
  .about-content > p[style] { line-height: 1.65 !important; }   /* beat the inline line-height:1.8 */
  .contact-info h2 { font-size: 2rem; }
  .footer-bottom { font-size: .875rem; }

  /* fr-stats: keep 2-up but stop '900,000' crowding; calmer labels. */
  .fr-stat-num { font-size: 1.35rem; }
  .fr-stat-label { font-size: .66rem; letter-spacing: .5px; }
  .fr-stat { padding: 14px 12px; }

  /* Service cards: reclaim text width, smaller icon column. */
  .service-card { padding: 24px 22px; grid-template-columns: 48px 1fr; gap: 0 16px; }
  .service-icon { width: 48px; height: 48px; }
  .service-icon svg { width: 24px; height: 24px; }
  .service-card p { line-height: 1.7; margin-top: 14px; }

  /* Network section small-screen polish. */
  .network-benefits { gap: 14px; }
  .network-benefit-desc { font-size: .92rem; line-height: 1.5; }
  /* The key is the only own-vs-partner legend now that the filter buttons are gone - keep it, smaller. */
  .network-map-key { left: 8px; bottom: 8px; gap: 10px; padding: 6px 9px; }
  .network-map-key-item { font-size: .64rem; gap: 6px; }
  .contact-map { min-height: 300px; }
  /* Narrow phones: the decorative tile was taking 68px (48 + 20) of a 292px row, which broke the email
     address inside its top-level domain. 44px + 14px hands 10px back to the text and matches the 44px
     link box the links now get. 2026-10-20 mobile spacing audit. */
  .contact-item { gap: 14px; }
  .contact-item-icon { width: 44px; height: 44px; }

  /* The long left-aligned Network eyebrow ('The Freightroute Closed Network') needs
     less tracking on a narrow phone so it doesn't crowd toward a second line. */
  .section-label { letter-spacing: 2px; gap: 8px; }

  /* Hero stat labels a touch larger now rows are full width. */
  .hero-stat-label { font-size: .75rem; letter-spacing: 1px; }

  /* Cookie buttons: stacked, easy targets. A centred pill rather than a full-width bar - there is only
     one button now ("OK"), and a two-letter word in a 292-342px red bar was a very heavy block.
     align-items is required: a flex COLUMN stretches its items, so width:auto alone would still fill.
     If a second button ever comes back they stack as before, both 160px and centred.
     2026-10-20 mobile spacing audit. */
  .cookie-buttons { flex-direction: column; align-items: center; }
  .cookie-btn { width: auto; min-width: 160px; }
}

/* =============================================
   VERY SMALL (<=360px)
   ============================================= */
@media (max-width: 360px) {
  .container { padding: 0 14px; }
  .hero .container { padding-left: 14px; padding-right: 14px; }
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 3rem); }
}

/* =============================================
   SHORT LANDSCAPE (rotated phones) - keyed on HEIGHT, not width
   The <=600px-WIDTH hero de-inset never fires on landscape phones (740-930px wide,
   ~360-430px tall), so the clamp(720px,100vh,1100px) floor left a ~2-screen-tall
   near-empty hero. Desktops/laptops are taller than 500px and never match.
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; }
  /* 84px at the bottom (was 32): room for the slideshow pill, centred along the bottom since 2026-10-16, so it can
     never sit on the hero's buttons or stats. */
  .hero-container { margin: 0; min-height: auto; }
  /* Two classes, like the <=600 block above (2026-10-20 mobile spacing audit): landscape phones are
     740-930px wide, so the `.container` padding SHORTHANDS at <=480 / <=360 do not reach this rule
     today - but a one-class selector here would lose to any future one, exactly as the portrait hero
     did. Written so it cannot break later. The 84px still reserves the slideshow pill's band. */
  .hero .hero-container { padding-top: 24px; padding-bottom: 84px; }
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
  .navbar, .sticky-cta, .back-to-top, .cookie-banner, .mobile-menu, .mobile-toggle, .btn, .contact-cta { display: none !important; }
  body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
  .hero { min-height: auto; padding: 40px 0; background: #fff !important; color: #000; }
  .hero-title, .hero-description, .section-title { color: #000; }
  .footer { background: #fff !important; color: #000; padding: 20px 0; border-top: 0; }
  .footer-cta, .footer-top { display: none !important; }   /* buttons mean nothing on paper (2026-10-13) */
}

/* =============================================
   PREMIUM MOBILE POLISH (v141) - additive elevation layer.
   Everything here is scoped to small screens / touch input, so desktop + mouse
   are completely untouched. Built on top of the existing mobile rules above.
   ============================================= */

/* --- Full-bleed hero on portrait phones: let the fleet imagery fill the screen.
   svh = small viewport height (excludes the address bar), so there's no 100vh "jump"
   on iOS Safari / Android Chrome. Browsers without svh keep the de-floored auto height
   set at <=600px above. Copy stays LEFT-aligned + vertically centred (align-items). --- */
@media (max-width: 600px) and (orientation: portrait) {
  .hero { min-height: 88svh; }
}

@media (max-width: 768px) {
  /* Notch / safe-area hardening for the fixed bar (landscape on notched iPhones). */
  .navbar .container {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }

  /* Heading + lede read a touch tighter and more premium in a narrow column. */
  .hero-description { font-size: 1.02rem; line-height: 1.6; }
  .section-title { letter-spacing: -.022em; }

  /* --- Mobile menu: full-screen sheet -> app-style rows, safe-area aware,
     no scroll-chaining onto the page behind it. --- */
  .mobile-menu {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 26px max(28px, env(safe-area-inset-right))
                  max(28px, env(safe-area-inset-bottom))
                  max(28px, env(safe-area-inset-left));
  }
  /* App-style nav rows: hairline divider + a chevron affordance on the right. */
  .mobile-menu-link:not(.btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 6px;
    font-size: 1.06rem;
    border-radius: 0;
    border-bottom: 1px solid var(--g100);
  }
  .mobile-menu-link:not(.btn)::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 2px solid var(--g300);
    border-bottom: 2px solid var(--g300);
    transform: rotate(-45deg);
    transition: border-color .2s ease, transform .2s ease;
  }
  .mobile-menu-link:not(.btn):active { background: var(--g100); color: var(--red); }
  .mobile-menu-link:not(.btn):active::after { border-color: var(--red); transform: rotate(-45deg) translate(2px, 2px); }

  /* The accordion trigger gets the same app row. Its ROTATING chevron is NOT here: it lives in
     Navbar.css beside .mobile-group-toggle, because the sheet is in use from 1299.98px down
     (the block at the top of this file), and a chevron that only existed below 768px left the
     three disclosure headings (Network / Services / About Us) looking exactly like the plain
     Home and Contact links on iPad landscape and in any narrowed desktop window. Only the
     phone-sized row metrics belong in this block. */
  .mobile-group-toggle {
    padding: 19px 6px;
    font-size: 1.06rem;
    border-radius: 0;
    border-bottom: 1px solid var(--g100);
  }
  .mobile-group-toggle:active { background: var(--g100); color: var(--red); }
  /* Row padding drops to 6px here, so the 26px indent has to be re-stated. */
  .mobile-menu .mobile-sub-link { padding-left: 32px; }

  /* Prominent full-width "Get a Quote" CTA. */
  .mobile-menu .btn.mobile-menu-link {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 22px;
    padding: 18px;
    font-size: .9rem;
  }
  /* Phone row -> a calm pill that anchors the bottom of the sheet (margin-top:auto
     absorbs the free space above it in the flex column, like Navbar.css intended). */
  .mobile-menu-phone {
    margin-top: auto;
    border-top: none;
    border-radius: 10px;
    background: var(--off-white);
    padding: 18px;
  }

  /* Staggered entrance: each row slides + fades in just after the sheet opens.
     RE-KEYED 2026-10-07: :nth-child counts ALL siblings, and the three accordion groups are
     <div>s, so the old 1-9 sequence keyed to "> a" no longer lines up. The eight direct
     children are now: Home, Network, Services, About Us, Contact, Get a Quote, Login (a
     <button>, deliberately never staggered), the phone row. Sub-links inside a panel get NO
     entrance stagger - they animate with the accordion instead. */
  .mobile-menu > a,
  .mobile-menu > .mobile-group {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1), background .2s ease, color .2s ease;
  }
  .mobile-menu.active > a,
  .mobile-menu.active > .mobile-group { opacity: 1; transform: translateX(0); }
  .mobile-menu.active > a:nth-child(1),
  .mobile-menu.active > .mobile-group:nth-child(1) { transition-delay: .05s; }
  .mobile-menu.active > a:nth-child(2),
  .mobile-menu.active > .mobile-group:nth-child(2) { transition-delay: .10s; }
  .mobile-menu.active > a:nth-child(3),
  .mobile-menu.active > .mobile-group:nth-child(3) { transition-delay: .15s; }
  .mobile-menu.active > a:nth-child(4),
  .mobile-menu.active > .mobile-group:nth-child(4) { transition-delay: .20s; }
  .mobile-menu.active > a:nth-child(5),
  .mobile-menu.active > .mobile-group:nth-child(5) { transition-delay: .25s; }
  .mobile-menu.active > a:nth-child(6),
  .mobile-menu.active > .mobile-group:nth-child(6) { transition-delay: .30s; }
  .mobile-menu.active > a:nth-child(7),
  .mobile-menu.active > .mobile-group:nth-child(7) { transition-delay: .34s; }
  .mobile-menu.active > a:nth-child(8),
  .mobile-menu.active > .mobile-group:nth-child(8) { transition-delay: .38s; }
  .mobile-menu.active > a:nth-child(n+9),
  .mobile-menu.active > .mobile-group:nth-child(n+9) { transition-delay: .42s; }
}

/* --- Touch devices only: real press feedback + kill hover-lifts that "stick" after a
   tap. Desktop / mouse (hover: hover) is completely unaffected by this block. --- */
@media (hover: none) and (pointer: coarse) {
  /* "button" covers the dropdown triggers (.nav-trigger) and the sheet's accordion triggers
     (.mobile-group-toggle) - do not narrow this list without naming them explicitly. */
  .btn, a, button, summary { touch-action: manipulation; }

  /* These :hover lifts get stuck on touch screens after a tap - neutralise them... */
  .btn-primary:hover, .btn-secondary:hover, .btn-outline-white:hover,
  .service-card:hover, .testimonial-card:hover, .news-card:hover,
  .freightroute-highlight:hover, .accreditation-tile:hover, .tech-card:hover, .sustain-card:hover,
  .facts-band .hero-fact-bar:hover, .team-contact:hover,
  .sticky-cta a:hover, .back-to-top:hover { transform: none; }

  /* ...and replace them with a crisp press. */
  .btn:active { transform: scale(.97); transition-duration: .08s; }
  /* The open-menu entrance rule (.mobile-menu.active > a) pins transform on the in-menu
     CTA, so out-specify it here so the Get-a-Quote button presses like the others. */
  .mobile-menu.active > a.btn:active { transform: scale(.97); }
  .service-card:active, .testimonial-card:active, .news-card:active,
  .freightroute-highlight:active, .accreditation-tile:active, .tech-card:active,
  .facts-band .hero-fact-bar:active {
    transform: scale(.985);
    transition: transform .12s ease;
  }
  .nav-links > li > a:active, .nav-links .nav-trigger:active, .nav-panel a:active,
  .mobile-menu-phone:active,
  .footer-column a:active, .footer-legal a:active, .footer-top:active,
  .freightroute-link:active, .news-card-link:active, .network-cta:active { opacity: .6; }
  .faq-question:active { background: var(--g100); }
  /* Hero slideshow dots: */
  .hero-dot:not(.is-active):hover::before { background: rgba(255,255,255,.45); }   /* no lighter dot "stuck" after a tap */
  /* (The map's +/- and (i) have no hover or press colour at all since 2026-10-09 - nothing to undo here.) */
}

/* Reduced-motion users: no menu stagger, no press scaling. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu > a,
  .mobile-menu > .mobile-group { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================
   MOBILE SPACING AUDIT 2026-10-20 - the fixes that have to beat an earlier rule in this
   same file, so they must stay LAST. Everything here is phone-scoped (<=768px or narrower);
   desktop and tablet above 768px are untouched.
   ============================================= */

/* The headline scales with the phone instead of sitting on its 36px floor from 375 all the way to
   430 (line 146's 7vw never reaches the floor on any phone). The min-width guard keeps <=360 on its
   own clamp and leaves the 601-768 band exactly as it was.
   9vw = 33.8px at 375 (floor still wins, so 375/390 do not move), 37.3 at 414, 38.7 at 430, capped
   at 40px. The title wraps rather than clips, so a longer CMS line only ever grows taller. */
@media (min-width: 361px) and (max-width: 600px) {
  .hero-title { font-size: clamp(2.25rem, 9vw, 2.5rem); }
}

@media (max-width: 768px) {
  /* About, below about 348px wide: the photo's `aspect-ratio: 4/3` plus its `min-height: 240px`
     (line 97) transferred a 320px MINIMUM WIDTH into the single-column grid track, so at 320 the
     photo and every line of text were drawn 320px wide inside a 292px container and clipped on the
     right ("Newton Abbo", "delivere"). Both lines are needed: min-width:0 removes the automatic
     minimum from the grid items, min-height:0 removes the source of it. The ratio alone still sizes
     the photo from its width, so 361-768 is unchanged (the floor never bound there). */
  .about .container > * { min-width: 0; }
  .about-image-main { min-height: 0; }

  /* Stacked cards: 14px (Technology) / 16px (Sustainability) between full-width cards was LESS than
     the cards' own padding, so they read as one block - worst on the dark Technology boxes, which
     looked like a single navy slab with hairlines across it. 24px is the gap the Services stack
     right above already uses, so all three card stacks now share one number. */
  .tech-grid { gap: 24px; }
  .sustain-grid { gap: 24px; }

  /* The round "Read more" openers: 44px on touch, like every other control on the site. The whole
     card is the real tap area (the button's ::after covers it), but the visible control should match.
     The 6px the circle grows comes off its top margin, so the cards keep their height. */
  .tech-more, .sustain-more { width: 44px; height: 44px; margin-top: 14px; }

  /* Fr8Tracker: a 56px inner gap was wider than the section's own padding on phones, so the block
     looked as if it had come loose from the section it belongs to. */
  .tech-shots-wrap { margin-top: 44px; }

  /* Enquiry: the custom dropdown's rows were ~42px tall on a touch screen (13 + 21 + 13 = 47px now).
     Six rows at 47 + 12 still fit the panel's 340px cap without scrolling. */
  .cs-option { padding: 13px 12px; }

  /* --- One left edge on phones. The fixed bar kept 24px at every width (line 337) while the page
     content drops to 18px at <=480 and 14px at <=360, and the open menu sheet's rows started at 34px
     (28px sheet padding + 6px row padding) - three different left edges on one screen, with the
     wordmark sitting directly above the hero headline. The sheet comes to the page gutter and the
     rows lose their 6px inset; the bar follows the gutter in the two blocks below.
     MUST stay after the premium block above (same specificity, later wins) and after its
     `.mobile-menu .mobile-sub-link` rule, which is why the 26px indent is re-stated here. --- */
  .mobile-menu {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .mobile-menu-link:not(.btn),
  .mobile-group-toggle { padding-left: 0; padding-right: 0; }
  .mobile-menu .mobile-sub-link { padding-left: 26px; }
}

@media (max-width: 480px) {
  .navbar .container {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .mobile-menu {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

@media (max-width: 360px) {
  .navbar .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .mobile-menu {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  /* Contact at 320: the email column is 320 - 28 gutters - 44 icon - 14 gap = 234px, and the address
     needs 241px at 15px, so it broke inside its own top-level domain and stranded a single "k" on a
     line of its own. One step down (15 -> 14px) measures ~225px, a comfortable 9px inside the column,
     and 14px is still well above the site's small-text floor. A longer CMS address still wraps rather
     than clips (overflow-wrap: anywhere, line 117). Must sit here, after the <=768 rule above.
     2026-10-20 mobile spacing audit, second pass. */
  .contact-item-content a { font-size: .875rem; }
}