/* ==========================================================================
   NINE TYRES — Design System
   Premium automotive UI. Hand-written HTML5 + CSS3. No frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — deep automotive blue + golden amber */
  --primary: #0F4C81;      /* Deep Automotive Blue — every primary action */
  --primary-600: #0C4372;  /* hover */
  --primary-700: #083B63;  /* pressed / deepest */
  --primary-400: #2F7CB8;  /* lighter blue — gradients only */
  --primary-900: #062B4A;  /* near-black navy — hero, nav bar */
  --primary-050: #EEF4FA;  /* tinted surfaces, badges */
  --accent: #F4A300;       /* Golden Amber — highlights, never a whole button block */
  --accent-600: #D89100;
  --accent-050: #FFF7E6;
  --yellow: #FFC220;


  /* Neutrals */
  --white: #FFFFFF;
  --surface: #F7F8FA;
  --surface-2: #FBFCFD;
  --border: #E6E6E6;
  --border-strong: #D4D8DD;
  --text: #222222;
  --text-2: #5A5F66;
  --text-3: #8A9099;

  /* Status */
  --success: #16A34A;
  --success-050: #ECFDF3;
  /* WhatsApp's own neon green stays on the social icons, where it sits beside
     Facebook blue and YouTube red and is meant to read as the brand mark.
     Buttons use a plain green instead — the neon glowed against the page. */
  --whatsapp: #25D366;
  --whatsapp-cta: #16A34A;
  --whatsapp-cta-dark: #128038;

  /* Radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Soft shadows — layered, never heavy */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --sh-md: 0 8px 24px rgba(16, 24, 40, .08);
  --sh-lg: 0 18px 48px rgba(16, 24, 40, .10);
  --sh-primary: 0 10px 28px rgba(15, 76, 129, .28);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --header-h: 88px;   /* sticky nav rail — big icon over label */
  --topbar-h: 100px;  /* brand bar: logo · dealer badge · social */

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: .18s;
  --base: .3s;
  --slow: .6s;
}

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

* { margin: 0; padding: 0; }

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

/* keep the "In Stock This Week" results clear of the sticky header when jumped to */
#results { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* If a remote photo fails to load, hide the broken-image chrome and let the
   container's gradient placeholder show through instead. (see js/main.js) */
img.is-broken { opacity: 0; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
}

.h-display { font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; }
h1, .h1   { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); font-weight: 800; letter-spacing: -.03em; }
h2, .h2   { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
h3, .h3   { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }
h4, .h4   { font-size: 1.06rem; font-weight: 600; }

p { color: var(--text-2); }

.lead {
  font-size: clamp(1rem, .96rem + .3vw, 1.16rem);
  color: var(--text-2);
  line-height: 1.75;
}

.small     { font-size: .875rem; }
.tiny      { font-size: .78rem; }
.muted     { color: var(--text-3); }
.strong    { font-weight: 600; color: var(--text); }
.text-primary  { color: var(--primary); }
.text-center { text-align: center; }

/* Eyebrow label above section titles */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* Emphasised word inside a heading — subtle brand underline */
.mark {
  color: var(--primary);
  position: relative;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: .3em;
  background: rgba(244, 163, 0, .18);
  border-radius: 3px;
  z-index: -1;
}

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

.container--narrow { max-width: 880px; }

section { position: relative; }

/* Vertical rhythm. Trimmed roughly 28% from the original scale — the page ran long
   and every section was paying for it. The hero sets its own padding and is untouched. */
.section        { padding-block: clamp(44px, 2.2rem + 2.8vw, 76px); }
.section--tight { padding-block: clamp(32px, 1.6rem + 2.2vw, 52px); }
.section--surface { background: var(--surface); }
.section--tinted  { background: linear-gradient(180deg, #F3F7FB 0%, var(--white) 100%); }

/* Section heading block */
.section-head { max-width: 720px; margin-bottom: clamp(24px, 1.5rem + 1.2vw, 40px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 14px; }

/* Split heading: title left, link/CTA right */
.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Grids */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.flex   { display: flex; }
.center { align-items: center; }
.between{ justify-content: space-between; }
.wrap   { flex-wrap: wrap; }
.gap-2  { gap: var(--s-2); }
.gap-3  { gap: var(--s-3); }
.gap-4  { gap: var(--s-4); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform var(--fast) var(--ease),
              box-shadow var(--base) var(--ease),
              background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--sh-primary);
}
.btn--primary:hover { background: var(--primary-600); box-shadow: 0 14px 34px rgba(15, 76, 129, .34); }

.btn--amber {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 28px rgba(244, 163, 0, .3);
}
.btn--amber:hover { background: var(--accent-600); }

.btn--outline {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--sh-xs);
}
.btn--outline:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--sh-sm); }

.btn--ghost { background: transparent; color: var(--text); padding-inline: 14px; }
.btn--ghost:hover { color: var(--primary); }

.btn--whatsapp {
  background: var(--whatsapp-cta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(28, 110, 55, .26);
}
.btn--whatsapp:hover { background: var(--whatsapp-cta-dark); }

.btn--dark { background: var(--text); color: #fff; }
.btn--dark:hover { background: #000; }

/* Solid grey button */
.btn--grey { background: #4B5563; color: #fff; box-shadow: 0 10px 28px rgba(17, 24, 39, .28); }
.btn--grey:hover { background: #374151; }

/* Solid dark-blue button — changes to a brighter blue on hover/touch */
.btn--blue { background: #0D3E6A; color: #fff; box-shadow: 0 12px 30px -8px rgba(13, 62, 106, .6); }
.btn--blue:hover, .btn--blue:active, .btn--blue:focus-visible { background: #1E88E5; box-shadow: 0 14px 34px -8px rgba(30, 136, 229, .6); }

/* Transparent / glass button (reads on dark or light) */
.btn--clear { background: transparent; color: #fff; border: 1.6px solid rgba(255, 255, 255, .6); }
.btn--clear:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.btn--lg    { padding: 17px 28px; font-size: 1rem; }
.btn--sm    { padding: 10px 18px; font-size: .85rem; }
.btn--block { width: 100%; }

/* Arrow that slides on hover */
.btn .arrow { transition: transform var(--base) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--primary);
  font-size: .93rem;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--base) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. BADGES & PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}
.badge svg { width: 13px; height: 13px; }

.badge--blue     { background: var(--primary-050);     color: var(--primary); }
.badge--amber  { background: var(--accent-050);  color: #8A5A00; }
.badge--success { background: var(--success-050); color: var(--success); }
.badge--grey    { background: var(--surface);     color: var(--text-2); border: 1px solid var(--border); }
.badge--dark    { background: var(--text);        color: #fff; }

/* THE trust badge — Authorized Bridgestone Dealer.
   Used across the homepage; deliberately distinct from ordinary badges. */
.badge-auth {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 10px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
}
.badge-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 76, 129, .05), rgba(244, 163, 0, .05));
  pointer-events: none;
}
.badge-auth__seal {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 4px 10px rgba(15, 76, 129, .3);
}
.badge-auth__seal svg { width: 16px; height: 16px; }
.badge-auth__text { display: flex; flex-direction: column; line-height: 1.25; position: relative; }
.badge-auth__top {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.badge-auth__main { font-size: .92rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.badge-auth__main b { color: var(--primary); font-weight: 800; }

/* Full-width authorized-dealer strip */
.auth-strip {
  background: linear-gradient(100deg, #1a1a1a, #2b2b2b);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(28px, 2rem + 2vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.auth-strip::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -8%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 76, 129, .5), transparent 62%);
  pointer-events: none;
}
.auth-strip h3 { color: #fff; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.auth-strip p  { color: rgba(255, 255, 255, .72); margin-top: 8px; }
.auth-strip__inner { position: relative; z-index: 1; max-width: 620px; }
.auth-strip__badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.auth-strip__badge .seal {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  display: grid; place-items: center; color: #fff;
}
.auth-strip__badge .seal svg { width: 22px; height: 22px; }
.auth-strip__badge span { display: block; }
.auth-strip__badge .l1 {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); font-weight: 700;
}
.auth-strip__badge .l2 { font-size: 1.05rem; font-weight: 700; color: #fff; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-xs);
  transition: transform var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
.card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: #fff;
}
.card--flat   { box-shadow: none; }
.card--pad-lg { padding: var(--s-6); }

/* Icon feature card */
.feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--sh-xs);
  position: relative;
  overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.feature::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.feature:hover::before { transform: scaleX(1); }
.feature h3 { margin-bottom: 8px; font-size: 1.08rem; }
.feature p  { font-size: .9rem; line-height: 1.7; }

.icon-box {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--primary-050);
  color: var(--primary);
  transition: transform var(--base) var(--ease-out), background var(--base) var(--ease);
}
.icon-box svg { width: 25px; height: 25px; stroke-width: 1.9; }
.icon-box i { font-size: 23px; line-height: 1; }   /* Font Awesome glyphs in the same box */
.feature:hover .icon-box { transform: scale(1.06) rotate(-4deg); }

.icon-box--amber  { background: var(--accent-050);  color: #A06A00; }
.icon-box--success { background: var(--success-050); color: var(--success); }
.icon-box--dark    { background: #F1F1F1;            color: var(--text); }
.icon-box--solid   { background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff; }
.icon-box--sm      { width: 42px; height: 42px; border-radius: var(--r-sm); margin-bottom: 0; }
.icon-box--sm svg  { width: 20px; height: 20px; }

/* Media (photo) wrapper — gradient shows if the remote photo 404s */
.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ECECEC, #F7F7F7 55%, #E7E7E7);
  border-radius: var(--r-md);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--3x4  { aspect-ratio: 3 / 4; }
.card--hover:hover .media img,
.media-zoom:hover img { transform: scale(1.07); }

/* Photo card: image on top, body under */
.photo-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  display: flex;
  flex-direction: column;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.photo-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.photo-card .media { border-radius: 0; }
.photo-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.photo-card__body h3 { font-size: 1.1rem; }
.photo-card__body p  { font-size: .9rem; line-height: 1.7; }
.photo-card__foot { margin-top: auto; padding-top: 6px; }

/* --------------------------------------------------------------------------
   8. TOP BAR — brand bar: logo · authorized-dealer badge · social
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--white);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.topbar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
/* home page carries no dealer badge — close the middle column so the phone stays right */
.topbar--plain .container { grid-template-columns: 1fr auto; }
/* …unless a centred hero banner sits between the logo and the contact block */
.topbar--hero .container { grid-template-columns: auto 1fr auto; }

/* centred header banner — headline over a faint sports-car blueprint */
.topbar__hero {
  position: relative; justify-self: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 40px; line-height: 1.12; text-align: center;
}
.topbar__hero-car {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%;
  opacity: 1; pointer-events: none; z-index: 0;
  /* fade the photo's grey edges into the white top bar */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.topbar__hero-title,
.topbar__hero-sub { position: relative; z-index: 1; }
.topbar__hero-title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(1.1rem, 1.65vw, 1.7rem);
  letter-spacing: .005em; color: var(--primary); white-space: nowrap;
  margin-top: 8px;
}
.topbar__hero-sub {
  font-weight: 500; font-size: clamp(.7rem, .86vw, .9rem);
  letter-spacing: .09em; color: #4B5563; white-space: nowrap;
}
.topbar__hero-sub b { color: var(--primary); font-weight: 700; margin: 0 5px; }

/* the logo moves into the sticky nav at ≤1340 and the bar collapses — drop the
   centred banner at the same point so it never sits off-centre or cramped */
@media (max-width: 1340px) { .topbar__hero { display: none; } }

.topbar__logo { justify-self: start; display: flex; align-items: center; }
.topbar__logo img { height: 68px; width: auto; object-fit: contain; }

/* The trust badge — the one place Bridgestone is called out in the chrome. */
.topbar__badge {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--primary-050), var(--surface-2));
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  white-space: nowrap;
}
.topbar__badge .seal {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  box-shadow: 0 4px 12px rgba(15, 76, 129, .3);
}
/* One line: AUTHORIZED DEALER · Bridgestone Tyres */
.topbar__badge__text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}
.topbar__badge__top {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-600);
}
.topbar__badge__top::after {   /* divider dot between the two halves */
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--border-strong);
}
.topbar__badge__main { font-size: 1.02rem; font-weight: 600; color: var(--text-2); letter-spacing: -.01em; white-space: nowrap; }
.topbar__badge__main b { color: var(--primary); font-weight: 800; }

/* Right of the brand bar: phone number, social icons beneath it */
.topbar__right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

/* Text only — no icon chip. "Call us:" labels it, the number carries the line. */
.topbar__phone { display: inline-flex; align-items: center; }
.topbar__phone__text { display: flex; align-items: center; line-height: 1.2; }
/* "Call us:" was --text-3 (#8A9099), which is only 3.2:1 on the white topbar — under the
   4.5:1 minimum, so it read as disabled. --text-2 takes it to 6.4:1 and it holds. */
.topbar__phone__pre {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-2);
}
.topbar__phone__num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;   /* a wrapped phone number is unreadable */
}
.topbar__phone:hover .topbar__phone__num,
.topbar__phone:hover .topbar__phone__pre { color: var(--primary); }

/* Social icons carry their own brand colour at rest — grey chips read as
   disabled — and fill with that colour on hover. */
.topbar__socials { display: flex; align-items: center; gap: 9px; }
.topbar__social {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--white);
  border: 1px solid var(--border);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.topbar__social:hover { color: #fff; border-color: transparent; transform: translateY(-2px); }

.topbar__social[aria-label="WhatsApp"]  { color: #25D366; }
.topbar__social[aria-label="Facebook"]  { color: #1877F2; }
.topbar__social[aria-label="YouTube"]   { color: #FF0000; }

/* Instagram's mark is a gradient, so the glyph itself is painted with one. */
.topbar__social[aria-label="Instagram"] i {
  background: linear-gradient(45deg, #F9CE34 5%, #EE2A7B 55%, #6228D7 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar__social[aria-label="Instagram"]:hover i { background: none; color: #fff; }

.topbar__social[aria-label="WhatsApp"]:hover  { background: #25D366; box-shadow: 0 6px 16px rgba(37, 211, 102, .38); }
.topbar__social[aria-label="Facebook"]:hover  { background: #1877F2; box-shadow: 0 6px 16px rgba(24, 119, 242, .38); }
.topbar__social[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7); box-shadow: 0 6px 16px rgba(238, 42, 123, .38); }
.topbar__social[aria-label="YouTube"]:hover   { background: #FF0000; box-shadow: 0 6px 16px rgba(255, 0, 0, .34); }

/* --------------------------------------------------------------------------
   9. HEADER / NAV — deep-blue navigation rail, sticky
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--primary);
  transition: box-shadow var(--base) var(--ease), background var(--base) var(--ease);
}
.header.is-stuck { background: var(--primary-900); box-shadow: 0 10px 30px rgba(6, 43, 74, .25); }
.header .container {
  max-width: none;   /* nine long menu names + icons need the full width of the screen */
  height: var(--header-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  transition: height var(--base) var(--ease);
}

/* Compact logo chip — carried in the blue rail only where the nav has
   collapsed to the burger (≤1280px). On wide screens the brand bar above
   owns the logo, and the sticky rail stays a clean run of nav links. */
.header__logo {
  display: none;
  align-items: center;
  flex: none;
  margin-right: auto;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  background: #fff;
  box-shadow: var(--sh-xs);
}
.header__logo img { height: 40px; width: auto; object-fit: contain; }

/* Icon above, label below, hairline dividers between items. Stacking keeps
   every item as narrow as its own text, which is what buys room for type this
   size across nine long menu names. */
.nav { display: flex; align-items: stretch; gap: 0; }
.nav > a {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 20px 14px;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;   /* long menu names must never break across two lines */
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav > * + *::before {   /* the divider line between two items */
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, .18);
}
.nav > a i {
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  opacity: .9;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav > a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav > a:hover i { opacity: 1; transform: translateY(-2px); }
.nav > a.is-active i { opacity: 1; }
.nav > a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--base) var(--ease);
}
.nav > a:hover { color: #fff; }
.nav > a:hover::after { transform: scaleX(1); }
.nav > a.is-active { color: #fff; font-weight: 600; }
.nav > a.is-active::after { transform: scaleX(1); }

/* --- "Buy Tyre" dropdown (desktop nav) ----------------------------------- */
.nav__drop { position: relative; display: flex; }
.nav__trigger {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 20px 14px;
  font: inherit; font-size: .95rem; font-weight: 600;
  color: rgba(255, 255, 255, .88); white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav__trigger .nav__ico {
  font-size: 22px; line-height: 1; color: var(--accent); opacity: .9;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav__label { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { font-size: 10px; opacity: .75; transition: transform var(--base) var(--ease); }
.nav__trigger::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center; transition: transform var(--base) var(--ease);
}
.nav__drop:hover .nav__trigger, .nav__drop.is-open .nav__trigger { color: #fff; background: rgba(255, 255, 255, .06); }
.nav__drop:hover .nav__ico, .nav__drop.is-open .nav__ico { opacity: 1; transform: translateY(-2px); }
.nav__drop:hover .nav__trigger::after, .nav__drop.is-open .nav__trigger::after { transform: scaleX(1); }
.nav__drop:hover .nav__caret, .nav__drop.is-open .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: 0;
  min-width: 296px; padding: 11px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 50px -14px rgba(6, 43, 74, .36);
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 60;
}
.nav__menu::before {   /* invisible bridge so hover survives the gap to the panel */
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav__drop:hover .nav__menu, .nav__drop.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(8px);
}
/* override the base .nav > a rules that otherwise leak in (column layout, white
   text, underline) and hide the dropdown labels */
.nav__menu a {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 14px; padding: 14px 16px; border-radius: 11px; text-align: left;
  color: var(--text); font-size: 1rem; font-weight: 600; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__menu a::after { display: none; }
.nav__menu a i { font-size: 20px; width: 24px; text-align: center; color: var(--primary); opacity: 1; flex: none; transform: none; }
.nav__menu a:hover { background: var(--primary-050); color: var(--primary); }
.nav__menu a:hover i { transform: none; }
.nav__menu a.is-active { background: var(--primary-050); color: var(--primary); font-weight: 700; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .25);
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  flex: none;
}
.burger svg { width: 22px; height: 22px; }
.burger i { font-size: 19px; }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: #fff;
  z-index: 200;
  padding: 24px;
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .16);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer__head img { height: 44px; width: auto; }
.drawer__close {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--border); display: grid; place-items: center;
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer nav { display: flex; flex-direction: column; gap: 2px; }
.drawer nav a {
  padding: 14px 14px;
  border-radius: var(--r-sm);
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.drawer nav a svg { width: 16px; height: 16px; opacity: .35; }
.drawer nav a i { font-size: 12px; opacity: .35; }          /* trailing chevron */
.drawer nav a span { flex: 1; }
.drawer nav a .drawer__ico {                                 /* leading page icon */
  width: 30px;
  height: 30px;
  margin-right: 12px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  flex: none;
  font-size: 13px;
  opacity: 1;
  color: var(--primary);
  background: var(--primary-050);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.drawer nav a:hover { background: var(--surface); color: var(--text); }
.drawer nav a:hover .drawer__ico { background: var(--primary); color: #fff; }
.drawer nav a.is-active { background: var(--primary-050); color: var(--primary); font-weight: 600; }
.drawer nav a.is-active .drawer__ico { background: var(--primary); color: #fff; }

/* --- "Buy Tyre" collapsible group (mobile drawer) ------------------------ */
.drawer__grouptoggle {
  width: 100%; padding: 11px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 500; color: var(--text-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; text-align: left;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.drawer__grouptoggle span { flex: 1; }
.drawer__grouptoggle .drawer__ico {
  width: 30px; height: 30px; margin-right: 12px; border-radius: var(--r-xs);
  display: grid; place-items: center; flex: none; font-size: 13px;
  color: var(--primary); background: var(--primary-050);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.drawer__groupcaret { font-size: 12px; opacity: .5; transition: transform var(--base) var(--ease); }
.drawer__grouptoggle:hover { background: var(--surface); color: var(--text); }
.drawer__grouptoggle:hover .drawer__ico { background: var(--primary); color: #fff; }
.drawer__group.is-open .drawer__grouptoggle { color: var(--primary); }
.drawer__group.is-open .drawer__grouptoggle .drawer__ico { background: var(--primary); color: #fff; }
.drawer__group.is-open .drawer__groupcaret { transform: rotate(180deg); }

.drawer__submenu {
  overflow: hidden; max-height: 0;
  padding-left: 14px;
  transition: max-height var(--base) var(--ease);
}
.drawer__group.is-open .drawer__submenu { max-height: 160px; }

.drawer__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 22, .48);
  backdrop-filter: blur(2px);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--base) var(--ease), visibility var(--base);
}
.scrim.is-open { opacity: 1; visibility: visible; }

body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   10. HERO (home) — full-bleed cinematic banner
   -------------------------------------------------------------------------- */
/* No photograph behind the banner any more — the offer slide is the only
   image, so the panel itself is a deep navy field with a soft amber glow. */
.hero {
  position: relative;
  min-height: clamp(640px, 56vw, 780px);
  display: flex;
  align-items: center;
  padding-block: clamp(52px, 3rem + 2vw, 76px) 84px;   /* the lower band holds the dots */
  background:
    radial-gradient(900px 520px at 92% 6%, rgba(244, 163, 0, .16), transparent 62%),
    radial-gradient(760px 460px at 0% 100%, rgba(47, 124, 184, .28), transparent 60%),
    linear-gradient(135deg, var(--primary-900) 0%, #0B3A62 52%, var(--primary) 100%);
  overflow: hidden;
}

/* Edge-to-edge photography, slowly drifting so the banner never feels static */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;   /* hold the car body, not the sky */
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1%, 0); }
}

/* Modern overlay: navy wash on the copy side, clear glass over the metal */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 43, 74, .94) 0%, rgba(6, 43, 74, .84) 38%, rgba(6, 43, 74, .40) 70%, rgba(6, 43, 74, .26) 100%),
    linear-gradient(180deg, rgba(6, 43, 74, .5) 0%, transparent 34%, rgba(6, 43, 74, .5) 100%);
}

.hero .container { position: relative; z-index: 2; }

/* Two boxes: what you came to buy on the left, what's on offer on the right */
/* The offer slides ARE the banner — a full-bleed layer behind everything,
   not a picture box sitting beside the copy. */
.hero .hero__slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--primary-900);
}
.hero .hero__slider .slider__track { height: 100%; }
.hero .hero__slider .slide { display: flex; flex-direction: column; height: 100%; }
.hero .hero__slider .slide .media { flex: 1; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* Lift the photography so it stays crisp and bright under the navy wash */
.hero .hero__slider .slide .media img { filter: brightness(1.1) contrast(1.04) saturate(1.06); }

/* Navy wash deep enough to carry white type on the copy side, then it clears
   off fast so the photograph stays bright and readable on the right. */
.hero .hero__slider .slide::after {
  background:
    linear-gradient(90deg, rgba(6, 43, 74, .94) 0%, rgba(6, 43, 74, .82) 36%, rgba(6, 43, 74, .3) 62%, rgba(6, 43, 74, .12) 100%),
    linear-gradient(180deg, transparent 45%, rgba(6, 43, 74, .55) 100%);
}

/* The arrows own a lane at each extreme edge of the banner. --edge is the
   content gutter: it is never narrower than that lane, so the copy always
   clears the arrows instead of the arrows dodging the copy. Both sides use
   the same value, so the navigation stays balanced. */
.hero {
  --hero-max: 1360px;
  --arrow-size: 60px;
  --arrow-gap: 36px;      /* distance from the banner edge */
  --arrow-clear: 24px;    /* breathing room between arrow and content */
  --edge: max(
    calc(var(--arrow-gap) + var(--arrow-size) + var(--arrow-clear)),
    calc((100vw - var(--hero-max)) / 2 + var(--gutter))
  );
}
/* The container spans the full banner, so it would sit over the arrows and
   swallow their clicks — it lets pointer events straight through, and the
   copy inside takes them back. */
.hero .container {
  max-width: none;
  padding-inline: var(--edge);
  pointer-events: none;
}
.hero .container a,
.hero .container button,
.hero__copy { pointer-events: auto; }

.hero .hero__slider .slide__body {
  left: auto;
  right: var(--edge);
  bottom: 76px;
  width: min(430px, 38vw);
  padding: 0;
}

/* The price tag belongs with the offer copy, not stranded in the corner */
.hero .hero__slider .slide__flag {
  position: static;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--primary-900);
  box-shadow: 0 8px 20px rgba(244, 163, 0, .35);
  transform: none;
}
.hero .hero__slider .slide__flag b { display: inline; font-size: 1.15rem; line-height: 1; }
.hero .hero__slider .slide__flag span { opacity: 1; font-weight: 700; }

/* Premium circular navigation, pinned to the extreme edges and always
   vertically centred, whatever the banner's height. */
.hero .hero__slider .slider__nav {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(6, 43, 74, .3);
  transition: transform var(--base) var(--ease), background var(--base) var(--ease),
              color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.hero .hero__slider .slider__nav i { font-size: 20px; }
.hero .hero__slider .slider__nav:hover {
  transform: translateY(-50%) scale(1.09);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 18px 40px rgba(6, 43, 74, .42);
}
.hero .hero__slider .slider__nav:active { transform: translateY(-50%) scale(1.02); }
.hero .hero__slider .slider__nav--prev { left: var(--arrow-gap); right: auto; }
.hero .hero__slider .slider__nav--next { right: var(--arrow-gap); left: auto; }

/* Dots: centred along the bottom of the banner, and big enough to actually
   see which slide you are on */
.hero .hero__slider .slider__dots {
  bottom: 34px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  gap: 9px;
}
.hero .hero__slider .dot {
  width: 11px;
  height: 11px;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.hero .hero__slider .dot:hover { background: rgba(255, 255, 255, .8); }
.hero .hero__slider .dot.is-active {
  width: 34px;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(244, 163, 0, .5);
}

.hero__copy { position: relative; z-index: 2; width: min(560px, 46%); }
.hero__copy { color: #fff; }
.hero h1 { margin-block: 22px 18px; color: #fff; }
.hero h1 .mark { color: var(--accent); }
.hero h1 .mark::after { background: rgba(244, 163, 0, .22); }
.hero .lead { max-width: 560px; color: rgba(255, 255, 255, .82); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Buttons sitting on the dark banner need the inverse treatment */
.hero .btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.hero .btn--outline:hover { background: #fff; color: var(--primary); border-color: #fff; }
.hero .btn--ghost { color: #fff; }
.hero .btn--ghost:hover { color: var(--accent); }

/* Glass dealer badge sitting above the headline */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}
.hero__badge .seal {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--primary-900);
  font-size: 13px;
}
.hero__badge b { color: #fff; font-weight: 700; }

/* The two headline actions — the biggest thing on the banner after the H1 */
.hero .quick-cards { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.hero .quick-card {
  padding: 18px;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.hero .quick-card:hover {
  background: rgba(255, 255, 255, .15);
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.hero .quick-card__ico {
  width: 48px;
  height: 48px;
  font-size: 19px;
  background: linear-gradient(135deg, var(--accent), #FFC24D);
  color: var(--primary-900);
}
.hero .quick-card b { color: #fff; font-size: 1rem; }
/* the copy column takes the slack — not the icon chip, not the arrow */
.hero .quick-card > span:not(.quick-card__ico) { flex: 1; min-width: 0; }
.hero .quick-card b { white-space: nowrap; }
.hero .quick-card > span > span { color: rgba(255, 255, 255, .62); }
.quick-card__go {
  margin-left: auto;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  transition: transform var(--base) var(--ease), color var(--base) var(--ease);
}
.hero .quick-card:hover .quick-card__go { color: var(--accent); transform: translateX(4px); }

/* The free-services block — the second thing the brief wants people to see */
.free-strip {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.free-strip__head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.free-strip .trust-list { margin-top: 0; padding-top: 0; border-top: 0; }

/* Trust chips read as glass on the dark banner instead of white pills */
.hero .trust-list { border-top-color: rgba(255, 255, 255, .16); }
.hero .trust-chip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero .trust-chip:hover { border-color: var(--accent); background: rgba(255, 255, 255, .14); }
.hero .trust-chip i { background: rgba(244, 163, 0, .18); color: var(--accent); }


/* Trust feature chips under the hero copy */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 9px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--border);
  font-size: .83rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--sh-xs);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.trust-chip:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: var(--accent); }
.trust-chip i {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--success-050); color: var(--success);
}
.trust-chip i svg { width: 13px; height: 13px; stroke-width: 3; }
.trust-chip i i { font-size: 10px; }   /* Font Awesome tick inside the circle */

/* Quick-service mini cards (hero left) */
.quick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.quick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--primary); }
.quick-card__ico {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-400)); color: #fff;
}
.quick-card__ico svg { width: 22px; height: 22px; }
.quick-card b { display: block; font-size: .93rem; font-weight: 600; line-height: 1.3; }
.quick-card span { font-size: .76rem; color: var(--text-3); }

/* --------------------------------------------------------------------------
   11. SLIDER (hero right + testimonials)
   -------------------------------------------------------------------------- */
.slider {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: #EDEDED;
}
.slider__track { display: flex; transition: transform .7s var(--ease-out); }
.slide { min-width: 100%; position: relative; }
.slide .media { border-radius: 0; aspect-ratio: 4 / 3.05; }
.slide::after { /* legibility scrim for the caption */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .30) 46%, rgba(0, 0, 0, .74) 100%);
  pointer-events: none;
}
.slide__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(22px, 1.4rem + 1.5vw, 36px);
  color: #fff;
}
.slide__body .badge { margin-bottom: 12px; }
.slide__body h3 {
  color: #fff;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  margin-bottom: 6px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.slide__body p { color: rgba(255, 255, 255, .88); font-size: .93rem; max-width: 420px; }
.slide__body .btn { margin-top: 16px; }

/* Offer price/discount flag */
.slide__flag {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-md);
  padding: 12px 16px;
  text-align: center;
  box-shadow: var(--sh-primary);
  transform: rotate(3deg);
}
.slide__flag b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1; }
.slide__flag span { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

.slider__nav {
  position: absolute;
  /* sits in the upper image area, clear of the caption block at the bottom */
  top: 34%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--sh-md);
  display: grid;
  place-items: center;
  color: var(--text);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.slider__nav:hover { background: var(--primary); color: #fff; transform: translateY(-50%) scale(1.06); }
.slider--center .slider__nav { top: 50%; }   /* opt-in: vertically centred arrows for captionless sliders */
.slider__nav svg { width: 20px; height: 20px; }
.slider__nav--prev { left: 16px; }
.slider__nav--next { right: 16px; }

.slider__dots {
  position: absolute;
  bottom: 18px;
  right: 22px;
  z-index: 3;
  display: flex;
  gap: 7px;
}
.dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5);
  transition: width var(--base) var(--ease), background var(--base) var(--ease);
}
.dot.is-active { width: 26px; background: #fff; }

/* --------------------------------------------------------------------------
   12. STATS
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.stat::before {   /* amber rule wipes across the top edge on hover */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--base) var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.stat:hover::before { transform: scaleX(1); }

.stat__ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--primary-050);
  color: var(--primary);
  transition: background var(--base) var(--ease), color var(--base) var(--ease), transform var(--base) var(--ease);
}
.stat:hover .stat__ico {
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  color: #fff;
  transform: scale(1.06);
}
.stat b {
  display: block;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
}
.stat__label {
  font-size: .84rem;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: .02em;
}
/* the Google Rating star is a filled SVG, but wears the same blue as every other stat */
.stat--rating .stat__ico svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   13. BRANDS
   -------------------------------------------------------------------------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.brand {
  height: 92px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.brand:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.brand b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.brand span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* Bridgestone gets a highlighted brand tile */
.brand--hero {
  border-color: var(--primary);
  background: linear-gradient(135deg, #fff, var(--primary-050));
  box-shadow: var(--sh-sm);
  position: relative;
}
.brand--hero .badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  background: var(--primary);
  color: #fff;
  font-size: .62rem;
  padding: 4px 10px;
}
.brand--hero b { color: var(--primary); }

/* --------------------------------------------------------------------------
   14. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-xs);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.quote p { font-size: .95rem; line-height: 1.75; color: var(--text); }
.stars { display: flex; gap: 3px; color: var(--accent); }
.stars svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.quote__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  flex: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
}
.avatar--2 { background: linear-gradient(135deg, #2B7FFF, #16A34A); }
.avatar--3 { background: linear-gradient(135deg, #1E5F93, var(--primary-900)); }
.avatar--4 { background: linear-gradient(135deg, #2F7CB8, var(--primary-900)); }
.avatar--5 { background: linear-gradient(135deg, var(--accent), #B87A00); }
.quote__author b { display: block; font-size: .92rem; font-weight: 600; }
.quote__author span { font-size: .78rem; color: var(--text-3); }

/* Google rating summary */
.rating-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--sh-sm);
}
.rating-card__score { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.rating-card__meta span { font-size: .82rem; color: var(--text-3); }

/* --------------------------------------------------------------------------
   15. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: clamp(48px, 3rem + 2vw, 84px);
  background:
    radial-gradient(900px 420px at 92% 0%, rgba(244, 163, 0, .12), transparent 60%),
    radial-gradient(700px 360px at 0% 100%, rgba(15, 76, 129, .07), transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 2rem + 2vw, 56px);
  align-items: center;
}
.page-hero h1 { margin-block: 16px 16px; }
.page-hero .lead { max-width: 560px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.page-hero .media { border-radius: var(--r-xl); box-shadow: var(--sh-lg); }

/* Breadcrumb */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-3); }
.crumbs a:hover { color: var(--primary); }
.crumbs svg { width: 13px; height: 13px; opacity: .5; }
.crumbs span[aria-current] { color: var(--text); font-weight: 500; }

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--text); }
.field label .req { color: var(--primary); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: .93rem;
  color: var(--text);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15, 76, 129, .1);
}
.textarea { resize: vertical; min-height: 118px; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.field-hint { font-size: .76rem; color: var(--text-3); }

/* Search bar with icon */
.searchbar { position: relative; }
.searchbar svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-3);
  pointer-events: none;
}
.searchbar .input { padding-left: 46px; }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 17px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--sh-primary);
}

