/* ===== 00-tokens.css ===== */
/* ===== 00-tokens: self-hosted @font-face subsets (tools/fonts.py output) and the TOP PAINT design tokens (DESIGN.md B) ===== */

/* Geologica 300 normal cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Geologica-300-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geologica 300 normal cyrillic */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Geologica-300-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geologica 300 normal latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Geologica-300-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geologica 300 normal latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Geologica-300-normal-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;
}
/* Geologica 400 normal cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Geologica-400-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geologica 400 normal cyrillic */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Geologica-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geologica 400 normal latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Geologica-400-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geologica 400 normal latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Geologica-400-normal-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;
}
/* Geologica 500 normal cyrillic-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Geologica-500-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Geologica 500 normal cyrillic */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Geologica-500-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geologica 500 normal latin-ext */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Geologica-500-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geologica 500 normal latin */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Geologica-500-normal-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;
}
/* Sofia Sans Extra Condensed 700 normal cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-700-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Sofia Sans Extra Condensed 700 normal cyrillic */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-700-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Sofia Sans Extra Condensed 700 normal latin-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-700-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sofia Sans Extra Condensed 700 normal latin */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-700-normal-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;
}
/* Sofia Sans Extra Condensed 800 normal cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-800-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Sofia Sans Extra Condensed 800 normal cyrillic */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-800-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Sofia Sans Extra Condensed 800 normal latin-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-800-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sofia Sans Extra Condensed 800 normal latin */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-800-normal-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;
}
/* Sofia Sans Extra Condensed 900 normal cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-900-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Sofia Sans Extra Condensed 900 normal cyrillic */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-900-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Sofia Sans Extra Condensed 900 normal latin-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-900-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sofia Sans Extra Condensed 900 normal latin */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/SofiaSansExtraCondensed-900-normal-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;
}

/* ============ TOP PAINT tokens ============ */
:root {
  /* colour: one dark theme, one accent */
  --bg:           #0D0E10;                 /* page, preloader, solid nav */
  --surface:      #15171A;                 /* cards, ledger rows, location block, menu */
  --surface-2:    #1E2126;                 /* hover surfaces, ghost button hover fill, dragover */
  --primer:       #23262B;                 /* hero primer canvas fill, image placeholder colour */
  --text:         #F0EEE9;                 /* primary text, wordmark, filled marquee words, 16.7:1 on --bg */
  --muted:        #8E9196;                 /* captions, secondary body, inactive controls, 6.1:1 on --bg */
  --accent:       #CC0605;                 /* RAL 3020 Verkehrsrot, screen approximation, uses enumerated in D.1 */
  --accent-ink:   #F7F5F0;                 /* the only text colour on --accent, 5.4:1 */
  --line:         rgba(240,238,233,.08);   /* hairlines INSIDE components only: ledger rows, accordion rows */
  --line-strong:  rgba(240,238,233,.24);   /* ruler ticks, outline text stroke, field underline at rest, ghost button border */
  --hatch:        rgba(240,238,233,.14);   /* diagonal hatch of the steel slab, the only pattern on the page */
  --shade:        linear-gradient(to top, var(--bg), transparent 45%); /* hero only, so text sits on the photo */

  /* content colour of the colour bench: written by 13-cvyat.js, read by 15-sloeve and 18-raboti, nothing else */
  --paint:        #1E3A6E;                 /* default: Тъмносиньо металик 890 */

  /* type families (self-hosted, H.4) */
  --ff-display:   "Sofia Sans Extra Condensed", "Arial Narrow", Impact, sans-serif;
  --ff-body:      "Geologica", Arial, system-ui, sans-serif;
  --ff-mono:      var(--ff-body);         /* owner 2026-10-10: no monospace on the public site; small labels use the body sans */

  /* fluid type scale, root 16px */
  --fs-h1:        clamp(3.5rem, 10.5vw, 11.5rem);   /* display-1: hero headline, facts numerals, the КАСКО ghost word */
  --fs-h2:        clamp(2.5rem, 6.8vw, 7.5rem);     /* display-2: section titles, menu links, accent card title, preloader temperature */
  --fs-h3:        clamp(1.625rem, 3.2vw, 3.25rem);  /* display-3: card titles, ledger titles, process titles, anatomy readout, form success */
  --fs-quote:     clamp(1.5rem, 3vw, 3rem);         /* manifesto paragraph, review quotes */
  --fs-lead:      clamp(1.125rem, 1.35vw, 1.5rem);  /* hero lead, section leads */
  --fs-body:      clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  --fs-small:     0.875rem;                          /* eyebrows, captions, field names, form messages */
  --fs-mono:      0.75rem;                           /* codes, instrument values, phone, meta */
  --fs-wordmark:  clamp(7rem, 22vw, 22rem);         /* footer TOP over PAINT */

  /* line heights */
  --lh-display:   .86;
  --lh-h2:        .9;
  --lh-h3:        .98;
  --lh-quote:     1.2;
  --lh-lead:      1.4;
  --lh-body:      1.55;

  /* spacing scale (rem) */
  --s1: .25rem;  --s2: .5rem;  --s3: .75rem;  --s4: 1rem;  --s5: 1.5rem;
  --s6: 2rem;    --s7: 3rem;   --s8: 4rem;    --s9: 6rem;  --s10: 8rem;
  --section-pad: clamp(88px, 12vw, 200px);  /* block padding of every .sec; sections are separated by space only */

  /* layout */
  --container:    1440px;
  --gutter:       clamp(16px, 5vw, 96px);
  --cols:         12;
  --gap:          clamp(16px, 1.6vw, 24px);
  --nav-h:        64px;                     /* 56px below 1024px, overridden in 05-nav.css */

  /* shape: one value, everywhere */
  --r:            0;

  /* easing: CSS approximations of the GSAP eases used in G (GSAP name in JS, token in CSS) */
  --ease-out-expo:     cubic-bezier(.19, 1, .22, 1);        /* gsap expo.out: entrances, masks, ticks */
  --ease-in-out-quint: cubic-bezier(.83, 0, .17, 1);        /* gsap power4.inOut: bands, doors, clip passes */
  --ease-out-quart:    cubic-bezier(.165, .84, .44, 1);     /* gsap power3.out: button wipes, sweeps, char rise */
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);   /* gsap power2.inOut: colour tweens, accordion */
  --ease-in-quad:      cubic-bezier(.55, .085, .68, .53);   /* gsap power1.in: the drip */

  /* durations */
  --d-fast:       .3s;   /* underline draws, readout flip, burger cross */
  --d-base:       .45s;  /* accordion, button wipe, caption fade */
  --d-slow:       .7s;   /* band wipe, follower morph */
  --d-reveal:     1.1s;  /* line masks, clip passes */

  /* z-index scale */
  --z-base:       1;
  --z-overlap:    2;     /* elements that break the grid into a neighbour section */
  --z-nav:        100;
  --z-menu:       200;
  --z-preloader:  1000;
  --z-follower:   1100;
}

/* ===== 01-base.css ===== */
/* ===== 01-base: reset, Lenis, html.js rules, base type, utilities, reduced motion, print ===== */

/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
i, em { font-style: normal; }
strong, b { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; border-radius: var(--r); }
button { cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none; }
[id] { scroll-margin-top: var(--nav-h); }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Lenis 1.3.26, the eight rules from src/vendor/lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical] {
  overscroll-behavior: contain;
}
/* horizontal strips (services, colour plates) contain only the x axis: a vertical swipe that starts on a strip must
   still scroll the page. Lenis ships "contain" on both axes here, which trapped phones on the services strip. */
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* html.js rules: entrances wait for 00-core.js */
.js [data-reveal] { visibility: hidden; }

/* safety net: if main.js never executes, the content still appears after ten seconds */
@keyframes tp-safety-show { to { visibility: visible; } }
@keyframes tp-safety-hide { to { visibility: hidden; opacity: 0; } }
.js [data-reveal] { animation: tp-safety-show 0s linear 10s forwards; }
.js .preloader { animation: tp-safety-hide .3s linear 10s forwards; }

/* base type: elements get the role by default, the .t- classes give it to anything */
h1, h2, h3 { color: var(--text); font-family: var(--ff-display); }
h1, .t-h1 {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
h2, .t-h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-transform: uppercase;
}
h3, .t-h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  text-transform: none;
}
.t-quote {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: 0;
  text-transform: none;
}
.t-lead {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: 0;
  text-transform: none;
  max-width: 34em;
}
.t-body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
  max-width: 66ch;
}
.t-small {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.mono {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.tnum { font-variant-numeric: tabular-nums; }
@media (min-width: 1280px) {
  .t-quote { font-weight: 300; }
}

/* split targets and line masks (C.4): Cyrillic tails need the padding; text-wrap stays pretty, never balanced */
[data-reveal], .line-mask, .line, .word, .char { font-kerning: none; text-wrap: pretty; hyphens: manual; }
.line-mask { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.line { display: block; }
.char-mask { padding-bottom: .06em; margin-bottom: -.06em; }

/* utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: var(--s3);
  left: var(--gutter);
  z-index: var(--z-follower);
  padding: var(--s3) var(--s5);
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
  border-radius: var(--r);
  transform: translateY(-200%);
  transition: transform var(--d-fast) var(--ease-out-quart);
}
.skip:focus-visible { transform: none; outline: 2px solid var(--bg); outline-offset: -4px; }

/* section wrapper, container, grid (D.8): sections are separated by space only */
.sec { position: relative; padding-block: var(--section-pad); }
.sec--stage { padding-block: 0; }
.sec__in { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); }
.bleed { width: var(--vw, 100vw); margin-inline: calc(50% - var(--vw, 100vw) / 2); }
@media (max-width: 767px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}

/* reduced motion contract (G.3, verbatim) */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still *, html.tp-still *::before, html.tp-still *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.tp-still.js [data-reveal] { visibility: visible; }
  html.tp-still.js #manifest .word { opacity: 1; }
  html.tp-still .lenta__row { transform: none !important; }
  html.tp-still .ghost { --fill: 100%; }


/* print basics */
@media print {
  .preloader, .follower, .skip { display: none; }
  .js [data-reveal] { visibility: visible; }
  .sec { padding-block: var(--s6); }
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}

/* ===== 02-components.css ===== */
/* ===== 02-components: shared components D.2 to D.11 plus the preloader (E.2). Sections position these, never restyle them. ===== */

/* D.2 buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  overflow: clip;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn__bg {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: var(--o, left) center;
  transition: transform var(--d-base) var(--ease-out-quart);
  pointer-events: none;
}
.btn__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: color .2s var(--ease-out-quart) .12s;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary .btn__bg { background: var(--text); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost .btn__bg { background: var(--surface-2); }
.btn--sm { height: 48px; padding: 0 20px; font-size: .9375rem; }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__bg { transform: scaleX(1); }
  .btn--primary:hover .btn__label { color: var(--bg); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }
}
@media (max-width: 767px) {
  .btn { height: 52px; }
  .btn--sm { height: 48px; }
}

/* D.2 char-split rows, built by 00-core.js inside [data-chars] */
.chars {
  position: relative;
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  white-space: nowrap;
}
.chars__row { display: block; white-space: nowrap; }
.chars__row--dup { position: absolute; left: 0; top: 100%; }
.ch { display: inline-block; }

/* D.3 inline links */
.link-underline {
  position: relative;
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}
.link-underline.mono { color: var(--muted); }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--d-fast) var(--ease-out-quart);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* D.5 form fields */
.field { position: relative; display: block; }
.field__name {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  transition: color var(--d-fast) var(--ease-out-quart);
}
.field__input {
  display: block;
  width: 100%;
  padding: var(--s3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  caret-color: var(--text);
  outline: none;
  appearance: none;
}
.field__input::placeholder { color: var(--muted); opacity: 1; }
textarea.field__input { min-height: calc(7 * var(--lh-body) * 1em + 2 * var(--s3)); resize: vertical; }
.field__bar {
  display: block;
  height: 1px;
  margin-top: -1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-fast) var(--ease-out-quart);
  pointer-events: none;
}
.field:focus-within .field__bar { transform: scaleX(1); }
.field:focus-within .field__name { color: var(--text); }
.field.is-invalid .field__bar { transform: scaleX(1); height: 2px; background: var(--accent); }
.field__error {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
}
.field__error[hidden] { display: none; }
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  box-shadow: inset 0 0 0 1000px var(--surface);
  caret-color: var(--text);
}

/* D.5 checkbox: a 20px square, no tick glyph */
.check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
}
.check__box {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: transparent;
  transition: background-color var(--d-fast) var(--ease-out-quart), box-shadow var(--d-fast) var(--ease-out-quart);
}
.check__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: var(--bg);
  transform: scale(0);
  transition: transform var(--d-fast) var(--ease-out-quart);
}
.check__input:checked ~ .check__box { background: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.check__input:checked ~ .check__box::after { transform: scale(1); }
.check__input:focus-visible ~ .check__box { outline: 2px solid var(--text); outline-offset: 2px; }
.check.is-invalid .check__box { box-shadow: inset 0 0 0 1px var(--text); }
.check__text { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

/* D.5 drop zone */
.drop {
  position: relative;
  display: block;
  padding: var(--s6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  transition: background-color var(--d-fast) var(--ease-out-quart);
}
.drop.is-over { background: var(--surface-2); }
.drop:focus-within { border-color: var(--text); }
.drop__hint { display: block; cursor: pointer; }
.drop__list { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.drop__list:empty { display: none; }
.drop__thumb { position: relative; width: 72px; }
.drop__img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--primer);
}
.drop__remove {
  display: block;
  margin-top: var(--s1);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--muted);
}
.drop__remove:hover,
.drop__remove:focus-visible { color: var(--text); }

/* D.6 band wipe: four .band inside the photo box, appended by TP.bandsTl */
.band {
  position: absolute;
  left: 0;
  top: calc(var(--i, 0) * 25%);
  width: 100%;
  height: calc(25% + 1px);
  background: var(--bg);
  transform-origin: right center;
  pointer-events: none;
  z-index: 2;
}
.media--on-surface .band { background: var(--surface); }
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .band { display: none; }


/* D.7 media: the figure holds the photo box (picture) and the optional caption under it */
.media {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--r);
}
.media > picture {
  position: relative;
  display: block;
  overflow: clip;
  aspect-ratio: var(--ar, 3 / 2);
  background: var(--primer);
  border-radius: var(--r);
}
.media__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.media--parallax .media__img { height: 125%; top: -12.5%; will-change: transform; }
.media__cap {
  display: block;
  margin-top: var(--s2);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--muted);
}

/* D.9 ghost type: outline to fill, three uses only */
.ghost { position: relative; display: inline-block; --fill: 0%; }
.ghost__stroke { color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.ghost__fill {
  position: absolute;
  inset: 0;
  color: var(--text);
  clip-path: inset(0 calc(100% - var(--fill)) 0 0);
  pointer-events: none;
}

/* D.11 follower: a 6px registration square that lags the pointer; 00-core.js moves the root, CSS morphs the box */
.follower {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-follower);
  width: 0;
  height: 0;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-out-quart);
}
.follower.is-live { opacity: 1; }
.follower__box {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 6px;
  height: 6px;
  background: var(--text);
  border-radius: var(--r);
  transform: translate(-50%, -50%) scale(1);
  transition:
    width var(--d-fast) var(--ease-out-expo),
    height var(--d-fast) var(--ease-out-expo),
    background-color var(--d-fast) var(--ease-out-expo),
    transform var(--d-fast) var(--ease-out-expo);
}
.follower__box::before,
.follower__box::after {
  content: "";
  position: absolute;
  background: var(--text);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-out-expo);
}
.follower__box::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.follower__box::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.follower.is-cross .follower__box { width: 16px; height: 16px; background: transparent; }
.follower.is-cross .follower__box::before,
.follower.is-cross .follower__box::after { opacity: 1; }
.follower.is-hide .follower__box { transform: translate(-50%, -50%) scale(0); }
.follower.is-word .follower__box { width: 56px; height: 56px; }
.follower__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  line-height: 1;
  color: var(--bg);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-out-expo);
}
.follower.is-word .follower__word { opacity: 1; }
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  .follower { display: none; }
}

