/* Keys On Wheels: one stylesheet for every page. Black and white like the logo (owner, 2026-10-19): near-black, white and
   neutral greys only; the job photos are the only color. The wheel from the logo, pill buttons, bold Barlow headings.
   Fonts: Barlow and Barlow Semi Condensed, self-hosted (assets/fonts, SIL Open Font License, OFL.txt), latin + latin-ext. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-800-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-800-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0B0B0B;      /* near-black: headings, buttons, links, the dark band and the footer (19.7:1 with white) */
  --ink-2: #1A1A1A;
  --ink-3: #2E2E2E;    /* black button hover (white text 13.6:1) */
  --hover: #555555;    /* text links on hover (7.5:1 on white, 6.8:1 on paper) */
  --accent: #5E5E5E;   /* the italic accent word in headlines (5.9:1 on paper) */
  --accent-dark: #BDBDBD; /* the same accent on the black band (10.5:1) */
  --marker: #D2D2D2;   /* the grey marker band under ==words== and the centers of the round dots */
  --steel: #A3A3A3;    /* decoration only: the inner line of the round picture's ring */
  --paper: #F4F4F4;    /* page background: neutral light grey */
  --white: #FFFFFF;
  --tint: #EBEBEB;     /* soft grey panels, icon discs */
  --text: #1C1C1C;
  --muted: #595959;    /* 6.4:1 on paper, 5.9:1 on tint */
  --line: #E0E0E0;
  --field: #8C8C8C;    /* form field borders: 3.4:1 on white, so the boxes are easy to see */
  --on-dark: #DADADA;  /* 14:1 on ink */
  --on-dark-2: #A6A6A6; /* 8.1:1 on ink */
  --r: 22px;
  --wrap: 1160px;
  --display: "Barlow Semi Condensed", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-float: 0 10px 30px rgba(0, 0, 0, .10);
  --eb-gap: var(--paper); /* background behind the eyebrow's wheel dot */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--text); font: 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--hover); }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.04; margin: 0 0 .45em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