/* Search / filter panel */
.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(22px, 1.4rem + 1.4vw, 34px);
  box-shadow: var(--sh-md);
}
.panel__tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.panel__tab {
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--fast) var(--ease);
}
.panel__tab.is-active { background: var(--primary); color: #fff; box-shadow: var(--sh-sm); }

/* Form success message (mockup only — no backend) */
.form-success {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  background: var(--success-050);
  border: 1px solid rgba(22, 163, 74, .28);
  color: #15803D;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 18px;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   17. TYRE / PRODUCT CARDS
   -------------------------------------------------------------------------- */
.tyre-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-xs);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.tyre-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: #fff; }

.tyre-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #F4F4F4, #FAFAFA 50%, #EDEDED);
  overflow: hidden;
}
.tyre-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.tyre-card:hover .tyre-card__media img { transform: scale(1.07); }

.tyre-card__tags {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tyre-card__tags .badge { box-shadow: var(--sh-xs); }

.tyre-card__brand {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(4px);
  border-radius: var(--r-xs);
  padding: 5px 11px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--sh-xs);
}

.tyre-card__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tyre-card__title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.tyre-card__size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.tyre-card__size svg { width: 14px; height: 14px; }

/* Spec table inside a tyre card */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.spec {
  background: var(--surface-2);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.spec dt { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.spec dd { font-size: .84rem; font-weight: 600; color: var(--text); }

/* Feature ticks under specs */
.tick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.tick svg { width: 11px; height: 11px; color: var(--success); stroke-width: 3; }

.tyre-card__foot { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; }
.tyre-card__foot .btn--primary { flex: 1; }
.btn--icon {
  width: 46px;
  padding: 0;
  flex: none;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
}
.btn--icon svg { width: 19px; height: 19px; }

/* "No price shown" note — Phase 1 is enquiry-only */
.price-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--text-3);
  font-style: italic;
}
.price-note svg { width: 13px; height: 13px; }

/* Accessories product card (this one DOES show price) */
.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.product-card__price b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.product-card__price s { font-size: .85rem; color: var(--text-3); }

/* --------------------------------------------------------------------------
   18. PROCESS / STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.step {
  position: relative;
  padding: 28px 22px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.step__num {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  box-shadow: var(--sh-primary);
  margin-bottom: 18px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 7px; }
.step p  { font-size: .89rem; line-height: 1.7; }

/* Connector line between steps (desktop) */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  right: -12px;
  width: 24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 10px);
  z-index: 1;
}

/* Checklist */
.check-list { display: grid; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .93rem; color: var(--text-2); }
.check-list li b { color: var(--text); font-weight: 600; }
.check-list i {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex: none;
  margin-top: 2px;
  display: grid;
  place-items: center;
  background: var(--success-050);
  color: var(--success);
}
.check-list i svg { width: 12px; height: 12px; stroke-width: 3.2; }

.warn-list li i { background: var(--primary-050); color: var(--primary); }

/* --------------------------------------------------------------------------
   19. PRICING TABLE
   -------------------------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  background: #fff;
}
.table-scroll { overflow-x: auto; }
.tbl { min-width: 620px; }
.tbl thead th {
  background: var(--text);
  color: #fff;
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 22px;
  white-space: nowrap;
}
.tbl tbody td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
  color: var(--text-2);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--fast) var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.cell-name { font-weight: 600; color: var(--text); }
.tbl td.cell-price { font-weight: 700; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl .row-featured { background: var(--primary-050); }
.tbl .row-featured:hover { background: #E3EDF6; }

/* --------------------------------------------------------------------------
   20. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.faq-item.is-open { border-color: var(--primary); box-shadow: var(--sh-sm); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  text-align: left;
  font-weight: 600;
  font-size: .97rem;
  color: var(--text);
  transition: color var(--fast) var(--ease);
}
.faq-q:hover { color: var(--primary); }
.faq-q i {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-2);
  transition: all var(--base) var(--ease);
}
.faq-q i svg { width: 15px; height: 15px; }
.faq-item.is-open .faq-q i { background: var(--primary); color: #fff; transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s var(--ease);
}
.faq-a p {
  padding: 0 22px 21px;
  font-size: .92rem;
  line-height: 1.78;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   21. GALLERY
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}
.gallery .media { height: 100%; border-radius: var(--r-md); cursor: pointer; }
.gallery .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .45));
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.gallery .media:hover::after { opacity: 1; }
.gallery .media:hover img { transform: scale(1.08); }
.gallery .g-tall { grid-row: span 2; }
.gallery .g-wide { grid-column: span 2; }

/* --------------------------------------------------------------------------
   22. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(36px, 2rem + 3vw, 68px);
  background: linear-gradient(115deg, var(--primary-900) 0%, var(--primary) 52%, var(--primary-400) 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--sh-lg);
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}
.cta-band::before { width: 340px; height: 340px; top: -150px;  left: -90px; }
.cta-band::after  { width: 280px; height: 280px; bottom: -140px; right: -60px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
.cta-band p  { color: rgba(255, 255, 255, .9); margin: 14px auto 0; max-width: 620px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 30px; }
.cta-band .btn--outline { background: #fff; border-color: #fff; color: var(--primary); }
.cta-band .btn--outline:hover { background: #fff; color: var(--primary-700); }
.cta-band .btn--dark { background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .34); color: #fff; }
.cta-band .btn--dark:hover { background: rgba(0, 0, 0, .34); }

/* Split CTA (two cards) */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cta-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(26px, 1.6rem + 1.6vw, 40px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.cta-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.cta-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.cta-card p { font-size: .92rem; margin-bottom: 20px; }
.cta-card .icon-box { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   23. ENQUIRY / CONTACT
   -------------------------------------------------------------------------- */
.enquiry-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(24px, 1.5rem + 2vw, 48px);
  align-items: start;
}
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(24px, 1.5rem + 1.5vw, 36px);
  box-shadow: var(--sh-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .span-2 { grid-column: span 2; }

/* Contact info tiles */
.info-tile {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--sh-xs);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.info-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--accent); }
.info-tile b { display: block; font-size: .95rem; font-weight: 600; margin-bottom: 3px; }
.info-tile p { font-size: .88rem; line-height: 1.6; }
.info-tile a { color: var(--text-2); }
.info-tile a:hover { color: var(--primary); }

/* Contact intro sits directly above the enquiry grid — collapse the doubled
   section padding between them so the short intro does not leave a dead band */
.contact-intro { padding-bottom: clamp(6px, 1vw, 14px); }
.contact-intro .section-head { margin-bottom: 0; }
#enquiry-form { padding-top: clamp(20px, 2.4vw, 34px); }

