/* ---------------------------------------------------------------------
   Тема «Грузовой сервис» — по макетам редизайна gruzovoi-service.ru.

   Подключается после css/style.css и правит его переменные: разметка и
   классы остаются базовыми, меняются палитра, шрифты и те приёмы, которые
   в макетах устроены иначе. Поэтому обновление ядра не ломает тему, а тема
   не копирует базовый стиль.

   Главное отличие от базового оформления: в макетах нет ни одной тени —
   глубину задают границы. И два шрифта вместо одного: Montserrat на
   заголовках, ценах и телефонах, Golos Text на всём остальном.
   --------------------------------------------------------------------- */

:root{
  /* фон */
  --bg-page:#ffffff;
  --bg-subtle:#f4f5f7;     /* серые секции: цены, этапы, статьи */
  --bg-muted:#eef0f8;      /* подложка акцентных иконок и чипов */
  --bg-render:#f4f5f7;     /* место под фотографию */
  --bg-dark:#212121;       /* тёмные секции и шапка */
  --bg-dark-top:#171717;   /* верхняя полоса шапки */
  --bg-footer:#33363a;

  /* фирменный синий */
  --brand-900:#212121;     /* в базовом стиле это фон hero и подвала */
  --brand-800:#1e2c6e;     /* наведение на ссылку */
  --brand-700:#2a3c90;     /* основной акцент: кнопки, заголовки-надзаголовки */
  --brand-500:#2a3c90;
  --brand-300:#4a63d8;     /* акцент на тёмном фоне */
  --brand-200:#8ea0f0;     /* иконки и стрелки на тёмном */
  --brand-100:#eef0f8;

  /* действие: на светлом — синий, яркий синий оставлен для тёмного фона */
  --accent-600:#1e2c6e;
  --accent-500:#2a3c90;
  --accent-100:#eef0f8;

  /* текст */
  --ink-900:#212121;
  --ink-800:#1c1d21;
  --ink-700:#3c4043;
  --ink-500:#5f6368;
  --ink-400:#6b7079;

  /* границы */
  --line-200:#e1e3e8;
  --line-250:#eef0f3;      /* разделители внутри карточек */
  --line-280:#f1f2f4;      /* разделители строк в списках */
  --line-300:#c9cdd6;      /* поля ввода */

  --success-600:#4b7a37;
  --success-500:#7cbb64;   /* точка «сейчас открыто» */
  --success-100:#eef6ea;

  /* шрифты */
  --font-sans:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:Montserrat,var(--font-sans);

  /* радиусы: в макетах их пять */
  --radius-sm:6px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:14px;

  /* теней нет: глубину держат границы */
  --shadow-card:none;
  --shadow-hover:none;
  --shadow-header:none;
  --shadow-modal:0 24px 60px rgba(33,33,33,.28);

  --control-h:48px;
  --control-h-lg:52px;
  --header-h:72px;
}

/* ---------- типографика ---------- */

h1,h2,h3,h4,h5,
.h1,.h2,.h3,.h4,.h5,
.hero__title,
.panel__title,
.cta__title{
  font-family:var(--font-display);
  letter-spacing:normal;
}

.h1,.hero__title{font-size:clamp(32px,4vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.01em;}
.h2,.cta__title{font-size:clamp(28px,3vw,40px);line-height:1.15;font-weight:800;}
.h3{font-size:20px;line-height:1.25;font-weight:700;}
.h4{font-size:18px;line-height:1.3;font-weight:700;}

.lead,.hero__lead{font-size:19px;line-height:1.55;color:var(--ink-700);}
.hero__lead{color:rgba(255,255,255,.8);max-width:640px;}

/* надзаголовок секции: в макетах он всегда синий и в разрядку */
.overline{
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-700);
}

/* цены и телефоны набраны вторым шрифтом */
.price__now,.pcard__price,.keyspec__value,.header__phone,.footer__phone{
  font-family:var(--font-display);
  font-weight:700;
}

/* ---------- плоские поверхности ---------- */

.card,.pcard,.panel{box-shadow:none;}
a.card:hover,a.pcard:hover{
  box-shadow:none;transform:none;border-color:var(--brand-700);
}

.badge--ok{background:var(--success-100);color:var(--success-600);}

/* ---------- кнопки ---------- */

