/* ==========================================================================
   EE MOTORS LTD — Design System
   Black base, one accent (the red from the EE Motors wordmark), high
   contrast, mobile-first. Authored at 390px, scaled up. No build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — charcoal, cool-neutral, deepening to the logo's own black.

     --black is sampled straight out of logo.png, whose background is #040404
     rather than pure #000. The header and footer use exactly this value so the
     logo — an opaque rectangular PNG — melts into the bar instead of sitting
     in a faintly visible box. If the logo file is ever re-exported, re-sample
     a corner pixel and update this. */
  --black:   #040404;
  --ink-950: #040404;
  --ink-900: #0D0F12;
  --ink-850: #121519;
  --ink-800: #171B20;
  --ink-750: #1D2228;
  --ink-700: #252B33;

  /* Lines */
  --line:      #262C34;
  --line-soft: #1B2026;
  --line-hard: #38414C;

  /* Text */
  --chalk: #EEF1F4;
  --fog:   #A3ADB9;
  --fog-dim: #77828F;

  /* THE ACCENT — the red from the EE Motors wordmark.
     Two values, because no single red does both jobs on a black page:

       --red-text  bright, for text/icons/rules ON the dark background.
                   6.01:1 on --ink-900, 5.58:1 on a panel. Passes AA.
       --red       deeper, for FILLED surfaces carrying white text —
                   buttons, badges, the offer bar. 5.81:1 with white.
                   The bright one would only manage 3.19:1 filled, which
                   fails, so never use --red-text as a background.

     Hover brightens to --red-hi (5.06:1 with white), still AA. */
  --red-text: #FF5347;
  --red:      #C42419;
  --red-hi:   #D42A20;
  --red-dp:   #9E1A11;
  --red-glow: rgba(255, 83, 71, 0.18);
  --on-red:   #FFFFFF;

  /* Accent hairline, for the few panels that must stand out from the ordinary
     --line boxes: the free-recovery card, the lead price tile, the booking
     panel. One token rather than three literals — written out longhand, two of
     them were missed when the theme went from amber to red and sat there
     glowing orange on a red and black page. */
  --red-edge: rgba(255, 83, 71, 0.34);

  /* "FREE" reads as white rather than green — the brief is red and black,
     and white already stands apart from the red price figures. */
  --free: #FFFFFF;

  /* Rating stars. The one warm colour on the site, and deliberately not the
     accent: red already means "this is the action", and a red star row would
     read as a warning rather than a score. */
  --gold: #F7B733;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Elevation. On dark surfaces, light does more work than shadow. */
  --lift-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.4);
  --lift-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 32px -12px rgba(0,0,0,0.7);
  --lift-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 28px 60px -24px rgba(0,0,0,0.85);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Fluid scale — 390px floor, 1440px ceiling */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --t-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
  --t-md:   clamp(1.06rem, 0.99rem + 0.32vw, 1.25rem);
  --t-lg:   clamp(1.28rem, 1.13rem + 0.65vw, 1.65rem);
  --t-xl:   clamp(1.62rem, 1.34rem + 1.20vw, 2.35rem);
  --t-2xl:  clamp(2.05rem, 1.55rem + 2.15vw, 3.35rem);
  --t-3xl:  clamp(2.55rem, 1.70rem + 3.65vw, 4.75rem);
  --t-4xl:  clamp(3.10rem, 1.75rem + 5.80vw, 6.50rem);

  /* Rhythm */
  --gutter: clamp(1.15rem, 0.85rem + 1.3vw, 2rem);
  --section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --maxw: 1240px;

  /* Motion — fast, decisive, never in the way */
  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* Sticky mobile bar height, so content can clear it */
  --bar-h: 62px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  background: var(--ink-900);
  color: var(--chalk);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The HTML `hidden` attribute only sets `display:none` in the UA stylesheet,
   so ANY author rule that sets display beats it. `.btn { display:inline-flex }`
   and `.cc__options { display:grid }` both did exactly that, and elements
   marked hidden rendered anyway. This makes the attribute mean what it says. */
[hidden] { display: none !important; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--red-text);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--red); color: var(--on-red); }

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--red); color: var(--on-red);
  padding: 0.75rem 1.15rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: 0; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--red-text); }

/* Eyebrow / section kicker — small, tracked-out, monospaced */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
}
.kicker::before {
  content: ''; width: 22px; height: 2px;
  background: var(--red-text); flex: none;
}
.kicker--plain { color: var(--fog-dim); }
.kicker--plain::before { background: var(--line-hard); }

.lede {
  font-size: var(--t-md);
  color: var(--fog);
  line-height: 1.55;
  max-width: 62ch;
}

/* Hairline rule with a bright notch — a recurring structural motif */
.rule {
  height: 1px; background: var(--line);
  position: relative; border: 0;
}
.rule::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 56px; height: 1px; background: var(--red-text);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-750);
  --btn-fg: var(--chalk);
  --btn-bd: var(--line-hard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-1) var(--ease),
              background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

