/* Пит-Стоп: ретро-мойка у дороги. Тёмно-синяя эмаль, кремовые вывески, красный акцент. */
:root{
  color-scheme:dark;
  --navy:#0C2749; --navy-2:#143761; --navy-3:#1D4A7E; --navy-4:#081F3C;
  --cream:#F4EBD3; --ink:#0A1D36; --red:#D4361E;
  --bg:var(--navy); --fg:var(--cream); --muted:#B9C6DB; --line:#2D4B75;
  --accent:var(--red); --on-accent:#fff; --focus:var(--cream);
  --panel:var(--cream); --panel-fg:var(--ink);
  --radius:18px; --btn-radius:999px;
  --font-display:"Unbounded","Onest",system-ui,sans-serif;
  --font-text:"Onest",system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
}
.wrap{width:min(1180px,100%);margin-inline:auto}
section,footer,.top{padding-left:20px;padding-right:20px}
h1,h2,h3{margin:0;font-family:var(--font-display)}
h1{font-weight:800;font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h2{font-weight:800;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h3{font-weight:700;font-size:1.05rem;line-height:1.25}
p{line-height:1.6}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:2px solid var(--red);border-radius:var(--btn-radius);background:var(--red);color:#fff;font:700 1rem var(--font-text);text-decoration:none;transition:transform .16s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#B52B16;border-color:#B52B16}}
.btn-sm{min-height:46px;padding:0 20px}
.btn-wide{width:100%}
.btn-ghost{background:transparent;border-color:var(--cream);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}}

/* шапка */
.top{padding-top:14px;padding-bottom:14px}
.top-in{display:flex;align-items:center;gap:22px}
.logo{display:inline-flex;align-items:center;gap:12px;margin-right:auto;font-family:var(--font-display);font-weight:800;font-size:1.25rem;text-decoration:none}
.nav{display:flex;gap:26px}
.nav a{padding-top:10px;padding-bottom:10px;font-weight:600;text-decoration:none}
@media (hover:hover) and (pointer:fine){.nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}}
.tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none}
@media (max-width:1000px){.tel{width:46px;height:46px;justify-content:center;border:2px solid var(--cream);border-radius:50%}.tel span{display:none}}
@media (max-width:820px){.nav{display:none}}

/* первый экран */
.hero{padding-top:48px}
.hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;padding-bottom:72px}
.lead{max-width:34ch;margin:22px 0 0;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.25rem)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}}
.tape{height:20px;background:repeating-conic-gradient(var(--cream) 0 25%,var(--navy-2) 0 50%) 0 0/40px 40px}

/* табло цен */
.board{--focus:var(--ink);color:var(--ink)}
.awning{position:relative;z-index:1;height:28px;border-radius:16px 16px 0 0;background:repeating-linear-gradient(90deg,var(--red) 0 24px,var(--cream) 24px 48px)}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:radial-gradient(circle at 12px 0,var(--red) 11.5px,transparent 12px) 0 0/48px 12px repeat-x,radial-gradient(circle at 36px 0,var(--cream) 11.5px,transparent 12px) 0 0/48px 12px repeat-x}
.board-in{padding:34px 24px 24px;border-radius:0 0 var(--radius) var(--radius);background:var(--cream)}
.board-t{margin:0;font:800 1.15rem var(--font-display);letter-spacing:-.01em}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px;padding:0;border:0}
.seg label{position:relative}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:.95rem;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.seg input:checked+span{background:var(--ink);color:var(--cream)}
.seg input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.seg label:active span{transform:scale(.97)}
.rows{margin:10px 0 0;padding:0;list-style:none}
.rows li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;padding-bottom:14px;border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.rows li:first-child{border-top:0}
.rows .nm b{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.3}
.rows .nm span{font-size:.9rem;opacity:.8}
.price{display:inline-flex;align-items:center;gap:3px;flex:none;perspective:320px;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2.1vw,1.55rem)}
.tile{position:relative;display:inline-grid;place-items:center;width:.96em;height:1.25em;border-radius:6px;background:var(--ink);color:var(--cream);transform-origin:50% 50%;backface-visibility:hidden}
.tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.55)}
.tile.flip{animation:flip .3s var(--ease) var(--d,0ms) both}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}
.cur{margin-left:4px;font-family:var(--font-text);font-weight:700;font-size:.8em}
@media (max-width:420px){.rows li{flex-wrap:wrap}.price{margin-left:auto}}

