/* Auto Center
   The big-chain look: red used as solid blocks (the header bar, buttons, the tiles' Schedule bars, the booking band)
   on white and light grey, with black bands; square corners and hard 2px borders, no soft shadows. Three bars on
   top: a black offer strip, the red header bar and a grey store bar. Anton for headings (all caps), Roboto for text. */

:root {
  --red: #e2001a;
  --red-dark: #b50016;
  --ink: #111;
  --black: #000;
  --grey: #f2f2f2;
  --line: #d4d4d4;
  --line-dark: #333;
  --muted: #555;
  --muted-dark: #bdbdbd;
  --white: #fff;
  --open: #12a150;
  --focus: #111;

  --head: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 8vw, 104px);
  /* The red bar's height, and how much of the top stays on screen while scrolling (the red bar and, on wider
     screens, the store bar under it), for anchors to land below it. */
  --bar: 78px;
  --header: 136px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Clip sideways overflow here, not on body: phones ignore body/viewport clipping when sizing the page. */
main, .site-footer, .offer { overflow-x: clip; }

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.skip-link {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  border: 2px solid var(--ink);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

section[id], [id="order"] { scroll-margin-top: var(--header); }

.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ---------- Type ---------- */

/* The small label above a heading: a red bar, then the words in spaced capitals. */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.kicker::before { content: ""; flex: none; width: 32px; height: 4px; background: var(--red); }
/* On the light grey sections the darker red keeps the words readable (4.5:1); the bar stays red. */
.services .kicker, .visit .kicker { color: var(--red-dark); }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }

.section-title {
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.section-lede { margin-top: 14px; max-width: 46em; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
  --bg: var(--ink);
  --fg: var(--white);
  --bd: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 22px;
  border: 2px solid var(--bd);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--head);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--lg { min-height: 56px; padding: 10px 28px; font-size: 1.25rem; }
.btn--xl { min-height: 62px; padding: 12px 34px; font-size: 1.4rem; }
.btn--red { --bg: var(--red); }
.btn--red:hover { --bg: var(--red-dark); }
.btn--dark { --bg: var(--ink); }
.btn--dark:hover { --bg: var(--red); }
.btn--white { --bg: var(--white); --fg: var(--red); }
.btn--white:hover { --bg: var(--ink); --fg: var(--white); }
.btn--outline { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
.btn--outline:hover { --bg: var(--ink); --fg: var(--white); }
.btn--ghost { --bg: transparent; --fg: var(--white); --bd: var(--white); }
.btn--ghost:hover { --bg: var(--white); --fg: var(--ink); }
.btn .icon { transition: transform 0.2s; }
.btn:hover .icon { transform: translateX(3px); }

/* ---------- Offer strip (black, above the header) ---------- */

.offer { --focus: var(--white); background: var(--black); color: #dcdcdc; }
.offer__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 24px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.offer__open { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--white); }
.offer__open .icon, .offer__phone .icon, .offer__book .icon { width: 16px; height: 16px; }
.offer__open .icon { color: var(--red); }
.offer__phone, .offer__book { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.offer__phone:hover span, .offer__book:hover span { text-decoration: underline; text-underline-offset: 4px; }
.offer__book { padding-left: 24px; border-left: 1px solid var(--line-dark); color: var(--white); }
.offer__book .icon { color: var(--red); }

/* ---------- Header: the red bar and the store bar ---------- */

.site-header { position: sticky; top: 0; z-index: 50; }

.masthead { --focus: var(--white); position: relative; background: var(--red); color: var(--white); }
.masthead__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: var(--bar); }

.logo { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; flex: 0 1 auto; text-decoration: none; }
.logo__mark {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 48px;
  height: 48px;
  padding: 0 7px;
  background: var(--white);
  color: var(--red);
  font-family: var(--head);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.logo__mark:empty { display: none; }
.logo__name {
  max-width: 13em;
  font-family: var(--head);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.nav { display: flex; align-self: stretch; margin-left: auto; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -4px 0 transparent;
  transition: box-shadow 0.15s, background-color 0.15s;
}
.nav a:hover { box-shadow: inset 0 -4px 0 var(--white); }
/* The page you are on: a black block in the red bar, with the white rule under it. */
.nav a[aria-current="page"] { background: var(--ink); box-shadow: inset 0 -4px 0 var(--white); }
.nav a:focus-visible { outline-offset: -5px; }
.masthead__book { flex: none; }

.menu-btn {
  display: none;
  flex: none;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: -8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  display: block;
  width: 24px; height: 3px;
  background: var(--white);
  transition: transform 0.25s, background-color 0.25s;
}
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -8px; }
.menu-btn__bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-8px) rotate(-45deg); }

.storebar { position: sticky; top: var(--bar); z-index: 49; background: var(--grey); border-bottom: 2px solid var(--line); }
.storebar__inner { display: flex; align-items: stretch; min-height: 56px; }
.storebar__cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 22px;
  border-left: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}
.storebar__cell:first-child { padding-left: 0; border-left: 0; }
.storebar__cell .icon { color: var(--red); }
.storebar__stack { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.storebar__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.storebar__main { font-size: 0.95rem; font-weight: 700; }
.storebar__store { flex: 0 1 auto; }
/* A long location name ends in an ellipsis rather than pushing the bar's other cells off the screen. */
.loc-switch__static { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.storebar__open { font-weight: 700; }
.storebar__call { margin-left: auto; font-weight: 700; }
a.storebar__cell:hover span { color: var(--red-dark); text-decoration: underline; text-underline-offset: 4px; }

/* site.js says whether the shop is open now: the store bar's clock and the store card's square turn green or red. */
.storebar__status .icon { color: var(--muted); }
.storebar__status:has(.is-open) .icon { color: var(--open); }
.storebar__status:has(.is-closed) .icon { color: var(--red); }
.store__status { display: inline-flex; align-items: center; gap: 8px; }
.store__status::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--muted); }
.store__status.is-open::before { background: var(--open); }
.store__status.is-closed::before { background: var(--red); }

/* With two or more locations, site.js puts a picker in the store bar. */
.loc-switch select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  min-height: 32px;
  padding: 0 26px 0 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}