/* E.2 preloader: the booth cycle. Hidden without JS. */
.preloader { display: none; }
.js .preloader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  touch-action: none;
}
.preloader__bands { position: absolute; inset: 0; }
.preloader__bands i {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(20% + 1px);
  background: var(--bg);
  transform-origin: right center;
}
.preloader__bands i:nth-child(1) { top: 0; }
.preloader__bands i:nth-child(2) { top: 20%; }
.preloader__bands i:nth-child(3) { top: 40%; }
.preloader__bands i:nth-child(4) { top: 60%; }
.preloader__bands i:nth-child(5) { top: 80%; height: 20%; }
.preloader__ui { position: absolute; inset: 0; color: var(--text); }
.preloader__mark {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) / 2);
  transform: translateY(-50%);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.preloader__temp {
  position: absolute;
  left: var(--gutter);
  bottom: calc(50% + var(--s3));
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.preloader__ruler {
  position: absolute;
  left: var(--gutter);
  top: calc(50% + var(--s3));
  display: block;
  width: 60vw;
  height: 12px;
  overflow: visible;
}
.preloader__ruler line {
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--d-fast) linear;
}
.preloader__ruler line.is-hot { stroke: var(--text); }
.preloader__fill {
  position: absolute;
  left: var(--gutter);
  top: calc(50% + var(--s3) + 12px + var(--s2));
  display: block;
  width: 60vw;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.preloader__word {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s5);
  color: var(--muted);
}
@media (max-width: 767px) {
  .preloader__bands i { height: calc(25% + 1px); }
  .preloader__bands i:nth-child(2) { top: 25%; }
  .preloader__bands i:nth-child(3) { top: 50%; }
  .preloader__bands i:nth-child(4) { top: 75%; height: 25%; }
  .preloader__bands i:nth-child(5) { display: none; }
  .preloader__ruler, .preloader__fill { width: 84vw; }
  .preloader__ruler line:nth-child(even):not(.preloader__major) { display: none; }
}

/* the preloader shows the same logo as the bar, in the same place */
img.preloader__mark { width: auto; height: 46px; max-width: none; }
@media (max-width: 1023px) { img.preloader__mark { height: 40px; } }

/* ===== 05-nav.css ===== */
/* ===== 05-nav: the fixed bar and the booth-door menu (E.1). Owned by the nav agent. =====
   needs: a z-index token one step above --z-menu for the bar while the menu is open (kept the burger reachable as the
   close control; implemented locally as calc(var(--z-menu) + 1)). The .4s tick extension in E.1 uses var(--d-base). */

/* the nav height token drops to 56px below 1024px (B, E.1); core reads #nav offsetHeight first */
@media (max-width: 1023px) {
  :root { --nav-h: 56px; }
}

/* ---------- bar ---------- */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: var(--nav-h);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  color: var(--text);
  background: transparent;
  transition: background-color var(--d-fast) linear;
}
#nav.is-solid { background: rgba(13, 14, 16, .96); }
#nav.is-menu-open { z-index: calc(var(--z-menu) + 1); }
#nav.is-menu-open .nav__brand { pointer-events: none; }

/* wordmark with the registration tick (accent use 2) */
.nav__brand {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  padding-bottom: 4px;
  color: var(--text);
}
.nav__word {
  display: block;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__tick {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out-expo);
}
.nav__brand:hover .nav__tick,
.nav__brand:focus-visible .nav__tick { transform: scaleX(calc(var(--word-w, 90) / 14)); }

/* links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin-inline-start: auto;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
  white-space: nowrap;
}

/* phone */
.nav__phone {
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* primary CTA, positioned only */
.nav__cta { flex: 0 0 auto; }

/* burger: two 1px lines, 24px wide, 6px apart, no box; a 44px hit area whose lines end on the gutter */
.nav__burger {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  padding: 0 10px 0 0;
  color: var(--text);
  border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
}
.nav__burger i {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform var(--d-fast) var(--ease-in-out-cubic);
}
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- menu: the booth door ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--surface);
  color: var(--text);
  clip-path: inset(0 0 0 100%);
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.menu__in {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: calc(var(--nav-h) + var(--s7));
  padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px));
}
.menu__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.menu__nav { grid-column: 1 / span 12; }
.menu__list { display: block; }
.menu__item {
  display: block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-transform: uppercase;
}
.menu__link {
  display: inline-block;
  vertical-align: top;
  color: var(--text);
  transition: color var(--d-fast) linear;
}

/* the ten services under the four verbs, two columns, on the right half of the container */
.menu__groups {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--gap);
  margin-top: var(--s7);
}
.menu__verb {
  margin-bottom: var(--s2);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
}
.menu__services > li { display: block; }
.menu__services > li + li { margin-top: var(--s1); }
.menu__service {
  display: inline-block;
  padding-block: var(--s1);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

/* bottom row: the phone and the ghost WhatsApp button */
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5) var(--s6);
  margin-top: auto;
  padding-top: var(--s8);
}
.menu__phone {
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu__cta { flex: 0 0 auto; }

/* ---------- hover devices ---------- */
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover { color: var(--muted); }
}

/* ---------- height rules ---------- */
/* short desktop viewports: the services sit beside the big links so the door fits without scrolling */
@media (min-width: 1024px) and (max-height: 720px) {
  .menu__nav { grid-column: 1 / span 6; }
  .menu__groups { grid-column: 7 / span 6; margin-top: 0; align-self: start; }
  .menu__in { padding-top: calc(var(--nav-h) + var(--s6)); padding-bottom: var(--s6); }
  .menu__foot { padding-top: var(--s6); }
}
@media (max-height: 640px) {
  .menu__in { padding-top: calc(var(--nav-h) + var(--s5)); padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
  .menu__foot { padding-top: var(--s6); }
}

/* ---------- mobile ---------- */
@media (max-width: 1023px) {
  #nav { gap: var(--s5); }
  .nav__links,
  .nav__cta { display: none; }
  .nav__phone { margin-inline-start: auto; }
  .menu__in { padding-top: calc(var(--nav-h) + var(--s6)); padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
  .menu__groups { grid-column: 1 / span 12; margin-top: var(--s7); }
  .menu__foot { padding-top: var(--s7); }
}
@media (max-width: 767px) {
  .menu__groups { gap: var(--s5) var(--gap); margin-top: var(--s6); }
  .menu__service { padding-block: var(--s2); }
}
@media (max-width: 479px) {
  .nav__phone { display: none; }
  .nav__burger { margin-inline-start: auto; }
  .menu__foot { flex-direction: column; align-items: stretch; gap: var(--s5); }
  .menu__cta { width: 100%; }
}

/* ---------- reduced motion: the door is a plain panel, JS fades it .2s ---------- */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .menu { clip-path: none; }


/* owner logo (2026-10-10): the TopPaint lettering replaces the typed wordmark; height fits the bar */
.nav__brand { padding-bottom: 0; line-height: 0; }
.nav__logo { display: block; width: auto; height: 46px; max-width: none; user-select: none; -webkit-user-drag: none; }
@media (max-width: 1023px) {
  .nav__logo { height: 40px; }
}

/* ===== 10-hero.css ===== */
/* ===== 10-hero: full-bleed viewport stage with the spray-reveal canvas (DESIGN.md F.10) =====
   needs: none. Everything shared comes from 00-tokens, 01-base and 02-components. */

#hero {
  --hero-pad-b: clamp(24px, 5vh, 48px);
  position: relative;
  height: 100svh;
  min-height: 540px;
  touch-action: pan-y;
}

/* the stage: photo, primer canvas, mist canvas, shade, painted in DOM order */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--primer);
}
.hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  object-position: 70% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
.hero__primer,
.hero__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__shade {
  position: absolute;
  inset: 0;
  background: var(--shade);
  pointer-events: none;
}

/* the copy: bottom-left on the gutters in at most 8 columns, the meta line bottom-right on the CTA baseline */
.hero__in {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-top: var(--nav-h);
  padding-bottom: var(--hero-pad-b);
}
/* the eyebrow lives inside the h1 so the heading carries the search phrase; it keeps the small eyebrow look */
.hero__title .hero__eyebrow {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--ff-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
.hero__title { max-width: calc(66.667% - var(--gap) / 3); }
.hero__title .line { white-space: nowrap; }
.hero__lead { margin-top: var(--s5); }
.hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.hero__meta {
  position: absolute;
  right: 0;
  bottom: calc(var(--hero-pad-b) + 20px);
  max-width: 22em;
  text-align: right;
  color: var(--muted);
}

@media (max-width: 1023px) {
  .hero__title { max-width: none; }
  .hero__meta {
    position: static;
    max-width: none;
    margin-top: var(--s5);
    text-align: left;
  }
}

@media (max-width: 767px) {
  .hero__img { height: 60%; object-position: 74% 55%; }
  .hero__media picture::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to bottom, transparent, var(--bg) 45%); pointer-events: none; }
}

@media (max-width: 479px) {
  .hero__cta .btn { flex: 1 1 100%; }
}

@media (max-height: 640px) {
  #hero { min-height: 520px; }
  .hero__lead { margin-top: var(--s4); }
  .hero__cta { margin-top: var(--s5); }
}

/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .hero__primer, html.tp-still .hero__mist { display: none; }


/* the phone number next to the call button */
.hero__phone {
  color: var(--text);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
  text-decoration: none;
  padding-block: var(--s2);
}
.hero__phone:hover { color: var(--accent); }

/* owner headline (2026-10-10) is longer than the old one: each of its two lines must fit on one row, so the display
   size follows the width (measured: 17 caps take about 10.4em) */
.hero__title .line-mask { font-size: min(var(--fs-h1), 6.6vw); }
@media (max-width: 1023px) { .hero__title .line-mask { font-size: min(var(--fs-h1), 8.9vw); } }

/* owner photo (2026-10-10) is a 2.33:1 panorama with the car on the right and dark smoke on the left: show the whole
   car instead of covering the stage (cover zoomed into the roof). The stage behind is near black like the photo. */
.hero__media { background: #0D0C0F; }
@media (min-width: 768px) {
  .hero__img {
    top: auto;
    left: auto;
    right: 0;
    bottom: 3vh;
    width: auto;
    height: min(86vh, calc(100vw / 2.334 * 1.12));
    object-fit: contain;
    object-position: 100% 50%;
  }
}
@media (max-width: 767px) {
  .hero__img {
    top: calc(var(--nav-h) + 9vh);
    left: -30%;
    width: 140%;
    height: auto;
    object-fit: contain;
  }
  .hero__media picture::after { inset: 46% 0 0 0; }
}
@media (max-width: 767px) {
  /* the photo ends above the headline: fade its lower edge instead of a hard cut */
  .hero__img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 72%, transparent 100%);
  }
}

/* no hard edges (owner 2026-10-10): the photo dissolves into the stage on the left, top and bottom, and a soft
   vignette joins it to the near-black stage on wide screens */
@media (min-width: 768px) {
  .hero__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
            mask-composite: intersect;
  }
}

/* ===== 11-lenta.css ===== */
/* ===== 11-lenta: the marquee band (F.11), the only marquee on the page ===== */
/* needs: nothing shared; the horizontalLoop helper (motion.md 3.8) is local to src/js/11-lenta.js */

/* the band: a shallower .sec that clips its own row, so the page never scrolls sideways (I.10) */
#lenta {
  padding-block: clamp(48px, 7vw, 120px);
  overflow: clip;
}

/* the row: one flex line of display-2 words, wider than the viewport, moved word by word by the loop helper */
.lenta__row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

/* the words: filled in --text, tracking 0 (Cyrillic display never tracks), spaced by padding, not gap (the helper measures widths) */
.lenta__item {
  flex: none;
  padding-inline: .6em;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text);
  user-select: none;
}

/* the outlined words: transparent fill, 1px --line-strong stroke, never filled on hover (the ghost pass belongs to D.9) */
.lenta__item--ghost {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

/* reduced motion: 11-lenta.js creates no loop; the row and the words stay where CSS puts them */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .lenta__row { transform: none; will-change: auto; }
  html.tp-still .lenta__item { transform: none; }


/* ===== 12-manifest.css ===== */
/* ===== 12-manifest: big-type paragraph with annotation rail (F.12) ===== */
/* needs: nothing shared beyond core. The rail SVG, the tick states and the word dimming are local to this file.
   The dim rule is written as .js #manifest .word because the spec names it that way; its reduced-motion
   counterpart is repeated here so it wins over the dim rule in cascade order. */

/* the paragraph and the rail start 12vh into the section */
.manifest__in { padding-top: 12vh; }

/* the paragraph: columns 3 to 12 on desktop, the words are the picture */
.manifest__text {
  grid-column: 3 / span 10;
  grid-row: 1;
  color: var(--text);
}

/* the rail: one 1px axis and three 12px ticks with mono margin notes, columns 1 to 2, desktop only */
.manifest__rail {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow: visible;
  pointer-events: none;
}
.manifest__axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.manifest__tick {
  opacity: 0;
  visibility: hidden;
}
.manifest__tick line {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.manifest__tick text {
  fill: var(--muted);
  dominant-baseline: middle;
}

/* dim state before the scrub lights the words, so nothing flashes before JS */
.js #manifest .word { opacity: .18; }

@media (max-width: 1023px) {
  .manifest__rail { display: none; }
}
@media (max-width: 767px) {
  .manifest__text { grid-column: 1 / span 6; }
}
@media (max-width: 479px) {
  .manifest__text { grid-column: 1 / -1; }
}
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still.js #manifest .word { opacity: 1; }


/* ===== 13-cvyat.css ===== */
/* ===== 13-cvyat: the colour bench (F.13). Scope: #cvyat, .cvyat__*, .plate under #cvyat. =====
   needs: (1) the spec's gooey filter (stdDeviation 9, alpha matrix 18/-7) erases a lone 6px drop, so the drip
   keeps the matrix and uses stdDeviation 3; the core agent may promote that value into the spec.
   (2) Lenis 1.3.26 has no data-lenis-prevent-horizontal option; the attribute stays on the plates row for the
   overscroll-behavior rule that 01-base already ships.
   (3) the specular sweep also runs once after a finish toggle, so the five finish physics are visible without a new pick.
   (4) the sweep highlight colour is var(--line-strong), the same rgba(240,238,233,.24) the spec writes literally. */

#cvyat {
  position: relative;
  z-index: var(--z-overlap);
  background: var(--bg-lab, var(--bg));
  transition: none;
}

/* row 1: title and lead in columns 1 to 6, the readout top-aligned with the title in columns 8 to 12 */
#cvyat .cvyat__title { grid-column: 1 / span 6; grid-row: 1; }
#cvyat .cvyat__lead { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--s6); }
#cvyat .cvyat__readout {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: .1em;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text);
}
#cvyat .cvyat__readout .line-mask { display: inline-block; vertical-align: top; }
#cvyat .cvyat__name { display: inline-block; }
#cvyat .cvyat__code {
  display: inline-block;
  margin-left: var(--s3);
  font-weight: 500;
  line-height: calc(var(--fs-lead) * var(--lh-lead));
  color: var(--text);
}

/* row 2: the wet hood in columns 1 to 8 */
#cvyat .cvyat__panel {
  grid-column: 1 / span 8;
  grid-row: 3;
  position: relative;
  margin-top: var(--s8);
  aspect-ratio: 16 / 10;
  overflow: clip;
  background: var(--primer);
  isolation: isolate;
  border-radius: var(--r);
}
#cvyat .cvyat__panel > picture { position: absolute; inset: 0; display: block; }
#cvyat .cvyat__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
#cvyat .cvyat__tint,
#cvyat .cvyat__sweep,
#cvyat .cvyat__flake,
#cvyat .cvyat__grain {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#cvyat .cvyat__tint--multiply { background: var(--paint); mix-blend-mode: multiply; opacity: .85; }
#cvyat .cvyat__tint--color { background: var(--paint); mix-blend-mode: color; }
#cvyat .cvyat__tint--color2 { background: var(--paint); mix-blend-mode: color; filter: hue-rotate(25deg); opacity: 0; }
#cvyat .cvyat__sweep {
  background: linear-gradient(112deg, transparent 46%, var(--line-strong) 50%, transparent 54%);
  background-size: 260% 100%;
  background-position: 0% 0;
  mix-blend-mode: screen;
}
#cvyat .cvyat__flake { background: var(--flake, none) center / cover; mix-blend-mode: screen; opacity: 0; }
#cvyat .cvyat__grain { mix-blend-mode: screen; opacity: 0; }
#cvyat .cvyat__panel[data-finish="saten"] .cvyat__sweep { filter: blur(28px); }
#cvyat .cvyat__panel[data-finish="mat"] .cvyat__photo { filter: contrast(.9); }

