@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/golos-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/golos-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD}
@font-face{font-family:'Sofia XC';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/sofia-xc-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia XC';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/sofia-xc-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/caveat-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --lak:#25272A; --lak-deep:#191A1C; --lak-up:#303337;
  --shut:#0F1011; --shine:#3C3F44;
  --chalk:#ECEAE4; --sub:#B5B6B5; --line:#4A4D51; --edge:#74777C;
  --tape:#D5D0C2; --tape-2:#C7C2B3; --ink:#18191B; --ink-sub:#45443F;
  --red:#D9232D; --red-h:#B91B24; --red-tx:#FF6B6F;
  --gut:clamp(16px,3.4vw,48px); --max:1320px; --bar:64px;
  --l:var(--l1);--r:var(--r1);
  --l1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0L3 0L1 14L5 27L2 41L4 58L0 72L3 88L1 100L14 100Z'/%3E%3C/svg%3E");
  --r1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L11 0L13 12L9 29L12 43L10 60L14 74L11 86L13 100L0 100Z'/%3E%3C/svg%3E");
  --l2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0L10 0L0 100L14 100Z'/%3E%3C/svg%3E");
  --r2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L14 0L5 100L0 100Z'/%3E%3C/svg%3E");
  --l3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0L1 0L2 33L6 38L3 64L5 100L14 100Z'/%3E%3C/svg%3E");
  --r3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L12 0L13 28L8 33L11 70L9 100L0 100Z'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .03' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .19 0 0 0 0 .16 0 0 0 .55 -.14'/%3E%3C/filter%3E%3Crect width='240' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-color:var(--line) var(--lak-deep);background:var(--lak-deep)}
body{margin:0;color:var(--chalk);font:400 17px/1.5 'Golos Text',system-ui,'Segoe UI',Roboto,sans-serif;overflow-x:hidden;
  background:
    linear-gradient(112deg,#0000 8%,#ffffff12 22%,#ffffff05 30%,#0000 44%) no-repeat 0 0/100% 980px,
    var(--lak)}
::selection{background:var(--tape);color:var(--ink)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--lak-deep)}::-webkit-scrollbar-thumb{background:var(--line)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--tape);outline-offset:3px}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:9;background:var(--tape);color:var(--ink);padding:8px 12px}