.loc-switch--picker::after {
  content: "";
  position: absolute;
  right: 26px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.logo__name--long { max-width: 16em; font-size: 1.3rem; line-height: 1.05; }

@media (max-width: 1240px) {
  .nav a { padding: 0 12px; font-size: 0.85rem; letter-spacing: 0.06em; }
  .logo__name { font-size: 1.5rem; }
  .logo__name--long { font-size: 1.2rem; }
}
@media (max-width: 1120px) {
  :root { --bar: 68px; --header: 126px; }
  .menu-btn { display: grid; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 3;
    flex-direction: column;
    margin: 0;
    padding: 0 var(--gutter) 12px;
    background: var(--white);
    border-top: 2px solid var(--ink);
    border-bottom: 4px solid var(--red);
  }
  .js .nav { --focus: var(--ink); }
  .js .nav:not(.is-open) { display: none; }
  .nav a { min-height: 54px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem; box-shadow: none; }
  .nav a:focus-visible { outline-offset: -3px; }
  .nav a:hover { color: var(--red); box-shadow: none; }
  .nav a[aria-current="page"] { background: transparent; color: var(--red); box-shadow: inset 5px 0 0 var(--red); padding-left: 22px; }
  .masthead__book { margin-left: auto; }
}
/* Without JavaScript the menu button can't open anything, so the menu shows as a row of links in the bar, and the
   taller bar scrolls away with the page rather than covering it. */
@media (max-width: 1120px) {
  html:not(.js) .site-header, html:not(.js) .storebar { position: static; }
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .masthead__inner { flex-wrap: wrap; padding-bottom: 12px; }
  html:not(.js) .nav { position: static; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; padding: 0; border: 0; background: transparent; }
  html:not(.js) .nav a { min-height: 44px; padding: 0 12px 0 0; border: 0; color: var(--white); font-size: 0.85rem; }
}
@media (max-width: 900px) {
  .storebar__status { display: none; }
}
@media (max-width: 760px) {
  :root { --bar: 62px; --header: 74px; }
  /* Only the red bar stays on screen on a phone; the store bar scrolls away with the page. */
  .storebar { position: static; }
  .offer__inner { justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.1em; }
  .offer__open { margin-right: 0; }
  .offer__book { display: none; }
  .masthead__inner { gap: 10px; padding-block: 8px; }
  .logo { gap: 10px; flex: 0 1 auto; }
  .logo__mark { min-width: 40px; height: 40px; font-size: 1.15rem; padding: 0 6px; }
  .logo__name { font-size: 1.3rem; }
  .logo__name--long { font-size: 1.02rem; }
  /* The phone bar carries Book, Call and Directions here, so the store bar gives its whole width to the shop. */
  .masthead__book, .storebar__call, .storebar__dir { display: none; }
  .storebar__inner { min-height: 52px; }
  .storebar__cell { padding: 4px 0; }
  .storebar__store { flex: 1 1 auto; }
}

/* ---------- Hero ---------- */

.hero {
  --focus: var(--white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  border-bottom: 8px solid var(--red);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.8) 42%, rgba(10, 10, 10, 0.4) 76%, rgba(10, 10, 10, 0.25) 100%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 50%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px clamp(24px, 4vw, 64px);
  min-height: clamp(540px, calc(100svh - 190px), 720px);
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(52px, 7vw, 96px);
}
.hero__copy { max-width: 860px; }
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ececec;
}
.hero__kicker::before { content: ""; flex: none; width: 40px; height: 5px; background: var(--red); }
.hero__title {
  margin-top: 18px;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero__title--long { font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.95; }
.hero__tagline { margin-top: 22px; max-width: 34em; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.5; color: #e4e4e4; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* The round Since badge: a red disc in a white ring, the year big. */
.hero__badge {
  display: grid;
  place-content: center;
  justify-items: center;
  width: clamp(140px, 13vw, 184px);
  aspect-ratio: 1;
  margin: 0 6px 6px 0;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  text-align: center;
  box-shadow: 0 0 0 5px var(--white), inset 0 0 0 9px var(--red), inset 0 0 0 11px var(--white);
}
.hero__badge-since { margin-left: 0.3em; font-weight: 700; font-size: clamp(0.72rem, 0.9vw, 0.88rem); letter-spacing: 0.3em; text-transform: uppercase; }
.hero__badge-year { margin-top: 2px; font-family: var(--head); font-size: clamp(2.5rem, 3.6vw, 3.4rem); line-height: 1; }

@media (max-width: 760px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); align-content: end; min-height: 0; padding-top: 36px; padding-bottom: 44px; gap: 0; }
  .hero__bg img { object-position: 70% 50%; }
  .hero__bg::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.82) 55%, rgba(10, 10, 10, 0.94)); }
  .hero__badge { order: -1; justify-self: start; width: 96px; margin: 5px 0 24px 5px; box-shadow: 0 0 0 4px var(--white), inset 0 0 0 7px var(--red), inset 0 0 0 9px var(--white); }
  .hero__badge-since { font-size: 0.58rem; }
  .hero__badge-year { font-size: 1.85rem; }
  .hero__kicker { gap: 10px; font-size: 0.72rem; letter-spacing: 0.12em; }
  .hero__kicker::before { width: 28px; height: 4px; }
  .hero__title { font-size: clamp(3rem, 15vw, 5rem); }
  .hero__title--long { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { flex: 1 1 auto; font-size: 1.2rem; min-height: 56px; padding: 10px 18px; }
}

/* ---------- Sections and previews ---------- */

.preview { padding-block: var(--section); }
.preview__more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 480px) {
  .preview__more .btn { flex: 1 1 100%; white-space: normal; text-align: center; padding-inline: 16px; }
}

