/* ==========================================================================
   SIMPSONS BREAKDOWN RECOVERY SERVICES LTD
   Design system — dynamic blue / red / white, dark high-contrast shell
   ========================================================================== */

:root {
  /* Backgrounds */
  --bg-primary: #070e18;
  --bg-secondary: #0b1727;
  --bg-surface: #11223b;
  --bg-elevated: #162a47;

  /* Brand blues */
  --blue: #1363df;
  --blue-bright: #2f81ff;
  --cyan: #38bdf8;
  --navy: #0b2545;

  /* Emergency red */
  --red: #ef4444;
  --red-deep: #dc2626;
  --red-soft: #f87171;

  /* Action green — WhatsApp's darker brand teal rather than #25D366, so white
     button text clears WCAG AA instead of sitting at roughly 2:1 contrast. */
  --green: #128c7e;
  --green-hover: #0e7267;
  --green-soft: #34d399;

  /* Amber */
  --amber: #fbbf24;

  /* Text */
  --text: #ffffff;
  --text-body: #cbd5e1;
  --text-bright: #e8eef6;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Lines */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-blue: rgba(19, 99, 223, 0.4);

  /* Fonts */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.5);
  --glow-blue: 0 0 22px rgba(19, 99, 223, 0.3);
  --glow-red: 0 6px 20px rgba(239, 68, 68, 0.35);
  --glow-green: 0 6px 20px rgba(34, 197, 94, 0.3);

  /* Layout */
  --shell: 1260px;
  --gutter: 22px;
  /* Desktop offset for the floating WhatsApp button. It has to clear the
     "Powered by Netlify" badge, which the free tier injects into the
     bottom-right corner at a higher z-index than anything we can set — left at
     the usual 22px the badge covers the button and swallows the tap, sending
     people to netlify.com instead of WhatsApp.
     ON THE PRODUCTION DOMAIN (badge gone) this can drop back to 22px. */
  --fab-bottom: 88px;
  --header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` rather than `hidden`: it stops sideways scroll without turning the
     body into the containing block for the fixed header, dock and modals. */
  overflow-x: clip;
  overflow-wrap: break-word;
  /* Clearance for the fixed mobile dock, including the iOS home indicator. */
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) { body { padding-bottom: 0; } }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

/* ---------- Typography scale (fluid, sane) ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--text);
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.22rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.35rem); }
h4 { font-size: 1rem; letter-spacing: 0.02em; }

p { max-width: 68ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}

.lead { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); color: var(--text-body); }
.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }
.tiny { font-size: 0.78rem; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.nowrap { white-space: nowrap; }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}

.section { padding: clamp(48px, 6vw, 82px) 0; }
.section--alt { background: var(--bg-secondary); }
.section--deep { background: #050b14; }

.section-head { max-width: 660px; margin: 0 auto clamp(30px, 4vw, 46px); text-align: center; }
.section-head p { margin-inline: auto; margin-top: 12px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--block { width: 100%; }
.btn--sm { padding: 10px 16px; font-size: 0.84rem; }
.btn--lg { padding: 15px 26px; font-size: 1rem; }

.btn--red {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: #fff;
  box-shadow: var(--glow-red);
}
.btn--red:hover { box-shadow: 0 8px 26px rgba(239, 68, 68, 0.5); }

.btn--green {
  background: var(--green);
  color: #fff;
  box-shadow: var(--glow-green);
}
.btn--green:hover { background: var(--green-hover); }

.btn--blue {
  background: linear-gradient(135deg, var(--blue) 0%, #0d47a1 100%);
  color: #fff;
  box-shadow: var(--glow-blue);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }

.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 11px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb__sep { color: #3f4d63; }
.breadcrumb [aria-current="page"] { color: var(--text-body); font-weight: 600; }

/* ---------- Status ticker ---------- */
.ticker {
  background: #04080f;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  position: relative;
  z-index: 60;
}
.ticker__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding-block: 7px;
}
.ticker__left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ticker__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-soft);
  white-space: nowrap;
}
.ticker__detail { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 860px) { .ticker__detail { display: none; } }
@media (max-width: 560px) { .ticker__note { display: none; } }

.ticker__note {
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 14, 24, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: var(--header-h);
  min-width: 0;
}

.site-header__inner > * { min-width: 0; }

/* White plate keeps the white-background logo crisp on the dark header */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__plate {
  background: #fff;
  border-radius: var(--r-md);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.brand__logo { height: 40px; width: auto; }

@media (max-width: 640px) { .brand__logo { height: 32px; } }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}
.brand__sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: 2px;
}

/* On narrow phones the logo alone carries the brand; the wordmark is dropped
   so the header CTA and menu button always fit without overflow. */
@media (max-width: 700px) { .brand__text { display: none; } }

/* Desktop nav */
.nav { display: none; }

@media (min-width: 1200px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex: 1;
    padding-inline: 8px;
  }
  .nav a {
    font-size: 0.885rem;
    font-weight: 600;
    color: var(--text-body);
    padding: 6px 2px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .nav a:hover,
  .nav a.is-active { color: #fff; border-bottom-color: var(--red); }
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn--green { display: none; }
@media (min-width: 700px) { .header-actions .btn--green { display: inline-flex; } }

/* Below this width the fixed bottom dock owns the call CTA, so the header
   number button is removed rather than squeezed. */
@media (max-width: 640px) { .header-actions .btn--red { display: none; } }

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) { .menu-toggle { display: flex; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: #08121f;
  padding: 10px 0 18px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 13px var(--gutter);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-body);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.mobile-nav__cta { padding: 16px var(--gutter) 4px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Hero ---------- */
/* Full-bleed ambient photo behind the content, blurred down to a colour field
   so the headline and CTAs stay the focus. The photo itself is decorative. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7.5vw, 104px) 0 clamp(60px, 8vw, 110px);
  background: var(--bg-primary);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  /* The blur is baked into the file by build_hero.py, so the browser is not
     stretching a small source and then blurring it — which is what made this
     look pixelated. Only a hair of extra softness is applied here.
     The ?v= query is deliberate: images are cached for a week under a stable
     filename, so a rebuilt hero needs a new URL to reach returning visitors.
     Bump it in BOTH rules below whenever build_hero.py is re-run. */
  background-image: url('../images/hero-bg-sm.jpg?v=2');
}

@media (min-width: 900px) {
  .hero__bg { background-image: url('../images/hero-bg.jpg?v=2'); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 14, 24, 0.72) 0%, rgba(7, 14, 24, 0.58) 45%, rgba(7, 14, 24, 0.92) 100%),
    radial-gradient(900px 520px at 12% -10%, rgba(19, 99, 223, 0.42), transparent 64%),
    radial-gradient(700px 420px at 92% 8%, rgba(239, 68, 68, 0.18), transparent 62%);
}

.hero__inner {
  position: relative;
  max-width: 780px;
}

.hero h1 { margin-bottom: 16px; }
.hero__accent {
  display: block;
  background: linear-gradient(135deg, var(--red-soft) 0%, var(--red-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--red);
}
/* The paragraphs that sit directly on the hero photo need a lighter tone than
   --text-body: measured against the sharpened backdrop, #cbd5e1 fell to 4.1:1
   under the brightest patch of sky. #e8eef6 clears 4.5:1 for the area worst
   case (check_hero_contrast.py). */
.hero__lead { margin-bottom: 26px; color: var(--text-bright); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(19, 99, 223, 0.16);
  border: 1px solid var(--line-blue);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
@media (max-width: 560px) { .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; } }

.review-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 12px 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
  max-width: 100%;
}
.review-badge:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); }
.stars { color: var(--amber); font-size: 0.95rem; letter-spacing: 1px; white-space: nowrap; }
.review-badge__link { color: var(--cyan); font-weight: 700; font-size: 0.84rem; white-space: nowrap; }

/* ---------- Panel / cards ---------- */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-lg);
}
.panel--glow { border-color: var(--line-blue); box-shadow: var(--shadow-lg), var(--glow-blue); }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.panel__title { font-family: var(--font-display); font-size: 1.35rem; color: #fff; text-transform: uppercase; }

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
}
.stat__value { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--cyan); }
.stat__value--green { color: var(--green-soft); }
.stat__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 5px;
}

.check-list { display: flex; flex-direction: column; gap: 11px; font-size: 0.9rem; }
.check-list li { display: flex; gap: 9px; align-items: flex-start; }
.check-list li::before {
  content: "✓";
  color: var(--cyan);
  font-weight: 800;
  flex-shrink: 0;
}

/* ---------- Metric strip ---------- */
.metrics {
  background: var(--bg-secondary);
  border-block: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px) 0;
}
.metric {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.metric:hover { border-color: var(--line-blue); transform: translateY(-2px); }
.metric__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(19, 99, 223, 0.16);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.metric__icon--amber { background: rgba(251, 191, 36, 0.16); color: var(--amber); }
.metric__icon--green { background: rgba(34, 197, 94, 0.16); color: var(--green-soft); }
.metric__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  color: #fff;
}
.metric__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---------- Photo media ---------- */
.media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.media--wide img { aspect-ratio: 16 / 10; }
.media--square img { aspect-ratio: 1 / 1; }
.media:hover img { transform: scale(1.04); }

.media__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(4, 8, 15, 0.88);
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-full);
}

.media__caption {
  padding: 16px 18px;
  border-top: 1px solid var(--line);
}
.media__caption h3 { font-size: 1.1rem; margin-bottom: 6px; }
.media__caption p { font-size: 0.86rem; color: var(--text-muted); }

/* ---------- Floating WhatsApp action ---------- */
.fab {
  position: fixed;
  right: 20px;
  bottom: var(--fab-bottom);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--r-full);
  background: var(--green);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(18, 140, 126, 0.55);
  animation: fab-pulse 2.8s infinite;
  transition: transform 0.2s ease, background 0.2s ease;
}
.fab:hover { background: var(--green-hover); transform: translateY(-2px); }
.fab__label { white-space: nowrap; }

@keyframes fab-pulse {
  0%   { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(18, 140, 126, 0.55); }
  70%  { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 16px rgba(18, 140, 126, 0); }
  100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(18, 140, 126, 0); }
}

/* Below the dock breakpoint the FAB shrinks to a circle and lifts clear of the
   fixed action bar so the two WhatsApp entry points do not stack up. */
@media (max-width: 899px) {
  .fab {
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    padding: 0;
    width: 54px;
    height: 54px;
    justify-content: center;
    gap: 0;
  }
  .fab__label { display: none; }
  .fab .icon { width: 26px; height: 26px; }
}

/* ---------- Our work: photo + job cards ---------- */
.work-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-blue);
  box-shadow: var(--shadow-lg), var(--glow-blue);
}
.work-card__media {
  position: relative;
  background: #080f1a;
  overflow: hidden;
}
.work-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.work-card:hover .work-card__media img { transform: scale(1.05); }
.work-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(4, 8, 15, 0.9);
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-full);
}
.work-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.work-card__body h3 { font-size: 1.15rem; }
.work-card__body p { font-size: 0.87rem; color: var(--text-muted); margin: 0; }
.work-card__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cyan);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* ---------- Route list (area pages) ---------- */
.route-list { display: flex; flex-direction: column; gap: 14px; }
.route-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid rgba(19, 99, 223, 0.45);
}
.route-list strong { font-size: 0.95rem; }

/* ---------- Compact area tiles ---------- */
.area-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 17px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.area-tile:hover {
  border-color: var(--line-blue);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
.area-tile__name { font-family: var(--font-display); font-size: 1.16rem; color: #fff; text-transform: uppercase; }
.area-tile__meta { font-size: 0.74rem; color: var(--text-dim); margin-top: 2px; }
.area-tile__arrow { color: var(--cyan); font-weight: 800; flex-shrink: 0; }

.area-tile--base { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.07); }
.area-tile--base .area-tile__meta { color: var(--red-soft); }

/* ---------- Area cards ---------- */
.area-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.area-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-blue);
  box-shadow: var(--shadow-lg), var(--glow-blue);
}
.area-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.area-card__name { font-size: 1.45rem; }
.area-card__badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--red-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: var(--r-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.area-card__desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.area-card__meta { display: flex; flex-direction: column; gap: 8px; font-size: 0.83rem; color: var(--text-body); }
.area-card__meta li { display: flex; gap: 8px; align-items: center; }
.area-card__meta li::before { content: "✓"; color: var(--green-soft); font-weight: 800; flex-shrink: 0; }

/* ---------- Service rows ---------- */
.service-row {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: grid;
  /* The CTA column is sized to its button, not to a fixed 168px. A fixed width
     clipped the wider labels ("Emergency motorway tow" is 225px) and, because
     the button is flex-end aligned, the overflow ran left over the paragraph
     beside it. max-content means the label can never collide with the copy. */
  grid-template-columns: 54px minmax(0, 240px) minmax(0, 1fr) max-content;
  gap: 18px;
  align-items: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.service-row:hover { border-color: var(--line-blue); background: var(--bg-elevated); }

@media (max-width: 1000px) {
  .service-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "num name" ". desc" ". cta"; }
  .service-row__num { grid-area: num; }
  .service-row__name { grid-area: name; }
  .service-row__desc { grid-area: desc; }
  .service-row__cta { grid-area: cta; }
}
@media (max-width: 560px) {
  .service-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "name" "desc" "cta"; }
}

.service-row__num { font-family: var(--font-display); font-size: 2rem; color: var(--red); line-height: 1; }
.service-row__name h3 { font-size: 1.2rem; margin-bottom: 4px; }
.service-row__tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan);
}
.service-row__desc { font-size: 0.88rem; color: var(--text-muted); }
.service-row__cta { display: flex; justify-content: flex-end; }
/* One line per label: a wrapped CTA changes the row height and reads as broken
   next to a single-line paragraph. */
.service-row__cta .btn { white-space: nowrap; }
@media (max-width: 1000px) { .service-row__cta { justify-content: flex-start; } .service-row__cta .btn { width: 100%; } }

/* ---------- Reviews carousel ---------- */
.carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }

.carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: #24354f; border-radius: 4px; }

.review {
  flex: 0 0 340px;
  max-width: 86vw;
  scroll-snap-align: start;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.review:hover { border-color: var(--cyan); transform: translateY(-3px); }
@media (min-width: 768px) { .review { flex-basis: 372px; } }

.review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.review__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  flex-shrink: 0;
}
.review__name { font-weight: 700; color: #fff; font-size: 0.92rem; }
.review__source { font-size: 0.7rem; color: var(--text-dim); }
.review__quote { font-size: 0.9rem; font-style: italic; color: var(--text-body); line-height: 1.6; }
.review__tag { font-size: 0.72rem; font-weight: 700; color: var(--green-soft); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq__item.is-open { border-color: var(--line-blue); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 0.98rem;
  color: #fff;
}
.faq__chev { color: var(--cyan); transition: transform 0.25s ease; flex-shrink: 0; }
.faq__item.is-open .faq__chev { transform: rotate(180deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 20px 18px; font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 26px; align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.contact-card > span { min-width: 0; }
.contact-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(19, 99, 223, 0.16);
  color: var(--cyan);
}
.contact-card__icon--red { background: rgba(239, 68, 68, 0.16); color: var(--red-soft); }
.contact-card__icon--green { background: rgba(34, 197, 94, 0.16); color: var(--green-soft); }
.contact-card__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-card__value { font-family: var(--font-display); font-size: 1.6rem; color: var(--red-soft); display: block; line-height: 1.15; }
.contact-card__value--green { color: var(--green-soft); }
.contact-card__value--blue { color: var(--blue-bright); font-size: 1rem; font-family: var(--font-body); font-weight: 700; }

/* Long unbroken strings (email addresses, postcodes lists) must wrap rather
   than widen the page — this was the source of horizontal overflow on mobile. */
.contact-card__value,
.contact-card__value--blue,
.modal__box a,
.modal__box p,
.footer-col a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 0.92rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: rgba(255, 255, 255, 0.08);
}
.field select { appearance: none; background-image: none; }
.field select option { background: #0b1727; color: #fff; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
@media (max-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 7, 13, 0.88);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__box {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  background: var(--bg-surface);
  border: 1px solid var(--line-blue);
  border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 30px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.7);
  transform: translateY(12px) scale(0.985);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.is-open .modal__box { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--red-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-full);
  margin-bottom: 13px;
}
.modal__title { font-size: clamp(1.6rem, 5vw, 2.05rem); margin-bottom: 10px; }
.modal__lead { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 20px; }
.modal__cta { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.modal__foot {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #04080f;
  border-top: 1px solid var(--line);
  padding: clamp(44px, 5vw, 64px) 0 26px;
  font-size: 0.88rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 38px;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-col h4 { font-size: 1.05rem; margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--text-muted); font-size: 0.88rem; }
.footer-links a:hover { color: #fff; padding-left: 3px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.footer-bottom nav { display: flex; gap: 16px; }
.footer-bottom nav a:hover { color: #fff; }
/* Agency credit — a quiet link on the copyright line, not a badge. */
.footer-credit { color: var(--text-muted); }
.footer-credit:hover { color: #fff; text-decoration: underline; }

/* ---------- Mobile action dock ---------- */
.dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  gap: 9px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: rgba(4, 8, 15, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 900px) { .dock { display: none; } }

.dock__btn {
  flex: 1;
  padding: 13px 10px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* ---------- Utility ---------- */
.text-red { color: var(--red-soft); }
.text-cyan { color: var(--cyan); }
.text-green { color: var(--green-soft); }
.text-amber { color: var(--amber); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 10px; }
.mb-md { margin-bottom: 18px; }
.mb-lg { margin-bottom: 28px; }
.mt-md { margin-top: 18px; }
.mt-lg { margin-top: 30px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  z-index: 3000;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}