/* Contact lines — call / email / location stacked inside the enquiry card */
.contact-lines { display: grid; gap: 18px; }
.contact-lines li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.contact-lines b { display: block; font-size: .95rem; font-weight: 600; }
.contact-lines p { margin-top: 2px; font-size: .9rem; line-height: 1.5; color: var(--text-2); }
.contact-lines a { color: var(--text-2); }
.contact-lines a:hover { color: var(--primary); }

/* Social buttons — each icon in its own brand colour at rest, filling solid on hover */
.social-row { display: flex; flex-wrap: wrap; gap: 12px; }
.social-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: 18px;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.social-btn:nth-child(1) { color: var(--whatsapp); }   /* WhatsApp green */
.social-btn:nth-child(2) { color: #1877F2; }           /* Facebook blue */
.social-btn:nth-child(3) { color: #DD2A7B; }           /* Instagram magenta */
.social-btn:nth-child(4) { color: #FF0000; }           /* YouTube red */

.social-btn:hover { transform: translateY(-3px); color: #fff; border-color: transparent; }
.social-btn:nth-child(1):hover { background: var(--whatsapp); }
.social-btn:nth-child(2):hover { background: #1877F2; }
.social-btn:nth-child(3):hover { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.social-btn:nth-child(4):hover { background: #FF0000; }

/* Opening hours list */
.hours { display: grid; gap: 2px; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  font-size: .9rem;
  color: var(--text-2);
}
.hours li:last-child { border-bottom: 0; }
.hours li b { color: var(--text); font-weight: 600; }
.hours li.is-today { color: var(--success); font-weight: 600; }
.hours li.is-today b { color: var(--success); }

/* Map placeholder */
.map {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  min-height: 380px;
  background:
    repeating-linear-gradient(0deg,   rgba(0,0,0,.045) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg,  rgba(0,0,0,.045) 0 1px, transparent 1px 44px),
    linear-gradient(135deg, #EAF0EC, #F3F5F4);
  display: grid;
  place-items: center;
}
.map::before { /* a couple of fake "roads" so it reads as a map, not a grid */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 46%, rgba(255, 200, 120, .55) 46% 49%, transparent 49%),
    linear-gradient(28deg,  transparent 62%, rgba(180, 205, 235, .5) 62% 64%, transparent 64%);
}
.map__pin {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.map__dot {
  width: 58px; height: 58px;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--sh-primary);
  animation: pin-bob 2.4s var(--ease) infinite;
}
.map__dot svg { width: 24px; height: 24px; transform: rotate(45deg); }
@keyframes pin-bob {
  0%, 100% { transform: rotate(-45deg) translateY(0); }
  50%      { transform: rotate(-45deg) translateY(-8px); }
}
.map__card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 20px;
  box-shadow: var(--sh-md);
  border: 1px solid var(--border);
}
.map__card b { display: block; font-size: .95rem; }
.map__card span { font-size: .8rem; color: var(--text-3); }

/* --------------------------------------------------------------------------
   24. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: #191919;
  color: rgba(255, 255, 255, .68);
  padding-top: clamp(52px, 3rem + 2vw, 84px);
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(28px, 2rem + 1.5vw, 52px);
  padding-bottom: clamp(40px, 2rem + 2vw, 64px);
}
.footer__logo {
  background: #fff;
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: inline-block;
  margin-bottom: 20px;
}
.footer__logo img { height: 52px; width: auto; }
.footer p { color: rgba(255, 255, 255, .6); font-size: .89rem; line-height: 1.75; }
.footer h4 {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer__links { display: grid; gap: 11px; }
.footer__links a {
  color: rgba(255, 255, 255, .62);
  font-size: .89rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.footer__links a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.footer__links a:hover { color: #fff; transform: translateX(3px); }
.footer__links a:hover::before { opacity: 1; }

.footer__contact { display: grid; gap: 15px; }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 17px; height: 17px; color: var(--primary); flex: none; margin-top: 3px; }
.footer__contact a { color: rgba(255, 255, 255, .68); }
.footer__contact a:hover { color: #fff; }

/* solid icon on a round chip — the thin outlines disappeared against the dark footer */
.footer__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
}

.footer__social { display: flex; gap: 9px; margin-top: 22px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .75);
  transition: all var(--fast) var(--ease);
}
.footer__social svg { width: 17px; height: 17px; }
.footer__social i { font-size: 16px; }
.footer__social a:hover { color: #fff; transform: translateY(-3px); }
.footer__social a[aria-label="WhatsApp"]:hover  { background: #25D366; }
.footer__social a[aria-label="Facebook"]:hover  { background: #1877F2; }
.footer__social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7); }
.footer__social a[aria-label="YouTube"]:hover   { background: #FF0000; }

.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .83rem;
  color: rgba(255, 255, 255, .5);
}
.footer__bar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__bar a:hover { color: #fff; }

/* Authorized dealer note in the footer */
.footer__auth {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  margin-top: 20px;
}
.footer__auth .seal {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  display: grid;
  place-items: center;
  color: #fff;
}
.footer__auth .seal svg { width: 14px; height: 14px; }
.footer__auth span { font-size: .78rem; line-height: 1.35; color: rgba(255, 255, 255, .8); }
.footer__auth b { color: #fff; display: block; font-weight: 600; }

/* --------------------------------------------------------------------------
   25. FLOATING WHATSAPP + BACK TO TOP
   -------------------------------------------------------------------------- */
.fab-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.fab-wa {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 20px 12px 12px;
  border-radius: var(--r-pill);
  background: var(--whatsapp-cta);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 10px 26px rgba(28, 110, 55, .3);
  transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease);
}
.fab-wa:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px rgba(28, 110, 55, .38); }
.fab-wa__ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
}
.fab-wa__ico svg { width: 20px; height: 20px; }
.fab-wa__ico::after { /* gentle pulse ring */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  animation: pulse-ring 2.2s var(--ease) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity: .8; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Chat-only variant: circular icon button, still redirects to WhatsApp */
.fab-wa--chat {
  padding: 0;
  width: 58px; height: 58px;
  border-radius: 50%;
  justify-content: center;
}
.fab-wa--chat .fab-wa__ico {
  width: 30px; height: 30px;
  background: transparent;
}
.fab-wa--chat .fab-wa__ico svg { width: 28px; height: 28px; }
.fab-wa--chat .fab-wa__ico::after { display: none; }

.fab-top {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  display: grid;
  place-items: center;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--base) var(--ease);
}
.fab-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.fab-top svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   26. ENQUIRY MODAL (global)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--base) var(--ease), visibility var(--base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 18, 22, .55);
  backdrop-filter: blur(3px);
}
.modal__box {
  position: relative;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl);
  padding: clamp(24px, 1.5rem + 1.5vw, 38px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .3);
  transform: translateY(18px) scale(.97);
  transition: transform .38s var(--ease-out);
}
.modal.is-open .modal__box { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-2);
  transition: all var(--fast) var(--ease);
}
.modal__close:hover { background: var(--primary); color: #fff; transform: rotate(90deg); }
.modal__close svg { width: 18px; height: 18px; }
.modal__head { margin-bottom: 22px; padding-right: 42px; }
.modal__head h3 { font-size: 1.4rem; margin-bottom: 6px; }
.modal__head p  { font-size: .9rem; }

/* --------------------------------------------------------------------------
   27. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
.reveal.d5 { transition-delay: .35s; }

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


/* --------------------------------------------------------------------------
   29. BRIDGESTONE LEAD PANEL  (brand section)
   -------------------------------------------------------------------------- */
.brand-lead {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 2rem + 2vw, 56px);
  align-items: center;
  padding: clamp(28px, 2rem + 2vw, 52px);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary) 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.brand-lead::after { /* amber sweep in the corner */
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 163, 0, .22), transparent 66%);
  pointer-events: none;
}
.brand-lead__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.brand-lead__word {
  margin-top: 20px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.08;
}
.brand-lead p { margin-top: 16px; color: rgba(255, 255, 255, .78); max-width: 520px; }
.brand-lead__points {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.brand-lead__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.brand-lead__point i {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--primary-900);
  font-size: 12px;
}
.brand-lead__point b { display: block; font-size: .92rem; font-weight: 600; }
.brand-lead__point span { font-size: .8rem; color: rgba(255, 255, 255, .7); line-height: 1.55; }

/* --------------------------------------------------------------------------
   30. WHY CHOOSE NINE TYRES  (home)
   Scoped on purpose: the .feature card is shared with the inner pages, so the
   premium treatment lives behind .section--why and cannot leak into them.
   -------------------------------------------------------------------------- */
.section--why {
  position: relative;
  padding-block: clamp(52px, 3rem + 1.6vw, 78px);
  background: var(--surface);
  overflow: hidden;
}

/* The artwork lives in its own layer rather than on the section's background:
   as a background-image it re-crops every time the grid changes height, which
   pushed the tread and the road curves out of frame. */
.section--why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../images/whyhero.png) no-repeat center center / cover;
  pointer-events: none;
}
/* white veil over it, so the cards and copy always win */
.section--why::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .42) 42%, rgba(255, 255, 255, .68) 100%);
  pointer-events: none;
}
.section--why > .container { position: relative; z-index: 1; }

/* Header — small label, a proper title, then the reason why */
.section--why .section-head { margin-bottom: clamp(44px, 2.6rem + 2vw, 64px); }
.section--why .eyebrow { letter-spacing: .2em; font-size: .7rem; }
.section--why .section-head h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem);   /* was the full display size */
  line-height: 1.26;
  letter-spacing: -.02em;
}
.section--why .section-head .lead {
  max-width: 700px;
  margin-inline: auto;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-2);
}

/* Cards */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.section--why .feature {
  padding: 34px 28px 32px;
  border-radius: 22px;
  border-color: rgba(15, 76, 129, .1);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 4px 16px rgba(15, 76, 129, .07);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease), background var(--base) var(--ease);
}
.section--why .feature:hover {
  transform: translateY(-8px);
  background: #fff;
  border-color: transparent;
  box-shadow: 0 24px 50px rgba(15, 76, 129, .18);
}
.section--why .feature h3 { margin-bottom: 10px; font-size: 1.1rem; letter-spacing: -.01em; }
.section--why .feature p { font-size: .9rem; line-height: 1.75; color: var(--text-2); }

/* Icons — circular, gradient-tinted, ringed. One size, centred glyph. */
.section--why .icon-box {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 24px;
  font-size: 24px;
  background: linear-gradient(140deg, var(--primary-050), #FFFFFF);
  color: var(--primary);
  box-shadow:
    0 0 0 1px rgba(15, 76, 129, .08),
    0 0 0 7px rgba(15, 76, 129, .045),   /* the soft ring */
    0 8px 18px rgba(15, 76, 129, .1);
  transition: transform var(--base) var(--ease-out), background var(--base) var(--ease),
              color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.section--why .feature:hover .icon-box {
  transform: translateY(-3px) scale(1.05);
  background: linear-gradient(140deg, var(--primary), var(--primary-400));
  color: #fff;
  box-shadow:
    0 0 0 1px transparent,
    0 0 0 7px rgba(15, 76, 129, .1),
    0 14px 28px rgba(15, 76, 129, .3);
}

/* the amber, green and solid variants keep their identity in the same shape */
.section--why .icon-box--amber {
  background: linear-gradient(140deg, var(--accent-050), #FFFFFF);
  color: var(--accent-600);
  box-shadow: 0 0 0 1px rgba(244, 163, 0, .16), 0 0 0 7px rgba(244, 163, 0, .07), 0 8px 18px rgba(244, 163, 0, .14);
}
.section--why .feature:hover .icon-box--amber {
  background: linear-gradient(140deg, var(--accent), #FFC24D);
  color: var(--primary-900);
  box-shadow: 0 0 0 1px transparent, 0 0 0 7px rgba(244, 163, 0, .14), 0 14px 28px rgba(244, 163, 0, .34);
}
.section--why .icon-box--success {
  background: linear-gradient(140deg, var(--success-050), #FFFFFF);
  color: var(--success);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, .14), 0 0 0 7px rgba(22, 163, 74, .06), 0 8px 18px rgba(22, 163, 74, .12);
}
.section--why .feature:hover .icon-box--success {
  background: linear-gradient(140deg, var(--success), #34C77B);
  color: #fff;
  box-shadow: 0 0 0 1px transparent, 0 0 0 7px rgba(22, 163, 74, .12), 0 14px 28px rgba(22, 163, 74, .3);
}
.section--why .icon-box--solid {
  background: linear-gradient(140deg, var(--primary), var(--primary-400));
  color: #fff;
  box-shadow: 0 0 0 7px rgba(15, 76, 129, .08), 0 10px 22px rgba(15, 76, 129, .3);
}
.section--why .feature:hover .icon-box--solid {
  background: linear-gradient(140deg, var(--primary-900), var(--primary));
  box-shadow: 0 0 0 7px rgba(15, 76, 129, .12), 0 16px 30px rgba(15, 76, 129, .38);
}

/* --------------------------------------------------------------------------
   31. PAGE LOADER
   A machined alloy wheel: the rim and tyre spin, the hub (and the logo in it)
   stay upright, an amber arc sweeps the other way and a metallic sheen slides
   across the face. Everything animates on transform/opacity only, so it holds
   60fps and costs the compositor nothing.
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background:
    radial-gradient(720px 480px at 50% 38%, #FFFFFF 0%, #F4F8FC 58%, #E9F0F7 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
body.is-loading { overflow: hidden; }

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  animation: loaderRise .5s var(--ease-out) both;
}
@keyframes loaderRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- the wheel ---- */
.wheel {
  position: relative;
  width: 168px;
  height: 168px;
  filter: drop-shadow(0 22px 38px rgba(6, 43, 74, .22));
}
.wheel__spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: wheelSpin 2.2s linear infinite;
  will-change: transform;
}

/* tyre — dark rubber with a fine tread cut into the shoulder */
.wheel__tyre {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #0D2338 0 3.2deg, #17334C 3.2deg 6.4deg),
    #0D2338;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .55);
}
.wheel__tyre::after {   /* inner sidewall shading */
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #2A4763, #10283E 62%);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5);
}

/* rim — brushed alloy, lit from the top left */
.wheel__rim {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    #C7D3DE 0deg, #FFFFFF 40deg, #DCE5EC 78deg, #AEBECD 120deg,
    #F4F8FB 168deg, #C2CEDA 210deg, #FFFFFF 258deg, #B9C7D4 300deg, #C7D3DE 360deg
  );
  box-shadow:
    inset 0 0 0 3px rgba(15, 76, 129, .18),
    inset 0 6px 14px rgba(255, 255, 255, .85),
    0 4px 14px rgba(6, 43, 74, .2);
}

/* ten machined spokes, cut out of the rim face */
.wheel__spokes {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(15, 76, 129, .22) 0deg 4deg,
    rgba(15, 76, 129, 0) 4deg 36deg
  );
  -webkit-mask: radial-gradient(circle, transparent 27%, #000 28%, #000 93%, transparent 94%);
  mask: radial-gradient(circle, transparent 27%, #000 28%, #000 93%, transparent 94%);
}

/* the amber arc — the only thing that reads as "progress" */
.wheel__arc {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-right-color: rgba(244, 163, 0, .3);
  animation: wheelSpin 1.6s cubic-bezier(.62, .08, .36, .92) infinite reverse;
  will-change: transform;
}

/* metallic sheen sliding across the face */
.wheel__gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.wheel__gloss::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .78), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  animation: wheelSheen 2.6s var(--ease) infinite;
  will-change: transform;
}

/* hub — stays upright so the logo never turns with the wheel */
.wheel__hub {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 9px;
  background: #fff;
  box-shadow:
    0 6px 16px rgba(6, 43, 74, .22),
    inset 0 0 0 1px rgba(15, 76, 129, .12);
}
.wheel__hub img { width: 100%; height: auto; object-fit: contain; }

@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes wheelSheen {
  0%        { transform: translateX(0) rotate(14deg); opacity: 0; }
  18%       { opacity: 1; }
  60%, 100% { transform: translateX(420%) rotate(14deg); opacity: 0; }
}

/* ---- copy ---- */
.loader__text { text-align: center; }
.loader__text b {
  display: block;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.01em;
}
.loader__text b i {
  font-style: normal;
  animation: loaderDot 1.2s var(--ease) infinite;
}
.loader__text b i:nth-child(2) { animation-delay: .15s; }
.loader__text b i:nth-child(3) { animation-delay: .3s; }
@keyframes loaderDot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.loader__text span {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- indeterminate rail ---- */
.loader__bar {
  width: 190px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(15, 76, 129, .12);
  overflow: hidden;
}
.loader__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: loaderBar 1.25s var(--ease) infinite;
  will-change: transform;
}
@keyframes loaderBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel__spin, .wheel__arc, .wheel__gloss::before,
  .loader__bar span, .loader__text b i { animation: none; }
  .loader__inner { animation: none; }
}

/* --------------------------------------------------------------------------
   32. UTILITIES
   -------------------------------------------------------------------------- */
.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;
  left: 50%;
  top: -90px;         /* clears the tallest wrap on a narrow phone */
  white-space: nowrap;
  transform: translateX(-50%);
  z-index: 400;
  background: var(--primary);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  font-size: .9rem;
  transition: top var(--base) var(--ease);
}
.skip-link:focus { top: 0; }

.divider { height: 1px; background: var(--border); border: 0; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   31. WHY NINE CAR SERVICES — premium tyre bay
   -------------------------------------------------------------------------- */
.section--tyre-why {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 72px;             /* tighter than the site-wide 104px */
  padding-bottom: 72px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #F4F7FA 100%);
}
/* soft blue lighting over the illustration */
.section--tyre-why::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 54% at 20% 38%, rgba(30, 111, 168, .07), transparent 72%);
}
/* one large blueprint circle that carries across behind the heading,
   so the two columns read as one composition */
.section--tyre-why::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  top: -6%;
  width: 62vw;
  max-width: 900px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(30, 111, 168, .10);
  box-shadow: inset 0 0 0 40px rgba(30, 111, 168, .015);
  pointer-events: none;
}

/* --- the scene ------------------------------------------------------------ */
/* --- the workshop artwork ------------------------------------------------- */
/* --- the workshop artwork -------------------------------------------------
   The PNG/WebP carries a real alpha channel, so the artwork sits directly on
   the white section and the glow, blueprint ring and tread watermark can be
   layered genuinely BEHIND it rather than screened on top.
   Stacking inside .bay-stage: 0 glow + tread · 1 blueprint · 2 artwork
                               3 sparkle cues · 4 particles                  */
/* --- the workshop illustration -------------------------------------------
   wheel.gif is an OPAQUE animated GIF on a flat #E5F1FD field. Anything layered
   behind it (blueprint ring, tread watermark, radial glow) would be invisible,
   so those are gone. The blue field is instead framed as a deliberate card, and
   the ambient motion (float, parallax, hover) sits on the card itself.        */
.bay-scene {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 6px 0 26px;           /* whitespace around the artwork */
  /* JS writes the parallax transform; the transition damps it so the pointer is
     trailed smoothly rather than tracked 1:1, and it eases back on leave */
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.bay-stage {
  position: relative;
  width: 95%;                    /* ~95% of the available column, per spec */
  animation: bay-float 7s ease-in-out infinite;
  will-change: transform;
}

/* the GIF, framed as a card so its blue field reads as intentional */
.bay-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;                  /* aspect ratio preserved */
  border-radius: 22px;
  background: #E5F1FD;           /* matches the artwork's own field exactly */
  box-shadow:
    0 18px 40px rgba(6, 43, 74, .16),
    0 0 0 1px rgba(30, 111, 168, .10);
  transform: scale(1);
  transition: transform .6s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}

/* soft blue halo around the card, gently pulsing */
.bay-stage::before {
  content: "";
  position: absolute;
  inset: -12% -8% -4%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 111, 168, .20), rgba(30, 111, 168, .06) 55%, transparent 78%);
  animation: bay-glow 8s ease-in-out infinite;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* soft floor shadow grounding the card */
.bay-scene::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 24px;
  height: 20px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(6, 43, 74, .18), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

/* hover: the halo lifts, the card scales a touch. Nothing dramatic. */
.bay-scene:hover .bay-stage::before { opacity: 1.4; transform: scale(1.05); }
.bay-scene:hover .bay-art {
  transform: scale(1.01);
  box-shadow:
    0 24px 54px rgba(6, 43, 74, .22),
    0 0 0 1px rgba(30, 111, 168, .18);
}