/* лента */
.tape,.price,.logo,.work::before{background:var(--grain),linear-gradient(180deg,#ffffff24,#0000 22%,#0000 78%,#00000014),var(--tape);
  -webkit-mask:var(--l) left/14px 100% no-repeat,var(--r) right/14px 100% no-repeat,linear-gradient(#000 0 0) center/calc(100% - 27px) 100% no-repeat;
  mask:var(--l) left/14px 100% no-repeat,var(--r) right/14px 100% no-repeat,linear-gradient(#000 0 0) center/calc(100% - 27px) 100% no-repeat}
.tape{display:inline-block;color:var(--ink);padding:.12em .55em .1em}
h1,h2{font-family:'Sofia XC','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1;text-wrap:balance}
h1{font-size:clamp(44px,4.9vw,74px)}
h2{font-size:clamp(38px,4.4vw,64px)}
h1 .tape{transform:rotate(-.5deg);transform-origin:left;margin-left:calc(var(--gut) * -1 - 8px);padding-left:calc(var(--gut) + 14px)}
h2 .tape{transform:rotate(-.4deg)}
.panel:nth-of-type(odd) h2 .tape{--l:var(--l2);--r:var(--r3);transform:rotate(.5deg)}
.panel:nth-of-type(3n) h2 .tape{--l:var(--l3);--r:var(--r2);transform:rotate(-.8deg);margin-left:-6px}
h2{margin-bottom:clamp(24px,3vw,40px)}
h3{font-size:19px;line-height:1.3;font-weight:700}
.hand{font-family:'Caveat','Golos Text',sans-serif;font-weight:600;font-size:clamp(24px,2vw,29px);line-height:1.3;color:var(--chalk)}
.sub{color:var(--sub)}

/* зазор между панелями кузова вместо обычных разделителей */
.panel{padding-block:clamp(56px,7vw,104px);border-top:2px solid var(--shut);box-shadow:inset 0 1px 0 var(--shine)}
.panel.deep{background:var(--lak-deep)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border:0;border-radius:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:17px;transition:background .18s ease-out,color .18s ease-out}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-h)}
.btn-line{background:none;color:var(--chalk);box-shadow:inset 0 0 0 1px var(--edge)}.btn-line:hover{box-shadow:inset 0 0 0 1px var(--chalk)}
.ico{width:20px;height:20px;flex:none}

/* шапка */
.top{display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding-block:14px}
.logo{display:block;flex:none;width:212px;padding:9px 20px;--l:var(--l3);--r:var(--r2);transform:rotate(-1deg)}
.nav{display:flex;gap:clamp(14px,2vw,28px);margin-right:auto}
.nav a{text-decoration:none;color:var(--sub);font-size:16px}.nav a:hover,.nav a[aria-current]{color:var(--chalk)}
.tel{font-weight:700;text-decoration:none;white-space:nowrap}
.top .where{color:var(--sub);font-size:15px;white-space:nowrap}

/* разметка: схема и расчёт */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,372px);gap:clamp(24px,3.4vw,56px);padding-block:clamp(14px,1.8vw,26px) clamp(30px,4vw,56px);align-items:start}
.cfg-left{min-width:0}
.slogan{margin-top:18px;font-size:clamp(21px,1.75vw,26px);font-weight:700;line-height:1.25;color:var(--chalk);text-wrap:balance}
.lead{max-width:62ch;color:var(--sub);margin-top:14px}
.slogan+.lead{margin-top:8px}
.car-box{position:relative;margin-top:clamp(10px,1.6vw,20px);aspect-ratio:1000/440;margin-right:clamp(-96px,-5vw,-24px);margin-left:-8px}
.car{display:block;width:100%;height:auto;overflow:visible}
.car .z{fill:#ffffff08;stroke:#ffffff55;stroke-width:1.2;transition:fill .34s cubic-bezier(.16,1,.3,1) var(--d,0ms),stroke .34s ease-out var(--d,0ms)}
.car .z.on{fill:var(--red);stroke:#ffb9bb}
.car .z.g{fill:#0d0e10}
.car .z.g.on{fill:var(--red)}
.car .wheel{fill:#0d0e10}
.car .lbl{font:600 25px 'Caveat','Golos Text',sans-serif;fill:var(--chalk);transition:opacity .25s ease-out}
.car .lead-l{stroke:var(--chalk);stroke-width:1.2;fill:none;stroke-linecap:round}
.car .off{opacity:.62}

/* фото машины: слои плёнки ложатся одним фронтом от носа к корме */
@property --p{syntax:'<percentage>';inherits:false;initial-value:-14%}
.car-photo{aspect-ratio:2/1;margin-right:calc(clamp(24px,3.4vw,56px) * -1 + 10px);margin-left:-8px}
.c-base{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.c-z{position:absolute;max-width:none;--p:-14%;-webkit-mask:linear-gradient(90deg,#000 calc(var(--p) - 12%),#0000 var(--p));mask:linear-gradient(90deg,#000 calc(var(--p) - 12%),#0000 var(--p));transition:--p var(--t,400ms) linear var(--d,0ms),opacity .2s ease-out,filter .2s ease-out}
.c-z.on{--p:114%}
.c-z.peek{--p:114%;transition:--p .22s linear,opacity .2s ease-out,filter .2s ease-out}
.c-z.peek:not(.on){opacity:.6}
.c-z.peek.on{filter:brightness(1.16)}
.c-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(../img/car/silhouette.png) center/100% 100% no-repeat;mask:url(../img/car/silhouette.png) center/100% 100% no-repeat}
.c-sweep i{position:absolute;top:0;bottom:0;left:0;width:9%;opacity:0;mix-blend-mode:screen;background:linear-gradient(90deg,#0000,#ffffff26 62%,#ffffffd9 92%,#0000)}
.c-lab{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.c-l{opacity:0;transition:opacity .22s ease-out var(--d,0ms)}
.c-l.show{opacity:1}
.c-l path{fill:none;stroke:var(--chalk);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 1px 1px #000a);transition:stroke-dashoffset .34s ease-out var(--d,0ms)}
.c-l.show path{stroke-dashoffset:0}
.c-l circle{fill:var(--chalk)}
.c-l text{font:600 44px 'Caveat','Golos Text',sans-serif;fill:var(--chalk)}
.c-cap{display:flex;flex-wrap:wrap;gap:2px 24px;justify-content:space-between;align-items:baseline;margin-top:8px;font-size:16px;min-height:1.5em}
.c-cap b{font-weight:600}
.c-cap small{font-size:14px;color:var(--sub);margin-left:auto}
.car-photo.is-glass{cursor:pointer}

.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:clamp(12px,1.4vw,18px) 0 0;border:0;padding:0;min-width:0}
.packs legend{position:absolute;left:-999px}
.pack{position:relative;cursor:pointer;display:block}
.pack input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pack span{display:block;height:100%;padding:12px 16px 11px;box-shadow:inset 0 0 0 1px var(--edge);transition:background .18s ease-out}
.pack b{display:block;font:800 clamp(25px,2.4vw,33px)/1 'Sofia XC','Arial Narrow',sans-serif;text-transform:uppercase}
.pack i{font-style:normal;display:block;font-size:15px;color:var(--sub);margin-top:4px}
.pack:hover span{background:var(--lak-up)}
.pack input:checked+span{background:linear-gradient(180deg,var(--tape),var(--tape-2));color:var(--ink);box-shadow:none}
.pack input:checked+span i{color:var(--ink-sub)}
.pack input:focus-visible+span{outline:2px solid var(--tape);outline-offset:3px}
.extra{display:flex;align-items:center;gap:12px;margin-top:14px;cursor:pointer;width:fit-content}
.extra input{appearance:none;width:24px;height:24px;margin:0;box-shadow:inset 0 0 0 1px var(--chalk);display:grid;place-items:center;cursor:pointer}
.extra input:checked{background:var(--red);box-shadow:none}
.extra input:checked::after{content:'';width:12px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}

.sheet{padding-top:clamp(0px,1vw,10px)}
.price{display:inline-block;--l:var(--l1);--r:var(--r3);color:var(--ink);padding:.1em .34em .06em;transform:rotate(-.6deg);font:800 clamp(52px,5.4vw,76px)/.95 'Sofia XC','Arial Narrow',sans-serif;font-variant-numeric:tabular-nums}
.price small{font:inherit;font-size:.5em;color:var(--ink-sub);font-weight:700;margin-right:.14em}
.rub{height:.74em;width:auto;margin-left:.12em;vertical-align:-.03em;fill:none;stroke:currentColor;stroke-width:15}
.rub-s{height:.72em;margin-left:0;vertical-align:-.02em;stroke-width:11}
.term{margin-top:10px;font-size:16px}.term b{font-weight:600}
.incl{margin-top:12px;color:var(--sub);font-size:16px;min-height:3.2em}
.incl b{color:var(--chalk);font-weight:600}
.note{margin-top:8px;color:var(--chalk);min-height:2.6em}
.form{display:grid;gap:10px;margin-top:16px}
.field{display:block}
.field span{display:block;font-size:15px;color:var(--sub);margin-bottom:4px}
.field input{width:100%;height:52px;padding:0 14px;border:0;border-radius:0;background:var(--lak-deep);box-shadow:inset 0 0 0 1px var(--edge);caret-color:var(--red-tx)}
.field input::placeholder{color:#94969a}
.field input:hover{box-shadow:inset 0 0 0 1px var(--chalk)}
.field input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--tape)}
.field input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--red-tx)}
.err{display:none;color:var(--red-tx);font-size:15px;margin-top:4px}.err.show{display:block}
.form .btn{width:100%}
.fine{font-size:14px;color:var(--sub);line-height:1.4}
.done{display:none;padding:14px 0;border-top:1px solid var(--line)}.done.show{display:block}

/* список услуг: прайс, а не плитки */
.price-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}
.price-list a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.price-list a:hover b{color:var(--tape)}
.price-list b{font:700 clamp(27px,2.6vw,36px)/1.05 'Sofia XC','Arial Narrow',sans-serif;text-transform:uppercase;transition:color .16s ease-out}
.price-list span{font-weight:600;white-space:nowrap}
.price-list small{grid-column:1/-1;font-size:15px;color:var(--sub)}

/* работы: разный размер, подписи рукой */
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,24px) clamp(14px,2vw,24px);align-items:start}
.work{grid-column:span 4;position:relative}
.work::before{content:'';position:absolute;z-index:1;top:-9px;left:18px;width:92px;height:22px;transform:rotate(-3deg);--l:var(--l2);--r:var(--r1)}
.work:nth-child(2)::before{left:auto;right:14px;transform:rotate(2.5deg);--l:var(--l3);--r:var(--r3)}
.work.big{grid-column:span 5}
.work.low{grid-column:span 3}
.work:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.86) contrast(1.03)}
.work.tall img{aspect-ratio:3/4}
.work.top-crop img{object-position:top}
.work figcaption{margin-top:10px}
.work .what{display:block;font-weight:600;font-size:16px;margin-bottom:2px}
.work .ph{display:block;margin-top:6px;font-size:14px;color:var(--sub)}

/* правила и этапы */
.rules{display:grid;gap:0;max-width:940px}
.rules li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);padding:20px 0;border-bottom:1px solid var(--line)}
.rules b{font:700 clamp(27px,2.6vw,36px)/1.05 'Sofia XC','Arial Narrow',sans-serif;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);counter-reset:s}
.steps b{display:block;margin-bottom:6px;font-size:18px}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}

