/* ===========================================================
   TYRE LAB — Pirelli Performance Centre, Pukekohe
   Self-hosted fonts (issue #30)
   =========================================================== */

/* Was a <link> to fonts.googleapis.com, which cost this page a full
   cross-origin round trip — PageSpeed measured 750ms to deliver 1.6 KiB,
   almost entirely DNS/TLS/connect to a third party the browser had no other
   reason to talk to. Self-hosting removes that request outright; the two
   files below get the same year-long .htaccess caching as everything else in
   this repo, which fonts.gstatic.com never offered this origin control over.

   Both are the LATIN-only file Google itself serves for these weights —
   fetched from the same URL `<link href="https://fonts.googleapis.com/css2?
   family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600">` was
   requesting, with only the unicode-range subsets this site never uses
   (cyrillic, greek, vietnamese, ...) left out. Each is a variable font: one
   file covers every weight below via `font-weight: 400 700` (or 600), the
   same declarations Google's own stylesheet emits, just pointed at fonts/
   instead of fonts.gstatic.com.

   Re-fetching either family (a weight added, a new one wanted) means
   downloading the equivalent Google Fonts URL again and replacing the file
   — there is no build step that regenerates these. */
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Oswald.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/Inter.woff2") format("woff2");
}

/* ===========================================================
   Design tokens
   =========================================================== */
:root {
  --black: #0a0a0a;
  --charcoal: #151515;
  --charcoal-2: #1e1e1e;
  --steel: #8a8a8a;
  --steel-light: #b8b8b8;
  --white: #f5f5f5;
  --red: #e0201f;
  --red-dark: #a91616;
  --red-glow: rgba(224, 32, 31, 0.35);
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1180px;

  /* Theme tokens — power the light/dark mode split, decided by the
     browser/OS "prefers-color-scheme" setting (see the media query
     below). Defaults here match the original all-dark design. The
     header, footer, search panel and hero banners deliberately keep
     referencing the constants above directly (not these tokens) so
     they stay black in both modes. */
  --bg: var(--black);
  --surface: var(--charcoal-2);
  --surface-hover: #232323;
  --surface-alt: var(--charcoal);
  --text: var(--white);
  --text-muted: var(--steel-light);
  --text-faint: var(--steel);
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.14);
  --input-bg: var(--black);

  /* The Clipped Assist plans' colours: one per family, shared by its plan
     card and its price table. Darker in light mode so they still read as
     text on white. */
  --plan-wheels: #5aa7e6;
  --plan-gold: #e0b13a;
  --plan-platinum: #c3cad4;

  /* Clipped Assist's own tables (.ca-panel): its brochure's alternating rows
     and orange, on the site's surfaces in each theme. */
  --ca-panel: var(--charcoal-2);
  --ca-row-a: #2a2a2a;
  --ca-row-b: #191919;
  --ca-badge: #050505;
  --ca-orange: #f7941d;
  --ca-price: #f7a145;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f4f1;
    --surface: #fff;
    --surface-hover: #f2f0eb;
    --surface-alt: #ebe9e4;
    --text: #17181a;
    --text-muted: #53565b;
    --text-faint: #6d7075;
    --line: rgba(15, 13, 10, 0.12);
    --line-soft: rgba(15, 13, 10, 0.08);
    --line-strong: rgba(15, 13, 10, 0.18);
    --input-bg: #fff;
    --plan-wheels: #1f6fb8;
    --plan-gold: #9a7300;
    --plan-platinum: #66717f;
    --ca-panel: #f4f4f4;
    --ca-row-a: #e6e6e6;
    --ca-row-b: #fff;
    --ca-badge: #111;
    --ca-price: #b85f05;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

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

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

/* Small shared utilities for the page heroes and the centred sections.
   These exist as classes rather than style="" attributes because no page
   carries inline CSS — html-validate's no-inline-style rule enforces that
   on every built page, and webhint flags it in the editor. */
.accent {
  color: var(--red);
}
.container-center {
  text-align: center;
}
.container-center .eyebrow {
  justify-content: center;
}
.container-center h2 {
  margin-top: 14px;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}
.heading-constrained {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.center-lede {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--text-muted);
}
.center-lede.narrow {
  max-width: 520px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.eyebrow {
  font-family: var(--font-display);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--red);
  display: inline-block;
}

/* Skip link for a11y */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--red);
  color: var(--white);
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Visually hidden but still readable by screen readers / SEO crawlers */
.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;
}

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

/* ===========================================================
   Header / Nav
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: var(--container);
  margin: 0 auto;
}

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  z-index: 600;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Groups main nav + icon buttons on the right of the header */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
  border-color: var(--red);
  color: var(--red);
}
.search-toggle svg {
  width: 18px;
  height: 18px;
}

/* ===========================================================
   Site search panel
   =========================================================== */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0 28px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 400;
}
.search-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.search-form {
  display: flex;
  gap: 12px;
}
.search-form input[type="search"] {
  flex: 1;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.98rem;
}
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--red);
}
.search-form input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.search-results {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-height: 360px;
  overflow-y: auto;
}
.search-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--white);
  transition: color 0.15s ease;
}
.search-result:hover,
.search-result:focus-visible {
  color: var(--red);
}
.search-result-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.search-result-meta {
  color: var(--steel-light);
  font-size: 0.8rem;
  white-space: nowrap;
}
.search-no-results {
  color: var(--steel-light);
  font-size: 0.9rem;
  padding: 12px 4px 2px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  height: 54px;
  width: auto;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-text .name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--white);
}
.brand-text .tag {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin-top: 3px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
}

