/* ==========================================================================
   FastFit Station — Core Stylesheet
   Design source: Figma "🛞 FFS" — Fast FitDesign / Search Page
   Canvas 1920px · Container 1280px (1216px inner + 32px gutters)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand greens — sampled from the Figma export */
  --c-green-950: #05210a;   /* deepest */
  --c-green-900: #06260b;   /* footer base, hero top-left */
  --c-green-870: #072c0d;   /* hero mid */
  --c-green-850: #0d3e1a;   /* hero bottom-right */
  --c-green-800: #14371b;   /* top bar, testimonial card, location header */
  --c-green-750: #122f18;   /* notice banner */
  --c-green-700: #1a4731;   /* section titles, solid dark buttons */
  --c-green-650: #1f4e2e;   /* why-us + CTA band */
  --c-green-600: #2d6a48;   /* header bar, hairline borders */
  --c-green-550: #2a7a52;   /* active quick-service tile */

  /* Accent */
  --c-accent: #4fc878;
  --c-accent-ink: #0d1f16;
  --c-accent-15: rgba(79, 200, 120, 0.15);
  --c-accent-30: rgba(79, 200, 120, 0.3);
  --c-accent-20: rgba(79, 200, 120, 0.2);
  --c-accent-25: rgba(79, 200, 120, 0.25);

  /* Creams + neutrals */
  --c-cream: #f5f1cc;       /* hero headline, top-bar links */
  --c-cream-50: #fffcf0;    /* services strip background */
  --c-cream-100: #fdf7d9;   /* select field, helper links */
  --c-cream-200: #fffdf0;   /* opening-hours panel */
  --c-cream-border: #e0d9b6;
  --c-white: #ffffff;
  --c-ink: #1c2e22;
  --c-grey-26: #3d4642;
  --c-grey-87: #dde0dc;
  --c-muted: #8a9a8d;

  /* Reg-plate field */
  --c-plate-blue: #1447e6;
  --c-plate-yellow: #fdc800;
  --c-plate-ink: #534200;

  /* Promo tile accents */
  --c-promo-orange: #be5c00;
  --c-promo-orange-deep: #a94d00;
  --c-promo-badge: #c8912a;

  /* Alpha whites (used heavily on dark bands) */
  --w-85: rgba(255, 255, 255, 0.85);
  --w-70: rgba(255, 255, 255, 0.7);
  --w-60: rgba(255, 255, 255, 0.6);
  --w-50: rgba(255, 255, 255, 0.5);
  --w-45: rgba(255, 255, 255, 0.45);
  --w-35: rgba(255, 255, 255, 0.35);
  --w-12: rgba(255, 255, 255, 0.12);
  --w-10: rgba(255, 255, 255, 0.1);
  --w-08: rgba(255, 255, 255, 0.08);
  --w-06: rgba(255, 255, 255, 0.06);

  /* Type */
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 32px;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Elevation */
  --shadow-header: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-solid: 0 8px 0 #072f19;

  --header-h: 65px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-cream-50);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.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: 8px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 700;
  border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 60px; }
.section--lg { padding-block: 80px; }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.section-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.728px;
  text-transform: uppercase;
  color: var(--c-accent);
}

.section-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.48px;
  color: var(--c-green-700);
}