/* маршрут */
.route{padding-top:112px;padding-bottom:112px}
.route-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.route-head{position:sticky;top:96px}
.route-head p{max-width:32ch;margin:18px 0 0;color:var(--muted);font-size:1.1rem}
.stops{position:relative;margin:0;padding:0;list-style:none}
.stops::before{content:"";position:absolute;left:38px;top:40px;bottom:40px;width:4px;background:repeating-linear-gradient(var(--cream) 0 14px,transparent 14px 26px);opacity:.5}
.stops li{display:grid;grid-template-columns:80px 1fr;gap:24px;align-items:center;padding-top:14px;padding-bottom:14px}
.min{position:relative;z-index:1;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--cream);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:.95rem;line-height:1.1;text-align:center}
.stops h3{font-size:1.15rem}
.stops p{margin:6px 0 0;max-width:46ch;color:var(--muted)}
@media (max-width:860px){.route-in{grid-template-columns:1fr}.route-head{position:static}}

/* было и стало */
.ba{padding-top:86px;padding-bottom:86px;background:var(--navy-4)}
.ba-sub{max-width:58ch;margin:14px 0 28px;color:var(--muted)}
.ba-stage{--p:50%;position:relative;aspect-ratio:16/7;border-radius:var(--radius);overflow:hidden;background:var(--navy-3);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:#0A1E38}
.ba-layer{position:absolute;inset:0;display:grid;place-items:center}
.ba-layer svg{width:min(80%,840px);height:auto;aspect-ratio:520/190;margin-top:5%;--car-body:#D4361E;--car-shade:#8a2110;--car-glass:#14243A;--car-rim:#D8DEE8}
.ba-dirty{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);display:grid;place-items:center;width:52px;margin-left:-26px;cursor:ew-resize;touch-action:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--cream)}
.ba-handle span{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--cream);color:var(--ink)}
.ba-handle:focus-visible{outline:0}
.ba-handle:focus-visible span{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 3px var(--navy)}
.ba-cap{display:flex;justify-content:space-between;margin-top:14px;color:var(--muted);font-weight:700}
@media (max-width:640px){.ba-stage{aspect-ratio:4/3}.ba-layer svg{width:92%}}