@keyframes bay-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes bay-glow {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}
/* --- statistics ----------------------------------------------------------- */
.tyre-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: var(--s-5);
}
.tstat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(30, 111, 168, .12);
  box-shadow: 0 6px 22px rgba(6, 43, 74, .06);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.tstat:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 111, 168, .30);
  box-shadow: 0 16px 36px rgba(30, 111, 168, .14);
}

.tstat__ring { position: relative; flex: 0 0 60px; width: 60px; height: 60px; display: grid; place-items: center; }
.tstat__rings { position: absolute; inset: 0; width: 60px; height: 60px; }
.tstat__track, .tstat__prog, .tstat__orbit { fill: none; }
.tstat__track { stroke: var(--primary-050); stroke-width: 4; }
.tstat__prog {
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 151;    /* 2πr, r = 24 */
  stroke-dashoffset: 151;   /* stays empty until the section scrolls in */
  transform: rotate(-90deg);
  transform-origin: 30px 30px;
}
/* the small circular accent orbiting the icon */
.tstat__orbit {
  stroke: var(--primary);
  stroke-opacity: .34;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 12;
  transform-origin: 30px 30px;
  animation: nt-spin 14s linear infinite;
}
.tstat__orbit--alt { animation-duration: 18s; animation-direction: reverse; }

.reveal.is-in .tstat__prog     { animation: nt-ring 1.5s var(--ease) forwards; }
.reveal.is-in .tstat__prog--alt { animation: nt-ring-alt 1.5s var(--ease) forwards; }
@keyframes nt-ring     { to { stroke-dashoffset: 30; } }
@keyframes nt-ring-alt { to { stroke-dashoffset: 50; } }

.tstat__ico { width: 22px; height: 22px; color: var(--primary); }
.tstat__body b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--primary-900);
}
.tstat__body p { margin-top: 3px; }

/* --- right column: hierarchy through spacing ------------------------------ */
.why-head { margin-top: 10px; letter-spacing: -.035em; line-height: 1.16; }
.why-lead { margin-top: 16px; max-width: 46ch; }

/* --- the 3-up carousel ---------------------------------------------------- */
/* grid items default to min-width:auto, so the flex track's min-content would
   blow the column past its 1.05fr share. Both columns must be allowed to shrink. */
.section--tyre-why .enquiry-grid > * { min-width: 0; }

.slider--cards {
  min-width: 0;
  margin-top: 30px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* the viewport clips the off-screen slide; the padding gives hover shadows room */
.wcards-view {
  min-width: 0;
  overflow: hidden;
  padding: 10px 10px 14px;
  margin: -10px -10px -14px;
}
.slider--cards .slider__track { min-width: 0; }
.slider--cards .slide { min-width: 100%; }
.slider--cards .slide::after { display: none; }   /* kill the photo scrim */

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 across, next 3 on the following slide */
  gap: 16px;
}

/* dots sit centred below the cards, in brand colours */
.wcards-nav {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.slider--cards .slider__dots {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
}
.slider--cards .dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(30, 111, 168, .25);
  cursor: pointer;
}
.slider--cards .dot:hover { background: rgba(30, 111, 168, .45); }
.slider--cards .dot.is-active { width: 28px; background: var(--primary); }

/* --- the card box --------------------------------------------------------- */
.wcard {
  position: relative;
  padding: 20px 18px 42px;   /* bottom lane kept clear for the hover arrow */
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%);
  border: 1px solid rgba(30, 111, 168, .13);
  box-shadow: 0 6px 22px rgba(6, 43, 74, .06);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
/* a thin accent rule wipes in along the top edge */
.wcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}
.wcard:hover::before { transform: scaleX(1); }

/* illustrated icon on a soft, raised tile */
.wcard__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 13px;
  border-radius: 16px;
  background: linear-gradient(150deg, #EDF4FA 0%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 1px rgba(30, 111, 168, .12), 0 8px 18px rgba(6, 43, 74, .10);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.wcard__ico svg { width: 30px; height: 30px; }
.wcard h3 { font-size: .93rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.wcard p  { margin-top: 6px; font-size: .79rem; line-height: 1.6; color: var(--text-2); }

/* directional arrow: only on hover */
.wcard__arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-050);
  color: var(--primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.wcard__arrow svg { width: 14px; height: 14px; }
.wcard:hover .wcard__arrow { opacity: 1; transform: translateX(0); }

.wcard:hover {
  transform: translateY(-6px);
  border-color: rgba(30, 111, 168, .34);
  box-shadow: 0 22px 48px rgba(30, 111, 168, .16), 0 0 0 5px rgba(30, 111, 168, .04);
}
/* the tile lifts and glows — the icon keeps its own colours */
.wcard:hover .wcard__ico {
  transform: scale(1.07) rotate(-5deg);
  box-shadow: inset 0 0 0 1px rgba(30, 111, 168, .22), 0 14px 26px rgba(30, 111, 168, .26);
}

/* each slide stays 3 across; below that the cards stack and the slider still works */
@media (max-width: 560px) {
  .why-cards { grid-template-columns: 1fr; }
  .wcard { padding: 22px 20px 50px; }
}

@media (prefers-reduced-motion: reduce) {
  /* the GIF itself is swapped for a still frame in the markup; here we stop the
     float, the halo pulse and the hover scale. Parallax is skipped in JS. */
  .bay-stage, .bay-stage::before, .tstat__orbit { animation: none !important; }
  .bay-scene:hover .bay-art { transform: none; }
  .tstat__prog      { stroke-dashoffset: 30; }
  .tstat__prog--alt { stroke-dashoffset: 50; }
}

/* --------------------------------------------------------------------------
   32. OFFERS — editorial: one featured offer + six supporting cards
   -------------------------------------------------------------------------- */
.offers {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 84px;
  padding-bottom: 84px;
  background:
    radial-gradient(52% 40% at 12% 22%, rgba(15, 76, 129, .06), transparent 70%),
    radial-gradient(46% 38% at 92% 78%, rgba(15, 76, 129, .05), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 55%, #F4F6F9 100%);
}
/* soft tyre tread watermark */
.offers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .028;
  background-image:
    repeating-linear-gradient(0deg,   #fff 0 10px,            transparent 10px 34px),
    repeating-linear-gradient(104deg, var(--primary) 0 15px,  transparent 15px 40px);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 78%);
}
.offers__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.offers__blueprint { position: absolute; inset: 0; width: 100%; height: 100%; }
.offers__ring       { transform-origin: 250px 470px;  animation: off-spin 80s linear infinite; }
.offers__ring--rev  { transform-origin: 1270px 180px; animation: off-spin 60s linear infinite reverse; }

.offers__dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  animation: off-drift var(--d) linear infinite;
  animation-delay: var(--delay);
}

/* --- head ----------------------------------------------------------------- */
.offers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.offers__title {
  margin-top: 12px;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.offers__head .lead { margin-top: 16px; max-width: 56ch; }
.offers__link { flex: none; padding-bottom: 6px; }
.offers__link svg { transition: transform var(--base) var(--ease); }
.offers__link:hover svg { transform: translateX(5px); }

/* --- layout: featured ~40% + a 2 × 3 grid --------------------------------- */
.offers__layout {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.offers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* --- the featured offer --------------------------------------------------- */
.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px 28px 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 15% 0%, #14548C 0%, transparent 55%),
    linear-gradient(160deg, #0B3D68 0%, #072F52 45%, #04203A 100%);
  box-shadow: 0 26px 60px rgba(4, 32, 58, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
/* gold hairline along the top edge */
.feat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .85;
}
.feat__glow {
  position: absolute;
  top: -18%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 208, 245, .18), transparent 70%);
  pointer-events: none;
  animation: off-glow 9s ease-in-out infinite;
}
.feat:hover {
  transform: translateY(-7px);
  box-shadow: 0 36px 80px rgba(4, 32, 58, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.feat__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.feat__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--yellow), var(--accent));
  color: #3A2600;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(244, 163, 0, .35);
}
.feat__season {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* The illustration well. It takes the slack so the card never has dead space
   when the six-card grid beside it makes the column tall, and it is lit rather
   than navy — the render's car is black and the overalls are navy, so on the
   card's own background they would disappear. */
.feat__art {
  position: relative;
  flex: 1;
  min-height: 260px;
  display: grid;
  place-items: center;
  margin: 12px 0 16px;
  padding: 6px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(70% 62% at 50% 44%, rgba(255, 255, 255, .96), rgba(226, 239, 249, .9) 55%, rgba(198, 222, 240, .82) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -20px 40px -24px rgba(4, 32, 58, .35);
}
/* blueprint rings behind the scene */
.feat__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.feat__ring  { transform-origin: 200px 150px; animation: off-spin 34s linear infinite; }

/* the workshop render, sitting still and grounded by a soft floor shadow */
/* the render carries its own margins, so it is scaled past the well's width to
   make the scene fill the frame rather than float in it */
.feat__img {
  position: relative;
  z-index: 1;
  width: 104%;      /* fills the frame without clipping the tyre stack */
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 14px rgba(4, 32, 58, .22));
}
/* particles drifting inside the well */
.feat__dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.feat__dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  animation: off-drift var(--d) linear infinite;
  animation-delay: var(--delay);
}

.feat__body { margin-top: auto; }
/* the global `h1..h5 { color: var(--text) }` beats inheritance from .feat,
   so the heading has to be set white explicitly or it renders near-black on navy */
.feat__body h3 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: #fff;
}
.feat__body > p {
  margin-top: 8px;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .68);
}
.feat__list {
  margin: 14px 0 20px;
  display: grid;
  gap: 8px;
}
.feat__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.feat__list svg {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(244, 163, 0, .16);
  color: var(--accent);
}
.feat__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--yellow), var(--accent));
  color: #3A2600;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(244, 163, 0, .32);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.feat__cta svg { width: 17px; height: 17px; transition: transform var(--base) var(--ease); }
.feat__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(244, 163, 0, .44); }
.feat__cta:hover svg { transform: translateX(4px); }

/* --- the six offer cards -------------------------------------------------- */
.ocard {
  --oc: var(--primary);                 /* accent, overridden per variant */
  --oc-tint: rgba(15, 76, 129, .08);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 46px;              /* bottom lane kept clear for the arrow */
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(16, 24, 40, .05);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
.ocard--blue    { --oc: var(--primary);   --oc-tint: rgba(15, 76, 129, .08); }
.ocard--gold    { --oc: var(--accent-600); --oc-tint: rgba(244, 163, 0, .12); }
.ocard--navy    { --oc: var(--primary-900); --oc-tint: rgba(6, 43, 74, .08); }
.ocard--emerald { --oc: var(--success);   --oc-tint: rgba(22, 163, 74, .10); }
.ocard--grey    { --oc: var(--text-2);    --oc-tint: rgba(90, 95, 102, .08); }

/* --- the mini-illustration container --------------------------------------
   Shared by the Offers cards and the "Why choose" features (.wibox), so both
   sets of illustrations sit in an identical 72px frame. -------------------- */
.ocard__ico,
.wibox {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, #FFFFFF 0%, #EDF4FA 55%, #DCE9F3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(15, 76, 129, .10),
    0 8px 18px rgba(6, 43, 74, .12);          /* the floating shadow */
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* blueprint ring behind the illustration */
.ocard__ico::before,
.wibox::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px dashed rgba(15, 76, 129, .22);
  animation: mi-spin 22s linear infinite;
  animation-play-state: paused;              /* only turns while hovered */
}
/* glow pulse */
.ocard__ico::after,
.wibox::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(56% 56% at 50% 46%, rgba(30, 111, 168, .28), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.mi {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  transition: transform .3s var(--ease);
}

/* particles drifting around the illustration */
.mi__p {
  position: absolute;
  z-index: 2;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
}
.mi__p:nth-child(2) { left: 14%; top: 66%; animation: mi-drift 3.2s ease-in-out infinite; }
.mi__p:nth-child(3) { left: 78%; top: 30%; animation: mi-drift 3.8s ease-in-out infinite .5s; }
.mi__p:nth-child(4) { left: 58%; top: 80%; animation: mi-drift 3.5s ease-in-out infinite 1.1s; }
.mi__p { animation-play-state: paused; }

/* hover: lift, float, ring turns, glow pulses, particles drift, shadow deepens */
.ocard:hover .ocard__ico,
.feature:hover .wibox {
  transform: translateY(-8px);
  box-shadow:
    inset 0 0 0 1px rgba(15, 76, 129, .18),
    0 20px 34px rgba(6, 43, 74, .22);
}
.ocard:hover .ocard__ico::before,
.feature:hover .wibox::before { animation-play-state: running; }
.ocard:hover .ocard__ico::after,
.feature:hover .wibox::after  { opacity: 1; animation: mi-glow 2.4s ease-in-out infinite; }
.ocard:hover .mi,
.feature:hover .mi     { animation: mi-float 2.8s ease-in-out infinite; }
.ocard:hover .mi__p,
.feature:hover .mi__p  { animation-play-state: running; }

@keyframes mi-spin  { to { transform: rotate(360deg); } }
@keyframes mi-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes mi-glow {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}
@keyframes mi-drift {
  0%       { opacity: 0; transform: translate(0, 4px); }
  30%, 65% { opacity: .7; }
  100%     { opacity: 0; transform: translate(5px, -12px); }
}
.ocard h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.ocard p  { margin-top: 8px; font-size: .84rem; line-height: 1.65; color: var(--text-2); }

.ocard__badge {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  margin-top: 16px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--oc-tint);
  color: var(--oc);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* shimmer sweeps across the badge on hover */
.ocard__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
}
.ocard:hover .ocard__badge::after { animation: off-shimmer .9s var(--ease); }

.ocard__arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--oc-tint);
  color: var(--oc);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.ocard__arrow svg { width: 14px; height: 14px; }

.ocard:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--oc) 34%, transparent);
  box-shadow: 0 22px 44px rgba(16, 24, 40, .12), 0 0 0 4px var(--oc-tint);
}
.ocard:hover .ocard__arrow { opacity: 1; transform: translateX(0); }

/* a sixth stagger step for the card grid */
.reveal.d6 { transition-delay: .42s; }

@keyframes off-spin   { to { transform: rotate(360deg); } }
@keyframes off-glow {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
@keyframes off-shimmer { to { transform: translateX(120%); } }
@keyframes off-drift {
  0%       { opacity: 0; transform: translateY(10px); }
  16%, 72% { opacity: .4; }
  100%     { opacity: 0; transform: translateY(-70px); }
}

@media (prefers-reduced-motion: reduce) {
  .offers__ring, .offers__ring--rev, .offers__dust i,
  .feat__img, .feat__ring, .feat__dust i, .feat__glow,
  .ocard__ico::before, .ocard__ico::after,
  .wibox::before, .wibox::after, .mi, .mi__p { animation: none !important; }
  .ocard:hover .ocard__ico,
  .feature:hover .wibox { transform: none; }
  .offers__dust i, .feat__dust i { opacity: .32; }
}

/* --------------------------------------------------------------------------
   33. BRANDS — Bridgestone hero + three categorised logo walls
   -------------------------------------------------------------------------- */
.brands {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(52% 40% at 88% 12%, rgba(15, 76, 129, .10), transparent 70%),
    radial-gradient(46% 38% at 6% 84%, rgba(47, 124, 184, .09), transparent 72%),
    linear-gradient(180deg, #F3F8FC 0%, #EAF2F9 55%, #E3EDF6 100%);
}
/* the blueprint rules and rings are drawn with stroke-opacity attributes in the
   markup; CSS beats a presentation attribute, so the wash is tuned from here */
.brands__bg svg path   { stroke-opacity: .05; }
.brands__bg svg circle { stroke-opacity: .09; }
.brands__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.brands__bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brands__ring      { transform-origin: 1230px 200px; animation: br-spin 90s linear infinite; }
.brands__ring--rev { transform-origin: 180px 720px;  animation: br-spin 70s linear infinite reverse; }

/* --- category block ------------------------------------------------------- */
.bcat { margin-top: 56px; }
.bcat__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.bcat__rule {
  flex: none;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-400));
}
.bcat__title {
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary-900);
}
.bcat__count {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--primary-050);
  color: var(--primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- the logo wall -------------------------------------------------------- */
/* explicit columns per wall: 8 premium and 4 Indian divide by 4, the 6 batteries
   by 6 — so no category ever ends on an orphan row */
.bgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bgrid--battery { grid-template-columns: repeat(6, 1fr); }

/* tyres on the left, batteries on the right — two short walls read better side by side
   than two near-empty full-width rows */
.bcat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 44px;
  align-items: start;
  margin-top: 56px;
}
/* .bcat's own top margin stacked the columns unevenly — the grid gap spaces them now */
.bcat-split .bcat { margin-top: 0; }
/* both walls use the same card size, so the lone tyre card matches the battery pair
   rather than stretching to fill its side */
.bgrid--split { grid-template-columns: repeat(2, 1fr); }
.bgrid--split .bcard { justify-self: start; width: 100%; }
@media (max-width: 780px) {
  .bcat-split { grid-template-columns: 1fr; }
}

/* No plate, no badge — the logo is the whole card. Any panel behind it read as a
   button, so the marks now sit directly on the section wash. */
.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 120px;
  padding: 18px 10px;
  background: none;
  border: 0;
  box-shadow: none;
  transition: transform .3s var(--ease);
}

/* The logo plate holds BOTH the real logo and a wordmark fallback.
   When images/brands/<slug>.png exists the <img> wins and the wordmark is
   hidden. When it 404s, main.js removes the <img>, the sibling rule below stops
   matching, and the wordmark shows — so the wall never renders broken images. */
.bcard__logo {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
}
/* Only three brands sit on this wall, so the logos wear their real colours
   rather than the greyscale-until-hover treatment a long logo wall needs. */
.bcard__img {
  grid-area: 1 / 1;
  max-width: 178px;
  max-height: 56px;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.bcard:hover .bcard__img { transform: scale(1.06); }
.bcard__img + .bcard__word { display: none; }   /* logo present → hide the fallback */

/* Bridgestone's mark is a long, low wordmark — width-bound, so it needs a wider
   allowance than the squarer battery logos to read at the same optical size. */
.bcard--bridgestone .bcard__img { max-width: 240px; }
/* Amaron's artwork is black-on-green and used exactly as the brand supplied it —
   the green field is part of the lockup, so only its corners are softened. */
.bcard--amaron .bcard__img { border-radius: 6px; }

.bcard__word {
  grid-area: 1 / 1;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  color: var(--primary-900);
  transition: color .3s var(--ease);
}
.bcard__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color .3s var(--ease);
}

.bcard:hover { transform: translateY(-4px); }
.bcard:hover .bcard__word  { color: var(--primary); }
.bcard:hover .bcard__label { color: var(--primary); }

/* the dealer's label keeps the gold, but the card wears no plate or seal */
.bcard--dealer .bcard__label { color: var(--accent-600); }
.bcard--dealer:hover .bcard__word,
.bcard--dealer:hover .bcard__label { color: var(--accent-600); }

.bcard--battery:hover .bcard__word,
.bcard--battery:hover .bcard__label { color: var(--success); }

/* --- branded wordmarks ----------------------------------------------------
   Stand-ins, not the official marks: each name wears its brand's own colour
   and letterform so the wall reads like logos instead of grey text. The moment
   images/brands/<slug>.png exists, main.js keeps the <img> and the CSS sibling
   rule hides these — so none of this needs unwinding later.
   -------------------------------------------------------------------------- */
.bcard__word::after {   /* the colour bar under each wordmark */
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: currentColor;
  opacity: .9;
  transition: width .3s var(--ease);
}
.bcard:hover .bcard__word::after { width: 48px; }

