/* ==========================================================================
   Rex Auto (built from the Gauge site template)
   1. Tokens (edit these first, everything else derives from them)
   2. Fonts
   3. Reset and base
   4. Layout primitives
   5. Components
   6. Utilities and motion
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Colour: Rex Auto. Red is taken from the shop sign. Text/background pairs are 4.5:1 or better. */
  --c-bg: #f5f6f7;
  --c-surface: #ffffff;
  --c-sunken: #eaecee;
  --c-ink: #14171a;
  --c-ink-soft: #484f57;
  --c-line: #d6dade;
  --c-accent: #b4232c;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #f8e6e7;
  --c-accent-text: #b4232c;
  --c-focus: #b4232c;
  /* Fixed dark surfaces (hero, facts band, footer). Same in light and dark mode, like the shop sign. */
  --c-night: #121417;
  --c-night-2: #1b1e22;
  --c-night-line: #2c3137;
  --c-night-ink: #f3f4f5;
  --c-night-soft: #b9bfc6;
  --c-danger: #a3261f;
  --c-ok: #1f6b3f;

  /* Type: Barlow Condensed for headings (road-sign feel), Barlow for text */
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;

  --t-xs: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --t-sm: clamp(0.97rem, 0.94rem + 0.12vw, 1.04rem);
  --t-base: clamp(1.1rem, 1.05rem + 0.2vw, 1.22rem);
  --t-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --t-xl: clamp(1.8rem, 1.5rem + 1.3vw, 2.5rem);
  --t-2xl: clamp(2.4rem, 1.8rem + 2.6vw, 3.9rem);
  --t-3xl: clamp(3rem, 1.7rem + 6vw, 6rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --section-y: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);

  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(20 23 26 / 0.06), 0 4px 14px rgb(20 23 26 / 0.05);

  --w-page: 72rem;
  --w-prose: 40rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 4.25rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0f1113;
    --c-surface: #171a1d;
    --c-sunken: #1c2024;
    --c-ink: #eceeef;
    --c-ink-soft: #a9afb5;
    --c-line: #2c3238;
    --c-accent: #c42a33;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #2b1517;
    --c-accent-text: #ff7a80;
    --c-focus: #ff7a80;
    --c-danger: #ff8a82;
    --c-ok: #7fd1a1;
    --shadow-1: none;
  }
}

/* 2. FONTS ----------------------------------------------------------------- */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* 3. RESET AND BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); line-height: 1.05; letter-spacing: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-accent); color: var(--c-accent-ink); }

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--c-ink); color: var(--c-bg); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* 4. LAYOUT PRIMITIVES ----------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--w-page)); margin-inline: auto; }
.prose { max-width: var(--w-prose); }
.section { padding-block: var(--section-y); }
.section--sunken { background: var(--c-sunken); }
.section__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 44rem; }
.section__head h2 { font-size: var(--t-2xl); text-transform: uppercase; line-height: 0.95; }
.section__head p { color: var(--c-ink-soft); font-size: var(--t-lg); line-height: 1.5; }
.grid { display: grid; gap: var(--s-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.stack > * + * { margin-top: var(--s-4); }

/* 5. COMPONENTS ------------------------------------------------------------ */
/* Utility bar + header */
.utility {
  background: var(--c-night); color: var(--c-night-ink); border-bottom: 1px solid var(--c-night-line);
  font-family: var(--f-label); font-size: var(--t-xs); padding-block: var(--s-2);
}
.utility .wrap { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.utility a { text-decoration: none; }
.utility a:hover { text-decoration: underline; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-night); color: var(--c-night-ink);
  border-bottom: 1px solid var(--c-night-line);
}
.site-header :focus-visible { outline-color: var(--c-night-ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--s-5); }
.brand { min-height: 44px; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; text-decoration: none; line-height: 1; display: inline-flex; align-items: center; gap: var(--s-2); }
.brand::before { content: ""; width: 0.5rem; height: 1.6rem; background: var(--c-accent); border-radius: 1px; }
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__list { display: flex; gap: var(--s-5); }
.nav__list a {
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; padding-block: var(--s-2); border-bottom: 2px solid transparent;
}
.nav__list a:hover, .nav__list a[aria-current="page"] { border-bottom-color: var(--c-accent); }
.nav-toggle { display: none; }

@media (max-width: 52rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: none; border: 1px solid var(--c-night-line); color: var(--c-night-ink); border-radius: var(--r-sm);
    padding: var(--s-2) var(--s-4); cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: var(--t-sm);
    min-height: 44px;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative;
  }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
  .utility { display: none; }
  .nav__list {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; gap: 0;
    background: var(--c-night); border-bottom: 1px solid var(--c-night-line); padding: var(--s-3) var(--gutter) var(--s-5);
    display: none;
  }
  .nav__list[data-open="true"] { display: flex; }
  .nav__list a { display: block; padding-block: var(--s-4); border-bottom: 1px solid var(--c-night-line); font-size: var(--t-lg); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; }
  .nav__list li:last-child a { border-bottom: 0; }
  .nav .btn { display: none; }
}

/* Buttons: min target 44px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill); border: 1.5px solid var(--c-accent);
  background: var(--c-accent); color: var(--c-accent-ink);
  font-weight: 600; font-size: var(--t-sm); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--ghost { background: transparent; color: var(--c-accent-text); }
.btn--ghost:hover { background: var(--c-accent-soft); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Hero */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 8rem) var(--section-y); }
.hero__grid { display: grid; gap: var(--s-7); align-items: end; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.hero h1 { font-size: var(--t-3xl); text-transform: uppercase; line-height: 0.92; max-width: 12ch; }
.hero__lede { margin-top: var(--s-5); font-size: var(--t-lg); color: var(--c-ink-soft); max-width: 34rem; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); font-family: var(--f-label); font-size: var(--t-xs); color: var(--c-ink-soft); }
.hero__panel { border: 1px solid var(--c-line); background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1); }
@media (max-width: 52rem) { .hero__grid { grid-template-columns: 1fr; } }