/* комплексы */
.packs{padding-top:112px;padding-bottom:112px}
.packs-sub{margin:14px 0 26px;color:var(--muted)}
.tbl-wrap{--focus:var(--ink);overflow-x:auto;padding:6px 12px;border-radius:var(--radius);background:var(--cream);color:var(--ink)}
table{width:100%;min-width:640px;border-collapse:collapse}
th,td{padding:16px 18px;text-align:center;vertical-align:middle}
thead th{box-shadow:inset 0 -3px 0 var(--ink);font-family:var(--font-display);font-weight:700;font-size:.95rem}
tbody th{font-weight:600;font-size:1rem;text-align:left}
tbody tr+tr>*{border-top:1px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
th:first-child{position:sticky;left:0;background:var(--cream);text-align:left}
tfoot th,tfoot td{padding-top:20px;padding-bottom:22px;box-shadow:inset 0 3px 0 var(--ink)}
tfoot b{display:block;margin-bottom:10px;font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.pick{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;font-weight:700;text-decoration:none;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.pick:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pick:hover{background:var(--ink);color:var(--cream)}}
td i{position:relative;display:inline-block;width:26px;height:26px;border-radius:50%}
td i.y{background:var(--red)}
td i.y::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
td i.n{border:2px solid color-mix(in srgb,var(--ink) 38%,transparent)}
td i.n::after{content:"";position:absolute;left:5px;right:5px;top:10px;height:2px;background:color-mix(in srgb,var(--ink) 40%,transparent)}

/* карта клуба */
.club{--focus:var(--ink);padding-top:112px;padding-bottom:112px;background:var(--cream);color:var(--ink)}
.club-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center}
.club-copy p{max-width:40ch;margin:18px 0 26px;font-size:1.08rem}
.club .btn{border-color:var(--ink);background:var(--ink);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.club .btn:hover{background:#16365f;border-color:#16365f}}
.club .club-state{margin:16px 0 0;font-weight:700;font-size:1rem}
.card{justify-self:center;width:100%;max-width:460px;padding:24px;border-radius:22px;background:var(--navy);color:var(--cream);box-shadow:0 28px 46px -24px rgba(0,0,0,.5)}
@media (min-width:768px){.card{transform:rotate(-2.5deg)}}
.card-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.card-top b{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.card-top span{font-size:.9rem;color:var(--muted)}
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hole{position:relative;display:grid;place-items:center;aspect-ratio:1;border:3px dashed color-mix(in srgb,var(--cream) 55%,transparent);border-radius:50%}
.hole.on{border-color:transparent}
.hole.on::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red)}
.hole.on::after{content:"";position:relative;width:46%;height:46%;background:var(--cream);-webkit-mask:var(--drop) center/contain no-repeat;mask:var(--drop) center/contain no-repeat}
.hole{--drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3s6 6.4 6 10.5A6 6 0 0 1 6 13.5C6 9.4 12 3 12 3z'/%3E%3C/svg%3E")}
.hole.gift{border:3px solid var(--cream)}
.hole.gift em{font-size:.8rem;font-style:normal;font-weight:700;line-height:1.1;text-align:center}
.hole.gift.on{background:var(--cream);color:var(--ink)}
.hole.gift.on::before,.hole.gift.on::after{display:none}
.hole.stamp{animation:stamp .42s var(--ease) both}
@keyframes stamp{from{transform:scale(1.5) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
@media (max-width:820px){.club-in{grid-template-columns:1fr}}

/* отзывы */
.voices{padding-top:112px;padding-bottom:112px}
.voices-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px}
.voices figure{margin:0;padding:26px;border:2px solid var(--cream);border-radius:var(--radius)}
.voices .big{grid-row:1/3;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:34px;background:var(--cream);color:var(--ink)}
blockquote{margin:0;font-size:1.1rem;line-height:1.5;font-weight:500}
.big blockquote{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.32}
figcaption{font-weight:700;font-size:.95rem;opacity:.85}
@media (max-width:820px){.voices-in{grid-template-columns:1fr}.voices .big{grid-row:auto}}

/* вопросы */
.faq{padding-top:86px;padding-bottom:86px;background:var(--navy-4)}
.faq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px)}
details{border-top:2px solid color-mix(in srgb,var(--cream) 28%,transparent)}
details:last-child{border-bottom:2px solid color-mix(in srgb,var(--cream) 28%,transparent)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding-top:12px;padding-bottom:12px;font-weight:700;font-size:1.1rem;list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary .ic{transition:transform .25s var(--ease)}
details[open] summary .ic{transform:rotate(45deg)}
details p{max-width:56ch;margin:0 0 20px;color:var(--muted)}
@media (max-width:820px){.faq-in{grid-template-columns:1fr}}

/* запись и контакты */
.book{padding-top:112px;padding-bottom:112px}
.book-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
.book-form{--focus:var(--ink);padding:40px;border-radius:22px;background:var(--cream);color:var(--ink)}
.book-form h2{margin-bottom:22px}
.field{position:relative;margin:0 0 16px;padding:0;border:0}
.field label,.field legend{display:block;padding:0;margin-bottom:8px;font-weight:700;font-size:.95rem}
.field input[type=text],.field input[type=tel],.field select{width:100%;min-height:54px;padding:0 16px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font-size:1rem}
.field input::placeholder{color:#556580}
.field input[aria-invalid=true]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.18)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chips label{position:relative;margin:0}
.chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;font-weight:700;transition:background-color .2s,color .2s}
.chips input:checked+span{background:var(--ink);color:var(--cream)}
.chips input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.book-form .consent{margin:20px 0 18px}
.book-form .consent input{accent-color:var(--ink)}
.form-note{color:var(--ink)}
.visit h2{margin-bottom:20px}
.facts{display:grid;gap:14px;margin:0 0 22px;padding:0;list-style:none}
.facts li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:1.1rem;line-height:1.45}
.facts a{display:inline-block;padding-top:8px;padding-bottom:8px;font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}
.map{width:100%;height:auto;border-radius:var(--radius)}
.map-note{max-width:52ch;margin:12px 0 0;color:var(--muted);font-size:.88rem}
@media (max-width:860px){.book-in{grid-template-columns:1fr}}

/* подвал */
.foot{padding-bottom:36px;background:var(--navy-4)}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px;padding-top:36px}
.foot-logo{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.req{display:grid;gap:6px;margin:14px 0 0;color:var(--muted);font-size:.92rem}
.req div{display:flex;flex-wrap:wrap;gap:4px 10px}
.req dt{font-weight:700;color:var(--fg)}
.req dd{margin:0}
.legal-links{display:flex;flex-direction:column;gap:10px}
.legal-links a{padding-top:8px;padding-bottom:8px;font-weight:600;text-underline-offset:4px}
.demo{grid-column:1/-1;margin:0;color:var(--muted);font-size:.85rem}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .tile.flip,.hole.stamp{animation:none}
  .btn,.seg span,.pick,summary .ic{transition:none}
}