.main-nav a {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-light);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--white);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  width: 100%;
}

.main-nav a.nav-cta {
  font-family: var(--font-display);
  background: var(--red);
  color: var(--white) !important;
  padding: 10px 26px 10px 32px !important;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.main-nav a.nav-cta:hover {
  background: var(--red-dark);
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--steel-light);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-phone svg {
  flex-shrink: 0;
  color: var(--red);
}
.nav-phone a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-phone a:hover,
.nav-phone a:focus-visible {
  color: var(--white);
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.88rem;
  padding: 15px 30px 15px 38px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Full-width submit — the contact form and each sale's enquiry form. */
.btn-block {
  width: 100%;
  justify-content: center;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}
.btn-primary:hover {
  background: var(--red-dark);
  box-shadow: 0 10px 30px var(--red-glow);
}

/* .btn-outline draws its fill + border as two stacked, independently
   clipped layers instead of a native `border`. A native border combined
   with clip-path only strokes the rectangular edges — the sloped edge
   clip-path cuts is left with no stroke at all, so the outline looked
   broken/cut open along the slant. Stacking a full-size "border colour"
   layer behind a slightly inset "fill colour" layer (both clipped to the
   same notched shape) keeps a uniform outline all the way around,
   slope included.

   There are only two button looks on the whole site — this one (solid
   black, white outline, white text; hover reddens the outline only) and
   .btn-primary (solid red). Both stay identical in every section and in
   both colour themes — do not add per-section or light-mode overrides. */
.btn-outline {
  --btn-outline-fill: var(--black);
  --btn-outline-border: rgba(255, 255, 255, 0.4);

  position: relative;
  background: transparent;
  color: var(--white);
  border: none;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}
.btn-outline::before,
.btn-outline::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background 0.2s ease;
}
.btn-outline::before {
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
  background: var(--btn-outline-border);
  z-index: -2;
}

/* The fill layer is the outer shape moved in by the 1.5px outline on every
   side, the slope included. It is drawn in the button's full box rather
   than an inset one: shrinking the box and reusing "20px 0 ... 0 100%"
   made the inner slope steeper than the outer, so the outline ran about
   1.9px thick at the top of the slant and 0.9px at the bottom.

   The two slanted corners are where the outer slope, pushed 1.5px inward
   at right angles to itself, meets the inner top and bottom edges. That
   depends on the button's height: these are for 52.5px, the height of
   every one-line .btn (15px padding twice plus a 22.5px line). A button
   that wraps to two lines is off by under 0.2px, which doesn't show.
   Changing the outline width, the 20px slope or the button's padding means
   working them out again:
     k      = sqrt(1 + (20 / 52.5)^2)              = 1.0701
     top    = 20 - 20 * 1.5 / 52.5 + 1.5 * k       = 21.03px
     bottom =      20 * 1.5 / 52.5 + 1.5 * k       = 2.18px */
.btn-outline::after {
  clip-path: polygon(
    21.03px 1.5px,
    calc(100% - 1.5px) 1.5px,
    calc(100% - 1.5px) calc(100% - 1.5px),
    2.18px calc(100% - 1.5px)
  );
  background: var(--btn-outline-fill);
  z-index: -1;
}
.btn-outline:hover {
  --btn-outline-border: var(--red);
}

/* ===========================================================
   Speed stripe divider — signature element

   Gaps are transparent, so whatever sits behind shows through — the
   page background between two ordinary sections (white in light mode,
   black in dark), or, for the full-size divider, the hero image itself.

   The full size is placed directly after the homepage's .hero in the
   markup and pulls itself up by its own height (negative margin) to
   overlap that section's bottom edge, so the red stripes sit over the
   hero photo with the photo showing through the negative space instead
   of the section that follows. Every .page-hero (about/services/tyres/
   etc.) uses the thin variant instead — general-purpose, sits inline
   with no overlap — so those banners stay a plain fixed-height box
   rather than a wipe over the photo.

   z-index: 3 matters only on the homepage's .hero — its active slide,
   badge, arrows and dots all set z-index: 2 to stack above each other,
   which otherwise buries the overlapping divider under the slide image. */
.stripe-divider {
  height: 10px;
  width: 100%;
  margin-top: -10px;
  position: relative;
  z-index: 3;
  background: repeating-linear-gradient(
    115deg,
    var(--red) 0 40px,
    transparent 40px 56px
  );
  opacity: 0.9;
}
.stripe-divider.thin {
  height: 4px;
  margin-top: 0;
  opacity: 0.6;
}

/* ===========================================================
   Hero — rotating slideshow. Each slide is a full-bleed link to a
   sale, /services or /contact (see js/hero-slideshow.js). A slanted
   115deg wipe (echoing .stripe-divider and the site's clip-path
   buttons) sweeps the incoming slide across; JS drives the wipe, the
   staggered caption reveal, the dots and autoplay, so this degrades
   to a static first slide if JS fails to load.
   =========================================================== */
.hero {
  position: relative;
  min-height: 88vh;
  color: var(--white);
  background: var(--black);
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  color: inherit;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  pointer-events: none;

  /* Collapsed: a zero-area parallelogram parked off the left edge,
     ready to sweep in. Matching point counts across states keeps the
     clip-path interpolation smooth. */
  clip-path: polygon(-25% 0, -25% 0, -50% 100%, -50% 100%);
}

/* Transitions are only enabled once JS has painted the first slide
   (see .is-animated, set on the next frame in hero-slideshow.js) so
   the initial slide is readable immediately instead of wiping in. */
.hero-slides.is-animated .hero-slide {
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.hero-slide.is-active {
  clip-path: polygon(-25% 0, 145% 0, 120% 100%, -50% 100%);
  pointer-events: auto;
  z-index: 2;
}

/* The outgoing slide — held fully expanded and un-transitioning so it
   stays visible underneath while the incoming slide wipes over it.
   Cleared (class removed) by JS once the wipe finishes. */
.hero-slide.is-leaving {
  clip-path: polygon(-25% 0, 145% 0, 120% 100%, -50% 100%);
  transition: none;
  z-index: 1;
}

/* The first slide's photo is a real <img> rendered at build time, not a
   background-image, so the browser's preload scanner can find it and start the
   download immediately — it is this page's LCP element. object-fit: cover
   reproduces what background-size: cover does for the script-built slides, so
   the two look identical. Sized by the width/height attributes the build
   measures off the file; inset: 0 is what makes them scale rather than set the
   box. */
.hero-slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-slide-scrim {
  position: absolute;
  inset: 0;
  background:
    /* Stays dark right to the bottom edge — that's the band the
       full-size stripe-divider overlaps (see .stripe-divider's negative
       margin), and its transparent gap shows this dark wash through
       rather than a lighter strip of the raw photo. */
    linear-gradient(
      0deg,
      rgba(10, 10, 10, 0.94) 0,
      rgba(10, 10, 10, 0.94) 24px,
      transparent 24px
    ),
    /* Same light wash as .page-hero::after, so the white heading/lede
       stay readable over a bright patch of photo without darkening the
       image the way the old heavy scrim did. */
    linear-gradient(
      100deg,
      rgba(10, 10, 10, 0.45) 10%,
      rgba(10, 10, 10, 0.2) 55%,
      rgba(10, 10, 10, 0.08) 100%
    );
}

.hero-slide-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 28px 80px;
}

/* Staggered caption reveal — each direct child (eyebrow, title, text,
   cta/actions) rises and fades in just behind the wipe's leading edge.
   The outgoing (.is-leaving) slide's captions are pinned fully visible
   with no transition so they don't twitch as they're covered. */
.hero-slides.is-animated .hero-slide-inner > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-slide.is-active .hero-slide-inner > * {
  opacity: 1;
  transform: none;
}
.hero-slide.is-active .hero-slide-inner > :nth-child(1) {
  transition-delay: 0.35s;
}
.hero-slide.is-active .hero-slide-inner > :nth-child(2) {
  transition-delay: 0.45s;
}
.hero-slide.is-active .hero-slide-inner > :nth-child(3) {
  transition-delay: 0.55s;
}
.hero-slide.is-active .hero-slide-inner > :nth-child(4) {
  transition-delay: 0.65s;
}
.hero-slide.is-leaving .hero-slide-inner > * {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-slide-inner .eyebrow {
  margin-bottom: 14px;
}

.hero-slide-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  max-width: 640px;
  margin-bottom: 16px;
}

.hero-slide-text {
  display: block;
  max-width: 520px;
  color: var(--steel-light);
  font-size: 1.05rem;
  margin-bottom: 26px;
}

/* Brand slide — the original static hero: two CTA buttons instead of the
   other slides' one, and its background photo (the shared
   .hero-slide-scrim underneath keeps the text legible — see
   buildHeroSlideEl in hero-slideshow.js, which adds the scrim whenever a
   slide has an image). No diagonal stripe here — that pattern is reserved
   for placeholders (images/placeholder.svg bakes in the same one), and this
   slide always has a real photo. */

.hero-slide-highlight {
  color: var(--red);
}

.hero-slide-title-brand {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  max-width: 780px;
}

.hero-slide-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-badge {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(21, 21, 21, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 20px;
  backdrop-filter: blur(6px);
}
.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px var(--red-glow);
}
.hero-badge span {
  font-size: 0.85rem;
  color: var(--steel-light);
  letter-spacing: 0.02em;
}
.hero-badge strong {
  color: var(--white);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 10, 10, 0.5);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.hero-arrow:hover {
  background: rgba(224, 32, 31, 0.85);
  border-color: var(--red);
}
.hero-arrow-prev {
  left: 20px;
}
.hero-arrow-next {
  right: 20px;
}

.hero-dots {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  overflow: hidden;
  transition:
    width 0.25s ease,
    background 0.25s ease;
}
.hero-dot.is-active {
  width: 28px;
  background: rgba(255, 255, 255, 0.25);
}

/* Autoplay progress — fills the active dot over the dwell so the next
   slide isn't a surprise. Freezes via .hero.is-paused (set by JS on
   hover/focus, matching autoplay actually pausing) and restarts from
   empty automatically whenever .is-active moves to a different dot. */
.hero-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-dot.is-active::after {
  animation: hero-dot-fill var(--hero-dwell, 7500ms) linear forwards;
}
.hero.is-paused .hero-dot.is-active::after {
  animation-play-state: paused;
}

@keyframes hero-dot-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Reduced motion — collapse the wipe, caption cascade and dot fill to a
   plain instant swap. hero-slideshow.js also stops autoplay outright in
   this case, so viewers drive the slides via the arrows/dots instead. */
@media (prefers-reduced-motion: reduce) {
  .hero-slides.is-animated .hero-slide {
    transition: none;
    clip-path: none;
    visibility: hidden;
  }
  .hero-slides.is-animated .hero-slide.is-active {
    visibility: visible;
  }
  .hero-slides.is-animated .hero-slide-inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-dot.is-active::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* ===========================================================
   Sections
   =========================================================== */
section {
  padding: 50px 0;
  position: relative;
}
.section-alt {
  background: var(--surface-alt);
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-top: 14px;
}
.section-head p {
  color: var(--text-muted);
  margin-top: 16px;
  font-size: 1.02rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  text-align: center;
}
.section-head.center .eyebrow {
  justify-content: center;
}
.section-head.center .eyebrow::before {
  display: none;
}

/* The centred "View all …" button that closes a section. .roomy is the
   slightly deeper gap the homepage's services section uses. */
.section-cta {
  text-align: center;
  margin-top: 40px;
}
.section-cta.roomy {
  margin-top: 50px;
}

/* ===========================================================
   Cards / Grids — Services
   =========================================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.service-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.service-card:hover {
  background: var(--surface-hover);
  border-color: var(--red);
}
.service-card .service-media {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
}
.service-card .service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card:hover .service-media img {
  transform: scale(1.06);
}
.service-card .service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--surface) 0%, transparent 45%);
}
.service-card .service-body {
  position: relative;

  /* Pulls the title up into the image's fade zone (.service-media::after
     above) so the photo stays faintly visible behind it, rather than the
     title sitting entirely on the solid card background underneath. */
  margin-top: -24px;
  padding: 24px 28px 30px;
}
.service-card-title {
  font-size: 1.25rem;
  margin: 14px 0 12px;
}
.service-card .service-media ~ .service-body .service-card-title {
  margin-top: 0;
}
.service-card p {
  color: var(--text-muted);
  font-size: 0.96rem;
}

/* Homepage teaser cards only (.section-alt scopes this away from the full
   grid on /services — see src/pages/index.html vs. services.html): the
   teaser omits the description paragraph, so the generic .service-body
   padding/h3 margin (sized for a card with a paragraph under the title)
   left a lot of empty space above and below the title on its own. */
.section-alt .service-card .service-body {
  padding: 28px 28px;
}
.section-alt .service-card .service-card-title {
  margin-bottom: 0;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  transition: width 0.3s ease;
}
.service-card:hover::before {
  width: 100%;
}

/* ===========================================================
   Why us / stats strip
   =========================================================== */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.stat:last-child {
  border-right: none;
}
.stat .val,
.stat-brand-logo {
  height: clamp(2.6rem, 6vw, 3.6rem);
}
.stat .val {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 2.4rem);
  line-height: 1;
  color: var(--red);
}
.stat .label {
  color: var(--text-muted);
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
.stat-brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* ===========================================================
   Brand strip
   =========================================================== */
.brand-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.brand-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  padding: 24px 20px;
  background: var(--surface);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.brand-logo-card img {
  max-width: 130px;
  max-height: 44px;
  width: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.6);
  transition: filter 0.2s ease;
}