h1 { text-wrap: pretty; }
h2 { text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 800; color: var(--ink); } /* solid black (owner found the grey accent weak, 2026-10-19) */
.h1-sub { display: block; margin-top: .3em; font-size: .5em; line-height: 1.15; letter-spacing: 0; color: var(--ink); }
p { margin: 0 0 1em; }
.mark { background: linear-gradient(transparent 64%, var(--marker) 64%, var(--marker) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Focus: a 3px black ring with a white gap on light grounds; white with a black gap on the black band and the footer */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.route-band :focus-visible, .ftr :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 2px var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 820px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; font-weight: 700; border-radius: 999px; }
.skip:focus { left: 8px; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.fixture-note { margin: 0; padding: 8px 20px; background: var(--ink); color: var(--white); font-weight: 700; text-align: center; font-size: .95rem; }

/* Buttons: pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .75em 1.5em; border-radius: 999px; font: 700 1.05rem/1.1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; text-align: center; }
.btn .g { width: 1.15em; height: 1.15em; flex: none; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--ink-3); color: #fff; transform: translateY(-1px); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }

/* Eyebrow with the small wheel dot */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font: 700 .82rem/1.25 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.eyebrow::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--ink); background: var(--marker); box-shadow: inset 0 0 0 2px var(--eb-gap); }
.eyebrow.on-dark { color: var(--on-dark); }
.eyebrow.on-dark::before { border-color: var(--white); background: var(--on-dark-2); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr-in { position: relative; display: flex; align-items: center; gap: 12px; min-height: 96px; }
.brand { display: block; flex: none; padding: 6px 0; }
.brand img { height: 80px; width: auto; } /* owner 2026-10-19: bigger logo */
.nav { margin-left: auto; }
.nav > ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav a, .nav .sub-btn { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font: 600 1rem/1.2 var(--body); padding: 8px 10px; border-radius: 999px; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav .sub-btn:hover, .nav a[aria-current="page"] { background: var(--tint); color: var(--ink); }
.nav .has-sub { position: static; } /* the mega menu spans the header width */
.sub-btn::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.mega { display: none; position: absolute; top: calc(100% - 6px); left: 20px; right: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0, 0, 0, .14); padding: 22px; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mega::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; }
.has-sub:hover .mega, .has-sub.open .mega { display: grid; } /* keyboard: the button opens it (app.js); a closed panel stays out of the Tab order */
.mega h3 { font: 700 .78rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 6px; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega a { padding: 6px 10px; margin-left: -10px; font-weight: 600; font-size: .98rem; min-height: 44px; }
.mega .all { color: var(--ink); margin-top: 6px; gap: 6px; text-decoration: underline; text-underline-offset: 4px; }
.mega .all .g { width: 1em; height: 1em; }
.lang { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.lang:hover { border-color: var(--ink); color: var(--ink); }
.hdr-phone { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.open-now { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.open-now i { width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ink); display: inline-block; }
.hdr-call { font: 800 1.4rem/1.15 var(--display); color: var(--ink); text-decoration: none; white-space: nowrap; padding: 4px 0; }
.hdr-call:hover { color: var(--hover); }
.menu-btn { display: none; flex: none; align-items: center; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 700 1rem/1 var(--body); cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.nav .mobile-lang { display: none; }
body.menu-open { overflow: hidden; }
/* "Book now": a black pill, right of the phone number on desktops, between the ES pill and Menu on phones */
.book-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font: 700 1rem/1 var(--body); white-space: nowrap; transition: background .15s; }
.book-btn:hover { background: var(--ink-3); color: #fff; }
.book-btn .g { width: 18px; height: 18px; flex: none; }
.book-btn[aria-current="page"] { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
/* narrow desktops: a little less air between the menu items, so the menu, the number and the button keep one row */
@media (min-width: 1081px) and (max-width: 1240px) {
  .hdr-in { gap: 10px; }
  .brand img { height: 70px; }
  .nav a, .nav .sub-btn { padding: 8px 7px; }
  .book-btn { padding: 0 18px; }
  .book-btn .g { display: none; }
}

@media (max-width: 1080px) {
  .hdr-in { min-height: 70px; gap: 12px; }
  .brand img { height: 62px; }
  .menu-btn { display: inline-flex; }
  .lang { margin-left: auto; } /* ES/EN pill next to Menu, so Spanish readers find their pages */
  .nav { display: none; position: fixed; inset: var(--nav-top, 70px) 0 0 0; background: var(--white); overflow-y: auto; padding: 8px 20px 140px; margin: 0; border-top: 1px solid var(--line); }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; max-width: 640px; margin: 0 auto; }
  .nav a, .nav .sub-btn { font-size: 1.12rem; padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 0; width: 100%; text-align: left; justify-content: space-between; }
  .nav a:hover, .nav .sub-btn:hover { background: none; color: var(--hover); }
  .nav a[aria-current="page"] { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .mega { position: static; width: auto; box-shadow: none; border: 0; background: var(--tint); grid-template-columns: 1fr; gap: 6px; padding: 12px 16px 16px; margin: 0 0 8px; border-radius: 18px; }
  .has-sub:hover .mega { display: none; }
  .has-sub.open .mega { display: grid; }
  .mega h3 { margin-top: 10px; }
  .mega a { border-bottom: 0; font-size: 1.02rem; padding: 10px 4px; margin: 0; justify-content: flex-start; }
  .nav .mobile-lang { display: block; }
  .book-btn { min-height: 44px; padding: 0 18px; }
}
/* small phones: logo, ES pill, Book and Menu still fit in one row; the smallest show "Book" without "now" */
@media (max-width: 420px) {
  .hdr-in { gap: 8px; }
  .brand img { height: 56px; }
  .menu-btn { padding: 0 15px; }
  .book-btn { padding: 0 14px; }
  .book-btn .g { display: none; }
}
@media (max-width: 359px) { .brand img { height: 50px; } .book-btn .bk-more { display: none; } .menu-btn, .book-btn { padding: 0 12px; } }

/* Hero */
.hero { padding: 60px 0 44px; }
.hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-plain .hero-text, .contact-hero .hero-text { max-width: 760px; }
.hero:not(.hero-home) h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; list-style: none; color: var(--ink); font-weight: 600; font-size: .95rem; }
.facts li { position: relative; display: flex; gap: 8px; align-items: center; }
.facts li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); }
.facts li::after { content: ""; position: absolute; left: 6.5px; top: 50%; width: 4.5px; height: 8.5px; margin-top: -6px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* a white check in a black dot */
.crumbs { font-size: .9rem; margin-bottom: 16px; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.crumbs li + li::before { content: "›"; margin: 0 7px; color: var(--muted); }
.crumbs a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* The round picture (owner photo, or a drawing on pages without one): a black tire with a grey inner line */
.disc { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 340px; justify-self: center; }
.disc.big { max-width: 460px; }
.disc .ring { position: absolute; inset: 0; border-radius: 50%; border: 14px solid var(--ink); box-shadow: inset 0 0 0 4px var(--steel); }
.disc.big .ring { border-width: 16px; }
.disc-in { position: absolute; inset: 26px; border-radius: 50%; overflow: hidden; background: var(--ink); }
.disc-in svg, .disc-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.disc-tag { position: absolute; right: -6px; bottom: 34px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-float); white-space: nowrap; }
@media (max-width: 900px) {
  .hero { padding: 30px 0 26px; }
  .hero-in { grid-template-columns: 1fr; gap: 26px; }
  .disc { max-width: 190px; }
  .disc.big { max-width: 270px; }
  .disc .ring { border-width: 10px; }
  .disc.big .ring { border-width: 12px; }
  .disc-in { inset: 18px; }
  .disc-tag { right: -4px; bottom: 8px; font-size: .88rem; padding: 8px 14px; }
}

/* Sections */
.section { padding: 64px 0; }
.band-soft { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); --eb-gap: var(--white); }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.lead-dark { font-size: 1.12rem; color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two-col.top { align-items: start; }
.note-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; }
.band-soft .note-card { background: var(--paper); }
.note-card p:last-child { margin-bottom: 0; }
.pill-note { display: inline-block; margin: 22px 0 0; font-size: .98rem; color: var(--ink); background: var(--tint); padding: 10px 18px; border-radius: 999px; }
.notice { border-left: 5px solid var(--ink); background: var(--tint); padding: 14px 18px; border-radius: 10px; color: var(--ink); margin: 18px 0 1.2em; font-weight: 600; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 700px) { .section { padding: 48px 0; } }

/* Home: key picker */
.picker { padding: 18px 0 60px; }
.picker-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 18px; }
.picker-head h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0; }
.picker-head p { margin: 0; color: var(--muted); }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.keys a { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 12px 20px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.keys a:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.ic { flex: none; width: 84px; height: 84px; border-radius: 50%; background: var(--tint); color: var(--ink); display: grid; place-items: center; }
.ic .ill { width: 52px; height: 52px; }
.ill .duo { fill: currentColor; opacity: .2; } /* Phosphor duotone: the second tone is a light grey of the icon color */
.kt { font: 700 1.2rem/1.15 var(--display); margin-top: 4px; }
.keys small { font-weight: 400; color: var(--muted); font-size: .88rem; line-height: 1.35; }
@media (max-width: 900px) { .keys { grid-template-columns: 1fr 1fr; gap: 10px; } .keys li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Home: situations (if/then list) */
.band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 0; --eb-gap: var(--white); }
.ifthen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; list-style: none; padding: 0; margin: 22px 0 0; }
.ifthen li { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.ifthen b { display: block; font: 700 1.2rem/1.2 var(--display); color: var(--ink); }
.ifthen span { display: block; color: var(--muted); font-size: .96rem; }
.ifthen a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; white-space: nowrap; font-weight: 700; text-decoration: none; color: var(--ink); }
.ifthen a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 900px) { .ifthen { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ifthen li { grid-template-columns: 1fr; gap: 2px; } }

/* Steps on a route line ("wheel nodes") */
.route-band { background: var(--ink); color: var(--on-dark); padding: 68px 0; --eb-gap: var(--ink); }
.route-band h2 { color: #fff; }
.route-band h2 em { color: var(--accent-dark); }
.route { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.route::before { content: ""; position: absolute; left: 29px; right: 29px; top: 27px; height: 4px; background: rgba(255, 255, 255, .28); border-radius: 2px; }
.route li { position: relative; }
.route .node { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--ink); border: 4px solid var(--white); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 7px rgba(255, 255, 255, .28); display: grid; place-items: center; font: 800 1.4rem/1 var(--display); color: var(--white); }
.route strong { display: block; color: #fff; font: 700 1.3rem/1.2 var(--display); margin: 14px 0 6px; }
.route span { display: block; color: var(--on-dark-2); font-size: .98rem; }
.route-light { grid-template-columns: 1fr; gap: 20px; margin: 18px 0 1.4em; }
.route-light::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; background: var(--line); }
.route-light li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; }
.route-light .node { background: var(--white); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 7px var(--marker); }
.route-light strong { color: var(--ink); margin: 4px 0 4px; }
.route-light span { color: var(--muted); }
.route-tight .node { width: 50px; height: 50px; font-size: 1.2rem; }
.route-tight li { grid-template-columns: 50px 1fr; }
.route-tight::before { left: 23px; }
@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; gap: 24px; }
  .route::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; }
  .route li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; }
  .route strong { margin-top: 6px; }
  .route-tight li { grid-template-columns: 50px 1fr; }
}

