/*
 * AJ & Sons website — shared styles.
 * Values (spacing, radii, sizes, breakpoints) were taken from the reference theme's
 * compiled stylesheet. Breakpoints: 48em (768px), 75em (1200px), 90em (1440px).
 * Colours always come from tokens.css — never hard-code a brand colour here.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--body-background);
  color: var(--body-font-color);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; line-height: 1.6; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.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;
}

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

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 40px;
  border: 0; border-radius: var(--radius-button);
  background: var(--primary-color); color: var(--text-on-primary-color);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  cursor: pointer; transition: opacity 0.2s;
}
.button:hover, .button:focus-visible { opacity: 0.8; }
.button--block { width: 100%; }

/* ---------- Section titles ---------- */
.title-style h3 {
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-weight: 400; font-size: 1.25rem;
  margin-bottom: 4px;
}
.title-style h2 { font-size: 2rem; }
@media (min-width: 48em) { .title-style h2 { font-size: 3rem; } }
.title-style--center { text-align: center; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 50; background: var(--header-background); color: var(--header-font-color); box-shadow: var(--shadow-bar); }
.site-header__main {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1920px; margin: 0 auto; padding: 10px var(--gutter);
}
@media (min-width: 75em) { .site-header__main { padding: 20px 40px; } }

.brand { display: inline-flex; align-items: center; gap: 14px; }
/* The client's own badge (2026-10-21): transparent PNG cut from their artwork, black kept inside the shield. */
.brand__logo { display: block; height: 56px; width: auto; flex: none; }
@media (min-width: 48em) { .brand__logo { height: 72px; } }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 1.9rem; letter-spacing: -0.5px; text-transform: uppercase;
}
.brand__name b { color: var(--primary-color); font-weight: 800; }
.brand__tagline {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.42em; margin-top: 8px;
}
@media (min-width: 75em) {
  .brand__logo { height: 96px; }
  .brand__name { font-size: 3.4rem; letter-spacing: -1px; }
  .brand__tagline { font-size: 1.12rem; letter-spacing: 0.42em; margin-top: 10px; }
}
@media (min-width: 75em) and (max-width: 89.99em) {
  /* 1200–1439px: eight menu items at 18px with 1rem padding overflow the bar and wrapped mid-label. */
  .main-menu { gap: 2px; padding: 0 16px; }
  /* …and the full-size badge + wordmark squeeze the phone and location onto two lines. */
  .site-header__main { padding-left: 24px; padding-right: 24px; }
  .brand { gap: 10px; }
  .brand__logo { height: 76px; }
  .brand__name { font-size: 2.6rem; }
  .brand__tagline--long { font-size: 0.68rem; letter-spacing: 0.1em; }
  /* .site-header prefix: the base .header-info / .icon-section rules come later in this file. */
  .site-header .header-info { gap: 16px; }
  .site-header .icon-section { gap: 0 8px; }
  .site-header .icon-section__value { white-space: nowrap; }
  .main-menu > li > a, .main-menu > li > .submenu-toggle { padding: 0 0.7rem; font-size: 16px; }
}
/* The wide tracking above suits a short tagline ("Approved Used Cars"). A longer one set from Carventory's
   Site details would wrap raggedly with it, so it gets tighter tracking, a smaller size and a gold rule. */
.brand__tagline--long {
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; text-wrap: balance;
  padding-top: 6px; border-top: 2px solid var(--primary-color); max-width: 15em;
}
@media (min-width: 48em) { .brand__tagline--long { font-size: 0.7rem; letter-spacing: 0.14em; max-width: none; white-space: nowrap; } }
@media (min-width: 75em) { .brand__tagline--long { font-size: 0.82rem; letter-spacing: 0.16em; margin-top: 10px; padding-top: 8px; } }