/* row 2: the controls in columns 9 to 12 */
#cvyat .cvyat__controls { grid-column: 9 / span 4; grid-row: 3; margin-top: var(--s8); }
#cvyat .cvyat__plates {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 96px);
  gap: var(--s5) var(--s4);
  justify-content: start;
}
#cvyat .plate {
  --chip-w: 64px;
  --chip-h: 88px;
  position: relative;
  display: block;
  width: 96px;
  padding: 0;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
}
#cvyat .plate__chip {
  display: block;
  width: var(--chip-w);
  height: var(--chip-h);
  background: var(--c);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: var(--r);
  transition: box-shadow var(--d-fast) var(--ease-out-quart);
}
#cvyat .plate__name {
  display: block;
  margin-top: var(--s2);
  font-weight: 500;
  color: var(--muted);
  transition: color var(--d-fast) var(--ease-out-quart);
}
#cvyat .plate__code { display: block; margin-top: var(--s1); color: var(--muted); }
#cvyat .plate.is-active .plate__name { color: var(--text); }
#cvyat .plate.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--chip-h) / 2 - 12px);
  width: 2px;
  height: 24px;
  background: var(--accent);
  z-index: 1;
}
#cvyat .plate:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* the drip: the one round thing on the page, falls in the gap between the plates and the finish list */
#cvyat .cvyat__drip {
  display: block;
  width: 100%;
  height: 72px;
  overflow: visible;
  pointer-events: none;
}

#cvyat .cvyat__finish { display: flex; flex-direction: column; align-items: flex-start; }
#cvyat .cvyat__fin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 40px;
  padding: 0 var(--s2) 0 0;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--d-fast) var(--ease-out-quart);
}
#cvyat .cvyat__fin::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: var(--r);
  transition: background-color var(--d-fast) var(--ease-out-quart), box-shadow var(--d-fast) var(--ease-out-quart);
}
#cvyat .cvyat__fin[aria-pressed="true"] { color: var(--text); }
#cvyat .cvyat__fin[aria-pressed="true"]::before { background: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
#cvyat .cvyat__hint { margin-top: var(--s5); color: var(--muted); max-width: 48ch; }

@media (hover: hover) and (pointer: fine) {
  #cvyat .plate:hover .plate__chip { box-shadow: inset 0 0 0 1px var(--text); }
  #cvyat .plate:hover .plate__name { color: var(--text); }
  #cvyat .cvyat__fin:hover { color: var(--text); }
  #cvyat .cvyat__fin:hover::before { box-shadow: inset 0 0 0 1px var(--text); }
}

/* row 3: two tiles at the bottom right, hanging 8vh into the services section (grid break 1) */
#cvyat .cvyat__tiles {
  position: absolute;
  right: calc((100% - min(100% - 2 * var(--gutter), var(--container))) / 2);
  bottom: -8vh;
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  pointer-events: none;
}
#cvyat .cvyat__tile { flex: 0 0 auto; width: min(18vw, 300px); }

@media (max-width: 1023px) {
  #cvyat .cvyat__title,
  #cvyat .cvyat__lead,
  #cvyat .cvyat__readout,
  #cvyat .cvyat__panel,
  #cvyat .cvyat__controls,
  #cvyat .cvyat__tiles { grid-column: 1 / -1; grid-row: auto; }
  #cvyat .cvyat__lead { margin-top: var(--s5); }
  #cvyat .cvyat__readout { margin-top: var(--s5); padding-top: 0; }
  #cvyat .cvyat__panel { margin-top: var(--s6); }
  #cvyat .cvyat__controls { margin-top: var(--s6); }
  #cvyat .cvyat__plates {
    display: flex;
    gap: var(--s4);
    margin-inline: calc(-1 * var(--s1));
    padding: var(--s1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #cvyat .cvyat__plates::-webkit-scrollbar { display: none; }
  #cvyat .plate { --chip-w: 56px; --chip-h: 76px; flex: 0 0 auto; scroll-snap-align: start; }
  #cvyat .cvyat__drip { height: 56px; }
  #cvyat .cvyat__finish { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s6); }
  #cvyat .cvyat__hint { max-width: 66ch; }
  #cvyat .cvyat__tiles { position: static; right: auto; bottom: auto; margin-top: var(--s7); align-items: flex-start; pointer-events: auto; }
  #cvyat .cvyat__tile { width: min(44vw, calc(50% - var(--gap) / 2)); }
}

@media (max-width: 767px) {
  #cvyat .cvyat__title,
  #cvyat .cvyat__lead,
  #cvyat .cvyat__readout,
  #cvyat .cvyat__panel,
  #cvyat .cvyat__controls,
  #cvyat .cvyat__tiles { grid-column: 1 / -1; }
  #cvyat .cvyat__tiles { margin-top: var(--s6); }
}

@media (max-width: 479px) {
  #cvyat .cvyat__title,
  #cvyat .cvyat__lead,
  #cvyat .cvyat__readout,
  #cvyat .cvyat__panel,
  #cvyat .cvyat__controls,
  #cvyat .cvyat__tiles { grid-column: 1 / -1; }
  #cvyat .cvyat__finish { gap: 0 var(--s5); }
}

/* motion toggle (was prefers-reduced-motion) */

  html.tp-still #cvyat .cvyat__drip { display: none; }
  html.tp-still #cvyat .cvyat__sweep { background-position: 0% 0; }


/* ===== 14-uslugi.css ===== */
/* ===== 14-uslugi: Услуги. The ten services as a pinned horizontal rail with a skyline, a ruler and the RAL 3020 card (F.14) =====
   needs: nothing shared. Notes for the core agent:
   (1) Two layouts keyed on one class. The static layout (no JS, reduced motion, below 1024px, 640px of height or less)
       is a native scroll-snap strip under a plain head. 14-uslugi.js adds #uslugi.is-rail only while the desktop pin
       exists, and every pinned rule below is scoped to it, so the page never shows a clipped rail without its pin.
   (2) The pin carries no overflow, transform, filter or compositing hint. The horizontal clip lives on .uslugi__rail,
       a child of the pin; the head and the track are the only moving elements.
   (3) Height budget: with the head above the track, 1366x657 or 1280x720 leaves the cards about 60px of photo. In the
       pinned layout the head (eyebrow and h2) is therefore the first bay of the rail: it sits on the left gutter,
       top-aligned with the cards, and travels with the track, so the cards get the full height under the nav.
   (4) Card height: the photo keeps its own ratio capped at 34svh and is shrunk by flexbox when the card reaches its
       --h (a share of the track height, varied per card so the skyline holds when every card is capped).
   (5) In the pinned layout the photo is 140% wide (left -20%) so the xPercent 14 to -14 parallax never shows an edge.
   (6) The accent title is --fs-h2 capped to the card width: ТЕНЕКЕДЖИЙСКИ is almost 6em wide at weight 800.
   (7) Snap points are the card edges on the gutter, measured on refresh, instead of 1/9 of unequal widths.
   (8) The lazy photos sit in a clipped rail and never intersect the viewport before they slide in, so 14-uslugi.js
       switches them to eager one viewport before the section arrives. */

#uslugi {
  position: relative;
  z-index: var(--z-base);
}

/* the pin: block level in the static layout, a column in the pinned one; never transformed, no overflow rule */
.uslugi__pin {
  --pad: clamp(18px, 1.7vw, 28px);
  --head-w: calc(var(--fs-h2) * 5.3);
  position: relative;
  display: block;
  padding-block: var(--section-pad);
}

.uslugi__rail { position: relative; }

.uslugi__head {
  margin-inline: var(--gutter);
  margin-bottom: var(--s7);
}
.uslugi__head .eyebrow { margin-bottom: var(--s4); }

/* static layout: the track is a native horizontal scroll-snap strip */
.uslugi__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* the card: photo on top edge to edge, then title, one-liner, spec line and the booking button */
.uslugi__card {
  --w: 30;
  --h: 100%;
  --cw: clamp(280px, calc(var(--w) * 1vw), 560px);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: var(--cw);
  padding: 0 var(--pad) var(--pad);
  background: var(--surface);
  border-radius: var(--r);
  scroll-snap-align: center;
}

/* the skyline: odd cards hang from the top, even cards stand on the bottom */
.uslugi__card:nth-child(odd) { align-self: flex-start; }
.uslugi__card:nth-child(even) { align-self: flex-end; }

.uslugi__card:nth-child(1) { --w: 30; --h: 96%; }
.uslugi__card:nth-child(2) { --w: 42; --h: 84%; }
.uslugi__card:nth-child(3) { --w: 24; }
.uslugi__card:nth-child(4) { --w: 30; --h: 88%; }
.uslugi__card:nth-child(5) { --w: 36; --h: 92%; }
.uslugi__card:nth-child(6) { --w: 30; --h: 82%; }
.uslugi__card:nth-child(7) { --w: 42; --h: 94%; }
.uslugi__card:nth-child(8) { --w: 30; --h: 86%; }
.uslugi__card:nth-child(9) { --w: 26; --h: 90%; }
.uslugi__card:nth-child(10) { --w: 36; --h: 88%; }

/* the red card stands the full height of the rail, whatever its position in the alternation */
#uslugi .uslugi__card--accent { align-self: stretch; }

/* the photo box: own ratio, capped, and the one flexible part of the card */
.uslugi__media {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 14svh;
  margin-inline: calc(-1 * var(--pad));
}
.uslugi__media > picture {
  flex: 1 1 auto;
  width: 100%;          /* a definite width: max-height trims the height, never the width, so the photo fills the card */
  min-height: 0;
  max-height: 34svh;
}

.uslugi__name {
  flex: none;
  margin-top: var(--s5);
}
.uslugi__text {
  flex: none;
  max-width: 66ch;
  margin-top: var(--s3);
  color: var(--muted);
}
.uslugi__spec {
  flex: none;
  margin-top: var(--s4);
  color: var(--muted);
}
.uslugi__card > .uslugi__cta {
  flex: none;
  align-self: flex-start;
  margin-top: var(--s5);
}

/* the accent card: RAL 3020, no photo, the ghost title fills as the card crosses the viewport */
.uslugi__card--accent {
  padding-top: var(--pad);
  background: var(--accent);
  color: var(--accent-ink);
}
.uslugi__card--accent .uslugi__name {
  margin-top: 0;
  color: var(--accent-ink);
  font-size: min(var(--fs-h2), calc((var(--cw) - 2 * var(--pad)) / 6));
}
.uslugi__card--accent .ghost__stroke { -webkit-text-stroke: 1px var(--accent-ink); }
.uslugi__card--accent .ghost__fill { color: var(--accent-ink); }
.uslugi__card--accent .uslugi__text {
  margin-top: auto;
  padding-top: var(--s6);
  color: var(--accent-ink);
}
.uslugi__card--accent .uslugi__spec { color: var(--accent-ink); }
.uslugi__card--accent .uslugi__foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s5);
}
.uslugi__card--accent .uslugi__cta {
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}
.uslugi__card--accent .uslugi__ral {
  margin-left: auto;
  color: var(--accent-ink);
}

/* the ruler: ten ticks across the gutters, one per card, no baseline; the marker is moved by 14-uslugi.js */
.uslugi__ruler {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 16px;
  margin: var(--s6) var(--gutter) 0;
}
.uslugi__tick {
  display: block;
  flex: none;
  width: 1px;
  height: 12px;
  background: var(--line-strong);
}
.uslugi__marker {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 2px;
  height: 16px;
  background: var(--accent);
}

/* ---------- pinned layout, only while 14-uslugi.js holds the pin ---------- */

/* one viewport; the top padding clears the nav and the two colour-bench tiles that hang 8vh into this section */
#uslugi.is-rail .uslugi__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  padding-block: calc(max(8vh, var(--nav-h)) + var(--s5)) var(--s6);
}
#uslugi.is-rail .uslugi__rail {
  flex: 1 1 0;
  min-height: 0;
  max-height: 74svh;
  overflow-x: clip;
}
#uslugi.is-rail .uslugi__head {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: var(--z-base);
  width: var(--head-w);
  margin: 0;
}
#uslugi.is-rail .uslugi__title { max-width: 5.3em; }
#uslugi.is-rail .uslugi__track {
  width: max-content;
  height: 100%;
  padding-inline: calc(var(--gutter) + var(--head-w) + var(--s9)) var(--gutter);
  overflow: visible;
  scroll-snap-type: none;
}
#uslugi.is-rail .uslugi__card { max-height: var(--h); }
#uslugi.is-rail .uslugi__card--accent { max-height: none; }
#uslugi.is-rail .uslugi__media .media__img {
  left: -20%;
  right: auto;
  width: 140%;
  max-width: none;      /* the base reset caps img at 100%, which left the right fifth of the box empty */
}
#uslugi.is-rail .uslugi__ruler {
  flex: none;
  margin-top: var(--s5);
}

/* 720px of height or less: the rail takes every pixel, the skyline flattens to two heights, tighter card rhythm */
@media (max-height: 720px) {
  #uslugi.is-rail .uslugi__pin { padding-bottom: var(--s5); }
  #uslugi.is-rail .uslugi__rail { max-height: none; }
  #uslugi.is-rail .uslugi__card:nth-child(n) { --h: 100%; }
  #uslugi.is-rail .uslugi__card:nth-child(even) { --h: 92%; }
  #uslugi.is-rail .uslugi__name { margin-top: var(--s4); }
  #uslugi.is-rail .uslugi__card--accent .uslugi__name { margin-top: 0; }
  #uslugi.is-rail .uslugi__spec { margin-top: var(--s3); }
  #uslugi.is-rail .uslugi__card > .uslugi__cta { margin-top: var(--s4); }
  #uslugi.is-rail .uslugi__ruler { margin-top: var(--s4); }
}

/* ---------- static strip below 1024px: 78vw cards snapped to the centre ---------- */

@media (max-width: 1023px) {
  .uslugi__card { --cw: 78vw; }
  .uslugi__media > picture { max-height: 46svh; }
}

@media (max-width: 767px) {
  .uslugi__head { margin-bottom: var(--s6); }
  .uslugi__ruler { margin-top: var(--s5); }
}

@media (max-width: 479px) {
  .uslugi__text { margin-top: var(--s2); }
  .uslugi__card > .uslugi__cta { margin-top: var(--s4); }
}

/* touch devices swipe the strip; the marker shows the position, so the native bar is hidden there */
@media (hover: none) {
  .uslugi__track { scrollbar-width: none; }
  .uslugi__track::-webkit-scrollbar { display: none; }
}

/* ---------- compact pinned rail below 1024px (owner 2026-10-10): the vertical scroll moves the cards ---------- */
#uslugi.is-rail.is-rail--compact .uslugi__pin {
  justify-content: flex-start;
  padding-block: calc(var(--nav-h) + var(--s5)) var(--s5);
}
#uslugi.is-rail.is-rail--compact .uslugi__head {
  position: static;
  width: auto;
  margin: 0 var(--gutter) var(--s5);
}
#uslugi.is-rail.is-rail--compact .uslugi__title { max-width: none; }
#uslugi.is-rail.is-rail--compact .uslugi__rail { max-height: none; }
#uslugi.is-rail.is-rail--compact .uslugi__track { padding-inline: var(--gutter); }
#uslugi.is-rail.is-rail--compact .uslugi__card:nth-child(n) { --h: 100%; align-self: stretch; }
#uslugi.is-rail.is-rail--compact .uslugi__media > picture { max-height: 30svh; }
#uslugi.is-rail.is-rail--compact .uslugi__ruler { margin-top: var(--s4); }

/* ===== 15-sloeve.css ===== */
/* ===== 15-sloeve: Какво мери дебеломерът. The anatomy of paint, a cross-section to scale beside a 0 to 160 micron
   gauge, pinned and scrubbed on desktop (F.15) =====
   needs: nothing shared. Notes for the core agent:
   The diagram is stacked divs, not an SVG, so the mono names keep their real size at every width. One unit is
   --sloeve-u (1px), 2,2 units per micron: лак 99, база 40, филер 77, грунд 48 (45, 18, 35 and 22 микрона, 120 in
   total), метал 96 off scale under the hatch. The gauge is 352 units for 0 to 160, a tick every 10, a number every 40.
   The filler, primer and steel fills are the paint colours named in F.15, kept as local custom properties on #sloeve;
   the база slab reads var(--paint) through --sloeve-paint, which 15-sloeve.js sets from :root and tweens on tp:paint.
   15-sloeve.js tweens --lift on each slab (in units of --sloeve-gap), writes --m (microns) on .sloeve__fig for the
   pointer and the readout, and adds #sloeve.is-scrub while the desktop pin exists. Without JS, under reduced motion,
   under 1024px and at 640px of height or less the diagram is exploded, every layer is named and the readout is 120. */

