/* ==========================================================================
   ТАЙГА — мобильная адаптация
   Figma: секция «Mobile» (node 120:1575), базовая ширина макета — 375.

   Правило файла: десктоп не трогаем. Всё, что меняет раскладку, живёт
   внутри @media (max-width: 767px); снаружи — только скрытие мобильных
   узлов, которых на десктопе быть не должно.

   Подключать ПОСЛЕ style.css и всех постраничных css.
   ========================================================================== */

/* Кусочки текста, которых на десктопе нет (напр. «+» в «170+») */
.mob-only {
  display: none;
}

/* Мобильные узлы на десктопе не показываем */
.header__mbar,
.mmenu,
.hero__mob-btn,
.hero__mob-ask,
.portfolio__mob-title,
.portfolio-slide__badge,
.portfolio-slide__mob-info,
.portfolio__mob-all,
.catalog__mob-title,
.catalog__badge-arrow-mob,
.catalog2__label-icon--mob,
.arch-hero__mob-cases,
.catalog__grid--mob,
.champions__mob-title,
.champions-slide__mob-card,
.categories__mob-title,
.categories__mob-list,
.about-banner__mob-links,
.patents__mob-card,
.arch-hero__mob-eyebrow,
.arch-hero__mob-stats,
.proj-mob-list,
.pd-hero__city,
.arch-cases__mob-title,
.arch-cases__mob-slider,
.arch-cases__mob-all,
.catpg-mob-searchrow,
.catpg-chips,
.catpg-filters__mob-close,
.catpg-card__mob-actions,
.pdp-gallery__thumb--mob,
.pdp-mob-ar-btn,
.pdp-crumbs--mob,
.arch-tools__item-arrow-mob,
.pd-awards__panel-title,
body.is-projects-page .awards,
body.is-projects-page .logos,
body.is-project-detail-page .awards {
  display: none;
}

/* awards__card-mob оборачивает существующие .awards__card только для
   мобилки — на десктопе обёртка не должна мешать исходному flex-ряду */
.awards__card-mob {
  display: contents;
}

@media (max-width: 767px) {

/* ==========================================================================
   Шапка — Figma node 4414:8111 «header_mobile» (375×70)
   ========================================================================== */

/* Десктопные ряды прячем целиком, вместо них — единая зелёная полоса.
   sticky: в Figma шапка лежит поверх верхних 70px героя (на страницах без
   героя — в потоке, как на «Каталоге»), sticky даёт оба поведения сразу. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-bottom: 0;
}

.header__topbar,
.header__navbar {
  display: none;
}

.header__mbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 16px;
  background: #516B43 url("../img/footer-bg-pattern.80d705d2e7dd.jpg") center / cover no-repeat;
}

.header__mbar-logo {
  flex-shrink: 0;
  position: relative;
  top: -5px;
}

.header__mbar-logo img {
  width: 91px;
  height: 30px;
}

.header__mbar-actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__mbar-icons {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header__mbar-icons img {
  display: block;
}

/* Сердечко «Избранное» — в высоту иконки корзины (21px) */
.header__mbar-icons .header__mbar-favorite {
  width: 22px;
  height: 21px;
}

@media (max-width: 340px) {
  .header__mbar-actions {
    gap: 24px;
  }

  .header__mbar-icons {
    gap: 22px;
  }
}

/* Бургер — Figma 32×32, #E2480A, три полосы 17×3 (суммарно 15.1 по высоте) */
.header__burger {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #E2480A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.05px;
}

.header__burger span {
  display: block;
  width: 17px;
  height: 3px;
  background: #fff;
}

/* ==========================================================================
   Меню-оверлей — Figma node 4459:16396 «Менюшка_01» (375×677)
   ========================================================================== */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #516B43 url("../img/footer-bg-pattern.80d705d2e7dd.jpg") center / cover no-repeat;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mmenu .header__mbar {
  background: transparent;
}

.mmenu.is-open {
  display: block;
}

/* Крестик: те же 32×32 и та же полоса 17×3, что у бургера, — два бруска
   под ±45° дают ровно 14.14×14.14 из макета. */
.mmenu__close {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #E2480A;
}

.mmenu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 3px;
  margin: -1.5px 0 0 -8.5px;
  background: #fff;
}

.mmenu__close span:first-child {
  transform: rotate(45deg);
}

.mmenu__close span:last-child {
  transform: rotate(-45deg);
}

/* Меню должно целиком помещаться в экран вместе со сноской про Instagram.
   Макет (Figma 4459:16396) — 375×677: шапка 70, 158 до первого пункта,
   блок меню…сноска 428 (4459:16399), 21 снизу. Всё, кроме двух больших
   промежутков (158 сверху и 80 до контактов), — 439px. На экранах ниже 677
   сначала сжимается верхний промежуток (до 24), потом промежуток до
   контактов (до 32); на высоких экранах всё как в макете. */
.mmenu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: clamp(24px, calc(100vh - 519px), 158px); /* 519 = 439 + 80 */
  padding-top: clamp(24px, calc(100dvh - 519px), 158px);
}

.mmenu__nav a {
  width: 131px; /* Figma: на этой ширине «СМИ И СОБЫТИЯ» переносится в две строки */
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.mmenu__contacts {
  margin-top: clamp(32px, calc(100vh - 463px), 80px); /* 463 = 439 + 24 */
  margin-top: clamp(32px, calc(100dvh - 463px), 80px);
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 17px;
  text-align: center;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.mmenu__divider {
  width: 300px;
  height: 1px;
  margin: 32px auto 0;
  border: none;
  background: #fff;
}

/* Figma 4459:16399 (Frame 42530611): grid 208×36, column gap 60, первая
   колонка 67 (Pinterest, Telegram), вторая 81 (Instagram со звёздочкой, Вконтакте). */
.mmenu__socials {
  display: grid;
  grid-template-columns: 67px 81px;
  column-gap: 60px;
  row-gap: 15px; /* Figma: шаг строк 26 = 11 (cap) + 15 */
  justify-content: center;
  margin-top: 19px; /* Figma: 20 от линии, которая там нулевой высоты, а тут 1px */
}

/* Сноска про Instagram — 32 под соцсетями (gap родителя в Figma), 300 по
   ширине, как линия над соцсетями; под ней 21 до низа экрана (677 − 656). */
.mmenu__footnote {
  width: 300px;
  max-width: 100%;
  margin: 32px auto 0;
  padding-bottom: 21px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.5);
}

.mmenu__socials a {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 11px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Фон под открытым меню не скроллим */
body.mmenu-lock {
  overflow: hidden;
}

/* Контент во всех секциях — 320 при вьюпорте 375 */
.container {
  padding: 0 27.5px;
}

/* Все заголовки блоков на десктопе — 70px c line-height 1.1 (см. .section-title
   в style.css); в Figma-мобилке этот же рецепт неизменно даёт 30px/33px —
   переопределяем один раз глобально вместо повтора в каждом блоке. */
.section-title {
  font-size: 30px;
}

.section-title.champions__mob-title span{
    font-size: 30px;
    color: #E2480A;
}

.mob-only {
  display: inline;
}

/* ==========================================================================
   Главная. Герой — Figma node 107:1110 (375×737)

   Баннер с фото — 667, под ним, уже на белом, кнопка «задать вопрос».
   Шапка в макете лежит поверх верхних 64px баннера, поэтому герой
   подтягиваем отрицательным margin'ом под sticky-шапку.
   ========================================================================== */
.hero {
  height: 667px;
  margin-top: -64px;
}

.hero__scrim {
  /* Figma: линейный градиент снизу вверх, чёрный до 43.75% вектора длиной
     0.618 высоты, дальше в прозрачный; всё под opacity 0.2 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 27%, rgba(0, 0, 0, 0) 61.8%);
}

.hero__container {
  align-items: flex-end;
  padding: 0 27.5px 20px;
}

.hero__row {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.hero__intro {
  width: 100%;
  gap: 20px; /* Figma: заголовок → подзаголовок */
}

.hero__title {
  font-size: 38px;
}

.hero__title-line {
  line-height: 41.8px;
}

.hero__subtitle {
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 19.8px;
  /* В макете подзаголовок разбит на два параграфа с интервалом 6.4 (высота
     блока 46 = 19.8×2 + 6.4). У нас это одна строка с автопереносом, где
     интервала между параграфами не бывает, — добираем высоту снизу, чтобы
     не поехал весь прижатый к низу стек. */
  padding-bottom: 6.4px;
}

/* Пока портал ещё внутри героя — не показываем: mobile.js переносит его
   отдельным блоком между цифрами и «Проектами» (Figma node 107:1148),
   и там этот селектор уже не действует */
.hero .hero__portal {
  display: none;
}

.hero__mob-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 50px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.hero__mob-btn img {
  width: 12px;
  height: 12px;
}

.hero__mob-btn--fill {
  margin-top: 12px; /* Figma: 32 от подзаголовка, 20 уже даёт gap .hero__intro */
  background: #E2480A;
  color: #fff;
}

.hero__mob-btn--outline {
  background: #fff;
  color: #E2480A;
  border: 1px solid #E2480A;
}

.hero__mob-ask {
  display: block;
  margin-top: 20px;
  padding: 0 27.5px;
}

/* ==========================================================================
   Главная. Цифры — Figma node 107:1121 «Главная_Блок1» (320×408)

   На десктопе шесть карточек в четырёх колонках, на мобилке — сетка 2×2 из
   четырёх: «территория» и «патенты» в мобильном макете отсутствуют, а
   порядок оставшихся другой. Колонки-обёртки убираем через display:contents,
   карточки становятся прямыми ячейками грида и раскладываются по order.
   ========================================================================== */
.stats {
  padding-top: 60px; /* Figma: единый интервал 60 между блоками главной */
}

.stats__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stats__col--split {
  display: contents;
}

.stats__col {
  flex: none;
}

.stats__card,
.stats__card--big {
  height: 200px;
  padding: 10px;
}

.stats__card--team, .stats__card--projects {
    align-items: center;
}

.stats__card--territory,
.stats__card--patents {
  display: none;
}

.stats__card--items { order: 1; }
.stats__card--team { order: 2; }
.stats__card--projects { order: 3; }
.stats__card--production { order: 4; }

/* Ширины .stats__card-inner--w150/153/219/201 из style.css перебиваются
   этим правилом (одинаковая специфичность, mobile.css подключён позже) */
.stats__card-inner {
  width: 130px;
  gap: 20px;
}

.stats__number {
  font-size: 60px;
}

.stats__number--big {
  font-size: 60px;
  width: auto;
}

.stats__suffix {
  font-size: 22.5px;
}

.stats__label {
  font-size: 24px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.6);
  white-space: normal;
  /* В макете все подписи занимают две строки (у односложных вторая пустая) —
     иначе центрированный по вертикали контент карточки поедет вверх */
  min-height: 45px;
}

/* Figma: подписи сдвинуты вправо на 10, кроме «производства» */
.stats__label--pl5 { padding-left: 0; }
.stats__label--pl10,
.stats__label--pl15 { padding-left: 10px; }

/* ==========================================================================
   Главная. Персонализированный портал — Figma node 107:1148 (320×526)

   На десктопе это карточка внутри героя, на мобилке — самостоятельный блок
   между цифрами и «Проектами». Узел переносит mobile.js: CSS переставить
   элемент между секциями не может.
   ========================================================================== */
.hero__portal {
  width: auto;
  margin: 60px 27.5px 0;
  gap: 28px;
}

/* В макете карточка портала без плашки и паддингов, во всю ширину минус 20 */
.hero__portal-card {
  width: 300px;
  padding: 0;
  gap: 24px;
  background: none;
}

.hero__portal-title {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 33px;
  padding-bottom: 12px; /* как у .hero__subtitle: в макете блок 78 при двух строках по 33 */
}

.hero__cta-card {
  height: 200px;
  padding: 40px 20px;
  justify-content: center; /* Figma: контент по центру плашки, а не под верхним паддингом */
}

/* В мобильном макете плашка сплошная, без паттерна */
.hero__cta-pattern {
  display: none;
}

/* Figma: строка с менеджером 270 (аватар 50 + 16 + подпись 204) */
.hero__manager {
  width: 270px;
}

.hero__manager-info {
  flex: 1;
  gap: 20px;
}

/* ==========================================================================
   Главная. Проекты — Figma node 107:1175 «Проекты» (375×845)

   Десктоп показывает один слайд целиком (фото + описание + таблица
   параметров), мобилка — колоду фотокарточек с заголовком/городом поверх
   фото и без описания. Переиспользуем ту же карусель (.portfolio-slider,
   data-carousel/data-track из main.js, те же 5 слайдов и те же стрелки) —
   меняется только то, что видно внутри каждого слайда.

   Упрощение: в макете у первой карточки виден «выглядывающий» край
   следующей (peek), но JS двигает трек ровно на 100% ширины вьюпорта —
   переделывать carousel.js ради 16px подсказки не стали, карточка занимает
   вьюпорт целиком, без peek.
   ========================================================================== */
.portfolio {
  margin-top: 60px;
}

.portfolio-inner {
  gap: 0;
}

.portfolio__head {
  display: none;
}

.portfolio__mob-title {
  display: block;
  margin: 0 27.5px 32px;
  font-size: 30px;
}

.portfolio-slide {
  padding: 0 27.5px;
}

.portfolio-slide__info,
.portfolio-slide__dots {
  display: none;
}

.portfolio-slide__photo {
  width: 100%;
  height: 525px;
}

.portfolio-slide__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 32.58%);
  pointer-events: none;
}