.btn--primary {
  --btn-bg: var(--red);
  --btn-fg: var(--on-red);
  --btn-bd: var(--red);
  font-weight: 800;
  box-shadow: 0 6px 22px -8px var(--red-glow);
}
.btn--primary:hover {
  --btn-bg: var(--red-hi);
  --btn-bd: var(--red-hi);
  box-shadow: 0 10px 30px -8px rgba(255, 83, 71, 0.35);
}

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--line-hard); }
.btn--ghost:hover { --btn-bg: var(--ink-750); --btn-bd: var(--fog-dim); }

.btn--block { width: 100%; }

/* Every generated icon carries .ico. Never let one stretch to fill a flex
   parent — size is pinned here and on the element itself. */
.ico { flex: none; width: 18px; height: 18px; }
.btn .ico { width: 18px; height: 18px; }

/* Text link with an accent underline that wipes in from the left */
.link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--red-text);
  font-weight: 600;
  position: relative;
  padding-bottom: 2px;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link .ico { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.link:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. OFFER BAR — free recovery, above everything.
   The whole strip is a phone link, so it needs to behave like one target:
   one row, centred, never stacking the number onto its own line.
   -------------------------------------------------------------------------- */
.offerbar {
  display: block;
  background: var(--red);
  color: var(--on-red);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 60;
}
.offerbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.5rem var(--gutter);
  text-align: center;
  min-height: 34px;
}
.offerbar strong { font-weight: 800; }

.offerbar__flag {
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: none;
}
.offerbar__text {
  opacity: 0.92;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* The middle phrase is the first thing to go when space runs out — the
     flag and the phone number both matter more. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.offerbar__call {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  flex: none;
  padding-left: 0.55rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.offerbar__call .ico { width: 14px; height: 14px; }
.offerbar:hover .offerbar__call { text-decoration: underline; }

/* Online booking down (data.mjs → bookingOpen: false). Styled like the
   free-recovery panel: dark ink with a faint red wash, a red rule underneath,
   the phone icon in a red tile and the number in the brand red. Never
   shortened on a phone - unlike the offer bar, the whole sentence is the
   message. */
.booking-down {
  position: relative;
  z-index: 59;
  background:
    linear-gradient(90deg, rgba(255, 83, 71, 0.12), rgba(255, 83, 71, 0.03) 70%),
    var(--ink-850);
  border-bottom: 1px solid var(--red-edge);
  color: var(--fog);
}
.booking-down__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-block: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.booking-down__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--red);
  color: var(--on-red);
}
.booking-down__icon .ico { width: 16px; height: 16px; }
.booking-down strong { color: var(--chalk); font-weight: 700; }
.booking-down a {
  color: var(--red-text);
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.booking-down a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .booking-down__inner { justify-content: flex-start; font-size: 0.86rem; }
}
.book-panel--closed { max-width: 36rem; margin-inline: auto; }

/* On a narrow phone the middle phrase is dropped entirely rather than
   allowed to wrap the bar onto two lines. */
@media (max-width: 560px) {
  .offerbar__text { display: none; }
}

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
/* Solid, not translucent. A blurred see-through bar tints itself with whatever
   is scrolling underneath, which would make the logo's black drift in and out
   of matching. Opaque --black keeps the blend exact at every scroll position,
   and drops the backdrop-filter compositing cost with it. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--black);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease);
}
.site-header[data-stuck='true'] {
  border-bottom-color: var(--line);
  box-shadow: 0 14px 40px -22px rgba(0,0,0,0.95);
}

.nav {
  display: flex; align-items: center; gap: 1rem;
  min-height: 66px;
  transition: min-height var(--dur-3) var(--ease);
}
.site-header[data-stuck='true'] .nav { min-height: 58px; }

/* The logo is the wordmark — no text beside it. Sized by height so the
   694x98 source scales predictably; width:auto keeps the ratio and the
   width/height attributes on the <img> reserve the space before it loads. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-right: auto;
  flex: none;
  transition: opacity var(--dur-2) var(--ease);
}
.brand:hover { opacity: 0.82; }
.brand__logo {
  height: 22px;
  width: auto;
  flex: none;
}
/* Strapline under the wordmark. Mono and tracked out, well under the logo's
   own weight, so it reads as a line beneath the mark rather than part of it.
   Hidden on the narrowest screens, where the header already carries the logo,
   the Book button and the menu toggle. */
.brand__tagline {
  display: none;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
}
@media (min-width: 430px) { .brand__tagline { display: block; } }
@media (min-width: 560px) { .brand__logo { height: 26px; } }
@media (min-width: 900px) {
  .brand__logo { height: 30px; }
  .brand__tagline { font-size: 0.62rem; }
}

/* Header CTA stays compact on small screens so the logo, the button and the
   menu toggle all fit on a 390px row without wrapping. */
.nav__book { padding-inline: 1rem; min-height: 46px; }
@media (min-width: 900px) { .nav__book { padding-inline: 1.5rem; min-height: 52px; } }

.nav__links { display: none; }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }

/* Phone number in the header — always one tap away, never animated in */
.nav__phone {
  display: none;
  align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav__phone:hover { background: var(--ink-750); color: var(--red-text); }
.nav__phone svg { width: 16px; height: 16px; color: var(--red-text); }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-sm);
  flex: none;
}
.nav__toggle:hover { background: var(--ink-750); }
.nav__burger { position: relative; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--chalk); border-radius: 2px;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-1) linear;
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 5px; }
.nav__burger span:nth-child(3) { top: 10px; }
[aria-expanded='true'] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[aria-expanded='true'] .nav__burger span:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 49;
  background: var(--ink-950);
  padding: calc(66px + var(--gutter)) var(--gutter) var(--gutter);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility 0s linear var(--dur-2);
}
.drawer[data-open='true'] {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.drawer__list { display: grid; gap: 2px; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.drawer__link span { font-family: var(--mono); font-size: var(--t-xs); color: var(--fog-dim); }
.drawer__link[aria-current='page'] { color: var(--red-text); }
.drawer__cta { display: grid; gap: 0.6rem; margin-top: 1.75rem; }
.drawer__meta {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--fog);
  display: grid; gap: 0.4rem;
}
.drawer__staff {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem;
  color: var(--fog-dim);
}
.drawer__staff .ico { width: 15px; height: 15px; }
.drawer__staff:hover { color: var(--red-text); }

body[data-nav-open='true'] { overflow: hidden; }

@media (min-width: 900px) {
  .nav__links {
    display: flex; align-items: center; gap: 0.15rem;
    margin-right: 0.5rem;
  }
  .nav__link {
    padding: 0.55rem 0.8rem;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--fog);
    position: relative;
    transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .nav__link:hover { color: var(--chalk); background: var(--ink-800); }
  .nav__link[aria-current='page'] { color: var(--red-text); }

  /* Staff: separated by a hairline and set dimmer and smaller than the
     customer pages, so it is findable without competing with them. */
  .nav__staff-item {
    margin-left: 0.4rem;
    padding-left: 0.65rem;
    border-left: 1px solid var(--line);
  }
  .nav__link--staff {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fog-dim);
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
  }
  .nav__link--staff .ico { width: 14px; height: 14px; }
  .nav__link--staff:hover { color: var(--red-text); background: transparent; }
  .nav__phone { display: inline-flex; }
  .nav__toggle { display: none; }
  .drawer { display: none; }
}

/* --------------------------------------------------------------------------
   7. STICKY MOBILE ACTION BAR — call / book, always reachable
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line-hard);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease-out);
}
.actionbar[data-show='true'] { transform: none; }
.actionbar__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--bar-h);
  background: var(--ink-850);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.actionbar__btn svg { width: 17px; height: 17px; }
.actionbar__btn--call { color: var(--chalk); }
.actionbar__btn--call svg { color: var(--red-text); }
.actionbar__btn--book { background: var(--red); color: var(--on-red); }
.actionbar__btn:active { filter: brightness(0.9); }

@media (min-width: 900px) { .actionbar { display: none; } }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
  border-bottom: 1px solid var(--line-soft);
}
/* Faint engineering grid — structure without decoration */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute;
  top: -30%; right: -20%; width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, var(--red-glow) 0%, transparent 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(2rem, 1rem + 4.5vw, 4.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }

/* Free-recovery panel, above the headline. The whole card is the phone link:
   the person reading it is often at the roadside with one hand free, so any
   thumb landing anywhere on it should dial. Laid out as icon / text / number
   so it reads as one object rather than three stacked fragments. */
.recovery {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--red-edge);
  border-radius: var(--r-md);
  background:
    linear-gradient(90deg, rgba(255, 83, 71, 0.12), rgba(255, 83, 71, 0.02) 60%),
    var(--ink-850);
  transition: border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.recovery:hover {
  border-color: rgba(255, 83, 71, 0.6);
  transform: translateY(-1px);
}

.recovery__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--red);
  color: var(--on-red);
}
.recovery__icon .ico { width: 22px; height: 22px; }

.recovery__body { display: block; min-width: 0; }
.recovery__title {
  display: block;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--red-text);
  margin-bottom: 0.15rem;
}
.recovery__line {
  display: block;
  font-size: var(--t-sm);
  color: var(--fog);
  line-height: 1.45;
}

.recovery__call {
  display: none;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  margin-left: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
  color: var(--chalk);
}
.recovery__call .ico { width: 15px; height: 15px; color: var(--red-text); }
.recovery:hover .recovery__call { color: var(--red-text); }

/* The number only appears once there is room for it on the same row. Below
   that the card is still the phone link, so nothing is lost by hiding it —
   and the sticky Call bar covers the same job on a phone. */
@media (min-width: 620px) {
  .recovery__call { display: inline-flex; }
}

.hero h1 {
  font-size: var(--t-3xl);
  margin-top: 1rem;
  letter-spacing: -0.045em;
}
.hero h1 em {
  font-style: normal;
  color: var(--red-text);
  display: block;
}
.hero__lede { margin-top: 1.15rem; }

/* Side by side, not stacked. Stacking cost a whole row and pushed the phone
   button below the fold on a 390px screen, which for a garage is the one
   control that must never need a scroll to reach. Padding is trimmed so
   "01604 639539" still fits on the narrowest common handset. */