.section-subtitle {
  font-weight: 300;
  font-size: 16px;
  color: var(--c-muted);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.section-head__text { display: grid; gap: 10px; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15.2px;
  letter-spacing: 0.912px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--accent:hover { background: #43b76a; }

.btn--dark { background: var(--c-green-700); color: var(--c-white); }
.btn--dark:hover { background: #15382790; background: #153827; }

.btn--white { background: var(--c-white); color: var(--c-green-700); }
.btn--white:hover { background: var(--c-cream-100); }

.btn--outline {
  background: transparent;
  color: var(--c-white);
  border: 2px solid var(--w-35);
  padding: 12px 24px;
  border-radius: var(--radius);
}
.btn--outline:hover { border-color: var(--c-white); background: var(--w-08); }

.btn--pill { border-radius: var(--radius); }
.btn--lg { padding: 14px 32px; font-size: 16.8px; letter-spacing: 1.008px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. Top bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--c-green-800);
  color: var(--c-cream);
  font-size: 12.5px;
  letter-spacing: 0.499px;
  padding-block: 12px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  flex-wrap: nowrap;
}
/* No auto margin: Figma packs the whole row to the right (justify-end, gap 32),
   which is what lands the offer text to the right of the logo. */
.topbar__notice { color: var(--c-accent); font-weight: 600; min-width: 0; }
.topbar__links { display: flex; gap: 14px; flex-wrap: wrap; }
.topbar__links li { font-weight: 500; }
.topbar__links strong { color: var(--c-white); font-weight: 500; }
.topbar__links a:hover { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-green-600);
  box-shadow: var(--shadow-header);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
}

/* The logo oval overhangs the 65px bar top and bottom, as in the design. */
.logo { flex-shrink: 0; display: block; position: relative; z-index: 2; }
.logo img { width: 205px; height: auto; }
/* Figma places the 205×108 oval with its top at y=8.5 — i.e. riding up over
   the top bar — while the 65px header bar keeps its height. The negative
   margins let it overflow without growing the header. */
.header .logo {
  align-self: flex-start;
  margin-top: -39.5px;
  margin-bottom: -5.5px;
}

.header__nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14.1px;
  letter-spacing: 0.563px;
  text-transform: uppercase;
  color: var(--w-85);
  transition: background-color .18s ease, color .18s ease;
}
.nav-link:hover,
.nav-link[aria-current="page"] { background: var(--w-10); color: var(--c-white); }
.nav-link__caret { font-size: 11.2px; opacity: .6; }

.header__cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Equal height: the outline variant otherwise runs taller than the solid one,
   because its 2px border sits on top of the same vertical padding. */
.header__cta .btn { height: 40px; padding-block: 0; }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  background: var(--c-white);
  border: 1px solid var(--c-cream-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-green-700);
}
.dropdown a:hover { background: var(--c-cream-50); color: var(--c-accent-ink); }

/* Burger */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--w-10);
  border: 1px solid var(--w-12);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--c-white);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Notice banner
   -------------------------------------------------------------------------- */
/* Figma: band runs 113→178 with the text sitting at 143, which is what keeps
   the overhanging logo clear of the copy. */
.notice {
  background: var(--c-green-800);
  color: var(--w-70);
  font-size: 14px;
  padding: 30px 0 18px;
}
.notice__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.notice__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-accent-15);
  border: 1px solid var(--c-accent-30);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 12px;
}
.notice__text { flex: 1 1 320px; }
.notice__text strong { color: var(--c-accent); font-weight: 700; }
.notice__link {
  color: var(--c-accent);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
}
.notice__link:hover { text-decoration: none; }

.notice.notice--offer {
  padding: 18px 0 12px;
}
.notice__offer-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 0;
}
.notice--offer .notice__text { flex: 0 0 auto; padding-left: 0; }
.notice--offer .notice__link { margin-left: auto; }
.notice__text .notice__offer-text {
  display: inline-block;
  color: #ffad42;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  transform-origin: left center;
  animation: notice-offer-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes notice-offer-pulse {
  to { transform: scale(1.025); }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 100% 100%, #0d3e1a 0%, #072c0d 45%, #06260b 100%);
  color: var(--c-white);
}
/* Darker band across the bottom 88px, as in the design (break at hero y=606/694) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 88px;
  background: rgba(0, 0, 0, .16);
  z-index: 0;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-block: 24px 76px;
}

.hero__content { display: grid; gap: 19.4px; justify-items: start; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 17px;
  border-radius: 100px;
  background: var(--c-accent-15);
  border: 1px solid var(--c-accent-30);
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.hero__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: .95;
  letter-spacing: -0.72px;
  color: var(--c-cream);
  max-width: 492px; /* forces the design's break after "Care" */
}
.hero__title em { font-style: normal; color: var(--c-accent); }

.hero__lead {
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.16;
  color: var(--c-white);
  max-width: 578px;
}

.hero__helper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--c-white);
}
.hero__helper a { color: var(--c-cream-100); text-decoration: underline; }
.hero__helper a:hover { color: var(--c-accent); }

