/* M1 Traffic — responsive, mobile-first stylesheet (2026 rebuild)
   Replaces: styles/main.css, mainslider, clock.css, cookiecuttr.css cruft.
   Single responsive column. No framework, no jQuery. */

:root{
  --brand:#0058a8;        /* UK motorway-sign blue */
  --brand-dark:#003f7d;
  --accent:#ffd200;       /* sign yellow */
  --ink:#1a1a1a;
  --muted:#5b6670;
  --line:#e2e6e9;
  --bg:#ffffff;
  --bg-soft:#f5f7f8;
  --maxw:1000px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg-soft);
}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.site-header img.logo{height:44px;width:auto}
.tagline{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:520px){.tagline{display:none}}

/* ---------- Nav (sticky top menu) ---------- */
.site-nav{background:var(--brand);position:sticky;top:0;z-index:200;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.site-nav ul{max-width:var(--maxw);margin:0 auto;padding:0 8px;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end}
.site-nav li{margin:0}
.site-nav a{display:block;color:#fff;padding:13px 18px;font-weight:600;font-size:1rem;text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--brand-dark);text-decoration:none}
.nav-short{display:none}
@media (max-width:560px){
  /* one line, short labels, evenly spread (fits 5 items) */
  .nav-full{display:none}
  .nav-short{display:inline}
  .site-nav ul{padding:0;flex-wrap:nowrap;justify-content:space-between}
  .site-nav a{padding:11px 6px;font-size:.8rem;white-space:nowrap}
}
@media (max-width:360px){
  .site-nav a{padding:10px 4px;font-size:.72rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:#00305c}
.hero picture{display:block}
.hero img{display:block;width:100%;height:auto;object-fit:cover;max-height:300px}
.hero .hero-cap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));color:#fff}
.hero .hero-cap h1,.hero .hero-cap .hero-cap__t{margin:0;font-size:1.5rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (max-width:520px){.hero .hero-cap h1,.hero .hero-cap .hero-cap__t{font-size:1.15rem}}

/* ---------- Main ---------- */
main{background:var(--bg)}
main .wrap{padding-top:22px;padding-bottom:32px}
main h1{font-size:1.7rem;line-height:1.25;margin:.2em 0 .5em}
main h2{font-size:1.3rem;margin:1.4em 0 .4em}
main h3{font-size:1.12rem;margin:1.2em 0 .3em}
main h4{font-size:1rem;margin:1.1em 0 .2em}
main p{margin:0 0 1em}
main ul{margin:0 0 1em;padding-left:1.3em}
main li{margin:.2em 0}
/* body images: give them breathing room so text/headings never touch them */
main img{margin:0 14px 12px 0;vertical-align:middle}
main h1 img,main h2 img,main h3 img{vertical-align:middle}
/* respect intended inline floats (e.g. the UKTN image) — float + padding + size cap; stack on mobile */
main img[style*="float: right"],main img[style*="float:right"]{float:right;margin:4px 0 12px 18px;max-width:45%;height:auto}
main img[style*="float: left"],main img[style*="float:left"]{float:left;margin:4px 18px 12px 0;max-width:45%;height:auto}
@media (max-width:520px){main img[style*="float"]{float:none !important;display:block;margin:0 auto 14px;max-width:100%}}
main iframe{max-width:100%}
.m1-sign{width:70px;height:35px}

/* Related box (folded-in former sidebar) */
.related{margin-top:28px;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px}
.related h3:first-child{margin-top:0}

/* ---------- Ad slots (TEST placeholders — fixed, tidy, never dominate) ---------- */
.ad-slot{margin:18px auto;height:90px;max-width:728px;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f2f2f2 10px,#f2f2f2 20px);
  border:1px dashed #cfd6da;border-radius:8px}
.ad-slot__label{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#9aa4ac}
/* when real AdSense goes live: collapse any unfilled unit so no empty gap */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}

/* ---------- News (RTN engine injects between markers) ---------- */
#column_l_trafficnews{margin:14px 0}
#column_l_trafficnews > div > *{margin-left:auto !important;margin-right:auto !important}
.warnbar{display:block;max-width:100%;height:auto;margin:8px auto}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand-dark);color:#cfe0f2;font-size:.92rem}
.site-footer .wrap{padding-top:24px;padding-bottom:28px;text-align:center}
.site-footer a{color:#fff}
.site-footer nav{margin-bottom:12px;line-height:2}
.site-footer .social img{height:36px;width:auto;margin-right:6px;vertical-align:middle}
.site-footer .fine{color:#9db8d6;font-size:.85rem;margin-top:10px}

/* ---------- Vertical M1 junction map ---------- */
.m1map{max-width:620px;margin:20px auto;font-size:.98rem}
.m1map__end{text-align:center;font-weight:600;margin:0;padding:12px;border-radius:8px;
  background:var(--brand);color:#fff}
.m1map__end--bottom{margin-top:0}
.m1map__dir{display:inline-block;font-weight:800;letter-spacing:.06em;margin-right:8px}
.m1map__list{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
/* the motorway line */
.m1map__list::before{content:"";position:absolute;left:31px;top:0;bottom:0;width:6px;
  background:var(--brand);border-radius:3px}
.m1map__jn{position:relative;display:flex;align-items:center;gap:12px;
  padding:9px 0 9px 0;min-height:44px}
.m1map__badge{position:relative;z-index:1;flex:0 0 auto;width:46px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:.82rem;
  border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 2px var(--brand)}
.m1map__info{display:flex;flex-direction:column;line-height:1.3}
.m1map__road{font-weight:700;color:var(--brand-dark)}
.m1map__place{color:var(--muted);font-size:.9rem}
.m1map__note{margin:14px 0 0;font-size:.85rem;color:var(--muted);text-align:center}

/* ---------- Scrolling news ticker (blue band under hero) ---------- */
.ticker{background:var(--brand);color:#fff;overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.ticker__track{display:inline-flex;will-change:transform;
  animation:ticker 28s linear infinite}
.ticker__item{padding:10px 45px;font-weight:600;font-size:.98rem;line-height:1.3}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* page-title M1 sign (sits inline next to the h1) */
.pagesign{height:40px;width:auto;vertical-align:middle;margin:0 12px 4px 0 !important;float:none !important;display:inline !important}
/* footer FREE line */
.site-footer .freeline{font-weight:700;color:#fff;margin:0 0 8px}


/* ############################################################################
   PORTED FROM m25traffic.co.uk/assets/site.css ON 29/08/2026.
   Three blocks, verbatim except the plate image path: dropdown sub-navigation
   (including JC's 15/08 rule that submenus are not rendered on phones), the
   hero crop box and brand-plate overlay, and the live news ticker.
   JC's own note in that file: "the brand plate overlaid in CSS, never baked
   into the photo." The M60 plate is 640x116 - the shape that block was
   written for - so the sizing is used as-is rather than re-derived.
   ############################################################################ */
.site-nav li.has-sub{position:relative}
.site-nav li.has-sub>a::after{content:"";display:inline-block;margin-left:7px;
  border:5px solid transparent;border-top-color:currentColor;vertical-align:2px}
.site-nav .subnav{position:absolute;top:100%;left:0;min-width:230px;margin:0;padding:6px 0;
  list-style:none;display:none;flex-direction:column;background:var(--brand-dark);
  box-shadow:0 6px 16px rgba(0,0,0,.28);border-radius:0 0 6px 6px;z-index:250}
.site-nav li.has-sub:hover>.subnav,
.site-nav li.has-sub:focus-within>.subnav{display:flex}
.site-nav .subnav a{padding:11px 18px;font-weight:500;white-space:nowrap}
.site-nav .subnav a:hover,.site-nav .subnav a:focus{background:#00305c;text-decoration:none}

/* MOBILE: no hover, no floating panel. The group expands in flow so it
   is tappable and scannable - NOT one long endless dropdown. */
@media (max-width:760px){
  .site-nav ul{justify-content:center}
  .site-nav li.has-sub{position:static}
  .site-nav .subnav{position:static;min-width:0;display:flex;flex-direction:row;
    flex-wrap:wrap;justify-content:center;background:var(--brand-dark);
    box-shadow:none;border-radius:0;width:100%;padding:2px 0}
  .site-nav .subnav a{padding:10px 12px;font-size:.92rem}
  .site-nav li.has-sub>a::after{display:none}
}

/* ============================================================================
   MOBILE NAV - RECLAIM THE FIRST SCREEN (15/08/2026, JC: "menu on mobile
   takes up too much space")
   ROOT CAUSE: the <=760px block above sets .subnav{display:flex} with NO
   hover/focus condition, so on a phone every sub-link is PERMANENTLY EXPANDED
   inside the nav - a large share of the first screen, above the hero, before
   the visitor sees a word of traffic news.
   FIX: on phones the submenu is not rendered at all. "Services" and "Maps" stay
   normal links to their hub pages, which list everything - and the footer lists
   them too. Nothing becomes unreachable; the nav stops shouting.
   ⭐ This is the 10-second window: on mobile (~77% of revenue) the nav was
   spending it on itself.
   ============================================================================ */
@media (max-width:760px){
  .site-nav .subnav{display:none !important}
  .site-nav li.has-sub:hover>.subnav,
  .site-nav li.has-sub:focus-within>.subnav{display:none !important}
  /* the caret implied a dropdown that no longer opens here */
  .site-nav li.has-sub>a::after{display:none}
  /* tighter bar: less chrome, same tap target (>=44px high) */
  .site-nav a{padding:12px 10px}
}


.hero img{display:block;width:100%;aspect-ratio:16/5;height:auto;
  max-height:min(300px,42vh);object-fit:cover;object-position:center center}
@media (max-width:520px){.hero img{aspect-ratio:16/7}}
.hero::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  top:10px; right:14px;
  width:min(30%,260px);
  aspect-ratio:640/116;
  background-image:url(/images/m60-plate.webp);
  background-position:right top;
}
.hero .hero-cap{z-index:3}
@media (max-width:520px){.hero::after{width:min(46%,190px); top:7px; right:8px}}
@media (max-width:360px){.hero::after{width:min(52%,160px)}}

/* NAV FIT - the mobile bar was authored for 5 items and now carries 6.
   1px less padding buys 12px; overflow-x means the NAV may scroll but the PAGE
   never does, however many items are added later. */
@media (max-width:560px){
  .site-nav ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-nav ul::-webkit-scrollbar{display:none}
  .site-nav a{padding:11px 5px}
}

/* ---------- Live news ticker ---------- */
/* ============================================================================
   LIVE NEWS TICKER (.nt) — ABOVE THE MENU   (15/08/2026, JC spec)
   A scrolling headline strip between the site header and the main nav: three
   latest incidents, three active roadworks, three planned. Darker blue than the
   nav so it reads as a separate live band rather than part of the menu.
   ⚠ Every entry carries its REPORTED TIME IN FRONT. An undated headline implies
   "now", which we cannot know.
   ⚠ Renders nothing at all when there is no news — see NewsTicker.cs.
   ============================================================================ */
.nt{
  background:#00305c;               /* a shade darker than --brand (#0058a8) */
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:2px solid var(--accent);
}
.nt__track{display:inline-flex;will-change:transform;animation:ntscroll 70s linear infinite}
.nt:hover .nt__track,
.nt:focus-within .nt__track{animation-play-state:paused}
@keyframes ntscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.nt__item{display:inline-flex;align-items:baseline;gap:.5rem;
  padding:8px 26px;font-size:.9rem;line-height:1.35;
  border-right:1px solid rgba(255,255,255,.18)}

/* ⭐ 17/08/2026 (JC): TWO PILLS, THEN THE WORDS, THEN THE TIME.
   The strip is narrow. One long tag ("LIVE Roadworks") ate the width the summary
   needs, so LIVE and the CATEGORY are now separate pills:
     [ LIVE ]  [ Incident ]  summary text …  14:32
   LIVE is one fixed red so the eye locks onto it without reading; the category
   pill carries its own colour, matching the cards and section headers.
   ⚠ Two different reds sitting side by side would read as one blob, so the
   INCIDENT pill is inverted (white pill, red text) against the solid red LIVE. */
.nt__live{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;
  background:#d62828;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}

/* Category pill: colour carries the state, exactly as on the map template. */
.nt__tag{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;color:#fff}
.nt__item--inc .nt__tag{background:#fff;color:#a51f1f}  /* incident  — inverted red */
.nt__item--act .nt__tag{background:#f0a500;color:#241a05} /* roadworks — amber      */
.nt__item--pln .nt__tag{background:#2d6ca8;color:#fff}  /* planned   — blue         */

/* The reported time — now the LAST thing in every entry. It is what proves the
   headline is current, so it stays prominent, but it no longer delays the words. */
.nt__time{font-weight:700;font-variant-numeric:tabular-nums;color:#ffd54a;flex:0 0 auto}
.nt__time::before{content:"·";color:rgba(255,255,255,.45);margin-right:.5rem}

.nt__txt{color:#fff;font-weight:500}
.nt__item--all{border-right:0}
.nt__item--all a{color:#ffd54a;font-weight:700;text-decoration:underline}

/* Mobile: mobile is ~77% of revenue, so the strip must not shout. Slightly
   smaller, tighter, and it still scrolls. */
@media (max-width:560px){
  .nt__item{padding:7px 16px;font-size:.82rem;gap:.4rem}
  .nt__tag,.nt__live{font-size:.62rem;padding:1px 5px}
}
/* Anyone who has asked for less motion gets a static, readable strip instead of
   a moving one — the headlines still show, they simply do not scroll. */
/* ⭐ CHANGED 17/08/2026 (JC): THE NEWS TICKER NOW SCROLLS ON EVERY DEVICE AND BROWSER.
   It used to sit inside @media (prefers-reduced-motion:reduce) with animation:none.
   🛑 WHY THAT WAS WRONG - not the accessibility intent, the INCONSISTENCY:
   the FOOTER marketing strip (.ticker__track) was never gated, so on any machine
   with Windows "Animation effects" off, the UNIMPORTANT strip slid and the LIVE
   NEWS strip froze. Exactly backwards, and it made the page look broken while
   telling drivers it was live. JC spotted it by asking why one moved and not the
   other. Measured 17/08: no-preference -> translateX -63 to -292 in 4s; reduce ->
   animation-name:none, no movement at all.
   ⚠ SAME SETTING, SAME SITE, EARLIER LESSON: see the .cone note above - that
   setting is common on Windows and had already made the footer cones vanish.
   ☐ OPEN, JC's call: content that auto-moves for more than 5 seconds should have a
   way to stop it. It pauses on HOVER, which does nothing on a phone - and mobile is
   ~77% of revenue. A visible pause control would make this more accessible than the
   old gate ever was, because the gate only helped people who had set the flag and
   left everyone else with motion they could not stop. NOT built - flagged once. */
@media (prefers-reduced-motion:reduce){
  /* .nt__track deliberately NOT listed here any more - see the note above. */
  .ticker__track,.nt__track{animation-duration:120s}   /* gentler, not stopped */
}

/* Ticker now sits between the hero and the status band (JC, 15/08). It no
   longer butts against the nav, so the top border returns and the bottom one
   goes — the status band immediately below supplies its own top rule. */
.nt{border-top:2px solid var(--accent);border-bottom:0}

/* Site-news strip — RELOCATED 15/08/2026 (JC) to sit between the body and the
   footer, and recoloured to match the live news ticker. Two scrolling strips in
   one eyeful competed; separated, each has its own job:
     · .nt   (under the hero) = LIVE traffic headlines
     · .ticker (above footer) = OUR site messages
   Same darker blue as .nt, keeping the yellow rules top and bottom. */
.ticker{background:#00305c;
  border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}


/* PORTED VERBATIM FROM m25traffic.co.uk/assets/site.css, 29/08/2026,
   including JC's measured note on why the badge sits OUTSIDE the heading. */
/* ============================================================================
   ROAD BADGE — the blue motorway-sign block that sits in front of a page heading.
   JC, 23/08/2026: "the blue rectangle is a quick visual motorway-sign type image
   ... immediately tunes to the visitor's brain 'yes it looks like this is a
   motorway site' - and hence reduces bounce rate."
   Same argument as the hero: DENSITY CARRIES SCOPE. Judged on what it signals in
   one second, not on legibility.

   ⭐ TEXT, NOT AN IMAGE. It renders identically at any size, needs no file, costs
   no request, and the road number comes from the markup - so one rule serves every
   site in the estate and there is no per-road GIF to forget to make.
   ⚠ RECONSTRUCTED FROM A SCREENSHOT OF M5, not copied from M5's stylesheet. The
   blue is sampled exactly (#0058a8, which is already --brand). If M5's own CSS is
   to hand, diff it against this and take M5's numbers - matching the estate matters
   more than my reconstruction being close.
   ============================================================================ */
.roadbadge{
  display:inline-block; vertical-align:middle;
  background:var(--brand); color:#fff;
  font-weight:800; font-size:.95em; line-height:1;
  padding:.34em .62em; margin:0 .55em .12em 0;
  border:2px solid #fff; border-radius:7px;
  box-shadow:0 0 0 2px var(--brand);   /* blue outside the white keyline, as on a real sign */
  letter-spacing:.01em;
}
h1 .roadbadge,h2 .roadbadge{font-size:.8em}
/* ⭐ THE BADGE SITS BESIDE THE HEADING, NOT INSIDE IT (23/08/2026).
   Measured, not assumed - this is what a crawler reads as the heading text:
     GIF inside the heading   -> "M4 motorway sign M4 Roadworks"   (alt text pollutes it)
     badge inside the heading -> "M4 M4 Roadworks"                 (road number twice)
     badge OUTSIDE it         -> "M4 Roadworks"                    (clean)
   Identical to the eye, and the heading says exactly what it means. The badge is
   decoration and now sits in the markup as decoration. */
.pagehead{display:flex;align-items:center;gap:.55em;flex-wrap:nowrap}
.pagehead h2{margin:.2em 0 .5em}
.pagehead .roadbadge{margin:0;flex:none;font-size:1rem}
@media (max-width:400px){.pagehead .roadbadge{font-size:.85rem}}


/* ############################################################################
   PORTED FROM M6 29/08/2026 - the status band (.cs), WHOLE REGION VERBATIM.
   An earlier port extracted rules WITHOUT their @media wrappers, so phone-only
   rules applied at every width (the info band stacked instead of sitting three
   across). Taken as one contiguous block this time.
   ############################################################################ */
/* ---------- Live status strip (written by CAL-RTN into the marker) ---------- */
.cs{background:var(--brand);border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.cs__inner{max-width:var(--maxw);margin:0 auto;padding:0 8px;display:flex;align-items:stretch;gap:1px}
.cs__item{flex:1 1 0;display:flex;align-items:center;gap:12px;padding:11px 14px;min-width:0;
  color:#fff;text-decoration:none}
.cs__item+.cs__item{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.cs__item:hover{background:rgba(0,0,0,.18);text-decoration:none}
.cs__num{font-size:2.1rem;line-height:1;font-weight:800;flex:none;letter-spacing:-.02em}
.cs__lab{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  opacity:.9;line-height:1.3}
.cs__sub{display:block;font-size:.88rem;line-height:1.3;opacity:.95}
.cs--bad .cs__num{color:#ff8f8f}
.cs--warn .cs__num{color:var(--accent)}
.cs--ok .cs__num,.cs--ok .cs__tick{color:#7ee2a8}
.cs__tick{font-size:1.9rem;line-height:1;flex:none}
.cs__time{max-width:var(--maxw);margin:0 auto;padding:0 22px 8px;font-size:.72rem;
  color:rgba(255,255,255,.75);text-align:center}
@media (max-width:760px){
  .cs__inner{flex-direction:column;gap:0;padding:0}
  .cs__item{padding:9px 14px}
  .cs__item+.cs__item{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
  .cs__num{font-size:1.8rem}
  .cs__time{padding:2px 14px 8px}
}

/* Interchange rows read "M6 MOTORWAY" — bigger, greener, harder to miss. They break the
   junction rail up visually AND give a stronger, more descriptive anchor for the cross-site links. */
.jmap__jn--connect .jmap__road{font-size:1.12rem;font-weight:800;letter-spacing:.02em;color:#00703c}
.jmap__jn--connect .jmap__road a{color:#00703c;text-decoration:underline;text-underline-offset:3px}
.jmap__jn--connect .jmap__road a:hover{color:#00512b}
.jmap__jn--connect{background:#f2f9f4;border-radius:6px}

/* Count-free state: shown until CAL-RTN can supply real counts. Same three doorways,
   same look, no numbers — because a placeholder number would be a fabricated number.
   A chevron replaces the count so the panel still has a visual anchor on the left. */
.cs--none{gap:10px}
.cs--none .cs__wrap{min-width:0}
.cs--none:before{content:"\203A";font-size:1.9rem;line-height:1;font-weight:800;
  color:var(--accent);flex:none;opacity:.9}
.cs--none .cs__lab{font-size:.72rem}
.cs--none .cs__sub{font-size:.92rem}

/* ---------- Quick-links variant of the status band ----------
   Used until CAL-RTN can write real counts into the RTNSTATUSSTRIP marker.
   Deliberately reads as NAVIGATION, not as a status readout: icons, fuller
   labels, a descriptive second line. An empty-looking status bar reads as
   broken; a quick-links bar is useful whether or not there is news today.
   When the engine supplies counts, .cs--links is dropped and the count-led
   version (large number + label) takes over with no other change. */
.cs--links .cs__item{gap:13px;padding:12px 16px;align-items:center}
.cs--links .cs__ico{width:26px;height:26px;flex:none;fill:var(--accent);opacity:.95}
.cs--links .cs__lab{font-size:.82rem;letter-spacing:.05em;margin-bottom:1px}
.cs--links .cs__sub{font-size:.9rem;opacity:.92}
.cs--links .cs__item:hover{background:rgba(0,0,0,.2)}
.cs--links .cs__item:hover .cs__ico{opacity:1}
@media (max-width:760px){
  .cs--links .cs__item{padding:11px 14px}
  .cs--links .cs__ico{width:22px;height:22px}
}

/* --- from TNE site.css lines 461-556 --- */


/* ############################################################################
   PORTED FROM M6 29/08/2026 - the column footer (.ft), WHOLE REGION VERBATIM.
   An earlier port extracted rules WITHOUT their @media wrappers, so phone-only
   rules applied at every width (the info band stacked instead of sitting three
   across). Taken as one contiguous block this time.
   ############################################################################ */
/* ============================================================================
   MAIN FOOTER — CAL BRAND FOOTER   (approved 17/08/2026, JC)
   ----------------------------------------------------------------------------
   Category links in VERTICAL COLUMNS, a road cone each side, the network
   statement and an auto-updating copyright year.
   ⭐ WHY A GRID WITH auto-fit: TNE is a HUB heading for hundreds of pages.
      Adding a fifth section later needs NO CSS CHANGE - it just becomes another
      column, and collapses to one-per-row on a phone.
   ⭐ align-items:start so unequal-length columns line up on their HEADINGS
      rather than floating to their middles.
   ⚠ This is BRAND design, not per-site design (durable rule, 15/08). When it
     rolls to M5/M6/M60 and then the earners, only the link lists change.
   ============================================================================ */
.ft{background:#00305c;color:#cfe0f2;position:relative;overflow:hidden;
    border-top:3px solid var(--accent)}
.ft__wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 22px;position:relative;z-index:2}

.ft__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px 26px;text-align:left;align-items:start}
.ft__h{font-size:.72rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:#ffd54a;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.22)}
.ft__cols ul{list-style:none;margin:0;padding:0}
.ft__cols li{margin:0 0 6px;line-height:1.45}
.ft__cols a{color:#fff;text-decoration:none;font-size:.9rem;
  display:inline-block;padding:2px 0;border-bottom:1px solid transparent}
.ft__cols a:hover,.ft__cols a:focus{border-bottom-color:#ffd54a;text-decoration:none}

/* STATEMENT + COPYRIGHT - centred, and deliberately NOT LINKS.
   ⭐ JC's rule of 15/08: "statement in the site-wide footer (editorial, not
   linking); the LIST OF SITES on ONE page only." An identical cross-domain link
   in the footer of all 31 pages reads as a link scheme. The hub is linked from
   About Us instead. */
.ft__rule{border:0;border-top:1px solid rgba(255,255,255,.22);margin:20px 0 14px}
.ft__free{text-align:center;margin:0 0 2px;font-size:.85rem;color:#9db8d6}
.ft__stmt{text-align:center;margin:0 0 6px;font-size:.95rem;color:#fff;font-weight:600}
.ft__copy{text-align:center;margin:0;font-size:.85rem;color:#9db8d6}
.ft__nh{text-align:center;margin:8px 0 0;font-size:.8rem;color:#9db8d6}
.ft a{color:#fff}

/* CONES - bottom corners. Hidden under 700px so they never crowd the links.
   ⚠ Do NOT gate these on prefers-reduced-motion: the SVG already handles it
   correctly by rendering the beacon PERMANENTLY LIT rather than hiding it. */
.ft .cone{position:absolute;bottom:8px;z-index:1;pointer-events:none;display:block;
  height:104px;width:auto}
.ft .cone--l{left:16px}
.ft .cone--r{right:16px}
@media (max-width:1080px){.ft .cone{height:78px}}
@media (max-width:820px){.ft__wrap{padding-left:16px;padding-right:16px}}
@media (max-width:700px){.ft .cone{display:none}}


/* PORTED VERBATIM FROM m25traffic.co.uk/assets/site.css, 29/08/2026 -
   the live status band. Markup without its stylesheet renders as a run-on


/* ############################################################################
   PORTED FROM M6 29/08/2026 - the live news ticker (.nt), WHOLE REGION VERBATIM.
   An earlier port extracted rules WITHOUT their @media wrappers, so phone-only
   rules applied at every width (the info band stacked instead of sitting three
   across). Taken as one contiguous block this time.
   ############################################################################ */
/* ============================================================================
   LIVE NEWS TICKER (.nt) — ABOVE THE MENU   (15/08/2026, JC spec)
   A scrolling headline strip between the site header and the main nav: three
   latest incidents, three active roadworks, three planned. Darker blue than the
   nav so it reads as a separate live band rather than part of the menu.
   ⚠ Every entry carries its REPORTED TIME IN FRONT. An undated headline implies
   "now", which we cannot know.
   ⚠ Renders nothing at all when there is no news — see NewsTicker.cs.
   ============================================================================ */
.nt{
  background:#00305c;               /* a shade darker than --brand (#0058a8) */
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:2px solid var(--accent);
}
.nt__track{display:inline-flex;will-change:transform;animation:ntscroll 70s linear infinite}
.nt:hover .nt__track,
.nt:focus-within .nt__track{animation-play-state:paused}
@keyframes ntscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.nt__item{display:inline-flex;align-items:baseline;gap:.5rem;
  padding:8px 26px;font-size:.9rem;line-height:1.35;
  border-right:1px solid rgba(255,255,255,.18)}

/* ⭐ 17/08/2026 (JC): TWO PILLS, THEN THE WORDS, THEN THE TIME.
   The strip is narrow. One long tag ("LIVE Roadworks") ate the width the summary
   needs, so LIVE and the CATEGORY are now separate pills:
     [ LIVE ]  [ Incident ]  summary text …  14:32
   LIVE is one fixed red so the eye locks onto it without reading; the category
   pill carries its own colour, matching the cards and section headers.
   ⚠ Two different reds sitting side by side would read as one blob, so the
   INCIDENT pill is inverted (white pill, red text) against the solid red LIVE. */
.nt__live{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;
  background:#d62828;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}

/* Category pill: colour carries the state, exactly as on the map template. */
.nt__tag{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;color:#fff}
.nt__item--inc .nt__tag{background:#fff;color:#a51f1f}  /* incident  — inverted red */
.nt__item--act .nt__tag{background:#f0a500;color:#241a05} /* roadworks — amber      */
.nt__item--pln .nt__tag{background:#2d6ca8;color:#fff}  /* planned   — blue         */

/* The reported time — now the LAST thing in every entry. It is what proves the
   headline is current, so it stays prominent, but it no longer delays the words. */
.nt__time{font-weight:700;font-variant-numeric:tabular-nums;color:#ffd54a;flex:0 0 auto}
.nt__time::before{content:"·";color:rgba(255,255,255,.45);margin-right:.5rem}

.nt__txt{color:#fff;font-weight:500}
.nt__item--all{border-right:0}
.nt__item--all a{color:#ffd54a;font-weight:700;text-decoration:underline}

/* Mobile: mobile is ~77% of revenue, so the strip must not shout. Slightly
   smaller, tighter, and it still scrolls. */
@media (max-width:560px){
  .nt__item{padding:7px 16px;font-size:.82rem;gap:.4rem}
  .nt__tag,.nt__live{font-size:.62rem;padding:1px 5px}
}
/* Anyone who has asked for less motion gets a static, readable strip instead of


/* ============================================================================
   DATA TABLES - added 03/09/2026 for the DfT content build.
   WHY: the template carried NO table rules, so every Department for Transport
   table rendered as unstyled rows. The content plan is table-heavy, so this is
   required. ONE contiguous block - do not lift individual rules out of it.
   ========================================================================== */
main table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:.95rem}
main table th,main table td{padding:8px 10px;text-align:left;border-bottom:1px solid #dfe4ea}
main table th{background:#f2f5f8;font-weight:700;border-bottom:2px solid #c9d3dd}
main table tr:last-child td{border-bottom:1px solid #c9d3dd}
main table td+td,main table th+th{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
main table tr:nth-child(even) td{background:#fafbfc}
main table{display:block;overflow-x:auto}
@media (min-width:560px){main table{display:table}}

/* v2.3.4 (10/09/2026): ported VERBATIM from m6traffic.co.uk/assets/site.css */
/* Sister-site links in the site-message strip (JC, 21/08/2026). */
.ticker__item a{color:#ffd54a;font-weight:700;text-decoration:underline}
.ticker__item a:hover{color:#fff}

/* ---------- NAV SPACING (v2.3.4, 10/09/2026) ----------
   JC: "The top menus can be moved a bit closer together but enough gap to see they are separate".
   On phones the items are spread EVENLY (the dropdown block's justify-content:center put all the spare
   space at the two ends, and clipped both end items when the bar was full), with a little less padding,
   so the space shows BETWEEN items. Measured on all eight sites at 360/375/390/412: every item visible,
   page never wider than the screen. Appended LAST so it wins over the earlier phone rules. */
@media (max-width:420px){
  .site-nav ul{justify-content:space-between}
  .site-nav a{padding:11px 3px;font-size:.76rem}
}
@media (max-width:370px){
  .site-nav a{padding:11px 2px;font-size:.72rem}
}

/* v2.3.4 (10/09/2026): ported VERBATIM from m3traffic.co.uk/assets/site.css - the licence link in the footer */
.ft__nh a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(157,184,214,.35)}
.ft__nh a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- NAV ONE ROW (M60, 11/09/2026) ----------
   JC: take "M60" out of the top-menu labels - keyword stuffing, and it pushed the desktop menu onto two rows.
   The shorter labels alone still measured 4px too wide for the 1000px bar at 18px padding (Arial-metric test
   font), so the top-level items on desktop get 15px each side (about 32px spare). Top-level links only;
   dropdown links and the phone rules (<=760px) are untouched. Undo = delete this block. */
@media (min-width:761px){
  .site-nav > ul > li > a{padding-left:15px;padding-right:15px}
}

/* v2.5.0 hand-placed ad zones. Heights reserved so an ad cannot shift the page (CLS). */
.adzone{margin:20px 0;text-align:center;overflow:hidden}
.adzone--1{min-height:110px}.adzone--2{min-height:110px}.adzone--3{min-height:110px}
@media (min-width:768px){.adzone--1,.adzone--2,.adzone--3{min-height:100px}}


/* ---------- v2.5.0 FIX, 14/09/2026 ----------
   JC: "on most sites if there is a large top menu the far right menu gets
   push of the page (some of the sub-menus)."  The panel is absolutely
   positioned at left:0 of its parent, so the RIGHT-MOST parent opens off the
   right edge of the viewport.  Anchor the last one to its own right edge.
   Desktop only: below 761px the panel is not rendered at all, so the rule
   would have nothing to act on. */
@media (min-width:761px){
  .site-nav li.has-sub:last-child>.subnav{left:auto;right:0}

  /* AND THE SECOND HALF OF THE SAME COMPLAINT: "it does not sit neatly on one
     line".  MEASURED on M6 at 1280px - seven items totalling 1,004px inside a
     1,000px bar.  FOUR PIXELS, and the whole "Traffic Statistics" item drops
     to a second row for it.  Trimming 3px a side off the top-level links
     returns 42px across seven items, which clears it with room to spare and
     leaves every other site's bar looking the same.
     ⚠ Top-level only (>ul>li>a): the sub-menu panel keeps its 11px/18px, and
     the phone bar below 761px is untouched - tap targets stay >=44px. */
  .site-nav>ul>li>a{padding-left:15px;padding-right:15px}

  /* ⭐ ONE ALIGNMENT ACROSS THE ESTATE (JC, 14/09/2026): "its our brand and
     consistency show attention to detail... it is better and easier to align
     the top menu centre same as mobile... as the items in the top menu is
     growing so central aligned might be better anyway."
     The bar was right-aligned on desktop and centred on phones - two rules for
     one thing, and a reader moving between our sites saw the menu move.
     CENTRE, everywhere, at every width. */
  .site-nav>ul{justify-content:center}
}


/* ---------- v2.5.0 FIX2b, 14/09/2026 — THE MIDDLE WIDTHS ----------
   JC, 02:45: "the M6 website, the main menu, it now goes on to two lines."
   MEASURED, not guessed. Item widths against the bar, all eight sites:
     M6 877px (wrapped below 895)  ·  M25 893 (911)  ·  M60 891 (907)
     TNE 846 (726)  ·  M5 765 (679)  ·  M1/M4 731 (671)  ·  M3 904 (362)
   Three sites wrapped in the 761–911px band — a window that is not maximised,
   or a 1280 screen at 150% Windows scaling (= 853 CSS px). Shortening one
   label moves the cliff; it does not remove it, and the next label we add puts
   it back. So the bar gets a size down in that band instead.
   ⚠ Top-level only. The dropdown panel and the phone bar below 761px are
   untouched, so tap targets stay >= 44px. */
@media (min-width:900px) and (max-width:1023px){
  .site-nav>ul>li>a{padding-left:10px;padding-right:10px;font-size:.94rem}
}
@media (min-width:761px) and (max-width:899px){
  .site-nav>ul>li>a{padding-left:7px;padding-right:7px;font-size:.88rem;letter-spacing:-.01em}
}