.hero__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.35rem;
}
.hero__cta .btn { padding-inline: 0.75rem; }
@media (min-width: 420px) {
  .hero__cta .btn { padding-inline: 1.1rem; }
}
.hero__note {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--fog-dim);
  letter-spacing: 0.04em;
}

/* Price tiles — the differentiator, visible without scrolling on mobile.
   Three tiles in a two-column grid leaves an orphan on the second row, so on
   the narrowest screens the MOT price spans the full width (it is the headline
   number anyway) and the two FREE tiles pair up underneath. */
.hero__prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.pricetile {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.95rem 1rem 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pricetile:hover { border-color: var(--line-hard); transform: translateY(-2px); }
.pricetile--lead { border-color: var(--red-edge); }
.pricetile--lead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 0% 0%, var(--red-glow), transparent 62%);
  pointer-events: none;
}
.pricetile__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-dim);
  position: relative;
}
.pricetile__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 0.5rem;
  position: relative;
}
.pricetile--lead .pricetile__value { color: var(--red-text); }

/* Narrowest screens: lead tile full width, the two FREE tiles paired below.
   From 520px up all three sit on one row. */
.hero__prices .pricetile--lead { grid-column: 1 / -1; }
@media (min-width: 520px) {
  .hero__prices { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
  .hero__prices .pricetile--lead { grid-column: auto; }
}
.pricetile__value small {
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fog);
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--mono);
  text-transform: uppercase;
}

.hero__media { position: relative; }
/* 16:10 rather than the photo's native 16:9 — a slightly taller block sits
   better beside the headline. object-fit:cover trims a little top and bottom;
   the subject is centred so nothing important is lost. */
.hero__figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-800);
  aspect-ratio: 16 / 10;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

/* Floating credential chip on the hero image */
.hero__stamp {
  position: absolute;
  left: -0.35rem; bottom: -0.85rem;
  background: var(--ink-950);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
  display: flex; align-items: center; gap: 0.7rem;
  box-shadow: var(--lift-2);
}
.hero__stamp svg { width: 26px; height: 26px; color: var(--red-text); flex: none; }
.hero__stamp b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
}
.hero__stamp span {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

@media (min-width: 860px) {
  /* Centred, at a ratio close to the photo's own 16:9. Stretching the figure
     to fill the tall copy column was tried and reverted: forcing a landscape
     workshop shot into a portrait box crops away the very thing it is there
     to show. A little whitespace beats a bad crop. */
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
  }
  .hero__figure { aspect-ratio: 16 / 10; }
  /* auto columns, not 1fr: the mobile rule sets two equal fractions, which
     would stretch both buttons across the full copy column here. */
  .hero__cta { grid-template-columns: auto auto; justify-content: start; }
  .hero__cta .btn { padding-inline: 1.9rem; }
}

/* --------------------------------------------------------------------------
   9. TICKER — services marquee, purely atmospheric, pauses on reduced motion
   -------------------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line-soft);
  background: var(--ink-850);
  overflow: hidden;
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 2.5rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog-dim);
  white-space: nowrap;
}
.ticker__item::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--red-text); opacity: 0.65; flex: none;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   9b. PHOTOGRAPHY
   Real photos of the garage. Framed the same way everywhere: hairline border,
   soft radius, and a red rule that appears on hover so the images feel part
   of the system rather than dropped in.
   -------------------------------------------------------------------------- */
.shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-800);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.shot:hover img { transform: scale(1.03); }
.shot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.shot:hover::after { transform: scaleX(1); }

.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.92), transparent);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
}

/* Leads a service page. Wide and short so the copy stays close to the top. */
.shot--lede {
  aspect-ratio: 16 / 9;
  margin-bottom: 2rem;
}
/* A portrait photo in a 16:9 frame loses most of its subject. Give those a
   squarer frame and bias the crop slightly upward, which is where the subject
   sits in both the recovery and the engine shots. */
.shot--portrait { aspect-ratio: 3 / 2; }
.shot--portrait img { object-position: center 42%; }
@media (min-width: 620px) {
  .shot--portrait { aspect-ratio: 2 / 1; }
}

/* Home page band: three landscape shots, one cell shape throughout. An even
   3-up only works because every photo in it is landscape; mixing a portrait
   in here would crop it to a letterbox slot of its own middle. */
