/* Ayrshire Vehicle Recovery
   Mobile-first. No framework, no webfonts, no external requests. */

:root {
  --navy: #0b1d2a;
  --navy-2: #14344a;
  --amber: #ffb400;
  --amber-dk: #d99700;
  --ink: #14202a;
  --muted: #5a6b78;
  --line: #dfe5ea;
  --bg: #ffffff;
  --bg-alt: #f4f7f9;
  --radius: 10px;
  --wrap: 1080px;
  --sticky-h: 62px;
  --gutter: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* Clears the fixed mobile call bar. */
  padding-bottom: var(--sticky-h);
}

img { max-width: 100%; height: auto; }
a { color: var(--navy-2); }

.wrap {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 8px; top: 8px; z-index: 100;
  background: #fff; padding: 10px 14px; border-radius: 6px;
}

/* Scroll marker the header observer watches. It must have real height — a
   zero-height sentinel can never be "intersecting", so the header would
   condense on load and never restore. Absolutely positioned so it occupies no
   space in the flow and shifts nothing. */
#header-sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 60px;
  pointer-events: none; visibility: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────── */
/* position:sticky, not fixed: the header keeps its place in the document
   flow, so pinning it costs no layout shift and needs no spacer element.
   The condensed state only changes padding and type size — never the
   document height — so scrolling can't reflow the page under the reader. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--navy); color: #fff;
  transition: box-shadow .18s ease;
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.35); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-top: 12px; padding-bottom: 12px;
  transition: padding .18s ease;
}
.site-header.is-condensed .header-inner { padding-top: 6px; padding-bottom: 6px; }

.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: #fff;
}
.brand-text { display: block; }

/* Sized by height so it tracks the header as it condenses. width:auto keeps
   the aspect ratio despite the width/height attributes on the img, which are
   there to reserve space and prevent layout shift. */
.brand-mark {
  height: 50px; width: auto; display: block;
  transition: height .18s ease;
}
.site-header.is-condensed .brand-mark { height: 36px; }

.brand-name {
  display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  transition: font-size .18s ease;
}
.brand-strap {
  display: block; font-size: .76rem; color: var(--amber); letter-spacing: .02em;
  /* Collapsed by max-height rather than display:none so it animates and the
     header height changes smoothly instead of snapping. */
  max-height: 1.4em; overflow: hidden;
  transition: max-height .18s ease, opacity .18s ease;
}
.site-header.is-condensed .brand-name { font-size: .95rem; }
.site-header.is-condensed .brand-strap { max-height: 0; opacity: 0; }

.call-btn {
  display: flex; flex-direction: column; align-items: center;
  background: var(--amber); color: #12202b; text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius); font-weight: 700;
  line-height: 1.15; white-space: nowrap;
  transition: padding .18s ease;
}
.call-btn:hover { background: var(--amber-dk); }
.call-btn-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  max-height: 1.4em; overflow: hidden;
  transition: max-height .18s ease, opacity .18s ease;
}
.call-btn-num { font-size: 1rem; }
.site-header.is-condensed .call-btn { padding: 6px 14px; }
.site-header.is-condensed .call-btn-label { max-height: 0; opacity: 0; }