.bcard--bridgestone .bcard__word {
  color: #D0021B;
  font-style: italic;
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.bcard--bridgestone .bcard__word::after {
  background: linear-gradient(90deg, #D0021B, #FF5A3C);
}
.bcard--amaron .bcard__word {
  color: #16171B;
  font-weight: 900;
  letter-spacing: .14em;
}
.bcard--amaron .bcard__word::after {
  background: linear-gradient(90deg, #F58220, #FDB913);
}
.bcard--sfsonic .bcard__word {
  color: #0033A0;
  font-weight: 900;
  letter-spacing: .1em;
}
.bcard--sfsonic .bcard__word::after {
  background: linear-gradient(90deg, #0033A0 50%, #E4002B 50%);
}
/* the generic :hover recolours .bcard__word — brand colour has to survive it */
.bcard--bridgestone:hover .bcard__word { color: #D0021B; }
.bcard--amaron:hover .bcard__word      { color: #16171B; }
.bcard--sfsonic:hover .bcard__word     { color: #0033A0; }

.brands__note { margin-top: 48px; }

@keyframes br-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .brands__ring, .brands__ring--rev { animation: none !important; }
}

/* --------------------------------------------------------------------------
   34. TESTIMONIALS — customer face wall + cross-fading review carousel
   -------------------------------------------------------------------------- */
.tstm {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 76px;
  background: var(--primary-900);
  color: #fff;
}

/* --- the face wall -------------------------------------------------------- */
.tstm__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* 12 × 7 = 84 cells. Rows are a percentage of the layer's height, so the wall always
   fills the section edge to edge no matter how tall the carousel makes it; any cells
   past the bottom simply clip. The gap is the navy showing through — that IS the grid. */
.tstm__faces {
  position: absolute;
  inset: -3%;                 /* bleed, so the drift below never exposes a bare edge */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 14.2857%;
  gap: 5px;
  animation: face-drift 64s ease-in-out infinite alternate;
}
.tstm__faces i {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  opacity: var(--o);
  animation: face-breathe var(--pt) ease-in-out infinite alternate;
  animation-delay: var(--pd);
}
.tstm__faces img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* full greyscale + a blue duotone wash on top: colour portraits behind navy copy read
     as a stock-photo collage, and the section stops looking like one design. */
  filter: grayscale(1) contrast(1.08) brightness(.92);
}
.tstm__faces i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30, 111, 168, .55), rgba(6, 43, 74, .70));
  mix-blend-mode: multiply;
}

/* Hole in the middle of the wall. The carousel sits here, so the faces have to get out
   of the way — masked to near-nothing at centre, full strength at the edges. */
.tstm__bg { -webkit-mask-image: var(--tstm-mask); mask-image: var(--tstm-mask); }
.tstm {
  --tstm-mask: radial-gradient(72% 64% at 50% 54%,
      rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .18) 34%, rgba(0, 0, 0, .62) 62%, #000 88%);
}

/* the scrim: without this the faces fight the copy and nothing is readable */
.tstm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 56% at 50% 52%, rgba(6, 43, 74, .93), rgba(6, 43, 74, .55) 62%, transparent 82%),
    linear-gradient(180deg, rgba(6, 43, 74, .72) 0%, rgba(6, 43, 74, .58) 45%, rgba(4, 32, 58, .86) 100%);
}

@keyframes face-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-14px, -10px, 0) scale(1.03); }
}
@keyframes face-breathe {
  from { opacity: calc(var(--o) * .45); }
  to   { opacity: var(--o); }
}
.tstm__blueprint { position: absolute; inset: 0; width: 100%; height: 100%; }
.tstm__ring      { transform-origin: 1210px 170px; animation: br-spin 100s linear infinite; }
.tstm__ring--rev { transform-origin: 190px 640px;  animation: br-spin 80s linear infinite reverse; }
.tstm__dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8FD0F5;
  opacity: 0;
  animation: off-drift var(--d) linear infinite;
  animation-delay: var(--delay);
}

/* --- head ----------------------------------------------------------------- */
.tstm__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
.tstm__head h2 { margin-top: 12px; color: #fff; letter-spacing: -.03em; }
.tstm .eyebrow { color: var(--accent); }

.rating-card--dark {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.rating-card--dark .rating-card__score { color: #fff; }
.rating-card--dark .rating-card__meta span { color: rgba(255, 255, 255, .62); }
.tstm .stars { color: var(--accent); }

/* --- the carousel --------------------------------------------------------- */
.tstm__slider {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* fade mode: slides are stacked in one grid cell and cross-faded, so the loop
   never has to sweep backwards when it wraps from the last review to the first */
.slider--fade .slider__track {
  display: grid;
  transform: none !important;
}
/* The two slides share one grid cell, so a straight cross-fade puts both paragraphs on
   screen at 50% at once and you read one review through the other. Fading THROUGH the
   background instead fixes it: the outgoing slide clears first (.42s), and only then does
   the incoming one start (.34s delay). They overlap for a few frames, not half a second. */
.slider--fade .slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.985);
  transition:
    opacity .42s var(--ease),
    transform .42s var(--ease),
    visibility 0s linear .42s;
}
.slider--fade .slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .46s var(--ease) .34s,
    transform .55s var(--ease) .34s,
    visibility 0s;
}
.slider--fade .slide::after { display: none; }   /* kill the photo scrim */

.tquote {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 42px 44px 36px;
  border-radius: var(--r-xl);
  /* A near-transparent white glass worked over the old single photo, but over the face
     wall you read the eyes behind the sentence. This is a navy panel that happens to be
     glass — enough blur and body to sit ON the wall rather than in it. */
  background: linear-gradient(160deg, rgba(10, 52, 86, .84), rgba(4, 30, 54, .90));
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 30px 70px rgba(2, 18, 34, .46), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.tquote__mark {
  position: absolute;
  top: 6px;
  right: 30px;
  font-size: 6rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
  opacity: .18;
  pointer-events: none;
}
.tquote .stars { margin-bottom: 18px; }
.tquote .stars svg { width: 19px; height: 19px; }
.tquote p {
  font-size: clamp(1.02rem, .95rem + .4vw, 1.24rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
}
.tquote__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.tquote__author > span:last-child { display: flex; flex-direction: column; }
.tquote__author b { font-size: .95rem; font-weight: 700; color: #fff; }
.tquote__author > span:last-child > span {
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
}
.tquote .avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .2);
}

/* dots, centred below the carousel */
.tstm__nav { display: flex; justify-content: center; margin-top: 30px; }
.tstm__slider .slider__dots { position: static; display: flex; gap: 8px; }
.tstm__slider .dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
}
.tstm__slider .dot:hover { background: rgba(255, 255, 255, .5); }
.tstm__slider .dot.is-active { width: 28px; background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tstm__ring, .tstm__ring--rev, .tstm__dust i,
  .tstm__faces, .tstm__faces i { animation: none !important; }
  .tstm__faces   { transform: none; }
  .tstm__faces i { opacity: var(--o); }   /* hold the still wall, don't let it breathe */
  .tstm__dust i  { opacity: .3; }
  .slider--fade .slide { transition: opacity .01ms, visibility .01ms; transform: none; }
}

/* --------------------------------------------------------------------------
   35. CAR-TYRES HERO — technical car illustration + glass tyre finder
   Replaces the old page-hero + standalone search panel on car-tyres.html.
   -------------------------------------------------------------------------- */
.thero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 26px 34px;
  background-color: #DCE7F0;
  /* the car-tyre photo fills the hero; a light-left / slightly-dark-right wash keeps the
     card blended on the left and the promo headline readable on the right */
  background-image:
    linear-gradient(95deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .24) 30%, rgba(20, 45, 72, .06) 52%, rgba(14, 32, 52, .34) 100%),
    url(../images/car-tyre.webp);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* bike-tyres.html runs the same hero on its own photograph.
   The bike sits centre-left in the source frame, which put it behind the finder card.
   Mirroring the photo carries it over to the right at full cover — nothing is zoomed
   or cropped, so the whole bike stays in frame. The photo is a layer of its own
   because only it flips: the navy wash on top must stay light-left / dark-right. */
.thero--bike { background-color: #D8E4EE; }
.thero--bike::before,
.thero--bike::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Mirrored, which is what carries the bike over to the right, away from the card. */
.thero--bike::before {
  background: url(../images/two-wheeler-hero.jpg) center / cover no-repeat;
  transform: scaleX(-1);
}
/* Light on the left so the card sits on clean sky, deepening to navy on the right.
   The bike is white and moves around the frame as the window widens, so the promo
   can't rely on finding a gap — this wash is what keeps white type readable wherever
   the bike happens to fall, and it deepens further than the car page's because it is
   working against a white fairing rather than dark workshop. */
.thero--bike::after {
  background:
    linear-gradient(200deg, rgba(8, 30, 52, .58) 0%, rgba(8, 30, 52, .12) 42%, transparent 62%),
    linear-gradient(95deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .24) 30%, rgba(20, 45, 72, .06) 52%, rgba(14, 32, 52, .3) 100%);
}
.thero__bg { display: none; }   /* decorative grid lines / rings removed */
.thero__grid-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.thero__ring      { transform-origin: 1240px 150px; animation: br-spin 120s linear infinite; }
.thero__ring--rev { transform-origin: 130px 760px;  animation: br-spin 90s linear infinite reverse; }
.thero__dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary-400);
  opacity: 0;
  animation: off-drift var(--d) linear infinite;
  animation-delay: var(--delay);
}

.thero .crumbs { margin-bottom: 22px; }

/* Copy + finder on the left, photograph on the right. The finder track is the wider of
   the two: it carries five selects and they must not be squeezed.
   min-width:0 or the selects blow their grid track out. */
.thero__grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) 1fr;
  align-items: center;
  gap: 44px;
}
.thero__grid > * { min-width: 0; }
.thero__side { max-width: 430px; }

/* right-side promo headline over the photo */
.thero__promo {
  color: #fff;
  text-shadow: 0 2px 22px rgba(6, 20, 35, .5);
  padding-left: 12px;
}
.thero__promo-kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #06233B;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 10px 24px -8px rgba(244, 163, 0, .5);
}
.thero__promo-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.6rem, 4.8vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.thero__promo-title .mark,
.thero__promo-title b { color: var(--accent); }
.thero__promo-sub {
  max-width: 430px;
  color: rgba(255, 255, 255, .92);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.55;
}

/* --- right: the workshop photograph -------------------------------------- */
.thero__shot {
  position: relative;
  display: flex;
  margin: 0;
  isolation: isolate;
}
/* a blueprint ring behind the frame, breaking the rectangle */
.thero__shot-ring {
  position: absolute;
  z-index: -1;
  top: -26px;
  right: -30px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px dashed rgba(30, 111, 168, .30);
  animation: mi-spin 46s linear infinite;
}
.thero__shot-frame {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  box-shadow:
    0 50px 90px -34px rgba(6, 43, 74, .46),
    0 6px 18px rgba(6, 43, 74, .08);
}
.thero__shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cropping a 3:2 photo into a tall column centres on the parked car and cuts the
     technician in half. Biasing right keeps the tyre and the fitter — the subject. */
  object-position: 62% center;
  filter: saturate(1.04) contrast(1.04);
  transition: transform 1.1s var(--ease);
}
.thero__shot:hover .thero__shot-frame img { transform: scale(1.035); }
/* navy wash from the lower-left, so the chip sitting there stays legible */
.thero__shot-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, transparent 46%, rgba(6, 43, 74, .30) 100%),
    linear-gradient(0deg, rgba(6, 43, 74, .18), transparent 42%);
}

/* the two claims, laid on the photograph */
.thero__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 34px -14px rgba(6, 43, 74, .40), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.thero__chip b {
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -.02em;
}
.thero__chip span { font-size: .74rem; font-weight: 600; color: var(--text-2); }
.thero__chip--a { left: -22px; bottom: 42px; }
.thero__chip--b { right: -18px; top: 34px; }

/* --- left: heading + glass card ------------------------------------------ */
.thero__side .badge-auth { margin-bottom: 20px; }
.thero__title {
  font-size: clamp(2rem, 1.4rem + 1.7vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.thero__sub {
  margin-top: 16px;
  max-width: 30rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-2);
}

.tcard {
  position: relative;
  margin-top: 28px;
  padding: 28px 28px 24px;
  border-radius: 28px;
  background: linear-gradient(152deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .76));
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 44px 90px -34px rgba(6, 43, 74, .38),
    0 4px 14px rgba(6, 43, 74, .06),
    inset 0 1px 0 #fff;
}
/* the gold hairline along the top edge — the only warm note on the card */
.tcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .8;
}

/* --- segmented tabs ------------------------------------------------------ */
.tcard__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  margin-bottom: 24px;
  border-radius: 16px;
  background: rgba(6, 43, 74, .06);
  border: 0;
}
/* The pill slides between the two tabs. --tab is set to the active index by main.js, so
   the movement is one transform rather than two cross-fading backgrounds. */
.tcard__ind {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 7px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(6, 43, 74, .16), inset 0 0 0 1px rgba(6, 43, 74, .05);
  transform: translateX(calc(var(--tab, 0) * (100% + 4px)));
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.tcard__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 700;
  color: var(--text-2);
  transition: color .3s var(--ease);
}
.tcard__tab svg {
  width: 19px;
  height: 19px;
  flex: none;
  transition: transform .3s var(--ease);
}
.tcard__tab:hover { color: var(--text); }
/* The inner pages' .panel__tab.is-active paints the active tab solid navy. That rule beats
   a bare .tcard__tab on specificity, so the active tab came out navy-on-navy and its own
   label vanished. Here the sliding white pill IS the active state — kill the background. */
.tcard__tab.is-active {
  background: none;
  color: var(--primary);
}
.tcard__tab.is-active svg { transform: scale(1.08); }

/* --- the diagram above each tab's fields ---------------------------------- */
.tcard__viz {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 12px 14px 10px;
  border-radius: 18px;
  border: 1px solid rgba(6, 43, 74, .07);
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(30, 111, 168, .07), transparent 70%),
    linear-gradient(150deg, #F2F7FB, #E7EFF6);
}
.tcard__viz svg { display: block; width: 100%; height: auto; }
/* real car & wheel photo — replaces the old 3D diagram, sits above the tabs.
   Fixed 16/9 box + object-fit:cover so either photo fills it cleanly, no gaps. */
.tcard__viz--photo { padding: 8px; }
.tcard__viz--photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  background: #fff;
}
.tcard__viz-tag {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-3);
}

/* --- fields -------------------------------------------------------------- */
.tcard__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 22px;
}
.tfield--wide { grid-column: 1 / -1; }
.tfield > label {
  display: block;
  margin-bottom: 7px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tfield > label span {
  margin-left: 5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  opacity: .8;
}
.tfield__ctl { position: relative; display: block; }
.tfield__ico,
.tfield__chev {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;      /* the click has to reach the select underneath */
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.tfield__ico  { left: 14px;  width: 19px; height: 19px; color: var(--primary-400); }
.tfield__chev { right: 13px; width: 17px; height: 17px; color: var(--text-3); }

.tfield select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 14px 40px 14px 43px;
  border-radius: 14px;
  border: 1px solid rgba(6, 43, 74, .13);
  background: rgba(255, 255, 255, .82);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.tfield select:hover { border-color: rgba(30, 111, 168, .38); background: #fff; }
.tfield select:focus-visible {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30, 111, 168, .14);
}
.tfield__ctl:hover .tfield__ico  { color: var(--primary); transform: scale(1.08); }
.tfield__ctl:hover .tfield__chev { color: var(--primary); transform: translateY(1px); }

/* ══ reference-style finder — "Get The Right Tyres" ═════════════════════════ */
.tcard__heading {
  margin: 6px 0 16px;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--primary);
}
/* ── single-box card: flush navy header + padded body ─────────────────────── */
/* --viz-h is the height of the diagram box. Both tabs draw into the same box, so
   switching By Vehicle / By Size never resizes the card under the pointer. */
.tcard { padding: 0; overflow: hidden; --viz-h: 168px; }
.tcard::before { display: none; }          /* gold hairline sat above the header */
.tcard__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: var(--primary);
  color: var(--accent);
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.tcard__header span { flex: 1; text-align: center; }
.tcard__back { width: 24px; height: 24px; flex: none; color: var(--accent); }
.tcard__body { padding: 20px 20px 22px; }

/* diagram box — sits inside the same card, subtle frame not a separate panel */
.tcard__viz--car,
.tcard__viz--wheel {
  margin-bottom: 18px;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(150deg, #FBFDFE, #EAF1F7);
}
.tcard__viz--car img {
  display: block;
  width: 100%;
  height: var(--viz-h);
  object-fit: cover;
  border-radius: 10px;
  transform: scaleX(-1);          /* face the car left-to-right */
}
/* the scooter render is a tall product shot on a plain backdrop — cropping it to a
   letterbox (as the car photo wants) cuts the wheels off, so show it whole instead */
.tcard__viz--bike img {
  object-fit: contain;
  padding: 4px;
  background: transparent;
  transform: none;
}
/* height, not auto: the diagram's own ratio made this box taller than the vehicle
   photo's, which is what jumped the card's height on tab switch. It scales to fit. */
.tcard__viz--wheel svg { display: block; width: 100%; height: var(--viz-h); }

.tcard__heading { margin: 4px 0 16px; }

/* nothing picked yet — the finder says so instead of opening the whole catalogue */
.tfield.is-invalid select { border-color: #D0021B; box-shadow: 0 0 0 3px rgba(208, 2, 27, .12); }
.tfinder-error {
  margin: 10px 0 0;
  color: #B00016;
  font-size: .88rem;
  font-weight: 600;
}

/* ── compact hero finder — smaller table in the hero ──────────────────────── */
.thero__side { max-width: 430px; }
.thero .tcard__header { padding: 12px 16px; font-size: 1.12rem; }
.thero .tcard__back { width: 20px; height: 20px; }
.thero .tcard__body { padding: 15px 15px 17px; }
.thero .tcard__viz--car,
.thero .tcard__viz--wheel { margin-bottom: 13px; padding: 5px; }
/* 168 is the compromise the two diagrams have to share: the wheel is round, so a
   short box letterboxes it to nothing, while the vehicle render is wide and crops
   happily. Both pages use it, so the two finders are the same size as each other. */
.thero .tcard { --viz-h: 168px; }

/* ── bike page: a smaller finder, so the card leaves the bike its half of the frame ── */
.thero--bike .tcard { --viz-h: 132px; }
.thero--bike .tcard__header { padding: 10px 14px; font-size: 1rem; }
.thero--bike .tcard__back { width: 17px; height: 17px; }
.thero--bike .tcard__body { padding: 12px 12px 14px; }
.thero--bike .tcard__viz--car,
.thero--bike .tcard__viz--wheel { margin-bottom: 10px; }
.thero--bike .tcard__heading { margin: 0 0 10px; font-size: 1.1rem; }
.thero--bike .tcard__tabs { gap: 8px; margin-bottom: 11px; }
.thero--bike .tcard__tabs .tcard__tab { padding: 8px 6px; font-size: .84rem; }
.thero--bike .tcard__fields--stack { gap: 8px; }
.thero--bike .tcard__fields--stack .tfield select { padding: 10px 34px 10px 12px; font-size: .84rem; }
.thero--bike .tcard .btn-lux { padding: 11px 18px; font-size: .88rem; }

.thero--bike .thero__promo-kicker { font-size: 1.05rem; padding: 8px 20px; margin-bottom: 20px; }
.thero--bike .thero__promo-title { font-size: clamp(2.2rem, 3.6vw, 3.5rem); line-height: 1.06; margin-bottom: 18px; }
.thero--bike .thero__promo-sub { font-size: 1.14rem; line-height: 1.5; }

/* Only while the hero is a wide two-column frame — below 1025 the grid stacks
   (responsive.css) and the card takes the full width, so the headline must be
   free to wrap and the block must not be pinned right. */
@media (min-width: 1025px) {
  .thero--bike .thero__grid { grid-template-columns: minmax(0, 366px) 1fr; gap: 34px; }
  .thero--bike .thero__side { max-width: 366px; }
  /* vertically centred, block sits right; the headline is the widest line, so a
     left edge lines the kicker, headline and sub up flush against each other */
  .thero--bike .thero__promo {
    align-self: center;
    justify-self: end;
    text-align: left;
    max-width: none;
    padding: 0;
    margin-right: 8px;
  }
  /* the bigger headline wraps to two strong lines instead of one long line */
  .thero--bike .thero__promo { max-width: 560px; }
  .thero--bike .thero__promo-title { white-space: normal; }
  .thero--bike .thero__promo-sub { max-width: none; }
}
.thero .tcard__heading { margin: 2px 0 12px; font-size: 1.24rem; }
.thero .tcard__tabs { gap: 9px; margin-bottom: 14px; }
.thero .tcard__tabs .tcard__tab { padding: 10px 8px; font-size: .92rem; }
.thero .tcard__fields--stack { gap: 10px; }
.thero .tcard__fields--stack .tfield select { padding: 12px 40px 12px 14px; font-size: .9rem; }
.thero .tcard .btn-lux { padding: 14px 22px; font-size: .95rem; }
.thero .tcard__trust { margin-top: 4px; }

/* services list shown under the finder */
.thero__services {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.thero__services li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-2);
}
.thero__services svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--primary);
}