.gallery {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
.gallery .shot { aspect-ratio: 16 / 10; }

@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery .shot { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   9b-ii. CUSTOMER REVIEWS

   Deliberately quieter than the service cards: no hover lift, no accent wipe,
   no border on all four sides. A testimonial that behaves like a button reads
   as an advert. The only colour is the quote mark, and it sits behind the
   text at low opacity so it decorates without competing.

   The reviews are different lengths, which is what real ones look like. The
   grid uses masonry-free equal columns and lets each card size to its own
   content rather than stretching the short ones, so nothing gets a lake of
   empty space under two lines of text.
   -------------------------------------------------------------------------- */
.reviews {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

/* Cards stretch to match the tallest in their row and the attribution is
   pinned to the bottom, so the row has one clean baseline instead of a ragged
   edge. Real reviews are wildly different lengths - one of these is four times
   another - and letting each size to its own content left half the row hanging
   in mid-air. */
.review {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.3rem 1.3rem 1.15rem;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   The rating panel above the cards.

   Gold, not the brand red. A star rating is a convention people read without
   thinking, and recolouring it to match the site would cost more in
   recognition than it gains in tidiness. It is also the one place on the page
   where red would be ambiguous: red already means "this is the action".
   -------------------------------------------------------------------------- */
.ratingbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.3rem;
  margin-bottom: 0.85rem;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ratingbar__id { display: grid; gap: 0.5rem; }
.ratingbar__src {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fog-dim);
}
.ratingbar__score { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ratingbar__num {
  font-family: var(--display, inherit);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1;
  color: var(--chalk);
}
.ratingbar__count { color: var(--fog); font-size: 0.9rem; }
.ratingbar__note { margin: 0; color: var(--fog); max-width: 46ch; }
/* Never let the button stretch to the panel width on a wide screen. */
.ratingbar__cta { flex: 0 0 auto; }

.stars { display: inline-flex; gap: 0.12rem; }
.star { fill: var(--line-hard); flex: 0 0 auto; }
.star.is-on { fill: var(--gold); }

@media (max-width: 520px) {
  .ratingbar { flex-direction: column; align-items: stretch; }
  .ratingbar__cta { width: 100%; justify-content: center; }
}

/* margin-bottom is the minimum gap to the attribution when the card is only
   as tall as its own text; the auto top margin below opens it further when
   the card has been stretched to match a taller neighbour. */
.review__body {
  margin: 0 0 0.95rem;
  color: var(--chalk);
  font-size: var(--t-md, 1rem);
  line-height: 1.6;
  /* Relative so it tracks the body size rather than fighting it. */
  max-width: 46ch;
}

/* Star row inside a card, when that review's rating is known. */
.review .stars { margin-bottom: 0.75rem; }

.review__by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* auto, not a fixed value: holds the rule to the foot of a stretched card. */
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
}

/* An initial rather than a photo. Google's avatars are hosted on Google, and
   pulling them in would leak every visitor to a third party before the cookie
   banner has said a word, to show a thumbnail nobody came for. */
.review__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  color: var(--chalk);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.review__meta { display: grid; gap: 0.1rem; min-width: 0; }
.review__who {
  color: var(--chalk);
  font-weight: 600;
  /* Long names must not widen the card and break the grid. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* --fog-dim is 4.69:1 on --ink-850. That clears AA for body text, but only
   just, and this is already small. Do not shrink it or dim it further without
   re-measuring. */
.review__when {
  color: var(--fog-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

@media (min-width: 700px) {
  .reviews { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1050px) {
  .reviews { grid-template-columns: repeat(4, 1fr); }
  .review__body { font-size: 0.95rem; }
}

/* Sub-line under a section heading. */
.sechead__sub {
  margin: 0;
  color: var(--fog);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   9c. OPEN / CLOSED BADGE
   -------------------------------------------------------------------------- */
.openstate {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--chalk);
}
.openstate__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--fog-dim);
}
.openstate[data-open='true'] .openstate__dot {
  background: #3FB950;
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
}
.openstate[data-open='false'] .openstate__dot { background: var(--red-text); }

.hero__note-offer { display: block; margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   9d. FIND US
   -------------------------------------------------------------------------- */
.findus { display: grid; gap: 0.85rem; }
@media (min-width: 780px) { .findus { grid-template-columns: 1fr 1fr; } }

.findus__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-850);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.findus__panel h3 { font-size: var(--t-lg); margin-bottom: 0.35rem; }
.findus__addr {
  font-family: var(--mono);
  color: var(--fog);
  font-size: var(--t-sm);
  margin-bottom: 1.15rem;
}
.findus__actions { display: grid; gap: 0.6rem; margin-bottom: 1.1rem; }
@media (min-width: 480px) {
  .findus__actions { grid-auto-flow: column; justify-content: start; }
}
.findus__note {
  font-size: var(--t-sm);
  color: var(--fog-dim);
  line-height: 1.55;
}
.findus__note a { color: var(--red-text); }
.findus__note a:hover { text-decoration: underline; }
.findus__panel .hours { margin-bottom: 1.1rem; }

/* The map spans both panels rather than sitting beside one of them — half a
   grid column of aerial photography is too small to orient by.
   .map-frame's own 4/3 is sized for the narrow contact-page column; carried
   across the full width it would be taller than the phone screen it is meant
   to help on, so it flattens out as there is more width to spend. */
.findus__map { grid-column: 1 / -1; }
@media (min-width: 620px) { .findus__map .map-frame { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) { .findus__map .map-frame { aspect-ratio: 21 / 9; } }

.faq__more {
  margin-top: 1.5rem;
  font-size: var(--t-sm);
  color: var(--fog);
}
.faq__more a { color: var(--red-text); }
.faq__more a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. SECTION HEADS
   -------------------------------------------------------------------------- */
.sechead { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.sechead h2 { font-size: var(--t-2xl); }
.sechead__row { display: grid; gap: 1.25rem; }
@media (min-width: 880px) {
  .sechead__row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* --------------------------------------------------------------------------
   11. SERVICE CARDS
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 0.7rem;
  padding: 1.35rem 1.3rem 1.5rem;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
}
/* Accent bar wipes down the left edge on hover */
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--red-text);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-3) var(--ease-out);
}
.card:hover, .card:focus-within {
  transform: translateY(-3px);
  border-color: var(--line-hard);
  background: var(--ink-800);
}
.card:hover::before, .card:focus-within::before { transform: scaleY(1); }

.card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--ink-750);
  border: 1px solid var(--line);
  color: var(--red-text);
  flex: none;
  transition: background-color var(--dur-2) var(--ease);
}
.card__icon svg { width: 21px; height: 21px; }
.card:hover .card__icon { background: var(--ink-700); }

.card h3 {
  font-size: var(--t-md);
  letter-spacing: -0.025em;
}
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card p { font-size: var(--t-sm); color: var(--fog); margin: 0; }

.card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: auto; padding-top: 0.85rem;
}
.card__price {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--red-text);
}
.card__price.is-free { color: var(--free); }
.card__go {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-hard);
  color: var(--fog);
  transition: transform var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