.hero__panel-title { font-family: var(--f-label); font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-3); }
.hero__panel-list { font-size: var(--t-sm); }

/* Proof strip */
.proof { border-block: 1px solid var(--c-line); }
.proof dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.proof div { padding: var(--s-5) var(--s-4); border-left: 1px solid var(--c-line); }
.proof div:first-child { border-left: 0; padding-left: 0; }
.proof dt { font-size: var(--t-xs); color: var(--c-ink-soft); font-weight: 500; }
.proof dd { margin: var(--s-1) 0 0; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.1; }

/* Cards */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
}
.card h3 { font-size: var(--t-lg); }
.card p { color: var(--c-ink-soft); font-size: var(--t-sm); line-height: 1.6; }
.card__icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--c-accent-soft);
  color: var(--c-accent-text); display: grid; place-items: center;
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }
.card--link { text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card--link:hover { border-color: var(--c-accent); transform: translateY(-2px); }

/* Process steps: a real sequence, so numbering is meaningful here */
.steps { counter-reset: step; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { counter-increment: step; border-top: 2px solid var(--c-ink); padding-top: var(--s-4); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--f-label); font-size: var(--t-xs); color: var(--c-ink-soft); }
.steps h3 { font-size: var(--t-lg); margin-block: var(--s-2); }
.steps p { color: var(--c-ink-soft); font-size: var(--t-sm); }

/* Case studies */
.case { display: grid; gap: var(--s-4); }
.case__media { aspect-ratio: 16 / 10; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case h3 { font-size: var(--t-lg); }
.case__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--c-ink-soft); }

/* Reviews */
.review { margin: 0; border-left: 3px solid var(--c-accent); padding-left: var(--s-5); }
.review blockquote { margin: 0; font-size: var(--t-lg); line-height: 1.45; font-style: italic; }
.review figcaption { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-ink-soft); }

/* Pricing */
.price { display: flex; flex-direction: column; gap: var(--s-4); }
.price__amount { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.03em; }
.price__amount small { font-size: var(--t-sm); font-weight: 400; color: var(--c-ink-soft); letter-spacing: 0; }
.price ul { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.price li { padding-left: 1.6rem; position: relative; }
.price li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--c-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231f4d3a' stroke-width='1.8'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* FAQ using native details: accessible with no JS */
.faq details { border-top: 1px solid var(--c-line); }
.faq details:last-child { border-bottom: 1px solid var(--c-line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s-5) 0; font-size: var(--t-lg); font-weight: 600;
  display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-label); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--s-5); color: var(--c-ink-soft); max-width: var(--w-prose); }