.btn{font-weight:600;border-radius:var(--radius-md);}
.btn--primary,.btn--accent{background:var(--brand-700);color:#fff;}
.btn--primary:hover,.btn--accent:hover{background:var(--brand-800);color:#fff;}

/* на тёмном фоне действие подсвечено ярче — иначе синий тонет в чёрном */
.hero .btn--accent,
.cta .btn--accent,
.section--dark .btn--accent,
.footer .btn--accent{background:var(--brand-300);}
.hero .btn--accent:hover,
.cta .btn--accent:hover,
.section--dark .btn--accent:hover,
.footer .btn--accent:hover{background:var(--brand-700);}

.btn--outline{border-color:var(--brand-700);color:var(--brand-700);}
.btn--on-dark{border-color:rgba(255,255,255,.5);color:#fff;}
.btn--on-dark:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08);}

/* ---------- шапка ---------- */

.topbar{background:var(--bg-dark-top);color:rgba(255,255,255,.72);font-size:13px;}
.topbar__inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;
  padding:8px var(--gutter);max-width:var(--container);margin:0 auto;width:100%;
}
.topbar__group{display:flex;flex-wrap:wrap;gap:6px 20px;}
.topbar a{color:rgba(255,255,255,.9);}
.topbar a:hover{color:#fff;}

.topbar__status{display:inline-flex;align-items:center;gap:8px;}
.topbar__dot{
  width:8px;height:8px;border-radius:50%;background:var(--success-500);flex:none;
}

.header{background:var(--bg-dark);border-bottom:0;}
.header.is-stuck{box-shadow:none;}
.header__logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;}
.header__mark{
  width:48px;height:48px;border-radius:8px;background:var(--brand-700);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.header__name{
  font-family:var(--font-display);font-weight:800;font-size:18px;
  letter-spacing:.02em;line-height:1.1;
}
.header__tagline{font-size:12px;color:rgba(255,255,255,.65);margin-top:3px;display:block;}

/* пункты меню не переносятся по словам: «О компании» в две строки
   ломает высоту шапки */
.menu{gap:var(--space-4);}
.menu__link{color:#fff;border-bottom-width:3px;white-space:nowrap;}
.menu__link:hover{color:#fff;}
.menu__item.is-active>.menu__link{color:#fff;border-bottom-color:var(--brand-300);}

.header__contact{display:flex;flex-direction:column;line-height:1.2;flex:none;}
.header__phone{color:#fff;font-family:var(--font-display);font-size:18px;font-weight:700;}
.header__phone:hover{color:#fff;}
.header__hours{font-size:12px;color:rgba(255,255,255,.65);display:block;}

.burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.burger span{background:#fff;}

.megamenu{border-color:var(--line-200);box-shadow:none;border-top:1px solid var(--line-200);}

/* ---------- подвал ---------- */

.footer{background:var(--bg-footer);color:rgba(255,255,255,.85);font-size:15px;}
/* колонок столько, сколько поместится: набор разделов в подвале
   собирается из каталога и меняется вместе с ним */
.footer__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;}
.footer__title{
  font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff;
  margin-bottom:4px;
}
.footer__contacts{display:flex;flex-direction:column;gap:6px;}
.footer__contacts p{margin:0;line-height:1.5;}
.footer__links{display:flex;flex-wrap:wrap;gap:16px;}
.footer a{color:rgba(255,255,255,.8);}
.footer a:hover{color:#fff;}
.footer__caption{font-size:13px;color:rgba(255,255,255,.6);}
.footer__phone{font-size:18px;color:#fff;}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.6);
}

/* ---------- секции ---------- */

.section{padding:72px 0;}
.section--tight{padding:56px 0;}
.section--subtle{background:var(--bg-subtle);}
.section--dark{background:var(--bg-dark);color:#fff;}
.section--dark .h2,.section--dark .h3{color:#fff;}
.section--dark .lead{color:rgba(255,255,255,.8);}
.section--dark .overline{color:rgba(255,255,255,.75);}

.hero{background:var(--bg-dark);}

/* Шапка внутренней страницы в макетах светлая и без фотографии: заголовок
   на ней читается как обычный текст страницы. Фото и затемнение прячем —
   иначе тёмный заголовок ложится на тёмный снимок. */
.hero--page{background:var(--bg-subtle);}
.hero--page .hero__media,
.hero--page .hero__scrim{display:none;}
.hero--page .hero__title{color:var(--ink-900);}
.hero--page .hero__lead{color:var(--ink-700);}
.hero--page .crumbs,
.hero--page .crumbs a,
.hero--page .crumbs span{color:var(--ink-500);}
.hero--page .crumbs a:hover{color:var(--brand-700);}

/* цвет текста задаём на всей секции: в базовом оформлении он стоял только
   у заголовка и лида, и адрес в карточке контактов оставался тёмным */
.cta{background:var(--bg-dark);padding:72px 0;color:rgba(255,255,255,.85);}
.cta a{color:#fff;}
.cta a:hover{color:#fff;}
/* декоративный рендер изделия — приём базового оформления; в макетах
   «Грузового сервиса» блок простой, и картинка только распирает страницу */
.cta__render{display:none;}

.cta__inner{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.cta__text{flex:999 1 480px;min-width:0;}
.cta__lead{font-size:18px;line-height:1.5;color:rgba(255,255,255,.8);margin-top:12px;}

.cta__form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:24px;}
.cta__field{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:rgba(255,255,255,.8);}
.cta__field input{
  min-height:52px;padding:0 14px;border:0;border-radius:var(--radius-md);
  font:inherit;font-size:16px;background:#fff;color:var(--ink-900);
}
.cta__submit{flex:1 1 200px;}
.cta__note{font-size:13px;line-height:1.5;color:rgba(255,255,255,.6);margin-top:14px;}
.cta__note a{color:rgba(255,255,255,.85);}

.cta__contacts{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px;}
.cta__card{
  background:rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:20px 22px;
  display:flex;flex-direction:column;gap:4px;
}
.cta__card p{margin:0;line-height:1.5;}
.cta__card-title{font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);}
.cta__card-note{font-size:14px;color:rgba(255,255,255,.65);}
.cta__phone{
  font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;
}
.cta__phone:hover{color:#fff;}

/* у услуг фотографий обычно нет — пустая рамка в карточке только
   растягивает список и ничего не сообщает */
.pcard__media--empty{display:none;}

/* ---------- каталог ---------- */

.cat-filter{background:var(--bg-subtle);border-color:var(--line-200);}
.cat-filter__title{font-family:var(--font-display);font-weight:700;}
.cat__sort.is-active{color:var(--brand-700);}

.pb-chip{border-color:var(--line-200);}
.pb-chip:hover{border-color:var(--brand-700);color:var(--brand-700);}

.pcard__price{font-size:18px;color:var(--ink-900);}
.price__now{color:var(--ink-900);}

/* строка прайса: название слева, цена справа, разделители тонкие */
.pricerow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:16px var(--space-5);border-bottom:1px solid var(--line-250);
}
.pricerow:last-child{border-bottom:0;}
.pricerow__name{font-size:16px;font-weight:500;color:var(--ink-900);}
.pricerow__group{font-size:13px;color:var(--ink-400);display:block;margin-top:2px;}
.pricerow__price{
  font-family:var(--font-display);font-size:17px;font-weight:700;white-space:nowrap;
}

/* ---------- формы ---------- */

.control,
input[type="text"],input[type="tel"],input[type="email"],input[type="search"],
input[type="number"],select,textarea{
  border-color:var(--line-300);border-radius:var(--radius-md);
}
.control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--brand-700);outline:2px solid var(--brand-100);outline-offset:0;
}

/* ---------- телефон ---------- */

/* Пунктов меню здесь больше, чем в базовой шапке, поэтому телефон с
   режимом работы уходит раньше — он продублирован в верхней полосе.
   Иначе строка шапки распирает страницу и появляется боковая прокрутка. */
@media (max-width:1460px){
  .header__contact{display:none;}
  .menu{gap:var(--space-3);}
  .menu__link{font-size:14px;}
}

@media (max-width:900px){
  .section{padding:40px 0;}
  .section--tight{padding:32px 0;}
}

@media (max-width:640px){
  :root{--gutter:20px;--header-h:64px;}
  .section{padding:28px 0;}
  .section--tight{padding:24px 0;}
  .topbar{display:none;}
  .header__tagline{display:none;}
}

/* ---------- первый экран ---------- */

.hero-g{background:var(--bg-dark);color:#fff;padding:64px 0 56px;}
.hero-g__inner{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;}
.hero-g__main{flex:999 1 520px;min-width:0;}
.hero-g__form{flex:1 1 360px;min-width:0;}

.hero-g__badge{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
  padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  font-size:14px;color:rgba(255,255,255,.9);
}
.hero-g__dot{width:8px;height:8px;border-radius:50%;background:var(--success-500);flex:none;}

.hero-g__title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(34px,4.4vw,58px);line-height:1.08;margin:0;
}
.hero-g__lead{
  margin:20px 0 0;max-width:600px;font-size:20px;line-height:1.5;
  color:rgba(255,255,255,.8);
}

.hero-g__facts{
  list-style:none;margin:28px 0 0;padding:0;max-width:640px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
}
.hero-g__facts li{
  background:rgba(255,255,255,.06);border-radius:8px;padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;line-height:1.35;
}
.hero-g__facts b{font-size:16px;font-weight:600;}
.hero-g__facts span{font-size:14px;color:rgba(255,255,255,.7);}

.hero-g__brands{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:24px 0 0;font-size:14px;color:rgba(255,255,255,.7);
}
.hero-g__brand{
  display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;
}
.hero-g__brand:hover{border-color:#fff;color:#fff;}
.hero-g__action{margin:28px 0 0;}

.hero-g__form{
  background:#fff;color:var(--ink-800);border-radius:var(--radius-lg);padding:28px;
  display:flex;flex-direction:column;gap:16px;
}
.hero-g__form-title{
  font-family:var(--font-display);font-size:24px;font-weight:800;line-height:1.2;margin:0;
  color:var(--ink-900);
}
.hero-g__form-note{margin:-10px 0 0;font-size:15px;color:var(--ink-500);}
.hero-g__field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;}
.hero-g__field input,
.hero-g__field select{
  min-height:48px;padding:0 12px;border:1px solid var(--line-300);
  border-radius:var(--radius-md);font:inherit;font-size:16px;background:#fff;
}
.hero-g__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.hero-g__agree{margin:0;font-size:13px;line-height:1.4;color:var(--ink-500);}
.hero-g__call{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;
  margin:0;padding-top:14px;border-top:1px solid var(--line-200);
  font-size:14px;color:var(--ink-500);
}
.hero-g__call a{
  font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink-900);
}

@media (max-width:640px){
  .hero-g{padding:24px 0 32px;}
  .hero-g__title{font-size:30px;line-height:1.12;}
  .hero-g__lead{font-size:16px;}
  .hero-g__facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .hero-g__facts li{padding:12px;font-size:14px;}
  .hero-g__brands{display:none;}
}

/* ---------- плитки разделов ---------- */

.dirs{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;
}
.dirs__card{
  display:flex;flex-direction:column;gap:14px;padding:24px;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);background:#fff;
}
.dirs__title{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.25;margin:0;}
.dirs__title a{color:var(--ink-900);text-decoration:none;}
.dirs__title a:hover{color:var(--brand-700);}
.dirs__text{margin:0;font-size:15px;line-height:1.5;color:var(--ink-500);}
.dirs__foot{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line-250);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:14px;color:var(--ink-500);
}
.dirs__foot b{font-family:var(--font-display);font-size:18px;color:var(--ink-900);}

/* ---------- цены ---------- */

.prices-g{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;}
.prices-g__text{flex:1 1 320px;min-width:0;}
.prices-g__table{
  flex:999 1 560px;min-width:0;background:#fff;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);overflow:hidden;
}
.prices-g__lead{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--ink-700);}
.prices-g__actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;}
.prices-g__note{margin:0;padding:14px var(--space-5);font-size:13px;color:var(--ink-400);}
.dirs__foot--quiet{font-size:13px;}

/* ---------- витрина услуг ---------- */

.catalog-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px;}

.tabs{
  display:inline-flex;gap:4px;padding:4px;background:#fff;
  border:1px solid var(--line-200);border-radius:8px;
}
.tabs__item{
  display:inline-flex;align-items:center;min-height:40px;padding:0 18px;
  border-radius:var(--radius-md);font-size:15px;font-weight:600;
  color:var(--ink-700);text-decoration:none;
}
.tabs__item.is-active{background:var(--brand-700);color:#fff;}

.catalog-search{
  flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:10px;
  height:48px;padding:0 14px;background:#fff;
  border:1px solid var(--line-200);border-radius:8px;color:var(--ink-500);
}
.catalog-search input{
  flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;
  font:inherit;font-size:16px;color:var(--ink-900);
}
.catalog-search .btn{min-height:36px;padding:0 14px;}

.groups{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;align-items:start;
}
.groups__card{
  border:1px solid var(--line-200);border-radius:var(--radius-lg);
  background:#fff;overflow:hidden;
}
.groups__head{display:flex;justify-content:space-between;gap:12px;padding:20px 22px;}
.groups__title{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0;}
.groups__title a{color:var(--ink-900);text-decoration:none;}
.groups__title a:hover{color:var(--brand-700);}
.groups__count{margin:4px 0 0;font-size:14px;color:var(--ink-500);}

.groups__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-250);}
.groups__list a,
.groups__list > li > span{
  display:flex;justify-content:space-between;gap:12px;
  padding:11px 22px;border-bottom:1px solid var(--line-280);
  font-size:15px;color:var(--ink-800);text-decoration:none;
}
.groups__list a:hover{background:var(--bg-subtle);color:var(--ink-900);}
.groups__price{color:var(--ink-500);white-space:nowrap;}

.groups__more{display:block;padding:14px 22px;font-size:15px;font-weight:600;}

@media (max-width:640px){
  .groups{grid-template-columns:minmax(0,1fr);}
  .catalog-tools{gap:8px;}
  .tabs{width:100%;}
  .tabs__item{flex:1 1 0;justify-content:center;padding:0 10px;}
}

/* ---------- страница раздела услуг ---------- */

.svc{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;margin-top:8px;}
.svc__main{flex:999 1 520px;min-width:0;}
.svc__calc{
  flex:1 1 360px;min-width:0;background:#fff;border-radius:var(--radius-lg);
  padding:22px;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line-200);
}
.svc__calc-title{font-family:var(--font-display);font-size:19px;font-weight:700;margin:0;}
.svc__calc-note{margin:0;font-size:12px;line-height:1.45;color:var(--ink-400);}
.svc__field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;}
.svc__field input{
  min-height:46px;padding:0 12px;border:1px solid var(--line-300);
  border-radius:var(--radius-md);font:inherit;font-size:16px;
}
.svc__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.svc__metrics{
  list-style:none;margin:28px 0 0;padding:0;max-width:680px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
}
.svc__metrics li{
  background:#fff;border:1px solid var(--line-200);border-radius:8px;padding:16px;
}
.svc__metrics b{
  display:block;font-family:var(--font-display);font-size:22px;font-weight:800;
  color:var(--brand-700);
}
.svc__metrics span{display:block;margin-top:4px;font-size:14px;color:var(--ink-500);}
.svc__actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;}

