/* ============================================================
   АСПЕКТПРОЕКТ · СТРАНИЦЫ УСЛУГ
   ------------------------------------------------------------
   Общий файл для всех страниц вида /uslugi/<slug>/. Общее (токены,
   типографика, кнопки, списки, плейсхолдеры, шапка, подвал, модалки,
   .trust, .cases__grid/.case, .crumbs, .hero--page, .related, .cta,
   .closing, .faq/.faq-item*) — в base.css: хлебные крошки, герой
   внутренней страницы, блок перелинковки, открытая форма заявки и
   финальный блок «На связи» перенесены туда 30.07.2026, когда их
   понадобилось переиспользовать на странице «Команда», не входящей
   в /uslugi/; аккордеон вопросов — 11.08.2026, когда понадобился в
   шаблоне статьи раздела «Публикации» (тоже вне /uslugi/).
   Здесь — только блоки, которых нет на главной и нет на «Команде»:
   сетка этапов и прочее из шаблона страницы услуги.
   ============================================================ */

/* ============================================================
   ЛИСТ 02 · КОМУ И КОГДА НУЖНО
   ------------------------------------------------------------
   Правка заказчика (итерация 2): карточки приведены к образцу
   «Сегменты» с главной (.segment — фото на всю карточку, тёмный
   градиент снизу, текст поверх, крупный полупрозрачный номер в
   углу; стили общие, в base.css). Скрывать здесь нечего — весь
   текст виден сразу, поэтому используется модификатор
   .segment--static (подзаголовок раскрывается по наведению и тапу —
   правка 29.07.2026). .segment--compact укорачивает фото на мобильном.
   ============================================================ */
.need {
  padding: 110px 0 120px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

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

.segment--static .segment__caption { padding-bottom: 24px; }

/* Подзаголовок раскрывается по наведению, а не виден сразу — тот же
   характер движения, что у оверлея сегментов на главной (ЛИСТ 02):
   всплытие снизу + проявление, .3s ease. Схлопывание по max-height,
   чтобы в покое карточка не держала пустое место под текст. */
.segment--static .segment__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.88);
  max-width: 30ch;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(14px);
  transition: max-height .35s ease, margin-top .3s ease, opacity .3s ease, transform .3s ease;
}
.segment--static:hover .segment__text,
.segment--static:focus-visible .segment__text,
.segment--static.is-open .segment__text {
  max-height: 12em;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ЛИСТ 03 · ЧТО ВХОДИТ В УСЛУГУ
   ------------------------------------------------------------
   Восемь пунктов в три колонки с мелкими номерами читались плоско.
   Перегруппировано по стадиям (крупные номера групп + подзаголовки)
   и добавлено вертикальное фото рядом — см. комментарий в HTML про
   паттерн «Bento Grid Showcase» (ui-ux-pro-max/data/landing.csv, №29).
   ============================================================ */
.scope { padding: 110px 0 120px; background: var(--paper); }

.scope__layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: start;
}

.scope-group {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.scope-group:first-child { padding-top: 0; border-top: none; }
.scope-group__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 16px;
}
.scope-group__num {
  font-family: var(--head);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blue);
}
.scope-group__title {
  font-family: var(--head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Отклик при наведении на строках — приём с главной (.services__nav-item):
   тонкая линия .line между строками + синяя полоска слева, которая
   выезжает по ховеру (правка заказчика, итерация 2: «линии — взять приём,
   который уже есть на главной, а не рисовать свои»). */
.scope-group__list li {
  position: relative;
  /* Отступы одинаковые у всех строк и НЕ меняются по ховеру.
     Раньше padding-left рос с 18 до 22px — текст дёргался вбок,
     а обнулённые отступы у первой/последней строки делали подсветку
     не по центру относительно текста (правка заказчика 29.07.2026). */
  padding: 12px 0 12px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  border-top: 1px solid var(--line);
  transition: background-color .2s;
}
.scope-group__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue);
  transform: scaleY(0);
  transition: transform .25s;
}
.scope-group__list li:hover { background: var(--paper-2); }
.scope-group__list li:hover::before { transform: scaleY(1); }
/* Прозрачная граница, а не её отсутствие: при border-top:none первая
   строка каждой группы была на 1px ниже соседних, и подсветка по ховеру
   «съезжала» относительно текста (правка заказчика 29.07.2026). */
.scope-group__list li:first-child { border-top-color: transparent; }

.scope__media { border: none; }
/* Тот же класс носит и <img> с реальным фото. Пропорцию раньше давал
   модификатор .placeholder--portrait, которого у картинки нет, — задаём
   явно. height: auto обязателен: у <img> есть атрибуты width/height, и
   без него они перебивают aspect-ratio (design-system, «грабли»). */
img.scope__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}

/* ============================================================
   ЛИСТ 04 · РАЗДЕЛЫ ПРОЕКТА
   ------------------------------------------------------------
   Добавлено 11.08.2026 (ТЗ — блок «Разделы проектной документации»).
   Карточки-утверждения .claim/.claim-grid — пятое использование
   компонента (после «Изысканий», «Приборной базы» на «Техобследовании»
   и двух блоков «Благоустройства»). Шесть разделов дают сетку 3×2 —
   сужена локально до трёх колонок тем же приёмом, что у .equip/
   .fullcycle. Фон белый — по факту в файле «Состав» перед этим блоком
   на --paper, а «Как проходит работа» после — на --white с собственной
   border-top; сделав этот блок тоже белым, стык с «Составом» остаётся
   на разнице цвета, а стык со следующим блоком держит его же верхняя
   рамка (design-system 4.5). Список карточек закрыт: расширять его
   нельзя, компетенции по разделам ОВ/СС/ПОС/ППР не подтверждены (ТЗ,
   раздел «Запреты по текстам»).
   ============================================================ */