#sloeve {
  --sloeve-u: 1px;
  --sloeve-gap: 6svh;
  --sloeve-filler: #8C8A80;
  --sloeve-primer: #2E3A2C;
  --sloeve-steel: #3A3D42;
}

/* the pin: block level, never transformed, no overflow rule; the static layout keeps the section rhythm */
.sloeve__pin {
  position: relative;
  display: block;
  padding-block: var(--section-pad);
}

/* the pinned stage: one viewport, the content centred under the nav */
#sloeve.is-scrub .sloeve__pin {
  display: grid;
  align-items: center;
  height: 100svh;
  padding-block: var(--nav-h) 0;
}

.sloeve__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}

/* ---------- text column: the title, the layer paragraphs, the footnote ---------- */

.sloeve__text { grid-column: 1 / 6; min-width: 0; }
.sloeve__title { margin-bottom: var(--s6); }

.sloeve__copy { position: relative; }
.sloeve__para { color: var(--text); }
.sloeve__para + .sloeve__para { margin-top: var(--s5); }
.sloeve__pname {
  display: block;
  margin-bottom: var(--s2);
  color: var(--muted);
}

/* scrub mode: the five paragraphs share one cell, so the box is as tall as the longest and nothing jumps */
#sloeve.is-scrub .sloeve__copy {
  display: grid;
  overflow: clip;
  padding-bottom: .2em;
}
#sloeve.is-scrub .sloeve__para { grid-area: 1 / 1; }
#sloeve.is-scrub .sloeve__para + .sloeve__para { margin-top: 0; }

.sloeve__note {
  max-width: 46ch;
  margin-top: var(--s6);
  color: var(--muted);
}

/* ---------- the figure: the stack of slabs, the micron scale, the readout lane ---------- */

.sloeve__fig {
  --m: 120;
  grid-column: 6 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem 6.75rem;
  column-gap: var(--s4);
  align-items: end;
  min-width: 0;
}

/* the lifted slabs stay inside the figure: four gaps of room above the fused stack */
.sloeve__stack {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding-top: calc(4 * var(--sloeve-gap));
}

/* one layer: name, the drawn slab, the thickness; the row itself is what lifts */
.sloeve__slab {
  --lift: var(--n);
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 6rem;
  column-gap: var(--s4);
  align-items: center;
  height: calc(var(--h) * var(--sloeve-u));
  transform: translateY(calc(var(--lift) * var(--sloeve-gap) * -1));
}
.sloeve__slab--lak   { --h: 99; --n: 4; --yc: 310.5; --face: transparent; }
.sloeve__slab--baza  { --h: 40; --n: 3; --yc: 241;   --face: var(--sloeve-paint, var(--paint)); }
.sloeve__slab--filer { --h: 77; --n: 2; --yc: 182.5; --face: var(--sloeve-filler); }
.sloeve__slab--grund { --h: 48; --n: 1; --yc: 120;   --face: var(--sloeve-primer); }
.sloeve__slab--metal { --h: 96; --n: 0; --yc: 48;    --face: var(--sloeve-steel); }

.sloeve__name {
  grid-column: 1;
  color: var(--text);
  white-space: nowrap;
}
.sloeve__val {
  grid-column: 3;
  color: var(--muted);
}

/* the drawn slab: a 4 degree skew, offset by its height in the stack so the fused edges form one cut line */
.sloeve__face {
  grid-column: 2;
  align-self: stretch;
  position: relative;
  display: block;
  background: var(--face);
  border-radius: var(--r);
  transform: translateX(calc((var(--yc) - 180) * .07 * var(--sloeve-u))) skewX(-4deg);
}

/* лак: the clear coat, the page colour lifted by 12 percent of --text, a specular line on its top edge */
.sloeve__slab--lak .sloeve__face::before,
.sloeve__slab--lak .sloeve__face::after {
  content: "";
  position: absolute;
  background: var(--text);
  pointer-events: none;
}
.sloeve__slab--lak .sloeve__face::before { inset: 0; opacity: .12; }
.sloeve__slab--lak .sloeve__face::after { left: 0; right: 0; top: 0; height: 1px; opacity: .7; }

/* метал: steel under the diagonal hatch, 1px --hatch lines every 7px at 45 degrees, the only pattern on the page */
.sloeve__slab--metal .sloeve__face {
  background-color: var(--sloeve-steel);
  background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 7px);
}

/* the micron scale: 0 sits on the top of the steel, 160 at 352 units */
.sloeve__scale {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: calc(352 * var(--sloeve-u) + 1px);
  margin-bottom: calc(96 * var(--sloeve-u));
}
.sloeve__scale::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.sloeve__tick {
  position: absolute;
  left: 0;
  bottom: calc(var(--t) * 22 * var(--sloeve-u));
  width: 6px;
  height: 1px;
  background: var(--line-strong);
}
.sloeve__tick--major { width: 10px; }
.sloeve__num {
  position: absolute;
  left: 15px;
  bottom: calc(var(--t) * 22 * var(--sloeve-u));
  line-height: 1;
  color: var(--muted);
  transform: translateY(50%);
}

/* the pointer: a 2px by 16px accent bar across the axis, lifted to --m microns (accent use 4 of D.1) */
.sloeve__pointer {
  position: absolute;
  left: -7px;
  bottom: -.5px;
  width: 16px;
  height: 2px;
  background: var(--accent);
  transform: translateY(calc(var(--m) * -2.2 * var(--sloeve-u)));
}

/* the readout rides beside the pointer, centred on it */
.sloeve__read {
  grid-column: 3;
  grid-row: 1;
  margin-bottom: calc(96 * var(--sloeve-u));
  transform: translateY(calc(50% - var(--m) * 2.2 * var(--sloeve-u)));
}
.sloeve__readout {
  display: block;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sloeve__unit {
  display: block;
  margin-top: var(--s1);
  color: var(--muted);
}

/* very wide screens: the title reaches its 7,5rem cap, so the text column takes six columns */
@media (min-width: 1700px) {
  .sloeve__text { grid-column: 1 / 7; }
  .sloeve__fig { grid-column: 7 / -1; }
}

/* ---------- under 1024px: one column, title, diagram, the five paragraphs as a list, the footnote ---------- */

@media (max-width: 1023px) {
  #sloeve { --sloeve-gap: var(--s5); }
  .sloeve__in { display: flex; flex-direction: column; align-items: stretch; }
  .sloeve__text { display: contents; }
  .sloeve__title { order: 1; margin-bottom: 0; }
  .sloeve__fig { order: 2; margin-block: var(--s7) var(--s8); }
  .sloeve__copy { order: 3; }
  .sloeve__note { order: 4; }
}

/* phones: the name sits over the thickness left of the slab, the readout moves above the diagram */
@media (max-width: 767px) {
  .sloeve__fig {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    row-gap: var(--s5);
    margin-block: var(--s6) var(--s7);
  }
  .sloeve__stack,
  .sloeve__scale { grid-row: 2; }
  .sloeve__read {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s3);
    margin-bottom: 0;
    transform: none;
  }
  .sloeve__unit { margin-top: 0; }
  .sloeve__slab {
    grid-template-columns: 6rem minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s4);
  }
  .sloeve__name { grid-column: 1; grid-row: 1; align-self: end; }
  .sloeve__val { grid-column: 1; grid-row: 2; align-self: start; }
  .sloeve__face { grid-column: 2; grid-row: 1 / -1; }
}

@media (max-width: 479px) {
  .sloeve__fig { column-gap: var(--s3); }
  .sloeve__slab { grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: var(--s3); }
}

/* short screens at desktop width: no pin (15-sloeve.js), the two columns stay, the gaps follow the height */
@media (max-height: 640px) and (min-width: 1024px) {
  #sloeve { --sloeve-gap: 5svh; }
}

/* ===== 16-fakti.css ===== */
/* ===== 16-fakti: Факти, offset numeral grid (F.16). Four honest numbers set like gauge readings: no boxes, no icons, no lines, no counters. =====
   needs: nothing shared. Local decisions under this prefix:
   1. Cell 3 sits exactly one numeral height (var(--fs-h1)) below cell 4, so the two row-2 numerals interlock at column 6 without
      their strokes touching: with tabular figures "НАД 1200" spans the whole width of columns 2 to 6 (471px of 527px at 1440px,
      574px of 586px at the 184px cap), so a shared top edge would run "1200" into "30".
   2. Cell 4's caption starts at column 7, so column 6 is shared only by cell 4's numeral and cell 3's caption (grid break 2).
   3. Below 431px the numerals scale with min(var(--fs-h1), 13vw), so "НАД 1200" fits half the width of a 320px phone with two columns.
   Cell 3 holds "НАД" plus up to four tabular digits; a five-digit owner figure needs the P3000 fallback from F.16. */

#fakti .grid {
  row-gap: clamp(var(--s8), 12vh, var(--s10));
  align-items: start;
}

.fakti__cell {
  position: relative;
  align-self: start;
}
.fakti__cell--1 { grid-column: 1 / span 5; grid-row: 1; }
.fakti__cell--2 { grid-column: 7 / span 6; grid-row: 1; margin-top: 12vh; }
.fakti__cell--3 { grid-column: 2 / span 5; grid-row: 2; margin-top: calc(var(--fs-h1) - 6vh); text-align: right; }
.fakti__cell--4 { grid-column: 6 / span 7; grid-row: 2; margin-top: -6vh; z-index: var(--z-overlap); }

.fakti__num {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fakti__cap {
  max-width: 24ch;
  margin-top: var(--s3);
  color: var(--muted);
}
.fakti__cell--3 .fakti__cap { margin-left: auto; }
.fakti__cell--4 .fakti__cap { margin-left: calc((100% - 6 * var(--gap)) / 7 + var(--gap)); }

@media (max-width: 1023px) {
  #fakti .grid { row-gap: clamp(var(--s7), 10vh, var(--s9)); }
}

@media (max-width: 767px) {
  #fakti .grid { row-gap: var(--s8); }
  .fakti__cell--1 { grid-column: 1 / span 3; }
  .fakti__cell--2 { grid-column: 4 / span 3; margin-top: 6vh; }
  .fakti__cell--3 { grid-column: 1 / span 3; margin-top: 0; text-align: left; }
  .fakti__cell--4 { grid-column: 4 / span 3; margin-top: 0; }
  .fakti__cell--3 .fakti__cap { margin-left: 0; }
  .fakti__cell--4 .fakti__cap { margin-left: 0; }
}

@media (max-width: 479px) {
  #fakti .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakti__cell--1,
  .fakti__cell--3 { grid-column: 1 / span 1; }
  .fakti__cell--2,
  .fakti__cell--4 { grid-column: 2 / span 1; }
  .fakti__num { font-size: min(var(--fs-h1), 13vw); }
}

/* ===== 17-proces.css ===== */
/* ===== 17-proces: Как работим. Seven sticky stacked cards with a 14px peek; the covered card dims and shrinks (F.17) =====
   needs: a half-depth "sym" parallax (data-parallax carries no depth modifier), built locally in 17-proces.js on the
   .media--parallax image of each card; the scale (transform on .proces__inner) and the dimmer (--dim on the card) are
   written by 17-proces.js. Stacking is off under 1024px and under 721px of height; reduced motion shows static cards. */

#proces .proces__head { margin-bottom: var(--s8); }

.proces__stack { position: relative; display: block; }

/* the sticky card: CSS does the stacking, the card itself is never transformed and carries no will-change */
.proces__card {
  --top: clamp(72px, 12vh, 120px);
  --pad: clamp(24px, 4vw, 64px);
  --dim: 0;
  position: sticky;
  top: calc(var(--top) + var(--i, 0) * 14px);
  z-index: calc(1 + var(--i, 0));
  height: calc(100svh - var(--top) - 6 * 14px);
  margin-bottom: 8vh;
  padding: var(--pad);
  background: var(--surface);
  border-radius: var(--r);
}
.proces__card:last-child { margin-bottom: 0; }

/* the dimmer: page colour over the covered card, opacity scrubbed through --dim by 17-proces.js */
.proces__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  opacity: var(--dim);
  pointer-events: none;
}

/* the content wrapper is what shrinks, never the sticky card */
.proces__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--gap);
  height: 100%;
  transform-origin: 50% 0;
}

.proces__text { grid-column: 1 / span 5; grid-row: 1 / span 2; min-width: 0; }
.proces__title { color: var(--text); }
.proces__body { margin-top: var(--s5); max-width: 60ch; color: var(--muted); }

/* the mono fact line at the top right of the card */
.proces__fact {
  grid-column: 6 / -1;
  grid-row: 1;
  margin-bottom: var(--s4);
  color: var(--muted);
  text-align: right;
}

/* the photo box keeps 4/3; its width is capped so the box fits the fixed card height at every desktop viewport */
.proces__media {
  grid-column: 6 / -1;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: calc((100svh - var(--top) - 6 * 14px - 2 * var(--pad) - 2.25rem) * 4 / 3);
}

/* stacking off: under 1024px, on viewports of 720px height or less (midScreen) and under reduced motion the cards flow */
@media (max-width: 1023px), (max-height: 720px) {
  .proces__card { position: static; height: auto; margin-bottom: var(--s8); }
  .proces__card:last-child { margin-bottom: 0; }
  .proces__card::after { display: none; }
  .proces__inner { height: auto; }
  .proces__media { max-width: none; }
}
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .proces__card { position: static; height: auto; margin-bottom: var(--s8); }
  html.tp-still .proces__card:last-child { margin-bottom: 0; }
  html.tp-still .proces__card::after { display: none; }
  html.tp-still .proces__inner { height: auto; }
  html.tp-still .proces__media { max-width: none; }


/* one column under 1024px: title, paragraph, the mono fact line, the photo */
@media (max-width: 1023px) {
  .proces__inner { display: flex; flex-direction: column; }
  .proces__fact { margin-top: var(--s6); margin-bottom: var(--s4); text-align: left; }
  .proces__media { align-self: auto; justify-self: auto; width: 100%; }
}

@media (max-width: 767px) {
  #proces .proces__head { margin-bottom: var(--s7); }
  .proces__card { margin-bottom: var(--s7); }
  .proces__card:last-child { margin-bottom: 0; }
}

@media (max-width: 479px) {
  .proces__card { --pad: var(--s5); }
  .proces__body { margin-top: var(--s4); }
  .proces__fact { margin-top: var(--s5); margin-bottom: var(--s3); }
}

/* ===== 175-tcard.css ===== */
/* ===== 175-tcard: the spray-out test card in "Тониране и тест карта" (owner request, 2026-10-08) =====
   A card sprayed with a PPG-style flip-flop paint that turns in 3D; the colour, the flake and the highlight follow the
   angle to the light. 175-tcard.js writes --rx and --ry (degrees) and --lx/--ly (highlight position) on .tcard__card. */

.tcard {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: var(--s3);
  margin: 0;
  padding: var(--s5) var(--s4) var(--s4);
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(55% 60% at 50% 42%, rgba(240, 238, 233, .07), transparent 72%),
    var(--surface);
  border-radius: var(--r);
  overflow: clip;
  perspective: 1100px;
}
.tcard__stage {
  position: relative;
  align-self: center;
  height: 100%;
  max-height: 440px;
  aspect-ratio: 3 / 4.1;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
}
.tcard__stage:active { cursor: grabbing; }
.tcard__card {
  --rx: -8;
  --ry: -24;
  --lx: 70%;
  --ly: 30%;
  position: absolute;
  inset: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #EDEDEA;
  transform: rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  transform-style: preserve-3d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 28px 60px rgba(0, 0, 0, .5);
}
/* the paint: Mazda 46V Soul Red Crystal, a deep candy red. One smooth tone ramp, no bands: the face toward the light is
   bright red, the flop away from it falls to dark wine. --ry and --rx slide the ramp, so only the light changes. */
