/* /reklama-inzhenernyh-sistem/ — копия стилей отраслевой страницы-образца (24.09.2026): только связка поверх общих стилей stom-poster.css.
 * «Направления» (#directions): те же карточки .stage, что в «Системе, которая приводит клиентов»,
 * но их девять — сетка 3×3 вместо одного ряда, без номеров и картинок этапов.
 * Значения с ползунков ниже (фото «Системы», предмет в «Лидах», коллаж первого экрана) подобраны владельцем для других
 * отраслевых страниц; картинки этой страницы — Codex, 24.09.2026, подогнаны по скриншотам 1440/1024/390 в конце файла. */
.dirs .sys__steps{row-gap:clamp(44px,4.4vw,72px)}
/* строка «Кейс: …» прижата к низу карточки — в ряду они стоят на одной линии */
.dirs .stage{display:flex;flex-direction:column}
.dirs .stage__txt{max-width:46ch;margin-bottom:clamp(16px,1.9vw,30px)}
.dirs .stage__list{margin-top:auto}
.dirs .stage__top{min-height:0}
.dirs .stage__tag{font-size:clamp(22px,2vw,32px)}
.dirs .stage__h{font-size:clamp(28px,2.5vw,40px)}
.dirs .stage__list b a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em}
.dirs .stage__list b a:hover{color:var(--blue)}
@media (min-width:981px){
  /* в .sys левую линию и отступ снимает только первый этап — здесь первый в каждом ряду */
  .dirs .stage:nth-child(3n+1){padding-left:0;border-left:0}
  .dirs .stage:nth-child(3n){padding-right:0}
}
@media (max-width:980px){
  /* номера этапа нет — текст карточки не сдвигаем вправо */
  .dirs .stage__h,.dirs .stage__txt,.dirs .stage__list{margin-left:0}
  .dirs .sys__steps{row-gap:clamp(36px,8vw,48px)}
  .dirs .stage__tag{font-size:clamp(20px,6vw,32px)}
  .dirs .stage__h{font-size:clamp(28px,7.4vw,44px)}
}
/* телефон и планшет: карточки листаются свайпом, как слайдеры главной (без кнопок и счетчиков) */
@media (max-width:980px){
  .dirs .sys__steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,380px);column-gap:16px;row-gap:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--g) * -1);padding:4px var(--g) 18px;scroll-padding-inline:var(--g)}
  .dirs .sys__steps::-webkit-scrollbar{display:none}
  .dirs .stage{scroll-snap-align:start;scroll-snap-stop:always}
  .dirs .stage + .stage{border-left:1.5px solid var(--ink);padding-left:16px}
}
/* фото «Системы» на телефоне и планшете — значения владельца с ползунков (23.09, экран 411 px: размер 1,23, поворот 24°,
   вправо 33 px, вверх 78 px, под заголовком); сдвиги в долях ширины экрана, с пределами для планшета */
@media (max-width:980px){
  #roadmap .sys__photo{scale:1.23;rotate:24deg;translate:clamp(20px,8.03vw,60px) clamp(-150px,-18.98vw,-50px)}
}
/* предмет в «Лидах» на телефоне — значения владельца с ползунков (23.09, экран 411 px: ширина 153 px вместо 107,
   размер 1,1, вправо 33 px, под текстом); ширина и сдвиг в долях ширины экрана. Для каски с чертежом переопределено ниже */
@media (min-width:341px) and (max-width:699px){
  #leads .lds__tooth{width:clamp(120px,37.23vw,230px);scale:1.1;translate:clamp(16px,8.03vw,56px) 0}
}
/* коллаж первого экрана на десктопе — значения владельца с ползунков (23.09, экран 1338×917: размер 1,1, вправо 7 px, вверх 141 px);
   сдвиги в долях ширины экрана, как ширина коллажа (47vw, не больше 764 px) */
@media (min-width:981px){
  #top .hero__art{scale:1.1;translate:clamp(0px,.52vw,9px) max(-10.54vw,-92px)}
}

/* «Система»: лид и подпись начинаются под первой строкой заголовка с одинаковым зазором на любой ширине
   (владелец 23.09.2026: «слишком прижат текст к заголовку»; на 1024 лид наезжал на «которая») */