/* якорная навигация липнет к верху: страница длинная */
.anchors{
  position:sticky;top:0;z-index:5;background:#fff;
  border-bottom:1px solid var(--line-200);
}
.anchors__inner{
  display:flex;gap:28px;overflow-x:auto;
  font-size:15px;font-weight:600;white-space:nowrap;
}
.anchors__link{
  padding:16px 0;color:var(--ink-500);text-decoration:none;
  border-bottom:3px solid transparent;
}
.anchors__link:hover{color:var(--ink-900);}
.anchors__link.is-active{color:var(--ink-900);border-bottom-color:var(--brand-700);}

/* карточки работ: название, пояснение, цена и запись */
.works{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;
}
.works__card{
  display:flex;flex-direction:column;gap:12px;padding:20px;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);background:#fff;
}
.works__title{font-size:17px;font-weight:600;line-height:1.35;margin:0;}
.works__title a{color:var(--ink-900);text-decoration:none;}
.works__title a:hover{color:var(--brand-700);}
.works__text{margin:0;font-size:14px;line-height:1.45;color:var(--ink-500);}
.works__foot{
  margin:auto 0 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px;
}
.works__price{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink-900);}
.works__order{
  padding:8px 12px;border-radius:var(--radius-md);background:var(--brand-100);
  font-size:14px;font-weight:600;color:var(--brand-700);text-decoration:none;
}
.works__order:hover{background:var(--brand-700);color:#fff;}

@media (max-width:640px){
  .works{grid-template-columns:minmax(0,1fr);}
  .svc__metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.works__price--ask{font-family:var(--font-sans);font-size:14px;font-weight:400;color:var(--ink-500);}

/* ---------- карточка услуги ---------- */

.item{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.item__main{flex:999 1 560px;min-width:0;}
.item__aside{flex:1 1 320px;min-width:0;}
.item__photo{
  width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--line-200);margin-bottom:var(--space-5);
}

.item__price{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:20px 0 0;}
.item__price-now{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--ink-900);}
.item__price-now--ask{font-family:var(--font-sans);font-size:20px;font-weight:400;color:var(--ink-500);}
.item__price-was{color:var(--ink-500);}
.item__price-unit{color:var(--ink-500);}

.item__actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;}