/* Tyre search widget */
.tyre-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 578px;
  padding: 8px;
  background: var(--c-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.plate {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.plate__country {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding-inline: 10px;
  background: var(--c-plate-blue);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 600;
}
.plate__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 0;
  background: var(--c-plate-yellow);
  color: var(--c-plate-ink);
  font-size: 16px;
  text-transform: uppercase;
}
.plate__input::placeholder { color: var(--c-plate-ink); opacity: .85; text-transform: none; }
.plate__input:focus { outline: none; }

.tyre-search__select {
  flex-shrink: 0;
  min-width: 130px;
  padding: 12px 34px 12px 12.8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-cream-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233d4642' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--c-grey-26);
  font-weight: 500;
  font-size: 16px;
  line-height: 17px;
  appearance: none;
  cursor: pointer;
}

.tyre-search__divider {
  flex-shrink: 0;
  width: 1px;
  align-self: center;
  height: 32px;
  background: var(--c-grey-87);
}

.tyre-search__btn {
  flex-shrink: 0;
  padding: 10px 20px 10px 16px;
  font-size: 18px;
}
.tyre-search__btn svg { width: 15px; height: 15px; }

/* Booking card */
.hero__card {
  padding: 36px 0 80px;
  border-radius: var(--radius-lg);
  text-align: center;
  display: grid;
  gap: 6px;
  justify-items: center;
}
.hero__card-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .48px;
  color: var(--c-white);
}
.hero__card-sub { font-size: 13.6px; color: var(--w-50); }

.quick-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  width: 100%;
  max-width: 505px;
  margin-block: 14px;
}
.quick-service {
  display: grid;
  gap: 7px;
  padding: 15px 13px;
  text-align: left;
  border-radius: var(--radius);
  background: var(--w-08);
  border: 1px solid var(--w-12);
  transition: background-color .18s ease, border-color .18s ease;
}
.quick-service:hover,
.quick-service.is-active {
  background: var(--c-green-550);
  border-color: var(--c-accent);
}
.quick-service__icon {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 22.4px;
  line-height: 1;
}
.quick-service__icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
.quick-service__name {
  font-weight: 700;
  font-size: 13.1px;
  letter-spacing: .525px;
  text-transform: uppercase;
  color: var(--c-white);
}

.hero__card-note { font-size: 11.5px; color: var(--w-70); padding-top: 6px; }

/* Hero decorations — they live in the 320px gutters of the 1920px design,
   so they only get shown once the viewport is wide enough to spare the room
   (see the min-width:1700px block in §15). */
.hero__decor { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Decorations are anchored to the CONTENT column, not the viewport, so they can
   never slide underneath the copy. The container's left content edge sits at
   `50% - 608px` (1280/2 - 32px gutter); each decoration is pushed just outside
   it and scaled per breakpoint by --decor-w. */
.hero__pump {
  position: absolute;
  bottom: 0;
  right: calc(50% + var(--hero-w) / 2 - 32px + var(--decor-w) * .37);
  width: var(--decor-w);
}
.hero__pump-clock {
  position: absolute;
  top: 18.8%;
  left: 34.35%;
  width: 51.5%;
  height: 17.3%;
  pointer-events: none;
}
.hero__pump-clock::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #342e30;
  border-bottom: 0;
  box-sizing: border-box;
}
.hero__pump-clock-face,
.hero__pump-clock-hand {
  position: absolute;
  top: 1.5%;
  left: 2.7%;
  width: 94.6%;
  height: 100%;
}
.hero__pump-clock-hand { transform-origin: 50% 50%; }
/* Geometry straight from Figma (node 488:627): the oval sits at 61/197 across
   and 235/559 down the pump, 116×61 — i.e. offset right of centre, not centred. */