@media (min-width:981px){
  #roadmap .sys__intro{align-self:start;padding-bottom:0;margin-top:calc(clamp(50px,7vw,108px) * .86 + clamp(24px,2.2vw,36px))}
}

/* первый экран: заголовок в четыре строки («Реклама / строительной / компании / и ремонта») —
   четвертая строка поднимается следом за третьей, как на главной */
.js .hero.is-go .hl--4{transition-delay:.27s}
/* на компьютере четыре строки заголовка мельче, чем три строки у образца: лид и кнопка теста остаются на первом экране */
@media (min-width:981px){
  .hero--inzh .hero__title{font-size:clamp(48px,6.8vw,104px)}
}
/* «Выручка в месяц» в примере расчета: «4,4 млн ₽» — цифра мельче, чтобы не выходить за наклейку */
.strategy .sd-funnel__result strong{font-size:clamp(38px,3.3vw,56px)}

/* коллаж «Стратегии» уже и правее, чтобы не заходить на текст (зазор 29–42 px на 1024–1920);
   первый экран поднят не больше чем на 92 px, иначе на широких экранах верх коллажа уходит под шапку */
@media (min-width:981px){
  .strategy__art{width:27.5%;right:-3.5%}
}

/* ---------- подгонка под картинки и тексты стройки (24.09.2026, скриншоты 1440/1024/390) ---------- */
/* первый экран 981–1279 px: лид короче, чтобы строка «из Яндекс Директа и VK» не уходила под коллаж */
@media (min-width:981px) and (max-width:1279px){
  #top .hero__lede{max-width:calc(50vw - 70px)}
}
/* «Лиды для строительства:»: вторая строка на букву длиннее, чем у образца, — кегль меньше,
   чтобы двоеточие не заходило на лид-карточку (десктоп) и под наклейку «Больше замеров» (планшет и телефон) */
@media (min-width:1200px){
  #leads .lds__l--2{font-size:calc(122 * var(--u))}
}
@media (max-width:1199.98px){
  #leads .lds__l--2{font-size:.86em}
}
/* каска с чертежом выше предмета образца: на телефоне она уже и ниже второй строки, справа от «что считаем / клиентом, / а не заявкой» */
@media (min-width:341px) and (max-width:699px){
  #leads .lds__tooth{width:clamp(92px,27vw,170px);scale:1;translate:clamp(4px,3vw,24px) 0}
}

/* ноутбук «Продающих лендингов» на узком телефоне: у картинки стройки рваная подложка на всю ширину кадра,
   при общей ширине (88px + 29,5vw) она заходила на «Е» в «ПРОДАЮЩИЕ» (390 px: на 14 px) — уже, правым краем там же */
@media (max-width:520px){
  #roadmap .stage__art--laptop{width:clamp(120px,calc(55vw - 40px),240px)}
}

/* ---------- подгонка под картинки и тексты инженерных систем (24.09.2026, скриншоты 1440/1024/390) ---------- */
/* коллаж первого экрана: наклейка «Монтажи а не клики» у правого края кадра — коллаж левее на 2,6vw, чтобы не резалась краем экрана */
@media (min-width:981px){
  #top .hero__art{translate:calc(clamp(0px,.52vw,9px) - 2.6vw) max(-10.54vw,-92px)}
}
/* телефон и планшет: «кондиционеров,» на две буквы длиннее «строительной» — кегль заголовка меньше, чтобы строка не заходила на смартфон коллажа */
@media (max-width:980px){
  .hero--inzh .hero__title{font-size:clamp(32px,9.2vw,84px)}
}
/* фото «Системы» на телефоне и планшете: у монтажника у котла наклейка ниже и левее, чем у фото образца, —
   поворот 26° и сдвиг вправо сильнее, чтобы наклейка стояла справа от «которая», а не под «приводит» */
@media (max-width:980px){
  #roadmap .sys__photo{rotate:26deg;translate:clamp(20px,17vw,90px) clamp(-110px,-25vw,-60px)}
}
/* лид первого экрана 1280–1439 px: коллаж сдвинут левее (правило выше), и строка «кондиционеры, котлы, септики и»
   на 1280–1300 px упиралась в моток трубы (зазор 1–9 px) — та же ширина лида, что на 981–1279 px (проверка 24.09.2026) */
@media (min-width:1280px) and (max-width:1439.98px){
  #top .hero__lede{max-width:calc(50vw - 70px)}
}