/* Forms */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field .hint { font-size: var(--t-xs); color: var(--c-ink-soft); font-family: var(--f-label); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--c-surface); border: 1.5px solid var(--c-line); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--c-ink-soft); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--c-accent); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--c-danger); }
.field__error { color: var(--c-danger); font-size: var(--t-sm); }
.field__error:empty { display: none; }
.form__status { padding: var(--s-4); border-radius: var(--r-sm); font-size: var(--t-sm); }
.form__status[data-state="ok"] { background: var(--c-accent-soft); color: var(--c-ok); }
.form__status[data-state="error"] { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 52rem) { .contact { grid-template-columns: 1fr; gap: var(--s-6); } }
.contact__list { display: grid; gap: var(--s-4); font-size: var(--t-base); }
.contact__list dt { font-family: var(--f-label); font-size: var(--t-xs); color: var(--c-ink-soft); }
.contact__list dd { margin: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--c-line); padding-block: var(--s-8) var(--s-6); font-size: var(--t-sm); color: var(--c-ink-soft); }
.site-footer .grid { margin-bottom: var(--s-7); }
.site-footer h2 { font-size: var(--t-sm); font-family: var(--f-label); font-weight: 500; color: var(--c-ink); margin-bottom: var(--s-3); }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--c-line); padding-top: var(--s-5); font-size: var(--t-xs); }

/* Simple page (privacy, 404) */
.page { padding-block: var(--section-y); }
.page h1 { font-size: var(--t-2xl); margin-bottom: var(--s-5); }
.page h2 { font-size: var(--t-xl); margin: var(--s-7) 0 var(--s-3); }
.page p, .page li { max-width: var(--w-prose); }
.page p + p { margin-top: var(--s-4); }
.page ul { list-style: disc; padding-left: var(--s-5); margin-top: var(--s-3); }

/* Social links */
.social { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* Cars for sale */
.page-title { font-size: var(--t-3xl); text-transform: uppercase; line-height: 0.92; }
.cars { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); align-items: stretch; }
.car { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.car__media { aspect-ratio: 4 / 3; background: var(--c-sunken); overflow: hidden; }
.car__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.car__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); flex: 1; }
.car__body .btn { margin-top: auto; }
.car h2 { font-size: var(--t-lg); line-height: 1.1; }
.car__price { font-family: var(--f-display); font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--c-accent-text); }
.car__specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin: 0; }
.car__specs dt { font-size: var(--t-xs); color: var(--c-ink-soft); }
.car__specs dd { margin: 0; font-weight: 600; }
.car__facts { display: grid; gap: var(--s-1); font-size: var(--t-sm); border-top: 1px solid var(--c-line); padding-top: var(--s-4); }
.car__facts li::before { content: "\2713"; color: var(--c-accent-text); font-weight: 700; margin-right: var(--s-2); }
.car__more summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); min-height: 44px; display: flex; align-items: center; }
.car__more ul { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-soft); padding-bottom: var(--s-2); list-style: disc; padding-left: var(--s-5); }

/* ===== Rex Auto ======================================================== */

/* Dark hero: the photo and the shop are dark and moody, so the first screen is too */
.hero--dark { background: var(--c-night); color: var(--c-night-ink); padding-block: clamp(2.5rem, 1rem + 6vw, 6rem); }
.hero--dark .hero__lede { color: var(--c-night-soft); }
.hero--dark .hero__note { color: var(--c-night-soft); font-family: var(--f-body); font-size: var(--t-sm); }
.hero--dark .btn--ghost { color: var(--c-night-ink); border-color: rgb(255 255 255 / 0.45); }
.hero--dark .btn--ghost:hover { background: rgb(255 255 255 / 0.08); border-color: var(--c-night-ink); }
.hero--dark :focus-visible { outline-color: var(--c-night-ink); }
.hero__grid--photo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.hero__media { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-night-2); aspect-ratio: 1 / 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__kicker { margin-bottom: var(--s-4); font-weight: 600; font-size: var(--t-sm); color: var(--c-night-soft); }