.item__notes{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
}
.item__notes li{
  border:1px solid var(--line-200);border-radius:8px;padding:14px 16px;
  display:flex;flex-direction:column;gap:2px;
}
.item__notes b{font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-500);}
.item__notes span{font-size:16px;color:var(--ink-900);}

/* ---------- отзывы ---------- */

.rates{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px;
}
.rates--inline{margin:0;}
.rates__item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border:1px solid var(--line-200);border-radius:8px;
  background:#fff;font-size:14px;line-height:1.3;color:var(--ink-500);
}
.rates__item b{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ink-900);}
.rates__item a{white-space:nowrap;}

.reviews{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
.pb--reviews .reviews{margin-top:28px;}
.reviews__card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bg-subtle);border-radius:var(--radius-lg);padding:24px;
}
.reviews__stars{margin:0;font-size:18px;letter-spacing:2px;color:var(--brand-700);}
.reviews__body{margin:0;font-size:16px;line-height:1.55;}
.reviews__answer{
  margin:0;padding:14px 16px;border-radius:var(--radius-md);background:#fff;
  font-size:15px;line-height:1.5;color:var(--ink-700);
}
.reviews__foot{
  margin:auto 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;
  justify-content:space-between;font-size:14px;color:var(--ink-500);
}
.reviews__foot b{color:var(--ink-900);}
.reviews__source{text-align:right;}

.review-form{
  margin-top:40px;padding:28px;border:1px solid var(--line-200);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:16px;
}
.review-form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.review-form__field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;}
.review-form__field b{color:var(--accent-500);}
.review-form__field input,
.review-form__field select,
.review-form__field textarea{
  padding:12px;border:1px solid var(--line-300);border-radius:var(--radius-md);
  font:inherit;font-size:16px;
}
.review-form__field input,
.review-form__field select{min-height:48px;padding:0 12px;}
.review-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* --- выполненные работы ------------------------------------------------
   Карточка примера работ: пара снимков «до» и «после», марка машины чипом,
   срок и стоимость строкой фактов. Префикс cases, а не works: класс works
   занят блоком «работы и цены» на странице раздела. */

.cases{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
.cases__card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);background:#fff;
}
.cases__body{display:flex;flex-direction:column;gap:12px;padding:22px;flex:1 1 auto;}

/* снимки: пара делится пополам, одиночный занимает всю ширину карточки */
.cases__shots{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;background:var(--line-200);}
.cases__shots--pair{grid-template-columns:repeat(2,minmax(0,1fr));}
.cases__shot{position:relative;margin:0;background:var(--bg-render);}
.cases__shot img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
.cases__shot figcaption{
  position:absolute;left:10px;bottom:10px;
  padding:4px 10px;border-radius:999px;
  background:rgba(33,33,33,.82);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

.cases__tags{margin:0;display:flex;flex-wrap:wrap;gap:8px;}
.cases__chip{
  padding:5px 10px;border-radius:999px;background:var(--bg-muted);
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--brand-700);
}
.cases__chip--quiet{background:var(--bg-subtle);color:var(--ink-500);font-weight:500;}

.cases__title{margin:0;font-size:18px;font-weight:600;line-height:1.35;}
.cases__title a{color:var(--ink-900);text-decoration:none;}
.cases__title a:hover{color:var(--brand-700);}
.cases__text{margin:0;font-size:14px;line-height:1.5;color:var(--ink-500);}

.cases__facts{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:12px;padding-top:14px;border-top:1px solid var(--line-200);
}
.cases__facts dt{margin:0;font-size:12px;color:var(--ink-500);}
.cases__facts dd{margin:2px 0 0;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink-900);}

.cases__foot{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;}
.cases__lead{font-size:14px;color:var(--ink-500);}
.cases__price{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink-900);}

.cases__more{margin:auto 0 0;}
.cases__more a{font-size:14px;font-weight:600;color:var(--brand-700);text-decoration:none;}
.cases__more a:hover{color:var(--brand-800);text-decoration:underline;}

.cases--compact .cases__body{gap:8px;padding:18px;}
.cases--compact .cases__title{font-size:16px;}
/* в подборке «другие работы» снимок — опознавательный знак, а не главное */
.cases--compact .cases__shot img{aspect-ratio:16/9;}

.pb--cases .cases{margin-top:28px;}

/* --- страница работы --------------------------------------------------- */

.case{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;}
.case__main{display:flex;flex-direction:column;gap:24px;min-width:0;}
.case__main .cases__shots{border-radius:var(--radius-lg);overflow:hidden;}
.case__main .cases__shot img{aspect-ratio:3/2;}
.case__body{font-size:16px;line-height:1.6;}
.case__body p{margin:0 0 14px;}
.case__body ul{margin:0 0 14px;padding-left:22px;}
.case__body li{margin-bottom:6px;}

.case__aside{
  position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;
  padding:24px;border:1px solid var(--line-200);border-radius:var(--radius-lg);
  background:var(--bg-subtle);
}
.case__facts{margin:0;display:flex;flex-direction:column;gap:14px;}
.case__facts div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.case__facts dt{margin:0;font-size:14px;color:var(--ink-500);}
.case__facts dd{margin:0;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink-900);text-align:right;}
.case__note{margin:0;font-size:13px;line-height:1.45;color:var(--ink-500);}
.case__cat,
.case__order{justify-content:center;text-align:center;}

