/* ============================================================
   АДАПТИВ ПО МАКЕТАМ FIGMA
     1024 — node 1:39229 (планшет)
     844  — node 1:44685 (мобильный горизонтальный)
     390  — node 1:56420 (мобильный вертикальный)
     элементы мобильной версии — node 1:49767
   Файл подключается ПОСЛЕ home.css и перекрывает его по каскаду.
   ============================================================ */

/* ---------- Границы ярусов ----------
   Телефонная раскладка (макет 390) работает по ширину 767 включительно,
   если окно высокое: @media (max-width: 600px), (min-width: 601px) and
   (max-width: 767px) and (min-height: 600px). Раньше она обрывалась на
   600, и на 601-767 оставалась планшетная сетка — колонки не помещались.

   Низкие окна той же ширины (max-height: 599px) — это телефон в альбомной
   ориентации, у него свой ярус ниже по файлу, он не изменился.
   Планшетные блоки поэтому начинаются с 768, а не с 600/601.
   ---------------------------------- */

/* ---------- Управление слайдером героя (общее) ----------
   На десктопе скрыто; включается на 1024/844/390. */
.hp-hero__arrow{
  display:none;
  position:absolute;
  top:var(--hero-arrow-top, 50%);
  z-index:4;
  width:var(--hero-arrow-size, 48px);
  height:var(--hero-arrow-size, 48px);
  margin-top:calc(var(--hero-arrow-size, 48px) / -2);
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#333;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  cursor:pointer;
}
.hp-hero__arrow svg{ width:9px; height:15px; }
.hp-hero__arrow.prev{ left:var(--hero-arrow-inset, 84px); }
.hp-hero__arrow.next{ right:var(--hero-arrow-inset, 84px); }
.hp-hero__arrow.next svg{ transform:scaleX(-1); }
.hp-hero__arrow:disabled{ opacity:.35; cursor:default; }

.hp-hero__dots{
  display:none;
  position:absolute;
  left:0; right:0;
  bottom:12px;
  z-index:4;
  justify-content:center;
  gap:8px;
}
.hp-hero__dots button{
  width:8px; height:8px;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}