.razdely { padding: 110px 0 120px; background: var(--white); }
.razdely .claim-grid { grid-template-columns: repeat(3, 1fr); }

/* Фото в карточках разделов, 11.08.2026. Кадры заказчика: реальное здание,
   переходящее в синюю проектную модель — тот же мотив, что в героях страниц,
   и синий совпадает с фирменным.
   Полоса 2:1 в край карточки, текст остаётся с внутренним отступом: номер,
   заголовок и описание не съезжают. Кадр в обёртке .claim__foto —
   чтобы при наведении увеличиваться, не наезжая на текст (28.10.2026).
   У <img> заданы width/height — значит обязателен height:auto, иначе кадр
   растянется по фиксированной высоте (грабли: web-grabli, изображения). */
.razdely .claim { padding: 0 0 26px; }
.razdely .claim__foto {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.razdely .claim__media {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.mysh .razdely .claim:hover .claim__media { transform: scale(1.06); }
.razdely .claim__num { margin-left: 26px; }
.razdely .claim__title,
.razdely .claim__desc { margin-left: 26px; margin-right: 26px; }

/* ============================================================
   ЛИСТ 05 · КАК ПРОХОДИТ РАБОТА
   ------------------------------------------------------------
   Правка заказчика (итерация 2): «шахматная доска» из первой версии
   (сетка 3×2 со шкалой прогресса) заменена на горизонтальную ленту
   «Как мы работаем» с главной — тики сверху, «Шаг 01», стрелки
   навигации. Внутренности ленты (.how__viewport/.how__track/.how-step)
   общие, стили в base.css. Здесь — только обёртка секции: белый фон
   с рамками, чтобы не совпадать по цвету с бумажными «Состав» перед
   ней и «Результат» после (design-system 4.5).
   ============================================================ */
.how {
  padding: 110px 0 120px;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   ЛИСТ 06 · ЧТО ПОЛУЧИТ ЗАКАЗЧИК
   ------------------------------------------------------------
   Интро — отдельный блок с явным зазором до заголовка (раньше
   .section-title и <p> шли впритык и слипались). Ниже — фото
   готового комплекта документации рядом с панелью (ТЗ на фото,
   слот №8), список переведён на check-list — контрастнее дэша.
   Правка заказчика (итерация 2): текст справа крупнее, фото на
   мобильном скрыто — см. .result__panel .check-list li и
   .result__media в адаптиве.
   ============================================================ */
.result { padding: 110px 0 120px; background: var(--paper); }
.result__intro {
  max-width: 640px;
  margin-bottom: 48px;
}
.result__intro .section-title { margin-bottom: 20px; }
.result__intro p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.result__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.result__media { border: none; }
/* См. комментарий у img.scope__media — та же причина. Пропорцию давал
   модификатор .placeholder--photo. */
/* Фон блока доверия задаётся картинкой на каждой странице отдельно.
   Класс-модификатор, а не inline-стиль: так фон виден в CSS и его можно
   найти поиском. Сам .about__bg (base.css) уже накладывает обесцвечивание,
   затемнение до 0.22 и размытие — качество исходника можно резать смело. */
.about__bg--proektirovanie  { background-image: url('../img/pages/proektirovanie/about-bg.jpg'); }
.about__bg--izyskaniya      { background-image: url('../img/pages/izyskaniya/about-bg.jpg'); }
.about__bg--tehobsledovanie { background-image: url('../img/pages/tehobsledovanie/about-bg.jpg'); }
.about__bg--sudexpertiza    { background-image: url('../img/pages/sudexpertiza/about-bg.jpg'); }
.about__bg--blagoustroystvo { background-image: url('../img/pages/blagoustroystvo/about-bg.jpg'); }

img.result__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.result__panel {
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 40px 44px;
}
.result__panel h3 {
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 24px;
}
/* Крупнее прежнего 15.5px — правка заказчика (итерация 2): текст справа
   должен быть заметнее, это главный носитель смысла блока. */
.result__panel .check-list li {
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 34px;
  margin-bottom: 18px;
}
.result__panel .check-list li:last-child { margin-bottom: 0; }
.result__panel .check-list li::before {
  border-color: var(--blue);
  width: 16px;
  height: 9px;
  top: 7px;
}

/* ============================================================
   ЛИСТ 07 · ДОВЕРИЕ
   ------------------------------------------------------------
   Правка заказчика (итерация 2): «отличный блок о компании на
   главной, вижу расхождения с вёрсткой такого же блока на странице —
   сделай копипаст готового блока по вёрстке». Вместо своей раскладки —
   тот же компонент .about, что на главной (цитата, текст, кнопка
   «Команда», ниже полоса из четырёх .trust с разделителями); стили
   общие, в base.css. Фото фона у этой страницы своё — здесь только
   background-image (пока плейсхолдер, ТЗ на фото, слот №9).
   ============================================================ */

/* ============================================================
   ЛИСТ 08 · СТОИМОСТЬ — без калькулятора (он занят главной):
   факторы цены + переход к точному расчёту.
   ------------------------------------------------------------
   Обе колонки теперь начинаются с одинаковой по высоте эйбрау-метки
   (.price__factors-label / .price__card-label) — раньше слева не было
   заголовка, и список стартовал выше карточки. Список факторов набран
   контрастнее (тёмный текст, жирный вес, заметный маркер вместо
   бледного тире). В карточке — одна кнопка вместо двух.
   ============================================================ */
.price { padding: 110px 0 120px; background: var(--white); }
.price__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: stretch;
}
.price__factors-label,
.price__card-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.price__factors-label { margin-bottom: 22px; }
.price__factors .dash-list li {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 0 12px 26px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.price__factors .dash-list li:first-child { padding-top: 0; }
.price__factors .dash-list li:last-child { border-bottom: none; }
.price__factors .dash-list li::before {
  color: var(--blue);
  font-weight: 800;
  font-size: 17px;
}

/* Расчёт на месте (28.10.2026, выбор заказчика из двух вариантов):
   тип объекта и площадь прямо здесь, сумма сразу. Карточка в чёрной
   рамке («сильно ИИ», 25.10) снята — колонка отделена линией слева.
   Ставки — CALC_CONFIG из calculator.js, логика — initMiniCalc()
   в service.js; подробный расчёт по стадиям — на главной. */
.price__card {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 48px;
  border-left: 1px solid var(--line-strong);
}
.price__card-label { margin-bottom: 14px; }
.price__mini { display: flex; flex-direction: column; gap: 22px; }
.price__mini-types { display: flex; flex-direction: column; margin: 0; padding: 0; border: none; min-width: 0; }
.price__mini-types legend,
.price__mini-area > span { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.price__mini-type {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  cursor: pointer;
  transition: color .15s;
}
.price__mini-type:first-of-type { border-top: 1px solid var(--line); }
.price__mini-type input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.price__mini-type input:checked { border-color: var(--blue); box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 8px var(--blue); }
.price__mini-type:hover,
.price__mini-type:has(input:checked) { color: var(--blue); }
.price__mini-area { display: flex; flex-direction: column; }
.price__mini-area input {
  width: 180px;
  padding: 10px 0;
  border: none;
  border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
}
.price__mini-area input:focus { border-color: var(--blue); }
.price__mini-total { display: flex; flex-direction: column; gap: 2px; }
.price__mini-total span { font-size: 13.5px; color: var(--ink-2); }
.price__mini-total output {
  font-family: var(--head);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price__mini-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; margin-top: -10px; }
.price__mini-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* ============================================================
   БЛОКИ СТРАНИЦЫ «ИНЖЕНЕРНЫЕ ИЗЫСКАНИЯ», КОТОРЫХ НЕТ НА
   «ПРОЕКТИРОВАНИИ»
   ------------------------------------------------------------
   Файл общий для всех страниц /uslugi/<slug>/ — секции ниже не
   переопределяют ничего из блоков выше, а добавляют обёртки для
   новых по составу блоков. Внутренние компоненты (.scope-group__list,
   .dash-list, .link-more, .services__layout) переиспользованы как
   есть из base.css/service.css, без изменений их правил.
   ============================================================ */

/* ------------------------------------------------------------
   ЛИСТ 02 · ЗАЧЕМ НУЖНЫ ИЗЫСКАНИЯ
   ------------------------------------------------------------
   Текстовый блок без фото: интро + перечень того, что изыскания
   проясняют до начала проектирования, и переход к заявке.
   .dash-list — нейтральное перечисление (design-system 4.1),
   в две колонки на широком экране через .why__list.
   ------------------------------------------------------------ */
.why { padding: 110px 0 120px; background: var(--white); border-bottom: 1px solid var(--line); }
/* Карточки-утверждения: рамка, крупный синий номер, короткий заголовок.
   Приёмы взяты готовые — номер как .svc-panel__chip, рамка и синяя
   полоска по ховеру как у .related__card. Плоский список из тире
   заказчик забраковал: «нет выделенных элементов, глазу сложно считать». */
.claim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.claim {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .2s;
}
/* 28.10.2026, правка заказчика по разделам проекта: «при наведении
   лучше пусть фото увеличиваются и цифра закрашивается». Синяя полоса
   слева снята, номер в покое — контуром, при наведении заливается;
   фото (где оно есть) увеличивается внутри своей рамки. Наведение
   только от движения мыши (.mysh, common.js). */
.mysh .claim:hover { border-color: var(--line-strong); }
.claim__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: 2px;
  transition: background-color .25s, color .25s;
}
.mysh .claim:hover .claim__num { background: var(--blue); color: #fff; }
.claim__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin-bottom: 10px;
}
.claim__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.why__cta { margin-top: 4px; }

/* ------------------------------------------------------------
   ЛИСТ 03 · ВИДЫ ИЗЫСКАНИЙ
   ------------------------------------------------------------
   Главный блок страницы — табы «список — панель» с главной
   (.services__layout/.svc-panel, стили в base.css, design-system
   4.2). Пять вкладок: комплекс + четыре вида изысканий, у каждой —
   описание и своя кнопка заявки.
   ------------------------------------------------------------ */
.types { padding: 110px 0 120px; }

/* ------------------------------------------------------------
   ЛИСТ 04 · ЧТО ВХОДИТ В УСЛУГУ
   ------------------------------------------------------------
   Десять пунктов из исходника, сгруппированы по стадиям работ —
   тот же приём строк с откликом по ховеру, что и в «Составе» на
   странице «Проектирование» (.scope-group / .scope-group__list,
   стили уже в этом файле, ничего не переопределяется). Здесь без
   фото рядом — раскладка уже, список идёт на всю ширину колонки.
   ------------------------------------------------------------ */
.included { padding: 110px 0 120px; background: var(--white); border-bottom: 1px solid var(--line); }
.included__groups { max-width: 760px; }

/* Блок «Возможно, вас заинтересует» (ЛИСТ 10) использует .related /
   .related__grid / .related__card — общий компонент, стили в base.css
   (перенесены туда 30.07.2026 для переиспользования на «Команде»). */

/* Аккордеон вопросов на этой странице — на белом (design-system 4.5:
   у соседних секций фон не должен совпадать; «Возможно, вас
   заинтересует» перед ним — бумажный). Разметка, поведение и
   модификатор .faq--white — общий компонент, перенесён в base.css
   11.08.2026 для переиспользования в шаблоне статьи (страница вне
   /uslugi/, ТЗ — раздел «Публикации», п.4). */

/* ============================================================
   ЛИСТ 09 · ПРОЕКТЫ ПО ТЕМЕ
   (.cases__grid / .case — общий компонент, стили в base.css)
   ------------------------------------------------------------
   Белый фон вместо бумажного: после переноса формы заявки выше
   (ЛИСТ 08, «Заявка» на бумажном фоне) секции не должны совпадать
   по цвету (design-system 4.5).
   ============================================================ */
.cases { padding: 110px 0 120px; background: var(--white); border-top: 1px solid var(--line); }
.cases .placeholder--wide span { max-width: 200px; }

/* ЛИСТ 10 · ВОПРОСЫ — .faq/.faq-item* общий компонент, перенесён
   в base.css 11.08.2026 (см. комментарий выше). */

/* ЛИСТ 08 · ЗАЯВКА и ЛИСТ 11 · НА СВЯЗИ используют .cta/.cta__*
   и .closing/.closing__* — общие компоненты, перенесены в base.css
   30.07.2026 для переиспользования на «Команде». */

/* ============================================================
   БЛОКИ СТРАНИЦЫ «ТЕХНИЧЕСКОЕ ОБСЛЕДОВАНИЕ», КОТОРЫХ НЕТ НА
   «ИЗЫСКАНИЯХ» И «ПРОЕКТИРОВАНИИ»
   ------------------------------------------------------------
   Файл общий для всех страниц /uslugi/<slug>/ — секции ниже
   добавляют только обёртки для новых по составу блоков.
   ============================================================ */

/* ------------------------------------------------------------
   ЛИСТ 03 · ДВА ЭТАПА ОБСЛЕДОВАНИЯ
   ------------------------------------------------------------
   Тот же компонент строк с откликом по ховеру, что и в «Составе»
   на «Проектировании»/«Изысканиях» (.scope-group/.scope-group__list,
   стили уже в этом файле выше, ничего не переопределяется). Здесь —
   только обёртка секции: без фото рядом, список на всю ширину
   колонки (см. обоснование в HTML).
   ------------------------------------------------------------ */
.stages { padding: 110px 0 120px; background: var(--paper); }
.stages__groups { max-width: 780px; }

/* ------------------------------------------------------------
   ЛИСТ 04 · ПРИБОРНАЯ БАЗА
   ------------------------------------------------------------
   Новый блок (ТЗ, п.6): страница про технику измерений — такого
   блока нет ни на «Изысканиях», ни на «Проектировании». Готового
   компонента под три развёрнутых утверждения без фото не было:
   .dash-list дал бы плоский список без выделенных элементов —
   то же замечание заказчика, из-за которого на «Изысканиях»
   появились .claim («нету выделенных элементов»). Решение —
   взять .claim как есть (второе использование компонента, он уже
   общий в этом файле, .claim-grid ничего не меняет по умолчанию).
   Единственное новое здесь — секция-обёртка .equip (фон, отступы,
   границы, как у любой другой секции) и сетка, суженная локально
   до трёх колонок под три тезиса вместо четырёх у .claim-grid по
   умолчанию.
   ------------------------------------------------------------ */
.equip { padding: 110px 0 120px; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.equip .claim-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }

/* ============================================================
   БЛОКИ СТРАНИЦЫ «СУДЕБНАЯ ЭКСПЕРТИЗА», КОТОРЫХ НЕТ НА ДРУГИХ
   СТРАНИЦАХ
   ------------------------------------------------------------
   Файл общий для всех страниц /uslugi/<slug>/ — секции ниже
   добавляют только обёртки для новых по составу блоков. Внутренние
   компоненты (.claim-grid, .scope-group__list, .segment, .dash-list)
   переиспользованы как есть, без изменения их правил.
   ============================================================ */

/* ------------------------------------------------------------
   ЛИСТ 02 · НА КАКИЕ ВОПРОСЫ ОТВЕЧАЕТ ЭКСПЕРТИЗА
   ------------------------------------------------------------
   Карточки-утверждения .claim/.claim-grid — третье использование
   компонента (после «Изысканий» и «Приборной базы» на
   «Техобследовании»), стили общие, определены выше в этом файле.
   Здесь — только обёртка секции.
   ------------------------------------------------------------ */
.issues { padding: 110px 0 120px; background: var(--white); border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------
   ЛИСТ 03 · ЧТО ВХОДИТ В РАБОТУ
   ------------------------------------------------------------
   Тот же приём строк с откликом по ховеру, что и в «Составе» на
   других страницах услуг (.scope-group/.scope-group__list, стили
   уже в этом файле выше, ничего не переопределяется). Без фото
   рядом — список идёт на всю ширину колонки.
   ------------------------------------------------------------ */
.duties { padding: 110px 0 120px; background: var(--paper); }
.duties__groups { max-width: 780px; }

/* ------------------------------------------------------------
   ЛИСТ 04 · ЧТО ПРЕДСТАВЛЯЕТ СОБОЙ ЗАКЛЮЧЕНИЕ — новый компонент .brief
   ------------------------------------------------------------
   Готового компонента под «документ как документ» на сайте не
   было (ТЗ, п.3 и п.6). Ведущий мотив «цитата-документ»,
   зарезервированный за этой страницей в банке мотивов скилла
   aspect-page. Ничего нового по токенам: рамка + уголки «+» — тот
   же приём, что у .calc__panel (design-system 4.3, «Панель с
   рамкой и „+“ по углам» уже в каталоге акцентов, использована
   здесь во второй раз и на некалькуляторном блоке — расширяет её
   применение с «интерактивная панель» на «оформленный документ»);
   номер + строка — тот же ритм, что у .scope-group__num; тег
   документа — та же типографика, что у .modal__tag. Полное
   описание компонента — в отчёте задачи, для внесения в брендбук.

   Уголки «+» перекрашены в фон секции (--white), а не в --paper,
   как у .calc__panel на главной: там секция калькулятора на
   --paper, здесь .brief — на --white, и с --paper под уголками
   получился бы едва заметный контур.
   ------------------------------------------------------------ */
.brief { padding: 110px 0 120px; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brief__layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.brief__doc {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 40px 40px 36px;
}
.brief__doc::before,
.brief__doc::after {
  content: '+';
  position: absolute;
  font-family: var(--head);
  font-size: 16px;
  color: var(--line-strong);
  line-height: 1;
  background: var(--white);
}
.brief__doc::before { top: -8px; left: -8px; }
.brief__doc::after { bottom: -8px; right: -8px; }

.brief__doc-tag {
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
}
.brief__doc-name {
  font-family: var(--head);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.28;
  margin-top: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
}
.brief__doc-list { margin-top: 6px; list-style: none; }
.brief-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
/* Прозрачная граница у первого элемента, а не её отсутствие — тот же
   приём, что у .scope-group__list li:first-child (иначе строка на
   1px ниже соседних). */
.brief-item:first-child { border-top-color: transparent; }
.brief-item__num {
  flex: 0 0 auto;
  width: 26px;
  font-family: var(--head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: 1.45;
}
.brief-item__title {
  font-family: var(--head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.brief-item__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.brief__text { padding-top: 6px; }
.brief__text > p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 28px;
}
.brief__text .dash-list li { font-size: 15px; }

/* ------------------------------------------------------------
   ЛИСТ 05 · КОГДА ОБРАЩАЮТСЯ
   ------------------------------------------------------------
   Карточки-сценарии — .segment/--static/--compact, третье
   использование компонента (после главной и «Техобследования»),
   стили общие, в base.css. Здесь — только обёртка секции и сетка,
   тот же приём 4 → 2 колонок на 1180px, что у .need__grid
   (аспект фото у .segment--compact уже переключается глобальным
   правилом в адаптиве ниже, без переопределения здесь).
   ------------------------------------------------------------ */
.reasons { padding: 110px 0 120px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reasons__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ============================================================
   БЛОКИ СТРАНИЦЫ «БЛАГОУСТРОЙСТВО», КОТОРЫХ НЕТ НА ДРУГИХ
   СТРАНИЦАХ
   ------------------------------------------------------------
   Файл общий для всех страниц /uslugi/<slug>/ — секции ниже
   добавляют только обёртки для новых по составу блоков. Внутренние
   компоненты (.segment, .scope-group/.scope-group__list, .claim/
   .claim-grid, .about/.trust, .how, .cases__grid/.case,
   .related__card, .faq-item, .closing) переиспользованы как есть,
   без изменения их правил.
   ============================================================ */

/* ------------------------------------------------------------
   ЛИСТ 02 · КАКИЕ ТЕРРИТОРИИ БЛАГОУСТРАИВАЕМ
   ------------------------------------------------------------
   Главный блок страницы стоит вторым, а не пятым, как «Когда
   обращаются» на «Судэкспертизе» (ТЗ, п.3) — территория читателя
   первична для услуги, у которой пока нет фотографий: карточка
   должна сразу сказать «это про вас». Компонент — .segment/
   --static/--compact, четвёртое использование (после главной,
   «Техобследования» и «Судэкспертизы»), стили общие, в base.css.
   ------------------------------------------------------------ */
.territories { padding: 110px 0 120px; background: var(--white); border-bottom: 1px solid var(--line); }
.territories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ------------------------------------------------------------
   ЛИСТ 03 · ЧТО ВХОДИТ В РАБОТУ
   ------------------------------------------------------------
   Десять пунктов источника сгруппированы в пять групп (ТЗ, п.3).
   Последние два пункта источника («Выполнение работ», «Уход за
   насаждениями») сюда не попали — они содержательно принадлежат
   ЛИСТ 04, а не составу проектирования, и не должны пересказывать
   друг друга (design-system: карточки не пересказывают блок). Тот
   же приём строк с откликом по ховеру, что на остальных страницах
   услуг (.scope-group/.scope-group__list, стили уже в этом файле,
   ничего не переопределяется). Без фото рядом — фотослот уже занят
   в блоке территорий и в блоке «было/стало»; третий подряд был бы
   лишним (ТЗ, п.3: «не наращивать число фотослотов ради красоты»).
   ------------------------------------------------------------ */
.works { padding: 110px 0 120px; background: var(--paper); }
.works__groups { max-width: 780px; }

/* ------------------------------------------------------------
   ЛИСТ 04 · ПРОЕКТ, РАБОТЫ И УХОД В ОДНИХ РУКАХ
   ------------------------------------------------------------
   Главный продающий довод страницы (ТЗ, п.3 и п.4): компания не
   только проектирует, но и выполняет работы и ухаживает за
   посадками — это два последних пункта источника, не вошедшие в
   ЛИСТ 03. Три карточки — три разные роли (проект / работы / уход),
   а не три способа сказать «мы делаем благоустройство» (design-
   system: карточки не пересказывают друг друга). Компонент .claim/
   .claim-grid — пятое использование, сетка сужена локально до трёх
   колонок под три тезиса — тот же приём, что у .equip.
   ------------------------------------------------------------ */
.fullcycle { padding: 110px 0 120px; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fullcycle .claim-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }

/* ------------------------------------------------------------
   ЛИСТ 05 · БЫЛО И СТАЛО — новый компонент .compare
   ------------------------------------------------------------
   Из банка ведущих мотивов скилла aspect-page: сравнение «до/после»
   двумя колонками зарезервировано за «Техобследованием» и
   «Благоустройством» совместно. «Техобследование» решило задачу
   «до/после» иначе — карточками-поводами и приборной базой (.claim),
   поэтому мотив оставался свободным и лёг в основу нового
   компонента здесь: единственный приём, которому достаточно двух
   кадров вместо двадцати, поэтому он работает и с плейсхолдерами,
   и когда придёт всего одна пара фотографий.

   Правка заказчика 30.07.2026: вместо двух кадров рядом — шторка.
   Кадры лежат друг на друге, верхний («было») обрезается по позиции
   --pos, которую ставит service.js. Причина замены: два кадра рядом
   заставляют глаз бегать и сравнивать по памяти, шторка показывает
   разницу в одной точке.

   Собран из существующих приёмов, без новых цветов, гарнитур,
   радиусов и типов кнопок: подписи «Было»/«Стало» — типографика
   .sheet-label в масштабе подписи (Onest 600, 12px, трекинг 0.06em,
   uppercase) с короткой линией вместо номера; «Стало» подсвечено
   синим, «Было» — приглушённым ink-2, та же логика цвета, что у
   активного/обычного пункта в .services__nav-item. Символ «↔» в
   захвате — тот же характер, что у стрелок .link-more/.segment__more.

   Доступность: ручка — role=slider с tabindex, стрелки влево-вправо
   двигают шторку, Home/End — в край, Shift ускоряет шаг. Тач: тянется
   пальцем, вертикальный скролл страницы при этом не ломается
   (touch-action: pan-y на сцене, none на ручке). Без JS шторка
   остаётся на 50% — видно обе половины, блок не разваливается.
   ------------------------------------------------------------ */
.compare { padding: 110px 0 120px; background: var(--paper); }

.compare__slider { max-width: 1040px; }

.compare__tags {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.compare__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.compare__tag::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--line-strong);
}
.compare__tag--after { color: var(--blue); }
.compare__tag--after::before { background: var(--blue); }

/* Сцена: два кадра друг на друге, шторка режет верхний.
   overflow: hidden обязателен — обрезанный слой иначе торчит.
   touch-action: pan-y — вертикальный скролл страницы пальцем
   продолжает работать, горизонтальное движение уходит в шторку. */
.compare__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.compare__layer { position: absolute; inset: 0; }
/* Плейсхолдер внутри слоя тянется на всю сцену: своя пропорция ему
   здесь не нужна, размер задаёт .compare__stage. */
.compare__layer .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
/* Реальные кадры в шторке. Пропорцию и размер задаёт .compare__stage,
   картинка просто заполняет слой. Правила для .placeholder выше при этом
   перестают что-либо значить: у <img> этого класса нет — как и было
   задумано, подпорки под плейсхолдеры самоустраняются с приходом фото. */
.compare__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Без этого шторка перестаёт тянуться сразу, как в слои встают реальные
     картинки: браузер видит перетаскивание изображения и запускает свой
     нативный drag, обрывая нашу последовательность указателя. Проверено —
     шторка застревала на 53% вместо 82%. Событиями занимается сцена,
     картинке они не нужны вовсе. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Верхний слой обрезается справа по позиции шторки. --pos ставит JS;
   значение по умолчанию здесь — чтобы блок был осмысленным и без него. */
.compare__layer--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

/* Пока стоят плейсхолдеры, оба кадра одинаковые, и движение шторки было
   бы незаметно. Разводим их светлотой (оба цвета — существующие токены)
   и сдвигаем подписи каждую в свою половину, чтобы они не наезжали друг
   на друга при шторке посередине. С приходом реальных фотографий обе
   правки перестают что-либо значить: фон и подпись перекроются кадром. */
.compare__layer--before .placeholder {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-strong) calc(50% - 0.5px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-strong) calc(50% - 0.5px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--paper);
}
/* Подписи — в середину своей половины кадра (25% и 75%), а не в центр
   сцены: иначе при шторке посередине они наезжают друг на друга и на
   захват. Позиционируем абсолютно — процент от ширины сцены, а не от
   ширины самой подписи, как было бы у transform. */
.compare__layer .placeholder span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.compare__layer--before .placeholder span { left: 25%; }
.compare__layer--after .placeholder span { left: 75%; }

/* Ручка: вертикальная линия во всю высоту + круглый захват.
   Ширина 44px — минимальная зона касания, сама линия по центру. */
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
}
.compare__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(18, 22, 34, 0.18);
}
.compare__grip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 12px rgba(18, 22, 34, 0.28);
  font-family: var(--head);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  transition: transform .2s;
}
.compare__stage:hover .compare__grip { transform: scale(1.06); }
/* Во время перетаскивания захват не должен «прыгать» под курсором */
.compare__slider.is-dragging .compare__grip { transform: none; }
.compare__handle:focus-visible { outline: none; }
.compare__handle:focus-visible .compare__grip {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.compare__hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-2);
}

/* ============================================================
   АДАПТИВНОСТЬ — 1180 / 1024 / 768 / 480
   ============================================================ */
@media (max-width: 1180px) {
  .result__layout,
  .price__layout,
  .scope__layout,
  .brief__layout { grid-template-columns: 1fr; }
  .price__card { padding: 32px 0 0; border-left: none; border-top: 1px solid var(--line-strong); }
  /* .cta__layout (общий компонент): адаптив уже в base.css */

  /* Четыре карточки-сценария в ряд на этой ширине по 220–260px — тот же
     класс проблемы, что у .need__grid (грабли ТЗ, п.5). Переводим в два
     столбца там же, где ломается остальная страница; переключение
     .segment--compact .segment__media на 4:3 уже глобальное правило ниже. */
  .reasons__grid { grid-template-columns: repeat(2, 1fr); }

  /* Шесть карточек «Разделов проекта» по три в ряд на этой ширине сжимаются
     ниже безопасных ~260px (грабли ТЗ, п.5, «Средние ширины») — переводим
     в два столбца там же, где ломается остальная страница. */
  .razdely .claim-grid { grid-template-columns: repeat(2, 1fr); }

  .scope__media { max-width: 420px; }

  /* Как только раскладка стала одноколоночной, фото растягивается на всю
     ширину контейнера и занимает почти экран — «огромный кусок фото в этой
     ориентации излишний» (правка заказчика 29.07.2026). Убираем сразу здесь,
     а не только на мобильном: смысл блока несёт список «на руках у
     заказчика», фото было иллюстрацией. */
  /* С img: правило img.result__media { display: block } выше сильнее
     голого класса, и фото не пряталось – на 869px вставало кадром
     805×604 (снимок заказчика 28.10.2026). */
  img.result__media { display: none; }

  /* Четыре карточки-повода в ряд на этой ширине по 220–260px: подпись
     плейсхолдера, номер, заголовок и раскрывающееся описание перестают
     помещаться и вылезают за карточку. Переводим в два столбца там же,
     где ломается остальная страница, и одновременно укорачиваем кадр:
     вдвое более широкая карточка с пропорцией 4:5 вырастает почти в
     600px и оставляет полкарточки пустого фото. */
  .need__grid { grid-template-columns: repeat(2, 1fr); }
  .segment--compact .segment__media { aspect-ratio: 4 / 3; }

  /* Благоустройство: та же проблема четырёх карточек в ряд, что у
     .need__grid/.reasons__grid — переводим в два столбца там же, где
     ломается остальная страница. Шторка «было/стало» сюда не попадает:
     это один кадр во всю колонку, ему схлопывать нечего. */
  .territories__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  /* .hero__media (общий компонент): адаптив уже в base.css */

  .need__grid { grid-template-columns: repeat(2, 1fr); }

  /* .about__trust (общий компонент): адаптив уже в base.css */
}

@media (max-width: 768px) {
  /* .crumbs, .hero__media, .hero__inner, .hero--page .hero__actions .btn
     (общие компоненты): адаптив уже в base.css */

  /* Панель фактов на мобильном — по образцу полосы фактов с главной
     (.hero__stats-row): 2×2, синяя плашка, крупные значения, тонкие
     светлые разделители. Не копия один в один (там абсолютный блок
     во всю ширину экрана, здесь — карточка с уголками «+»), но та же
     чёткость (правка заказчика, итерация 2). */
  /* мельче и без переноса внутри слова: «госзаказчики» рвалось на
     «госзаказч-ики», что читалось как опечатка */

  .need { padding: 72px 0; }
  .need__grid { grid-template-columns: 1fr; }
  /* Фото в карточках заметно ниже — на телефоне не должны съедать
     пол-экрана (правка заказчика, итерация 2). */
  .segment--compact .segment__media { aspect-ratio: 16 / 9; }

  .scope { padding: 72px 0; }
  /* Вертикальное фото скрыто — «непонятно, к чему оно» (правка заказчика,
     итерация 2). Колонка со списком остаётся на всю ширину. */
  img.scope__media { display: none; }

  /* «Разделы проекта»: .claim-grid переопределён на десктопе и на средних
     ширинах (specificity 0,2,0 выше общего правила .claim-grid выше) —
     здесь нужно явно вернуть 1 колонку на мобильном, иначе оверрайд
     выигрывает и здесь (тот же приём, что у .equip/.fullcycle). */
  .razdely { padding: 72px 0; }
  .razdely .claim-grid { grid-template-columns: 1fr; gap: 14px; }

  .how { padding: 72px 0 80px; }

  .result { padding: 72px 0; }
  .result__intro { margin-bottom: 36px; }
  .result__panel { padding: 32px 24px; }
  /* Фото на мобильном лишнее — правка заказчика, итерация 2 */
  img.result__media { display: none; }

  .about { padding: 72px 0; }

  .price { padding: 72px 0; }

  /* .cta, .closing (общие компоненты): адаптив уже в base.css */

  .cases { padding: 72px 0; }

  /* .faq (общий компонент): адаптив уже в base.css */

  /* Инженерные изыскания — блоки, которых нет на «Проектировании» */
  .why { padding: 72px 0; }
  .claim-grid { grid-template-columns: 1fr; gap: 14px; }
  .types { padding: 72px 0; }
  .included { padding: 72px 0; }
  /* .related (общий компонент): адаптив уже в base.css */

  /* Техническое обследование — блоки, которых нет на «Изысканиях» и
     «Проектировании». .equip .claim-grid переопределён на десктопе до
     трёх колонок (specificity 0,2,0 выше общего правила .claim-grid
     выше) — здесь нужно явно вернуть 1 колонку на мобильном, иначе
     оверрайд выигрывает и здесь. */
  .stages { padding: 72px 0; }
  .equip { padding: 72px 0; }
  .equip .claim-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Судебная экспертиза — блоки, которых нет на «Изысканиях»,
     «Проектировании» и «Техобследовании». */
  .issues { padding: 72px 0; }
  .duties { padding: 72px 0; }
  .brief { padding: 72px 0; }
  .brief__doc { padding: 32px 24px 28px; }
  .brief__layout { gap: 32px; }
  .reasons { padding: 72px 0; }
  .reasons__grid { grid-template-columns: 1fr; }

  /* Благоустройство — блоки, которых нет на других страницах. */
  .territories { padding: 72px 0; }
  .territories__grid { grid-template-columns: 1fr; }
  .works { padding: 72px 0; }
  .fullcycle { padding: 72px 0; }
  .fullcycle .claim-grid { grid-template-columns: 1fr; gap: 14px; }
  .compare { padding: 72px 0; }
  /* На телефоне 16:9 даёт кадр всего ~200px высотой — мелко для
     сравнения. Пропорция ближе к квадрату, ручка крупнее под палец. */
  .compare__stage { aspect-ratio: 4 / 3; }
  .compare__grip { width: 48px; height: 48px; }
  /* Кадры встают друг под другом (ТЗ, п.3), стрелка разворачивается
     на 90° — читается как переход сверху вниз, а не слева направо. */
}

/* 28.10.2026, снимки заказчика: на 561–768px карточки-сценарии
   («Кому подходит», поводы на судэкспертизе, территории на
   благоустройстве) шли в одну колонку во всю ширину. Одна колонка –
   только на телефоне, здесь две, кадр квадратом (подпись с текстом
   в 16:9 не влезает). */
@media (min-width: 561px) and (max-width: 768px) {
  .need__grid,
  .reasons__grid,
  .territories__grid { grid-template-columns: repeat(2, 1fr); }
  .segment--compact .segment__media { aspect-ratio: 1 / 1; }
}

@media (max-width: 480px) {
  /* .hero--page .hero__actions, .closing__actions (общие компоненты):
     адаптив уже в base.css */
  .scope-group__num { font-size: 28px; }
}

/* ============================================================
   РАЗДЕЛЫ ПРОЕКТА НА ТЕЛЕФОНЕ (25.10.2026)
   ------------------------------------------------------------
   Шесть карточек с кадром 2:1 во всю ширину растягивали блок до
   трёх тысяч пикселей. На телефоне — строка на раздел: кадр
   небольшим квадратом слева, номер, название и описание справа.
   ============================================================ */
@media (max-width: 600px) {
  .razdely .claim-grid { gap: 0; border-top: 1px solid var(--line); }
  .razdely .claim {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 16px 0;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .razdely .claim__foto {
    grid-row: 1 / span 3;
    width: 96px;
    height: 96px;
    margin: 0;
    border: none;
  }
  .razdely .claim__media { width: 100%; height: 100%; object-fit: cover; }
  .razdely .claim__num,
  .razdely .claim__title,
  .razdely .claim__desc { grid-column: 2; margin-left: 0; margin-right: 0; }
  .razdely .claim__num { margin-bottom: 6px; }
}

/* ============================================================
   ФОН СОСЕДНИХ БЛОКОВ (28.10.2026)
   ------------------------------------------------------------
   Заказчик: «2 блока подряд одного фона, это норм? Везде разве так
   у нас?» На «Проектировании» после белых «Разделов проекта» шёл
   белый «Как мы работаем». Страничные модификаторы меняют фон двух
   блоков местами, остальные страницы не трогаются.
   ============================================================ */
.how.how--paper { background: var(--paper); border-top: none; border-bottom: none; }
.result.result--white { background: var(--white); }