.tcard__paint {
  position: absolute;
  inset: 0 0 17% 0;
  background:
    radial-gradient(120% 90% at calc(var(--lx) - 6%) calc(var(--ly) + 4%), rgba(214, 26, 38, .55), rgba(214, 26, 38, 0) 62%),
    linear-gradient(calc(122deg + var(--ry) * 1.1deg), #40040C 0%, #6E0913 22%, #A0101E 44%, #C5172A 56%, #8E0D19 74%, #4A050E 100%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, calc(50% + var(--ry) * 1.1%) calc(50% + var(--rx) * 1.4%);
}
/* metallic: a fine, even sparkle (tiled specks), never a texture with patches */
.tcard__flake {
  position: absolute;
  inset: 0 0 17% 0;
  background: url(/assets/img/flake-fine.png) 0 0 / 128px 128px;
  background-position: calc(var(--ry) * -.4px) calc(var(--rx) * -.4px);
  mix-blend-mode: screen;
  opacity: calc(.16 + (1 - var(--glint, .5)) * .12);
  -webkit-mask-image: radial-gradient(90% 70% at var(--lx) var(--ly), #000 10%, rgba(0, 0, 0, .25) 75%);
          mask-image: radial-gradient(90% 70% at var(--lx) var(--ly), #000 10%, rgba(0, 0, 0, .25) 75%);
}
/* the unpainted hiding-power strip at the bottom of a real spray-out card: black and white checks */
.tcard__hide {
  position: absolute;
  inset: auto 0 0 0;
  height: 17%;
  background: repeating-conic-gradient(#141414 0 25%, #F2F2EF 0 50%) 0 0 / 14px 14px;
}
.tcard__hide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(20, 20, 20, .55), transparent);
}
/* the light: one broad, soft highlight on the clear coat and a faint long sheen; both glide with the angle */
.tcard__spec {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 46% at var(--lx) var(--ly), rgba(255, 196, 186, .4), rgba(255, 52, 52, .16) 46%, rgba(255, 40, 40, 0) 72%),
    linear-gradient(calc(108deg + var(--ry) * 1deg), transparent 34%, rgba(255, 255, 255, .12) 47%, transparent 60%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, calc(50% + var(--ry) * 2%) 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.tcard__print {
  position: absolute;
  inset: auto 0 17% 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 7% 5%;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.tcard__brand {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 0;
}
.tcard__code {
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-align: right;
}
.tcard__shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9%;
  height: 10%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  filter: blur(6px);
  transform-origin: center;
}
.tcard__cap {
  color: var(--muted);
  font-size: var(--fs-mono);
  text-align: center;
}

@media (max-width: 767px) {
  .tcard { aspect-ratio: auto; min-height: 420px; padding-top: var(--s6); }
  .tcard__stage { height: 320px; }
}

/* ===== 176-ba.css ===== */
/* ===== 176-ba: before and after in "Как работим" (owner request, 2026-10-10) =====
   The finished car underneath, the car as it arrived on top, clipped at --pos (0 to 100, % from the left).
   176-ba.js scrubs --pos with the scroll until the visitor takes the handle, then follows the pointer or the keys. */

.ba {
  --pos: 92;
  margin: var(--s10) 0 0;
}
.ba__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-bottom: var(--s6);
}
.ba__eyebrow { grid-column: 1 / -1; margin-bottom: var(--s4); }
.ba__title { grid-column: 1 / span 7; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.ba__lead { grid-column: 9 / span 4; margin: 0; color: var(--muted); }

.ba__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 86svh;
  margin-inline: auto;
  overflow: hidden;
  background: var(--primer);
  border-radius: var(--r);
  cursor: ew-resize;
  touch-action: pan-y;          /* vertical swipes keep scrolling the page; horizontal drags move the line */
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
.ba__layer,
.ba__layer img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__layer img { -webkit-user-drag: none; pointer-events: none; }
.ba__layer--after img { transform: scale(calc(1.06 - var(--pos) * .0006)); transform-origin: 40% 60%; }
.ba__layer--before {
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
  filter: saturate(.92);
}

/* the line and the knob: brand red, a soft glow, two small chevrons */
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  z-index: 2;
  width: 0;
  pointer-events: none;
}
.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(204, 6, 5, 0), var(--accent) 12%, var(--accent) 88%, rgba(204, 6, 5, 0));
  box-shadow: 0 0 18px rgba(204, 6, 5, .65), 0 0 2px rgba(255, 255, 255, .6);
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(240, 238, 233, .5);
  border-radius: 50%;
  background: rgba(13, 14, 16, .55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(204, 6, 5, .0);
  transform: translate(-50%, -50%);
  transition: box-shadow var(--d-base, .4s) ease, transform var(--d-base, .4s) var(--ease-out-expo);
}
.ba__knob i {
  display: block;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(45deg);
}
.ba__knob i + i { transform: rotate(-135deg); }
.ba.is-active .ba__knob,
.ba__stage:hover .ba__knob { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(204, 6, 5, .85); transform: translate(-50%, -50%) scale(1.06); }

.ba__mark {
  position: absolute;
  top: var(--s5);
  z-index: 3;
  padding: 8px 14px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(13, 14, 16, .6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--r);
  pointer-events: none;
  transition: opacity .3s linear;
}
.ba__mark--before { left: var(--s5); opacity: calc((var(--pos) - 8) / 20); }
.ba__mark--after { right: var(--s5); opacity: calc((92 - var(--pos)) / 20); }

/* the keyboard control: invisible, focusable, drawn as a ring on the knob */
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ba__stage:has(.ba__range:focus-visible) .ba__knob { outline: 2px solid var(--text); outline-offset: 4px; }

@media (max-width: 1023px) {
  .ba { margin-top: var(--s9); }
  .ba__title { grid-column: 1 / -1; }
  .ba__lead { grid-column: 1 / -1; margin-top: var(--s4); }
}
@media (max-width: 767px) {
  .ba__stage { aspect-ratio: 4 / 3.4; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .ba__knob { width: 54px; height: 54px; }
  .ba__mark { top: var(--s4); padding: 6px 10px; font-size: 12px; }
  .ba__mark--before { left: var(--s4); }
  .ba__mark--after { right: var(--s4); }
}

/* ===== 18-raboti.css ===== */
/* ===== 18-raboti: Работи. Offset photo grid with the compare tile (DESIGN.md F.18).
   Scope: #raboti, .raboti__*, and the .compare block only under #raboti.
   needs: none. Shared pieces used as core delivers them: .sec .sec__in .grid .eyebrow .mono,
   .media .media--parallax .media__img .media__cap, [data-reveal] on the eyebrow and the h2,
   [data-parallax] on the five photo tiles, the follower word mode through data-cursor on .compare.
   The five photo tiles are the only images with a runtime filter on the page (hover saturate, one static tile at a time);
   the compare tile has no parallax so its matte filter never sits on a moving image. ===== */

/* head: eyebrow and h2 on the gutters, h2 columns 1 to 8 */
#raboti .raboti__head { row-gap: 0; }
#raboti .eyebrow { grid-column: 1 / -1; margin-bottom: var(--s4); }
#raboti .raboti__title { grid-column: 1 / span 8; }

/* the offset grid: unequal spans, vertical offsets, a generous row gap so the negative offsets never touch a caption */
#raboti .raboti__grid { margin-top: var(--s8); row-gap: var(--s9); align-items: start; }
#raboti .raboti__tile { position: relative; min-width: 0; align-self: start; }
#raboti .raboti__tile--compare { grid-column: 1 / span 7; grid-row: 1; }
#raboti .raboti__tile--candy   { grid-column: 8 / span 4; grid-row: 1 / span 2; margin-top: 10vh; }
#raboti .raboti__tile--wheel   { grid-column: 2 / span 4; grid-row: 2; margin-top: -6vh; }
#raboti .raboti__tile--cans    { grid-column: 1 / span 4; grid-row: 3 / span 2; }
#raboti .raboti__tile--water   { grid-column: 5 / span 5; grid-row: 3; margin-top: 8vh; }
#raboti .raboti__tile--bottle  { grid-column: 10 / span 3; grid-row: 3 / span 2; margin-top: -4vh; }

/* the sun check: the hovered tile saturates, one static element at a time (D.7 exception) */
#raboti .raboti__tile .media__img { transition: filter var(--d-base) var(--ease-out-quart); }
@media (hover: hover) and (pointer: fine) {
  #raboti .raboti__tile:hover .media__img { filter: saturate(1.2); }
}

/* compare tile: both layers are the grey red panel under the recolour stack, filled with the bench paint */
#raboti .compare {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: clip;
  background: var(--primer);
  border-radius: var(--r);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  isolation: isolate;
}
#raboti .compare__layer { position: absolute; inset: 0; isolation: isolate; }
#raboti .compare__layer > picture { position: absolute; inset: 0; display: block; }
#raboti .compare__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
#raboti .compare__layer--mat .compare__img { filter: contrast(.85) brightness(.9); }
#raboti .compare__layer--gloss { clip-path: inset(0 0 0 var(--split, 50%)); }
#raboti .compare__tint {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--paint);
  pointer-events: none;
}
#raboti .compare__tint--multiply { mix-blend-mode: multiply; opacity: .85; }
#raboti .compare__tint--color { mix-blend-mode: color; }
#raboti .compare__sweep {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(112deg, transparent 47%, rgba(240,238,233,.26) 50%, transparent 53%);
  mix-blend-mode: screen;
  transform: translateX(-10%);
  pointer-events: none;
}

/* the range covers the tile for pointer, touch and keyboard; the handle above it is the 50px drag zone that locks touch */
#raboti .compare__range {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
#raboti .compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  width: 1px;
  background: var(--text);
  transform: translateX(-50%);
  cursor: ew-resize;
}
#raboti .compare__handle::before {
  content: "";
  position: absolute;
  inset: 0 -25px;
  touch-action: none;
}
#raboti .compare__grip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 24px;
  height: 24px;
  background: var(--text);
  border-radius: var(--r);
  transform: translate(-50%, -50%);
}
#raboti .compare__range:focus-visible ~ .compare__handle .compare__grip { outline: 2px solid var(--text); outline-offset: 2px; }

/* caption row under the compare tile: Мат left, Гланц right, the illustration note between them */
#raboti .raboti__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s2);
  color: var(--muted);
}
#raboti .raboti__legend > span:first-child,
#raboti .raboti__legend > span:last-child { flex: 0 0 auto; color: var(--text); }
#raboti .raboti__cap { flex: 1 1 auto; text-align: center; }

@media (max-width: 1023px) {
  #raboti .raboti__grid { row-gap: var(--s8); }
}

@media (max-width: 767px) {
  #raboti .raboti__title { grid-column: 1 / -1; }
  #raboti .raboti__grid { margin-top: var(--s7); row-gap: var(--s7); }
  #raboti .raboti__tile--compare { grid-column: 1 / span 6; grid-row: 1; }
  #raboti .raboti__tile--candy   { grid-column: 1 / span 3; grid-row: 2; margin-top: 5vh; }
  #raboti .raboti__tile--wheel   { grid-column: 4 / span 3; grid-row: 2; margin-top: -3vh; }
  #raboti .raboti__tile--cans    { grid-column: 1 / span 3; grid-row: 3; margin-top: 0; }
  #raboti .raboti__tile--bottle  { grid-column: 4 / span 3; grid-row: 3; margin-top: -2vh; }
  #raboti .raboti__tile--water   { grid-column: 1 / span 6; grid-row: 4; margin-top: 4vh; }
  #raboti .raboti__legend { flex-wrap: wrap; row-gap: var(--s1); }
  #raboti .raboti__legend > span:last-child { margin-left: auto; }
  #raboti .raboti__cap { flex: 1 1 100%; order: 3; text-align: left; }
}

@media (max-width: 479px) {
  #raboti .raboti__grid { row-gap: var(--s6); }
  #raboti .raboti__tile--compare,
  #raboti .raboti__tile--candy,
  #raboti .raboti__tile--wheel,
  #raboti .raboti__tile--cans,
  #raboti .raboti__tile--water,
  #raboti .raboti__tile--bottle { grid-column: 1; grid-row: auto; margin-top: 0; }
  #raboti .raboti__legend { flex-wrap: wrap; row-gap: var(--s1); }
  #raboti .raboti__legend > span:last-child { margin-left: auto; }
  #raboti .raboti__cap { flex: 1 1 100%; order: 3; text-align: left; }
}

/* motion toggle (was prefers-reduced-motion) */

  html.tp-still #raboti .raboti__tile .media__img { transition: none; }


/* ===== 19-kasko.css ===== */
/* ===== 19-kasko: Каско, the sticky-sidebar ledger (F.19). needs: none (ghost, btn, reveal batch and every token come from core) ===== */

/* desktop: the aside (columns 1 to 5) sticks under the nav, the ledger (columns 7 to 12) flows */
#kasko .kasko__side {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
  align-self: start;
}
.kasko__ghost { display: block; }
#kasko .kasko__side h2 { margin-top: var(--s5); }
#kasko .kasko__side .t-lead { margin-top: var(--s5); }
#kasko .kasko__side .btn { margin-top: var(--s6); }

.kasko__ledger { grid-column: 7 / span 6; }

/* a ledger row: the hairline is a component line inside the ledger, never between sections */
.kasko__row {
  border-top: 1px solid var(--line);
  padding-block: var(--s6);
}
.kasko__row:focus-visible { outline-offset: var(--s2); }
.kasko__row dt { color: var(--text); }
.kasko__row dd {
  margin-top: var(--s3);
  max-width: 66ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* rest state on hover devices, switched on by 19-kasko.js (kasko--live): two lines, JS tweens max-height on hover and focus */
.kasko--live .kasko__row dd {
  max-height: calc(2 * var(--lh-body) * 1em);
  overflow: clip;
}

/* concierge block: title, three rows in body size, the mono insurer line */
.kasko__sub { margin-top: var(--s9); color: var(--text); }
.kasko__list { margin-top: var(--s5); }
.kasko__list li {
  border-top: 1px solid var(--line);
  padding-block: var(--s5);
  max-width: 66ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.kasko__insurers { margin-top: var(--s7); color: var(--muted); }
.kasko__insurers[hidden] { display: none; }

/* short screens: the sticky aside sits closer to the nav so the button stays in view */
@media (max-height: 640px) {
  #kasko .kasko__side { top: calc(var(--nav-h) + var(--s4)); }
}

/* below 1024px: one column, the aside not sticky, the ghost word at the clamp minimum */
@media (max-width: 1023px) {
  #kasko .kasko__side {
    grid-column: 1 / -1;
    position: static;
    top: auto;
  }
  .kasko__ghost { font-size: 3.5rem; }
  .kasko__ledger {
    grid-column: 1 / -1;
    margin-top: var(--s8);
  }
}

@media (max-width: 767px) {
  #kasko .kasko__side { grid-column: 1 / -1; }
  .kasko__ledger { grid-column: 1 / -1; margin-top: var(--s7); }
  .kasko__row { padding-block: var(--s5); }
  .kasko__sub { margin-top: var(--s8); }
  .kasko__list li { padding-block: var(--s4); }
}

@media (max-width: 479px) {
  #kasko .kasko__side { grid-column: 1 / -1; }
  .kasko__ledger { grid-column: 1 / -1; }
  #kasko .kasko__side h2 { margin-top: var(--s4); }
  #kasko .kasko__side .t-lead { margin-top: var(--s4); }
  #kasko .kasko__side .btn { margin-top: var(--s5); }
  .kasko__row dd { margin-top: var(--s2); }
}

/* reduced motion: the ghost is filled by 01-base (--fill 100%), first words are text, every row is open */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .kasko--live .kasko__row dd { max-height: none; overflow: visible; }
  html.tp-still .kasko__first { color: var(--text); }


/* ===== 20-otzivi.css ===== */
/* ===== 20-otzivi: F.20 pinned quote stage (Казано от клиенти.) =====
   needs: nothing shared. The section title is an h2 at --fs-small per F.20, styled locally under #otzivi.
   Layout modes: the flow list is the default (no JS, shortScreen, reduced motion); 20-otzivi.js adds
   #otzivi.is-stage when it builds the 100svh pin, and removes it in its cleanup. */

/* the pin: block, position relative, overflow clip (F.20). No transform, filter, compositing hint or contain here or on any ancestor. */
#otzivi .otzivi__pin {
  position: relative;
  overflow: clip;
  padding-block: var(--section-pad);
}