.site-nav { background: var(--navy-2); }
.site-nav .wrap { display: flex; gap: 4px; overflow-x: auto; }
.site-nav a {
  color: #dbe6ee; text-decoration: none; padding: 11px 12px;
  font-size: .92rem; white-space: nowrap;
  transition: padding .18s ease;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-header.is-condensed .site-nav a { padding-top: 8px; padding-bottom: 8px; }

/* Anchored links (#content, #cta) must not land underneath the sticky bar. */
html { scroll-padding-top: 120px; }

@media (prefers-reduced-motion: reduce) {
  .site-header, .header-inner, .brand-name, .brand-strap,
  .call-btn, .call-btn-label, .site-nav a { transition: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; padding: 34px 0 38px;
}
.hero h1 { margin: 0 0 12px; font-size: 1.85rem; line-height: 1.2; }
.hero-lede { margin: 0 0 22px; font-size: 1.05rem; color: #cfdce5; max-width: 62ch; }

/* Hero background image.
   Hidden on mobile: it is decorative, and the target user is on a phone at the
   roadside, possibly on one bar of signal. Nothing goes between them and the
   call button.
   The scrim is not optional — the headline and tick list are white, and over a
   bright sky they would be unreadable without it. */
.hero-bg { display: none; }

.hero.has-image { position: relative; overflow: hidden; }
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr;
}

.hero-actions {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  max-width: 560px; margin-bottom: 22px;
}

/* The two hero buttons are one component with two colour variants. Both size
   from the same rules, so they cannot drift apart. */
.hero-call,
.hero-request {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px; min-height: 78px; padding: 14px 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-weight: 800; text-align: center; text-decoration: none;
}
.hero-call span,
.hero-request span {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; opacity: .85;
}
.hero-call strong,
.hero-request strong { font-size: 1.35rem; letter-spacing: .01em; }

.hero-call { background: var(--amber); color: #12202b; }
.hero-call:hover { background: var(--amber-dk); }

.hero-request { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.hero-request:hover { background: rgba(255,255,255,.2); }

.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hero-points li { padding-left: 26px; position: relative; color: #cfdce5; font-size: .95rem; }
.hero-points li::before {
  content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 700;
}

/* ── Sections ───────────────────────────────────────────────────────── */
/* Vertical padding only. These classes sit on the same element as .wrap, and
   a `padding: 34px 0` shorthand would silently zero out its gutters — which is
   exactly how the cards ended up flush against the screen edge. */
.section { padding-top: 34px; padding-bottom: 34px; }
.page { padding-top: 24px; padding-bottom: 40px; }
h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 1.3rem; margin: 30px 0 12px; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 65ch; margin: 0 0 20px; }
.section-lede { color: var(--muted); max-width: 65ch; }

.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 15px; }

.more-link { font-weight: 600; text-decoration: none; }
.more-link:hover { text-decoration: underline; }

/* ── Call-to-action links ───────────────────────────────────────────── */
.inline-call {
  display: inline-block; background: var(--navy); color: #fff;
  text-decoration: none; font-weight: 700; padding: 13px 22px;
  border-radius: var(--radius); margin: 4px 0 24px;
}
.inline-call:hover { background: var(--navy-2); }

.big-call {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--amber); color: #12202b; text-decoration: none;
  padding: 22px; border-radius: var(--radius); font-weight: 800;
  text-align: center; margin: 0 0 26px;
}
.big-call:hover { background: var(--amber-dk); }
.big-call span { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.big-call strong { font-size: 1.9rem; }
.big-call-note { font-weight: 600; opacity: .8; text-transform: none !important; letter-spacing: 0 !important; }

.cta-band {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 30px 0;
  text-align: center;
}
.cta-band h2 { margin-top: 0; }

/* ── Live conditions card, in the hero ──────────────────────────────── */
/* Glass over the hero photo. backdrop-filter does the heavy lifting: it blurs
   whatever is behind the card, which is what makes white text legible over an
   image whose brightness we do not control. The rgba tint is the fallback for
   browsers without it -- opaque enough on its own to stay readable. */
.hero-live {
  display: none;
  background: rgba(11, 29, 42, .58);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero-live {
    background: rgba(11, 29, 42, .42);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
  }
}

.hero-live.hl-severe { border-color: rgba(255, 120, 100, .5); }

.hl-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, .35);
}
.hl-head h2 {
  margin: 0; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #fff;
}
.hl-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #00e05a; box-shadow: 0 0 0 3px rgba(0,224,90,.3);
}
.hl-active .hl-dot { background: #ffb400; box-shadow: 0 0 0 3px rgba(255,180,0,.35); }
.hl-severe .hl-dot { background: #ff2d16; box-shadow: 0 0 0 3px rgba(255,45,22,.4); }

.hl-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
}

.hl-badge {
  flex-shrink: 0; padding: 3px 9px; border-radius: 20px;
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
}
.hl-ok     { background: rgba(74,222,128,.22); color: #86efac; }
.hl-yellow { background: rgba(255,215,80,.22);  color: #fde68a; }
.hl-amber  { background: rgba(255,180,0,.28);   color: #fcd34d; }
.hl-red    { background: rgba(255,107,90,.32);  color: #fecaca; }
.hl-inc    { background: rgba(255,107,90,.24);  color: #fecaca; }
.hl-grit   { background: rgba(125,190,255,.22); color: #bfdbfe; }

.hl-text { font-size: .9rem; line-height: 1.4; color: #eaf2f8; }

.hl-foot {
  display: flex; flex-direction: column; gap: 2px;
  margin: 14px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .72rem; color: rgba(255, 255, 255, .62);
}
.hl-src { color: rgba(255, 255, 255, .45); }

/* ── Info required / trust ──────────────────────────────────────────── */
.need-list { padding-left: 20px; max-width: 68ch; }
.need-list li { margin-bottom: 9px; color: var(--muted); }
.need-list strong { color: var(--ink); }

.trust {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.trust h2 { margin-top: 0; }
.trust ul { padding-left: 20px; max-width: 68ch; }
.trust li { margin-bottom: 9px; color: var(--muted); }

/* ── How it works ───────────────────────────────────────────────────── */
.how { display: grid; gap: 16px; grid-template-columns: 1fr; }
.how-step {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--bg-alt); position: relative;
}
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: .9rem;
  margin-bottom: 8px;
}
.how-step h3 { color: var(--navy); margin-bottom: 4px; }
.how-step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; background: #fff;
}
.card:hover { border-color: var(--navy-2); box-shadow: 0 2px 10px rgba(11,29,42,.07); }
.card h3 { color: var(--navy); }
.card p { margin: 0; color: var(--muted); font-size: .93rem; }

.area-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.area-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; background: #fff;
}
.area-card:hover { border-color: var(--navy-2); }
.area-card h3 { color: var(--navy); margin-bottom: 2px; }
.area-council { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.area-card p { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }

/* ── Roads ──────────────────────────────────────────────────────────── */
.road-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.road-chip {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 15px; background: var(--bg-alt); min-width: 150px;
}
.road-chip:hover { border-color: var(--navy-2); background: #fff; }
.road-chip strong { color: var(--navy); font-size: 1.05rem; }
.road-chip span { font-size: .8rem; color: var(--muted); }

.road-list { color: var(--muted); }

.safety {
  border-left: 4px solid var(--amber); background: var(--bg-alt);
  padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 22px 0 26px;
}
.safety h2 { margin-top: 0; font-size: 1.1rem; }
.safety ol { margin: 0 0 16px; padding-left: 20px; }
.safety li { margin-bottom: 6px; }

/* Motorway pages only. Someone reading this may be stopped in a live lane, so
   it outranks everything else on the page including the call button. */
.safety-urgent {
  border-left-color: #c0392b; background: #fdecea; color: #8c1d18;
}
.safety-urgent h2 { color: #8c1d18; }
.safety-then { margin-bottom: 0; font-size: .93rem; }

.safety-steps { counter-reset: none; }
.safety-steps li { margin-bottom: 9px; }

/* ── Live conditions ────────────────────────────────────────────────── */
/* Renders only when a feed has something to say. In quiet weather this whole
   block is absent rather than showing a reassuring "all clear" nobody asked
   for. */
.live-panel {
  border: 1px solid var(--line); border-left: 4px solid #1e7e46;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff; padding: 16px 18px; margin: 22px 0 26px;
}
.live-panel.live-severe { border-left-color: #c0392b; }
.live-top { margin-top: 26px; }

.live-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.live-head h2 { margin: 0; font-size: 1.05rem; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #1e7e46;
  box-shadow: 0 0 0 3px rgba(30,126,70,.18);
  flex-shrink: 0;
}
.live-severe .live-dot { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.18); }

/* Freshness. A timestamp that reads "3 hours ago" tells the reader the data is
   stale without the site having to claim anything. */
.live-when {
  margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap;
}

/* All-clear. Green, and deliberately calm. */
.live-clear { border-left-color: #1e7e46; }
.live-ok .live-badge { background: #e8f5ed; color: #1e7e46; }
.live-ok strong { color: #1a6b3c; }

.live-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid #eef2f5;
}
.live-item:first-of-type { border-top: 0; padding-top: 0; }
.live-body { flex: 1; }
.live-body p { margin: 4px 0 6px; color: var(--muted); font-size: .92rem; }
.live-body a { font-size: .88rem; font-weight: 600; }

.live-badge {
  flex-shrink: 0; padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap;
  background: #e3e9ee; color: #46565f;
}
.live-yellow .live-badge { background: #fff3cd; color: #7a5a00; }
.live-amber  .live-badge { background: #ffe0b2; color: #7a4a00; }
.live-red    .live-badge { background: #c0392b; color: #fff; }
.live-incident .live-badge { background: #fdecea; color: #8c1d18; }
.live-gritter  .live-badge { background: #e3f0fa; color: #1c5480; }

/* Attribution. Contractually required for the Met Office (Crown copyright)
   and for Traffic Scotland. Not optional, not to be removed. */
.live-credit {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #eef2f5;
  font-size: .78rem; color: var(--muted);
}

/* ── Road pages ─────────────────────────────────────────────────────── */
.road-meta {
  color: var(--muted); font-size: .9rem; margin: -8px 0 20px;
}

.road-sections { display: grid; gap: 16px; margin-bottom: 10px; }
.road-section {
  border: 1px solid var(--line); border-left: 4px solid var(--navy-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px; background: #fff;
}
.road-section h3 { color: var(--navy); font-size: 1.1rem; margin-bottom: 2px; }
.rs-sub {
  color: var(--muted); font-size: .85rem; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.rs-advice {
  background: var(--bg-alt); border-left: 3px solid var(--amber);
  padding: 10px 14px; margin: 14px 0 0; font-size: .93rem;
  border-radius: 0 6px 6px 0;
}

.hazard-list { padding-left: 20px; max-width: 68ch; }
.hazard-list li { margin-bottom: 8px; color: var(--muted); }

.road-safety-note {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 26px 0;
}
.road-safety-note h2 { margin-top: 0; }
.citation { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }

.live-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.live-link {
  display: inline-block; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--navy); text-decoration: none;
  font-weight: 600; font-size: .92rem;
}
.live-link:hover { border-color: var(--navy-2); background: var(--bg-alt); }
.live-link::after { content: " ↗"; color: var(--muted); }

/* ── Town grid ──────────────────────────────────────────────────────── */
.town-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-bottom: 16px;
}
.town-grid a {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 6px; font-size: .92rem; font-weight: 600;
  color: var(--navy); background: #fff;
}
.town-grid a:hover { background: var(--bg-alt); border-color: var(--navy-2); }

/* ── Articles ───────────────────────────────────────────────────────── */
.article-list { display: grid; gap: 22px; }
.article-item { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.article-item h2 { margin: 0 0 4px; }
.article-item h2 a { text-decoration: none; color: var(--navy); }
.article-date { font-size: .82rem; color: var(--muted); margin: 0 0 8px; }

/* ── Form ───────────────────────────────────────────────────────────── */
.callback {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 34px 0;
}
.callback h2 { margin-top: 0; }
.callback-lede { color: var(--muted); margin: 0 0 18px; }

.enquiry-form { display: grid; gap: 14px; max-width: 520px; }
.field { display: grid; gap: 5px; }
.field label { font-weight: 600; font-size: .9rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 12px; font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  border: 1px solid #c3ccd4; border-radius: 8px; background: #fff;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--navy-2); outline-offset: 1px; border-color: var(--navy-2);
}
.field-error { color: #b3261e; font-size: .85rem; margin: 0; }
.form-error {
  background: #fdecea; border: 1px solid #f5c2bd; color: #8c1d18;
  padding: 10px 12px; border-radius: 8px; font-size: .9rem;
}

/* Off-screen, not display:none — bots skip display:none fields. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.submit-btn {
  background: var(--navy); color: #fff; border: 0; border-radius: var(--radius);
  padding: 15px 20px; font: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer;
}
.submit-btn:hover { background: var(--navy-2); }

.thanks { text-align: center; max-width: 520px; margin: 30px auto; }
.thanks .lede { margin-left: auto; margin-right: auto; }

.contact-facts { max-width: 65ch; }
.contact-facts ul { padding-left: 20px; color: var(--muted); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy); color: #b9cad7; margin-top: 40px;
  padding: 32px 0 26px; font-size: .9rem;
}
.foot-cols { display: grid; gap: 26px; grid-template-columns: 1fr; }
.site-footer h2 { color: #fff; font-size: .95rem; margin: 0 0 10px; }
.foot-brand { display: flex; align-items: center; gap: 9px; }
.foot-mark { height: 28px; width: auto; display: block; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer a { color: #b9cad7; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-areas { columns: 2; }
.foot-phone a { color: var(--amber); font-weight: 700; font-size: 1.15rem; }
.copy {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: #8ba2b3;
}

/* ── CTA block ──────────────────────────────────────────────────────── */
.cta {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin: 34px 0;
}
.cta h2 { margin-top: 0; }
.cta-lede { color: var(--muted); margin: 0 0 18px; }
.cta-actions { display: grid; gap: 12px; }

/* Same pairing as the hero: one size, two colour variants. */
.cta-call,
.cta-request {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px; min-height: 78px; padding: 14px 24px;
  border-radius: var(--radius);
  text-decoration: none; text-align: center; font-weight: 800;
}
.cta-call span,
.cta-request span {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; opacity: .85;
}
.cta-call strong,
.cta-request strong { font-size: 1.35rem; letter-spacing: .01em; }

.cta-call { background: var(--amber); color: #12202b; }
.cta-call:hover { background: var(--amber-dk); }

.cta-request { background: var(--navy); color: #fff; }
.cta-request:hover { background: var(--navy-2); }

/* ── Staged request form ────────────────────────────────────────────── */
.request-page { max-width: 640px; }
.req-head { margin-bottom: 18px; }
.req-urgent {
  background: var(--bg-alt); border-left: 4px solid var(--amber);
  padding: 10px 14px; margin: 0; font-size: .95rem;
}

.progress { margin-bottom: 24px; }
.progress-bar {
  height: 5px; background: var(--line); border-radius: 3px; overflow: hidden;
  margin-bottom: 12px;
}
/* Width by class, not an inline style — the CSP forbids inline styles. The
   form has four stages, so these are the only values it can take. */
.progress-bar span {
  display: block; height: 100%; background: var(--amber);
  transition: width .25s ease;
}
.pb-25 { width: 25%; }
.pb-50 { width: 50%; }
.pb-75 { width: 75%; }
.pb-100 { width: 100%; }
.progress-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.progress-steps li {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .7rem; color: var(--muted); text-align: center;
}
.ps-num {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--line); color: var(--muted);
  font-weight: 700; font-size: .75rem;
}
.progress-steps .is-current .ps-num { background: var(--navy); color: #fff; }
.progress-steps .is-current { color: var(--navy); font-weight: 700; }
.progress-steps .is-done .ps-num { background: var(--amber); color: #12202b; }

.staged-form { display: block; }
.staged-form h2 { margin-top: 0; }
.staged-form .field { margin-bottom: 16px; }
.staged-form select,
.staged-form input[type="text"],
.staged-form input[type="tel"],
.staged-form input[type="email"],
.staged-form input[type="number"],
.staged-form input[type="file"],
.staged-form textarea {
  width: 100%; padding: 12px; font: inherit; font-size: 16px;
  border: 1px solid #c3ccd4; border-radius: 8px; background: #fff;
}
.staged-form ul { list-style: none; margin: 4px 0 0; padding: 0; }
.staged-form ul li { margin-bottom: 4px; }
.staged-form ul label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  cursor: pointer;
}
.staged-form ul label:hover { border-color: var(--navy-2); }
.staged-form ul input[type="radio"] { width: auto; margin: 0; }
.field-check label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.field-check input { width: auto !important; }
.field-help { font-size: .84rem; color: var(--muted); margin: 5px 0 0; }

.locate-btn {
  width: 100%; padding: 13px; margin-bottom: 8px;
  background: #fff; border: 2px dashed var(--navy-2); border-radius: 8px;
  color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}
.locate-btn:hover { background: var(--bg-alt); }
.locate-btn:disabled { opacity: .6; cursor: default; }
.locate-status { font-size: .85rem; color: var(--muted); margin: 0 0 16px; min-height: 1.2em; }
.locate-status.is-ok { color: #1e7e46; }
.locate-status.is-warn { color: #a15c00; }

.consent-box {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin: 20px 0;
  font-size: .9rem;
}
.consent-box p { margin: 0 0 10px; }
.consent-box p:last-child { margin-bottom: 0; }
.consent-privacy { color: var(--muted); font-size: .85rem; }

.form-nav { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.back-btn {
  padding: 15px 20px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  color: var(--muted); text-decoration: none; font-weight: 600;
}
.back-btn:hover { border-color: var(--navy-2); color: var(--navy); }
.form-nav .submit-btn { flex: 1; }

/* ── Confirmation ───────────────────────────────────────────────────── */
.done { max-width: 560px; margin: 0 auto; }
.done-notice {
  background: #fff8e6; border: 1px solid #f0d391;
  border-radius: var(--radius); padding: 16px 18px; margin: 18px 0 22px;
}
.done-notice p { margin: 0 0 8px; }
.done-notice p:last-child { margin-bottom: 0; }
.done-danger {
  background: #fdecea; border: 1px solid #f0b7b1; color: #8c1d18;
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
}
.done-danger h2 { margin-top: 0; font-size: 1.05rem; }
.done-summary { background: var(--bg-alt); border-radius: var(--radius); padding: 18px; margin: 24px 0; }
.done-summary dl { margin: 0; }
.done-summary dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.done-summary dd { margin: 2px 0 12px; font-weight: 600; }
.done-fix { font-size: .87rem; color: var(--muted); margin: 6px 0 0; }
.done-tips { color: var(--muted); padding-left: 20px; }
.done-tips li { margin-bottom: 7px; }

/* ── Persistent mobile action bar ───────────────────────────────────── */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1.3fr 1fr;
  background: var(--navy);
  box-shadow: 0 -2px 14px rgba(0,0,0,.22);
  padding-bottom: env(safe-area-inset-bottom);
}
.ab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: var(--sticky-h); padding: 8px 4px;
  text-decoration: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .72rem;
  background: transparent; color: #cfdce5;
}
.ab-item:active { background: rgba(255,255,255,.1); }
.ab-icon { font-size: 1.15rem; line-height: 1; }
.ab-call { background: var(--amber); color: #12202b; }
.ab-call:active { background: var(--amber-dk); }
.ab-request { background: var(--navy-2); color: #fff; }
.ab-share:disabled { opacity: .6; }

/* ── Desktop ────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .action-bar { display: none; }
  .cta-actions { grid-template-columns: 1fr 1fr; }
  .progress-steps li { font-size: .78rem; }

  .hero { padding: 56px 0 60px; }
  .hero h1 { font-size: 2.6rem; }
  .hero-lede { font-size: 1.15rem; }
  .hero-points { grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 6px; }

  .hero.has-image { padding: 88px 0 92px; }

  .hero-bg {
    display: block;
    position: absolute; inset: 0; z-index: 0;
  }
  .hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center right;
    display: block;
  }

  /* Scrim. Opaque enough on the left that white text is legible over any
     image, fading out to the right so the picture is still visible. */
  .hero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(
        90deg,
        rgba(11, 29, 42, .96) 0%,
        rgba(11, 29, 42, .90) 32%,
        rgba(11, 29, 42, .62) 58%,
        rgba(11, 29, 42, .38) 100%
      );
  }

  /* Text column is capped so it never runs across the picture. */
  .hero.has-image .hero-text { max-width: 620px; }
  .hero.has-image .hero-points { grid-template-columns: 1fr; }

  /* Two columns once there's room: text left, live card right over the photo.
     Hidden on mobile entirely -- a stranded driver needs the call button, not
     a weather report, and the hero image isn't there to sit on anyway. */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: 40px;
  }
  .hero-live { display: block; }

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.5rem; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .area-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .how { grid-template-columns: repeat(4, 1fr); }
  .hero-actions { grid-template-columns: 1fr 1fr; }
  .foot-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .big-call { display: inline-flex; padding: 24px 48px; }
}

@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(4, 1fr); }

  /* Wider panel once there is room for it. Each incident carries a road, what
     has happened and the stretch it is on, and 320px folded all three. Not
     applied at the 760px breakpoint where the two-column hero starts: 420 there
     would leave the h1 about 256px and wreck the headline to unfold a credit
     line. The extra 100px comes out of gutter, not out of the copy -- the lede
     has its own 62ch measure. */
  .hero-inner { grid-template-columns: minmax(0, 1fr) 420px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Error pages ────────────────────────────────────────────────────── */
/* 404/403/400 share error_base.html; 500.html inlines its own markup but
   reuses these classes, so keep them free of dependencies on anything the
   500 page cannot load. */
.err { max-width: 640px; padding: 8px 0 48px; }

.err-status {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.err-code { color: var(--amber-dk); font-weight: 800; }

.err-heading {
  font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15;
  margin: 0 0 16px; color: var(--ink);
}
.err-body p { color: var(--muted); margin: 0 0 12px; }

/* The point of the page. Someone hitting an error may be at the roadside, so
   the phone number outranks the navigation. */
.err-call {
  margin: 24px 0; padding: 16px 20px;
  background: var(--bg-alt); border-left: 4px solid var(--amber);
  border-radius: var(--radius); color: var(--ink); font-weight: 700;
}
.err-phone {
  display: inline-block; margin-left: 6px;
  color: var(--navy); font-size: 1.25rem; font-weight: 800;
  letter-spacing: .01em;
}

.err-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.err-action {
  display: inline-block; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); text-decoration: none; font-weight: 700;
  font-size: .92rem;
}
.err-action:hover { background: var(--bg-alt); }
.err-action-primary {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.err-action-primary:hover { background: var(--navy-2); }

/* ── Roadworks list (Scotland page) ─────────────────────────────────── */
/* 364 records nationally, so grouped by road behind <details>. Collapsed by
   default: the incidents above are the news, this is reference. */
.works { margin: 32px 0; }
.works-lede { color: var(--muted); margin: 0 0 16px; }
.works-road { border-bottom: 1px solid var(--line); }
.works-road summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; cursor: pointer; font-weight: 700; color: var(--ink);
}
.works-road summary::-webkit-details-marker { display: none; }
.works-road summary::before {
  content: "+"; width: 1em; color: var(--muted); font-weight: 400;
}
.works-road[open] summary::before { content: "\2212"; }
.works-road-name { flex: 1; }
.works-road-count {
  padding: 1px 9px; border-radius: 999px;
  background: var(--bg-alt); color: var(--muted);
  font-size: .8rem; font-weight: 700;
}
.works-list { margin: 0 0 12px; padding: 0 4px 0 2em; }
.works-list li { color: var(--muted); margin: 5px 0; line-height: 1.45; }

/* ── Journey times (Scotland page) ──────────────────────────────────── */
.jt { margin: 32px 0; }
.jt-lede { color: var(--muted); margin: 0 0 16px; }
.jt-list { list-style: none; margin: 0; padding: 0; }
.jt-item {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 12px;
  align-items: baseline; padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.jt-delay {
  font-weight: 800; color: var(--amber-dk); font-variant-numeric: tabular-nums;
}
.jt-name { color: var(--ink); line-height: 1.4; }
.jt-times { color: var(--muted); font-size: .86rem; white-space: nowrap; }
@media (max-width: 560px) {
  .jt-item { grid-template-columns: 68px 1fr; }
  .jt-times { grid-column: 2; }
}

/* ── Traffic Scotland attribution ───────────────────────────────────── */
/* Logo + link + IPR acknowledgement, which is what their Acceptable Use
   policy asks for. Kept small and quiet: it is a credit, not a badge. */
.ts-credit { display: inline-flex; align-items: center; gap: 9px; }
.ts-logo { display: block; height: auto; opacity: .85; }
.ts-credit a:hover .ts-logo { opacity: 1; }
p.ts-credit { margin-top: 18px; }

/* Traffic Scotland credit in the hero panel. Own row, below the text credits:
   inline it was unreadable at any size that fit, and it broke the line. White
   logo variant because the panel sits on the dark hero image. */
.hl-ts {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 5px; text-decoration: none;
}
.hl-ts-logo { display: block; height: auto; opacity: .75; }
.hl-ts-ipr { color: rgba(255, 255, 255, .45); font-size: .72rem; }
.hl-ts:hover .hl-ts-logo { opacity: 1; }
.hl-ts:hover .hl-ts-ipr { color: rgba(255, 255, 255, .7); }

/* Incident detail in the hero panel: road number as the badge, what is
   happening as the text, the stretch it is on beneath. */
.hl-where {
  display: block; margin-top: 2px;
  color: rgba(255,255,255,.45); font-size: .78rem; line-height: 1.35;
}

/* Section headings inside the hero panel. Subordinate to the panel title:
   same uppercase treatment, smaller and dimmer, with a rule to separate the
   groups. Incidents and the weather/gritting state are different kinds of
   fact and ran together as one flat list without these. */
.hl-section {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: #fff;
}
.hl-section:first-of-type { margin-top: 0; }

/* ── Live strip (mobile) ────────────────────────────────────────────── */
/* The hero panel is desktop-only -- on a phone it would push the call button
   below the fold. This carries the incidents instead, below the hero, where it
   costs the phone number nothing. Incidents only: weather and gritting are
   worth a panel on a desktop, not a scroll on a phone. */
.live-strip {
  /* Pulled up into the hero's bottom padding so it reads as attached to it.
     Left free-floating it sat in ~70px of white with the next section's
     padding below, and looked like an orphan belonging to neither.

     position/z-index are load-bearing, not decoration: .hero.has-image is
     position:relative, so without a stacking context of its own the hero
     paints straight over the overlap. */
  position: relative; z-index: 3;
  margin: -14px var(--gutter) 0;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(11, 29, 42, .1);
}
.live-strip.ls-severe { border-left-color: #c0392b; }

.ls-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--line-strong, #c9d4dc);
  font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
}
.ls-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #f59e00; box-shadow: 0 0 0 3px rgba(245,158,0,.22);
}
.ls-severe .ls-dot { background: #e01b00; box-shadow: 0 0 0 3px rgba(224,27,0,.25); }

.ls-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 0;
}
.ls-badge {
  flex-shrink: 0; padding: 2px 8px; border-radius: 20px;
  background: var(--navy); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .03em;
  white-space: nowrap;
}
.ls-text { font-size: .88rem; line-height: 1.4; color: var(--ink); }
/* Where on the road. "2 lanes restricted Northbound" on a 20-mile motorway is
   not information without it. */
.ls-where {
  display: block; margin-top: 2px;
  font-size: .78rem; line-height: 1.35; color: var(--muted);
}

.ls-foot {
  margin: 9px 0 0; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .7rem; color: var(--muted);
}
.ls-foot a { color: var(--muted); }

/* Gone once the hero panel appears: never both at once. */
@media (min-width: 760px) {
  .live-strip { display: none; }
}
.live-where { margin: 4px 0 0; font-size: .84rem; color: var(--muted); }

/* ── Scope switch (Scotland / Ayrshire) ─────────────────────────────── */
.scope-switch {
  display: inline-flex; margin: 0 0 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-alt);
}
.scope-switch a {
  padding: 8px 16px; font-size: .9rem; font-weight: 700;
  color: var(--muted); text-decoration: none;
}
.scope-switch a + a { border-left: 1px solid var(--line); }
.scope-switch a:hover { background: #fff; color: var(--ink); }
.scope-switch a.is-on { background: var(--navy); color: #fff; }

/* "All Ayrshire roads" — the panels show two or three; this is the way to the
   rest. Lands on the Ayrshire view, the same scope the panel is showing. */
/* Sits in the Incidents heading, hard right. Drops the heading's uppercase
   and tracking -- it is a link, not part of the label. */
.hl-more {
  margin-left: auto; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; color: var(--amber);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  text-decoration: none;
}
.hl-more:hover { text-decoration: underline; }


/* Nothing on our roads. Green rather than amber: an amber flash for "all
   clear" is a warning about good news. */
.live-strip.ls-clear { border-left-color: #4a7a33; }
.ls-clear .ls-dot { background: #00b843; box-shadow: 0 0 0 3px rgba(0,184,67,.22); }

/* Sections in the mobile strip. Same job as .hl-section on the hero, but this
   panel sits on white. */
.ls-section {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
}
.ls-section:first-of-type { margin-top: 0; }

.ls-more {
  margin-left: auto; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; color: var(--navy-2);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  text-decoration: none;
}
.ls-more:hover { text-decoration: underline; }

/* Warning and gritting badges, dark-on-light for this panel. */
.ls-yellow { background: #fdf0c4; color: #7a5c00; }
.ls-amber  { background: #ffe0a3; color: #7a4f00; }
.ls-red    { background: #f8d4cf; color: #8c2a1c; }
.ls-grit   { background: #d6e8fb; color: #1d4f7a; }

/* Per-section dots. The panel title's dot is the overall state; each section's
   dot is that section's own -- an amber Incidents dot because the Met Office
   has a warning out says the wrong thing. Overrides the state rules above,
   which colour every dot in the panel alike.

   Saturated on purpose: at 8px a muted dot is a grey smudge, and the whole job
   of these is to be readable at a glance. The glow does the work on the dark
   hero, where a flat dot disappears into the photo. */
.hl-dot.dot-ok,   .ls-dot.dot-ok   { background: #00e05a; box-shadow: 0 0 0 3px rgba(0,224,90,.3); }
.hl-dot.dot-warn, .ls-dot.dot-warn { background: #ffb400; box-shadow: 0 0 0 3px rgba(255,180,0,.35); }
.hl-dot.dot-bad,  .ls-dot.dot-bad  { background: #ff2d16; box-shadow: 0 0 0 3px rgba(255,45,22,.4); }

/* The strip sits on white: the greens and reds that read on the dark hero go
   pale and washed out here, so they go deeper rather than brighter. */
.ls-dot.dot-ok   { background: #00b843; box-shadow: 0 0 0 3px rgba(0,184,67,.22); }
.ls-dot.dot-warn { background: #f59e00; box-shadow: 0 0 0 3px rgba(245,158,0,.22); }
.ls-dot.dot-bad  { background: #e01b00; box-shadow: 0 0 0 3px rgba(224,27,0,.25); }