.portfolio-slide__badge {
  display: flex;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  background: #E2480A;
  color: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-slide__mob-info {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 32px;
}

.portfolio-slide__mob-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 33px;
  color: #fff;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.portfolio-slide__mob-arrow {
  width: 20px;
  height: 21px;
}

.portfolio-slide__mob-city {
  margin-top: 12px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  color: #fff;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Стрелочки под карточкой: кнопки занимают по половине строки, а значок
   остаётся в исходных пропорциях SVG при любой ширине кнопки. */
.slide-arrows {
  position: static;
  width: 100%;
  height: auto;
  margin-top: 12px;
  padding: 0 27.5px;
  gap: 8px;
}

.slide-arrow {
  flex: 1 1 0;
  width: auto;
  height: 50px;
}

.slide-arrow[data-arrow="next"] .slide-arrow__icon--default {
  opacity: 0;
}

.slide-arrow[data-arrow="next"] .slide-arrow__icon--hover {
  opacity: 1;
}

.portfolio-slider .slide-arrow,
.champions-slider .slide-arrow {
  box-sizing: border-box;
  border: 1px solid rgba(81, 107, 67, 0.8);
  background: #fff;
}

.portfolio-slider .slide-arrow[data-arrow="next"],
.champions-slider .slide-arrow[data-arrow="next"] {
  border-color: #516B43;
  background: #516B43;
}

.portfolio-slider .slide-arrow__icon,
.champions-slider .slide-arrow__icon {
  display: none;
}

.portfolio-slider .slide-arrow::after,
.champions-slider .slide-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../img/btn-arrow-glyph-green.944e290982e7.svg") center / 100px 50px no-repeat;
}

.portfolio-slider .slide-arrow[data-arrow="next"]::after,
.champions-slider .slide-arrow[data-arrow="next"]::after {
  background-image: url("../img/btn-arrow-glyph-white.aec53c461038.svg");
}

.portfolio__mob-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  margin: 12px 27.5px 0;
  background: #516B43;
  color: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 50px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.portfolio__mob-all img {
  width: 12px;
  height: 12px;
}

.logos {
  margin-top: 60px;
}

.logos__viewport.is-autoplay,
.awards__viewport.is-autoplay {
  --strip-fade: 32px;
}

/* ==========================================================================
   Главная. Каталог — Figma node 107:1451 «Каталог» (375×868)

   Десктоп: сетка 4×2, первая карточка на 2 строки слева, плашки — сплошные
   кнопки (фон+белый текст). Мобилка: сетка 2 колонки (первая карточка на всю
   ширину сверху), плашки — просто цветной текст+стрелка без фона (цвет
   совпадает с .catalog__badge--orange/дефолтным зелёным). Разметка карточек
   та же (.catalog__card/__badge/__badge-text), меняются только их стили —
   кроме стрелки: белая desktop-иконка на фото без плашки была бы невидима,
   поэтому у каждой плашки лежит вторая, цветная (icon-badge-arrow-orange
   /green.svg, Figma node I107:1457/1458;...:1134), досктопная прячется.
   ========================================================================== */
.catalog {
  margin-top: 60px;
  padding: 40px 0;
  background: #FBF8F4;
}

.catalog-inner {
  gap: 0;
}

.catalog__title {
  display: none;
}

.catalog__mob-title {
  display: block;
  align-self: flex-start;
  margin-bottom: 32px;
  font-size: 30px;
}

/* Figma: 32 между заголовком и сеткой, но всего 24 между сеткой и кнопками —
   не единый gap, поэтому нижний отступ навешен на сетку, а не на inner */
.catalog__grid {
  margin-bottom: 24px;
}

.catalog__grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: none;
  gap: 8px;
  width: 100%;
  height: auto;
}

.catalog__card--tall {
  grid-column: 1 / -1;
  grid-row: auto;
}

.catalog__card {
  height: 128px;
  padding: 12px;
}

.catalog__badge {
  height: auto;
  padding: 0;
  gap: 8px;
  background: none;
  color: #516B43;
}

.catalog__badge--orange {
  background: none;
  color: #E2480A;
}

.catalog__badge-text {
  font-size: 18px;
  line-height: 12px;
  color: inherit;
}

.catalog__badge-arrow {
  display: none;
}

.catalog__badge-arrow-mob {
  display: block;
  width: 11px;
  height: 11px;
}

.catalog__actions {
  flex-direction: column;
  gap: 12px;
}

.catalog__action,
.catalog__action--pdf,
.catalog__action--quote,
.catalog__action--custom {
  width: 100%;
  padding: 0;
}

/* Figma: оранжевая кнопка идёт первой, за ней два аутлайна — в DOM
   (общем для десктопа) порядок другой, здесь его меняет только order */
.catalog__action--custom {
  order: -1;
}

.catalog__action--custom .catalog__action-icon {
  display: none;
}

/* ==========================================================================
   Главная. Каталог, вариант 2 (.catalog-v2, node 107:1451) — переиспользует
   .catalog-inner/.catalog__grid/.catalog__card--tall/.catalog__actions*
   (уже адаптированы выше для v1), но свои карточки/лейблы — .catalog2__*,
   без адаптации раньше не было вообще.
   ========================================================================== */
.catalog-v2 {
  margin-top: 60px;
  padding: 40px 0;
}

/* Персона-страницы: десктопная фото-плитка (v1) на мобилке заменяется
   сеткой варианта 2 (Figma 107:2560) — та же разметка, что на Главной */
.catalog__grid--mob {
  display: grid;
}

.catalog-inner:has(.catalog__grid--mob) > .catalog__grid:not(.catalog__grid--mob) {
  display: none;
}

.catalog2__card {
  height: 128px;
  padding: 12px;
}

/* Плашки карточек v2 на мобилке зелёные (Figma I107:1458;3198:1133 —
   fill #516B43), десктопная чёрная стрелка меняется на зелёную */
.catalog2__label-text {
  color: #516B43;
}

.catalog2__label-icon {
  display: none;
}

.catalog2__label-icon--mob {
  display: block;
  width: 11px;
  height: 11px;
}

/* Первая карточка: на десктопе она вертикальная 2×1, на мобилке широкая
   320×128 — у Figma-инстанса свой imageTransform
   [[1.5815,0,-0.6784],[0,0.8040,0]] → left 42.9%, top 0, w 63.2%, h 124.4% */
.catalog2__img--1 {
  left: 42.9%;
  top: 0;
  width: 63.2%;
  height: 124.4%;
}

/* ==========================================================================
   Главная. Награды — Figma node 107:1475 «Награды» (375×793)

   Объединяет два десктопных section: .champions (слайдер) и .awards (лента
   логотипов) — на мобилке между ними просто общий ритм 60px, разметку не
   сливаем. Слайдер — та же карусель/те же 5 слайдов, что на десктопе,
   фото+инфопанель заменяются фото+кремовой карточкой (Figma: 262.5+262.5).
   Стрелки уже стилизованы под мобилку общим правилом .slide-arrows/
   .slide-arrow (см. блок «Проекты» — оба слайдера используют одни классы).

   Упрощение: в макете первые 3 карточки несут доп. плашку с логотипом
   награды поверх фото (у остальных её нет вовсе) — как и peek в «Проектах»,
   решили не тащить: несогласованная деталь ради 3 из 5 карточек.
   ========================================================================== */
.champions {
  margin-top: 60px;
}

.champions-inner {
  gap: 32px;
}

.champions__title {
  display: none;
}

.champions__mob-title {
  display: block;
}

.champions-slide {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.champions-slide__info {
  display: none;
}

.champions-slide__photo {
  flex-shrink: 1;
  width: 100%;
  height: 262.5px;
}

.champions-slide__mob-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 262.5px;
  padding: 30px;
  background: #FBF8F4;
}

.champions-slide__mob-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 33px;
  color: #000;
  text-transform: uppercase;
}

.champions-slide__mob-arrow {
  width: 20px;
  height: 21px;
}

.champions-slide__mob-city {
  margin-top: 12px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  color: #000;
  text-transform: uppercase;
}

