/*
 * starterfenix: блоки страниц. Токены и базовые компоненты — ds.css,
 * размеры шрифта — только --fs-* (ADR-003).
 */

.block { padding-top: clamp(32px, 5vw, 64px); }
.block__title { margin-bottom: clamp(20px, 3vw, 32px); }
.page-head { padding-block: clamp(24px, 3vw, 40px) 0; }

/* drawings */
.art { display: block; width: 100%; height: 100%; }
.art .ln { fill: var(--accent); stroke: var(--white); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art .thin { fill: none; stroke: var(--white); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art .axis { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; stroke-dasharray: 14 4 2 4; vector-effect: non-scaling-stroke; }
.art .hidden-ln { fill: none; stroke: var(--white); stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.art .hatch { fill: url(#hatch-w); }
.art--ink .ln { fill: var(--white); stroke: var(--dark); }
.art--ink .thin, .art--ink .hidden-ln { stroke: var(--dark); }
.art--ink .axis { stroke: #a9b3b8; }
.art--ink .hatch { fill: url(#hatch-k); }

/* lead forms (DONE-011): карточка формы, поля с иконками, обещания, запасные телефоны */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form { display: grid; gap: 14px; align-content: start; }
.lead-form__title { margin: 0; }
.lead-form--card { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-card); background: var(--white); box-shadow: 0 16px 40px rgba(23, 33, 38, .12); }
.lead-form__topic .choice { flex: 1 1 0; }
.lead-form__topic .choice span { justify-content: center; width: 100%; min-height: 42px; padding: 0 8px; }
.lead-form__submit { width: 100%; gap: 10px; margin-top: 4px; }
.lead-form__submit .ico { width: 22px; height: 22px; transition: transform .15s; }
.lead-form__submit:hover .ico { transform: translateX(3px); }
.lead-form__submit[disabled] { opacity: .6; cursor: progress; }
.lead-form__note { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.field--icon .field__box { position: relative; display: block; }
.field__ico { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; color: #9aa5aa; transform: translateY(-50%); pointer-events: none; transition: color .15s; }
.field__box:focus-within .field__ico { color: var(--accent); }
.field--icon input { padding-left: 48px; }
.lead-form__result { position: relative; padding: 14px 16px 14px 48px; border-radius: var(--r-btn); background: var(--light); font-size: var(--fs-small); line-height: 1.45; }
.lead-form__result::before { content: "i"; position: absolute; top: 12px; left: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dark); color: var(--white); font-weight: 600; }
.lead-form__result[data-state="ok"] { background: #e7f5ec; color: #145c33; }
.lead-form__result[data-state="ok"]::before { content: "✓"; background: #1d7a46; }
.lead-form__result[data-state="error"] { background: var(--accent-tint); color: var(--accent-hover); }
.lead-form__result[data-state="error"]::before { content: "!"; background: var(--accent); }
.lead-form__result[data-state="preview"] { background: #fff4dc; color: #5c3b00; }
.lead-form__result[data-state="preview"]::before { background: #c47a00; }

.lead-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "head form" "extra form"; gap: 20px 56px; align-items: start; }
.lead-band__head { grid-area: head; align-self: end; }
.lead-band > .lead-form { grid-area: form; align-self: center; }
.lead-band__extra { grid-area: extra; }
.lead-band .lead { margin-top: 12px; }
.lead-band__promises { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lead-band__promises li { display: flex; align-items: center; gap: 10px; }
.lead-band__promises .ico { width: 22px; height: 22px; color: var(--accent); }
.call-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.call-links .small { width: 100%; color: var(--muted); }
.call-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white); text-decoration: none; }
.call-link:hover { border-color: var(--accent); }
.call-link .ico { width: 20px; height: 20px; color: var(--accent); }
.call-link span { display: grid; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.call-link small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); white-space: normal; }
.call__max { width: 100%; justify-content: flex-start; gap: 10px; }
.call__max span { display: grid; text-align: left; }
.call__max small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.call__max .ico { width: 20px; height: 20px; }

.lead-dialog { width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border: 0; border-radius: var(--r-card); color: var(--text); }
.lead-dialog::backdrop { background: rgba(23, 33, 38, .6); }
.lead-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.lead-dialog__head .h3 { margin: 0; }
.lead-dialog__sub { margin-top: 4px; }
.lead-dialog__close { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-btn); background: var(--light); color: var(--text); font: 400 var(--fs-h3)/1 var(--font); cursor: pointer; }
.lead-dialog .call-links { margin-top: 18px; padding-top: 16px; }
.lead-dialog .call-link { flex: 1 1 100%; }

/* contact strip */
.contact-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.contact-strip__logo { width: 56px; height: auto; filter: brightness(0) invert(1); }
.contact-strip__label { color: rgba(255, 255, 255, .7); }
.contact-strip .btn { margin-left: auto; }

/* footer */
.site-footer { margin-top: clamp(48px, 7vw, 96px); background: var(--dark); color: var(--white); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding-block: 40px 28px; }
.site-footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 20px 28px; font-size: var(--fs-small); color: rgba(255, 255, 255, .7); }
.site-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--dark-line); }
.dev-credit { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .7); }
.dev-credit img { display: block; height: 30px; width: auto; }

/* hero plate — «Табличка 3A» */
.hero { padding-block: clamp(24px, 3vw, 40px) 0; }
.sign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sign .h1 span { display: block; }
.sign__sub { margin-top: 12px; color: var(--accent-soft); }
.sign__text { max-width: 40ch; margin: 20px 0 28px; }
.sign__art { display: grid; gap: 14px; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--r-card); color: var(--white); text-decoration: none; transition: background-color .15s, border-color .15s; }
.svc:hover { border-color: var(--white); background: rgba(255, 255, 255, .07); }
.svc__pic { display: flex; align-items: center; justify-content: center; height: 150px; }
.svc__cap b { display: block; font-weight: 600; line-height: 1.3; }
.svc__price { display: block; margin-top: 4px; }
.svc__cond { display: block; font-size: var(--fs-small); color: var(--accent-soft); }

/* addresses under the plate */
.desk { display: grid; grid-template-columns: 1fr 1fr minmax(240px, .8fr); gap: 16px; margin-top: 16px; }
.card-title { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.place-card .place__tel { display: block; width: max-content; font-size: var(--fs-h3); line-height: 1.3; }
.place-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.place-card .place__map { font-size: var(--fs-small); }
.hours-card { padding: 24px 28px; }

/* services */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.service-card { display: block; height: 100%; overflow: hidden; border-radius: var(--r-card); background: var(--light); text-decoration: none; transition: box-shadow .15s; }
.service-card:hover { box-shadow: 0 0 0 2px var(--accent); }
.service-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; background: #3b4146 center / cover no-repeat; }
.service-card__title { display: block; padding: 18px 22px 22px; font-size: var(--fs-lead); font-weight: 600; }

/* 6 reasons */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.reasons li { display: flex; align-items: center; gap: 18px; }
.reasons img { flex: none; width: 72px; height: auto; }

/* team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.team-card { overflow: hidden; border-radius: var(--r-card); background: var(--light); }
.team-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.team-card__body { padding: 16px 20px 20px; }
.team-card__name { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.25; }
.team-card__role { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
.more-link { display: flex; justify-content: center; margin-top: 28px; }

/* bottom banner: three pains + contact strip */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
.pain { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 24px; overflow: hidden; border-radius: var(--r-card); background: #2b2f33 center / cover no-repeat; color: var(--white); }
.pain::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(23, 33, 38, 0) 25%, rgba(23, 33, 38, .9)); }
.pain > * { position: relative; }
.pain .h3 { color: var(--white); }
.pain p + p { margin-top: 6px; }

/* service page */
.svc-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.svc-switch__label { font-weight: 600; }
.svc-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 28px; }
.svc-intro .h1 { margin-bottom: 20px; }
.svc-intro__art { height: clamp(200px, 24vw, 300px); }
.svc-intro__cta { margin-top: 28px; }
.prose { max-width: 75ch; }
.prose p + p { margin-top: 14px; }
.price { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.price li { display: grid; grid-template-columns: minmax(0, 1.4fr) 170px minmax(0, 1.4fr); gap: 4px 24px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--line); }
.price__name { font-weight: 600; }
.price__cost { font-size: var(--fs-lead); font-weight: 600; color: var(--accent); white-space: nowrap; }
.price__note { font-size: var(--fs-small); color: var(--muted); }
.price-notes { margin-top: 28px; }

/* inner pages: title, rich text from the live site */
.page-title { margin-top: 20px; }
.rich { max-width: 80ch; margin-top: 24px; }
.rich > * + *, .rich div > * + * { margin-top: 14px; }
.rich h2 { margin-top: 36px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.rich h3 { margin-top: 28px; font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; }
.rich a { color: var(--accent); }
.rich ul, .rich ol { padding-left: 1.3em; }
.rich li + li { margin-top: 6px; }
.rich img { display: block; max-width: 100%; height: auto; border-radius: var(--r-card); }
.table-wrap { max-width: 100%; overflow-x: auto; }
.rich table { width: 100%; border-collapse: collapse; }
.rich td, .rich th { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rich tr:first-child td { border-top: 1px solid var(--line); }
.rich td p { margin: 0; }

/* «О сервисе»: текст + чертежи */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.about__art { position: sticky; top: 24px; display: grid; gap: 16px; margin-top: 24px; }
.about__pic { height: 180px; padding: 16px; border-radius: var(--r-card); background: var(--light); }

/* FAQ */
.faq-list { max-width: 90ch; margin-top: 24px; }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group .h3 { margin: 0 0 8px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: var(--fs-h3); line-height: 1; color: var(--accent); }
.faq[open] summary::after { content: "−"; }
.faq__a { padding-bottom: 18px; }
.faq__a > * + * { margin-top: 12px; }

/* photo gallery */
.photo-group { margin-top: 32px; }
.photo-group .h3 { margin: 0 0 16px; }
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery li { grid-column: span 2; }
.gallery .half { grid-column: span 3; }
.gallery .wide { grid-column: 1 / -1; }
.gallery a { display: block; overflow: hidden; border-radius: var(--r-card); }
.gallery img { display: block; width: 100%; height: auto; }
.gallery .third img { aspect-ratio: 1; object-fit: cover; }

/* contacts with maps */
.contacts { display: grid; gap: 16px; margin-top: 24px; }
.contact-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 24px; padding: 24px; }
.contact-card__addr { margin: 4px 0 12px; font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; }
.contact-card__info .small { margin-top: 12px; }
.contact-card__info .place__tel { display: block; width: max-content; }
.contact-card__info .btn { margin-top: 20px; }
.map { min-height: 400px; overflow: hidden; border-radius: var(--r-card); background: var(--white); }

@media (max-width: 1100px) {
  .desk { grid-template-columns: 1fr 1fr; }
  .hours-card { grid-column: 1 / -1; }
  .reasons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .lead-band { grid-template-columns: 1fr; grid-template-areas: "head" "form" "extra"; }
  .sign { grid-template-columns: 1fr; }
  .about, .contact-card { grid-template-columns: 1fr; }
  .about__art { position: static; grid-template-columns: 1fr 1fr; order: -1; }
  .about__pic { height: 120px; }
  .svc-intro { grid-template-columns: 1fr; }
  .pains { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* зоны нажатия на телефоне — не меньше 44 px (DONE-011) */
  .place__tel { display: inline-flex; align-items: center; min-height: 44px; }
  .place__map, .ya-card__link, .warranty__link, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .chip--sm { min-height: 44px; }
  .site-footer ul { gap: 0 24px; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  .svc-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .svc-switch__label { grid-column: 1 / -1; }
  .svc-switch .chip { justify-content: center; padding-inline: 8px; text-align: center; }
  /* широкие таблицы (3+ колонки) листаются вбок, а не сжимаются в столбики */
  .table-wrap:has(td:nth-child(3)) { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .table-wrap:has(td:nth-child(3)) table { min-width: 640px; }
  .table-wrap:has(td:nth-child(3))::before { content: "Таблицу можно листать вбок →"; display: block; margin-bottom: 8px; font-size: var(--fs-small); color: var(--muted); }
  .lead-dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .lead-dialog[open] { animation: sheet-up .2s ease-out; }
  .call-link { flex: 1 1 100%; }
  .lead-band { padding: 24px 16px; }
  .lead-form--card { padding: 20px 16px; }
  .sign .btn { width: 100%; }
  .gallery li, .gallery .half { grid-column: span 3; }
  .gallery .wide { grid-column: 1 / -1; }
  .price li { grid-template-columns: 1fr; }
  .desk, .services, .reasons { grid-template-columns: 1fr; }
  .place-card__row .btn { flex: 1 1 100%; }
  .contact-strip .btn { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .svc { grid-template-columns: 1fr; }
  .svc__pic { height: 130px; }
}

/* ───────── новая главная (ADR-008): блоки разбора DONE-006 ───────── */
.ico { display: block; width: 28px; height: 28px; flex: none; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--accent-hover); }
.muted-light { color: rgba(255, 255, 255, .72); }

/* меню: «Ещё» */
.nav-more details { position: relative; }
.nav-more summary { display: block; padding-block: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " ▾"; color: var(--muted); }
.nav-more ul { position: absolute; z-index: 20; top: 100%; left: -16px; display: grid; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; border-radius: var(--r-card); background: var(--white); box-shadow: 0 12px 32px rgba(23, 33, 38, .16); }
.nav-more ul a { padding: 8px 16px; }

/* первый экран: рейтинг и пометки */
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 22px; color: var(--white); font-size: var(--fs-small); text-decoration: none; }
.rating:hover span:last-child { text-decoration: underline; }
.rating__stars { color: #ffcf33; letter-spacing: 2px; font-size: var(--fs-body); }
.rating--ink { color: var(--text); }
.rating--ink .rating__stars { color: #f5a400; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--accent-soft); }
.hero-notes li::before { content: "✓ "; color: var(--white); font-weight: 600; }
.place-card__meta { display: flex; gap: 6px; align-items: center; margin: -4px 0 10px; font-size: var(--fs-small); color: var(--muted); }
.place-card__meta .ico { width: 18px; height: 18px; color: var(--accent); }

/* цифры */
.facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.fact { display: grid; align-content: start; gap: 6px; padding: 20px 18px; border-radius: var(--r-card); background: var(--light); }
.fact__n { font-size: var(--fs-h3); font-weight: 600; line-height: 1.1; color: var(--accent); white-space: nowrap; }
.fact__l { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }

/* осеннее предложение */
.offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 24px 32px; border: 2px solid var(--accent); border-radius: var(--r-card); background: var(--accent-tint); }
.offer__ico { width: 48px; height: 48px; color: var(--accent); }
.offer__text .h3 { margin-bottom: 6px; }

/* что случилось */
.symptoms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.symptom { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 22px 20px 48px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.symptom:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(180, 0, 1, .1); }
.symptom__ico { width: 36px; height: 36px; color: var(--accent); }
.symptom__title { font-weight: 600; line-height: 1.3; }
.symptom__hint { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.symptom__go { position: absolute; left: 20px; bottom: 16px; color: var(--accent); font-weight: 600; }
.symptoms__more { margin-top: 18px; }

/* услуги */
.svc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.svc-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; overflow: hidden; border-radius: var(--r-card); background: var(--light); text-decoration: none; transition: box-shadow .15s; }
.svc-card:hover { box-shadow: 0 0 0 2px var(--accent); }
.svc-card__img { min-height: 220px; background: #3b4146 center / cover no-repeat; }
.svc-card__body { display: grid; align-content: start; gap: 12px; padding: 24px; }
.svc-card__title { font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; }
.svc-card__meta { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--muted); }
.svc-card__meta span:first-child { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.svc-card__meta small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.svc-card__go { color: var(--accent); font-weight: 600; }
.svc-more { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.svc-more__main { display: grid; gap: 4px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; }
.svc-more__main:hover { border-color: var(--accent); }
.svc-more__main span { font-size: var(--fs-small); color: var(--muted); }
.svc-more__other { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 20px 24px; border-radius: var(--r-card); background: var(--light); }

/* как мы работаем */
.steps { counter-reset: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px 22px; border-radius: var(--r-card); background: var(--light); }
.step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--white); font-weight: 600; }
.step__title { margin-top: 6px; font-size: var(--fs-body); font-weight: 600; }
.step__time { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--white); color: var(--accent); font-size: var(--fs-small); font-weight: 600; }
.step__text { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.steps__notes { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; padding: 0; list-style: none; }
.steps__notes li::before { content: "✓ "; color: var(--accent); font-weight: 600; }

.steps-wrap { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.steps-wrap .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stand { display: grid; grid-template-rows: 1fr auto; margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--dark); color: var(--white); }
.stand img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.stand figcaption { padding: 12px 16px; font-size: var(--fs-small); }
.route-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-btn); }

/* цены */
.tariff { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tariff__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tariff__list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tariff__name { display: grid; gap: 2px; font-weight: 600; }
.tariff__name small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.tariff__cost { flex: none; font-weight: 600; white-space: nowrap; }
.tariff__table > .small { margin-top: 12px; }
.tariff__forks { margin-top: 16px; padding: 16px 20px; border-radius: var(--r-card); background: var(--light); }
.tariff__forks ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.tariff__forks li { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-small); }
.tariff__aside { display: grid; gap: 14px; }
.tariff__aside .btn { justify-self: start; }

/* отзывы */
.ya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.ya__cards { display: grid; gap: 16px; }
.ya-card { display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--r-card); background: var(--light); text-decoration: none; }
.ya-card--link:hover { box-shadow: 0 0 0 2px var(--accent); }
.ya-card__place { font-weight: 600; }
.ya-card__score { display: flex; align-items: center; gap: 12px; }
.ya-card__n { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; }
.ya-card .rating__stars { color: #f5a400; }
.ya-card__award { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--white); font-size: var(--fs-small); font-weight: 600; }
.ya-card__aspect { margin-top: 6px; font-size: var(--fs-small); }
.ya-card__link { margin-top: 6px; color: var(--accent); font-size: var(--fs-small); font-weight: 600; }
.ya__widget { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); }
.tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--light); }
.tabs button { flex: 1; padding: 14px 12px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 var(--fs-small)/1.3 var(--font); color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); background: var(--white); }
.ya-frame iframe { display: block; width: 100%; height: 600px; border: 0; }
.ya-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* сломались в дороге */
.road { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.road .lead { margin-top: 14px; }
.road .muted-light { margin-top: 12px; }
.road__calls { display: grid; gap: 12px; }
.road__call { justify-content: flex-start; gap: 14px; min-height: 64px; text-align: left; }
.road__call .ico { width: 24px; height: 24px; }
.road__call span { display: grid; }
.road__call small { font-size: var(--fs-small); font-weight: 400; color: var(--text); }

/* агрегаты в наличии */
.stock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.stock__ico { width: 40px; height: 40px; margin-bottom: 12px; color: var(--accent); }
.stock .lead { margin-top: 12px; }
.stock .small { margin-top: 10px; }
.field input::placeholder { color: #a3adb1; }

/* гарантия */
.warranty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 24px 32px; border: 1px solid var(--line); border-radius: var(--r-card); }
.warranty__ico { width: 48px; height: 48px; color: var(--accent); }
.warranty__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.warranty__list li { display: grid; gap: 2px; }
.warranty__n { font-size: var(--fs-lead); font-weight: 600; color: var(--text); }
.warranty__link { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* автосервисам */
.b2b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; }
.b2b .lead { margin-top: 12px; }
.b2b__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b2b__list li::before { content: "✓ "; color: var(--accent); font-weight: 600; }

/* грузовые */
.trucks { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 24px 32px; border-radius: var(--r-card); background: var(--light); }
.trucks__ico { width: 48px; height: 48px; color: var(--accent); }
.trucks .h3 { margin-bottom: 6px; }

/* как добраться */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.route-card { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: var(--r-card); background: var(--light); }
.route-card__meta { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); }
.route-card__meta .ico { width: 20px; height: 20px; color: var(--accent); }
.route-card__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* финальная форма */
.final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head form" "extra form"; gap: 20px 48px; align-items: start; }
.final__head { grid-area: head; }
.final__extra { grid-area: extra; }
.final > .final__form { grid-area: form; }
.final__head .lead { margin-top: 14px; }
.final__bonus { justify-self: start; display: inline-block; margin-top: 16px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--white); font-weight: 600; }
.final__form { display: grid; gap: 14px; align-content: start; }
.final__form .btn { width: 100%; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.choices legend { width: 100%; margin-bottom: 6px; padding: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white); font-size: var(--fs-small); cursor: pointer; }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }

/* мобильная панель звонка и окно «Куда позвонить?» */
.mbar { display: none; }
.call__place + .call__place { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.call__tels { display: grid; gap: 8px; }
.call__tel { justify-content: flex-start; }
.call-dialog > .small { margin-top: 16px; }

/* страница симптома */
.crumbs { margin-bottom: 16px; font-size: var(--fs-small); color: var(--muted); }
.crumbs a { color: var(--muted); }
.sym-head__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.sym-head .lead { margin-top: 16px; }
.sym-head__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sym-head__art { height: 260px; padding: 24px; border-radius: var(--r-panel); background: var(--light); }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.case { padding: 24px 26px; border-radius: var(--r-card); background: var(--light); }
.case__title { margin-bottom: 8px; font-size: var(--fs-lead); font-weight: 600; }
.case ul { margin: 6px 0 0; padding-left: 20px; }
.case li + li { margin-top: 4px; }
.cases__note { margin-top: 16px; font-weight: 600; }
.nows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.now { display: grid; align-content: start; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); }
.now__ico { width: 32px; height: 32px; color: var(--accent); }
.now__title { font-weight: 600; }

@media (max-width: 1100px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .symptoms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-card { grid-template-columns: 1fr; }
  .svc-card__img { min-height: 0; aspect-ratio: 16 / 9; }
  .steps { grid-template-columns: 1fr 1fr; }
  .b2b { grid-template-columns: 1fr 1fr; }
  .b2b .btn { grid-column: 1 / -1; justify-self: start; }
  .warranty { grid-template-columns: auto minmax(0, 1fr); }
  .warranty__link { grid-column: 2; }
}
@media (max-width: 860px) {
  .steps-wrap { grid-template-columns: 1fr; }
  .offer, .trucks { grid-template-columns: auto minmax(0, 1fr); }
  .offer .btn, .trucks .btn { grid-column: 1 / -1; }
  .svc-more, .tariff, .ya, .road, .stock, .final, .sym-head__grid { grid-template-columns: 1fr; }
  .final { grid-template-areas: "head" "form" "extra"; }
  .final__bonus { border-radius: var(--r-btn); }
  .sym-head__art { height: 200px; }
  .nows { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { padding-bottom: 76px; }
  .mbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--white); box-shadow: 0 -6px 20px rgba(23, 33, 38, .14); }
  .mbar__btn { gap: 8px; min-height: 52px; padding: 0 12px; }
  .mbar__btn .ico { width: 20px; height: 20px; }
  .mbar .btn--light { border-color: var(--accent); }
  .facts { grid-template-columns: 1fr 1fr; }
  .symptoms, .svc-cards, .steps, .routes, .cases, .ya-row, .b2b { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; gap: 12px; }
  .team-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .team-card img { height: 100%; aspect-ratio: 1; }
  .steps-wrap .steps { grid-template-columns: 1fr; }
  .symptom { padding-bottom: 22px; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .symptom__ico { grid-row: span 2; }
  .symptom__go { display: none; }
  .warranty, .warranty__list { grid-template-columns: 1fr; }
  .warranty__link { grid-column: auto; }
  .offer, .warranty, .trucks { padding: 20px; }
  .offer, .trucks { grid-template-columns: 1fr; }
  .offer__ico, .trucks__ico { width: 36px; height: 36px; }
  .ya-frame iframe { height: 520px; }
  .sym-head__btns .btn { flex: 1 1 100%; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lead-dialog[open] { animation: none; } }