/* Services: the tiles, photo on top, a red Schedule bar at the bottom. */
.services { background: var(--grey); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.tile { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 2px solid var(--ink); }
.tile__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey); border-bottom: 2px solid var(--ink); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__media--none { display: grid; place-items: center; color: #a3a3a3; }
.tile__media--none svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: miter; }
.tile__body { flex: 1; padding: 18px 18px 22px; }
.tile__title { font-family: var(--head); font-weight: 400; font-size: 1.55rem; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.tile__title a { display: block; padding-block: 9px; margin-block: -9px; text-decoration: none; }
.tile__title a:hover { color: var(--red); }
.tile__text { margin-top: 8px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; }
.tile__book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  margin: 0 -2px -2px;
  padding: 6px 20px;
  background: var(--red);
  color: var(--white);
  font-family: var(--head);
  font-size: 1.1rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s;
}
.tile__book:hover { background: var(--red-dark); }
.tile__book .icon { transition: transform 0.2s; }
.tile__book:hover .icon { transform: translateX(4px); }

@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* On a phone each tile is a row: the photo beside the name and short line, the Schedule bar under both. */
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tile { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
  .tile__media { aspect-ratio: auto; min-height: 108px; border-bottom: 0; border-right: 2px solid var(--ink); }
  .tile__body { padding: 12px 14px 14px; }
  .tile__title { font-size: 1.25rem; }
  .tile__title a { padding-block: 12px; margin-block: -12px; }
  .tile__text { margin-top: 6px; font-size: 0.88rem; line-height: 1.45; }
  .tile__book { grid-column: 1 / -1; min-height: 48px; border-top: 0; }
}

/* Vehicles: every make as a square chip. */
.vehicles { background: var(--white); }
.makes { display: flex; flex-wrap: wrap; gap: 10px; }
.make-chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  background: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.make-chip:hover { background: var(--red); border-color: var(--red); color: var(--white); }
@media (max-width: 560px) { .make-chip { min-height: 44px; padding: 6px 13px; font-size: 0.82rem; } }

/* Why us: the black band, with the shop in figures and three photos from inside it. */
.why { --focus: var(--white); background: var(--ink); color: var(--white); }
.why .kicker { color: #ececec; }
.why .section-title { color: var(--white); }
.why__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(24px, 5vw, 80px); align-items: start; }
.why__intro .section-head { margin-bottom: 0; }
.why__story { display: grid; gap: 22px; justify-items: start; padding-top: 30px; }
.why__story p { color: #d6d6d6; }
.why__story .why__lead { font-size: clamp(1.15rem, 1.8vw, 1.42rem); line-height: 1.5; color: #f0f0f0; }
.why__story .preview__more { margin-top: 4px; }

.why__figures {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 4px solid var(--red);
}
.stat { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 0 0; }
.stat + .stat { padding-left: clamp(18px, 3vw, 36px); border-left: 1px solid var(--line-dark); }
.stat__num { order: -1; font-family: var(--head); font-weight: 400; font-size: clamp(3.4rem, 7vw, 5.75rem); line-height: 0.95; color: var(--white); }
.stat__label { font-weight: 700; font-size: 0.82rem; line-height: 1.35; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); }

.why__inside { margin-top: clamp(48px, 6vw, 76px); }
.why__inside-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ececec;
}
.why__inside-label::before { content: ""; flex: none; width: 32px; height: 4px; background: var(--red); }
.inside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 20px); margin-top: 18px; }
.inside__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #222; }
.inside__item img { width: 100%; height: 100%; object-fit: cover; }
.inside__item figcaption {
  position: absolute;
  left: 0; bottom: 0;
  max-width: 100%;
  padding: 8px 14px 7px;
  background: var(--red);
  font-family: var(--head);
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .why__intro { grid-template-columns: minmax(0, 1fr); }
  .why__story { padding-top: 0; }
}
@media (max-width: 640px) {
  /* The figures stack: each number beside its label. */
  .why__figures { grid-auto-flow: row; }
  .stat, .stat + .stat { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--line-dark); }
  .stat__num { font-size: 3.2rem; }
  .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside li:first-child { grid-column: 1 / -1; }
  .inside li:first-child .inside__item { aspect-ratio: 16 / 9; }
  .inside__item figcaption { font-size: 0.85rem; padding: 6px 10px 5px; }
}

/* The about page (the band without "preview"): the Inside-the-shop photos taller, each caption a bar across its foot. */
.why:not(.preview) .inside__item { aspect-ratio: 4 / 5; }
.why:not(.preview) .inside__item figcaption { right: 0; padding: 12px 16px 11px; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
@media (max-width: 640px) {
  /* The first across the page, a little taller than on the home page; the other two side by side. */
  .why:not(.preview) .inside li:first-child .inside__item { aspect-ratio: 4 / 3; }
  .why:not(.preview) .inside__item figcaption { padding: 8px 10px 7px; font-size: 0.9rem; }
}

/* The about page's makes, group by group: a card per group, its name in a black bar, its makes as chips. */
.make-groups { padding-block: var(--section); background: var(--white); }
.make-groups__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.make-group { min-width: 0; border: 2px solid var(--ink); }
.make-group__name { padding: 12px 18px 11px; background: var(--ink); color: var(--white); font-family: var(--head); font-weight: 400; font-size: 1.6rem; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; border-bottom: 4px solid var(--red); }
.make-group__makes { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; }
.make-groups__more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 480px) {
  .make-group__makes { padding: 14px; }
  .make-groups__more .btn { flex: 1 1 100%; white-space: normal; text-align: center; padding-inline: 16px; }
}

/* Gallery: the first photo large, the next two stacked beside it. */
.gallery { background: var(--white); }
.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(150px, 16vw, 236px));
  gap: clamp(10px, 1.5vw, 18px);
}
.strip__item { position: relative; overflow: hidden; background: var(--grey); border: 2px solid var(--ink); }
.strip__item:first-child { grid-column: span 2; grid-row: span 2; border-bottom: 8px solid var(--red); }
.strip__item:only-child { grid-column: 1 / -1; }
.strip__item:nth-child(2):last-child { grid-row: span 2; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.strip__item:hover img { transform: scale(1.04); }
@media (max-width: 640px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .strip__item, .strip__item:nth-child(2):last-child { grid-row: auto; aspect-ratio: 4 / 3; }
  .strip__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-bottom-width: 6px; }
}