@media (prefers-color-scheme: light) {
  .brand-logo-card img {
    filter: grayscale(1) brightness(0.95) contrast(1.05);
  }
}

.brand-logo-card:hover,
.brand-logo-card:focus-visible {
  background: var(--surface-hover);
  border-color: var(--red);
}
.brand-logo-card:hover img,
.brand-logo-card:focus-visible img {
  filter: none;
}

.brand-logo-card.featured {
  border-color: var(--red);
  background: linear-gradient(135deg, rgba(224, 32, 31, 0.18), transparent);
}
.brand-logo-card.featured img {
  filter: none;
}
.brand-logo-card .flag {
  color: var(--red);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ===========================================================
   Tyre catalogue
   =========================================================== */
.tyre-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px;
  margin-bottom: 24px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 150px;
  min-width: 140px;
}

/* The free-text search box holds the longest placeholder, so it starts
   wider than the selects beside it. */
.filter-group.wide {
  flex-basis: 220px;
}
.filter-group label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-group input,
.filter-group select {
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  width: 100%;
}
.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--red);
}
.filter-group select {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e0201f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.filter-group select:hover {
  border-color: rgba(224, 32, 31, 0.5);
}
.filter-group select option {
  background: var(--surface);
  color: var(--text);
}
.filter-actions {
  flex: 0 0 auto;
}

.tyre-results-meta {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 26px;
}

.tyre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.tyre-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

/* The sale link wraps only the media and body, so the quote button below is
   never an <a> inside an <a>. It carries the card's own layout. */
.tyre-card-main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tyre-card:hover,
.tyre-card:focus-within {
  background: var(--surface-hover);
  border-color: var(--red);
}
.tyre-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.tyre-card:hover img {
  transform: scale(1.06);
}
.tyre-quote-btn {
  margin: 0 24px 24px;
  text-align: center;
}
.tyre-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tyre-brand {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tyre-card h3 {
  font-size: 1.1rem;
}
.tyre-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  flex: 1;
}
.tyre-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.tyre-spec {
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tyre-empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
}

/* ===========================================================
   Sales / specials
   =========================================================== */
.sale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.sale-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.sale-card:hover,
.sale-card:focus-visible {
  background: var(--surface-hover);
  border-color: var(--red);
}
.sale-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sale-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sale-card:hover .sale-media img {
  transform: scale(1.06);
}
.sale-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px 6px 18px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}
.sale-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sale-body h3 {
  font-size: 1.15rem;
}
.sale-body p {
  color: var(--text-muted);
  font-size: 0.92rem;
  flex: 1;
}
.sale-link {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

/* Shown on /sales when nothing is running — which, with an empty
   src/data/sales.mjs, is the whole page. It carries the section on its own,
   so it gets real vertical presence rather than the one dim line it used to
   be when it only ever appeared under a grid of cards. */
.sale-empty {
  text-align: center;
  padding: 90px 20px 100px;
  color: var(--text-muted);
}

.sale-empty h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--text);
  margin-bottom: 16px;
}