@media (max-width:980px){
  .case{grid-template-columns:minmax(0,1fr);}
  .case__aside{position:static;}
}
@media (max-width:520px){
  .cases__shot img{aspect-ratio:1/1;}
  .cases__shot figcaption{left:6px;bottom:6px;padding:3px 8px;font-size:11px;}
}

/* Согласие на обработку данных: на тёмной полосе записи текст светлый,
   на светлых формах — обычный приглушённый */
.cta__agree{color:rgba(255,255,255,.72);}
.cta__agree a{color:rgba(255,255,255,.92);}
.cta__agree input[type="checkbox"]{accent-color:var(--brand-300);}

.hero-g__agree--check,
.svc__agree,
.review-form__agree{color:var(--ink-500);}
.hero-g__agree--check a,
.svc__agree a,
.review-form__agree a{color:var(--brand-700);}
.hero-g__agree--check input[type="checkbox"],
.svc__agree input[type="checkbox"],
.review-form__agree input[type="checkbox"]{accent-color:var(--brand-700);}

/* ---------- таблица в тексте страницы ----------
   Прайс со старого сайта приходит обычной таблицей: разделы работ — строки
   с colspan, цена — последняя ячейка. Узкие экраны прокручивают её вбок,
   поэтому таблица лежит в обёртке, а не растягивает страницу. */

.pb-prose .table-scroll{
  overflow-x:auto;margin:28px 0;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);
}
.pb-prose .table-scroll table{min-width:520px;margin:0;}

.pb-prose table{width:100%;border-collapse:collapse;font-size:15px;}
.pb-prose thead th{
  background:var(--bg-dark);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  text-align:left;padding:14px 18px;white-space:nowrap;
}
.pb-prose thead th:last-child{text-align:right;}
.pb-prose tbody td{
  padding:12px 18px;border-top:1px solid var(--line-200);
  color:var(--ink-700);line-height:1.5;
}
.pb-prose tbody tr:nth-child(even) td{background:var(--bg-subtle);}

/* цена: своим шрифтом и не переносится */
.pb-prose tbody td:last-child{
  text-align:right;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;color:var(--ink-900);
}

/* строка-раздел: одна ячейка во всю ширину */
.pb-prose tbody td[colspan]{
  background:var(--bg-muted);color:var(--brand-700);
  font-family:var(--font-display);font-weight:700;font-size:15px;
  text-align:left;
}

/* ---------- полный прайс на отдельной странице ----------
   Тот же блок «Цены», но весь список: разделы работ подписаны, цена
   прижата вправо. На узком экране цена уходит под название, иначе
   длинные формулировки работ сжимаются в столбик по одному слову. */

.pricetable{
  margin:28px 0 0;background:#fff;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);overflow:hidden;
}
.pricetable__lead{margin:12px 0 0;max-width:62ch;}

.pricetable__group{
  padding:14px 22px;background:var(--bg-dark);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:15px;
}
.pricetable__group:not(:first-child){margin-top:0;}

.pricetable__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:14px 22px;border-top:1px solid var(--line-200);
}
.pricetable__name{flex:1 1 auto;min-width:0;color:var(--ink-700);line-height:1.5;}
.pricetable__price{
  flex:0 0 auto;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;color:var(--ink-900);
}

.pricetable__note{margin:14px 0 0;font-size:14px;color:var(--ink-500);}
.pricetable__actions{margin:24px 0 0;}

@media (max-width:560px){
  .pricetable__row{flex-direction:column;gap:4px;padding:12px 16px;}
  .pricetable__group{padding:12px 16px;}
}

/* ---------- первый экран: снимок ремзоны под текстом ----------
   Фотография цветная и контрастная, поэтому поверх лежат два слоя:
   ровное затемнение, чтобы белый текст читался везде, и градиент слева,
   где стоят заголовок и плашки. Форма справа лежит на своей карточке,
   ей подложка не нужна. */

.hero-g--shot{position:relative;isolation:isolate;overflow:hidden;}
.hero-g__media{position:absolute;inset:0;z-index:-2;}
.hero-g__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}

.hero-g--shot::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(23,23,23,.34);
}
.hero-g--shot::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(23,23,23,.93) 0%,
    rgba(23,23,23,.86) 34%,
    rgba(23,23,23,.58) 72%,
    rgba(23,23,23,.40) 100%);
}

/* плашки доводов на снимке: своя подложка, иначе они растворяются */
.hero-g--shot .hero-g__facts li{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(2px);
}
.hero-g--shot .hero-g__brand{background:rgba(255,255,255,.08);}

/* иконка в плашке первого экрана: строка с названием сдвигается вправо,
   а пояснение остаётся под ней на всю ширину */
.hero-g__facts li{position:relative;}
.hero-g__fact-icon{
  width:20px;height:20px;float:left;margin:1px 10px 0 0;
  color:var(--brand-200);
}

/* ---------- витрина: прайс и врезка с консультацией ---------- */

.catalog-prices__lead{margin:8px 0 0;max-width:62ch;color:var(--ink-700);}
.catalog-prices .pricetable{margin-top:24px;}

/* тёмная полоса: вопрос слева, действие справа */
.helpstrip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;padding:32px 36px;
  background:var(--bg-dark);color:#fff;border-radius:var(--radius-lg);
}
.helpstrip__title{
  margin:0;font-family:var(--font-display);font-size:26px;font-weight:700;color:#fff;
}
.helpstrip__text{margin:8px 0 0;color:rgba(255,255,255,.76);max-width:56ch;}

@media (max-width:560px){
  .helpstrip{padding:24px 20px;}
  .helpstrip__title{font-size:22px;}
}

/* ---------- страница раздела: условия, работы, отзывы ---------- */

.terms{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
}
.terms__item{
  padding:22px 24px;background:#fff;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);
}
.terms__item--accent{background:var(--brand-700);border-color:var(--brand-700);color:#fff;}
.terms__title{
  display:block;font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--ink-900);
}
.terms__item--accent .terms__title{font-size:28px;color:#fff;}
.terms__text{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-700);}
.terms__item--accent .terms__text{color:rgba(255,255,255,.82);}

.catworks{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;gap:16px;
  /* auto-fill, а не auto-fit: одна работа должна остаться карточкой,
     а не растянуться во всю ширину экрана */
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.catworks__card{
  padding:22px 24px;background:#fff;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);
}
.catworks__brand{
  display:inline-block;margin-bottom:10px;padding:3px 10px;
  background:var(--bg-muted);border-radius:6px;
  font-size:13px;font-weight:700;color:var(--brand-700);
}
.catworks__title{margin:0;font-family:var(--font-display);font-size:19px;line-height:1.3;}
.catworks__title a{color:var(--ink-900);text-decoration:none;}
.catworks__title a:hover{color:var(--brand-700);}
.catworks__meta{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line-200);
  display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--ink-500);
}
.catworks__meta b{font-family:var(--font-display);color:var(--ink-900);}