.hp-hero__dots button.is-active{ background:#fff; }

/* Точки под мобильными слайдерами (предложения / господдержка / истории) */
.hp-dots{
  display:none;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
/* Точки: неактивные — залитые, активная — кольцо (макет 1:50710) */
.hp-dots{ gap:7px; }
.hp-dots button{
  width:8px; height:8px;
  padding:0;
  border:none;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
}
.hp-dots button.is-active{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px #fff;
}
/* на светлых секциях точки синие */
.hp-support .hp-dots button,
.hp-success .hp-dots button{ background:#1666b0; }
.hp-support .hp-dots button.is-active,
.hp-success .hp-dots button.is-active{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px #1666b0;
}

/* Круглая кнопка «дальше» у горизонтальных лент (макет 1:52928):
   40x40, белая, рамка rgba(51,51,51,.1), шеврон 7x12 */
.hp-slide-next,
.hp-slide-prev{
  flex:0 0 auto;
  display:none;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  padding:0;
  border:1px solid rgba(51,51,51,.1);
  border-radius:50%;
  background:#fff;
  color:#333;
  cursor:pointer;
}
.hp-slide-next svg,
.hp-slide-prev svg{ width:7px; height:12px; }
.hp-slide-next svg{ transform:scaleX(-1); }

/* Ряд категорий историй успеха (макет 1:52923) */
.hp-story-chips{
  display:none;
  align-items:center;
  gap:10px;
  margin:0 0 24px;
}
.hp-story-chips__track{
  display:flex;
  flex:1 1 0;
  min-width:0;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.hp-story-chips__track::-webkit-scrollbar{ display:none; }
.hp-story-chips__track button{
  flex:0 0 auto;
  max-width:251px;
  padding:14px;
  border:none;
  border-radius:8px;
  background:#eef0f3;
  color:#333;
  font-family:'Inter',Arial,sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  text-align:center;
  cursor:pointer;
}
.hp-story-chips__track button.is-active{ background:#14439e; color:#fff; }
.hp-story-chips .hp-slide-next,
.hp-story-chips .hp-slide-prev{ display:flex; }

/* ---------- Сцена карты ----------
   Обёртка нужна мобильным версиям (пинч-зум и перемещение пальцами);
   на десктопе это прозрачные слои поверх фона секции. */
.hp-map__pinch{ position:absolute; inset:0; }
.hp-map__stage{ position:absolute; inset:0; }
/* Обрезка кадра — только на десктопе, и не ради вида.
   Слои пинов и объектов живут в системе координат 1920x1080 и
   трансформацией натягиваются на кадр, поэтому их прозрачные коробки на
   несколько пикселей выходят за него (сверху 22, снизу 9 при окне
   1600x860). Сами пины внутри: за края кадра не выходит ни один — на
   десктопе проверено на всех ширинах. Но эти пиксели попадали в
   scrollHeight секции, и подгонка экрана под высоту окна (js/home.js,
   fitScreens) считала, что экран карты не помещается ни при каком
   масштабе, и сажала его на нижний предел 0.55: карта выходила заметно
   мельче соседних экранов, а заголовок уезжал под шапку. С обрезкой
   масштаб подбирается нормально — 0.76 вместо 0.55 при 1600x860.
   На планшете и телефоне часть пинов намеренно стоит за кромкой кадра,
   там обрезать нельзя. */
@media (min-width: 1025px){
  .hp-map__pinch{ overflow:hidden; }
}
.hp-map__photo{ display:none; }

/* Красная кнопка-стрелка в углу активной карточки-фото (мобильные макеты) */
.hp-card__go{ display:none; }

/* Обёртка кнопок в подвале истории: везде прозрачна (кнопки остаются
   прямыми детьми подвала и ведут себя как раньше) и «оживает» только
   в раскладке 1440, где по макету кнопки идут отдельной строкой. */
.hp-story__actions{ display:contents; }

/* Перенос строки, который работает только на мобильной вёрстке */
.hp-br-mobile{ display:none; }

/* Карточка объекта карты: на узком экране ужимается до ширины экрана,
   иначе фиксированные 406px из макета вылезают за левый край */
@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  .hp-map-pop{ width:min(406px, calc(100vw - 28px)); padding:18px; }
  .hp-map-pop__close{ top:-52px; right:0; }
}


/* ============================================================
   1440 — ноутбук. Базовый набор живёт в home.css под max-width:1600px;
   здесь только то, что относится к первому экрану.
   ВАЖНО: порог именно 1600, а не 1439 — окно ровно 1440px не попадало
   в media (max-width:1439px), и весь первый экран оставался в размерах 1920:
   заголовок ломался на три строки и накрывал подписи колонок.
   ============================================================ */
@media (max-width: 1600px){
  /* Подписи колонок на одном уровне: блок подписи высотой в три строки,
     текст центрируется по вертикали — и однострочная, и трёхстрочная
     подпись лежат на одной оси, как в макете. */
  .hp-hero__label{ min-height:76px; }
  /* Заголовок ровно в две строки: перенос задан <br>, ширины хватает */
  .hp-hero__title{ font-size:44px; line-height:1.2; }
  /* Ширина задаётся явно. При width:auto абсолютный блок ужимается
     по shrink-to-fit, и доступной шириной считается расстояние от left:50%
     до правого края — половина экрана; строка заголовка ломалась лишний раз. */
  .hp-hero__center{ width:min(827px, calc(100% - 120px)); max-width:none; }
  /* --- Шапка по макету «1440» (node 1:39065) ---
     строка 1320 = пилюля 923 + 24 + правый блок 373.
     Пилюля: поля 24, логотип 44x50, 10 до названия (12px), 20 до меню,
     меню — пункты через 20, текст 16px и шеврон через 10.
     Правый блок: телефон, язык, три иконки — всё через 20, без полей. */
  .site-header .brand__text{ font-size:12px; }
  .site-header .nav-pill{ gap:20px; }
  .site-header .main-nav{ gap:20px; }
  .site-header .main-nav__item{ gap:10px; }
  .site-header .header-side{ gap:20px; padding:10px 0; }
  .site-header .header-icons{ gap:20px; }

  /* --- Предложения: ровно четыре карточки в кадре (макет node 1:37024) ---
     лента 1200 = 4 карточки + 3 зазора по 20. Базовые 316.8px оставляли
     в кадре пятую карточку, потому что секция ещё и ужимается зумом
     под высоту окна. Доля от ленты держит четыре при любом зуме. */
  .hp-offers__track .hp-card{ flex:0 0 calc((100% - 60px) / 4); }

  /* --- Истории успеха по макету «1440» (узел 1:35887) ---
     раскрытый слайд 800 из 1320, свёрнутые по 173,3; подпись на красной
     плашке 28px; подвал в две строки — название с суммой, кнопки ниже. */
  .hp-story{ flex:0 0 13.1313%; }
  .hp-story.is-open{ flex:0 0 60.6061%; }
  .hp-story__foot{
    flex-wrap:wrap;
    gap:24px;
    padding:20px 24px 0;
  }
  .hp-story__foot .hp-btn:first-of-type{ margin-left:0; }
  /* сумма — обычный трекинг: базовое сжатие рассчитано на 96px и на 64px
     склеивало цифры */
  .hp-story__num{ font-size:64px; letter-spacing:normal; margin-right:0; }
  .hp-story__unit{ font-size:32px; }
}

/* Кнопки историй отдельной строкой — только в раскладке 1440: обёртка
   занимает всю ширину подвала, поэтому во flex они переносятся под
   название с суммой. Ниже 1025 у подвала своя раскладка (лента на
   планшете, колонка на телефоне) — там обёртка снова прозрачна. */
@media (min-width: 1025px) and (max-width: 1600px){
  .hp-story__actions{
    display:flex;
    flex:0 0 100%;
    gap:24px;
  }
  /* подпись на красной плашке — 28px в две строки: в макете текст 446
     при плашке 486 из 800, то есть 60,75% ширины слайда. Базовый
     white-space:nowrap держал её одной строкой. */
  .hp-story.is-open .hp-story__label{
    font-size:28px;
    white-space:normal;
    max-width:60.75%;
  }
  /* затемнение снизу — старт на 50,076% высоты слайда, как в макете */
  .hp-story.is-open .hp-story__veil{
    background:linear-gradient(to bottom, rgba(0,0,0,0) 50.076%, rgba(0,0,0,.8) 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 50.076%, #000 100%);
            mask-image:linear-gradient(to bottom, transparent 50.076%, #000 100%);
  }

  /* --- Предложения: слайдер вкладок фильтра (макет 1440, узел 1:37024) ---
     Лента чипов шире ряда (1446 из 1396), и в макете последний чип
     обрывается затуханием к фону секции, а сразу за ним стоит круглая
     кнопка «дальше». Разметку (обёртка ряда + обе стрелки) создаёт
     attachArrows() в js/responsive.js на всех разрешениях, классы
     at-start / at-end она же держит в актуальном состоянии — здесь
     остаётся только показать стрелку и нарисовать затухание.
     Левая пара — зеркальная: появляется, когда лента отлистана от
     начала, иначе с последнего чипа некуда было бы вернуться. */
  /* 32 между стрелкой ленты и плашкой «Отрасль» — по макету 1440
     (узел 1:37025). Было 20. */
  .hp-offers__filters{ gap:32px; }
  .hp-offers__chips-row{ position:relative; gap:10px; }
  .hp-offers__chips-row .hp-slide-next{ display:flex; }
  .hp-offers__chips-row.at-end .hp-slide-next{ display:none; }
  .hp-offers__chips-row .hp-slide-prev{ display:none; }
  .hp-offers__chips-row:not(.at-start) .hp-slide-prev{ display:flex; }
  /* Затухание краёв ленты — маской на самой ленте (см. .hp-offers__chips).
     У края ленты гасить нечего: там уже её начало или конец. */
  .hp-offers__chips-row:not(.at-start) .hp-offers__chips{ --fade-l:80px; }
  .hp-offers__chips-row:not(.at-end) .hp-offers__chips{ --fade-r:80px; }
}


/* ============================================================
   1024 — планшет (макет node 1:39229)
   ============================================================ */
@media (max-width: 1024px){
  .hp-hero{
    min-height:max(640px, 100svh);
    --hero-arrow-inset:84px;
    --hero-arrow-size:48px;
    --hero-arrow-top:52%;
  }

  /* Колонки перестраиваются в слайдер: три колонки в кадре, листание стрелками */
  .hp-hero__cols{
    position:absolute; inset:0;
    display:flex;
    align-items:stretch;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .hp-hero__cols::-webkit-scrollbar{ display:none; }
  .hp-hero__col,
  .hp-hero__col:last-child{
    flex:0 0 33.3333%;
    min-width:0;
    scroll-snap-align:start;
    border-right:1px solid rgba(255,255,255,.4);
    /* 400px снизу — подписи стоят над карточкой новостей, как в макете 1024 */
    padding:40px 0 400px;
  }
  .hp-hero__arrow{ display:flex; }
  /* Подпись вписана в колонку и переносится по макету 1024: первая —
     в три строки («Инвестиционный / рейтинг и объем / инвестиций»),
     вторая — в две («Инвестиционная / активность»). Ограничиваем именно
     текстовый span: ширина подписи целиком тянула бы за собой маркер. */
  .hp-hero__label{ width:100%; }
  .hp-hero__label span:last-child{ max-width:200px; }

  /* Герб и заголовок — абсолютный слой поверх слайдера (не слайд) */
  .hp-hero__center{ top:38%; gap:28px; width:min(760px, calc(100% - 200px)); max-width:none; }
  .hp-hero__logo{ width:140px; height:159px; }
  .hp-hero__title{ font-size:46px; }

  /* Новости — карточка в правом нижнем углу героя (макет 1024): фикс. 226px,
     отступы от края 15px */
  .hp-hero__news{
    position:absolute;
    left:auto; right:15px;
    bottom:15px;
    width:226px;
    margin:0;
  }
  /* Под контент в карточке остаётся 226-2*21 = 184px, а базовые поля
     14/24 давали кнопке 206px — она вылезала за правый край плашки.
     В макете (узел 1:40042) поля 14 по кругу и кнопка во всю ширину. */
  .hp-hero__news .hp-btn{ align-self:stretch; justify-content:center; padding:14px; }

  /* --- Инвестируйте: фото Главы уходит под текст --- */
  .hp-invest{ min-height:0; }
  /* порядок в колонке: текст, фото, полоса «Возникли трудности…».
     Полосе order нужен явно — иначе она (order:0) уезжает наверх секции. */
  .hp-invest__inner{ order:1; }
  .hp-invest .hp-help{ order:3; }
  .hp-invest__photo{
    order:2;
    position:static;
    width:min(620px, 100%);
    height:auto;
    margin:0 auto;
  }
  .hp-invest__photo img{ height:auto; object-position:center bottom; }
  .hp-invest__header-space{ display:none; }
  /* базовое flex:1 0 0 рассчитано на секцию высотой в экран: в потоке
     оно давало блоку нулевую высоту, и цитата вылезала над заголовком */
  .hp-invest__body{ flex:0 0 auto; flex-direction:column; align-items:stretch; }
  .hp-invest__col{
    width:auto; max-width:none;
    align-items:stretch;
    justify-content:flex-start;
    padding-top:0;
  }
  /* Заголовок и цитата — 40/36px, цитата прижата вправо (макет 1024) */
  .hp-invest__title{ font-size:40px; }
  .hp-invest__quote{ text-align:right; font-size:36px; line-height:1.5; }
  /* зазор внутри подписи (автор + кнопка) — тот же 40px, что и между
     остальными блоками колонки, как в макете */
  .hp-invest__sign{ align-items:flex-end; gap:40px; }
  .hp-invest__sign .hp-btn{ align-self:flex-end; }
  .hp-invest__col > .hp-btn{ align-self:flex-end; }
  .hp-help__inner{ flex-direction:row; align-items:center; gap:24px; }
  /* базовая иллюстрация спозиционирована абсолютно и сдвинута transform:
     в потоке всё это надо снимать, иначе картинка уезжает за левый край */
  .hp-help__art{
    display:block;
    position:static;
    left:auto; top:auto;
    transform:none;
    width:120px; height:auto;
  }

  /* --- Предложения: сетка 2 на 2 со стрелками по краям (макет 1024) --- */
  .hp-offers{ min-height:0; padding:60px 0; }
  .hp-offers__filters{ height:auto; flex-wrap:nowrap; align-items:center; gap:16px; }
  .hp-offers__chips{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    gap:10px;
    flex:1 1 auto;
    min-width:0;
  }
  .hp-offers__chips::-webkit-scrollbar{ display:none; }
  .hp-industry{ flex:0 0 auto; }
  /* padding не переопределяем: базовые var(--hp-pad) = 60px совпадают
     с полями макета 1024 (904 = 40+40 стрелки + 20+20 зазоры + 784 сетка) */
  .hp-offers__carousel{ margin-top:24px; }
  .hp-offers__nav{ display:flex; }
  /* Сетка 2x2: в кадре ровно четыре карточки, остальные листаются
     стрелками (макет 1024 — узел 1:40773: поле 784x780, колонки 382,
     ряды 380, зазор 20). Новые карточки уходят вправо новыми столбцами. */
  .hp-offers__track{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(2, minmax(0,1fr));
    grid-auto-columns:calc((100% - 20px) / 2);
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  /* grid-auto-flow:column раскладывает по столбцам, а в макете порядок
     чтения построчный — пяти карточкам проставляем места явно */
  .hp-card:nth-child(1){ grid-area:1 / 1; }
  .hp-card:nth-child(2){ grid-area:1 / 2; }
  .hp-card:nth-child(3){ grid-area:2 / 1; }
  .hp-card:nth-child(4){ grid-area:2 / 2; }
  .hp-card:nth-child(5){ grid-area:1 / 3; }
  .hp-card{ width:auto; flex:none; height:auto; scroll-snap-align:start; }
  .hp-offers__all{ margin-top:24px; }
  .hp-offers__cta-box{ height:auto; gap:20px; padding:24px 28px; }

  /* --- Господдержка: карточки слева, навигатор справа (макет 1024) --- */
  .hp-support{ min-height:0; padding:60px var(--hp-pad); }
  .hp-support__inner{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
    align-items:start;
  }
  /* Обёртка .hp-support__main существует только ради двухколоночной
     раскладки 1920; в адаптиве она мешает — раскрываем её содержимое. */
  .hp-support__main{ display:contents; }
  .hp-support__head{ grid-column:1 / -1; height:auto; }
  .hp-support__head h2{ font-size:40px; }
  .hp-support__grid{ display:contents; }
  /* align-items:start у сетки нужен навигатору (он не должен растягиваться
     на всю колонку), а карточки, наоборот, должны заполнять свой ряд:
     иначе стоящие рядом третья и четвёртая получались разной высоты. */
  .hp-supcard{ min-height:0; padding:24px; align-self:stretch; }
  /* в узкой колонке кнопка и число не помещаются в строку — ставим их друг под друга */
  .hp-supcard__body{ flex-direction:column; align-items:stretch; gap:16px; flex-wrap:nowrap; }
  /* база 260 задана для строки (это ширина колонки с кнопкой); в колонку
     она превращается в высоту и раздувает карточку — возвращаем авто */
  .hp-supcard__col{ flex:0 1 auto; }
  .hp-supcard__stat{ align-items:flex-start; }
  .hp-supcard:nth-child(1){ grid-column:1; grid-row:2; }
  .hp-supcard:nth-child(2){ grid-column:1; grid-row:3; }
  .hp-supcard:nth-child(3){ grid-column:1; grid-row:4; }
  .hp-supcard:nth-child(4){ grid-column:2; grid-row:4; }
  .hp-navigator{ grid-column:2; grid-row:2 / span 2; margin-top:0; }

  /* --- Карта (макет 1024): картинка в потоке, фильтры и легенда под ней --- */
  .hp-map{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:0 0 40px;
    overflow:hidden;
    background:#84cef8;
    background-image:none;
  }
  .hp-map__inner{ display:contents; }
  .hp-map__header-space{ display:none; }
  .hp-map__title{
    order:1;
    margin:0;
    padding:32px var(--hp-pad) 20px;
    font-size:40px;
    line-height:1.2;
    white-space:normal;
  }
  .hp-map__pinch{
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    height:56vw;
    z-index:0;
    overflow:hidden;
    /* Одним пальцем по вертикали — листается страница, двумя — масштабируется
       КАРТА (pinch-zoom здесь намеренно не разрешён: иначе браузер забирал бы
       щипок себе и зумил всю страницу). Как только карту приблизили, js
       ставит is-zoomed, и один палец начинает двигать карту. */
    touch-action:pan-y;
  }
  .hp-map__pinch.is-zoomed{ touch-action:none; }
  .hp-map__stage{
    position:absolute;
    left:0; top:0;
    width:100%;
    aspect-ratio:1920 / 1080;
    height:auto;
    transform-origin:0 0;
  }
  .hp-map__photo{ display:block; width:100%; height:100%; object-fit:cover; }
  .hp-map__photo--mobile{ display:none; }
  .hp-map__veil{ display:none; }
  .hp-map__filters{ order:3; }
  .hp-map__legend{ order:4; }
  .hp-map__pins{
    display:block;
    left:0; top:0;
    width:100%; height:100%;
    transform:none;
  }
  /* Сцена масштабируется целиком, поэтому пины гасят её масштаб обратным:
     метки остаются одного размера и не наползают друг на друга при зуме.
     --pin-counter ставит js (1 / текущий масштаб сцены). */
  .hp-pin{ transform:translate(-50%,-50%) scale(var(--pin-counter, 1)); }
  .hp-pin:hover{ transform:translate(-50%,-50%) scale(calc(var(--pin-counter, 1) * 1.08)); }
  .hp-map__obj{ transform:scale(var(--pin-counter, 1)); transform-origin:50% 50%; }
  .hp-map__obj:hover{ transform:scale(calc(var(--pin-counter, 1) * 1.12)); }
  .hp-map__layer{
    left:0; top:0;
    width:1920px; height:1080px;
    transform:scale(var(--map-scale, 1));
    transform-origin:0 0;
  }
  .hp-map__filters{
    margin:24px var(--hp-pad) 0;
    width:auto;
    padding:24px;
  }
  .hp-map__checks{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px 16px;
  }
  .hp-map__filters .hp-btn{ width:auto; align-self:flex-start; }
  .hp-map__legend{
    margin:16px var(--hp-pad) 0;
    width:auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px 20px;
    padding:24px 28px;
  }
  .hp-map__legend-title{ grid-column:1 / -1; }

  /* --- Истории успеха: аккордеон по вертикали (макет 1024) --- */
  .hp-success{ min-height:0; padding:60px var(--hp-pad); }
  .hp-success__title{ font-size:40px; }
  .hp-success__gallery{ flex-direction:column; height:auto; }
  .hp-story{
    flex:0 0 auto;
    min-height:104px;
    padding:0;
    border-right:none;
    border-bottom:1px solid #fff;
    transition:min-height .55s cubic-bezier(.4, 0, .2, 1);
  }
  .hp-story:last-child{ border-bottom:none; }
  /* 655px — высота раскрытой карточки в макете 1024 (Frame 51, слайд "1") */
  .hp-story.is-open{ flex:0 0 auto; min-height:655px; }
  .hp-story:not(.is-open) .hp-story__nav,
  .hp-story:not(.is-open) .hp-story__foot{ display:none; }
  .hp-story__label{ font-size:18px; white-space:normal; padding:0 20px; }
  .hp-story.is-open .hp-story__label{ padding:14px 20px; font-size:20px; }
  .hp-story__nav{ padding:0 20px; }
  .hp-story__foot{ flex-wrap:nowrap; gap:16px; padding:16px 20px; }
  .hp-story__num{ font-size:56px; line-height:60px; letter-spacing:-5px; }
  .hp-story__unit{ font-size:24px; line-height:60px; }
  .hp-success__cta-box{ height:auto; gap:20px; padding:24px 28px; }
  .hp-success__cta-box p{ white-space:normal; font-size:24px; line-height:30px; }
}


/* ============================================================
   Телефон: портрет любой ширины до 767 и альбом до 844.
   Планшет в портрете тоже бывает уже 845 (iPad 768, 810, 820, 834),
   и по одной ширине его от телефона в альбоме не отличить — поэтому
   в диапазоне 768…844 разделяем по высоте окна: ниже 600 это телефон
   на боку (844x390), выше — планшет, и ему достаётся планшетная
   вёрстка (макет node 1:39229).
   844 — мобильный горизонтальный (макет node 1:44685)
   ============================================================ */
@media (max-width: 767px), (max-width: 844px) and (max-height: 599px){
  /* Герой: слайдер «герб + заголовок» и пять колонок, по одному слайду в кадре.
     Каждый слайд сразу показывает своё фото и плашки — ховера на тач-устройстве нет. */
  .hp-hero{
    min-height:100svh;
    --hero-arrow-inset:15px;
    --hero-arrow-size:38px;
    --hero-arrow-top:36%;
  }
  .hp-hero__col,
  .hp-hero__col:last-child{
    flex:0 0 100%;
    padding:0;
    border-right:0;
    justify-content:flex-start;
  }
  /* Слайд 0 — герб и заголовок: полноценный слайд, а не абсолютный слой */
  .hp-hero__center{
    position:relative;
    top:auto; left:auto;
    transform:none;
    flex:0 0 100%;
    width:100%;
    max-width:none;
    scroll-snap-align:start;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:84px 60px 0;
    align-self:flex-start;
  }
  .hp-hero__logo{ width:70px; height:80px; }
  .hp-hero__title{ font-size:20px; line-height:1.3; text-align:left; }

  /* Шапка на 844: только бургер и логотип, плашка во всю ширину (макет 1:44685) */
  .site-header .header-side{ display:none; }
  .site-header .nav-pill{ width:100%; }

  /* Колонка-слайд: фото и панель видны всегда */
  .hp-hero__col-bg{ opacity:1; }
  .hp-hero__label{ display:none; }
  .hp-hero__panel{
    position:absolute;
    left:0; right:0;
    top:88px;
    visibility:visible;
    transform:none;
    transition:none;
    gap:14px;
    /* 64px по бокам — плашки не заезжают под круглые стрелки слайдера */
    padding:0 64px;
  }
  .hp-hero__panel-title,
  .hp-hero__panel .hp-hero__stat{ opacity:1; transition:none; }
  .hp-hero__panel-title{ font-size:15px; }
  /* плашки в ряд — как в элементах мобильной версии (node 1:49767) */
  .hp-hero__stats{ flex-direction:row; gap:10px; }
  .hp-hero__stat{ flex:1 1 0; min-width:0; gap:4px; padding:8px 10px; border-radius:14px; }
  .hp-hero__stat-num{ font-size:26px; letter-spacing:-1.5px; margin-right:-1.5px; }
  .hp-hero__stat-unit{ font-size:14px; }
  .hp-hero__stat-cap{ gap:6px; }
  .hp-hero__stat-cap span{ font-size:10px; line-height:1.25; }
  .hp-hero__stat-dot{ width:5px; height:5px; }

  /* Новости — широкая тёмная карточка внизу героя.
     Ужата по вертикали: на 844 высота экрана всего 390px, и в макете
     карточка занимает нижнюю половину, не наезжая на плашки слайда. */
  .hp-hero__news{
    left:16px; right:16px;
    bottom:14px;
    width:auto;
    padding:14px 16px;
    gap:10px;
    background:rgba(0,0,0,.45);
  }
  .hp-hero__news h2{ font-size:16px; }
  .hp-hero__news-item{ gap:6px; }
  .hp-hero__news-text{ font-size:12px; }
  .hp-hero__news .hp-btn{ align-self:stretch; justify-content:center; padding:12px 20px; }

  /* --- Инвестируйте: фото слева, текст справа (макет 844) --- */
  .hp-invest__inner{ padding:24px 16px; gap:20px; }
  /* Фото Главы слева от цитаты (макет 844). Отступ снизу равен высоте
     полосы «Возникли трудности…» — её ставит js (--invest-photo-bottom).
     Снимок 1198x679 — широкий кадр, поэтому в узкой колонке кадрируется
     по фигуре, иначе Глава занимал бы 30px высоты. */
  .hp-invest__photo{
    position:absolute;
    left:0;
    top:auto;
    bottom:var(--invest-photo-bottom, 180px);
    width:300px;
    height:320px;
    margin:0;
    overflow:hidden;
    z-index:1;
  }
  .hp-invest__photo img{
    width:auto;
    max-width:none;
    height:100%;
    object-fit:cover;
    object-position:45% bottom;
  }
  .hp-invest__title{ font-size:28px; }
  .hp-invest__top{ align-items:flex-start; }
  .hp-invest__body{ padding-left:310px; }
  .hp-invest__quote{ text-align:left; font-size:16px; line-height:1.5; }
  .hp-invest__sign{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hp-invest__sign .hp-btn,
  .hp-invest__col > .hp-btn{ align-self:flex-start; }
  .hp-invest__col{ position:relative; z-index:2; }
  /* полоса «Возникли трудности…» в макете 844 — одна невысокая строка */
  .hp-help{ padding:16px; }
  .hp-help__inner{ gap:16px; align-items:center; }
  .hp-help__text h2{ font-size:18px; line-height:1.3; }
  .hp-help__text p{ font-size:14px; }
  .hp-help__btn{ font-size:14px; padding:12px 24px; }
  .hp-help__gosuslugi{ width:150px; height:auto; }
  .hp-help__art{ width:120px; }

  /* --- Предложения: горизонтальная лента карточек-фото (макет 844) --- */
  .hp-offers__filters{ flex-direction:column; align-items:stretch; gap:12px; padding:0 16px; }
  /* filters стала колонкой — flex:1 1 0 из home.css растянул бы обёртку
     по высоте (basis считается по вертикальной оси); возвращаем авто */
  .hp-offers__chips-row{ flex:0 0 auto; min-width:auto; }
  .hp-industry{ order:-1; width:100%; }
  .hp-industry__btn{ width:100%; }
  /* карусель — ряд; точки уходят на отдельную строку (flex:0 0 100% ниже) */
  .hp-offers__carousel{ padding:0 16px; flex-wrap:wrap; }
  .hp-offers__nav{ display:none; }
  .hp-offers__track{
    display:flex;
    flex:1 1 100%;
    min-width:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    gap:16px;
  }
  .hp-offers__carousel .hp-dots{ flex:0 0 100%; }
  .hp-offers__track::-webkit-scrollbar{ display:none; }

  /* карточка-фото: изображение на всю плитку, текст поверх затемнения */
  .hp-card{
    position:relative;
    flex:0 0 300px;
    width:300px;
    height:280px;
    scroll-snap-align:start;
    border:none;
    border-radius:20px;
    overflow:hidden;
    background:#0b1d2e;
  }
  .hp-card__media{ position:absolute; inset:0; height:100%; }
  .hp-card__media::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.12) 100%);
  }
  .hp-card__tag{ z-index:2; }
  .hp-card__body{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    /* поле снизу 24, а не 16: в макете карточки (узел 1:57570, 362x302)
       нижняя строка текста заканчивается за 25px до кромки, у нас было 17 */
    padding:14px 16px 24px;
  }
  .hp-card__title{
    height:auto;
    margin:0 0 10px;
    font-size:15px;
    line-height:20px;
    color:#fff;
  }
  .hp-card__rows{ gap:8px; }
  .hp-card__row{
    padding-bottom:6px;
    border-bottom-color:rgba(255,255,255,.25);
    font-size:12px;
    line-height:16px;
    color:#fff;
  }
  .hp-card__row img{ filter:brightness(0) invert(1); }
  /* в макете подробности раскрыты только у активной карточки */
  .hp-card:not(.is-active) .hp-card__rows{ display:none; }
  .hp-card__go{
    position:absolute;
    top:12px; right:12px;
    z-index:3;
    display:none;
    width:28px; height:28px;
    align-items:center; justify-content:center;
    border-radius:8px;
    background:var(--hp-red);
  }
  .hp-card__go img{ width:11px; height:11px; transform:scaleY(-1); }
  .hp-card.is-active .hp-card__go{ display:flex; }

  .hp-offers__all .hp-btn{ width:100%; justify-content:center; }
  .hp-offers__cta-box{ padding:16px 20px; }

  /* --- Господдержка: карточки лентой, навигатор под ними (макет 844) --- */
  .hp-support{ padding:40px 16px; }
  /* align-items:stretch обязателен: из сетки 1024 наследовался start,
     и лента карточек растягивалась по содержимому (1250px вместо ширины экрана) */
  .hp-support__inner{ display:flex; flex-direction:column; align-items:stretch; gap:20px; }
  .hp-support__head h2{ font-size:28px; }
  .hp-support__grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    gap:16px;
  }
  .hp-support__grid::-webkit-scrollbar{ display:none; }
  .hp-supcard{ flex:0 0 300px; width:300px; scroll-snap-align:start; }
  /* базовое flex:0 0 432px в колонке фиксирует ВЫСОТУ карточки,
     и вместе с overflow:hidden обрезало нижние поля навигатора */
  .hp-navigator{ flex:0 0 auto; width:100%; margin-top:0; }
  .hp-navigator__form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .hp-navigator__group{ grid-column:1 / -1; }
  .hp-navigator__form .hp-btn{ grid-column:1 / -1; width:100%; justify-content:center; }

  /* --- Карта (макеты 844 и 390): подложка всей секции ---
     Сцена растянута на весь блок, заголовок и кнопки лежат поверх неё,
     масштабирование и перемещение ограничены границами блока. */
  .hp-map{ min-height:100svh; padding:0; }
  .hp-map__pinch{
    order:0;
    position:absolute;
    inset:0;
    width:auto; height:auto;
    /* Верх фото стоит на --map-top ниже верха блока (читает js). Полоса над
       ним закрашена сплошным синим — срез фото под ней не виден. */
    --map-top:56px;
  }
  /* Синий градиент под заголовком — как в макете 1:51858: сплошной #0057a8
     первые ~60px, затем растворяется к 37% высоты блока. Живёт на блоке,
     а не на сцене, иначе масштабировался бы вместе с картой. */
  .hp-map__pinch::after{
    content:"";
    position:absolute;
    inset:0;
    /* Стопы между сплошной частью и затуханием добавлены не для красоты:
       при двух стопах наклон прозрачности менялся скачком с нуля на
       полный, и глаз читал этот излом как чёткую горизонтальную линию
       под шапкой. Первые шаги после сплошной части сделаны пологими —
       линия исчезает, а плотность у среза фото остаётся прежней. */
    background:linear-gradient(to bottom,
      #0057a8 0,
      #0057a8 var(--map-top),
      rgba(0,87,168,.985) calc(var(--map-top) + 14px),
      rgba(0,87,168,.93) calc(var(--map-top) + 34px),
      rgba(0,87,168,.78) 16%,
      rgba(0,87,168,.52) 23%,
      rgba(0,87,168,.26) 30%,
      rgba(0,87,168,.08) 35%,
      rgba(0,87,168,0) 37.315%);
    pointer-events:none;
  }
  /* Подложка телефона: кадр с запасом моря снизу. Бокс фото задан
     относительно сцены 1920x1080 (см. комментарий в index.html), поэтому
     пины и объекты слоёв остаются в своих координатах. Те же доли
     продублированы в js/responsive.js (PHOTO_BOX) для границ перемещения. */
  .hp-map__photo{ display:none; }
  .hp-map__photo--mobile{
    display:block;
    position:absolute;
    left:3.849%; top:0.778%;
    width:96.2%; height:113.5%;
    object-fit:fill;
  }
  .hp-map__inner{
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
    flex:1 1 auto;
    /* 94 сверху вместо 24: шапка здесь прибита к верху окна и занимает
       14…84, а заголовок стоял на 24 и целиком уходил под неё. 94 — те
       же 10px просвета под шапкой, что и в макете телефона.
       В макете горизонтальной мобилки (узел 1:46126) шапка не
       нарисована вовсе — экран начинается сразу с заголовка, поэтому
       просвет взят из соседнего макета, а не выдуман. */
    padding:94px 16px 16px;
  }
  /* 28/40 — размер и шаг строк из макета карты (узел 1:46126). */
  .hp-map__title{ order:0; padding:0; font-size:28px; line-height:40px; }
  .hp-map__filters{
    order:0;
    margin:auto 0 0;
    padding:0;
    background:none;
    border-radius:0;
    align-items:flex-start;
  }
  .hp-map__filters h3,
  .hp-map__label,
  .hp-map__checks,
  .hp-map__legend{ display:none; }
  .hp-map__filters .hp-btn{ width:auto; }
  /* в макете 844 ссылка стоит под кнопкой по левому краю */
  .hp-map__sublink{ justify-content:flex-start; padding:0; }

  /* --- Истории успеха: один слайд в кадре --- */
  .hp-success{ padding:40px 16px; }
  .hp-success__title{ font-size:28px; }
  .hp-story{ min-height:0; }
  .hp-story.is-open{ min-height:400px; }
  .hp-story__foot{ flex-wrap:wrap; gap:12px; }
  .hp-success__cta-box{ padding:16px 20px; }
  .hp-success__cta-box p{ font-size:20px; line-height:26px; }
}


/* ============================================================
   390 — мобильный вертикальный (макет node 1:56420)
   ============================================================ */
@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  .hp{ --hp-pad: 14px; }

  .hp-hero{
    min-height:100svh;
    --hero-arrow-inset:15px;
    --hero-arrow-size:38px;
    --hero-arrow-top:53%;
  }
  /* Слайд 0: герб над заголовком, по центру */
  .hp-hero__center{
    flex-direction:column;
    gap:24px;
    padding:0 24px;
    align-self:center;
    justify-content:center;
  }
  .hp-hero__logo{ width:96px; height:109px; }
  .hp-hero__title{ font-size:16px; line-height:1.35; text-align:center; }

  /* Колонка-слайд: заголовок сверху, плашки стопкой */
  .hp-hero__panel{ top:14%; gap:14px; padding:0 15px; }
  .hp-hero__panel-title{ font-size:18px; }
  .hp-hero__stats{ flex-direction:column; gap:14px; }
  .hp-hero__stat{ flex:0 0 auto; padding:14px; border-radius:20px; gap:8px; }
  .hp-hero__stat-num{ font-size:44px; letter-spacing:-3px; margin-right:-3px; }
  .hp-hero__stat-unit{ font-size:20px; }
  .hp-hero__stat-cap span{ font-size:13px; }

  .hp-hero__dots{ display:flex; }
  /* карточка новостей — только на первом слайде, как в макете */
  .hp-hero__news{
    left:14px; right:14px;
    bottom:44px;
    padding:18px;
    border-radius:16px;
    transition:opacity .25s ease;
  }
  .hp-hero:not(.is-slide-0) .hp-hero__news{ opacity:0; pointer-events:none; }
  .hp-hero__news .hp-btn{ width:100%; justify-content:center; }

  /* --- Инвестируйте: всё в колонку, фото под кнопками --- */
  .hp-invest__inner{ padding:20px 14px; gap:20px; order:1; }
  .hp-invest__photo{
    position:static;
    order:2;
    left:auto; bottom:auto;
    width:100%;
    height:300px;
    margin:0;
    overflow:hidden;
  }
  .hp-invest__photo img{
    width:100%;
    max-width:none;
    height:100%;
    object-fit:cover;
    object-position:45% bottom;
  }
  .hp-invest__body{ padding-left:0; }
  .hp-invest__title{ font-size:26px; line-height:1.25; }
  .hp-invest__top{ flex-direction:column; align-items:stretch; gap:16px; }
  .hp-invest__quote{ font-size:15px; }
  .hp-invest__sign{ align-items:stretch; }
  .hp-invest__top .hp-btn,
  .hp-invest__sign .hp-btn,
  .hp-invest__col > .hp-btn{ width:100%; justify-content:center; align-self:stretch; }

  /* Полоса «Возникли трудности…» (макет 390): логотип «Госуслуги»,
     иллюстрация, заголовок, подпись и кнопка идут одной колонкой.
     Обёртки .hp-help__inner / .hp-help__right раскрываются через
     display:contents, иначе порядок из макета собрать нечем. */
  .hp-help{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:24px 14px 28px;
  }
  .hp-help__inner,
  .hp-help__right{ display:contents; }
  .hp-help__gosuslugi{ order:1; width:170px; margin:0; }
  .hp-help__art{ order:2; position:static; width:100%; max-width:300px; height:auto; align-self:center; }
  .hp-help__text{ order:3; width:auto; gap:8px; }
  .hp-help__text h2{ font-size:22px; }
  .hp-help__text p{ font-size:15px; white-space:normal; }
  .hp-help__btn{ order:4; align-self:center; font-size:16px; padding:14px 40px; margin-top:8px; }

  /* --- Предложения: «Отрасль» над чипами, одна карточка в кадре, точки --- */
  .hp-offers{ padding:32px 0; }
  .hp-offers__head{ padding:0 14px; }
  .hp-offers__head h2{ font-size:26px; line-height:1.25; }
  .hp-offers__filters{ padding:0 14px; }
  .hp-offers__carousel{ padding:0 14px; }
  .hp-card{ flex:0 0 100%; width:100%; height:300px; }
  .hp-dots{ display:flex; }
  .hp-offers__all{ margin-top:16px; padding:0 14px; }
  .hp-offers__cta{ padding:0 14px; }
  .hp-offers__cta-box{ flex-direction:column; align-items:stretch; padding:0; background:#1666b0; }
  .hp-offers__cta-box p{ display:none; }
  .hp-offers__cta-box .hp-btn{
    width:100%;
    height:56px;
    justify-content:center;
    background:none;
    border-color:transparent;
  }
  .hp-offers__cta-box .hp-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }

  /* --- Господдержка: одна карточка в кадре, точки, навигатор колонкой --- */
  .hp-support{ padding:32px 14px; }
  .hp-support__head h2{ font-size:26px; line-height:1.25; }
  .hp-supcard{ flex:0 0 100%; width:100%; }
  .hp-supcard__body{ flex-direction:column; align-items:stretch; }
  .hp-supcard__head{ flex-direction:column-reverse; align-items:flex-start; gap:14px; }
  .hp-supcard .hp-btn{ width:100%; justify-content:center; }
  .hp-navigator__head h2{ font-size:26px; }
  .hp-navigator__form{ grid-template-columns:1fr; }
  .hp-navigator__range{ flex-direction:column; align-items:stretch; gap:10px; }
  .hp-navigator__dash{ display:none; }

  /* --- Карта: перемещается и масштабируется пальцами --- */
  /* Поле сверху 60, а не 24: шапка на телефоне прибита к верху окна и
     занимает первые 50px, а заголовок стоял на 24 и наполовину уходил
     под неё. В макете (390, узел 1:51858) шапка нарисована как полоса
     0…50, а заголовок начинается на 60 — те же 10px просвета.
     Поле снизу 14, а не 20: по макету кнопка «Перейти на карту» стоит
     на 748…795, подпись под ней заканчивается на 828 при высоте кадра
     844 — своя вёрстка держала обе на 6px выше. */
  .hp-map__inner{ padding:60px 14px 14px; }
  /* 28/41 по макету: замер по тексту заголовка дал ширину первой строки
     305px и шаг строк 41 — у 26/1.2 выходило 285 и 31. */
  .hp-map__title{ font-size:28px; line-height:41px; }
  .hp-map__filters{ gap:14px; align-items:stretch; }
  .hp-map__filters .hp-btn{ width:100%; justify-content:center; }
  .hp-map__sublink{ justify-content:center; }

  /* --- Истории успеха: одна история — один слайд --- */
  .hp-success{ padding:32px 14px; }
  .hp-success__title{ font-size:26px; }
  .hp-success__gallery{
    flex-direction:row;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    gap:0;
  }
  .hp-success__gallery::-webkit-scrollbar{ display:none; }
  .hp-story,
  .hp-story.is-open{
    flex:0 0 100%;
    width:100%;
    min-height:380px;
    scroll-snap-align:start;
    border-bottom:none;
    transition:none;
  }
  /* в слайдере раскрыты все истории: одна история — один слайд */
  .hp-story .hp-story__nav,
  .hp-story .hp-story__foot{ display:flex; opacity:1; visibility:visible; }
  .hp-story__nav{ padding:0 12px; }
  /* подпись — тёмная плашка с переносом, а не красная строка в одну линию */
  .hp-story .hp-story__label,
  .hp-story.is-open .hp-story__label{
    padding:12px 16px;
    margin:0 14px;
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    white-space:normal;
    background:rgba(0,0,0,.55);
    border-radius:8px;
  }
  /* название и сумма в одной строке, кнопки — во всю ширину под ними */
  .hp-story__foot{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:12px 16px 0;
  }
  .hp-story__name{ flex:1 1 0; min-width:0; font-size:16px; white-space:normal; }
  .hp-story__price{ flex:0 0 auto; }
  .hp-story__num{ font-size:44px; line-height:48px; letter-spacing:-3px; }
  .hp-story__unit{ font-size:16px; line-height:48px; }
  .hp-story__foot .hp-btn,
  .hp-story__foot .hp-btn:first-of-type{ flex:0 0 100%; width:100%; justify-content:center; margin-left:0; }
  .hp-success__cta-box{ flex-direction:column; align-items:stretch; text-align:center; padding:20px; }
  .hp-success__cta-box p{ font-size:20px; line-height:26px; }
  .hp-success__cta-box .hp-btn{ width:100%; justify-content:center; }
}


/* ============================================================
   390 — точная посадка по листу «мобильная актуальная» (node 1:49767).
   Размеры сняты из метаданных макета: контент 362px при полях 14px,
   заголовки экранов 30/41, подзаголовки 16/22, карточки 362 в ширину.
   ============================================================ */
@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  /* --- Инвестируйте (1:50288) ---
     заголовок в две строки с переносом после «Инвестируйте», цитата слева */
  .hp-br-mobile{ display:inline; }
  .hp-invest__title{ font-size:30px; line-height:38px; }
  .hp-invest__quote{ text-align:left; font-size:14px; line-height:20px; }
  /* базовый nowrap на подписи автора вылезал за правый край экрана */
  .hp-invest__author{ font-size:15px; line-height:20px; white-space:normal; }
  .hp-invest__sign{ gap:16px; }

  /* --- Полоса «Возникли трудности…» (1:50499) ---
     логотип 181x48 -> иллюстрация 319x324 -> текст -> кнопка 52px */
  /* шаги по вертикали из макета: 40px между блоками, 20px внутри текста */
  .hp-help{ gap:40px; padding:24px 14px 48px; }
  .hp-help__text{ gap:20px; }
  .hp-help__gosuslugi{ width:181px; }
  .hp-help__art{ max-width:319px; }
  .hp-help__text h2{ font-size:22px; line-height:34px; }
  .hp-help__text p{ font-size:16px; line-height:22px; }
  .hp-help__btn{ height:52px; padding:0 32px; margin-top:0; }

  /* --- Предложения (1:50512) --- */
  .hp-offers__head h2{ font-size:30px; line-height:41px; }
  .hp-offers__head p{ font-size:16px; line-height:22px; }
  .hp-industry__btn{ height:48px; }
  /* ряд чипов: лента + круглая кнопка «дальше» справа */
  .hp-offers__filters{ gap:14px; }
  .hp-offers__chips-row{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .hp-offers__chips{ flex:1 1 0; min-width:0; }
  .hp-offers__chips-row .hp-slide-next{ display:flex; }
  /* карточка 362x302 с тонкой светлой рамкой, как в макете */
  .hp-card{ height:302px; border:1px solid rgba(255,255,255,.35); }
  /* у карусели уже есть gap:20px — свой отступ точкам не нужен */
  .hp-offers__carousel .hp-dots{ margin-top:0; }
  .hp-offers__all{ margin-top:28px; }

  /* --- Господдержка (1:50722) --- */
  .hp-support__head h2{ font-size:30px; line-height:41px; }
  .hp-support__head p{ font-size:16px; line-height:23px; }
  .hp-supcard{ padding:25px; }
  .hp-supcard__head h3{ font-size:18px; line-height:21.5px; }
  .hp-supcard__icon{ width:48px; height:48px; }
  /* в макете счётчик под кнопкой скрыт (hidden в 1:51167) */
  .hp-supcard__stat{ display:none; }
  .hp-support__inner > .hp-dots{ margin-top:40px; }

  /* --- Навигатор (1:51318) --- */
  .hp-navigator{ padding:24px; gap:24px; }
  /* «Срок реализации» стоит выше объёма инвестиций,
     порядок в разметке: Отрасль, Тип бизнеса, Объём, Срок, Рабочие места, кнопка */
  .hp-navigator__form{ display:flex; flex-direction:column; gap:16px; }
  .hp-navigator__form > :nth-child(1){ order:1; }   /* Отрасль */
  .hp-navigator__form > :nth-child(2){ order:2; }   /* Тип бизнеса */
  .hp-navigator__form > :nth-child(4){ order:3; }   /* Срок реализации */
  .hp-navigator__form > :nth-child(3){ order:4; }   /* Объём инвестиций */
  .hp-navigator__form > :nth-child(5){ order:5; }   /* Количество рабочих мест */
  .hp-navigator__form > :nth-child(6){ order:6; }   /* кнопка */

  /* --- Карта (1:51858): подложка занимает весь экран блока --- */
  .hp-map{ min-height:100svh; }

  /* --- Истории успеха (1:52130) --- */
  /* заголовок на 24 от верха, вкладки на 68, слайдер на 142 (макет 1:52130) */
  .hp-success{ padding-top:24px; }
  .hp-success__title{ font-size:22px; line-height:1.2; margin-bottom:18px; }
  .hp-story-chips{ display:flex; }
  .hp-story,
  .hp-story.is-open{ min-height:446px; }
}


/* ============================================================
   Шапка и меню на телефоне — точно по макету 390
   (страница 1:56420, закрытая шапка 1:49914,
    открытое меню 1:54948, второй уровень 1:53776).
   Структура drill-down уже есть в style.css — здесь только геометрия,
   цвета и отступы мобильного макета.
   ============================================================ */
@media (max-width: 599px), (min-width: 600px) and (max-width: 767px) and (min-height: 600px){
  /* --- Закрытая шапка: сплошная полоса #595959 во всю ширину, 50px --- */
  .site-header{ top:0; }
  .site-header__inner{ width:100%; }
  .site-header .nav-pill{
    width:100%;
    min-height:50px;
    padding:7px 20px;
    /* row-gap 0: свёрнутое меню — вторая flex-строка нулевой высоты,
       и межстрочный зазор растягивал бы полосу с 50 до 70px */
    gap:0 20px;
    border:none;
    border-radius:0;
    background:#595959;
    box-shadow:none;
  }
  .site-header .nav-pill::before{ display:none; }   /* без стеклянного размытия */
  .site-header .nav-pill .mobile-menu-toggle,
  .site-header .nav-pill .mobile-menu-toggle img{ width:22px; height:22px; }
  .site-header .nav-pill .brand{ gap:10px; }
  .site-header .nav-pill .brand img{ width:30px; height:34px; }
  .site-header .nav-pill .brand__text{
    font-size:12px;
    font-weight:500;
    line-height:1.4;
  }

  /* --- Открытое меню: карточка rgba(46,46,46,.8), белая рамка 1px, радиус 20,
         поля 14px от краёв экрана, внутри 10px сверху / 24px по бокам и снизу --- */
  .site-header.is-menu-open{ top:14px; }
  .site-header.is-menu-open .site-header__inner{ width:calc(100% - 28px); }
  .site-header.is-menu-open .nav-pill{
    padding:10px 24px 24px;
    border:1px solid #fff;
    border-radius:20px;
    background:rgba(46,46,46,.8);
  }
  .site-header.is-menu-open .nav-pill .brand img{ width:44px; height:50px; }
  .site-header.is-menu-open .nav-pill .brand__text{ font-weight:400; }

  /* крестик 22x22 на месте бургера */
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle::before,
  .site-header .nav-pill.mobile-nav-open .mobile-menu-toggle::after{
    width:22px; height:1.6px;
  }

  /* Список: линия #ddd, пункты 16px с шагом 32px, шеврон 5x8 справа.
     В макете текст обрезан по высоте капители (12px), у нас строка 22px —
     поэтому зазоры уменьшены на полувыносы (5px), чтобы шаг совпал. */
  .site-header .nav-pill.mobile-nav-open .main-nav{ margin-top:20px; gap:30px; }
  .main-nav__list{ gap:10px; border-top:1px solid #ddd; padding-top:19px; }
  .site-header .nav-pill .main-nav .main-nav__link{ font-size:16px; line-height:1.4; }
  .site-header .nav-pill .main-nav .main-nav__item .chev{ width:8px; height:5px; }

  /* контакты: телефон, язык, иконки — через 20px (по капители) */
  .mobile-menu-contact{ margin-top:0; gap:20px; }
  .mobile-menu-phone{ font-size:16px; line-height:1.4; margin-bottom:-5px; }
  .mobile-menu-icons{ gap:24px; }
  .mobile-menu-icons .icon-btn.is-eye svg{ width:29px; height:18px; }
  .mobile-menu-icons .icon-btn.is-search svg{ width:22px; height:22px; }
  .mobile-menu-icons .icon-btn.is-user svg{ width:20px; height:24px; }

  /* --- Второй уровень (1:53776): белая линия сверху, 24px, строка «‹ Раздел»,
         ниже белая линия и пункты 16px с полем 14px; активный пункт —
         подложка rgba(65,65,65,.2) с тонкой белой рамкой --- */
  .site-header .nav-pill .main-nav .main-nav__dropdown{
    /* 24/20 в макете считаются по капители; у нас строка 22px — минус полувыносы */
    gap:15px;
    border-top:1px solid #fff;
    padding-top:17px;
  }
  .main-nav__dropdown-back{ gap:10px; }
  .main-nav__dropdown-back span{ font-size:16px; line-height:1.4; }
  .site-header .nav-pill .main-nav .main-nav__dropdown-back .chev-left{ width:8px; height:5px; }
  .main-nav__dropdown-links{ border-top:1px solid #fff; }
  .site-header .nav-pill .main-nav .main-nav__dropdown a{
    padding:14px;
    border:none;
    border-radius:0;
    font-size:16px;
    line-height:1.4;
  }
  /* рамка через outline внутрь — высота строки остаётся 50px, как в макете */
  .site-header .nav-pill .main-nav .main-nav__dropdown a:hover,
  .site-header .nav-pill .main-nav .main-nav__dropdown a:active{
    background:rgba(65,65,65,.2);
    outline:1px solid rgba(255,255,255,.7);
    outline-offset:-1px;
  }

  /* Над светлыми экранами тема шапки не меняется: на телефоне плашка
     сама тёмная, и тёмный текст на ней был бы нечитаем. */
  .site-header.on-light .brand__text{ color:#fff; }
  .site-header.on-light .mobile-menu-toggle img{ filter:none; }
  .site-header.on-light .nav-pill{ background:#595959; }
  .site-header.on-light.is-menu-open .nav-pill{ background:rgba(46,46,46,.8); }
}


/* ============================================================
   390 — точная посадка блоков по макету страницы 1:56420
   (герб-подложка 1:57301, слайдер фильтров 1:57549, плашка 1:57725,
    чипы историй 1:52923, подвал 1:60006)
   ============================================================ */
.hp-offers__cta-mobile{ display:none; }

@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  /* --- Инвестируйте: герб-подложка (1:57301) ---
     бокс 390x318 на 113px от верха блока, заполнение cover, прозрачность 8% */
  .hp-invest__watermark{
    inset:auto;
    left:0; top:113px;
    width:100%; height:318px;
    background-size:cover;
    background-position:center;
    opacity:.08;
  }

  /* --- Предложения: слайдер вкладок фильтра (1:57549) ---
     «Все» — красная 50px; остальные белые 48px; лента уходит в затухание
     к фону секции перед круглой кнопкой; зазоры 10px */
  .hp-offers__chips-row{ gap:10px; position:relative; }
  .hp-offers__chips{ gap:10px; }
  /* Затухания вплотную к стрелке: справа — пока есть что листать вправо,
     слева — когда долистали и появилась стрелка «назад» (скрин заказчика).
     Стрелка «назад» скрыта в начале, стрелка «дальше» — в конце. */
  .hp-offers__chips-row .hp-slide-prev{ display:none; }
  .hp-offers__chips-row:not(.at-start) .hp-slide-prev{ display:flex; }
  .hp-offers__chips-row.at-end .hp-slide-next{ display:none; }
  /* Затухание краёв ленты — маской на самой ленте (см. .hp-offers__chips) */
  .hp-offers__chips-row:not(.at-start) .hp-offers__chips{ --fade-l:50px; }
  .hp-offers__chips-row:not(.at-end) .hp-offers__chips{ --fade-r:50px; }
  .hp-chip{ height:48px; padding:14px; font-size:14px; line-height:20px; color:#333; }
  .hp-chip.is-active{ height:50px; }

  /* --- Предложения: вертикальный ритм макета (1:57523) ---
     заголовок 24 → фильтры 162 → «Отрасль» 48 → 20 → вкладки 50 → 20 →
     карточка 302 → 20 → точки → 20 → кнопка 48 → 24 → плашка 48 → 24 */
  .hp-offers{ padding:24px 0 24px; }
  .hp-offers__filters{ margin-top:24px; gap:20px; }
  .hp-offers__carousel{ margin-top:20px; }
  .hp-offers__all{ margin-top:20px; }

  /* --- Плашка «Подобрать площадку под проект» (1:57725) ---
     362x48, радиус 10, синий #1666b0, вензель 157x202 по центру, текст 18px */
  .hp-offers__cta{ margin-top:24px; padding:0 14px; }
  .hp-offers__cta-box{
    display:block;
    height:48px;
    padding:0;
    border-radius:10px;
    background:#1666b0;
    box-shadow:none;
  }
  .hp-offers__cta-box p,
  .hp-offers__cta-box .hp-btn{ display:none; }
  .hp-offers__cta-box .hp-cta__art{
    top:50%; left:calc(50% - .5px); right:auto;
    width:157px; height:202px;
    transform:translate(-50%,-50%);
  }
  .hp-offers__cta-mobile{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    height:48px;
    padding:0 24px;
    color:#fff;
    font-weight:500;
    font-size:18px;
    line-height:1.4;
    white-space:nowrap;
    filter:drop-shadow(0 8px 5px rgba(0,0,0,.1));
  }
  .hp-offers__cta-mobile .hp-btn__arrow{ width:10px; height:10px; }
  .hp-offers{ padding-bottom:24px; }

  /* --- Истории успеха: слайдер вкладок (1:52923) ---
     активная #14439e 50px, остальные #e8e8e8, затухание к фону #f8fafc */
  .hp-story-chips{ position:relative; gap:10px; margin-bottom:24px; }
  .hp-story-chips__track{ gap:10px; }
  .hp-story-chips__track button{
    height:50px;
    padding:5px 14px;
    max-width:251px;
    background:#e8e8e8;
    white-space:normal;
  }
  .hp-story-chips__track button.is-active{ background:#14439e; }
  .hp-story-chips .hp-slide-prev{ display:none; }
  .hp-story-chips:not(.at-start) .hp-slide-prev{ display:flex; }
  .hp-story-chips.at-end .hp-slide-next{ display:none; }
  .hp-story-chips::before,
  .hp-story-chips::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:50px;
    pointer-events:none;
  }
  .hp-story-chips::after{
    right:40px;
    background:linear-gradient(90deg, rgba(248,250,252,0) 0%, #f8fafc 100%);
  }
  .hp-story-chips::before{
    left:40px;
    background:linear-gradient(270deg, rgba(248,250,252,0) 0%, #f8fafc 100%);
  }
  .hp-story-chips.at-start::before,
  .hp-story-chips.at-end::after{ display:none; }

  /* --- Подвал (1:60006) ---
     поля 25/14/24; герб + текст 10px; ниже две колонки через 14px:
     слева телефон, почта (строки 20px) и соцсети; справа «Карта сайта»,
     «Политика конфиденциальности» и внизу «Создание сайта - …» 9px */
  .site-footer{ padding:25px 14px 24px; border-top:1px solid #e2e8f0; }
  .site-footer__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "brand  brand"
      "phone  site"
      "mail   policy"
      "social dev";
    column-gap:14px;
    row-gap:0;
    align-items:start;
  }
  .footer-brand{ grid-area:brand; gap:10px; margin-bottom:20px; }
  .footer-brand img{ width:44px; height:50px; }
  .footer-brand__text{ font-size:10px; line-height:1.3; }
  .footer-item{ font-size:10px; line-height:20px; gap:8px; }
  .footer-item img{ width:14px; height:14px; }
  .footer-item:not(a){ grid-area:phone; }
  a.footer-item{ grid-area:mail; }
  .footer-social{ grid-area:social; gap:8px; margin-top:13px; }
  .footer-social img{ height:12px; }
  .footer-link{ font-size:10px; line-height:20px; }
  .footer-link{ grid-area:site; }
  .footer-link + .footer-link{ grid-area:policy; }
  .footer-dev{ grid-area:dev; align-self:end; font-size:9px; line-height:16px; display:block; white-space:nowrap; }
  .footer-dev__sep{ display:inline; }
}


/* ============================================================
   390 — доводка «Инвестируйте» и «Господдержка» по макету 1:56420
   (колонка 1:57301, фото 1:57508, карточка 1:58132)
   ============================================================ */
@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  /* --- Инвестируйте: все зазоры колонки 24px, как в макете --- */
  .hp-invest__inner{ gap:24px; padding-bottom:24px; }
  .hp-invest__col{ gap:24px; }
  .hp-invest__sign{ gap:24px; }
  .hp-invest__top{ gap:24px; }

  /* Фото Главы (1:57508): кадр 452x301, снимок 431.8x325.8 с наклоном 5.14
     градуса; правый край кадра уходит за экран и обрезается секцией.
     Ширина не 452px, а доля экрана: 452/390 из макета. На 390 кадр
     ровно 452x301 как в макете, а на узких телефонах он ужимается
     вместе с экраном и срезается та же доля кадра (13,7%), а не
     треть, как было при жёстких 452 на 320. */
  .hp-invest__photo{
    position:relative;
    order:2;
    width:calc(100% * 452 / 390);
    height:auto;
    aspect-ratio:452 / 301;
    margin:0;
    overflow:hidden;
  }
  /* готовый кадр 452x301 от заказчика (Frame 738) — ставится как есть */
  .hp-invest__photo img{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    max-width:none;
    object-fit:fill;
    transform:none;
  }

  /* «Напишите, чтобы быстро получить ответ» — 18px, как в макете */
  .hp-help__text p{ font-size:18px; line-height:22px; }

  /* --- Господдержка: подзаголовок -> карточка ровно 24px --- */
  .hp-support__inner{ gap:24px; }
  .hp-support__grid{ margin-top:0; }

  /* Карточка (1:58132): иконка 48 -> 24 -> заголовок 20px Medium ->
     20 -> описание 18px -> 30 -> список 14px Regular (5px между
     пунктами) -> 40 -> красная кнопка на всю ширину */
  .hp-supcard__head{ gap:24px; }
  .hp-supcard__head h3{ font-size:20px; line-height:1.4; font-weight:500; }
  .hp-supcard__col{ gap:0; }
  .hp-supcard__desc{ font-size:18px; line-height:1.4; margin-bottom:30px; }
  .hp-supcard__list{ font-weight:400; margin-bottom:40px; }
  .hp-supcard__list li + li{ margin-top:5px; }
}

/* Анимация карточек господдержки в мобильной ленте: активная карточка
   в полном размере, соседние слегка отъезжают назад — при листании
   пальцем карточка плавно «выходит вперёд» (класс is-active ставит js) */
@media (max-width: 767px), (max-width: 844px) and (max-height: 599px){
  .hp-supcard.hp-reveal.is-in{ transform:scale(.95); }
  .hp-supcard.hp-reveal.is-in.is-active{ transform:scale(1); }
}


/* ============================================================
   Мобильные версии: у карточек лент нет эффектов наведения —
   при листании пальцем «ховер» залипал бы на тапе. На пк всё остаётся.
   ============================================================ */
@media (max-width: 767px), (max-width: 844px) and (max-height: 599px){
  /* Инвестиционные предложения */
  .hp-card:hover .hp-card__media img{ transform:none; }
  .hp-card__title:hover{ color:inherit; text-decoration:none; cursor:default; }
  /* Господдержка */
  .hp-supcard__head h3:hover{ color:#000002; cursor:default; }
  /* Истории успеха */
  .hp-story:hover .hp-story__photo{ transform:none; }
  .hp-story__name:hover{ text-decoration:none; cursor:default; }
  .hp-story:not(.is-open):hover .hp-story__label{ text-decoration:none; cursor:default; }
  .hp-story:not(.is-open):hover .hp-story__veil{ background:rgba(0,0,0,.6); }
}


/* ============================================================
   390 — карточка истории успеха точно по макету (узел 1:59942):
   плашка категории прижата к левому краю (радиус только справа),
   стрелки по краям, подвал с линией #ddd, имя 18, сумма 54 Thin,
   две красные кнопки 48px с текстом 12px через 14px.
   ============================================================ */
@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  .hp-story,
  .hp-story.is-open{ padding:24px 0 25px; min-height:446px; }

  /* затемнение: сверху прозрачно, к низу 80% чёрного с размытием */
  .hp-story .hp-story__veil,
  .hp-story.is-open .hp-story__veil{
    background:linear-gradient(to bottom, rgba(0,0,0,0) 15.242%, rgba(0,0,0,.8) 100%);
    backdrop-filter:blur(12.5px);
    -webkit-backdrop-filter:blur(12.5px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 15.242%, #000 100%);
            mask-image:linear-gradient(to bottom, transparent 15.242%, #000 100%);
  }

  /* Плашка категории (замеры по макету 1:59137, кадр карточки 362x446):
     верх плашки на 42 от верха карточки, ширина 263 — по ней подпись
     ложится в две строки с переносом после «проекты», как в макете
     (при прежних 338 на первой строке помещалось лишнее слово);
     высота 59 = две строки 19,6 и поля по 10; подложка размыта. */
  .hp-story .hp-story__label,
  .hp-story.is-open .hp-story__label{
    margin:18px 0 0;
    padding:10px 20px;
    max-width:min(263px, calc(100% - 24px));
    background:rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(8px);
            backdrop-filter:blur(8px);
    border-radius:0 10px 10px 0;
    font-size:14px;
    font-weight:500;
    line-height:1.4;
  }

  /* стрелки по краям кадра */
  .hp-story__nav{ padding:0 24px; }

  /* Подвал слайда: линия #ddd, поля 24, зазоры 14.
     Линия по макету стоит на 238 от верха карточки, а не на 222:
     сдвигаем сам подвал на 16 вниз и на столько же убираем верхнее
     поле, чтобы имя, сумма и кнопки остались на своих местах
     (кнопки в макете ровно на 311 и 373 — совпадают до пикселя). */
  .hp-story__foot{
    gap:14px;
    margin-top:16px;
    padding:4px 24px 0;
    border-top:1px solid #ddd;
  }
  /* Имя слева, сумма справа. Ширина имени ограничена: в макете
     «Мрия Резорт & Спа» стоит в две строки («Мрия Резорт» 112 и
     «& Спа» 47, шаг строк 22), у нас же имя влезало в одну строку
     на 173. Колонка в 130 даёт тот же перенос. */
  .hp-story__name{ max-width:130px; font-size:18px; font-weight:500; line-height:1.2; }
  .hp-story__price{ gap:10px; margin-left:auto; }
  .hp-story__num{ font-weight:100; font-size:54px; line-height:54px; letter-spacing:-6px; margin-right:-6px; }
  .hp-story__unit{ font-weight:300; font-size:20px; line-height:54px; }
  .hp-story__foot .hp-btn,
  .hp-story__foot .hp-btn:first-of-type{ height:48px; font-size:12px; }
}


/* ============================================================
   Доводки: 1024 (клик по колонке героя), навигатор и господдержка
   на телефоне, слайды историй раскрыты всегда
   ============================================================ */

/* 1024 (планшет): при клике на колонку слайдера открывается её
   информация — фото и плашки, как в макете 1:43775. Класс is-hover
   ставит js по клику (на десктопе то же самое делает :hover). */
@media (min-width: 768px) and (max-width: 1024px), (min-width: 601px) and (max-width: 767px) and (max-height: 599px){
  .hp-hero__col.is-hover .hp-hero__col-bg{ display:block; opacity:1; }
  .hp-hero__col.is-hover .hp-hero__panel{
    display:flex;
    visibility:visible;
    transform:none;
  }
  .hp-hero__col.is-hover .hp-hero__panel-title,
  .hp-hero__col.is-hover .hp-hero__panel .hp-hero__stat{ opacity:1; }
  .hp-hero__col.is-hover .hp-hero__label{ opacity:0; }
}

@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  /* Навигатор: фото-подложка растянута точно в кадр макета (1:58625):
     left 33.73%, top 21.84%, 132.67% x 88.01%, без сохранения пропорций */
  .hp-navigator__watermark{ object-fit:fill; }

  /* Господдержка: без вертикальной прокрутки внутри ленты карточек.
     Причина прокрутки — карточки до всплытия сдвинуты на 32px вниз
     (анимация hp-reveal) и распирали ленту по вертикали. */
  .hp-support__grid{ overflow-y:hidden; }
  .hp-supcard,
  .hp-supcard__body,
  .hp-supcard__col{ overflow:visible; }
  .hp-supcard{ height:auto; }

  /* лента -> точки: ровно 40px, как в макете (24px зазор колонки + 16) */
  .hp-support__inner > .hp-dots{ margin-top:16px; }

  /* Слайды историй раскрыты всегда: стрелки и подвал видны у каждого
     слайда (правило ≤1024 прятало их у нераскрытых — его специфичность
     выше, поэтому здесь тот же :not-селектор) */
  .hp-story:not(.is-open) .hp-story__nav,
  .hp-story:not(.is-open) .hp-story__foot{
    display:flex;
    opacity:1;
    visibility:visible;
  }
}


/* ============================================================
   845–1024 — точная посадка планшета (макет 1:39229), СТРОГО отдельным
   диапазоном: блок @media (max-width:1024px) выше общий для 1024/844/390,
   а часть значений макета 1024 отличается от уже сверстанного 844
   (там ниже своя, самостоятельная раскладка) — если писать их в общий
   блок, они потекут вниз и сломают 844. Здесь — только то, что 844
   САМ не переопределяет заново.
   ============================================================ */
@media (min-width: 845px) and (max-width: 1024px), (min-width: 768px) and (max-width: 844px) and (min-height: 600px){
  /* Макет планшета рассчитан на полные 1024px без вычета ширины нативной
     полосы прокрутки. Скрываем только её визуальную дорожку: прокрутка
     колёсиком, клавиатурой и жестами остаётся доступной. Это возвращает
     контентной области точные 904px (1024 - 2 * 60). */
  html{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  html::-webkit-scrollbar{ width:0; height:0; }

  /* --- Запас под шапку ---
     Шапка — фиксированная плашка: top 20px + высота 70px, то есть первые
     90px экрана перекрыты всегда. Постраничное листание ставит верх секции
     вровень с верхом окна, и заголовки уходили под плашку (карта — на 58px,
     «Инвестируйте» — на 50, остальные — на 30). Контент каждой секции
     начинается на 150px от её верха — та же величина, что и на десктопе
     (padding-top секций и .hp-*__header-space), под плашкой остаётся 60px.
     У карты заголовок вынесен накладкой на top:150px (см. блок «ЭКРАН =
     1366» ниже), поэтому здесь его нет. */
  .hp-invest__inner{ padding-top:150px; }
  .hp-offers{ padding-top:150px; }
  .hp-support{ padding-top:150px; }
  .hp-success{ padding-top:150px; }

  /* --- Герой: герб и заголовок не едут вместе с колонками ---
     .hp-hero__center лежит внутри .hp-hero__cols (на 844/390 это отдельный
     слайд, из разметки его не вынести), а здесь колонки — контейнер
     горизонтального скролла. Абсолютный слой ехал с ним, потому что скролл-бокс
     был его containing block. Делаем колонки статичными: containing block
     поднимается на .hp-hero, и скролл-бокс такой слой уже не двигает и не режет.
     Геометрия та же, что у inset:0 — у .hp-hero нет полей, а колонки внутри
     него единственные в потоке (новости и стрелки абсолютны); высота
     повторяет его min-height из блока ≤1024. */
  .hp-hero__cols{
    position:static;
    width:100%;
    height:max(640px, 100svh);
  }

  /* --- Шапка: бургер-пилюля по макету 1024 (узел 1:40383) ---
     тот же rgba(169,169,169,.4)+белая рамка, что у 1440/1920, но темнее
     (там .55/rgba(255,255,255,.5)); на светлых экранах (invest и т.п.,
     класс .on-light) — rgba(0,0,0,.2). Высота/паддинги/gap пилюли и
     правого блока (телефон-язык-иконки) уже верны из блока ≤1600.
     Обычную ==844 шапку (тоже бургер, но её собственные rgba(169,169,169,.55))
     не трогаем — здесь диапазон её не достаёт. */
  .site-header .nav-pill{
    background: rgba(169,169,169,.4);
    border-color: #fff;
  }
  .site-header.on-light .nav-pill{
    background: rgba(0,0,0,.2);
  }
  /* правый блок (телефон/язык/иконки) — только размытие фона, без плашки */
  .site-header .header-side{
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  /* --- Инвестируйте: кнопка «Читать декларацию» переходит из строки
     с заголовком в стопку с цитатой (макет 1024 — 1:39554). top становится
     «прозрачным»: заголовок и кнопка — прямые элементы .hp-invest__inner
     с тем же зазором 40px, что и у всей колонки; кнопка прижимается вправо
     сама, заголовок остаётся слева (обычный block). На 844/390 своя
     раскладка top (заголовок+фото рядом) — там display остаётся flex. */
  .hp-invest__top{ display:contents; }
  .hp-invest__top > .hp-btn{ align-self:flex-end; }

  /* Фото Главы — полоса с наклоном 5.14° (узел 1:39609/1:39610), другая
     геометрия, чем у 844/390 (там простой кадр без поворота). Числа:
     внешняя обёртка 892.46x705.7 центрирует внутренний кадр 839.114x633.057
     (отступы (892.46-839.114)/2=26.5 и (705.7-633.057)/2=36.3), сложенные
     с исходным left:18/bottom:-99.7 макета — итог left:44.5, bottom:-63.7. */
  .hp-invest__photo{
    position:relative;
    /* базовый bottom:186px только СДВИГАЛ фото вверх, оставляя под ним
       пустое место той же высоты — секция не заканчивалась вместе с фото.
       Отрицательный margin поднимает фото вместе с его местом в потоке,
       и полоса «Возникли трудности…» встаёт вплотную (макет 1:39609). */
    bottom:auto;
    width:100%;
    height:554px;
    margin:-186px 0 0;
    overflow:hidden;
  }
  .hp-invest__photo img{
    position:absolute;
    left:44.5px;
    bottom:-63.7px;
    width:839.114px;
    height:633.057px;
    max-width:none;
    object-fit:cover;
    object-position:center bottom;
    transform:rotate(5.14deg);
  }

  /* --- Предложения: заголовок 40px (макет 1024) — 844 этот h2 не
     переопределяет, поэтому его нельзя чинить в общем блоке ≤1024 */
  .hp-offers__head h2{ font-size:40px; }

  /* --- Предложения: лента вкладок со стрелкой и затуханием (1:40736) ---
     В макете sticky-часть занимает 713px, поле «Отрасль» — 191px, между
     ними нет дополнительного gap. Внутри sticky-части между лентой и
     круглой стрелкой остаётся 10px. */
  /* 32 между круглой стрелкой ленты вкладок и плашкой «Отрасль» —
     по макету. Было 0: плашка примыкала к стрелке вплотную. */
  .hp-offers__filters{ gap:32px; }
  .hp-offers__chips-row{ position:relative; gap:10px; }
  .hp-offers__chips-row .hp-slide-next{ display:flex; }
  .hp-offers__chips-row.at-end .hp-slide-next{ display:none; }
  .hp-offers__chips-row .hp-slide-prev{ display:none; }
  .hp-offers__chips-row:not(.at-start) .hp-slide-prev{ display:flex; }
  /* Затухание краёв ленты — маской на самой ленте (см. .hp-offers__chips) */
  .hp-offers__chips-row:not(.at-start) .hp-offers__chips{ --fade-l:123px; }
  .hp-offers__chips-row:not(.at-end) .hp-offers__chips{ --fade-r:123px; }

  /* --- Плашки CTA «Поможем подобрать площадку» / «Станьте инвестором»:
     фикс. высота 100px, зазор 40, поля 40 по бокам, текст 24/36 (узлы
     1:41114 и success-CTA — тот же компонент). 844 переопределяет только
     padding; gap/height/типографику эта карусель со скроллом теряет
     без явного значения. */
  .hp-offers__cta-box,
  .hp-success__cta-box{
    height:100px;
    gap:40px;
    padding:0 40px;
  }
  .hp-offers__cta-box p,
  .hp-success__cta-box p{
    font-size:24px;
    line-height:36px;
  }

  /* --- Господдержка: в макете 1024 (узлы 1:41631/1:41632/1:41634) числа
     в карточках скрыты — остаются только текст и кнопка. На 844 они видны,
     поэтому правило живёт здесь, а не в общем блоке ≤1024. */
  .hp-supcard__stat{ display:none; }

  /* --- Карта (макет Group 600) ---
     Кадр 1024x762 вырезан из картинки 16:9, т.е. карта показана в 1.322
     ширины блока; верх кадра стоит на 50px ниже верха окна, и этот срез
     закрывает сплошная синяя полоса градиента. */
  .hp-map__pinch{
    --map-top:50px;
    height:calc(74.4vw + 50px);
  }
  /* Тёмно-синий градиент поверх карты: сплошной до верхней кромки кадра,
     дальше растворяется в цвет моря #84cef8 (пипетка по макету: сплошной
     до 150px секции, прозрачный к 615px). Лежит на окне, а не на сцене,
     иначе масштабировался бы вместе с картой. */
  .hp-map__pinch::after{
    content:"";
    position:absolute;
    inset:0;
    /* Пологие первые стопы — иначе на стыке сплошной части и затухания
       виден излом в виде горизонтальной линии (см. телефонный блок). */
    background:linear-gradient(to bottom,
      #0057a8 0,
      #0057a8 var(--map-top),
      rgba(0,87,168,.985) calc(var(--map-top) + 14px),
      rgba(0,87,168,.93) calc(var(--map-top) + 34px),
      rgba(0,87,168,.78) 28%,
      rgba(0,87,168,.52) 40%,
      rgba(0,87,168,.26) 52%,
      rgba(0,87,168,.08) 60%,
      rgba(0,87,168,0) 64%);
    pointer-events:none;
    z-index:1;
  }
  /* тот же градиент продолжается вверх, под заголовок секции */
  .hp-map{
    background-image:linear-gradient(to bottom, #0057a8 0, #0057a8 150px, rgba(0,87,168,0) 615px);
  }

  /* --- Истории успеха: подпись свёрнутой полосы стоит по центру её
     высоты (макет 1024). В свёрнутом состоянии в потоке остаётся только
     подпись, а базовый justify-content:space-between прижимал её к верху. */
  .hp-story:not(.is-open){ justify-content:center; }


  /* ============================================================
     ЭКРАН = 1366 (макет «1024 планшет», node 1:39229)
     ------------------------------------------------------------
     В макете шесть экранов ровно по 1366px. Контент каждого лежит в
     полосе 150…1326: сверху 150 под плавающую шапку (плашка 40+70),
     снизу поле 40. Ниже — высоты и зазоры блоков по числам макета,
     чтобы содержимое экрана в него помещалось и не наезжало на
     следующий. Высота задана числом, а не 100svh: экран макета — 1366
     независимо от того, какой высоты окно у зрителя.
     ============================================================ */
  .hp-invest,
  .hp-offers,
  .hp-support,
  .hp-map,
  .hp-success{ min-height:1366px; }

  /* --- Инвестируйте (Group 601) ---
     Полоса фото 554 (662…1216) и полоса «Возникли трудности» 150
     (1216…1366) прижаты к низу экрана, текст лежит поверх фото —
     цитата и кнопки прижаты вправо, портрет уходит влево. */
  .hp-invest{ position:relative; display:block; }
  .hp-invest__inner{ padding-bottom:0; }
  .hp-invest__photo{
    position:absolute;
    left:0; right:0; bottom:150px;
    width:auto; height:554px;
    margin:0;
  }
  .hp-invest .hp-help{
    position:absolute;
    left:0; right:0; bottom:0;
    height:150px;
    padding:0 var(--hp-pad);
  }
  .hp-invest .hp-help__inner{ height:100%; }
  /* текст — 364px по макету (узел 1:39613): на всю ширину он подлезал
     под иллюстрацию, которая стоит на 454 */
  .hp-invest .hp-help__text{ flex:0 0 364px; }
  /* 22/18 по макету (узлы 1:39614 и 1:39615): из блока ≤1600 сюда
     затекали 26/20, и заголовок в колонке 364 ломался на три строки —
     текст не помещался в полосу 150px */
  .hp-invest .hp-help__text h2{ font-size:22px; line-height:27px; }
  .hp-invest .hp-help__text p{ font-size:18px; line-height:22px; }
  /* иллюстрация — накладкой по координатам макета (узел 1:39641),
     в потоке она распирала полосу до 255px */
  /* Картинка стоит в просвете между текстом и кнопкой. Привязка к
     правому краю (1024 - 571 = 453), а не left:454: правый блок с
     кнопкой прижат к правому краю и на планшетах поуже уезжает влево,
     а картинка при жёстком left оставалась на месте и налезала на
     кнопку (на 768 перекрытие 117x50). */
  .hp-invest .hp-help__art{
    position:absolute;
    left:auto; right:453px; top:16px;
    width:117px; height:auto;
  }
  /* Кнопка «Написать» по макету планшета: 129x50 на 617 от левого края
     (замер по узлу 1:39230). Из блока ≤1600 сюда затекали шрифт 20 и
     поля 22/40 — кнопка выходила 176x68 и, будучи прижатой к правому
     краю вместе с логотипом, начиналась на 571. */
  .hp-invest .hp-help__btn{ font-size:16px; padding:15px 26px; }

  /* --- Предложения (экран «4») ---
     150 шапка → 78 заголовок → 40 → фильтры 50 → 20 → сетка 780
     (два ряда по 380 + зазор 20) → 20 → «Все предложения» 48 →
     40 → плашка CTA 100 → 40 поле. */
  .hp-offers{ padding-bottom:40px; }
  .hp-offers__carousel{ margin-top:20px; }
  .hp-offers__all{ margin-top:20px; }
  /* minmax, а не жёсткие 380: на 1024 карточка ровно 380 как в макете,
     но на планшетах поуже (768-834) строки свойств переносятся на две
     строки, и содержимое вылезало из карточки на 19px. */
  .hp-offers__track{ grid-template-rows:repeat(2, minmax(380px, auto)); }
  /* Карточка проекта в макете 1024 (узел 1:40774) — 382x380:
     кадр 171, дальше поле 20, заголовок в две строки 50, отступ 16,
     три строки свойств 101 и поле 20. Своя вёрстка тянула сюда
     настольные размеры — кадр 192 и место под три строки заголовка 75,
     и содержимое вылезало из карточки на 47px: последняя строка
     «Инвестиционные площадки» уходила под нижнюю кромку и обрезалась.
     171 + 1 + 20 + 50 + 16 + 101 + 20 + 1 = 380. */
  .hp-card__media{ height:171px; }
  .hp-card__title{ height:50px; }

  /* --- Господдержка (экран «5») ---
     150 → шапка 126 → 40 → две колонки по 1010 → 40 поле.
     Ряды карточек заданы числом: при auto они тянулись по контенту
     и колонка вырастала до 1096. */
  .hp-support{ padding-bottom:40px; }
  /* 20 своих + 20 зазора сетки = 40 по макету */
  .hp-support__head{ margin-bottom:20px; }
  /* minmax, а не жёсткие 322.66: ровно на 1024 карточки занимают 320 и
     ряд остаётся 322.66 — экран в 1366 как в макете. Но уже на 1000 и
     уже текст переносится на строку больше, карточка вырастает до
     360-406 и наезжала на соседнюю. Нижняя граница держит макет,
     верхняя даёт ряду вырасти там, где содержимому тесно. */
  .hp-support__inner{ grid-template-rows:auto repeat(3, minmax(322.66px, auto)); }
  /* Карточка в макете 442x323,33 (поля 24, шапка 48, зазор 20, тело 207).
     Своя вёрстка была на 352 и вылезала из ряда на соседнюю карточку —
     подтягиваем три величины: поля, высоту строки заголовка (иконка
     48px задаёт высоту шапки) и зазор внутри тела. */
  .hp-supcard{ padding:20px 24px; }
  .hp-supcard__head h3{ line-height:24px; }
  .hp-supcard__col{ gap:12px; }
  .hp-navigator{ padding:24px; }
  /* Плашка навигатора не помещалась в свои два ряда сетки (703 против
     665) и наезжала на карточку под собой на 17px.
     Причина — обёртка <picture> у водяного знака: сама картинка внутри
     position:absolute и места не занимает, но обёртка остаётся обычным
     элементом колонки, и между ней и заголовком добавлялся полный
     зазор в 40px. Отсюда 64px над заголовком вместо 24px поля.
     Убираем зазор колонки и задаём расстояние заголовок-форма явно:
     24 поле + 133 заголовок + 40 + 442 форма + 24 поле = 663. */
  .hp-navigator{ gap:0; }
  .hp-navigator__form{ margin-top:40px; }

  /* --- Карта (Group 600) ---
     Заголовок лежит НАКЛАДКОЙ на синей заливке (макет: и заголовок,
     и кадр карты начинаются на 150) — в потоке он занимал ещё 218px
     и утягивал карту вниз. Кадр 150…912, панель фильтров 901…1174
     (наезжает на нижнюю кромку кадра на 11px, как в макете),
     легенда 1198…1326, поле 40. */
  .hp-map{ padding:0 0 40px; position:relative; }
  .hp-map__title{
    position:absolute;
    left:0; right:0; top:150px;
    margin:0;
    padding:0 var(--hp-pad);
    z-index:2;
  }
  /* верхние 50px кадра — срез под сплошной синей полосой (--map-top),
     поэтому сам блок начинается на 100, а картинка — на 150 */
  .hp-map__pinch{ margin-top:100px; }
  /* Панель фильтров 273: 24 + 17 заголовок + 20 + 20 подпись + 20 +
     80 чекбоксы + 20 + 48 кнопка + 24. Кнопка и ссылка «Крым на
     Инвестиционной карте РФ» стоят в одной строке (в макете это один
     ряд 558x48) — колонкой они добавляли лишние 40px. */
  .hp-map__filters{
    margin:-11px var(--hp-pad) 0;
    /* панель заходит на кадр карты на 11px, а у .hp-map__pinch есть свой
       контекст наложения (z-index:0) — карта закрашивала верхние 11px
       панели, и её верхние углы выглядели срезанными. Поднимаем панель,
       чтобы скругление 20px читалось одинаково со всех четырёх сторон. */
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:auto 1fr;
    row-gap:20px;
    column-gap:24px;
    align-items:center;
  }
  .hp-map__filters > h3{ font-size:14px; line-height:17px; }
  .hp-map__filters > h3,
  .hp-map__filters .hp-map__label,
  .hp-map__filters .hp-map__checks{ grid-column:1 / -1; }
  .hp-map__filters .hp-btn{ grid-column:1; justify-self:start; }
  .hp-map__filters .hp-map__sublink{ grid-column:2; justify-self:start; }
  .hp-map__legend{ margin-top:24px; }

  /* --- Истории успеха (экран «7») ---
     150 → заголовок → 29 → галерея 967 (раскрытый слайд 655 + три
     свёрнутых по 104) → 40 → плашка CTA 100 → 40 поле. */
  .hp-success{ padding-bottom:40px; }
  .hp-success__title{ margin-bottom:29px; }
}


/* ============================================================
   390 — доводки по замечаниям (макет node 1:56420)
   ============================================================ */
@media (max-width: 600px), (min-width: 601px) and (max-width: 767px) and (min-height: 600px){
  /* --- Господдержка: карточки появляются без анимации ---
     Карточки лежат в горизонтальной ленте со свайпом, а всплытие
     hp-reveal висит на IntersectionObserver и отрабатывает заново на
     каждую карточку, въезжающую в кадр, — с каскадной задержкой,
     которую js ставит инлайном. На телефоне это читалось как рывок
     при листании, поэтому показываем карточки сразу.
     transition:none обнуляет и инлайновую задержку: без transition-
     property переход не запускается вовсе. */
  .hp-supcard.hp-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  /* --- Предложения: карточки — слайдер по одной в кадре (макет 1:57569) ---
     Ниже в этом же файле есть .hp-card{ flex:0 0 100% }, но правило
     .hp-offers__track .hp-card из блока ≤1600 (четыре карточки в кадре
     на 1440) специфичнее и затекало на телефон: карточка получала
     flex-basis 25% и сжималась до 76px вместо ширины экрана. */
  .hp-offers__track .hp-card{ flex:0 0 100%; }
}


/* ============================================================
   601–844 — мобильный горизонтальный, доводка по макетам
   1:55717 (слайд с гербом) и 1:56050 (слайд со статистикой)
   ------------------------------------------------------------
   Диапазон задан строго: общий блок @media (max-width:844px) выше
   захватывает и телефон, а на 390 своя раскладка — её не трогаем.
   Числа сняты с макетов 844x390 промером по пикселям.
   ============================================================ */
@media (min-width: 601px) and (max-width: 844px) and (max-height: 599px){
  /* Плашка шапки: в макете она от края экрана на 14px и начинается
     на 14 сверху (промер: рамка занимает x 14..829, y 14..83).
     Базовые значения давали 24 по бокам и 20 сверху. Высота 70 верна. */
  .site-header{ top:14px; }
  .site-header__inner{ width:calc(100% - 28px); }

  /* Первый слайд: группа «герб + заголовок» в макете уже.
     Герб — 61x69 (промер красного поля герба относительно такого же
     герба в шапке), заголовок — 18px при межстрочном 25.
     Было 70x80 и 20px, из-за чего группа была шире макетной на 37px. */
  .hp-hero__logo{ width:61px; height:69px; }
  .hp-hero__title{ font-size:18px; line-height:25px; }

  /* Заголовок слайда со статистикой: высота прописных 10px -> 14px. */
  .hp-hero__panel-title{ font-size:14px; }

  /* Карточка новостей. В макете она занимает 200..374 по вертикали при
     экране 390 и отстоит от боков на 20. Поля внутри разные: 20 сверху и
     снизу (из них складывается высота 174) и 15 по бокам — по ним кнопка
     «Читать все новости» встаёт на 35..808, как в макете.
     Было: поля 14/16, зазор 10, отступ снизу 14 — карточка выходила
     на 160px и начиналась на 16px ниже макета. */
  .hp-hero__news{
    left:20px; right:20px;
    bottom:15px;
    padding:20px 15px;
    gap:12px;
  }
}

/* Ровно на 600px по ширине шапка ещё в «настольном» виде — плавающая
   плашка 20…90 (её мобильная полоса включается с 599 и ниже), а блок
   правил карты для телефона начинается с 600. На этой единственной
   ширине заголовок с полем в 60 попадал под плашку. Возвращаем здесь
   поле планшетной ленты. */
@media (min-width: 600px) and (max-width: 844px) and (max-height: 599px){
  .hp-map__inner{ padding-top:94px; }
}

/* ============================================================
   Полоса «Возникли трудности…»: иллюстрация не наезжает на кнопку
   ============================================================
   Иллюстрация стоит абсолютно и привязана к середине полосы
   (left: 50% + 304 — координата из макета 1920). Правый блок с
   кнопкой «Написать» и логотипом Госуслуг, наоборот, прижат к правому
   краю, поэтому с сужением окна он едет влево, а картинка стоит на
   месте — и с 1768 и ниже она оказывалась поверх кнопки (на 1440
   перекрытие 116x68, то есть кнопка была накрыта целиком).
   Ниже — привязка картинки к правому блоку и ограничение ширины
   текста, чтобы между ними осталось место. Зазоры по 14.
   Правый блок: 442 при кнопке 225 (шрифт 24) и 393 при кнопке 176
   (шрифт 18 в блоке ≤1600). 60 — боковое поле полосы. */
@media (min-width: 1601px) and (max-width: 1768px){
  .hp-help__text{ max-width:calc(100% - 612px); }   /* 442 блок + 170 под картинку */
  .hp-help__art{ left:auto; right:516px; transform:translateY(-50%); }
}
/* 1025-1600 — по макету 1440 (узел 1:37785, полоса 1440x186):
   текстовый блок 485 (заголовок в две строки 68, подпись 29, зазор
   14,5), правый блок 442,25 тех же размеров, что и на 1920 (кнопка
   224,75x87 и логотип 217,5), картинка 142x143 на 739 от левого края.
   Раньше здесь работал блок ≤1600, который ужимал шрифты и кнопку, а
   текст растягивался на всю свободную ширину — от макета 1440 это
   отличалось и заголовком в одну строку, и мелкой кнопкой. */
@media (min-width: 1025px) and (max-width: 1600px){
  .hp-help{ height:186px; padding-top:0; padding-bottom:0; }
  .hp-help__text{ flex:0 1 485px; width:485px; }
  .hp-help__text h2{ font-size:28px; }
  .hp-help__text p{ font-size:24px; }
  .hp-help__btn{ font-size:24.17px; padding:28.5px 54.4px 29.5px; }
  .hp-help__gosuslugi{ width:181.25px; margin:16.4px 0 16.4px 36.25px; }
}
/* Картинка привязана к правому краю: 1440 - 881 = 559. Так между ней
   и кнопкой держатся макетные 57, а от текста она отходит по мере
   расширения окна. Ниже 1281 текст 485 и картинка сходятся вплотную,
   поэтому декоративную картинку там прячем. */
@media (min-width: 1281px) and (max-width: 1600px){
  .hp-help__art{ left:auto; right:559px; transform:translateY(-50%); }
}
@media (min-width: 1025px) and (max-width: 1280px){
  .hp-help__art{ display:none; }
}

/* Планшет уже 1010: текст занимает 60…424, картинка привязана к
   правому краю и её левый край равен ширине минус 570, то есть на 1009
   он упирается в текст. Ниже — прячем картинку, как и на десктопе
   ниже 1281. */
@media (min-width: 845px) and (max-width: 1009px),
       (min-width: 768px) and (max-width: 844px) and (min-height: 600px){
  .hp-invest .hp-help__art{ display:none; }
}

/* ============================================================
   Шире 1920: содержимое держит макетную ширину
   ============================================================
   Макет свёрстан под 1920 с полями 60, то есть содержимое 1800.
   Так были ограничены только экран господдержки и подвал, а остальные
   блоки тянулись во всю ширину окна: на 2560 полоса предложений
   выходила 2545, карточка проекта 445 вместо макетных 316, и рядом с
   ними господдержка в 1800 смотрелась зажатой.
   Ограничиваем всё содержимое одинаково: полноэкранными остаются
   только подложки — фото героя и карта. У блоков, чей бокс идёт во всю
   ширину и держит поля 60 внутри, предел 1920; у тех, что уже вложены
   в поля секции, — 1800. */
@media (min-width: 1921px){
  .hp-invest__inner,
  .hp-offers__head,
  .hp-offers__filters,
  .hp-offers__carousel,
  .hp-offers__all,
  .hp-map__inner{
    /* width:100% обязателен: эти блоки — флекс-элементы своих секций,
       и одни авто-поля ужали бы их до ширины содержимого. */
    width:100%;
    max-width:1920px;
    margin-left:auto;
    margin-right:auto;
  }
  /* Фото Главы — не во флексе, а абсолютом от края секции (в макете
     оно на -24, то есть выходит за левую кромку экрана). Пока
     содержимое тянулось во всю ширину, это совпадало с остальными
     блоками; после ограничения до 1800 текст ушёл к центру, а фото
     осталось приклеенным к краю окна. Ставим его на левую границу той
     же полосы содержимого. */
  .hp-invest__photo{ left:calc((100% - 1800px) / 2); }

  .hp-help__inner,
  .hp-offers__cta-box,
  .hp-success__title,
  .hp-success__gallery,
  .hp-success__cta{
    width:100%;
    max-width:1800px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Шире 1920: герой тоже тянется по ширине.
   На 1920 в макете четыре колонки по 384 и пятая на остаток, а
   карточка новостей стоит на 1566 — это координаты макета. На 2560 они
   работали буквально: первые четыре колонки оставались по 384, пятая
   разрасталась до 1009, а карточка новостей висела посреди экрана в
   660px от правого края. Поэтому шире макета колонки делят ширину
   поровну (как и уже 1920), а карточка идёт от правого края. */
@media (min-width: 1921px){
  .hp-hero__col,
  .hp-hero__col:last-child{ flex:1 1 0; min-width:0; }
  .hp-hero__news{ left:auto; right:30px; }
}