/* ==========================================================================
   ПИТЕРСКИЙ ПЛИТОЧНИК — слой дизайна
   Подключается ПОСЛЕДНИМ элементом <body>, то есть после всех шести
   встроенных <style> каждой страницы. Поэтому при равной специфичности
   выигрывает по порядку; !important стоит только там, где встроенные
   стили сами им пользуются.
   Аудит дизайна, сентябрь 2026.
   ========================================================================== */

:root {
  /* Жёлтый жил в трёх видах: #FFD700 (шапка), #FED204 (черты, цены),
     #F5C518 (слайдер). Остаётся один — тот, что уже носит смысл «цена». */
  --c-accent:        #fed204;
  --c-accent-press:  #e8be00;
  --c-accent-soft:   #fff6cc;

  /* Тёмный был в пяти видах. #444 оставлен намеренно: он уже стоит у 54
     элементов, и менять его частично хуже, чем не менять вовсе. */
  --c-ink:    #1a1a1a;
  --c-body:   #444444;
  --c-muted:  #6b7280;
  --c-line:   #e3e3e3;
  --c-navy:   #20242b;
  --c-success:#2e7d32;

  --r:      8px;
  --r-pill: 999px;
  --shadow-1: 0 1px 3px rgba(26, 26, 26, .08);
  --shadow-2: 0 6px 20px rgba(26, 26, 26, .12);

  --nav-h: 45px;
}

/* Якорь из меню больше не заводит заголовок под липкую шапку. */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

/* ==========================================================================
   1. ЧТО МЕШАЛО СРАЗУ
   ========================================================================== */

/* 1.1 Белая «блёстка» бесконечно бегала по трём главным кнопкам
       (.line-anim:after — прямоугольник 30×300, поворот 45°, 3 с, infinite).
       Приём баннерных сетей; при среднем чеке 50 000 ₽ работает против доверия. */
.line-anim::after { display: none !important; }
.line-anim { overflow: visible; }

/* 1.2 Белый текст героя лежал на светлой фотографии без затемнения.
       На тёмном керамограните читался случайно, на светлом — нет. */
/* Слайдер собран не на swiper-слайдах, а на двух фоновых слоях
   (#slider-first / #slider-last), поэтому затемнение вешаем на саму секцию. */
.slider { position: relative; }
.slider::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(18, 19, 22, .18) 0%,
              rgba(18, 19, 22, .50) 58%,
              rgba(18, 19, 22, .70) 100%);
}
/* Поднимаем над затемнением только саму обёртку: её дети встают выше
   вместе с ней. Раньше я задавал position:relative каждому — и сбивал
   точкам слайдера их absolute-позицию, они уезжали в центр экрана. */
.slider-wrap, #slider-wrap, #slider-wrap2 { position: relative; z-index: 2; }
/* На страницах услуг класс .slider вложен сам в себя — без этого
   затемнение накладывалось дважды и фотография уходила в черноту. */
.slider .slider::after { content: none; }

/* 1.3 Жёлтая черта под заголовком: на главной она по центру и ~2/3 ширины,
       на страницах услуг — обрубок 47px, прижатый влево под центрированным
       заголовком. Один вид на весь сайт. */
.section__title { position: relative; padding-bottom: 18px !important; }
.section__title::after,
.works .section__title::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 72px !important; height: 4px !important;
  background: var(--c-accent) !important;
  border-radius: 2px !important;
  margin: 0 !important;
}

/* 1.4 Кнопка в шапке стояла вплотную к номеру телефона: padding 5px 0,
       боковых отступов не было вовсе, высота 26px. */