.sale-empty p {
  max-width: 460px;
  margin: 0 auto;
}

/* Sale detail page */
.sale-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(224, 32, 31, 0.16);
  border: 1px solid rgba(224, 32, 31, 0.4);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-top: 18px;
}
.sale-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* No aspect-ratio here on purpose — sale photos aren't a fixed shape, and one
   would crop them. The space is reserved instead by the width/height
   attributes scripts/build.mjs measures off the file and writes into the tag,
   which `height: auto` scales from. Don't strip those attributes. */
.sale-detail-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.sale-description {
  color: var(--text-muted);
  margin-top: 20px;
  white-space: pre-line;
}
.sale-contact-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.sale-contact-note p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.sale-contact-note ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sale-contact-note a {
  color: var(--text);
  font-weight: 500;
  transition: color 0.2s ease;
}
.sale-contact-note a:hover {
  color: var(--red);
}
.sale-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.sale-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  padding: 13px 16px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.sale-item-row:hover {
  border-color: var(--red);
}
.sale-item-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  flex-shrink: 0;
}

/* ===========================================================
   Reviews
   =========================================================== */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: 32px 28px;
}
.review-card .stars {
  color: var(--red);
  font-size: 1.1rem;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.review-card .review-text {
  color: var(--text-muted);
  font-size: 0.96rem;
  margin-bottom: 20px;
  text-align: justify;
  hyphens: auto;
}
.review-card .review-author {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

/* ===========================================================
   Page hero — shared banner for About / Services / Tyres.
   A page gets its own photo from one of the per-page classes at the
   end of this block, each of which sets --hero-image; the gradient +
   diagonal stripe overlay always renders on top so the heading stays
   legible. No image wanted? Leave --hero-image unset (the default),
   or set --hero-image-opacity: 0 to hide a photo without removing it.
   Photo framed wrong for this page's shorter banner? Set
   --hero-image-position too (same value the photo uses elsewhere is
   framed for a much taller box, e.g. the homepage hero, so it often
   needs its own position here rather than reusing that crop).

   Path gotcha: the url() lives in a custom property, but it's read
   by the `background-image` declaration below — so per spec it
   resolves relative to THIS file (css/style.css), not the HTML page
   the class is used on. Hence the "../images/…" below. */
.page-hero {
  --hero-image: none;
  --hero-image-opacity: 1;
  --hero-image-position: center 65%;

  /* The diagonal stripe is the "no photo yet" placeholder look (see
     images/placeholder.svg, which bakes in the same pattern for cards) —
     a page that sets --hero-image should also set this to 0. */
  --hero-stripe-opacity: 1;

  position: relative;
  overflow: hidden;
  padding: 70px 0 60px;

  /* Fixed floor (services' own rendered height) so every page-hero — this
     page and any future one — reads as the same size instead of each
     bobbing to match its own heading length; flex + centering keeps
     shorter content from looking pinned to the top, and content longer
     than this is still free to grow the box rather than clip. */
  min-height: 315px;
  display: flex;
  align-items: center;
  color: var(--white);
  background: var(--black);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-position: var(--hero-image-position);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--hero-image-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Kept light on purpose (issue: removing the tint made the site look
       dark) — just enough that the white h1/p stay readable over a bright
       patch of photo, not the heavy wash this used to be. */
    linear-gradient(
      100deg,
      rgba(10, 10, 10, 0.45) 10%,
      rgba(10, 10, 10, 0.2) 55%,
      rgba(10, 10, 10, 0.08) 100%
    ),
    repeating-linear-gradient(
      115deg,
      transparent 0 120px,
      rgba(224, 32, 31, calc(0.16 * var(--hero-stripe-opacity))) 120px 128px
    );
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Every page hero's heading and lede are the same size — including the
   one each sale page renders — so they're styled by element here rather
   than restated on each page. */
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 18px 0 20px;
  max-width: 760px;
}
.page-hero p {
  max-width: 620px;
  color: var(--steel-light);
  font-size: 1.05rem;
}

/* One class per page that has a hero photo. Add a class here rather than
   a style="" attribute on the section — see the path gotcha above for why
   the url() is written relative to this file. */
.page-hero.hero-contact {
  --hero-image: url("../images/TL_Foyer.webp");
  --hero-image-position: center 70%;
  --hero-stripe-opacity: 0;
}
.page-hero.hero-services {
  --hero-image: url("../images/TL_Shop_Floor.webp");
  --hero-image-position: center 50%;
  --hero-stripe-opacity: 0;
}
.page-hero.hero-clipped-assist {
  /* Clipped Assist's own photo of a dent being pulled, from its brochures.
     The white door is brighter than any other hero photo, so it is dimmed
     against the hero's black to keep the heading readable. */
  --hero-image: url("../images/clipped-assist-dent-repair.webp");
  --hero-image-position: center 50%;
  --hero-image-opacity: 0.4;
  --hero-stripe-opacity: 0;
}
.page-hero.hero-tyres {
  --hero-image: url("../images/TL_Tyre_Wall_4.webp");
  --hero-image-position: center 70%;
  --hero-stripe-opacity: 0;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  clip-path: polygon(
    24px 0,
    100% 0,
    100% calc(100% - 24px),
    calc(100% - 24px) 100%,
    0 100%,
    0 24px
  );
}
.about-copy h2 {
  margin-top: 14px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.about-copy p {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.values-list {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.values-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text-muted);
}
.values-list li::before {
  content: "";
  min-width: 10px;
  height: 10px;
  margin-top: 6px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 20px;
}
.team-card {
  text-align: center;
}
.team-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  margin-bottom: 16px;
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
}

/* A class, not the element: these moved from <h4> to <h3> so the About
   page's outline stops skipping a level (issue #28). Appearance unchanged. */
.team-card-name {
  font-size: 1.05rem;
}
.team-card span {
  color: var(--red);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ===========================================================
   FAQ page
   =========================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 26px;
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 1.4rem;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item[open] summary {
  border-bottom: 1px solid var(--line);
}
.faq-item p {
  color: var(--text-muted);
  padding: 18px 26px 24px;
}

/* ===========================================================
   Contact page
   =========================================================== */
.contact-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 32px;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 32px;
}
.contact-form-card {
  padding: 44px;
}
.contact-form-card h2 {
  font-size: 1.4rem;
  margin-bottom: 26px;
}
.contact-card h2 {
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.contact-info-col + .contact-info-col {
  border-left: 1px solid var(--line);
  padding-left: 32px;
  margin-left: 32px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child {
  border-bottom: none;
}
.info-row .ico {
  display: flex;
  color: var(--red);
  min-width: 26px;
}
.info-row .lbl {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.info-row .val {
  color: var(--text);
}
.info-row .val a:hover {
  color: var(--red);
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.hours-table tr {
  border-bottom: 1px solid var(--line);
}
.hours-table tr:last-child {
  border-bottom: none;
}
.hours-table td {
  padding: 11px 0;
  font-size: 0.95rem;
}
.hours-table td:first-child {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.82rem;
}
.hours-table td:last-child {
  text-align: right;
  color: var(--text);
}
.hours-table tr.closed td:last-child {
  color: var(--text-faint);
}
.hours-table tr.today {
  background: rgba(224, 32, 31, 0.06);
}
.hours-table tr.today td:first-child {
  color: var(--red);
}

.map-wrap {
  border: 1px solid var(--line);
  height: 100%;
  min-height: 340px;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0; /* filter: grayscale(0.4) invert(0.92) contrast(0.9); */
}

.footer-map {
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
  min-height: 340px;
}
.footer-map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0; /* filter: grayscale(0.4) invert(0.92) contrast(0.9); */
}

/* Contact form */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--red);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Spam honeypot: never shown, and an enquiry that fills it in is dropped
   by send-message.php. */
.honeypot {
  display: none;
}

/* The success / error line under a form's submit button. Both start with
   the hidden attribute, which js/main.js clears — so nothing here may set
   display, or hidden would stop working. */
.form-message {
  margin-top: 16px;
  color: var(--red);
  font-size: 0.9rem;
}

/* ===========================================================
   Clipped Assist: plan cards, cover lists and pricing tables.
   Every figure in them is rendered from src/data/clipped-assist.mjs.
   =========================================================== */
.about-copy.spaced-heading h2 {
  margin-bottom: 18px;
}

/* The partner's logo above the page hero's heading. White artwork, which is
   safe here because a page hero is dark in both colour themes. */
.partner-logo {
  display: block;
  height: 64px;
  width: auto;
  margin-bottom: 26px;
}

/* Clipped Assist's cover diagram: white lettering on a transparent
   background, so the panel uses the fixed black rather than a theme token.
   Light mode swaps in the black-lettered copy (the <source> in
   src/pages/clipped-assist.html, on this same media query) and the panel
   goes white with it. The two must switch together: either image on the
   other's panel is unreadable. */
.cover-diagram {
  background: var(--black);
  border: 1px solid var(--line);
  padding: 30px 28px;
  margin-bottom: 26px;
}

@media (prefers-color-scheme: light) {
  .cover-diagram {
    background: #fff;
  }
}
.cover-diagram img {
  display: block;
  width: 100%;
  max-width: 971px;
  margin: 0 auto;
  aspect-ratio: 971 / 577;
}

.split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

/* Each plan family's colour, carried by its card and its price table. */
.plan-wheels-only {
  --plan: var(--plan-wheels);
}
.plan-gold {
  --plan: var(--plan-gold);
}
.plan-platinum {
  --plan: var(--plan-platinum);
}

.plan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--plan, var(--red));
  padding: 30px 28px;
}
.plan-card-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--plan, var(--text));
}
.plan-card .check-list li::before {
  color: var(--plan, var(--red));
}
.plan-card p {
  color: var(--text-muted);
  font-size: 0.96rem;
}
.plan-card .check-list {
  margin-top: 18px;
}

