/* Fima's Autoworks — graphite, caliper red, paint-booth light.
   Latin pages: Hubot Sans (display, wdth 75–125 + wght), Mona Sans (text), Mona Sans Mono (labels).
   Russian page: Unbounded (display), Golos Text (text), JetBrains Mono (labels); the FIMA’S AUTOWORKS
   wordmark stays in Hubot (hubot-mark.woff2, A–Z only). All OFL, self-hosted, one @font-face per file. */

@font-face { font-family: "Hubot Sans"; src: url("/fonts/hubot-sans-var.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Hubot Mark"; src: url("/fonts/hubot-mark.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("/fonts/mona-sans-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
/* "Русский" in the language switch on Latin pages: 6 Golos glyphs, fetched only when Cyrillic is on the page.
   Its descriptors must match the main Mona Sans face exactly (weight 200 900), or Chromium never uses it. */
@font-face { font-family: "Mona Sans"; src: url("/fonts/lang-names-cyr.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0400-045F; }
@font-face { font-family: "Mona Sans Mono"; src: url("/fonts/mona-sans-mono-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
/* while a display face is still loading, a system bold shrunk so the kinetic word can't run off the line */
@font-face { font-family: "Kin Fallback"; src: local("Arial Black"), local("ArialMT-Black"), local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Neue Bold"); size-adjust: 60%; }

[hidden] { display: none !important; }

:root {
  color-scheme: dark;
  --bg: #0e0f11;
  --bg-2: #141619;
  --panel: #1a1d21;
  --panel-2: #22262b;
  --line: #2b3036;
  --line-2: #3b4148;
  --ink: #efeeea;
  --ink-2: #bfc2c7;
  --ink-3: #959aa1;
  --red: #c8202a;        /* caliper red fills: white on it 5.7:1 */
  --red-hi: #dd2f38;
  --red-ink: #ff5d63;    /* red as text on graphite, 6.4:1 */
  --red-deep: #a8141d;   /* red as text on paper / primer */
  --led: #f3f7ff;
  --primer: #d8d8d3;     /* reviews band: primer grey */
  --paper: #f3f1eb;      /* work order */
  --paper-ink: #151618;
  --paper-ink-2: #474a50;
  --paper-line: #c4c1b8;
  --field-line: #6e7178;
  --tape: #e7d8a8;       /* masking tape */
  --tape-ink: #2a2717;

  --display: "Hubot Sans", "Kin Fallback", "Arial Black", Arial, sans-serif;
  --text: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Mona Sans Mono", ui-monospace, Menlo, Consolas, monospace;
  --mark: "Hubot Sans", "Arial Black", Arial, sans-serif;
  --w-heavy: 820;   /* heavy half of the two-weight headings */
  --w-light: 300;
  --w-kin: 880;
  --st-h: 108%;     /* font-stretch for headings (ignored by fonts without a width axis) */
  --st-wide: 125%;
  --h-scale: 1;     /* display sizes x this (Unbounded is wider: .8) */

  --gutter: clamp(16px, 4vw, 48px);
  --head-h: 72px;
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
html[lang="ru"] {
  --display: "Unbounded", "Kin Fallback", "Arial Black", Arial, sans-serif;
  --text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --mark: "Hubot Mark", "Unbounded", "Arial Black", sans-serif;
  --w-heavy: 700;
  --w-light: 300;
  --w-kin: 800;
  --h-scale: .8;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.nw, a[href^="tel:"]:not(.route) { white-space: nowrap; }
.sr-only {
  position: absolute !important; 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;
}
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }
.reviews :focus-visible { outline-color: var(--paper-ink); }   /* light primer band: a dark ring */
.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 30px; height: 30px; }
.stars { display: inline-block; width: 5.5em; height: 1em; fill: currentColor; vertical-align: -.1em; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 0 22px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
html[lang="ru"] .btn { font-weight: 600; font-size: 14px; letter-spacing: 0; }
.btn-red { background-color: var(--red); color: #fff; }
.btn-red:hover { background-color: var(--red-hi); }
.btn-ghost { background-color: #15171a; color: var(--ink); border-color: rgba(239, 238, 234, .32); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 17px; }

/* ------------------------------------------------------------ header */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--head-h); color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.head.is-solid, html:not(.js) .head, .page-plain .head { background-color: #0e0f11; border-bottom-color: var(--line); }
html:not(.js) .menu-btn { display: none !important; }
.head-in { height: 100%; display: flex; align-items: center; gap: 24px; max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
/* the logo lock-up: plain bar I (Hubot's ss04, like the logo), FIMA’S and AUTOWORKS set to one width */
.mark { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; line-height: 1; margin-right: auto; font-family: var(--mark); font-feature-settings: "ss04"; }
.mark-1 { font-weight: 900; font-stretch: 125%; font-size: 25px; letter-spacing: .005em; }
.mark-2 { font-weight: 340; font-stretch: 125%; font-size: 10.4px; letter-spacing: .355em; margin-right: -.355em; margin-top: 3px; padding-left: 1px; }
.nav { display: flex; gap: 26px; }
.nav a {
  font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: 14.5px; letter-spacing: .02em;
  text-decoration: none; color: var(--ink-2); position: relative; padding: 12px 0;
}
html[lang="ru"] .nav a { font-weight: 500; font-size: 13.5px; letter-spacing: 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.langs { display: flex; gap: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.lang-a { display: inline-grid; place-items: center; min-width: 34px; min-height: 44px; text-decoration: none; color: var(--ink-3); border-radius: var(--radius); }
.lang-a:hover { color: var(--ink); }
.lang-a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.head-cta { display: flex; align-items: center; gap: 14px; }
.head-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.head-tel .ico { color: var(--red-ink); }
.head-tel:hover .head-tel-num { text-decoration: underline; text-underline-offset: 3px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid rgba(239, 238, 234, .3); border-radius: var(--radius); background-color: #15171a; padding: 0; cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.menu-btn i:first-of-type { top: 17px; }
.menu-btn i:last-of-type { top: 25px; }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }

/* menu: full-height sheet under the header, with a scrim */
.menu { position: fixed; inset: var(--head-h) 0 0 0; z-index: 49; }
.menu-scrim { position: absolute; inset: 0; background-color: rgba(8, 9, 10, .72); }
.menu-sheet { position: relative; max-height: 100%; overflow-y: auto; background-color: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.menu-nav a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-stretch: 115%; font-weight: 700; font-size: calc(22px * var(--h-scale)); }
.menu-langs { display: flex; gap: 8px; margin-top: 18px; }
.lang-b { display: inline-grid; place-items: center; min-width: 52px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius); text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
.lang-b[aria-current] { border-color: var(--ink); color: var(--ink); }
.menu-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.menu-meta a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.menu-meta .ico { color: var(--red-ink); }

/* ------------------------------------------------------------ cover */
.cover {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; height: var(--sh, 100svh);
  background-color: #17191c;
}
.cover-media { position: absolute; inset: 0; z-index: -2; }
.cover-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; }
/* where the wide crop sits, by screen shape: cars whole, above the title block, headline above the roofs
   (tools/check.mjs "cover layout" measures both edges at 14 screen sizes) */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 29/20) { .cover-img { object-position: 50% 78%; } }
@media (min-aspect-ratio: 29/20) and (max-aspect-ratio: 17/10) { .cover-img { object-position: 50% 60%; } }
@media (min-aspect-ratio: 19/10) { .cover-img { object-position: 50% 76%; } }
@media (max-aspect-ratio: 1/1) { .cover-img { object-position: 26% 42%; } }
/* short phones (Instagram's in-app browser leaves ~660 px): lift the cars clear of the bottom band */
@media (max-aspect-ratio: 3/5) { .cover-img { object-position: 26% 100%; } }
/* the GL canvas is only shown while the light moves; at rest the sharp <img> shows (booth.js toggles .is-live) */
.cover-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s ease; }
.cover-gl.is-live { opacity: 1; }
html[data-cover="still"] .cover-gl { display: none; }
.cover-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 11, 13, .42) 0, rgba(10, 11, 13, .16) 45%, rgba(10, 11, 13, 0) 68%),
    linear-gradient(180deg, rgba(10, 11, 13, .8) 0, rgba(10, 11, 13, .55) calc(var(--head-h) + 22%), rgba(10, 11, 13, .22) 44%, rgba(10, 11, 13, 0) 56%);
}
/* portrait screens: the headline block runs further down the photo, so the shade does too (no local boxes) */
@media (max-aspect-ratio: 1/1) {
  .cover-scrim { background: linear-gradient(180deg, rgba(10, 11, 13, .8) 0, rgba(10, 11, 13, .62) 26%, rgba(10, 11, 13, .48) 40%, rgba(10, 11, 13, 0) 54%); }
}
.cover-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cover-top { container-type: inline-size; padding-top: calc(var(--head-h) + clamp(12px, 3.2vh, 40px)); }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.tick { width: 26px; height: 3px; background: var(--red); flex: none; }

/* --F = size of the big "BODY SHOP" line (fills the line: --kin-k is its width in em, from tools/fonts.py);
   the kinetic "We do COLLISION" row is a fraction of it */
.kin {
  --kin-cap: clamp(44px, 15vh, 180px);
  --F: min(var(--kin-cap), calc((min(100vw, 1400px) - 2 * var(--gutter)) / var(--kin-k, 7.75)));
  margin-top: clamp(8px, 1.6vh, 18px); line-height: 1;
}
@supports (width: 1cqw) { .kin { --F: min(var(--kin-cap), calc(100cqw / var(--kin-k, 7.75))); } }
.cov-what {
  display: block; font-size: var(--F);
  font-family: var(--display); font-weight: var(--w-kin); font-stretch: 125%;
  text-transform: uppercase; line-height: .86; letter-spacing: -.01em; white-space: nowrap; color: var(--ink);
}
/* Hubot's plain bar I (ss04) in the display caps, as in the logo (tools/fonts.py metrics measures with it) */
html:not([lang="ru"]) .cov-what, html:not([lang="ru"]) .kin-word { font-feature-settings: "ss04"; }
.kin-row {
  display: flex; align-items: flex-end; gap: .3em;
  margin-top: calc(var(--F) * .14);
  font-size: max(26px, calc(var(--F) * .4));
}
.kin-lead {
  flex: none; font-family: var(--display); font-weight: 400; font-stretch: 125%;
  font-size: .56em; letter-spacing: .01em; line-height: 1; padding-bottom: .04em; color: var(--ink);
}
html[lang="ru"] .kin-lead { font-size: max(16px, .56em); }
.kin-word {
  display: block; position: relative; flex: 1 1 auto; min-width: 0;
  height: .86em; font-size: 1em;
  font-family: var(--display); font-weight: var(--w-kin);
  text-transform: uppercase; line-height: .86; letter-spacing: -.005em; white-space: nowrap;
}
.kin-w {
  position: absolute; left: -.02em; top: 0;
  font-stretch: var(--w, 125%); font-size: calc(1em * var(--fs, 1));
  color: var(--ink);
}
.kin-w:not(.is-on):not(.is-twin) { clip-path: inset(-12% 0 -12% 100%); }
.kin-w.is-in { animation: kin-in .95s cubic-bezier(.45, .05, .25, 1) both; }
.kin-w.is-out { animation: kin-out .95s cubic-bezier(.45, .05, .25, 1) both; }
.kin-word[data-axis="size"] .kin-w.is-in { animation-name: kin-in-plain; }
/* the wipe: one seam for everything. site.js sets --kin-travel on every swap = the longer of the two words, in px.
   The incoming word is shown left of the seam, the outgoing one right of it, and the scan bar (a 23 px layer:
   the 3 px line and its glow, centred on the words' left edge) is moved by transform only, by the same px with
   the same easing - so the light sits on the cut the whole way and stops at the end of the longer word */
.kin-word::after {
  content: ""; position: absolute; top: -8%; bottom: -4%; left: calc(-.02em - 11.5px); width: 23px;
  background: linear-gradient(90deg, rgba(243, 247, 255, 0) 0, rgba(243, 247, 255, .35) 8px, var(--led) 10px, var(--led) 13px, rgba(243, 247, 255, .35) 15px, rgba(243, 247, 255, 0) 23px) no-repeat 0 0 / 23px 100%;
  opacity: 0; pointer-events: none; will-change: transform;
}
.kin-word.is-scan::after { animation: kin-bar .95s cubic-bezier(.45, .05, .25, 1) both; }
/* right inset calc(100% - seam): the incoming word grows (font-stretch) under the wipe, so its edge is kept in px
   from its left side, not as a share of its own changing width */
@keyframes kin-in { from { font-stretch: 75%; clip-path: inset(-12% 100% -12% 0); } to { font-stretch: var(--w, 125%); clip-path: inset(-12% calc(100% - var(--kin-travel, 100%)) -12% 0); } }
@keyframes kin-in-plain { from { clip-path: inset(-12% 100% -12% 0); } to { clip-path: inset(-12% calc(100% - var(--kin-travel, 100%)) -12% 0); } }
@keyframes kin-out { from { clip-path: inset(-12% 0 -12% 0); } to { clip-path: inset(-12% 0 -12% var(--kin-travel, 100%)); } }
@keyframes kin-bar { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(var(--kin-travel, 0px), 0, 0); opacity: 0; } }

.cover-lede { position: relative; margin-top: clamp(16px, 2.8vh, 28px); max-width: 38em; font-size: 17px; line-height: 1.45; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.cover-lede.is-off { visibility: hidden; }
/* one sentence per line from 600 px up ("…by FLL." / "Send photos, get a quote.") */
@media (min-width: 600px) { .cover-lede .s { display: block; } }
/* intro: type arrives once */
.eyebrow, .cov-what, .kin-row, .cover-lede { animation: rise .8s var(--ease) both; }
.cov-what { animation-delay: .06s; }
.kin-row { animation-delay: .14s; }
.cover-lede { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* title block: the bottom band of the cover, solid paint */
.tb {
  display: grid; grid-template-columns: 1.35fr 1.15fr 1.1fr .85fr 1.05fr 1.15fr;
  min-height: 84px; background-color: #0e0f11; border-top: 1px solid var(--line-2);
  /* full-bleed band, cells aligned to the 1400 px wrap */
  padding-inline: max(0px, calc((100vw - 1400px) / 2));
}
.tb-c { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 18px; border-left: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tb-c:first-child { border-left: 0; padding-left: var(--gutter); }
a.tb-c:hover { background-color: #181a1e; }
.tb-k { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tb-k .ico { width: 14px; height: 14px; color: var(--red-ink); }
.tb-v { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-v .ico { display: none; }
.tb-addr .tb-v { white-space: normal; font-size: 14.5px; }
.tb-addr .tb-k { white-space: normal; }               /* a long label wraps, never runs into the next cell */
.tb-call .tb-v { overflow: visible; text-overflow: clip; }   /* the phone number is never cut */
.tb-big { font-family: var(--display); font-stretch: 105%; font-weight: 750; font-size: 19px; letter-spacing: -.005em; }
html[lang="ru"] .tb-big { font-weight: 600; font-size: 16px; }
.tb-short, .tb-s4 { display: none; }
.tb-rate .tb-v { display: flex; align-items: baseline; gap: 8px; }
.tb-stars { color: var(--led); font-size: 12px; }
.tb-rc { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-size: 14px; }
/* "17 reviews" where it fits; next to the stars on tablets/laptops (and in Russian) "(17)", as Google shows it */
@media (min-width: 600px) and (max-width: 1399px) { .tb-rc .tb-l4 { display: none; } .tb-rc .tb-s4 { display: inline; } }
@media (min-width: 1400px) { html[lang="ru"] .tb-rc .tb-l4 { display: none; } html[lang="ru"] .tb-rc .tb-s4 { display: inline; } }
/* .995 alpha, not 1: an opaque cell made the compositor cull the GL canvas in a mirrored box behind the header */
.tb-cta { background-color: rgb(200 32 42 / .995); color: #fff; border-left: 0; padding-right: var(--gutter); }
/* on screens wider than the wrap the red runs on to the right edge */
.tb-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: max(0px, calc((100vw - 1400px) / 2)); background-color: inherit; }
.tb-cta .tb-k { color: #ffe1e2; }
.tb-cta .tb-v { display: flex; align-items: center; gap: 8px; }
a.tb-cta:hover { background-color: rgb(221 47 56 / .995); }
.badge { font-style: normal; padding: 2px 6px 1px; border-radius: 2px; background-color: var(--panel-2); color: var(--ink-2); letter-spacing: .06em; }
.badge.is-open { background-color: #1f6b3d; color: #fff; }

/* ------------------------------------------------------------ sections */
.sec { padding-block: clamp(64px, 8vw, 116px); position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec + .sec::before { content: ""; position: absolute; top: -1px; left: max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter))); width: 120px; height: 1px; background: var(--led); box-shadow: 0 0 10px 1px rgba(243, 247, 255, .4); }
.label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 18px;
}
.label .bar { width: 26px; height: 3px; background: var(--red); flex: none; }
h2, .plain-h {
  font-family: var(--display); font-weight: var(--w-heavy); font-stretch: var(--st-h);
  font-size: calc(clamp(36px, 5.4vw, 78px) * var(--h-scale)); line-height: .98; letter-spacing: -.012em;
  text-wrap: balance;
}
.h-heavy, .h-light { display: block; }
.h-light { font-weight: var(--w-light); font-stretch: 112%; letter-spacing: -.005em; }
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); max-width: 1100px; }
.sec-head-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.sec-intro { margin-top: 22px; max-width: 40em; color: var(--ink-2); font-size: 17.5px; }
.sec-intro b { color: var(--ink); }
.sec-note { max-width: 360px; color: var(--ink-2); font-size: 16px; }
.sec-note a { color: var(--ink); }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--display); font-stretch: 112%; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--red); padding: 6px 0 3px; }
.lnk:hover { border-color: var(--led); }

/* ------------------------------------------------------------ services: A/B/C index */
.idx { border-top: 1px solid var(--line-2); }
.idx-g { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: 16px 40px; padding: 34px 0 30px; border-bottom: 1px solid var(--line-2); }
.idx-g:last-child { border-bottom: 0; padding-bottom: 0; }
.idx-gh { align-self: start; position: sticky; top: calc(var(--head-h) + 24px); display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.idx-l { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: calc(84px * var(--h-scale)); line-height: .78; color: var(--red-ink); }
.idx-gh h3 { font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: calc(clamp(22px, 1.75vw, 26px) * var(--h-scale)); line-height: 1.05; }
html[lang="ru"] .idx-gh h3 { font-weight: 700; }
.idx-sub { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.swatch { display: block; position: relative; width: 132px; height: 12px; margin-top: 16px; border-radius: 1px; overflow: hidden; }
.swatch-primer { background-color: #8b8e93; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
.swatch-color { background-color: var(--red); background-image: linear-gradient(90deg, var(--tape) 0 38%, rgba(0,0,0,.18) 38% calc(38% + 1px), transparent calc(38% + 1px)); }
.swatch-clear { background-color: #3a4048; background-image: linear-gradient(180deg, rgba(243,247,255,.95) 0 2px, rgba(243,247,255,.28) 2px 45%, rgba(0,0,0,.2) 45%); }
.idx-list { counter-reset: none; }
.idx-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 6px 22px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); }
.idx-row:first-child { border-top: 0; padding-top: 2px; }
.idx-c { font: 500 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.idx-n { font-family: var(--display); font-weight: 700; font-stretch: 100%; font-size: calc(clamp(18px, 1.55vw, 22px) * var(--h-scale)); line-height: 1.2; }
html[lang="ru"] .idx-n { font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; }
.idx-d { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.idx-q { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; margin: -12px 0; text-decoration: none; font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; }
.idx-q::after { content: ""; position: absolute; inset: 0; }
.idx-row:hover .idx-n { color: #fff; }
.idx-row:hover .idx-q { color: #fff; }
.idx-recent { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 10px; }
.idx-recent-k { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.idx-recent a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 15.5px; }
.idx-recent a .u { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }

/* ------------------------------------------------------------ work log plates (staggered) */
.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 28px); row-gap: clamp(36px, 5vw, 64px); align-items: start; }
.plate { position: relative; }
.plate-img { position: relative; overflow: hidden; background-color: var(--panel); border-radius: 2px; }
.plate-img img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { display: grid; justify-items: start; gap: 6px; padding-top: 14px; max-width: 34em; }
.tape { display: inline-block; padding: 4px 9px 3px; background-color: var(--tape); color: var(--tape-ink); font: 600 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.plate-t { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: calc(clamp(19px, 1.6vw, 23px) * var(--h-scale)); line-height: 1.15; }
html[lang="ru"] .plate-t { font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; }
.plate-d { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.plate-q { font-family: var(--display); font-weight: 500; font-stretch: 100%; font-size: calc(clamp(17px, 1.4vw, 20px) * var(--h-scale)); line-height: 1.38; color: var(--ink); quotes: "\201C" "\201D"; }
html[lang="ru"] .plate-q { font-family: var(--text); font-weight: 500; font-size: clamp(16px, 1.3vw, 18px); }
.plate-q:lang(ru) { quotes: "\00AB" "\00BB"; }
.plate-q::before { content: open-quote; }
.plate-q::after { content: close-quote; }
.plate-who { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* placement: 1 M3 | 2 F-350 / 3 Charger | 4 shop / 5 X5 (large) | 6 Fima */
.plate-1 { grid-column: 1 / span 4; }
.plate-1 .plate-img { aspect-ratio: 4 / 5; }
.plate-2 { grid-column: 7 / span 5; margin-top: 72px; }   /* a 640 px Instagram photo: kept small enough to stay sharp */
.plate-2 .plate-img { aspect-ratio: 4 / 3; }
.plate-3 { grid-column: 2 / span 4; }
.plate-3 .plate-img { aspect-ratio: 9 / 8; }
.plate-4 { grid-column: 7 / span 6; margin-top: -40px; }
.plate-4 .plate-img { aspect-ratio: 3 / 2; }
.plate-5 { grid-column: 1 / span 8; }
.plate-5 .plate-img { aspect-ratio: 3 / 2; }
.plate-6 { grid-column: 9 / span 4; margin-top: 96px; }
.plate-6 .plate-img { aspect-ratio: 4 / 5; }
.plate-6 .plate-img img { object-position: 50% 30%; }
.plate-1 .plate-img img { object-position: 50% 55%; }
.more { margin-top: clamp(32px, 4vw, 48px); }

/* ------------------------------------------------------------ reviews: light primer band */
.reviews { background-color: var(--primer); color: var(--paper-ink); }
.reviews + .sec::before, .reviews::before { display: none; }
.reviews .label { color: var(--paper-ink-2); }
.rev-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rev-num { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: calc(clamp(96px, 12vw, 176px) * var(--h-scale)); line-height: .82; letter-spacing: -.02em; }
.rev-stars { display: block; margin-top: 18px; font-size: 24px; color: var(--red-deep); }
.rev-count { margin-top: 18px; }
.rev-count a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 17px; color: var(--paper-ink); text-decoration-color: var(--red-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rev-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--paper-ink); }
.rev { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px 22px 22px 0; }
.rev + .rev { padding-left: 22px; border-left: 1px solid #a9a9a3; }
.rev-long { grid-column: span 3; }
.rev:nth-child(3) { border-left: 0; padding-left: 0; }
.rev:nth-child(n + 3) { border-top: 1px solid #a9a9a3; }
.rev blockquote { font-family: var(--display); font-weight: 600; font-stretch: 100%; font-size: calc(19px * var(--h-scale)); line-height: 1.38; }
html[lang="ru"] .rev blockquote { font-family: var(--text); font-weight: 500; font-size: 19px; }
.rev-long blockquote { font-weight: 500; font-size: calc(20px * var(--h-scale)); }
.rev blockquote::before { content: "\201C"; }
.rev blockquote::after { content: "\201D"; }
.rev-who { font: 600 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink); }
.rev-who span { color: var(--paper-ink-2); margin-left: 8px; }

/* ------------------------------------------------------------ quote: rail + light work order */
.q-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.rail { position: sticky; top: calc(var(--head-h) + 24px); border-top: 1px solid var(--line-2); }
.rail-k { padding: 16px 0 6px; font: 500 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.route { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.r-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--red-ink); }
.r-t { display: grid; gap: 2px; min-width: 0; }
.r-t b { font-family: var(--display); font-stretch: 112%; font-weight: 750; font-size: calc(19px * var(--h-scale)); line-height: 1.2; }
html[lang="ru"] .r-t b { font-weight: 600; font-size: 17px; line-height: 1.3; }
.r-num { white-space: nowrap; }
.r-t > span { color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.route:hover b { text-decoration: underline; text-underline-offset: 3px; }

.wo { background-color: var(--paper); color: var(--paper-ink); border-radius: 3px; overflow: hidden; }
.wo :focus-visible { outline-color: var(--paper-ink); }
.wo-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 13px clamp(18px, 3vw, 36px); background-color: var(--paper-ink); color: var(--paper); font: 500 12.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wo-req { color: #c9c7c0; }
.wo-t { display: flex; flex-wrap: wrap; }
.wo-t [data-wo-date]:not(:empty)::before { content: "\a0·\a0"; }
.qf, .q-done { padding: clamp(20px, 3vw, 36px); }
.qf { display: grid; gap: 22px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 18px; }
.fld { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; align-content: start; }
.fld > label, .fld legend, .flabel { font-family: var(--text); font-weight: 650; font-size: 15.5px; line-height: 1.3; color: var(--paper-ink); padding: 0; }
.fld legend { margin-bottom: 8px; }
.fld i { font-style: normal; color: var(--red-deep); }
.opt { font-weight: 400; font-size: 14px; color: var(--paper-ink-2); margin-left: 4px; }
.guide { margin-top: -2px; font-size: 14.5px; line-height: 1.45; color: var(--paper-ink-2); }
.fld input[type="text"], .fld input[type="tel"], .fld input[type="email"], .fld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background-color: #fff; border: 1.5px solid var(--field-line); border-radius: var(--radius);
  font-size: 16px; color: var(--paper-ink); line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.fld textarea { resize: vertical; min-height: 112px; }
.fld input::placeholder, .fld textarea::placeholder { color: #6b6e74; opacity: 1; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--paper-ink); box-shadow: 0 0 0 3px rgba(200, 32, 42, .28); }
.fld.is-bad input, .fld.is-bad textarea { border-color: var(--red-deep); }
.err { color: var(--red-deep); font-size: 14.5px; font-weight: 600; line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input, .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip > span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px 0 12px;
  border: 1.5px solid var(--field-line); border-radius: var(--radius); background-color: #fff;
  font-size: 15px; line-height: 1.2; color: var(--paper-ink); transition: background-color .15s, border-color .15s, color .15s;
}
.chip-t { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 359px) { .chip-t { -webkit-hyphens: auto; hyphens: auto; } }   /* "Modifica-ciones" at 320 px */
.chip > span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--field-line); border-radius: 2px; background-color: #fff; }
.chip:hover > span { border-color: var(--paper-ink); }
.chip input:checked + span { background-color: var(--paper-ink); border-color: var(--paper-ink); color: #fff; }
.chip input:checked + span::before {
  border-color: var(--red); background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.chip input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.chips-fld.is-bad .chip > span { border-color: var(--red-deep); }
.chip.flash > span { animation: flash .9s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 5px rgba(200, 32, 42, .45); } to { box-shadow: 0 0 0 0 rgba(200, 32, 42, 0); } }

.seg-fld { container-type: inline-size; }
.seg { display: grid; border: 1.5px solid var(--field-line); border-radius: var(--radius); overflow: hidden; background-color: #fff; }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg label { position: relative; cursor: pointer; min-width: 0; }
.seg label + label span { border-left: 1.5px solid var(--field-line); }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 4px; font-size: 15px; color: var(--paper-ink); text-align: center; line-height: 1.15; transition: background-color .15s, color .15s; }
.seg input:checked + span { background-color: var(--paper-ink); color: #fff; font-weight: 650; }
@container (max-width: 300px) {
  .seg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-4 label:nth-child(3) span { border-left: 0; }
  .seg-4 label:nth-child(n + 3) span { border-top: 1.5px solid var(--field-line); }
}
/* the Instagram handle only when Instagram is picked: CSS alone (works even if site.js never arrives);
   browsers without :has() fall back to the class site.js sets */
.qf:has(input[name="contact"][value="instagram"]:not(:checked)) .ig-fld { display: none; }
@supports not selector(:has(*)) { .js .ig-fld:not(.is-on) { display: none; } }
/* Email is required when it is the way to reach you: drop "optional", show the red star */
.req-email { display: none; }
.qf:has(input[name="contact"][value="email"]:checked) label[for="f-email"] .opt,
.qf.is-email label[for="f-email"] .opt { display: none; }
.qf:has(input[name="contact"][value="email"]:checked) .req-email,
.qf.is-email .req-email { display: inline; }

/* photos */
.photo-plain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ph-in { display: grid; gap: 6px; padding: 10px; border: 1.5px solid var(--field-line); border-radius: var(--radius); background-color: #fff; font-size: 14px; font-weight: 600; }
.ph-in input { max-width: 100%; font-size: 14px; font-weight: 400; }
.dz { position: relative; }
.dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dz-drop {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i t" "i s"; align-items: center; column-gap: 16px; row-gap: 2px;
  min-height: 92px; padding: 18px 20px; border: 2px dashed var(--field-line); border-radius: var(--radius); background-color: #fff;
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.dz-drop .ico { grid-area: i; color: var(--red); }
.dz-t { grid-area: t; font-size: 16.5px; }
.dz-t b { font-family: var(--display); font-stretch: 112%; font-weight: 750; }
html[lang="ru"] .dz-t b { font-weight: 600; }
.dz-hint-fine { color: var(--paper-ink-2); }
.dz-s { grid-area: s; font-size: 14px; color: var(--paper-ink-2); }
.dz-drop:hover, .dz.is-over .dz-drop { border-color: var(--paper-ink); background-color: #fbfaf7; }
.dz-input:focus-visible + .dz-drop { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.dz.is-full .dz-drop { opacity: .55; cursor: default; }
.dz-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.dz-thumbs:empty { display: none; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background-color: #dcd9d1; border: 1px solid var(--paper-line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-busy img { opacity: .35; }
.thumb-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background-color: rgba(21, 22, 24, .88); color: #f3f1eb; font: 500 11px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: none; color: #fff; cursor: pointer; }
.thumb-x::before { content: ""; position: absolute; inset: 4px; border-radius: var(--radius); background-color: rgba(21, 22, 24, .88); }
.thumb-x .ico { position: relative; }
.thumb-x:hover::before { background-color: var(--red); }

.q-send { display: grid; gap: 14px; padding-top: 4px; }
.btn-send { width: 100%; }
.consent { font-size: 14px; line-height: 1.5; color: var(--paper-ink-2); }
.consent a, .send-err a { color: var(--paper-ink); }
.send-note:focus { outline: none; }
.qf.is-sending [data-send] { opacity: .65; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.q-done .label { color: var(--paper-ink-2); }
.q-done:focus { outline: none; }
.q-done-t { font-family: var(--display); font-stretch: 112%; font-weight: var(--w-heavy); font-size: calc(clamp(30px, 3.4vw, 44px) * var(--h-scale)); line-height: 1.05; margin-bottom: 14px; }
.q-done-p { font-size: 18px; max-width: 34em; }
.q-done-alt { margin-top: 16px; color: var(--paper-ink-2); }
.q-done a { color: var(--paper-ink); }

/* ------------------------------------------------------------ visit */
.v-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.v-sub { margin-top: 16px; color: var(--ink-2); max-width: 30em; }
.v-open { margin-top: 22px; display: flex; align-items: center; gap: 10px; font: 500 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.v-open .dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--ink-3); }
.v-open.is-open .dot { background-color: #4fd17a; }
.hours { margin-top: 14px; border-collapse: collapse; width: 100%; max-width: 440px; }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { font-family: var(--text); font-weight: 600; }
.hours td { text-align: right; font-family: var(--mono); font-size: 14.5px; color: var(--ink-2); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--ink); }
.hours tr.is-today th::after { content: attr(data-today); margin-left: 10px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }
.v-plus { margin-top: 16px; font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.v-plus span { text-transform: uppercase; color: var(--ink-3); margin-right: 8px; letter-spacing: .08em; }
.v-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.v-map { position: relative; min-height: 440px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background-color: var(--panel); }
.v-map-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--ink-2); }
.v-map-card .ico { width: 34px; height: 34px; color: var(--red-ink); }
.v-map-card b { display: block; color: var(--ink); font-family: var(--display); font-stretch: 112%; font-size: 20px; }
.v-map-card a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); }
.v-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.03); }
.js .v-map iframe { opacity: 0; transition: opacity .3s; }
.js .v-map iframe.is-in { opacity: 1; }
.v-map-link { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background-color: var(--bg); color: var(--ink); padding: 0 12px; border-radius: var(--radius); font: 500 12px/1 var(--mono); letter-spacing: .04em; text-decoration: none; border: 1px solid var(--line-2); }

/* ------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 110px) 0 calc(28px + env(safe-area-inset-bottom)); background-color: #0a0b0d; overflow: hidden; }
.foot-mark { display: inline-flex; flex-direction: column; font-family: var(--mark); font-feature-settings: "ss04"; line-height: .86; white-space: nowrap; font-size: clamp(60px, 15vw, 230px); }
.fm-1 { font-weight: 900; font-stretch: 125%; letter-spacing: -.005em; }
.fm-2 { font-weight: 300; font-stretch: 125%; font-size: .52em; letter-spacing: .068em; color: var(--ink-2); margin-top: .1em; }
.fm-3 { font-weight: 380; font-stretch: 125%; font-size: max(12px, .258em); letter-spacing: .28em; margin-right: -.28em; color: var(--ink-3); margin-top: .5em; }
.foot-cols { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 28px; }
.foot-cols p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.foot-cols b { display: block; margin-bottom: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.foot-cols a { display: flex; align-items: center; width: fit-content; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot-cols a.foot-addr { display: block; padding-block: 8px; }
.foot-cols a:hover { text-decoration: underline; }
.foot-langs { display: flex; flex-direction: column; }
.foot-langs a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.foot-langs a[aria-current] { color: var(--red-ink); }
.foot-lname { color: var(--ink-2); }
.foot-fine { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 6px 22px; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.foot-fine a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--ink-2); }

/* ------------------------------------------------------------ thanks / privacy / 404 */
.plain { padding: calc(var(--head-h) + clamp(56px, 9vw, 120px)) 0 clamp(64px, 8vw, 110px); min-height: 80vh; }
.plain-h { max-width: 16em; margin-bottom: 26px; }
.plain-p { margin-top: 16px; max-width: 40em; color: var(--ink-2); font-size: 18px; }
.plain-p a { color: var(--ink); }
.plain-btns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------ below the fold: skip layout until near the screen
   (first paint / LCP on mid-range phones). The sizes are the measured heights per layout; `auto` remembers the
   real one once a block has been rendered. The quote section stays out (dock + anchor target + form).
   site.js switches it off (html.cv-done) once the page is idle and before any in-page link scrolls, so link
   targets land exactly; without JS it is never on. */
.services, .work, .reviews, .visit, .foot { content-visibility: auto; }
html:not(.js) :is(.services, .work, .reviews, .visit, .foot), html.cv-done :is(.services, .work, .reviews, .visit, .foot) { content-visibility: visible; }
.services { contain-intrinsic-size: auto 1700px; }
.work { contain-intrinsic-size: auto 2630px; }
.reviews { contain-intrinsic-size: auto 600px; }
.visit { contain-intrinsic-size: auto 940px; }
.foot { contain-intrinsic-size: auto 810px; }
@media (max-width: 1199px) {
  .services { contain-intrinsic-size: auto 1800px; }
  .work { contain-intrinsic-size: auto 2300px; }
  .reviews { contain-intrinsic-size: auto 680px; }
  .visit { contain-intrinsic-size: auto 1050px; }
  .foot { contain-intrinsic-size: auto 740px; }
}
@media (max-width: 599px) {
  .services { contain-intrinsic-size: auto 2750px; }
  .work { contain-intrinsic-size: auto 3200px; }
  .reviews { contain-intrinsic-size: auto 1030px; }
  .visit { contain-intrinsic-size: auto 1170px; }
  .foot { contain-intrinsic-size: auto 960px; }
}

/* ------------------------------------------------------------ dock (phones) */
.dock { display: none; }

/* ------------------------------------------------------------ pointer devices */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .plate-img img { transition: transform 1.2s var(--ease); }
  .plate:hover .plate-img img { transform: scale(1.025); }
}

/* ------------------------------------------------------------ desktop narrow */
@media (max-width: 1199px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .langs { display: none; }
  .tb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-c { border-top: 1px solid var(--line); }
  .tb-c:nth-child(-n + 3) { border-top: 0; }
  .tb-c:nth-child(4) { border-left: 0; padding-left: var(--gutter); }
  .tb-cta { padding-right: var(--gutter); }
  .tb-c:first-child { padding-left: var(--gutter); }
}

/* ------------------------------------------------------------ tablet & phone */
@media (max-width: 899px) {
  :root { --head-h: 64px; }
  body { font-size: 16px; }
  .head-tel-num { display: none; }
  .head-tel { width: 44px; height: 44px; justify-content: center; border: 1px solid rgba(239, 238, 234, .3); border-radius: var(--radius); background-color: #15171a; }
  .head-cta { gap: 8px; }
  .mark-1 { font-size: 22px; }
  .mark-2 { font-size: 9.1px; }
  html.dock-on .head-quote, html.dock-on .head-tel { display: none; }

  .idx-g { grid-template-columns: minmax(0, 1fr); }
  .idx-gh { position: static; }
  .idx-recent { grid-column: 1; }
  .rev-grid, .q-grid, .v-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .rev-score { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: end; }
  .rev-score .label { grid-column: 1 / -1; }
  .rev-num { grid-row: 2 / span 2; }
  .rev-stars { margin-top: 0; }
  .rev-count { margin-top: 6px; }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate-1, .plate-3, .plate-6 { grid-column: 1; margin-top: 0; }
  .plate-2, .plate-4 { grid-column: 2; margin-top: 64px; }
  .plate-6 { grid-column: 1 / -1; margin-top: 8px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 28px; align-items: end; }
  .plate-6 figcaption { padding-top: 0; }
  .plate-5 { grid-column: 1 / -1; }
  .plate-3 { margin-top: -24px; }
  .v-map { min-height: 340px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the dock: two fixed buttons, safe-area padding on the buttons themselves, no background container */
  .dock {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    visibility: hidden; transform: translate3d(0, 110%, 0); transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .dock.is-on { visibility: visible; transform: none; transition: transform .3s var(--ease), visibility 0s; }
  .dock-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: calc(58px + env(safe-area-inset-bottom, 0px)); padding: 0 12px env(safe-area-inset-bottom, 0px);
    font-family: var(--display); font-stretch: 112%; font-weight: 750; font-size: 16px; text-decoration: none;
  }
  html[lang="ru"] .dock-btn { font-weight: 600; font-size: 15px; }
  .dock-call { background-color: #1d2024; color: var(--ink); border-top: 1px solid var(--line-2); }
  .dock-call .ico { color: var(--red-ink); }
  .dock-quote { background-color: var(--red); color: #fff; border-top: 1px solid var(--red); }
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* phones */
@media (max-width: 599px) {
  .eb-loc { display: none; }
  /* phones: headline over the sky, cars in the middle, and the one-liner joins the solid bottom band */
  .cover-top { display: contents; }
  .eyebrow { font-size: 12px; margin: calc(var(--head-h) + clamp(10px, 2.4vh, 22px)) var(--gutter) 0; }
  .kin { margin: clamp(6px, 1.4vh, 14px) var(--gutter) 0; --F: min(var(--kin-cap), calc((100vw - 2 * var(--gutter)) / var(--kin-k2, var(--kin-k, 3.82)))); }
  .cw-br { display: block; height: 0; }   /* BODY / SHOP on two lines */
  .kin-row { font-size: max(24px, calc(var(--F) * .4)); }
  .kin-lead { font-size: max(17px, .56em); }
  html[lang="ru"] .kin-lead { font-size: max(16px, .56em); }
  .eyebrow { color: var(--ink); }
  .cover-lede { margin: auto 0 0; padding: 11px var(--gutter) 10px; max-width: none; font-size: 15px; line-height: 1.4; background-color: #0e0f11; border-top: 1px solid var(--line-2); text-shadow: none; animation: none; }
  .cover-lede + .tb { border-top-color: var(--line); }
  .tb { grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 0; }
  .tb-c { padding: 9px 12px; border-top: 1px solid var(--line); }
  .tb-addr { display: none; }
  .tb-hours { grid-column: 1 / span 2; border-left: 0; padding-left: var(--gutter) !important; border-top: 0; }
  .tb-rate { grid-column: 3 / span 2; border-top: 0; }
  .tb-text { grid-column: 5 / span 2; grid-row: 1; border-top: 0; }
  .tb-call { grid-column: 1 / span 3; grid-row: 2; border-left: 0; align-items: center; justify-content: center; min-height: 58px; padding-left: 12px !important; }
  .tb-cta { grid-column: 4 / span 3; grid-row: 2; align-items: center; justify-content: center; min-height: 58px; padding-right: 12px; }
  .tb-call .tb-k, .tb-cta .tb-k { display: none; }
    .tb-k { font-size: 10.5px; letter-spacing: .06em; }
  .js .tb-hours .tb-kt { display: none; }   /* the Open / Closed badge says it */
  html.tb-on .head-quote, html.tb-on .head-tel { display: none; }   /* the title block has both, at thumb height */
  .tb-v { font-size: 13.5px; }
  .tb-long { display: none; }
  .tb-short { display: inline; }
  .tb-rate .tb-v { gap: 5px; }
  .tb-rate .tb-big { font-size: 15px; }
  .tb-stars { display: none; }
  .tb-rc { font-size: 13px; }
  .tb-big { font-size: 17px; }
  .tb-call .tb-v { display: flex; align-items: center; gap: 8px; }
  .tb-call .tb-v .ico { color: var(--red-ink); width: 18px; height: 18px; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chip > span { width: 100%; height: 100%; min-height: 52px; padding: 6px 10px 6px 10px; font-size: 14px; gap: 8px; }
  .chip > span::before { width: 16px; height: 16px; }
  .wo-head { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 11px; letter-spacing: .05em; padding: 11px 16px; }
  .wo-t { flex-direction: column; }   /* the date gets its own line, never an orphan " · " */
  .wo-t [data-wo-date]::before { content: none; }
  .qf, .q-done { padding: 18px 16px 22px; }
  .rev-count a { font-size: 16px; }
  .v-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-btns .btn { padding: 0 10px; }
  .v-btns .btn-red { grid-column: 1 / -1; }
  .rev-stars { font-size: 20px; max-width: 100%; }
  .tb-text .tb-v { font-size: 13.5px; }

  .row2 { grid-template-columns: minmax(0, 1fr); }
  .idx-row { grid-template-columns: 38px minmax(0, 1fr); gap: 4px 10px; padding: 14px 0; }
  .idx-n, .idx-d { grid-column: 2; }
  .idx-q { grid-column: 2; justify-self: start; margin: -4px 0 -8px; }
  .idx-l { font-size: calc(64px * var(--h-scale)); }
  .idx-gh { grid-template-columns: 64px minmax(0, 1fr); }
  .plates { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .plate, .plate-1, .plate-2, .plate-3, .plate-4, .plate-5, .plate-6 { grid-column: 1; margin-top: 0; }
  .plate-6 { display: block; }
  .plate-6 figcaption { padding-top: 14px; }
  .plate:nth-child(even) { margin-left: 12%; }
  .plate:nth-child(odd) { margin-right: 6%; }
  .plate-5 { margin-right: calc(-1 * var(--gutter)) !important; margin-left: calc(-1 * var(--gutter)); }
  .plate-5 figcaption { padding-inline: var(--gutter); }
  .rev-list { grid-template-columns: minmax(0, 1fr); }
  .rev, .rev-long, .rev + .rev { grid-column: 1; padding: 20px 0; border-left: 0; }
  .rev + .rev { border-top: 1px solid #a9a9a3; }
  .seg span { font-size: 14px; }
  .tm-a { display: none; }   /* thumbnails: only the size that is sent */
  .photo-plain { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .btn { padding: 0 18px; }
  .head .btn-sm { padding: 0 12px; }
}
@media (max-width: 599px) and (max-height: 700px) {
  .cover-lede { font-size: 14px; padding-block: 8px 7px; }
  .tb-c { padding-block: 6px; }
  .tb-call, .tb-cta { min-height: 52px; }
}
@media (hover: none) { .dz-hint-fine { display: none; } }
@media (max-width: 400px) {
  .head-in { gap: 10px; }
  .mark-1 { font-size: 20px; }
  .mark-2 { font-size: 8.3px; }
  .head-cta { gap: 6px; }
  .head .btn-sm { padding: 0 10px; font-size: 13.5px; }
  .seg-4 span { font-size: 13px; }
  /* title block: short values in the one-third cells ("Photos", "(17)") */
  .tb-l4 { display: none; }
  .tb-s4 { display: inline; }
}
@media (max-width: 359px) {
  .head .head-quote { display: none; }
  .tb-c { padding-inline: 8px; }
  .tb-k { font-size: 10px; letter-spacing: .03em; }
  html[lang="ru"] .tb-call .tb-big { font-size: 15px; }
  html[lang="ru"] .dock-btn { font-size: 13.5px; gap: 6px; padding-inline: 8px; }
  .thumb-x::before { inset: 8px; }
}

/* portrait tablets: the long Spanish / Russian business line breaks in two, like on phones (else ~60% of EN) */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  html:is([lang="ru"], [lang="es"]) .cw-br { display: block; height: 0; }
  html:is([lang="ru"], [lang="es"]) .kin { --F: min(var(--kin-cap), calc((min(100vw, 1400px) - 2 * var(--gutter)) / var(--kin-k2))); }
  @supports (width: 1cqw) { html:is([lang="ru"], [lang="es"]) .kin { --F: min(var(--kin-cap), calc(100cqw / var(--kin-k2))); } }
}

/* short landscape screens (phones turned sideways): one-row title block, smaller type */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  :root { --head-h: 56px; }
  .eyebrow, .cover-lede, .kin-row { display: none; }   /* only the big BODY SHOP line fits above the cars */
  .kin { --F: min(var(--kin-cap), calc((100vw - 2 * var(--gutter)) * .6 / var(--kin-k))); }
  @supports (width: 1cqw) { .kin { --F: min(var(--kin-cap), calc(60cqw / var(--kin-k))); } }
  .cover-top { padding-top: calc(var(--head-h) + 2px); }
  .kin { --kin-cap: 16vh; margin-top: 0; }
  .tb { grid-template-columns: 1fr 1.35fr 1fr 1.2fr; min-height: 0; }
  .tb-c { border-top: 0 !important; padding: 8px 14px; }
  .tb-addr, .tb-rate { display: none; }
  .tb-hours { grid-column: 1; grid-row: 1; border-left: 0; padding-left: var(--gutter) !important; }
  .tb-call { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line) !important; }
  .tb-text { grid-column: 3; grid-row: 1; }
  .tb-cta { grid-column: 4; grid-row: 1; }
  .tb-k { font-size: 10.5px; }
  .tb-big { font-size: 16px; }
  html[lang="ru"] .tb-big { font-size: 15px; }
  .tb-long, .tb-l4 { display: none; }
  .tb-short, .tb-s4 { display: inline; }
  /* the header keeps its own Call + Get a quote here: no dock eating a third of a 360 px tall screen */
  .dock { display: none !important; }
  html.dock-on .head-quote, html.dock-on .head-tel { display: inline-flex; }
}

/* ------------------------------------------------------------ touch screens: solid paint only */
@media (hover: none), (max-width: 899px) {
  .kin-word::after { background: linear-gradient(90deg, transparent 10px, var(--led) 10px, var(--led) 13px, transparent 13px) no-repeat 0 0 / 23px 100%; }   /* no glow */
  .sec + .sec::before { box-shadow: none; }
  .cover-lede { text-shadow: none; }
}

/* ------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}