/* ==========================================================================
   Тепло-Город — общие стили
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Палитра
   -------------------------------------------------------------------------- */
:root {
  --blue: #1B75BC;
  --blue-dark: #0E4C7E;
  --blue-light: #E8F2FA;
  --red: #C8102E;
  --red-dark: #8f0b20;
  --text: #2B2B2B;
  /* было #6E7A85 — 4.39:1 на белом, ниже нормы AA.
     #5E6A75 даёт 5.09:1 на белом и 4.93:1 на голубом --blue-light,
     то есть отдельного цвета для голубых подложек не требуется */
  --text-muted: #5E6A75;
  --border: #DCE3E9;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
body { margin: 0; background: #ffffff; color: var(--text); font-family: 'PT Sans', Arial, sans-serif; }
* { box-sizing: border-box; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* min-width: 1280px снят ради адаптива и возвращён в разделе 30 медиазапросом
   от 1280px — на десктопе вычисленное значение то же, что было */
.page {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. Сетка и секции
   -------------------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section { padding: 56px 0; }
.section--light { background: var(--blue-light); }
.section--bordered { border-top: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   4. Типографика
   -------------------------------------------------------------------------- */
.h1 {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 38px;
  margin: 0 0 32px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.h2 {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 30px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.lead { margin: 0 0 18px; font-size: 18px; }
.lead--wide { max-width: 900px; }

/* --------------------------------------------------------------------------
   5. Кнопки и телефоны
   -------------------------------------------------------------------------- */
.btn {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  border: 0;
  border-radius: 2px;
}

.btn--red { background: var(--red); color: #ffffff; }
.btn--red:hover { background: var(--red-dark); color: #ffffff; }

.btn--blue { background: var(--blue); color: #ffffff; }
.btn--blue:hover { background: var(--blue-dark); color: #ffffff; }

/* --------------------------------------------------------------------------
   6. Заглушки (плейсхолдеры изображений)
   -------------------------------------------------------------------------- */
.ph {
  border: 1px solid var(--border);
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Реальное фото внутри рамки .ph: рамка (div.ph) держит границу и размер
   (aspect-ratio/height по модификатору), а <img class="ph__img"> внутри
   неё просто заполняет собой всю рамку без искажений. Разделение нужно
   потому, что <img> — replaced-элемент: как grid/flex-item без явных
   width/height он тянется по СВОЕМУ натуральному размеру, а не по треку
   контейнера, и .ph--h200/.ph--square без этого правила не сработали бы
   на настоящей картинке (только на плейсхолдере-заглушке). */
.ph__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ph--square { aspect-ratio: 1/1; width: 100%; object-fit: cover; }
.ph--tile { aspect-ratio: 4/3; }

.ph__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
  background: #ffffff;
  padding: 4px 8px;
  border: 1px solid var(--border);
}

.ph__label--sm { font-size: 11px; padding: 3px 6px; }

/* текстовая заглушка внутри строки — подчёркнута пунктиром */
.stub-underline { border-bottom: 1px dashed var(--text-muted); }

/* --------------------------------------------------------------------------
   7. Шапка
   -------------------------------------------------------------------------- */
.header { background: #ffffff; }

.header__top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 42px;
  align-items: center;
}

.header__logo { display: flex; gap: 14px; align-items: center; text-decoration: none; }

.header__logo-mark {
  width: 240px;
  height: auto;
  flex: none;
  object-fit: contain;
}

.header__logo-body { display: block; }

.header__logo-name {
  display: block;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--blue);
  line-height: 1;
}

.header__logo-tagline {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  max-width: 330px;
}

.header__info { display: grid; gap: 12px; font-size: 15px; color: var(--text-muted); line-height: 1.3; }
.header__info-row { display: flex; gap: 10px; align-items: center; white-space: nowrap; }

.header__mail { color: var(--text-muted); }
.header__mail:hover { color: var(--blue); }

.header__social { display: flex; gap: 12px; align-items: center; }
.header__social-link { color: var(--blue); display: flex; }
.header__social-link:hover { color: var(--blue-dark); }

.header__phones { display: flex; flex-direction: column; justify-content: center; gap: 6px; }

.header__phone {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--red);
  white-space: nowrap;
}

.header__phone:hover { color: var(--red-dark); }

.header__cta {
  align-self: center;
  display: inline-block;
  font-size: 15px;
  padding: 13px 24px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Основное меню
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--blue);
  border-top: 1px solid var(--blue-dark);
}

.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
}

/* Компактный логотип и контакты — только при прокрутке */
.nav__mark { display: none; gap: 10px; align-items: center; text-decoration: none; }

.nav__mark-icon {
  width: 150px;
  height: auto;
  flex: none;
  object-fit: contain;
}

.nav__mark-text {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.nav__contacts { display: none; align-items: center; gap: 20px; }

.nav__phone { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 19px; color: #ffffff; }
.nav__phone:hover { color: var(--blue-light); }

.nav__cta { font-size: 15px; padding: 9px 18px; }

.nav--sticky .nav__mark { display: flex; }
.nav--sticky .nav__contacts { display: flex; }

.nav__services {
  position: relative;
}

.nav__services.is-open {
  /* дропдаун рисуется ниже .nav__inner; без z-index соседние .nav__link
     перехватывают курсор поверх белой панели */
  z-index: 60;
}

.nav__services-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
  /* элемент — ссылка на /services/, но выглядит и занимает место ровно как
     прежняя кнопка: line-height нужен явно, иначе унаследуется 1.55 от .page */
  line-height: normal;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nav__services-btn:hover { color: var(--blue-light); }
.nav__services-arrow { font-size: 11px; }

.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 280px;
  /* прозрачный «мост» от нижней границы trigger до видимой панели:
     курсор остаётся внутри .nav__dropdown, а не в пустоте между кнопкой
     и белым блоком (раньше top: 38px оставлял ~17px вне hit-area) */
  padding-top: 17px;
  background: transparent;
  z-index: 50;
}

.nav__services.is-open .nav__dropdown { display: block; }

.nav__dropdown-panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(14, 76, 126, 0.14);
}

.nav__dropdown-link { display: block; padding: 11px 20px; color: var(--text); font-size: 16px; }
.nav__dropdown-link:hover { background: var(--blue-light); color: var(--blue-dark); }

/* Мегаменю «Услуги»: слева список направлений (реальные ссылки на
   родительские страницы), справа — дочерние услуги выбранного направления.
   Правая панель не занимает место в потоке (position: absolute от
   .nav__megamenu), поэтому высота левой колонки не зависит от того,
   у какого направления сейчас самый длинный список. */
.nav__megamenu {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 950px;
  max-width: calc(100vw - 32px);
  min-height: 430px;
  padding: 0;
}

.nav__megamenu-cats {
  flex: none;
  width: 230px;
  padding: 8px 0;
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}

.nav__megamenu-cat {
  display: block;
  padding: 13px 20px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  border-left: 3px solid transparent;
}

.nav__megamenu-cat:hover,
.nav__megamenu-cat.is-active {
  background: var(--blue-light);
  color: var(--blue-dark);
  border-left-color: var(--red);
}

/* «Автономная газификация» — обычная ссылка без своей правой панели,
   отделена от переключаемых категорий тонкой линией (тот же --border,
   что и у .nav__megamenu-cats). Не участвует в hover/active-логике
   категорий, поэтому border-left оставлен прозрачным (не показывает
   красный акцент активного раздела), чтобы её нельзя было спутать
   с переключаемым пунктом. */
.nav__megamenu-more {
  display: block;
  margin-top: 8px;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  border-left: 3px solid transparent;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.nav__megamenu-more:hover { background: var(--blue-light); color: var(--blue-dark); }

.nav__megamenu-panel {
  position: absolute;
  top: 0;
  left: 230px;
  right: 0;
  bottom: 0;
  display: none;
  overflow-y: auto;
  padding: 20px 28px;
  box-sizing: border-box;
}

.nav__megamenu-panel.is-active { display: block; }

.nav__megamenu-all {
  display: inline-block;
  margin-bottom: 16px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--red);
}

.nav__megamenu-all:hover { color: var(--red-dark); }

.nav__megamenu-cols { display: flex; gap: 28px; }
.nav__megamenu-col { flex: 1; min-width: 0; }

.nav__megamenu-group { margin-bottom: 16px; }
.nav__megamenu-group:last-child { margin-bottom: 0; }

.nav__megamenu-group-title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.nav__megamenu-link {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
}

.nav__megamenu-link:hover { color: var(--blue); }

.nav__link { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 16px; color: #ffffff; }
.nav__link:hover { color: var(--blue-light); }

.nav__spacer { flex: 1; }

/* --------------------------------------------------------------------------
   9. Хлебные крошки
   -------------------------------------------------------------------------- */
.breadcrumbs { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; }
.breadcrumbs__inner { font-size: 14px; color: var(--text-muted); }
.breadcrumbs__link { color: var(--text-muted); }
.breadcrumbs__link:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   10. Первый экран страницы услуги
   -------------------------------------------------------------------------- */
.hero { padding: 20px 0 8px; }

.hero__grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}

.hero__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.hero__phone { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 26px; color: var(--red); }
.hero__phone:hover { color: var(--red-dark); }

.hero__cta { font-size: 16px; padding: 14px 28px; }

/* --------------------------------------------------------------------------
   11. Карточки
   -------------------------------------------------------------------------- */
.card { background: #ffffff; border: 1px solid var(--border); padding: 22px; color: var(--text); }

a.card { display: block; text-decoration: none; }
a.card:hover { border-color: var(--blue); color: var(--text); }

.card__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 17px; margin-top: 14px; }
.card__title--sm { font-size: 16px; }

/* --------------------------------------------------------------------------
   12. Способы отопления
   -------------------------------------------------------------------------- */
.ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --------------------------------------------------------------------------
   13. Преимущества
   -------------------------------------------------------------------------- */
.advantages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.advantage { background: #ffffff; box-shadow: 0 1px 3px rgba(14, 76, 126, 0.08); padding: 24px; }
.advantage__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 18px; margin: 14px 0 8px; }
.advantage__text { margin: 0; font-size: 15px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   14. Цены
   -------------------------------------------------------------------------- */
.price__intro { max-width: 800px; margin-bottom: 28px; }
.price__layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }

.price-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); font-size: 16px; }
.price-table__head-row { background: var(--blue); }

.price-table__th {
  text-align: left;
  padding: 13px 18px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
}

.price-table__th--unit { width: 90px; }
.price-table__th--price { text-align: right; width: 140px; }

.price-table__row { background: #ffffff; border-bottom: 1px solid var(--border); }
.price-table__row--alt { background: var(--blue-light); }

.price-table__td { padding: 12px 18px; }
.price-table__td--unit { color: var(--text-muted); }

.price-table__td--price {
  text-align: right;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  white-space: nowrap;
}

.price-aside {
  position: sticky;
  top: 72px;
  background: var(--blue-light);
  border-top: 4px solid var(--red);
  padding: 26px;
}

.price-aside__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 21px; margin: 0 0 10px; }
.price-aside__text { margin: 0 0 18px; font-size: 15px; color: var(--text-muted); }
.price-aside__btn { display: block; text-align: center; font-size: 16px; padding: 14px; margin-bottom: 14px; }

.price-aside__phone {
  display: block;
  text-align: center;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
}

.price-aside__phone:hover { color: var(--red-dark); }

/* --------------------------------------------------------------------------
   15. Факторы цены
   -------------------------------------------------------------------------- */
.factors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.factor { background: #ffffff; border: 1px solid var(--border); padding: 24px; }
.factor__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 19px; margin: 0 0 10px; }
.factor__text { margin: 0; font-size: 16px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   16. Галерея объектов
   -------------------------------------------------------------------------- */
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   17. Списки с маркерами
   -------------------------------------------------------------------------- */
.bullets { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 18px; }
.bullets__item { display: flex; gap: 12px; }
.bullets__marker { width: 8px; height: 8px; background: var(--blue); margin-top: 9px; flex: none; }
.bullets__link { color: var(--blue); text-decoration: none; }
.bullets__link:hover { color: var(--blue-dark); text-decoration: underline; }

.bullets--sm { margin: 0 0 16px; gap: 6px; font-size: 16px; }
.bullets--sm .bullets__item { gap: 10px; }
.bullets--sm .bullets__marker { width: 6px; height: 6px; }

/* --------------------------------------------------------------------------
   18. Блок услуг раздела
   -------------------------------------------------------------------------- */
.services__intro { max-width: 800px; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --------------------------------------------------------------------------
   19. Варианты отопления (аккордеон)
   -------------------------------------------------------------------------- */
.variants__container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.variants__summary {
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.variants__arrow { font-size: 14px; color: var(--blue); }
.variants__body { padding-top: 24px; }
.variants__intro { margin: 0 0 32px; font-size: 17px; color: var(--text); }
.variants__list { display: grid; gap: 36px; }

.variant__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 22px; margin: 0 0 14px; }
.variant__text { margin: 0 0 14px; font-size: 16px; }
.variant__subhead { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 17px; margin: 0 0 8px; }
.variant__subhead-intro { margin: 0 0 12px; font-size: 16px; }

.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.proscons__col { background: #ffffff; padding: 18px; }
.proscons__col--pros { border-top: 3px solid var(--blue); }
.proscons__col--cons { border-top: 3px solid var(--red); }

.proscons__label { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.proscons__label--pros { color: var(--blue); }
.proscons__label--cons { color: var(--red); }

.proscons__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }

/* --------------------------------------------------------------------------
   20. Блок заявки
   -------------------------------------------------------------------------- */
.cta { padding: 64px 0 24px; background: var(--blue); color: #ffffff; }

.cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

.cta__title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 34px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.cta__text { margin: 0 0 24px; font-size: 18px; color: #ffffff; max-width: 560px; }

.cta__phone {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #ffffff;
  display: inline-block;
}

.cta__phone:hover { color: var(--blue-light); }

/* --------------------------------------------------------------------------
   21. Форма
   -------------------------------------------------------------------------- */
.form { background: #ffffff; color: var(--text); padding: 28px; border-top: 4px solid var(--red); }
.form__label { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }

.form__input {
  width: 100%;
  padding: 12px 14px;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 14px;
}

.form__input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-light); }

.form__agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
  cursor: pointer;
}

.form__agree span {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.form__agree a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__checkbox { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.form__submit { width: 100%; padding: 14px; font-size: 16px; cursor: pointer; }

.form__sent { display: none; font-size: 14px; color: var(--blue); margin: 12px 0 0; }
.form.is-sent .form__sent { display: block; }
.form__error { display: none; font-size: 14px; color: #b42318; margin: 12px 0 0; line-height: 1.45; }
.form.is-error .form__error { display: block; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form.is-sending .form__submit { opacity: 0.7; cursor: wait; }

/* --------------------------------------------------------------------------
   22. Подвал
   -------------------------------------------------------------------------- */
.footer {
  background: var(--blue);
  background-image: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #ffffff;
  padding: 36px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer__top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 40px;
}

.footer__logo-link { display: block; margin-bottom: 10px; }
.footer__logo { display: block; width: 210px; height: auto; object-fit: contain; }
.footer__brand { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 10px; }
.footer__about { margin: 0 0 18px; font-size: 16px; color: #ffffff; max-width: 280px; }

.footer__social { display: flex; gap: 16px; align-items: center; }
.footer__social-link { color: #ffffff; display: flex; }
.footer__social-link:hover { color: var(--blue-light); }

.footer__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 17px; margin: 0 0 14px; }

/* Заголовок колонки подвала на телефоне работает как кнопка аккордеона.
   Кнопкой должен быть вложенный <button>, а не сам <h3>: роль button
   заголовку не разрешена. На десктопе кнопка сброшена до обычного текста
   и в вёрстке не участвует. */
.footer__title-btn {
  display: inline;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }

/* Ссылки подвала стали белыми ради контраста (было --blue-light, 4.29:1).
   Раньше наведение показывалось сменой цвета на белый — теперь цвет и так
   белый, поэтому отклик даёт подчёркивание: без него ссылка перестала бы
   отзываться вовсе. */
.footer__link { color: #ffffff; }
.footer__link:hover { color: #ffffff; text-decoration: underline; }

.footer__contacts { display: grid; gap: 8px; font-size: 16px; color: #ffffff; }
.footer__phone { color: #ffffff; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 21px; }
.footer__phone:hover { color: var(--blue-light); }
.footer__mail { color: #ffffff; }
.footer__mail:hover { color: #ffffff; text-decoration: underline; }

.footer__bottom { max-width: 1200px; margin: 26px auto 0; padding: 0 24px; }

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 14px 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  color: #ffffff;
  flex-wrap: wrap;
}

.footer__legal-links { display: flex; gap: 20px; }

/* --------------------------------------------------------------------------
   23. Плашка cookie
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(43, 43, 43, 0.10);
}

.cookie.is-hidden { display: none; }

.cookie__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.cookie__text { margin: 0; font-size: 15px; color: var(--text); }
.cookie__btn { padding: 11px 22px; font-size: 15px; cursor: pointer; white-space: nowrap; }

/* --------------------------------------------------------------------------
   24. Страницы услуг: водоснабжение, канализация, сварочные работы
   Эти страницы свёрстаны чуть иначе, чем отопление (другие отступы таблицы,
   белая колонка-врезка, четыре колонки преимуществ), поэтому отличия вынесены
   в модификаторы, а не переопределяют базовые классы.
   -------------------------------------------------------------------------- */
.h1--plain { text-wrap: wrap; }
.lead--flush { margin-bottom: 0; }
.container--narrow { max-width: 800px; }

.hero--flush { padding: 20px 0 56px; }
.hero__grid--flush { margin-bottom: 0; }

.hero__grid--intro-only { grid-template-columns: minmax(0, 1fr); }

.price-table--boxed { background: #ffffff; }
.price-table--boxed .price-table__th,
.price-table--boxed .price-table__td { padding: 12px 16px; }

.price-aside--white { background: #ffffff; }

.advantages__grid--four { grid-template-columns: repeat(4, 1fr); gap: 20px; }

.advantage--numbered { position: relative; overflow: hidden; padding: 20px; }

.advantage__num {
  position: absolute;
  top: 2px;
  right: 14px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: var(--blue-light);
  line-height: 1;
  pointer-events: none;
}

.advantage__note { position: relative; margin: 24px 0 0; font-size: 15px; }

.service-link {
  display: block;
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.service-link:hover { border-color: var(--blue); color: var(--blue); }

/* Канализация: карточка услуги с иконкой, описанием и стрелкой.
   Цвет текста при наведении не меняется — в исходнике он задан инлайном
   и перекрывает общее правило a:hover. */
.container--mid { max-width: 900px; }

.ph--h200 { height: 200px; }
.ph--white { background-color: #ffffff; }

.advantage--compact { padding: 20px; }
.advantage__caption { margin: 12px 0 0; font-size: 15px; }

.dealer {
  margin-top: 24px;
  background: var(--blue-light);
  border-left: 4px solid var(--blue);
  padding: 32px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}

.dealer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 17px; }
.dealer__muted { color: #8FA0AC; }

.service-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
}

.service-card:hover { border-color: var(--blue); color: var(--text); }

.service-card__icon { flex: none; }
.service-card__body { flex: 1; }
.service-card__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.service-card__desc { font-size: 14px; color: var(--text-muted); }
.service-card__arrow { color: var(--blue); font-size: 18px; flex: none; }

/* Сварочные работы: узкая таблица сварки труб, пять колонок преимуществ
   и отдельная таблица коэффициентов удорожания. */
.hero__list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 18px; }

.stub-inline { color: var(--text-muted); border-bottom: 1px dashed var(--text-muted); }

.price-table__th--right { text-align: right; }
.price-table__th--center { text-align: center; }

.price-table--weld .price-table__th { padding: 12px 14px; font-size: 13px; }
.price-table--weld .price-table__td { padding: 11px 14px; }

.price-table__td--center { text-align: center; color: var(--text-muted); }
.price-table__td--flagged { color: var(--red); }
.price-table__note { font-family: 'PT Sans', sans-serif; font-weight: 400; font-size: 11px; white-space: normal; }

.advantages__grid--five { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.advantage--tight { padding: 18px; }
.advantage__caption--sm { font-size: 14px; }

.services__grid--four { grid-template-columns: repeat(4, 1fr); }

.coef-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); font-size: 17px; }
.coef-table__row { background: #ffffff; border-bottom: 1px solid var(--border); }
.coef-table__row--alt { background: var(--blue-light); }
.coef-table__td { padding: 14px 18px; }

.coef-table__td--value {
  text-align: right;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--blue);
  white-space: nowrap;
}

/* Автономная газификация: вкладки с моделями газгольдеров, врезки и видео.
   Неактивные панели остаются в разметке и скрыты, как и в исходном макете. */
.section--flush-top { padding: 8px 0 56px; }
.page[data-page="avtonomnaya-gazifikatsiya"] .section--why-gas.section--flush-top {
  padding-top: 56px;
}

.dot-item { display: flex; gap: 10px; }
.dot-marker { width: 7px; height: 7px; background: var(--blue); margin-top: 9px; flex: none; }
.dot-marker--tight { margin-top: 8px; }

.callout { background: var(--blue-light); border-left: 4px solid var(--blue); padding: 24px 28px; margin-bottom: 40px; }
.callout__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 21px; margin: 0 0 12px; }
.callout__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 17px; }

.tabs { display: flex; gap: 2px; }

.tabs__btn {
  border: 1px solid var(--border);
  border-bottom: 0;
  padding: 13px 24px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  background: #ffffff;
  color: var(--text);
}

.tabs__btn:hover { border-color: var(--blue); }
.tabs__btn.is-active { background: var(--blue); color: #ffffff; }

.tabs__panel { display: none; border: 1px solid var(--border); padding: 32px; }
.tabs__panel.is-active { display: block; }

.tank__grid { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; margin-bottom: 28px; }
.tank__text { font-size: 17px; }
.tank__p { margin: 0 0 14px; }
.tank__list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.tank__group-title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 18px; margin: 0 0 12px; }

.price-table--tank { margin-bottom: 24px; }
.price-table--tank .price-table__th { padding: 12px 16px; font-size: 13px; }
.price-table--tank .price-table__td { padding: 12px 16px; }

.price-table__td--model { font-family: 'Onest', sans-serif; font-weight: 600; }
.price-table__td--mono { font-family: ui-monospace, Menlo, monospace; }

.checklist { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 18px; }
.checklist__item { display: flex; gap: 14px; align-items: flex-start; }
.checklist__icon { flex: none; margin-top: 2px; }

.note { background: #ffffff; border-left: 4px solid var(--red); padding: 18px 24px; }
.note__text { margin: 0; font-size: 16px; color: var(--text); }

.video {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border: 1px solid var(--border);
  background-image: repeating-linear-gradient(135deg, #ffffff 0 10px, var(--blue-light) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__badge { position: absolute; top: 16px; left: 16px; }

.video__playing {
  display: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--blue-dark);
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 14px 18px;
}

.video__play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 0;
  background: var(--red);
  color: #ffffff;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__play:hover { background: var(--red-dark); }

.video.is-playing .video__playing { display: block; }
.video.is-playing .video__play { display: none; }

/* Услуги: каталог направлений, полосы через одну подсвечены голубым */
.hero--tight { padding: 20px 0 16px; }
.h1--flush { margin: 0; }

.section--cat { padding: 40px 0; }
.section--white { background: #ffffff; }

/* у заголовка категории нет собственной типографики — размер задаёт ссылка внутри */
.cat__title { margin: 0 0 24px; }

.cat__link {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.cat__link:hover { color: var(--blue); }

.cat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.svc-card {
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-card__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 17px; margin: 0; }

.svc-card__desc {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--text-muted);
  padding-bottom: 8px;
}

.svc-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-card__price { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 17px; }
.svc-card__noprice { font-size: 14px; color: var(--text-muted); }
.svc-card__link { font-size: 14px; color: var(--blue); white-space: nowrap; }
.svc-card__link:hover { color: var(--blue-dark); }

/* --------------------------------------------------------------------------
   25. Группа 2: о компании, цены, фотогалерея, отзывы, контакты
   Модалки, поиск по прайсу и постраничная выдача галереи скрыты классами,
   разметка всех состояний физически присутствует в файле — как и в макете,
   где неактивные ветки просто не отрисовывались.
   -------------------------------------------------------------------------- */
.hero--plain { padding: 20px 0 0; }
.hero--prices { padding: 20px 0 24px; }
.hero--contacts { padding: 20px 0 40px; }

.subline { margin: 0 0 28px; font-size: 18px; color: var(--text-muted); }
.subline--flush { margin-bottom: 0; }
.section--band { padding: 32px 0; }

.more-link { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 16px; color: var(--blue); }
.more-link:hover { color: var(--blue-dark); }

.section--link { padding: 32px 0; }

.ph--fill { height: 100%; }
.ph--doc { aspect-ratio: 210/297; }
.ph--h400 { height: 400px; }

/* --- О компании ----------------------------------------------------------- */
.about__intro { display: grid; grid-template-columns: 55% 45%; gap: 48px; margin-bottom: 48px; }

.about__intro .ph:has(> .ph__img) {
  display: block;
  overflow: hidden;
  background-image: none;
}

/* фото бригады на /about/: полное изображение без cover-кадра (как «О нас» на главной) */
.page[data-page="about"] .about__intro > .ph.ph--fill {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  background-image: none;
  align-self: start;
  line-height: 0;
}

.page[data-page="about"] .about__intro > .ph.ph--fill .ph__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: unset;
}

.about__p { margin: 0 0 20px; font-size: 18px; }
.about__p--last { margin-bottom: 0; }

.about__quote {
  background-image: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #ffffff;
  padding: 32px;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
}

.section--stats { padding: 48px 0 56px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { text-align: center; padding: 0 20px; border-left: 1px solid var(--border); }
.stat--first { border-left-color: transparent; }
.stat__box { height: 48px; display: flex; align-items: center; justify-content: center; }
.stat__value { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 38px; color: var(--blue); }

.stat__stub {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 600;
  font-size: 25px;
  color: var(--text-muted);
  border: 1px dashed var(--text-muted);
  padding: 2px 10px;
}

.stat__label { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

.lead--gap { margin-bottom: 28px; }

.about__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about__card { background: #ffffff; padding: 26px; }
/* у заголовка карточки нет своей типографики — её задаёт ссылка внутри */
.about__card-h { margin: 14px 0 10px; }
.about__card-link { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 19px; color: var(--blue); }
.about__card-link:hover { color: var(--blue-dark); }
.about__card-text { margin: 0; font-size: 15px; color: var(--text-muted); }

.brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 14px; }
.brand { border: 1px solid var(--border); padding: 22px 16px; text-align: center; }
.brand__name { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 17px; }
.brand__country { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.brands__note { margin: 0; font-size: 14px; color: var(--text-muted); }

.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.doc { display: flex; flex-direction: column; }

.doc__btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 66%;
  display: block;
  margin: 0 auto;
}

.doc__thumb { background-color: #ffffff; box-shadow: 0 1px 4px rgba(14, 76, 126, 0.1); }
.doc__thumb:hover { box-shadow: 0 6px 18px rgba(14, 76, 126, 0.18); }

.doc__title {
  margin-top: 12px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  min-height: calc(1.4em * 2);
}

.doc__text { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* --- Цены ----------------------------------------------------------------- */
.price__note { margin: 0 0 28px; font-size: 17px; color: var(--text-muted); max-width: 760px; }

.search { max-width: 480px; margin-bottom: 28px; position: relative; }

.search__input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.search__input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-light); }
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }

.tabs--price .tabs__btn { padding: 13px 22px; }

.price-panel { display: none; }
.price-panel.is-active { display: table; }
.price-table--flat .price-table__td { padding: 13px 18px; }

.search-results { display: none; gap: 0; border: 1px solid var(--border); }

.search-results__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.search-results__row--alt { background: var(--blue-light); }
.search-results__name { font-size: 16px; }
.search-results__tab { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.search-results__price {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.search-results__empty { display: none; padding: 20px; color: var(--text-muted); font-size: 15px; }

/* режим поиска: вкладки и таблицы уходят, остаётся плоский список найденного */
.price__main.is-searching .tabs { display: none; }
.price__main.is-searching .price-panel { display: none; }
.price__main.is-searching .search-results { display: grid; }
.price__main.is-searching .search-results.is-empty .search-results__empty { display: block; }

/* --- Фотогалерея ---------------------------------------------------------- */
.section--gallery { padding: 0 0 64px; }

.gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.gallery__tabs { display: flex; gap: 10px; flex-wrap: wrap; }

.gallery__tab {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 20px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}

.gallery__tab:hover { border-color: var(--blue); }
.gallery__tab.is-active { background: var(--blue); color: #ffffff; border-color: var(--blue); }

.gallery__count { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.gallery__grid--photos { margin-bottom: 32px; }

/* Временно скрытые категории галереи (data-gallery-hidden-cats на .page[data-page="gallerys"]) */
.page[data-page="gallerys"][data-gallery-hidden-cats] .gallery__tab[data-tab="vodosnabzhenie"],
.page[data-page="gallerys"][data-gallery-hidden-cats] .gallery__tab[data-tab="kanalizaciya"],
.page[data-page="gallerys"][data-gallery-hidden-cats] .photo[data-cat="vodosnabzhenie"],
.page[data-page="gallerys"][data-gallery-hidden-cats] .photo[data-cat="kanalizaciya"] {
  display: none !important;
}

.photo {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
}

.photo.is-hidden { display: none; }
.photo__label-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Задел под реальные снимки: в макете картинок нет вообще, плитка — только
   полосатый фон с подписью. Когда в _tools/gen_gallerys.py заполнят PHOTOS,
   <img class="photo__img"> ляжет в те же 4:3 и сетка не поедет. */
.photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.photo__overlay {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo__overlay:hover { opacity: 0.2; }
.photo__zoom { opacity: 0; }
.photo__zoom:hover { opacity: 1; }

.gallery__more { text-align: center; }
.gallery__more.is-hidden { display: none; }

.gallery__more-btn {
  background: #ffffff;
  color: var(--blue);
  border: 1px solid var(--blue);
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  cursor: pointer;
}

.gallery__more-btn:hover { background: var(--blue-light); }

/* --- Отзывы --------------------------------------------------------------- */
.section--letters { padding: 48px 0 64px; }

.letters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.letter { background: #ffffff; box-shadow: 0 1px 4px rgba(14, 76, 126, 0.1); padding: 12px 12px 16px; }

.letter__btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 75%;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}

.letter__thumb { transition: transform .15s; }
.letter__thumb:hover { transform: scale(1.03); }
.letter__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Реальный скан в модалке — как и плейсхолдер, вписывается в рамку .ph--doc,
   не растягиваясь и не обрезаясь. */
.modal__img { width: 100%; height: 100%; object-fit: contain; display: block; }

.letter__org { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
.letter__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.letter__year { font-size: 14px; color: var(--text-muted); }
.letter__zoom { background: none; border: 0; padding: 0; font-size: 14px; color: var(--blue); cursor: pointer; }
.letter__zoom:hover { color: var(--blue-dark); }

.rating {
  background: #ffffff;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.rating__score { display: flex; align-items: center; gap: 16px; }

.rating__value {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: var(--text);
  border: 1px dashed var(--text-muted);
  display: inline-block;
  padding: 0 12px;
}

.rating__stars { display: flex; gap: 4px; }
.rating__note { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--text-muted); flex: 1; }
.rating__btn { display: block; text-align: center; font-size: 15px; padding: 13px 24px; white-space: nowrap; }

.widget-stub {
  background: #ffffff;
  border: 1px dashed var(--text-muted);
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-stub__text {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 0 20px;
}

.review-cta {
  border: 1px solid var(--border);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.review-cta__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.review-cta__text { font-size: 15px; color: var(--text-muted); }
.review-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.review-cta__btn { font-size: 15px; padding: 13px 24px; }

.section--band--blue {
  background: var(--blue);
  padding: 48px 0;
}

.section--band--blue .review-cta {
  border-color: rgba(255, 255, 255, 0.35);
}

.section--band--blue .review-cta__title { color: #ffffff; }
.section--band--blue .review-cta__text { color: rgba(255, 255, 255, 0.88); }

.section--band--blue .btn--outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
}

.section--band--blue .btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.form__optional { font-weight: 400; color: var(--text-muted); }
.form__unavailable {
  font-size: 14px;
  line-height: 1.45;
  color: #b42318;
  margin: 12px 0 0;
}

.form__unavailable[hidden] { display: none !important; }

/* контурная кнопка-ссылка: цвет текста не меняется при наведении,
   поэтому общее правило a:hover перебиваем явно */
.btn--outline { background: #ffffff; color: var(--blue); border: 1px solid var(--blue); }
.btn--outline:hover { background: var(--blue-light); color: var(--blue); }

.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
.work { background: #ffffff; border: 1px solid var(--border); }

.work__photo {
  height: 210px;
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.work__meta {
  padding: 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text-muted);
  display: grid;
  gap: 6px;
}

/* --- Контакты ------------------------------------------------------------- */
.contacts__grid { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; }
.contacts__title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 24px; margin: 0 0 10px; }
.contacts__intro { margin: 0 0 32px; font-size: 18px; color: var(--text); max-width: 520px; }
.contacts__list { display: grid; gap: 24px; }

.contact { display: flex; gap: 14px; align-items: flex-start; }
.contact__icon { flex: none; margin-top: 2px; }
.contact__label { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.contact__value { font-size: 17px; }

.contact__phone {
  display: block;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
}

.contact__phone:hover { color: var(--red-dark); }

.contact__mail { font-size: 17px; }
.contact__socials { display: flex; gap: 14px; align-items: center; }
.contact__social { font-size: 17px; display: flex; align-items: center; gap: 6px; }

.form--contacts { box-shadow: 0 12px 32px rgba(14, 76, 126, 0.14); border-top-color: var(--blue); }
.form__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 21px; margin: 0 0 6px; }
.form__intro { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; }

.map { margin-top: 48px; }

/* Карта Яндекса (iframe конструктора). Высота задаётся контейнером, а сам
   iframe тянется на 100% — так карта остаётся адаптивной по ширине и не
   создаёт горизонтальной прокрутки на телефоне. */
.map__frame {
  position: relative;
  height: 400px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map__link { display: inline-block; margin-top: 12px; font-size: 15px; }

.requisites { margin-top: 56px; background: var(--blue-light); padding: 32px; }

.requisites__title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.requisites__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px 24px;
  font-size: 16px;
  max-width: 760px;
}

.requisites__company {
  grid-column: 1 / -1;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
}

.requisites__key { color: var(--text-muted); }
.requisites__val { font-family: ui-monospace, Menlo, monospace; }
.requisites__val--stub { color: var(--text-muted); border-bottom: 1px dashed var(--text-muted); display: inline-block; }

/* --- Модальные окна ------------------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(14, 76, 126, 0.85);
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
}

.modal.is-open { display: flex; }

.modal--letter { background: rgba(14, 76, 126, 0.8); padding: 48px 88px; }
.modal--photo { background: rgba(14, 76, 126, 0.9); padding: 40px 88px; }

.modal__dialog { background: #ffffff; max-width: 520px; width: 100%; padding: 20px; margin: auto; }
.modal__dialog--photo { background: transparent; max-width: 900px; padding: 0; }

.modal__head { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.modal__close {
  background: none;
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  font-size: 17px;
  cursor: pointer;
  color: var(--text);
}

.modal__close:hover { border-color: var(--red); color: var(--red); }

.modal__close--light {
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: #ffffff;
}

.modal__close--light:hover { background: rgba(255, 255, 255, 0.28); border-color: #ffffff; color: #ffffff; }

.modal__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
}

.modal__nav:hover { background: rgba(255, 255, 255, 0.28); }
.modal__nav--prev { left: 32px; }
.modal__nav--next { right: 32px; }

.modal__photo {
  aspect-ratio: 4/3;
  background: #ffffff;
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Настоящее фото не подгоняется под жёсткую рамку-плейсхолдер 4:3 со
   штриховкой — у портретных снимков штриховка была видна по бокам.
   Модификатор ставится в main.js вместе с img.hidden. Селектор нарочно
   через .modal--photo: .modal__img — общий класс, его же используют
   модалки сканов на других страницах (свой .ph--doc/.ph--h520 вместо
   .modal__photo), их эта правка не должна касаться. */
.modal--photo .modal__photo--real {
  aspect-ratio: auto;
  background: none;
}
.modal--photo .modal__photo--real .modal__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76vh;
}

.modal__caption {
  margin-top: 12px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.modal__counter { white-space: nowrap; color: var(--blue-light); }

/* прокрутка фона блокируется, пока открыта модалка */
body.is-locked { overflow: hidden; }

/* --- единая popup-форма обратной связи ------------------------------------
   Опирается на базовые .modal / .modal__dialog: здесь только то, что
   отличает окно с формой от окна-просмотрщика скана. */
/* Единственное окно, которое обязано перекрывать мобильную шапку.
   До 1023px .header__top липкая и стоит на z-index:90 (так задумано: подложка
   бургер-меню должна накрывать cookie и окна-просмотрщики). Для формы это
   ломало UX: крестик оказывался под шапкой, а бургер оставался кликабельным
   сквозь подложку. Поднимаем ТОЛЬКО это окно — просмотрщики сканов остаются
   на 80, то есть поведение бургер-меню относительно них не меняется. */
.modal--form { z-index: 95; }

/* Просмотр сканов (письма/документы на главной и «О компании»): на телефоне
   крестик был под липкой шапкой (90), потому что базовый .modal — 80. */
@media (max-width: 1023px) {
  .modal--home.is-open { z-index: 95; }
}

.modal__dialog--form { max-width: 520px; padding: 24px; }

.modal__head--form {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.modal__lead {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* форма уже лежит внутри белого диалога — своя подложка, отступы и красная
   полоса сверху ей здесь не нужны */
.form--modal { padding: 0; border-top: 0; background: transparent; }

.form__textarea {
  min-height: 84px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
}

/* «Обратная связь» в подвале — кнопка, но выглядит ровно как соседние ссылки */
.footer__link--btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* --------------------------------------------------------------------------
   26. Группа 3: статьи, статья, новости, новость, гарантии
   -------------------------------------------------------------------------- */

/* --- узкая текстовая колонка 720px: гарантии, статья, новость ------------- */
.breadcrumbs--text { max-width: 720px; }
.container--text { max-width: 720px; }

.h1--post { font-size: 34px; margin: 0 0 10px; line-height: 1.25; text-wrap: wrap; }
.post-date { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }

/* горизонтальная черта над подвалом статьи и над контактами гарантий */
.sep-top { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 28px; }

/* --- лента карточек: списки статей и новостей ----------------------------- */
.section--feed { padding: 0 0 64px; }
.section--related { padding: 64px 0; }
.feed__inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }

/* заголовок блока «похожие»: тот же .h2, но отбивка снизу больше */
.h2--related { margin-bottom: 28px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.post-grid--related { margin-bottom: 28px; }

.post-card {
  display: block;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(14, 76, 126, 0.1);
  color: var(--text);
  overflow: hidden;
}

/* цвет пришлось повторить: глобальное a:hover увело бы текст карточки в синий,
   а в макете при наведении меняется только тень */
.post-card:hover { box-shadow: 0 4px 14px rgba(14, 76, 126, 0.16); color: var(--text); }

.post-card__cover {
  aspect-ratio: 16/9;
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.post-card__dim { position: absolute; inset: 0; background: #000000; opacity: 0; }
.post-card__dim:hover { opacity: 0.15; }

.post-card__body { padding: 20px; }

.post-card__title {
  margin: 0 0 16px;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 3);
}

.post-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-card__date { font-size: 14px; color: var(--text-muted); }

.post-card__more { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 15px; color: var(--red); }

/* в списках стрелка едет вправо и элемент строчно-блочный, в блоках «похожие»
   макет оставил её строчной — display попадает в сверку, поэтому два варианта */
.post-card__more--anim { display: inline-block; transition: transform .15s; }
.post-card__more--anim:hover { transform: translateX(4px); }
.post-card__more--shift:hover { transform: translateX(4px); }

/* --- пагинация ------------------------------------------------------------ */
.pager { display: flex; justify-content: center; gap: 8px; }

.pager__link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
}

.pager__link:hover { border-color: var(--blue); color: var(--text); }
.pager__link--current { background: var(--red); color: #ffffff; border-color: var(--red); }
.pager__link--current:hover { border-color: var(--blue); color: #ffffff; }

/* --- лонгрид: тело статьи, новости и страницы гарантий -------------------- */
.longread { font-size: 17px; line-height: 1.7; }
.longread__h2 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 26px; margin: 48px 0 16px; }
.longread__h2--first { margin-top: 0; }
.longread__p { margin: 0 0 20px; }
.longread__p--last { margin-bottom: 0; }
.longread__link { color: var(--blue); text-decoration: underline; }
.longread__link:hover { color: var(--blue-dark); }

/* на странице гарантий весь текст серый, в статье — основной цвет */
.longread--muted .longread__p,
.longread--muted .bullets__item { color: var(--text-muted); }

.longread__quote {
  margin: 0 0 20px;
  background: var(--blue-light);
  border-left: 4px solid var(--blue);
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 600;
}

.longread__figure { margin: 0 0 32px; }
.longread__caption { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

/* маркированный список внутри лонгрида — тот же маркер, но плотнее */
.bullets--text { margin: 0 0 20px; font-size: inherit; }
.bullets--text .bullets__item { gap: 10px; }
.bullets--flush { margin-bottom: 0; }

/* --- врезка на голубом фоне (факты гарантий, оглавление, исключения) ------
   Имя .callout уже занято врезкой газификации (п. 15): там рамка 4px и
   боковые поля 28px. Поэтому здесь отдельный блок .infobox — иначе одно
   имя тянуло бы на себя два разных набора значений. */
.infobox { background: var(--blue-light); border-left: 3px solid var(--blue); padding: 24px; }
.infobox--lead { padding: 28px; margin-bottom: 40px; }
.infobox--toc { margin-bottom: 32px; }
.infobox__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fact__value { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 26px; color: var(--blue); }
.fact__label { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* --- оглавление статьи ---------------------------------------------------- */
.toc__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.toc__list { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; font-size: 16px; }
.toc__link { color: var(--blue); }
.toc__link:hover { color: var(--blue-dark); }

/* --- обложки статьи и новости (в отличие от карточек — с рамкой) ---------- */
.ph--wide { aspect-ratio: 16/9; }
.post-cover { margin-bottom: 32px; }

/* --- подвал материала: автор и кнопки «поделиться» ------------------------ */
.post-foot { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.post-foot--end { gap: 14px; justify-content: flex-end; flex-wrap: nowrap; }

.author { display: flex; gap: 16px; align-items: center; }

.author__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex: none;
  border: 1px dashed var(--border);
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 6px, #ffffff 6px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
}

.author__name { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 16px; }
.author__role { font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }
.author__contacts { font-size: 14px; display: flex; gap: 14px; }
.author__link { color: var(--blue); }
.author__link:hover { color: var(--blue-dark); }

.share { display: flex; gap: 14px; align-items: center; }
.share__label { font-size: 13px; color: var(--text-muted); }
.share__link { color: var(--blue); display: flex; }
.share__link:hover { color: var(--blue-dark); }

/* --- контакты для гарантийных обращений ----------------------------------- */
.warranty__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 18px; margin: 0 0 16px; }
.warranty__list { display: grid; gap: 8px; font-size: 16px; }
.warranty__phone { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 20px; color: var(--red); }
.warranty__phone:hover { color: var(--red-dark); }
.warranty__mail { color: var(--blue); }
.warranty__mail:hover { color: var(--blue-dark); }
.warranty__note { color: var(--text-muted); }

/* --- узкий блок заявки (одна колонка, форма под заголовком) --------------- */
.cta--narrow { margin-top: 56px; }
.cta__body { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.cta__title--narrow { font-size: 30px; margin: 0 0 24px; text-wrap: wrap; }
.cta__title--post { font-size: 30px; margin: 0 0 12px; text-wrap: wrap; }
.cta__text--post { margin: 0 0 24px; font-size: 17px; max-width: none; }

/* --- кнопка «наверх»: появляется после 600px прокрутки -------------------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(14, 76, 126, 0.3);
  display: none;
  align-items: center;
  justify-content: center;
}

.to-top.is-visible { display: flex; }
.to-top:hover { background: var(--blue-dark); }

/* --------------------------------------------------------------------------
   27. Группа 4: страницы пусконаладки
   Три страницы собраны из уже существующих блоков, отличия — подложка
   карточек и белая таблица цен. Новых типов блока два: этапы работ
   с круглыми номерами и крупные карточки-ссылки на подразделы.
   -------------------------------------------------------------------------- */

/* ссылка внутри абзаца. В макете цвет задан инлайном и поэтому не менялся
   при наведении глобальным a:hover — повторяем поведение явным правилом */
.text-link { color: var(--blue); }
.text-link:hover { color: var(--blue-dark); }

/* этапы пусконаладки: карточка с круглым номером */
.stages { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stage { background: #ffffff; padding: 26px; }

.stage__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.stage__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 19px; margin: 0 0 10px; }
.stage__note { margin: 0 0 12px; font-size: 15px; color: var(--text-muted); font-style: italic; }
.stage__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.stage__item { display: flex; gap: 10px; }
.stage__marker { width: 6px; height: 6px; background: var(--blue); margin-top: 9px; flex: none; }

/* белая таблица цен. В отличие от --boxed отступы ячеек не меняются */
.price-table--white { background: #ffffff; }

/* таблица цен с группами: две колонки, без шапки.
   У строки-позиции своей подложки нет — просвечивает белый фон таблицы */
.price-table__row--plain { background: transparent; }
.price-table__group { padding: 13px 18px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; }
.price-table__td--indent { padding-left: 32px; }
.price-table__td--w150 { width: 150px; }

/* подложки карточек преимуществ */
.advantage--flat { box-shadow: none; padding: 20px; }
.advantage--light { background: var(--blue-light); box-shadow: none; padding: 20px; }
.advantage--bordered { box-shadow: none; border: 1px solid var(--border); }

/* крупные карточки-ссылки на подразделы пусконаладки */
.linkcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; }

.linkcard {
  display: block;
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--blue);
  padding: 28px;
  text-decoration: none;
  color: var(--text);
}

.linkcard:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(14, 76, 126, 0.12);
  color: var(--text);
}

.linkcard__title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 21px; margin-bottom: 8px; }
.linkcard__more { font-size: 15px; color: var(--blue); }

/* карточки связанных услуг: на страницах пусконаладки отступ и кегль крупнее */
.service-link--roomy { padding: 22px; }
.service-link--17 { font-size: 17px; }

/* колонка текста внутри широкого контейнера: без своих полей и центровки */
.narrow-block { max-width: 800px; }

/* заголовок связанного блока — на кегль меньше обычного h2 */
.h2--sm { font-size: 26px; }

/* галерея без нижнего отступа — под ней сразу конец секции */
.gallery__grid--flush { margin-bottom: 0; }

/* ссылка «Смотреть все работы» под галереей на service-страницах —
   .btn.btn--blue сам по себе не задаёт отступов/display, только цвет */
.gallery-cta { margin-top: 24px; text-align: center; }
.gallery__grid--flush + .gallery__load-more { margin-top: 24px; }
.gallery-cta .btn { display: inline-block; padding: 13px 32px; }

/* --------------------------------------------------------------------------
   28. Главная страница
   Своя типографика: заголовки разделов 34px против 30px на внутренних, шаг
   секции 72px против 56px. Поэтому у блоков главной отдельный префикс home-,
   общими остаются только .container, .ph, .btn, .tabs, .advantage, .cta,
   .form и .modal — там значения совпадают до пикселя.
   -------------------------------------------------------------------------- */

/* --- ритм секций и заголовки ---------------------------------------------- */
.home-sec { padding: 72px 0; }
.home-sec--first { padding: 48px 0 72px; }
.home-sec--video { padding: 72px 0; }
.home-sec--light { background: var(--blue-light); }
.home-sec--works { background: #ffffff; border-top: 1px solid var(--border); }

/* косая штриховка под блоком «Как проходит работа» */
.home-sec--process {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 12px,
    rgba(27, 117, 188, 0.04) 12px, rgba(27, 117, 188, 0.04) 24px);
}

.home-h2 {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 34px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.home-h2--28 { font-size: 28px; }
.home-h2--32 { font-size: 32px; }
.home-h2--m0 { margin: 0; }
.home-h2--m20 { margin: 0 0 20px; }
.home-h2--m24 { margin: 0 0 24px; }
.home-h2--m28 { margin: 0 0 28px; }
.home-h2--m32 { margin: 0 0 32px; }
.home-h2--m36 { margin: 0 0 36px; }

/* заглушка изображения с обратным чередованием полос */
.ph--inv { background-image: repeating-linear-gradient(135deg, #ffffff 0 10px, var(--blue-light) 10px 20px); }

/* --- первый экран --------------------------------------------------------- */
.home-hero {
  position: relative;
  background: #123c5e;
  background-image:
    linear-gradient(180deg, rgba(14, 76, 126, 0.86) 0%, rgba(27, 117, 188, 0.82) 100%),
    radial-gradient(58% 70% at 74% 32%, #4c6b80 0%, rgba(24, 40, 52, 0) 62%),
    radial-gradient(40% 55% at 22% 78%, #3d5768 0%, rgba(18, 32, 42, 0) 65%),
    radial-gradient(30% 40% at 46% 12%, #6a7f8d 0%, rgba(18, 32, 42, 0) 70%),
    linear-gradient(160deg, #26333d 0%, #141d24 100%);
  color: #ffffff;
}

.page[data-page="home"] .home-hero {
  background-image:
    linear-gradient(180deg, rgba(14, 76, 126, 0.58) 0%, rgba(27, 117, 188, 0.52) 100%),
    url("/assets/img/home/hero-main.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

.home-hero__stub {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--blue-light);
  background: rgba(14, 76, 126, 0.75);
  border: 1px dashed var(--blue-light);
  padding: 4px 10px;
}

.home-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 24px 48px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

.home-hero__h1 {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  text-wrap: pretty;
}

.home-hero__h1-sub {
  display: block;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 6px;
  color: var(--blue-light);
}

.home-hero__lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--blue-light);
  margin: 0 0 30px;
  max-width: 640px;
  text-wrap: pretty;
}

.home-hero__col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 8px; }

.home-hero__price { background: rgba(255, 255, 255, 0.1); border: 1px dashed #ffffff; padding: 12px 16px; max-width: 400px; }
.home-hero__price-note { font-size: 12px; color: var(--blue-light); font-family: ui-monospace, Menlo, monospace; }

.home-hero__price-value {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-top: 4px;
  line-height: 1.2;
}

.home-hero__tel {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
}
.home-hero__tel:hover { color: var(--blue-light); }
.home-hero__tel-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  opacity: 0.8;
}
.home-hero__tel-body { display: flex; flex-direction: column; gap: 2px; }
.home-hero__tel-num {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.home-hero__tel-note {
  font-size: 13px;
  line-height: 1.3;
  color: inherit;
  opacity: 0.68;
}

/* полоса из четырёх фактов под первым экраном */
.home-hero__facts-wrap { max-width: 1200px; margin: 26px auto 0; padding: 0 24px; }
.home-hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.28); }

.home-fact { padding: 18px 24px; border-left: 1px solid rgba(255, 255, 255, 0.28); }
.home-fact--first { padding: 18px 24px 18px 0; border-left: 0; }
.home-fact__value { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 30px; }
.home-fact__label { font-size: 15px; color: var(--blue-light); margin-top: 4px; }

.home-fact__stub {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  border: 1px dashed #ffffff;
  padding: 1px 5px;
  white-space: nowrap;
}

/* хвост первого экрана: пустая полоса перед следующей секцией */
.home-hero__tail { height: 32px; }

/* компактная светлая полоса доверия сразу под hero */
.home-trust {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}

.home-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.home-trust__item {
  padding: 0 24px;
  border-left: 1px solid var(--border);
}

.home-trust__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.home-trust__item:last-child { padding-right: 0; }

.home-trust__value {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--blue);
}

.home-trust__label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* форма первого экрана: без красной полосы сверху, с тенью и меньшим полем */
.form--hero { padding: 21px; border-top: 0; box-shadow: 0 12px 32px rgba(14, 76, 126, 0.25); }
.form--hero .form__input { background: #ffffff; }
/* заголовок и подпись формы: на контактах свой кегль, поэтому правило
   ограничено формой первого экрана главной */
.form--hero .form__title { font-size: 20px; margin: 0 0 5px; }
.form--hero .form__note { font-size: 14px; color: var(--text-muted); margin: 0 0 14px; }

/* --- направления работ ---------------------------------------------------- */
.home-services__note { color: var(--text-muted); margin: 0 0 36px; font-size: 17px; }
.home-dirs { display: grid; grid-template-columns: 54fr 46fr; gap: 20px; align-items: stretch; }

.home-dir {
  border: 1px solid var(--border);
  border-top: 4px solid var(--blue);
  padding: 28px;
  display: flex;
  flex-direction: column;
  background: var(--blue-light);
}

.home-dir__title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 26px; margin: 0 0 6px; }
.home-dir__text { margin: 0 0 18px; color: var(--text-muted); font-size: 16px; }

.home-dir__photo {
  background-color: #ffffff;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  flex: 0 0 200px;
  margin-bottom: 18px;
}

.home-dir__photo:has(> .ph__img),
.home-about__photo:has(> .ph__img),
.home-seo__illus:has(> .ph__img) {
  display: block;
  overflow: hidden;
  background-image: none;
}

.home-dir__list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; }
.home-dir__item { display: flex; gap: 10px; }
.home-dir__marker { width: 8px; height: 8px; background: var(--blue); margin-top: 8px; flex: none; }

.home-dir__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.home-dir__price { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 24px; }
.home-dir__btn { font-size: 16px; padding: 12px 22px; }

.home-dirs__side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; height: 100%; }

.home-side {
  border: 1px solid var(--border);
  border-top: 4px solid var(--blue);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.home-side__title {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  margin: 0 0 12px;
}

.home-side__list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15px; }
.home-side__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-side__price { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 19px; }
.home-side__note { font-size: 15px; color: var(--text-muted); }
.home-side__link { font-size: 15px; color: var(--blue); }
.home-side__link:hover { color: var(--blue-dark); }

/* --- объекты -------------------------------------------------------------- */
.home-objects__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.home-object { background: #ffffff; border: 1px solid var(--border); }
.home-object__inner { padding: 22px 20px 20px; }

.home-object__icon {
  width: 56px;
  height: 56px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.home-object__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 19px; margin: 0 0 8px; }
.home-object__text { margin: 0; font-size: 15px; color: var(--text-muted); }
.home-objects__note { margin: 20px 0 0; font-size: 14px; color: var(--text-muted); }

/* --- как проходит работа -------------------------------------------------- */
.home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.home-step {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-left: 3px solid var(--blue);
  box-shadow: 0 1px 3px rgba(14, 76, 126, 0.08);
  padding: 24px;
  height: 100%;
}

.home-step--red { border-left-color: var(--red); }

.home-step__num {
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--blue-light);
  pointer-events: none;
}

.home-step__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; margin: 14px 0 8px; }
.home-step__text { margin: 0; font-size: 16px; color: var(--text-muted); white-space: nowrap; }

/* --- выполненные работы --------------------------------------------------- */
.home-works__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 12px; }

.home-works__count {
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 18px;
  border: 1px dashed var(--text-muted);
  color: var(--text-muted);
  padding: 4px 10px;
}

.home-works__note { margin: 0 0 28px; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.home-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-work { background: #ffffff; border: 1px solid var(--border); }

/* у обложки объекта рамка только снизу, поэтому не .ph */
.home-work__photo {
  height: 210px;
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-work__meta {
  padding: 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text-muted);
  display: grid;
  gap: 6px;
}

.home-works__more { display: flex; justify-content: center; margin-top: 32px; }
.home-works__more-btn { font-size: 16px; padding: 15px 34px; }

/* --- документы и допуски -------------------------------------------------- */
.home-docs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.home-doc {
  padding: 0;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
}

.home-doc:hover { border-color: var(--blue); }

.home-doc__scan {
  height: 320px;
  background-image: repeating-linear-gradient(135deg, var(--blue-light) 0 10px, #ffffff 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}

/* Содержимое кнопок документов и писем — <span>, а не <div>: <button>
   принимает только фразовый контент, блочные элементы внутри него
   невалидны. Поэтому блочность задаётся здесь явно. */
.home-doc__title {
  display: block;
  padding: 14px;
  font-size: 14px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-doc__open { display: block; color: var(--blue); font-size: 13px; margin-top: 4px; }
.home-letter__line { display: block; }

.home-docs__note { margin-top: 24px; background: #ffffff; border: 1px dashed var(--text-muted); padding: 24px; }
.home-docs__note-text { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--text-muted); }

/* --- видео ---------------------------------------------------------------- */
.home-video__note { margin: 0 0 20px; color: var(--text-muted); }
.video.video--home {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  background: #1a1a1a;
  background-image: none;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
}
.video.video--home .video__poster--home {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  cursor: pointer;
}
/* MP4 1280×720, зашитые поля по 87px (контент 546px). Масштаб 720/546
   выносит чёрные полосы за 16:9-viewport, пропорции не трогаем. */
.video.video--home .video__player--home {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(100% * 720 / 546);
  height: calc(100% * 720 / 546);
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  background: #000;
}
.video.video--home:not(.is-playing) .video__player--home {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.video.video--home.is-playing .video__poster--home {
  display: none;
}
.video.video--home .video__play--home {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 84px;
  height: 84px;
  font-size: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.video.video--home .video__play--home::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #ffffff;
}
.video.video--home .video__play--home:hover {
  transform: translate(-50%, -50%) scale(1.04);
}
.video.video--home.is-playing .video__play--home {
  display: none;
}

/* --- благодарственные письма ---------------------------------------------- */
.home-reviews__note { margin: 0 0 28px; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.home-letters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.home-letter { padding: 0; border: 1px solid var(--border); background: #ffffff; cursor: pointer; text-align: left; width: 100%; }
.home-letter:hover { border-color: var(--blue); }

.home-letter__scan {
  width: 100%;
  aspect-ratio: 210/297;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
.home-letter__scan img { width: 100%; height: 100%; object-fit: contain; display: block; }

.home-letter__meta {
  padding: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text-muted);
  display: grid;
  gap: 6px;
}

.home-letter__zoom { color: var(--blue); font-family: 'PT Sans', sans-serif; font-size: 14px; }

/* --- цены на основные работы ---------------------------------------------- */
.home-prices__layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }

.home-price-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); font-size: 17px; }
.home-price-table--panel { display: none; }
.home-price-table--panel.is-active { display: table; }
.home-price-row { border-bottom: 1px solid var(--border); }
.home-price-td { padding: 15px 20px; }

.home-price-td--price {
  text-align: right;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.home-prices__note { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }

.home-price-aside {
  background: var(--blue-light);
  border-top: 4px solid var(--red);
  padding: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-price-aside__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 21px; margin: 0 0 10px; }
.home-price-aside__text { margin: 0 0 18px; font-size: 15px; color: var(--text-muted); }
.home-price-aside__btn { display: block; text-align: center; font-size: 16px; padding: 14px; margin-bottom: 14px; }

.home-price-aside__phone {
  display: block;
  text-align: center;
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
}

.home-price-aside__phone:hover { color: var(--red-dark); }

/* --- о нас ---------------------------------------------------------------- */
.home-about__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.home-about__p { margin: 0 0 16px; font-size: 18px; }
.home-about__p--last { margin-bottom: 28px; }
.home-about__stats { display: flex; gap: 28px; }
.home-about__value { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 28px; color: var(--blue); }
.home-about__value--stub { border: 1px dashed var(--text-muted); display: inline-block; padding: 0 8px; white-space: nowrap; }
.home-about__label { font-size: 14px; color: var(--text-muted); }
.home-about__sep { width: 1px; background: var(--border); }
.home-about__photo { height: 330px; }

.page[data-page="home"] .home-about__photo {
  display: block;
  height: auto;
  overflow: visible;
  background: transparent;
  background-image: none;
}

.page[data-page="home"] .home-about__photo .ph__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: unset;
}

/* --- что нас отличает ----------------------------------------------------- */
.advantages__grid--list { list-style: none; margin: 0; padding: 0; }
.home-adv__lead { margin: 0 0 32px; font-size: 18px; max-width: 900px; }
.home-adv__text { margin: 14px 0 0; font-size: 16px; }

/* --- SEO-текст ------------------------------------------------------------ */
.home-seo__col { max-width: 800px; }
.home-seo__p { margin: 0 0 18px; font-size: 18px; }
.home-seo__p--last { margin: 0 0 28px; }
.home-seo__illus { height: 400px; width: 100%; margin-bottom: 32px; }
.home-seo__illus--sm { height: 280px; width: auto; margin-bottom: 26px; }
.home-seo__h3 { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 25px; margin: 0 0 16px; }
.home-seo__text { margin: 0 0 22px; font-size: 18px; }

.home-seo__quote {
  margin: 0 0 22px;
  padding: 20px 24px;
  background: var(--blue-light);
  border-left: 4px solid var(--blue);
  font-size: 19px;
  font-weight: 700;
}

.home-seo__quote--flush { margin: 0; }
.home-seo__intro { margin: 0 0 12px; font-size: 18px; }
.bullets--m22 { margin: 0 0 22px; }
.home-seo__details { border-top: 1px solid var(--border); padding-top: 20px; }

.home-seo__details[open] > .home-seo__summary { display: none; }

.home-seo__close {
  display: none;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--blue);
  align-items: center;
  gap: 8px;
}

.home-seo__details[open] .home-seo__close { display: inline-flex; }

.home-seo__close:hover { color: var(--blue-dark); }

.home-seo__summary {
  cursor: pointer;
  font-family: 'Onest', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--blue);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-seo__summary:hover { color: var(--blue-dark); }
.home-seo__caret { font-size: 12px; }
.home-seo__body { padding-top: 20px; }

/* --- модальное окно документа и письма ------------------------------------ */
.modal--home { background: rgba(14, 76, 126, 0.72); }
.modal__dialog--home { max-width: 720px; padding: 24px; }
.modal__head--home { justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; }
.modal__title { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; margin: 0; }
.modal__close--home { width: 38px; height: 38px; font-size: 18px; }
.ph--h520 { height: 520px; }

/* Реальный скан в окне письма/документа — без штриховки .ph */
.modal--home .ph:has(.modal__img:not([hidden])) {
  background: #ffffff;
  background-image: none;
  height: auto;
  aspect-ratio: auto;
  min-height: 0;
  border: 1px solid var(--border);
}

.modal--home .ph:has(.modal__img:not([hidden])) .modal__img {
  width: 100%;
  height: auto;
  max-height: min(72vh, 900px);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   29. Подсветка текущего раздела
   Разметка шапки и подвала одинакова на всех страницах, активный пункт
   определяется атрибутом data-page на .page
   -------------------------------------------------------------------------- */
/* активный пункт верхнего меню — подчёркнут и не меняет цвет при наведении */
.page[data-page="about"]    .nav__link[href="/about/"],
.page[data-page="prices"]   .nav__link[href="/prices/"],
.page[data-page="gallerys"] .nav__link[href="/gallerys/"],
.page[data-page="otzyvy"]   .nav__link[href="/otzyvy/"],
.page[data-page="contacts"] .nav__link[href="/contacts/"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page[data-page="about"]    .nav__link[href="/about/"]:hover,
.page[data-page="prices"]   .nav__link[href="/prices/"]:hover,
.page[data-page="gallerys"] .nav__link[href="/gallerys/"]:hover,
.page[data-page="otzyvy"]   .nav__link[href="/otzyvy/"]:hover,
.page[data-page="contacts"] .nav__link[href="/contacts/"]:hover {
  color: #ffffff;
}

/* активный пункт выпадающего списка «Услуги» */
.page[data-page="otoplenie"]                .nav__dropdown-link[href="/otoplenie/"],
.page[data-page="otoplenie"]                .nav__dropdown-link[href="/otoplenie/"]:hover,
.page[data-page="vodosnabzhenie"]           .nav__dropdown-link[href="/vodosnabzhenie/"],
.page[data-page="vodosnabzhenie"]           .nav__dropdown-link[href="/vodosnabzhenie/"]:hover,
.page[data-page="kanalizaciya"]             .nav__dropdown-link[href="/kanalizaciya/"],
.page[data-page="kanalizaciya"]             .nav__dropdown-link[href="/kanalizaciya/"]:hover,
.page[data-page="svarochnye-raboty"]        .nav__dropdown-link[href="/svarochnye-raboty/"],
.page[data-page="svarochnye-raboty"]        .nav__dropdown-link[href="/svarochnye-raboty/"]:hover,
.page[data-page="avtonomnaya-gazifikatsiya"] .nav__dropdown-link[href="/avtonomnaya-gazifikatsiya/"],
.page[data-page="avtonomnaya-gazifikatsiya"] .nav__dropdown-link[href="/avtonomnaya-gazifikatsiya/"]:hover {
  background: var(--blue-light);
  color: var(--text);
}

/* Активная ссылка подвала. Раньше отличалась цветом: белая среди голубых.
   После правки контраста белыми стали все, поэтому активную помечаем
   подчёркиванием — ровно так же, как активный пункт верхнего меню. */
.page[data-page="home"]                     .footer__link[href="/"],
.page[data-page="about"]                    .footer__link[href="/about/"],
.page[data-page="services"]                 .footer__link[href="/services/"],
.page[data-page="guarantees"]               .footer__link[href="/guarantees/"],
.page[data-page="prices"]                   .footer__link[href="/prices/"],
.page[data-page="gallerys"]                 .footer__link[href="/gallerys/"],
.page[data-page="articles"]                 .footer__link[href="/articles/"],
.page[data-page="news"]                     .footer__link[href="/news/"],
.page[data-page="contacts"]                 .footer__link[href="/contacts/"],
.page[data-page="otoplenie"]                .footer__link[href="/otoplenie/"],
.page[data-page="vodosnabzhenie"]           .footer__link[href="/vodosnabzhenie/"],
.page[data-page="kanalizaciya"]             .footer__link[href="/kanalizaciya/"],
.page[data-page="svarochnye-raboty"]        .footer__link[href="/svarochnye-raboty/"],
.page[data-page="avtonomnaya-gazifikatsiya"] .footer__link[href="/avtonomnaya-gazifikatsiya/"] {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page[data-page="home"]                     .footer__link[href="/"]:hover,
.page[data-page="about"]                    .footer__link[href="/about/"]:hover,
.page[data-page="services"]                 .footer__link[href="/services/"]:hover,
.page[data-page="guarantees"]               .footer__link[href="/guarantees/"]:hover,
.page[data-page="prices"]                   .footer__link[href="/prices/"]:hover,
.page[data-page="gallerys"]                 .footer__link[href="/gallerys/"]:hover,
.page[data-page="articles"]                 .footer__link[href="/articles/"]:hover,
.page[data-page="news"]                     .footer__link[href="/news/"]:hover,
.page[data-page="contacts"]                 .footer__link[href="/contacts/"]:hover,
.page[data-page="otoplenie"]                .footer__link[href="/otoplenie/"]:hover,
.page[data-page="vodosnabzhenie"]           .footer__link[href="/vodosnabzhenie/"]:hover,
.page[data-page="kanalizaciya"]             .footer__link[href="/kanalizaciya/"]:hover,
.page[data-page="svarochnye-raboty"]        .footer__link[href="/svarochnye-raboty/"]:hover,
.page[data-page="avtonomnaya-gazifikatsiya"] .footer__link[href="/avtonomnaya-gazifikatsiya/"]:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   29-bis. HTML-карта сайта (/sitemap/)
   -------------------------------------------------------------------------- */
.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px 40px;
  align-items: start;
}

/* длинные перечни (статьи, новости) занимают всю ширину и сами делятся
   на колонки — иначе они вытягивают сетку в одну очень длинную колонку */
.sitemap__group--wide { grid-column: 1 / -1; }
.sitemap__group--wide .sitemap__list { columns: 300px 3; column-gap: 40px; }
.sitemap__group--wide .sitemap__item { break-inside: avoid; }

.sitemap__title {
  font-family: 'Onest', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--blue);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.sitemap__title-link { color: inherit; }
.sitemap__title-link:hover { color: var(--red); }

.sitemap__list { list-style: none; margin: 0; padding: 0; }
.sitemap__item { margin: 0 0 8px; }
.sitemap__link { color: var(--text); line-height: 1.4; display: inline-block; }
.sitemap__link:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   30. Адаптив

   Единственный раздел, который знает про ширину экрана. Всё, что ниже,
   либо лежит внутри медиазапроса, либо прячет мобильный блок на десктопе —
   вид от 1200px не меняется ни на пиксель, сверка это подтверждает.

   Брейкпоинты:
     от 1200px   десктоп, как в макете
     1024–1199   широкий планшет: контейнер тянется, сетки прежние
     768–1023    планшет: сетки 4→2 и 3→2, боковые блоки уходят вниз
     375–767     телефон: одна колонка, карточки вместо таблиц
     до 374      узкий телефон: уменьшенные кегли

   30.1  мобильные блоки, скрытые на десктопе
   30.2  от 1280px — возврат min-width
   30.3  до 1199px — широкий планшет
   30.4  до 1023px — планшет и мобильная шапка
   30.5  до 767px  — телефон
   30.6  до 374px  — узкий телефон
   -------------------------------------------------------------------------- */

/* --- 30.1 мобильные блоки: на десктопе их нет ------------------------------
   Правила без медиазапроса — только display:none. Элемент с display:none
   не попадает ни в поток, ни в снимок сверки, поэтому десктоп о них не знает. */
.header__mobile,
.callbar,
.mmenu,
.mbar,
.home-hero__photo,
.home-hero__cta,
.modal__nav--mobile,
.modal__counter--mobile { display: none; }

/* --- 30.1.1 если скрипты не отработали ------------------------------------
   Всё, что прячет CSS в расчёте на main.js, без него становится недоступно
   насовсем. Метка data-js на <html> ставится инлайновым скриптом в <head>,
   и когда её нет, скрытое раскрывается: вкладки показываются все подряд,
   плитки галереи — целиком. Выглядит проще, но текст и цены остаются
   доступны, а это важнее. Меню-бургер работает без скрипта само — оно
   на <details>. */
:root:not([data-js]) .tabs__panel,
:root:not([data-js]) .price-panel,
:root:not([data-js]) .home-price-table--panel { display: block; }

:root:not([data-js]) .price-panel,
:root:not([data-js]) .home-price-table--panel { width: 100%; }

:root:not([data-js]) .photo.is-hidden { display: block; }
:root:not([data-js]) .gallery__more { display: none; }

/* --- 30.2 десктоп ---------------------------------------------------------- */
/* 1300, а не 1280: при ширине окна ровно 1280px полосу прокрутки съедает
   15px, и min-width:1280px сам порождает горизонтальный скролл. От 1300px
   правило ни на что не влияет и нужно только для точного совпадения с макетом. */
@media (min-width: 1300px) {
  .page { min-width: 1280px; }
}

/* --- 30.3 широкий планшет 1024–1199 ---------------------------------------
   Сетки не трогаем, только сжимаем то, что упирается в край: шапка и меню
   свёрстаны под 1200px и на 1024px не помещаются. */
@media (max-width: 1199px) {
  .header__top { gap: 20px; }
  .header__logo-tagline { max-width: 260px; }

  .nav__inner { gap: 18px; }
  .nav__contacts { gap: 14px; }
  .nav__phone { font-size: 17px; }
  /* компактный логотип в липком меню — место занимает, пользы не несёт */
  .nav--sticky .nav__mark { display: none; }

  /* длинные заголовки боковых карточек упираются в край колонки */
  .home-side__title { white-space: normal; }
  .home-step__text { white-space: normal; }

  /* Проценты плюс gap дают больше 100%: 60%+40%+40px и 55%+45%+48px вылезают
     за контейнер. На десктопе запас скрадывает min-width, ниже 1200px —
     уже нет, поэтому те же пропорции пересчитываем во fr. */
  .hero__grid { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .about__intro { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
}

/* --- 30.4 планшет до 1023 -------------------------------------------------- */
@media (max-width: 1023px) {
  .page { overflow-wrap: break-word; }

  /* header не создаёт свой блок — иначе sticky .header__top «отлипает»
     вместе с красной callbar, когда весь <header> уехал вверх */
  .header { display: contents; }

  /* ---- шапка: 56px, липкая, логотип слева, телефон и бургер справа -------- */
  /* Липнет не вся шапка, а только её верхняя строка: красная полоса
     с телефоном лежит внутри <header> (чтобы попасть в landmark), но
     прилипать не должна.
     z-index 90, а не 50: подложка меню-бургера обязана перекрывать плашку
     cookie (60) и модальные окна (80), а элемент с position+z-index создаёт
     контекст наложения, выбраться из которого потомок не может. */
  .header__top {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #ffffff;
    box-shadow: 0 1px 0 var(--border);
    max-width: none;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 24px 0;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }

  .header__logo { gap: 10px; min-height: 44px; }
  .header__logo-mark { height: 34px; width: auto; }
  .header__logo-name { font-size: 19px; }

  .header__logo-tagline,
  .header__info,
  .header__phones,
  .header__cta { display: none; }

  .header__mobile { display: flex; align-items: center; gap: 2px; }

  .header__mobile-tel {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
  }

  .header__mobile-tel:hover { color: var(--red-dark); }

  /* бургер — это <summary>: маркер списка убираем, в остальном та же кнопка */
  .header__burger {
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    list-style: none;
  }

  .header__burger::-webkit-details-marker { display: none; }
  .header__burger::marker { content: ''; }
  .header__burger-bar { display: block; width: 24px; height: 2px; background: var(--blue-dark); }

  /* ---- красная полоса с телефоном: не липкая, во всю ширину --------------- */
  .callbar {
    display: block;
    background: var(--red);
    color: #ffffff;
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    padding: 14px 24px;
  }

  .callbar:hover { background: var(--red-dark); color: #ffffff; }

  /* верхнее меню целиком уезжает в бургер */
  .nav { display: none; }

  /* ---- меню-бургер --------------------------------------------------------
     Раскрытием управляет сам <details>, поэтому меню работает и без скрипта. */
  .mmenu { display: block; }

  /* подложка: отдельный слой, потому что панель на планшете занимает
     не весь экран и затемнить остальное собой не может */
  .mmenu[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(14, 76, 126, 0.55);
  }

  .mmenu__panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #ffffff;
    overflow-y: auto;
    padding: 0 24px 32px;
    animation: mmenu-in 0.2s ease-out;
  }

  .mmenu[open] .mmenu__panel { display: block; }

  @keyframes mmenu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  .mmenu__head {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }

  .mmenu__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--blue);
    letter-spacing: -0.01em;
  }

  .mmenu__logo {
    height: auto;
    width: min(142px, 38vw);
    max-height: 44px;
    object-fit: contain;
  }

  .mmenu__close {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    background: none;
    border: 0;
    font-size: 20px;
    color: var(--text);
    cursor: pointer;
  }

  .mmenu__nav { display: block; }

  .mmenu__link,
  .mmenu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }

  .mmenu__toggle { font-weight: 600; list-style: none; }
  .mmenu__toggle::-webkit-details-marker { display: none; }
  .mmenu__toggle::marker { content: ''; }
  .mmenu__caret { font-size: 11px; color: var(--blue); }
  .mmenu__services[open] .mmenu__caret { transform: rotate(180deg); }

  .mmenu__sub { display: none; padding: 4px 0 10px 16px; }
  .mmenu__services[open] .mmenu__sub { display: block; }

  .mmenu__sublink {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    color: var(--blue);
  }

  .mmenu__sublink--all { color: var(--text-muted); }

  /* Вложенный аккордеон направлений услуг: имя направления — обычная
     ссылка на родительскую страницу, разворачивает список отдельная
     кнопка рядом (не сам summary, иначе клик по ссылке не отличить
     от клика по раскрытию). */
  .mmenu__group { border-bottom: 1px solid var(--border); }
  .mmenu__group:last-of-type { border-bottom: 0; }

  .mmenu__group-row { display: flex; align-items: center; }
  .mmenu__group-row .mmenu__sublink { flex: 1; border-bottom: 0; }

  .mmenu__group-toggle {
    width: 44px;
    height: 44px;
    flex: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    cursor: pointer;
  }

  .mmenu__group-toggle[aria-expanded="true"] .mmenu__caret { transform: rotate(180deg); }

  .mmenu__grandlist { padding: 0 0 10px 16px; }

  .mmenu__grandlink {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 15px;
    color: var(--text);
  }

  .mmenu__grandlink:hover { color: var(--blue); }
  .mmenu__grandlink--all { color: var(--text-muted); border-bottom: 1px dashed var(--border); }

  .mmenu__sep { height: 1px; background: var(--border); margin: 20px 0; }
  .mmenu__contacts { display: grid; gap: 12px; }

  .mmenu__phone {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--red);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .mmenu__phone:hover { color: var(--red-dark); }
  .mmenu__mail { font-size: 17px; color: var(--blue); min-height: 44px; display: flex; align-items: center; }
  .mmenu__hours { font-size: 15px; color: var(--text-muted); }
  .mmenu__social { display: flex; gap: 12px; margin-top: 4px; }

  .mmenu__social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    border: 1px solid var(--border);
  }

  .mmenu__social-link:hover { color: var(--blue-dark); border-color: var(--blue); }

  /* ---- сетки 4→2 и 3→2 ---------------------------------------------------- */
  /* minmax(0, …) вместо 1fr обязателен: иначе колонка растягивается под
     min-content содержимого — вкладки прайса разносили сетку на 467px */
  .home-objects__grid,
  .home-letters,
  .gallery__grid,
  .home-steps,
  .home-works__grid,
  .home-docs__grid,
  .advantages__grid,
  .ways__grid,
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- боковые блоки уходят вниз ------------------------------------------ */
  .home-hero__inner,
  .home-prices__layout,
  .price__layout,
  .cta__inner,
  .home-about__grid,
  .home-dirs,
  .factors__grid { grid-template-columns: minmax(0, 1fr); }

  .home-hero__inner { gap: 24px; padding-top: 32px; padding-bottom: 36px; }
  .cta__inner { gap: 32px; }
  .home-about__grid { gap: 32px; }
  .price-aside { position: static; top: auto; }

  /* первый экран: четыре факта в два ряда */
  .home-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-fact { padding: 16px 20px; }
  .home-fact--first,
  .home-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .home-fact:nth-child(3),
  .home-fact:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.28); }

  .home-trust { padding: 20px 0; }
  .home-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-trust__item { padding: 0 20px; }
  .home-trust__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .home-trust__item:nth-child(even) { padding-right: 0; }
  .home-trust__item:nth-child(n + 3) { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }

  .home-seo__illus { height: 300px; }
  .home-about__photo { height: 280px; }

  /* ---- внутренние страницы: те же 4→2 и 3→2 -------------------------------- */
  .advantages__grid--four,
  .services__grid--four,
  .letters,
  .works,
  .cat__grid,
  .about__cards,
  .docs,
  .post-grid,
  .infobox__grid,
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* пять в ряд — в три: по две получаются неоправданно широкие плитки */
  .advantages__grid--five,
  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* фотогалерея: на планшете три колонки */
  .gallery__grid--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ---- боковые колонки внутренних страниц уходят вниз ---------------------- */
  .hero__grid,
  .about__intro,
  .contacts__grid,
  .dealer,
  .tank__grid,
  .stages,
  .linkcards { grid-template-columns: minmax(0, 1fr); }

  /* Сетки в одну колонку, у которых задан только gap: без явного minmax(0,…)
     единственная колонка растягивается под min-content содержимого и уносит
     за край всю страницу — так «Варианты отопления» вылезали на 44px. */
  .variants__list,
  .contacts__list,
  .bullets,
  .checklist,
  .callout__list,
  .dealer__list,
  .tank__list,
  .stage__list,
  .toc__list,
  .home-dir__list,
  .home-side__list,
  .footer__list,
  .footer__contacts,
  .work__meta,
  .home-work__meta,
  .home-letter__meta,
  .search-results { grid-template-columns: minmax(0, 1fr); }

  .hero__grid { gap: 28px; margin-bottom: 40px; }
  .about__intro { gap: 28px; margin-bottom: 32px; }
  .contacts__grid { gap: 32px; }
  .dealer { padding: 24px; gap: 20px; }
  .stat { border-left: 0; }
  .widget-stub { height: 380px; }

  /* ---- формы под палец ----------------------------------------------------
     16px в поле — не про читаемость: при меньшем кегле Safari зумит страницу,
     когда поле получает фокус, и вернуть масштаб пользователь уже не может. */
  .form__input { min-height: 48px; font-size: 16px; }
  .form__submit { min-height: 52px; font-size: 16px; }
  .form__agree { min-height: 44px; align-items: flex-start; padding: 6px 0; gap: 10px; }
  .form__agree .form__checkbox { width: 24px; height: 24px; margin-top: 2px; flex: none; }

  /* ---- область нажатия: пальцем, а не курсором ------------------------------
     44px — минимум, ниже которого промахиваются. Высота набирается через
     min-height и inline-flex, чтобы не разъезжались строчные ссылки. */
  .home-side__link,
  .home-letter__zoom,
  .footer__phone,
  .footer__mail,
  .footer__link,
  .toc__link,
  .letter__zoom,
  .map__link,
  .svc-card__link,
  .cat__link,
  .contact__social,
  .contact__mail,
  .breadcrumbs__link,
  .bullets__link,
  .about__card-link,
  .more-link,
  .hero__list a { display: inline-flex; align-items: center; min-height: 44px; }

  .contact__phone { display: flex; align-items: center; min-height: 44px; }
  .pager__link { width: 44px; height: 44px; }
  .share__link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .author__link,
  .warranty__phone,
  .warranty__mail { display: inline-flex; align-items: center; min-height: 44px; }

  .gallery__tab,
  .tabs__btn,
  .rating__btn,
  .review-cta__btn,
  .gallery__more-btn,
  .search__input { min-height: 44px; }

  .home-price-aside__phone,
  .price-aside__phone,
  .home-seo__summary,
  .variants__summary { display: flex; align-items: center; min-height: 44px; }

  .home-price-aside__phone,
  .price-aside__phone { justify-content: center; }

  .home-side__foot { align-items: center; }
  .footer__list { gap: 0; }
  .footer__social-link { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .footer__legal-links { gap: 20px 24px; flex-wrap: wrap; }

  /* подвал: 4 desktop-колонки не помещаются — min-content logo раздувает grid */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
  }

  .footer__col {
    min-width: 0;
  }
}

/* На планшете панель меню занимает правую часть экрана: остаётся подложка,
   по которой меню закрывается. На телефоне панель во весь экран. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mmenu[open] .mmenu__panel {
    left: auto;
    width: 380px;
    box-shadow: -8px 0 24px rgba(14, 76, 126, 0.2);
  }
}

/* --- 30.5 телефон до 767 --------------------------------------------------- */
@media (max-width: 767px) {
  /* нижняя mbar-панель снята (MOBILE TASK 2) — лишний отступ не нужен */

  /* карта: на телефоне 400px съедают весь экран */
  .map__frame { height: 280px; }

  /* popup-форма: на узком экране окно во всю ширину, поля крупнее */
  .modal__dialog--form { padding: 18px; }
  .sitemap { gap: 24px; }
  .sitemap__group--wide .sitemap__list { columns: auto; }

  /* ---- типографика -------------------------------------------------------- */
  .page { font-size: 15px; line-height: 1.6; }

  .h1,
  .home-hero__h1 { font-size: 26px; margin-bottom: 20px; }

  .h2,
  .home-h2,
  .home-h2--28,
  .home-h2--32,
  .cta__title,
  .cta__title--narrow,
  .cta__title--post,
  .variants__summary { font-size: 22px; }

  .card__title,
  .advantage__title,
  .home-object__title,
  .home-step__title,
  .home-dir__title,
  .home-side__title,
  .factor__title,
  .variant__title,
  .home-seo__h3,
  .price-aside__title,
  .home-price-aside__title,
  .footer__title,
  .modal__title,
  .form--hero .form__title { font-size: 18px; }

  .lead,
  .bullets,
  .checklist,
  .cta__text,
  .cta__text--post,
  .home-hero__lead,
  .home-about__p,
  .home-adv__lead,
  .home-seo__p,
  .home-seo__text,
  .home-seo__intro,
  .home-services__note,
  .variants__intro,
  .home-dir__text,
  .home-dir__list,
  .factor__text,
  .footer__about,
  .footer__contacts { font-size: 15px; }

  .home-seo__quote { font-size: 17px; padding: 16px 18px; }

  .breadcrumbs__inner,
  .home-works__note,
  .home-reviews__note,
  .home-objects__note,
  .home-about__label,
  .home-prices__note,
  .footer__legal,
  .form__label,
  .cookie__text { font-size: 13px; }

  /* ---- отступы по краям экрана -------------------------------------------- */
  .container,
  .header__top,
  .breadcrumbs,
  .callbar,
  .home-hero__inner,
  .cta__inner,
  .home-about__grid,
  .variants__container,
  .footer__top,
  .footer__bottom,
  .cookie__inner,
  .mmenu__panel { padding-left: 16px; padding-right: 16px; }

  .section { padding: 36px 0; }
  .home-sec { padding: 44px 0; }
  .home-sec--first { padding: 36px 0 44px; }
  .home-sec--video { padding: 44px 0; }

  /* ---- сетки: одна колонка, кроме оговорённых исключений ------------------- */
  .gallery__grid,
  .home-steps,
  .home-works__grid,
  .home-docs__grid,
  .advantages__grid,
  .ways__grid,
  .services__grid,
  .proscons,
  .home-dirs__side,
  .home-letters,
  .advantages__grid--four,
  .services__grid--four,
  .letters,
  .works,
  .cat__grid,
  .about__cards,
  .docs,
  .post-grid,
  .infobox__grid,
  .stages,
  .linkcards,
  .requisites__grid { grid-template-columns: minmax(0, 1fr); }

  /* исключения: короткие плитки остаются по две */
  .stats,
  .brands,
  .gallery__grid--photos,
  .advantages__grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* сварка: десять преимуществ — компактная сетка 2×5 вместо вертикальной колонны */
  .advantages__grid--five { gap: 12px; }
  .advantages__grid--five .advantage--tight {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
  }
  .advantages__grid--five .advantage--tight svg { flex: none; }
  .advantages__grid--five .advantage--tight .advantage__caption--sm {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  /* исключения: объекты и факты остаются 2×2 */
  .home-objects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-object__inner { padding: 16px 14px; }
  .home-object__icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .home-object__title { font-size: 16px; }
  .home-object__text { font-size: 14px; }

  .home-fact { padding: 14px 12px; }
  .home-fact__value { font-size: 21px; }
  .home-fact__label { font-size: 13px; }
  .home-fact__stub { font-size: 11px; white-space: normal; }

  .home-trust { padding: 18px 0; }
  .home-trust__item { padding: 0 16px; }
  .home-trust__item:nth-child(odd) { padding-left: 0; }
  .home-trust__item:nth-child(even) { padding-right: 0; }
  .home-trust__value { font-size: 18px; }
  .home-trust__label { font-size: 13px; }

  /* ---- первый экран главной ----------------------------------------------- */
  .page[data-page="home"] .home-hero {
    background-image:
      linear-gradient(180deg, rgba(14, 76, 126, 0.68) 0%, rgba(27, 117, 188, 0.58) 52%, rgba(14, 76, 126, 0.72) 100%),
      url("/assets/img/home/hero-main.webp");
    background-position: center 28%;
    background-size: cover;
  }

  .home-hero__inner {
    padding-top: 18px;
    padding-bottom: 24px;
    gap: 0;
  }

  /* полосатая заглушка «фото: …» на mobile не показываем — фон hero-main.webp */
  .home-hero__photo { display: none; height: auto; margin: 0; }

  .home-hero__stub {
    position: static;
    transform: none;
    display: none;
    margin: 0;
  }

  .home-hero__h1 {
    font-size: 27px;
    line-height: 1.14;
    margin-bottom: 12px;
    letter-spacing: -0.012em;
  }

  .home-hero__lead {
    margin-bottom: 16px;
    line-height: 1.45;
    max-width: none;
  }

  .home-hero__col {
    align-items: stretch;
    gap: 14px;
    margin-bottom: 0;
  }

  .home-hero__price { max-width: none; }

  .home-hero__cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 13px 16px;
    min-height: 48px;
    box-sizing: border-box;
  }

  .home-hero__tel {
    align-items: center;
    gap: 10px;
    padding: 8px 0 0;
  }

  .home-hero__tel-icon { width: 18px; height: 18px; margin-top: 0; flex-shrink: 0; }
  .home-hero__tel-num { font-size: 18px; font-weight: 600; line-height: 1.25; }
  .home-hero__tel-note { font-size: 12px; line-height: 1.35; opacity: 0.72; }

  .callbar {
    font-size: 16px;
    line-height: 1.25;
    padding: 11px 16px;
  }

  /* форма первого экрана на телефоне не нужна: кнопка ведёт к блоку заявки */
  .form--hero { display: none; }

  /* ---- направления работ: «Отопление» крупнее, остальные компактные -------- */
  .home-dir { padding: 20px 16px; }
  .home-dir__photo { height: 170px; min-height: 170px; max-height: 170px; flex-basis: 170px; }
  .home-dir__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .home-dir__btn { text-align: center; }
  .home-dirs__side { gap: 12px; }
  .home-side { padding: 16px; }
  .home-side__list { font-size: 14px; }

  /* ---- как проходит работа, работы, документы ------------------------------ */
  .home-step { padding: 18px 16px; }
  .home-step__num { font-size: 48px; right: 12px; }
  .home-works__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home-work__photo { height: 180px; }
  .home-doc__scan { height: 260px; }
  .home-docs__note { padding: 16px; }
  .home-letter__meta { padding: 12px; }

  /* ---- благодарственные письма: горизонтальный scroll-snap (mobile) -------- */
  .home-letters {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .home-letters::-webkit-scrollbar { display: none; }

  .home-letter {
    flex: 0 0 86%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    max-width: none;
  }

  .home-letter__scan {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
  }

  .home-letter__scan img {
    width: 100%;
    height: auto;
    max-height: min(52vh, 400px);
    object-fit: contain;
  }

  .home-about__stats { flex-wrap: wrap; gap: 16px; }
  .home-about__sep { display: none; }
  .home-about__value { font-size: 22px; }
  .home-about__photo { height: 220px; }
  .home-seo__illus { height: 200px; }
  .home-seo__illus--sm { height: 180px; }

  /* ---- видео на всю ширину ------------------------------------------------- */
  .video { max-width: none; }
  .video__play,
  .video.video--home .video__play--home {
    width: 72px;
    height: 72px;
  }
  .video.video--home .video__play--home::before {
    border-width: 12px 0 12px 20px;
    margin-left: 5px;
  }

  .page[data-page="home"] .home-about__photo {
    height: auto;
    aspect-ratio: auto;
  }

  .page[data-page="home"] .home-about__photo .ph__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: unset;
  }

  /* ---- вкладки: горизонтальная прокрутка без обрезки ------------------------ */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tabs::-webkit-scrollbar { display: none; }
  .tabs__btn { flex: none; white-space: nowrap; min-height: 44px; }
  .tabs__panel { padding: 18px 16px; }

  /* ---- хлебные крошки ------------------------------------------------------- */
  .breadcrumbs__inner {
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .breadcrumbs__inner::-webkit-scrollbar { display: none; }

  /* ---- таблицы цен превращаются в карточки ---------------------------------
     Разметка таблицы не меняется: строка становится флекс-контейнером,
     название занимает всю ширину, единица и цена встают под ним в строку. */
  .price-table,
  .price-table tbody,
  .home-price-table,
  .home-price-table tbody { display: block; width: 100%; }

  .price-table thead,
  .home-price-table thead { display: none; }

  .price-table,
  .home-price-table { border: 0; font-size: 15px; }

  .home-price-table--panel { display: none; }
  .home-price-table--panel.is-active { display: block; }

  .price-table__row,
  .home-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
  }

  .price-table__row--alt { background: #ffffff; }

  .price-table__td,
  .home-price-td {
    display: block;
    width: 100%;
    padding: 0;
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 15px;
  }

  .price-table__td--unit {
    width: auto;
    flex: 1;
    margin-top: 6px;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-muted);
  }

  .price-table__td--price,
  .home-price-td--price {
    width: auto;
    margin-top: 6px;
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    font-size: 16px;
  }

  .price-aside,
  .home-price-aside { padding: 20px 16px; }

  /* поиск по прайсу работает и в карточном виде — строки те же */
  .search-results__row { flex-wrap: wrap; }

  /* ---- формы ---------------------------------------------------------------- */
  .form { padding: 20px 16px; }
  .form--hero { padding: 20px 16px; }

  /* ---- модальные окна на весь экран ----------------------------------------- */
  .modal,
  .modal--letter,
  .modal--photo,
  .modal--home { padding: 0; align-items: stretch; }

  .modal__dialog,
  .modal__dialog--home {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 56px 16px 92px;
  }

  .modal__dialog--photo { padding: 56px 0 92px; background: transparent; }

  .modal__head { margin-bottom: 10px; padding-right: 52px; }

  .modal__close,
  .modal__close--light,
  .modal__close--home {
    position: fixed;
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    z-index: 100;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .modal__close--home {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(14, 76, 126, 0.18);
    color: var(--blue-dark);
  }

  .modal__close--home:hover {
    border-color: var(--red);
    color: var(--red);
  }

  .modal__head--home {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
    padding-top: max(4px, env(safe-area-inset-top, 0px));
    padding-right: 56px;
    margin-bottom: 12px;
  }

  .modal__head--home .modal__title {
    font-size: 17px;
    line-height: 1.3;
    padding-right: 8px;
  }

  .modal__dialog--home .ph:has(.modal__img:not([hidden])) {
    max-width: 100%;
    overflow: hidden;
  }

  .modal__nav {
    top: auto;
    bottom: 16px;
    transform: none;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .modal__nav--prev { left: 16px; }
  .modal__nav--next { right: 16px; }

  /* дорисованные стрелки и счётчик: окна без стрелок белые, полупрозрачная
     подложка макета на них не читается — берём сплошной фон */
  .modal__nav--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #ffffff;
  }

  .modal__nav--mobile:hover { background: var(--blue-dark); }

  .modal__counter--mobile {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    background: rgba(14, 76, 126, 0.85);
    color: #ffffff;
    font-size: 14px;
    padding: 5px 14px;
  }

  .modal__caption {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 0 16px;
  }

  .ph--h520 { height: auto; aspect-ratio: 210/297; }

  /* ---- подвал: колонки-аккордеоны -------------------------------------------- */
  .footer { padding-top: 28px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .footer__brand,
  .footer__about,
  .footer__social { text-align: center; }

  .footer__about { max-width: none; margin-bottom: 16px; }
  .footer__social { justify-content: center; margin-bottom: 20px; }

  .footer__col .footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
  }

  /* высоту строки задаёт сам заголовок, кнопка только растягивается на неё:
     со своим min-height она прибавляла строке лишние 0.8px */
  .footer__col .footer__title-btn {
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
  }

  .footer__col .footer__title::after {
    content: '▾';
    font-size: 12px;
    transition: transform 0.2s;
  }

  .footer__col.is-collapsed .footer__title::after { transform: rotate(-90deg); }
  .footer__col .footer__list,
  .footer__col .footer__contacts { padding-bottom: 18px; }
  .footer__col.is-collapsed .footer__list,
  .footer__col.is-collapsed .footer__contacts { display: none; }

  .footer__list { font-size: 16px; }
  .footer__col .footer__contacts { gap: 10px; }

  .footer__bottom { margin-top: 18px; }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .footer__legal-links { flex-direction: column; align-items: center; gap: 2px; }
  .footer__legal-links .footer__link { min-height: 40px; }

  /* ---- внутренние страницы --------------------------------------------------
     Узкие колонки макета (720, 760, 800, 900px) на телефоне разворачиваются
     во всю ширину: поля задаёт контейнер, отдельная колонка только мешает. */
  .container--narrow,
  .container--mid,
  .container--text,
  .breadcrumbs--text,
  .narrow-block,
  .price__note,
  .price__intro,
  .services__intro,
  .contacts__intro,
  .home-seo__col,
  .lead--wide,
  .home-adv__lead { max-width: none; }

  .feed__inner { max-width: none; padding: 28px 16px 0; }
  .cta__body { max-width: none; padding: 0 16px; }
  .section--feed { padding: 0 0 40px; }
  .section--related { padding: 40px 0; }
  .section--gallery { padding: 0 0 40px; }
  .section--letters { padding: 32px 0 40px; }

  .h1--post { font-size: 26px; }
  .h2--sm,
  .h2--related { font-size: 22px; }
  .requisites__title,
  .contacts__title,
  .callout__title,
  .stage__title,
  .linkcard__title,
  .review-cta__title,
  .tank__group-title { font-size: 18px; }

  .about__p,
  .tank__text,
  .dealer__list,
  .callout__list,
  .hero__list { font-size: 15px; }

  /* тело лонгрида: 15px, но межстрочный крупнее — это длинное чтение */
  .longread { font-size: 15px; line-height: 1.75; }
  .longread__h2 { font-size: 20px; margin: 32px 0 12px; }
  .longread__quote { font-size: 16px; }
  .longread__figure { margin-bottom: 24px; }

  /* ---- прайс: панель-таблица должна стать блоком, иначе карточек не будет --- */
  .price-panel.is-active { display: block; }
  .search { max-width: none; }
  .search__input { min-height: 48px; }

  /* результаты поиска — те же карточки: название сверху, цена справа */
  .search-results__row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .search-results__name { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 15px; }
  .search-results__price { font-size: 16px; }

  /* Строка-заголовок группы в таблицах пусконаладки: подложка на ячейке.
     :has() не понимают Safari до 15.4 — там у строки останется лишний
     отступ 14px и рамка. Ничего не ломается, только чуть просторнее. */
  .price-table__row:has(.price-table__group) { padding: 0; border-bottom: 0; }

  .price-table__group {
    width: 100%;
    padding: 12px;
    background: var(--blue-light);
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 15px;
  }

  .price-table__td--indent { padding-left: 0; }
  .price-table__td--w150 { width: auto; }

  /* таблица коэффициентов на сварочных работах — тем же карточным способом */
  .coef-table,
  .coef-table tbody { display: block; width: 100%; }

  .coef-table { border: 0; }

  .coef-table__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
  }

  .coef-table__row--alt { background: #ffffff; }
  .coef-table__td { display: block; width: 100%; padding: 0; font-size: 15px; }
  .coef-table__td--value { width: auto; margin-top: 6px; margin-left: auto; }

  /* ---- фотогалерея ----------------------------------------------------------- */
  .gallery__bar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  .gallery__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gallery__tabs::-webkit-scrollbar { display: none; }
  .gallery__tab { flex: none; min-height: 44px; }
  .gallery__grid--photos { gap: 10px; }
  .gallery__more-btn { width: 100%; min-height: 52px; }

  /* ---- отзывы ---------------------------------------------------------------- */
  .letter__btn,
  .doc__btn { width: 100%; }

  .rating { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 16px; }
  .rating__value { font-size: 34px; }
  .rating__btn { width: 100%; }
  .widget-stub { height: 300px; }

  .review-cta { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 16px; }
  .review-cta__actions { flex-direction: column; }
  .review-cta__btn { text-align: center; min-height: 48px; display: flex; align-items: center; justify-content: center; }

  /* ---- контакты и реквизиты ---------------------------------------------------
     Расчётный счёт — 20 цифр без пробелов: без принудительного переноса
     он выдавливает колонку и вместе с ней всю страницу. */
  .contact__phone { font-size: 21px; }
  /* адреса соцсетей не переносятся и распирают флекс-элемент через min-content */
  .contact > * { min-width: 0; }
  .contact__socials { flex-wrap: wrap; gap: 4px 14px; }
  .contact__social,
  /* word-break первым — фолбэк для Safari до 15.4, где overflow-wrap:anywhere
     ещё не понимают. Там расчётный счёт из 20 цифр иначе распирает колонку.
     В современных браузерах выигрывает второе свойство. */
  .contact__value { word-break: break-word; overflow-wrap: anywhere; }
  .requisites { margin-top: 32px; padding: 20px 16px; }
  .requisites__grid { gap: 2px; max-width: none; font-size: 15px; }
  .requisites__key { font-size: 13px; }
  .requisites__val { word-break: break-word; overflow-wrap: anywhere; margin-bottom: 10px; }
  .requisites__company { font-size: 16px; }
  .map { margin-top: 32px; }

  /* ---- статья и новость ------------------------------------------------------- */
  .infobox { padding: 18px 16px; }
  .infobox--lead { padding: 18px 16px; margin-bottom: 28px; }
  .sep-top { margin-top: 32px; padding-top: 20px; }
  .post-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .post-foot--end { flex-wrap: wrap; justify-content: flex-start; }
  .author__photo { width: 52px; height: 52px; }
  .stat { padding: 0 6px; }
  .stat__value { font-size: 26px; }
  .stage { padding: 20px 16px; }
  .linkcard { padding: 20px 16px; }
  .about__card { padding: 20px 16px; }
  .dealer { padding: 20px 16px; }
  .tabs__panel { border-left: 0; border-right: 0; }

  /* оглавление статьи свёрнуто: до текста иначе не докрутить */
  .infobox--toc .toc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
  }

  .infobox--toc .toc__title::after {
    content: '▾';
    font-size: 12px;
    color: var(--blue);
    transition: transform 0.2s;
  }

  .infobox--toc.is-collapsed .toc__title::after { transform: rotate(-90deg); }
  .infobox--toc.is-collapsed .toc__list { display: none; }
  .infobox--toc .toc__list { padding-top: 8px; }

  /* ---- колоночные флексы: обязательный nowrap --------------------------------
     Ширину линии в колоночном флексе задаёт самый широкий элемент, а не
     контейнер. Пока стоит flex-wrap: wrap, растянутая полоса вкладок галереи
     раздувала линию до 1103px и уносила страницу вбок. С nowrap линия одна
     и её ширина равна ширине контейнера. */
  .gallery__bar,
  .rating,
  .review-cta,
  .review-cta__actions,
  .post-foot,
  .footer__legal,
  .footer__legal-links { flex-wrap: nowrap; }

  /* .mbar («Позвонить / Написать») отключена — см. display:none в 30.1 */

  .to-top { right: 16px; bottom: 16px; }

  /* якоря и #zayavka не прячутся под липкой шапкой */
  :target {
    scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px) + 12px);
  }

  .cta[id],
  main [id] {
    scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px) + 12px);
  }

  /* ---- плашка cookie: во всю ширину ----------------------------------------- */
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .cookie__btn { width: 100%; min-height: 48px; }
}

/* Сварочные работы (/svarochnye-raboty/): «Цены на сварку труб» — карточки 2×2
   на планшете и телефоне; desktop-таблица без изменений (≥1024). */
@media (max-width: 1023px) {
  .page[data-page="svarochnye-raboty"] .price__layout {
    min-width: 0;
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld,
  .page[data-page="svarochnye-raboty"] .price-table--weld tbody {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 0;
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld .price-table__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld .price-table__row--alt {
    background: var(--blue-light);
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld .price-table__td {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld .price-table__td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-muted);
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld .price-table__td--center {
    color: var(--text);
  }

  .page[data-page="svarochnye-raboty"] .price-table--weld .price-table__td--price {
    margin-top: 0;
    margin-left: 0;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    color: var(--blue);
  }
}

/* --- 30.6 узкий телефон до 374 ----------------------------------------------
   Граница ниже 375px, а не 480px: 375 — это iPhone SE и mini, заметная доля
   мобильного трафика, и урезанные кегли им не нужны. */
@media (max-width: 374px) {
  .h1 { font-size: 22px; }
  .page[data-page="home"] .home-hero__h1 { font-size: 25px; }
  .home-hero__h1-sub { font-size: 17px; }

  .h2,
  .home-h2,
  .home-h2--28,
  .home-h2--32,
  .cta__title,
  .cta__title--narrow,
  .cta__title--post,
  .variants__summary { font-size: 20px; }

  .header__logo-name { font-size: 17px; }
  .header__logo-mark { height: 30px; width: auto; }

  .home-hero__price-value { font-size: 19px; }
  .home-fact__value { font-size: 18px; }
  .home-trust__value { font-size: 16px; }
  .home-object__title { font-size: 15px; }
  .mmenu__phone { font-size: 21px; }
}