.cover-card {
  margin-bottom: 50px;
}

/* The four headline figures under "What it is", after the strip along the
   foot of Clipped Assist's brochures. */
.ca-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 60px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ca-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 18px;
  text-align: center;
  background: var(--surface);
}
.ca-highlight-figure {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.ca-highlight-label {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* How it works: numbered by CSS so the steps stay a plain <ol>. */
.ca-steps {
  list-style: none;
  counter-reset: ca-step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.ca-steps li {
  counter-increment: ca-step;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px 24px;
}
.ca-steps li::before {
  content: counter(ca-step);
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--red);
  margin-bottom: 14px;
}
.ca-steps h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.ca-steps p {
  color: var(--text-muted);
  font-size: 0.94rem;
}

.ca-subhead {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

/* Before-and-after pairs, two per row. Each photo is Clipped Assist's own,
   all very close to 744 x 680. */
.repair-pairs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.repair-pair {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px;
}
.repair-pair-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.repair-photo {
  position: relative;
}
.repair-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 744 / 680;
  object-fit: cover;
}
.repair-photo-label {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 9px;
  background: rgba(10, 10, 10, 0.75);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.repair-pair figcaption {
  padding: 14px 4px 2px;
}
.repair-pair figcaption .limit {
  color: var(--text-faint);
  font-size: 0.88rem;
  margin-left: 6px;
}
.ca-photo-credit {
  margin-top: 12px;
  color: var(--text-faint);
  font-size: 0.8rem;
}

/* Clipped Assist's own tables: the plan comparison and the panel shop
   prices. Styled after the membership table in its brochures (alternating
   rows, black chevron plan badges, its orange) rather than the site's own,
   and drawn from the --ca-* tokens so they follow the colour theme like
   the rest of the page. */
.ca-panel {
  background: var(--ca-panel);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 32px 28px 26px;
  margin-top: 26px;
}
.ca-panel-title {
  color: var(--text);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--ca-orange);
}
.ca-table-wrap {
  overflow-x: auto;

  /* The cells' .sr-only labels are absolutely positioned. Without a
     positioned ancestor here they escape the scrolling box and widen the
     whole page on a phone. */
  position: relative;
}
.ca-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 0.95rem;
}
.ca-table th,
.ca-table td {
  padding: 11px 12px;
  text-align: center;
}
.ca-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
}
.ca-table tbody tr:nth-child(odd) th,
.ca-table tbody tr:nth-child(odd) td {
  background: var(--ca-row-a);
}
.ca-table tbody tr:nth-child(even) th,
.ca-table tbody tr:nth-child(even) td {
  background: var(--ca-row-b);
}
.ca-table thead th {
  vertical-align: bottom;
  padding-bottom: 6px;
}