.header-info { display: flex; align-items: center; gap: 25px; }
.icon-section { display: inline-flex; align-items: center; gap: 0 10px; font-size: 0.875rem; text-align: left; }
.icon-section__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--primary-color); color: var(--text-on-primary-color);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.icon-section__value { display: block; font-weight: 700; font-size: 1rem; }
.icon-section--phone .icon-section__value { color: var(--primary-color); }
.header-hours { position: relative; }
.icon-section--hours { cursor: pointer; background: none; border: 0; color: inherit; font: inherit; font-size: 0.875rem; padding: 0; }
.icon-section--hours .fa-chevron-down { font-size: 0.75rem; margin-left: 4px; transition: transform 0.2s; }
.icon-section--hours[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.icon-section--directions:hover .icon-section__text { opacity: 0.8; }
.header-hours, .icon-section--directions, .header-social { display: none; }
@media (min-width: 75em) {
  .header-hours, .icon-section--directions { display: inline-flex; }
  .header-social { display: inline-flex; }
}
.hours-popup {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 270px; padding: 20px; border-radius: 20px;
  background: #fff; color: #000; box-shadow: 0 -4px 40px 0 rgba(150, 151, 171, 0.25);
  cursor: default; text-align: left;
}
.hours-popup[hidden] { display: none; }
.hours-popup li { display: flex; justify-content: space-between; gap: 20px; list-style: none; padding: 3px; font-size: 0.9375rem; }
.hours-popup li.is-today { background: var(--primary-color); color: var(--text-on-primary-color); border-radius: 2px; font-weight: 700; }

.header-social { gap: 6px; align-items: center; min-height: 40px; padding-left: 25px; border-left: 1px solid var(--header-font-color); list-style: none; }
.header-social a {
  width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  background: var(--header-font-color); color: var(--header-background); font-size: 1.15rem; transition: background 0.2s, color 0.2s;
}
.header-social a:hover { color: #fff; }
.header-social a.fb:hover { background: #1877f2; }
.header-social a.ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.header-social a.yt:hover { background: #b00; }

/* Header search: a link to /stocklist#search that site.js turns into a search dialog. */
.header-search {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--header-font-color); font-size: 1.1rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.header-search:hover, .header-search:focus-visible, .header-search[aria-expanded="true"] { border-color: var(--primary-color); color: var(--primary-color); }
@media (min-width: 75em) { .header-search { width: 40px; height: 40px; } }
.header-info { min-width: 0; }
@media (max-width: 47.99em) { .header-info { gap: 10px; } }
html.search-open { overflow: hidden; }
.site-search {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.18s ease;
}
.site-search[hidden] { display: none; }
.site-search.is-open { opacity: 1; }
.site-search__form {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 860px; padding: 8px;
  border-radius: var(--radius-panel); background: var(--fields-background); border-top: 4px solid var(--primary-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transform: translateY(-12px); transition: transform 0.18s ease;
}
.site-search.is-open .site-search__form { transform: none; }
@media (min-width: 64em) { .site-search { padding-top: 110px; } }
.site-search__icon { position: absolute; left: 24px; top: 30px; line-height: 1; color: #555; pointer-events: none; }
.site-search input[type=search] {
  flex: 1; min-width: 0; height: 52px; padding: 0 12px 0 44px; border: 0; border-radius: var(--radius-field);
  background: transparent; color: var(--fields-font-color); font: 1.0625rem var(--font-body);
}
.site-search input[type=search]::placeholder { color: #666; }
.site-search input[type=search]:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 0; }
.site-search__submit { min-height: 52px; padding: 0 26px; flex-shrink: 0; }
.site-search__close {
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: #222;
  font-size: 1.4rem; cursor: pointer;
}
.site-search__close:hover { background: rgba(0, 0, 0, 0.06); }
@media (max-width: 47.99em) {
  .site-search { padding: 12px 10px; }
  .site-search__form { flex-wrap: wrap; }
  .site-search input[type=search] { flex-basis: calc(100% - 52px); order: 1; }
  .site-search__close { order: 2; }
  .site-search__submit { order: 3; width: 100%; }
}

.phone-mobile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--primary-color); color: var(--text-on-primary-color); font-size: 1.1rem;
}
.icon-section--phone { display: none; }
@media (min-width: 48em) { .icon-section--phone { display: inline-flex; } .phone-mobile { display: none; } }

/* ---------- Main navigation ---------- */
.site-nav { position: sticky; top: 0; z-index: 40; background: var(--gradient); box-shadow: var(--shadow-bar); }
.site-nav__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); min-height: 50px; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; color: var(--text-on-gradient);
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; cursor: pointer; padding: 12px 0;
}
.menu-toggle__bars { position: relative; width: 22px; height: 16px; }
.menu-toggle__bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 7px; }
.menu-toggle__bars span:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-menu { list-style: none; display: none; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.main-menu.is-open { display: block; }
.main-menu a, .main-menu .submenu-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0 var(--gutter); line-height: 3.125rem;
  color: var(--text-on-gradient); background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 500; font-size: 1rem; letter-spacing: 0.8px; text-align: left;
}
.main-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.submenu { list-style: none; display: none; background: rgba(0, 0, 0, 0.25); }
.has-submenu.is-open > .submenu { display: block; }
.submenu a { padding-left: calc(var(--gutter) * 2); font-size: 0.9375rem; }
.caret { width: 0; height: 0; border: 5px solid transparent; border-top-color: currentColor; border-bottom-width: 0; margin-left: 8px; transition: transform 0.2s; }
.has-submenu.is-open > .submenu-toggle .caret { transform: rotate(180deg); }

@media (min-width: 75em) {
  .site-nav__bar { display: none; }
  .main-menu {
    display: flex !important; align-items: center; justify-content: center; gap: 10px;
    max-width: 1920px; margin: 0 auto; border: 0; padding: 0 40px;
  }
  .main-menu > li { position: relative; border: 0; }
  .main-menu > li > a, .main-menu > li > .submenu-toggle {
    width: auto; line-height: 3.75rem; padding: 0 1rem; font-size: 18px; white-space: nowrap;
  }
  .main-menu > li > a:hover, .main-menu > li > .submenu-toggle:hover { color: var(--primary-color); }
  .submenu {
    position: absolute; top: 100%; left: 0; min-width: 230px; z-index: 45;
    background: var(--header-background); border-radius: 0 0 20px 20px; padding: 20px;
    border-bottom: 2px solid var(--primary-color); box-shadow: var(--shadow-bar);
  }
  .has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu, .has-submenu.is-open > .submenu { display: block; }
  .submenu li { border-bottom: 1px solid var(--lines-color); margin-bottom: 10px; }
  .submenu li:last-child { margin-bottom: 0; }
  .submenu a {
    position: relative; padding: 0 10px 0 20px; line-height: 28px; font-size: 0.9375rem;
    transition: transform 0.2s ease-in-out;
  }
  .submenu a::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--primary-color); position: absolute; left: 0; }
  .submenu a:hover { transform: translateX(5px); }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--gradient); padding: 0 0 30px; overflow: hidden; }
@media (min-width: 75em) { .hero { padding: 60px 0; } }

.hero__slides { position: relative; height: 62vw; max-height: 440px; }
@media (min-width: 75em) { .hero__slides { position: absolute; inset: 0; height: auto; max-height: none; } }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.hero__slide.is-active { opacity: 1; }

