/* ============================================================
   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)}
.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}

/* ---------- 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 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 */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);width:min(880px,92vw);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.15fr 1fr .9fr;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}

/* sticky mobile CTA */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-columns:1fr 1.35fr 1fr;border-top:1px solid var(--bd);background:var(--s1);padding-bottom:env(safe-area-inset-bottom)}
.stickybar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 12px;font:700 11px/1 var(--fb);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--td2)}
.stickybar a svg{width:18px;height:18px}
.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}
}
@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:64px}
  .hdr-cta .btn--primary{display:none}
  .logo .lt{display:block}
}
@media(max-width:1080px){
  body{font-size:17px;line-height:1.7}
}

/* ---------- 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)}
.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}

/* ---------- 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}

/* ---------- Forms ---------- */
.form-card{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}
.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{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 b{color:var(--red-700)}
.drop input{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;background:none;border:1.5px solid var(--tl1);color:var(--tl1)}
.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}
.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 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}
.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}