/* A plan's heading: the brochure's black badge with a pointed foot. */
.ca-plan {
  display: inline-block;
  min-width: 92px;
  padding: 10px 10px 18px;
  background: var(--ca-badge);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.ca-plan-gold,
.ca-plan-gold-plus {
  color: #f2c14e;
}
.ca-plan-platinum,
.ca-plan-platinum-plus {
  color: #d9dde3;
}
.ca-tick {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}
.ca-dash {
  color: var(--text-faint);
}
.ca-table .ca-text {
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* The panel shop table reads as a price list, so its headings and figures
   sit like the brochure's "Price Comparison". */
.ca-table-prices thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.ca-table-prices thead th:first-child {
  text-align: left;
}
.ca-table-prices td {
  white-space: nowrap;
}
.ca-table-prices td:nth-child(3),
.ca-table-prices td:nth-child(4) {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ca-price);
}
.ca-panel-note {
  margin-top: 12px;
  color: var(--text-faint);
  font-size: 0.82rem;
}

.ca-enquire-note {
  margin-top: 40px;
}

/* Good to know: the limits a customer should hear before joining. Smaller
   and quieter than the selling sections on purpose, but always visible; the
   full exclusions list sits behind a <details>. */
.good-to-know .section-head h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
}
.limitations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.limitation {
  border-left: 2px solid var(--line-strong);
  padding-left: 16px;
}
.limitation h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}
.limitation p {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.exclusions {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.exclusions summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.exclusions summary:hover {
  color: var(--text);
}
.exclusions .check-list {
  margin-top: 18px;
}
.exclusions .check-list li {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* A tick per item; .cross-list swaps it for a cross on the not-covered list. */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.96rem;
}
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 600;
}
.check-list.cross-list li::before {
  content: "\2715";
  color: var(--red);
}
.check-list .limit {
  color: var(--text-faint);
  font-size: 0.88rem;
}
.check-list-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 26px;
}