/* Studio backdrop, built in CSS so no photo of a showroom is needed. */
.studio { position: absolute; inset: 0; overflow: hidden; background: #0d0d0e; }
.studio::before { /* back wall with a soft overhead light */
  content: ""; position: absolute; inset: 0 0 34% 0;
  background:
    radial-gradient(ellipse 45% 70% at 52% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(180deg, #1e1f22 0%, #141517 70%, #0e0e10 100%);
}
.studio::after { /* glossy floor */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    radial-gradient(ellipse 40% 55% at 52% 0%, rgba(255, 255, 255, 0.10), transparent 75%),
    linear-gradient(180deg, #121314 0%, #050505 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.studio--road::before {
  background:
    radial-gradient(ellipse 30% 50% at 78% 18%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(160deg, #2b2d31 0%, #17181b 55%, #0c0c0d 100%);
}
.studio__car {
  position: absolute; z-index: 2; left: 50%; bottom: 13%;
  width: min(78%, 820px); transform: translateX(-50%);
  filter: drop-shadow(0 30px 25px rgba(0, 0, 0, 0.75));
}
.studio__reflection {
  position: absolute; z-index: 1; left: 50%; top: 87%;
  width: min(78%, 820px); transform: translateX(-50%) scaleY(-1);
  opacity: 0.18; filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%);
          mask-image: linear-gradient(to top, #000 0%, transparent 45%);
}
@media (min-width: 75em) {
  .studio__car, .studio__reflection { left: 47%; width: min(48%, 860px); }
}
.hero__shade { display: none; }
@media (min-width: 75em) {
  .hero__shade { /* keeps the caption legible over the car, as the reference does */
    display: block; position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 65%);
  }
}

.hero__inner { z-index: 4; }
@media (min-width: 75em) {
  .hero__inner { display: flex; align-items: center; justify-content: space-between; min-height: 425px; }
}
/* Below 1200px the reference stacks slide image, then caption, then search panel —
   nothing overlaps. From 1200px the slides become the backdrop of the whole hero. */
.hero__caption { padding: 20px var(--gutter) 0; text-align: center; }
.hero__caption h1 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 10px; color: var(--text-on-gradient); }
.hero__caption p { font-size: 1.125rem; margin-bottom: 20px; color: var(--text-on-gradient); }
.hero__caption .button { margin-bottom: 0; }
@media (min-width: 48em) { .hero__caption h1 { font-size: 3rem; } }
@media (min-width: 75em) {
  .hero__inner { position: relative; }
  .hero__caption { width: 50%; padding: 0 var(--gutter) 0 0; text-align: left; }
  .hero__caption p { font-size: 1.25rem; font-weight: 300; }
}
/* Slide controls at every width (a pause button is required for moving text, WCAG 2.2.2). The visible dot is
   10px; the button around it is a 28px tap target. */
.hero__dots { position: absolute; z-index: 5; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
  padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.hero__dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: #fff; }
.hero__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.hero__dot[aria-current="true"]::before { background: var(--primary-color); }
.hero__pause { font-size: 0.75rem; }
.hero__dots button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; border-radius: 50%; }

/* ---------- Quick search panel ---------- */
.search-panel {
  margin: 20px var(--gutter) 0;
  padding: 30px 15px; border-radius: var(--radius-panel);
  background: var(--alternate-background);
}
@media (min-width: 48em) { .search-panel { max-width: 560px; margin: 20px auto 0; } }
@media (min-width: 75em) {
  .search-panel { width: 465px; max-width: none; margin: 0; padding: 25px; min-height: 425px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
}
.search-panel h2 { text-align: center; color: var(--text-on-alternate-background); font-size: 1.75rem; margin-bottom: 25px; }
.search-panel__type { border-bottom: 1px solid var(--lines-color); padding-bottom: 30px; margin-bottom: 30px; }
.search-panel__type select { font-weight: 700; }
.search-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.search-panel__grid .full { grid-column: 1 / -1; }
.search-panel__submit { margin-top: 20px; }
.search-panel__submit .button { width: 100%; min-height: 48px; }

.select {
  width: 100%; height: 48px; padding: 0 35px 0 8px;
  border: 0.5px solid var(--lines-color); border-radius: var(--radius-field);
  background-color: var(--fields-background); color: var(--fields-font-color);
  font-family: var(--font-body); font-size: 1rem;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  cursor: pointer;
}
.select:disabled { cursor: not-allowed; opacity: 1; color: #6b6b6b; background-color: var(--fields-background); }

.pay-toggle {
  display: flex; width: 100%; max-width: 335px; margin: 0 auto;
  border-radius: 100px; background: var(--fields-background); overflow: hidden;
}
.pay-toggle label { flex: 1; position: relative; }
.pay-toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 2; }
.pay-toggle span {
  display: block; text-align: center; padding: 10px 0; font-size: 1rem;
  color: var(--fields-font-color); border: 2px solid transparent; border-radius: 100px;
}
.pay-toggle label:hover span { opacity: 0.7; }
.pay-toggle input:checked + span {
  border-color: var(--primary-color); background: var(--alternate-background);
  color: var(--text-on-alternate-background); font-weight: 700; opacity: 1;
}
.pay-toggle input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* ---------- Page sections ---------- */
.home > section { margin-bottom: 60px; }
@media (min-width: 48em) { .home > section { margin-bottom: 120px; } }
.home > section.hero { margin-bottom: 30px; }

/* ---------- Featured vehicles ---------- */
.featured { position: relative; }
.featured__head { display: flex; justify-content: flex-end; gap: 8px; max-width: var(--container); margin: 0 auto 12px; padding: 0 var(--gutter); }
.carousel-arrow {
  width: 40px; height: 40px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--alternate-background); color: #fff; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s;
}
.carousel-arrow:hover { background: var(--primary-color); color: var(--text-on-primary-color); }
.featured__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--gutter) 20px; scrollbar-width: none;
}
.featured__track::-webkit-scrollbar { display: none; }
.featured__track > li { list-style: none; flex: 0 0 300px; scroll-snap-align: start; }
@media (min-width: 48em) { .featured__track > li { flex-basis: 342px; } }
.rep-example { max-width: 1370px; margin: 20px auto 0; padding: 0 var(--gutter); font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.rep-example strong { color: #fff; }

/* Vehicle card */
.vcard {
  height: 100%; display: flex; flex-direction: column;
  background: var(--card-background); color: #000;
  border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.vcard__photo { position: relative; display: block; }
/* The image sits in its own clipped box so it can zoom on hover without clipping the sash. */
.vcard__img { display: block; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.vcard__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
@media (hover: hover) { .vcard:hover .vcard__img img { transform: scale(1.04); } }
.vcard:focus-within .vcard__img img { transform: scale(1.04); }
.vcard__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); opacity: 0; transition: opacity 0.2s;
}
@media (min-width: 75em) { .vcard:hover .vcard__photo::after { opacity: 1; } .vcard:hover .button { opacity: 0.8; } }
.vcard__sash {
  position: absolute; z-index: 1; left: 15px; bottom: -10px; max-width: calc(100% - 30px);
  padding: 4px 5px; border-radius: 6px; line-height: 1;
  background: var(--primary-color); color: var(--text-on-primary-color);
  font-size: 0.75rem; font-weight: 600; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcard__body { flex: 1; display: flex; flex-direction: column; padding: 15px; }
.vcard__title { display: block; margin: 5px 0 15px; }
.vcard__make { font-size: 1.125rem; font-weight: 700; line-height: 1.2; margin-bottom: 7px; }
.vcard__derivative { font-size: 0.875rem; line-height: 1.2; }
.vcard__spec {
  margin: auto 0 15px; padding: 10px 12px 6px; list-style: none;
  display: flex; justify-content: space-between; gap: 10px;
  background: var(--card-spec-background); border-radius: 6px; font-size: 0.75rem; text-align: center;
}
.vcard__spec svg { display: block; width: 20px; height: 20px; margin: 0 auto 3px; }
.vcard__prices { display: flex; border-top: 1px solid var(--card-divider); padding: 15px 0; }
.vcard__price { flex: 1; text-align: center; font-size: 1.4375rem; font-weight: 800; line-height: 1.3; }
.vcard__price + .vcard__price { border-left: 1px solid var(--card-divider); }
.vcard__price small { display: block; font-size: 0.6875rem; font-weight: 700; color: #000; }
.vcard__price--monthly { color: var(--primary-color); }
.vcard__vat { display: inline-block; color: #939598; font-size: 0.6875rem; font-weight: 700; }
.vcard .button { width: 100%; }

/* ---------- Budget finder ---------- */
.budget__inner {
  position: relative; background: var(--gradient); border-radius: var(--radius-panel);
  padding: 30px 15px; display: flex; flex-direction: column; gap: 20px; overflow: hidden;
}
@media (min-width: 48em) { .budget__inner { flex-direction: row; align-items: center; justify-content: flex-end; padding: 30px; } }
@media (min-width: 75em) { .budget__inner { padding: 50px; } }
.budget__img { display: none; }
@media (min-width: 75em) {
  .budget__img {
    display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 33%;
    background: var(--gradient-color-left) center / cover no-repeat;
  }
}
.budget__text, .budget__slider { width: 100%; padding: 0 15px; }
@media (min-width: 48em) { .budget__text, .budget__slider { width: 50%; } }
@media (min-width: 75em) { .budget__text, .budget__slider { width: 33.333%; } }
.budget__text h2 { font-size: 1.75rem; margin-bottom: 10px; }
@media (min-width: 75em) { .budget__text h2 { font-size: 2.375rem; } }
.budget__text p { font-size: 1.125rem; margin: 0; }
@media (min-width: 75em) { .budget__text p { font-size: 1.25rem; } }
.budget__slider { text-align: center; }
.gauge { position: relative; width: 280px; max-width: 100%; margin: 0 auto; touch-action: none; user-select: none; }
.gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge__track { stroke: #3a3a3a; }
.gauge__fill { stroke: rgba(226, 185, 59, 0.0); }
.gauge__handle { fill: var(--primary-color); cursor: grab; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.gauge__handle:focus { outline: none; stroke: #fff; stroke-width: 3; }
.gauge__value {
  position: absolute; left: 0; right: 0; top: 46%;
  font-family: var(--font-heading); font-weight: 700; font-size: 2.6rem; line-height: 1;
  background: linear-gradient(180deg, var(--primary-color-light) 20%, var(--primary-color) 60%, rgba(255, 255, 255, 0.15) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
}
.budget__label { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; margin: 6px 0 20px; }

/* ---------- Welcome text ---------- */
.welcome__inner { display: flex; flex-direction: column; gap: 30px; }
@media (min-width: 48em) { .welcome__inner { flex-direction: row; align-items: center; } .welcome__inner > * { width: 50%; } }
.welcome__body { position: relative; max-height: 330px; overflow: hidden; margin: 30px 0 25px; transition: max-height 0.4s ease; }
.welcome__body p { font-size: 1.125rem; font-weight: 300; line-height: 1.6; margin-bottom: 1.8rem; }
@media (min-width: 75em) { .welcome__body p { font-size: 1.1875rem; } }
.welcome__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(39, 39, 39, 0) 0%, var(--body-background) 100%); transition: opacity 0.3s;
}
.welcome__body.is-open { max-height: 2000px; }
.welcome__body.is-open::after { opacity: 0; }
.welcome__media {
  position: relative; border-radius: var(--radius-panel); overflow: hidden; aspect-ratio: 589 / 584;
  background: radial-gradient(ellipse 70% 40% at 50% 70%, rgba(255, 255, 255, 0.07), transparent 70%), #080808;
}
@media (min-width: 48em) { .welcome__media { max-width: 589px; margin-left: auto; } }
.welcome__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

/* ---------- Services ---------- */
.services__box {
  background: var(--alternate-background); border-radius: var(--radius-panel);
  padding: 50px 15px; display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 75em) { .services__box { flex-direction: row; align-items: center; padding: 50px 65px; gap: 30px; } }
.services__title { text-align: center; }
@media (min-width: 75em) { .services__title { width: 29%; text-align: left; flex-shrink: 0; } }
.services__title h2 { font-size: 1.75rem; }
@media (min-width: 75em) { .services__title h2 { font-size: 2.375rem; } }
.services__list { list-style: none; display: flex; flex-wrap: wrap; gap: 24px 15px; flex: 1; }
.services__list > li { width: 100%; }
@media (min-width: 48em) { .services__list > li { width: calc(50% - 8px); } }
@media (min-width: 75em) { .services__list { flex-wrap: nowrap; } .services__list > li { flex: 1; width: auto; } }
.service { display: flex; flex-direction: column; height: 100%; }
.service__img { position: relative; overflow: hidden; border-radius: var(--radius-card); display: none; aspect-ratio: 6 / 5; }
@media (min-width: 75em) { .service__img { display: block; } }
.service__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease-in-out; }
.service__img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); transition: opacity 0.2s;
}
.service:hover .service__img img { transform: scale(1.1); }
.service:hover .service__img::before { opacity: 1; }
.service__heading {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px; border-radius: var(--radius-card); background: var(--gradient-color-right);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem;
}
@media (min-width: 75em) { .service__heading { margin-top: 12px; } }
.service__arrow {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--primary-color);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}

/* ---------- Valuation steps ---------- */
.steps { list-style: none; display: grid; gap: 40px; margin: 45px 0 50px; }
@media (min-width: 48em) { .steps { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: start; } }
.step { text-align: center; padding: 0 10px; }
.step svg { width: 66px; height: 66px; margin: 0 auto 18px; color: #fff; }
.step h3 { font-size: 1.375rem; margin-bottom: 14px; }
.step p { font-size: 1.125rem; font-weight: 300; max-width: 320px; margin: 0 auto; }
.steps__line { display: none; }
@media (min-width: 48em) {
  .steps__line { display: block; width: 150px; margin-top: 98px; border-top: 1px dashed #fff; }
}
@media (min-width: 48em) and (max-width: 74.99em) { .steps__line { width: 40px; } }
.center { text-align: center; }

/* ---------- Reviews ---------- */
.reviews .title-style { margin-bottom: 30px; }
.reviews__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 50px var(--gutter) 10px; scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track > li { list-style: none; flex: 0 0 300px; scroll-snap-align: start; }
@media (min-width: 48em) { .reviews__track > li { flex-basis: 380px; } }
.review { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--alternate-background); border-radius: var(--radius-panel); }
.review__quote {
  position: absolute; left: 50%; top: -42px; transform: translateX(-50%);
  width: 84px; height: 84px; border-radius: 50%; background: var(--alternate-background);
  display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 2rem;
}
.stars { display: inline-flex; gap: 3px; color: var(--primary-color); }
.review__stars { font-size: 0.9rem; margin-bottom: 14px; }
.review__body { flex: 1; padding: 60px 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.review__body p { font-weight: 300; margin: 0; }
@media (min-width: 48em) { .review__body p { font-size: 1.125rem; } }
/* Long reviews are clamped to six lines; "Read more" (site.js) appears only when text is cut. */
.js .review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; overflow-wrap: anywhere; }
.js .review__text.is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.review__more {
  margin-top: 12px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  color: var(--primary-color); font: 600 0.9375rem var(--font-body); text-decoration: underline; text-underline-offset: 3px;
}
.review__more[hidden] { display: none; }
.review__name {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--gradient); border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  padding: 15px 20px; text-align: center;
}
.review__author { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }
.review__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font-size: 0.8125rem; opacity: 0.85; }
.review__source {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 600;
}

/* ---------- Stock updates sign-up ---------- */
.signup__box {
  background: var(--gradient); border-radius: var(--radius-panel);
  padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
@media (min-width: 48em) { .signup__box { flex-direction: row; justify-content: space-between; text-align: left; padding: 40px 50px; } }
.signup__box h2 { font-size: 1.6rem; margin: 0; }
@media (min-width: 75em) { .signup__box h2 { font-size: 2rem; } }
.signup__box p { margin: 6px 0 0; font-weight: 300; }
.signup__box .button { flex-shrink: 0; margin: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; margin-top: 90px; background: var(--footer-background); color: var(--footer-font-color);
  box-shadow: 0 -4px 40px 0 rgba(150, 151, 171, 0.25);
}
.partners { position: relative; top: -50px; margin-bottom: -50px; }
.partners__box {
  background: #fff; color: #000; border-radius: var(--radius-panel);
  border-top: 4px solid var(--primary-color); padding: 30px 20px; text-align: center;
}
.partners__box h2 { font-size: 1.5rem; margin-bottom: 6px; }
@media (min-width: 48em) { .partners__box h2 { font-size: 1.875rem; } }
.partners__lead { color: #5b5e63; font-size: 0.9375rem; margin-bottom: 26px; }
.partners__list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 18px; max-width: 1100px; margin: 0 auto;
}
/* Equal cards, centred, so one partner or six always reads as a tidy row. Logos keep their real
   colours: a greyscale filter turned AA's yellow badge into a flat grey box. */
.partners__list > li { flex: 0 1 calc(50% - 9px); }
@media (min-width: 48em) { .partners__list > li { flex: 0 1 250px; } }
.partner-logo { list-style: none; }
.partner-logo__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%;
  padding: 16px 16px 14px; border-radius: 14px; background: #fff; border: 1px solid #e3e5e8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  color: #3a3d41; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
a.partner-logo__card:hover, a.partner-logo__card:focus-visible {
  transform: translateY(-3px); border-color: var(--primary-color); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.partner-logo__img { display: grid; place-items: center; width: 100%; height: 76px; }
@media (min-width: 48em) { .partner-logo__img { height: 92px; } }
.partner-logo__img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.partner-logo__name { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; text-align: center; }
.site-footer--no-partners { margin-top: 60px; border-top: 4px solid var(--primary-color); }
/* Column widths are the reference's: contact + hours share a 2/3 "branch" block
   (45.83% each, pushed apart), popular makes takes 29.17%. */
.footer-main { padding: 50px 0 30px; }
.footer-main__branch { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 48em) {
  .footer-main__branch { flex-direction: row; justify-content: space-between; }
  .footer-contact, .footer-hours { width: 45.8333%; }
}
@media (min-width: 75em) {
  .footer-main { display: flex; justify-content: space-between; }
  .footer-main__branch { width: 66.6667%; }
  .footer-makes { width: 29.1667%; padding-left: 15px; }
  .footer-hours { padding-left: 12px; }
}
.footer-contact, .footer-hours, .footer-makes { margin-bottom: 20px; }
.site-footer h3 { position: relative; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.125rem; line-height: 1.2; }
@media (min-width: 48em) { .site-footer h3 { font-size: 1.25rem; } }
.site-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 3px; background: var(--primary-color); }

.footer-icon { display: flex; align-items: center; gap: 0 10px; margin-bottom: 20px; }
.footer-icon__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--footer-font-color); color: var(--footer-background); font-size: 20px;
}
.footer-icon__text { max-width: 330px; font-size: 1rem; line-height: 1.5; }

.footer-social { list-style: none; display: flex; align-items: center; }
.footer-social__label { font-weight: 700; margin-right: 10px; }
.footer-social a {
  width: 34px; height: 34px; margin-right: 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; transition: opacity 0.2s;
}
.footer-social a:hover { opacity: 0.85; }
.footer-social a.fb { background: #1877f2; }
.footer-social a.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.footer-social a.yt { background: #b00; }

.footer-hours ul { list-style: none; max-width: 400px; }
.footer-hours li { display: flex; align-items: flex-end; gap: 5px; margin-bottom: 5px; font-size: 1rem; line-height: 1.5; }
.footer-hours__leader { flex: 1; margin-bottom: 7px; border-bottom: 1px dotted var(--lines-color); }
.footer-hours p { max-width: 400px; margin: 0; font-size: 1rem; line-height: 1.5; }

.footer-makes ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.footer-makes li { font-size: 1rem; line-height: 1.6; }
.footer-makes a:hover { color: var(--primary-color); }

.footer-lower { padding: 20px var(--gutter); text-align: center; font-size: 1rem; }
.footer-lower, .footer-lower a { color: color-mix(in srgb, var(--footer-font-color) 50%, transparent); }
.footer-lower a:hover { color: var(--footer-font-color); }
.footer-lower__copy { display: inline-block; margin: 0; }
.footer-nav { list-style: none; display: inline-block; margin: 0; }
.footer-nav li { display: inline-block; }
.footer-nav li a::after { content: "|"; padding: 0 8px; }
.footer-nav li:last-child a::after { display: none; }
@media (min-width: 48em) { .footer-lower__copy { margin-right: 30px; } }
.footer-statement { background: linear-gradient(90deg, #1b1b1b 0%, #111 100%); border-top: 1px solid #555; padding: 15px 0 5px; }
.footer-statement p { margin: 0 0 4px; font-size: 0.75rem; line-height: 1.2; color: #fff; }
.footer-statement p:last-child { margin-bottom: 10px; }

/* ---------- Floating controls ---------- */
.chat-fab {
  position: fixed; z-index: 90; right: 20px; bottom: 40px; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(0deg, #0dbb29 0%, #5ff779 100%); color: #fff; font-size: 36px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); transition: transform 0.2s;
}
.chat-fab:hover { transform: scale(1.06); }
.compare-tab {
  position: fixed; z-index: 91; right: 20px; bottom: 0;
  padding: 5px 20px; border-radius: 3px 3px 0 0;
  background: var(--primary-color); color: var(--text-on-primary-color); font-size: 0.875rem;
}
.compare-tab i { margin-right: 4px; }
.to-top {
  position: fixed; z-index: 89; right: 100px; bottom: 40px; width: 44px; height: 44px; border-radius: 10px; border: 0;
  background: var(--alternate-background); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
@media (max-width: 47.99em) { .to-top { display: none; } }

/* ---------- Motion ----------
   Hidden states apply only under html.js (set by an inline script in <head>), so a visitor without
   JavaScript sees everything on first paint. site.js adds .is-in as things scroll into view. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js [data-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-stagger].is-in > *, .js .is-in [data-stagger] > * { opacity: 1; transform: none; }
/* Failsafe: site.js adds html.motion-ready as it starts observing. If it never runs (blocked, failed
   to load, threw first), everything hidden above appears on its own after 2.5s. */
.js:not(.motion-ready) .reveal, .js:not(.motion-ready) [data-stagger] > * { animation: reveal-failsafe 0s 2.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
/* Empty / error panels inside a list are never staggered. */
.js [data-stagger] > .api-state-li, .js [data-stagger] > .no-results { opacity: 1; transform: none; transition: none; }

/* Page-to-page cross-fade where the browser supports it; the header stays put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .hero__slide { transition: none; }
  .vcard__img img, .service__img img, .partner-logo img { transition: none; transform: none !important; }
  .partner-logo__card { transition: none; } a.partner-logo__card:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none; }
  .site-search, .site-search__form { transition: none; }
}

/* ---------- "Under development" notice ---------- */
.dev-notice {
  width: min(420px, calc(100% - 32px)); padding: 35px 30px 30px; border: 0; border-radius: var(--radius-panel);
  background: var(--alternate-background); color: var(--text-on-alternate-background); text-align: center;
  border-top: 4px solid var(--primary-color); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.dev-notice::backdrop { background: rgba(0, 0, 0, 0.65); }
.dev-notice__icon {
  width: 64px; height: 64px; margin: 0 auto 15px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-color); color: var(--text-on-primary-color); font-size: 28px;
}
.dev-notice h2 { font-size: 1.75rem; margin-bottom: 10px; }
.dev-notice p { margin-bottom: 10px; }
.dev-notice .button { margin-top: 10px; min-width: 140px; }

/* ---------- Live data states (js/api.js) ---------- */
/* The chrome mounts are re-rendered in place by Site.refresh(); display: contents keeps them out
   of the box tree so the header, sticky menu and footer lay out exactly as direct children. */
#site-header, #site-footer { display: contents; }

/* Skeleton cards keep the real card's geometry so nothing jumps when the cars arrive. */
.vcard--skeleton { pointer-events: none; }
.skel { background: linear-gradient(90deg, #ececec 0%, #f6f6f6 40%, #ececec 80%); background-size: 200% 100%;
  border-radius: 8px; animation: skel-shimmer 1.4s ease-in-out infinite; }
.skel--media { aspect-ratio: 4 / 3; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.skel--line { height: 14px; margin: 0 0 12px; }
.skel--lg { height: 26px; }
.skel--w50 { width: 50%; } .skel--w70 { width: 70%; } .skel--w90 { width: 90%; }
.skel--button { height: 44px; border-radius: var(--radius-button); margin-top: 18px; }
.skel--gallery { aspect-ratio: 4 / 3; border-radius: var(--radius-panel); }
.vskeleton { display: grid; gap: 30px; padding-top: 30px; padding-bottom: 40px; }
@media (min-width: 62em) { .vskeleton { grid-template-columns: 1.6fr 1fr; } }
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Error / empty panels — inside a card grid they span every column. */
.api-state-li { grid-column: 1 / -1; list-style: none; width: 100%; }
.api-state { max-width: 560px; margin: 20px auto; padding: 36px 28px; text-align: center; background: var(--card-background);
  color: #000; border: 1px solid var(--card-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.api-state__icon { font-size: 2.4rem; color: var(--primary-color); margin-bottom: 14px; }
.api-state h2 { font-size: 1.375rem; margin: 0 0 8px; }
.api-state p { margin: 0 0 20px; color: #4a4a4a; }
.api-state__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.api-state__actions .button { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.featured__track > .api-state-li { flex: 1 0 100%; }

/* Coming soon: the dealer has not published the site yet. */
body.is-coming-soon .site-header, body.is-coming-soon .site-nav, body.is-coming-soon .site-footer, body.is-coming-soon .chat-fab,
body.is-coming-soon .compare-tab, body.is-coming-soon .to-top { display: none !important; }
.coming-soon { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px var(--gutter); background: var(--gradient); color: var(--text-on-gradient); }
.coming-soon__name { font-family: var(--font-heading); font-size: 1rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--primary-color); margin: 0 0 18px; }
.coming-soon h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 16ch; margin: 0 0 16px; }
.coming-soon p { max-width: 46ch; margin: 0 0 28px; opacity: .85; }

/* Not-found page: similar cars. */
.vnotfound__similar { margin: 24px 0 30px; text-align: left; }

/* ---------- Japanese imports (2026-10-16) ---------- */
.jp-dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--primary-color); box-shadow: 0 0 0 3px rgba(226, 185, 59, 0.22); margin-right: 0.5em; vertical-align: 0.08em; flex: none; }

.hero__eyebrow { display: inline-flex; align-items: center; margin-bottom: 10px !important; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.875rem !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hero__slogan { font-family: var(--font-heading); font-weight: 600; font-size: 1rem !important; color: var(--primary-color) !important; line-height: 1.4; }
.hero__slogan span { display: block; font-style: italic; font-weight: 400; color: var(--text-on-gradient); opacity: 0.85; }
.studio__car--tall, .studio__reflection--tall { width: min(66%, 700px); }
@media (min-width: 75em) {
  /* A tall people carrier sits in the gap between the caption and the search panel, never under either.
     The panel is a fixed 465px inside .wrap (max 1400px + 15px gutter), so the car's right edge is pinned
     24px left of it at every width, and its width is whatever the gap leaves (100% - 900px ≈ caption + panel). */
  .studio__car--tall, .studio__reflection--tall {
    left: auto; right: calc(max(0px, (100% - 1400px) / 2) + 15px + 465px + 24px);
    width: clamp(260px, calc(100% - 900px), 440px);
  }
  .studio__car--tall { transform: none; }
  .studio__reflection--tall { transform: scaleY(-1); }
  .hero__caption { max-width: 440px; }
}
@media (min-width: 75em) and (max-width: 89.99em) {
  .hero__caption { max-width: 360px; }
  .hero__caption h1 { font-size: 2.5rem; }
}

/* Shop by make */
.makes { margin-top: 30px; }
@media (min-width: 48em) { .home > .makes { margin-bottom: 50px; } }
.makes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.makes__head h2 { font-size: 1.5rem; }
.makes__all { color: var(--primary-color); font-weight: 600; white-space: nowrap; }
.makes__all:hover, .makes__all:focus-visible { text-decoration: underline; }
.makes__actions { display: flex; align-items: center; gap: 8px; }
.makes__actions .makes__all { margin-right: 10px; }
/* One swipeable row (a slider), like the featured cars; the arrows in the heading move it. */
.makes__list { position: relative; /* keeps each tile's .sr-only text inside the scroller, or it widens the page */ list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 8px; }
.makes__list::-webkit-scrollbar { display: none; }
.makes__list > li { flex: 0 0 138px; scroll-snap-align: start; }
@media (min-width: 48em) { .makes__list > li { flex-basis: 150px; } }
@media (max-width: 35.99em) { .makes__actions .carousel-arrow { display: none; } }
.make { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 16px 10px 14px; border-radius: var(--radius-card);
  background: var(--alternate-background); border: 1px solid rgba(255, 255, 255, 0.06); text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.make:hover, .make:focus-visible { transform: translateY(-3px); border-color: var(--primary-color); background: #45494c; }
.make__logo { display: grid; place-items: center; width: 76px; height: 52px; border-radius: 10px; background: #fff; padding: 6px 8px; }
.make__logo img { display: block; width: auto; height: auto; max-width: 60px; max-height: 40px; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 0.25s, opacity 0.25s; }
.make:hover .make__logo img, .make:focus-visible .make__logo img { filter: none; opacity: 1; }
.make__initial { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: #2b2b2b; }
.make__name { font-weight: 600; line-height: 1.2; }
.make__count { font-size: 0.8125rem; color: var(--primary-color); font-weight: 600; }
.make--jp .make__logo { box-shadow: inset 0 -3px 0 var(--jp-red); }

/* Why choose a Japanese import */
.why__head { max-width: 900px; margin-bottom: 30px; }
.why__head p { max-width: 760px; }
.why__head h3 { display: flex; align-items: center; }
.why__head p { margin-top: 14px; font-size: 1.0625rem; font-weight: 300; opacity: 0.9; }
.why__grid { display: grid; gap: 20px; }
@media (min-width: 64em) { .why__grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; } }
.why__cards { list-style: none; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 36em) { .why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .why__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-card { position: relative; padding: 22px 20px 20px; border-radius: var(--radius-card); background: var(--alternate-background);
  border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease; }
.why-card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 84px; height: 84px; border-radius: 50%; background: var(--jp-red); opacity: 0.09; }
.why-card:hover { transform: translateY(-3px); border-color: rgba(226, 185, 59, 0.5); }
.why-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px;
  background: var(--primary-color); color: var(--text-on-primary-color); font-size: 1.25rem; }
.why-card h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.why-card p { font-size: 0.9688rem; font-weight: 300; line-height: 1.55; opacity: 0.9; }
.why__badge { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--radius-panel);
  background: var(--gradient); border: 1px solid rgba(226, 185, 59, 0.35); }
.why__promise { font-size: 0.9688rem; font-weight: 300; line-height: 1.55; }
.why__promise strong { color: var(--primary-color); font-weight: 600; }
.why__badge .button { width: 100%; }

/* History checked badge */
.hcheck { display: flex; gap: 14px; align-items: flex-start; color: var(--body-font-color); }
.hcheck__shield { flex: none; width: 52px; height: 60px; color: var(--primary-color); }
.hcheck__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.375rem; line-height: 1.1; margin-bottom: 4px; }
.hcheck__lead { font-size: 0.875rem; opacity: 0.8; margin-bottom: 8px; }
.hcheck__list { list-style: none; display: grid; gap: 6px; }
.hcheck__list li { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.hcheck__list svg { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 5px; background: var(--primary-color); color: var(--text-on-primary-color); }
.hcheck--compact { margin: 14px 0 16px; padding: 14px; border-radius: var(--radius-card); background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(226, 185, 59, 0.3); }
.hcheck--compact .hcheck__shield { width: 38px; height: 44px; }
.hcheck--compact .hcheck__title { font-size: 1.0625rem; }
.hcheck--compact .hcheck__lead { font-size: 0.8125rem; margin-bottom: 6px; }
.hcheck--compact .hcheck__list { grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 0.8125rem; }
.hcheck--compact .hcheck__list svg { width: 15px; height: 15px; }

/* Car page chip */
.jp-chip { display: inline-flex; align-items: center; margin-top: 8px; padding: 4px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); }

/* Footer slogan */
.footer-slogan { border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 18px 0; text-align: center; }
.footer-slogan p { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; color: var(--primary-color); }
.footer-slogan__quote { font-weight: 400; font-style: italic; color: var(--footer-font-color); }

@media (prefers-reduced-motion: reduce) {
  .make, .why-card, .make__logo img { transition: none; }
  .make:hover, .make:focus-visible, .why-card:hover { transform: none; }
}

/* ---------- Home banner photo slides (2026-10-21) ----------
   Set from Carventory (Website → Home banner). Same layout as the studio hero: below 1200px the photo,
   then the caption, then the search panel; from 1200px the photo is the backdrop of the whole hero with
   the caption on the left over a dark gradient. Captions stack in one grid cell so the block never jumps
   height between slides; the tallest caption sets it. */
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #0d0d0e; }
.hero--photo .hero__slides { background: #0d0d0e; }
.hero__captions { display: grid; }
.hero__captions > .hero__caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.hero__captions > .hero__caption.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.2s, visibility 0s; }
.hero__caption .hero__headline { font-family: var(--font-heading); font-weight: 700; font-size: 1.75rem !important; line-height: 1.2; margin-bottom: 10px !important; color: var(--text-on-gradient); }
@media (min-width: 48em) { .hero__caption .hero__headline { font-size: 3rem !important; } }
.hero__sub { font-weight: 300; }
.hero__caption .hero__offer { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px !important; padding: 7px 16px; border-radius: 999px;
  background: var(--primary-color); color: var(--text-on-primary-color) !important; font-family: var(--font-heading); font-weight: 800;
  font-size: 0.9375rem !important; letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
@media (min-width: 75em) {
  .hero--photo { padding: 70px 0; }
  .hero--photo .hero__inner { min-height: 500px; }
  .hero__captions { width: 50%; max-width: 560px; padding-right: var(--gutter); }
  .hero__captions > .hero__caption { width: auto; max-width: none; padding: 0; }
  .hero--photo .hero__caption h1, .hero--photo .hero__headline, .hero--photo .hero__sub { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
  .hero--photo .hero__shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0.3) 100%);
  }
}
@media (min-width: 75em) and (max-width: 89.99em) {
  .hero__captions { max-width: 440px; }
  .hero--photo .hero__caption h1, .hero--photo .hero__headline { font-size: 2.5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__captions > .hero__caption, .hero__captions > .hero__caption.is-active { transition: none; }
}

/* ---------- Shop by make (2026-10-22) ----------
   The client wants the ORIGINAL brand logos with no white card behind them. Most of them are black or
   dark navy (Toyota, Honda, Nissan, Audi, Kia, Hyundai, VW…), so the band stays LIGHT and the logos sit
   straight on it — a dark band would mean recolouring them white, which is no longer the original logo.
   Gold text fails on the light panel (1.7:1), so text uses dark gold (#7a5f0c, 5.5:1 on #f4f4f2). */
.makes { --makes-ink: #1a1a1a; --makes-gold: #7a5f0c;
  background: linear-gradient(180deg, #f8f8f6 0%, #eeede9 100%); color: var(--makes-ink);
  border-radius: var(--radius-panel); padding: 22px 16px 16px; box-shadow: var(--shadow-bar); }
@media (min-width: 48em) { .makes { padding: 28px 30px 20px; } }
.makes .makes__head h2 { color: var(--makes-ink); }
.makes__kicker { display: block; margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--makes-gold); }
.makes .makes__all { color: var(--makes-gold); }
.makes .carousel-arrow { background: #fff; color: var(--makes-ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.makes .carousel-arrow:hover, .makes .carousel-arrow:focus-visible { background: var(--primary-color); color: var(--text-on-primary-color); box-shadow: none; }

/* Fade the scroller's trailing edge so a part-hidden tile reads as "more this way", not as a clipped tile. */
.makes__list { gap: 6px; padding: 6px 2px 8px; margin: 0 -2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); }
.makes__list.is-end { -webkit-mask-image: none; mask-image: none; }
.makes__list > li { flex: 0 0 128px; }
@media (min-width: 48em) { .makes__list > li { flex-basis: 144px; } }

.makes .make { position: relative; gap: 6px; padding: 16px 8px 14px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--makes-ink);
  transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s; }
.makes .make:hover, .makes .make:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.06); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.makes .make:focus-visible { outline: 2px solid var(--makes-gold); outline-offset: 2px; }
.makes .make__logo { width: 96px; height: 54px; padding: 0; background: none; border-radius: 0; box-shadow: none; margin-bottom: 4px; }
.makes .make__logo img { max-width: 88px; max-height: 50px; filter: none; opacity: 1; transition: transform .2s; }
.makes .make:hover .make__logo img, .makes .make:focus-visible .make__logo img { transform: scale(1.06); }
.makes .make__initial { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,.06); color: var(--makes-ink); font-size: 1.35rem; }
.makes .make__name { font-family: var(--font-heading); font-weight: 700; font-size: .95rem; color: var(--makes-ink); text-align: center; }
.makes .make__count { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(226,185,59,.2); color: var(--makes-gold); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.makes .make--jp .make__logo { box-shadow: none; }
.makes__legend { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: .78rem; color: #5a5a5a; }
.makes__legend .make__jp { position: static; flex: none; }
.make__jp { position: absolute; top: 10px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--jp-red); box-shadow: 0 0 0 3px rgba(188,0,45,.12); }
@media (prefers-reduced-motion: reduce) { .makes .make, .makes .make__logo img { transition: none; } .makes .make:hover, .makes .make:focus-visible, .makes .make:hover .make__logo img { transform: none; } }

/* ============================================================
   Offer sections, ported from the client's two posters:
   Free MOT & Service (home, partials/offer-mot.php) and the AA warranties (/warranty).
   Panels sit on the theme's own --gradient, like .budget__inner and .signup__box, so they
   read as part of the site rather than a pasted-in black poster.
   ============================================================ */
:root { --promo-gold: var(--primary-color); --promo-ink: #0b0b0b; --font-script: "Kaushan Script", cursive; }

.promo-script { font-family: var(--font-script); color: var(--promo-gold); font-weight: 400; line-height: 1.05; }
.promo-kicker { font-family: var(--font-heading); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }

/* ============ 1. FREE MOT & SERVICE band (home page) ============ */
.mot { padding: 30px 0 0; }
.mot__card {
  position: relative; overflow: hidden; border-radius: var(--radius-panel);
  background: var(--gradient); color: #fff; isolation: isolate; box-shadow: var(--shadow-bar);
}
.mot__photo {
  position: absolute; inset: 0 0 0 auto; width: 55%; z-index: -1;
  background: url('/images/offers/mot-garage.jpg') 50% 62% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
}
.mot__stripe { position: absolute; width: 180px; height: 16px; background: var(--promo-gold); }
.mot__stripe::after { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 7px; background: var(--promo-gold); }
.mot__stripe--tl { top: 6px; left: -62px; transform: rotate(-45deg); }
.mot__stripe--br { bottom: 22px; right: -50px; transform: rotate(-45deg); }
.mot__stripe--br::after { top: -17px; }

.mot__body { position: relative; padding: 40px 50px 34px; max-width: 720px; }
.mot__title { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; line-height: .95; margin: 0; font-size: clamp(2rem, 3.6vw, 3.1rem); }
.mot__title span { display: block; }
.mot__title .l2 { color: var(--promo-gold); }
.mot__kicker { font-size: .95rem; margin: .7rem 0 0; }
.mot__lead { font-size: 1.05rem; line-height: 1.45; margin: 1rem 0 0; max-width: 40ch; }
.mot__lead strong { font-weight: 800; }

.mot__offers { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.mot__offer { display: flex; align-items: center; gap: 12px; }
.mot__tile { flex: none; width: 58px; height: 46px; border: 2.5px solid var(--promo-gold); border-radius: 8px; display: grid; place-items: center; background: #1b1b1b; color: var(--promo-gold); font-size: 1.4rem; }
.mot__tile--mot { padding: 3px; }
.mot__tile--mot svg { width: 100%; height: 100%; display: block; }
.mot__offer h3 { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; margin: 0; line-height: 1.1; }
.mot__offer p { font-family: var(--font-heading); font-weight: 700; color: var(--promo-gold); font-size: .85rem; text-transform: uppercase; margin: 2px 0 0; }

.mot__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(226,185,59,.5); }
.mot__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.mot__trust li { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .02em; }
.mot__trust i { color: var(--promo-gold); font-size: 1.05rem; }
.mot__go { margin-left: auto; }
.mot__go .button { margin: 0; }
.mot__sign { position: absolute; right: 56px; bottom: 34px; margin: 0; font-size: 1.6rem; transform: rotate(-10deg); text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

@media (max-width: 991px) {
  .mot__photo { position: relative; inset: auto; width: 100%; height: 220px; background-position: 45% 62%;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .mot__body { padding: 0 22px 26px; margin-top: -30px; max-width: none; }
  .mot__sign { display: none; }
}
@media (max-width: 480px) {
  .mot__go { margin-left: 0; width: 100%; }
  .mot__go .button { width: 100%; }
}