/* Find the shop: the store card across the page, under its heading. A black name bar (the shop and whether it is
   open), then the address beside the buttons; on /contact (.store--page) the address, phone, hours and buttons
   beside the map. */
.visit { background: var(--grey); }
.store { --pad: clamp(16px, 2.5vw, 28px); background: var(--white); border: 2px solid var(--ink); }
.store__bar {
  --focus: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  padding: 16px var(--pad) 18px;
  background: var(--ink);
  color: var(--white);
  border-bottom: 6px solid var(--red);
}
.store__tag { grid-column: 1; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dark); }
.store__name {
  grid-column: 1;
  margin-top: 6px;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.store__bar .store__status {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  padding: 8px 14px;
  border: 2px solid var(--line-dark);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
}
.store__bar .store__status::before { background: var(--muted-dark); }
.store__bar .store__status.is-open::before { background: var(--open); }
.store__bar .store__status.is-closed::before { background: var(--red); }

.store__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.store__info { display: grid; align-content: start; min-width: 0; }
.store__cell { padding: 18px var(--pad); border-bottom: 1px solid var(--line); }
.store__label { margin-bottom: 6px; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.store__addr { font-size: 1.12rem; font-weight: 500; line-height: 1.45; }
.store__cell .btn--sm { margin-top: 12px; }
.store__cell--hours .store__label { margin-bottom: 2px; }
.store__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--head);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.store__phone:hover { color: var(--red); }
.store__ctas { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px var(--pad) 22px; }
.store__ctas .btn { flex: 1 1 150px; }
.store__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.store__more:hover { color: var(--red-dark); }
.store__more:hover .icon { transform: translateX(3px); }
.store__more .icon { width: 18px; height: 18px; color: var(--red); transition: transform 0.2s; }

/* The home page's card: the address, then the buttons in one row. */
.store__body--compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.store__body--compact .store__cell { border-bottom: 0; }
.store__body--compact .store__ctas { align-items: center; gap: 10px 18px; padding: 18px var(--pad); }
.store__body--compact .store__ctas .btn { flex: 0 0 auto; min-width: 150px; }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.98rem; text-align: left; }
.hours tr:first-child th, .hours tr:first-child td { border-top: 0; }
.hours th { font-weight: 500; }
.hours td { padding-left: 12px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Today's row (site.js marks it): a red bar at its start (on the cell: Safari draws no shadow on a row). */
.hours tr.is-today th { padding-left: 12px; font-weight: 700; box-shadow: inset 4px 0 0 var(--red); }
.hours tr.is-today td { padding-right: 8px; }

.map { position: relative; min-height: 380px; background: var(--grey); border-left: 2px solid var(--ink); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The Tab key goes into the map, whose own controls take focus there: a ring round the map says where it went. */
.map:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; }

@media (max-width: 900px) {
  .store__body, .store__body--compact { grid-template-columns: minmax(0, 1fr); }
  .map { min-height: 300px; border-left: 0; border-top: 2px solid var(--ink); }
  .store__body--compact .store__ctas { padding-top: 0; }
  .store__body--compact .store__ctas .btn { flex: 1 1 140px; }
}
@media (max-width: 640px) {
  .store__bar { grid-template-columns: minmax(0, 1fr); }
  .store__bar .store__status { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
}

/* How to book (the contact page's id="order"): a red block under the store card, its buttons beside the words. */
.book-note {
  --focus: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 36px);
  background: var(--red);
  color: var(--white);
}
.book-note h3 { font-family: var(--head); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.05; text-transform: uppercase; }
.book-note p { max-width: 46em; text-wrap: balance; }
/* With booking online the note has two buttons: Book online (white), then Call (outlined). */
.book-note > .btn + .btn { --bg: transparent; --fg: var(--white); --bd: var(--white); }
.book-note > .btn + .btn:hover { --bg: var(--white); --fg: var(--ink); }
@media (min-width: 901px) {
  .book-note { grid-template-columns: minmax(0, 1fr) auto auto; }
  .book-note h3 { grid-column: 1; grid-row: 1; }
  .book-note p { grid-column: 1; grid-row: 2; }
  .book-note > .btn { grid-column: 2; grid-row: 1 / span 2; }
  .book-note > .btn + .btn { grid-column: 3; }
}
@media (max-width: 900px) {
  .book-note > .btn { margin-top: 6px; white-space: normal; text-align: center; }
}

/* ---------- The section pages ---------- */

/* Each section, in full on its own page: the same bands as the home page's previews. */
.services, .vehicles, .why, .gallery, .visit { padding-block: var(--section); }
/* Small labels on the light grey bands: the darker red keeps them readable (4.5:1); the bar stays red. */
.vehicles:not(.preview) .kicker, .svc-details .kicker, .svc-more .kicker, .sheet .kicker { color: var(--red-dark); }

/* The name band of the section, privacy, booking and 404 pages: black, the page's name huge, a red rule under it. */
.svc-hero { --focus: var(--white); position: relative; background: var(--ink); color: var(--white); border-bottom: 8px solid var(--red); }
.page-hero { padding: clamp(18px, 3vw, 36px) 0 clamp(30px, 4.5vw, 54px); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 10px; background: var(--red); }
.crumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.crumbs [aria-current] { color: var(--white); }
.svc-hero__title {
  margin-top: 4px;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.4vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Services: the category rail on the left and every tile on the board beside it, the black call box ending the
   board. */
.board {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 36px);
}
/* Beside a long board the rail stays in view, under the bars that stay on screen. */
.rail { position: sticky; top: calc(var(--header) + 20px); min-width: 0; }
/* Without JavaScript there is no filter, so no rail: the board takes the whole width. (With it, the rail's column is
   there from the start, so the board doesn't move when site.js shows the filter.) */
html:not(.js) .board { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .rail { display: none; }
/* The buttons are divided by the black showing through the gaps between them. */
.rail__filter { display: grid; gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.rail__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px 8px 18px;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--head);
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.rail__btn:hover { background: var(--grey); }
.rail__btn:focus-visible { outline-offset: -6px; }
.rail__btn[aria-pressed="true"] { --focus: var(--white); background: var(--red); color: var(--white); }
.rail__count {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  background: var(--grey);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0;
}
.rail__btn[aria-pressed="true"] .rail__count { background: var(--white); color: var(--red-dark); }

.tiles--board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--board .tile__body { display: flex; flex-direction: column; }
.tile__cat { margin-bottom: 8px; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-dark); }
.tile__price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tile__price::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--red); }
.tiles--board .tile__text { margin-bottom: 4px; }