/* Three across, so each table sits under its plan card above. */
.price-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 40px 0 26px;
}
.price-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--plan, var(--line));
  padding: 30px 28px;

  /* A grid item won't shrink below its content by default, and the table's
     nowrap cells are wider than a small phone: without this the block pushes
     the page sideways instead of letting .price-table-wrap scroll. */
  min-width: 0;

  /* Clears the sticky header when a link lands on a table's anchor. */
  scroll-margin-top: 110px;

  /* The block's four parts (title, description, table, note) share the
     row tracks of .price-blocks, so a description that wraps to an extra
     line in one block moves every table down together and the price rows
     stay in line across all three. */
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
.price-block-title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--plan, var(--text));
}
.price-block p {
  color: var(--text-muted);
  font-size: 0.96rem;
}

/* A two-plan table is wider than a small phone, so it scrolls inside its own
   box instead of pushing the page sideways. */
.price-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
}
.price-table th,
.price-table td {
  padding: 12px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.price-table th:first-child {
  text-align: left;
}
.price-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--plan, var(--red));

  /* One line, always: the three tables sit side by side, and a heading that
     wrapped ("Platinum / Plus") made its table's header taller and pushed
     every row out of line with its neighbours. The first column says "Term"
     rather than "Membership term" to leave room. On a phone a table too wide
     scrolls inside .price-table-wrap instead. */
  white-space: nowrap;
  vertical-align: bottom;
}
.price-table tbody th {
  font-weight: 400;
  color: var(--text-muted);
}
.price-table td {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
}

/* Just above the 980px breakpoint the three tables are still side by side
   but too narrow for Platinum's one-line headings (by up to 28px at 981px),
   so the padding gives a little. */