.hero__pump-hours {
  position: absolute;
  left: 30.96%;
  top: 42%;
  width: 58.9%; height: auto;
  margin: 0;
  color: var(--c-green-800);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: calc(var(--decor-w) / 11.2);
  text-align: center;
  line-height: .98;
}
.hero__pump-hours span { display: block; font-weight: 500; }
.hero__pump-hours span:nth-child(3) { margin-top: calc(var(--decor-w) / 25); }
.hero__couple {
  position: absolute;
  bottom: 0;
  left: calc(50% + var(--hero-w) / 2 - 32px + var(--decor-w) * .05);
  width: var(--decor-w);
}
/* Shared speech bubble — "Pay in Station" in black, "when satisfied." in red */
.bubble {
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #000;
}
.bubble em { display: block; font-style: normal; color: #cc3228; }

.hero__bubble {
  position: absolute;
  left: calc(50% + var(--hero-w) / 2 - 32px + var(--decor-w) * .172);
  bottom: calc(var(--decor-w) * 1.05);
  width: var(--decor-w);
  /* calc, not %, because % padding on an absolutely positioned box resolves
     against the containing block (the full-width .hero__decor), not itself. */
  padding: calc(var(--decor-w) * .122) calc(var(--decor-w) * .101) calc(var(--decor-w) * .213);
  background: url("../assets/icons/speech-bubble.svg") center/100% 100% no-repeat;
  font-size: calc(var(--decor-w) / 11.6);
}

/* --------------------------------------------------------------------------
   10. Services strip
   -------------------------------------------------------------------------- */
.services { background: var(--c-cream-50); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.service-card {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 28px 18px 24px;
  background: var(--c-white);
  border: 1px solid var(--c-cream-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-accent);
  box-shadow: 0 10px 24px rgba(26, 71, 49, .1);
}
.service-card__icon { font-size: 35.2px; line-height: 1; color: var(--c-ink); }
.service-card__icon img { width: 44px; height: 44px; object-fit: contain; }
.service-card__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .64px;
  text-transform: uppercase;
  color: var(--c-green-700);
}
.service-card__cta { font-size: 11.5px; font-weight: 600; color: var(--c-accent); }

/* Promo tiles */
.promo-grid {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}
.promo-grid:first-of-type { margin-top: 100px; }
.promo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  border-radius: var(--radius-md);
  color: var(--c-white);
}
.promo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Figma: linear-gradient(-90deg, tint 0% transparent → tint solid at 66.95%)
   i.e. a solid block of colour on the left that releases the photo on the right. */
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
              var(--promo-tint) 0%,
              var(--promo-tint) 33%,
              transparent 100%);
}

.promo--tyre    { --promo-tint: #a94d00; background: var(--c-promo-orange); }
.promo--mot     { --promo-tint: #0a3a80; background: #0d4795; }
.promo--brakes  { --promo-tint: #8c1414; background: #a81a1a; }
.promo--aircon  { --promo-tint: #4b1a86; background: #5c2099; }
.promo--careers { --promo-tint: #14371b; background: var(--c-green-700); }

.promo__badge {
  align-self: flex-start;
  padding: 4px 11.2px;
  border-radius: 3px;
  background: var(--c-promo-badge);
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: 1.5625px;
  text-transform: uppercase;
}
.promo__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: .64px;
  text-transform: uppercase;
  max-width: 240px;
}
.promo__text { font-weight: 500; font-size: 16px; max-width: 250px; }
.promo__btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid var(--c-white);
  background: rgba(0, 0, 0, .22);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .624px;
  text-transform: uppercase;
  color: var(--w-85);
}
.promo__btn:hover { background: var(--c-white); color: var(--c-accent-ink); }

/* --------------------------------------------------------------------------
   11. Why us + testimonials
   -------------------------------------------------------------------------- */
.why {
  position: relative;
  overflow: hidden;
  background: var(--c-green-650);
  color: var(--c-white);
}
/* The why-us band uses a wider grid than the standard container:
   517px logo + 437px copy + 405px testimonials + 2×80px gaps = 1519px. */
.why__grid {
  position: relative;
  z-index: 2;
  display: grid;
  /* The copy column is fixed at its Figma width (437px) and the logo column is
     the one that gives way when space is tight — otherwise the text is what
     gets squeezed, and the heading/body/feature labels all wrap early. */
  grid-template-columns: minmax(0, 517px) 437px 405px;
  justify-content: center;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: calc(1520px + var(--gutter) * 2);
  margin-inline: auto;
  padding: 80px var(--gutter);
}
.why__logo { width: 100%; height: auto; pointer-events: none; }
.why__left { display: grid; gap: 20px; justify-items: start; }

.why__label {
  font-size: 15.2px;
  font-weight: 600;
  letter-spacing: 2.28px;
  text-transform: uppercase;
  color: var(--c-accent);
}
.why__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: .95;
  letter-spacing: -0.58px;
}
.why__title em { font-style: normal; color: var(--c-accent); }
.why__text { font-size: 18px; color: var(--c-white); }

.why-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 16px;
  margin-top: 12px;
  width: 100%;
}
.why-feat { display: flex; gap: 12px; align-items: flex-start; }
.why-feat__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--c-accent-15);
  border: 1px solid var(--c-accent-20);
  font-size: 16px;
  color: var(--c-white);
}
.why-feat__title { font-weight: 600; font-size: 13.6px; color: var(--c-white); }
.why-feat__desc { font-size: 12.5px; color: var(--w-45); }