.champions-slide__mob-text {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.champions-slide__mob-text p {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* .slide-arrows (см. блок «Проекты») подгоняет отступ под свой .container--
   wide без внутреннего padding — здесь слайдер уже внутри .container
   (padding 27.5 с обеих сторон даёт нужные 320), вторая порция набила бы
   отступ дважды */
.champions-slider .slide-arrows {
  padding: 0;
}

/* --- Лента наград — Figma node 107:1713, те же 9 карточек, что в .awards,
   просто уменьшенные: обёртка задаёт целевой размер (135.5×60), а сама
   .awards__card внутри — transform:scale, чтобы не пересчитывать вручную
   все object-position/кропы 9 разных лого. Масштаб взят по высоте
   (60/116), т.к. вертикальный ритм важнее точной ширины декоративной
   ленты. --- */
.awards {
  margin-top: 60px;
}

.awards__track {
  gap: 26px;
  padding: 10px 2px;
}

.awards__card-mob {
  display: block;
  flex-shrink: 0;
  width: 135.5px;
  height: 60px;
  overflow: hidden;
}

.awards__card-mob .awards__card {
  transform: scale(0.5172);
  transform-origin: top left;
  box-shadow: none;
}

/* ==========================================================================
   Главная. География — Figma node 107:1827 (375×687.6)

   Живая Yandex-карта (map.js) остаётся как есть — она уже тянется на всю
   ширину и поддерживает нативный тач-пан, поэтому декоративный скролл-бар
   под картой (Figma «строка», просто полоска-индикатор) на мобилке не
   воспроизводим — это дублирующая подсказка поверх уже работающего жеста.
   Разметка карточки/кнопки с десктопа не меняется, только размеры/позиция.
   ========================================================================== */
.map-section {
  margin-top: 60px;
}

.map-section__title {
  margin-bottom: 35px;
}

.map-section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* В макете 535 и фильтра городов нет; фильтр вернули по просьбе заказчика
   (2026-10-01), высоту карты и отступ карточки он подобрал сам: 560 / 86. */
.map-section__map {
  width: 100%;
  height: 560px;
  overflow: hidden; /* тайлы Яндекс.Карт рендерятся за пределы контейнера
    (нормально при overflow:visible на десктопе) — на узком мобильном
    вьюпорте это давало горизонтальный скролл всей страницы */
}

.map-city-filter {
  top: 16px;
  left: 27.5px;
}

.map-widget {
  left: 50%;
  top: 86px; /* под фильтром городов, см. .map-section__map */
  width: min(288px, calc(100% - 55px));
  transform: translateX(-50%);
  padding: 24px;
  gap: 24px;
}

/* Карточка проекта по мобильному макету (node 5561:15117, 288×445,
   padding/gap 24): название → фото 172 → подписи НАД значениями
   (строка — колонка с gap 6, между строками 12) → «подробнее» по центру.
   Порядок строк в макете: место, год, архитектура — в разметке год идёт
   первым (так на десктопе), поэтому order. */
.map-widget__brand {
  width: 100%;
  gap: 12px;
}

.map-widget__name {
  line-height: 22px;
}

.map-widget__body {
  gap: 24px;
}

.map-widget__photo {
  height: 172px;
}

.map-widget__details {
  gap: 12px;
}

.map-widget__row,
.map-widget__row--wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.map-widget__row:has([data-widget-location]) {
  order: -1;
}

.map-widget__label {
  width: auto;
  font-size: 12px;
  line-height: 12px;
}

.map-widget__value {
  font-size: 14px;
  line-height: 14px;
}

.map-widget .slide-more {
  align-self: center;
}

.map-widget .slide-more__text {
  font-size: 16px;
}

/* Крестик масштабирован пропорционально карточке (288px вместо 380px
   десктопных, ~0.76) — отдельного мобильного узла под него в Figma нет. */
.map-widget__close {
  width: 48px;
  height: 47px;
}

.header__cta-btn {
  justify-content: center;
}

.map-section__cta {
  position: static;
  width: 320px;
  max-width: calc(100% - 55px); /* инсет 27.5 при вьюпорте уже 375 */
  margin: 28px 0 0;
}

/* ==========================================================================
   Главная. Свой подход — Figma node 107:1919 (320×762)

   Десктоп — текстовые ссылки-пилюли в ряд, мобилка — стопка из 5 строк
   «фото + подпись». Фото переиспользованы 1:1 с готовых hero-фонов
   персона-страниц (архитекторы/девелоперы/гос.заказчик/ген.подрядчики —
   те же файлы, что в architects.html и т.д.), для дилеров/представителей
   экспортирован недостающий кадр (dealers-hero-bg.jpg). Порядок пунктов
   в макете другой (гос.заказчики перед ген.подрядчиками) — воспроизведён
   как есть, а не «исправлен» под десктопный порядок.
   ========================================================================== */
.categories {
  margin-top: 60px;
}

.categories-inner {
  gap: 0;
  align-items: stretch;
}

.categories__title {
  display: none;
}

.categories__mob-title {
  display: block;
  margin-bottom: 16px;
}

.categories__mob-title p:first-child {
  color: #E2480A;
}

.categories__row {
  display: none;
}

.categories__mob-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.categories__mob-photo {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.categories__mob-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 12px;
  text-transform: uppercase;
  color: #8E9B70;
}

.categories__mob-link img {
  width: 11px;
  height: 11px;
}

/* ==========================================================================
   Главная. Тайга — сплав инженерии — Figma node 107:1953 (375×817)

   Контент 1:1 с десктопным .about-banner (тот же заголовок с <span>,
   то же фото) — меняется только раскладка (фото сверху, блок под ним
   вместо ряда) и кнопки: в макете это полноразмерные .hero__mob-btn
   (как на герое), а не десктопные текстовые ссылки со стрелкой.
   ========================================================================== */
.about-banner {
  margin-top: 60px;
}

.about-banner__inner {
  flex-direction: column;
  height: auto;
  gap: 0;
  max-width: none;
}

.about-banner__photo {
  width: 100%;
  height: 550px;
}

.about-banner__photo img {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.about-banner__content {
  padding: 32px 27.5px 0;
  width: 100%;
  gap: 24px;
}

.about-banner__heading {
  font-size: 30px;
  line-height: 33px;
}

.about-banner__links {
  display: none;
}

.about-banner__mob-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   Главная. Патенты — Figma node 107:1962 (340×625)

   Заголовок и цитата — те же узлы, что на десктопе (текст совпадает
   дословно). Карточка «200+» на мобилке из зелёной сплошной (десктоп)
   становится двумя кремовыми ячейками — тот же визуальный рецепт, что у
   .stats__card на главной, поэтому просто новые классы с теми же числами
   (60px число, 24px подпись). Основной текст на мобилке — только первый
   из трёх абзацев (так обрезано в самом макете, box с фиксированной
   высотой и Figma-текст обрывается ровно на конце первого предложения).
   ========================================================================== */
.patents {
  margin-top: 60px;
}

.patents-inner {
  gap: 0;
}

.patents__mob-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  margin-top: 24px;
  width: 100%;
}

.patents__mob-cell {
  height: 200px;
  padding: 46px 15px 15px 15px;
  background: #FBF8F4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.patents__mob-cell.jc-end {
  justify-content: flex-end;
}

.patents__mob-number {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 60px;
  color: #516B43;
  text-transform: uppercase;
}

.patents__mob-number-label {
  margin-top: 0px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

.patents__mob-desc {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 15.4px;
  color: rgba(0, 0, 0, 0.6);
  text-align: right;
}

.patents__row {
  margin-top: 32px;
  flex-direction: column;
}

.patents__col {
  width: 100%;
  height: auto;
  gap: 0;
}

/* Figma node 107:1979 показывает только первый абзац с «…». Полный текст
   тот же, что на десктопе: свёрнут до первого абзаца и раскрывается по тапу
   (initExpandableText в mobile.js — он же анимирует высоту). */
.patents__text {
  display: block;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.patents__text p {
  font-size: 14px;
  line-height: 18px;
}

.patents__text p + p {
  margin-top: 12px;
}

.patents__text:not(.is-expanded) p + p {
  display: none;
}

.patents__text:not(.is-expanded) p:first-child::after {
  content: '\2026';
}

.patents__quote {
  margin-top: 32px;
  height: auto;
  padding: 0 0 0 20px;
}

.patents__quote p {
  font-size: 24px;
  line-height: 26.4px;
}

.patents__card {
  display: none;
}

/* ==========================================================================
   Главная. Новости — Figma node 107:1982 (375×1615)

   Кремовая полоса, как у Каталога (padding 40/60 сверху, фон FBF8F4).
   Показаны первые 2 из 6 карточек — Figma-макет физически влезает только
   2 (остальные 4 не куда-то делись, просто их не показывают на мобильном
   макете); кнопки те же .news__action, только в столбик и в другом
   порядке (заливка первой — через order, DOM не трогаем).
   ========================================================================== */
.news {
  margin-top: 60px;
  padding: 40px 0;
  background: #FBF8F4;
}

/* Внутри .news уже есть свой нижний padding (40px) — общий .footer
   {margin-top:60px} поверх него даёт двойной разрыв, которого нет
   в мобильном Figma (.news примыкает к футеру без зазора). */
.news + .footer {
  margin-top: 0;
}

.news-inner {
  gap: 32px;
  align-items: stretch;
}

.news__body {
  align-items: stretch;
  gap: 32px;
}

.news__grid {
  grid-template-columns: 1fr;
  row-gap: 32px;
}

.news__grid article:nth-child(n+3) {
  display: none;
}

.news-card__photo {
  width: 100%;
  height: 200px;
}

.news-card__excerpt {
  font-size: 14px;
  line-height: 20px;
}

.news__actions {
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.news__action {
  width: 100%;
}

.news__action--filled {
  order: -1;
}

/* ==========================================================================
   Подвал — Figma taiga_brand-components 5538:11959 (375×1218)

   Та же разметка, что на десктопе, разворачивается в одну ленту
   (контент 326, шаг 40 между блоками): логотип → колонки ссылок → линия →
   Связаться (+ «Звонок бесплатный») → Адрес → Соцсети (+ сноска) →
   юридические ссылки в самом низу. Обёртки — display:contents, порядок —
   order.
   ========================================================================== */
.footer {
  margin-top: 60px; /* Figma: тот же ритм 60px, что и между всеми блоками главной */
}

.footer__inner {
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  width: auto;
  padding: 24px 24.5px 60px;
}

.footer__left {
  display: contents;
}

.footer__brand {
  order: 1;
  min-height: 110px; /* фрейм логотипа в макете — 110 при содержимом 87.5 */
}

.footer__right {
  order: 2;
  width: auto;
  height: auto;
  gap: 40px;
}

.footer__legal {
  order: 3;
  gap: 16px;
}

.footer__legal a {
  font-size: 16px;
}

/* --- колонки ссылок: три столбца по краям 326, линия на 26 ниже самого
   длинного (фрейм колонок 342 при содержимом 326, + gap 10) --- */
.footer__top {
  height: auto;
  gap: 26px;
}

.footer__columns {
  justify-content: space-between;
  gap: 0;
}

.footer__col {
  width: auto;
  gap: 40px;
}

.footer__col--catalog {
  width: 98px;
}

.footer__col-title {
  font-size: 20px;
  line-height: 0.7;
  text-box-trim: none;
}

.footer__catalog-lists {
  flex-direction: column;
  gap: 16px;
}

.footer__catalog-lists > .footer__col-list:first-child {
  width: auto;
}

.footer__col-list {
  gap: 16px;
}

.footer__col-list a {
  font-size: 12px;
  line-height: 10px;
  text-box-trim: none;
}

/* «Спортивное / Сюжетное оборудование», «Индивидуальная разработка» в
   столбце 98 переносятся на две строки — у них в макете межстрочный 14.
   Два класса в селекторе — иначе .footer__col-list a перебивает. */
.footer__col-list a.footer__wrap-link {
  white-space: normal;
  line-height: 14px;
}

/* В макете мобилки «Информация» идёт в порядке О компании, Проекты,
   Контакты (на десктопе Проекты первыми). */
.footer__link-about {
  order: -1;
}

/* --- контакты: сетка десктопа становится лентой --- */
.footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  padding: 0;
}

.footer__contact--call { order: 1; }
.footer__note--call { order: 2; }
.footer__contact--address { order: 3; }
.footer__contact--social { order: 4; }
.footer__note--insta { order: 5; }

/* «Звонок бесплатный» и сноска в макете — 20 под своим блоком, а не 40 */
.footer__note--call,
.footer__note--insta {
  margin-top: -20px;
}

.footer__contact-title {
  font-size: 20px;
  line-height: 0.7;
  text-box-trim: none;
}

.footer__contact-lines {
  gap: 12px;
}

.footer__contact-lines a,
.footer__address {
  line-height: 1.1;
  text-box-trim: none;
}

.footer__address {
  white-space: normal;
}

.footer__br-desk {
  display: none;
}

.footer__social-links {
  grid-template-columns: 93px 93px;
  column-gap: 60px;
  row-gap: 20px;
}

.footer__note {
  text-box-trim: none;
}

.footer__note--call {
  font-size: 16px;
  line-height: 10px;
}

.footer__note--insta {
  width: auto;
  font-size: 10px;
  line-height: 1.1;
}

/* ==========================================================================
   ==========================================================================
   СТРАНИЦА «АРХИТЕКТОРАМ» (architects.html) — Figma node 107:2041
   Общий шаблон для 3 остальных персона-страниц (Девелоперам/Гос.заказчику/
   Ген.подрядчикам, node 107:2659/107:3275/107:3893) — те переиспользуют
   ЭТИ ЖЕ классы, меняются только тексты/фото через свой page.css.
   ==========================================================================
   ========================================================================== */

/* Хлебные крошки — общий компонент (architects.css), используется и на
   персона-страницах (там hero начинается сразу с y=0, крошки в мобильном
   макете отсутствуют — скрыты через .is-persona-page на <body>), и на
   Проектах/Странице проекта/Каталоге (там ОСТАЮТСЯ видны, см. ниже) —
   поэтому НЕ прячем класс целиком, только персона-страницы. */
body.is-persona-page .arch-crumbs {
  display: none;
}

.arch-crumbs {
  margin-top: 20px !important; /* инлайн margin-top у каждой страницы свой десктопный — на мобилке везде один и тот же малый отступ */
  padding: 0 27.5px; /* десктопный padding — calc((100% - 1200px) / 2), на мобилке уходит в 0/минус, крошки лепятся к левому краю */
  gap: 8px;
  font-size: 14px;
}

/* ==========================================================================
   ==========================================================================
   СТРАНИЦА «ПРОЕКТЫ» (projects.html) — Figma node 107:6296
   ==========================================================================
   ========================================================================== */
.proj-filter {
  margin-top: 32px;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.proj-filter::-webkit-scrollbar {
  display: none;
}

.proj-search {
  flex-shrink: 0;
  height: 40px;
}

.proj-search__input {
  font-size: 14px;
  line-height: 40px;
}

.proj-filter__item {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.proj-case,
.proj-grid {
  display: none;
}

.proj-mob-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.proj-mob-card {
  display: block;
}

.proj-mob-media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.proj-mob-card--tall .proj-mob-media {
  height: 525px;
}

.proj-mob-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-mob-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  background: #E2480A;
  color: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.proj-mob-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 33px;
  color: #000;
  text-transform: uppercase;
}

.proj-mob-arrow {
  flex: none !important;
  width: 20px !important;
  height: 21px !important;
}

.proj-mob-city {
  margin-top: 8px;
  font-family: 'DINPro Cond Light', 'Inter', Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 22px;
  color: #000;
  text-transform: uppercase;
}

/* Награды + лого партнёров (Figma node 107:6397) — на десктопе этой
   страницы блока нет вообще (спрятан в общем hidden-списке в начале
   файла через body.is-projects-page), тут возвращаем на мобилке. Оба
   компонента переиспользованы 1:1 с Главной — .awards/.awards__card-mob
   уже даёт нужные 135.5×60 карточки и 60px верхний отступ безо всяких
   правок, .logos тоже готов, нужен только зазор между ними (32px). */
body.is-projects-page .awards,
body.is-projects-page .logos {
  display: block;
}

body.is-projects-page .awards + .logos {
  margin-top: 32px;
}

.proj-cta {
  margin-top: 40px;
  align-items: flex-start;
  gap: 40px;
  padding: 60px 40px;
}

.proj-cta__head {
  align-items: flex-start;
  gap: 32px;
  text-align: left;
}

.proj-cta__eyebrow {
  /* Figma 107:6716 — DINPro Regular, не Medium */
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

.proj-cta__title {
  font-size: 30px;
  line-height: 33px;
}

.proj-cta__title em {
  font-style: normal;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  color: #E2480A;
}

.proj-cta__subtitle {
  font-size: 14px;
  line-height: 18px;
  text-transform: none;
}

/* Кнопки вылезают из 40px-паддинга секции: Figma 107:6720 — 320px при
   инсете 27.5px, тогда как текст сидит на 40px. */
.proj-cta__actions {
  width: calc(100% + 25px);
  margin: 0 -12.5px;
  flex-direction: column;
  gap: 12px;
}

.proj-cta__btn {
  width: 100%;
  padding: 0 24px;
  line-height: 50px;
  letter-spacing: 0;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
}

/* ==========================================================================
   ==========================================================================
   СТРАНИЦА ПРОЕКТА (project.html) — Figma node 107:4509
   ==========================================================================
   ========================================================================== */
/* Крошки тут мельче, чем на Проектах (Figma node 107:4515: size 12,
   не капс) — .arch-crumbs общий класс, трогать его дефолт нельзя (жив
   на Проектах с другим размером), переопределяем только для этой
   страницы. */
body.is-project-detail-page .arch-crumbs {
  font-size: 12px;
  text-transform: none;
}

/* Figma node 4605:14805 (Frame 42530789): 340px, а не 320 из .container —
   выходит за обычный инсет контейнера на 10px с каждой стороны. Именно
   поэтому margin отрицательный, а не width:340px — так ширина всё равно
   пропорционально сужается на экранах у́же 375 (как и должно). */
.pd-hero {
  margin-top: 20px;
  margin-left: -10px;
  margin-right: -10px;
  gap: 0px;
}

.pd-hero__media {
  height: 525px;
  padding: 16px 0 0 16px;
}

.proj-case__badge {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
}

.pd-hero__title {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  padding-top:20px;
}

.pd-hero__city {
  display: block;
  margin-top: 8px;
  font-family: 'DINPro Cond Light', 'Inter', Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 22px;
  color: #000;
  text-transform: uppercase;
}

/* Figma node 4605:14804 (Frame 42530795): hero/таблица/описание — три
   прямых сиблинга с общим gap 40 (не 60), а таблица+описание сами по
   себе 300px (не 320 из .container) — центрируем через margin auto. */
.pd-meta {
  width: 300px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
}

.pd-meta__table {
  width: auto;
  height: auto;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

.pd-meta__labels,
.pd-meta__values {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-meta__labels {
  width: 132px;
  font-size: 14px;
}

.pd-meta__values {
  width: 153px;
  font-size: 14px;
}

.pd-meta__labels p,
.pd-meta__values p {
  line-height: 18px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Ряды (project.css: .pd-meta__row заменил старую двухколоночную
   конструкцию выше, но правил под мобилку для новых классов не завели —
   .pd-meta__label оставался десктопным 225px, а .pd-meta__value без
   overflow-wrap не мог перенести длинное слово ("Екатеринбург") и вылезал
   за экран. Ширина/шрифт лейбла — те же числа, что у старых
   .pd-meta__labels/.pd-meta__values выше, просто под новую разметку. */
.pd-meta__row {
  gap: 15px;
}

/* project.css задаёт .pd-meta__table:has(.pd-meta__row){gap:0} для
   десктопа БЕЗ media-запроса — та же specificity (0,2,0), выигрывает
   по порядку подключения. mobile.css теперь грузится последней, поэтому
   это же правило здесь перебивает десктопное на мобилке (Figma: 16px
   между рядами). */
.pd-meta__table:has(.pd-meta__row) {
  gap: 16px;
}

.pd-meta__label {
  width: 132px;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.pd-meta__value {
  font-size: 14px;
  line-height: 18px;
  overflow-wrap: break-word;
}

.pd-meta__text {
  width: 100%;
  font-size: 14px;
}

.pd-meta__text p {
  line-height: 18px;
}

/* Галерея (Figma node 107:4539): 5 рядов — одиночная(220) → пара(220
   каждая) → ОДНА высокая(440) → одиночная(220) → пара(220 каждая), БЕЗ
   формы внутри (та на мобилке — отдельный полноширинный блок ниже, см.
   .pd-form-card и initProjectFormExtract() в mobile.js). Реализовано
   через .pd-gallery-row{display:contents} — распаковывает 3 десктопных
   ряда, их дети (tall/stack) становятся прямыми детьми .pd-gallery и
   получают order/height индивидуально, без переписывания HTML. */
.pd-gallery-section {
  margin-top: 60px;
}

.pd-gallery {
  gap: 12px;
}

.pd-gallery-big {
  order: 1;
  height: 220px;
}

.pd-gallery-row {
  display: contents;
}

/* .pd-gallery-big — тоже div, значит он же первый div-siblings по счёту
   nth-of-type; 3 .pd-gallery-row идут ВТОРЫМ/ТРЕТЬИМ/ЧЕТВЁРТЫМ div-child,
   а не первым/вторым/третьим — индекс со сдвигом +1, отсюда 2/3/4. */
.pd-gallery-row:nth-of-type(2) .pd-gallery-stack {
  order: 2;
}

.pd-gallery-row:nth-of-type(2) .pd-gallery-tall {
  order: 3;
  height: 440px;
}

.pd-gallery-row:nth-of-type(3) .pd-gallery-stack {
  order: 4;
}

.pd-gallery-row:nth-of-type(3) .pd-gallery-tall {
  order: 5;
  height: 220px;
}

.pd-gallery-row:nth-of-type(4) .pd-gallery-tall {
  order: 6;
  height: 220px;
}

.pd-gallery-tall {
  width: 100%;
}

.pd-gallery-stack {
  width: 100%;
  flex-direction: row;
  gap: 12px;
}

.pd-gallery-half {
  height: 220px;
}

/* Форма (Figma node 107:4550) — переехала через JS в отдельную секцию
   ПОСЛЕ галереи (initProjectFormExtract(), тот же приём переноса узла,
   что initPortalPlacement()/initProductMobileReorder()), поэтому тут
   full-bleed кремовый фон на всю ширину экрана, а не карточка внутри
   324px-колонки рядом с фото. */
.pd-form-card {
  width: 100vw;
  margin-top: 60px;
  margin-left: calc(-50vw + 50%);
  height: auto;
  padding: 40px 27.5px;
  box-sizing: border-box;
  background: #FAF8F5;
}

.pd-form-inner {
  width: 100%;
  gap: 32px;
}

.pd-form__title {
  font-size: 30px;
  line-height: 33px;
}

.pd-form__label {
  font-size: 24px;
  line-height: 26.4px;
}

.pd-form__input {
  font-size: 14px;
}

.pd-form__consent {
  gap: 8px;
}

.pd-form__submit {
  height: 50px;
}

.pd-form__contact-label,
.pd-form__contact-phone {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
}

/* Порядок на мобилке (node 107:4677 «проект на карте» + node 107:4670
   «награды»/«публикации») другой, чем на десктопе: бейджи → награды/
   публикации ОДНА ПОД ДРУГОЙ (не в 2 колонки) → заголовок «проект на
   карте» → сама карта на всю ширину экрана. Вместо перестановки HTML —
   flex-колонка с order на прямых детях. */
.pd-awards {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
}

body.is-project-detail-page .pd-awards .awards {
  display: block;
  order: 1;
  margin: 0 0 60px;
}

.pd-awards__cols {
  order: 2;
  margin-top: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  padding: 0;
}

.pd-awards__panel-title {
  display: block;
  order: 3;
  margin-top: 60px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 33px;
  color: #000;
  text-transform: uppercase;
}

.pd-awards__panel {
  order: 4;
  margin-top: 32px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  aspect-ratio: unset;
  height: 220px;
}

.pd-awards__col {
  width: 100%;
  gap: 32px;
}

.pd-awards__col-title {
  font-size: 30px;
  line-height: 33px;
}

.pd-awards__col-text {
  font-size: 14px;
}

.pd-awards__col-text p {
  line-height: 18px;
}

.pd-cta {
  margin-top: 0;
  align-items: flex-start;
  gap: 32px;
  padding: 60px 40px;
}

.pd-cta__head {
  align-items: flex-start;
  gap: 32px;
  text-align: left;
}

.pd-cta__title {
  font-size: 30px;
}

.pd-cta__title-line--italic {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-style: normal;
  color: #E2480A;
}

.pd-cta__subtitle {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 14px;
  text-transform: none;
}

.pd-cta__subtitle p {
  line-height: 18px;
}

.pd-cta__spacer {
  display: none;
}

.pd-cta__subtitle p:has(a) {
  order: -1;
}

.pd-cta__subtitle a {
  text-decoration: none;
}

/* Кнопки шире текстовой колонки: в Figma (107:4689) текст сидит на инсете
   40px, а кнопки — 320px при инсете 27.5px, т.е. вылезают из паддинга
   секции на 12.5px в каждую сторону. */
.pd-cta__actions {
  width: calc(100% + 25px);
  margin: 0 -12.5px;
  flex-direction: column;
  gap: 12px;
}

.pd-cta__actions .proj-cta__btn {
  width: 100%;
  padding: 0 24px;
  line-height: 50px;
  letter-spacing: 0;
}

/* --- Hero (node 107:2043, 375×737) --- */
.arch-hero {
  margin-top: -64px; /* уходит под sticky-шапку, как герой Главной */
  padding: 0;
  height: 667px;
}

.arch-hero__row {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: 100%;
  padding: 0 27.5px 20px;
  justify-content: flex-end;
}

.arch-hero__intro {
  width: 100%;
  align-items: stretch;
  gap: 20px;
}

.arch-hero__text-group {
  align-items: stretch;
  gap: 20px; /* Figma 107:2046 */
}

.arch-hero__eyebrow {
  display: none;
}

.arch-hero__mob-eyebrow {
  display: block;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  text-transform: uppercase;
}

/* Госзаказчику/Генподрядчикам вешают на этот же <p> инлайновый
   style="width:846px" (десктопный фикс переполнения колонки, см.
   [[taiga-arhitektoram]]) — на мобилке инлайн бьёт любое внешнее правило,
   кроме !important; здесь он не нужен вообще (мобильный текст сам
   переносится по 320px), поэтому забиваем. То же для subtitle
   (style="width:598px" у тех же 2 страниц). */
.arch-hero__title {
  width: 100% !important;
  font-size: 38px;
  line-height: 41.8px;
}

.arch-hero__subtitle {
  width: 100% !important;
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

/* Десктопные жёсткие переносы в герое посчитаны под 846/598px колонку —
   на мобилке ломают строки не там, где мобильный макет. Гасим их,
   мобильные переносы (там, где они есть в Figma) размечены .mob-only */
.arch-hero__title br:not(.mob-only),
.arch-hero__subtitle br:not(.mob-only) {
  display: none;
}

.arch-hero__actions {
  margin-top: 12px;
  flex-direction: column;
  gap: 12px;
}

.arch-hero__btn {
  width: 100%;
  justify-content: center;
  padding: 0 24px;
}

.arch-hero__btn-arrow {
  display: none;
}

/* «Смотреть кейсы» в мобильном макете вынесена из фото-героя (Figma
   107:2053 — белая плашка с оранжевой обводкой под фотографией),
   десктопная кнопка внутри .arch-hero__actions прячется */
.arch-hero__btn--outline {
  display: none;
}

.arch-hero__mob-cases {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 20px 27.5px 0;
  background: #fff;
  border: 1px solid #E2480A;
  box-sizing: border-box;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 50px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #E2480A;
}

.arch-hero__stats {
  display: none;
}

/* --- Блок цифр (node 107:2055, 320×408) — отдельно от hero, как на
   Главной портал/цифры: hero -64px под sticky-шапку, цифры идут после,
   уже на белом фоне --- */
.arch-hero__mob-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 60px 27.5px 0;
}

.arch-hero__mob-stat {
  background: #FBF8F4;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Карточка в Figma ровно 200px (107:2056): 40 + 43 (капс числа) + 16 +
   17 (капс подписи) + 16 + 28 (2 строки описания) + 40. Figma меряет
   текст по капслайну, поэтому строки тримятся text-box-trim, иначе
   набегает лишних 57px на карточку. */
.arch-hero__mob-stat-number,
.arch-hero__mob-stat-label,
.arch-hero__mob-stat-desc {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.arch-hero__mob-stat-number {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 70.2px;
  color: #516B43;
  text-transform: uppercase;
  padding-left: 9px;
}

.arch-hero__mob-stat-label {
  padding-left: 10px; /* Figma 107:2061 — подпись и описание с инсетом 10 */
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

.arch-hero__mob-stat-desc {
  padding-left: 10px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 15.4px;
  color: rgba(0, 0, 0, 0.6);
}

/* «Начать/продолжить знакомство» (node 3315:5613, десктоп-only) — в
   мобильном Figma этого блока нет вообще, его роль на мобилке уже играет
   .arch-hero__mob-stats выше. БАГ: блок висел неспрятанным на всех 4
   персона-страницах (desktop width:1200px внутри 375px вьюпорта) —
   давал горизонтальный скролл всей странице и сбивал попадание тапов
   в шапку. Прячем ТОЛЬКО тут, внутри media query — .arch-know остаётся
   голым классом без явного display вне media, поэтому на десктопе
   работает как раньше. */
.arch-know {
  display: none;
}

/* --- Три проблемы (node 107:2074, 300×769) — десктоп абсолютно
   позиционирует icon/title/body/quote внутри .arch-problems__inner
   (см. architects.css); на мобилке та же плоская группа детей превращена
   в CSS-грид 2 колонки (иконка | текстовая колонка), без новых обёрток
   в HTML --- */
.arch-problems {
  margin-top: 60px;
}

.arch-problems__grid {
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}

.arch-problems__col {
  width: 100% !important;
  padding-left: 0 !important;
  border-left: none !important;
}

.arch-problems__inner {
  position: static;
  height: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 24px;
  align-items: start;
}

.arch-problems__icon {
  position: static;
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.arch-problems__quote-title {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  font-size: 24px;
  line-height: 26.4px;
}

/* Десктопный <br> стоит по десктопной ширине колонки (214-279px) — на
   мобильной (257px) с ним текст переносится в 3 строки вместо 2, реальный
   перенос в Figma в другом месте. Прячем <br>, доверяем естественному wrap
   (тот же приём, что и .footer__wrap-link, только в обратную сторону). */
.arch-problems__quote-title br {
  display: none;
}

.arch-problems__body {
  position: static;
  grid-column: 2;
  grid-row: 2;
  width: 100% !important;
  font-size: 14px;
  line-height: 18px;
}

.arch-problems__body br {
  display: none;
}

.arch-problems__quote {
  position: static !important;
  grid-column: 2;
  grid-row: 3;
  width: 100% !important;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.arch-problems__quote br {
  display: none;
}

/* --- Запрос консультации (Figma taiga_brand-components, node 5553:15054,
   375×844) — та же разметка и та же форма, что на десктопе
   (_consultation.html), переложенная в колонку: заголовок → фото →
   переключатель → поля → согласие → кнопка. .arch-consult__body
   распускается (display:contents), чтобы заголовок встал перед фото.
   Ширины из макета: заголовок/фото/переключатель 300, форма 225, фрейм
   375 — отсюда боковой отступ (375 − 300) / 2. --- */
.arch-consult.container {
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 60px;
  padding: 40px 37.5px;
  background: #FBF8F4;
}

.arch-consult__body {
  display: contents;
}

.arch-consult__head {
  order: -1;
  max-width: 300px;
}

/* Vertical trim: Cap height в макете — фрейм заголовка 300×54, а не 66. */
.arch-consult__title {
  font-size: 30px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.arch-consult__title-accent {
  color: #E2480A;
}

.arch-consult__note {
  display: none;
}

.arch-consult__photo {
  width: 100%;
  max-width: 300px;
  height: 220px;
}

.arch-consult__form {
  align-items: center;
  gap: 20px;
  max-width: 300px;
}

.arch-consult__switch {
  flex-direction: column;
  gap: 8px;
}

/* Высота 50 фиксирована макетом, а «конструкторская и проектная
   документация» в 300px переносится на 2 строки — поэтому без
   вертикальных паддингов, текст просто по центру. */
.arch-consult__switch-btn,
.arch-consult__switch-btn:nth-child(n) {
  width: 100%;
  padding: 0 15px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}

/* В макете форма 225, но по просьбе заказчика (2026-10-01) — по ширине
   плашек-переключателя, 300 (ширину задаёт .arch-consult__form). */
.arch-consult__fields {
  gap: 14px;
}

/* У полей в макете нет заливки — сквозь них фон секции #FBF8F4. */
.arch-consult__input {
  height: 50px;
  background: transparent;
}

.arch-consult__row {
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}

.arch-consult__consent {
  align-items: flex-start;
}

/* Зазор вокруг отметки — цвета фона секции, а не белый (architects.css). */
.arch-consult__consent input:checked {
  box-shadow: inset 0 0 0 4px #FBF8F4;
}

.arch-consult__submit {
  width: 100%;
}

/* --- Партнёр, не поставщик (node 107:2121, 320×1277) --- */
.arch-partner {
  margin-top: 60px;
}

.arch-partner__row {
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
}

.arch-partner__intro {
  width: 100%;
  gap: 16px;
}

.arch-partner__heading {
  width: 100%;
  gap: 16px;
}

/* Гос.заказчику вешает инлайн style="width:564px" на сам заголовок — то же
   переполнение, что и у arch-hero__title, тот же !important-фикс */
.arch-partner__title {
  width: 100% !important;
}

.arch-partner__eyebrow {
  font-size: 14px;
  line-height: 1;
}

.arch-partner__text {
  font-size: 14px;
  line-height: 18px;
}

.arch-partner__features {
  width: 100%;
  gap: 28px;
}

/* Десктоп группирует пары рядами (Проектирование+Кастом /
   Индивидуальное решение+Техчасть) — мобильный порядок другой (1,2,3,4
   подряд), поэтому строки разворачиваются в одну колонку через
   display:contents, а фактический порядок задаёт order на самих карточках */
.arch-partner__feature-row {
  display: contents;
}

.arch-partner__feature {
  width: 100%;
}

/* Только для страниц, где десктоп парит фичи НЕ по порядку (сейчас —
   только Архитекторам, см. модификатор --reorder в HTML) — у остальных
   персона-страниц пары уже 1+2/3+4, естественный DOM-порядок верен как есть */
.arch-partner__features--reorder .arch-partner__feature-row:nth-child(1) .arch-partner__feature:nth-child(1) { order: 1; } /* Проектирование */
.arch-partner__features--reorder .arch-partner__feature-row:nth-child(2) .arch-partner__feature:nth-child(1) { order: 2; } /* Индивидуальное решение */
.arch-partner__features--reorder .arch-partner__feature-row:nth-child(1) .arch-partner__feature:nth-child(2) { order: 3; } /* Кастом */
.arch-partner__features--reorder .arch-partner__feature-row:nth-child(2) .arch-partner__feature:nth-child(2) { order: 4; } /* Техчасть */

.arch-partner__feature-label {
  font-size: 14px;
}

.arch-partner__feature-line {
  width: 100%;
  margin: 16px 0;
}

.arch-partner__feature-value,
.arch-partner__feature-value[style] {
  width: 100% !important;
  font-size: 18px;
  line-height: 20px;
}

.arch-partner__banner {
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
  padding: 0;
  background: none;
}

.arch-partner__banner-col {
  gap: 20px;
  background: url("../img/pattern_orange.83c1cee4aae9.png") no-repeat #E2480A;
  padding: 24px;
  background-size: auto 380%;
}

.arch-partner__banner-title {
  font-size: 24px;
  line-height: 26.4px;
}

.arch-partner__banner-title p:first-child {
  margin-bottom: 0;
}

.arch-partner__banner-text {
  line-height: 18px;
}

.arch-partner__banner-text p {
  margin-bottom: 0;
}

/* --- Четыре причины (node 107:2144, 320×1348) --- */
.arch-reasons {
  margin-top: 60px;
}

.arch-reasons__head {
  gap: 16px;
}

.arch-reasons__eyebrow {
  font-size: 14px;
  line-height: 17px;
}

.arch-reasons__grid {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 32px;
}

/* Figma 107:2149: карточка 320 с текстовой колонкой 250 по инсету 35
   (а не 20 — при 20 строки перестают ложиться так, как в макете) */
.arch-reasons__card {
  min-height: auto;
  padding: 30px 35px;
  gap: 32px;
}

.arch-reasons__card-top {
  align-items: center;
}

.arch-reasons__num {
  font-size: 40px;
  line-height: 47px;
  color: #E2480A;
}

.arch-reasons__tag {
  width: 128px;
  font-size: 14px;
  line-height: 18px;
}

.arch-reasons__card-body {
  gap: 20px;
}

.arch-reasons__card-title {
  font-size: 24px;
  line-height: 26.4px;
}

.arch-reasons__card-text {
  font-size: 14px;
  line-height: 18px;
}

/* --- Гарантия соответствия рендера и результата (node 107:2185, 375×556)
   Мобильный Figma-макет статичный (просто сплит-фото без ручки), но здесь
   уже готов интерактивный drag-компаратор (initCompareSliders в main.js,
   с touch-событиями) — оставляем интерактивность, просто пересчитываем
   геометрию под мобильные пропорции (сплит 217/375=57.87% вместо
   623/1204=51.7%, высота 470 вместо 500). JS двигает divider/after в %,
   ресайз контейнера отрабатывает сам, ничего в main.js менять не нужно. --- */
.arch-guarantee {
  width: 100%;
  margin-top: 60px;
}

.arch-guarantee__title {
  margin: 0 27.5px;
}

.arch-guarantee__compare {
  width: 100%;
  height: 470px;
  margin-top: 32px;
  container-type: inline-size;
}

.arch-guarantee__before {
  width: 57.87%;
  height: 470px;
}

.arch-guarantee__before-frame {
  /* Ширина всего сравнения не зависит от подвижной ширины .before. */
  width: 100cqw;
  height: 470px;
}

.arch-guarantee__after {
  width: 100%;
  height: 470px;
  clip-path: inset(0 0 0 57.87%);
}

.arch-guarantee__divider {
  left: 57.87%;
  height: 470px;
}

.arch-guarantee__handle {
  left: calc(57.87% - 2px);
  top: 177.75px;
}

/* --- Среда, которая работает годами (node 107:2284, 375×845) — десктоп
   статичная галерея (1 featured + грид из 4), мобилка та же колода
   карточек, что «Проекты» на Главной (высоты блоков совпадают 1:1:
   845/759/587/525/50/160/60/50). Новый слайдер (десктоп не имеет
   data-carousel здесь), но переиспользует ту же карусельную инфраструктуру
   main.js и общие .slide-arrows/.slide-arrow/.logos. Секция уже внутри
   .container (27.5 паддинг есть) — в отличие от Портфолио на Главной
   (внутри .container--wide без паддинга), слайдам padding вручную вешать
   не нужно, только у .slide-arrows его нужно СНЯТЬ (см. тот же приём у
   Наград на Главной). --- */
.arch-cases {
  margin-top: 60px;
}

/* В мобильном макете этой строки нет, а без заголовка и слайдера кейсов
   (на мобилке от секции остаётся только лента логотипов) она висела сама
   по себе под «Географией». */
.arch-cases__eyebrow {
  display: none;
}

.arch-cases__head-row,
.arch-cases__featured,
.arch-cases__grid {
  display: none;
}

.arch-cases__mob-title {
  display: block;
  margin-top: 16px;
}

.arch-cases__mob-slider {
  display: block;
  position: relative;
  margin-top: 32px;
}

/* Peek следующей карточки (Figma node 107:2284): вьюпорт вылезает за
   правый край .container-паджинга (слайд 320 + gap 12, следующий слайд
   начинается на 359.5px от левого края при вьюпорте 375 — остаётся
   ~16px следующей карточки видно). Левый инсет не трогаем — он уже даёт
   .container, только правый край вьюпорта уводим до истинного края
   страницы. */
.arch-cases__mob-viewport {
  overflow: hidden;
  width: calc(100% + 27.5px);
  margin-right: -27.5px;
}

.arch-cases__mob-track {
  display: flex;
  gap: 12px;
}

.arch-cases__mob-slide {
  flex: 0 0 320px;
  width: 320px;
}

.arch-cases__mob-photo {
  position: relative;
  width: 100%;
  height: 525px;
  overflow: hidden;
}

.arch-cases__mob-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch-cases__mob-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  background: #E2480A;
  color: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.arch-cases__mob-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 32px;
}

.arch-cases__mob-name {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 33px;
  color: #fff;
  text-transform: uppercase;
}

.arch-cases__mob-arrow {
  flex: none !important;
  width: 20px !important;
  height: 21px !important;
}

.arch-cases__mob-city {
  margin-top: 12px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  color: #fff;
  text-transform: uppercase;
}

.arch-cases__mob-slider .slide-arrows {
  margin-top: 12px;
  padding: 0;
}

/* Стрелки реагируют на реальную границу (JS initBoundedPeekSliders()
   вешает/снимает .is-disabled) вместо общего "next всегда залит" —
   тут карусель НЕ бесконечная, у неё есть настоящие первый/последний
   слайд. .is-disabled = белая/контурная (default-иконка), доступная
   = зелёная залитая (hover-иконка) — те же существующие ассеты
   btn-arrow-prev/next.svg, просто переключаем по классу, а не по :hover. */
.arch-cases__mob-slider .slide-arrow .slide-arrow__icon--default {
  opacity: 1;
}

.arch-cases__mob-slider .slide-arrow .slide-arrow__icon--hover {
  opacity: 0;
}

.arch-cases__mob-slider .slide-arrow:not(.is-disabled) .slide-arrow__icon--default {
  opacity: 0;
}

.arch-cases__mob-slider .slide-arrow:not(.is-disabled) .slide-arrow__icon--hover {
  opacity: 1;
}

.arch-cases__mob-slider .slide-arrow.is-disabled {
  cursor: default;
}

.arch-cases__mob-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  margin-top: 12px;
  background: #516B43;
  color: #fff;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 50px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.arch-cases__mob-all img {
  width: 12px;
  height: 12px;
}

.arch-cases .logos {
  margin-top: 60px;
}

/* --- Всё, что нужно для работы (node 107:2584, 320×902) --- */
.arch-tools {
  margin-top: 60px;
}

.arch-tools__row {
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

.arch-tools__intro {
  width: 100%;
  gap: 32px;
}

/* Гос.заказчику/Генподрядчикам вешают инлайн style="width:492px" — тот же
   !important-фикс, что и у arch-hero__title/arch-partner__title */
.arch-tools__heading {
  width: 100% !important;
  gap: 8px;
}

.arch-tools__eyebrow {
  font-size: 14px;
}

.arch-tools__list {
  width: 100%;
  gap: 0;
}

/* Figma 107:2590: строка 320 с паддингом 15/15/15/25 (контент с отступом
   от края кремовой подложки), иконка 30, gap 24 до текста, внутри текста
   16 между заголовком и описанием, стрелка 15×15 у правого края */
.arch-tools__item {
  position: relative;
  align-items: flex-start;
  gap: 24px;
  padding: 15px 15px 15px 25px;
}

.arch-tools__item-icon {
  width: 30px;
  height: 30px;
}

.arch-tools__item-text {
  width: auto;
  flex: 1;
  gap: 16px;
  padding-right: 24px; /* колонка не должна залезать под стрелку */
}

.arch-tools__item-title {
  font-size: 20px;
  line-height: 22px;
}

.arch-tools__item-desc {
  font-size: 14px;
  line-height: 18px;
}

.arch-tools__item-arrow {
  display: none;
  flex: none;
  width: 15px;
  height: 15px;
}

/* Стрелка в Figma лежит поверх текстовой колонки (та тянется под неё),
   поэтому она вынута из потока — иначе колонка ужимается и текст
   переносится не так, как в макете */
.arch-tools__item-arrow-mob {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
}

/* Десктоп: 2 колонки по высоте (24/7+10лет слева, 800++2часа справа) —
   мобильный порядок построчный (24/7, 800+ / 10 лет, 2 часа), тот же
   приём display:contents + order, что и в стрелках Партнёр-блока */
.arch-tools__stats {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.arch-tools__stats-col {
  display: contents;
}

/* Figma 107:2619: плитка 156×200, контент 130 по центру по вертикали,
   число тримится по капслайну (иначе плитка вырастает до 228) */
.arch-tools__stat {
  width: 100%;
  min-height: 200px;
  justify-content: center;
  padding: 14px 13px;
  background: #516B43 url("../img/footer-bg-pattern.80d705d2e7dd.jpg") center / cover no-repeat;
  gap: 20px;
}

.arch-tools__stats-col:nth-child(1) .arch-tools__stat:nth-child(1) { order: 1; } /* 24/7 */
.arch-tools__stats-col:nth-child(2) .arch-tools__stat:nth-child(1) { order: 2; } /* 800+ */
.arch-tools__stats-col:nth-child(1) .arch-tools__stat:nth-child(2) { order: 3; } /* 10 лет */
.arch-tools__stats-col:nth-child(2) .arch-tools__stat:nth-child(2) { order: 4; } /* 2 часа */

.arch-tools__stat-num,
.arch-tools__stat-desc {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.arch-tools__stat-num {
  font-size: 60px;
  line-height: 70.2px;
}

/* «лет»/«часа» в Figma набраны 24px внутри той же строки числа
   (characterStyleOverrides у 107:2635) */
.arch-tools__stat-unit {
  font-size: 24px;
}

.arch-tools__stat-desc {
  padding-left: 10px; /* Figma 107:2623 */
  font-size: 14px;
  line-height: 15.4px;
  color: #F6F1E9;
}

/* --- CTA «Есть проект?» (node 107:2644, 340×605) --- */
.arch-cta {
  width: 100%;
  margin: 60px 0 0;
  flex-direction: column;
  align-items: stretch;
}

.arch-cta__photo {
  width: 100%;
  height: 220px;
}

/* Ген.подрядчикам держит на этом фото свой процентный crop-хак
   (contractors.css), откалиброванный под десктопную высоту контейнера —
   на мобильных 220px он растягивает кадр. Сбрасываем на тот же
   object-fit:cover, что уже у architects.css для остальных персон. */
.arch-cta__photo img.arch-cta__photo-img--contractors {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch-cta__content {
  width: 100%;
  margin-left: 0;
  gap: 32px;
  padding: 32px 27.5px 0;
}

.arch-cta__copy {
  gap: 32px;
}

.arch-cta__head {
  flex-direction: column;
  gap: 12px;
}

/* width:360px в architects.css подобран под десктопные 56px — на 375
   экране заголовок вылезал за край и давал горизонтальный скролл. */
.arch-cta__title {
  width: auto;
  font-size: 30px;
}

.arch-cta__note {
  text-align: left;
  white-space: normal;
  font-size: 14px;
  line-height: 18px;
}

.arch-cta__text {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
}

.arch-cta__actions {
  flex-direction: column;
  gap: 12px;
}

.arch-cta__btn {
  width: 100%;
  /* Figma 107:2652 — Cond Medium 18/50, а не Cond Regular как на десктопе */
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: 50px;
}

/* ==========================================================================
   СТРАНИЦА «КАТАЛОГ» (catalog-page.html) — Figma node 104:1465 «Каталог»
   (база), 104:1568 «фильтр открытый», 104:1358/124:1423 «выбранные
   позиции» (2 и 3 чипа — второй узел просто показывает перенос чипов на
   вторую строку, не отдельное состояние, взят как справка для flex-wrap).

   .catpg-card* переиспользуются на product.html («с этим товаром
   покупают», другой Figma, ещё не сделан) — поэтому карточки здесь
   переопределены СКОПИРОВАННО под .catpg-grid-wrap (уникален для этой
   страницы), а не голым .catpg-card/.catpg-card__*.

   Панель фильтров у Figma всегда СХЛОПНУТА и открывается кнопкой-воронкой
   у поиска (или закрывается крестиком внутри самой панели) — оба [data-
   catpg-filter-toggle], см. initCatalogFilterToggle() в mobile.js.
   Тулбар вид-плитка/список не показан ни в одном мобильном состоянии —
   скрыт целиком, десктопный ?view=list переключатель на мобилке недоступен.
   ========================================================================== */

/* --- Hero: крошки+заголовок без кремовой подложки/декоративного фото --- */
.catpg-hero-wrap {
  margin-top: 24px;
  position: relative;
}

.catpg-hero {
  background: none;
  padding: 0;
  gap: 16px;
  min-height: 0;
}

.catpg-hero__crumbs {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 18px;
  text-transform: none;
}

.catpg-hero__title {
  width: 100%;
  margin-top: 0;
  font-family: 'DINPro Medium', 'Inter', Arial, sans-serif;
  font-size: 30px;
  line-height: 30px;
  text-transform: uppercase;
}

.catpg-hero__photo {
  display: none;
}

/* --- Поиск + кнопка фильтра (Figma node 104:1481) --- */
.catpg-mob-searchrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.catpg-mob-search {
  flex: 1 0 0;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid #F6F1E9;
  box-sizing: border-box;
}

.catpg-mob-search-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.catpg-mob-search input {
  flex: 1 0 0;
  min-width: 0;
  border: none;
  background: none;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: #000;
}

.catpg-mob-search input::placeholder {
  color: #C6BFAE;
}

.catpg-mob-filter-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E2480A;
  border: none;
  padding: 0;
  cursor: pointer;
}

.catpg-mob-filter-btn img {
  width: 14px;
  height: 14px;
}

/* --- Чипы выбранных фильтров (Figma node 104:1358/124:1423) --- */
.catpg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.catpg-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 31px;
  padding: 0 12px;
  border: 1px solid #E2480A;
  background: none;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: #E2480A;
  white-space: nowrap;
  cursor: pointer;
}

.catpg-chip img {
  width: 11px;
  height: 11px;
}

/* --- Тулбар вид-переключатель — нет ни в одном мобильном Figma-состоянии --- */
.catpg-toolbar {
  display: none;
}

/* --- Тело страницы: сайдбар фильтров становится схлопывающейся полноширинной
   панелью НАД сеткой, а не колонкой сбоку --- */
.catpg-body {
  margin-top: 24px;
  flex-direction: column;
  gap: 0;
}

.catpg-content-col {
  width: 100%;
}

/* --- Панель фильтров: скрыта по умолчанию --- */
.catpg-filters {
  display: none;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 32px;
  padding: 24px 0;
  background: #FEFCF9;
}

.catpg-filters.is-open {
  display: flex;
}

/* Собственный поиск сайдбара скрыт — в мобильном Figma-макете
   раскрытая панель фильтров начинается сразу с "Игровые системы",
   поиск уже есть один раз выше в .catpg-mob-searchrow */
.catpg-filters__search {
  display: none;
}

.catpg-filters__mob-close {
  display: block;
  position: absolute;
  top: 24px;
  right: 0;
  width: 13px;
  height: 13px;
  padding: 0;
  border: none;
  background: url("../img/icon-close-x-orange.3d6684056beb.svg") center / contain no-repeat;
  cursor: pointer;
}

.catpg-filters__panel {
  gap: 32px;
}

.catpg-filters__series-list {
  gap: 16px;
}

.catpg-filters__categories > a:not(.catpg-filters__cat-heading) {
  margin-top: 16px;
}

/* --- Сетка карточек: 2 колонки × 3 ряда — третий десктопный ряд (карточки
   7-9 из 9) скрыт целиком, мобильный Figma показывает только 6 --- */
.catpg-grid-wrap {
  margin-top: 0;
}

.catpg-series {
  margin-top: 0;
}

/* "серия тайга" — в мобильном Figma этого заголовка над сеткой нет
   вообще (сверено экспортом узла 104:1475: после поиска/чипов сразу
   идут карточки), десктопная надпись просто скрыта */
.catpg-series__label {
  display: none;
}

.catpg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.catpg-row {
  display: contents;
}

.catpg-row:nth-of-type(3) {
  display: none;
}

.catpg-grid-wrap .catpg-card {
  width: 100%;
  border: 1px solid #F6F1E9;
}

.catpg-grid-wrap .catpg-card__body {
  height: auto;
  width: calc(100% + 2px);
  padding: 16px 0 0;
  box-sizing: border-box;
}

.catpg-grid-wrap .catpg-card__inner {
  width: 100%;
  gap: 16px;
}

.catpg-grid-wrap .catpg-card__top {
  gap: 16px;
}

.catpg-grid-wrap .catpg-card__head {
  box-sizing: border-box;
  width: 100%;
  padding: 0 8px;
  gap: 16px;
}

.catpg-grid-wrap .catpg-card__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 20px;
  line-height: 21px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-grid-wrap .catpg-card__desc {
  margin-top: 0; /* десктопный сдвиг вместо trim — тут описание и так обрезано */
  font-size: 10px;
  line-height: 14px;
  height: 35px;
  flex-basis: 35px;
  -webkit-line-clamp: 3;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-grid-wrap .catpg-card__specs,
.catpg-grid-wrap .catpg-card__actions {
  display: none;
}

.catpg-grid-wrap .catpg-card__mob-actions {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 0;
  width: 100%;
  padding: 0 8px 8px;
}

.catpg-grid-wrap .catpg-card__mob-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  border: none;
  background: #516B43;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

.catpg-grid-wrap .catpg-card__mob-cart img {
  width: 17px;
  height: 15px;
  flex: none;
}

/* Десктопная плитка фиксирует высоту текстового блока (164px) — тут он
   по содержимому */
.catpg-grid-wrap .catpg-card__top {
  justify-content: flex-start;
  height: auto;
}

/* «Сравнить» слева от «В корзину» — как на десктопной плитке, в высоту
   мобильной кнопки */
.catpg-grid-wrap .catpg-card__mob-buy {
  display: flex;
  gap: 8px;
}

.catpg-grid-wrap .catpg-card__mob-buy .catpg-card__mob-cart {
  flex: 1 0 0;
}

.catpg-grid-wrap .catpg-card__compare--mob {
  width: 30px;
  height: 30px;
  background: #F6F1E9; /* зелёные кружки на бежевом — макет избранного 5171:10495 */
}

.catpg-grid-wrap .catpg-card__mob-consult {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: #E2480A;
  text-align: center;
  white-space: nowrap;
}

.catpg-more {
  margin-top: 32px;
}

.catpg-more a {
  font-size: 14px;
}

/* "Есть проект?" CTA — в мобильном Figma-макете каталога (node 104:1358 и
   аналоги) этого блока нет вообще, страница заканчивается на "показать
   ещё" + футер. Скрыт ТОЛЬКО на этой странице (.pd-cta переиспользуется
   на project.html, там он нужен) — тем же приёмом, что body.is-product-page. */
body.is-catalog-page .pd-cta {
  display: none;
}

/* Десктопный .pd-cta + .footer{margin-top:0} (project.css) всё ещё
   матчится — .pd-cta скрыт, но не удалён из DOM, соседний селектор его
   не замечает. Перебиваем бо́льшей специфичностью, чтобы вернулся
   обычный мобильный ритм (тот же .footer{margin-top:60px}, что везде). */
body.is-catalog-page .pd-cta + .footer {
  margin-top: 60px;
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА (product.html) — Figma node 104:1056 «Карточка товара»
   (375×2760).

   Порядок сильно отличается от десктопа: право-сайдбар (.pdp-side —
   панели «Скачать» + карточка менеджера) на мобилке влит в общий поток
   ПОСЛЕ декоративного фото (менеджер → скачать) — переносится в JS
   (initProductMobileReorder() в mobile.js, тот же приём, что
   initPortalPlacement() на Главной). Секция «Описание» на мобилке идёт
   ПОСЛЕДНЕЙ среди 4 секций (десктоп — первой) — это уже чистый CSS
   `order` (общий родитель, `.pdp-main{display:flex;flex-direction:column}`).

   `.pdp-related`/`.pdp-bought` скрыты целиком — посчитана полная высота
   мобильного узла (все блоки до "СКАЧАТЬ" включительно = все 2760px
   без остатка), для этих 2 секций места в мобильном макете просто нет.
   ========================================================================== */

.pdp-crumbs {
  display: none;
}

.pdp-crumbs--mob {
  display: block;
  margin-top: 24px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 18px;
  text-transform: none;
  color: rgba(0, 0, 0, 0.6);
}

.pdp-body {
  margin-top: 24px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.pdp-main {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pdp-head {
  order: 1;
  gap: 16px;
}

.pdp-head__art {
  display: none; /* код изделия уже виден хвостом крошек */
}

.pdp-head__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 30px;
  line-height: 30px;
}

.pdp-head__variant {
  font-family: 'DINPro Cond Light', 'Inter', Arial, sans-serif;
  font-size: 24px;
  line-height: 24px;
}

.pdp-actions {
  order: 2;
  margin-top: 24px;
  align-items: center;
}

/* Figma 104:1073: строка = плашка размеров 135px + gap 8 + 5 кружков
   34px без зазора (=170). Активный размер 25px, неактивные 30px. */
.pdp-swatches {
  gap: 8px;
}

.pdp-swatches__sizes {
  height: 34px;
  padding: 0 4px;
  gap: 4px;
}

.pdp-swatches__size {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

.pdp-swatches__size.is-active {
  width: 25px;
  height: 25px;
}

.pdp-swatches__colors {
  gap: 0;
}

.pdp-swatches__color {
  width: 34px;
  height: 34px;
}

.pdp-actions__icons {
  display: none;
}

.pdp-gallery {
  order: 3;
  margin-top: 16px;
  gap: 8px;
}

/* 5+ фото не помещаются в 320 (74 × 5 + отступы) — ряд листается пальцем
   внутри себя, иначе он раздвигал всю страницу (горизонтальный скролл). */
.pdp-gallery__thumbs {
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.pdp-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.pdp-gallery__thumb,
.pdp-gallery__thumb--plain {
  width: 74px;
  height: 59px;
  flex-shrink: 0;
}

.pdp-gallery__thumb--mob {
  display: block;
}

.pdp-mob-ar-btn {
  display: flex;
  order: 4;
  margin-top: 16px;
}

.pdp-section {
  margin-top: 40px;
}

/* Десктопный DOM-порядок секций: Описание, Характеристики, Материалы,
   Технологии — на мобилке Описание уходит в конец */
.pdp-section:nth-of-type(1) { order: 8; }
.pdp-section:nth-of-type(2) { order: 5; }
.pdp-section:nth-of-type(3) { order: 6; }
.pdp-section:nth-of-type(4) { order: 7; }

.pdp-section__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 24px;
}

.pdp-section__body {
  margin-top: 16px;
}

.pdp-section__title--sub {
  margin-top: 40px;
}

.pdp-description {
  width: 100%;
  font-family: 'DINPro Light', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
}

.pdp-specs {
  flex-direction: column;
  gap: 0;
}

.pdp-specs__col {
  display: contents;
}

.pdp-specs__row {
  gap: 8px;
}

.pdp-specs__label {
  font-size: 14px;
  line-height: 40px;
}

.pdp-specs__value {
  font-size: 16px;
  line-height: 40px;
}

.pdp-materials {
  gap: 16px;
  flex-wrap: wrap;
}

.pdp-materials img {
  height: 40px;
}

.pdp-bottom-photo {
  order: 9;
  margin-top: 40px;
}

.pdp-side {
  width: 100%;
}

/* Переехавшие через JS узлы становятся прямыми детьми .pdp-main — этот
   селектор НЕ задевает .pdp-swatches.pdp-auth-only (та остаётся внутри
   .pdp-actions, другой родитель) */
.pdp-main > .pdp-guest-only,
.pdp-main > .pdp-auth-only {
  order: 11;
  width: 100%;
  margin-top: 40px;
}

.pdp-main > .pdp-contact {
  order: 10;
  margin-top: 40px;
}

.pdp-panel__title {
  padding: 30px 0 0 30px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 24px;
}

.pdp-panel__subtitle {
  padding: 0 0 10px 30px;
  font-size: 16px;
}

.pdp-files {
  margin-top: 24px;
  gap: 16px;
}

.pdp-file {
  padding: 0 0 0 30px;
  gap: 24px;
}

.pdp-file__badge {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 22px;
}

.pdp-file__info {
  gap: 7px;
}

.pdp-file__name {
  font-size: 14px;
}

.pdp-file__size {
  font-size: 10px;
}

.pdp-panel__cta {
  margin-top: 16px;
}

.pdp-panel__btn {
  width: 100%;
  padding: 0;
  margin: 0 30px;
}

.pdp-contact {
  width: 100%;
  padding: 32px 24px;
  box-sizing: border-box;
}

.pdp-contact__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 30px;
}

/* Ни "Изделия в реальных проектах", ни "С этим товаром покупают" в
   мобильном Figma-макете нет — высота узла (2760px) исчерпывается
   ровно на "СКАЧАТЬ", без остатка на эти 2 секции */
.pdp-related,
.pdp-bought {
  display: none;
}

body.is-product-page .footer {
  margin-top: 40px !important; /* десктоп несёт инлайн style="160px" в HTML */
}


/* ==========================================================================
   «О нас» — Figma taiga_brand-components 4508:9651 (375×5456), ритм 60.
   Раскрытые карточки ценностей — 5516:15690, отделы — 5539:13956.
   Финального призыва в мобильном макете нет — блок скрыт.
   ========================================================================== */
.about-crumbs,
.about-eyebrow,
.is-about-page .cta-block {
  display: none;
}

/* .cta-block + .footer (style.css) обнуляет отступ под десктопный призыв */
.is-about-page .cta-block + .footer {
  margin-top: 60px;
}

/* --- Шапка (4508:9653): фото уходит под sticky-шапку, текст внизу слева --- */
.about-hero {
  justify-content: flex-end;
  align-items: flex-start;
  height: 667px;
  margin-top: -64px;
  padding: 0 27.5px 40px;
}

.about-hero__content {
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  padding: 0;
  text-align: left;
}

.about-hero__title {
  width: 217px;
  font-size: 38px;
  line-height: 41.8px;
}

/* Блок в макете 320px, но DIN в браузере чуть уже фигмовского: при 320
   «обществу» влезает в первую строку, а в макете уходит на вторую. 300px
   дают те же переносы, что в макете. */
.about-hero__subtitle {
  width: 300px;
  font-size: 16px;
  line-height: 17.6px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --- Цифры: сетка 2×2 и размеры — общие .stats__* выше; подписи в этом
   макете однострочные и сдвинуты на 10, кроме последней --- */
.about-stats {
  margin-top: 60px;
}

.about-stats .stats__card {
  height: 200px;
}

.about-stats .stats__label {
  min-height: 0;
  padding-left: 10px;
}

.about-stats .stats__card:last-child .stats__label {
  padding-left: 0;
}

/* --- Почему мы (5516:15082): текст → цитата → видео --- */
.about-why {
  gap: 32px;
  margin-top: 60px;
}

.about-why__head {
  gap: 0;
}

.about-why__row {
  flex-direction: column;
  gap: 32px;
}

/* В макете у заголовка свой узкий блок 161px (отсюда 3 строки) и он без
   обрезки по капхайту — 3 × 33 = 99px */
.about-why__title {
  width: 161px;
  text-box-trim: none;
}

.about-why__text {
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-why__text p + p {
  margin-top: 18px;
}

.about-why__text:not(.is-expanded) p + p {
  display: none;
}

.about-why__text:not(.is-expanded) p:first-child::after {
  content: '\2026';
}

.about-why__media {
  flex-direction: column-reverse;
}

.about-philosophy__quote {
  margin-top: 0;
  border-left-width: 4px;
}

.about-philosophy__quote p {
  width: 286px; /* текстовый блок в макете 286, а не вся ширина за линией */
}

.about-video {
  height: 525px;
}

.about-video__play {
  left: 50%;
  top: 50%;
}

/* --- Что для нас важно: горизонтальная лента карточек 320px --- */
.about-values {
  gap: 32px;
  margin-top: 60px;
}

.about-values__head {
  gap: 0;
}

.about-values__grid {
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 -27.5px;
  padding: 0 27.5px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 27.5px;
  scrollbar-width: none;
}

.about-values__grid::-webkit-scrollbar {
  display: none;
}

.about-value {
  flex: none;
  width: 320px;
  scroll-snap-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.about-value__body {
  position: relative;
  height: 190px;
}

.about-value__arrow {
  display: block;
  position: absolute;
  top: 32px;
  right: 32px;
  width: 20px;
  height: 21px;
}

/* Открытая карточка (5516:15690): шапка «01 название» + текст внизу */
.about-value__hover {
  justify-content: space-between;
  align-items: stretch;
  padding: 40px 25px;
}

.about-value__hover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.about-value__hover-title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.about-value__hover-title span {
  color: #516B43;
}

.about-value__hover .about-value__arrow {
  position: static;
  flex: none;
  transform: rotate(90deg);
}

.about-value__text {
  width: 100%;
  font-size: 14px;
  line-height: 18px;
}

.about-value__text p + p {
  margin-top: 18px;
}

/* --- Патенты: общий блок с главной. В этом макете «Авторские права»
   стоят отдельной строкой, а остальное течёт одним абзацем --- */
.is-about-page .patents {
  margin-top: 60px;
}

.is-about-page .patents__title span {
  display: block;
}

.is-about-page .patents__title p {
  display: inline;
}

/* --- Команда: фото первым и на всю ширину --- */
.about-team {
  flex-direction: column-reverse;
  gap: 32px;
  width: 100%;
  margin-top: 60px;
}

.about-team__head {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 0 27.5px;
}

.about-team__intro,
.about-team__title,
.about-team__text {
  width: 100%;
}

.about-team__title {
  text-box-trim: none;
}

.about-team__intro {
  gap: 0;
}

.about-team__text {
  padding-top: 0;
  font-size: 14px;
  line-height: 18px;
}

.about-team__photo {
  height: 550px;
}

/* --- Как устроена компания (раскрытые пункты 5539:13956) --- */
.about-structure {
  gap: 32px;
  margin-top: 60px;
}

.about-dept {
  gap: 24px;
}

.about-dept__head {
  width: 100%;
  gap: 12px;
}

.about-dept__label {
  font-size: 14px;
  line-height: 18px;
}

.about-dept__title-row {
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.about-dept__title {
  font-size: 24px;
  line-height: 26.4px;
  white-space: normal;
}

.about-dept__arrow {
  display: none;
}

.about-dept__arrow--mob {
  display: block;
}

.about-dept__content {
  flex-direction: column;
}

.about-dept__photo {
  width: 100%;
  height: 214px;
}

.about-dept__panel {
  justify-content: flex-start;
  min-height: 388px;
  padding: 40px 30px;
}

.about-dept__intro,
.about-dept__body {
  font-size: 14px;
  line-height: 18px;
}


/* ==========================================================================
   «Контакты» — Figma taiga_brand-components 5539:12819 (375×3174).
   Порядок другой, чем на десктопе: контакты → карта → форма → соцсети,
   ритм 40. Обёртки строк уходят в display:contents, порядок — order.
   ========================================================================== */
.contacts {
  gap: 40px;
  margin-top: 16px;
  padding: 0 27.5px;
}

.contacts__row,
.contacts__left,
.contacts__col,
.contacts__col-group {
  display: contents;
}

.contacts__info {
  order: 1;
  flex-direction: column;
  gap: 30px;
}

.contacts__label {
  font-size: 14px;
  line-height: 18px;
}

/* В макете у первой колонки своя ширина 235 — «сервисного обслуживания»
   переносится на вторую строку */
.contacts__col--main .contacts__item {
  max-width: 235px;
}

.contacts__value {
  font-size: 20px;
}

.contacts__map {
  order: 2;
  height: 698px;
  margin: 0 -27.5px;
}

/* Форма — сразу под картой, без отступа, на всю ширину (общие правила
   .pd-form-card выше уже делают её full-bleed) */
.pd-form-card.contacts__form-card {
  order: 3;
  width: 100vw;
  height: 471px;
  margin-top: -40px;
  padding: 60px 40px;
}

.contacts__form-card .pd-form-inner {
  gap: 40px;
}

/* Кнопка «Отправить» на мобилке стоит до чекбоксов */
.contacts__form-card .pd-form__body {
  gap: 12px;
}

.contacts__form-card .pd-form__fields-wrap {
  display: contents;
}

.contacts__form-card .pd-form__fields {
  gap: 12px;
}

.contacts__form-card .pd-form__submit {
  order: 1;
}

.contacts__form-card .pd-form__consent {
  order: 2;
  gap: 12px;
  margin-top: 8px;
}

.contacts__form-card .lead-status {
  order: 3;
}

.contacts__socials {
  order: 4;
}

.contacts__socials-title {
  font-size: 20px;
}

.contacts__socials-links {
  gap: 20px;
}

.contacts__socials-links a {
  font-size: 20px;
}

.contacts__socials-note {
  font-size: 12px;
}

/* Призыв — на «Контактах» в мобильном макете есть (на «О нас» скрыт):
   слева, кнопки в столбик, акцент в заголовке оранжевый */
.cta-block {
  align-items: stretch;
  gap: 40px;
  height: 450px;
  margin-top: 40px;
  padding: 60px 40px;
}

.cta-block__head {
  align-items: flex-start;
  gap: 30px;
  text-align: left;
}

.cta-block__eyebrow {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

.cta-block__title {
  max-width: 250px; /* переносы как в макете: «хочу надёжную / площадку» */
  font-size: 30px;
  line-height: 1.1;
}

.cta-block__accent {
  color: #E2480A;
}

.cta-block__subtitle {
  max-width: 180px; /* «За 45 дней или раньше — / в согласованные сроки» */
  font-size: 14px;
  line-height: 18px;
  text-transform: none;
}

.cta-block__actions {
  flex-direction: column;
  gap: 12px;
}


/* ==========================================================================
   Корзина — Figma taiga_brand-components 5148:13586 (375×1408).
   Позиция: фото 105×84 + колонка 200 (промежуток 16), под ними ряд кнопок
   30px справа; позиции через 24, без линий. Форма КП — на всю ширину.
   Блока «С этим товаром покупают» в мобильном макете нет (.pdp-bought
   и так скрыт выше).
   ========================================================================== */
.cart__body {
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
}

.cart__main {
  gap: 24px;
  width: 100%;
}

.cart__title {
  font-size: 30px;
}

.cart__head {
  display: none;
}

.cart__list {
  gap: 24px;
}

.cart-item {
  display: grid;
  grid-template-columns: 105px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  padding: 0;
  border: 0;
}

.cart-item__photo {
  width: 105px;
  height: 84px;
}

.cart-item__main {
  display: contents;
}

.cart-item__info {
  gap: 8px;
  height: 74px;
}

.cart-item__name {
  font-size: 20px;
}

.cart-item__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.cart-item__desc {
  margin-bottom: 8px; /* в макете название+описание и габариты+возраст — две группы */
  padding: 0;
  font-size: 10px;
  line-height: 10px;
}

.cart-item__age,
.cart-item__dims {
  font-size: 10px;
}

.cart-item__dims {
  order: 1;
}

.cart-item__age {
  order: 2;
}

.cart-item__dims-unit {
  display: inline;
}

.cart-item__aside {
  grid-column: 1 / -1;
  width: auto;
}

.cart-item__controls {
  justify-content: flex-end;
  gap: 4px;
  height: 30px;
}

.favorite-button--cart {
  display: flex;
  width: 30px;
  height: 30px;
  background: #F6F1E9;
}

.cart-item__qty {
  width: 98px;
  height: 30px;
  gap: 16px;
  padding: 0 8px;
}

.cart-item__qty-value {
  font-size: 20px;
  letter-spacing: 1px;
}

.cart-item__remove {
  width: 30px;
  height: 30px;
}

.cart-item__consult {
  display: none;
}

.cart__request {
  width: auto;
  margin: 35px -27.5px 0;
  padding: 30px;
}

.cart__request-title {
  white-space: normal;
}


/* ==========================================================================
   Избранное — Figma 5171:10495. Крошки и заголовок как у корзины, плитка
   и сетка 2 в ряд — как в каталоге (.catpg-grid-wrap выше). Сначала 6
   карточек, остальные — по «показать ещё» (favorites_page.html)
   ========================================================================== */
.fav__title {
  margin-top: 16px;
}

.fav__grid-wrap {
  margin-top: 24px;
}

/* по макету ряды через 24px (в каталоге — 8) */
.fav__grid {
  row-gap: 24px;
}

.fav__grid:not(.is-expanded) > .catpg-card:nth-child(n+7) {
  display: none;
}

.fav__more {
  display: block;
}

.fav__more[hidden] {
  display: none;
}

.fav__empty {
  margin-top: 24px;
}

}