/* Колонки, а не сетка: отзывы разной длины, и в сетке короткий либо
   растягивается до высоты соседа, либо оставляет под собой дыру в ряд
   высотой. В колонках карточки укладываются вплотную. */
.revs{
  list-style:none;margin:24px 0 0;padding:0;
  columns:320px 3;column-gap:16px;
}
.revs__card{
  break-inside:avoid;margin:0 0 16px;
  padding:24px;background:var(--bg-subtle);border-radius:var(--radius-lg);
}
.revs__stars{margin:0;color:var(--brand-700);letter-spacing:2px;}
.revs__text{margin:12px 0 0;line-height:1.6;color:var(--ink-700);}
.revs__who{
  margin:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;
  justify-content:space-between;font-size:14px;color:var(--ink-500);
}
.revs__who b{color:var(--ink-900);}

/* Список работ раздела: фильтра и сортировок здесь нет — услугу выбирают
   по симптому, а не по цене, — поэтому карточки идут во всю ширину. */
.cat__main{flex:1 1 100%;min-width:0;}

.works__head{align-items:baseline;margin-bottom:24px;}
.works__note{margin:0;font-size:14px;color:var(--ink-500);}

/* подсказка под названием — две строки: описания приходят разной длины,
   а карточки должны стоять ровным рядом */
.works__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden;
}

/* ---------- форма записи в шапке услуги ---------- */

.svc-form{
  display:flex;flex-direction:column;gap:14px;padding:24px;
  background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-lg);
}
.svc-form__title{
  margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink-900);
}
.svc-form__note{margin:-6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-500);}
.svc-form__field{display:block;}
.svc-form__field span{
  display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--ink-700);
}
.svc-form__field input{
  width:100%;min-height:48px;padding:0 14px;
  border:1px solid var(--line-250);border-radius:8px;
  font:inherit;font-size:16px;color:var(--ink-900);background:#fff;
}
.svc-form__field input:focus{outline:2px solid var(--brand-300);outline-offset:1px;}
.svc-form__agree{font-size:13px;line-height:1.45;color:var(--ink-500);}
.svc-form__agree a{color:var(--brand-700);}
.svc-form__agree input[type="checkbox"]{accent-color:var(--brand-700);}

/* ---------- страница услуги: разбор работы ---------- */

.svc__tags{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;}
.svc__tag{
  display:inline-block;padding:4px 12px;background:var(--bg-muted);
  border-radius:999px;font-size:13px;font-weight:700;
  color:var(--brand-700);text-decoration:none;
}
.svc__tag:hover{background:var(--brand-700);color:#fff;}

.svc__meta{
  margin:14px 0 0;display:flex;flex-wrap:wrap;gap:4px 20px;
  font-size:14px;color:var(--ink-500);
}
.svc__meta b{color:var(--ink-700);}

/* Снимок на странице услуги. Раньше он выводился во всю высоту файла и
   занимал пол-экрана. Высота ограничена, кадр заполняется: снимки со
   старого сайта разных пропорций, и поля по бокам у широкого фото
   выглядят хуже, чем обрезанные края. */
.svc__shot{
  margin:28px 0 0;background:var(--bg-render);
  border-radius:var(--radius-lg);overflow:hidden;
}
.svc__shot img{width:100%;height:320px;object-fit:cover;display:block;}

@media (max-width:640px){
  .svc__shot img{height:220px;}
}

/* врезка посреди текста: человек уже понял, что сам не разберётся */
.svc__offer{
  margin:32px 0 0;padding:26px 28px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;
  background:var(--bg-dark);border-radius:var(--radius-lg);color:#fff;
}
.svc__offer-title{
  margin:0;font-family:var(--font-display);font-size:21px;font-weight:700;color:#fff;
}
.svc__offer-text{margin:8px 0 0;max-width:52ch;color:rgba(255,255,255,.78);line-height:1.55;}

.svc__expert{
  margin:36px 0 0;padding:20px 24px;
  background:var(--bg-subtle);border-left:3px solid var(--brand-700);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.svc__expert-name{margin:0;font-size:15px;color:var(--ink-700);}
.svc__expert-note{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-500);}

/* содержание: длинный разбор листают не подряд */
.svc__toc{
  margin-top:20px;padding:20px 22px;
  background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-lg);
}
.svc__toc-title{
  margin:0 0 12px;font-family:var(--font-display);font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);
}
.svc__toc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.svc__toc a{
  color:var(--ink-700);text-decoration:none;font-size:15px;line-height:1.4;
  display:block;padding-left:12px;border-left:2px solid var(--line-200);
}
.svc__toc a:hover{color:var(--brand-700);border-left-color:var(--brand-700);}

@media (min-width:1000px){
  .item__aside{position:sticky;top:20px;}
}

@media (max-width:560px){
  .svc__offer{padding:22px 20px;}
  .svc__offer-title{font-size:19px;}
}

/* ---------- перенесённый текст услуги ----------
   Тексты пришли со старого сайта: списки, таблицы цен, подводки к спискам.
   Слова не правим — правим подачу, чтобы страница читалась не простынёй. */

.prose--rich{max-width:72ch;font-size:17px;line-height:1.65;color:var(--ink-700);}
.prose--rich > * + *{margin-top:18px;}

/* вводный абзац: с него начинают читать */
.prose--rich .prose__lead{font-size:19px;line-height:1.55;color:var(--ink-800);}

/* подводка к списку или таблице — в оригинале это строка, оборванная <br> */
.prose--rich .prose__kicker{
  margin-top:32px;margin-bottom:-4px;
  font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--ink-900);
}

.prose--rich h2{
  margin-top:40px;font-family:var(--font-display);font-size:26px;
  font-weight:700;line-height:1.25;color:var(--ink-900);
}
.prose--rich h3{
  margin-top:32px;font-family:var(--font-display);font-size:20px;
  font-weight:700;line-height:1.3;color:var(--ink-900);
}

/* списки: воздух между пунктами и заметный маркер */
.prose--rich ul,
.prose--rich ol{margin-top:14px;padding-left:0;list-style:none;}
.prose--rich li{position:relative;padding-left:26px;}
.prose--rich li + li{margin-top:10px;}
.prose--rich ul > li::before{
  content:"";position:absolute;left:6px;top:11px;
  width:7px;height:7px;border-radius:2px;background:var(--brand-700);
}
.prose--rich ol{counter-reset:li;}
/* селектор с родителем: в базовом стиле есть своё правило для ol > li,
   и менее точное наше до отступа не доходило — номер слипался с текстом */
.prose--rich ol > li{counter-increment:li;padding-left:30px;}
.prose--rich ol > li::before{
  /* базовый стиль рисует кружок для любого li: гасим его размеры и фон,
     иначе они подмешиваются к номеру и тот наезжает на текст */
  content:counter(li);position:absolute;left:0;top:0;
  width:auto;height:auto;min-width:20px;
  background:none;border-radius:0;
  font-family:var(--font-display);font-weight:700;
  font-size:15px;line-height:inherit;color:var(--brand-700);
}