.card__go svg { width: 14px; height: 14px; }
.card:hover .card__go {
  background: var(--red); color: var(--on-red);
  border-color: var(--red);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   12. PRICE BOARD
   -------------------------------------------------------------------------- */
.board {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-850);
}
.board__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
}
.board__head h3 { font-size: var(--t-md); }
.board__badge {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--on-red);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
}
.board__rows { display: grid; }
.board__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur-2) var(--ease);
}
.board__row:last-child { border-bottom: 0; }
.board__row:hover { background: var(--ink-800); }
.board__name { font-weight: 600; font-size: var(--t-sm); }
.board__name small {
  display: block; font-weight: 400;
  color: var(--fog-dim); font-size: var(--t-xs);
  margin-top: 2px;
}
.board__val {
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--red-text);
  white-space: nowrap;
}
.board__val.is-free { color: var(--free); }
.board__foot {
  padding: 1rem 1.25rem;
  background: var(--ink-800);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--fog-dim);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   13. STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0.85rem; counter-reset: step; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  padding: 1.4rem 1.3rem;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  counter-increment: step;
}
.step::before {
  content: '0' counter(step);
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--red-text);
  opacity: 0.32;
  position: absolute;
  top: 1rem; right: 1.15rem;
}
.step h3 { font-size: var(--t-md); margin-bottom: 0.45rem; padding-right: 2.5rem; }
.step p { font-size: var(--t-sm); color: var(--fog); }

/* --------------------------------------------------------------------------
   14. TRUST / STATS
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink-850); padding: 1.4rem 1.25rem; }
.stat__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.04em;
  color: var(--red-text);
  line-height: 1;
}
.stat__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin-top: 0.55rem;
}

.usps { display: grid; gap: 0.85rem; }
@media (min-width: 700px) { .usps { grid-template-columns: repeat(2, 1fr); } }
.usp {
  display: flex; gap: 0.95rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-850);
}
.usp__tick {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red-glow);
  color: var(--red-text);
}
.usp__tick svg { width: 14px; height: 14px; }
/* Sentence case, not uppercase. Shouting four virtue labels in caps is the
   house style of every template trade site going; these are sentences the
   garage would actually say, so they are set like sentences. */
.usp h3 { font-size: var(--t-md); letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.usp p { font-size: var(--t-sm); color: var(--fog); }

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.ctaband {
  position: relative;
  background: var(--ink-950);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.ctaband::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 50% 120%, var(--red-glow), transparent 68%);
  pointer-events: none;
}
.ctaband__inner {
  position: relative; z-index: 1;
  display: grid; gap: 1.5rem;
  padding-block: clamp(2.75rem, 1.8rem + 4vw, 4.75rem);
  text-align: center;
  justify-items: center;
}
.ctaband h2 { font-size: var(--t-2xl); }
.ctaband p { color: var(--fog); max-width: 52ch; }
.ctaband__actions { display: grid; gap: 0.7rem; width: 100%; max-width: 380px; }
@media (min-width: 620px) {
  .ctaband__actions { grid-auto-flow: column; max-width: none; width: auto; }
  .ctaband__actions .btn { padding-inline: 2rem; }
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.6rem; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-850);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease);
}
.faq__item[open] { border-color: var(--line-hard); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--red-text); }
.faq__sign {
  position: relative; width: 14px; height: 14px; flex: none;
  color: var(--red-text);
}
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.faq__sign::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq__sign::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq__item[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  padding: 0 1.25rem 1.2rem;
  font-size: var(--t-sm);
  color: var(--fog);
  max-width: 68ch;
}
.faq__item[open] .faq__a { animation: faqIn var(--dur-3) var(--ease-out); }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. SERVICE PAGE
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--fog-dim);
  letter-spacing: 0.05em;
}
.crumbs a:hover { color: var(--red-text); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 0.45rem; opacity: 0.5; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs [aria-current] { color: var(--fog); }

.pagehead {
  background: var(--ink-950);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.pagehead::after {
  content: ''; position: absolute;
  top: -50%; right: -10%; width: 55vw; height: 55vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, var(--red-glow), transparent 62%);
  pointer-events: none;
}
.pagehead__inner {
  position: relative; z-index: 1;
  padding-block: clamp(1.75rem, 1rem + 3.5vw, 3.25rem) clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem);
  display: grid; gap: 1.1rem;
}
.pagehead h1 { font-size: var(--t-2xl); }
.pagehead .lede { max-width: 60ch; }
.pagehead__actions { display: grid; gap: 0.7rem; margin-top: 0.5rem; }
@media (min-width: 620px) {
  .pagehead__actions { grid-auto-flow: column; justify-content: start; }
  .pagehead__actions .btn { padding-inline: 1.75rem; }
}

