/* ============================================================
   WAXMAN COLLISION — prototype stylesheet
   Дизайн-система: см. design-system/tokens.css (волна 1)
   Dark-first hybrid · Lato only (как на waxmanoftristate.com): body 300 20/34, дисплей 800/900
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
/* Шрифты зашиты data-URI: рендерятся из любого места (file://, шара, zip) без папки fonts */
@font-face{font-family:'Lato';src:url("../fonts/lato-300-latin-wh3IgHm.woff2") format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Lato';src:url("../fonts/lato-regular-latin-iGpiQao.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lato';src:url("../fonts/lato-700-latin-OZM0N3k.woff2") format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Lato';src:url("../fonts/lato-900-latin-HftNI-i.woff2") format('woff2');font-weight:900;font-display:swap}
/* Cyrillic display/body face for /ru/ — Lato has no Cyrillic; variable file covers 300–900 */
@font-face{font-family:'Montserrat';src:url("../fonts/montserrat-cyrillic-VIhQ3xB.woff2") format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- Tokens ---------- */
:root{
  --red-50:#FFF1F1;--red-100:#FFDFDF;--red-200:#FFC5C5;--red-300:#FF9D9D;--red-400:#FF3B30;
  --red-500:#F53540;--red-600:#D90006;--red-700:#B80005;--red-800:#970808;--red-900:#7D0B0B;--red-950:#450304;
  --g-50:#F7F7F7;--g-100:#EFEFEF;--g-200:#E2E2E2;--g-300:#C9C9C9;--g-400:#A8A8A8;--g-500:#8A8A8A;
  --g-600:#6B6B6B;--g-700:#4F4F4F;--g-800:#333333;--g-900:#181818;--g-950:#0D0D0D;
  --s0:#0D0D0D;--s1:#181818;--s2:#1F1F1F;--s3:#262626;--bd:#2E2E2E;--hl:#232323;
  --td1:#FAFAFA;--td2:#B3B3B3;--td3:#8A8A8A;
  --tl1:#181818;--tl2:#4F4F4F;--tl3:#6B6B6B;--line:#E2E2E2;
  --ok:#15803D;--ok-d:#4ADE80;--warn:#B45309;--err:#B80005;
  --fd:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fb:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r1:4px;--r2:8px;--r3:12px;
  --sh-md:0 4px 12px rgb(0 0 0/.08);--sh-lg:0 12px 32px rgb(0 0 0/.14);
  --container:1240px;
  --header-h:76px;
}
/* Russian pages use Montserrat for Cyrillic (Latin tokens fall back to Lato) */
:root:lang(ru){--fd:'Montserrat','Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--fb:'Montserrat','Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--s0);color:var(--td1);font:300 20px/1.7 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto is load-bearing: the responsive_image macro stamps width/height
   attributes for CLS, and the height attribute maps to a fixed CSS height. With
   max-width shrinking the width and nothing releasing the height, any image in
   a container narrower than its natural width renders stretched — a 1600x1200
   photo in a 536px grid column drew at 536x1200 on every geo page. Rules that
   want a fixed height (.split .media img, .gcard img, hero .bg img) all set
   their own and win on specificity. */
img{max-width:100%;height:auto;display:block}
.responsive-picture{display:contents}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--fd);line-height:1.2;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--s0),0 0 0 4px var(--red-400);border-radius:var(--r1)}
::selection{background:var(--red-600);color:#fff}

.skip-link{position:fixed;top:12px;left:12px;z-index:200;transform:translateY(-160%);background:#fff;color:var(--tl1);border-radius:var(--r1);padding:10px 14px;font:700 15px/1.2 var(--fb);text-decoration:none;box-shadow:var(--sh-lg)}
.skip-link:focus{transform:none}
#main-content:focus{outline:none}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:56px 0}
.section--light{background:#fff;color:var(--tl1)}
.section--gray{background:var(--g-50);color:var(--tl1)}
.section--s1{background:var(--s1)}
.prose{max-width:72ch}

/* ---------- Error pages ---------- */
.error-page{min-height:62vh;display:grid;align-items:center;background:radial-gradient(circle at 78% 20%,rgb(217 0 6/.14),transparent 34%),var(--s0)}
.error-page__code{font:900 clamp(64px,13vw,150px)/.8 var(--fd);color:var(--red-400);letter-spacing:-.05em}
.error-page .h-display{max-width:18ch;margin:20px 0}
.error-page .lead{margin-bottom:30px}

/* ---------- CMS editorial blocks ---------- */
.cms-prose .cms-rich-text{margin-top:24px}
.cms-rich-text p+p,.cms-rich-text p+ul,.cms-rich-text p+ol,.cms-rich-text ul+p,.cms-rich-text ol+p,.cms-rich-text blockquote+p{margin-top:16px}
.cms-rich-text h2,.cms-rich-text h3,.cms-rich-text h4{font-weight:800;margin:30px 0 12px}
.cms-rich-text h2{font-size:clamp(26px,3vw,38px)}
.cms-rich-text h3{font-size:24px}
.cms-rich-text h4{font-size:20px}
.cms-rich-text ul,.cms-rich-text ol{display:grid;gap:7px;padding-left:24px;margin-top:16px}
.cms-rich-text ul{list-style:disc}.cms-rich-text ol{list-style:decimal}
.cms-rich-text blockquote{border-left:3px solid var(--red-600);margin:24px 0;padding:4px 0 4px 20px;color:var(--tl2)}
.cms-rich-text a{color:var(--red-700);text-decoration-thickness:1px;text-underline-offset:3px}
.cms-rich-text .table-scroll{overflow-x:auto;margin-top:18px}
.cms-rich-text table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.cms-rich-text th{text-align:left;font-weight:800;padding:10px 12px 8px;border-bottom:2px solid var(--red-600);white-space:nowrap}
.cms-rich-text td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cms-copy .cms-rich-text{margin-top:20px;color:var(--tl2)}
.cms-split--image-left .cms-media{order:-1}
.cms-media{margin:0;background:var(--g-50)}
.split .cms-media img{height:auto;aspect-ratio:3/2}
.cms-media figcaption,.cms-gallery-grid figcaption{display:grid;gap:3px;padding:12px 14px;font:400 14px/1.45 var(--fb);color:var(--tl2)}
.cms-media figcaption small,.cms-gallery-grid figcaption small{font-size:12px;color:var(--tl3)}
.cms-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cms-gallery-grid figure{margin:0;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:#fff}
.cms-gallery-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cms-source{margin-top:auto;font:400 13px/1.5 var(--fb);color:var(--tl3)}
.cms-block--before-after .ba-cap small{font-size:12px}
@media(max-width:900px){.cms-gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cms-gallery-grid{grid-template-columns:1fr}.cms-split--image-left .cms-media{order:0}}

/* headings pattern */
.eyebrow{display:flex;align-items:center;gap:12px;font:400 15px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--red-400);margin:0 0 18px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red-600)}
.section--light .eyebrow,.section--gray .eyebrow{color:var(--red-700)}
.h-display{font-size:clamp(32px,4.2vw,56px);font-weight:800;text-transform:uppercase;line-height:1.2}
.h-display em{font-style:normal;color:var(--red-400)}
.section--light .h-display em,.section--gray .h-display em{color:var(--red-600)}
/* Phones: one word wider than its column widens a grid track past the viewport and the whole
   page scrolls sideways — RU «Сфотографируйте» in 32px/800 caps was 366px in the 327px
   .section-head column of /ru/lease-return-restoration/ at 375px (15.10.2026; the copy is
   shorter now). `anywhere` adds a break only when a word cannot fit a line by itself, so
   ordinary headlines keep their wrapping. */
@media(max-width:560px){.hero h1,.page-hero h1,.h-display,.h2{overflow-wrap:anywhere}}
.h2{font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.25}
.h3{font-size:24px;font-weight:800}
.lead{font-size:20px;line-height:1.7;font-weight:300;color:var(--td2);max-width:60ch}
.section--light .lead,.section--gray .lead{color:var(--tl2)}
.section-head{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:end;margin-bottom:48px}
.section-head .lead{margin-top:14px}
@media(max-width:860px){.section-head{grid-template-columns:1fr;gap:14px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:45px;padding:0 18px;border-radius:5px;border:none;font:400 16px/1 var(--fb);text-transform:uppercase;text-decoration:none;transition:background .18s,border-color .18s,color .18s,transform .06s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--red-600);color:#fff}
.btn--primary:hover{background:var(--red-700)}
.btn--secondary{background:transparent;border:1.5px solid var(--g-500);color:var(--td1)}
.btn--secondary:hover{border-color:#fff;background:rgb(255 255 255/.05)}
.section--light .btn--secondary,.section--gray .btn--secondary{color:var(--tl1);border-color:var(--tl1)}
.section--light .btn--secondary:hover,.section--gray .btn--secondary:hover{background:var(--g-50)}
.btn--ghost{background:none;padding:0 6px;height:auto;color:var(--red-400);text-transform:none;font-size:17px;font-weight:400}
.btn--ghost::after{content:"→";font-weight:400;transition:transform .18s}
.btn--ghost:hover::after{transform:translateX(4px)}
.section--light .btn--ghost,.section--gray .btn--ghost{color:var(--red-700)}
.btn--lg{height:52px;padding:0 26px;font-size:16px}
.btn--sm{height:38px;padding:0 14px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* Phones: a label wider than its column (RU «Могу ли я выбрать свою мастерскую?», «Бесплатная
   оценка по фото» at --lg padding) wraps instead of pushing the section past the viewport —
   the RU city pages scrolled sideways at 375px until 05.10.2026. One-line labels keep their size. */
@media(max-width:560px){
  .btn-row .btn{max-width:100%;white-space:normal;line-height:1.25;text-align:center}
  .btn-row .btn:not(.btn--ghost){height:auto;min-height:45px;padding-top:12px;padding-bottom:12px}
  .btn-row .btn--lg{min-height:52px}
  .btn-row .btn--sm{min-height:38px;padding-top:9px;padding-bottom:9px}
  .btn-row .btn--ghost{text-align:left}
}

/* ---------- Utility bar ---------- */
.utilbar{background:var(--g-950);border-bottom:1px solid var(--hl);font:13px/1 var(--fb);color:var(--td3);position:relative;z-index:60}
.utilbar .container{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.utilbar b{color:var(--td2)}
.utilbar .u-l{display:flex;gap:20px;align-items:center;min-width:0;overflow:hidden;white-space:nowrap}
.utilbar .u-l:last-child{flex-shrink:0}
.utilbar a{color:var(--td2);text-decoration:none}
.utilbar a:hover{color:#fff}
.lang a,.lang span{display:inline-block;padding:3px 7px;border-radius:var(--r1)}
.lang .on{background:var(--s3);color:#fff}
.lang [aria-disabled="true"]{opacity:.55}
@media(max-width:700px){.utilbar .u-l > span:nth-child(2){display:none}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgb(24 24 24/.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--hl);transition:box-shadow .2s}
.header.is-scrolled{box-shadow:0 8px 30px rgb(0 0 0/.45)}
.header .container{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo img{width:52px;height:auto}
.logo .lt{font:800 16px/1.05 var(--fd);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.logo .lt small{display:block;font:700 8.5px/1 var(--fb);letter-spacing:.3em;color:var(--red-400);margin-top:4px}
.nav{display:flex;height:100%;margin-left:6px}
.nav>li{position:relative;display:flex}
.nav>li>a{position:relative;display:flex;align-items:center;gap:6px;padding:0 12px;font:400 16px var(--fb);letter-spacing:-.5px;text-transform:uppercase;color:var(--td2);text-decoration:none;white-space:nowrap;transition:color .15s}
.nav>li>a:hover,.nav>li>a[aria-current="page"]{color:#fff}
.nav>li>a::after{content:"";position:absolute;bottom:20px;left:12px;height:2px;width:0;background:var(--red-600);transition:width .3s}
.nav>li>a:hover::after{width:30px}
.nav>li>a[aria-current="page"]::after{width:30px}
.nav .caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.hdr-cta{margin-left:auto;display:flex;gap:10px;align-items:center;flex:none}
.hdr-phone{display:inline-flex;align-items:center;gap:9px;font:700 15px var(--fb);color:#fff;text-decoration:none;border:1.5px solid var(--bd);border-radius:5px;height:45px;padding:0 15px;white-space:nowrap;transition:border-color .18s}
.hdr-phone:hover{border-color:var(--g-500)}
.hdr-phone svg{width:16px;height:16px;color:var(--red-400)}
.menu-btn{display:none;background:none;border:1.5px solid var(--bd);border-radius:var(--r2);width:46px;height:46px;color:#fff;align-items:center;justify-content:center}

/* mega menu — centred on the header container, not on «Services»: centred on the item, the
   1080px panel ran off the right edge wherever longer labels push the item right (RU: 1535px
   of page width at 1440, 05.10.2026), and a hidden panel still widens the page. */
.header .container{position:relative}
.nav>li.has-mega{position:static}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);width:min(1080px,94vw);background:var(--s2);border:1px solid var(--bd);border-radius:var(--r3);box-shadow:0 30px 70px rgb(0 0 0/.55);display:grid;grid-template-columns:1.1fr 1fr 1fr .95fr;padding:26px;gap:0;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.nav li:hover>.mega,.nav li:focus-within>.mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega .col{padding:0 22px;border-left:1px solid var(--bd)}
.mega .col:first-child{border-left:none;padding-left:0}
.mega h4{font:800 12px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--red-400);margin:0 0 13px}
.mega a{display:block;font:300 16px/1.45 var(--fb);color:var(--td2);text-decoration:none;padding:6px 0;transition:color .12s}
.mega a:hover{color:#fff}
.mega .feat{margin-top:14px;background:var(--s3);border:1px solid var(--bd);border-radius:var(--r2);padding:14px 15px;color:var(--td1);font:700 13.5px/1.45 var(--fb)}
.mega .feat small{display:block;font:400 12px var(--fb);color:var(--td3);margin-top:4px}
.mega .feat:hover{border-color:var(--red-600)}

/* mobile nav */
.mobnav{display:none;position:fixed;inset:0;top:0;background:rgb(13 13 13/.98);z-index:80;padding:24px;overflow-y:auto}
.mobnav.open{display:block}
.mobnav .mn-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.mobnav h4{font:800 12px/1 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--red-400);margin:26px 0 8px}
.mobnav a{display:block;font:700 19px/1.3 var(--fb);color:var(--td1);text-decoration:none;padding:8px 0}
.mobnav a small{color:var(--td3);font-weight:400}
.mobnav .btn{width:100%;margin-top:18px}
/* `.mobnav a` (block, 19px, left-aligned, 8px 0) outranks `.btn` on specificity, so
   the two CTAs at the bottom of the drawer rendered as plain menu links: text flush
   left, uneven heights. Restore the button geometry with a more specific selector. */
.mobnav a.btn{display:flex;align-items:center;justify-content:center;text-align:center;height:54px;padding:0 18px;
  font:700 17px/1 var(--fd);letter-spacing:.02em;margin-top:12px}
.mobnav a.btn--primary{margin-top:28px}

/* sticky mobile CTA */
/* Two equal buttons since 07.10.2026: «Call» was a small icon beside the estimate and
   most ad visitors are on a phone. Directions stay in the header, contact page and footer. */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--bd);background:var(--s1)}
.stickybar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 10px;border-radius:var(--r1);font:800 15px/1.1 var(--fb);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;text-align:center}
.stickybar a svg{width:20px;height:20px;flex:none}
.stickybar a.call{background:#fff;color:var(--g-950,#111)}
.stickybar a.main{background:var(--red-600);color:#fff}
@media(max-width:1400px){
  .logo .lt{display:none}
  .nav>li>a{padding:0 10px}
  .nav>li>a::after{left:10px}
}
/* RU labels run wider than EN, so between 1401px and ~1630px the header CTA hung past the
   right edge and every RU page scrolled sideways (95px at 1440, found 05.10.2026); the
   container stops growing at 1240px, so wider screens absorb it. Same relief as ≤1400. */
@media(max-width:1700px){
  html[lang="ru"] .logo .lt{display:none}
  html[lang="ru"] .nav>li>a{padding:0 10px}
  html[lang="ru"] .nav>li>a::after{left:10px}
}
@media(max-width:1180px){
  .nav{display:none}.hdr-phone .num{display:none}.hdr-phone{padding:0 14px}
  .menu-btn{display:inline-flex}
  .stickybar{display:grid}
  body{padding-bottom:72px}
  .hdr-cta .btn--primary{display:none}
  .logo .lt{display:block}
}
@media(max-width:1080px){
  body{font-size:17px;line-height:1.7}
}
@media(max-width:360px){.header .logo .lt small{display:none}}

/* ---------- Hero (home) ---------- */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:center;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .bg img{width:100%;height:100%;object-fit:cover;animation:heroZoom 14s ease-out forwards}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgb(13 13 13/.96) 0%,rgb(13 13 13/.78) 46%,rgb(13 13 13/.42) 100%),linear-gradient(0deg,rgb(13 13 13/.55) 0%,transparent 30%,transparent 72%,rgb(13 13 13/.65) 100%)}
.hero .container{padding-top:70px;padding-bottom:152px}
/* .hero-stats is absolutely positioned over the bottom of the hero, so the
   real breathing room is padding-bottom minus its height — 111px wide, but
   163px once it wraps to 2x2 under 860px. A single padding left the offer
   slab 9px from the divider on desktop and 43px *behind* the strip on a
   phone, so the mobile value is set from the taller strip. */
@media(max-width:860px){.hero .container{padding-bottom:205px}}
.hero h1{font-size:clamp(36px,5vw,64px);font-weight:900;text-transform:uppercase;line-height:1.17;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--red-400)}
.hero .lead{margin:24px 0 34px;color:#E9E5E3;text-shadow:0 1px 14px rgb(0 0 0/.45)}
/* The free-wash offer sits on the first screen, right under the CTAs: it is the
   one perk no competitor in the local pack advertises, and it reads as a reason
   to send the estimate rather than as decoration. Deliberately quieter than the
   buttons — a tinted slab, not a third CTA competing with them. */
.hero-perk{display:inline-flex;align-items:center;gap:11px;margin:14px 0 0;padding:14px 22px 14px 17px;
  background:rgb(250 250 250/.94);border-radius:var(--r2);box-shadow:0 6px 22px rgb(0 0 0/.34);
  font:800 17px/1.25 var(--fd);letter-spacing:.01em;color:var(--tl1)}
.hero-perk svg{width:22px;height:22px;flex:none;color:var(--red-600)}
@media(max-width:520px){.hero-perk{font-size:15px;padding:12px 16px 12px 13px;gap:9px;margin-top:12px}
  .hero-perk svg{width:19px;height:19px}}
.hero-anim>*{opacity:0;transform:translateY(26px);animation:rise .45s cubic-bezier(.2,.7,.2,1) forwards}
.hero-anim>*:nth-child(2){animation-delay:.07s}
.hero-anim>*:nth-child(3){animation-delay:.14s}
.hero-anim>*:nth-child(4){animation-delay:.21s}
.hero-anim>*:nth-child(5){animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* stats under hero */
.hero-stats{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgb(13 13 13/.85),rgb(13 13 13/.55));backdrop-filter:blur(8px);border-top:1px solid rgb(255 255 255/.08)}
.hero-stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:0}
.stat{padding:22px 26px 24px;border-left:1px solid rgb(255 255 255/.08)}
.stat:first-child{border-left:none}
.stat b{display:block;font:900 30px/1 var(--fd);font-variant-numeric:tabular-nums}
.stat>span{font:12.5px/1.4 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--td3)}
@media(max-width:860px){.hero-stats .container{grid-template-columns:1fr 1fr}.stat{padding:14px 18px}.stat b{font-size:24px}}

/* page hero (inner pages) */
.page-hero{position:relative;isolation:isolate;padding:96px 0 72px;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;z-index:-2}
.page-hero .bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgb(13 13 13/.95) 10%,rgb(13 13 13/.7) 55%,rgb(13 13 13/.45) 100%)}
.page-hero h1{font-size:clamp(34px,4.4vw,60px);font-weight:900;text-transform:uppercase;line-height:1.2;max-width:18ch}
.page-hero h1 em{font-style:normal;color:var(--red-400)}
/* service and city pages: the eyebrow line is the H1, the slogan a styled paragraph */
.page-hero h1.eyebrow{font:400 15px/1.35 var(--fb);text-transform:uppercase;max-width:none}
.page-hero .hero-h{margin:0;font-family:var(--fd);font-size:clamp(34px,4.4vw,60px);font-weight:900;text-transform:uppercase;line-height:1.2;max-width:18ch;text-wrap:balance}
.page-hero .hero-h em{font-style:normal;color:var(--red-400)}
.page-hero .lead{margin-top:18px}
.page-hero .btn-row{margin-top:30px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:300 15px/1.3 var(--fb);color:var(--td3);margin-bottom:22px}
.crumbs a{color:var(--td2);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs li:not(:first-child)::before{content:"/";margin-right:8px;color:var(--td3)}
.crumbs li:last-child{color:var(--red-400)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.svc{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:26px 24px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
.svc:hover{background:var(--s3);transform:translateY(-3px)}
.svc .ico{width:30px;height:30px;stroke:var(--red-400);fill:none;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:21px;font-weight:800}
.svc p{font:300 16px/1.6 var(--fb);color:var(--td2)}
.svc .more{margin-top:auto;font:400 15px var(--fb);color:var(--red-400)}
.svc .more::after{content:" →"}

/* group card (3 больших направления) */
.gcard{position:relative;border-radius:var(--r3);overflow:hidden;min-height:380px;display:flex;align-items:flex-end;text-decoration:none;isolation:isolate;border:1px solid var(--bd)}
.gcard img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gcard:hover img{transform:scale(1.05)}
.gcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(13 13 13/.93) 12%,rgb(13 13 13/.25) 60%,rgb(13 13 13/.1))}
.gcard .in{padding:26px}
.gcard .tag{display:inline-block;font:700 10.5px/1 var(--fb);letter-spacing:.09em;text-transform:uppercase;background:var(--red-600);color:#fff;border-radius:999px;padding:6px 12px;margin-bottom:12px}
.gcard h3{font-size:24px;text-transform:uppercase;font-stretch:106%}
.gcard p{color:var(--td2);font:300 16px/1.55 var(--fb);margin-top:8px}
.gcard .more{display:inline-block;margin-top:14px;font:400 15px var(--fb);color:var(--red-400)}
.gcard .more::after{content:" →"}

/* package card */
.pkg{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:28px 26px;display:flex;flex-direction:column;gap:14px;position:relative}
.pkg--featured{border-color:var(--red-600);box-shadow:inset 0 3px 0 var(--red-600)}
.pkg .tag{position:absolute;top:-12px;left:22px;background:var(--red-600);color:#fff;font:700 10.5px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:7px 13px}
.pkg h3{font-size:21px}
.pkg .price{font:900 36px/1 var(--fd);font-variant-numeric:tabular-nums;font-stretch:105%}
.pkg .price small{display:block;font:400 13px/1.4 var(--fb);color:var(--td3);margin-top:7px;text-transform:none;letter-spacing:0}
.pkg ul{display:grid;gap:8px;font:300 16px/1.55 var(--fb);color:var(--td2)}
.pkg li{padding-left:24px;position:relative}
.pkg li::before{content:"✓";position:absolute;left:0;color:var(--red-400);font-weight:900}
.pkg .war{display:flex;align-items:center;gap:9px;font:700 13px var(--fb);color:var(--td1);background:var(--red-950);border-radius:var(--r1);padding:10px 13px}
.pkg .btn{width:100%;margin-top:auto}

/* ---------- Stats band / counters ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden}
.stats-band .stat{background:var(--s2);border-left:1px solid var(--bd);padding:26px 28px}
.stats-band .stat:first-child{border-left:none}
@media(max-width:860px){.stats-band{grid-template-columns:1fr 1fr}.stats-band .stat:nth-child(3){border-left:none}}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;counter-reset:st}
.step-i{position:relative}
.step-i::before{counter-increment:st;content:counter(st,decimal-leading-zero);font:900 30px/1 var(--fd);color:var(--red-400);font-variant-numeric:tabular-nums}
.step-i::after{content:"";position:absolute;top:15px;left:64px;right:0;height:1.5px;background:var(--bd)}
.step-i:last-child::after{display:none}
.step-i h3{font-size:19px;margin:14px 0 7px}
.step-i p{font:300 16px/1.6 var(--fb);color:var(--td2)}
.section--light .step-i p,.section--gray .step-i p{color:var(--tl2)}
.section--light .step-i::after,.section--gray .step-i::after{background:var(--line)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step-i::after{display:none}}

/* ---------- Before / After ----------
   Оба слоя — одинаковые полноразмерные картинки одного кадра;
   верхний (before) режется clip-path — идеальное выравнивание при движении. */
.ba{position:relative;border-radius:var(--r3);overflow:hidden;user-select:none;touch-action:none;aspect-ratio:16/9;background:var(--s2);border:1px solid var(--bd);cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .lbl{position:absolute;top:14px;font:700 11px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;background:rgb(0 0 0/.62);color:#fff;border-radius:999px;padding:8px 13px;z-index:2;pointer-events:none}
.ba .lbl--before{left:14px}.ba .lbl--after{right:14px}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;z-index:2;box-shadow:0 0 12px rgb(0 0 0/.7);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:999px;background:var(--red-600);color:#fff;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 4px 16px rgb(0 0 0/.55);cursor:ew-resize;transition:transform .12s}
.ba:hover .knob{transform:translate(-50%,-50%) scale(1.06)}
.ba .knob svg{width:22px;height:22px}
.ba.nudge{animation:baNudge 1.6s ease .35s 1}
@keyframes baNudge{0%,100%{--pos:50%}35%{--pos:63%}70%{--pos:44%}}
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.ba-cap{margin-top:12px;font:300 15px/1.5 var(--fb);color:var(--td3)}
/* Single slider in a block that used to hold two — centred and capped so it
   does not stretch to full container width and dwarf the rest of the page. */
.ba-solo{max-width:680px;margin-inline:auto}
.section--light .ba-cap,.section--gray .ba-cap{color:var(--tl3)}

/* ---------- Badges / logos ---------- */
.badges{display:flex;flex-wrap:wrap;gap:12px}
.bdg{border:1px solid var(--bd);border-radius:var(--r1);padding:13px 20px;font:800 14px/1 var(--fd);letter-spacing:.06em;color:var(--td2);background:var(--s2);text-align:center}
.bdg em{font-style:normal;display:block;font:400 9.5px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--td3);margin-top:6px}
.badge-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;border-top:1px solid var(--hl);border-bottom:1px solid var(--hl)}
.badge-strip .bdg{background:none;border:none;padding:6px 0}
/* Wrapping by content length left the six badges in a ragged 1-1-2-2 stack on a
   375px screen — the two with the longest sub-labels each claimed a row. A fixed
   2x3 grid holds regardless of how long the strings get, which matters because
   the Russian labels run about a third wider than the English ones. */
@media(max-width:640px){
  .badge-strip{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;justify-items:center}
  /* An odd badge count leaves the last one alone in the left column — the same
     ragged tail the grid above was introduced to remove. Letting the last child
     span both columns centres it instead, and stays correct whether the count is
     odd or even (on an even count the rule spans a badge that already sits alone
     on its own row only when one exists). */
  .badge-strip .bdg:last-child:nth-child(odd){grid-column:1 / -1}
  .badges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

/* ---------- Reviews ---------- */
.rate-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.rate-head .n{font:900 52px/1 var(--fd);font-variant-numeric:tabular-nums}
.stars{color:#F5B301;letter-spacing:2.5px;font-size:20px}
.rate-head .cnt{color:var(--td2);font-size:15px}
.rev{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:22px}
.rev .stars{font-size:13.5px}
.rev p{font:300 17px/1.65 var(--fb);color:var(--td2);margin:11px 0 15px}
.rev .who{display:flex;align-items:center;gap:11px;font:700 14px var(--fb)}
.rev .who i{font-style:normal;width:34px;height:34px;flex:none;border-radius:999px;background:var(--red-600);color:#fff;display:flex;align-items:center;justify-content:center;font:800 13px var(--fd)}
.rev .who small{display:block;font:400 12px var(--fb);color:var(--td3);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--bd)}
.faq details{border-bottom:1px solid var(--bd)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 2px;font:700 19px/1.4 var(--fb)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 30px/1 var(--fd);color:var(--red-400);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2px 20px;font:300 17px/1.7 var(--fb);color:var(--td2);max-width:62ch}
.section--light .faq,.section--light .faq details{border-color:var(--line)}
.section--light .faq .a{color:var(--tl2)}
.section--light .faq summary::after{color:var(--red-600)}

/* ---------- CTA band ---------- */
.cta-band{border-radius:var(--r3);background:linear-gradient(115deg,var(--red-950) 0%,var(--s1) 65%);border:1px solid var(--bd);padding:44px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:space-between;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:radial-gradient(circle,rgb(217 0 6/.28),transparent 65%)}
.cta-band h2{font-size:clamp(24px,3vw,34px);font-weight:900;text-transform:uppercase;font-stretch:106%;max-width:24ch}
.cta-band h2 em{font-style:normal;color:var(--red-400)}
.cta-band p{color:var(--td2);margin-top:10px;max-width:52ch}
.fin{border:1px solid var(--bd);border-radius:var(--r3);background:var(--s1);padding:32px 36px;display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center}
.fin h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;text-transform:uppercase;font-stretch:106%;max-width:28ch;text-wrap:balance}
.fin p{color:var(--td2);margin-top:10px;max-width:62ch}
.fin .eyebrow{margin:0 0 12px}
.fin .fin-small{font-size:13px;line-height:1.5;color:var(--td3);margin-top:14px}
.fin .fin-small a{color:var(--td2);text-decoration:underline}
.fin-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.fin-logos{display:flex;gap:12px;flex-wrap:wrap}
.fin-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--r2);padding:10px 16px;height:60px}
.fin-logo img{height:40px;width:auto}
@media(max-width:760px){
  .fin{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .fin-side,.fin .btn-row{min-width:0;max-width:100%}
  .fin .btn{max-width:100%;height:auto;min-height:45px;padding:12px 18px;white-space:normal;line-height:1.25;text-align:center}
}

/* ---------- Gallery ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{border:1.5px solid var(--bd);background:none;color:var(--td2);border-radius:999px;height:40px;padding:0 18px;font:700 13px var(--fb);letter-spacing:.03em;transition:all .15s}
.chip:hover{border-color:var(--g-500);color:#fff}
.chip.on{background:var(--red-600);border-color:var(--red-600);color:#fff}
.gal{columns:3;column-gap:14px}
.gal figure{margin:0 0 14px;border-radius:var(--r2);overflow:hidden;position:relative;cursor:zoom-in;break-inside:avoid;border:1px solid var(--bd)}
.gal img{width:100%;height:auto;transition:transform .4s}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font:700 12.5px var(--fb);color:#fff;background:linear-gradient(0deg,rgb(0 0 0/.75),transparent);opacity:0;transition:opacity .2s}
.gal figure:hover figcaption{opacity:1}
@media(max-width:900px){.gal{columns:2}}
@media(max-width:560px){.gal{columns:1}}
.lightbox{position:fixed;inset:0;z-index:90;background:rgb(0 0 0/.92);display:none;align-items:center;justify-content:center;padding:34px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:88vh;border-radius:var(--r2)}
.lightbox .x{position:absolute;top:22px;right:26px;background:none;border:none;color:#fff;font:300 40px/1 var(--fd)}

/* ---------- Video facade (see components/video_embed.html.twig) ----------
   The clips are 1080x1920 Shorts, so the box is 9/16 and capped at 340px —
   a full-width 16:9 frame would show them as a letterboxed stripe. The
   iframe is injected by waxman.js on click and inherits this same box. */
.ytlite{position:relative;width:100%;max-width:340px;aspect-ratio:9/16;border-radius:var(--r3);overflow:hidden;border:1px solid var(--bd);background:#0d0d0d}
.ytlite img,.ytlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytlite img{object-fit:cover}
.ytlite__play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;background:rgb(0 0 0/.18);border:0;cursor:pointer;transition:background .2s}
.ytlite__play:hover,.ytlite__play:focus-visible{background:rgb(0 0 0/.34)}
.ytlite__play svg{width:68px;height:48px;fill:rgb(232 68 58/.92);filter:drop-shadow(0 2px 8px rgb(0 0 0/.5));transition:transform .2s}
.ytlite__play:hover svg{transform:scale(1.08)}
.ytlite.on .ytlite__play{display:none}
/* Horizontal long-form: full container width, 16:9, capped so the poster's
   largest needed variant stays the 1200w one on 2x screens. */
.ytlite--wide{max-width:960px;aspect-ratio:16/9;margin-inline:auto}
/* Chapter list under a long-form video — the same timestamps as the YouTube description.
   It sits in a default (dark) section, hence the --td* text tokens. */
.vchap{max-width:960px;margin:22px auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px}
.vchap li{display:grid;grid-template-columns:3.2em minmax(0,1fr);font:500 15px/1.4 var(--fb);color:var(--td2)}
.vchap__t{font:700 14px/1.4 var(--fb);color:var(--red-400);font-variant-numeric:tabular-nums}
.vchap__note{max-width:960px;margin:14px auto 0;font:400 14px/1.5 var(--fb);color:var(--td3)}
@media (max-width:760px){.vchap{grid-template-columns:minmax(0,1fr)}}

/* ---------- Forms ---------- */
.form-card{min-width:0;background:#fff;color:var(--tl1);border-radius:var(--r3);box-shadow:var(--sh-lg);padding:34px 32px}
.fsteps{display:flex;align-items:center;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.fstep{display:flex;align-items:center;gap:9px;font:700 13px var(--fb);color:var(--tl3)}
.fstep i{font-style:normal;width:28px;height:28px;flex:none;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--g-300);font:700 12.5px var(--fb)}
.fstep.done i{background:var(--red-600);border-color:var(--red-600);color:#fff}
.fstep.act{color:var(--tl1)}
.fstep.act i{border-color:var(--red-600);color:var(--red-700)}
.fsteps .fbar{flex:1;height:1.5px;background:var(--line);min-width:20px}
.field{margin-bottom:18px}
.field>label{display:block;font:700 13.5px/1 var(--fb);margin-bottom:8px}
.field>label small{color:var(--tl3);font-weight:400}
.vin-intake{padding:18px 18px 16px;margin-bottom:18px;border:1px solid var(--g-300);border-radius:var(--r2);background:var(--g-50)}
.vin-intake__intro{font:700 16px/1.4 var(--fb);margin-bottom:14px}
.vin-intake .field{margin-bottom:12px}
.vin-intake__actions{display:none;gap:10px;flex-wrap:wrap}
.js .vin-intake__actions{display:flex}
.vin-intake__actions .btn--secondary{color:var(--tl1);border-color:var(--g-400)}
.vin-intake__status{font:13px/1.45 var(--fb);color:var(--tl2);margin-top:12px}
.vin-intake__status[data-state="error"]{color:var(--err)}
.vin-intake__status[data-state="success"]{color:var(--ok)}
.vin-intake__divider{font:700 13px/1.4 var(--fb);color:var(--tl2);margin:18px 0 12px}
.fpane--vin{position:relative}
.vin-step__overlay{position:absolute;inset:-8px;z-index:5;display:flex;align-items:center;justify-content:center;padding:18px;border:1px solid var(--g-300);border-radius:var(--r2);background:rgb(255 255 255/.88);backdrop-filter:blur(4px);animation:vinOverlayIn .2s ease-out}
.vin-step__overlay[hidden]{display:none}
.vin-step__loader{width:min(100%,340px);padding:26px 24px 24px;border:1px solid var(--g-200);border-radius:16px;background:#fff;box-shadow:0 18px 48px rgb(24 32 43/.13);text-align:center}
.vin-step__scanner{position:relative;display:block;width:70px;height:70px;margin:0 auto 18px;overflow:hidden;border-radius:18px;background:var(--tl1);box-shadow:0 8px 20px rgb(24 32 43/.18)}
.vin-step__scanner::before{content:"";position:absolute;inset:17px 14px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px,#fff 5px 6px,transparent 6px 9px);opacity:.8}
.vin-step__scanner span{position:absolute;left:9px;right:9px;top:16px;height:3px;border-radius:3px;background:var(--red-600);box-shadow:0 0 9px var(--red-600);animation:vinScan 1.7s ease-in-out infinite alternate}
.vin-step__loader strong{display:block;font:800 18px/1.35 var(--fb);color:var(--tl1)}
.vin-step__loader p{margin:9px 0 13px;font:13px/1.5 var(--fb);color:var(--tl2)}
.vin-step__timer{display:inline-block;margin-bottom:11px;font:700 12px/1 var(--fb);color:var(--red-400);font-variant-numeric:tabular-nums}
.vin-step__track{display:block;height:4px;overflow:hidden;border-radius:4px;background:var(--red-50)}
.vin-step__track span{display:block;width:38%;height:100%;border-radius:4px;background:var(--red-600);animation:vinTrack 1.5s ease-in-out infinite alternate}
@media(max-width:640px){.vin-step__overlay{position:fixed;inset:0;z-index:100;min-height:100dvh;padding:24px 20px 90px;border:0;border-radius:0;background:rgb(255 255 255/.92)}}
@keyframes vinOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes vinScan{from{transform:translateY(0)}to{transform:translateY(33px)}}
@keyframes vinTrack{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.input,select.input,textarea.input{width:100%;height:48px;border:1.5px solid var(--g-300);border-radius:var(--r1);padding:0 14px;font:16px var(--fb);color:var(--tl1);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.input:focus{border-color:var(--red-600);box-shadow:0 0 0 3px var(--red-50)}
.selectbox{position:relative;width:100%}
.selectbox__native{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;pointer-events:none!important}
.selectbox__trigger{position:relative;width:100%;height:48px;border:1.5px solid var(--g-300);border-radius:var(--r1);padding:0 42px 0 14px;background:#fff;color:var(--tl1);font:400 16px/1 var(--fb);text-align:left;appearance:none;display:flex;align-items:center;transition:border-color .15s,box-shadow .15s,background .15s}
.selectbox__value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selectbox__trigger::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-68%) rotate(45deg);transition:transform .15s}
.selectbox__trigger:hover{border-color:var(--g-500)}
.selectbox__trigger.is-placeholder{color:var(--tl3)}
.selectbox__trigger[aria-expanded="true"]{border-color:var(--red-600);box-shadow:0 0 0 3px var(--red-50)}
.selectbox__trigger[aria-expanded="true"]::after{transform:translateY(-30%) rotate(225deg)}
.selectbox__trigger:disabled{background:var(--g-100);color:var(--tl3);cursor:not-allowed}
.selectbox__popover{position:absolute;z-index:45;top:calc(100% + 7px);left:0;right:0;min-width:100%;overflow:hidden;border:1px solid var(--g-300);border-radius:var(--r2);background:#fff;box-shadow:0 16px 36px rgb(0 0 0/.2)}
.selectbox.is-up .selectbox__popover{top:auto;bottom:calc(100% + 7px)}
.selectbox__search{display:block;width:calc(100% - 20px);height:42px;margin:10px;border:1.5px solid var(--g-300);border-radius:var(--r1);padding:0 12px;background:var(--g-50);color:var(--tl1);font:400 15px/1 var(--fb);outline:none}
.selectbox__search:focus{border-color:var(--red-600);box-shadow:0 0 0 3px var(--red-50);background:#fff}
.selectbox__list{max-height:240px;overflow-y:auto;padding:4px 0 7px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--g-400) transparent}
.selectbox__option{position:relative;display:block;width:100%;min-height:42px;border:0;padding:9px 42px 9px 14px;background:#fff;color:var(--tl1);font:400 15px/1.35 var(--fb);text-align:left}
.selectbox__option:hover,.selectbox__option.is-active{background:var(--red-50);color:var(--red-800)}
.selectbox__option[aria-selected="true"]{font-weight:700;color:var(--red-700)}
.selectbox__option[aria-selected="true"]::after{content:"✓";position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--red-600);font-weight:900}
.selectbox__option:disabled{color:var(--g-400);cursor:not-allowed;background:#fff}
.selectbox__empty{padding:14px;color:var(--tl3);font:400 14px/1.4 var(--fb);text-align:center}
.selectbox__empty[hidden],.selectbox__option[hidden]{display:none}
.frow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.frow--2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.frow,.frow--2{grid-template-columns:1fr}}
@media(max-width:640px){.selectbox__list{max-height:min(240px,42vh)}.selectbox__popover{max-height:60vh}}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:640px){.checks{grid-template-columns:1fr}}
.check{border:1.5px solid var(--g-300);border-radius:var(--r2);padding:14px 15px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;font:14px/1.45 var(--fb);transition:border-color .15s,background .15s}
.check input{margin-top:3px;accent-color:var(--red-600);width:16px;height:16px;flex:none}
.check b{display:block;font-size:15px}
.check small{color:var(--tl3)}
.check:has(input:checked){border-color:var(--red-600);background:var(--red-50)}
.drop{position:relative;border:1.5px dashed var(--g-300);border-radius:var(--r2);padding:26px;text-align:center;color:var(--tl3);font:14.5px/1.55 var(--fb);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.drag{border-color:var(--red-600);background:var(--red-50)}
.drop:focus-within{border-color:var(--red-600);box-shadow:0 0 0 3px var(--red-50)}
.drop b{color:var(--red-700)}
.drop input[type=file]{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-status{margin:7px 0 0;color:var(--tl3);font:13px/1.45 var(--fb);overflow-wrap:anywhere}
.drop-status[data-state="error"]{color:var(--err)}
.drop-skip{margin-top:6px;border:0;padding:0;background:none;color:var(--red-700);font:700 13px/1.45 var(--fb);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.drop-skip[hidden]{display:none}
.ferr{display:none;gap:7px;font:13px var(--fb);color:var(--err);margin-top:7px}
.field.bad .input,.field.bad .selectbox__trigger{border-color:var(--err);box-shadow:0 0 0 3px var(--red-50)}
.field.bad .ferr{display:flex}
.fnav{display:flex;gap:12px;margin-top:24px}
.fnav .btn{flex:1}
.fnav .btn--back{flex:0 0 120px;order:-1;background:none;border:1.5px solid var(--tl1);color:var(--tl1)}
/* Long translated labels must not set the grid card's minimum width. */
@media(max-width:640px){
  .fnav{flex-direction:column}
  .fnav .btn{flex:none;width:100%;min-width:0;height:auto;min-height:48px;padding:14px 18px;white-space:normal;line-height:1.25}
  .vin-intake__actions .btn{max-width:100%;height:auto;min-height:38px;padding:10px 14px;white-space:normal;line-height:1.25}
}
.fpane{display:block}
.js .fpane{display:none}
.js .fpane.act{display:block;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fsuccess{text-align:center;padding:34px 10px;display:none}
.fsuccess.act{display:block;animation:fadeIn .4s}
.fsuccess .ok{width:64px;height:64px;border-radius:999px;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}
.form-note{font:12.5px/1.5 var(--fb);color:var(--tl3);margin-top:14px}
/* Estimate form, 07.10.2026: one thumb-sized screen per step on a phone. */
.checks--chips{grid-template-columns:repeat(3,1fr);gap:8px}
.checks--chips .check{padding:11px 12px;align-items:center}
.checks--chips .check b{font-size:14.5px;line-height:1.25}
.checks--chips .check small{display:block;font-size:12.5px;line-height:1.35}
/* "Pick a service" sits above the chips and outlines them (12.10.2026): below the
   chips it was a screen away from the Next button on a phone. */
.field--services .ferr{margin:0 0 10px;font-weight:700;font-size:14px;line-height:1.4}
.field--services.bad .check{border-color:var(--err)}
.drop--button{padding:16px 14px;display:flex;align-items:center;justify-content:center}
.drop--button .drop-text{display:inline-flex;align-items:center;gap:10px;font:700 15px/1.3 var(--fb)}
.drop--button svg{width:24px;height:24px;color:var(--red-600);flex:none}
.car-field>label{margin-bottom:10px}
.frow--car{grid-template-columns:.85fr 1fr 1fr;gap:8px}
.frow--car .field{margin-bottom:0;min-width:0}
.frow--car .field>label{font:600 12px/1 var(--fb);color:var(--tl2);margin-bottom:6px}
.frow--car .input,.frow--car .selectbox__trigger{height:46px;padding-left:11px}
.frow--car .selectbox__trigger{padding-right:28px}
.frow--car .selectbox__trigger::after{right:11px}
.form-more{margin:12px 0 18px}
.form-more>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;font:700 14px/1.35 var(--fb);color:var(--red-700)}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border:1.5px solid currentColor;border-radius:999px;font:700 14px/1 var(--fb)}
.form-more[open]>summary::before{content:"−"}
.form-more[open]>summary{margin-bottom:14px}
.form-more .vin-intake{margin-bottom:0}
.checks--seg{grid-template-columns:1fr 1fr;gap:8px}
.checks--seg .check{padding:12px 14px;align-items:center}
.check--line{padding:12px 14px;align-items:center}
.field>label.check{display:flex;margin-bottom:0;font:14px/1.45 var(--fb)}
.check--line small{display:block}
.form-call{display:block;margin-top:16px;text-align:center;font:400 15px/1.4 var(--fb);color:var(--tl2);text-decoration:none}
.form-call b{color:var(--red-700);white-space:nowrap}
@media(max-width:760px){.checks--chips{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .form-card{padding:22px 16px}
  .fsteps{margin-bottom:18px}
  .checks--chips .check small{display:none}
  .check--line small{display:none}
  .fnav .btn--back{order:2;min-height:40px;border:0;padding:8px;color:var(--tl2);text-decoration:underline}
}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-errors{border:1px solid #d92d20;background:#fff1f0;color:#8a1c15;border-radius:var(--r1);padding:12px 14px;margin-bottom:18px;font:14px/1.45 var(--fb)}

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* .grid .media covers the bare media tiles (geo pages' photo pair, the /about/
   facility trio). Their sources mix 4:3, 1:1 and 16:9, so without a shared
   aspect the row comes out ragged; the same 4:3 cover the split sections use
   keeps any future photo tidy regardless of how it was shot. */
.split .media,.grid .media{border-radius:var(--r3);overflow:hidden;border:1px solid var(--bd)}
.split .media img,.grid .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:30px}}
.ticks{display:grid;gap:11px;margin-top:22px}
.ticks-note{font:300 17px/1.6 var(--fb);color:var(--td2)}
.section--light .ticks-note,.section--gray .ticks-note{color:var(--tl2)}
.ticks-note a{color:var(--red-600);text-decoration:underline;text-underline-offset:3px}
.section--light .ticks-note a{color:var(--red-700)}
.ticks li{padding-left:30px;position:relative;font:300 17px/1.6 var(--fb);color:var(--td2)}
.section--light .ticks li,.section--gray .ticks li{color:var(--tl2)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red-400);font-weight:900;font-size:17px}
.section--light .ticks li::before,.section--gray .ticks li::before{color:var(--red-600)}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r2)}
.tbl{border-collapse:collapse;width:100%;font:300 16px/1.55 var(--fb);min-width:560px}
.tbl th{background:var(--s2);text-align:left;font:700 12px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--td3);padding:14px 18px;border-bottom:1px solid var(--bd)}
.tbl td{padding:14px 18px;border-bottom:1px solid var(--hl);color:var(--td2)}
.tbl tr:last-child td{border-bottom:none}
.tbl td:first-child{color:var(--td1);font-weight:700}
.tbl .hi{color:var(--red-400);font-weight:700}

/* ---------- Location / NAP ---------- */
.loc-card{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r3);overflow:hidden}
.loc-card .map{position:relative;aspect-ratio:21/9;background:var(--s3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.loc-card .map:focus-visible{outline:3px solid var(--red-400);outline-offset:-3px}
.loc-card .map span{font:700 13px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--td3);display:flex;gap:9px;align-items:center}
.loc-card .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc-card .body{padding:26px 28px;display:grid;gap:12px}
.nap{display:grid;gap:9px;font:300 16.5px/1.6 var(--fb);color:var(--td2)}
.nap b{color:var(--td1)}
.nap a{color:var(--red-400);text-decoration:none}

/* ---------- Footer ---------- */
.footer{background:var(--g-950);border-top:1px solid var(--hl);padding:64px 0 0;color:var(--td3)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px}
.fgrid h4,.fgrid .fh{font:800 12px/1 var(--fd);letter-spacing:.09em;text-transform:uppercase;color:var(--td1);margin:0 0 14px}
.fgrid a,.fgrid>div>span{display:block;font:300 16px/1.5 var(--fb);color:var(--td3);text-decoration:none;padding:4px 0;transition:color .12s}
.fgrid a:hover{color:var(--td1)}
.fgrid p{font:300 15.5px/1.75 var(--fb)}
.fgrid .nap b{color:var(--td2)}
.f-legal{border-top:1px solid var(--hl);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 0;font:12.5px var(--fb)}
.f-legal a{color:var(--td3);text-decoration:none}
.f-legal a:hover{color:var(--td1)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---------- Reveal on scroll (только при работающем JS) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.1s}.js .reveal[data-d="2"]{transition-delay:.2s}.js .reveal[data-d="3"]{transition-delay:.3s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero-anim>*{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── Blog ─────────────────────────────────────────── */
.post-title{max-width:24ch}
.post-meta{font:300 16px/1.6 var(--fb);color:var(--td2);margin:14px 0 0}
/* Video explainer on a post: poster + play button; the iframe replaces the button on click */
.post-video{margin:0 0 30px}
.post-video__play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;border-radius:var(--r2);overflow:hidden;cursor:pointer}
.post-video__play img{width:100%;height:100%;object-fit:cover;display:block}
.post-video__btn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgb(217 0 6/.92);color:#fff;display:grid;place-items:center;box-shadow:0 8px 28px rgb(0 0 0/.45);transition:transform .18s}
.post-video__btn svg{width:40px;height:40px;margin-left:4px}
.post-video__play:hover .post-video__btn,.post-video__play:focus-visible .post-video__btn{transform:scale(1.07)}
.post-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r2);display:block}
.post-video figcaption{font:300 15px/1.5 var(--fb);color:var(--td2);margin-top:10px}
.post-featured{margin:0 0 30px}
.post-featured img{width:100%;height:auto;border-radius:6px}
.post-faq-title{font-weight:800;font-size:clamp(26px,3vw,38px);margin:44px 0 6px}
.post-cta{margin-top:44px;padding-top:30px;border-top:1px solid var(--g-200)}
.post-cta-lead{font-size:20px;line-height:1.6}
.post-cta .btn-row{margin-top:18px}
.post-cta-note{margin-top:14px;font:300 16px/1.5 var(--fb);color:var(--tl3)}
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 28px}
/* Cards are locked to 3:2 and the image crops to fill. Four of the five post
   photos are already 3:2, but audi-front-damage-before is 4:3 and made its card
   taller than the rest of the row. Cropping here rather than re-cutting the
   source keeps the grid even whatever ratio the next post's photo arrives in. */
.postcard-media{display:block;overflow:hidden;border-radius:6px;aspect-ratio:3/2}
.postcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.postcard:hover .postcard-media img{transform:scale(1.03)}
.postcard time{display:block;font:300 15px/1 var(--fb);color:var(--tl3);margin:16px 0 8px}
.postcard h2{font-size:24px;line-height:1.25;margin:0 0 10px}
.postcard h2 a{color:inherit;text-decoration:none;transition:color .12s}
.postcard h2 a:hover{color:var(--red-700)}
.postcard p{color:var(--tl2)}
.postcard-more{display:inline-block;margin-top:10px;font:400 16px/1 var(--fb);color:var(--red-700);text-decoration:none}
.postcard-more:hover{text-decoration:underline}

.lang-switch{display:inline-flex;gap:2px;align-items:center;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.lang-switch a,.lang-switch span{display:inline-block;padding:3px 8px;border-radius:var(--r1);color:var(--td3);text-decoration:none;font-weight:700;line-height:1;transition:color .15s,background .15s}
.lang-switch a:hover{color:#fff;background:var(--s3);text-decoration:none}
.lang-switch a:focus-visible{outline:2px solid var(--red-400);outline-offset:1px}
.lang-switch .on{background:var(--red-600);color:#fff;font-weight:900}

/* ---------- Products (Amazon) ---------- */
.pgrid{margin-top:34px}
.pcard{background:#171514;border:1px solid rgb(255 255 255/.08);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column}
.section--light .pcard{background:#fff;border-color:rgb(0 0 0/.08)}
.pcard .pimg{display:block;background:#fff;aspect-ratio:1/1}
.pcard .pimg img{width:100%;height:100%;object-fit:contain;padding:8%}
.pcard .pin{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard h3{font:800 20px/1.2 var(--fd);margin:0}
.pcard h3 a{color:inherit;text-decoration:none}
.pcard p{margin:0;font-size:15px;line-height:1.5}
.pcard .btn-row{margin-top:auto;padding-top:18px}
.pchoice{display:inline-block;align-self:flex-start;font:800 11px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red-600);padding:6px 9px;border-radius:4px}
.pavail{font-size:13px;color:#8a8480}
.pmore{margin-top:26px;font-weight:700}
.pstrip--compact{padding:10px 0 0}
.pstrip--compact .section-head,.pstrip--compact .pmore,.pstrip--compact .pavail{display:none}
.pstrip--compact .pgrid{margin-top:16px;gap:12px}
.pstrip--compact .pcard .pin{padding:12px 14px 14px}
.pblock .btn-row{margin-top:34px}
.pblock .pavail{margin-top:14px}
.pblock .container{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pblock .split--rev .pmedia{order:2}
.pblock .pmedia{background:#fff;border-radius:var(--r2);aspect-ratio:1/1;overflow:hidden}
.pblock .pmedia img{width:100%;height:100%;object-fit:contain;padding:8%}
@media(max-width:860px){.pblock .container{grid-template-columns:1fr;gap:28px}.pblock .split--rev .pmedia{order:0}}

/* before/after as two photos side by side (different camera positions) */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba-pair figure{position:relative;margin:0;border-radius:var(--r3);overflow:hidden;aspect-ratio:3/4;background:#111}
.ba-pair img{width:100%;height:100%;object-fit:cover;display:block}
.ba-pair .lbl{position:absolute;top:14px;left:14px;font:700 11px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;background:rgb(0 0 0/.72);color:#fff;padding:8px 10px;border-radius:4px}
.ba-pair .lbl--after{background:var(--red-600)}
@media(max-width:560px){.ba-pair{grid-template-columns:1fr}.ba-pair figure{aspect-ratio:4/3}}