/* The call box, the board's last item: one tile wide, or as wide as the last row of tiles leaves free, so no tile
   stands alone on it; under a full last row it runs across the board. It follows the filter (only the tiles shown
   count). Where a browser can't count them, it stays one tile wide. Once wide enough, its button sits beside the words. */
.help {
  --focus: var(--white);
  container-type: inline-size;
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 26px 24px 24px;
  background: var(--ink);
  color: var(--white);
  border-top: 6px solid var(--red);
}
.help__in { display: grid; gap: 20px; }
.help__copy { min-width: 0; }
.help__title { font-family: var(--head); font-weight: 400; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; }
.help__text { margin-top: 10px; max-width: 34em; color: #d6d6d6; }
.help__call { white-space: normal; text-align: center; }
@container (min-width: 540px) {
  .help__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
  .help__call { min-width: 230px; }
}
.tiles--board > .help:first-child { grid-column: 1 / -1; }
@media (min-width: 1240.02px) {
  .tiles--board:has(> .tile:nth-child(3n + 1 of .tile:not([hidden])):nth-last-child(1 of .tile:not([hidden]))) > .help { grid-column: span 2; }
  .tiles--board:has(> .tile:nth-child(3n of .tile:not([hidden])):nth-last-child(1 of .tile:not([hidden]))) > .help { grid-column: 1 / -1; }
}
@media (min-width: 560.02px) and (max-width: 1240px) {
  .tiles--board:has(> .tile:nth-child(2n of .tile:not([hidden])):nth-last-child(1 of .tile:not([hidden]))) > .help { grid-column: 1 / -1; }
}

@media (max-width: 1240px) { .tiles--board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  /* The rail goes over the board, its buttons two by two (an odd last one across both), so the first tile is
     close to the top. */
  .board { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .rail__filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rail__btn { min-height: 52px; padding: 6px 8px 6px 14px; font-size: 1.1rem; }
  .rail__count { min-width: 32px; height: 32px; }
  .help { padding: 22px 18px 18px; }
  /* Until site.js shows the filter, its room (one row of buttons, or two) is kept, so the tiles don't jump down. */
  .js .rail:has(> [data-chips][hidden]) { min-height: 56px; }
  .js .rail:has(> [data-chips][hidden] > :nth-child(3)) { min-height: 110px; }
}
@media (max-width: 560px) {
  .tiles--board { grid-template-columns: minmax(0, 1fr); }
  .tile__cat { margin-bottom: 4px; font-size: 0.7rem; }
  .tile__price { padding-top: 8px; font-size: 0.76rem; }
  .rail__btn { gap: 8px; padding: 6px 6px 6px 12px; font-size: 1.02rem; letter-spacing: 0.03em; }
  .rail__count { min-width: 28px; height: 28px; padding: 0 4px; font-size: 0.85rem; }
}

/* Vehicles: the groups as square tabs, each make as a card with its name in a black bar. */
.vehicles:not(.preview) { background: var(--grey); }
.tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 100%; margin-bottom: clamp(24px, 3vw, 36px); border: 2px solid var(--ink); background: var(--white); }
.tab {
  min-height: 54px;
  padding: 8px 28px;
  border: 0;
  border-left: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--head);
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.tab:first-child { border-left: 0; }
.tab:hover { background: var(--grey); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: inset 0 -6px 0 var(--red); }
.tab:focus-visible { outline: 3px solid var(--red); outline-offset: -7px; }
.vehicles__panel + .vehicles__panel { margin-top: 44px; }
.vehicles.is-tabbed .vehicles__panel + .vehicles__panel { margin-top: 0; }
.vehicles__panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
section[tabindex="-1"]:focus { outline: none; } /* the section is only a programmatic focus target after a link, not a control */
.vehicles__group { margin-bottom: 18px; font-family: var(--head); font-weight: 400; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.vehicles.is-tabbed .vehicles__group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vehicles__makes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
.make { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 2px solid var(--ink); }
.make__name { padding: 12px 16px 11px; background: var(--ink); color: var(--white); font-family: var(--head); font-weight: 400; font-size: 1.5rem; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.make__issues { display: grid; padding: 4px 16px 8px; }
.make__issues li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.97rem; line-height: 1.45; overflow-wrap: anywhere; }
.make__issues li:first-child { border-top: 0; }
.make__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -6px 0 -10px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-dark);
  text-decoration: none;
}
.make__link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (max-width: 1100px) { .vehicles__makes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .vehicles__makes { grid-template-columns: minmax(0, 1fr); }
  .vehicles__tabs.tabs { display: grid; width: 100%; }
  .tab { padding: 8px 6px; font-size: 1.1rem; }
}

/* Gallery: up to six photos in a square grid (four across when there are four), each numbered in red, with its
   caption in a black bar. */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); }
.wall:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wall__item { min-width: 0; }
.wall__fig { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--grey); border: 2px solid var(--ink); }
.wall__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.wall__item:hover img { transform: scale(1.04); }
.wall__no {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 46px;
  padding: 0 8px;
  background: var(--red);
  color: var(--white);
  font-family: var(--head);
  font-size: 1.4rem;
  line-height: 1;
}
.wall__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px 9px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--head);
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.gallery__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 900px) {
  .wall, .wall:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .wall__no { min-width: 40px; height: 36px; font-size: 1.1rem; }
  .wall__cap { padding: 7px 10px 6px; font-size: 0.9rem; }
  .gallery__foot .btn { flex: 1 1 100%; white-space: normal; text-align: center; padding-inline: 16px; }
}

/* ---------- Service pages ---------- */