@media (max-width: 52rem) {
  .hero--dark { padding-top: 0; }
  .hero__grid--photo { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Whole photo, uncropped: the shop sign is at the very top and the plate near the bottom */
  .hero__media { order: -1; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; aspect-ratio: 900 / 860; }
  .hero h1 { font-size: clamp(2.5rem, 1.2rem + 7vw, 3.4rem); }
  .hero__lede { font-size: var(--t-base); margin-top: var(--s-4); }
  .hero__actions { margin-top: var(--s-5); }
  .hero__actions .btn { flex: 1 1 10rem; }
}

/* Facts band: only confirmed facts, no repeated opening hours */
.facts { background: var(--c-night-2); color: var(--c-night-ink); border-top: 1px solid var(--c-night-line); }
.facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); padding-block: var(--s-5); }
.facts li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; font-size: var(--t-sm); line-height: 1.3; }
.facts svg { flex: none; width: 1.5rem; height: 1.5rem; color: #ff8f94; }
@media (max-width: 52rem) { .facts ul { grid-template-columns: 1fr 1fr; } }

/* Services: icon tiles, two per row on a phone */
.services { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.service__icon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--c-accent-soft); color: var(--c-accent-text); display: grid; place-items: center; }
.service__icon svg { width: 1.5rem; height: 1.5rem; }
.service h3 { font-size: var(--t-lg); line-height: 1.05; text-transform: uppercase; }
.service p { font-size: var(--t-xs); color: var(--c-ink-soft); margin-top: 2px; line-height: 1.3; }
.service--key { border-color: var(--c-accent); border-width: 1.5px; }
.services__note { margin-top: var(--s-6); font-size: var(--t-lg); line-height: 1.45; max-width: 40rem; }
.services__note a { font-weight: 600; white-space: nowrap; }
@media (max-width: 30rem) {
  .services { grid-template-columns: 1fr 1fr; }
  .service--key { grid-column: span 2; flex-direction: row !important; align-items: center !important; }
  .service { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); }
  .service h3 { font-size: 1.25rem; }
}

/* Cars teaser on the homepage: swipeable on a phone */
.car-strip { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.car-tile { display: block; text-decoration: none; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.car-tile:hover { border-color: var(--c-accent); }
.car-tile__media { aspect-ratio: 4 / 3; background: var(--c-sunken); overflow: hidden; }
.car-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.car-tile__body { padding: var(--s-4); display: grid; gap: var(--s-1); }
.car-tile h3 { font-size: var(--t-lg); line-height: 1.1; }
.car-tile__meta { font-size: var(--t-sm); color: var(--c-ink-soft); }
.car-tile__price { font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); line-height: 1; color: var(--c-accent-text); margin-top: var(--s-2); }
.cars-cta { margin-top: var(--s-6); }
@media (max-width: 52rem) {
  .car-strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s-2); scrollbar-width: none;
  }
  .car-strip::-webkit-scrollbar { display: none; }
  .car-tile { scroll-snap-align: start; }
  .cars-cta .btn { width: 100%; }
}

/* Contact */
.contact h2 { font-size: var(--t-2xl); text-transform: uppercase; line-height: 0.95; }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hours { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.hours th, .hours td { text-align: left; padding: var(--s-3) 0; border-block: 1px solid var(--c-line); font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.address { font-style: normal; font-size: var(--t-lg); line-height: 1.35; }
.form-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(1.25rem, 0.8rem + 2vw, 2rem); }
.form-card h3 { font-size: var(--t-xl); text-transform: uppercase; margin-bottom: var(--s-2); }
.form-card > p { margin-bottom: var(--s-5); }

/* Footer: dark, like the sign */
.site-footer { background: var(--c-night); color: var(--c-night-soft); border-top: 0; }
.site-footer h2 { color: var(--c-night-ink); font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; text-transform: uppercase; }
.site-footer a { color: var(--c-night-ink); }
.site-footer__legal { border-top-color: var(--c-night-line); }
.site-footer :focus-visible { outline-color: var(--c-night-ink); }

/* Car page: show that "More details" opens */
.car__more summary { list-style: none; gap: var(--s-2); }
.car__more summary::-webkit-details-marker { display: none; }
.car__more summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
.car__more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.cars-intro { font-size: var(--t-lg); color: var(--c-ink-soft); }

/* Phone action bar: call and directions always one tap away */
.action-bar { display: none; }
@media (max-width: 52rem) {
  .action-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
    position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--c-night); border-top: 1px solid var(--c-night-line);
  }
  .action-bar .btn { width: 100%; min-height: 48px; font-size: var(--t-base); }
  .action-bar .btn--ghost { color: var(--c-night-ink); border-color: rgb(255 255 255 / 0.45); }
  .action-bar :focus-visible { outline-color: var(--c-night-ink); }
  body.has-action-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ===== Laptop and desktop layout ===================================== */