/* tabs → two boxy segments; active = navy fill + gold text */
.tcard__tabs {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0;
  margin-bottom: 20px;
  background: none;
  border: 0;
}
.tcard__ind { display: none; }
.tcard__tabs .tcard__tab {
  padding: 14px 10px;
  border: 2px solid var(--primary);
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-size: 1.02rem;
  font-weight: 800;
}
.tcard__tabs .tcard__tab:hover { color: var(--primary); background: #EFF4F9; }
.tcard__tabs .tcard__tab.is-active {
  background: var(--primary);
  color: var(--accent);
}

/* fields → single column, boxy navy-bordered selects, no floating labels/icons */
.tcard__fields--stack { grid-template-columns: 1fr; gap: 13px; }
.tcard__fields--stack .tfield__ico { display: none; }
.tcard__fields--stack .tfield select {
  padding: 15px 44px 15px 16px;
  border: 2px solid var(--primary);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  color: var(--primary);
}
.tcard__fields--stack .tfield select:hover  { background: #F6F9FC; border-color: var(--primary); }
.tcard__fields--stack .tfield__chev { right: 15px; color: var(--primary); }

/* --- the CTA ------------------------------------------------------------- */
.btn-lux {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 18px 26px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  /* 220% wide, so hover slides a lighter band across the face rather than
     cross-fading between two flat colours */
  background: linear-gradient(100deg, var(--primary-900) 0%, var(--primary) 32%, #2E86C4 52%, var(--primary) 72%, var(--primary-900) 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  box-shadow: 0 16px 32px -10px rgba(6, 43, 74, .45);
  transition:
    background-position .65s var(--ease),
    transform .3s var(--ease),
    box-shadow .3s var(--ease);
}
.btn-lux span,
.btn-lux svg { position: relative; z-index: 1; }
.btn-lux__arrow { width: 19px; height: 19px; transition: transform .3s var(--ease); }
.btn-lux:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -12px rgba(6, 43, 74, .52);
}
.btn-lux:hover .btn-lux__arrow { transform: translateX(5px); }
.btn-lux:active { transform: translateY(0); }
.btn-lux:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* one gold sheen crossing the face on hover */
.btn-lux::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 210, 94, .30), transparent);
  transform: skewX(-18deg);
}
.btn-lux:hover::after { animation: lux-sheen .9s var(--ease); }
@keyframes lux-sheen { to { left: 120%; } }

/* --- trust badges + rating ----------------------------------------------- */
.tcard__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(6, 43, 74, .09);
  list-style: none;
}
.tcard__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-2);
}
.tcard__trust svg { width: 15px; height: 15px; flex: none; color: var(--success); }

.thero__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-left: 4px;
}
.thero__stars { display: inline-flex; gap: 3px; }
.thero__stars svg { width: 17px; height: 17px; fill: var(--accent); }
.thero__rating p { margin: 0; font-size: .88rem; color: var(--text-2); }
.thero__rating b { font-weight: 800; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .thero__ring, .thero__ring--rev, .thero__dust i, .thero__shot-ring { animation: none !important; }
  .thero__dust i { opacity: .35; }
  .thero__shot:hover .thero__shot-frame img { transform: none; }
  .tcard__ind { transition: none; }
  .btn-lux:hover::after { animation: none; }
}

/* the wheel diagram is round, so it needs more headroom than the flat car scene */
.tcard__viz--wheel { padding: 6px 14px 10px; }
.tcard__viz-tag b { font-weight: 800; color: var(--primary); }

/* ── Glassy icon tiles — car tyre page only ───────────────────────────────────
   Frosted tile: a white gloss layer over a colour tint, lifted off the card by
   an outer shadow and rounded by an inner one. --glass-* is the per-tile tint;
   --glass-sh is unwrapped into rgba(), so it must stay a bare "r,g,b" triplet. */
.icon-box--glass,
.choose-card__ico {
  --glass-a: var(--primary-050);
  --glass-b: #DCE9F6;
  --glass-sh: 15, 76, 129;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .34)),
    linear-gradient(150deg, var(--glass-a), var(--glass-b));
  border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  box-shadow:
    0 8px 18px -8px rgba(var(--glass-sh), .42),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -8px 14px -10px rgba(var(--glass-sh), .45);
}
/* the glossy sweep across the top-left corner */
.icon-box--glass::after,
.choose-card__ico::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .18) 40%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.icon-box--glass svg,
.choose-card__ico svg { position: relative; z-index: 1; }

.icon-box--glass.icon-box--amber   { --glass-a: var(--accent-050);  --glass-b: #FFE7B0; --glass-sh: 160, 106, 0; }
.icon-box--glass.icon-box--success { --glass-a: var(--success-050); --glass-b: #C9F2DC; --glass-sh: 22, 163, 74; }
.icon-box--glass.icon-box--dark    { --glass-a: #F4F5F7;            --glass-b: #DCE0E6; --glass-sh: 40, 44, 52; }

/* Tap feedback for "Included Every Time" — :hover never fires on a touchscreen,
   so the tile pops and the card lifts on :active instead. */
.feature:active { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.feature:active::before { transform: scaleX(1); }
.feature:active .icon-box--glass {
  transform: scale(1.18) rotate(-4deg);
  box-shadow:
    0 14px 26px -8px rgba(var(--glass-sh), .6),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -8px 14px -10px rgba(var(--glass-sh), .45);
}
@media (prefers-reduced-motion: reduce) {
  .feature:active,
  .feature:active .icon-box--glass { transform: none; }
}

/* ── "Included Every Time" — car showcase ─────────────────────────────────────
   A 3x2 grid: the car spans the middle column, four glass cards sit in the
   corners, and a viewBox'd SVG draws connectors between them. The SVG scales
   with the stage rather than tracking the cards, so the curves are decorative —
   they read as connected without claiming pixel-exact anchoring.
   ------------------------------------------------------------------------- */
.incl { position: relative; overflow: hidden; }
.incl__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* blue glow behind the car */
    radial-gradient(46% 42% at 50% 56%, rgba(15, 76, 129, .10), rgba(15, 76, 129, 0) 72%),
    /* faint tread arcs, kept to the corners so the middle stays clean */
    repeating-linear-gradient(72deg, rgba(15, 76, 129, .05) 0 2px, rgba(15, 76, 129, 0) 2px 15px),
    linear-gradient(180deg, #FCFDFE 0%, #F4F8FC 55%, var(--white) 100%);
}
/* keep the tread texture off the centre so the car reads cleanly */
.incl__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 54% at 50% 52%, #FBFCFE 42%, rgba(251, 252, 254, 0) 78%);
}
.incl > .container { position: relative; z-index: 1; }
.incl__h2 { font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.6rem); letter-spacing: -.035em; }
.incl .lead b { color: var(--primary); font-weight: 700; }

.incl__stage {
  position: relative;
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 1.15fr) 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "tl car tr"
    "bl car br";
  gap: 26px 34px;
  align-items: center;
}

/* ---- centre car ---- */
.incl__car {
  grid-area: car;
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 0;
}
/* concentric glowing rings under the car */
/* sits at the car's wheels, not below it — the placeholder PNG has dead space
   under the car, so this is tuned to the visible tyre line, not the image box */
.incl__rings {
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 58%;
  aspect-ratio: 1 / .3;
  transform: translateX(-50%);
  opacity: 0;
}
.incl__rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(15, 76, 129, .5);
  box-shadow: 0 0 18px rgba(56, 132, 205, .5), inset 0 0 22px rgba(56, 132, 205, .35);
}
.incl__rings i:nth-child(2) { inset: -13% -9%;  border-color: rgba(15, 76, 129, .3);  box-shadow: 0 0 16px rgba(56, 132, 205, .35); }
.incl__rings i:nth-child(3) { inset: -27% -18%; border-color: rgba(15, 76, 129, .16); box-shadow: 0 0 14px rgba(56, 132, 205, .22); }
.incl__car-img {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  /* PLACEHOLDER ONLY: car.png has a grey studio backdrop baked in, so its edges
     are feathered out to soften the seam. Blend modes can't key the grey out —
     the car is white and the tyres are black, so every mode eats one or the
     other. Drop this mask once a transparent cut-out replaces it. */
  -webkit-mask-image: radial-gradient(72% 62% at 50% 50%, #000 52%, transparent 86%);
          mask-image: radial-gradient(72% 62% at 50% 50%, #000 52%, transparent 86%);
}

/* ---- flat cards: photo bleeds in from the outer edge ---- */
.incl-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(15, 76, 129, .09);
  box-shadow: 0 16px 38px -24px rgba(15, 76, 129, .45);
  opacity: 0;
  transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.incl-card--tl { grid-area: tl; }
.incl-card--tr { grid-area: tr; }
.incl-card--bl { grid-area: bl; }
.incl-card--br { grid-area: br; }

.incl-card__photo {
  position: absolute;
  inset-block: 0;
  width: 46%;
  margin: 0;
  z-index: 0;
}
/* `contain`, not `cover`: these are product cut-outs, so cropping would slice
   the balancer and the nitrogen cart in half. */
.incl-card__photo img { width: 100%; height: 100%; object-fit: contain; }
/* photo sits on the outer edge and fades toward the text */
.incl-card--tl .incl-card__photo, .incl-card--bl .incl-card__photo { left: 0; }
.incl-card--tr .incl-card__photo, .incl-card--br .incl-card__photo { right: 0; }
.incl-card--tl .incl-card__photo img, .incl-card--bl .incl-card__photo img {
  object-position: left center;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 98%);
          mask-image: linear-gradient(90deg, #000 62%, transparent 98%);
}
.incl-card--tr .incl-card__photo img, .incl-card--br .incl-card__photo img {
  object-position: right center;
  -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent 98%);
          mask-image: linear-gradient(270deg, #000 62%, transparent 98%);
}

.incl-card__body { position: relative; z-index: 1; padding: 16px 20px 18px; }
/* keep the copy clear of the photo */
.incl-card--tl .incl-card__body, .incl-card--bl .incl-card__body { padding-left: 43%; }
.incl-card--tr .incl-card__body, .incl-card--br .incl-card__body { padding-right: 43%; }

.incl-card h3 { margin-bottom: 6px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.incl-card p  { font-size: .84rem; line-height: 1.6; color: var(--text-2); }

/* circular outlined icon badge */
.incl-card__ico {
  width: 46px; height: 46px;
  margin-bottom: 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(15, 76, 129, .18);
  color: var(--primary);
  box-shadow: 0 6px 16px -8px rgba(15, 76, 129, .5);
  transition: transform var(--base) var(--ease-out), border-color var(--base) var(--ease);
}
.incl-card__ico svg { width: 23px; height: 23px; }
.incl-card__ico--success { color: var(--success); border-color: rgba(22, 163, 74, .22); }
/* Scoped under .is-in deliberately: the reveal rule below sets `transform:none`
   at (0,3,0), so a bare `.incl-card:hover` at (0,2,0) would lose the cascade and
   the lift would never happen. */
.incl__stage.is-in .incl-card:hover,
.incl__stage.is-in .incl-card:active {
  transform: translateY(-6px);
  transition-delay: 0s;
  border-color: rgba(15, 76, 129, .3);
  box-shadow: 0 26px 54px -22px rgba(15, 76, 129, .55), 0 0 0 4px rgba(15, 76, 129, .07);
}
.incl-card:hover .incl-card__ico,
.incl-card:active .incl-card__ico { transform: scale(1.1); border-color: currentColor; }

/* ---- connectors ---- */
.incl__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.incl__link {
  stroke: rgba(15, 76, 129, .6);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 6;
  opacity: 0;
}
/* connector end-dots, at the same coords the paths start from */
.incl__dot {
  position: absolute;
  z-index: 2;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--primary);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.incl__dot--tl { left: 30%; top: 30.7%; }
.incl__dot--tr { left: 70%; top: 30.7%; }
.incl__dot--bl { left: 30%; top: 69.3%; }
.incl__dot--br { left: 70%; top: 69.3%; }
.incl__stage.is-in .incl__dot { opacity: 1; transition-delay: 1.1s; }
/* brighten a card's own connector on hover */
.incl-card--tl:hover ~ .incl__links .incl__link--tl,
.incl-card--tr:hover ~ .incl__links .incl__link--tr,
.incl-card--bl:hover ~ .incl__links .incl__link--bl,
.incl-card--br:hover ~ .incl__links .incl__link--br {
  stroke: var(--primary);
  stroke-width: 2.6;
}

/* ---- trust strip ---- */

/* ---- load sequence: car, platform, cards, connectors, CTA ---- */
@keyframes incl-car   { to { opacity: 1; } }
@keyframes incl-plat  { to { opacity: 1; } }
@keyframes incl-line  { to { opacity: 1; stroke-dashoffset: 0; } }

/* fades in, then stays put — no float */
.incl__stage.is-in .incl__car-img { animation: incl-car .5s var(--ease) .05s forwards; }
.incl__stage.is-in .incl__rings { animation: incl-plat .6s var(--ease) .3s forwards; }

/* Cards reveal via transition, not animation: a forwards-filled animation would
   own `transform` permanently and block the hover lift. */
.incl-card--tl { transform: translate(-26px, -14px); }
.incl-card--tr { transform: translate(26px, -14px); }
.incl-card--bl { transform: translate(-26px, 14px); }
.incl-card--br { transform: translate(26px, 14px); }
.incl__stage.is-in .incl-card { opacity: 1; transform: none; }
.incl__stage.is-in .incl-card--tl { transition-delay: .45s; }
.incl__stage.is-in .incl-card--tr { transition-delay: .55s; }
.incl__stage.is-in .incl-card--bl { transition-delay: .65s; }
.incl__stage.is-in .incl-card--br { transition-delay: .75s; }

.incl__link { stroke-dasharray: 5 7; stroke-dashoffset: 240; }
.incl__stage.is-in .incl__link { animation: incl-line .9s var(--ease) forwards; }
.incl__stage.is-in .incl__link--tl { animation-delay: .9s; }
.incl__stage.is-in .incl__link--tr { animation-delay: 1s; }
.incl__stage.is-in .incl__link--bl { animation-delay: 1.1s; }
.incl__stage.is-in .incl__link--br { animation-delay: 1.2s; }

/* tablet: cards get narrower, car shrinks, curves still make sense */
@media (max-width: 1024px) {
  .incl__stage { grid-template-columns: 1fr minmax(200px, .9fr) 1fr; gap: 18px 20px; }
  .incl-card { padding: 18px; }
  .incl-card p { font-size: .82rem; }
}
/* mobile: car on top, cards stacked, connectors gone */
@media (max-width: 760px) {
  .incl__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "car" "tl" "tr" "bl" "br";
    gap: 16px;
    margin-top: 30px;
  }
  .incl__links, .incl__dot { display: none; }
  .incl-card--tl, .incl-card--tr, .incl-card--bl, .incl-card--br { transform: translateY(16px); }
  /* photo goes full-bleed left on every card once they stack */
  .incl-card--tr .incl-card__photo, .incl-card--br .incl-card__photo { right: auto; left: 0; }
  .incl-card--tr .incl-card__photo img, .incl-card--br .incl-card__photo img {
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
            mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
  }
  .incl-card--tr .incl-card__body, .incl-card--br .incl-card__body { padding-right: 22px; padding-left: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .incl__car-img, .incl__rings, .incl-card, .incl__link, .incl__dot { opacity: 1; transform: none; stroke-dashoffset: 0; animation: none !important; }
  .incl__rings { transform: translateX(-50%); }
}

/* ── "Choosing Right" — redesigned buyer's guide ──────────────────────────── */
.choose-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 40px;
  align-items: start;
}
.choose-figure {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.choose-figure img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.choose-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choose-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--sh-xs);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.choose-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.choose-card__ico {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  color: var(--primary);
  transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease);
}
.choose-card__ico svg { width: 22px; height: 22px; }
.choose-card:hover .choose-card__ico {
  transform: scale(1.06) rotate(-4deg);
  box-shadow:
    0 10px 22px -8px rgba(var(--glass-sh), .55),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -8px 14px -10px rgba(var(--glass-sh), .45);
}
.choose-card h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.choose-card p { margin-top: 5px; font-size: .88rem; line-height: 1.55; color: var(--text-2); }

.choose-cta {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-top: 40px;
}
.choose-cta__note { font-size: .86rem; color: var(--text-3); }

@media (max-width: 900px) {
  .choose-layout { grid-template-columns: 1fr; gap: 26px; }
  .choose-figure { position: static; }
  .choose-figure img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .choose-points { grid-template-columns: 1fr; }
  .choose-card { grid-template-columns: 1fr; gap: 10px; }
}

/* --------------------------------------------------------------------------
   BIKE TYRE GUIDE — "Choosing the right tyre" (bike-tyres.html)
   Stacked and centred rather than split left/right: head, full-width rider
   photo, a 3x2 card grid, the proof row, then one CTA. Own namespace so it
   cannot disturb .choose-* , which car-tyres.html still uses.
   -------------------------------------------------------------------------- */
.btguide__head { max-width: 760px; }
.btguide__head h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); letter-spacing: -.03em; }
.btguide__head .lead { max-width: 560px; margin-inline: auto; }

/* --- photo panel + card grid, side by side ------------------------------- */
.btguide__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.32fr);
  gap: clamp(18px, 1.8vw, 26px);
  align-items: stretch;
  margin-top: clamp(28px, 3vw, 44px);
}

.btguide__figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  min-height: 420px;
  border-radius: 24px;
  box-shadow: var(--sh-lg);
}
.btguide__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* the source is an overcast road shot — lift it so the panel reads bright */
  filter: brightness(1.12) contrast(1.04) saturate(1.06);
  transition: transform .6s var(--ease-out);
}
.btguide__figure:hover img { transform: scale(1.05); }
/* the caption sits over the photo, so it carries its own scrim rather than
   trusting whatever the crop happens to put behind the words */
.btguide__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* dark enough under the caption to hold white type, clear above it so the
     photo still reads bright — the earlier version lost the words to the road */
  background: linear-gradient(180deg, transparent 34%, rgba(6, 22, 40, .5) 58%, rgba(6, 22, 40, .93) 100%);
}
.btguide__figcap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: clamp(24px, 2.4vw, 36px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(4, 16, 30, .85), 0 1px 3px rgba(4, 16, 30, .6);
}
.btguide__figcap h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.05rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #fff;
}
/* amber, not blue — the highlight sits over a bright, mid-toned photo where the
   blue disappeared into the road behind it */
.btguide__figcap h3 b { color: var(--accent); font-weight: 800; }
.btguide__figrule {
  display: block;
  width: 42px;
  height: 2px;
  margin: 18px 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
}
.btguide__figcap p { font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }

.btguide__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.2vw, 18px);
}

/* --- a card: icon left, copy right, arrow in the corner ------------------ */
.btguide-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 22px 34px;
  box-shadow: var(--sh-sm);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
.btguide-card:hover,
.btguide-card:active {   /* :hover never fires on a touchscreen */
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}
.btguide-card__ico {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-050);
  color: var(--primary);
  transition: transform var(--base) var(--ease), background var(--base) var(--ease),
              color var(--base) var(--ease);
}
.btguide-card__ico svg { width: 24px; height: 24px; }
.btguide-card__ico i { font-size: 19px; line-height: 1; }
.btguide-card:hover .btguide-card__ico,
.btguide-card:active .btguide-card__ico {
  background: linear-gradient(135deg, var(--primary), var(--primary-400));
  color: #fff;
  transform: scale(1.08);
}
.btguide-card h3 { font-size: 1.04rem; font-weight: 800; letter-spacing: -.01em; }
.btguide-card p { margin-top: 6px; font-size: .89rem; line-height: 1.55; color: var(--text-2); }
.btguide-card__arrow {
  position: absolute;
  right: 20px;
  bottom: 16px;
  width: 17px;
  height: 17px;
  color: var(--primary);
  opacity: .55;
  transition: transform var(--base) var(--ease), opacity var(--base) var(--ease);
}
.btguide-card:hover .btguide-card__arrow { opacity: 1; transform: translateX(4px); }

/* --- one stats bar, not four boxes -------------------------------------- */
.btguide__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(22px, 2vw, 30px);
  padding: clamp(22px, 2vw, 30px) clamp(14px, 1.4vw, 22px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--sh-sm);
}
.btguide-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 2px 12px;
}
.btguide-stat + .btguide-stat { border-left: 1px solid var(--border); }
.btguide-stat__ico {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--primary-050);
  color: var(--primary);
}
.btguide-stat__text b {
  display: block;
  font-size: clamp(1.4rem, 1.05rem + .9vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--primary);
}
.btguide-stat__label {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
}