.svc-layout { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
@media (min-width: 940px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .svc-aside { position: sticky; top: 92px; }
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 {
  font-size: var(--t-lg);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--t-md); margin-top: 1.75rem; }
.prose p { color: var(--fog); }
.prose strong { color: var(--chalk); font-weight: 600; }
.prose a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { display: grid; gap: 0.6rem; }
.prose ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--fog);
  font-size: var(--t-sm);
}
.prose ul li::before {
  content: ''; position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--red-text);
  transform: rotate(45deg);
}
.prose ol { display: grid; gap: 0.6rem; counter-reset: n; }
.prose ol li {
  position: relative; padding-left: 2rem; color: var(--fog); font-size: var(--t-sm);
  counter-increment: n;
}
.prose ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--red-text);
}

.aside-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-850);
  overflow: hidden;
}
.aside-card + .aside-card { margin-top: 0.85rem; }
.aside-card__head {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog-dim);
}
.aside-card__body { padding: 1.15rem; display: grid; gap: 0.85rem; }
.aside-card__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -0.04em;
  color: var(--red-text);
  line-height: 1;
}
.aside-card__price small {
  display: block; font-family: var(--mono); font-size: 0.4em;
  color: var(--fog); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 0.4rem; font-weight: 500;
}
.aside-card__note { font-size: var(--t-xs); color: var(--fog-dim); line-height: 1.5; }

.contactlist { display: grid; gap: 0.15rem; }
.contactlist a, .contactlist div {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--line-soft);
}
.contactlist :last-child { border-bottom: 0; }
.contactlist svg { width: 16px; height: 16px; color: var(--red-text); flex: none; }
.contactlist a:hover { color: var(--red-text); }

/* Related services chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-850);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fog);
  transition: color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
}
.chip:hover { color: var(--red-text); border-color: var(--red-text); background: var(--ink-800); }

/* --------------------------------------------------------------------------
   18. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

.hours { display: grid; }
.hours__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day { color: var(--fog); }
.hours__time { font-family: var(--mono); font-weight: 600; }
.hours__time.is-closed { color: var(--fog-dim); font-weight: 400; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-850);
  aspect-ratio: 4 / 3;
  position: relative;
}
.map-frame img { width: 100%; height: 100%; object-fit: cover; }
/* The map is an iframe, so object-fit does nothing; it has to be sized to
   fill the frame directly. filter tones Google's bright chrome down towards
   the rest of the page without making the imagery hard to read. */
.map-frame__embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Barely-there grade. Anything heavier and the aerial photography goes
     muddy, which defeats the point of showing it. */
  filter: saturate(0.95);
}
/* Pinned top-right, clear of Google's bottom-left attribution. pointer-events
   are off on the container so drags and scrolls reach the live map underneath;
   the button re-enables them for itself. */
.map-frame__overlay {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  bottom: auto;
  padding: 0;
  background: none;
  pointer-events: none;
  /* Needed, not belt-and-braces. site.js clones the iframe in on consent, so
     it lands after this div in the DOM, and the saturate() above gives it a
     stacking context — which puts it in the same paint step as this
     position:absolute overlay, where later DOM order wins. Without the
     z-index the Directions button is painted over by the map entirely. */
  z-index: 1;
}
.map-frame__overlay a,
.map-frame__overlay button { pointer-events: auto; }

.btn--sm {
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  font-size: var(--t-xs);
  background: rgba(4, 4, 4, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn--sm:hover { background: rgba(4, 4, 4, 0.94); border-color: var(--red-text); }
.btn--sm .ico { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   19. BOOKING PAGE
   -------------------------------------------------------------------------- */
.booking-hero { display: grid; gap: 1.5rem; }
@media (min-width: 940px) { .booking-hero { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; } }

.book-panel {
  border: 1px solid var(--red-edge);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  padding: 1.5rem 1.35rem;
  display: grid; gap: 1.1rem;
  position: relative;
  overflow: hidden;
}
.book-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 100% 0%, var(--red-glow), transparent 60%);
  pointer-events: none;
}
.book-panel > * { position: relative; }
.book-panel h2 { font-size: var(--t-lg); }
.book-panel p { font-size: var(--t-sm); color: var(--fog); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-950);
  border-top: 1px solid var(--line);
  padding-bottom: calc(var(--bar-h) + 1.5rem);
}
@media (min-width: 900px) { .site-footer { padding-bottom: 0; } }