/* Split hero: text left, photo filling the right half to the screen edge, sized to fit one screen */
@media (min-width: 64rem) {
  .hero--dark {
    position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: min(44rem, calc(100vh - var(--header-h))); padding-block: 3.5rem;
  }
  .hero--dark > .wrap { width: min(100% - 2 * var(--gutter), var(--w-page)); }
  .hero__grid--photo { display: block; }
  .hero__grid--photo > div { max-width: min(32rem, 44vw); position: relative; z-index: 1; }
  .hero__media {
    position: absolute; inset: 0 0 0 auto; width: 48vw; aspect-ratio: auto; border-radius: 0; margin: 0;
  }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--c-night) 0%, rgb(18 20 23 / 0.55) 18%, rgb(18 20 23 / 0) 45%);
  }
  .hero h1 { font-size: clamp(3.25rem, 1rem + 4.2vw, 5rem); max-width: 13ch; }
  .hero__lede { font-size: 1.25rem; margin-top: var(--s-5); }
}
@media (min-width: 52.01rem) and (max-width: 63.99rem) {
  .hero__media { aspect-ratio: 900 / 860; }
  .hero h1 { font-size: clamp(3rem, 1rem + 5vw, 4rem); }
}

/* Services: heading and note on the left, tiles on the right */
.services-layout { display: grid; gap: var(--s-6); }
.services-layout .section__head { margin-bottom: 0; }
.services-layout .services__note { margin-top: var(--s-4); font-size: var(--t-base); color: var(--c-ink-soft); }
.services-layout .services__cta { margin-top: var(--s-5); }
@media (min-width: 64rem) {
  .services-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s-8); align-items: start; }
  .services-layout__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
  .services { gap: var(--s-4); }
  .service { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); }
  .service h3 { font-size: 1.5rem; }
}
@media (max-width: 63.99rem) { .services__cta { display: none; } }

/* Cars teaser: link sits beside the heading, no empty strip under the cards */
.section__head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); max-width: none; }
.only-wide { display: none; }
@media (min-width: 52.01rem) {
  .only-wide { display: inline-flex; }
  .only-narrow { display: none; }
}

/* Contact: dark info card beside the form card, equal heights */
.contact { align-items: start; }
.contact__info {
  background: var(--c-night); color: var(--c-night-ink); border-radius: var(--r-md);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; gap: var(--s-5);
}
.contact__info .hours th, .contact__info .hours td { border-color: var(--c-night-line); }
.contact__info .btn--ghost { color: var(--c-night-ink); border-color: rgb(255 255 255 / 0.45); }
.contact__info .btn--ghost:hover { background: rgb(255 255 255 / 0.08); }
.contact__info :focus-visible { outline-color: var(--c-night-ink); }
.contact__info .contact__actions { padding-top: var(--s-2); }
.contact__recovery { color: var(--c-night-soft); font-size: var(--t-sm); border-left: 3px solid var(--c-accent); padding-left: var(--s-4); }
.contact__recovery strong { color: var(--c-night-ink); display: block; font-size: var(--t-base); }
@media (min-width: 52.01rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-6); }
  .form { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .form > * { grid-column: 1 / -1; }
  .form > .field--half { grid-column: auto; }
  .form .field textarea { min-height: 7rem; }
}

/* Page header band for inner pages (cars) */
.page-hero { background: var(--c-night); color: var(--c-night-ink); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.page-hero .page-title { font-size: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }
.page-hero .cars-intro { color: var(--c-night-soft); margin-top: var(--s-3); max-width: 40rem; }
.page-hero .cars-intro a { color: var(--c-night-ink); }

/* Quote card (Cloudflare build: no form) */
.quote-card { display: flex; flex-direction: column; gap: var(--s-4); }
.quote-card > p { margin-bottom: 0; }
.quote-card__list { display: grid; gap: var(--s-2); border-block: 1px solid var(--c-line); padding-block: var(--s-4); }
.quote-card__list li::before { content: "\2713"; color: var(--c-accent-text); font-weight: 700; margin-right: var(--s-3); }
.quote-card__btn { align-self: flex-start; }
@media (max-width: 52rem) { .quote-card__btn { align-self: stretch; } }

/* 6. UTILITIES AND MOTION -------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--f-label); }
.muted { color: var(--c-ink-soft); }
.small { font-size: var(--t-xs); }
.contact__title { font-size: var(--t-2xl); }

/* One orchestrated moment: the hero settles in on load. Nothing else animates on its own. */
@media (prefers-reduced-motion: no-preference) {
  .hero__grid > * { animation: settle 700ms var(--ease) both; }
  .hero__grid > *:nth-child(2) { animation-delay: 120ms; }
  @keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Print: clean pages for clients who print quotes */
@media print {
  .utility, .site-header, .nav-toggle, .hero__actions, .form, .skip-link, .action-bar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}