.why__right { display: grid; gap: 22px; }
.testimonial {
  display: grid;
  gap: 16px;
  padding: 37px;
  background: var(--c-green-800);
  border: 1px solid var(--c-green-600);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-solid);
}
.testimonial__stars { color: var(--c-accent); font-size: 13.6px; letter-spacing: 2px; }
.testimonial__quote {
  font-style: italic;
  font-size: 14.1px;
  line-height: 22.53px;
  color: var(--w-70);
}
.testimonial__author {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .749px;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   12. Locations
   -------------------------------------------------------------------------- */
.locations { background: var(--c-white); }
.locations__head { display: grid; gap: 10px; }

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.location-card {
  overflow: hidden;
  border: 1px solid var(--c-cream-border);
  border-radius: 14px;
}
.location-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px;
  background: var(--c-green-800);
}
.location-card__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-25);
}
.location-card__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19.2px;
  letter-spacing: .768px;
  text-transform: uppercase;
  color: var(--c-white);
}
.location-card__body { display: grid; gap: 16px; padding: 24px; }

.loc-info { display: grid; gap: 9.5px; }
.loc-row { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 19px; color: var(--c-green-800); }
.loc-row__icon { flex-shrink: 0; font-size: 14.4px; }
.loc-row a:hover { color: var(--c-accent); text-decoration: underline; }
.loc-row--phone { font-weight: 700; }

.loc-hours {
  display: grid;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius);
  background: var(--c-cream-200);
  color: var(--c-green-700);
  font-size: 16px;
}
.loc-hours__title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.152px;
  text-transform: uppercase;
}
.loc-hours__note { font-weight: 600; font-size: 12.5px; color: var(--c-green-800); }

/* --------------------------------------------------------------------------
   13. CTA strip
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  min-height: 384px;
  display: flex;
  align-items: center;
  background: var(--c-green-650);
  color: var(--c-white);
}
/* The fence runs along the bottom but breaks in the middle, behind the CTA
   buttons — two panels, matching the design's two fence images. */
.cta__fence {
  position: absolute;
  /* Figma runs the fence from y=259 to 405 in a 384px band — i.e. 21px of it
     hangs below the band. Anchoring at bottom:0 sat it 21px too high, which is
     what put the pickets up behind the buttons. */
  bottom: -21px;
  height: 146px;
  z-index: 1;
  background: url("../assets/img/picket-fence.png") repeat-x left bottom / auto 146px;
  pointer-events: none;
}
.cta__fence--left  { left: 0;  width: 45%; background-position: right bottom; }
.cta__fence--right { right: 0; width: 19%; background-position: left bottom; }

.cta__decor {
  position: absolute;
  left: max(calc(50% - 566px), 16px);
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
/* 330 rather than Figma's 347: at 347 the figure is 405px tall in a 384px band
   and the man's head gets clipped. 330 brings it to 385 so the head clears. */
.cta__couple { width: 330px; }
.cta__bubble {
  position: absolute;
  left: 284px;
  bottom: 240px;
  width: 254px;
  padding: 30px 26px 50px;
  background: url("../assets/icons/speech-bubble-left.svg") center/100% 100% no-repeat;
  font-size: 21px;
}
.cta__inner {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding-block: 80px;
  width: 100%;
}
/* Pulled left off the container edge, into the open green between the couple
   and the right-hand fence panel. */
/* The fence is placed in viewport %, the copy in container px, so a fixed
   margin only lines them up at one width. The gap runs 45vw→81vw, so its centre
   is 63vw; this puts the 420px block's centre exactly there, giving equal green
   on both sides at any width. */
.cta__content {
  display: grid;
  gap: 40px;
  justify-items: start;
  max-width: 420px;
  margin-right: max(24px, calc(min(100vw - 32px, 50vw + 608px) - 63vw - 210px));
}
.cta__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 3.6vw, 47px);
  line-height: 1;
  letter-spacing: -0.52px;
}
.cta__title em { font-style: normal; display: block; color: var(--c-accent); }
.cta__text { font-size: 16px; color: var(--w-60); margin-top: 8px; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-green-900);
  color: var(--w-45);
  font-size: 13.6px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 428px repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-block: 60px;
}
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__brand .logo img { width: 205px; }
.footer__about { max-width: 311px; line-height: 19.1px; color: var(--w-50); }