/* The hero: the copy, and beside it the service's photo on a red block. */
.svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 36px clamp(28px, 5vw, 72px); padding-top: clamp(18px, 3vw, 36px); padding-bottom: clamp(40px, 6vw, 76px); }
.svc-hero__inner--photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.svc-hero__copy { min-width: 0; max-width: 780px; }
.svc-hero .kicker { margin: 10px 0 12px; color: #ececec; }
.svc-hero__intro { margin-top: 18px; max-width: 40em; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #e4e4e4; }
/* The price (or "Call for a quote"): a line of spaced capitals after a red square, not a button. */
.svc-hero__price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ececec;
}
.svc-hero__price::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--red); }
.svc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.svc-hero__media { position: relative; margin: 0 14px 14px 0; }
.svc-hero__media::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: var(--red); }
.svc-hero__media img { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid var(--white); }
@media (max-width: 900px) {
  .svc-hero__inner--photo { grid-template-columns: minmax(0, 1fr); }
  .svc-hero__media { max-width: 560px; }
}
@media (max-width: 600px) {
  .svc-hero__ctas .btn { flex: 1 1 100%; font-size: 1.2rem; min-height: 56px; padding: 10px 18px; white-space: normal; }
  .svc-hero__media { margin: 0 10px 10px 0; }
  .svc-hero__media::before { inset: 10px -10px -10px 10px; }
}

/* The cards of the service, privacy and booking pages: white, a hard black border, the heading over a red bar. */
.svc-details { padding-block: var(--section); background: var(--grey); }
.svc-details__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.svc-box, .panel { min-width: 0; padding: clamp(18px, 2.6vw, 30px); background: var(--white); border: 2px solid var(--ink); }
.svc-box h2, .panel h2 { font-family: var(--head); font-weight: 400; font-size: clamp(1.55rem, 2.4vw, 1.95rem); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.svc-box > h2::after, .panel > h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 12px; background: var(--red); }
.svc-list { display: grid; gap: 10px; margin-top: 16px; }
.svc-list li { position: relative; padding-left: 24px; }
.svc-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--red); }

/* The makes with a problem this service deals with. */
.svc-related { padding-block: var(--section); background: var(--white); }
.svc-related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.svc-related__list a { display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 16px 16px; border: 2px solid var(--ink); text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.svc-related__list strong { font-family: var(--head); font-weight: 400; font-size: 1.3rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--red); }
.svc-related__list span { color: var(--muted); }
/* The focus ring stays dark: it sits outside the link, on the light band, also while the link is hovered. */
.svc-related__list a:hover { background: var(--ink); color: var(--white); }
.svc-related__list a:hover strong, .svc-related__list a:hover span { color: var(--white); }

/* The other services (and the 404 page's links): white bars with a red arrow. */
.svc-more { padding-block: var(--section); background: var(--grey); }
.svc-more__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.svc-more__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding: 10px 20px;
  background: var(--white);
  border: 2px solid var(--ink);
  font-family: var(--head);
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 0.15s, color 0.15s;
}
.svc-more__list a::after { content: ""; flex: none; width: 11px; height: 11px; margin-right: 4px; border-top: 3px solid var(--red); border-right: 3px solid var(--red); transform: rotate(45deg); }
.svc-more__list a:hover { background: var(--ink); color: var(--white); }

/* ---------- Service film (public/shared/scene-player.js) ---------- */

/* The film's palette: Auto Center's light grey stage, near-black lines, steel greys, the design red, an amber
   warning and a green "new part". */