@media (max-width: 1100px) {
  .price-block {
    padding-inline: 20px;
  }
  .price-table th,
  .price-table td {
    padding-inline: 7px;
  }
}
.price-table td.price-none {
  color: var(--text-faint);
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: none;
}
.price-block .price-note {
  margin-top: 14px;
  color: var(--text-faint);
  font-size: 0.85rem;
}

#pricing,
#sign-up {
  scroll-margin-top: 90px;
}
.form-intro {
  color: var(--text-muted);
  margin: -10px 0 26px;
  max-width: 640px;
}
.fine-print {
  margin-top: 26px;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.fine-print a {
  text-decoration: underline;
}

/* ===========================================================
   Services page — process
   =========================================================== */
.process-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.process-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.process-item:first-child {
  padding-top: 0;
}
.process-item .step {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: rgba(224, 32, 31, 0.4);
}
.process-item h4 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.process-item p {
  color: var(--text-muted);
  font-size: 0.96rem;
}

.cta-band {
  background: linear-gradient(120deg, var(--red-dark), var(--red));
  color: var(--white);
  padding: 70px 0;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  margin-bottom: 16px;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 30px;
}

/* ===========================================================
   Footer
   =========================================================== */

/* Google Tag Manager's <noscript> iframe — there for crawlers and no-JS
   visitors, never visible. */
.gtm-noscript {
  display: none;
  visibility: hidden;
}

.site-footer {
  background: var(--charcoal);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 0 26px;

  /* The footer deliberately stays dark in both themes (see the note on
     --bg above), but unstyled text (e.g. the plain <li> rows in the
     Contact column) inherited body's theme-switching --text colour and
     went near-black on a dark background in light mode. Fall back to a
     constant light grey here so any un-styled footer text stays legible
     regardless of theme. */
  color: var(--steel-light);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer-brand img {
  height: 40px;
  margin-bottom: 16px;
}
.footer-brand p {
  color: var(--steel);
  font-size: 0.9rem;
  max-width: 280px;
}
.footer-about-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--steel);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.footer-about-link:hover {
  color: var(--red);
}

/* A class rather than the element, because the level moved: these were <h5>,
   which skipped from the page's <h1> straight to 5 and read to a screen
   reader as three missing sections (issue #28). They are landmarks of the
   footer, a sibling of <main>, so <h2> is the honest level — and the size
   here is deliberately unchanged from what the h5 had. */
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--white);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-col a {
  color: var(--steel);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--red);
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all 0.2s ease;
}
.footer-social a:hover {
  border-color: var(--red);
  color: var(--red);
}

.footer-bottom {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--steel);
  font-size: 0.84rem;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 980px) {
  .grid-3,
  .review-grid,
  .tyre-grid,
  .sale-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .split,
  .sale-detail-grid,
  .price-blocks {
    grid-template-columns: 1fr;
  }
  .split img {
    height: 340px;
  }
  .ca-highlights,
  .limitations {
    grid-template-columns: repeat(2, 1fr);
  }
  .repair-pairs {
    grid-template-columns: 1fr;
  }
  .contact-bottom-grid {
    grid-template-columns: 1fr;
  }
  .stat {
    padding: 32px 12px;
  }
  .map-wrap {
    min-height: 300px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .grid-3,
  .grid-2,
  .review-grid,
  .tyre-grid,
  .sale-grid {
    grid-template-columns: 1fr;
  }
  .tyre-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .form-row,
  .check-list-columns,
  .ca-steps,
  .limitations {
    grid-template-columns: 1fr;
  }
  .ca-panel {
    padding: 24px 16px 20px;
  }
  .ca-table tbody th {
    min-width: 150px;
  }
  .ca-highlight-figure {
    font-size: 1.35rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
  }
  .hero-slide-inner {
    padding-top: 60px;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .contact-info-col + .contact-info-col {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }
}

/* ===========================================================
   Mobile nav — hamburger + collapsible drawer
   =========================================================== */
@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .brand img {
    height: 40px;
  }
  .brand-text .name {
    font-size: 1rem;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    background: var(--charcoal);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 28px 30px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease;
  }
  .main-nav.is-open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 18px;
  }
  .main-nav a.nav-cta {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 18px;
  }
  .main-nav {
    padding: 20px 18px 26px;
  }
  .hero-slide-inner {
    padding: 50px 18px 90px;
  }
  .hero-slide-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-slide-actions .btn {
    justify-content: center;
  }
  .hero-arrow {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .hero-badge {
    left: 18px;
    padding: 10px 16px;
  }
  .hero-dots {
    left: 0;
    right: 0;
    bottom: 18px;
    justify-content: center;
  }
  .contact-card {
    padding: 26px 20px;
  }
  .service-card .service-body {
    padding: 22px 20px 26px;
  }
  .brand-pill {
    padding: 12px 18px;
    font-size: 0.92rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .stats-strip {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .stat:last-child {
    border-bottom: none;
  }
  .search-form {
    flex-direction: column;
  }
  .search-form button {
    width: 100%;
    justify-content: center;
  }

  .nav-wrap {
    padding: 10px 14px;
    gap: 10px;
  }
  .brand {
    gap: 6px;
  }
  .brand img {
    height: 28px;
  }
  .nav-right {
    gap: 8px;
  }
  .search-toggle,
  .nav-toggle {
    width: 34px;
    height: 34px;
  }
  .search-toggle svg {
    width: 15px;
    height: 15px;
  }
  .nav-toggle span {
    width: 16px;
  }
}