.footer__social { display: flex; gap: 10px; padding-top: 4px; }
.footer__social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--w-06);
  border: 1px solid var(--w-10);
  color: var(--w-50);
  font-size: 13.6px;
  transition: background-color .18s ease, color .18s ease;
}
.footer__social a:hover { background: var(--c-accent); color: var(--c-accent-ink); border-color: transparent; }

.footer__col h4 {
  margin-bottom: 18px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15.2px;
  letter-spacing: 1.52px;
  text-transform: uppercase;
  color: var(--c-white);
}
.footer__col li a { display: block; padding-block: 4px; }
.footer__col li a:hover { color: var(--c-accent); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 30px;
  border-top: 1px solid var(--w-08);
  font-size: 12.5px;
  color: var(--w-45);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

/* ≥ 1101px — the logo overhangs the top bar, so reserve its column and stop
   the right-packed offer text sliding underneath it at mid widths. */
@media (min-width: 1101px) {
  .topbar__inner { padding-left: 237px; }
}

/* ≥ 1400px — reproduce the Figma proportions rather than approximate them.
   The 1920 comp puts 1280px of content between 320px gutters, i.e. content is
   exactly two thirds of the viewport and the pump is 10.26vw. Tying both to
   those ratios keeps the decorations in their designed position at every width;
   the hero content narrows to make room, which is what the comp does too.
   Below 1400px there is no gutter left to give them, so they are hidden. */
@media (min-width: 1400px) {
  .hero {
    /* Hold the gutters at a constant 270px and let the hero content take
       whatever is left, up to its normal 1280px. That keeps the pump at very
       near full size — and therefore at its designed height on the hero — at
       every width, instead of shrinking it and dropping it down the band.
       From ~1820px up the content is back to a normal 1280px. */
    --hero-w: min(1280px, calc(100vw - 540px));
    --decor-w: min(197px, calc((100vw - var(--hero-w)) / 2 - 76px));
  }
  .hero > .container { max-width: var(--hero-w); }
  .hero__decor { display: block; }
}

/* ≤ 1500px — the why-us logo column no longer fits alongside the copy */
@media (max-width: 1500px) {
  .why__grid {
    grid-template-columns: minmax(0, 437px) 405px;
    max-width: var(--container);
    gap: 60px;
  }
  .why__logo { display: none; }
}

/* ≤ 1400px — CTA decorations shrink before they reach the copy (÷0.75) */
@media (max-width: 1400px) {
  .cta__couple { width: 260px; }
  .cta__bubble { left: 224px; bottom: 189px; width: 200px; font-size: 17px; padding: 22px 20px 38px; }
}

/* ≤ 1200px — tighter nav, 3-col services */
@media (max-width: 1200px) {
  .hero__inner { gap: 40px; }
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-link { padding: 8px 10px; font-size: 13.4px; }
  .nav-list { gap: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ≤ 1024px — collapse the two-column hero and why-us grids */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: 56px; }
  .hero__content { justify-items: center; text-align: center; }
  .hero__lead { max-width: 56ch; }
  .hero__helper { justify-content: center; }
  .hero__card { padding: 24px 0 0; }
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 64px; }
  .why__left { max-width: none; }
  .promo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__decor { display: none; }
  .cta__inner { justify-content: center; text-align: center; }
  .cta__content { justify-items: center; max-width: 560px; margin-right: 0; }
  .cta__btns { justify-content: center; }
}