/* backdrop: decorative, 35% opacity, static in the flow, 112% tall and transformed by GSAP in the stage */
#otzivi .otzivi__bg {
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  user-select: none;
}
#otzivi .otzivi__bg picture {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primer);
}
#otzivi .otzivi__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* content sits on the gutters above the backdrop */
#otzivi .otzivi__in {
  position: relative;
  z-index: var(--z-base);
}

/* small title: Geologica 500, --fs-small, --muted (F.20), not an eyebrow */
#otzivi .otzivi__title {
  grid-column: 1 / span 12;
  margin-bottom: var(--s7);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* the quotes: a plain list in the DOM, four items, flowing by default */
#otzivi .otzivi__list {
  grid-column: 1 / span 10;
  display: grid;
  row-gap: var(--s8);
}
#otzivi .otzivi__text { color: var(--text); }
#otzivi .otzivi__who {
  margin-top: var(--s5);
  color: var(--muted);
}

/* the stage: 100svh, vertically centred content, items stacked in the same cell (desktop and mobile, not shortScreen) */
#otzivi.is-stage .otzivi__pin {
  height: 100svh;
  padding-block: 0;
}
#otzivi.is-stage .otzivi__bg {
  bottom: auto;
  height: 112%;
}
#otzivi.is-stage .otzivi__in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: var(--nav-h);
}
#otzivi.is-stage .otzivi__list { row-gap: 0; }
#otzivi.is-stage .otzivi__item { grid-area: 1 / 1; }

@media (max-width: 1023px) {
  #otzivi .otzivi__title { margin-bottom: var(--s6); }
  #otzivi .otzivi__list {
    grid-column: 1 / span 12;
    row-gap: var(--s7);
  }
}

@media (max-width: 767px) {
  #otzivi .otzivi__title,
  #otzivi .otzivi__list { grid-column: 1 / span 6; }
}

@media (max-width: 479px) {
  #otzivi .otzivi__title,
  #otzivi .otzivi__list { grid-column: 1 / span 1; }
  #otzivi .otzivi__title { margin-bottom: var(--s5); }
  #otzivi .otzivi__list { row-gap: var(--s6); }
  #otzivi .otzivi__who { margin-top: var(--s4); }
}

/* shortScreen (640px and lower): no pin, the quotes flow. The JS never adds .is-stage here; these rules hold the flow regardless. */
@media (max-height: 640px) {
  #otzivi.is-stage .otzivi__pin {
    height: auto;
    padding-block: var(--section-pad);
  }
  #otzivi.is-stage .otzivi__bg {
    bottom: 0;
    height: auto;
  }
  #otzivi.is-stage .otzivi__in {
    display: block;
    height: auto;
    padding-top: 0;
  }
  #otzivi.is-stage .otzivi__list { row-gap: var(--s7); }
  #otzivi.is-stage .otzivi__item { grid-area: auto; }
}

/* reduced motion: the four quotes flow as a list, backdrop static */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still #otzivi.is-stage .otzivi__pin {
    height: auto;
    padding-block: var(--section-pad);
  }
  html.tp-still #otzivi.is-stage .otzivi__bg {
    bottom: 0;
    height: auto;
  }
  html.tp-still #otzivi.is-stage .otzivi__in {
    display: block;
    height: auto;
    padding-top: 0;
  }
  html.tp-still #otzivi.is-stage .otzivi__list { row-gap: var(--s8); }
  html.tp-still #otzivi.is-stage .otzivi__item { grid-area: auto; }


/* the real Google figures (2026-10-10): rating, stars, count and links to the profile */
#otzivi .otzivi__score { display: flex; align-items: center; gap: var(--s5); margin: 0 0 var(--s4); }
#otzivi .otzivi__num { font-family: var(--ff-display); font-weight: 900; font-size: var(--fs-h1); line-height: .9; }
#otzivi .otzivi__stars { display: inline-flex; gap: 6px; }
#otzivi .otzivi__stars i {
  width: clamp(22px, 2.4vw, 34px);
  aspect-ratio: 1;
  background: #F5B400;
  clip-path: polygon(50% 0, 61.8% 35.3%, 100% 35.3%, 69.1% 57.1%, 80.9% 92.7%, 50% 70.6%, 19.1% 92.7%, 30.9% 57.1%, 0 35.3%, 38.2% 35.3%);
}
#otzivi .otzivi__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (max-width: 479px) { #otzivi .otzivi__actions .btn { flex: 1 1 100%; } }

/* ===== 21-vaprosi.css ===== */
/* ===== 21-vaprosi: Въпросите от телефона, accordion with a sticky title (F.21) =====
   needs: none. Everything shared comes from 01-base (.sec, .sec__in, .grid, h2) and the tokens.
   The only hairlines are the row borders inside .vaprosi__list (component hairlines, --line). */

/* desktop: the sticky title on the left, the accordion in columns 6 to 12. The title box takes columns 1 to 5:
   "ОТ ТЕЛЕФОНА." measures 455px at 1440 in the display face and four columns are 417px, so the fifth column keeps the
   title on two lines; its ink still ends about 70px before the accordion column. */
.vaprosi__title {
  grid-column: 1 / span 5;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
}
.vaprosi__list {
  grid-column: 6 / span 7;
}

/* rows: a hairline above each item, one under the last */
.vaprosi__item {
  border-top: 1px solid var(--line);
}
.vaprosi__item:last-child {
  border-bottom: 1px solid var(--line);
}
.vaprosi__item > h3 {
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* the question is the control: full width, text left, Geologica 500 1.25rem */
.vaprosi__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  width: 100%;
  padding: var(--s5) 0;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vaprosi__q > span {
  flex: 1 1 auto;
  min-width: 0;
}
.vaprosi__q:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* the plus: two 1px by 16px lines, rotated 45deg into a cross while the item is open */
.vaprosi__plus {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: calc((1.25rem * 1.5 - 16px) / 2);
  transition: transform var(--d-fast) var(--ease-in-out-cubic);
}
.vaprosi__plus::before,
.vaprosi__plus::after {
  content: "";
  position: absolute;
  background: var(--text);
}
.vaprosi__plus::before {
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  margin-top: -.5px;
}
.vaprosi__plus::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 16px;
  margin-left: -.5px;
}
.vaprosi__item.is-open .vaprosi__plus {
  transform: rotate(45deg);
}

/* the answer region: clipped while its height animates; closed by JS through aria-hidden. Without JS every answer is open. */
.vaprosi__a {
  overflow: clip;
}
.js .vaprosi__a[aria-hidden="true"] {
  height: 0;
  overflow: clip;
}
.vaprosi__a > p {
  max-width: 60ch;
  padding-bottom: var(--s6);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* below 1024px: one column, the title flows */
@media (max-width: 1023px) {
  .vaprosi__title {
    grid-column: 1 / -1;
    position: static;
    top: auto;
  }
  .vaprosi__list {
    grid-column: 1 / -1;
    margin-top: var(--s7);
  }
}

/* below 768px: the grid has six columns, spans restated */
@media (max-width: 767px) {
  .vaprosi__title,
  .vaprosi__list {
    grid-column: 1 / -1;
  }
  .vaprosi__list {
    margin-top: var(--s6);
  }
  .vaprosi__q {
    gap: var(--s4);
    padding: var(--s4) 0;
  }
  .vaprosi__a > p {
    padding-bottom: var(--s5);
  }
}

/* below 480px: one column, spans restated */
@media (max-width: 479px) {
  .vaprosi__title,
  .vaprosi__list {
    grid-column: 1 / -1;
  }
}

/* reduced motion: the plus flips without a transition (01-base also shortens every transition) */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .vaprosi__plus {
    transition: none;
  }


/* ===== 22-kontakt.css ===== */
/* ===== 22-kontakt: free inspection by phone and the map (owner, 2026-10-08: no form, contact by phone only) ===== */

#kontakt .kontakt__title {
  margin-top: var(--s3);
  max-width: calc(66.667% - var(--gap) / 3);
}
#kontakt .kontakt__grid {
  margin-top: var(--s8);
  row-gap: var(--s8);
  align-items: start;
}
#kontakt .kontakt__call { grid-column: 1 / span 6; min-width: 0; display: grid; justify-items: start; row-gap: var(--s6); }
#kontakt .kontakt__place { grid-column: 8 / span 5; min-width: 0; }

#kontakt .kontakt__lead { max-width: 34em; }

/* the number is the call to action: display type, the whole line is the tel: link */
#kontakt .kontakt__big {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#kontakt .kontakt__big-num {
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 3px no-repeat;
  transition: background-size .5s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
  padding-bottom: .06em;
}
#kontakt .kontakt__big:hover .kontakt__big-num,
#kontakt .kontakt__big:focus-visible .kontakt__big-num { background-size: 100% 3px; }

/* how it goes: four plain rows, no numbering */
#kontakt .kontakt__how {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#kontakt .kontakt__how li {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 2fr;
  column-gap: var(--gap);
  padding-block: var(--s4);
  border-top: 1px solid var(--line, rgba(240, 238, 233, .1));
}
#kontakt .kontakt__how li:last-child { border-bottom: 1px solid var(--line, rgba(240, 238, 233, .1)); }
#kontakt .kontakt__how-t { font-family: var(--ff-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.05; color: var(--text); }
#kontakt .kontakt__how-d { color: var(--muted); }

/* the map: a square-cornered frame, darkened so it sits in the page until it is touched */
#kontakt .kontakt__map {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border-radius: var(--r);
  overflow: clip;
}
#kontakt .kontakt__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.85) invert(.9) hue-rotate(180deg) contrast(.9);
  transition: filter .5s ease;
}
#kontakt .kontakt__map:hover iframe,
#kontakt .kontakt__map:focus-within iframe { filter: none; }

#kontakt .kontakt__loc {
  position: relative;
  z-index: var(--z-overlap);
  display: grid;
  justify-items: start;
  row-gap: var(--s2);
  margin: -5rem var(--s5) 0 calc(-1 * var(--s7));
  padding: var(--s6);
  background: var(--surface);
  border-radius: var(--r);
  font-style: normal;
}
#kontakt .kontakt__addr { color: var(--text); }
#kontakt .kontakt__hours { color: var(--muted); }
#kontakt .kontakt__maps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1023px) {
  #kontakt .kontakt__title { max-width: none; }
  #kontakt .kontakt__call,
  #kontakt .kontakt__place { grid-column: 1 / -1; }
  #kontakt .kontakt__map { aspect-ratio: 4 / 3; }
  #kontakt .kontakt__loc { margin: -3rem var(--s4) 0; }
}

@media (max-width: 767px) {
  #kontakt .kontakt__how li { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  #kontakt .kontakt__loc { margin: -2rem var(--s3) 0; padding: var(--s5); }
  #kontakt .kontakt__big { font-size: clamp(2.6rem, 13vw, 4rem); }
}

@media (max-width: 479px) {
  #kontakt .kontakt__btn { justify-self: stretch; }
}

/* fit the whole section in one screen (owner, 2026-10-08): two-by-two steps, a smaller number, the map as tall as the left column */
#kontakt .kontakt__grid { margin-top: var(--s6); align-items: stretch; }
#kontakt .kontakt__call { row-gap: var(--s5); }
#kontakt .kontakt__big { font-size: clamp(2.6rem, 5vw, 4.75rem); }
#kontakt .kontakt__how { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
#kontakt .kontakt__how li,
#kontakt .kontakt__how li:last-child { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); padding-block: var(--s3); border-bottom: 0; }
#kontakt .kontakt__how-t { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
#kontakt .kontakt__how-d { font-size: var(--fs-small); line-height: 1.45; }
#kontakt .kontakt__place { display: flex; flex-direction: column; }
#kontakt .kontakt__map { aspect-ratio: auto; flex: 1 1 auto; min-height: 340px; }
#kontakt .kontakt__loc { margin-top: -3.5rem; padding: var(--s5); }
@media (max-width: 1023px) {
  #kontakt .kontakt__map { min-height: 300px; aspect-ratio: 4 / 3; flex: none; }
}
@media (max-width: 767px) {
  #kontakt .kontakt__how { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 23-footer.css ===== */
/* ===== 23-footer: stacked wordmark footer with colophon (DESIGN.md F.23) ===== */
/* needs: nothing shared was implemented locally. The privacy link points at /poveritelnost/ (H.6), a page generated by
   tools/build.py; the old /poveritelnost.html answers with a 301 from .htaccess. Photo credits stay in /docs/credits.md. */

/* the footer is the only element allowed to clip the page edge: PAINT hangs 6% of the block height below the page bottom */
#footer {
  overflow: clip;
  padding-bottom: 0;
}
#footer .sec__in { position: relative; }

/* row 1: the meta grid, body and mono, one item per line, separated by column position only */
.footer__meta {
  row-gap: var(--s7);
  align-items: start;
}
.footer__addr,
.footer__contact,
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
}
.footer__addr {
  grid-column: 1 / span 4;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.footer__contact {
  grid-column: 5 / span 4;
  color: var(--muted);
}
.footer__nav {
  grid-column: 9 / span 4;
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
}
.footer__phone {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* row 2: the wordmark, TOP over PAINT as two ghost lines (D.9, the third and last ghost use), the compact contact column beside TOP from column 7 */
.footer__mark {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--gap);
  align-items: end;
  margin-top: var(--s10);
  margin-bottom: calc(var(--fs-wordmark) * -.098); /* 6% of the two-line block (2 x .82em) sits below the page bottom and is cropped by the clip */
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--fs-wordmark);
  line-height: .82;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text);
}
.footer__word {
  grid-column: 1 / span 6;
  grid-row: 1;
  justify-self: start;
  white-space: nowrap;
}
.footer__word--paint {
  grid-column: 1 / -1;
  grid-row: 2;
}
.footer__aside {
  grid-column: 7 / span 6;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  padding-bottom: calc(var(--fs-wordmark) * .06); /* the last mono line sits on the baseline of TOP */
  color: var(--muted);
}
.footer__aside .footer__phone { color: var(--muted); }

/* row 3: the legal line and the colophon, over the bottom of the wordmark */
.footer__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2) var(--s6);
  color: var(--muted);
}
.footer__legal {
  mix-blend-mode: difference; /* the line crosses the filled PAINT glyphs: difference keeps it dark on the glyphs and muted on the ground */
}
.footer__ral {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
  color: var(--text);
  white-space: nowrap;
}
.footer__ral::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--accent); /* accent use 8 of 9 (D.1) */
  border-radius: var(--r);
}

@media (max-width: 1023px) {
  .footer__mark { margin-top: var(--s9); }
}

@media (max-width: 767px) {
  /* the legal row leaves the wordmark on phones and sits above it; the aside column is removed; the wordmark is left-aligned at the clamp minimum */
  #footer .sec__in { display: flex; flex-direction: column; }
  .footer__meta { order: 0; row-gap: var(--s6); }
  .footer__addr { grid-column: 1 / span 3; }
  .footer__contact { grid-column: 4 / span 3; }
  .footer__nav { grid-column: 1 / -1; }
  .footer__bottom { position: static; order: 1; margin-top: var(--s7); }
  .footer__legal { mix-blend-mode: normal; }
  .footer__mark { order: 2; margin-top: var(--s7); }
  .footer__word { grid-column: 1 / -1; }
  .footer__aside { display: none; }
}

@media (max-width: 479px) {
  .footer__addr,
  .footer__contact,
  .footer__nav { grid-column: 1 / -1; }
  .footer__mark { margin-top: var(--s6); }
}

/* motion toggle (was prefers-reduced-motion) */

  /* 01-base sets --fill: 100% on .ghost; the block does not rise */
  html.tp-still .footer__mark { transform: none; }


/* owner badge logo (2026-10-10): top of the aside on desktop, alone above the wordmark on phones */
.footer__emblem { display: block; width: clamp(140px, 13vw, 200px); height: auto; margin-bottom: var(--s5); }
@media (max-width: 767px) {
  .footer__aside { display: flex; grid-column: 1 / -1; grid-row: auto; order: -1; }
  .footer__aside > :not(.footer__emblem) { display: none; }
  .footer__emblem { width: 150px; margin: 0 0 var(--s5); }
}

/* ===== 40-pages.css ===== */
/* ===== 40-pages: the generated pages (services index, service, blog index, post, contact, legal, 404), the home blog
   teaser (#blog), the footer link columns and the nav state for every page. Scoped by page class on <body>:
   .page-sub on every generated page, plus .page-index (/uslugi/), .page-service, .page-blog (/blog/), .page-post,
   .page-contact, .page-legal, .page-notfound. Tokens only, radius 0, one dark theme, sections separated by space only.
   Reduced motion blocks are written as prefers-reduced-motion and scoped to html.tp-still by tools/motion_css.py. ===== */