/* таблица цен внутри текста */
.prose--rich .prose__table{
  margin-top:24px;overflow-x:auto;
  border:1px solid var(--line-200);border-radius:var(--radius-lg);
}
.prose--rich table{width:100%;min-width:480px;border-collapse:collapse;font-size:15px;margin:0;}
.prose--rich th{
  padding:13px 16px;background:var(--bg-dark);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:14px;text-align:left;
  white-space:nowrap;
}
.prose--rich td{padding:12px 16px;border-top:1px solid var(--line-200);vertical-align:top;}
.prose--rich tbody tr:nth-child(even) td{background:var(--bg-subtle);}

/* цитата-врезка */
.prose--rich blockquote{
  margin-top:28px;padding:18px 22px;
  background:var(--bg-subtle);border-left:3px solid var(--brand-700);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:16px;color:var(--ink-700);
}
.prose--rich blockquote > :first-child{margin-top:0;}

.prose--rich a{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px;}
.prose--rich a:hover{color:var(--brand-800);}

/* телефон в тексте — не обычная ссылка, по нему звонят */
.prose--rich a[href^="tel:"]{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  text-decoration:none;white-space:nowrap;
}
.prose--rich a[href^="tel:"]:hover{text-decoration:underline;}

.prose--rich b,
.prose--rich strong{color:var(--ink-900);font-weight:700;}

@media (max-width:560px){
  .prose--rich{font-size:16px;}
  .prose--rich .prose__lead{font-size:17px;}
  .prose--rich .prose__kicker{font-size:17px;margin-top:26px;}
  .prose--rich h2{font-size:22px;}
}

/* кнопка заказа, доставшаяся от старого сайта: вела в модальное окно,
   теперь ведёт на форму записи этой же страницы */
.prose--rich .prose__cta{
  display:inline-block;margin:6px 0;padding:12px 22px;
  background:var(--brand-700);color:#fff;border-radius:8px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  text-decoration:none;
}
.prose--rich .prose__cta:hover{background:var(--brand-800);color:#fff;text-decoration:none;}

/* ---------- этапы: ровный ряд без одинокой карточки ----------
   Шагов пять, а в ряд по умолчанию встаёт четыре — последний остаётся
   висеть один. Раскладываем по три, а два последних растягиваем на
   половину ряда каждый: ряд закрыт, выдумывать шестой шаг не нужно.

   Сетка на шесть колонок: обычная карточка занимает две, растянутая —
   три. Правила срабатывают только тогда, когда в последнем ряду
   действительно два элемента. */

@media (min-width:860px){
  .pb--steps .pb-steps{grid-template-columns:repeat(6,1fr);}
  .pb--steps .pb-steps__item{grid-column:span 2;}

  /* пять шагов: 3 + 2 */
  .pb--steps .pb-steps__item:nth-child(4):nth-last-child(2),
  .pb--steps .pb-steps__item:nth-child(5):nth-last-child(1){grid-column:span 3;}

  /* два шага: оба во всю ширину ряда */
  .pb--steps .pb-steps__item:nth-child(1):nth-last-child(2),
  .pb--steps .pb-steps__item:nth-child(2):nth-last-child(1){grid-column:span 3;}

  /* четыре шага: 2 + 2, иначе четвёртый остаётся один */
  .pb--steps .pb-steps__item:nth-child(1):nth-last-child(4),
  .pb--steps .pb-steps__item:nth-child(2):nth-last-child(3),
  .pb--steps .pb-steps__item:nth-child(3):nth-last-child(2),
  .pb--steps .pb-steps__item:nth-child(4):nth-last-child(1){grid-column:span 3;}

  /* восемь шагов: ровные 3 + 3 + 2 */
  .pb--steps .pb-steps__item:nth-child(7):nth-last-child(2),
  .pb--steps .pb-steps__item:nth-child(8):nth-last-child(1){grid-column:span 3;}
}

/* Преимущества: плиток тоже пять, и нижние две не должны выглядеть
   обрезками верхнего ряда — растягиваем их по тому же правилу. */

@media (min-width:860px){
  .pb--advantages .pb-grid--cards{grid-template-columns:repeat(6,1fr);}
  .pb--advantages .pb-card{grid-column:span 2;}

  .pb--advantages .pb-card:nth-child(4):nth-last-child(2),
  .pb--advantages .pb-card:nth-child(5):nth-last-child(1),
  .pb--advantages .pb-card:nth-child(1):nth-last-child(2),
  .pb--advantages .pb-card:nth-child(2):nth-last-child(1),
  .pb--advantages .pb-card:nth-child(7):nth-last-child(2),
  .pb--advantages .pb-card:nth-child(8):nth-last-child(1){grid-column:span 3;}

  .pb--advantages .pb-card:nth-child(1):nth-last-child(4),
  .pb--advantages .pb-card:nth-child(2):nth-last-child(3),
  .pb--advantages .pb-card:nth-child(3):nth-last-child(2),
  .pb--advantages .pb-card:nth-child(4):nth-last-child(1){grid-column:span 3;}
}

/* ---------- снимок в плитке раздела ----------
   По макету марку показывают фотографией машины: её узнают быстрее, чем
   название. Высота фиксированная, кадрируем по центру — снимки со старого
   сайта разного размера и пропорций. */

.dirs__shot{
  display:block;margin:-20px -20px 16px;
  background:var(--bg-render);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;
}
.dirs__shot img{width:100%;height:150px;object-fit:cover;display:block;}
.dirs__card--shot{padding-top:20px;}

@media (max-width:560px){
  .dirs__shot img{height:130px;}
}

/* снимок в карточке раздела на витрине: небольшой, рядом с названием */
.groups__shot{
  flex:0 0 auto;width:64px;height:48px;overflow:hidden;margin-left:14px;
  border-radius:var(--radius-md);background:var(--bg-render);
}
.groups__shot img{width:100%;height:100%;object-fit:cover;display:block;}

/* снимок над формой расчёта в шапке раздела */
.svc__side{flex:0 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px;}
/* Форма задумана элементом горизонтального ряда, и её flex-basis — это
   ширина. Внутри колонки basis стал бы высотой: форма застывала на 360px,
   согласие растягивалось, а кнопка уезжала за край карточки. */
.svc__side .svc__calc{flex:none;margin:0;}
.svc__side .svc__agree{flex:none;}
.svc .svc__shot{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-render);}
.svc .svc__shot img{width:100%;height:210px;object-fit:cover;display:block;}

@media (max-width:860px){
  .svc .svc__shot img{height:180px;}
}

/* ---------- цены на ходовые работы в шапке раздела ----------
   Заменили счётчики: человеку важно, сколько стоит ремонт, а не сколько
   позиций в разделе. Две колонки на широком экране, одна на телефоне. */

