/*
Theme Name: MotorDoc Pro
Description: Custom theme for MotorDoc Pro (mobile DPF cleaning, Watford/Herts). Replicates the proven conversion structure and visual design of the previous Webflow site: hero/warning-light hook, social proof, 30-day warranty, 4-step process, pricing, FAQ, contact.
Author: Andras Dietrich
Version: 1.1
Text Domain: motordoc-pro
*/

/* Ubuntu, self-hosted (2026-07-26, pre-launch).
   Was an @import from fonts.googleapis.com, which sent every visitor's IP to
   Google on page load, before the consent banner had been answered. That
   contradicted the consent layer built in the same job, and an @import also
   blocks rendering until it resolves. Files in assets/fonts/, latin + latin-ext
   only. latin-ext stays because Hungarian names appear in the testimonials.
   Regenerate by pulling the Google CSS with a modern user-agent and keeping the
   latin and latin-ext faces. */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ubuntu-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ubuntu-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ubuntu-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ubuntu-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ubuntu-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ubuntu-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/ubuntu-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/ubuntu-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #ffffff;
  --color-text: #08000d;
  --color-muted: #55505a;
  --color-accent: #c44100; /* matches the live site's CTA orange */
  --color-accent-dark: #9a3400;
  --color-hero-overlay: rgba(29, 29, 29, 0.55);
  --color-border: #e8e5e6;
  --font-base: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --max-width: 1140px;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 { font-family: var(--font-base); font-weight: 700; line-height: 1.15; margin: 0 0 20px; }
h1 { font-size: 3.2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; }
p { font-size: 1.1rem; color: var(--color-text); }

a { color: var(--color-accent); }

/* Header / nav — white bar, black text, orange accents, sits above the hero */
.site-header {
  position: relative;
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-text);
  text-decoration: none;
}
.site-logo img { height: 36px; width: auto; border-radius: 0; }
.primary-menu,
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu li,
.footer-menu li { list-style: none; }
.primary-menu a {
  display: inline-block;
  background: none;
  border: none;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: color 0.15s ease, background 0.15s ease;
}
.primary-menu a:hover,
.primary-menu a:focus-visible,
.primary-menu li.current-menu-item a {
  color: var(--color-accent);
  background: rgba(196, 65, 0, 0.1);
}