/* ---------- nav on every page: the current page keeps its underline; subpages have no hero, the bar is solid ---------- */
#nav .nav__links [aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.menu__link[aria-current="page"] { color: var(--muted); }
.page-sub #nav { background: var(--bg); }
.page-sub #nav.is-menu-open { background: transparent; }

/* ---------- home: the service card title is a link to its page ---------- */
#uslugi .uslugi__link { display: block; color: inherit; }
#uslugi .uslugi__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  #uslugi .uslugi__card:not(.uslugi__card--accent) .uslugi__link .uslugi__name { transition: color var(--d-fast) var(--ease-out-quart); }
  #uslugi .uslugi__card:not(.uslugi__card--accent) .uslugi__link:hover .uslugi__name { color: var(--muted); }
}

/* ---------- footer: address, contact with the motion toggle, the ten services, the pages ---------- */
#footer .footer__addr { grid-column: 1 / span 3; }
#footer .footer__contact { grid-column: 4 / span 3; }
#footer .footer__services { grid-column: 7 / span 4; display: flex; flex-direction: column; align-items: flex-start; }
#footer .footer__nav { grid-column: 11 / span 2; }
#footer .footer__cap { margin-bottom: var(--s2); color: var(--muted); font-weight: 500; }
#footer .footer__list { display: block; width: 100%; }
#footer .footer__list li { break-inside: avoid; }
#footer .footer__list li + li { margin-top: var(--s1); }
#footer .footer__list a { font-weight: 500; font-size: .9375rem; line-height: 1.5; color: var(--text); }
#footer .footer__motion {
  display: inline-block;
  margin-top: var(--s4);
  padding: var(--s2) 0;
  color: var(--muted);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--d-fast) var(--ease-out-quart);
}
#footer .footer__motion:hover,
#footer .footer__motion:focus-visible { color: var(--text); }
@media (min-width: 1280px) {
  #footer .footer__list { columns: 2; column-gap: var(--gap); }
}
@media (max-width: 1023px) {
  #footer .footer__addr { grid-column: 1 / span 4; }
  #footer .footer__contact { grid-column: 5 / span 4; }
  #footer .footer__nav { grid-column: 9 / span 4; }
  #footer .footer__services { grid-column: 1 / -1; grid-row: 2; }
  #footer .footer__list { columns: 2; column-gap: var(--gap); }
}
@media (max-width: 767px) {
  #footer .footer__addr { grid-column: 1 / span 3; }
  #footer .footer__contact { grid-column: 4 / span 3; }
  #footer .footer__services { grid-column: 1 / -1; grid-row: auto; }
  #footer .footer__nav { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  #footer .footer__addr,
  #footer .footer__contact { grid-column: 1 / -1; }
  #footer .footer__list { columns: 1; }
  #footer .footer__list li + li { margin-top: var(--s2); }
}

/* ---------- subpages: if main.js stalls, hidden reveal pieces show after 2.5 s instead of the core's 10 s. Once the
   core has built a reveal, the element carries its own inline from state, so this changes nothing on a working page. ---------- */
.js .page-sub [data-reveal] { animation-delay: 2.5s; }

/* ---------- shared page hero: breadcrumbs, the h1, the lead ---------- */
.page-sub .phero {
  padding-top: calc(var(--nav-h) + var(--s7));
  padding-bottom: var(--s8);
}
.page-sub .crumbs {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--muted);
}
.page-sub .crumbs__list { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--s2); }
.page-sub .crumbs__list li { display: inline-flex; align-items: baseline; min-width: 0; }
.page-sub .crumbs__list li + li::before {
  content: "/";
  content: "/" / "";
  margin-inline: var(--s3);
  color: var(--muted);
}
.page-sub .crumbs .link-underline { color: var(--muted); }
.page-sub .crumbs [aria-current="page"] { color: var(--text); max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.page-sub .phero__grid { margin-top: var(--s6); row-gap: var(--s6); }
.page-sub .phero__title { grid-column: 1 / -1; max-width: 100%; overflow-wrap: break-word; }
.page-sub .phero__side { grid-column: 1 / span 6; }
.page-sub .phero__lead { color: var(--text); }
.page-sub .phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); margin-top: var(--s6); }
.page-sub .phero__phone { font-weight: 500; color: var(--text); white-space: nowrap; }
.page-sub .phero__jump { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s6); font-weight: 500; font-size: .9375rem; }

@media (min-width: 1024px) {
  .page-index .phero__grid,
  .page-blog .phero__grid,
  .page-contact .phero__grid { align-items: end; }
  /* the hub titles carry their keywords ("Услуги по каросерията и боята"): in half the grid they take the display-2 size,
     so the longest word stays whole */
  .page-index .phero__title,
  .page-blog .phero__title,
  .page-contact .phero__title { grid-column: 1 / span 6; font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .page-index .phero__side,
  .page-blog .phero__side,
  .page-contact .phero__side { grid-column: 7 / -1; padding-bottom: var(--s3); }
}

/* ---------- service page ---------- */
.page-service .phero__title { font-size: var(--fs-h2); line-height: var(--lh-h2); grid-column: 1 / span 11; }
.page-service .phero__grid { align-items: end; }
.page-service .phero__side { grid-column: 1 / span 4; grid-row: 2; align-self: end; }
.page-service .phero__media { grid-column: 5 / -1; grid-row: 2; --ar: 16 / 10; }
.page-service .phero__media .media__img { object-position: 50% 45%; }

.page-service .svc-intro { padding-top: var(--s9); }
.page-service .svc-intro .grid { align-items: center; }
.page-service .svc-intro__media { grid-column: 1 / span 5; --ar: 4 / 5; }
.page-service .svc-intro__text { grid-column: 7 / -1; }
.page-service .svc-intro__p { max-width: 60ch; }
.page-service .svc-intro__p + .svc-intro__p { margin-top: var(--s5); color: var(--muted); }

.page-service .svc-includes .grid { align-items: start; }
.page-service .svc-includes__title {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
}
.page-service .svc-includes__list {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8) var(--gap);
  padding-bottom: var(--s8);
}
.page-service .svc-includes__item {
  position: relative;
  padding-top: var(--s5);
  border-top: 1px solid var(--line-strong);
}
.page-service .svc-includes__item:nth-child(even) { top: var(--s8); }
.page-service .svc-includes__name {
  font-size: max(1.5rem, calc(var(--fs-h3) * .72));
  line-height: var(--lh-h3);
}
.page-service .svc-includes__text { margin-top: var(--s3); color: var(--muted); max-width: 44ch; }

.page-service .svc-steps .grid { align-items: start; }
.page-service .svc-steps__head {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
}
.page-service .svc-steps__note { margin-top: var(--s5); color: var(--muted); max-width: 30ch; }
.page-service .svc-steps__body {
  grid-column: 6 / -1;
  position: relative;
  padding-left: var(--s8);
}
.page-service .svc-steps__track {
  position: absolute;
  left: 6px;
  top: var(--s6);
  bottom: var(--s6);
  width: 1px;
  background: var(--line-strong);
}
.page-service .svc-steps__fill {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--text);
  transform-origin: 50% 0;
}
.page-service .svc-steps__step { position: relative; }
.page-service .svc-steps__step + .svc-steps__step { margin-top: var(--s5); }
.page-service .svc-steps__node {
  position: absolute;
  left: calc(-1 * var(--s8));
  top: var(--s6);
  display: block;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--d-base) var(--ease-out-quart), box-shadow var(--d-base) var(--ease-out-quart);
}
.page-service .svc-steps__step.is-on .svc-steps__node { background: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.page-service .svc-steps__panel {
  --pad: clamp(24px, 3vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s6);
  padding: var(--pad);
  background: var(--surface);
}
.page-service .svc-steps__name { grid-column: 1; grid-row: 1; font-size: max(1.5rem, calc(var(--fs-h3) * .8)); }
.page-service .svc-steps__spec { grid-column: 2; grid-row: 1; max-width: 22ch; padding-top: .35em; color: var(--muted); text-align: right; }
.page-service .svc-steps__text { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s4); max-width: 60ch; color: var(--muted); }

.page-service .svc-price__title { max-width: 18ch; }
.page-service .svc-price__list { margin-top: var(--s8); }
.page-service .svc-price__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: var(--s6);
  border-top: 1px solid var(--line);
}
.page-service .svc-price__row:last-child { border-bottom: 1px solid var(--line); }
.page-service .svc-price__name {
  grid-column: 1 / span 5;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: max(1.5rem, calc(var(--fs-h3) * .8));
  line-height: var(--lh-h3);
  color: var(--text);
}
.page-service .svc-price__text { grid-column: 7 / -1; max-width: 60ch; color: var(--muted); }
.page-service .svc-price__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5) var(--s7);
  margin-top: var(--s7);
}

.page-service .svc-facts .grid { align-items: start; row-gap: var(--s8); }
.page-service .svc-facts__cell { min-width: 0; }
.page-service .svc-facts__cell--1 { grid-column: 1 / span 4; }
.page-service .svc-facts__cell--2 { grid-column: 5 / span 4; margin-top: 12vh; }
.page-service .svc-facts__cell--3 { grid-column: 9 / span 4; margin-top: 5vh; }
.page-service .svc-facts__num {
  font-size: min(var(--fs-h1), 7vw);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}
.page-service .svc-facts__unit { margin-top: var(--s4); color: var(--text); }
.page-service .svc-facts__text { margin-top: var(--s2); max-width: 28ch; color: var(--muted); }

.page-service .svc-wide__media { --ar: 21 / 9; }

.page-service .svc-related__list { margin-top: var(--s8); align-items: start; row-gap: var(--s7); }
.page-service .svc-related__item { min-width: 0; }
.page-service .svc-related__item--1 { grid-column: 1 / span 5; }
.page-service .svc-related__item--2 { grid-column: 7 / span 3; margin-top: var(--s9); }
.page-service .svc-related__item--3 { grid-column: 10 / span 3; margin-top: var(--s7); }
.page-service .svc-related__item--1 .svc-related__media { --ar: 4 / 5; }
.page-service .svc-related__item--2 .svc-related__media { --ar: 3 / 4; }
.page-service .svc-related__item--3 .svc-related__media { --ar: 1 / 1; }
.page-service .svc-related__link { display: block; color: var(--text); }
.page-service .svc-related__group { display: block; margin-top: var(--s4); color: var(--muted); }
.page-service .svc-related__name {
  margin-top: var(--s2);
  font-size: max(1.5rem, calc(var(--fs-h3) * .8));
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
  transition: text-decoration-color var(--d-fast) var(--ease-out-quart);
}
.page-service .svc-related__link:hover .svc-related__name,
.page-service .svc-related__link:focus-visible .svc-related__name { text-decoration-color: currentColor; }

/* ---------- services index ---------- */
.page-index .usl-group { padding-block: calc(var(--section-pad) / 2); }
.page-index .usl-group__head { align-items: end; row-gap: var(--s5); }
.page-index .usl-group__title { grid-column: 1 / span 7; }
.page-index .usl-group__text { grid-column: 9 / -1; color: var(--muted); }
.page-index .usl-group__list { display: block; }
.page-index .usl-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-top: var(--s9);
}
.page-index .usl-row__media { min-width: 0; }
.page-index .usl-row--a .usl-row__media { grid-column: 1 / span 7; --ar: 3 / 2; }
.page-index .usl-row--a .usl-row__text { grid-column: 9 / -1; }
.page-index .usl-row--b .usl-row__media { grid-column: 6 / -1; grid-row: 1; --ar: 16 / 10; }
.page-index .usl-row--b .usl-row__text { grid-column: 1 / span 4; grid-row: 1; }
.page-index .usl-row__text { min-width: 0; padding-bottom: var(--s2); }
.page-index .usl-row__name { font-size: var(--fs-h3); }
.page-index .usl-row__link { color: var(--text); }
.page-index .usl-row__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); }
.page-index .usl-row__link:focus-visible { outline: none; }
.page-index .usl-row__link:focus-visible::after { outline: 2px solid var(--text); outline-offset: 4px; }
.page-index .usl-row__lead { margin-top: var(--s4); max-width: 46ch; color: var(--muted); }
.page-index .usl-row__spec { margin-top: var(--s4); color: var(--muted); }
.page-index .usl-row__more {
  position: relative;
  display: inline-block;
  margin-top: var(--s5);
  color: var(--text);
}
.page-index .usl-row__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(.3);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out-quart);
}
.page-index .usl-row:hover .usl-row__more::after { transform: scaleX(1); }

/* ---------- blog index ---------- */
.page-blog .blog-list { padding-top: var(--s6); }
.page-blog .blog-filter { display: none; }
.js .page-blog .blog-filter { display: flex; flex-wrap: wrap; gap: var(--s2); }
.page-blog .blog-filter__btn {
  height: 44px;
  padding: 0 var(--s5);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--d-fast) var(--ease-out-quart), background-color var(--d-fast) var(--ease-out-quart), box-shadow var(--d-fast) var(--ease-out-quart);
}
.page-blog .blog-filter__btn:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.page-blog .blog-filter__btn[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }
.page-blog .blog-list__empty { margin-top: var(--s8); color: var(--muted); }

.page-sub .post-card,
#blog .post-card { position: relative; min-width: 0; }
.post-card .post-card__meta,
.page-blog .blog-feature .post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin-top: var(--s4);
  color: var(--muted);
}
.post-card .post-card__title {
  margin-top: var(--s3);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: max(1.5rem, calc(var(--fs-h3) * .8));
  line-height: var(--lh-h3);
  letter-spacing: 0;
  text-transform: none;
}
.post-card .post-card__link,
.page-blog .blog-feature .post-card__link { color: var(--text); }
.post-card .post-card__link::after,
.page-blog .blog-feature .post-card__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); }
.post-card .post-card__link:focus-visible,
.page-blog .blog-feature .post-card__link:focus-visible { outline: none; }
.post-card .post-card__link:focus-visible::after,
.page-blog .blog-feature .post-card__link:focus-visible::after { outline: 2px solid var(--text); outline-offset: 4px; }
.post-card .post-card__excerpt { margin-top: var(--s3); max-width: 52ch; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .post-card .post-card__title,
  .page-blog .blog-feature__title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: text-decoration-color var(--d-fast) var(--ease-out-quart); }
  .post-card:hover .post-card__title,
  .page-blog .blog-feature:hover .blog-feature__title { text-decoration-color: currentColor; }
}

.page-blog .blog-feature {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-top: var(--s7);
}
.page-blog .blog-feature[hidden] { display: none; }
.page-blog .blog-feature__media { grid-column: 1 / span 8; --ar: 4 / 3; }
.page-blog .blog-feature__text { grid-column: 9 / -1; min-width: 0; padding-bottom: var(--s2); }
.page-blog .blog-feature__title {
  margin-top: var(--s3);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: max(2rem, calc(var(--fs-h2) * .56));
  line-height: var(--lh-h2);
  text-transform: uppercase;
}
.page-blog .blog-feature__excerpt { margin-top: var(--s4); color: var(--muted); }
.page-blog .blog-feature__more { display: inline-block; margin-top: var(--s5); color: var(--text); }

.page-blog .blog-grid { margin-top: var(--s9); row-gap: var(--s9); align-items: start; }
.page-blog .blog-grid__item[data-slot="a"] { grid-column: 1 / span 7; }
.page-blog .blog-grid__item[data-slot="b"] { grid-column: 9 / span 4; margin-top: var(--s9); }
.page-blog .blog-grid__item[data-slot="c"] { grid-column: 2 / span 4; }
.page-blog .blog-grid__item[data-slot="d"] { grid-column: 7 / span 6; margin-top: var(--s8); }
.page-blog .blog-grid__item[data-slot="a"] .post-card__media,
.page-blog .blog-grid__item[data-slot="d"] .post-card__media { --ar: 3 / 2; }
.page-blog .blog-grid__item[data-slot="b"] .post-card__media,
.page-blog .blog-grid__item[data-slot="c"] .post-card__media { --ar: 4 / 5; }