/* ≤ 1100px — the seven-item nav no longer fits beside the logo and CTAs */
@media (max-width: 1100px) {
  .notice__offer-group { margin-left: 0; }
  .nav-toggle { display: block; }
  .header__inner { min-height: 60px; padding-block: 8px; }
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--c-green-600);
    border-top: 1px solid var(--w-12);
    box-shadow: var(--shadow-header);
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .header__nav.is-open { max-height: 80vh; overflow-y: auto; }
  .nav-list { flex-direction: column; align-items: stretch; padding: 12px var(--gutter) 20px; }
  .nav-link { padding: 12px 0; font-size: 15px; justify-content: space-between; }
  .nav-link:hover, .nav-link[aria-current="page"] { background: transparent; }

  .has-dropdown > .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--w-12);
    border-radius: 0;
    margin: 0 0 8px 4px;
    padding: 0 0 0 12px;
    display: none;
  }
  .has-dropdown.is-open > .dropdown { display: grid; }
  .dropdown a { color: var(--w-70); padding: 8px 0; }
  .dropdown a:hover { background: transparent; color: var(--c-accent); }

  /* logo | Book Online | burger */
  .logo { order: 1; }
  .header .logo img { width: 145px; }
  .header .logo { align-self: center; margin: -12px 0; }
  .notice { padding: 20px 0 16px; }
  .header__cta { order: 2; margin-left: auto; gap: 8px; }
  .nav-toggle { order: 3; margin-left: 0; }
  .header__nav { order: 4; }
  .header__cta .btn--outline { display: none; }
  .header__inner { gap: 12px; }

  .topbar__notice { margin-right: 0; width: 100%; text-align: center; }
  .topbar__inner { justify-content: center; text-align: center; flex-wrap: wrap; }
  .topbar__links { justify-content: center; }
}

/* ≤ 768px — single-column content */
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .topbar { display: none; }
  .notice__link { display: none; }
  .section { padding-block: 44px; }
  .section--lg { padding-block: 52px; }

  .section-head { align-items: flex-start; gap: 20px; }

  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .promo-grid--3, .promo-grid--2 { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
  .why-features { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 44px; }

  .tyre-search {
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
  }
  .plate { flex: 1 1 100%; }
  .tyre-search__select { flex: 1 1 auto; }
  .tyre-search__divider { display: none; }
  .tyre-search__btn { flex: 1 1 auto; }

  .hero__card { display: none; }
  .quick-services { max-width: none; }
  .promo { min-height: 220px; padding: 24px; }
  .promo__title { font-size: 24px; line-height: 28px; }
  .testimonial { padding: 26px; }
  .cta { min-height: 0; }
  .cta__inner { padding-block: 56px; }
  .cta__content { gap: 28px; }
}

/* ≤ 560px */
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .header__inner { gap: 8px; }
  .header .logo img { width: 130px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 32px 20px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { justify-content: center; text-align: center; }
  .quick-services { grid-template-columns: 1fr 1fr; gap: 10px; }
  .btn { padding: 10px 18px; font-size: 14.5px; }
  .btn--lg { padding: 13px 24px; font-size: 16px; }
  .cta__inner { padding-block: 48px 150px; }
  .cta__btns { width: auto; flex-wrap: nowrap; gap: 8px; }
  .cta__btns .btn { flex: 0 1 auto; padding: 9px 12px; font-size: 12.5px; }
  .topbar { font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   16. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .header, .notice, .cta, .hero__decor { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   18. CMS CONTENT (.prose) + BREADCRUMB
   Typography for HTML authored in the admin panel. The markup here is whatever
   16 years of editors have written — inline styles, tables, <font> tags — so
   these rules stay defensive: constrain width and images, set sane rhythm, and
   avoid assuming any particular structure.
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--c-muted);
}
.breadcrumb a { color: var(--c-green-700); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-ink); font-weight: 600; }

.prose {
  max-width: 74ch;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.7;
}
.prose > * + * { margin-top: 1.1em; }

.prose h2,
.prose h3,
.prose h4 {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-green-700);
  margin-top: 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 19px; }

.prose a { color: var(--c-green-700); text-underline-offset: 2px; }
.prose a:hover { color: var(--c-accent-ink); }

.prose ul,
.prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose table:not([align]) th,
.prose table:not([align]) td {
  padding: 10px 12px;
  border: 1px solid var(--c-cream-border);
  text-align: left;
  vertical-align: top;
}

/* Tables Word used purely for layout (drop caps, image floats) carry an
   align attribute. Leave those completely alone — they are not data. */
.prose table[align],
.prose table[align] th,
.prose table[align] td { border: 0; padding: 0; background: none; }
.prose table:not([align]) th { background: var(--c-cream-50); font-weight: 700; }

/* Legacy content carries fixed pixel widths and inline styles that overflow
   on small screens. Let wide blocks scroll rather than breaking the page. */
.prose table:not([align]),
.prose pre { display: block; max-width: 100%; overflow-x: auto; }
.prose table[align] { max-width: 100%; }
.prose [style*="width"] { max-width: 100% !important; }

@media (max-width: 768px) {
  .prose { font-size: 15px; }
  .prose h2 { font-size: 26px; }
  .prose h3 { font-size: 21px; }
}