/* --- CTA panel on tread marks ------------------------------------------- */
.btguide__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(18px, 1.6vw, 24px);
  padding: clamp(32px, 3vw, 46px) clamp(20px, 2vw, 32px);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--sh-sm);
}
/* tyre tread running off both edges — drawn, so there is no asset to ship */
.btguide__cta::before,
.btguide__cta::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 210px;
  height: 300px;
  transform: translateY(-50%) rotate(-13deg);
  opacity: .55;
  /* tread ribs: bars broken by narrow lugs — crossing two grids read as a
     checkerboard, so the horizontal cuts are kept sparse and thin */
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, .16) 0 26px, transparent 26px 32px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, .16) 0 16px, transparent 16px 30px);
  -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 0%, transparent 76%);
          mask-image: radial-gradient(58% 58% at 50% 50%, #000 0%, transparent 76%);
  pointer-events: none;
}
.btguide__cta::before { left: -46px; }
.btguide__cta::after  { right: -46px; transform: translateY(-50%) rotate(13deg); }

.btguide__cta h3 {
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.btguide__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.btguide__cta-actions .btn svg { width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .btguide__layout { grid-template-columns: 1fr; }
  .btguide__figure { min-height: 340px; }
  .btguide__stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  /* with two per row the third cell starts a new row — its left rule would float */
  .btguide-stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 620px) {
  .btguide__grid { grid-template-columns: 1fr; }
  .btguide__figure { min-height: 280px; border-radius: var(--r-lg); }
  .btguide__stats { grid-template-columns: 1fr; }
  .btguide-stat { justify-content: flex-start; border-left: 0 !important; }
  .btguide-stat + .btguide-stat { border-top: 1px solid var(--border); padding-top: 16px; }
  .btguide__cta-actions .btn { width: 100%; }
}

/* ==========================================================================
   BATTERY PAGE (battery.html)
   Eight sections, each a different shape: hero, horizontal timeline, technical
   spec sheet, emergency band, logo grid, icon field, accordion, quote form.
   Own `bat*` namespace so none of it leaks into the shared components.
   ========================================================================== */
.bathero,
.batflow,
.battech,
.batsos,
.batlogos,
.batquote { --bat: #0F67B8; }

/* --- 1 · hero ------------------------------------------------------------- */
.bathero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 62vh, 640px);
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--primary-900);
}
.bathero__bg { position: absolute; inset: 0; z-index: -2; }
.bathero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.14) contrast(1.03);
}
.bathero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* only the left third carries real weight — enough for white type, while the
     photograph itself stays legible instead of sitting under a flat dark sheet */
  background:
    linear-gradient(90deg, rgba(5, 20, 36, .84) 0%, rgba(5, 20, 36, .5) 46%, rgba(5, 20, 36, .06) 100%),
    linear-gradient(180deg, rgba(5, 20, 36, .4) 0%, transparent 34%);
}
/* .bathero__inner is also .container — capping it here would override the
   container's own max-width and its auto margins would then centre the narrow
   block. Cap the children instead so the copy starts at the container's edge. */
.bathero__inner { color: #fff; }
.bathero__inner > * { max-width: 760px; }

.crumbs--ondark { color: rgba(255, 255, 255, .6); }
.crumbs--ondark a { color: rgba(255, 255, 255, .78); }
.crumbs--ondark a:hover { color: #fff; }
/* must match the base rule's `.crumbs span[aria-current]` shape — a bare
   attribute selector loses to it and the label stays dark on the dark hero */
.crumbs--ondark span[aria-current] { color: #fff; font-weight: 600; }
.crumbs--ondark svg { opacity: .75; }

.bathero__title {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-shadow: 0 2px 30px rgba(3, 12, 24, .5);
}
.bathero__sub {
  margin-top: 18px;
  max-width: 620px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(.98rem, .9rem + .3vw, 1.14rem);
  font-weight: 500;
}
.bathero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* White on the dark hero: the neon green clashed with the blue primary beside it.
   White pairs cleanly and keeps the WhatsApp identity in the green icon + label. */
.bathero__actions .btn--whatsapp {
  background: #fff;
  color: var(--whatsapp-cta-dark);
  box-shadow: 0 12px 30px rgba(2, 12, 24, .4);
}
.bathero__actions .btn--whatsapp svg { color: var(--whatsapp); }
.bathero__actions .btn--whatsapp:hover { background: #EAF7EF; color: var(--whatsapp-cta-dark); }

.bathero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.bathero__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 600;
}
.bathero__trust i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 10px;
}

/* --- 2 · health check: horizontal timeline -------------------------------- */
.batflow__line {
  --bat-gap: 22px;
  container-type: inline-size;   /* lets the connector measure the rail in cqw */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bat-gap);
  margin-top: 10px;
  list-style: none;
}
/* Each dot carries its own connector to the next one. A single rail across the
   whole list had to be pinned at a fixed y, which drifted the moment the step
   artwork changed height — this rides the dot instead, so it cannot drift. */
.batstep:not(:last-child) .batstep__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 6px;
  height: 3px;
  /* centre-to-centre = one column + one gap; less the dot itself */
  width: calc((100cqw - 3 * var(--bat-gap)) / 4 + var(--bat-gap) - 21px);
  border-radius: 2px;
  background: linear-gradient(90deg, #DCE9F6 0%, var(--bat) 50%, #DCE9F6 100%);
  background-size: 220% 100%;
  animation: bat-rail 5.5s linear infinite;
}
@keyframes bat-rail { to { background-position: -220% 0; } }

.batstep { position: relative; text-align: center; }
.batstep__art {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-md);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
/* The four illustrations are near-square and one is portrait (280x322), so a 4:3
   box with `cover` cropped every one of them. `contain` in a square plate shows
   each whole — their own background is white, so the plate is seamless. */
.batstep__art img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 12px;
}
.batstep:hover .batstep__art { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.batstep__dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 15px;
  height: 15px;
  margin: 26px auto 18px;
  border-radius: 50%;
  background: var(--bat);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(15, 103, 184, .28);
}
.batstep h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.batstep p { margin-top: 6px; font-size: .88rem; line-height: 1.55; color: var(--text-2); }

/* --- 3 · technical dial -------------------------------------------------- */
/* The nine measurements ring a photo of the battery. Spokes are drawn from each
   node toward the hub; below 1024 the ring breaks into a plain list, because a
   spoke that points at nothing is worse than no spoke at all. */
.battech__head { position: relative; }
/* the shared .mark paints its amber highlight with a ::after bar, so the colour
   has to be dropped there — the reference wants the word plain blue */
.battech__head h2 .mark { color: var(--bat); }
.battech__head h2 .mark::after { display: none; }
.eyebrow--flank::after {
  content: "";
  width: 22px;
  height: 2px;
  margin-left: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.battech__underline {
  display: block;
  width: 54px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 2px;
  background: var(--bat);
}

.battech__dial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  margin-top: clamp(20px, 2.4vw, 34px);
}
.battech__col { display: grid; gap: clamp(22px, 2.6vw, 40px); }

.battech__node {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.battech__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  color: var(--bat);
  font-size: 22px;
  box-shadow: 0 10px 26px rgba(15, 103, 184, .14);
  transition: transform var(--base) var(--ease), background var(--base) var(--ease),
              color var(--base) var(--ease);
}
.battech__node:hover .battech__ico {
  transform: scale(1.08);
  background: linear-gradient(135deg, var(--bat), var(--primary-400));
  color: #fff;
}
.battech__text h3 { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.battech__text p { margin-top: 5px; font-size: .84rem; line-height: 1.5; color: var(--text-2); }

/* left column: icon sits right of the text and the spoke runs on toward the hub */
.battech__col--left .battech__node { grid-template-columns: 1fr auto; text-align: right; }
.battech__col--left .battech__ico { order: 2; }
.battech__col--left .battech__text { order: 1; }

/* --- the hub ------------------------------------------------------------- */
.battech__hub {
  display: grid;
  justify-items: center;
  gap: 22px;   /* keeps the top and bottom captions clear of the ring */
}
.battech__node--top,
.battech__node--bottom {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 8px;
}
.battech__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: clamp(18px, 2.4vw, 34px);
}
.battech__art img { position: relative; z-index: 1; width: 100%; max-width: 430px; height: auto; }
/* dashed ring behind the battery */
/* sized to the battery, not the column — at 94% it reached up into the Voltage
   Test caption and out past the side nodes */
.battech__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(84%, 366px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(15, 103, 184, .22);
}
.battech__ring::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(15, 103, 184, .12);
}

/* --- spokes -------------------------------------------------------------- */
/* Each spoke is a fixed-length solid connector ending in a dot toward the hub.
   Fixed length (not "reach the ring") is deliberate: the nodes sit at fixed x
   and the ring is a circle, so a ring-anchored dot could only land true on one
   row and floated on the rest. Equal stubs read as a clean, intentional set. */
@media (min-width: 1025px) {
  .battech__col .battech__ico::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(22px, 3vw, 46px);
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: rgba(15, 103, 184, .38);
  }
  .battech__col .battech__ico::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--bat);
    box-shadow: 0 0 0 3px rgba(15, 103, 184, .14);
  }
  .battech__col--left .battech__ico::after { left: 100%; }
  .battech__col--left .battech__ico::before { left: calc(100% + clamp(22px, 3vw, 46px) - 3.5px); }
  .battech__col--right .battech__ico::after { right: 100%; }
  .battech__col--right .battech__ico::before { right: calc(100% + clamp(22px, 3vw, 46px) - 3.5px); }
}

/* --- the reassurance bar under the dial ---------------------------------- */
.battech__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(30px, 3vw, 48px);
  padding: clamp(20px, 2vw, 28px) clamp(12px, 1.4vw, 20px);
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--sh-sm);
}
.battech__barItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 16px;
}
.battech__barItem + .battech__barItem { border-left: 1px solid var(--border); }
.battech__barIco {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--primary-050);
  color: var(--bat);
  font-size: 18px;
}
.battech__barItem b { display: block; font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.battech__barItem span { font-size: .8rem; line-height: 1.45; color: var(--text-2); }

/* --- 4 · jump start band ------------------------------------------------- */
.batsos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 104px);
  text-align: center;
  background: #0A1626;
}
.batsos__bg { position: absolute; inset: 0; z-index: -2; }
.batsos__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.batsos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 50%, rgba(10, 22, 38, .6) 0%, rgba(6, 16, 28, .93) 100%);
}
.batsos__inner { color: #fff; }
.batsos__pulse {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #3A2600;
  font-size: 24px;
  animation: bat-pulse 2.4s var(--ease) infinite;
}
@keyframes bat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 163, 0, .5); }
  70%      { box-shadow: 0 0 0 22px rgba(244, 163, 0, 0); }
}
.batsos h2 {
  color: #fff;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.batsos p {
  max-width: 620px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.98rem, .9rem + .3vw, 1.1rem);
}
.batsos__points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.batsos__points li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .94);
  font-size: .86rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.batsos__points i { color: var(--accent); font-size: 12px; }
.batsos__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* light on a dark band: white carries further than any saturated colour here,
   and keeps the ghost "Share Location" button clearly secondary */
.batsos__call {
  font-weight: 800;
  background: #fff;
  color: var(--primary-900);
  box-shadow: 0 12px 32px rgba(2, 10, 20, .45);
}
.batsos__call:hover {
  background: #EAF2FA;
  color: var(--primary-900);
  box-shadow: 0 16px 40px rgba(2, 10, 20, .55);
}
.batsos__call i { color: var(--bat); }
.batsos__ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  box-shadow: none;
}
.batsos__ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }

/* --- 5 · brand logo grid ------------------------------------------------- */
/* Two stocked brands, sat together. Fixed-width columns held them ~190px apart
   because each logo centred inside its own wide column — the items are sized to
   their artwork now, so the gap is the gap. */
.batlogos__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(26px, 3.4vw, 52px);
}
.batlogos__item {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 8px;
}
/* reuses the brand-wall fallback: main.js drops the <img> on a 404 and the
   wordmark below shows through, so a missing logo never breaks the grid */
.batlogos__item .bcard__img {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 66px;
  object-fit: contain;
  transition: transform var(--base) var(--ease);
}
.batlogos__item:hover .bcard__img { transform: scale(1.06); }
.batlogos__item .bcard__word {
  grid-area: 1 / 1;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-3);
  text-align: center;
}
/* the brand wall's wordmark carries a colour bar under it; on this strip it just
   reads as a stray underline, so it is dropped here */
.batlogos__item .bcard__word::after { display: none; }
.batlogos__item .bcard__img + .bcard__word { display: none; }

/* --- 6 · why: split — feature grid left, photo right --------------------- */
/* --whyx is the brief's own accent, brighter than --bat. */
.whyx {
  --whyx: #0B5ED7;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* soft blue wash + two faint corner pools — kept light so the hairline grid
     and body text still read cleanly on top */
  background:
    radial-gradient(46% 40% at 90% 6%, rgba(11, 94, 215, .07), transparent 70%),
    radial-gradient(42% 40% at 4% 98%, rgba(11, 94, 215, .05), transparent 72%),
    linear-gradient(180deg, #FBFCFE 0%, #EEF4FC 100%);
}
/* faint oversized ring drifting behind the photo side, echoing the brand wall */
.whyx::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -6%;
  width: min(46vw, 620px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(11, 94, 215, .1);
  z-index: -1;
  pointer-events: none;
}
.whyx .section-head .lead { max-width: 560px; margin-inline: auto; }

.whyx__split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(30px, 3.4vw, 52px);
}
.whyx__list { order: 1; }      /* feature grid on the left */
.whyx__figure { order: 2; }    /* photo on the right */

.whyx__figure {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.whyx__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.whyx__figure:hover img { transform: scale(1.04); }

/* features are a 2x3 grid, split only by hairlines — icon over title, no boxes */
.whyx__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.whyx__row {
  padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 26px);
  transition: transform var(--base) var(--ease);
}
.whyx__row:not(:nth-child(2n+1)) { border-left: 1px solid var(--border); }
.whyx__row:nth-child(n+3) { border-top: 1px solid var(--border); }
.whyx__row:hover { transform: translateY(-6px); }

.whyx__ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 15px;
  background: var(--primary-050);
  color: var(--whyx);
  font-size: 21px;
  transition: background var(--base) var(--ease), color var(--base) var(--ease),
              transform var(--base) var(--ease);
}
.whyx__row:hover .whyx__ico {
  background: var(--whyx);
  color: #fff;
  transform: scale(1.06);
}
.whyx__row h3 {
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: color var(--base) var(--ease);
}
.whyx__row:hover h3 { color: var(--whyx); }
.whyx__rowtext p { margin-top: 5px; font-size: .88rem; line-height: 1.5; color: var(--text-2); }

/* --- 8 · quote ---------------------------------------------------------- */
.batquote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(30px, 3.4vw, 60px);
  align-items: start;
}
.batquote__aside h2 { margin-top: 10px; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.95rem); letter-spacing: -.02em; }
.batquote__art {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 26px 0 4px;
  stroke: var(--primary-900);
  opacity: .9;
}
.batquote__art .batquote__road { stroke: var(--border-strong); }
.batquote__art .batquote__batt { stroke: var(--bat); }
.batquote__art .batquote__spark { stroke: var(--accent-600); fill: var(--accent-050); }
.batquote__points { display: grid; gap: 12px; margin-top: 20px; }
.batquote__points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--text-2);
}
.batquote__points i {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--success-050);
  color: var(--success);
  font-size: 10px;
}
.batquote__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.batquote__tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--white);
  color: inherit;
}
a.batquote__tile:hover { background: var(--primary-050); }
.batquote__tile i { color: var(--bat); font-size: 15px; margin-top: 3px; }
.batquote__tile b { display: block; font-size: .95rem; }
.batquote__tile span { font-size: .8rem; line-height: 1.45; color: var(--text-2); }
.batquote__form { padding: clamp(24px, 2.4vw, 36px); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .batflow__line { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  /* connectors only make sense on one unbroken row */
  .batstep .batstep__dot::after { display: none; }
  .batlogos__grid { gap: clamp(20px, 4vw, 48px); }
  .batquote__grid { grid-template-columns: 1fr; }
  .batquote__art { max-width: 340px; }

  /* the ring cannot survive a narrow screen: hub first, then the nine nodes as a
     plain two-column list, all reading left-to-right like everything else */
  .battech__dial { grid-template-columns: 1fr; gap: 26px; }
  .battech__hub { order: -1; }
  .battech__col { grid-template-columns: 1fr 1fr; gap: 24px 30px; }
  .battech__col--left .battech__node { grid-template-columns: auto 1fr; text-align: left; }
  .battech__col--left .battech__ico { order: 0; }
  .battech__col--left .battech__text { order: 0; }
  .battech__art { padding: 8px; }
  .battech__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .battech__barItem:nth-child(odd) { border-left: 0; }
}
@media (max-width: 900px) {
  /* photo on top, feature grid beneath */
  .whyx__split { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .whyx__figure { order: -1; max-width: 560px; margin-inline: auto; }
  .whyx__figure img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  /* single column — only horizontal hairlines remain */
  .whyx__list { grid-template-columns: 1fr; }
  .whyx__row { border-left: 0 !important; border-top: 0; }
  .whyx__row:nth-child(n+2) { border-top: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .bathero { min-height: 0; }
  .bathero__actions .btn { width: 100%; }
  .batflow__line { grid-template-columns: 1fr; }
  .batlogos__grid { gap: 22px; }
  .batquote__tiles { grid-template-columns: 1fr; }
  .batsos__actions .btn { width: 100%; }
  .battech__col { grid-template-columns: 1fr; }
  .battech__bar { grid-template-columns: 1fr; }
  .battech__barItem { border-left: 0 !important; }
  .battech__barItem + .battech__barItem { border-top: 1px solid var(--border); padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .batstep__dot::after { animation: none; }
  .batsos__pulse { animation: none; }
}

/* ==========================================================================
   HOW IT WORKS — premium horizontal timeline (general-services.html)
   White, minimal, blue accent. 5 connected steps → animated connector → CTA.
   ========================================================================== */
.hiw { --hiw: #0B5ED7; }

.hiw__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
  margin-top: clamp(30px, 3.4vw, 52px);
  list-style: none;
}
/* the connector runs behind the icon row and sweeps left→right */
.hiw__timeline::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 32px;                 /* half the 64px icon */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hiw) 0%, var(--hiw) 50%, #DCE9F6 50%, #DCE9F6 100%);
  background-size: 200% 100%;
  animation: hiw-sweep 4.5s linear infinite;
}
@keyframes hiw-sweep { to { background-position: -200% 0; } }

.hiw__step {
  position: relative;
  text-align: center;
  padding: 6px 8px 0;
  border-radius: 20px;
  transition: transform var(--base) var(--ease);
}
.hiw__step:hover { transform: translateY(-6px); }

.hiw__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--hiw);
  font-size: 24px;
  box-shadow: 0 0 0 6px #fff, 0 8px 22px rgba(11, 94, 215, .16);
  transition: transform var(--base) var(--ease), background var(--base) var(--ease),
              color var(--base) var(--ease);
}
.hiw__step:hover .hiw__ico {
  transform: scale(1.1);
  background: linear-gradient(150deg, var(--hiw), #2F7CB8);
  color: #fff;
}
/* small numbered badge on the icon */
.hiw__num {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hiw);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px #fff;
}
.hiw__step h3 { font-size: 1.04rem; font-weight: 800; letter-spacing: -.01em; }
.hiw__step p { margin-top: 7px; font-size: .88rem; line-height: 1.55; color: var(--text-2); }

/* --- CTA under the timeline --------------------------------------------- */
.hiw__cta { margin-top: clamp(40px, 4vw, 64px); text-align: center; }
.hiw__cta h3 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; }
.hiw__cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

@media (max-width: 1024px) {
  /* 2 rows on tablet — the straight connector can't survive a wrap */
  .hiw__timeline { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; }
  .hiw__timeline::before { display: none; }
}
@media (max-width: 620px) {
  /* vertical timeline: icon left, text right, a line down the icons */
  .hiw__timeline { grid-template-columns: auto 1fr; gap: 0 18px; column-gap: 18px; }
  .hiw__step {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    text-align: left;
    padding: 0 0 30px;
  }
  .hiw__step:hover { transform: none; }
  .hiw__ico { margin: 0; }
  .hiw__step > h3 { grid-column: 2; align-self: center; }
  .hiw__step > p { grid-column: 2; margin-top: 4px; }
  /* connector line between stacked icons */
  .hiw__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 64px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--hiw), #DCE9F6);
  }
  .hiw__cta-actions .btn { width: 100%; }
}