/* ---------- blog post ---------- */
.page-post .post-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: 2px;
  pointer-events: none;
}
.page-post .post-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
}
.page-post .post__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); color: var(--muted); }
.page-post .phero__title {
  grid-column: 1 / span 11;
  font-size: max(2.125rem, calc(var(--fs-h2) * .72));
  line-height: var(--lh-h2);
}
.page-post .phero__lead { grid-column: 1 / span 7; color: var(--muted); }
.page-post .phero__media { grid-column: 1 / -1; margin-top: var(--s5); --ar: 21 / 9; }
.page-post .post__main { padding-top: var(--s8); }
.page-post .post__layout { align-items: start; }
.page-post .post__body { grid-column: 1 / span 8; min-width: 0; max-width: 68ch; }
.page-post .post__aside {
  grid-column: 10 / -1;
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
  min-width: 0;
}

/* long-form typography */
.page-post .post__body {
  font-size: max(var(--fs-body), 1.0625rem);
  line-height: 1.7;
  color: var(--text);
}
.page-post .post__body > * + * { margin-top: var(--s5); }
.page-post .post__body h2 {
  margin-top: var(--s8);
  font-size: max(1.875rem, calc(var(--fs-h2) * .46));
  line-height: var(--lh-h2);
}
.page-post .post__body h3 {
  margin-top: var(--s7);
  font-size: max(1.5rem, calc(var(--fs-h3) * .72));
  line-height: var(--lh-h3);
}
.page-post .post__body h2 + *,
.page-post .post__body h3 + * { margin-top: var(--s4); }
.page-post .post__body > :first-child { margin-top: 0; }
.page-post .post__body ul,
.page-post .post__body ol { padding-left: var(--s6); }
.page-post .post__body li { position: relative; }
.page-post .post__body li + li { margin-top: var(--s2); }
.page-post .post__body ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s5));
  top: .72em;
  width: 6px;
  height: 6px;
  background: var(--muted);
}
.page-post .post__body ol { counter-reset: tp-ol; }
.page-post .post__body ol > li { counter-increment: tp-ol; }
.page-post .post__body ol > li::before {
  content: counter(tp-ol);
  position: absolute;
  left: calc(-1 * var(--s6));
  top: .35em;
  width: var(--s5);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.page-post .post__body blockquote {
  margin-block: var(--s7);
  padding-left: var(--s6);
  box-shadow: inset 2px 0 0 var(--text);
  font-size: max(1.25rem, calc(var(--fs-quote) * .72));
  line-height: var(--lh-quote);
  color: var(--text);
}
.page-post .post__body blockquote > * + * { margin-top: var(--s4); }
.page-post .post__body strong { font-weight: 500; color: var(--text); }
.page-post .post__body em { font-style: italic; }
.page-post .post__body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color var(--d-fast) var(--ease-out-quart);
}
.page-post .post__body a:hover,
.page-post .post__body a:focus-visible { text-decoration-color: var(--text); }

.page-post .post__toc-title { font-weight: 500; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.page-post .post__toc-list { margin-top: var(--s3); box-shadow: inset 1px 0 0 var(--line-strong); }
.page-post .post__toc-link {
  display: block;
  padding: var(--s2) 0 var(--s2) var(--s4);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
  box-shadow: inset 2px 0 0 transparent;
  transition: color var(--d-fast) var(--ease-out-quart), box-shadow var(--d-fast) var(--ease-out-quart);
}
.page-post .post__toc-link:hover { color: var(--text); }
.page-post .post__toc-link[aria-current="true"] { color: var(--text); box-shadow: inset 2px 0 0 var(--text); }
.page-post .post__cta { margin-top: var(--s7); padding: var(--s6); background: var(--surface); }
.page-post .post__cta-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: max(1.5rem, calc(var(--fs-h3) * .7));
  line-height: var(--lh-h3);
}
.page-post .post__cta-text { margin-top: var(--s3); color: var(--muted); }
.page-post .post__cta-list { display: grid; row-gap: var(--s2); margin-top: var(--s4); font-weight: 500; font-size: .9375rem; }
.page-post .post__cta-btn { margin-top: var(--s5); }

.page-post .post-related__list { margin-top: var(--s8); align-items: start; row-gap: var(--s8); }
.page-post .post-related__item--1 { grid-column: 1 / span 7; }
.page-post .post-related__item--2 { grid-column: 9 / -1; margin-top: var(--s9); }
.page-post .post-related__item--1 .post-card__media { --ar: 3 / 2; }
.page-post .post-related__item--2 .post-card__media { --ar: 4 / 5; }

/* ---------- service page: posts on the topic, the post cards of the blog in an offset row ---------- */
.page-service .post-related__list { margin-top: var(--s8); align-items: start; row-gap: var(--s7); }
.page-service .post-related__item--1 { grid-column: 1 / span 6; }
.page-service .post-related__item--2 { grid-column: 7 / span 3; margin-top: var(--s9); }
.page-service .post-related__item--3 { grid-column: 10 / span 3; margin-top: var(--s7); }
.page-service .post-related__item--1 .post-card__media { --ar: 3 / 2; }
.page-service .post-related__item--2 .post-card__media,
.page-service .post-related__item--3 .post-card__media { --ar: 4 / 5; }
.page-service .post-related__item--2 .post-card__excerpt,
.page-service .post-related__item--3 .post-card__excerpt { display: none; }

/* ---------- contact page ---------- */
.page-contact .contact-info { margin-top: var(--s8); row-gap: var(--s6); align-items: start; }
.page-contact .contact-info__cell { display: grid; justify-items: start; row-gap: var(--s2); min-width: 0; }
.page-contact .contact-info__cell--phone { grid-column: 1 / span 5; }
.page-contact .contact-info__cell--hours { grid-column: 6 / span 3; }
.page-contact .contact-info__cell--addr { grid-column: 9 / -1; }
.page-contact .contact-info__name { color: var(--muted); font-weight: 500; }
.page-contact .contact-info__phone {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: max(2.25rem, calc(var(--fs-h2) * .6));
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-contact .contact-info__maps { display: grid; row-gap: var(--s2); margin-top: var(--s3); }

/* ---------- legal and 404 ---------- */
.page-legal .phero__title { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-top: var(--s6); }
.page-legal .legal__grid { margin-top: var(--s8); }
.page-legal .legal__body { grid-column: 5 / span 7; }
.page-legal .legal__body .t-body + .t-body { margin-top: var(--s5); }
.page-legal .legal__date { margin-top: var(--s7); color: var(--muted); }
.page-legal .legal__back { margin-top: var(--s7); }

.page-notfound .notfound { min-height: 100svh; display: flex; align-items: flex-end; }
.page-notfound .notfound .sec__in { padding-top: var(--nav-h); }
.page-notfound .notfound__title { max-width: 15em; }
.page-notfound .notfound__text { margin-top: var(--s6); color: var(--muted); }
.page-notfound .notfound__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s7); }
.page-notfound .notfound__code { margin-top: var(--s7); color: var(--muted); }

/* ---------- home: the blog teaser between the questions and the booking form ---------- */
#blog .blog-teaser__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5) var(--s6); }
#blog .blog-teaser__all { font-weight: 500; }
#blog .blog-teaser__grid { margin-top: var(--s8); row-gap: var(--s7); align-items: start; }
#blog .blog-teaser__item--1 { grid-column: 1 / span 7; grid-row: 1 / span 2; }
#blog .blog-teaser__item--2 { grid-column: 9 / -1; grid-row: 1; }
#blog .blog-teaser__item--3 { grid-column: 9 / -1; grid-row: 2; }
#blog .blog-teaser__item--1 .post-card__media { --ar: 4 / 3; }
#blog .blog-teaser__item--2 .post-card__media,
#blog .blog-teaser__item--3 .post-card__media { --ar: 16 / 9; }
#blog .blog-teaser__item--2 .post-card__excerpt,
#blog .blog-teaser__item--3 .post-card__excerpt { display: none; }

/* ---------- below 1024px: one column heroes, no sticky columns ---------- */
@media (max-width: 1023px) {
  .page-sub .phero__side,
  .page-service .phero__side,
  .page-index .phero__side,
  .page-blog .phero__side { grid-column: 1 / -1; grid-row: auto; }
  .page-service .phero__title { grid-column: 1 / -1; }
  .page-service .phero__media { grid-column: 1 / -1; grid-row: auto; --ar: 3 / 2; }

  .page-service .svc-intro { padding-top: var(--s8); }
  .page-service .svc-intro__media { grid-column: 1 / span 6; }
  .page-service .svc-intro__text { grid-column: 7 / -1; }

  .page-service .svc-includes__title,
  .page-service .svc-steps__head { position: static; grid-column: 1 / -1; }
  .page-service .svc-includes__list { grid-column: 1 / -1; margin-top: var(--s7); }
  .page-service .post-related__item--1 { grid-column: 1 / -1; }
  .page-service .post-related__item--2 { grid-column: 1 / span 6; margin-top: 0; }
  .page-service .post-related__item--3 { grid-column: 7 / span 6; margin-top: 0; }
  .page-service .svc-steps__body { grid-column: 1 / -1; margin-top: var(--s7); }

  .page-service .svc-facts__cell--1 { grid-column: 1 / span 6; }
  .page-service .svc-facts__cell--2 { grid-column: 7 / span 6; margin-top: 8vh; }
  .page-service .svc-facts__cell--3 { grid-column: 3 / span 8; margin-top: 0; }
  .page-service .svc-facts__num { font-size: min(var(--fs-h1), 11vw); }
  .page-service .svc-wide__media { --ar: 16 / 9; }

  .page-index .usl-row--a .usl-row__media,
  .page-index .usl-row--b .usl-row__media { grid-column: 1 / span 7; grid-row: 1; --ar: 4 / 3; }
  .page-index .usl-row--a .usl-row__text,
  .page-index .usl-row--b .usl-row__text { grid-column: 8 / -1; grid-row: 1; }
  .page-index .usl-group__title,
  .page-index .usl-group__text { grid-column: 1 / -1; }

  .page-blog .blog-feature__media { grid-column: 1 / -1; }
  .page-blog .blog-feature__text { grid-column: 1 / span 10; margin-top: var(--s5); }
  .page-blog .blog-grid__item[data-slot="a"],
  .page-blog .blog-grid__item[data-slot="d"] { grid-column: 1 / span 7; margin-top: 0; }
  .page-blog .blog-grid__item[data-slot="b"],
  .page-blog .blog-grid__item[data-slot="c"] { grid-column: 8 / -1; margin-top: var(--s8); }

  .page-post .phero__title,
  .page-post .phero__lead { grid-column: 1 / -1; }
  .page-post .phero__media { --ar: 16 / 9; }
  .page-post .post__body { grid-column: 1 / -1; max-width: 68ch; }
  .page-post .post__aside { grid-column: 1 / -1; position: static; margin-top: var(--s8); }
  .page-post .post__toc { display: none; }
  .page-post .post__cta { margin-top: 0; max-width: 34rem; }

  .page-contact .contact-info__cell--phone { grid-column: 1 / -1; }
  .page-contact .contact-info__cell--hours { grid-column: 1 / span 6; }
  .page-contact .contact-info__cell--addr { grid-column: 7 / -1; }

  .page-legal .legal__body { grid-column: 1 / -1; }
  #blog .blog-teaser__item--1 { grid-column: 1 / -1; grid-row: auto; }
  #blog .blog-teaser__item--2 { grid-column: 1 / span 6; grid-row: auto; }
  #blog .blog-teaser__item--3 { grid-column: 7 / -1; grid-row: auto; }
}

/* ---------- below 768px: the grid has six columns; everything stacks ---------- */
@media (max-width: 767px) {
  .page-sub .phero { padding-top: calc(var(--nav-h) + var(--s6)); padding-bottom: var(--s7); }
  .page-sub .crumbs [aria-current="page"] { max-width: 24ch; }
  .page-sub .phero__actions { gap: var(--s4) var(--s5); }
  .page-service .phero__media { --ar: 4 / 3; }

  .page-service .svc-intro__media,
  .page-service .svc-intro__text { grid-column: 1 / -1; }
  .page-service .svc-intro__media { --ar: 4 / 3; }
  .page-service .svc-intro__text { margin-top: var(--s6); }

  .page-service .svc-includes__list { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-bottom: 0; }
  .page-service .svc-includes__item:nth-child(even) { top: 0; }

  .page-service .svc-steps__body { padding-left: var(--s6); }
  .page-service .svc-steps__node { left: calc(-1 * var(--s6)); }
  .page-service .svc-steps__panel { --pad: var(--s5); grid-template-columns: minmax(0, 1fr); }
  .page-service .svc-steps__spec { grid-column: 1; grid-row: 1; padding-top: 0; margin-bottom: var(--s3); text-align: left; max-width: none; }
  .page-service .svc-steps__name { grid-row: 2; }
  .page-service .svc-steps__text { grid-row: 3; }

  .page-service .svc-price__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); padding-block: var(--s5); }
  .page-service .svc-price__name,
  .page-service .svc-price__text { grid-column: 1; }
  .page-service .svc-price__foot .btn { width: 100%; }

  .page-service .svc-facts .grid { row-gap: var(--s7); }
  .page-service .svc-facts__cell--1,
  .page-service .svc-facts__cell--2,
  .page-service .svc-facts__cell--3 { grid-column: 1 / -1; margin-top: 0; }
  .page-service .svc-facts__cell--2 { padding-left: 16%; }
  .page-service .svc-facts__num { font-size: min(var(--fs-h1), 16vw); }

  .page-service .svc-related__item--1 { grid-column: 1 / -1; }
  .page-service .svc-related__item--2 { grid-column: 1 / span 3; margin-top: 0; }
  .page-service .svc-related__item--3 { grid-column: 4 / span 3; margin-top: var(--s7); }
  .page-service .svc-related__item--1 .svc-related__media { --ar: 4 / 3; }
  .page-service .svc-related__item--2 .svc-related__media,
  .page-service .svc-related__item--3 .svc-related__media { --ar: 3 / 4; }

  .page-index .usl-row { margin-top: var(--s8); }
  .page-index .usl-row--a .usl-row__media,
  .page-index .usl-row--b .usl-row__media,
  .page-index .usl-row--a .usl-row__text,
  .page-index .usl-row--b .usl-row__text { grid-column: 1 / -1; grid-row: auto; }
  .page-index .usl-row__text { margin-top: var(--s5); }

  .page-blog .blog-feature__text { grid-column: 1 / -1; }
  .page-blog .blog-grid { margin-top: var(--s8); row-gap: var(--s8); }
  .page-blog .blog-grid__item[data-slot] { grid-column: 1 / -1; margin-top: 0; }
  .page-blog .blog-grid__item[data-slot="b"] .post-card__media,
  .page-blog .blog-grid__item[data-slot="c"] .post-card__media { --ar: 4 / 3; }

  .page-post .phero__media { --ar: 4 / 3; }
  .page-post .post__body blockquote { padding-left: var(--s5); }
  .page-post .post-related__item--1,
  .page-post .post-related__item--2 { grid-column: 1 / -1; margin-top: 0; }
  .page-post .post-related__item--2 .post-card__media { --ar: 4 / 3; }
  .page-service .post-related__item--1,
  .page-service .post-related__item--2,
  .page-service .post-related__item--3 { grid-column: 1 / -1; margin-top: 0; }
  .page-service .post-related__item--2 .post-card__media,
  .page-service .post-related__item--3 .post-card__media { --ar: 4 / 3; }
  .page-service .post-related__item--2 .post-card__excerpt,
  .page-service .post-related__item--3 .post-card__excerpt { display: block; }

  .page-contact .contact-info__cell--hours,
  .page-contact .contact-info__cell--addr { grid-column: 1 / -1; }

  #blog .blog-teaser__item--2,
  #blog .blog-teaser__item--3 { grid-column: 1 / -1; }
}

@media (max-width: 479px) {
  .page-service .svc-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-service .svc-related__item--1 { grid-column: 1 / -1; }
  .page-service .svc-related__item--2 { grid-column: 1; }
  .page-service .svc-related__item--3 { grid-column: 2; }
  .page-service .svc-related__name { font-size: 1.375rem; }
  .page-service .svc-facts__cell--2 { padding-left: 0; }
  .page-contact .contact-info__phone { font-size: 2.25rem; }
}

/* ---------- motion toggle off (html.tp-still after tools/motion_css.py): final states, no progress scrub ---------- */
/* motion toggle (was prefers-reduced-motion) */

  html.tp-still .page-post .post-progress { display: none; }
  html.tp-still .page-service .svc-steps__fill { transform: none; }
  html.tp-still .page-service .svc-steps__node { transition: none; }