.footer__top {
  display: grid; gap: 2rem;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
@media (min-width: 780px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer__brand { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.footer__brand .brand__logo { height: 34px; }
.footer__tagline {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-top: -0.35rem;
}
.footer__blurb { font-size: var(--t-sm); color: var(--fog); max-width: 38ch; }

.footer__col h3 {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-dim);
  margin-bottom: 0.9rem;
}
.footer__col ul { display: grid; gap: 0.55rem; }
.footer__col a {
  font-size: var(--t-sm);
  color: var(--fog);
  transition: color var(--dur-2) var(--ease);
}
.footer__col a:hover { color: var(--red-text); }

.footer__bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.25rem;
  display: grid; gap: 0.85rem;
  font-size: var(--t-xs);
  color: var(--fog-dim);
}
@media (min-width: 780px) {
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; }
.footer__legal a:hover { color: var(--red-text); }
/* Staff link: present but visually recessive, so it does not read as
   something a customer is meant to click. */
.footer__staff { color: var(--fog-dim); opacity: 0.65; }
.footer__staff:hover { opacity: 1; }

.socials { display: flex; gap: 0.5rem; }
.social {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fog);
  transition: color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.social svg { width: 18px; height: 18px; }
.social:hover { color: var(--red-text); border-color: var(--red-text); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   21. ANIMATION — reveals. Applied only when JS confirms support, so the
   page is fully readable with JS disabled or still loading.
   -------------------------------------------------------------------------- */
[data-reveal] { will-change: opacity, transform; }

html[data-motion='on'] [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
html[data-motion='on'] [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Hero content is never gated behind a reveal — it paints immediately. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html[data-motion='on'] [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ticker__track { animation: none; }
  .actionbar { transition: none; }
}

/* --------------------------------------------------------------------------
   21b. COOKIE CONSENT

   A panel, not a full-screen interruption. Nothing on this site is worth
   blocking a driver from a phone number over, and a modal that traps the page
   pushes people to click whichever button makes it go away, which is not
   consent in any meaningful sense.
   -------------------------------------------------------------------------- */
.cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
/* Clears the sticky call/book bar on mobile so neither covers the other. */
@media (max-width: 899px) {
  .cc { bottom: var(--bar-h); }
}

.cc__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 640px;
  background: var(--ink-850);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  max-height: min(80vh, 640px);
  overflow-y: auto;
}

.cc__title { font-size: var(--t-md); margin-bottom: 0.5rem; }
.cc__title:focus { outline: none; }
.cc__text { font-size: var(--t-sm); color: var(--fog); margin-bottom: 1.1rem; }

.cc__options {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.cc__opt {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
}
.cc__opt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.35rem;
}
.cc__opt-name { font-weight: 700; font-size: var(--t-sm); }
.cc__opt-fixed {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--fog-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cc__opt-note { font-size: var(--t-xs); color: var(--fog); line-height: 1.5; }

/* Switch. The checkbox stays in the DOM and keyboard-reachable; only its
   default rendering is replaced. */
.cc__switch { position: relative; flex: none; cursor: pointer; }
.cc__switch input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.cc__switch-track {
  display: block;
  width: 46px; height: 27px;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cc__switch-track::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--fog);
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.cc__switch input:checked + .cc__switch-track {
  background: var(--red);
  border-color: var(--red);
}
.cc__switch input:checked + .cc__switch-track::after {
  transform: translateX(19px);
  background: #fff;
}
.cc__switch input:focus-visible + .cc__switch-track {
  outline: 3px solid var(--red-text);
  outline-offset: 3px;
}

.cc__actions { display: grid; gap: 0.55rem; }
@media (min-width: 560px) {
  .cc__actions { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.cc__btn { min-height: 48px; font-size: var(--t-xs); }
.cc__btn--quiet { border-style: dashed; }

.cc__fine {
  margin-top: 0.9rem;
  font-size: var(--t-xs);
  color: var(--fog-dim);
}
.cc__fine a { color: var(--red-text); text-decoration: underline; text-underline-offset: 2px; }

/* Footer button styled to sit in the legal link row. */
.footer__cookie {
  font: inherit;
  font-size: var(--t-xs);
  color: var(--fog-dim);
  padding: 0;
  text-align: left;
}
.footer__cookie:hover { color: var(--red-text); }

/* --------------------------------------------------------------------------
   21c. MAP CONSENT GATE
   -------------------------------------------------------------------------- */
.map-gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 12px, transparent 12px 24px),
    var(--ink-800);
}
.map-gate__icon { color: var(--fog-dim); }
.map-gate__icon .ico { width: 26px; height: 26px; }
.map-gate__title { font-family: var(--display); font-weight: 700; font-size: var(--t-md); }
.map-gate__text {
  font-size: var(--t-sm);
  color: var(--fog);
  max-width: 34ch;
  margin-bottom: 0.4rem;
}
.map-gate__alt {
  font-size: var(--t-xs);
  color: var(--fog-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-gate__alt:hover { color: var(--red-text); }

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .actionbar, .offerbar, .ticker, .drawer, .ctaband { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .board, .aside-card { border-color: #ccc; background: #fff; }
}