.film {
  --scene-bg: var(--grey);
  --scene-ink: var(--ink);
  --scene-metal: #a9adb3;
  --scene-metal-dark: #5f646b;
  --scene-rubber: #1c1c1c;
  --scene-accent: var(--red);
  --scene-warn: #f0a400;
  --scene-new: #14894a;
  --scene-paper: var(--white);
  --scene-shadow: rgba(0, 0, 0, 0.14);
  --scene-font: var(--head);
  padding-block: var(--section);
  background: var(--white);
}
.film__stage { background: var(--scene-bg); border: 2px solid var(--ink); }
.film__svg { display: block; width: 100%; height: auto; }
/* The player's caption: a black bar under the stage, the step number in a red block. */
.film__caption {
  --focus: var(--white);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  column-gap: 18px;
  min-height: 7em;
  padding: 16px 20px 18px;
  background: var(--ink);
  color: var(--white);
}
.film__count {
  grid-row: span 2;
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  justify-content: center;
  min-width: 70px;
  padding: 10px 10px 8px;
  background: var(--red);
  font-family: var(--head);
  font-size: 2.3rem;
  line-height: 1;
}
.film__of { font-size: 1.05rem; }
.film__step-title { font-family: var(--head); font-weight: 400; font-size: 1.65rem; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; }
.film__step-text { margin-top: 6px; max-width: 44em; color: #d6d6d6; }
.film__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.film__steps { display: flex; flex-wrap: wrap; gap: 6px; }
.film__step { min-width: 44px; min-height: 44px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--head); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.film__step:hover { background: var(--grey); }
.film__step[aria-current="step"] { background: var(--red); border-color: var(--red); color: var(--white); }
.film__btn {
  min-height: 44px;
  padding: 8px 20px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-family: var(--head);
  font-size: 1.1rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.film__btn:hover { background: var(--red); border-color: var(--red); }
.film__btn:disabled { opacity: 0.45; cursor: default; }
.film__progress { flex: 1 1 140px; height: 6px; background: var(--line); overflow: hidden; }
.film__progress span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
/* The steps as text, without JavaScript: each numbered in a red square. */
.film__list { display: grid; gap: 14px; margin-top: 24px; counter-reset: film-step; }
.film__list li { position: relative; min-height: 38px; padding-left: 54px; counter-increment: film-step; }
.film__list li::before {
  content: counter(film-step);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: var(--red);
  color: var(--white);
  font-family: var(--head);
  font-size: 1.2rem;
}
.film__list h3 { font-family: var(--head); font-weight: 400; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
.film__list p { margin-top: 2px; color: var(--muted); }
.film.is-live .film__list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .film__caption { column-gap: 14px; padding: 14px 14px 16px; }
  .film__count { min-width: 56px; font-size: 1.8rem; }
  .film__step-title { font-size: 1.3rem; }
}

/* Scene paint: the drawing's parts take this design's colours. */
.film__svg .s-bg { fill: var(--scene-bg); }
.film__svg .s-ink { fill: var(--scene-ink); }
.film__svg .s-metal { fill: var(--scene-metal); }
.film__svg .s-metal-dark { fill: var(--scene-metal-dark); }
.film__svg .s-rubber { fill: var(--scene-rubber); }
.film__svg .s-accent { fill: var(--scene-accent); }
.film__svg .s-warn { fill: var(--scene-warn); }
.film__svg .s-new { fill: var(--scene-new); }
.film__svg .s-paper { fill: var(--scene-paper); }
.film__svg .s-shadow { fill: var(--scene-shadow); }
.film__svg .s-line, .film__svg .s-line-thin, .film__svg .s-line-accent, .film__svg .s-line-paper { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.film__svg .s-line { stroke: var(--scene-ink); stroke-width: 4; }
.film__svg .s-line-thin { stroke: var(--scene-ink); stroke-width: 2; }
.film__svg .s-line-accent { stroke: var(--scene-accent); stroke-width: 4; }
.film__svg .s-line-paper { stroke: var(--scene-paper); stroke-width: 4; }
/* Anton has one weight, so the scene's text is set at its own (no faux bold). */
.film__svg .s-text { fill: var(--scene-ink); font-family: var(--scene-font); font-weight: 400; font-size: 30px; letter-spacing: 0.04em; }
.film__svg .s-text-accent { fill: var(--scene-accent); font-family: var(--scene-font); font-weight: 400; font-size: 30px; letter-spacing: 0.04em; }

/* ---------- Booking pages (the form, the book-by-phone page, the notices, a booking's own page) ---------- */

/* The grey sheet the panels sit on. */
.sheet { padding-block: var(--section); background: var(--grey); }
.btn--sm { min-height: 44px; padding: 6px 14px; font-size: 1rem; }
.btn--sm .icon { width: 18px; height: 18px; }

/* One column that never grows to fit its content: the day strip scrolls inside it instead of widening the form. */
.book-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.book-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.book-legend { width: 100%; margin: 0 0 18px; padding: 0; }
.book-legend h2 { display: flex; align-items: center; gap: 14px; }
.book-step__no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  background: var(--red);
  color: var(--white);
  font-size: 1.45rem;
}
.book-fieldset > .book-field__error { margin: -6px 0 14px; }

/* Out of sight for people; a program filling in every field fills this one too. */
.book-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.book-alert { margin-bottom: clamp(16px, 2.4vw, 26px); padding: 14px 18px; border: 2px solid var(--red); border-left-width: 8px; background: #fdecee; font-weight: 700; }

/* 1. The services, as radio cards. */
.book-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.book-service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  height: 100%;
  padding: 14px 16px;
  border: 2px solid #8a8a8a;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.book-service:hover { border-color: var(--ink); }
.book-service input { grid-row: span 2; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.book-service__name { font-family: var(--head); font-size: 1.25rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; }
.book-service__text { font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
.book-service:has(input:checked) { border-color: var(--red); background: #fdecee; box-shadow: inset 6px 0 0 var(--red); }

/* 2. The day strip (book.js) or, without JavaScript, the day picker; then the day's times. */
.book-strip {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 3px 3px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.book-day {
  position: relative;
  flex: none;
  display: grid;
  justify-items: center;
  width: 80px;
  padding: 10px 6px 8px;
  border: 2px solid #8a8a8a;
  background: var(--white);
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
}
.book-day input, .book-time input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.book-day__weekday { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.book-day__date { margin-top: 2px; font-family: var(--head); font-size: 2rem; line-height: 1; }
.book-day__month { font-size: 0.85rem; color: var(--muted); }
.book-day__state { min-height: 1.2em; margin-top: 4px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.book-day:hover { border-color: var(--ink); }
.book-day:has(input:checked) { border-color: var(--red); background: var(--red); color: var(--white); }
.book-day:has(input:checked) .book-day__month, .book-day:has(input:checked) .book-day__state { color: var(--white); }
.book-day:has(input:disabled) { border-style: dashed; border-color: #b0b0b0; background: var(--grey); color: var(--muted); cursor: not-allowed; }
.book-day input:disabled { cursor: not-allowed; }
.book-day:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.book-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.book-pick label { font-weight: 700; }
.book-pick select { flex: 1 1 220px; width: auto; }

.book-times { display: flex; flex-wrap: wrap; gap: 8px; }
.book-time { position: relative; display: inline-flex; }
.book-time span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 46px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--head);
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.book-time:hover span { background: var(--grey); }
.book-time input:checked + span { border-color: var(--red); background: var(--red); color: var(--white); }
.book-time input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.book-times__note { font-weight: 700; color: var(--muted); }

/* 3. The details. */
.book-fields { display: grid; gap: 16px; max-width: 760px; }
.book-car { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 12px; }
.book-field { display: grid; align-content: start; gap: 6px; }
/* The car's three fields line up row by row (labels, inputs, messages), so a label that wraps or a message under one
   field never moves another field's input. */
.book-car .book-field { grid-row: span 3; grid-template-rows: subgrid; }
.book-field label { font-weight: 700; }
.book-field__optional { font-weight: 400; color: var(--muted); }
.book-field input, .book-field textarea, .book-pick select {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid #767676;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.book-field textarea { min-height: 120px; resize: vertical; }
.book-field input:hover, .book-field textarea:hover, .book-pick select:hover { border-color: var(--ink); }
.book-field input:focus, .book-field textarea:focus, .book-pick select:focus { border-color: var(--ink); }
.book-field [aria-invalid="true"] { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
.book-field__error { font-size: 0.95rem; font-weight: 700; color: var(--red-dark); }
@media (max-width: 600px) {
  .book-car { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .book-field--model { grid-column: 1 / -1; }
}

/* The bot check, then the button. Without JavaScript the check can't run, so the button gives way to a call. */
.book-submit-row { display: grid; justify-items: start; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 2px solid var(--line); }
.book-turnstile { width: 100%; max-width: 400px; min-height: 65px; }
.book-submit { width: 100%; max-width: 380px; }
.book-submit:disabled { opacity: 0.6; cursor: progress; }
.book-nojs { display: none; padding: 14px 18px; background: var(--ink); color: var(--white); font-weight: 700; border-left: 6px solid var(--red); }
.book-nojs a { color: inherit; }
html:not(.js) .book-nojs { display: block; }
html:not(.js) .book-submit, html:not(.js) .book-turnstile { display: none; }
.book-privacy { font-size: 0.95rem; color: var(--muted); }
/* The two links inside a sentence get a 44px tap height from padding alone, so the line doesn't grow. */
.book-nojs a, .book-privacy a { padding-block: 14px; }

/* The book-by-phone page and the short notices. */
.book-lead { margin-top: 14px; }
address.book-lead { font-size: 1.1rem; line-height: 1.45; }
.book-notice { max-width: 700px; }
/* The book-by-phone page's two panels keep their own heights. */
.book-page .svc-details__grid { align-items: start; }
.book-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.panel .hours { margin-top: 18px; }
@media (max-width: 480px) { .book-actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; } }

/* A booking's own page (/booking/<token>): the booking and the shop side by side on a wide screen, and the change
   or cancel step the customer opened below both. */
.book-manage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 26px); }
@media (min-width: 900px) { .book-manage { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.book-manage__panel { grid-column: 1 / -1; min-width: 0; }
.book-manage__ref {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.book-manage__booking--cancelled h2, .book-manage__booking--no_show h2 { color: var(--red-dark); }
.book-facts { margin: 18px 0 0; }
.book-facts > div { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.book-facts dt { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.book-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.book-facts__notes dd { font-weight: 400; white-space: pre-line; }
@media (max-width: 480px) { .book-facts > div { grid-template-columns: minmax(0, 1fr); } }
.book-manage__note { margin-top: 14px; padding: 12px 16px; border-left: 6px solid var(--red); background: var(--grey); }
.book-manage__note-label { font-weight: 700; }
.book-manage__note p + p { margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.book-move { margin-top: 20px; }
.book-move .book-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* A move needs no bot check, so its button stays when JavaScript is off. */
html:not(.js) .book-move .book-submit { display: inline-flex; }

/* The change step marks the booking's own time; a cancelled or done booking stands alone, with no shop card. */
.book-time--current span { flex-direction: column; gap: 2px; line-height: 1.05; }
.book-time small { display: block; font-family: var(--body); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; }
@media (min-width: 900px) { .book-manage--single { grid-template-columns: minmax(0, 1fr); } }
.book-manage--single .book-manage__booking { max-width: 760px; }

/* ---------- The booking band (a solid red block) ---------- */

.svc-close { --focus: var(--white); padding: clamp(48px, 7vw, 88px) 0; background: var(--red); color: var(--white); }
.svc-close__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 48px; }
.svc-close__copy { max-width: 640px; }
.svc-close .section-title { color: var(--white); }
/* balance: even lines, so the phone number in the words isn't split at its hyphen. */
.svc-close p { margin-top: 12px; font-size: clamp(1.02rem, 1.4vw, 1.15rem); text-wrap: balance; }
.svc-close__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .svc-close__ctas, .svc-close__ctas .btn { flex: 1 1 100%; } }

/* ---------- Footer (black, with columns) ---------- */

.site-footer {
  --focus: var(--white);
  padding: clamp(44px, 6vw, 72px) 0 calc(24px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: #cfcfcf;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-logo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.footer-logo .logo__mark { background: var(--red); color: var(--white); }
.footer-logo__name { font-family: var(--head); font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); overflow-wrap: anywhere; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 34px 0 30px; }
.footer-h { margin-bottom: 12px; font-family: var(--head); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.footer-grid p { line-height: 1.7; }
.footer-links a, .footer-grid p a { display: inline-flex; align-items: center; min-height: 44px; color: #ececec; text-decoration: none; }
.footer-links a:hover, .footer-grid p a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.86rem;
  color: #a6a6a6;
}
.footer-legal p { text-wrap: balance; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: #d4d4d4; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-top .btn { display: none; }
}
@media (max-width: 359px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phone action bar ---------- */

.mobile-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-bar {
    --focus: var(--white);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink);
    border-top: 3px solid var(--red);
  }
  .mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 61px;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .mobile-bar a:first-child { background: var(--red); }
  .mobile-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
}

/* ---------- Book popup ---------- */

.book {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  overflow: auto;
}
.book::backdrop { background: rgba(0, 0, 0, 0.72); }
.book__head {
  --focus: var(--white);
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 24px;
  background: var(--red);
  color: var(--white);
}
.book__title { font-family: var(--head); font-weight: 400; font-size: 1.8rem; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
.book__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.book__close:hover { background: var(--red-dark); }
.book__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.book__body { padding: 20px 24px 24px; }
.book__where { font-weight: 700; font-size: 1.05rem; }
.book__status { margin-top: 2px; color: var(--muted); }
.book__list { display: grid; gap: 10px; margin-top: 18px; }
.book__app {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 16px 8px 8px;
  border: 2px solid var(--ink);
  text-decoration: none;
}
.book__app:hover { background: var(--grey); }
.book__app-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--head);
  font-size: 1.3rem;
}
.book__app-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.book__app--phone { --focus: var(--ink); background: var(--red); border-color: var(--red); color: var(--white); }
.book__app--phone:hover { background: var(--red-dark); border-color: var(--red-dark); }
.book__app--phone .book__app-icon { background: var(--white); color: var(--red); }
.book__app-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.book__app-text strong { font-family: var(--head); font-weight: 400; font-size: 1.25rem; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; }
.book__app-text span { font-size: 0.92rem; opacity: 0.85; }
.book__app-go { font-size: 1.4rem; }
.book__note { margin-top: 16px; font-size: 0.92rem; color: var(--muted); }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 120;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-left: 5px solid var(--red);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 160%);
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
}