.header-tel__btn {
  padding: 11px 22px !important;
  margin-top: 10px !important;
  min-height: 44px;
  border-radius: var(--r) !important;
  background: var(--c-accent) !important;
  color: var(--c-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.header-tel__btn:hover { background: var(--c-accent-press) !important; }

/* 1.5 Таблица прайса на странице услуги: все ячейки по центру, включая
       описания по 60 знаков; валюты не выстраивались в столбик. */
.grid_price { border-collapse: collapse !important; }
.grid_price td { text-align: left !important; padding: 14px 18px !important; }
.grid_price td + td,
.grid_price .right_item {
  text-align: right !important;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.grid_price tr:nth-child(2n) td { background: #fafafa; }

/* ==========================================================================
   2. ТИПОГРАФИКА
   Шкала кеглей целиком не меняется: 15 размеров разбросаны по четырём
   файлам и инлайну, частичная замена дала бы сайт хуже нынешнего.
   Меняются заголовки (они управляются из одного места) и длина строки.
   ========================================================================== */
h1, h2, h3,
.section__title, .slider-test__title,
.benefits-item__title, .work-step__title,
.footer__item-title, .prices__title, .reels-title {
  font-family: 'Roboto Condensed', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1.section__title, .slider-test__title {
  font-size: clamp(28px, 4.2vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}
/* Заголовок героя ломался так, что «м2» оставалось одно на строке. */
.slider-test__title { max-width: 20ch; margin-inline: auto; }

h2.section__title, h3.section__title {
  font-size: clamp(24px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
}

/* Длина строки доходила до 155 знаков при норме 60–80.
   Ограничение ставится на сами абзацы, а не на контейнер: сетки не трогаем. */
.about__text, .about__text p, .about-wrap p,
.faq-item p, .reels-subtitle, .works__subtitle { max-width: 72ch; }

/* Подчёркнутый текст, который не является ссылкой, и синтетический курсив. */
.text-under { text-decoration: none !important; font-weight: 700 !important; }
.text_italic { font-style: normal !important; }

/* ==========================================================================
   3. ЦВЕТ: три жёлтых сведены в один
   ========================================================================== */
.slider__btn, .btn_master, .reel-play-btn,
.swiper-pagination-bullet-active, .reels-dot.is-active {
  background-color: var(--c-accent) !important;
}
.prices a, .footer a:hover, .nav-menu__a:hover { color: var(--c-accent); }

/* Бирюзовые маркеры #41b7c3 и синие заголовки #073361 на страницах услуг —
   цвета, которых нет больше нигде на сайте. */
ul.about__text > li > .header {
  height: auto !important; min-height: 0 !important;
  color: var(--c-ink) !important;
  text-transform: none !important;
  font-size: 19px !important; font-weight: 700 !important; line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
ul.about__text > li > .header::before {
  background: var(--c-accent) !important;
  width: 10px !important; height: 10px !important;
  border-radius: 2px !important;
}

/* ==========================================================================
   4. ФОРМА: десять радиусов сведены к двум
   ========================================================================== */
.grid-item, .benefits-item, .review-card, .reel-cell, .works__tab,
.map-modal__content, .works-slider__item-img, .works-slider__item img,
.map-modal__input, .form-control,
input[type=text], input[type=tel], input[type=email], input[type=number],
textarea, select {
  border-radius: var(--r) !important;
}
.slider-arrows_btn, .reels-carousel-btn, .reviews-carousel__btn,
.works-button-prev, .works-button-next,
.benefits-button-prev, .benefits-button-next,
.reel-play-btn, .slider-status__item { border-radius: var(--r-pill) !important; }

/* ==========================================================================
   5. КНОПКИ: три уровня вместо «всё жёлтое»
   ========================================================================== */

/* Основное действие — жёлтая заливка теперь означает ровно одно. */
.slider__btn, .callback__btn, .map-modal__btn, .btn-primary {
  background: var(--c-accent) !important;
  color: var(--c-ink) !important;
  border: 0 !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 15px 30px !important;
  min-height: 52px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  transition: background-color .16s ease, transform .16s ease;
}
.slider__btn:hover, .callback__btn:hover, .map-modal__btn:hover, .btn-primary:hover {
  background: var(--c-accent-press) !important;
}
.slider__btn:active, .callback__btn:active, .map-modal__btn:active { transform: translateY(1px); }

/* Третичное — переход, а не действие. Восемь жёлтых «ПОДРОБНЕЕ» на карточках
   услуг спорили по весу с главной кнопкой. */
.atuin-btn, .services-item__btn {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1.5px solid var(--c-ink) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  transition: background-color .16s ease, color .16s ease;
}
.atuin-btn:hover, .services-item__btn:hover {
  background: var(--c-ink) !important;
  color: #fff !important;
}

/* «Все видео» (чёрная таблетка r=999) и «Все услуги» (белая рамка r=0,
   шириной 560px) стояли в 400px друг от друга и были антиподами. */
.reels-open-all, .works__all-projects a, .services__all a {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1.5px solid var(--c-ink) !important;
  border-radius: var(--r) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  min-height: 46px;
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
.reels-open-all:hover, .works__all-projects a:hover, .services__all a:hover {
  background: var(--c-ink) !important; color: #fff !important;
}

/* Табы примеров работ: два из пяти переносились в две строки. */
.works__button {
  white-space: nowrap !important;
  border-radius: var(--r) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  min-height: 46px;
  padding: 0 18px !important;
}

/* Круглые управляющие кнопки каруселей — один вид на весь сайт
   (было три размера кнопки play: 48, 64 и 96px). */
.slider-arrows_btn, .reels-carousel-btn, .reviews-carousel__btn,
.works-button-prev, .works-button-next {
  background: rgba(26, 26, 26, .80) !important;
  color: #fff !important;
  border: 0 !important;
  width: 46px !important; height: 46px !important;
  box-shadow: var(--shadow-1) !important;
}
.reel-play-btn {
  width: 64px !important; height: 64px !important;
  box-shadow: none !important;          /* жёлтое свечение читалось как дефект сжатия */
  color: var(--c-ink) !important;
}

/* ==========================================================================
   6. СОСТОЯНИЯ. Видимого фокуса с клавиатуры на сайте не было вовсе.
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.prices a:focus-visible, .footer a:focus-visible, .nav a:focus-visible,
.slider a:focus-visible, .slider button:focus-visible { outline-color: var(--c-accent); }

.map-modal__input:focus, .form-control:focus, textarea:focus, select:focus {
  border-color: var(--c-ink) !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, .10) !important;
  outline: none;
}
textarea, textarea.form-control { resize: vertical; min-height: 110px; }

/* ==========================================================================
   7. БЛОКИ
   ========================================================================== */

/* 7.1 Преимущества: иконка стояла ПОД кнопкой, а у каждой второй карточки
       висела синеватая тень — залипшее состояние, читалось как брак. */
.benefits.container .benefits-item,
.benefits.container .benefits-item:nth-child(2n) {
  border: 1px solid var(--c-line) !important;
  box-shadow: var(--shadow-1) !important;
  display: flex; flex-direction: column;
}
.benefits.container .benefits-item:hover { box-shadow: var(--shadow-2) !important; }
.benefits-item__icon, .benefits-item img { order: -1 !important; margin: 0 0 16px !important; }
.benefits-item__text { flex: 1 1 auto; }

/* «ПОДРОБНЕЕ» выглядело как текст под жёлтым маркером. */
.benefits-item a[href], .benefits-item__more {
  background: none !important;
  text-transform: none !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--c-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Логотипы партнёров: растр 120px, растр 60px и просто текст в одну строку. */
.benefits-item__logos, .partners-logos { display: flex; align-items: center; gap: 22px; justify-content: center; }
.benefits-item__logos img, .partners-logos img {
  height: 26px !important; width: auto !important;
  filter: grayscale(1) opacity(.7);
  transition: filter .18s ease;
}
.benefits-item__logos:hover img, .partners-logos:hover img { filter: none; }

/* 7.2 Карточки услуг: разной высоты с провалами, текст по центру при 5–7 строках. */
.grid { align-items: stretch; }
.grid-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line);
  transition: box-shadow .18s ease, transform .18s ease;
}
.grid-item:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.grid-item .info { display: flex; flex-direction: column; flex: 1 1 auto; }
.grid-item .info-text { flex: 1 1 auto; text-align: left; }
.grid-item .info h2, .grid-item .info h3 { text-align: left; font-weight: 700; }
.grid-item .button-wrap { margin-top: auto; padding-top: 16px; }
.service-price {
  background: var(--c-accent-soft) !important;
  color: var(--c-ink) !important;
  border-radius: 4px; padding: 1px 6px;
  font-weight: 700; white-space: nowrap;
}

/* 7.3 Этапы: два слоя иконок подряд — жёлтый круг с цифрой и серый квадрат. */
.work-step__icon { display: none !important; }

/* 7.4 Цены: строки были отцентрованы, правый край рвался на ±10px. */
.prices p.prices__item-text {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.prices p.prices__item-text span {
  text-align: right; min-width: 190px;
  font-variant-numeric: tabular-nums;
}

/* Между тёмной секцией цен и заголовком «Частые вопросы» было 5px. */
.faq, #faq, .faq-section { padding-top: 72px !important; }

/* 7.5 Футер не читался как футер: белый, без границы, юридический текст
       12px по центру во всю ширину. */
.footer {
  background: #f6f6f4 !important;
  border-top: 1px solid var(--c-line) !important;
  padding-top: 52px !important;
}
.footer__politics-text, .footer__politics {
  max-width: 820px; margin-left: auto; margin-right: auto;
  text-align: left !important;
  font-size: 13px !important; line-height: 1.5;
  color: var(--c-muted) !important;
}

/* 7.6 Согласие на обработку данных было напечатано дважды и разными кеглями. */
.modal-presonal, .form-consent, .personal-text {
  font-size: 13px !important; line-height: 1.45; color: var(--c-muted) !important;
}

/* ==========================================================================
   8. ДВИЖЕНИЕ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   9. ТЕЛЕФОН
   ========================================================================== */
@media (max-width: 760px) {
  :root { --nav-h: 56px; }

  /* Всё кликаемое — не мельче 44px. */
  .nav-menu__a, .footer__list-link, .works__button, .atuin-btn,
  .header-tel__btn, .reviews-filter__btn, .reels-open-all { min-height: 44px; }

  /* Под табами «Примеры работ» показывалась системная полоса прокрутки,
     а третий таб обрывался посреди слова без подсказки. */
  .works__buttons {
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .works__buttons::-webkit-scrollbar { display: none; }
  .works__button { scroll-snap-align: start; }

  /* Логотип в подвале занимал 420×150 и подавлял весь блок. */
  .footer__logo img { max-width: 220px !important; height: auto; }

  .prices p.prices__item-text span { min-width: 0; }
}

/* ==========================================================================
   10. НАЙДЕНО ПРИ РАЗБОРЕ РЕМЕСЛА
   ========================================================================== */

/* 10.1 На страницах услуг <h1> вставлен ВНУТРЬ <header>, а панель навигации
        имеет жёсткое `top: 100px`, рассчитанное на высоту шапки главной.
        Заголовок добавляет ~55px — и панель садится прямо на него.
        Это не якорный промах, а статическое перекрытие при нулевой прокрутке. */
/* Заголовок страницы услуги вынесен из <header> в разметке — см. fix_content.py.
   Правило с :has() здесь не работало: .nav получает класс .scroll сразу
   и становится fixed, а значит всё равно накрывала бы заголовок. */
/* Навигация абсолютна и висит на top:100px, сразу под шапкой той же высоты,
   поэтому полосе заголовка нужен отступ на её высоту. */
.page-title-bar { padding: 60px 0 10px; }
.page-title-bar .section__title { text-align: left !important; margin: 0 !important; }
.page-title-bar .section__title::after { left: 0 !important; transform: none !important; }

/* 10.2 `.container { width: 90% }` без max-width — на экране 1428 это 1281px,
        а на 2560 стало бы 2304. Корень всех длинных строк. */
/* Ширину снимало правило из прошлого круга аудита: .container { max-width: 100% !important }.
   Без ограничения строка доходила до 160 знаков при норме 60–80. */
.container { max-width: 1200px !important; }

/* 10.3 Фотографии в карточках услуг были деформированы: встроенный <style>
        перебивал object-fit на `fill`. */
.services .grid-item .image img,
.services-content .grid-item .image img,
.grid-item .image img { object-fit: cover !important; }

/* 10.4 Кнопка внутри карточки была выдрана из потока (`position: absolute`),
        поэтому у коротких карточек зияло до 150px пустоты, а у длинных
        кнопка прижималась к тексту. */
.services .grid-item .info,
.services-content .grid-item .info {
  position: static;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: calc(100% - 200px);
  padding: 18px 16px 20px;
}
.services .grid-item .info-text,
.services-content .grid-item .info-text { flex: 1 1 auto; }
.services .grid-item .button-wrap,
.services-content .grid-item .button-wrap {
  position: static;
  margin-top: 18px;
  text-align: left;
}

/* 10.5 «Все услуги» — рамка 558×52 во всю ширину, читалась как поле ввода. */
.services .services__btn {
  width: auto;
  min-width: 240px;
  height: auto;
  min-height: 48px;
  padding: 13px 32px;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--r) !important;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}
.services .services__btn:hover { background: var(--c-ink); color: #fff; }

/* 10.6 Блок отзывов: ряд фильтров скрыт через display:none, но отступы от него
        остались — между заголовком и карточкой зияло ~110px. Вторая карточка
        обрубалась краем контейнера по вертикали и выглядела как сбой отрисовки. */
.reviews-section { padding-top: 32px; }
.reviews-section .reviews-carousel { margin-top: 20px; }
.reviews-section .reviews-carousel__viewport { padding: 14px 0 26px; }
.reviews-section .reviews-carousel__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

/* 10.7 Подпись шага «Выезд мастера и смета» — 7 строк по центру. */
.work-step__text, .work-item__text { text-align: left; max-width: 28ch; margin-inline: auto; }

/* 10.8 Текст карточек преимуществ обрезан на сервере по числу байт: в одном
        блоке соседствуют «радуе..», «того,…» и «материалы:…».
        Обрез делает браузер по границе строки. */
.benefits-item__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

/* 10.9 Состояния кнопок: нажатия не было нигде, переходы срабатывали рывком. */
.slider__btn, .header-tel__btn, .btn_master, .services__btn, .services-item__btn,
.atuin-btn, .map-modal__send, .submit_calc, .works__button, .reels-open-all,
.nav-services-panel__cta {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .08s ease;
}
.slider__btn:active, .header-tel__btn:active, .btn_master:active, .services__btn:active,
.services-item__btn:active, .atuin-btn:active, .map-modal__send:active,
.submit_calc:active, .works__button:active, .reels-open-all:active {
  transform: translateY(1px);
  filter: brightness(.95);
}

/* Отключённого вида у кнопок отправки не существовало — теперь он нужен,
   потому что кнопка блокируется на время запроса (js/ux.js). */
button[disabled], .map-modal__send[disabled], .submit_calc[disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.35);
}

/* Сообщение об ошибке выводилось голым текстом. */
.errors:not(:empty) {
  display: block;
  margin: 10px 0 4px;
  padding: 10px 14px;
  border-left: 4px solid #c0392b;
  border-radius: 0 4px 4px 0;
  background: #fdecea;
  color: #8a1c12;
  font-size: 15px;
  line-height: 1.4;
}

/* 10.10 Фокус: встроенный блок снимал обводку у карусели отзывов и карточек,
         а на тёмной шапке и блоке цен прежний цвет почти сливался с фоном. */
.reviews-carousel__btn:focus-visible,
.reviews-add-review:focus-visible,
.reviews-grid .review-card:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--c-ink) !important;
  outline-offset: 3px !important;
}
.nav :focus-visible, .prices :focus-visible, .slider :focus-visible {
  outline-color: var(--c-accent) !important;
}
:focus:not(:focus-visible) { outline: none !important; }

/* 10.11 Модалка расчёта — 610px, зафиксирована по центру без ограничения высоты.
         На телефоне с открытой клавиатурой её низ (согласие и кнопка) уезжал
         за экран, и докрутить до него было нельзя. */
.map-modal .map-modal__content {
  max-height: min(90dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 10.12 Таблица прайса рвала страницу на узких экранах. На широких
         `display:block` схлопывал её по содержимому, поэтому только в медиа. */
.grid_price { width: 100%; }
/* Ячейки прайса были набраны Helvetica/Arial: знака ₽ там нет, он
   подставлялся из запасного шрифта и налезал на последнюю цифру. */
.grid_price, .grid_price td, .grid_price .item {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.grid_price .right_item .item { letter-spacing: normal; word-spacing: normal; }
@media (max-width: 760px) {
  .grid_price { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 10.13 Мелкий кегль поднимался только до 480px — на 481–760 (крупные телефоны,
         планшеты) 12–13px оставались. */
@media (max-width: 860px) {
  body, p, li, .about__text, .info-text, .prices__item-text, .works__subtitle { font-size: 16px; }
  .footer__politics-text, small { font-size: 13px; }
}

/* 10.14 Тач-цели в липкой панели: 30 и 35px при норме 44.
         В ряд высотой 45px цель 44px с отступами не вписать — ряд поднят. */
@media (max-width: 960px) {
  .nav { height: 52px; }
  :root { --nav-h: 52px; }
  .nav-hidden { padding: 0 14px; }
  .nav-hidden .nav-menu-item,
  .nav-hidden > a.nav-menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .nav-menu-item.svg { width: 44px; height: 44px; padding: 7px; box-sizing: border-box; }
  .nav-menu-item__whatsup, .nav-menu-item__max { width: 32px; height: 32px; }
  .nav-hidden__toggle.icon,
  .nav-hidden .icon {
    width: 44px; height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* точки каруселей были 10–16px — цель расширена невидимой областью */
  .slider-status__item, .reels-dot, .swiper-pagination-bullet { position: relative; }
  .slider-status__item::after, .reels-dot::after, .swiper-pagination-bullet::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* ссылки подвала были высотой 18px с просветом 16px */
  .footer__list-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
  }

  /* чекбокс согласия — 18×18 */
  .consent-label, .modal-presonal label { min-height: 44px; display: flex; align-items: center; }
  .consent-label input[type="checkbox"],
  input[name="consent"] { width: 24px !important; height: 24px !important; min-width: 24px; }
}


/* Цена в заголовке героя: скрипт подставлял её с инлайновым
   `text-shadow: 0 0 10px red … 40px red` — красное неоновое свечение. */
.hero-price, #slider-title span, #slider-desc span {
  color: var(--c-accent) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55) !important;
  font-weight: 700;
}
#slider-desc { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.offer-accent {
  color: var(--c-accent) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55) !important;
  font-weight: 700;
}

/* ==========================================================================
   11. ПЕРВЫЙ ЭКРАН И БЫСТРЫЕ ДЕЙСТВИЯ
   ========================================================================== */

/* На первом экране не было ни одного факта доверия: гарантия, договор и
   оплата по факту лежали на 3–8 экранов ниже. */
.hero-sub {
  margin: 14px auto 0;
  max-width: 54ch;
  color: #f2f2f0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.hero-facts {
  list-style: none;
  margin: 18px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 760px;
}
.hero-facts li {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-pill);
  background: rgba(18, 19, 22, .42);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* «Добавить свой отзыв» стояло выше главного действия и было такой же
   жёлтой кнопкой во всю ширину — адресовано при этом бывшему клиенту. */
.reviews-add-review.is-quiet {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 6px 4px !important;
  color: var(--c-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reviews-add-review.is-quiet:hover { color: var(--c-ink) !important; }

/* Липкая панель действий: на телефоне позвонить можно было, только
   вернувшись в самый верх страницы. */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 1px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2147483000;
    background: var(--c-line);
    border-top: 1px solid var(--c-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-cta__item {
    display: flex; align-items: center; justify-content: center;
    min-height: 54px;
    background: #fff;
    border: 0;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-cta__item--main { background: var(--c-accent); }
  .mobile-cta__item:active { filter: brightness(.94); }

  /* чтобы панель не накрывала подвал и плавающий чат */
  body { padding-bottom: 56px; }
  .chat-widget, [class*="chat-widget"], #chat-widget { bottom: 70px !important; }
}

/* Первый экран страницы услуги не имел ни одной кнопки: человек приходил
   из поиска и упирался в фотографию, с которой некуда нажать. */
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 20px;
  margin-top: 22px;
}
.hero-phone {
  color: #fff;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 2px;
}
.hero-phone:hover { color: var(--c-accent); }

/* Подписей у полей главной формы не было — только плейсхолдеры,
   которые исчезают после первого введённого символа. */
.callback__form .field { margin-bottom: 16px; }
.callback__form .field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-body);
  font-size: 15px;
  font-weight: 600;
}
.callback__form .map-modal__input { width: 100%; }

/* Левая колонка секции формы была почти пустой — заголовок и одна строка
   против 460px формы справа. */
.callback__inner { align-items: center; }
.callback-promises {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.callback-promises li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-body);
}
.callback-promises li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--c-accent);
}
.callback-direct { margin-top: 22px; font-size: 16px; color: var(--c-body); }
.callback-direct a {
  display: inline-block;
  margin-right: 12px;
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 1px;
}
.callback-direct a:hover { color: var(--c-accent-press); }

/* Заголовок секции был набран капсом средствами контента, а не стиля. */
.callback__title { text-align: left !important; }
.callback__title::after { left: 0 !important; transform: none !important; }
@media (max-width: 860px) {
  .callback__title, .callback__title::after { text-align: center !important; }
  .callback__title::after { left: 50% !important; transform: translateX(-50%) !important; }
}

/* Кнопка героя на главной позиционирована абсолютом (bottom:100px, left:50%).
   Внутри .hero-actions страниц услуг она из-за этого ложилась на заголовок. */
.hero-actions .slider__btn {
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
}


/* ==========================================================================
   12. РЕДИЗАЙН, 20.09.2026
   Всё, что ниже, — не правка дефектов, а другое оформление.
   Приём один на весь сайт: ШОВ. Блоки лежат как плитки в кладке, между ними
   зазор 3 px, и сквозь него виден фон цвета затирки. Он же заменяет жёлтую
   чёрточку под заголовком, он же режет ряд фактов в герое, он же делит
   карточки услуг. Тени и скругления из новых блоков убраны: плитка лежит
   в плоскости стены, у неё прямой угол и фаска, а не радиус 8 px.
   ========================================================================== */

:root {
  /* Затирка графит — чернила и цвет шва одновременно. */
  --ink:   #12141a;
  /* Поле плитки и «цемент» — фон воздушных секций. Именно серый, не кремовый:
     цемент серый, а кремовый фон тянет за собой засечку и терракоту. */
  --glaze: #ffffff;
  --cement:#efefed;
  --grout: #8a8f98;
  --cell:  #1b1e25;          /* плитка на тёмном полотне, чуть светлее шва */
  --seam:  3px;

  --font-display: 'Geologica', 'Roboto Condensed', system-ui, sans-serif;
  --font-text:    'Golos Text', 'Inter', system-ui, -apple-system, sans-serif;

  /* Фаска ректифицированной плитки вместо радиуса шаблона. */
  --r: 2px;

  /* Отбивка контейнера: содержимое тёмных полотен встаёт на ту же вертикаль,
     что и содержимое обычных секций шириной 1200. */
  --gutter: max(20px, calc((100vw - 1200px) / 2));
}

/* --------------------------------------------------------------------------
   12.1 Типографика: пара «дисплейный + текстовый»
   Geologica — заголовки, цены, числа. Golos Text — весь текст.
   -------------------------------------------------------------------------- */
body, p, li, td, input, textarea, select, button, a {
  font-family: var(--font-text);
}
h1, h2, h3, h4,
.section__title, .slider-test__title, .benefits-item__title, .work-step__title,
.footer__item-title, .prices__title, .reels-title, .grid-item .info h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.015em;
  font-weight: 700 !important;
}

/* Техническая маркировка: кикеры, подписи к цифрам, ярлыки формата.
   Набрана дисплейной гарнитурой в разрядку — язык штампа на паллете. */
.stamp {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--grout);
}
/* Числа в ценах не должны прыгать по ширине при пересчёте. */
.num, .prices__item-text span, .hero2__price-num, .svc-card__price b,
.work-case__val, .hero2__course b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   12.2 Заголовок секции: шов вместо жёлтой чёрточки по центру
   Был одинаковый центрированный заголовок с 72-пиксельной чертой под ним.
   Стал: заголовок по левому краю, дальше по базовой линии жёлтый модуль
   длиной в одну «плитку» и за ним тонкая линия шва до края колонки.
   -------------------------------------------------------------------------- */
.section__title {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left !important;
  padding-bottom: 0 !important;
  margin-bottom: 34px;
  color: var(--ink);
  line-height: 1.04 !important;
}
.section__title::after {
  position: static !important;
  transform: none !important;
  flex: 1 1 90px;
  min-width: 54px;
  width: auto !important;
  height: 3px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: linear-gradient(90deg,
              var(--c-accent) 0 54px,
              rgba(18, 20, 26, .16) 54px) !important;
}
/* На тёмном полотне линия шва должна быть светлее фона, а не темнее. */
.sec--dark .section__title { color: #fff; }
.sec--dark .section__title::after {
  background: linear-gradient(90deg,
              var(--c-accent) 0 54px,
              rgba(255, 255, 255, .20) 54px) !important;
}

/* --------------------------------------------------------------------------
   12.3 Плотности секций. Полоса-кладка идёт вплотную к шву, воздушная
   секция живёт отступами. Одинаковых вертикальных промежутков больше нет.
   -------------------------------------------------------------------------- */
.sec--air   { padding: clamp(56px, 6vw, 92px) 0 !important; background: var(--glaze); }
.sec--band  { padding: clamp(44px, 4.6vw, 68px) 0 !important; background: var(--cement); }
.sec--dark  { padding: clamp(52px, 5.4vw, 84px) 0 !important; background: var(--ink); color: #fff; }
.sec--laid  { padding: 0 !important; background: var(--ink); }

/* --------------------------------------------------------------------------
   12.4 ГЕРОЙ
   Было: фотография на фоне, текст по центру, кнопка у нижнего края.
   Стало: жёлтое полотно с типографикой слева, кадр справа, под ними ряд
   подрезки — четыре неравные ячейки с числами, разрезанные швом.
   -------------------------------------------------------------------------- */
.hero2 {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: var(--ink);
  padding: 0 !important;
}
.hero2::after { content: none !important; }           /* затемнение было на всю секцию */

.hero2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: var(--seam);
  background: var(--ink);
}

/* Левое полотно — жёлтое. Для плиточника в Петербурге это язык вывески:
   читается с другой стороны улицы и не путается ни с чем «дизайнерским». */
.hero2__text {
  background: var(--c-accent);
  color: var(--ink);
  padding: clamp(36px, 4.4vw, 64px) clamp(24px, 3.4vw, 56px) clamp(34px, 4vw, 56px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(420px, 52vw, 560px);
}
.hero2__kicker {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(18, 20, 26, .62);
  margin: 0 0 18px;
}
.hero2 h1.slider-test__title,
.hero2 .slider-test__title {
  max-width: 16ch;
  margin: 0 !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  font-size: clamp(34px, 4.2vw, 60px) !important;
  line-height: .98 !important;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
/* Цена — отдельная плитка внутри жёлтого поля, вывернутая наизнанку:
   чёрное поле, жёлтые цифры. Она обязана читаться первой после заголовка. */
.hero2__price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 18px 12px;
  background: var(--ink);
  color: #fff;
  align-self: flex-start;
}
.hero2__price-from { font-family: var(--font-text); font-size: 15px; font-weight: 500; color: rgba(255,255,255,.62); }
.hero2__price-num  { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; color: var(--c-accent); line-height: 1; }
.hero2__price-unit { font-family: var(--font-text); font-size: 15px; font-weight: 500; color: rgba(255,255,255,.62); }

.hero2__sub {
  margin: 22px 0 0 !important;
  max-width: 42ch;
  color: rgba(18, 20, 26, .80) !important;
  font-size: clamp(15px, 1.25vw, 17px) !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}
.hero2__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px; margin-top: 26px; justify-content: flex-start !important;
}
/* На жёлтом поле главная кнопка выворачивается: чёрная заливка. */
.hero2 .slider__btn {
  position: static !important; transform: none !important;
  left: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important;
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 16px 30px !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important; font-weight: 600 !important;
  letter-spacing: .02em; text-transform: none !important;
}
.hero2 .slider__btn:hover { background: #000 !important; }
.hero2__tel {
  color: var(--ink); font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px); font-weight: 600;
  text-decoration: none; border-bottom: 3px solid rgba(18,20,26,.35); padding-bottom: 2px;
  white-space: nowrap;
}
.hero2__tel:hover { border-bottom-color: var(--ink); }

/* Правое полотно — кадр, а не фон. Фотография обрезана швом по вертикали,
   и слайдер живёт внутри этой ячейки. */
.hero2__shot { position: relative; overflow: hidden; background: var(--ink); min-height: clamp(420px, 52vw, 560px); }
.hero2__shot .slider-first,
.hero2__shot .slider-last { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.hero2__shot::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(200deg, rgba(18,20,26,0) 45%, rgba(18,20,26,.55) 100%);
}
.hero2__shot .slider-arrows { top: auto; bottom: 18px; left: auto; right: 16px; width: auto; padding: 0; transform: none; gap: var(--seam); display: flex; z-index: 6; }
.hero2__shot .slider-arrows_btn { border-radius: 0 !important; width: 44px !important; height: 44px !important; background: rgba(18,20,26,.78) !important; }
.hero2__shot .slider-status { left: 16px; right: auto; bottom: 30px; transform: none; width: auto; gap: 8px; z-index: 6; }
.hero2__shot .slider-status__item { width: 26px !important; height: 4px !important; border-radius: 0 !important; border: 0 !important; background: rgba(255,255,255,.42) !important; }
.hero2__shot .slider-status__item.active { background: var(--c-accent) !important; }

/* Ряд подрезки: четыре ячейки неравной ширины, как последний ряд плитки
   у стены. Числа ведут, подпись идёт следом. */
.hero2__course {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1.15fr .95fr 1fr 1.25fr;
  gap: var(--seam);
  background: var(--ink);
  border-top: var(--seam) solid var(--ink);
}
.hero2__course li {
  background: var(--cell);
  padding: 20px var(--pad-x, 22px) 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero2__course li:first-child { padding-left: var(--gutter); }
.hero2__course b {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 700;
  color: var(--c-accent); line-height: 1;
}
.hero2__course span { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.62); }

@media (max-width: 900px) {
  .hero2__grid { grid-template-columns: 1fr; }
  .hero2__text { min-height: 0; padding: 34px 20px 32px; }
  .hero2 .slider-test__title { max-width: none; }
  .hero2__shot { min-height: 0; aspect-ratio: 4 / 3; }
  .hero2__course { grid-template-columns: 1fr 1fr; }
  .hero2__course li, .hero2__course li:first-child { padding: 16px 18px 18px; }
}

/* Тема кладёт на секцию слайдера ещё и `.slider::before` — сплошной
   rgba(0,0,0,.3) поверх всего. На фотографии он был затемнением,
   на жёлтом полотне превращал #FED204 в болотный. */
.hero2::before { content: none !important; }

/* Панель навигации висела полупрозрачной поверх фотографии героя.
   Под жёлтым полотном ей нужен собственный цвет — она стала полосой шва. */
.nav, .nav.scroll {
  background: var(--ink) !important;
  border-bottom: 0 !important;
}
.nav .nav-menu__a {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: rgba(255, 255, 255, .78) !important;
}
.nav .nav-menu__a:hover { color: var(--c-accent) !important; }

/* Последняя ячейка ряда подрезки упиралась в край экрана и лезла под
   плавающую кнопку чата. */
.hero2__course li:last-child { padding-right: max(var(--gutter), 86px); }

/* --------------------------------------------------------------------------
   12.5 УСЛУГИ
   Было: восемь одинаковых карточек «картинка — текст по центру — жёлтая
   кнопка», плюс ещё восемь под кнопкой «Все услуги».
   Стало: кладка из плиток трёх форматов. Формат равен спросу — под ключ
   идёт крупной плиткой, частые работы — средней, редкие — бордюрной
   строкой без фотографии. Скрытых услуг больше нет, видны все шестнадцать.
   -------------------------------------------------------------------------- */
.svc-lead {
  max-width: 68ch;
  margin: -14px 0 30px;
  color: var(--c-body);
  font-size: 17px;
  line-height: 1.55;
}
.svc-lay {
  display: grid;
  gap: var(--seam);
  padding: var(--seam);
  background: var(--ink);       /* виден только в зазорах — это и есть шов */
}
.svc-row { display: grid; gap: var(--seam); background: var(--ink); }
.svc-row--major { grid-template-columns: 1.08fr .92fr; }   /* ряд вразбежку */
.svc-row--often { grid-template-columns: repeat(4, 1fr); }

.svc-major, .svc-card {
  display: flex;
  background: var(--glaze);
  color: var(--ink);
  text-decoration: none;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;   /* у плитки нет тени, она в плоскости стены */
  transform: none !important;
  min-width: 0;
}
.svc-major { flex-direction: column; }
.svc-major__shot { position: relative; overflow: hidden; }
.svc-major__img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.svc-major__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.svc-major__title {
  margin: 8px 0 0 !important;
  font-size: clamp(22px, 2.1vw, 28px) !important;
  line-height: 1.06 !important;
  color: var(--ink) !important;
}
.svc-card { flex-direction: column; }
.svc-card__shot { overflow: hidden; }
.svc-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.svc-card__title {
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
}
.svc-desc {
  margin: 10px 0 0;
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.45;
  flex: 1 1 auto;
}
.svc-major .svc-desc { font-size: 16px; max-width: 46ch; }

/* Цена — отдельная строка, а не жёлтый чип посреди предложения. */
.svc-price {
  display: flex; align-items: baseline; gap: 7px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(18, 20, 26, .12);
}
.svc-price span { font-size: 13px; color: var(--grout); font-weight: 500; }
.svc-price b {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.svc-price--soft b { font-size: 15px; font-weight: 600; color: var(--grout); }
.svc-note {
  margin: 10px 0 0;
  align-self: flex-start;
  background: var(--c-accent);
  color: var(--ink);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
}
.svc-go {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink);
  border-bottom: 2px solid var(--c-accent);
  align-self: flex-start;
  padding-bottom: 2px;
}
.svc-major:hover .svc-go, .svc-card:hover .svc-go { background: var(--c-accent); }
.svc-major:hover .svc-major__img, .svc-card:hover .svc-card__img { filter: brightness(1.04); }

/* Бордюр: редкие работы идут строкой — название, шов, цена. */
.svc-row--rare { background: var(--glaze); padding: 22px 26px 8px; }
.svc-rare__cap { margin: 0 0 12px; }
.svc-rare { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 46px; }
.svc-rare li { break-inside: avoid; }
.svc-rare a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(18, 20, 26, .10);
  color: var(--ink); text-decoration: none; font-size: 16px;
  min-height: 44px; box-sizing: border-box;
}
.svc-rare a:hover .svc-rare__name { border-bottom: 2px solid var(--c-accent); }
.svc-rare__name { flex: 0 1 auto; }
.svc-rare__price {
  margin-left: auto; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.svc-rare__price em { font-style: normal; font-family: var(--font-text); font-weight: 400; color: var(--grout); font-size: 13px; margin-left: 5px; }

@media (max-width: 1000px) {
  .svc-row--often { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .svc-row--major { grid-template-columns: 1fr; }
  .svc-rare { columns: 1; }
  .svc-row--rare { padding: 18px 16px 6px; }
  .svc-major__body { padding: 18px 16px 20px; }
  .svc-card__body { padding: 14px 14px 16px; }
}

/* В bootstrap.css живёт `mark, .mark { background:#fcf8e3 }` — из-за него
   техническая маркировка получала бледно-жёлтую подложку. Класс переименован
   в .stamp; здесь же снимаем остальное наследие шаблона в новых блоках. */

/* Встроенный <style> держит заголовок по центру: display:block !important,
   width:fit-content !important и margin:0 auto. Разворачиваем в полосу. */
.section__title {
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-bottom: 0 !important;
}
.section__title::after {
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  margin-top: 0 !important;
}
/* `.services { text-align: center }` из sg-main.css разъезжался на новые блоки. */
.services, .services p, .works, .reviews-section { text-align: left; }
.svc-lead { text-align: left; }

/* Оба крупных заказа стояли на фотографиях разной высоты: разница в 54 px
   читалась как сбой, а не как раскладка. Высоту кадра фиксируем, а
   смещение даёт разная ширина колонок — это и есть кладка вразбежку. */
.svc-major__img { height: 330px; aspect-ratio: auto; }
@media (max-width: 760px) { .svc-major__img { height: 220px; } }

/* --------------------------------------------------------------------------
   12.6 ПРИМЕРЫ РАБОТ
   Было: пять вкладок с каруселями, стрелки, ни одной подписи.
   Стало: лист объектов. Карточка — кадр плюс паспорт: тип работ заполнен,
   район, площадь и срок стоят прочерком, как в спецификации, и ждут данных.
   -------------------------------------------------------------------------- */
.works__lead {
  max-width: 76ch;
  margin: -14px 0 24px;
  color: var(--c-body);
  font-size: 17px; line-height: 1.55;
}
.case-filter { display: flex; flex-wrap: wrap; gap: var(--seam); margin: 0 0 var(--seam); }
.case-filter__btn {
  appearance: none; border: 0; border-radius: 0;
  background: var(--glaze); color: var(--ink);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  padding: 0 18px; min-height: 44px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.case-filter__btn:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--c-accent); }
.case-filter__btn.is-active { background: var(--ink); color: #fff; }

.case-lay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--seam);
  background: var(--ink);
  padding: var(--seam);
}
.case { background: var(--glaze); display: flex; flex-direction: column; min-width: 0; }
.case[hidden] { display: none; }
.case__shot { display: block; overflow: hidden; background: var(--ink); }
.case__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.case__kind { margin: 0 0 7px; }
.case__title {
  margin: 0 0 14px !important;
  font-size: 18px !important; line-height: 1.15 !important;
  color: var(--ink) !important;
}
/* Паспорт объекта. Подписи — маркировка, значения — табличные цифры.
   Пустое значение показано прочерком на тонкой линии: это незаполненный
   шов, а не «здесь будет текст». */
.case__spec {
  margin: auto 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(18, 20, 26, .12);
  border-top: 1px solid rgba(18, 20, 26, .12);
  border-bottom: 1px solid rgba(18, 20, 26, .12);
}
.case__spec-cell { background: var(--glaze); padding: 9px 0 8px; }
.case__spec dt {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grout);
}
.case__spec dd {
  margin: 3px 0 0;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.case__val--empty { color: rgba(18, 20, 26, .28); }
.case__spec-cell:nth-child(2), .case__spec-cell:nth-child(3) { padding-left: 12px; }

@media (max-width: 1100px) { .case-lay { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .case-lay { grid-template-columns: 1fr; } }

/* Во встроенном <style> сидят `.works .section__title` и
   `.reviews-section .section__title` с !important и специфичностью (0,2,0):
   они возвращали заголовку центр, fit-content и свой кегль. Повторяем класс
   трижды — получаем (0,3,0) и накрываем их все одним правилом. */
.section__title.section__title.section__title {
  display: flex !important;
  align-items: flex-end;
  gap: 20px;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 34px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  font-family: var(--font-display) !important;
  font-size: clamp(27px, 3vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.022em;
  color: var(--ink) !important;
  text-wrap: pretty;
}
.section__title.section__title.section__title::after {
  content: '' !important;
  position: static !important;
  display: block !important;
  flex: 1 1 90px;
  min-width: 54px;
  width: auto !important;
  height: 3px !important;
  margin: 0 0 .34em !important;
  border-radius: 0 !important;
  transform: none !important;
  background: linear-gradient(90deg,
              var(--c-accent) 0 54px,
              rgba(18, 20, 26, .16) 54px) !important;
}
.sec--dark .section__title.section__title.section__title { color: #fff !important; }
.sec--dark .section__title.section__title.section__title::after {
  background: linear-gradient(90deg,
              var(--c-accent) 0 54px,
              rgba(255, 255, 255, .20) 54px) !important;
}
/* Полоса с заголовком страницы услуги набрана тем же правилом — там это <h1>. */
.page-title-bar .section__title.section__title.section__title { margin-bottom: 0 !important; }
@media (max-width: 620px) {
  .section__title.section__title.section__title { gap: 12px; margin-bottom: 24px !important; }
  .section__title.section__title.section__title::after { flex-basis: 40px; min-width: 28px; }
}

/* --------------------------------------------------------------------------
   12.7 ЦЕНЫ — доска, а не справочник
   Блок поднят на второй экран. Шесть работ лежат кладкой на тёмном шве,
   седьмая плитка жёлтая: это выезд сметчика и единственное действие блока.
   -------------------------------------------------------------------------- */
.prices { background: var(--ink) !important; }
.prices::before { content: none !important; }
.prices__lead {
  max-width: 62ch; margin: -18px 0 28px;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 17px; line-height: 1.5;
}
.price-lay { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: var(--seam); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--seam); }
.price-cell { background: var(--cell); padding: 20px 20px 22px; display: flex; flex-direction: column; }
.price-cell__name {
  margin: 0 0 auto !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 15px !important; line-height: 1.3 !important;
}
.price-cell__sum { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 0 !important; }
.price-cell__sum span { color: var(--grout) !important; font-size: 13px; }
.price-cell__sum b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.1vw, 29px); line-height: 1;
  color: var(--c-accent) !important; font-variant-numeric: tabular-nums;
}
.price-cell__unit { margin: 5px 0 0 !important; color: var(--grout) !important; font-size: 13px !important; }

.price-act { background: var(--c-accent); color: var(--ink); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.price-act__cap { color: rgba(18, 20, 26, .58) !important; margin: 0 0 12px; }
.price-act__sum { display: flex; align-items: baseline; gap: 9px; margin: 0 0 4px !important; }
.price-act__sum b {
  font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.1;
  color: var(--ink) !important; font-variant-numeric: tabular-nums;
}
.price-act__sum span { font-size: 13px; color: rgba(18, 20, 26, .66) !important; }
.price-act__sum--alt b { font-size: 21px; }
.price-act__text { margin: 14px 0 auto !important; font-size: 15px !important; line-height: 1.45 !important; color: rgba(18, 20, 26, .82) !important; }
.prices .price-act .btn_master {
  margin-top: 18px !important;
  width: 100% !important; min-height: 52px;
  background: var(--ink) !important; color: #fff !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--font-display) !important; font-size: 16px !important; font-weight: 600 !important;
  text-transform: none !important; padding: 15px 20px !important;
}
.prices .price-act .btn_master:hover { background: #000 !important; }
.prices__text { margin: 26px 0 0 !important; color: rgba(255, 255, 255, .62) !important; font-size: 15px !important; max-width: 70ch; }
.prices__text a { color: var(--c-accent) !important; }

@media (max-width: 1000px) {
  .price-lay { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12.8 КТО БУДЕТ КЛАСТЬ — «О нас» и «Преимущества» в одном блоке
   Два соседних блока говорили одно и то же шестью карточками с иконками
   и тремя абзацами. Стал один: вступление слева, кладка доводов справа.
   -------------------------------------------------------------------------- */
.why-head { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px 56px; align-items: start; margin-bottom: 34px; }
.why-head .section__title.section__title.section__title { margin-bottom: 0 !important; }
.why-intro p { margin: 0 0 12px; color: var(--c-body); font-size: 17px; line-height: 1.55; max-width: 62ch; }
.why-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px !important; font-size: 14px !important; color: var(--grout) !important; }
.why-partners span {
  background: var(--cement); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  padding: 5px 10px; letter-spacing: .03em;
}
.why-lay { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--seam); background: var(--ink); padding: var(--seam); }
.why-cell { background: var(--glaze); padding: 22px 22px 24px; }
.why-cell__title { margin: 0 0 10px !important; font-size: 19px !important; line-height: 1.15 !important; color: var(--ink) !important; }
.why-cell__text { margin: 0; color: var(--c-body); font-size: 15px; line-height: 1.5; }

@media (max-width: 1000px) {
  .why-head { grid-template-columns: 1fr; }
  .why-lay { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .why-lay { grid-template-columns: 1fr; } }

/* Кнопка «Вызвать мастера на замер» жила в блоке .calc и была вырвана из
   потока абсолютом — в новой сетке цен она легла поперёк ряда. */
.prices .btn_master {
  position: static !important;
  transform: none !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  display: block !important; float: none !important;
}
/* Тема центрировала весь блок цен. */
.prices, .prices .container, .prices__text, .prices__lead { text-align: left !important; }

/* --------------------------------------------------------------------------
   12.9 ВИДЕО С ОБЪЕКТОВ
   Секция несёт класс .container, поэтому тёмный фон обрывался по 1200 px
   и висел прямоугольником посреди белого. Выпускаем фон на всю ширину,
   не трогая колонку содержимого.
   -------------------------------------------------------------------------- */
.reels-section.sec--dark {
  width: auto !important; max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-inline: max(20px, calc(50vw - 600px)) !important;
}
.reels-section.sec--dark .reels-title,
.reels-section.sec--dark .reels-subtitle { color: #fff !important; text-align: left !important; }
.reels-section.sec--dark .reels-title {
  font-family: var(--font-display) !important;
  font-size: clamp(27px, 3vw, 40px) !important;
  margin-bottom: 10px !important;
}
.reels-section.sec--dark .reels-title::after { content: none !important; }
.reels-section.sec--dark .reels-subtitle { color: rgba(255,255,255,.66) !important; margin-bottom: 26px !important; }
.reels-section.sec--dark .reels-open-all {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
}
.reels-section.sec--dark .reels-open-all:hover { background: var(--c-accent) !important; color: var(--ink) !important; border-color: var(--c-accent) !important; }
.reels-section .reel-cell, .reels-section .reel-cell img { border-radius: 0 !important; }
.reels-section .reels-carousel-btn { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   12.10 ОТЗЫВЫ
   Карточки были в жёлтой рамке с радиусом 16 и тенью — вид виджета
   из чужого сервиса. Стали плитками на шве, с подписью «кто и какой объект».
   -------------------------------------------------------------------------- */
.reviews__lead {
  max-width: 74ch; margin: -18px 0 22px;
  color: var(--c-body); font-size: 17px; line-height: 1.55;
}
.reviews-section .reviews-carousel__viewport {
  background: var(--ink);
  padding: var(--seam) !important;
  -webkit-mask-image: none; mask-image: none;
}
.reviews-section .reviews-grid { gap: var(--seam) !important; }
.reviews-section .review-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0;
  background: var(--glaze) !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.reviews-section .review-card img { border-radius: 0 !important; }
.reviews-section .review-card__type {
  position: absolute; top: 0; left: 0; z-index: 2;
  border-radius: 0 !important;
  background: var(--ink) !important; color: #fff !important;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px !important;
}
.reviews-section .review-card__media { position: relative; margin: 0 !important; }
.reviews-section .review-card__text { padding: 14px 16px 0; margin: 0; font-size: 15px; line-height: 1.45; color: var(--c-body); }
.review-card__by {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: auto 0 0 !important;
  padding: 12px 16px 14px;
  border-top: 2px solid rgba(18, 20, 26, .10);
  font-size: 14px;
}
.review-card__by b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.review-card__obj { color: var(--grout); font-size: 13px; white-space: nowrap; }
.review-card__obj i { font-style: normal; color: rgba(18, 20, 26, .3); }
.reviews-section .reviews-carousel__btn { border-radius: 0 !important; }
.reviews-actions { text-align: left !important; padding-left: 0 !important; }

/* Место под внешние площадки. Пока REVIEW_LINKS пуст, блока в разметке нет. */
.reviews-ext { margin-top: 26px; }
.reviews-ext__row { display: flex; flex-wrap: wrap; gap: var(--seam); margin-top: 10px; }
.reviews-ext__chip {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--cement); color: var(--ink);
  padding: 12px 18px; text-decoration: none; min-height: 44px;
}
.reviews-ext__chip b { font-family: var(--font-display); font-size: 15px; }
.reviews-ext__chip span { font-size: 13px; color: var(--grout); }
.reviews-ext__chip:hover { background: var(--c-accent); }

/* Карточка отзыва занимала 650 px: в полосу помещалась одна штука с хвостом.
   Три в ряд — это ровно та плотность, при которой видно, что отзывов много. */
.reviews-section .reviews-grid .review-card {
  flex: 0 0 calc((100% - var(--seam) * 2) / 3) !important;
  width: calc((100% - var(--seam) * 2) / 3) !important;
  max-width: none !important;
  min-width: 0 !important;
  scroll-snap-align: start;
}
@media (max-width: 1000px) {
  .reviews-section .reviews-grid .review-card {
    flex-basis: calc((100% - var(--seam)) / 2) !important;
    width: calc((100% - var(--seam)) / 2) !important;
  }
}
@media (max-width: 640px) {
  .reviews-section .reviews-grid .review-card { flex-basis: 84% !important; width: 84% !important; }
}

/* Заголовок и подпись блока видео тема держала по центру. */
.reels-section.sec--dark .reels-title,
.reels-section.sec--dark .reels-subtitle,
.reels-section.sec--dark .reels-carousel-wrap,
.reels-section.sec--dark .reels-actions { text-align: left !important; margin-left: 0 !important; }
.reels-section.sec--dark .reels-title::before { content: none !important; }

/* Тема центрировала .masters и .benefits целиком. */
.masters, .masters .container, .why-intro, .why-cell,
.benefits, .benefits .container, .work-flow-section,
.callback, .callback .container { text-align: left !important; }

/* --------------------------------------------------------------------------
   12.11 ЭТАПЫ РАБОТЫ
   Было: жёлтый кружок с цифрой, шеврон между карточками, текст по центру —
   набор из стокового шаблона. Стало: пять плиток в ряд, номер набран
   дисплейной гарнитурой и лежит в углу ячейки, как метка на упаковке.
   Нумерация здесь законна: это последовательность, а не список.
   -------------------------------------------------------------------------- */
.work-flow-section .fives, .work-flow-section .wrap_fives { background: transparent !important; padding: 0 !important; }
.work-flow-section .work-flow {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--seam) !important;
  background: var(--ink);
  padding: var(--seam);
  margin: 0 !important;
}
.work-flow .work-step {
  background: var(--glaze) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 20px 18px 22px !important;
  display: flex; flex-direction: column;
  width: auto !important; max-width: none !important;
  text-align: left !important;
}
.work-flow .work-step::after, .work-flow .work-step::before { content: none !important; }
.work-flow .work-step__marker {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  width: auto !important; height: auto !important;
  margin: 0 0 10px !important; padding: 0 !important;
  box-shadow: none !important; display: block !important;
}
.work-flow .work-step__number {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--c-accent) !important;
  -webkit-text-stroke: 0;
  background: none !important;
  display: inline-block;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 4px;
}
.work-flow .work-step__title {
  margin: 0 0 8px !important;
  font-size: 17px !important; line-height: 1.15 !important;
  text-align: left !important;
  color: var(--ink) !important;
}
.work-flow .work-step__text {
  margin: 0 !important; max-width: none !important;
  text-align: left !important;
  font-size: 14px !important; line-height: 1.45 !important;
  color: var(--c-body) !important;
}
@media (max-width: 1000px) { .work-flow-section .work-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .work-flow-section .work-flow { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12.12 ЧАСТЫЕ ВОПРОСЫ — плоский список сохранён, разложен кладкой
   Аккордеон сюда не ставим намеренно: эту страницу сканируют глазами,
   схлопывание отняло бы возможность прочитать всё разом.
   -------------------------------------------------------------------------- */
.faq-lay {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--seam); background: var(--ink); padding: var(--seam);
}
.faq-cell { background: var(--glaze); padding: 20px 22px 22px; }
.faq-cell__q { margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.2 !important; color: var(--ink) !important; }
.faq-cell__a { margin: 0; color: var(--c-body); font-size: 15px; line-height: 1.5; max-width: 62ch; }
@media (max-width: 860px) { .faq-lay { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12.13 ФОРМА
   Секция стала тёмной, а текст левой колонки остался тёмно-серым и пропал.
   Форма лежала белой карточкой с радиусом 8 и тенью — виджетом со стороны.
   -------------------------------------------------------------------------- */
.callback.sec--dark { background: var(--ink) !important; }
.callback.sec--dark::before, .callback.sec--dark::after { content: none !important; }
.callback.sec--dark .callback__content { background: transparent !important; padding: 0 !important; }
.callback.sec--dark .callback__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--seam) !important;
  align-items: stretch !important;
  background: var(--ink);
}
.callback.sec--dark .calmap-formlback__info { background: var(--cell); padding: 30px 30px 34px; }
.callback.sec--dark .callback__title { color: #fff !important; margin-bottom: 20px !important; }
.callback.sec--dark .callback-description p { color: rgba(255, 255, 255, .74) !important; font-size: 16px; line-height: 1.55; }
.callback.sec--dark .callback-promises li { color: rgba(255, 255, 255, .74) !important; }
.callback.sec--dark .callback-direct { color: rgba(255, 255, 255, .62) !important; }
.callback.sec--dark .callback-direct a { color: #fff !important; border-bottom-color: var(--c-accent) !important; }
.callback.sec--dark .callback-direct a:hover { color: var(--c-accent) !important; }

.callback.sec--dark .callback__form {
  background: var(--glaze) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 30px 30px 34px !important;
  margin: 0 !important;
  width: auto !important; max-width: none !important;
}
.callback.sec--dark .callback__form .field__label {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grout) !important;
}
.callback.sec--dark .map-modal__input {
  border-radius: 0 !important;
  border: 2px solid rgba(18, 20, 26, .18) !important;
  background: #fff !important;
  min-height: 50px; font-size: 16px;
}
.callback.sec--dark .map-modal__input:focus { border-color: var(--ink) !important; }
.callback.sec--dark .map-modal__send {
  border-radius: 0 !important;
  width: 100% !important; min-height: 54px;
  background: var(--c-accent) !important; color: var(--ink) !important;
  font-family: var(--font-display) !important; font-size: 17px !important; font-weight: 600 !important;
  text-transform: none !important;
}
.callback.sec--dark .map-modal__send:hover { background: var(--c-accent-press) !important; }
@media (max-width: 900px) { .callback.sec--dark .callback__inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12.14 ПОДВАЛ
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink) !important;
  border-top: 0 !important;
  padding: clamp(44px, 4.4vw, 64px) 0 28px !important;
  color: rgba(255, 255, 255, .74);
}
.foot-lay {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
  gap: 34px 46px;
}
.foot-logo img { max-width: 220px; height: auto; filter: invert(1) grayscale(1) brightness(1.6); }
.foot-about { margin: 16px 0 18px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .62); max-width: 40ch; }
.foot-line { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; font-size: 15px; color: rgba(255, 255, 255, .84); }
.foot-line .stamp { color: var(--grout); }
.foot-cell__title {
  margin: 0 0 14px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent);
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-list a {
  display: inline-flex; align-items: center; min-height: 34px;
  color: rgba(255, 255, 255, .74); text-decoration: none; font-size: 15px;
}
.foot-list a:hover { color: var(--c-accent); }
.foot-person { margin: 0 0 6px; color: rgba(255, 255, 255, .62); font-size: 15px; }
.foot-tel {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: #fff !important; text-decoration: none; letter-spacing: -0.01em;
}
.foot-tel:hover { color: var(--c-accent) !important; }
.foot-mail { display: inline-block; color: rgba(255, 255, 255, .74) !important; font-size: 15px; margin-bottom: 14px; }
.foot-soc { display: flex; gap: 16px; margin-bottom: 18px; }
.foot-soc a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  color: rgba(255, 255, 255, .74) !important; text-decoration: none; font-size: 14px;
}
.foot-soc a:hover { color: #fff !important; }
.foot-soc .social-icon { width: 26px; height: 26px; }
.foot-cta {
  appearance: none; border: 0; border-radius: 0;
  background: var(--c-accent); color: var(--ink);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  padding: 14px 22px; min-height: 48px; cursor: pointer; width: 100%;
}
.foot-cta:hover { background: var(--c-accent-press); }
.foot-legal {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: baseline;
  max-width: none !important;
}
.foot-legal p { margin: 0; flex: 1 1 460px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .46); }
.foot-legal a { color: rgba(255, 255, 255, .74) !important; font-size: 13px; }
@media (max-width: 1000px) { .foot-lay { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .foot-lay { grid-template-columns: 1fr; gap: 28px; } }

/* Семь вопросов в две колонки оставляли в конце ряда дыру цвета шва. */
.faq-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
.faq-cell:last-child:nth-child(odd) .faq-cell__a { max-width: 90ch; }

/* --------------------------------------------------------------------------
   12.15 ШАПКА
   Было: логотип и два абзаца по центру, иконки, кнопка вплотную к номеру.
   Стало: логотип слева, служебные сведения — технической маркировкой,
   номер и действие прижаты вправо.
   -------------------------------------------------------------------------- */
.header {
  background: #fff !important;
  border-bottom: 1px solid rgba(18, 20, 26, .10) !important;
  padding: 12px 0 !important;
}
.header .header-wrap {
  display: flex !important; align-items: center !important;
  gap: 18px 40px !important; flex-wrap: wrap;
  justify-content: flex-start !important;
}
.header .header-item { margin: 0 !important; padding: 0 !important; text-align: left !important; }
.header-item__logo { max-width: 200px !important; height: auto !important; }
.header .header-item__text {
  margin: 0 !important;
  font-size: 14px !important; line-height: 1.35 !important;
  color: var(--c-body) !important; font-weight: 400 !important;
  text-align: left !important;
}
.header .header-item.hide960 { position: relative; padding-left: 18px !important; }
.header .header-item.hide960::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; background: var(--c-accent);
}
.header .header-item.last { margin-left: auto !important; display: flex !important; align-items: center; gap: 16px; }
.header .header-tel { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.header .header-tel .header-item__text a {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: var(--ink) !important; text-decoration: none; letter-spacing: -0.01em;
}
.header .header-tel .header-item__text a:hover { color: var(--c-accent-press) !important; }
.header .header-item__icon.icon { display: none !important; }
.header .header-tel__btn {
  margin-top: 4px !important;
  border-radius: 0 !important;
  background: var(--ink) !important; color: #fff !important;
  font-family: var(--font-display) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: .04em; text-transform: none !important;
  padding: 10px 18px !important; min-height: 44px;
}
.header .header-tel__btn:hover { background: var(--c-accent) !important; color: var(--ink) !important; }
.header .social-icon { width: 30px; height: 30px; }

@media (max-width: 960px) {
  .header { padding: 8px 0 !important; }
  .header .header-wrap { gap: 10px 16px !important; }
  .header-item__logo { max-width: 150px !important; }
  .header .header-tel .header-item__text a { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   12.16 СТРАНИЦА УСЛУГИ
   Шаблон один на 17 страниц. Первый экран собран тем же жёлтым полотном,
   что и на главной; дальше идут «что входит», пример расчёта и прайс.
   -------------------------------------------------------------------------- */
.svc-hero .hero2__shot { min-height: clamp(320px, 40vw, 460px); }
.svc-hero .hero2__text { min-height: clamp(320px, 40vw, 460px); }
.svc-hero h1.slider-test__title { max-width: 18ch; font-size: clamp(28px, 3.4vw, 48px) !important; }

.inc-lay {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--seam); background: var(--ink); padding: var(--seam);
}
.inc-cell { background: var(--glaze); padding: 20px 22px 22px; }
.inc-cell__t { margin: 0 0 8px !important; font-size: 17px !important; line-height: 1.2 !important; color: var(--ink) !important; }
.inc-cell__x { margin: 0; color: var(--c-body); font-size: 15px; line-height: 1.5; }

.calcx { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--seam); background: var(--ink); padding: var(--seam); }
.calcx__box { background: var(--c-accent); color: var(--ink); padding: 24px 24px 26px; display: flex; flex-direction: column; }
.calcx__box .stamp { color: rgba(18, 20, 26, .58) !important; margin: 0 0 16px; }
.calcx__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 14px !important; padding-bottom: 14px; border-bottom: 2px solid rgba(18, 20, 26, .22); }
.calcx__line span { font-size: 16px; color: rgba(18, 20, 26, .82); }
.calcx__line b { font-family: var(--font-display); font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calcx__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: auto 0 0 !important; }
.calcx__total span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(18, 20, 26, .58); }
.calcx__total b { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.calcx__note { background: var(--glaze); padding: 24px 24px 26px; display: flex; flex-direction: column; }
.calcx__note p { margin: 0 0 12px; color: var(--c-body); font-size: 15px; line-height: 1.55; max-width: 54ch; }
.calcx__btn {
  margin-top: auto; align-self: flex-start;
  appearance: none; border: 0; border-radius: 0; cursor: pointer;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  padding: 14px 24px; min-height: 48px;
}
.calcx__btn:hover { background: #000; }

/* Прайс на странице услуги: таблица набрана как ряд кладки, а не как
   ведомость из 1С. Цены выстроены в столбик табличными цифрами. */
#price .grid_price {
  border-collapse: separate !important; border-spacing: 0 var(--seam) !important;
  width: 100%; background: transparent;
}
#price .grid_price tr { background: transparent; }
#price .grid_price td {
  background: var(--cement) !important;
  border: 0 !important;
  padding: 15px 20px !important;
  vertical-align: middle;
}
#price .grid_price tr:nth-child(2n) td { background: var(--cement) !important; }
#price .grid_price td:first-child { width: 72%; }
#price .grid_price .item { font-size: 16px; line-height: 1.4; color: var(--ink); }
#price .grid_price .right_item .item {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}
#price .about__text { max-width: 74ch; }

/* Справка о материале: оставлена для поиска, но подана как справка —
   узкая колонка, серый текст, без соревнования с предложением. */
.svc-ref { background: var(--glaze); }
.svc-ref .about__text, .svc-ref p, .svc-ref li { color: var(--grout) !important; font-size: 15px !important; }

@media (max-width: 900px) {
  .inc-lay { grid-template-columns: repeat(2, 1fr); }
  .calcx { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .inc-lay { grid-template-columns: 1fr; } }

/* На страницах услуг заголовок секции — прямой потомок <section>, без
   .container, поэтому он упирался в левый край экрана. Повторяем геометрию
   контейнера. На главной заголовки лежат внутри .container и правило
   до них не достаёт. */
section > .section__title.section__title.section__title {
  width: min(90%, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Остальные секции страницы услуги: белое поле, единый вертикальный ритм,
   текст в колонке нормальной длины. */
.services-page-body section.benefits { padding: clamp(40px, 4vw, 64px) 0 !important; }

/* Закрывающая полоса страницы услуги. */
.svc-cta { background: var(--ink) !important; padding: clamp(40px, 4.4vw, 64px) 0 !important; }
.svc-cta::before, .svc-cta::after { content: none !important; }
.svc-cta__lay { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px 48px; align-items: center; }
.svc-cta .stamp { margin: 0 0 10px; color: var(--c-accent) !important; }
.svc-cta__title {
  margin: 0 0 12px !important;
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 2.8vw, 36px) !important; font-weight: 700 !important;
  line-height: 1.05 !important; color: #fff !important;
}
.svc-cta__sub { margin: 0 !important; color: rgba(255, 255, 255, .70) !important; font-size: 16px !important; line-height: 1.55 !important; max-width: 52ch; }
.svc-cta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.svc-cta__main {
  appearance: none; border: 0; border-radius: 0; cursor: pointer;
  background: var(--c-accent); color: var(--ink);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  padding: 16px 28px; min-height: 54px;
}
.svc-cta__main:hover { background: var(--c-accent-press); }
.svc-cta__tel {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: #fff !important; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid var(--c-accent); padding-bottom: 2px;
}
.svc-cta__alt {
  appearance: none; border: 2px solid rgba(255, 255, 255, .28); border-radius: 0; cursor: pointer;
  background: transparent; color: #fff;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  padding: 13px 22px; min-height: 48px;
}
.svc-cta__alt:hover { border-color: var(--c-accent); color: var(--c-accent); }
@media (max-width: 860px) { .svc-cta__lay { grid-template-columns: 1fr; } }

/* Блок работ на странице услуги: рамки и радиусы шаблона сняты. */
.works .works-slider__item-img, .works .works-slider__item img,
.works .works__item { border-radius: 0 !important; }
.works-more { margin-top: 18px !important; font-size: 16px; }
.works-more a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--c-accent); text-decoration: none; }

/* --------------------------------------------------------------------------
   12.17 ТЕЛЕФОН
   Панель навигации в теме стоит `position: absolute; top: 100px` — она вне
   потока и накрывает верх первого экрана. На десктопе её высоту съедал
   отступ полотна, на 390 px — нет, и кикер уезжал под неё.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero2__text { padding-top: calc(34px + var(--nav-h)) !important; }
  .hero2 h1.slider-test__title { font-size: clamp(30px, 8.4vw, 40px) !important; }
  .hero2__actions { flex-direction: column; align-items: stretch !important; gap: 12px; }
  .hero2 .slider__btn { width: 100% !important; justify-content: center; }
  .hero2__tel { align-self: flex-start; }
  .hero2__price { margin-top: 18px; }
  /* Точки кадра: правило темы возвращало им круг 20 px с белой рамкой. */
  .hero2__shot .slider-status { bottom: 14px; left: 12px; }
  .hero2__shot .slider-status__item {
    width: 22px !important; height: 4px !important;
    border: 0 !important; border-radius: 0 !important;
  }
  .hero2__shot .slider-status__item::after { width: 44px; height: 30px; }
  .hero2__shot .slider-arrows { bottom: 8px; right: 8px; }
  .hero2__course li { justify-content: flex-start; }
  .hero2__course b { font-size: 24px; }
  .hero2__course span { font-size: 13px; }
}

@media (max-width: 760px) {
  /* Плотность на телефоне: полотна кладки идут от края до края, воздух — уже. */
  .sec--air { padding: 44px 0 !important; }
  .sec--band { padding: 36px 0 !important; }
  .sec--dark { padding: 40px 0 !important; }

  .svc-lead, .works__lead, .reviews__lead, .prices__lead { font-size: 16px; margin-bottom: 20px; }
  .price-cell { padding: 16px 16px 18px; }
  .price-act { padding: 18px 18px 20px; }
  .why-cell, .faq-cell, .inc-cell { padding: 16px 16px 18px; }
  .case__body { padding: 14px 14px 16px; }
  .case__spec dt { font-size: 9px; letter-spacing: .1em; }
  .case-filter { gap: 2px; }
  .case-filter__btn { font-size: 13px; padding: 0 13px; }
  .calcx__box, .calcx__note { padding: 18px 18px 20px; }
  .callback.sec--dark .calmap-formlback__info,
  .callback.sec--dark .callback__form { padding: 22px 18px 24px !important; }
  .svc-cta__act { flex-direction: column; align-items: stretch; }
  .svc-cta__main, .svc-cta__alt { width: 100%; }
  .svc-cta__tel { align-self: flex-start; }
  .foot-cta { width: 100%; }
  .footer { padding-bottom: 76px !important; }   /* под липкую панель действий */

  /* Полоса действий внизу: у неё уже есть свой ряд, дублировать телефон
     в подвале ссылкой-кнопкой не нужно. */
  .mobile-cta__item { font-family: var(--font-display); font-size: 15px; }
  .mobile-cta__item--main { background: var(--c-accent); }
  .mobile-cta { background: var(--ink); border-top: 0; gap: var(--seam); }
}

@media (max-width: 520px) {
  .hero2__course { grid-template-columns: 1fr 1fr; }
  .section__title.section__title.section__title { font-size: clamp(24px, 7.4vw, 32px) !important; }
  .svc-major__title { font-size: 21px !important; }
  .price-cell__sum b, .svc-price b { font-size: 22px; }
}

/* Панель навигации вне потока (absolute, top:100px), поэтому первый блок
   после неё начинается ПОД ней. Первому экрану отступ уже задан, остальным
   страницам добавляем высоту панели. */
.nav + main, .nav + .page-title-bar { padding-top: calc(var(--nav-h) + 26px) !important; }
.prices-page .section__title.section__title.section__title { margin-bottom: 22px !important; }

/* --------------------------------------------------------------------------
   12.18 МОДАЛКИ. Они остались с радиусом 8 и шрифтом по умолчанию —
   единственное место, где видно старую тему.
   -------------------------------------------------------------------------- */
.map-modal .map-modal__content, .reel-modal__inner, .review-modal__inner {
  border-radius: 0 !important;
}
.map-modal__content-title, .calc-right__title, .reel-modal__title, .review-modal__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.map-modal .map-modal__input, .map-modal .form-control, .map-modal select, .map-modal textarea {
  border-radius: 0 !important;
  border: 2px solid rgba(18, 20, 26, .18) !important;
  min-height: 48px;
}
.map-modal .map-modal__input:focus, .map-modal .form-control:focus { border-color: var(--ink) !important; }
.map-modal .map-modal__send, .map-modal .submit_calc, .map-modal .map-modal__btn {
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  min-height: 54px;
}
#calcEstimate {
  border-radius: 0 !important;
  border-left: 4px solid var(--c-accent);
  background: var(--cement);
  padding: 12px 14px;
  font-size: 15px;
}
#calcEstimate b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Сетка из трёх колонок оставляла дыру цвета шва, когда фильтр отбирал
   два объекта. Гибкий ряд растягивает оставшиеся карточки на всю ширину —
   и мелкая выборка выглядит как выборка, а не как сбой. */
.case-lay { display: flex !important; flex-wrap: wrap; }
.case {
  flex: 1 1 calc((100% - var(--seam) * 2) / 3);
  min-width: min(300px, 100%);
}
@media (max-width: 1100px) { .case { flex-basis: calc((100% - var(--seam)) / 2); } }
@media (max-width: 700px)  { .case { flex-basis: 100%; } }

/* --------------------------------------------------------------------------
   12.19 ТАЧ-ЦЕЛИ В НОВЫХ БЛОКАХ
   Прошлый круг поднял до 44 px всё, что было в шаблоне. Новые элементы
   редизайна надо было довести отдельно.
   -------------------------------------------------------------------------- */
.hero2__tel, .svc-cta__tel, .foot-tel, .callback-direct a,
.header .header-tel .header-item__text a, .footer a, .nav-menu__a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav .nav-menu__a { padding: 0 6px; }
.header .social-icon { min-width: 44px; min-height: 44px; padding: 7px; box-sizing: border-box; background-clip: content-box; }
.svc-go, .works-more a, .foot-list a, .foot-mail, .reviews-add-review {
  display: inline-flex; align-items: center; min-height: 34px;
}
@media (max-width: 960px) {
  .svc-go, .works-more a, .foot-list a, .foot-mail { min-height: 44px; }
  .hero2__shot .slider-status__item::after { width: 44px !important; height: 44px !important; }
  .svc-rare a { min-height: 48px; }
  .case-filter__btn { min-height: 46px; }
}

/* Ссылки внутри строки текста («Цены», «обработку персональных данных»)
   оставлены как есть: 44 px им не задать, не разорвав строку. Строка
   согласия целиком уже поднята до 44 px прошлым кругом аудита. */
@media (max-width: 960px) { .reviews-add-review.is-quiet { min-height: 44px !important; } }

/* На 390 px две колонки карточек услуг оставлены намеренно — так виден
   ассортимент, а не одна карточка на экран. Но «Крупноформатная» длиннее
   колонки, и цена «от 10 000 ₽ под ключ» не влезала в одну строку. */
@media (max-width: 620px) {
  .svc-card__title { font-size: 16px !important; overflow-wrap: anywhere; hyphens: auto; }
  .svc-card .svc-desc { font-size: 14px; }
  .svc-price { flex-wrap: wrap; row-gap: 2px; }
  .svc-card .svc-price b { font-size: 19px; }
  .svc-card .svc-price span { font-size: 12px; }
  .svc-card__body { padding: 12px 12px 14px; }
  .case__spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case__spec-cell { padding-right: 6px; }
  .case__spec-cell:nth-child(2), .case__spec-cell:nth-child(3) { padding-left: 8px; }
}

/* Первый пункт меню — иконка «домой» фоном. Правило про тач-цель сделало
   его flex-элементом и обрезало картинку. */
.nav .nav-menu__a.icon {
  width: 44px; padding: 0;
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Иконки соцсетей в шапке рисуются фоном. Расширение до 44 px с
   background-clip: content-box обрезало картинку — задаём размер явно. */
.header .social-icon {
  background-size: 30px 30px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-clip: border-box !important;
  padding: 0 !important;
}

/* ==========================================================================
   12. ОТЗЫВЫ: карточки переоформлены плитками, но раскладкой по-прежнему
   управляла старая карусель. Слайды получали scale(.96), высоты гуляли
   от 274 до 517 px, соседние карточки налезали друг на друга.
   ========================================================================== */
.reviews-section .reviews-carousel { display: block; }
.reviews-section .reviews-carousel__btn { display: none; }
.reviews-section .reviews-carousel__viewport { overflow: visible; padding: 0; }
.reviews-section .reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  margin: 0 !important;
  /* во встроенных стилях осталось центрирование карусели —
     padding: 6px calc(50% - 325px) — оно сжимало три колонки до 215 px */
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.reviews-section .reviews-grid .review-card,
.reviews-section .reviews-grid .review-card.is-centered,
.reviews-section .reviews-grid .review-card:hover {
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  scroll-snap-align: none !important;
  opacity: 1 !important;
}
/* Разные носители — один кадр: видео, скриншот переписки и текст
   выстраиваются по одной высоте медиа-блока. */
.reviews-section .review-card__media {
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
}
.reviews-section .review-card__media img,
.reviews-section .review-card__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.reviews-section .review-card__by { margin-top: auto; }

/* Ссылка «Добавить свой отзыв» стояла серым по тёмному. */
.reviews-section .reviews-actions { padding-top: 22px; }
.reviews-section .reviews-add-review,
.reviews-section .reviews-add-review.is-quiet { color: #cfd3da !important; }
.reviews-section .reviews-add-review:hover { color: #fff !important; }

@media (max-width: 960px) {
  .reviews-section .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .reviews-section .reviews-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   13. ФОТОГРАФИИ — по итогам разбора всей библиотеки (179 файлов)
   ========================================================================== */

/* Превью видеоотзывов — кадры 16:9 (1280x720, 640x360), а рамка карточки
   вертикальная 3:4. Обрезалось 54% ширины, оставался фрагмент лица крупным
   планом. Видео-карточке даём её собственную пропорцию. */
.reviews-section .review-card--video .review-card__media {
  aspect-ratio: 16 / 10 !important;
}
.reviews-section .review-card--video .review-card__media img {
  object-position: 50% 30%;
}

/* Логотип растягивался object-fit: fill — пропорция ехала на 1%. */
.header-item__logo, .footer__logo img { object-fit: contain !important; }

/* Ни один снимок не должен показываться крупнее своего разрешения:
   после честного srcset браузер сам выберет подходящий файл, но на
   всякий случай гасим сглаживание при увеличении. */
.case__img, .svc__img { image-rendering: auto; }

/* Карточки работ лежали во flex с flex-grow: 1 — одинокая карточка в
   последнем ряду растягивалась на всю ширину и выпадала из сетки.
   Ширину колонки фиксируем, ряд выравниваем по левому краю. */
.case-lay { justify-content: flex-start; }
.case { max-width: calc((100% - var(--seam) * 2) / 3); }
@media (max-width: 1100px) { .case { max-width: calc((100% - var(--seam)) / 2); } }
@media (max-width: 700px)  { .case { max-width: 100%; } }