.svc__prices{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 32px;
  background:#fff;border:1px solid var(--line-200);border-radius:var(--radius-lg);
  padding:6px 22px;
}
.svc__prices li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line-200);
}
/* нижняя граница не нужна последним в каждом столбце */
.svc__prices li:last-child,
.svc__prices li:nth-last-child(2):nth-child(odd){border-bottom:0;}

.svc__prices-name{color:var(--ink-700);font-size:15px;line-height:1.35;}
.svc__prices-value{
  white-space:nowrap;font-family:var(--font-display);font-weight:700;
  font-size:16px;color:var(--ink-900);
}
.svc__prices-note{margin:12px 0 0;font-size:13px;color:var(--ink-500);max-width:56ch;}

@media (max-width:720px){
  .svc__prices{grid-template-columns:minmax(0,1fr);gap:0;}
  .svc__prices li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line-200);}
  .svc__prices li:last-child{border-bottom:0;}
}

/* ---------- автопарк: фирменная полоса ---------- */

.pb--fleet .fleet{background:var(--brand-700);}
.fleet__title{font-family:var(--font-display);font-weight:700;}
.fleet__list li{font-size:15px;color:rgba(255,255,255,.88);}
.fleet__actions .btn{justify-content:center;}

/* кнопки на фирменной полосе: белая и с белой рамкой */
.btn--light{background:#fff;color:var(--brand-700);border:1px solid #fff;}
.btn--light:hover{background:#f2f3f8;color:var(--brand-800);}
.btn--ghost-light{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);
}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;}

/* ---------- преимущества: крупный первый довод и снимок ---------- */

.adv-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;margin:24px 0 16px;
}
.adv-top__card{
  display:flex;flex-direction:column;justify-content:center;
  padding:32px 34px;background:var(--bg-dark);color:#fff;
  border-radius:var(--radius-lg);
}
.adv-top__value{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,4vw,42px);line-height:1.1;color:#fff;
}
.adv-top__text{margin:14px 0 0;line-height:1.55;color:rgba(255,255,255,.78);max-width:46ch;}

.adv-top__shot{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-render);
}
.adv-top__shot img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block;}

@media (max-width:860px){
  .adv-top{grid-template-columns:minmax(0,1fr);}
  .adv-top__card{padding:26px 22px;}
  .adv-top__shot img{min-height:200px;}
}

/* ---------- карта проезда на странице ---------- */

.sitemap-block__inner{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:28px 40px;align-items:start;
}
.sitemap-block__address{margin:16px 0 0;font-size:17px;line-height:1.5;color:var(--ink-800);}
.sitemap-block__phone{margin:12px 0 0;}
.sitemap-block__phone a{
  font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--ink-900);text-decoration:none;
}
.sitemap-block__phone a:hover{color:var(--brand-700);}
.sitemap-block__hours{margin:8px 0 0;color:var(--ink-500);}

.sitemap-block__map{
  min-height:320px;background:var(--bg-render);
  border:1px solid var(--line-200);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sitemap-block__map iframe{width:100%;height:360px;border:0;display:block;}

@media (max-width:860px){
  .sitemap-block__inner{grid-template-columns:minmax(0,1fr);}
  .sitemap-block__map{min-height:260px;}
  .sitemap-block__map iframe{height:280px;}
}

/* условия в шапке раздела: плитки мельче, без отступов секции */
.terms--compact{margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.terms--compact .terms__item{padding:16px 18px;}
.terms--compact .terms__title{font-size:16px;}
.terms--compact .terms__item--accent .terms__title{font-size:22px;}
.terms--compact .terms__text{margin-top:6px;font-size:14px;}

/* Плитки разделов — по три в ряд: с фотографиями четыре в ряд мельчат
   снимок, а шесть плиток ложатся ровными рядами 3 + 3. */
@media (min-width:1000px){
  .dirs{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---------- разбор неисправности на странице услуги ---------- */

/* короткий ответ: его читают первым и его же забирают быстрые ответы */
.svc__summary{
  margin:22px 0 0;padding:20px 24px;
  background:var(--bg-muted);border-radius:var(--radius-lg);
}
.svc__summary-label{
  margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-700);
}
.svc__summary-text{margin:0;font-size:17px;line-height:1.55;color:var(--ink-800);}

/* таблица причин */
.causes{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;}
.causes th{
  padding:13px 16px;background:var(--bg-dark);color:#fff;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:14px;
}
.causes td{padding:12px 16px;border-top:1px solid var(--line-200);vertical-align:top;color:var(--ink-700);}
.causes tbody tr:nth-child(even) td{background:var(--bg-subtle);}
.causes td:first-child{font-weight:600;color:var(--ink-900);}

/* вопросы: раскрываются без скриптов */
.faq{border:1px solid var(--line-200);border-radius:var(--radius-lg);overflow:hidden;}
.faq__item + .faq__item{border-top:1px solid var(--line-200);}
.faq__question{
  padding:16px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink-900);
}
.faq__question::-webkit-details-marker{display:none;}
.faq__question::after{content:"+";float:right;color:var(--brand-700);font-weight:700;}
.faq__item[open] .faq__question::after{content:"−";}
.faq__answer{padding:0 22px 18px;color:var(--ink-700);line-height:1.6;}
.faq__answer p{margin:0;}

/* Разборы неисправностей на странице раздела: читаются подряд, поэтому
   колонка узкая — строка во всю ширину контейнера неудобна глазу. */
.section--qa .pb__title,
.section--qa .faq{max-width:860px;}

/* Блок с картой на главной.

   Заголовок и адрес по умолчанию стоят над картой отдельной строкой, и
   рядом с картой высотой 360px остаётся пустая полоса. Переносим левую
   колонку в одну сетку с картой: карта занимает обе строки, заголовок
   прижат к низу первой, адрес — к верху второй, и вместе они оказываются
   примерно на середине карты. Вертикальные поля у блока меньше обычных:
   это справка, а не самостоятельный раздел. */
.pb--contacts{padding-top:44px;padding-bottom:44px;}
.pb--contacts .pb__container{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,1.9fr);
  column-gap:40px;
}
.pb--contacts .pb__title{grid-column:1;grid-row:1;align-self:end;margin:0 0 20px;}
.pb--contacts .pb-contacts{display:contents;}
.pb--contacts .pb-contacts__list{grid-column:1;grid-row:2;align-self:start;}
.pb--contacts .pb-contacts__map{grid-column:2;grid-row:1 / 3;}
/* на странице контактов адресов несколько, и левая колонка может
   перерасти карту — тогда карта тянется за ней, а не оставляет серую
   полосу под собой */
.pb--contacts .pb-contacts__map iframe{height:100%;min-height:360px;}

@media (max-width:860px){
  /* на узком экране карта уходит под текст — сетка не нужна */
  .pb--contacts .pb__container{display:block;}
  .pb--contacts .pb-contacts{display:flex;}
  .pb--contacts .pb__title{margin-bottom:16px;}
}