/* таблица цен */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:13px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.tbl td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.tbl caption{text-align:left;color:var(--sub);caption-side:bottom;padding-top:12px;font-size:15px}

/* отзывы */
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.revs blockquote{font-size:18px;line-height:1.45}
.revs figcaption{margin-top:12px;color:var(--sub);font-size:15px}
.revs figure:nth-child(2){margin-top:clamp(0px,3vw,44px)}

/* вопросы */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:26px;width:12px;height:12px;border:solid var(--chalk);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s ease-out}
.faq details[open] summary::after{transform:translateY(5px) rotate(-135deg)}
.faq p{padding:0 0 18px;color:var(--sub);max-width:68ch}

/* как заехать и подвал */
.find dt{color:var(--sub);font-size:15px;margin-top:16px}
.find dd{font-size:19px}
.foot{padding-block:28px calc(28px + var(--bar));font-size:15px;color:var(--sub);border-top:2px solid var(--shut)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between}
.demo-flag{color:var(--chalk)}

/* нижняя панель телефона */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;grid-template-columns:1fr 1fr;height:var(--bar);padding-bottom:env(safe-area-inset-bottom);background:var(--lak-deep);border-top:1px solid var(--line)}
.bar a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700}
.bar a+a{background:var(--red);color:#fff}

@media (max-width:1100px){
  .top{flex-wrap:wrap;row-gap:8px}.logo{order:0}.top .where{order:1;margin-left:auto}.tel{order:2}
  .nav{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-block:4px}
  .cfg{grid-template-columns:minmax(0,1fr);gap:18px}
  .car-box{margin-inline:-6px}
  .car-photo{margin-inline:calc(var(--gut) * -1)}
  .incl,.note{min-height:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .bar{display:grid}
  .foot{padding-bottom:calc(var(--bar) + 28px)}
  .logo{width:164px;padding:7px 16px}.top .where{display:none}.tel{margin-left:auto}
  .nav{gap:14px;justify-content:space-between}.nav a{font-size:15px}
  .pack span{padding:10px 8px}
  .pack i{font-size:14px}
  .car .lbl{font-size:42px}
  .c-lab{display:none}
  .c-cap{min-height:3em}.c-cap small{margin-left:0}
  .price-list{grid-template-columns:minmax(0,1fr)}
  .work,.work.big,.work.low{grid-column:span 12}
  .work:nth-child(2){margin-top:0}
  .work .hand{font-size:22px}
  .rules li{grid-template-columns:minmax(0,1fr);gap:6px}
  .revs{grid-template-columns:minmax(0,1fr)}.revs figure:nth-child(2){margin-top:0}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.c-sweep{display:none}}