/* Section blocks */
.section { padding: 64px 0; }
.section.container,
.section .container { padding-top: 0; padding-bottom: 0; }
.section--hero {
  padding-top: 96px;
  padding-bottom: 96px;
  background: #3b3939 url('assets/images/hero-van-motordoc.webp') center/cover no-repeat;
  position: relative;
  color: #fff;
}
.section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-hero-overlay);
}
.section--hero .container { position: relative; z-index: 1; }
.section--hero h1,
.section--hero p { color: #fff; }
.hero .warning-hook { color: #ffd6c2; font-weight: 600; font-size: 1.2rem; margin-bottom: 12px; }

/* Phase A: sections that carry an explicit dark/light modifier opt out of the
   automatic alternation, so the hybrid system below can control them. Pages
   built before Phase A use no modifiers, so their appearance is unchanged. */
.section:nth-of-type(even):not(.section--hero):not(.section--dark):not(.section--light):not(.section--light-alt) { background: #faf9f8; }

.warning-hook, .warranty, .difference, .why-us, .included, .why-it-matters,
.symptoms, .brand-notes, .fix-the-cause, .contact-details { background: #faf9f8; }
/* This legacy pair predates the dark/light modifier system and has higher
   specificity (3 classes) than .section.section--dark (2 classes), so on any
   page where a .section--dark lands 2nd or 3rd after the hero, it silently
   forced that section back to white while its text stayed styled for a dark
   background (near-white on white). Excluding explicit modifiers here lets
   the hybrid system below win, matching the guard already used at line 127. */
.section--hero + .section:not(.section--dark):not(.section--light):not(.section--light-alt),
.section--hero + .section + .section:not(.section--dark):not(.section--light):not(.section--light-alt) { background: #ffffff; }

.cta-button {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  margin: 6px 12px 6px 0;
  transition: background 0.15s ease;
}
.cta-button:hover { background: var(--color-accent-dark); }
.cta-button--secondary {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.cta-button--secondary:hover { background: rgba(255,255,255,0.15); }

.process-steps { list-style: none; counter-reset: step; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin: 0; }
.process-steps li { counter-increment: step; position: relative; padding-left: 44px; font-size: 1.05rem; }
.process-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
}

.pricing-table { display: flex; gap: 24px; flex-wrap: wrap; }
.pricing-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px; flex: 1; min-width: 240px; background: #fff; }

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 4px 0;
}
/* The summary is the tap target that opens the answer, so it needs a real 44px
   minimum like every other control on the site, not the ~25px a bare line of
   text would give it. */
.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  padding: 14px 0;
  font-size: 1.1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq-item p { margin: 0 0 16px; color: var(--color-muted); }

blockquote {
  margin: 0 0 20px;
  padding: 20px 24px;
  border-left: 4px solid var(--color-accent);
  background: #fff;
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote p { margin: 0 0 8px; }
blockquote cite { font-style: normal; font-weight: 600; color: var(--color-muted); }

.social-proof { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.site-footer {
  padding: 40px 0;
  background: #ffffff;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.site-footer p { color: var(--color-muted); }
.site-footer a { color: var(--color-text); font-weight: 500; }
.site-footer a:hover { color: var(--color-accent); }
.footer-menu { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer-menu a { color: var(--color-text); text-decoration: none; }
.footer-menu a:hover { color: var(--color-accent); }

img { max-width: 100%; height: auto; border-radius: var(--radius); }
.site-logo img, .footer-menu img { border-radius: 0; }

/* The .partner-logos rules were removed in Phase B along with the five partner
   badges they styled. Those badges assert trade accreditations and memberships
   (Shell Helix, IGA, Trust My Garage, HVS, DPF Doctor) that nothing in the vault
   confirms Kris holds, so they are not shipped. The SVGs are still in assets/
   but are referenced by nothing. If Kris confirms a membership in writing, add
   the badge and its CSS back then, one badge at a time. */

.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.photo-grid img { width: 100%; height: 220px; object-fit: cover; }

.map-embed { margin: 20px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.map-embed iframe { display: block; }

@media (max-width: 640px) {
  h1 { font-size: 2.2rem; }
}

/* =========================================================================
   PHASE A — hybrid dark/light landing page system
   Built for Home and /diagnostic-health-check/ only. Everything below is
   additive: the five pre-Phase-A page templates use none of these classes,
   so they keep their original light appearance for side-by-side comparison.
   Accent orange #c44100 is unchanged. On dark backgrounds a lighter tint of
   the same orange is used for text and icons, because #c44100 on near-black
   does not clear contrast minimums.
   ========================================================================= */

:root {
  --color-dark: #0d0b0f;
  --color-dark-alt: #16131a;
  --color-dark-text: #f5f3f6;
  --color-dark-muted: #b5aebb;
  --color-dark-border: rgba(255, 255, 255, 0.14);
  --color-accent-light: #ff7a3d; /* text/icon tint of --color-accent, for dark sections only */
  --header-height: 72px;
}

/* ---------- Sticky header with a permanent tap-to-call button ---------- */

.site-header {
  position: sticky;
  top: 0;
}
.site-header .container {
  gap: 16px;
  flex-wrap: nowrap;
}
.site-header nav {
  margin-left: auto;
}
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
  min-height: 48px;
  transition: background 0.15s ease;
}
.header-call:hover,
.header-call:focus-visible { background: var(--color-accent-dark); color: #fff; }
.header-call img { height: 18px; width: 18px; border-radius: 0; }
.header-call .header-call__label { display: inline; }
.header-call .header-call__short { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  color: var(--color-text);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

/* ---------- Anchor targets under the sticky header ---------- */

/* The header is sticky, so an anchor jump parks the target underneath it and
   the reader lands on the wrong thing. The diagnostic page links straight to
   #egr, #adblue and #nox on Services, and every page has a #contact form, so
   this is a real path, not a hypothetical one. 96px clears the 82px header. */
h2[id],
h3[id],
section[id] { scroll-margin-top: 96px; }

/* ---------- Section modifiers ---------- */

.section.section--dark {
  background: var(--color-dark);
  color: var(--color-dark-text);
}
.section.section--dark-alt {
  background: var(--color-dark-alt);
  color: var(--color-dark-text);
}
.section.section--light { background: #ffffff; }
.section.section--light-alt { background: #faf9f8; }

.section--dark h2,
.section--dark h3,
.section--dark p,
.section--dark li,
.section--dark td,
.section--dark th,
.section--dark label { color: var(--color-dark-text); }
.section--dark .section-lead,
.section--dark .muted { color: var(--color-dark-muted); }
.section--dark a:not(.cta-button):not(.header-call) { color: var(--color-accent-light); }

.section-head { max-width: 760px; }
.section-lead { font-size: 1.15rem; color: var(--color-muted); }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.section--dark .eyebrow { color: var(--color-accent-light); }

/* ---------- Hero ---------- */

/* The hero keeps its photo. This has to come after .section.section--dark,
   which would otherwise flatten the background to solid black. */
/* Filename deliberately changed from hero-bg.webp. That file held an
   unlicensed, watermarked iStock photo of a competitor's van, and images are
   served with max-age=604800, so reusing the filename left every device that
   had already visited serving the stock image from cache for another week.
   Changing the URL is the only way to guarantee nobody sees it again. */
.section--hero.hero-home {
  background: #3b3939 url('assets/images/hero-van-motordoc.webp') center/cover no-repeat;
}
.hero-home::before,
.hero-diag::before { background: rgba(10, 8, 12, 0.78); }
.hero-diag {
  background: var(--color-dark);
  padding-top: 80px;
  padding-bottom: 80px;
  color: #fff;
  position: relative;
}
.hero-inner { max-width: 760px; }
.hero-inner h1 { margin-bottom: 18px; }
.hero-lead { font-size: 1.25rem; margin-bottom: 14px; }
.hero-sub { color: #ded8e2 !important; margin-bottom: 24px; }

.tick-list { list-style: none; padding: 0; margin: 0 0 30px; }
.tick-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 1.05rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 10px;
  border-left: 3px solid var(--color-accent-light);
  border-bottom: 3px solid var(--color-accent-light);
  transform: rotate(-45deg);
}
.section--light .tick-list li::before,
.section--light-alt .tick-list li::before {
  border-color: var(--color-accent);
}

/* Column modifier, for short single-word items like the Hertfordshire town
   groups. Same component, same tick, just wrapped into columns instead of one
   long single-file list that would run to 22 rows on a phone. */
.tick-list--columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 24px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .cta-button { margin: 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cta-row .cta-button img { height: 20px; width: 20px; border-radius: 0; }

/* ---------- Intro band ---------- */

/* Holds the copy lifted out of the hero. It sits directly above another light
   section, so its bottom padding is trimmed to stop the two reading as a large
   empty gap. */
.section--intro { padding-bottom: 20px; }

/* ---------- Trust strip ---------- */

.trust-strip { padding: 28px 0; border-top: 1px solid var(--color-dark-border); border-bottom: 1px solid var(--color-dark-border); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-dark-text);
  text-decoration: none;
  padding: 8px;
  border-radius: var(--radius);
}
a.trust-item:hover, a.trust-item:focus-visible { background: rgba(255,255,255,0.06); color: var(--color-dark-text); }
.trust-item .trust-icon { font-size: 1.5rem; line-height: 1; }
.trust-item .trust-sub { font-size: 0.85rem; font-weight: 400; color: var(--color-dark-muted); }

/* ---------- The 12-point check ---------- */

.check-grid {
  list-style: none;
  counter-reset: check;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.check-grid li {
  counter-increment: check;
  position: relative;
  padding: 14px 14px 14px 56px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius);
  font-size: 1rem;
}
.check-grid li::before {
  content: counter(check);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.check-grid--detailed li { padding-bottom: 16px; }
.check-grid--detailed li strong { display: block; margin-bottom: 4px; }
.check-grid--detailed li span { color: var(--color-dark-muted); font-size: 0.97rem; }

.callout {
  margin: 28px 0 0;
  padding: 20px 24px;
  border-left: 4px solid var(--color-accent-light);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p { margin: 0; }
.section--light .callout,
.section--light-alt .callout {
  border-left-color: var(--color-accent);
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Comparison table ---------- */

.compare-wrap { margin-top: 28px; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
}
.compare-table thead th { background: var(--color-dark); color: #fff; font-weight: 700; }
.compare-table thead th:first-child { background: var(--color-dark); }
.compare-table tbody th { font-weight: 600; width: 34%; }
.compare-table .col-us { color: var(--color-text); font-weight: 600; }
.compare-table .col-them { color: var(--color-muted); }
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: 0; }

/* ---------- Case study cards ---------- */

.case-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin-top: 28px;
  -webkit-overflow-scrolling: touch;
}
.case-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.case-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.case-card p { font-size: 1rem; color: var(--color-muted); margin: 0; }

/* ---------- Recent work tiles (Testimonials) ---------- */

/* Photo-led version of .case-card, deliberately built on the same border,
   radius and muted-text tokens rather than as a third card style. The whole
   tile is the link, so there is one target instead of a tiny "read more". */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.work-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.work-tile:hover,
.work-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.work-tile:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Fixed aspect box so a portrait phone shot and a landscape one sit in the
   same grid without the rows going ragged. */
.work-tile__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}

.work-tile__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
}

.work-tile__place {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

.work-tile__job {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .work-tile { transition: none; }
  .work-tile:hover,
  .work-tile:focus-visible { transform: none; }
}

/* ---------- Reviews on dark ---------- */

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.section--dark .review-grid blockquote {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--color-accent-light);
  margin: 0;
}
.section--dark .review-grid blockquote p { color: var(--color-dark-text); }
.section--dark .review-grid blockquote cite { color: var(--color-dark-muted); }
.review-footnote { margin-top: 24px; font-size: 1rem; }

/* ---------- Coverage ---------- */

.coverage-note { font-size: 1.05rem; }

/* ---------- Inline figures ---------- */

/* width:100% matters as much as the cap: without it the image renders at the
   capped 460px even inside a 375px viewport, which pushes the whole document
   sideways. */
.inline-figure {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 32px auto 0;
}

/* ---------- Standalone text CTAs ---------- */

/* These sit on their own line and act as buttons, so they need a real tap
   target rather than the 20px a bare inline link gets. */
.text-cta {
  display: inline-block;
  padding: 12px 0;
  min-height: 44px;
  font-weight: 600;
}

/* ---------- Paired infographics ---------- */

.infographic-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.infographic-pair img { width: 100%; height: auto; }

/* ---------- Pricing ---------- */

.price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.price-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}
.price-card--feature { border-color: var(--color-accent); border-width: 2px; }
.price-card .price-figure {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--color-text);
}
.price-card .price-label { font-weight: 600; margin: 0 0 12px; }
.price-card p { font-size: 1rem; color: var(--color-muted); }
.price-card .credit-line { color: var(--color-text); font-weight: 600; }

/* ---------- Contact form (Contact Form 7) ---------- */

.form-shell { max-width: 780px; margin-top: 28px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-field .req { color: var(--color-accent-light); }
.section--light .form-field .req,
.section--light-alt .form-field .req { color: var(--color-accent); }
.form-field .opt { font-weight: 400; color: var(--color-dark-muted); }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.wpcf7 textarea { min-height: 110px; }
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
  outline: 3px solid var(--color-accent-light);
  outline-offset: 1px;
}
.form-submit { grid-column: 1 / -1; margin: 4px 0 0; }
.wpcf7 input[type="submit"] {
  background: var(--color-accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 16px 32px;
  font-family: var(--font-base);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 52px;
  width: 100%;
}
.wpcf7 input[type="submit"]:hover { background: var(--color-accent-dark); }
.wpcf7-not-valid-tip { color: #ffb4a0; font-size: 0.9rem; }
.section--light .wpcf7-not-valid-tip,
.section--light-alt .wpcf7-not-valid-tip { color: #b3200a; }
.wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 18px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: var(--radius);
  border-width: 2px !important;
  font-size: 1rem;
}
.section--dark .wpcf7-response-output { color: var(--color-dark-text); }
.wpcf7-spinner { margin-left: 12px; }

/* ---------- Floating WhatsApp button ---------- */

.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.whatsapp-float img { width: 30px; height: 30px; border-radius: 0; }

/* ---------- Footer ---------- */

.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  width: 100%;
}
.site-footer .footer-hours { list-style: none; padding: 0; margin: 8px 0 0; }
.site-footer .footer-hours li { display: flex; justify-content: space-between; gap: 16px; max-width: 280px; font-size: 0.98rem; }
.site-footer h3 { font-size: 1rem; margin-bottom: 10px; }
.site-footer .footer-badges { margin-top: 10px; font-weight: 600; color: var(--color-text); }
/* Contact links are the ones people actually tap from a phone. */
.site-footer .footer-contact a { display: inline-block; padding: 12px 0; min-height: 44px; }
.site-logo { min-height: 44px; }

/* ---------- Town page: local job proof ---------- */

/* Modelled on .case-card (white, border, radius) with an accent spine, so it
   reads as the page's proof block without introducing a new visual language. */
.job-proof {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 28px;
  max-width: 780px;
}
.job-proof__vehicle {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 16px;
}
.job-proof__list { margin: 0; }
.job-proof__list dt {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}
.job-proof__list dd {
  margin: 0 0 16px;
  color: var(--color-muted);
  font-size: 1rem;
}
.job-proof__list dd:last-child { margin-bottom: 0; }
/* Real job photo (plate-audited). Capped so a portrait phone shot doesn't
   dominate the card; height:auto keeps it undistorted. */
.job-proof__photo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius);
  margin: 0 0 20px;
}

/* Optional second proof shot, below the written detail rather than above it:
   the photograph opens the card, the words explain it, then the diagnostic
   screen backs the words up. Only Stevenage carries one so far. */
.job-proof__photo--second {
  margin: 24px 0 0;
}

/* ---------- Cookie consent banner ---------- */

/* Only ever rendered when a tag container ID is configured (inc/tracking.php),
   and the script reveals it only when no choice has been stored, so a returning
   visitor never sees it twice.

   `hidden` is honoured explicitly: a display rule elsewhere in this file can
   otherwise outrank the attribute's default styling and leave the banner on
   screen for someone who already answered. */
.consent-banner[hidden] { display: none; }

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--color-dark);
  color: var(--color-dark-text);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.32);
  padding: 20px 0;
}
.consent-banner__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.consent-banner__text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.98rem;
  line-height: 1.5;
}
/* Accent tint for text on near-black, never the button orange, which does not
   clear contrast minimums as text (same rule the hybrid design already uses). */
.consent-banner__text a { color: var(--color-accent-light); text-decoration: underline; }

/* Accept and Reject carry EQUAL weight on purpose. A reject option that is
   hidden, greyed or made to look secondary is the pattern regulators actually
   act on, and it is not what "properly" means. */
.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.consent-banner__actions .cta-button {
  min-height: 44px;
  padding: 12px 26px;
  cursor: pointer;
  border: 0;
  font: inherit;
}

/* The floating WhatsApp button sits bottom-right at the same corner, and the
   banner is injected after it in the DOM, so CSS cannot push it up from here.
   Hiding it for the seconds the banner is open is cleaner than two controls
   fighting for the same thumb position. The script removes this class the
   moment a choice is made. */
body.has-consent-banner .whatsapp-float { display: none; }

@media (max-width: 640px) {
  .consent-banner { padding: 14px 0; }
  .consent-banner__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  /* flex-basis follows the MAIN axis, so the 320px above becomes a 320px HEIGHT
     once this stacks. Measured at 375x812 that pushed the banner to 441px, over
     half the screen, on a site whose whole job is getting the phone to ring.
     Reset to content height. */
  .consent-banner__text { flex: 0 0 auto; font-size: 0.92rem; }
  .consent-banner__actions .cta-button { flex: 1 1 0; justify-content: center; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .site-header .container { flex-wrap: wrap; }
  /* The toggle only appears once JS has confirmed it can drive it. Without
     JS the menu stays expanded rather than becoming unreachable. */
  .has-js .nav-toggle { display: inline-flex; order: 3; }
  .site-header nav { order: 4; flex-basis: 100%; margin-left: 0; }
  .has-js .site-header nav { display: none; }
  .has-js .site-header nav[data-open="true"] { display: block; }
  .primary-menu { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .primary-menu a { display: block; padding: 12px 14px; min-height: 48px; }
  .header-call { order: 2; margin-left: auto; }
}

@media (max-width: 780px) {
  .check-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .section--hero { padding-top: 56px; padding-bottom: 56px; }
  .hero-diag { padding-top: 48px; padding-bottom: 48px; }
  h2 { font-size: 1.65rem; }
  .hero-lead { font-size: 1.1rem; }

  .trust-grid { grid-template-columns: 1fr 1fr; }

  .cta-row { flex-direction: column; }
  .cta-row .cta-button { width: 100%; }

  /* At 375px the logo (180) + full number (158) + toggle (48) overflow the
     335px of usable width and wrap the sticky header onto two rows. Shortening
     the label to "Call" keeps it on one row and roughly halves the header
     height. The full number is still one tap away, and repeated in the hero
     CTA directly below and in the footer.
     These need .header-call in front: the base rules that show/hide these
     spans are two classes deep, so a bare .header-call__label would lose. */
  .header-call .header-call__label { display: none; }
  .header-call .header-call__short { display: inline; }
  .header-call { padding: 12px 16px; }
  .site-header .container { gap: 10px; }
  .site-logo img { height: 30px; }

  /* Comparison table collapses to stacked cards: a 6-row table cannot fit
     375px without horizontal scroll, and body-level scroll is a QA failure. */
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td { display: block; width: 100%; }
  .compare-table thead { display: none; }
  .compare-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
  }
  .compare-table tbody tr:last-child { border-bottom: 0; }
  .compare-table tbody th {
    width: 100%;
    padding: 0 16px 8px;
    font-size: 1.02rem;
  }
  .compare-table tbody td {
    border-bottom: 0;
    padding: 4px 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .compare-table tbody td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: 0.9rem;
    flex: 0 0 auto;
  }

  .case-scroller { grid-auto-columns: 85%; }
  .site-footer .container { flex-direction: column; align-items: flex-start; }
}