/* Home: home & business strip (quiet, secondary) */
.strip { padding: 34px 0; border-bottom: 1px solid var(--line); }
.strip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.strip-in p { margin: 0; color: var(--muted); max-width: 30em; }
.strip .eyebrow { margin-bottom: 6px; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 18px 6px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.pills a:hover { border-color: var(--ink); color: var(--ink); }
.pills .ill { width: 28px; height: 28px; color: var(--ink); }
.hero .pills { margin-top: 18px; }
.hero .pills a { padding-left: 18px; }

/* Hub-and-spoke (home, /areas) */
.hub { padding: 68px 0; }
.hub-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }
.hub-map svg { display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--line); border-radius: 28px; }
.places { columns: 2; column-gap: 24px; padding: 0; margin: 10px 0 22px; list-style: none; }
.places li { break-inside: avoid; }
.places a, .places .here { display: flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.places a::after { content: "→"; margin-left: auto; color: var(--ink); padding-left: 8px; }
.places a:hover { color: var(--hover); }
.places .here { color: var(--ink); font-weight: 800; }
.places .here::after { content: ""; width: 10px; height: 10px; margin-left: auto; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.hub .note-card { margin: 8px 0 12px; }
@media (max-width: 900px) { .hub-in { grid-template-columns: 1fr; gap: 28px; } .hub { padding: 52px 0; } }

/* Cards (round icon) */
.group-title { margin: 40px 0 16px; max-width: 760px; }
.group-title:first-child { margin-top: 0; }
.group-title h2 { margin-bottom: 4px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.group-title p { color: var(--muted); margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.cards-5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.band-soft .card { background: var(--paper); }
.card:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--text); }
.card .ic { width: 64px; height: 64px; }
.card .ic .ill { width: 40px; height: 40px; }
.card-t { font: 700 1.3rem/1.15 var(--display); color: var(--ink); margin: 14px 0 6px; }
.card-p { color: var(--muted); font-size: .96rem; line-height: 1.5; margin-bottom: 12px; }
.card .more { margin-top: auto; font-weight: 700; color: var(--ink); font-size: .95rem; }
.card .more::after { content: " →"; }
.card-alt { background: var(--tint); border-style: dashed; border-color: var(--field); }
.card-alt .ic { background: var(--white); }

/* Makes (plain list) */
.makes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.makes li { padding: 8px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-weight: 700; color: var(--ink); font-size: .95rem; }

/* Checklist */
.checklist { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 36px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); }
.checklist li::after { content: ""; position: absolute; left: 9px; top: calc(.2em + 5px); width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Article pages */
.article-sec { padding-top: 40px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 52px; align-items: start; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.5em; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.2em; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.prose strong { color: var(--ink); }
.prose figure { margin: 28px 0; }
.prose figure img { border-radius: var(--r); width: auto; height: auto; max-width: 100%; max-height: 600px; } /* whole photo: the key and the watermark stay in view */
.prose figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.inline-cta { margin: 30px 0; padding: 22px 24px; border-radius: var(--r); background: var(--tint); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inline-cta strong { display: block; font: 700 1.3rem/1.2 var(--display); }
.inline-cta span { font-size: .98rem; color: var(--muted); }
.side { position: sticky; top: 108px; display: grid; gap: 16px; }
.side-card { border-radius: var(--r); padding: 24px; background: var(--tint); color: var(--text); }
.side-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.side-card p { font-size: .97rem; color: var(--muted); }
.side-card .btn { width: 100%; margin-top: 8px; }
.side-card dl { margin: 18px 0 0; display: grid; gap: 10px; font-size: .95rem; }
.side-card dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.side-card dd { margin: 2px 0 0; color: var(--ink); }
.side-links { border: 1px solid var(--line); background: var(--white); border-radius: var(--r); padding: 18px 22px; }
.side-links h2 { font-size: 1.15rem; margin-bottom: 6px; }
.side-links ul { list-style: none; margin: 0; padding: 0; }
.side-links a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .98rem; }
.side-links a:hover { color: var(--hover); }
.side-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.side-links a[aria-current="page"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 8px; }
.related-sec { padding-top: 0; }
@media (max-width: 980px) { .page-grid { grid-template-columns: 1fr; gap: 36px; } .side { position: static; } }

/* "Recent work" (home page and /about): whole photos, four (or three, or five) in a row, two per row on phones.
   Cards in a row stretch to the same height (photos differ: 3:4, 0.85, nearly square), so the row ends evenly. */
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.work.work-3 { grid-template-columns: repeat(3, 1fr); }
/* five photos (home page): one row of five on wide screens; three over a centered two in between */
.work.work-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) {
  .work.work-5 { grid-template-columns: repeat(6, 1fr); }
  .work.work-5 figure { grid-column: span 2; }
  .work.work-5 figure:nth-child(4) { grid-column: 2 / span 2; }
}
.work figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.work img { display: block; width: 100%; height: auto; }
.work figcaption { padding: 10px 12px 12px; font-size: .85rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 760px) {
  .work, .work.work-3, .work.work-5 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .work.work-5 figure, .work.work-5 figure:nth-child(4) { grid-column: auto; }
  .work figure:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  .work figcaption { padding: 8px 10px 10px; font-size: .8rem; }
}
/* Round photo crop (photos.json "focus"): which part of a tall or wide photo the circle centers on */
.disc-in img.pos-y30 { object-position: 50% 30%; } .disc-in img.pos-y40 { object-position: 50% 40%; }
.disc-in img.pos-y60 { object-position: 50% 60%; } .disc-in img.pos-y70 { object-position: 50% 70%; } .disc-in img.pos-y80 { object-position: 50% 80%; }
.disc-in img.pos-x30 { object-position: 30% 50%; } .disc-in img.pos-x40 { object-position: 40% 50%; }
.disc-in img.pos-x60 { object-position: 60% 50%; } .disc-in img.pos-x70 { object-position: 70% 50%; }

/* Owner photo gallery (only when photos exist): whole photos, so the watermark always shows */
.gallery { columns: 2 220px; column-gap: 14px; margin: 28px 0; }
.gallery figure { break-inside: avoid; margin: 0 0 14px; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.gallery figcaption { padding: 10px 12px 12px; font-size: .85rem; line-height: 1.4; color: var(--muted); }

/* FAQ */
.faq-sec { --eb-gap: var(--paper); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 56px 16px 20px; font-weight: 700; color: var(--ink); position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--ink); display: grid; place-items: center; font: 700 1.3rem/1 var(--body); }
.faq details[open] summary::after { content: "−"; background: var(--ink); color: #fff; }
.faq details > div { padding: 0 20px 18px; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* Callback card (quote form) */
.quote { padding: 24px 0 76px; }
.qcard { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--line); border-radius: 30px; overflow: hidden; }
.qside { background: var(--tint); padding: 36px; --eb-gap: var(--tint); }
.qside h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.qside p { color: var(--muted); }
.big-phone { display: inline-block; font: 800 clamp(1.9rem, 3.4vw, 2.4rem)/1.05 var(--display); color: var(--ink); text-decoration: none; margin: 8px 0 6px; }
a.big-phone:hover { color: var(--hover); }
.qside .big-phone-plain { display: none; }
.qside small { display: block; color: var(--muted); font-size: .92rem; }
.qform { padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.qform .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--field); border-radius: 14px; background: var(--white); color: var(--text); min-height: 50px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); background: var(--white); }
.qform .btn { min-width: 220px; }
.qform .fine { font-size: .86rem; color: var(--muted); margin: 12px 0 0; }
.qform .hp, .bform .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.form-msg.ok { display: block; background: var(--ink); color: var(--white); }
.form-msg.err { display: block; background: var(--white); color: var(--ink); border: 2px solid var(--ink); }
@media (max-width: 900px) { .qcard { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .qform { grid-template-columns: 1fr; padding: 24px 20px; } .qside { padding: 26px 22px; } .qform .btn { width: 100%; } .qcard { border-radius: 24px; } }

/* Booking form ("Book now" panel on every page, and /book): what, when, where, the vehicle, name and phone */
.bform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.bform .full { grid-column: 1 / -1; }
.bform[hidden], .bk-done[hidden] { display: none; }
.bform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bform legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.bform .opt { font-weight: 400; color: var(--muted); }
.bform .btn { width: 100%; }
.bform .fine { font-size: .86rem; color: var(--muted); margin: 12px 0 0; }
/* "When": three choices as pills; the picked one turns black */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 10px; border: 1.5px solid var(--field); border-radius: 14px; background: var(--white); color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.2; text-align: center; transition: background .15s, color .15s, border-color .15s; }
.seg label:hover span { border-color: var(--ink); }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.b-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
@supports selector(:has(*)) { .bform:not(:has(input[name="when"][value="day"]:checked)) .b-pick { display: none; } } /* without :has() the day boxes simply always show */
.b-pick input[type="date"] { display: block; min-width: 0; appearance: none; -webkit-appearance: none; }
.b-hint { margin: 10px 0 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.field [aria-invalid="true"] { border-color: var(--ink); border-width: 2.5px; }
.bk-done { padding: 8px 0 4px; }
.bk-done h3 { font-size: 1.7rem; margin-bottom: 8px; }
.bk-done h3:focus { outline: none; }
.bk-done h3::before { content: ""; display: block; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.bk-done p { color: var(--muted); font-size: 1.08rem; }
.bk-urgent { margin: 0 0 20px; padding: 12px 16px; border-radius: 14px; background: var(--tint); color: var(--text); font-size: .95rem; line-height: 1.45; }
.bk-urgent a { display: inline-block; padding: 2px 0; font-weight: 800; color: var(--ink); white-space: nowrap; }
/* the panel: a modal <dialog> (top layer), centered on larger screens over a dimmed, blurred page */
.bk { width: min(640px, calc(100% - 40px)); max-width: none; max-height: calc(100% - 48px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--white); color: var(--text); box-shadow: 0 30px 90px rgba(0, 0, 0, .4); overflow: auto; overscroll-behavior: contain; }
.bk::backdrop { background: rgba(11, 11, 11, .66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.bk-panel { padding: 22px 32px 30px; }
.bk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -8px 4px 0; }
.bk-top .eyebrow { margin: 0; --eb-gap: var(--white); }
.bk-x { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.bk-x:hover { border-color: var(--ink); background: var(--tint); }
.bk-x .g { width: 20px; height: 20px; }
.bk h2 { font-size: clamp(1.75rem, 3.6vw, 2.3rem); margin: 8px 0 14px; }
.bk h2:focus { outline: none; }
html.bk-open { overflow: hidden; }
/* phones (also held sideways): the panel fills the screen (so the page and its call buttons are out of sight), with a
   sticky top row */
@media (max-width: 760px), (max-height: 520px) {
  .bk { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
  .bk-panel { min-height: 100%; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
  .bk-top { position: sticky; top: 0; z-index: 1; margin: 0 -16px 2px; padding: 10px 12px 10px 16px; background: var(--white); border-bottom: 1px solid var(--line); }
  .bk h2 { margin-top: 18px; }
}
@media (max-width: 600px) { .bform { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 480px) { .b-pick { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .seg span { font-size: .9rem; padding: 8px 6px; } }
/* /book: the same form as a page (for visitors without JavaScript). Phones: heading, form, then the steps. */
.book-in { display: grid; grid-template-columns: .9fr 1.1fr; grid-template-areas: "text card" "next card"; gap: 0 56px; align-items: start; }
.book-text { grid-area: text; }
.book-card { grid-area: card; background: var(--white); border: 1px solid var(--line); border-radius: 30px; padding: 32px; }
.book-next { grid-area: next; margin-top: 8px; }
.book-next h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.book-hero .bk-urgent { margin: 4px 0 30px; max-width: 34em; background: var(--white); border: 1px solid var(--line); }
.book-card .form-err-static { margin: 0 0 18px; }
.book-card .bk-done { padding: 12px 0; }
@media (max-width: 900px) {
  .book-in { grid-template-columns: 1fr; grid-template-areas: "text" "card" "next"; }
  .book-hero .bk-urgent { margin-bottom: 22px; }
  .book-next { margin-top: 36px; }
}
@media (max-width: 600px) { .book-card { padding: 22px 18px; border-radius: 24px; } }

/* Contact page */
.contact-hero .hero-in { align-items: start; }
.contact-card { margin: 26px 0 0; display: grid; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.contact-card dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.contact-card dd { margin: 2px 0 0; color: var(--ink); }
.contact-card strong { font: 800 1.4rem/1.2 var(--display); }
.contact-card .mail { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.form-err-static { display: none; margin: 24px 24px 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; background: var(--white); color: var(--ink); border: 2px solid var(--ink); scroll-margin-top: 110px; }
.form-err-static:target { display: block; }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: 30px; }
/* where the form column is narrow, the place and vehicle fields get a full row so their examples are not cut off */
.contact-form .f-loc, .contact-form .f-car { grid-column: 1 / -1; }
@media (min-width: 901px) and (max-width: 1140px) { .qcard .f-loc, .qcard .f-car { grid-column: 1 / -1; } }

/* Reviews (review-sync fills these; hidden until real reviews arrive) */
[data-reviews-slot][hidden], [data-reviews-fallback][hidden] { display: none !important; }
.reviews-sec { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); --eb-gap: var(--white); }
.section-head .rv-summary { color: var(--ink); font-weight: 700; font-size: 1.1rem; margin-bottom: .4em; }
.section-head .rv-note { font-size: .95rem; margin: 0; }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.rv-card { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.rv-stars { margin: 0 0 10px; font-size: 1.2rem; line-height: 1; letter-spacing: .1em; }
.rv-on { color: var(--ink); }
.rv-off { color: #C4C4C4; }
.rv-text { margin: 0 0 14px; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); font-size: 1rem; line-height: 1.55; }
.rv-meta { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .9rem; color: var(--muted); }
.rv-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.rv-reply { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--ink); border-radius: 10px; background: var(--tint); }
.rv-reply-label { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rv-reply-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.5; color: var(--text); }
.rv-more { margin: 24px 0 0; }
.rv-wait { margin: 0 0 40px; padding: 16px 20px; border: 1.5px dashed #BDBDBD; border-radius: var(--r); background: var(--white); color: var(--muted); font-size: 1.02rem; }

/* Legal */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.6rem; margin-top: 1.5em; }
.legal h2:first-child { margin-top: 0; }

/* Footer: white logo on near-black, faint wheel watermark */
.ftr { position: relative; overflow: hidden; background: var(--ink); color: #BFBFBF; font-size: .98rem; padding: 60px 0 40px; }
.ftr::after { content: ""; position: absolute; right: -110px; bottom: -130px; width: 460px; height: 460px; background: url("/img/illus/wheel-line.svg") center / contain no-repeat; opacity: .07; pointer-events: none; }
.ftr .wrap { position: relative; z-index: 1; }
.ftr-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.ftr h2 { color: #fff; font: 700 1.2rem/1.2 var(--display); letter-spacing: 0; margin-bottom: 8px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr .logo { width: 160px; height: auto; margin-bottom: 18px; }
.ftr .phone { font: 800 1.5rem/1.2 var(--display); color: #fff; }
.ftr-mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); overflow-wrap: anywhere; }
.ftr-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; }
@media (max-width: 900px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-grid { grid-template-columns: 1fr; gap: 26px; } }

/* Phones and touch tablets: ONE call button at a time. The header shows no phone number here; the only call
   buttons are the page's own hero button and the bottom bar (a single black call pill), which appears only while no
   other call link is on screen (app.js), steps aside while someone types in the form, and shows while the menu is
   open. The call buttons in the sidebar card, the call row and the callback card would sit on screen next to the
   hero button or each other on tablets, so they give way to the bar here (the callback card shows the number as
   plain text, like the footer). */
.mbar { display: none; }
@media (max-width: 760px), (max-width: 1080px) and (pointer: coarse) {
  html { scroll-padding-bottom: 90px; }
  .hdr-phone { display: none; }
  .side-card a[href^="tel:"], .inline-cta a[href^="tel:"], .qside a.big-phone { display: none; }
  .qside .big-phone-plain { display: inline-block; }
  .mbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; transform: translateY(160%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .mbar.show { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
  .mbar .btn { flex: 1; min-height: 54px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6), 0 10px 30px rgba(0, 0, 0, .35); } /* thin light edge: the black pill stays visible over the black band and footer */
  .mbar .btn:focus-visible { box-shadow: 0 0 0 2px var(--white); }
  body { padding-bottom: 82px; }
}
/* Short landscape screens: a slimmer bar */
@media (max-width: 1080px) and (max-height: 500px) and (pointer: coarse) {
  .mbar { bottom: calc(6px + env(safe-area-inset-bottom)); }
  .mbar .btn { min-height: 46px; }
  body { padding-bottom: 60px; }
}
@media (max-width: 480px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .cta .btn { width: 100%; }
  .hero .lead { font-size: 1.1rem; }
}