/* отступы секций: точные значения вместо clamp() */
@media (max-width:1199px){
  /* первый экран */
.hero{padding-top:41px}
  .hero-in{padding-bottom:61px}
  /* маршрут */
.route{padding-top:82px;padding-bottom:82px}
  /* было и стало */
.ba{padding-top:61px;padding-bottom:61px}
  /* комплексы */
.packs{padding-top:82px;padding-bottom:82px}
  /* карта клуба */
.club{padding-top:82px;padding-bottom:82px}
  /* отзывы */
.voices{padding-top:82px;padding-bottom:82px}
  /* вопросы */
.faq{padding-top:61px;padding-bottom:61px}
  /* запись и контакты */
.book{padding-top:82px;padding-bottom:82px}
  .book-form{padding:31px}
}
@media (max-width:820px){
  /* первый экран */
.hero{padding-top:31px}
  .hero-in{padding-bottom:46px}
  /* маршрут */
.route{padding-top:61px;padding-bottom:61px}
  /* было и стало */
.ba{padding-top:46px;padding-bottom:46px}
  /* комплексы */
.packs{padding-top:61px;padding-bottom:61px}
  /* карта клуба */
.club{padding-top:61px;padding-bottom:61px}
  /* отзывы */
.voices{padding-top:61px;padding-bottom:61px}
  /* вопросы */
.faq{padding-top:46px;padding-bottom:46px}
  /* запись и контакты */
.book{padding-top:61px;padding-bottom:61px}
  .book-form{padding:23px}
}
@media (max-width:520px){
  /* первый экран */
.hero{padding-top:18px}
  .hero-in{padding-bottom:40px}
  /* маршрут */
.route{padding-top:56px;padding-bottom:56px}
  /* было и стало */
.ba{padding-top:44px;padding-bottom:44px}
  /* комплексы */
.packs{padding-top:56px;padding-bottom:56px}
  /* карта клуба */
.club{padding-top:56px;padding-bottom:56px}
  /* отзывы */
.voices{padding-top:56px;padding-bottom:56px}
  /* вопросы */
.faq{padding-top:44px;padding-bottom:44px}
  /* запись и контакты */
.book{padding-top:56px;padding-bottom:56px}
  .book-form{padding:22px}
}