/* ==========================================================================
   GENERAL SERVICES — full-bleed hero (general-services.html)
   ========================================================================== */
.svchero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 60vh, 600px);
  padding-block: clamp(52px, 6vw, 92px);
  background: var(--primary-900);
}
.svchero__bg { position: absolute; inset: 0; z-index: -2; }
.svchero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.06); }
.svchero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 20, 36, .86) 0%, rgba(6, 20, 36, .55) 46%, rgba(6, 20, 36, .12) 100%),
    linear-gradient(180deg, rgba(6, 20, 36, .4) 0%, transparent 34%);
}
.svchero__inner { color: #fff; }
.svchero__inner > * { max-width: 760px; }
.svchero__title {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-shadow: 0 2px 30px rgba(3, 12, 24, .5);
}
.svchero__sub {
  margin-top: 18px;
  max-width: 620px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(.98rem, .9rem + .3vw, 1.14rem);
  font-weight: 500;
}
.svchero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.svchero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.svchero__trust li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .92); font-size: .9rem; font-weight: 600; }
.svchero__trust i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff; font-size: 10px; }

@media (max-width: 620px) {
  .svchero { min-height: 0; }
  .svchero__actions .btn { width: 100%; }
}

/* --- Why Service: faded workshop photo behind the section ---------------- */
.svc-why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* the workshop photo, pushed right back so the cards and text stay readable */
.svc-why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url(https://images.unsplash.com/photo-1530046339160-ce3e530c7d2f?auto=format&fit=crop&w=2000&q=80) center / cover no-repeat;
}
/* heavy tinted scrim over the photo — a wash, not a dark overlay */
.svc-why::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(248, 250, 253, .93) 0%, rgba(244, 247, 251, .95) 100%),
    radial-gradient(60% 50% at 50% 0%, rgba(15, 76, 129, .06), transparent 70%);
}

/* ══════════════════════════ DETAILING — FULL-PAGE COVER HERO ══════════════════════════ */
.page-hero--cover {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: min(86vh, 780px); border-bottom: 0; padding-block: clamp(56px, 6vw, 96px);
  background: #06233B;
}
.page-hero--cover .page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero--cover .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--cover .page-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,20,35,.9) 0%, rgba(6,20,35,.7) 36%, rgba(6,20,35,.32) 58%, rgba(6,20,35,.05) 82%, transparent 100%),
    linear-gradient(180deg, rgba(6,20,35,.3) 0%, transparent 22%),
    linear-gradient(0deg, rgba(6,20,35,.3), transparent 44%);
}
.page-hero--cover .container { position: relative; z-index: 1; }
.page-hero--cover .page-hero__copy { max-width: 660px; }
.page-hero--cover .eyebrow { color: var(--accent); text-shadow: 0 1px 8px rgba(6,20,35,.6); }
.page-hero--cover h1 { color: #fff; text-shadow: 0 2px 16px rgba(6,20,35,.65), 0 1px 3px rgba(6,20,35,.6); }
/* whole heading in white, no underline */
.page-hero--cover h1 .mark { color: #fff; }
.page-hero--cover h1 .mark::after { display: none; }
.page-hero--cover .lead { color: #fff; max-width: 560px; text-shadow: 0 1px 10px rgba(6,20,35,.6), 0 1px 2px rgba(6,20,35,.55); }
.page-hero--cover .crumbs,
.page-hero--cover .crumbs a,
.page-hero--cover .crumbs [aria-current] { color: #fff; text-shadow: 0 1px 6px rgba(6,20,35,.5); }
.page-hero--cover .crumbs a:hover { color: #fff; }
/* hero CTA in a bright amber so it stands out on the photo */
.page-hero--cover .btn--primary { background: var(--accent); color: var(--primary-900); box-shadow: 0 12px 28px -8px rgba(244,163,0,.5); }
.page-hero--cover .btn--primary:hover { background: var(--accent-600); color: var(--primary-900); box-shadow: 0 16px 34px -8px rgba(244,163,0,.55); }
.page-hero--cover .trust-chip {
  color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26);
}
.page-hero--cover .trust-chip i { color: var(--accent); }

/* ══════════════════════════ COATING PACKAGES — GRADIENT OUTER BORDER ══════════════════════════ */
/* a clean 2px gradient ring that follows the card's rounded corners */
.pkg-card { position: relative; border: 0; border-radius: var(--r-lg); }
.pkg-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(135deg, var(--pk1), var(--pk2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pkg-card--essential { --pk1: #2F7CB8; --pk2: #7FBCE6; box-shadow: 0 16px 38px -22px rgba(47, 124, 184, .5); }
.pkg-card--signature { --pk1: var(--primary); --pk2: #1E88E5; box-shadow: 0 22px 48px -20px rgba(15, 76, 129, .5); }
.pkg-card--elite     { --pk1: var(--accent); --pk2: #F6C453; box-shadow: 0 16px 38px -22px rgba(244, 163, 0, .48); }

/* ═══════════════════════ HOW A SERVICE VISIT WORKS · ROAD JOURNEY ═══════════════════════ */
.journey-section {
  padding-block: clamp(40px, 4.5vw, 68px);
  background:
    radial-gradient(1100px 440px at 50% -8%, rgba(30, 136, 229, .07), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #F1F5FA 100%);
}
.journey { position: relative; margin-top: clamp(6px, 1.6vw, 22px); }

/* the road stage keeps a fixed aspect ratio so the SVG, checkpoints and cards
   all scale together and stay aligned at any width */
.journey__stage { position: relative; width: 100%; aspect-ratio: 1200 / 520; }
.journey__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the whole road wipes in left→right as the section enters view */
.journey__road-group { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease); }
.journey.is-in .journey__road-group { clip-path: inset(0 0 0 0); }

/* a light-grey asphalt road, not black */
.journey__edge    { fill: none; stroke: #AEB8C2; stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; }
.journey__asphalt { fill: none; stroke: #8A96A2; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
/* small white lane markings down the middle of the road */
.journey__lane { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 20; opacity: .92; }
.journey__check { transform-box: fill-box; transform-origin: center; animation: jPulse 2.6s var(--ease) infinite; }
.journey__check:nth-child(2) { animation-delay: .35s; }
.journey__check:nth-child(3) { animation-delay: .7s; }
.journey__check:nth-child(4) { animation-delay: 1.05s; }
.journey__check:nth-child(5) { animation-delay: 1.4s; }
.journey__check:nth-child(6) { animation-delay: 1.75s; }
.journey__check:nth-child(7) { animation-delay: 2.1s; }
@keyframes jPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; transform: scale(1.08); } }

.journey__car { filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .3)); }

/* step cards overlaid over the stage */
.journey__steps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.journey__step {
  position: absolute; left: var(--x); width: 224px;
  transform: translateX(-50%) translateY(18px); opacity: 0;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--i) * 130ms);
}
.journey.is-in .journey__step { opacity: 1; transform: translateX(-50%); }
/* anchor each row to the road edge (not the stage top) so rows stay symmetric
   and unequal card heights no longer throw the number circles out of line.
   The gap keeps the number circles just clear of the thick road, not merged into it. */
.journey__step--top { top: auto; bottom: 60%; }
.journey__step--bot { top: 60%; bottom: auto; }

.jcard {
  position: relative; text-align: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 22px;
  box-shadow: 0 20px 40px -20px rgba(15, 76, 129, .38), 0 2px 8px rgba(16, 24, 40, .06);
  padding: 22px 18px 18px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.jcard:hover { transform: translateY(-7px); box-shadow: 0 30px 60px -22px rgba(15, 76, 129, .55); }
.jcard__num {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), #1E88E5); color: #fff;
  font-weight: 800; font-size: 1.02rem; border: 3px solid #fff;
  box-shadow: 0 8px 18px -6px rgba(15, 76, 129, .6);
}
.journey__step--top .jcard__num { bottom: -20px; top: auto; }   /* number faces the road below */
.journey__step--bot .jcard__num { top: -20px; }                 /* number faces the road above */
.jcard__ico {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  background: rgba(30, 136, 229, .1); color: var(--primary); font-size: 1.28rem; margin-bottom: 10px;
}
.journey__step--top .jcard__ico { margin-top: 4px; }
.journey__step--bot .jcard__ico { margin-top: 12px; }
.jcard h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.jcard p { font-size: .83rem; color: var(--text-2); line-height: 1.45; }

.journey__car-mobile { display: none; }

/* tablet — tighten the cards a touch so the wider curves still fit */
@media (max-width: 1080px) and (min-width: 821px) {
  .journey__step { width: 20vw; min-width: 168px; }
  .jcard { padding: 18px 14px 15px; }
  .jcard p { font-size: .78rem; }
}

/* mobile — the road becomes a vertical rail and the car runs downward */
@media (max-width: 820px) {
  .journey__stage { display: none; }
  .journey { padding-left: 4px; }
  .journey::before {                           /* light-grey asphalt rail */
    content: ""; position: absolute; left: 22px; top: 6px; bottom: 6px; width: 16px;
    border-radius: 9px;
    background: repeating-linear-gradient(#98A4B0 0 15px, #8A96A2 15px 30px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
  }
  .journey::after {                            /* dashed centre line on the rail */
    content: ""; position: absolute; left: 29.4px; top: 10px; bottom: 10px; width: 2px;
    background: repeating-linear-gradient(#FFFFFF 0 12px, transparent 12px 26px);
  }
  .journey__steps { position: static; display: flex; flex-direction: column; gap: 22px; padding-left: 64px; }
  .journey__step {
    position: relative; left: auto; width: auto; transform: translateY(18px);
  }
  .journey.is-in .journey__step { transform: none; }
  .journey__step--top, .journey__step--bot { top: auto; bottom: auto; }
  .jcard { text-align: left; }
  .jcard__ico { margin-top: 0 !important; }
  /* match the specificity of the desktop --top/--bot rules so the number sits on the rail */
  .journey__step--top .jcard__num,
  .journey__step--bot .jcard__num {
    left: -53px; top: 22px; bottom: auto; transform: none;
    width: 38px; height: 38px;
  }
  .journey__car-mobile {
    display: grid; place-items: center; position: absolute; left: 19px; z-index: 3;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #1E88E5); color: #fff; font-size: .68rem;
    box-shadow: 0 4px 10px rgba(15, 76, 129, .5);
    animation: jCarDown 12s ease-in-out infinite;
  }
  @keyframes jCarDown { 0% { top: 6px; } 50% { top: calc(100% - 28px); } 100% { top: 6px; } }
}

@media (prefers-reduced-motion: reduce) {
  .journey__lane, .journey__check, .journey__car-mobile { animation: none; }
  .journey__car animateMotion { display: none; }
}

/* ══════════════════════════ ACCESSORIES — SEARCH BAND BACKGROUND ══════════════════════════ */
.search-band {
  background:
    radial-gradient(680px 220px at 50% 0%, rgba(30, 136, 229, .09), transparent 70%),
    linear-gradient(180deg, #EAF2FA 0%, #F4F8FC 100%);
  border-top: 1px solid #DCE7F1;
  border-bottom: 1px solid #DCE7F1;
}

/* ══════════════════════════ WHAT WE STOCK · WORKSHOP HUB ══════════════════════════ */
.hub-section {
  position: relative; overflow: hidden; padding-block: clamp(30px, 4vw, 52px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(243,247,251,.95) 100%),
    url("../images/whatwestock-road.jpg") center/cover no-repeat;
}
.hub-section > .container { position: relative; z-index: 1; }

.hub { position: relative; width: 100%; max-width: 900px; margin-inline: auto; aspect-ratio: 1100 / 640; margin-top: clamp(4px, 1vw, 12px); container-type: inline-size; }

/* connector layer — hidden (lines were cutting into the cards) */
.hub__links { display: none; }
.hub__links--x { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1;
  opacity: 0; transition: opacity .7s var(--ease) .2s; }
.hub.is-in .hub__links { opacity: 1; }
.hub__link { stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 1.5s var(--ease); }
.hub.is-in .hub__link { stroke-dashoffset: 0; }
.hub__link:nth-child(2) { transition-delay: .12s; }
.hub__link:nth-child(3) { transition-delay: .24s; }
.hub__link:nth-child(4) { transition-delay: .36s; }
.hub__link:nth-child(5) { transition-delay: .48s; }
.hub__link:nth-child(6) { transition-delay: .6s; }
.hub__flows circle { filter: drop-shadow(0 0 5px rgba(30, 136, 229, .8)); }

/* centre workshop */
.hub__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(290px, 40cqw, 388px); z-index: 2;
}
.hub__workshop { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 40px rgba(15, 76, 129, .16)); }

/* category cards */
.hubcard {
  position: absolute; z-index: 3; width: clamp(210px, 26cqw, 250px);
  transform: translate(-50%, -50%); transform-origin: center;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; border-radius: 20px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 18px 40px -20px rgba(15, 76, 129, .4), 0 2px 8px rgba(16, 24, 40, .06);
  opacity: 0;
  transition: opacity .5s var(--ease) calc(var(--i) * 110ms), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.hub.is-in .hubcard { opacity: 1; }
.hubcard:hover {
  transform: translate(-50%, calc(-50% - 6px)) scale(1.03);
  box-shadow: 0 30px 62px -22px rgba(15, 76, 129, .5), 0 0 0 1px rgba(30, 136, 229, .25);
}
.hubcard__ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-size: 1.15rem; background: rgba(30, 136, 229, .12); color: var(--primary);
  transition: transform .3s var(--ease);
}
.hubcard:hover .hubcard__ico { transform: rotate(-8deg) scale(1.06); }
.hubcard h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; color: var(--text); }
.hubcard p { font-size: .84rem; color: var(--text-2); line-height: 1.4; }

.hubcard--p1 { left: 50%; top: 11%; }
.hubcard--p2 { left: 15%;  top: 31%; }
.hubcard--p3 { left: 85%;  top: 31%; }
.hubcard--p4 { left: 15%;  top: 69%; }
.hubcard--p5 { left: 85%;  top: 69%; }
.hubcard--p6 { left: 50%;  top: 89%; }

/* tablet — workshop on top, cards in a 2-column grid, no connectors */
@media (max-width: 1024px) {
  .hub { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hub__links { display: none; }
  .hub__core { position: static; transform: none; grid-column: 1 / -1; margin: 0 auto 20px; animation: none; width: min(360px, 70%); }
  .hubcard { position: static; transform: none; opacity: 1; width: auto; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
  .hubcard:hover { transform: translateY(-5px); }
}

/* mobile — vertical stack */
@media (max-width: 600px) {
  .hub { grid-template-columns: 1fr; }
  .hub__core { width: min(300px, 82%); }
}

@media (prefers-reduced-motion: reduce) {
  .hub__core { animation: none; }
  .hub__flows circle { display: none; }
}

/* ══════════════════════ ALIGNMENT — PREMIUM HERO (two-col + booking card) ══════════════════════ */
.align-hero { min-height: min(74vh, 640px); align-items: flex-start; padding-block: clamp(24px, 2.6vw, 42px); }
.align-hero .container { width: 100%; }
.align-hero__grid { align-items: start; }
.align-hero .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(6,20,35,.92) 0%, rgba(6,20,35,.74) 42%, rgba(6,20,35,.46) 68%, rgba(6,20,35,.42) 100%),
    linear-gradient(0deg, rgba(6,20,35,.36), transparent 46%);
}
.align-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 400px);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.align-hero__copy { max-width: 640px; }

.align-hero__label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px; margin-bottom: 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(30,136,229,.24); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.align-hero__label i { color: var(--accent); }

.align-hero h1 { font-size: clamp(2rem, 1.25rem + 2.9vw, 3.35rem); line-height: 1.08; }
.align-hero .lead { max-width: 545px; margin-top: 16px; }

/* feature badges 2×2 */
.align-hero__badges {
  list-style: none; margin: 22px 0 26px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: 545px;
}
.align-hero__badges li {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 600; font-size: .95rem; text-shadow: 0 1px 8px rgba(6,20,35,.55);
}
.align-hero__badges i {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .68rem; color: #fff; background: linear-gradient(135deg, #1E88E5, #0F4C81);
  box-shadow: 0 4px 12px rgba(30,136,229,.5);
}
.align-hero .btn--clear i { margin-right: 3px; }

/* ── glassmorphism booking card ── */
.book-card {
  position: relative; align-self: center;
  padding: 26px 24px 22px; border-radius: 24px; color: #fff;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 30px 70px -24px rgba(3,16,30,.72), inset 0 1px 0 rgba(255,255,255,.42);
  /* slide in from the right */
  opacity: 0; transform: translateX(46px);
  transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;
}
.align-hero .book-card.is-in { opacity: 1; transform: translateX(0); }
.book-card__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; color: #fff; }

/* segmented vehicle selector */
.book-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 5px; border-radius: 14px; background: rgba(6,20,35,.3); border: 1px solid rgba(255,255,255,.16);
}
.book-seg__btn {
  appearance: none; cursor: pointer; border: 0; background: transparent; color: rgba(255,255,255,.82);
  font: inherit; font-size: .82rem; font-weight: 700; padding: 9px 4px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.12;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.book-seg__btn span { font-size: 1.15rem; }
.book-seg__btn:hover { color: #fff; }
.book-seg__btn.is-active {
  background: linear-gradient(135deg, #1E88E5, #0F4C81); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(30,136,229,.7);
}

/* price rows + fade-on-swap */
.book-card__rows { margin: 16px 0 18px; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.book-card__rows.is-swap { opacity: 0; transform: translateY(5px); }
.book-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.16);
}
.book-row:last-child { border-bottom: 0; }
.book-row span { color: rgba(255,255,255,.86); font-size: .92rem; }
.book-row b { font-size: 1.06rem; font-weight: 800; color: #fff; }
.book-row:last-child b { color: var(--accent); }

.book-card__cta { margin-top: 4px; }
.book-card__trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: .8rem; color: rgba(255,255,255,.84);
}
.book-card__trust i { color: #4ADE80; }

/* tablet — stack card below, slide up instead of in */
@media (max-width: 960px) {
  .align-hero { min-height: 0; }
  .align-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .align-hero__copy { max-width: none; }
  .book-card { width: 100%; max-width: 460px; }
  .align-hero .book-card { transform: translateY(34px); }
  .align-hero .book-card.is-in { transform: translateY(0); }
}
@media (max-width: 560px) {
  .align-hero__badges { grid-template-columns: 1fr; gap: 11px; }
  .book-card { max-width: none; }
  .align-hero__grid { gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .align-hero .book-card { transition: opacity .3s ease; transform: none; }
}

/* alignment hero — blue CTA buttons (override the cover-hero amber) */
.align-hero .btn--primary,
.book-card .btn--primary { background: #1E88E5; color: #fff; box-shadow: 0 12px 30px -8px rgba(30,136,229,.6); }
.align-hero .btn--primary:hover,
.book-card .btn--primary:hover { background: #1669B5; color: #fff; box-shadow: 0 16px 36px -8px rgba(30,136,229,.65); }

/* alignment — pricing panels */
.price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 820px; margin-inline: auto; }
.price-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 26px; box-shadow: var(--sh-sm);
}
.price-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.price-panel__head i {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(30,136,229,.12); color: var(--primary); font-size: 1.05rem;
}
.price-panel__head h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.price-list { list-style: none; margin: 8px 0 0; padding: 0; }
.price-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; border-bottom: 1px solid var(--border);
}
.price-list li:last-child { border-bottom: 0; }
.price-list span { color: var(--text-2); font-weight: 600; }
.price-list b { font-size: 1.2rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.price-panel__note { margin-top: 12px; font-size: .82rem; color: var(--text-2); }

@media (max-width: 640px) { .price-cols { grid-template-columns: 1fr; } }

/* detailing — 4-panel price grid */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin-inline: auto; align-items: start; }
.price-panel__sub { display: block; font-size: .72rem; font-weight: 600; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.price-grid .price-list b { font-size: 1.05rem; white-space: nowrap; }
.price-grid .price-list li { gap: 12px; }
.price-asper { font-size: .9rem !important; font-weight: 700; color: var(--text-2) !important; }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }