/* Start:/local/templates/mrt/css/home.css?178662135351464*/
/* ==========================================================================
   ГЛАВНАЯ — секции (pixel-perfect по макету, кадр 1440)
   Плейсхолдеры: images/mock.svg, images/icon.svg (#mock-ic)
   ========================================================================== */

/* Базовый вертикальный отступ секции — 80px (замер макета 1471:91535).
   Секции с иными отступами переопределены ниже. */
.section { padding: 80px 0; }
/* --- Вертикальные отступы по макету, посекционно (Figma 1471:91535).
   Селекторы сдвоены (.section.X), чтобы перебить базовое правило .section из pages.css,
   которое подключается позже в объединённом файле Битрикса. --- */
.section.idea-sec         { padding: 68.5px 0; }    /* 03_Banner_slider   647 */
.section.section--catalog { padding: 21px 0 61px; } /* 04_Product_Catalog 686 */
.section.sec--gisp        { padding: 40px 0; }      /* 05_Banner_Promo    380 */
.section.support          { padding: 60px 0 80px; } /* 06_Tool_selection 1072 */
.section.sec--ticker      { padding: 80px 0 20px; } /* logo-ticker        332 */
.section.sec--solutions   { padding: 40px 0; }      /* 08_Work_Direction  584 */
.section.sec--howto       { padding: 60px 0 100px; }/* 09_Banner          460 */
.section.sec--dealer      { padding: 80px 0 40px; } /* 11_Become_a_dealer 420 */
.section--dark  { background: var(--c-navy-900); color: var(--c-text-light); }
.section--light { background: var(--c-light);    color: var(--c-text); }
/* Отбивка заголовка до контента — 40px по макету (местами переопределена ниже) */
.section-title  { font-size: 48px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .005em; margin: 0 0 40px; color: inherit; }
.idea-sec .section-title    { margin-bottom: 50px; }  /* 03_Banner_slider */
.sec--ticker .section-title { margin-bottom: 60px; }  /* logo-ticker */
.section__head  { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.section__head .section-title { margin: 0; }
.section__head .btn { position: absolute; right: 0; }

.ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--c-accent); }
.ic svg { width: 100%; height: 100%; }
.ic--bullet { width: 24px; height: 24px; }
.ic--feature { width: 44px; height: 44px; }
.mock-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blueprint { width: 100%; height: 100%; object-fit: cover; opacity: .9; }

/* --- Карусельные стрелки --- */
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-navy-800); color: var(--c-white);
    display: flex; align-items: center; justify-content: center; border: none;
}
.slider-arrow:hover { background: var(--c-accent); }
.slider-arrow--prev { left: -18px; }
.slider-arrow--next { right: -18px; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero { position: relative; height: 710px; display: flex; align-items: flex-end; color: var(--c-text-light); overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Затемнение то же, что у внутренних страниц (.page-hero::after,
   pages.css): по макету оно тянется до 68% высоты, а не до 34%. */
.hero__overlay { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(5,7,63,.69) 0%, rgba(5,7,63,0) 68%),
                linear-gradient(90deg, rgba(5,7,63,.30) 0%, rgba(5,7,63,0) 46%); }
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero__content { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 80px; }
.hero__title { font-size: 56px; font-weight: 400; line-height: 64px; text-transform: uppercase; max-width: 1060px; margin: 0; }
.hero__cta { flex: 0 0 auto; }

/* ==========================================================================
   2. ПОЧЕМУ ВЫБИРАЮТ (светлая)
   ========================================================================== */
.why { position: relative; overflow: hidden; }
.why__bg { position: absolute; top: 8px; left: 345px; width: 689px; z-index: 0; opacity: .55; pointer-events: none; }
/* 627+24+628 = 1279 при контенте 1280; долями — чтобы на окнах 1280–1359,
   где контейнер уже 1280, не вылезала горизонтальная прокрутка. */
.why__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 627fr 628fr; justify-content: space-between; gap: 24px; align-items: start; }
.why__intro .section-title { text-align: left; margin: 0 0 36px; color: var(--c-text); }
.why__lead p { font-size: 16px; color: #696767; line-height: 20px; margin: 0 0 14px; }
.why__list { display: flex; flex-direction: column; gap: 20px; }
/* Карточка «Почему выбирают» (Figma 1471:96102: ховер — градиент #05073F 26% → #062675 100%) */
.why__item { position: relative; overflow: hidden; background: #05073F; color: #fff; border-radius: 24px; min-height: 200px; padding: 20px 24px; display: flex; flex-direction: column; justify-content: flex-end;
    transition: background .45s ease; }
.why__item::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(116deg, #05073F 26%, #062675 100%);
    opacity: 0; transition: opacity .45s ease; }
/* is-hint — подсказка «плитки раскрываются»: скрипт сам разворачивает первую
   плитку, когда блок попадает в экран (см. script.js, data-why-hint). */
.why__item:hover::before, .why__item:focus-within::before, .why__item.is-hint::before { opacity: 1; }
/* Фоновый чертёж прижат к правой границе карточки */
.why__item-img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 320px; opacity: .85; pointer-events: none; transition: opacity .45s ease; }
.why__head { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; }
.why__item .ic { width: 24px; height: 24px; color: #fff; flex: 0 0 auto; margin-top: 2px; }
.why__item-title { font-size: 24px; font-weight: 400; line-height: 28px; text-transform: uppercase; }
/* Описание — появляется по ховеру, заголовок уезжает вверх */
/* Плавное раскрытие: grid 0fr→1fr (в отличие от max-height даёт ровную анимацию) */
.why__item-text { position: relative; z-index: 1; margin-left: 36px; max-width: 504px; font-size: 16px; line-height: 20px; color: #D9D9D9;
    display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
    transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease .05s, margin-top .45s cubic-bezier(.4, 0, .2, 1); }
.why__item-text > span { display: block; min-height: 0; overflow: hidden; }
.why__item:hover .why__item-text, .why__item:focus-within .why__item-text,
.why__item.is-hint .why__item-text { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.why__item:hover .why__item-img, .why__item:focus-within .why__item-img,
.why__item.is-hint .why__item-img { opacity: 0; }

/* ==========================================================================
   3. ОТ ИДЕИ К РЕАЛИЗАЦИИ (светлая, карточка бело-левая + фото)
   ========================================================================== */
.idea__wrap { position: relative; }
/* Непрозрачная подложка трека: при кроссфейде не просвечивает фон секции */
.idea__track { position: relative; height: 400px; border-radius: 24px; background: #F3F3F3; overflow: hidden; }
.idea__track .idea__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 0;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), visibility 0s .6s; }
/* входящий слайд проявляется поверх уходящего, который остаётся непрозрачным */
.idea__track .idea__slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .5s cubic-bezier(.4, 0, .2, 1), visibility 0s 0s; }
.idea__track .idea__slide.is-leaving { opacity: 1; visibility: visible; z-index: 1; transition: none; }
/* содержимое входящего появляется чуть позже подложки — тексты не накладываются */
.idea__track .idea__slide .idea__content,
.idea__track .idea__slide .idea__photo { opacity: 0; transition: opacity .3s ease; }
.idea__track .idea__slide.is-active .idea__content,
.idea__track .idea__slide.is-active .idea__photo { opacity: 1; transition: opacity .35s ease .25s; }
.idea__track .idea__slide.is-leaving .idea__content,
.idea__track .idea__slide.is-leaving .idea__photo { opacity: 1; transition: opacity .2s ease; }
/* Стрелки: шеврон 24×24, обводка #DDDDDD 1.5px, без круглой подложки.
   По центру высоты карточки (замер макета: 49.6% трека) — там фон уже тёмный,
   поэтому светлый шеврон читается (Figma 1471:92005). */
.idea__wrap .slider-arrow { width: 24px; height: 24px; background: none; border-radius: 0; color: #DDDDDD;
    top: 50%; bottom: auto; transform: translateY(-50%); }
.idea__wrap .slider-arrow:hover { background: none; color: var(--c-accent); }
.idea__wrap .slider-arrow svg { width: 24px; height: 24px; max-width: none; flex: none; stroke-width: 1.5; }
.idea__wrap .slider-arrow--prev { left: -33px; }
.idea__wrap .slider-arrow--next { right: -33px; }
/* Ниже 1360 контейнер прижат к краям окна, и вынос стрелки на 33px вылезал
   за вьюпорт — появлялась горизонтальная прокрутка на 13px. 20px помещаются
   всегда: столько же занимает поле контейнера. */
@media (max-width: 1359px) {
    .idea__wrap .slider-arrow--prev { left: -20px; }
    .idea__wrap .slider-arrow--next { right: -20px; }
}
/* В макете точек нет — навигация стрелками. На таблете/мобиле возвращаем (стрелки скрыты). */
.idea__dots { display: none; justify-content: center; gap: 8px; margin-top: 24px; }
.idea__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: none; background: #B5B5C0; cursor: pointer; transition: background .2s; }
.idea__dot.is-active { background: var(--c-accent); }
/* Фон секции: верхняя половина #DDDDDD, нижняя — сплошной #05073F без градиента.
   Низ секции остаётся #05073F — с него же начинается «Каталог», стык бесшовный
   (замер макета: вся тёмная половина ровно (5,7,63)) — Figma 1471:92005 */
.idea-sec { background: linear-gradient(180deg,
    #DDDDDD 0%, #DDDDDD 50%,
    #05073F 50%, #05073F 100%); }
.idea-sec .section-title { color: #111011; }

.idea__card { border-radius: 24px; overflow: hidden; background: #F3F3F3; }
/* Фото занимает только правую часть карточки (от края панели до правого края),
   подготовлено под пропорцию этой зоны ~785×400 (1.96:1) — объект по центру,
   cover без полей и растяжения. Панель с выемкой лежит поверх слева. */
.idea__photo { position: absolute; top: 0; bottom: 0; right: 0; left: 38.67%; width: auto; height: 100%; object-fit: cover; object-position: center center; z-index: 0; }
/* Белая панель: прямой правый край, без треугольной выемки */
.idea__panel { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 38.67%; background: #fff; }
.idea__content { position: relative; z-index: 2; padding: 30px 40px; display: flex; flex-direction: column; height: 100%; }
.idea__title { font-size: 26px; font-weight: 400; line-height: 32px; text-transform: uppercase; color: #111011; margin-bottom: 20px; max-width: 428px; }
.idea__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: auto; }
.idea__list li { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; color: #111011; }
.idea__list .ic { width: 20px; height: 20px; color: var(--c-blue); flex: 0 0 auto; }
.idea__content .btn { align-self: flex-start; }

/* ==========================================================================
   4. КАТАЛОГ (тёмная)
   ========================================================================== */
/* Фон секции: #05073F → #000000 сверху вниз, чёрный достигается на 97%
   (замер рендера макета: y=665 из 686 уже (0,0,0)) — Figma 1471:92012 */
.section--catalog { background: linear-gradient(180deg, #05073F 0%, #000000 97%); }
/* Заголовок 48/60, вес 400, логотип MRT в строке текста */
.section-title.catalog__title { font-size: 48px; font-weight: 400; line-height: 60px; color: #fff; text-align: center; margin: 0 0 60px; }
.catalog__mrt { display: inline-block; vertical-align: -18px; height: 64px; width: auto; margin-left: 8px; }
/* 3 колонки: при контенте 1280 и отбивке 25 выходят ровно макетные 410.
   Доли вместо жёстких пикселей — на окнах 1280–1359 контейнер уже 1280,
   и от 410px вылезала горизонтальная прокрутка на 20px. */
.catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: space-between; gap: 25px; }
/* Карточка: сплошная #05073F, r24, 410×320, паддинг 24 (по спеку — без градиента) */
.catalog__card { position: relative; overflow: hidden; background: #05073F; border-radius: 24px; height: 320px; padding: 24px; display: flex; flex-direction: column; }
/* Ховер: яркий синий градиент (Figma 1602:97920) */
.catalog__card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: linear-gradient(135deg, #4276FF 0%, #05399C 55%, #001246 100%);
    opacity: 0; transition: opacity .3s ease; }
.catalog__card:hover::before { opacity: 1; }
/* Рисунок 527×331, в макете выходит за карточку на 58.5px влево и вправо
   (карточка 410, рисунок 527, x=-58.5) — карточка режет его по overflow.
   max-width: none обязателен: глобальное img{max-width:100%} в base.css
   сжимало рисунок до 410px и он выглядел сплющенным. */
.catalog__art { position: absolute; left: -58.5px; top: -5px; width: 527px; height: 331px; max-width: none;
    object-fit: contain; object-position: center; z-index: 0; pointer-events: none; transition: opacity .3s; }
/* Фреза HPC — сферическая, та же, что на странице каталога (см. $homeIll
   в src-home.php). Чертёж 580×87 — длинная горизонтальная полоса, а не
   компактный 527×331, поэтому своя раскладка: кладём в натуральную величину
   под заголовком в две строки, режущей частью влево, хвостовик уходит за
   правый край — ровно как в карточке .catfile--axial на /products/.
   Масштабировать по ширине карточки (410) нельзя: полоса стала бы высотой
   61px и чертёж читался бы как ниточка. */
.catalog__card--axial .catalog__art { left: 40px; right: auto; top: 133px; width: 580px; height: 87px; }
.catalog__name { position: relative; z-index: 1; font-size: 32px; font-weight: 400; line-height: 40px; color: #fff; text-transform: uppercase; max-width: 362px; }
/* Кнопка «Каталог»: 112×46, r12, текст 18/24 */
.catalog__card .btn { position: relative; z-index: 1; margin-top: auto; align-self: flex-start;
    min-height: 46px; padding: 11px 24px; border-radius: 12px; font-size: 18px; line-height: 24px; }
/* Кнопка «Подробнее»: 122×44, #F3F3F3, r12, текст 16/20 */
.catalog__more { text-align: center; margin-top: 60px; }
.catalog__more .btn { min-height: 44px; padding: 12px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; }
.btn--white { background: #F3F3F3; color: #111011; }
.btn--white:hover { background: var(--c-accent); color: var(--c-white); }

/* ==========================================================================
   5. СДЕЛАНО В РОССИИ / ГИСП (тёмная)
   ========================================================================== */
.gisp__card { position: relative; overflow: hidden; border-radius: 24px; height: 300px; color: var(--c-text-light); background: #05073F; }
/* Снимок обёрнут в <picture> (на мобиле подменяется вертикальным кропом),
   поэтому растягиваем и обёртку — иначе inset у img считается от карточки
   не полностью и фон не заполняет её. */
.gisp__card > picture { position: absolute; inset: 0; z-index: 0; display: block; }
.gisp__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gisp__inner { position: relative; z-index: 1; height: 100%; padding: 40px 30px; display: flex; flex-direction: column; justify-content: space-between; }
.gisp__logo { height: 80px; width: auto; align-self: flex-start; }
.gisp__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.gisp__title { font-size: 32px; font-weight: 400; line-height: 40px; text-transform: uppercase; max-width: 565px; margin: 0; }

/* ==========================================================================
   6. ПОДБОР И ВНЕДРЕНИЕ (светлая)
   ========================================================================== */
.support { position: relative; overflow: hidden; background: #fff; }
/* Чертёж обёрнут в <picture> (на мобиле подменяется своей версией макета) —
   обёртку схлопываем, чтобы позиционирование осталось у самого img. */
.support .container > picture { display: contents; }
/* Контраст задан цветом линий в самом файле (#DDDDDD, как в макете),
   поэтому opacity не занижаем — иначе чертёж почти не виден. */
.support__bg { position: absolute; top: 160px; left: 100px; width: 721px; z-index: 0; pointer-events: none; }
.support__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 629px 627px; justify-content: space-between; gap: 24px; align-items: start; }
.support__content .section-title { text-align: left; margin: 0 0 28px; color: #111011; }
.support__text { font-size: 16px; color: #696767; line-height: 20px; margin-bottom: 0; }
.support__subtitle { font-weight: 400; color: #696767; margin: 24px 0 14px; font-size: 16px; text-transform: uppercase; }
.support__list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; }
.support__list li { position: relative; padding-left: 18px; font-size: 16px; color: #696767; line-height: 20px; }
.support__list li::before { content: "•"; position: absolute; left: 4px; color: #696767; }
.support__visual { position: relative; height: 627px; border-radius: 24px; overflow: hidden; }
.support__visual .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.support__visual .support-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 293px; z-index: 1; }

/* ==========================================================================
   7. НАШИ КЛИЕНТЫ (светлая)
   ========================================================================== */
/* Бесконечный тикер логотипов (item 192x112 по макету) */
.ticker { overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.ticker__track { display: flex; gap: 24px; width: max-content; animation: ticker-scroll 30s linear infinite; }
/* Пауза по наведению — только там, где есть настоящий курсор. На тачскрине
   тап по карточке оставляет «залипший» :hover, и лента вставала намертво до
   тапа мимо неё — выглядело как оборвавшаяся анимация. */
@media (hover: hover) and (pointer: fine) {
    .ticker:hover .ticker__track { animation-play-state: paused; }
}
.ticker__item { flex: 0 0 auto; width: 192px; height: 112px; background: var(--c-white); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; padding: 12px 20px; }
.ticker__item img { max-width: 152px; max-height: 88px; object-fit: contain; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ==========================================================================
   8. ПРОМЫШЛЕННЫЕ РЕШЕНИЯ — карточки с ховером + слайдер
   ========================================================================== */
/* Фоновая графика-чертёж за карточками (Figma 1537:121873) */
.sec--solutions { position: relative; overflow: hidden; }
.sec--solutions__bg { position: absolute; left: 0; top: 276px; width: 1437px; height: 729px; z-index: 0; pointer-events: none; opacity: .5; }
.sec--solutions .container { position: relative; z-index: 1; }
.solcard { position: relative; overflow: hidden; display: flex; flex-direction: column; width: 410px; height: 320px;
    border-radius: 24px; background: #05073F; color: #fff; padding: 24px; flex: 0 0 auto; }
/* Рисунок 527×331 от левого края карточки, без смещения */
.solcard__art { position: absolute; left: 0; top: -5.5px; width: 527px; height: 331px;
    object-fit: cover; object-position: left center; z-index: 0; pointer-events: none; transition: opacity .3s; }
/* Ховер: 7 вертикальных полос по 58.5px, каждая гаснет слева направо,
   поверх — общее затемнение сверху вниз (замер макета 1471:90979) */
.solcard__hoverbg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s ease;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 28%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.56) 100%),
        repeating-linear-gradient(90deg, #3F6EFC -36.5px, #1449C4 22px);
    background-color: #05073F; }
/* Заголовок: 32/40, прописные, ширина контента 362 (410 - 24*2) */
.solcard__name { position: relative; z-index: 1; font-size: 32px; font-weight: 400; line-height: 40px;
    text-transform: uppercase; max-width: 362px; transition: opacity .25s; }
/* Описание по ховеру встаёт на место заголовка (заголовок в этот момент скрыт) */
.solcard__text { position: absolute; z-index: 1; left: 24px; right: 24px; top: 24px; font-size: 16px; line-height: 20px; color: #fff;
    opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
/* Кнопка «Подробнее» 131×46 внизу карточки, видна всегда — и в покое, и при ховере (Figma 1537:121871) */
.solcard .btn { position: relative; z-index: 1; margin-top: auto; align-self: flex-start;
    min-height: 46px; padding: 13px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; }
.solcard:hover .solcard__hoverbg, .solcard:focus-visible .solcard__hoverbg { opacity: 1; }
.solcard:hover .solcard__art { opacity: 0; }
/* по ховеру заголовок скрываем, чтобы описание не накладывалось на него */
.solcard:hover .solcard__name, .solcard:focus-within .solcard__name { opacity: 0; }
.solcard:hover .solcard__text, .solcard:focus-visible .solcard__text { opacity: 1; transform: translateY(0); }

/* Слайдер на главной: одна линия, скролл/перетаскивание */
.solslider { position: relative; }
.solslider__track { display: flex; gap: 25px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; padding-bottom: 4px; }
.solslider__track::-webkit-scrollbar { display: none; }
.solslider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.solslider__track .solcard { scroll-snap-align: start; }
/* Стрелки как в макете: шеврон 24×24 без подложки, обводка 1.5px (Figma 1471:93139) */
.solslider .slider-arrow { width: 24px; height: 24px; background: none; border-radius: 0; color: #111011; }
.solslider .slider-arrow:hover { background: none; color: var(--c-accent); }
.solslider .slider-arrow svg { width: 24px; height: 24px; max-width: none; flex: none; stroke-width: 1.5; }
.solslider .slider-arrow--prev { left: -33px; }
.solslider .slider-arrow--next { right: -33px; }
/* Кнопка «Подробнее» 131×44, отбивка 40 (Figma 1471:93139) */
.solutions__more { text-align: center; margin-top: 40px; }
.solutions__more .btn { min-height: 44px; padding: 12px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; }
/* Сетка на странице /solutions/ */
.solgrid { display: flex; flex-wrap: wrap; gap: 25px; }
/* Фоновая графика на странице /solutions/ (Figma 1537:121873) */
.solpage { position: relative; overflow: hidden; }
.solpage__bg { position: absolute; left: 0; top: 200px; width: 1437px; height: 729px; z-index: 0; pointer-events: none; opacity: .5; }
.solpage .container { position: relative; z-index: 1; }

/* ==========================================================================
   9. КАК ПРИОБРЕСТИ — паттерн .dlrsteps--howto (pages.css, Figma 1780:81972)
   ========================================================================== */
.news__more { display: none; text-align: center; margin-top: 36px; }

/* ==========================================================================
   10. НОВОСТИ (тёмная, чертёж-фон слева; Figma 1602:94726)
   ========================================================================== */
.newsblock { position: relative; overflow: hidden; background: #05073F; color: #fff; }
.newsblock__bg { position: absolute; left: -230px; top: -130px; width: 869px; z-index: 0; opacity: .55; pointer-events: none; }
.newsblock__actions { position: absolute; right: 0; display: flex; align-items: center; gap: 10px; }
.newsblock__actions .btn { position: static; }
.newsblock__arrow { width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.newsblock__arrow:hover { background: var(--c-accent-600); }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news__card { position: relative; height: 230px; border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; color: var(--c-text-light); }
.news__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.news__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 159px; z-index: 1; background: linear-gradient(180deg, rgba(5,7,63,0) 0%, rgba(5,7,63,.9) 55%); }
.news__card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(5,7,63,.7); opacity: 0; transition: opacity .25s; }
.news__card:hover::before { opacity: 1; }
.news__body { position: relative; z-index: 2; padding: 18px; width: 100%; }
/* Плашка даты 81×20: текст 12/14, паддинги 3/8, скругление полное (в макете
   1780:92158 у Date r=62.6). Было 5/10 и r14 — плашка выглядела крупнее. */
.news__date { position: relative; display: inline-block; background: var(--c-white); color: #111011; font-size: 12px; line-height: 14px; padding: 3px 8px; border-radius: 62px; margin-bottom: 10px; }
/* Стрелка 18×18 строго из макета: круг #FF6A00 + белая диагональ вверх-вправо */
.news__date::after { content: ""; position: absolute; left: calc(100% + 6px); top: 50%;
    transform: translateY(-50%); width: 18px; height: 18px; opacity: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Crect width='18' height='18' rx='9' fill='%23FF6A00'/%3E%3Cpath d='M4.92188 13.1122L13.1078 4.92627M13.1078 10.3835V4.92627H7.6505' stroke='white' stroke-width='0.812585' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat; }
.news__name { font-size: 20px; line-height: 21px; font-weight: 400; margin-bottom: 6px; }
.news__text { font-size: 16px; color: #E9E9EE; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   11. КАК СТАТЬ ДИЛЕРОМ (тёмная, синий баннер)
   ========================================================================== */
.dealer__banner { border-radius: 20px; padding: 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; color: var(--c-text-light);
    background: repeating-linear-gradient(115deg, #123A9E 0 40px, #1848BE 40px 80px), var(--grad-blue); background-blend-mode: overlay; }
.dealer__title { font-size: 34px; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; }
.dealer__text { color: rgba(255,255,255,.85); max-width: 640px; line-height: 1.6; }

/* ==========================================================================
   12. ОСТАЛИСЬ ВОПРОСЫ (светлая)
   ========================================================================== */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.contact__art { background: var(--c-navy-900); border-radius: 20px; overflow: hidden; min-height: 560px; }
.contact__form-card { background: #F4F4F8; border-radius: 20px; padding: 48px; }
.contact__title { font-size: 34px; font-weight: 700; text-transform: uppercase; color: var(--c-text); margin-bottom: 8px; }
.contact__text { color: var(--c-text-muted); margin-bottom: 28px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form__input, .form__textarea { width: 100%; padding: 17px 20px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); font-size: 15px; font-family: inherit; }
.form__input::placeholder, .form__textarea::placeholder { color: var(--c-text-muted2); }
.form__input:focus, .form__textarea:focus { outline: none; border-color: var(--c-accent); }
.form__textarea { min-height: 100px; resize: vertical; }
.contact__consent { font-size: 12px; color: var(--c-text-muted2); margin: 6px 0 4px; line-height: 1.4; }
.contact__form-card .btn { width: 100%; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1279px) {
    .section { padding: 64px 0; }
    .section-title { font-size: 36px; }
    .hero__title { font-size: 44px; }
    .why__grid, .support__grid, .contact__grid { grid-template-columns: 1fr; gap: 32px; }
    .idea__card { grid-template-columns: 1fr; }
    .solutions__grid { grid-template-columns: 1fr 1fr; }
    .clients__row { grid-template-columns: repeat(3, 1fr); }
    /* Каталог: карточки в столбец (Figma 1780:85719) */
    .catalog__grid { grid-template-columns: 1fr; gap: 24px; }
    .catalog__card { height: 200px; }
    .catalog__title { font-size: 32px; line-height: 40px; margin-bottom: 40px; }
    .catalog__mrt { height: 44px; vertical-align: -12px; }
    .catalog__art { left: auto; right: -20px; top: 50%; transform: translateY(-50%); width: 380px; height: auto; }
    /* Карточка на всю ширину и ниже (200): фреза 580×87 встаёт справа
       от заголовка в натуральную величину, как в каталоге на этой же
       ширине. transform из общего правила снимаем — позиционируем top. */
    .catalog__card--axial .catalog__art { left: auto; right: -50px; top: 56px;
        transform: none; width: 580px; height: 87px; }
    /* Промрешения: вертикальный стек, синий фон и текст видимы сразу */
    .solslider__track { flex-direction: column; overflow: visible; gap: 24px; }
    .solslider .slider-arrow { display: none; }
    .solcard { width: 100%; height: auto; min-height: 220px; }
    .solcard__hoverbg { opacity: 1; }
    .solcard__art { display: none; }
    .solcard__name { opacity: 1 !important; }
    .solcard__text { position: static; opacity: 1; transform: none; margin: 12px 0 20px; }
    /* на мобиле карточка раскрыта — кнопка нужна */
    .solcard .btn { display: inline-flex; position: relative; z-index: 1; margin-top: auto; align-self: flex-start; }
    /* Новости: 2 карточки, кнопка снизу по центру */
    .news__grid { grid-template-columns: 1fr 1fr; }
    .news__card:nth-child(n+3) { display: none; }
    .newsblock__actions { display: none; }
    .news__more { display: block; }
    .gisp__title { text-align: left; }
    .contact__art { min-height: 300px; }
}
/* ==========================================================================
   МОБАЙЛ — точный спек Figma 1780:90070 (кадр 393, гаттер 16, контент 361).
   Базовые величины макета: отбивка секции 40px, заголовок 32/40 w400,
   текст 16/20 #696767 выключкой по формату, кнопка h40 r12, карточка r24.
   ========================================================================== */
@media (max-width: 767px) {
    /* Все секции — ровно 40px сверху и снизу (замер всех блоков макета).
       Селекторы сдвоены (.section.X): одиночный .section проигрывает
       правилу .section из pages.css, который подключается позже. */
    .section,
    .section.why, .section.idea-sec, .section.section--catalog, .section.sec--gisp,
    .section.support, .section.sec--solutions, .section.sec--howto,
    .section.newsblock, .section.sec--dealer { padding: 40px 0; }
    /* Тикер «Наши клиенты»: 40 сверху / 20 снизу (logo-ticker 393×262) */
    .section.sec--ticker { padding: 40px 0 20px; }

    /* Заголовок секции 32/40, отбивка до контента 20px */
    .section-title { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
    .section__head { flex-direction: column; gap: 16px; margin-bottom: 40px; }
    .section__head .btn { position: static; }

    /* --- 1. HERO: занимает доступную область между шапкой и закреплённой
       нижней панелью. На низком экране min-height берётся от контента, а не
       из жёстких 420px: секция расширяется в поток и CTA можно докрутить над
       панелью, вместо того чтобы обрезать его за overflow. --- */
    /* Фактическая высота sticky-шапки: 8 + 68 + 70 + 8 = 154px.
       Строка поиска занимает 70px с учётом собственных паддингов. */
    :root { --mobile-header-height: 154px; }
    .hero {
        height: min(670px, calc(100svh - var(--mobile-header-height) - var(--qlinks-height)));
        min-height: 0;
        overflow: visible;
    }
    .hero__video, .hero__overlay { clip-path: inset(0); }
    .hero__title { font-size: 24px; line-height: 28px; }
    .hero__content { flex-direction: column; align-items: stretch; gap: 24px;
        padding-top: 20px; padding-bottom: 20px; }
    .hero__cta { display: flex; justify-content: center; }

    @media (max-height: 620px) {
        .hero { height: auto; min-height: calc(100svh - var(--mobile-header-height) - var(--qlinks-height)); }
        .hero__content { gap: 16px; }
    }

    /* --- 2. ПОЧЕМУ ВЫБИРАЮТ --- */
    /* Фоновый чертёж виден и на мобиле: 689px от левого края, верх — от начала секции */
    .why__bg { display: block; top: 0; left: -15px; width: 689px; max-width: none; opacity: .55; }
    .why__grid { gap: 24px; }
    /* Заголовок и текст выключены влево, текст — по формату (align=JUSTIFIED в макете) */
    .why__intro .section-title { text-align: left; margin-bottom: 20px; }
    .why__intro { display: flex; flex-direction: column; }
    .why__lead p { text-align: justify; margin: 0 0 20px; }
    .why__lead p:last-child { margin-bottom: 0; }
    /* Карточка: 125px, паддинг 20/14, заголовок 16/22, чертёж 323×240 справа-сверху.
       Текст раскрывается по тапу (:focus-within) — на мобиле ховера нет. */
    .why__list { gap: 20px; }
    .why__item { min-height: 125px; padding: 20px 14px; border-radius: 24px; }
    /* Чертёж 323×240: +93px от левого края карточки и −60px от её верха
       (замер макета: карточка x=78531/y=-2276, картинка x=78624/y=-2336) */
    .why__item-img { width: 323px; height: auto; max-width: none;
        left: 93px; right: auto; top: -60px; transform: none; }
    .why__head { gap: 12px; align-items: flex-start; }
    .why__item .ic { margin-top: 0; }
    .why__item-title { font-size: 16px; line-height: 22px; }
    .why__item-text { margin-left: 36px; font-size: 16px; line-height: 20px; }

    /* --- 3. ОТ ИДЕИ К РЕАЛИЗАЦИИ --- */
    /* Фон: светлая часть до карточки, тёмный градиент снизу (замер: bg с y=507 из 840) */
    .idea-sec { background: linear-gradient(180deg,
        #DDDDDD 0%, #DDDDDD 60.4%, #05073F 60.4%, #000000 100%); }
    .idea-sec .section-title { margin-bottom: 32px; }
    /* Карточка: фото сверху уменьшено до 180px, чтобы длинная карточка вместе
       со списком и кнопкой чаще помещалась в один экран, r24. */
    .idea__card { background: #fff; display: flex; flex-direction: column; }
    .idea__photo { position: static; width: 100%; height: 180px; object-position: center; }
    .idea__panel { display: none; }
    .idea__wrap .slider-arrow { display: none; }
    .idea__dots { display: flex; }
    .idea__wrap { touch-action: pan-y; }
    .idea__track { height: auto; }
    .idea__track .idea__slide { position: relative; inset: auto; display: none; }
    .idea__track .idea__slide.is-active { display: flex; }
    /* Контент: заголовок уменьшен на два шага до 20/24, список 18/24
       (гэп 8), кнопка на всю ширину. Отбивка заголовок→список 16,
       список→кнопка 16. */
    .idea__content { padding: 20px; gap: 0; }
    .idea__title { font-size: 20px; line-height: 24px; margin-bottom: 16px; max-width: none; }
    .idea__list { gap: 8px; margin-bottom: 16px; }
    .idea__list li { align-items: flex-start; gap: 8px; font-size: 18px; line-height: 24px; }
    .idea__content .btn { align-self: stretch; justify-content: center; display: flex; }

    /* --- 4. КАТАЛОГ --- */
    /* Заголовок 32/40 по центру. Селектор сдвоен — перебивает десктопное
       правило `.section-title.catalog__title` (иначе оставался 48px и строка
       «Каталог металлорежущего» шириной 493px рвала вьюпорт).
       Жёсткий <br> из разметки на мобиле превращаем в обычный пробел:
       display:none убрал бы единственную точку переноса и склеил слова. */
    .section-title.catalog__title { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
    .catalog__title br { display: inline; font-size: 0; }
    .catalog__title br::after { content: " "; font-size: 32px; }
    .catalog__mrt { height: 40px; vertical-align: middle; margin-left: 6px; }
    /* Карточка 200px, паддинг 24, заголовок 20/24, чертёж 308×193 справа-сверху */
    .catalog__grid { grid-template-columns: 1fr; gap: 24px; }
    .catalog__card { height: 200px; padding: 24px; }
    .catalog__art { left: auto; right: -21px; top: 7px; transform: none;
        width: 308px; height: 193px; max-width: none; object-fit: contain; object-position: right center; }
    /* Координаты 1-в-1 из .catfile--axial на /products/ (pages.css, @media 767):
       заказчик просил, чтобы фреза на мобиле выглядела так же. Сдвиг вправо
       на 166px принципиален — карточка режет чертёж по левому краю, и в кадре
       остаётся только режущая часть. При left: 8px было видно 353px из 393
       и фреза читалась заметно длиннее, чем в каталоге. */
    .catalog__card--axial .catalog__art { left: 166px; right: auto; top: 76px;
        transform: none; width: 393px; height: 59px; object-position: center; }
    .catalog__name { font-size: 20px; line-height: 24px; max-width: none; }
    /* Кнопка «Каталог» в карточке — h40 (перебиваем десктопные 46px) */
    .catalog__card .btn { min-height: 40px; padding: 10px 24px; font-size: 16px; line-height: 20px; }
    /* Кнопка «Подробнее» — на всю ширину, h44 (Secondary/Show More в макете) */
    .catalog__more { margin-top: 20px; }
    .catalog__more .btn { display: flex; width: 100%; }

    /* --- 5. СДЕЛАНО В РОССИИ / ГИСП --- */
    /* Баннер 500px: лого 268×80 сверху по центру, заголовок и кнопка снизу */
    .gisp__card { height: 500px; min-height: 0; }
    /* Фото. До 480px <picture> подставляет вертикальный кроп из макета
       (gisp-banner-mobile.jpg, 561×925): в макете у Banner_Container
       scaleMode=STRETCH с imageTransform [0.3354, сдвиг 0.6147 по X;
       0.983, сдвиг 0.0091 по Y] — Figma вырезает из широкого исходника
       полосу вокруг сертификата. Там кадр растянут в рамку без
       сохранения пропорций (STRETCH = fill), но так снимок сплющивается,
       поэтому берём cover — пропорции целы, срезается по 48px пустого
       фона сверху и снизу.
       Шире 480px <picture> отдаёт широкий исходник; в нём сертификат лежит
       на 79.5% ширины, поэтому кадр смещаем к нему — иначе в видимую
       область попадёт пустой фон слева. По вертикали берём 35%: на почти
       квадратной карточке (≈449×500 при 481px) центрированный кадр
       опускал низ таблички в зону заголовка. */
    .gisp__bg { display: block; object-fit: cover; object-position: 72% 35%; }
    .gisp__inner { padding: 40px 16px; justify-content: space-between; }
    .gisp__logo { height: 80px; width: auto; align-self: center; }
    .gisp__row { flex-direction: column; align-items: stretch; gap: 20px; }
    .gisp__title { font-size: 24px; line-height: 28px; max-width: none; text-align: left; }
    .gisp__row .btn { display: flex; width: 100%; }

    /* --- 6. ПОДБОР И ВНЕДРЕНИЕ --- */
    /* Фоновый чертёж: <picture> подставляет support-bg-mobile.svg — это
       выгруженный из макета фрейм Background_illustration ровно 392×555
       с линиями #DDDDDD, поэтому ни растягивать, ни осветлять не нужно.
       Позиция @0,333 — из макета. Прозрачность не занижаем: контраст
       линий уже заложен в сам файл. */
    .support__bg { display: block; top: 333px; left: 0;
        width: 392px; height: auto; max-width: none; }
    .support__grid { gap: 40px; }
    .support__content { display: flex; flex-direction: column; }
    .support__content .section-title { text-align: left; margin-bottom: 20px; }
    /* Текст 16/20 по формату; списки — тем же кеглем */
    .support__text { text-align: justify; margin-bottom: 0; }
    /* Подзаголовок «Что включает…» — в макете это обычный абзац 16/20
       прописными и с выключкой по формату, а не отдельный мелкий заголовок
       (в десктопном правиле у него line-height 24 и выключка по левому краю) */
    .support__subtitle { font-size: 16px; line-height: 20px; text-align: justify;
        margin: 20px 0 12px; }
    .support__list { gap: 8px; margin-bottom: 20px; }
    /* Пункты списка: маркер-точка, текст 16/20 с выключкой по формату */
    .support__list li { text-align: justify; padding-left: 20px; }
    .support__list li::before { left: 6px; }
    /* Кнопка «Помощь Технолога» — на всю ширину, h40 (Primary/Button в макете) */
    .support__content .btn { display: flex; width: 100%; }
    /* Визуал 400px (в макете 361×400) */
    .support__visual { height: 400px; }

    /* --- 7. НАШИ КЛИЕНТЫ: item 192×112, r30, гэп 25 ---
       В макете блок заголовка — фрейм 60px (section-heading), тикер с y=130:
       40 (паддинг) + 60 (заголовок) + 30 (гэп) + 112 (item) + 20 = 262 */
    .sec--ticker .section-title { height: 60px; margin-bottom: 30px;
        display: flex; align-items: center; justify-content: center; }
    .ticker__track { gap: 25px; }
    .ticker__item { border-radius: 30px; padding: 26px 20px; }
    @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12.5px)); } }

    /* --- 8. ПРОМЫШЛЕННЫЕ РЕШЕНИЯ --- */
    /* Карточки столбцом (гэп 25), заголовок 26/32, текст 16/20, кнопка по контенту */
    .sec--solutions .section-title { margin-bottom: 24px; }
    .solslider__track { gap: 25px; }
    .solcard { min-height: 0; padding: 24px; }
    .solcard__name { font-size: 26px; line-height: 32px; max-width: none; }
    .solcard__text { margin: 10px 0 20px; }
    /* Кнопка «Подробнее» в карточке — h40 (перебиваем десктопные 46px) */
    .solcard .btn { align-self: flex-start; margin-top: 0;
        min-height: 40px; padding: 10px 24px; font-size: 16px; line-height: 20px; }
    /* Кнопка «Подробнее» — на всю ширину, h44 */
    .solutions__more { margin-top: 40px; }
    .solutions__more .btn { display: flex; width: 100%; }

    /* --- 10. НОВОСТИ --- */
    /* Карточка 200px (в макете 361×200), гэп 16, кнопка «Все новости» на всю ширину */
    .news__grid { grid-template-columns: 1fr; gap: 16px; }
    .news__card:nth-child(n+3) { display: flex; }
    .news__card { height: 200px; }
    .news__body { padding: 18px; }
    /* Кнопка «Все новости» — на всю ширину, h44 (Secondary/Show More в макете) */
    .news__more { margin-top: 40px; }
    .news__more .btn { display: flex; width: 100%;
        min-height: 44px; padding: 12px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; }

    /* --- 12. ОСТАЛИСЬ ВОПРОСЫ --- */
    .contact__grid { grid-template-columns: 1fr; }
    .contact__form-card { padding: 28px; }
    .contact__title { font-size: 24px; }
}

/* ==========================================================================
   Узкий мобайл (≤480px): <picture> отдаёт вертикальный кроп
   gisp-banner-mobile.jpg — сертификат в нём уже по центру кадра,
   поэтому смещение к 72% (нужное широкому снимку) здесь снимаем.
   ========================================================================== */
@media (max-width: 480px) {
    .gisp__bg { object-position: center center; }
}

/* End */


/* Start:/local/templates/mrt/css/pages.css?1789539072200127*/
/* ==========================================================================
   Внутренние страницы (раздел «О компании» и др.) — общие блоки по Figma
   ========================================================================== */

/* --- Базовые секции (дубль из home.css — внутренние страницы его не грузят) --- */
.section { padding: 80px 0; }
.section--dark  { background: var(--c-navy-900); color: var(--c-text-light); }
.section--light { background: var(--c-light);    color: var(--c-text); }
.section--catalog { background: linear-gradient(180deg, #05073F 0%, #000000 97%); }
.btn--white { background: #F3F3F3; color: #111011; }
.btn--white:hover { background: var(--c-accent); color: var(--c-white); }
.section__head { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.section__head .section-title { margin: 0; }
.section__head .btn { position: absolute; right: 0; }

/* --- Хлебные крошки ---
   Классические: кликабельны все звенья, кроме текущей страницы. Разметку
   собирает mrt_crumbs() (local/php_interface/init.php) — цепочки держим там,
   чтобы они не разъезжались с меню. Ссылка внешне не отличается от текста
   (так в макете), различие даёт ховер. */
.crumbs { font-size: 14px; line-height: 16px; padding: 20px 0 0; color: #696767; }
.crumbs--light { color: #fff; }
.crumbs a { transition: color .2s ease; }
.crumbs a:hover { color: var(--c-accent); }

/* --- Герой страницы с фото (710) --- */
.page-hero { position: relative; height: 710px; display: flex; flex-direction: column; color: #fff; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Затемнение снизу — точно по макету (узел Overlay 2310:20322): растяжка
   до 68% высоты при плотности .69 у нижнего края. Было до 34% и .6 —
   вдвое короче, из-за чего белый заголовок терялся на светлых кадрах.
   Второй слой (слева) в макете отсутствует, но оставлен: он держит
   крошки в верхнем левом углу, которые вертикальный градиент не
   достаёт вовсе. */
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(5,7,63,.69) 0%, rgba(5,7,63,0) 68%), linear-gradient(90deg, rgba(5,7,63,.3) 0%, rgba(5,7,63,0) 46%); }
/* Перетекание 0.8 с (было 1.2): кадры сменяются чаще (3.5 с вместо 5),
   и прежняя долгая растворка съедала бы почти четверть показа кадра. */
.page-hero__bg[data-hero-rotate] img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.page-hero__bg[data-hero-rotate] img.is-active { opacity: 1; }
.page-hero .container { position: relative; z-index: 2; width: 100%; }
.page-hero > .container:last-child { margin-top: auto; }
.page-hero__bottom { padding-bottom: 80px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.page-hero__title { font-size: 56px; font-weight: 400; line-height: 64px; text-transform: uppercase; max-width: 1058px; margin: 0; }

/* --- Плоский заголовок страницы --- */
.page-title { font-size: 48px; font-weight: 400; line-height: 60px; text-transform: uppercase; color: #111011; margin: 30px 0 0; }

/* --- Баннер-карточка (1280x300/360, r24, фон-картинка) --- */
.banner-card { position: relative; border-radius: 24px; overflow: hidden; background: #05073F; color: #fff; min-height: 300px; display: flex; }
.banner-card__bg { position: absolute; inset: 0; z-index: 0; }
.banner-card__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Небольшой зум фона баннеров на вебе — только от 1280px, чтобы на
   планшете и мобиле кадр не «уезжал» за края карточки */
@media (min-width: 1280px) {
    .banner-card__bg { transform: scale(1.1); }
    /* Кроме баннера PVD: его кадр уже обрезан ровно по imageTransform из
       макета (1780:192181), и любой доп. зум съедал бы инструмент по краям. */
    .banner-card--pvd .banner-card__bg { transform: none; }
}
.banner-card__inner { position: relative; z-index: 1; width: 100%; padding: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.banner-card__title { font-size: 32px; font-weight: 400; line-height: 40px; margin-bottom: 16px; }
.banner-card__text { font-size: 16px; line-height: 20px; max-width: 620px; }
/* Высота 400 — фиксированная, а не min-height: раньше карточка тянулась под
   длину заголовка (2 строки → 360, 4 строки → 416), и кадр обрезался каждый
   раз по-разному. Теперь зона под фото всегда одной пропорции, и заказчику
   есть подо что готовить картинку. Было 360: с длинным текстом карточки PVD
   (5 строк) кнопка залипала на нижний край — оставалось 4px вместо 40. */
.banner-card--svc { height: 400px; min-height: 400px; color: #111011; background: #fff; }
/* Фон занимает ТОЛЬКО правые 58% — ровно ту зону, что отведена под фото
   в макете. Раньше картинка растягивалась на всю карточку, а левая её
   половина просто закрывалась белой плашкой сверху: object-fit: cover
   считал кроп по ширине 1408 вместо видимых 745, и заказчик не мог
   подобрать разрешение — какое фото ни ставь, полкадра уходило под текст.
   Теперь cover вписывает фото в саму видимую область. */
.banner-card--svc .banner-card__bg { left: 42%; }
/* Зум фона (общее правило от 1280px) баннеру с фото-колонкой не нужен:
   он снова съедает края у кадра, который и так обрезан по 58% ширины. */
.banner-card--svc .banner-card__bg { transform: none; }
/* Белая подложка под текстом обрывается ЧЁТКОЙ вертикальной линией на 42%
   (в макете градиента нет — просто граница белого блока и фото).
   Раньше здесь был плавный переход до 72%, из-за него фото «выцветало».
   Оставлена как страховка: фон карточки и так белый, но у .techhero
   (фото на всю ширину) правило отключено — см. .techhero::after. */
.banner-card--svc::after { content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 42%, rgba(255,255,255,0) 42%); }
/* Заголовок карточки прописными на всех разрешениях (в макете UPPER;
   раньше правило стояло только в @media 1279 — на десктопе капса не было) */
.banner-card--svc .banner-card__title { text-transform: uppercase; }
.banner-card--svc .banner-card__inner { z-index: 1; }
.banner-card--svc .banner-card__inner { flex-direction: column; align-items: flex-start; justify-content: space-between; }
.banner-card--svc .banner-card__text { max-width: 450px; }
/* Карточка услуги со ссылкой (у услуги есть детальная страница): кликабельна
   целиком, «Подробнее» внутри — не кнопка, а span, поэтому подсвечиваем его
   ховером самой карточки. */
a.banner-card--svc .btn--accent { transition: background-color .2s ease; }
a.banner-card--svc:hover .btn--accent { background: var(--c-accent-600); }
.banner-card + .banner-card { margin-top: 30px; }
/* --- Карточка услуги на мобиле (макет 1780:219553) ---
   Здесь раскладка другая: фото занимает верх карточки, под ним белая панель
   с заголовком, текстом и кнопкой во всю ширину. Раньше сюда сжимался
   десктопный вариант — текст лежал прямо на фотографии и не читался.
   Треугольной выемки между фото и белым блоком, которая есть в макете,
   по просьбе заказчика не делаем — граница ровная. */
@media (max-width: 767px) {
    /* height: auto — на мобиле высоту задаёт контент (фото 210 + панель),
       фиксированные 360 с десктопа тут не нужны */
    .banner-card--svc { height: auto; min-height: 0; }
    /* Фото — только верхняя зона. При inset: 0 оно вписывалось по cover во всю
       высоту карточки (361×462), кадр резался по бокам, и в видимой полосе
       оставался пустой фон вместо инструмента. */
    .banner-card--svc .banner-card__bg { left: 0; height: 210px; bottom: auto; }
    /* Белая панель: верх на 210px — там же, где в макете кончается фото */
    .banner-card--svc::after { top: 210px; right: 0; bottom: 0; left: 0;
        background: #fff; }
    .banner-card--svc .banner-card__inner { padding: 240px 20px 20px;
        flex-direction: column; align-items: stretch; gap: 20px; }
    .banner-card--svc .banner-card__title { font-size: 18px; line-height: 26px; margin-bottom: 10px; }
    .banner-card--svc .banner-card__text { font-size: 16px; line-height: 20px; max-width: none; margin: 0; }
    /* Кнопка во всю ширину карточки, 40px — как в макете */
    .banner-card--svc .banner-card__inner .btn { width: 100%; min-height: 40px; height: 40px;
        padding: 10px 24px; font-size: 16px; line-height: 20px;
        display: flex; align-items: center; justify-content: center; }
}
/* Баннер «Как стать нашим дилером» (Figma 1780:299355):
   поле сверху 80 (снизу и по бокам 40), заголовок 32/40 КАПСОМ, отбивка до
   текста 40, текст 620px выключкой по формату, кнопка прижата вправо-вниз
   на одну линию с низом текста. Было: отбивка 20, текст без выключки,
   верхнее поле 40. */
.banner-card--dealer .banner-card__inner { padding: 80px 40px 40px; align-items: flex-end; }
.banner-card--dealer .banner-card__title { margin-bottom: 40px; text-transform: uppercase; }
.banner-card--dealer .banner-card__text { max-width: 620px; text-align: justify; }
/* Кнопка 40px как в макете: базовый .btn даёт 48 (паддинг 16/28) */
.banner-card--dealer .banner-card__inner .btn { min-height: 40px; height: 40px;
    padding: 10px 24px; font-size: 16px; line-height: 20px; }

/* --- Производство, блок 2: текст + плитки с ховером (Figma 1338:90439) --- */
.prod2 { position: relative; overflow: hidden; }
.prod2__bg { position: absolute; left: 98px; top: 237px; width: 743px; z-index: 0; pointer-events: none; }
.prod2__text p { color: #fff; font-size: 16px; line-height: 20px; margin: 0 0 16px; max-width: 560px; }
.prodcards { display: flex; flex-direction: column; gap: 20px; }
.prodcard { position: relative; overflow: hidden; border-radius: 24px; padding: 20px 24px; min-height: 200px;
    background: linear-gradient(160deg, #4276FF 0%, #05399C 50%, #001246 100%); color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end; }
.prodcard__art { position: absolute; right: -12px; top: -43px; width: 323px; transition: opacity .25s; pointer-events: none; }
.prodcard__head { position: relative; display: flex; gap: 7px; align-items: flex-start; }
.prodcard__icon { width: 24px; height: 24px; flex: none; margin-top: 2px; filter: brightness(0) invert(1); }
/* Заголовок прописными — как в макете (в карточках справа UPPER) */
.prodcard__title { font-size: 24px; line-height: 28px; text-transform: uppercase; }
/* Плавное раскрытие через grid 0fr→1fr: анимация max-height до фиксированных
   300px давала рывок (текст «допрыгивал» до чужой высоты и обрывался).
   Тот же приём уже используют .why__item на главной и .speccard. */
.prodcard__body { position: relative; font-size: 16px; line-height: 20px; color: #D9D9D9;
    margin-left: 31px; display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
    transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease .05s, margin-top .45s cubic-bezier(.4, 0, .2, 1); }
.prodcard__body > span { display: block; min-height: 0; overflow: hidden; }
.prodcard:hover .prodcard__body, .prodcard:focus-within .prodcard__body,
.prodcard.is-hint .prodcard__body { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.prodcard__art { transition: opacity .45s ease; }
.prodcard:hover .prodcard__art, .prodcard:focus-within .prodcard__art,
.prodcard.is-hint .prodcard__art { opacity: 0; }

/* --- Производство, блок 3: участки-буллиты со сменой фото ---
   Макеты: 1780:191684 (1440), 1780:178268 (768), 1780:181190 (393). */
.prod3 { position: relative; overflow: hidden; }
.prod3__bg { position: absolute; right: 80px; bottom: -280px; width: 743px; z-index: 0; pointer-events: none; }
/* Заголовок и лид: в макете между ними 21px, до списка — 40px.
   Раньше лид тянули отрицательным margin-top: -28px прямо в разметке. */
/* Два класса — базовый .section-title из home.css грузится после pages.css
   и при равной весомости перебивал бы отбивку. */
.prod3 .prod3__title { margin-bottom: 21px; }
.prod3__lead { text-align: center; max-width: 676px; margin: 0 auto 40px;
    color: #696767; font-size: 16px; line-height: 20px; }
/* Колонки по макету: список 592 + отбивка 60 + фото 628 = 1280.
   Базовый .split даёт 628/628 и gap 24 — для этого блока не подходит.
   Доли, а не пиксели: при ширине окна 1280–1359 контейнер уже 1280, и от
   жёстких значений вылезала горизонтальная прокрутка на 20px. С 592fr/628fr
   на широком экране получаются ровно макетные 592 и 628, а на узком обе
   колонки ужимаются пропорционально.
   Селектор из двух классов — общее правило .split объявлено ниже по файлу и
   при равной весомости перебивало бы колонки. */
.prod3 .prod3__split { grid-template-columns: 592fr 628fr; gap: 60px; align-items: start; }
.prod3 .prod3__photo { aspect-ratio: 628 / 432; }
.areas { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
/* Название участка прописными 26/32 (замер макета: 26/32 w400 UPPER #111011),
   отбивка от иконки 12px. Начертание у активного не меняем — в макете вес
   везде 400, а «жирнение» дёргало строку по ширине. */
.areas__item { display: flex; gap: 12px; align-items: flex-start; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 26px; line-height: 32px; color: #111011; text-transform: uppercase; }
/* Солнышко: неактивное #DDDDDD, активное — синее #104495. Цвета сняты с
   макета (заливка Vector внутри Logo_icon); было #EDEDED / #05073F —
   активное уходило почти в чёрный, неактивное терялось. */
.areas__icon { width: 24px; height: 24px; flex: none; margin-top: 4px; color: #DDDDDD; transition: color .2s; }
.areas__item.is-active .areas__icon { color: #104495; }
/* На iOS :hover может «залипнуть» после касания и выглядеть как второй
   активный пункт. Наведение включаем только для мыши/трекпада. */
@media (hover: hover) and (pointer: fine) {
    .areas__item:hover .areas__icon { color: #104495; }
}

/* Планшет (макет 1780:178268): те же две колонки, но мельче — список 332,
   фото 300×260, отбивка 40. Доля фото 300/672 = 44.64%, поэтому колонку
   задаём процентом: на 768 получается ровно 300, а на 1024 фото
   пропорционально подрастает вместо того, чтобы висеть куцым столбиком.
   Селекторы из двух классов — иначе общее правило .split { 1fr } из блока
   «Адаптив» ниже по файлу схлопнет блок в одну колонку. */
@media (max-width: 1279px) {
    /* Внутренний отступ 24 — в макете сам слайдер уже контейнера: заголовок
       идёт по краю контента (x=24), а список с фото — с x=48. */
    .prod3 .prod3__split { grid-template-columns: minmax(0, 1fr) 44.64%; gap: 40px; padding: 0 24px; }
    .prod3 .prod3__photo { aspect-ratio: 300 / 260; }
    .prod3 .prod3__title { margin-bottom: 21px; }
    .prod3 .prod3__lead { margin-bottom: 20px; }
    /* Список: 16/22, отбивка между пунктами 8 */
    .prod3 .areas { gap: 8px; }
    .prod3 .areas__item { font-size: 16px; line-height: 22px; }
    /* Иконка выше строки (24 против 22) — в макете она прижата к верху
       текстового блока, а не отбита вниз, как на десктопе */
    .prod3 .areas__icon { margin-top: 0; }
}
/* Поля секций страницы «Наше производство» на планшете и мобиле — 40, а не 80
   (замер всех блоков в 1780:178268 и 1780:181190: pad 40 сверху и снизу).
   Правило .section { padding: 80px 0 } живёт в этом же файле и грузится
   последним, поэтому перечисляем секции страницы поимённо — трогать общий
   .section ради одной страницы рискованно, отступы поедут по всему сайту. */
@media (max-width: 1279px) {
    .section.prod2, .section.prod3, .section.prod4, .section.prod5,
    .section.proddet { padding: 40px 0; }
}
/* Мобайл (макет 1780:181190): одна колонка, фото НАД списком, отбивка 20.
   Порядок в разметке обратный (список раньше фото), поэтому order. */
@media (max-width: 767px) {
    .prod3 .prod3__split { grid-template-columns: 1fr; gap: 20px; padding: 0 16px; }
    .prod3 .prod3__photo { order: -1; aspect-ratio: 329 / 220; }
    .prod3 .prod3__lead { margin-bottom: 40px; }
    /* Глобальное правило адаптива скрывает стрелки всех слайдеров. В галерее
       производства оставляем явные белые шевроны — подсказку горизонтального
       скролла; при наведении и фокусе они становятся оранжевыми. */
    .prod4 .galslider__arrow { display: flex; top: 124px; color: #fff; }
    /* Три класса нужны, чтобы более позднее планшетное правило с -20px
       не выносило стрелки за мобильный вьюпорт и не создавало белую полосу. */
    .prod4 .galslider .galslider__arrow--l { left: 8px; }
    .prod4 .galslider .galslider__arrow--r { right: 8px; }
    .prod4 .galslider__arrow:hover,
    .prod4 .galslider__arrow:focus-visible { color: var(--c-accent); }
}
/* Плавного проявления у кадра нет намеренно: скрипт меняет src сразу после
   выбора пункта. Любой фейд здесь читался бы как задержка переключения. */

/* --- Производство, блок 4: горизонтальный слайдер галереи --- */
.galslider { position: relative; }
.galslider__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.galslider__track::-webkit-scrollbar { display: none; }
.galslider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.galcard { flex: 0 0 410px; scroll-snap-align: start; }
.galcard__img { border-radius: 24px; overflow: hidden; aspect-ratio: 410/320; background: #05073F; }
.galcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Подпись под фото прописными 24/28 (замер макета: 24/28 UPPER #FFFFFF) */
.galcard__name { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: 24px; line-height: 28px; color: #fff; text-transform: uppercase; }
/* Солнышко 20×20 светлое #EDEDED — в макете оно не оранжевое */
.galcard__name svg { width: 20px; height: 20px; color: #EDEDED; flex: none; }
/* Стрелки: шеврон 24×24 #EDEDED без круглой подложки (перебиваем .slider-arrow) */
.galslider__arrow { position: absolute; top: 148px; z-index: 2;
    width: 24px; height: 24px; padding: 0; background: none; border: 0; border-radius: 0;
    color: #EDEDED; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.galslider__arrow:hover { background: none; color: var(--c-accent); }
.galslider__arrow svg { width: 24px; height: 24px; max-width: none; flex: none; stroke-width: 1.5; }
.galslider__arrow--l { left: -40px; }
.galslider__arrow--r { right: -40px; }
/* Ниже 1360 контейнер прижимается к краям окна и вынос стрелок на 40px
   вылезал за вьюпорт — появлялась горизонтальная прокрутка на 20px.
   20px помещаются на любой ширине: столько же занимает поле контейнера. */
@media (max-width: 1359px) {
    .galslider .galslider__arrow--l { left: -20px; }
    .galslider .galslider__arrow--r { right: -20px; }
}

/* --- Производство, блок 5: PVD-баннер --- */
/* Баннер PVD (Figma 1780:192180): 1280×300, паддинг 30, лого 117×53 сверху,
   заголовок 32/40 ПРОПИСНЫМИ у нижнего края, кнопка 170×40 справа снизу.
   Раньше заголовок был строчными и весь блок сидел слишком высоко. */
.banner-card--pvd .banner-card__inner { align-items: flex-end; padding: 30px; }
.banner-card--pvd .banner-card__inner > div { display: flex; flex-direction: column;
    justify-content: space-between; align-self: stretch; }
.banner-card--pvd .banner-card__title { text-transform: uppercase; margin-bottom: 0; }
/* На узких экранах кадр со свёрлами убираем: карточка сжимается, фото
   не масштабируется вместе с ней, и белый заголовок ложится прямо на
   золочёные хвостовики — читать невозможно. Вместо него синий градиент
   баннера «Итог работы» (Figma 2207:118981) — тот же приём и та же
   палитра, что у остальных баннеров без фото. Ставим фоном самой
   карточки, а не поверх: .banner-card__bg скрыт, перекрывать нечего. */
@media (max-width: 1279px) {
    .banner-card--pvd { background: linear-gradient(135deg, #4276FF 0%, #05399C 50%, #001246 100%); }
    .banner-card--pvd .banner-card__bg { display: none; }
}

/* --- Производство в деталях: карточки (Figma 1338:91398) ---
   Раньше градиент заливал всю зону, из-за чего фото сидело на тёмном фоне. */
.proddet-video { margin-top: 30px; border-radius: 18px; overflow: hidden; background: #000; }
.proddet-video video { display: block; width: 100%; }

/* --- О компании: новости с фоновой иллюстрацией (Figma 1253:48693) --- */
.newssec { position: relative; overflow: hidden; }
.newssec__bg { position: absolute; left: -71px; top: -86px; width: 573px; z-index: 0; pointer-events: none; }
/* Дубль кнопки «Все новости» под карточками — нужен только на планшете
   и мобиле (см. адаптив в конце файла); на десктопе она в шапке секции */
.newssec__more { display: none; }

/* --- О компании: фон-иллюстрация + видеокарточка (Figma 1253:42980) --- */
.about-sec { position: relative; overflow: hidden; }
.about-sec__bg { position: absolute; left: 27%; top: -35px; width: 534px; z-index: 0; pointer-events: none; }
.videocard { position: relative; border-radius: 24px; overflow: hidden; background: #05073F; }
.videocard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.videocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,63,.5) 0%, rgba(5,7,63,.15) 60%, rgba(5,7,63,.35) 100%); }
.videocard__logo { position: absolute; left: 50%; top: 39px; transform: translateX(-50%); width: 142px; z-index: 2; }
/* Кнопка плей — оранжевый круг 48×48 строго по центру видео
   (замер рендера макета: круг 48×48, центр совпадает с центром карточки) */
/* Кнопка плея — один в один с макетом 1780:126959: круг 49×49 #FF6A00,
   треугольник 16×19 со смещением 19/15 от края круга. Раньше стоял круг 48
   и типовой «материаловский» треугольник 16×16 из вьюбокса 24 — он мельче и
   с другим наклоном граней. Ровно та же кнопка, что в «Производстве
   в деталях» (.pdcard__play). */
.videocard__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 49px; height: 49px; padding: 0; border: 0; border-radius: 50%; background: #FF6A00; color: #fff; cursor: pointer; z-index: 2; transition: transform .2s, background .2s; }
.videocard__play svg { position: absolute; left: 19px; top: 15px; width: 16px; height: 19px; display: block; }
.videocard__play:hover { transform: translate(-50%, -50%) scale(1.12); background: var(--c-accent-600); }
.modal--video .modal__dialog { width: min(960px, 92vw); max-width: none; background: #000; padding: 0; border-radius: 16px; position: relative; }
.modal--video .modal__dialog video { display: block; width: 100%; border-radius: 16px; }
.modal--video .modal__close { position: absolute; top: -36px; right: 0; color: #fff; }
.modal--video .modal__close:hover { color: var(--c-accent); }

/* --- Сплит-секция 628+628 --- */
/* Две колонки по 628 при контенте 1280 — то же, что жёсткие 628px, но без
   переполнения: на окнах 1280–1359 контейнер уже 1280, и от фиксированных
   значений вылезала горизонтальная прокрутка (видно было на «Современном
   производстве» и в слайдере). minmax(0,...) — чтобы длинное слово внутри
   колонки не раздувало трек. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: space-between; gap: 24px; align-items: start; }
.split__visual { position: relative; border-radius: 24px; overflow: hidden; }
.split__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead-text p { font-size: 16px; line-height: 20px; color: #696767; margin: 0 0 14px; }

/* --- Текст блока «О компании» (Figma 1780:126517) ---
   В макете Description — колонка 460px (не на всю половину 628) с выключкой
   по формату, отбивка от заголовка 60px. Ссылка на ОЭЗ — акцентным цветом. */
.about-sec .lead-text { max-width: 460px; margin-top: 60px; }
.about-sec .lead-text p { text-align: justify; }
.about-sec .lead-text a { color: var(--c-accent); }
.about-sec .lead-text a:hover { text-decoration: underline; }

/* --- Детальная отрасли: чертёж-подложка под основной секцией (Figma 1780:368186) --- */
.soldet { position: relative; overflow: hidden; }
.soldet .container { position: relative; z-index: 1; }
.soldet__bg { position: absolute; left: 117px; top: 222px; width: 720px; z-index: 0; pointer-events: none; }
@media (max-width: 1279px) { .soldet__bg { left: 40px; width: 560px; } }
@media (max-width: 767px) { .soldet__bg { display: none; } }

/* --- Цифры --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.stat { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; }
.stat__icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.stat__icon img { width: 62px; height: 62px; object-fit: contain; }
.stat__num { font-size: 48px; line-height: 60px; color: var(--c-accent); }
.stat__label { font-size: 20px; line-height: 21px; color: #111011; }

/* --- История (тёмная) --- */
/* Лента годов листается вбок: годы заводят в админке, и рано или поздно их
   станет больше, чем помещается в кадр. Была жёсткая сетка на 5 колонок —
   шестой год сваливался на второй ряд и лента времени рвалась. Теперь это
   карусель на общей механике [data-hscroll] (стрелки, перетаскивание,
   скролл-снап), в кадре пять колонок, как в макете 1780:127004.
   Маркер-«стик» держим ВНУТРИ колонки (padding-left), а не выносим влево
   отрицательным left, как раньше: у первого года он оказался бы за левым
   краем трека и обрезался прокруткой. Шаг колонок от этого не меняется,
   текст выходит 226px вместо 230 — на глаз не отличить. Зазор 11px, а не
   32: 21px из прежних 32 теперь съедает стик внутри следующей колонки. */
.history { position: relative; margin-top: 50px; }
.history__track { display: flex; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.history__track::-webkit-scrollbar { display: none; }
.history__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.history__item { position: relative; flex: none; width: calc((100% - 44px) / 5);
    padding-left: 21px; scroll-snap-align: start; }
.history__item::before { content: ""; position: absolute; left: 0; top: 27px; width: 16px; height: 258px;
    background: url(/local/templates/mrt/css/../images/fig/year-stick.svg) no-repeat; }
.history__year { font-size: 48px; line-height: 60px; color: var(--c-accent); margin-bottom: 40px; }
/* Интерлиньяж 24px (в макете Description 18/24). Было 28 — из-за этого
   текст «расползался» по высоте, особенно заметно в последней колонке,
   где строк больше всего. Колонка фиксированная 230px, как в макете. */
.history__text { font-size: 18px; line-height: 24px; color: #DDDDDD; }
/* Стрелки: шеврон 24×24 без подложки, светлый — секция тёмная. Позиционируем
   целиком здесь: базовый .slider-arrow лежит в home.css, который страница
   «О компании» не грузит. Скрыты по умолчанию — показывает только скрипт,
   когда лента длиннее кадра (иначе на пяти годах висели бы вхолостую). */
/* top 30 = середина строки года (48/60), translateY центрирует по ней шеврон */
.history .slider-arrow { position: absolute; top: 30px; transform: translateY(-50%); z-index: 2; display: none;
    align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    color: #EDEDED; cursor: pointer; transition: color .2s; }
.history.is-scrollable .slider-arrow { display: flex; }
.history .slider-arrow:hover { background: none; color: var(--c-accent); }
.history .slider-arrow svg { width: 24px; height: 24px; max-width: none; flex: none; stroke-width: 1.5; }
.history .slider-arrow--prev { left: -33px; }
.history .slider-arrow--next { right: -33px; }
/* Ниже 1386 контейнер прижимается к краям окна и вынос стрелок на 33px
   вылезал бы за вьюпорт, добавляя горизонтальную прокрутку. 20px помещаются
   на любой ширине — столько же занимает боковое поле контейнера. */
@media (max-width: 1385px) {
    .history .slider-arrow--prev { left: -20px; }
    .history .slider-arrow--next { right: -20px; }
}

/* --- Преимущества (тёмная карточка на градиенте) --- */
.advsec { background: linear-gradient(180deg, #05073F 0%, #000000 100%); }
/* Градиент баннера: угол 108.3deg посчитан из gradientHandlePositions макета
   ([0,0] → [1,1] на рамке 1280×424), стопы #4276FF → #05399C 50% → #001246.
   Было 135deg — из-за этого светлая зона уходила не в тот угол.
   Карточка 1280×520 (Figma 1780:127039 — обновлённый макет, заказчик просил
   «пошире»; было 1280×440). Контент 1200×364 центрируется по вертикали,
   отсюда паддинги 78/40 вместо прежних 30/40. */
.advantages { position: relative; overflow: hidden; background: linear-gradient(108.3deg, #4276FF 0%, #05399C 50%, #001246 100%); border-radius: 24px; padding: 78px 40px; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
/* Чертёж 642×258 прижат к низу карточки (в макете 25px от нижнего края) */
.advantages__graphics { position: absolute; left: 30px; bottom: 25px; width: 642px; pointer-events: none; }
.advantages__title { position: relative; font-size: 48px; line-height: 60px; text-transform: uppercase; max-width: 450px; }
/* Колонка буллитов 598px, текст в ней — 463px: 67.5px отступ слева от середины
   и столько же справа до края карточки (замер макета) */
.advantages__list { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 0 67.5px; }
/* Пункт: заголовок 26/32 UPPER, описание 16/20 #DDDDDD (замер макета:
   Subtitle 26/32 UPPER, Description Text 16/20; было 16/22 без прописных) */
.advantages__item-title { position: relative; font-size: 26px; line-height: 32px; text-transform: uppercase; margin-bottom: 4px; padding-left: 28px; }
.advantages__item-title::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 28px; background: url(/local/templates/mrt/css/../images/fig/adv-icon.svg) no-repeat center/contain; }
.advantages__item-text { font-size: 16px; line-height: 20px; color: #DDDDDD; }

/* --- Карточки новостей (410x230 / 628x300, оверлей) --- */
.newsgrid { display: grid; gap: 24px; }
.newsgrid--3 { grid-template-columns: repeat(3, 1fr); }
.newsgrid--2 { grid-template-columns: repeat(2, 1fr); }
.newscard { position: relative; border-radius: 24px; overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; color: #fff; background: #05073F; }
.newsgrid--2 .newscard { min-height: 300px; }
.newscard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.newscard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,7,63,0) 25%, rgba(5,7,63,.85) 100%); }
.newscard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(5,7,63,.7); opacity: 0; transition: opacity .25s; }
.newscard:hover::before { opacity: 1; }
/* Внутренние отбивки карточки — 18px по всем сторонам (замер макета:
   Container pad=18, Content_section gap=10, Card_Bottom gap=12) */
.newscard__body { position: relative; z-index: 2; padding: 18px; width: 100%; }
/* Плашка даты 81×20: паддинг 3/8, радиус скруглён полностью (r=62 в макете) */
.newscard__date { position: relative; display: inline-block; background: #fff; color: #111011; font-size: 12px; line-height: 14px; padding: 3px 8px; border-radius: 62px; margin-bottom: 10px; }
/* Стрелка 18×18 строго из макета (1780:92158, Secondary / Button / News open):
   круг #FF6A00 и белая диагональ со стрелкой вверх-вправо, stroke .81 round.
   Раньше был самодельный путь другого направления и цвет #FF7D1F. */
.newscard__date::after { content: ""; position: absolute; left: calc(100% + 6px); top: 50%;
    transform: translateY(-50%); width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Crect width='18' height='18' rx='9' fill='%23FF6A00'/%3E%3Cpath d='M4.92188 13.1122L13.1078 4.92627M13.1078 10.3835V4.92627H7.6505' stroke='white' stroke-width='0.812585' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat; }
.newscard__name { font-size: 20px; line-height: 21px; margin-bottom: 12px; }
/* Описание — ровно 3 строки: в макете Card_Content 374×60 при 16/20,
   без ограничения длинный текст выдавливал блок и ломал раскладку */
.newscard__text { font-size: 16px; line-height: 20px; color: #E9E9EE;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.section__head--left { justify-content: space-between; }
.section__head--left .section-title { text-align: left; }

/* --- Сертификаты --- */
/* ГИСП-баннер: белая скошенная панель слева, тёмная часть с двумя
   диагональными разделителями, номера — оранжевые ромбы на разделителях */
.banner-card--gisp { background: #fff; color: #111011; min-height: 300px; display: block; }
.banner-card--gisp::before { content: ""; position: absolute; inset: 0; background: #05073F;
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 30% 100%); }
.gisp-sep { position: absolute; top: 0; bottom: 0; left: 66.3%; border-left: 1px solid rgba(255,255,255,.25); transform: skewX(7deg); }
.gisp-num { position: absolute; top: 50%; width: 21px; height: 21px; margin-top: -10px; background: var(--c-accent); border-radius: 50%; z-index: 2; }
.gisp-num span { position: absolute; inset: 0; color: #fff; font-size: 14px; line-height: 21px; text-align: center; }
.gisp-num--1 { left: calc(32% - 10px); }
.gisp-num--2 { left: calc(66.3% - 10px); }
.gisp-cta { position: absolute; left: 30px; top: 40px; bottom: 40px; width: 313px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.gisp-cta__text { font-size: 20px; line-height: 25px; text-transform: uppercase; }
.gisp-cta .btn { align-self: flex-start; }
.gisp-item { position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 20px; color: #fff; }
.gisp-item--1 { left: 36.3%; width: 321px; }
.gisp-item--2 { left: 68.1%; width: 356px; }
.gisp-item p { margin: 0 0 10px; }
.gisp-item p:last-child { margin-bottom: 0; }
.gisp-item a { color: var(--c-accent); text-decoration: underline; }
.gisp-item a:hover { color: var(--c-accent-600); }

/* ГИСП-баннер, планшет (Figma 1780:226580): белая панель слева с клином, пункты столбиком */
@media (max-width: 1024px) {
    .banner-card--gisp { display: grid; grid-template-columns: 42% 1fr; align-content: center; row-gap: 20px; min-height: 340px; padding: 28px 28px 28px 0; background: #05073F; color: #fff; }
    .banner-card--gisp::before { background: #fff; clip-path: polygon(0 0, 42% 0, 42% 44%, 44% 50%, 42% 56%, 42% 100%, 0 100%); }
    .gisp-sep, .gisp-num { display: none; }
    .banner-card--gisp .gisp-cta { position: relative; left: auto; top: auto; bottom: auto; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: auto; padding: 0 30px; z-index: 1; color: #111011; justify-content: flex-start; gap: 32px; }
    .gisp-item { position: relative; top: auto; transform: none; left: auto !important; width: auto !important; grid-column: 2; padding-left: 33px; }
    .gisp-item::before { content: "1"; position: absolute; left: 0; top: 50%; margin-top: -11px; width: 21px; height: 21px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 14px; line-height: 21px; text-align: center; }
    .gisp-item--2::before { content: "2"; }
}
/* ГИСП-баннер, мобильный (Figma 1780:227156): белая шапка с клином вниз, кнопка на всю ширину */
@media (max-width: 767px) {
    .banner-card--gisp { display: block; min-height: 0; padding: 24px 20px 88px; }
    .banner-card--gisp::before { clip-path: polygon(0 0, 100% 0, 100% 205px, 56% 205px, 50% 187px, 44% 205px, 0 205px); }
    .banner-card--gisp .gisp-cta { position: static; display: block; padding: 0; width: auto; }
    .gisp-cta__text { position: relative; z-index: 1; min-height: 200px; }
    .banner-card--gisp .gisp-cta .btn { position: absolute; left: 20px; right: 20px; bottom: 24px; display: flex; justify-content: center; }
    .gisp-item { margin-top: 4px; }
}

/* ==========================================================================
   Дилер: 1-й блок (Figma 1780:256800)
   Заголовок 48/60 UPPER, ниже отбивка 60px и описание строго 460px
   выключкой по формату (в макете align=JUSTIFIED). Карточки справа —
   628×200 фиксированной высоты, БЕЗ раскрытия по ховеру.
   ========================================================================== */
.dlrhero__grid { margin-top: 36px; align-items: start; }
.dlrhero__content { display: flex; flex-direction: column; }
.dlrhero__title { margin: 0; }
/* 460px и выключка по формату — как в макете; отбивка от заголовка 60px */
.dlrhero__text { margin-top: 60px; max-width: 460px; }
.dlrhero__text p { text-align: justify; font-size: 16px; line-height: 20px; color: #696767; }

/* Статичные карточки: гасим ховер-анимацию .why__item (она нужна на главной,
   здесь макет её не предусматривает).
   ВАЖНО: на этой странице home.css подключается ПОСЛЕ pages.css, а
   .why__item:hover::before имеет ту же специфичность, что и
   .why__item--static:hover::before — побеждал бы home.css. Поэтому
   дублируем класс (.why__item--static.why__item--static) и поднимаем
   специфичность выше, чем у правил главной. */
.why__item--static { min-height: 200px; justify-content: flex-end; }
.why__list--static .why__item--static.why__item--static:hover::before,
.why__list--static .why__item--static.why__item--static:focus-within::before { opacity: 0; }
.why__list--static .why__item--static.why__item--static:hover .why__item-img,
.why__list--static .why__item--static.why__item--static:focus-within .why__item-img { opacity: .85; }
/* «Солнышко» 24×24 перед заголовком карточки */
.why__item--static .ic { width: 24px; height: 24px; color: #fff; flex: 0 0 auto; margin-top: 2px; }

/* ==========================================================================
   Дилер: «Что вы получаете как дилер MRT» (Figma 1780:257696)
   Заголовок по ЦЕНТРУ, «солнышки» тёмные (#111011, не оранжевые),
   текст под иконкой БЕЗ отступа слева — по левому краю солнышка.
   ========================================================================== */
.dlrben-sec { position: relative; }
.dlrben-sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 314px;
    background: linear-gradient(180deg, #05073F 0%, #000000 100%); }
.dlrben-sec .container { z-index: 1; }
.dlrben-sec__title { text-align: center; }
.dlrben-card { background: #FDFDFD; border-radius: 24px; padding: 30px 40px; }
.dlrben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.dlrben__icon { display: block; width: 84px; height: 84px; margin: 0 auto 0; object-fit: contain; }
/* Фиксированная высота блока заголовка 64px (2 строки по 32) — чтобы текст
   под всеми тремя подзаголовками начинался с одного уровня независимо от
   длины заголовка. На планшете/мобиле высоту отпускаем (см. media ниже). */
.dlrben__head { display: flex; gap: 8px; align-items: flex-start; margin-top: 0; min-height: 64px; }
.dlrben__swirl { width: 20px; height: 28px; flex: none; color: #111011; }
.dlrben__title { font-size: 26px; line-height: 32px; text-transform: uppercase; color: #111011; }
/* Отбивка 16px, без левого отступа (в макете текст на одной вертикали с солнышком) */
.dlrben__text { font-size: 16px; line-height: 20px; color: #111011; margin: 16px 0 0; }

/* Дилер: «3 простых шага» (Figma 1502:172621) — светлая панель, тёмная часть
   с вертикальными разделителями со «стрелкой» на уровне номеров */
.dlrsteps { background: #DDDDDD; color: #111011; min-height: 300px; display: block; }
.dlrsteps::before { content: ""; position: absolute; inset: 0; background: #05073F;
    clip-path: polygon(24.14% 0, 100% 0, 100% 100%, 24.14% 100%, 24.14% 28%, 22.26% 22%, 24.14% 15.7%); }
.dlrsteps__sep { position: absolute; top: 0; height: 100%; width: 26px; }
.dlrsteps__cta { position: absolute; left: 30px; top: 35px; bottom: 30px; width: 271px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.dlrsteps__title { font-size: 20px; line-height: 24px; text-transform: uppercase; }
.dlrsteps__cta .btn { align-self: flex-start; padding: 13px 23px; }
.dlrsteps__step { position: absolute; top: 56px; color: #fff; }
.dlrsteps__step .gisp-num { position: relative; top: 0; display: inline-block; margin: 0; vertical-align: top; flex: none; }
.dlrsteps__head { display: flex; gap: 9px; align-items: flex-start; font-size: 16px; line-height: 22px; text-transform: uppercase; }
.dlrsteps__text { font-size: 16px; line-height: 20px; margin-top: 8px; }

/* --- Полоса этапов на 4 шага (страницы инжиниринга, макеты 2310:20313
   и 2310:30544). Отличие от дилерской: шагов четыре, и они не по верхнему
   краю, а отцентрованы по вертикали. Координаты из макета (ширина полосы
   1280): текст шага начинается на 337 / 599 / 853 / 1093, номер — на 24
   левее. Задаём в процентах, чтобы полоса тянулась на планшете. --- */
.dlrsteps--eng::before { clip-path: polygon(23.6% 0, 100% 0, 100% 100%, 23.6% 100%, 23.6% 56%, 21.7% 50%, 23.6% 44%); }
.dlrsteps--eng .dlrsteps__cta { top: 30px; bottom: 30px; }
.dlrsteps--eng .dlrsteps__step { top: 50%; transform: translateY(-50%); }
.dlrsteps--eng .dlrsteps__head { align-items: center; }
.dlrsteps--eng .dlrsteps__step--1 { left: 23.6%; width: 17%; }
.dlrsteps--eng .dlrsteps__step--2 { left: 43.4%; width: 17%; }
.dlrsteps--eng .dlrsteps__step--3 { left: 63.3%; width: 17%; }
.dlrsteps--eng .dlrsteps__step--4 { left: 82%; width: 17.5%; }
/* Разделители — по левому краю номера соответствующего шага (26px «стрелки»
   центруются на нём, поэтому −13px) */
.dlrsteps--eng .dlrsteps__sep--2 { left: calc(43.4% - 13px); }
.dlrsteps--eng .dlrsteps__sep--3 { left: calc(63.3% - 13px); }
.dlrsteps--eng .dlrsteps__sep--4 { left: calc(82% - 13px); }

/* ==========================================================================
   Каталог (Figma 1783:3210 — «Каталог [После правок от 14.07.26]»)
   Секция #DDDDDD, заголовок 48/60 КАПСОМ в 2 строки + логотип MRT 142×64
   в конце второй строки. Сетка 2×2: карточки 628×320, зазор 24 по колонкам
   и 40 по рядам. Карточка #05073F r24 pad 24; чертёж 527×331 смещён вправо
   на 50 и вверх на 6; название 32/40 КАПСОМ; кнопка «Каталог» слева внизу.
   Ховер (1783:8420 / 1783:8423) — яркий синий градиент.
   ========================================================================== */
.catpage { position: relative; overflow: hidden; background: #DDDDDD; padding: 20px 0 80px; }
.catpage__bg { position: absolute; left: -54px; bottom: 40px; width: 882px; z-index: 0; pointer-events: none; }
.catpage .crumbs { padding: 0; }
/* Логотип тёмный (в макете fill #111011), исходник белый — инвертируем.
   display: inline-block обязателен: глобальное img{display:block} в base.css
   уводило логотип на отдельную строку вместо конца второй. */
.catpage__logo { display: inline-block; height: 64px; width: auto;
    vertical-align: -18px; margin-left: 10px; filter: invert(1); }
/* Отбивка до карточек 34, а не 40: логотип 64px в строке 60px растягивает
   строчный бокс на 6px, поэтому от ТЕКСТА до карточек получается ровно 40,
   как в макете. */
.section-title.catpage__title, .page-title.catpage__title { font-size: 48px; font-weight: 400;
    line-height: 60px; text-transform: uppercase; color: #111011; margin: 30px 0 34px; }

.catfiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin: 0; }
.catfile { position: relative; overflow: hidden; background: #05073F; border-radius: 24px;
    height: 320px; padding: 24px; color: #fff; display: flex; flex-direction: column;
    text-decoration: none; }
/* Ховер-градиент кладём отдельным слоем: у карточки уже есть фон, а плавный
   переход между двумя градиентами через background-image не анимируется. */
.catfile::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    background: linear-gradient(160deg, #4276FF 0%, #05399C 55%, #001246 100%);
    opacity: 0; transition: opacity .3s ease; }
.catfile:hover::before, .catfile:focus-visible::before { opacity: 1; }
/* Чертёж 527×331: в макете x=+50, y=-6 от края карточки. max-width: none —
   иначе глобальное img{max-width:100%} сжимает его до ширины карточки. */
.catfile__ill { position: absolute; left: 50px; top: -6px; width: 527px; height: 331px;
    max-width: none; object-fit: contain; object-position: center; z-index: 0; pointer-events: none; }
/* У ProLine и HPC пропорции свои, поэтому общие 527×331 им не годятся.
   Размеры и координаты взяты из макета 1783:3210 как есть: карточка там
   628×320 и в вёрстке ровно столько же ((1280 − 24) / 2), так что числа
   переносятся один в один. ProLine — пластина WNMG 407×349 (2377:31712),
   свисает за верхний край; HPC — сферическая фреза 580×87 (2377:31723),
   узкая горизонтальная полоса по центру высоты. */
.catfile--proline .catfile__ill { left: 229px; top: -39px; width: 407px; height: 349px; }
.catfile--axial .catfile__ill { left: 180px; top: 129px; width: 580px; height: 87px; }
.catfile__title { position: relative; z-index: 1; display: block; max-width: 580px;
    font-size: 32px; line-height: 40px; text-transform: uppercase; color: #fff; }
/* Кнопка 105×40 r12 (в макете). Селектор в 2 класса: base.css с .btn
   {padding:16px 28px} подключается ПОЗЖЕ pages.css и перебивал бы. */
.catfile .catfile__btn { position: relative; z-index: 1; margin-top: auto; align-self: flex-start;
    min-height: 40px; height: 40px; padding: 10px 24px; border-radius: 12px;
    font-size: 16px; line-height: 20px; font-weight: 400;
    display: inline-flex; align-items: center; justify-content: center; }

/* --- Архивные каталоги: белая карточка r18 со списком ссылок --- */
.catarch { background: #DDDDDD; padding: 40px 0 80px; }
.section-title.catarch__title { text-align: left; color: #111011; font-weight: 400;
    font-size: 48px; line-height: 60px; margin: 0 0 40px; }
.catarch__card { background: #fff; border-radius: 18px; padding: 20px 100px 20px 30px; }
.catarch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.catarch__link { display: inline-flex; align-items: center; gap: 4px;
    font-size: 20px; line-height: 21px; color: #111011; }
.catarch__link:hover { color: var(--c-accent); text-decoration: underline; }
.catarch__arrow { width: 16px; height: 16px; flex: 0 0 auto; }

/* Статьи: заголовки-якоря содержания */
html { scroll-behavior: smooth; }
.article__h { font-size: 20px; line-height: 24px; color: #111011; margin: 26px 0 12px; scroll-margin-top: 90px; }
.article__anchor { scroll-margin-top: 90px; }

/* Поиск: строка и пустая выдача */
.searchbar { display: flex; gap: 12px; max-width: 700px; margin-top: 30px; }
.searchbar__input { height: 46px; }
.searchbar__hint { font-size: 16px; line-height: 20px; color: #696767; margin: 18px 0 0; }
.search-empty { background: rgba(163,175,213,.10); border-radius: 24px; padding: 40px; margin-top: 30px; max-width: 700px; }
.search-empty__title { font-size: 24px; line-height: 30px; color: #111011; margin-bottom: 12px; }
.search-empty p { font-size: 16px; line-height: 20px; color: #696767; margin: 0 0 20px; }

/* Специнструмент (Figma 2207:216713) */
.specintro { position: relative; overflow: hidden; }
/* Колонки 649 (текст) и 628 (карточки) с прижимом к краям контейнера 1280.
   Базовый .split даёт 628/628 и не подходит: слева заголовок в 48 кегле
   и три текстовых блока, им нужны лишние 20px. */
.specintro__grid { display: grid; grid-template-columns: minmax(0, 649fr) minmax(0, 628fr);
    justify-content: space-between; gap: 24px; align-items: start; margin-top: 30px; }
.specintro__col { display: flex; flex-direction: column; align-items: flex-start; }
/* Заголовок → текст 40, текст → кнопка 20 (Section Content gap=20, Section_Row gap=40) */
.specintro .spectext { margin-top: 40px; }
.specintro__btn { margin-top: 20px; }
/* Блоки текста идут через 26 (внутренний Section_Row gap=26), внутри блока
   подзаголовок → абзац 16, абзацы и пункты списка — через 10 */
.spectext__block + .spectext__block { margin-top: 26px; }
.spectext__block h2 { font-size: 20px; line-height: 24px; font-weight: 400; color: #696767;
    max-width: 560px; margin: 0 0 16px; text-transform: none; }
.spectext p { margin-bottom: 10px; }
.spectext p:last-child { margin-bottom: 0; }
/* Список с дефисами — как в макете (маркер нарисован символом в тексте) */
.spectext__list { list-style: none; padding: 0; margin: 0; max-width: 560px; }
.spectext__list li { position: relative; padding-left: 14px; margin-bottom: 10px;
    font-size: 16px; line-height: 20px; color: #696767; }
.spectext__list li:last-child { margin-bottom: 0; }
.spectext__list li::before { content: "-"; position: absolute; left: 0; top: 0; }
/* Чертёж-подложка (Figma 1780:323401). Ориентируемся на ВИДИМУЮ часть:
   внутри кадра 825×746 сама графика — группа 717×280, её верх приходится на
   511 из 1264 высоты секции, то есть на 40%. Привязка к верху в процентах,
   а не bottom: -80 — иначе рисунок уезжал в самый низ секции. */
.specintro__bg { position: absolute; left: 3px; top: 40%; width: 825px; z-index: 0; pointer-events: none; }
.speccards { display: flex; flex-direction: column; gap: 20px; }
.speccard { position: relative; overflow: hidden; border-radius: 24px; padding: 20px 24px; min-height: 200px;
    background: #05073F; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
    transition: background-color .45s ease; }
/* Ховер (Figma 1398:39044, вариант State=Hover): фон — синий градиент
   #05073F 25.93% → #062675 100%, заголовок уезжает вверх, под ним текст.
   Угол 127.6deg посчитан из gradientHandlePositions макета
   ([0,0] → [0.799, 1.165] на рамке 628×332), а не взят на глаз.
   Отдельным слоем ::before, чтобы градиент можно было плавно проявить
   (переход самого background-image браузеры не анимируют). */
.speccard::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(127.6deg, #05073F 25.93%, #062675 100%);
    opacity: 0; transition: opacity .45s ease; }
.speccard:hover::before, .speccard:focus-within::before, .speccard.is-hint::before { opacity: 1; }
.speccard__art { position: absolute; right: -12px; top: -43px; width: 323px; transition: opacity .25s; pointer-events: none; }
.speccard__head { position: relative; z-index: 1; display: flex; gap: 12px; align-items: flex-start; }
.speccard__icon { width: 24px; height: 24px; flex: none; margin-top: 2px; }
/* Прописные — как в макете (UPPER) и как у парных карточек .why__item на главной */
.speccard__title { font-size: 24px; line-height: 28px; text-transform: uppercase; }
/* Плавное раскрытие через grid 0fr→1fr: в отличие от max-height даёт
   ровную анимацию и не требует угадывать высоту (как на главной у .why__item).
   Отбивка заголовок→текст 26px — замер макета (Card_Text gap=26). */
.speccard__body { position: relative; z-index: 1; font-size: 16px; line-height: 20px; color: #D9D9D9;
    margin-left: 36px; display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
    transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease .05s, margin-top .45s cubic-bezier(.4, 0, .2, 1); }
.speccard__body > span { display: block; min-height: 0; overflow: hidden; }
.speccard:hover .speccard__body, .speccard:focus-within .speccard__body,
.speccard.is-hint .speccard__body { grid-template-rows: 1fr; opacity: 1; margin-top: 26px; }
.speccard:hover .speccard__art, .speccard:focus-within .speccard__art,
.speccard.is-hint .speccard__art { opacity: 0; }
/* На тачскринах ховера нет — в планшетном и мобильном макетах (2207:211443,
   2207:216708) карточки нарисованы сразу раскрытыми, так и показываем */
@media (hover: none) {
    .speccard { justify-content: flex-start; }
    .speccard__body { grid-template-rows: 1fr; opacity: 1; margin-top: 26px; }
    .speccard__art { display: none; }
}
/* Мобильный (Figma 2207:211449): H1 24/28, заголовки карточек 16/22,
   кнопка на всю ширину, подложка-чертёж не рисуется */
@media (max-width: 767px) {
    .specintro__bg { display: none; }
    .specintro .page-title { font-size: 24px; line-height: 28px; }
    .specintro .spectext { margin-top: 20px; }
    .specintro__btn { width: 100%; }
    .spectext__block h2 { font-size: 16px; line-height: 22px; }
    .speccard__title { font-size: 16px; line-height: 22px; }
    .speccards { gap: 16px; }
}
.dlrsteps--spec::before { clip-path: polygon(23.8% 0, 100% 0, 100% 100%, 23.8% 100%, 23.8% 56%, 22.1% 50%, 23.8% 44%); }
.dlrsteps--spec .dlrsteps__step { top: 50%; transform: translateY(-50%); }
.dlrsteps--spec .dlrsteps__head { font-size: 18px; line-height: 24px; align-items: center; }
.dlrsteps__title--compact { display: none; }

/* «Как приобрести продукцию MRT» на главной (Figma 1780:81972) */
.dlrsteps--howto { background: #fff; }
.dlrsteps--howto::before { clip-path: polygon(27.7% 0, 100% 0, 100% 100%, 27.7% 100%, 27.7% 56%, 26.1% 50%, 27.7% 44%); }
.dlrsteps--howto .dlrsteps__cta { width: 300px; }
.dlrsteps--howto .dlrsteps__title { font-size: 28px; line-height: 34px; font-weight: 400; margin: 0; }
.dlrsteps--howto .dlrsteps__head { font-size: 16px; line-height: 20px; text-transform: none; }

/* Планшет (макеты 1780:312867 дилер/спец, 1780:250864): панель слева с заголовком, шаги столбцом */
@media (max-width: 1024px) {
    .dlrsteps-h2 { display: none; }
    .dlrsteps { display: grid; grid-template-columns: 44% 1fr; align-content: center; row-gap: 16px; min-height: 254px; padding: 20px 30px 20px 0; background: #05073F; color: #fff; }
    .dlrsteps::before { clip-path: polygon(0 0, 42% 0, 42% 44%, 44% 50%, 42% 56%, 42% 100%, 0 100%); background: #DDDDDD; }
    .dlrsteps--howto::before { background: #fff; }
    .dlrsteps .dlrsteps__sep { display: none; }
    .dlrsteps .dlrsteps__cta { position: relative; left: 0; top: 0; bottom: auto; grid-column: 1; grid-row: 1 / span 8; align-self: center; padding: 10px 30px; width: auto; z-index: 1; color: #111011; justify-content: flex-start; gap: 40px; }
    .dlrsteps__title--desktop { display: none; }
    .dlrsteps__title--compact { display: block; font-size: 24px; line-height: 28px; }
    .dlrsteps .dlrsteps__step { position: static; transform: none; left: auto !important; width: auto !important; grid-column: 2; color: #fff; padding-left: 20px; }
    .dlrsteps .dlrsteps__head { font-size: 16px; line-height: 20px; }
    .dlrsteps--howto .dlrsteps__title { font-size: 24px; line-height: 28px; }
    .dlrsteps--howto .dlrsteps__cta { width: auto; }
}

/* Мобильный (макеты 1780:318132 спец, 1780:253829 дилер): шапка с заголовком, шаги колонкой, кнопка на всю ширину */
@media (max-width: 767px) {
    .dlrsteps { display: block; min-height: 0; padding: 18px 30px 86px; }
    .dlrsteps::before { clip-path: polygon(0 0, 100% 0, 100% 124px, 54% 124px, 50% 108px, 46% 124px, 0 124px); }
    .dlrsteps--spec::before { clip-path: polygon(0 0, 100% 0, 100% 152px, 54% 152px, 50% 168px, 46% 152px, 0 152px); }
    .dlrsteps .dlrsteps__cta { position: static; display: block; padding: 0; }
    .dlrsteps .dlrsteps__title { position: relative; z-index: 1; max-width: 301px; min-height: 106px; }
    .dlrsteps--spec .dlrsteps__title--desktop { display: none; }
    .dlrsteps--spec .dlrsteps__title--compact { min-height: 150px; }
    .dlrsteps--howto .dlrsteps__title { min-height: 150px; }
    .dlrsteps .dlrsteps__step { position: static; transform: none; left: auto !important; width: auto !important; margin: 16px 0 0; color: #fff; }
    .dlrsteps .dlrsteps__cta .btn { position: absolute; left: 30px; right: 30px; bottom: 30px; width: auto; justify-content: center; display: flex; }

    /* «Как приобрести продукцию MRT» на главной — спек мобайла Figma 1780:91677:
       баннер 500px, паддинги 20/30, заголовок 24/28 (тёмный на светлой шапке),
       шаги 16/20 с гэпом 16, кнопка h40 на всю ширину внизу. */
    .dlrsteps--howto { min-height: 500px; padding: 20px 30px 80px; }
    /* Светлая шапка: заголовок в две-три строки + «стрелка» вниз по центру */
    .dlrsteps--howto::before { clip-path: polygon(0 0, 100% 0, 100% 136px, 54% 136px, 50% 152px, 46% 136px, 0 136px); }
    .dlrsteps--howto .dlrsteps__cta { width: auto; }
    .dlrsteps--howto .dlrsteps__title { font-size: 24px; line-height: 28px; min-height: 116px; max-width: 301px; }
    /* Шаги: номер 20.7×23 по центру строки, текст 16/20, отбивка между шагами 16 */
    .dlrsteps--howto .dlrsteps__step { margin-top: 16px; }
    .dlrsteps--howto .dlrsteps__step:first-of-type { margin-top: 24px; }
    .dlrsteps--howto .dlrsteps__head { gap: 6px; align-items: center; font-size: 16px; line-height: 20px; }
    /* Разделители-«стрелки» между колонками на мобиле не нужны */
    .dlrsteps--howto .dlrsteps__sep { display: none; }
    /* Кнопка h40 (десктопное правило .dlrsteps__cta .btn даёт 13px паддинг = 46px) */
    .dlrsteps--howto .dlrsteps__cta .btn { min-height: 40px; padding: 10px 24px; }

    /* Полоса этапов на страницах инжиниринга — заказчик попросил «воздуха»,
       как в баннере ГИСП на сертификатах (.certgisp, ниже в файле).
       Правилось три вещи, все три видны на 393:
       1) Заголовок в светлой шапке занимает четыре строки (у остальных
          страниц — три), min-height 106px из общего правила ему мал: текст
          доходил до 124px и налезал на вершину выемки, которая по clip-path
          сидит на 108px. Отдаём шапке 152px — выемку опускаем туда же,
          иначе она окажется внутри текста.
       2) Между шагами было 16px при высоте строки 20px — плотно. Ставим 28.
       3) Кнопка прижата к низу абсолютом (bottom: 30px), а нижний паддинг
          баннера 86px считался под три шага в одну-две строки: у «Менеджмента
          инструмента» четвёртый шаг подходил к ней на 10px. Кнопку убираем
          из абсолюта в поток с отбивкой 32px — тогда высота баннера считается
          по контенту и зазор не зависит от длины шагов.
       В разметке .dlrsteps__cta (заголовок + кнопка) идёт до шагов, поэтому
       в потоке кнопка встала бы сразу под заголовком. Разбираем обёртку через
       display: contents и раскладываем flex-порядком — тот же приём, что
       в .certgisp на мобиле. */
    /* gap задан явно: раскладка на 900 — грид с row-gap 16px, и он никуда не
       девается на 393, складываясь с любым margin-top у шагов (получалось 44). */
    .dlrsteps--eng { display: flex; flex-direction: column; gap: 28px;
        padding-bottom: 30px; }
    .dlrsteps--eng::before { clip-path: polygon(0 0, 100% 0, 100% 152px, 54% 152px, 50% 168px, 46% 152px, 0 152px); }
    .dlrsteps--eng .dlrsteps__cta { display: contents; }
    /* 18 (верхний паддинг) + 134 = 152 — низ заголовка ровно по границе шапки */
    .dlrsteps--eng .dlrsteps__title { order: 1; min-height: 134px; }
    .dlrsteps--eng .dlrsteps__step { order: 2; margin-top: 0; }
    .dlrsteps--eng .dlrsteps__cta .btn { order: 3; position: static; left: auto;
        right: auto; bottom: auto; margin-top: 4px; align-self: stretch;
        justify-content: center; }
}

/* Планшет: текст тоже по левому краю под заголовком — выключка по ширине
   (justify) остаётся только на десктопе, как в макете. Правка заказчика:
   «выровнять текст по левому краю, только для адаптива». */
@media (min-width: 768px) and (max-width: 1279px) {
    .banner-card--dealer .banner-card__text { text-align: left; }
}

/* Баннер «Как стать дилером» на мобильном: колонка, кнопка на всю ширину.
   Спек Figma 1780:92161: баннер 272px, паддинги 14/24, заголовок 26/32,
   текст 16/20 по левому краю, кнопка h40 на всю ширину. */
@media (max-width: 767px) {
    .banner-card--dealer { min-height: 272px; }
    .banner-card--dealer .banner-card__inner { flex-direction: column; align-items: stretch; gap: 24px;
        padding: 14px 24px; justify-content: center; }
    .banner-card--dealer .banner-card__title { font-size: 26px; line-height: 32px; margin-bottom: 16px; }
    .banner-card--dealer .banner-card__text { font-size: 16px; line-height: 20px; text-align: left; max-width: none; }
    .banner-card--dealer .banner-card__inner .btn { justify-content: center; display: flex; }
}

/* FAQ (Figma 1780:383821): компактные аккордеоны 60px */
.vacancy--faq { margin-bottom: 20px; }
.vacancy--faq .vacancy__head { grid-template-columns: 1fr; align-items: center; min-height: 60px; padding: 20px 62px 20px 30px; }
.vacancy--faq__q { font-size: 16px; line-height: 20px; color: #111011; transition: color .2s; }
.vacancy--faq:not(.is-open) .vacancy__head:hover .vacancy--faq__q { color: #fff; }
.vacancy--faq .vacancy__body { padding: 4px 30px 26px; }
/* Спецификатор .vacancy.vacancy--faq… перебивает общий грид вакансий
   (630px + 485px) из конца файла: при равной специфике он объявлен ниже
   и побеждал, сворачивая ответ в колонку 630px. */
.vacancy.vacancy--faq.is-open .vacancy__body { display: block; }
/* Ответ без max-width: в макете текст тянется на всю ширину контейнера
   (раньше лимит 630px сворачивал его в узкую колонку). */
.vacancy--faq__a { font-size: 16px; line-height: 20px; color: #111011; }

/* Центр покрытий (Figma 1364:123703): интро со слайдером фото + карточки */
.pvdintro { position: relative; overflow: hidden; }
.pvdintro__bg { position: absolute; left: 3%; top: 157px; width: 721px; z-index: 0; pointer-events: none; }
/* Текст первого баннера: выключка по формату (в макетах 1780:336975 и
   1784:80184 Section Description задан align=JUSTIFIED), 560px, #696767 */
.pvdintro__text p { font-size: 16px; line-height: 20px; color: #696767; margin: 0 0 14px;
    max-width: 560px; text-align: justify; }
/* Только вводная фраза перед карточками проблем на странице менеджмента:
   текст хранится в инфоблоке, капслок является оформлением по макету. */
.pvdintro--toolmgmt .pvdintro__text p:last-child { text-transform: uppercase; }
.pvdslider__frame { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 1/1; background: #05073F; }
.pvdslider__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.pvdslider__slide.is-active { opacity: 1; }
.pvdslider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 0; background: none; color: #fff; cursor: pointer; padding: 4px; filter: drop-shadow(0 0 4px rgba(0,0,0,.4)); }
.pvdslider__arrow--prev { left: 14px; }
.pvdslider__arrow--next { right: 14px; }
.pvdslider__arrow:hover { color: var(--c-accent); }
.pvdslider__dots { display: flex; justify-content: center; gap: 3px; margin-top: 12px; }
.pvdslider__dot { width: 5px; height: 5px; border-radius: 50%; border: 0; padding: 0; background: #DDDDDD; cursor: pointer; transition: all .2s; }
.pvdslider__dot.is-active { width: 7px; height: 7px; background: #104495; }
/* Второй блок страниц инжиниринга: одиночное фото вместо слайдера. Кадр
   квадратный, как был у .pvdslider__frame, — так блок совпадает по высоте
   с колонкой текста. Вариант --contain для чертежа: обрезать его нельзя,
   поэтому вписываем целиком на белом. */
.engintro__photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 1/1; background: #05073F; }
.engintro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Пропорция кадра — по альбомному листу: в квадрате чертёж съёживался
   вдвое, половину кадра занимали пустые поля сверху и снизу. */
.engintro__photo--contain { aspect-ratio: 297 / 210; background: #fff; border: 1px solid #E4E4E4; }
.engintro__photo--contain img { object-fit: contain; padding: 16px; }
.pvdcards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pvdcard { display: flex; gap: 12px; align-items: flex-start; background: rgba(145,157,193,.10); border-radius: 24px; padding: 30px 24px; min-height: 424px; }
/* «Солнышко» в карточках — синее #104495 (в макетах 1784:80634 и 1780:337426
   Benefit Icon: вектор #104495). Раньше подключалась оранжевая картинка. */
.pvdcard__icon { width: 24px; height: 24px; flex: none; color: #104495; }
/* Заголовок карточки 24/28 КАПСОМ (в макетах 1780:337427 и 1784:80634
   у Benefit Name задан UPPER) */
.pvdcard__title { font-size: 24px; line-height: 28px; text-transform: uppercase;
    color: #111011; margin-bottom: 18px; }
.pvdcard p { font-size: 16px; line-height: 20px; color: #111011; margin: 0 0 12px; max-width: 544px; }
/* Три карточки в ряд — «Менеджмент инструмента» (макет 2310:20313): карточки
   410×300 с зазором 24. Ниже, чем в паре: текста меньше. */
.pvdcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pvdcards--3 .pvdcard { min-height: 300px; }

/* --- Карусель карточек-проблем (макеты 2310:20788 и 2310:31019) ---
   Карточек больше, чем помещается в контейнер: у «Менеджмента» 5 при трёх
   в кадре, у «Проектирования» 6 при двух. Механика — общий [data-hscroll]
   (перетаскивание + стрелки), как у «Промышленных решений» на главной.
   Ширину карточки считаем от кадра: (100% − зазоры) / число колонок,
   поэтому в кадр попадает ровно столько карточек, сколько в макете, а
   следующая выглядывает краем — видно, что есть продолжение. */
.pvdcards-slider { position: relative; }
.pvdcards-slider__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; cursor: grab; padding-bottom: 4px; }
.pvdcards-slider__track::-webkit-scrollbar { display: none; }
.pvdcards-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pvdcards-slider__track .pvdcard { flex: none; scroll-snap-align: start; }
.pvdcards-slider__track--3 .pvdcard { width: calc((100% - 48px) / 3); min-height: 300px; }
.pvdcards-slider__track--2 .pvdcard { width: calc((100% - 24px) / 2); min-height: 424px; }
/* Стрелки как в макете: шеврон 24×24 без подложки, вынесен за контейнер.
   Позиционирование задаём здесь целиком: базовый .slider-arrow живёт в
   home.css, а эти страницы его не грузят. */
.pvdcards-slider .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4; display: flex; align-items: center; justify-content: center; padding: 0;
    cursor: pointer; width: 24px; height: 24px; background: none; border: 0;
    border-radius: 0; color: #111011; box-shadow: none; transition: color .2s; }
/* :active нужен наравне с :hover — на тачскрине наведения нет, и без него
   нажатие никак не отзывалось бы. */
.pvdcards-slider .slider-arrow:hover,
.pvdcards-slider .slider-arrow:active { background: none; color: var(--c-accent); }
.pvdcards-slider .slider-arrow svg { width: 24px; height: 24px; max-width: none; flex: none; stroke-width: 1.5; }
/* Показывает скрипт (data-hs-autoarrows), когда лента шире кадра: на широком
   экране все карточки могут поместиться сразу, и стрелки висели бы вхолостую. */
.pvdcards-slider .slider-arrow { display: none; }
.pvdcards-slider.is-scrollable .slider-arrow { display: flex; }
.pvdcards-slider .slider-arrow--prev { left: -33px; }
.pvdcards-slider .slider-arrow--next { right: -33px; }

/* --- Баннер «Итог работы» (макет 2310:20313, Banner_Container 1280×320 r24):
   синий градиент по диагонали, слева заголовок 48/60, справа буллиты с
   «солнышком». Чертёж-подложка — как в других тёмных баннерах, фоном. --- */
.resultbn { position: relative; overflow: hidden; border-radius: 24px; padding: 30px;
    background: linear-gradient(160deg, #4276FF 0%, #05399C 50%, #001246 100%);
    color: #fff; display: grid; grid-template-columns: minmax(0, 598px) minmax(0, 598px);
    gap: 24px; justify-content: space-between; align-items: center; min-height: 320px; }
/* Чертёж-подложка под заголовком (в макете группа 2310:20885 — 642×258 от
   левого края баннера, вылезает за нижнюю грань и подрезается) */
.resultbn__draw { position: absolute; left: 30px; top: 107px; width: 642px; height: auto;
    z-index: 0; pointer-events: none; }
.resultbn__title { position: relative; z-index: 1; align-self: start;
    font-size: 48px; line-height: 60px; text-transform: uppercase; }
.resultbn__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
.resultbn__item { display: flex; gap: 16px; align-items: flex-start; }
.resultbn__icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #fff; }
.resultbn__text { font-size: 16px; line-height: 20px; color: #DDDDDD; }
/* Планшет и мобайл: колонки в столбик, чертёж уходит фоном под весь баннер
   (на узкой ширине он перекрывал бы заголовок) */
@media (max-width: 1024px) {
    .resultbn { grid-template-columns: 1fr; align-items: start; gap: 20px; padding: 24px; }
    .resultbn__draw { left: 0; right: 0; top: auto; bottom: -55%; width: 100%; opacity: .14; }
    .resultbn__title { font-size: 32px; line-height: 38px; }
}
@media (max-width: 767px) {
    .resultbn { padding: 20px; min-height: 0; }
    .resultbn__title { font-size: 24px; line-height: 28px; }
    .resultbn__list { gap: 16px; }
}

/* --- Форма на страницах инжиниринга (макет 2310:20313, «11 Contact Form»).
   Раскладка та же, что у секции «Остались вопросы» (.contact-sec), но поля
   свои — организация и сегмент промышленности. --- */
/* scroll-margin — кнопки «Получить консультацию» ведут сюда якорем #engform,
   а шапка залипающая (84 + 54), иначе заголовок формы уезжает под неё */
/* Заголовки секций страниц инжиниринга. Раньше выключка и отбивка стояли
   инлайном в engpage.php — мобильное правило (см. блок @media 767) не могло
   их перебить без !important, поэтому вынес сюда. Селекторы двойные
   (.section-title.engtitle): base.css подключается после pages.css, и при
   равной специфичности выигрывал бы он. */
.section-title.engtitle--left { text-align: left; }
.section-title.engtitle--steps { margin-bottom: 40px; }
.engform-sec { position: relative; overflow: hidden; background: #fff; scroll-margin-top: 150px; }
.engform-sec__bg { position: absolute; left: -133px; top: 62px; width: 641px; height: 696px; z-index: 0; pointer-events: none; }
.engform-sec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.engform-sec__art { position: relative; background: #05073F; border-radius: 24px; overflow: hidden; min-height: 548px; }
.engform-sec__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.engform-sec__card { background: rgba(163,175,213,.10); border-radius: 24px; padding: 40px 80px; }
.engform-sec__title { font-size: 20px; line-height: 24px; color: #111011; text-transform: uppercase; }
.engform-sec__sub { font-size: 16px; line-height: 20px; color: #111011; margin-bottom: 12px; }
.engform-sec .form { gap: 10px; }
.engform-sec .form--compact .form__input,
.engform-sec .form--compact .form__textarea {
    background: transparent; border: 1px solid rgba(163,175,213,.9);
    border-radius: 12px; color: #111011; }
.engform-sec .form--compact .form__input { height: 40px; }
.engform-sec .form__input::placeholder, .engform-sec .form__textarea::placeholder { color: #696767; }
.engform-sec .form--compact .form__input:focus,
.engform-sec .form--compact .form__textarea:focus { border-color: var(--c-accent); }
.engform-sec .form .btn { align-self: stretch; width: 100%; min-height: 40px; height: 40px;
    padding: 10px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; }
/* Адаптив — как у «Остались вопросы»: колонки в столбик, форма первой,
   тёмный чертёж-баннер под ней */
@media (max-width: 1279px) {
    .engform-sec__grid { display: flex; flex-direction: column; gap: 40px; }
    .engform-sec__bg { display: none; }
    .engform-sec__art { order: 2; min-height: 300px; }
    .engform-sec__card { padding: 24px 20px; }
}
@media (max-width: 767px) {
    .engform-sec { padding: 20px 0 40px; }
    .engform-sec__card { padding: 24px 16px; }
    .engform-sec .form { gap: 8px; }
}

/* ==========================================================================
   КОНТАКТЫ — актуальный макет (Figma 949:66950 десктоп, 1000:59342 планшет,
   1000:59415 мобайл). Секция 01: крошки + заголовок + две инфо-карточки
   + баннер «Как стать дилером». Секция 02 переиспользует .contact-sec.
   ========================================================================== */
/* Секция 01: фон #DDDDDD, паддинги 20 сверху / 80 снизу, гэп до блоков 30 */
.section.cpage { background: #DDDDDD; padding: 20px 0 80px; }
.cpage .crumbs { padding: 0; color: #696767; }
/* Заголовок 48/60 влево, отбивка от крошек 30, до карточек 30.
   Селектор сдвоен — иначе .section-title из base.css (подключается позже)
   перебивает выключку и заголовок центрируется. */
.section-title.cpage__title { font-size: 48px; line-height: 60px; font-weight: 400;
    text-transform: uppercase; text-align: left; color: #111011; margin: 30px 0; }

/* Инфо-карточки: 2 в ряд по 628px, гэп 24, #FDFDFD, r24, паддинг 20/24 */
.cinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.cinfo__card { display: flex; gap: 12px; align-items: flex-start;
    background: #FDFDFD; border-radius: 24px; padding: 20px 24px; min-height: 208px; }
/* «Солнышко» в карточках контактов — синее #104495, как в макете
   (раньше подключалась оранжевая картинка adv-icon-orange.svg) */
.cinfo__icon { width: 24px; height: 24px; flex: none; color: #104495; }
/* Внутренний столбец: заголовок 24/28 UPPER, текст 18/24, контакты 18/24 акцентом.
   Отбивки по макету — 18px между блоками (Info Text Container gap=18) */
.cinfo__body { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.cinfo__title { font-size: 24px; line-height: 28px; color: #111011; text-transform: uppercase; }
.cinfo__text { font-size: 18px; line-height: 24px; color: #111011; }
.cinfo__contacts { display: flex; flex-direction: column; }
.cinfo__contacts a { font-size: 18px; line-height: 28px; color: var(--c-accent); }
.cinfo__contacts a:hover { color: var(--c-accent-600); }

/* Баннер дилера на странице контактов: 1280×300, отбивка от карточек 30.
   Контент по центру по вертикали (в макете Banner Content центрирован,
   паддинги 80/40), а не прижат к низу, как на главной. */
.cpage__promo { margin-top: 30px; min-height: 300px; }
/* Раскладку баннера задаёт .banner-card--dealer (поле сверху 80, прижат к низу
   по макету 1780:299355). Здесь был свой align-items: center и padding 40 —
   из-за них текст и кнопка вставали по центру, а не по нижней линии. */

/* Планшет 768 (Figma 1000:59342) */
@media (max-width: 1279px) {
    .section-title.cpage__title { font-size: 32px; line-height: 40px; margin: 24px 0; }
    /* Карточки в столбец — по макету планшета идут одна под другой */
    .cinfo { grid-template-columns: 1fr; gap: 16px; }
    .cinfo__card { min-height: 0; }
}

/* Мобайл 393 (Figma 1000:59415): фон #EDEDED, отбивки 20/40, r20, паддинг 16 */
@media (max-width: 767px) {
    .section.cpage { background: #EDEDED; padding: 20px 0 40px; }
    .section-title.cpage__title { font-size: 32px; line-height: 40px; margin: 24px 0; }
    .cinfo { gap: 16px; }
    .cinfo__card { border-radius: 20px; padding: 16px; }
    /* Заголовок 16/22, текст и контакты 16/20, внутренний гэп 14 */
    .cinfo__body { gap: 14px; }
    .cinfo__title { font-size: 16px; line-height: 22px; }
    .cinfo__text { font-size: 16px; line-height: 20px; }
    .cinfo__contacts a { font-size: 16px; line-height: 25px; }
    .cpage__promo { margin-top: 24px; min-height: 272px; }
}

/* Контакты (устаревший макет 313:248) — оставлено для внутренних страниц */
.ccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.ccard { display: flex; gap: 12px; align-items: flex-start; background: #FDFDFD; border-radius: 24px; padding: 20px 24px; min-height: 254px; }
.ccard__icon { width: 24px; height: 24px; flex: none; }
.ccard__title { font-size: 24px; line-height: 30px; color: #111011; margin-bottom: 18px; text-transform: uppercase; }
.ccard__text { font-size: 18px; line-height: 20px; color: #111011; }
.ccard__contacts { margin-top: 18px; }
.ccard__contacts a { display: block; font-size: 18px; line-height: 20px; color: var(--c-accent); }
.ccard__contacts a:hover { color: var(--c-accent-600); }
.hotline { position: relative; border-radius: 24px; overflow: hidden; margin-top: 30px; min-height: 202px; color: #fff; }
.hotline__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.hotline__phone { position: absolute; left: 546px; top: 50%; transform: translateY(-50%); height: 190px; width: auto; pointer-events: none; }
.hotline__content { position: relative; padding: 24px 0 24px 40px; }
.hotline__label { font-size: 26px; line-height: 30px; }
.hotline__number { display: inline-block; font-size: 48px; line-height: 60px; color: #fff; margin-top: 16px; }
.hotline__caption { font-size: 14px; line-height: 16px; max-width: 511px; margin-top: 16px; }
.hotline__btn { position: absolute; right: 24px; bottom: 24px; }
.mapbox { border-radius: 24px; overflow: hidden; background: #DDD; }
.mapbox iframe { display: block; width: 100%; height: 432px; border: 0; }
.cfsec { position: relative; background: #FDFDFD; }
.cfsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cfsec__visual { position: relative; border-radius: 24px; overflow: hidden; min-height: 600px; }
.cfsec__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfsec__visual::after { content: ""; position: absolute; inset: 0; background: rgba(5,7,63,.35); }
.cfsec__logo { position: absolute; left: 50%; top: 234px; transform: translateX(-50%); width: 293px; z-index: 1; }
.cfsec__slogan { position: absolute; left: 50px; bottom: 130px; max-width: 550px; font-size: 32px; line-height: 40px; color: #fff; z-index: 1; }
.cfsec__card { background: rgba(163,175,213,.10); border-radius: 24px; padding: 87px 85px; }
.cfsec__title { font-size: 32px; line-height: 40px; color: #111011; text-transform: uppercase; }
.req { color: var(--c-accent); }
.cfsec__sub { font-size: 16px; line-height: 19px; color: #111011; margin: 16px 0 30px; }
.cfsec__card .form { gap: 12px; max-width: 479px; }
.cfsec__label { display: flex; flex-direction: column; gap: 5px; font-size: 16px; line-height: 19px; color: #111011; }
.cfsec__card .form__input { height: 43px; background: #fff; border-radius: 12px; }
.cfsec__card .form__input::placeholder { color: #A3AFD5; }
.cfsec__card .form__consent { margin-top: 8px; }

/* ==========================================================================
   СЕРТИФИКАТЫ, блок 01 (Figma 1780:227740)
   Секция 1440×754: пад 20/80/60/80, крошки на y=20, контент с y=66.
   Слева колонка 628 (заголовок + текст + кнопка внизу), справа визуал 628×628.
   ========================================================================== */
.section.certsec { position: relative; overflow: hidden; background: #DDDDDD; padding: 20px 0 60px; }
.certsec__bg { position: absolute; left: 200px; top: -116px; width: 721px; z-index: 0; pointer-events: none; }
.certsec .crumbs { padding: 0; }
/* Отбивка крошки → контент 30px (gap секции в макете) */
.certsec__grid { margin-top: 30px; align-items: stretch; }
/* Кнопка прижата к низу колонки: в макете Section_content — SPACE_BETWEEN */
.certsec__content { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 628px; }
.certsec__title { margin: 0 0 30px; }
/* Абзацы 16/20 по формату, ширина 460 (в макете Description 460×100) */
.certsec__text p { max-width: 460px; font-size: 16px; line-height: 20px; color: #696767; text-align: justify; margin: 0 0 30px; }
.certsec__text p:last-child { margin-bottom: 0; }
/* Подзаголовок 26/32 прописными #696767 (было 20/25 инлайном) */
.certsec__subtitle { max-width: 464px; font-size: 26px; line-height: 32px; text-transform: uppercase; color: #696767; margin: 0 0 16px; }
/* Список — маркеры-точки, текст по формату; ширина колонки 464 */
.certsec__list { max-width: 464px; list-style: none; margin: 0 0 30px; padding: 0; }
.certsec__list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 20px; color: #696767; text-align: justify; }
.certsec__list li + li { margin-top: 4px; }
.certsec__list li::before { content: "•"; position: absolute; left: 4px; color: #696767; }
.certsec__btn { align-self: flex-start; }
/* Визуал 628×628 r24 + плашка ГИСП 253×223 r16 @28,30 */
.certsec__visual { position: relative; aspect-ratio: 1 / 1; }
.certsec__visual img.certsec__overlay { position: absolute; left: 28px; top: 30px; width: 253px; height: 223px; border-radius: 16px; object-fit: cover; }

/* Планшет (Figma 1780:226582): одна колонка — сначала текст+кнопка, ниже
   визуал 720×628. Текст на всю ширину, заголовок 32/40, подзаголовок 24/28. */
@media (max-width: 1279px) {
    .section.certsec { padding: 20px 0 40px; }
    .certsec__grid { margin-top: 20px; gap: 60px; }
    .certsec__content { min-height: 0; gap: 20px; }
    /* Селектор сдвоен: правило .page-title для мобилки (30/38) стоит ниже
       по файлу и при равной специфичности перебивало бы этот размер */
    .certsec .certsec__title { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
    .certsec__text p { max-width: none; margin-bottom: 20px; }
    .certsec__subtitle { max-width: none; font-size: 24px; line-height: 28px; }
    .certsec__list { max-width: none; margin-bottom: 20px; }
    .certsec__visual { aspect-ratio: 720 / 628; }
    /* Фоновый чертёж на узких экранах только мешает тексту */
    .certsec__bg { display: none; }
}
/* Мобайл (Figma 1780:227160): визуал 361×298, кнопка на всю ширину */
@media (max-width: 767px) {
    .certsec__grid { gap: 32px; }
    .certsec__visual { aspect-ratio: 361 / 298; }
    .certsec__visual img.certsec__overlay { left: 14px; top: 12px; width: 139px; height: 123px; border-radius: 9px; }
    .certsec__btn { align-self: stretch; justify-content: center; display: flex; }
}

/* ==========================================================================
   Баннер «Посмотрите и скачайте таблицу» на странице сертификатов
   Макеты: 1780:228197 (1280 в 1440), 1780:227039 (720 в 768),
           1780:227617 (361 в 393).
   Своя разметка вместо .dlrsteps: у того блока другие проценты выемки,
   другие отступы и инверсия цветов на адаптиве — наследование давало
   постоянные конфликты специфичности.
   Замеры по рендеру макета (2x, отсюда деление на 2):
     десктоп — граница панели x=429.5 из 1280 = 33.55%, выемка 25×46
               по вертикальному центру; разделитель 2-го пункта x=844,
               цвет #919DC1, такая же выемка;
     планшет — граница x=310.5 из 720 = 43.13%, выемка та же, разделителя нет;
     мобайл  — светлая полоса сверху h=184, треугольник вершиной ВВЕРХ:
               основание 36px на y=184, высота 13px, центр 48%.
   ========================================================================== */
.certgisp { padding: 40px 0 80px; }
.certgisp__card { position: relative; overflow: hidden; border-radius: 24px;
    background: #05073F; color: #fff; min-height: 300px; padding: 40px 30px; }
/* Светлая панель — отдельный слой под контентом (не ::before: у карточки
   уже есть фон, а выемку удобнее держать на своём элементе) */
.certgisp__panel { position: absolute; left: 0; top: 0; bottom: 0; width: 33.55%;
    background: #fff; z-index: 0;
    /* треугольная выемка: 25px вглубь, 46px высотой, ровно по центру.
       Проценты по высоте 300: (150-23)/300 = 42.33%, (150+23)/300 = 57.67% */
    clip-path: polygon(0 0, 100% 0, 100% 42.33%, calc(100% - 25px) 50%, 100% 57.67%, 100% 100%, 0 100%); }

.certgisp__cta { position: absolute; left: 30px; top: 40px; bottom: 40px; width: 313px;
    z-index: 1; display: flex; flex-direction: column; justify-content: space-between; }
/* Ширина текста 372px, как в макете (1780:228197: Banner Heading 372.1×128).
   Колонка .certgisp__cta уже — 313px, и на ней заголовок ломался на 5 строк
   вместо четырёх. Текст выступает вправо на 59px, но остаётся внутри белой
   панели (30 + 372 = 402 при её ширине 429). */
.certgisp__title { width: 372px; max-width: none; font-size: 26px; line-height: 32px;
    text-transform: uppercase; color: #111011; }
/* Кнопка 221×40 r12. Стрелки на ховере нет — в макете её нет ни в обычном,
   ни в наведённом состоянии, это была моя самодеятельность. */
.certgisp__btn { align-self: flex-start; min-height: 40px; padding: 12px 24px;
    border-radius: 12px; font-size: 16px; line-height: 20px; }

/* Пункты: абсолютом по координатам макета (429 и 838 из 1280).
   pointer-events: none — список растянут на всю карточку (inset: 0) и идёт в
   разметке после .certgisp__cta с тем же z-index, поэтому перехватывал клики
   по кнопке «Посмотреть продукцию». Клики возвращаем самим пунктам, чтобы
   ссылки «здесь» внутри них работали. */
.certgisp__list { position: absolute; inset: 0; z-index: 1; list-style: none; margin: 0; padding: 0;
    pointer-events: none; }
.certgisp__item { position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 13px; pointer-events: auto; }
.certgisp__item:nth-child(1) { left: 33.52%; width: 27.9%; }   /* 429/1280, 357/1280 */
.certgisp__item:nth-child(2) { left: 65.47%; width: 30.5%; }   /* 838/1280, 390/1280 */
/* Разделитель перед вторым пунктом — линия #919DC1 с такой же выемкой.
   Отдельный SVG: clip-path на «полой» фигуре толщиной 1px даёт рваные края,
   а stroke в SVG рисуется чисто на любом масштабе. */
.certgisp__sep { position: absolute; top: 0; height: 100%; width: 26px; z-index: 1;
    left: 65.47%; margin-left: -19px; pointer-events: none; }
.certgisp__num { position: relative; flex: 0 0 auto; width: 21px; height: 21px;
    border-radius: 50%; background: var(--c-accent); color: #fff;
    font-size: 14px; line-height: 21px; text-align: center; }
.certgisp__text { font-size: 16px; line-height: 20px; color: #fff; }
.certgisp__p { display: block; }
.certgisp__p + .certgisp__p { margin-top: 10px; }
/* Ссылки-«здесь» акцентом. Только внутри __text — иначе правило красит и
   кнопку .btn--accent (оранжевый текст на оранжевом фоне). */
.certgisp__text a { color: var(--c-accent); text-decoration: underline; }
.certgisp__text a:hover { color: var(--c-accent-600); }

/* --- Планшет (1780:227039): карточка 720×326, панель 43.13%,
       разделителя между пунктами нет, пункты колонкой справа --- */
@media (max-width: 1279px) {
    .certgisp { padding: 40px 0; }
    .certgisp__card { min-height: 326px; }
    .certgisp__panel { width: 43.13%;
        /* высота карточки 326: (163-23)/326 = 42.94%, (163+23)/326 = 57.06% */
        clip-path: polygon(0 0, 100% 0, 100% 42.94%, calc(100% - 25px) 50%, 100% 57.06%, 100% 100%, 0 100%); }
    .certgisp__cta { top: 56px; bottom: 56px; width: 305px; }
    /* Фиксированные 372px — только для десктопа: на узких экранах текст
       вылезал за карточку (на 393 — на 41px). Здесь по ширине колонки. */
    .certgisp__title { width: auto; font-size: 24px; line-height: 28px; }
    /* Пункты — вертикальный стек в правой зоне (макет: x=359, w=355 из 720) */
    .certgisp__list { left: auto; right: 30px; width: 49.3%; display: flex;
        flex-direction: column; justify-content: center; gap: 16px; }
    .certgisp__item { position: static; transform: none; left: auto; width: auto; gap: 6px; }
    .certgisp__item:nth-child(1), .certgisp__item:nth-child(2) { left: auto; width: auto; }
    .certgisp__sep { display: none; }
}

/* --- Мобайл (1780:227617): карточка 361×606, светлая полоса сверху с
       треугольником вершиной вверх, пункты колонкой, кнопка на всю ширину --- */
@media (max-width: 767px) {
    .certgisp__card { min-height: 0; padding: 20px 30px; display: flex;
        flex-direction: column; }
    /* Полоса на всю ширину, h=184; треугольник 36×13 вершиной вверх, центр 48% */
    .certgisp__panel { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 184px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 53% 100%, 48% calc(100% - 13px), 43% 100%, 0 100%); }
    /* Заголовок остаётся в светлой полосе, кнопка уезжает в конец карточки */
    .certgisp__cta { position: static; left: auto; top: auto; bottom: auto; width: auto;
        display: contents; }
    .certgisp__title { font-size: 24px; line-height: 28px; min-height: 144px;
        position: relative; z-index: 1; order: 1; }
    .certgisp__btn { order: 3; align-self: stretch; justify-content: center;
        display: flex; align-items: center; margin-top: 20px; }
    .certgisp__list { position: static; inset: auto; right: auto; width: auto;
        order: 2; display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
    .certgisp__item { gap: 6px; }
}
.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; justify-items: start; }
.cert { text-align: center; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; width: 100%; }
.cert__img { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #DDDDDD; aspect-ratio: 300/414; }
.cert__img img { width: 100%; height: 100%; object-fit: cover; }
.cert__zoom { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 6px; background: #0F4495; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.cert__zoom svg { width: 18px; height: 18px; }
.cert:hover .cert__zoom { opacity: 1; }
.cert__name { display: block; font-size: 14px; line-height: 16px; color: #111011; margin-top: 16px; }
.modal--cert { background: rgba(5, 7, 63, .8); }
.modal--cert .modal__dialog { background: none; padding: 0; width: auto; max-width: none; position: relative; box-shadow: none; }
.modal--cert .modal__dialog img[data-cert-img] { display: block; max-height: 80vh; max-width: min(595px, 90vw); border-radius: 16px; border: 1px solid #DDDDDD; }
.modal--cert__name { text-align: center; color: #fff; font-size: 14px; line-height: 16px; margin-top: 22px; }
.modal--cert .modal__close { position: absolute; top: -6px; right: -46px; color: #fff; }
.modal--cert .modal__close:hover { color: var(--c-accent); }

/* ==========================================================================
   Вакансии (Figma 1780:285190)
   1-й блок: подзаголовок «Стань членом нашей команды» и описание — ОДНОГО
   цвета #111011 (в макете оба слоя #111011); описание 460px выключкой по
   формату. Раньше .lead-text давал серый #696767 и текст «отличался по
   цвету от остального».
   Заголовок «Вакансии N» — тоже #111011: в макете это один текстовый слой,
   счётчик не выделен отдельным цветом.
   ========================================================================== */
.vachero__content { display: flex; flex-direction: column; align-items: flex-start; }
.vachero__sub { font-size: 20px; line-height: 21px; color: #111011; margin: 0 0 15px; }
.vachero__text { max-width: 460px; }
.vachero__text p { color: #111011; text-align: justify; }
/* .section-title из home.css центрирует и красит в inherit — дублируем класс,
   чтобы перебить (одноклассовые селекторы равны, а home.css ниже по порядку) */
.section-title.vacsec__title { color: #111011; text-align: left; font-weight: 400; }
/* Счётчик вакансий — акцентным оранжевым */
.vacsec__count { color: var(--c-accent); }

/* --- Вакансии --- */
.vacancy { border-radius: 18px; background: rgba(163,175,213,.10); margin-bottom: 20px; overflow: hidden; }
.vacancy__head { position: relative; display: grid; grid-template-columns: 1fr 245px 200px; padding: 20px 30px; padding-right: 92px; cursor: pointer; align-items: start; transition: background .2s; }
.vacancy__title { font-size: 20px; line-height: 21px; color: #111011; }
.vacancy__addr { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 20px; color: #111011; margin-top: 14px; }
.vacancy__addr::before { content: ""; flex: none; width: 15px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AFD5' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.vacancy__date { font-size: 16px; line-height: 20px; color: #9C9C9C; margin-top: 45px; }
.vacancy__meta { font-size: 20px; line-height: 21px; color: #111011; white-space: nowrap; transition: color .2s; }
.vacancy__toggle { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); color: #9C9C9C; transition: transform .25s, color .2s; }
.vacancy__toggle svg { width: 24px; height: 24px; display: block; }
.vacancy:not(.is-open) .vacancy__head:hover { background: #05073F; }
.vacancy:not(.is-open) .vacancy__head:hover .vacancy__title,
.vacancy:not(.is-open) .vacancy__head:hover .vacancy__addr,
.vacancy:not(.is-open) .vacancy__head:hover .vacancy__meta,
.vacancy:not(.is-open) .vacancy__head:hover .vacancy__date,
.vacancy:not(.is-open) .vacancy__head:hover .vacancy__toggle { color: #fff; }
.vacancy.is-open .vacancy__toggle { transform: translateY(-50%) rotate(180deg); }
.vacancy__body { display: none; padding: 10px 30px 30px; background: #fff; }
.vacancy.is-open .vacancy__body { display: grid; grid-template-columns: 630px 485px; justify-content: space-between; gap: 40px; }
.vacancy__block-title { font-size: 20px; line-height: 21px; color: #111011; margin: 18px 0 18px; }
.vacancy__text { list-style: none; padding: 0; margin: 0; }
.vacancy__text p { position: relative; padding-left: 16px; font-size: 16px; line-height: 20px; color: #111011; margin: 0 0 8px; }
.vacancy__text p::before { content: "•"; position: absolute; left: 2px; }
.vacform { background: #A3AFD5; border-radius: 24px; padding: 30px 50px; }

/* Модалка отклика на вакансию (Figma 845:7398): белая карточка 628px */
.modal--respond { background: rgba(5, 7, 63, .8); }
.modal--respond .modal__dialog.respond { width: 628px; max-width: 92vw; border-radius: 24px; background: #fff; padding: 53px 80px 53px; position: relative; box-shadow: none; }
.modal--respond .modal__close { position: absolute; top: 16px; right: 30px; color: #9C9C9C; }
.modal--respond .modal__close:hover { color: #111011; }
/* Заголовок прописными — в макетах формы (1780:285487 и 1780:285490) UPPER */
.respond__title { font-size: 20px; line-height: 25px; color: #111011; margin-bottom: 7px; text-transform: uppercase; }
.respond__sub { font-size: 16px; line-height: 20px; color: #111011; margin-bottom: 18px; }
.respond .form { gap: 12px; }
.respond__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Рамка полей — #A3AFD5 с прозрачностью 90% (в макете stroke #A3AFD5,
   у слоя opacity .9). Было #D5D7E0 — заметно холоднее и светлее. */
.respond .form__input, .respond__file, .respond__msg { border: 1px solid rgba(163,175,213,.9); }
.respond .form__input, .respond__file { height: 40px; border-radius: 12px; padding: 10px 12px; font-size: 16px; line-height: 20px; }
.respond .form__input::placeholder { color: #696767; }
.respond__file { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; color: #696767; cursor: pointer; overflow: hidden; white-space: nowrap; }
.respond__file svg { flex: none; color: #696767; }
.respond__file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.respond .respond__msg { height: 54px; min-height: 54px; resize: none; border-radius: 12px; }
/* --- Модалка отклика на мобиле (макет 1780:285490) ---
   Карточка 361 с полями 16/24, поля в один столбец во всю ширину: в две
   колонки они получались по 91px и «Прикрепить файл» обрезался.
   Порядок как в макете — имя, телефон, e-mail, файл; в разметке он другой
   (имя, e-mail, телефон, файл), потому что на планшете и десктопе сетка
   заполняется по строкам и даёт нужные столбцы. */
@media (max-width: 767px) {
    .modal--respond .modal__dialog.respond { width: 361px; max-width: calc(100vw - 32px); padding: 24px 16px; }
    .modal--respond .modal__close { top: 20px; right: 16px; }
    .respond__title { font-size: 20px; line-height: 24px; margin-bottom: 0; }
    .respond__sub { margin-bottom: 18px; }
    .respond__grid { grid-template-columns: minmax(0, 1fr); }
    .respond__grid > :nth-child(1) { order: 1; }   /* Имя */
    .respond__grid > :nth-child(2) { order: 3; }   /* Email */
    .respond__grid > :nth-child(3) { order: 2; }   /* Телефон */
    .respond__grid > :nth-child(4) { order: 4; }   /* Прикрепить файл */
    /* Два класса и min-height обязательны: базовое .form__textarea объявлено
       ниже по файлу с той же весомостью и его min-height: 100px перебивал
       height — поле оставалось вдвое выше макетного. */
    .respond .respond__msg { height: 50px; min-height: 50px; }
}
.vacform__title { font-size: 16px; line-height: 22px; color: #111011; margin-bottom: 24px; }
.vacform .form { gap: 8px; }
.vacform__label { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 20px; color: #111011; }
.vacform .form__input, .vacform .form__textarea { background: #fff; border: 0; border-radius: 6px; height: 40px; padding: 10px 12px; font-size: 16px; }
.vacform .form__textarea { height: 64px; resize: none; }
.vacform .form__input::placeholder, .vacform .form__textarea::placeholder { color: #A3AFD5; }
.vacform__file { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 6px; height: 40px; padding: 10px 12px; color: #919DC1; font-size: 16px; line-height: 20px; cursor: pointer; overflow: hidden; }
.vacform__file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vacform .form__consent { font-size: 14px; line-height: 16px; color: #111011; margin: 14px 0 4px; }

/* --- Инфокарточки контактов --- */
.info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.info-card { background: #FDFDFD; border-radius: 24px; padding: 20px 60px; min-height: 208px; }
.info-card__title { font-size: 24px; line-height: 28px; color: #111011; margin-bottom: 16px; }
.info-card__text { font-size: 18px; line-height: 24px; color: #111011; margin-bottom: 18px; }
.info-card__contacts { font-size: 18px; line-height: 24px; color: var(--c-accent); display: flex; flex-direction: column; }
.info-card__contacts a:hover { text-decoration: underline; }

/* --- Секция «Остались вопросы» (сплит: навы-арт + светлая форма) --- */
.contact-sec { position: relative; overflow: hidden; padding: 80px 0; background: #fff; }
/* Графика на фоне: 641×696, левый край уходит за пределы экрана (Figma 1471:93638) */
.contact-sec__bg { position: absolute; left: -133px; top: 62px; width: 641px; height: 696px; z-index: 0; pointer-events: none; }
.contact-sec .container { position: relative; z-index: 1; }
/* Те же 628+628, но долями — иначе на окнах 1280–1359 форма вылезала
   за вьюпорт (см. комментарий у .split). */
.contact-sec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: space-between; gap: 24px; }
.contact-sec__art { position: relative; background: #05073F; border-radius: 24px; overflow: hidden; min-height: 432px; }
.contact-sec__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
/* Карточка 628×432: внутр. контейнер 468×346 => отступы 43/80 (Figma 1471:93637).
   Фон — #A3AFD5 с прозрачностью 10% (в макете 1780:257788 у Section / Partner
   fill #A3AFD5 opacity .10; по рендеру это rgb(245,246,250)). */
/* Паддинг 40/80: с чекбоксами согласий контейнер стал 468×376, карточка —
   628×456 (Figma 1024:40219). До согласий было 43px под контейнер 346. */
.contact-sec__card { background: rgba(163,175,213,.10); border-radius: 24px; padding: 40px 80px; }
.contact-sec__title { font-size: 20px; line-height: 24px; color: #111011; margin-bottom: 0; text-transform: uppercase; }
.contact-sec__sub { font-size: 16px; line-height: 20px; color: #111011; margin-bottom: 12px; }
/* Поля БЕЗ заливки — сквозь них видно фон карточки, то есть они «в тон»
   (по рендеру макета цвет внутри поля ровно равен цвету карточки).
   Рамка — #A3AFD5 с прозрачностью 45%: по пикселям эталона это rgb(208,214,233)
   поверх карточки. r12, высота 40. Раньше поля были белые с r8 и рамкой #D9DCE8.
   Селектор в 3 класса: .form--compact .form__input задан НИЖЕ по файлу с той
   же специфичностью (2 класса) и перебивал бы. */
.contact-sec .form--compact .form__input,
.contact-sec .form--compact .form__textarea {
    background: transparent; border: 1px solid rgba(163,175,213,.45);
    border-radius: 12px; color: #111011; }
.contact-sec .form--compact .form__input { height: 40px; }
.contact-sec .form__input::placeholder, .contact-sec .form__textarea::placeholder { color: #696767; }
.contact-sec .form--compact .form__input:focus,
.contact-sec .form--compact .form__textarea:focus { border-color: var(--c-accent); }
.contact-sec .form .btn { align-self: stretch; width: 100%; min-height: 46px; height: 46px; padding: 13px 24px; }
/* --- Форма «Стать дилером» (макет 1780:257788) ---
   Отбивка между полями 12, парные поля в строке по 228 с тем же зазором.
   Кнопка здесь не на всю ширину, а по содержимому 124×40 и прижата влево —
   в отличие от формы «Остались вопросы», где она растянута. */
.form--dealer { gap: 12px; }
/* Обязательные поля дилерской формы: отдельный оранжевый маркер нельзя
   окрасить внутри нативного placeholder, поэтому подпись лежит поверх input.
   :placeholder-shown скрывает её сразу после появления значения/автозаполнения. */
.form--dealer .form__required-field { position: relative; min-width: 0; }
.form--dealer .form__required-field .form__input { display: block; }
.form--dealer .form__required-placeholder { position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%); color: #696767; font-size: 16px; line-height: 20px;
    pointer-events: none; }
.form--dealer .form__required-placeholder span { color: var(--c-accent); }
.form--dealer .form__required-field .form__input:focus + .form__required-placeholder,
.form--dealer .form__required-field .form__input:not(:placeholder-shown) + .form__required-placeholder { display: none; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.contact-sec .form--dealer .btn { align-self: flex-start; width: auto;
    min-height: 40px; height: 40px; padding: 10px 24px; font-size: 16px; line-height: 20px; }
@media (max-width: 767px) {
    /* На узком экране пары не помещаются — раскладываем в столбик.
       Зазор 12 держим и здесь: у .contact-sec .form на мобиле он 10, и без
       этого правила шаг полей скакал 50/52 (пары внутри .form__row шли с 12,
       остальные с 10). */
    .contact-sec .form.form--dealer { gap: 12px; }
    .form__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .contact-sec .form--dealer .btn { align-self: stretch; width: 100%;
        display: flex; align-items: center; justify-content: center; }
}
.form__consent { font-size: 12px; line-height: 14px; color: #111011; margin: 4px 0; }

/* --- Чекбоксы согласий (Figma 1024:48865): квадрат 16×16 r4 с обводкой
   #A3AFD5, подпись 12/14, зазор до подписи 8, между строками 12.
   Партиал partials/consent-checks.php, общий для формы ОС и модалки. --- */
.consents { display: flex; flex-direction: column; gap: 12px; }
.consent { display: flex; align-items: flex-start; gap: 8px; }
/* Своя рамка вместо системной галочки: у нативного чекбокса не задать
   радиус и цвет обводки одинаково во всех браузерах. */
.consent__box {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; width: 16px; height: 16px; margin: 0;
    border: 1px solid #A3AFD5; border-radius: 4px; background: transparent;
    cursor: pointer; position: relative;
}
.consent__box:checked { background: var(--c-accent); border-color: var(--c-accent); }
/* Галочка — уголок из двух границ, повёрнутый на 45°: не тянет за собой SVG */
.consent__box:checked::after {
    content: ""; position: absolute; left: 5px; top: 1.5px;
    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.consent__box:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Незаполненное обязательное согласие подсвечиваем после попытки отправки */
.consent__box.is-invalid { border-color: #E03A3A; }
.consent__label { font-size: 12px; line-height: 14px; color: #111011; cursor: pointer; }
.consent__label .consent__link { text-decoration: underline; }

/* --- База форм (дубль из home.css — внутренние страницы его не грузят) --- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form__input, .form__textarea { width: 100%; padding: 17px 20px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-text); font-size: 15px; font-family: inherit; }
.form__input::placeholder, .form__textarea::placeholder { color: var(--c-text-muted2); }
.form__input:focus, .form__textarea:focus { outline: none; border-color: var(--c-accent); }
.form__textarea { min-height: 100px; resize: vertical; }

/* --- Компактные поля (по дизайну: h=40, r=8, плейсхолдер #696767) --- */
.form--compact .form__input,
.form--compact .form__textarea {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #D9DCE8;
    font-size: 16px;
    line-height: 20px;
}
.form--compact .form__input { height: 40px; }
.form--compact .form__input::placeholder,
.form--compact .form__textarea::placeholder { color: #696767; }
.form--compact .form__textarea { height: 42.5px; min-height: 42.5px; resize: vertical; }

/* --- Форма «Остались вопросы» с чекбоксами согласий (Figma 1024:40219) ---
   Три поля h40 и текстарея h50 идут через 10 (Input_forms), а группа полей,
   три согласия и кнопка — через 8 (Form gap). Кнопка h40, как поля, а не 46.
   Итог: контейнер 468×376, карточка 628×456 — ровно как в макете. */
.contact-sec .form { gap: 8px; }
.form__fields { display: flex; flex-direction: column; gap: 10px; }
.contact-sec .form--compact .form__textarea { height: 50px; min-height: 50px; }
.contact-sec .form .consents { gap: 8px; }
.contact-sec .form .btn { min-height: 40px; height: 40px; padding: 10px 24px;
    font-size: 16px; line-height: 20px; }
/* Форма дилера остаётся на своём шаге 12 — у неё свой макет (1780:257788) */
.contact-sec .form.form--dealer { gap: 12px; }
.contact-sec .form--dealer .consents { gap: 12px; }

/* ==========================================================================
   Форма технолога (Figma 1780:303227)
   Поле 300×40: белое, рамка #A3AFD5 1px, r6; подпись 14/16 #696767 сверху
   через 4. Ряды: по горизонтали 26, по вертикали 14. Радио — кружок 21×21:
   выключенный обведён #9C9C9C, включённый — #FF6A00 с точкой 9×9.
   «Загрузить фото» — та же рамка, но ПУНКТИРОМ, плюс скрепка справа.
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 14px; line-height: 16px; color: #696767; }
/* Поле 300×40 r6: фон — #A3AFD5 с прозрачностью 10%, обводка — тот же цвет.
   В макете (1537:96685) у Input_form fill #A3AFD5 opacity .10, stroke #A3AFD5
   1px, а весь узел под opacity .9 — отсюда .09 у фона и .9 у рамки. */
.field .form__input { height: 40px; padding: 10px 12px; border-radius: 6px;
    border: 1px solid rgba(163,175,213,.9); background: rgba(163,175,213,.09);
    font-size: 16px; line-height: 20px; }
.field .form__input::placeholder { color: #919DC1; }
.field .form__input:focus { border-color: var(--c-accent); background: rgba(163,175,213,.14); }

/* Загрузка файла: тот же фон, но рамка ПУНКТИРОМ (strokeDashes [2,2]) */
.tform__filein { position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; height: 40px; padding: 10px 12px; border-radius: 6px;
    border: 1px dashed rgba(163,175,213,.9); background: rgba(163,175,213,.09);
    color: #919DC1; font-size: 16px; line-height: 20px; cursor: pointer;
    overflow: hidden; white-space: nowrap; }
.tform__filein svg { flex: none; width: 19px; height: 18px; color: #A3AFD5; }
.tform__filein input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Hero страницы «Помощь технолога» (Figma 1780:303227): фото 1280×400 r24
   на всю карточку. Белую подложку-градиент ОТКЛЮЧАЕМ — в макете её нет,
   светлый фон уже внутри фотографии, а накладка делила баннер пополам. */
/* height: auto перебивает фиксированные 360 у .banner-card--svc: здесь текст
   длинный и карточка должна тянуться под него */
.techhero { margin-top: 30px; height: auto; min-height: 400px; }
.techhero::after { display: none; }
/* Здесь фото на всю ширину карточки (светлая зона под текст — часть
   самого кадра), поэтому отменяем колонку 58%, заданную у .banner-card--svc */
.techhero .banner-card__bg { left: 0; }
.techhero .banner-card__inner { justify-content: flex-start; }
.techhero__text { max-width: 545px; }
.techhero__text p { text-align: justify; margin: 0 0 12px; }
.techhero__text p:last-child { margin-bottom: 0; }

/* --- Форма технолога --- */
/* Плашка-заголовок: сплошная подложка без градиента (в макете #919DC1
   с прозрачностью), заголовок КАПСОМ на всех разрешениях */
.tform__heading { background: rgba(145,157,193,.16); border-radius: 24px; padding: 24px; margin: 30px 0 30px; }
.tform__heading-title { font-size: 26px; line-height: 32px; text-transform: uppercase;
    color: #111011; margin-bottom: 12px; max-width: 736px; }
.tform__heading-sub { font-size: 18px; line-height: 24px; color: #111011; max-width: 736px; }
.tform__group-title { font-size: 16px; line-height: 20px; color: #111011; margin: 26px 0 14px; }
/* Вертикальный зазор 14 (в макете), а не 22 инлайном в разметке */
.tform__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 26px; margin-bottom: 0; }
.tform__row + .tform__row { margin-top: 14px; }
.tform__row .form__input { margin: 0; }
.tform__radio { display: flex; align-items: center; gap: 10px; padding-top: 20px;
    font-size: 16px; line-height: 20px; color: #111011; flex-wrap: wrap; }
.tform__radio b { font-weight: 400; }
.tform__radio label { display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; line-height: 16px; color: #696767; cursor: pointer; }
/* Свой кружок вместо системного: accent-color не даёт ни размера 21px,
   ни серой обводки у выключенного состояния */
.tform__radio input[type=radio] { appearance: none; -webkit-appearance: none; margin: 0;
    width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%;
    border: 1px solid #9C9C9C; background: transparent; cursor: pointer;
    display: grid; place-content: center; transition: border-color .15s; }
.tform__radio input[type=radio]::before { content: ""; width: 9px; height: 9px;
    border-radius: 50%; background: var(--c-accent); transform: scale(0); transition: transform .15s; }
.tform__radio input[type=radio]:checked { border-color: var(--c-accent); }
.tform__radio input[type=radio]:checked::before { transform: scale(1); }
.tform__actions { text-align: center; margin-top: 36px; }
.tform__consent { text-align: center; font-size: 14px; line-height: 16px; color: #9C9C9C; margin-top: 14px; }
@media (max-width: 1279px) {
    /* В таблете и мобилке шевроны скрыты — слайдеры листаются свайпом */
    .slider-arrow { display: none; }
    .tform__heading-title { text-transform: uppercase; }
    .tform__row { gap: 20px; }
    .tform__radio b { flex-basis: 100%; padding-bottom: 2px; }
}
@media (max-width: 767px) {
    .tform__row { grid-template-columns: 1fr; gap: 16px; }
    .tform__radio[style*="span 2"] { grid-column: auto !important; }
    .tform__actions .btn { width: 100%; }
    .tform__heading-title { font-size: 22px; line-height: 28px; }
}

/* --- Видео-карточки (Производство в деталях) --- */
.vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vcard { border-radius: 18px; overflow: hidden; background: #05073F; color: #fff; display: flex; flex-direction: column; }
.vcard__top { position: relative; min-height: 232px; padding: 20px; }
.vcard__img { position: absolute; right: 0; top: 16px; width: 63%; max-width: 258px; }
.vcard__img img { width: 100%; display: block; }
.vcard__name { position: relative; z-index: 1; font-size: 16px; line-height: 22px; max-width: 45%; margin-top: 70px; }
.vcard__label { position: relative; z-index: 1; display: inline-block; margin-top: 16px; font-size: 12px; line-height: 14px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; padding: 5px 12px; }
.vcard__body { background: #fff; color: #111011; padding: 20px; flex: 1; }
.vcard__title { font-size: 16px; line-height: 22px; margin-bottom: 12px; }
.vcard__text { font-size: 16px; line-height: 20px; color: #696767; }

/* --- Табы (пилюли) --- */
/* Табы-фильтры (Figma 1944:32400): прямоугольники r6 h40, паддинг 12/24,
   16/20; активный — #104495 белым, неактивный — #F3F3F3 тёмным, без рамок.
   Раньше были капсулы r20 с рамкой и активным #05073F. */
.pills { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.pill { border: 0; background: #F3F3F3; color: #111011; border-radius: 6px;
    min-height: 40px; padding: 12px 24px; font-size: 16px; line-height: 20px;
    font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
.pill.is-active { background: #104495; color: #fff; }
.pill:hover:not(.is-active) { background: #E4E4E4; color: #111011; }
.tabpane { display: none; }
/* minmax(0,628px) вместо фиксированных 628px: на планшете жёсткие
   628+628+24 = 1280 не влезали в контейнер и распирали страницу
   (на 1024 давало +284px горизонтальной прокрутки). */
.tabpane.is-active { display: grid; grid-template-columns: repeat(2, minmax(0, 628px));
    justify-content: space-between; gap: 24px; align-items: start; }
/* У части позиций ассортимента своего фото нет — правая колонка тогда не
   выводится вовсе, и вторая ячейка сетки осталась бы пустой дырой шириной
   в половину экрана. Текст в этом случае занимает всю ширину, но не длиннее
   ~90 знаков в строке: на 1280px строка читается тяжело. */
.tabpane--noimg.is-active { grid-template-columns: minmax(0, 1fr); }
.tabpane--noimg.is-active .tabpane__text { max-width: 900px; }
.tabpane__title { font-size: 32px; line-height: 40px; text-transform: uppercase; color: #111011; margin-bottom: 24px; }
.tabpane__text { font-size: 16px; line-height: 20px; color: #111011; }
.tabpane__text p { margin: 0 0 14px; }
.tabpane__img { border-radius: 24px; overflow: hidden; aspect-ratio: 628/400; background: #05073F; }
.tabpane__img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Страница MRT (Figma 1944:31921)
   ========================================================================== */
.mrthero__logo { position: absolute; left: 50%; top: 242px; transform: translateX(-50%); width: 293px; z-index: 2; }
.mrtgrad { background: linear-gradient(180deg, #05073F 0%, #000000 100%); }

/* --- 02 About Brand: текст белый, выключка по формату, 460px --- */
.section-title.mrtintro__title { text-align: left; color: #fff; }
.mrtintro__text { max-width: 460px; }
.mrtintro__text p { color: #fff; text-align: justify; }

/* --- 03 Карточки-карусель: 4 слайда 410×320, заголовки 32/40 КАПСОМ --- */
.mrtcards { position: relative; }
.grad-cards { display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; }
.grad-cards::-webkit-scrollbar { display: none; }
.grad-cards.is-dragging { scroll-behavior: auto; cursor: grabbing; }
.grad-card { position: relative; overflow: hidden; flex: 0 0 410px; width: 410px;
    background: linear-gradient(160deg, #4276FF 0%, #05399C 50%, #001246 100%);
    border-radius: 24px; padding: 24px; color: #fff; height: 320px; }
/* Чертёж 527×331 по ЦЕНТРУ карточки, верх на -5.5px: в макете он одинаково
   выступает за оба края (десктоп: карточка 410, картинка 527 → по -58.5;
   мобайл: 365 и 527 → по -81), т.е. просто отцентрован. Раньше был прижат
   к правому-нижнему углу и рисунок уходил из кадра. */
.grad-card__ill { position: absolute; left: 50%; transform: translateX(-50%); top: -5.5px;
    width: 527px; height: 331px; max-width: none; object-fit: contain; pointer-events: none; }
.grad-card__content { position: relative; }
/* КАПС по макету (Title 32/40 UPPER) */
.grad-card__title { font-size: 32px; line-height: 40px; text-transform: uppercase; margin-bottom: 24px; }
.grad-card__text { font-size: 16px; line-height: 20px; }
/* Стрелки карусели в отбивке секции: в макете (1944:32395) они на x=54 и
   x=1359 при контейнере от 80 — т.е. ЗА пределами трека, в 80px-гаттере.
   Контейнер имеет padding 80px, поэтому уводим на -52px. */
/* Дублируем класс: .slider-arrow задаёт 56×56 с той же специфичностью,
   но ниже по файлу — иначе стрелка остаётся 56px и налезает на карточку. */
.slider-arrow.mrtcards__arrow { width: 24px; height: 24px; background: none; border: 0;
    padding: 0; color: #fff; box-shadow: none; }
.slider-arrow.mrtcards__arrow:hover { background: none; color: var(--c-accent); }
/* Боковой отступ стрелок от карточки.
   Трек БЕЗ боковых полей: в макете (1944:32397) три карточки 410 с зазором 24
   дают 1278 и ровно помещаются в контент 1280. Поля 40px, которые стояли
   раньше ради стрелок, съедали 80px — третья карточка обрезалась.
   Стрелки уводим на -30px (по просьбе заказчика; край .container — это -20,
   то есть они на 10px заходят во внешнее поле страницы). Запас есть, пока
   вьюпорт шире контейнера 1320; ниже подхватывается правило @media 1279.
   Селектор через .mrtcards: .slider-arrow--prev/--next в home.css (-18px)
   имеет ту же специфичность, но подключается ПОЗЖЕ и перебивал бы. */
.mrtcards { padding: 0; }
.mrtcards .slider-arrow--prev.mrtcards__arrow--l { left: -30px; }
.mrtcards .slider-arrow--next.mrtcards__arrow--r { right: -30px; }
/* Ниже 1340 внешнего поля страницы уже не хватает: контейнер 1320 + его
   padding 20 дают запас ровно 30px только при вьюпорте ≥1340. Поджимаем
   до -20 (край контейнера), иначе стрелка вылезает и появляется прокрутка. */
@media (max-width: 1339px) {
    .mrtcards .slider-arrow--prev.mrtcards__arrow--l { left: -20px; }
    .mrtcards .slider-arrow--next.mrtcards__arrow--r { right: -20px; }
}

/* Секция карусели: 80px сверху/снизу на десктопе (было инлайн-стилем,
   из-за которого мобильный паддинг 40 не применялся) */
.section.mrtcards-sec { padding: 80px 0; }

/* --- 04 Ассортимент: заголовок по центру, табы r6 --- */
.section-title.asrt__title { text-align: center; }
.flagsec { background: var(--c-light); position: relative; }
.flagsec .container { z-index: 1; }
.flagsec .slider-arrow { width: 24px; height: 24px; background: none; border: 0; color: #111011; box-shadow: none; }
.flagsec .slider-arrow:hover { background: none; color: var(--c-accent); }
.flagsec .slider-arrow--prev { left: -33px; }
.flagsec .slider-arrow--next { right: -34px; }
/* У флагманов высота зависит от количества характеристик. При нескольких
   элементах общий .idea__track раньше фиксировался на 461px, поэтому длинный
   контент и кнопка обрезались. JS синхронизирует трек с активным слайдом. */
.flagsec__track { min-height: 461px; height: auto; transition: height .25s ease; }
.flagsec__track .flagship { min-height: 461px; }
.mrttech { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mrttech__card { position: relative; overflow: hidden; background: #05073F; border-radius: 24px; padding: 34px; color: #fff; min-height: 400px; }
.mrttech__g { position: absolute; pointer-events: none; }
.mrttech__g--1 { left: 302px; top: 55px; width: 453px; }
.mrttech__g--2 { left: 362px; top: -54px; width: 438px; }
.mrttech__content { position: relative; }
.mrttech__title { font-size: 26px; line-height: 32px; margin-bottom: 24px; text-transform: uppercase; }
.mrttech__card p { font-size: 16px; line-height: 20px; color: #fff; margin: 0 0 14px; max-width: 496px; }
.mrttech__card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mrttech__card li { position: relative; padding-left: 28px; font-size: 16px; line-height: 20px; max-width: 532px; }
.mrttech__card li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px;
    background: url(/local/templates/mrt/css/../images/fig/tech-item-icon.svg) no-repeat center/contain; }
/* Современные стратегии обработки (Figma 1944:32415)
   Градиент строго по макету: #4276FF → #05399C → #001246 (135°, стопы 0/55/100).
   Заголовок 32/40 КАПСОМ, у булетов «солнышки» 14×14 белые, описания #B2B2B2,
   графика 557×189 внизу слева. */
.strategy { position: relative; overflow: hidden; border-radius: 24px; min-height: 440px; padding: 30px 40px; color: #fff;
    /* Градиент снят с рендера макета 1944:32419 замером по пикселям, а не из
       gradientHandlePositions: пересчёт ручек давал диагональ, тогда как в
       макете переход почти строго вертикальный (вертикальная составляющая
       сильнее горизонтальной в 31 раз, угол 178.2deg). Стопы подобраны по
       профилю яркости; сверка с эталоном — расхождение не больше 3/255.
       Стояло 135deg 0/55/100 — переход шёл по диагонали и темнел раньше. */
    background: linear-gradient(178.2deg, #4276FF -1.5%, #05399C 35%, #001246 93%);
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.strategy__graphics { position: absolute; left: 67px; bottom: -40px; width: 557px; pointer-events: none; }
.strategy__title { position: relative; font-size: 32px; line-height: 40px; text-transform: uppercase; max-width: 603px; }
/* Строка булета ровно 463px, как в макете (1944:32419: Mid_Row 463×62).
   Без ограничения ширины текст занимал все 530px колонки, описания
   укладывались в одну строку вместо двух, и колонка не добирала высоту —
   под текстом оставалось пустое место. 5 строк по 62 + 4 зазора по 12 = 358,
   ровно высота контента баннера. */
.strategy__list { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 68px; }
/* max-width, а не width: на узких экранах фиксированные 463px вылезали за
   баннер и текст срезался его overflow: hidden */
.strategy__item { width: 100%; max-width: 463px; }
.strategy__item b { display: flex; align-items: center; gap: 8px; font-weight: 400;
    font-size: 16px; line-height: 22px; text-transform: uppercase; }
.strategy__ic { flex: 0 0 auto; width: 14px; height: 14px; color: #fff; }
.strategy__item span { display: block; font-size: 16px; line-height: 20px; color: #B2B2B2; }
.matshead { text-align: center; }
.matshead p { max-width: 780px; color: #696767; font-size: 16px; line-height: 20px; margin: 20px auto 0; }

/* --- Карточки материалов ISO --- */
/* Материалы обработки (Figma 1944:37613): заголовки 20/24 КАПСОМ,
   «солнышко» 24×24 цвета #EDEDED (в макете Logo_icon fill=#EDEDED) */
.matcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px 25px; margin-top: 38px; }
.matcard { display: flex; gap: 12px; align-items: flex-start; background: #05073F; border-radius: 24px; padding: 30px 24px; color: #fff; min-height: 200px; }
/* «Солнышко» синее #104495 — в макете (1944:37619) у Logo_icon вектор
   залит #104495. Ранее стояло белое, но по макету цвет синий. */
.matcard__icon { flex: none; width: 24px; height: 24px; color: #104495; margin-top: 2px; }
.matcard__row { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.matcard__title { font-size: 20px; line-height: 24px; text-transform: uppercase; }
.matcard__letter { flex: none; width: 28px; height: 28px; border-radius: 4px; color: #111011; font-size: 20px; line-height: 28px; text-align: center; }
.matcard__text { font-size: 16px; line-height: 20px; color: #fff; }

/* --- Флагман (слайдер-баннер) --- */
.flagship { position: relative; border-radius: 24px; overflow: hidden; background: #05073F; color: #fff; min-height: 461px; padding: 40px 30px;
    display: flex; flex-direction: column; align-items: flex-start; }
.flagship__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 43%; z-index: 0; }
.flagship__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Тёмная зона слева. Треугольного выступа по центру нет (убран по правке
   заказчика) — граница ровная вертикальная на 45%. */
.flagship::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #05073F;
    clip-path: polygon(0 0, 45% 0, 45% 100%, 0 100%); }
.flagship__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.flagship__series { background: #fff; color: #111011; border-radius: 80px; padding: 4px 14px; font-size: 16px; line-height: 20px; }
.flagship__iso { display: flex; gap: 15px; }
.flagship__iso span { width: 28px; height: 28px; border-radius: 4px; background: #fff; color: #111011; font-size: 20px; line-height: 28px; text-align: center; display: block; }
.flagship__name { position: relative; z-index: 1; font-size: 26px; line-height: 32px; max-width: 542px; margin-bottom: 20px; text-transform: uppercase; }
.flagship__specs { position: relative; z-index: 1; font-size: 16px; line-height: 20px; max-width: 537px; display: flex; flex-direction: column; gap: 6px; }
.flagship__label { color: #A3AFD5; }
/* Кнопка «Перейти в каталог» 182×40 r12 под характеристиками (макет 1944:32408) */
.flagship__btn { position: relative; z-index: 1; display: inline-flex; align-self: flex-start;
    margin-top: 20px; min-height: 40px; padding: 12px 24px; border-radius: 12px;
    font-size: 16px; line-height: 20px; }

/* --- Архивные каталоги --- */
.arch-list { background: #fff; border-radius: 18px; padding: 20px 30px; }
.arch-list a { display: block; font-size: 20px; line-height: 21px; color: #111011; padding: 8px 0; }
.arch-list a:hover { color: var(--c-accent); }

/* --- Теги статьи --- */
/* Теги статьи (Figma 1780:376618): обводка светло-серая #EFEFEF, а не
   оранжевая; текст оранжевый 16/20, r12, паддинг 12/24, зазор 20 */
.tags { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.tags a { border: 1px solid #EFEFEF; color: var(--c-accent); border-radius: 12px; padding: 12px 24px; font-size: 16px; line-height: 20px; }
.tags a:hover { border-color: var(--c-accent); }

/* --- Статья: контент + сайдбар --- */
/* Содержание в разметке идёт сразу после заголовка (мобильный порядок),
   на десктопе grid-областями уводится в правую колонку. */
.article { display: grid; grid-template-columns: 954px 302px; justify-content: space-between;
    column-gap: 24px; row-gap: 0; align-items: start;
    grid-template-areas: "head toc" "main toc"; }
.article__head { grid-area: head; }
.article__main { grid-area: main; }
.article__toc { grid-area: toc; }
.article__date { font-size: 16px; color: #9C9C9C; margin-bottom: 16px; }
.article__title { font-size: 32px; line-height: 40px; color: #111011; margin: 0 0 30px; max-width: 954px; }
.article__img { aspect-ratio: 954/400; border-radius: 18px; overflow: hidden; margin-bottom: 30px; }
.article__img img { width: 100%; display: block; }
/* Лид статьи чёрным: синий #104495 выбивался из текста (правка заказчика —
   весь текст внутри статьи одного цвета) */
.article__lead { font-size: 26px; line-height: 28px; color: #111011; margin-bottom: 24px; }
.article__body p { font-size: 16px; line-height: 20px; color: #111011; margin: 0 0 18px; }
/* Содержание (Figma 863:48876): разделители #D9D9D9, ховер — тёмный текст */
.article__toc { position: sticky; top: 160px; }
.article__toc-title { font-size: 20px; line-height: 25px; color: #111011; text-transform: uppercase;
    padding-bottom: 20px; border-bottom: 1px solid #D9D9D9; }
.article__toc a { display: block; font-size: 16px; line-height: 20px; color: #696767;
    padding: 10px 0; border-bottom: 1px solid #D9D9D9; transition: color .25s; }
.article__toc a:last-child { border-bottom: 0; }
.article__toc a:hover { color: #111011; }

/* Таблет (Figma 1537:135182): одна колонка, содержание между заголовком и фото */
@media (max-width: 1279px) {
    .article { grid-template-columns: 1fr; grid-template-areas: "head" "toc" "main"; }
    .article__toc { position: static; margin-bottom: 30px; }
    .article__date { font-size: 16px; line-height: 20px; color: #696767; margin-bottom: 14px; }
    .article__title { font-size: 26px; line-height: 32px; text-transform: uppercase; margin-bottom: 30px; }
    .article__toc-title { font-size: 20px; line-height: 24px; }
    .article__img { aspect-ratio: 720/340; }
}
/* Мобилка (Figma 1537:135291) */
@media (max-width: 767px) {
    .article__toc { margin-bottom: 24px; }
    .article__date { font-size: 14px; line-height: 16px; margin-bottom: 10px; }
    .article__title { font-size: 20px; line-height: 24px; margin-bottom: 24px; }
    .article__img { aspect-ratio: 361/220; }
    /* Теги: по горизонтали 20, между строками 10 (макет 1780:371297 —
       itemSpacing 20, counterAxisSpacing 10). Было 20 в обе стороны,
       из-за чего строки тегов стояли слишком редко. */
    .tags { gap: 10px 20px; }
    /* До секции «Другие статьи» в макете 40px: 20 снизу у блока статьи
       и 20 сверху у секции ниже. У .section снизу 80, суммарно выходило 100. */
    .section.artdet { padding-bottom: 20px; }
}

/* --- Детальная новость (колонка 1060 по центру) --- */
.newsdet { max-width: 1060px; margin: 36px auto 0; }
.newsdet__date { font-size: 18px; line-height: 24px; color: #9C9C9C; margin-bottom: 10px; }
/* Заголовок новости КАПСОМ. overflow-wrap нужен для длинных названий без
   пробелов: «МЕТАЛЛООБРАБОТКА-2026» на мобильном расширяла страницу на 78px. */
.newsdet__title { font-size: 32px; font-weight: 400; line-height: 40px; text-transform: uppercase;
    color: #111011; margin: 0 0 30px; overflow-wrap: anywhere; }
/* Блок подстраивается под фото, а не фото под блок. Раньше стояла жёсткая
   рамка aspect-ratio 1060/400 (2.65:1) и cover резал под неё всё подряд:
   у афиши 1952×1099 (16:9) уходила треть кадра сверху и снизу — обрезались
   заголовок и даты выставки.
   width: max-content + margin auto — картинка не растягивается сверх своего
   разрешения и центрируется, если она у́же 1060 (иначе по краям оставались
   бы тёмные поля подложки).
   max-height 600 — страховка от вертикальных снимков: не растянут страницу
   на полтора экрана. */
.newsdet__img { width: max-content; max-width: 100%; border-radius: 18px;
    overflow: hidden; margin: 0 auto 30px; background: #05073F; }
.newsdet__img img { display: block; max-width: 100%; max-height: 600px;
    width: auto; height: auto; }
/* Текст под фото — единым потоком, без «лида» крупным синим кеглем и без
   левого отступа (раньше первый абзац шёл 26/28 цветом #104495 и выбивался). */
.newsdet__lead, .newsdet__body p { font-size: 16px; line-height: 20px; color: #111011; margin: 0 0 16px; }
.newsdet__lead { margin-bottom: 16px; }

/* Правовые тексты (политика, согласия): в теле новости раньше были только
   абзацы, а тут приходят заголовки разделов и списки. Маркеры возвращаем
   явно — глобальный reset в base.css гасит list-style у всех ul. */
.newsdet__body h2 { font-size: 20px; font-weight: 500; line-height: 26px; color: #111011; margin: 30px 0 14px; }
.newsdet__body h2:first-child { margin-top: 0; }
.newsdet__body ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.newsdet__body li { font-size: 16px; line-height: 22px; color: #111011; margin-bottom: 6px; }
.newsdet__body a { color: #104495; text-decoration: underline; }
.newsdet__body a:hover { color: var(--c-accent); }

/* --- Баннер подписки (Figma 1502:205827) --- */
.subscribe-card { position: relative; overflow: hidden; border-radius: 24px; background: #fff; min-height: 320px; display: flex; justify-content: flex-end; }
.subscribe-card__media { position: absolute; left: 0; top: 0; width: 617px; height: 100%; overflow: hidden; }
.subscribe-card__media picture { display: block; width: 100%; height: 100%; }
.subscribe-card__bg { width: 100%; height: 100%; object-fit: cover; object-position: left; pointer-events: none; }
.subscribe-card__form { position: relative; z-index: 1; width: 600px; padding: 45px 90px 45px 70px; }
.subscribe-card__form .form { gap: 22px; }
/* Заголовок баннера рассылки КАПСОМ (в макете 20/24 UPPER) */
.subscribe-card__title { font-size: 20px; line-height: 24px; text-transform: uppercase;
    color: #111011; margin-bottom: 18px; max-width: 440px; }
.subscribe-card .form__input { height: 42px; border-color: #A3AFD5; }
.subscribe-card .form__consent { font-size: 14px; line-height: 16px; color: #111011; margin: 0; }
.subscribe-card .btn { align-self: flex-start; }

/* Мобильный баннер подписки — самостоятельная композиция 361×583 из
   макета 1780:278991: сверху фото станка (в макете STRETCH-заливка: средние
   65.65% кадра на всю высоту фото — ровно это даёт object-fit: cover при
   боксе 361×309), снизу белая панель формы с треугольной выемкой по центру
   (вектор Graphics_bg из макета → subscribe-mobile-notch.svg). */
@media (max-width: 767px) {
    .subscribe-section { padding: 40px 0; background: #DDDDDD; }
    .subscribe-card { display: block; height: 583px; min-height: 583px; background: #fff; }
    /* Фото в макете заходит под белую панель на 39px (заливка на 188.6%
       высоты баннера): выемка панели показывает фото, а не белую подложку. */
    .subscribe-card__media { position: absolute; left: 0; top: 0; width: 100%; height: 309px;
        overflow: visible; z-index: 0; }
    .subscribe-card__bg { object-fit: cover; object-position: center; }
    /* Белая панель с выемкой — вектор 491×629, верхний край на y=270;
       шире карточки симметрично (в макете -63px с каждой стороны) */
    .subscribe-card__media::after { content: ""; position: absolute; z-index: 1;
        left: 50%; top: 270px; width: 136.3%; height: 629px;
        transform: translateX(-50%);
        background: url("/local/templates/mrt/css/../images/fig/subscribe-mobile-notch.svg") top center/100% auto no-repeat;
        pointer-events: none; }
    /* Блок формы 341×248 прибит к низу баннера: контент с y=316 (270+46),
       снизу 20px, по бокам 10px — паддинги Banner из макета */
    .subscribe-card__form { position: absolute; z-index: 2; left: 0; right: 0; top: 270px; bottom: 0;
        width: auto; height: auto; padding: 46px 10px 20px; }
    .subscribe-card__title { max-width: none; margin-bottom: 18px; font-weight: 400; }
    .subscribe-card__form .form { gap: 22px; }
    .subscribe-card .form__input { height: 40px; border-radius: 12px; background: transparent; }
    .subscribe-card .form__consent { font-size: 14px; line-height: 16px; }
    .subscribe-card .btn { align-self: stretch; width: 100%; height: 40px; min-height: 40px;
        border-radius: 12px; font-size: 16px; font-weight: 400; line-height: 20px;
        justify-content: center; }
}
/* Узкие экраны (<360): заголовок занимает 4 строки и не влезает в 583px —
   даём карточке расти вниз, композиция (фото, панель, выемка) не меняется */
@media (max-width: 359px) {
    .subscribe-card { height: auto; min-height: 583px; }
    .subscribe-card__form { position: relative; top: auto; bottom: auto; margin-top: 270px; }
}

/* --- Пагинация --- */
.pager { display: flex; justify-content: center; align-items: center; gap: 19px; margin-top: 40px; font-size: 14px; line-height: 16px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; color: #111011; }
.pager a:hover { color: var(--c-accent); }
.pager .is-active { min-width: 18px; height: 18px; border-radius: 2px; background: var(--c-accent); color: #fff; }
.pager__arrow svg { display: block; }
.pager__arrow.is-disabled { opacity: .3; pointer-events: none; }

/* --- Адаптив --- */
@media (max-width: 1279px) {
    .page-hero { height: 520px; }
    .page-hero__title { font-size: 40px; line-height: 48px; }
    /* minmax(0,...), а не голый 1fr: у 1fr минимум равен min-content, и колонка
       с картинкой отказывалась сжиматься уже её собственной ширины — визуал
       вылезал за контейнер и распирал страницу. */
    .split { grid-template-columns: minmax(0, 1fr); }
    /* форма первой, тёмный чертёж-баннер после неё (Figma 1780:250864) */
    .contact-sec__grid { display: flex; flex-direction: column; }
    .contact-sec__bg { display: none; }
    .contact-sec__art { order: 2; min-height: 300px; }
    .dlrben-grid { grid-template-columns: 1fr; gap: 32px; }
    /* В одну колонку выравнивать текст по общей линии не нужно */
    .dlrben__head { min-height: 0; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    /* История: в кадр помещается две колонки, остальные листаются (было
       repeat(2,1fr) сеткой — годы уходили на второй ряд) */
    .history__item { width: calc((100% - 11px) / 2); }
    /* Преимущества на планшете остаются в две колонки (Figma 1780:133231):
       карточка 720×430, паддинг 14/20, заголовок 26/32 в колонке 274px,
       буллиты 406px. Чертёж уходит вниз-влево и подрезается. */
    .advantages { grid-template-columns: 274fr 406fr; padding: 14px 20px; gap: 0; }
    .advantages__title { font-size: 26px; line-height: 32px; max-width: none; }
    .advantages__list { padding: 0; gap: 16px; }
    .advantages__item-title { font-size: 20px; line-height: 24px; }
    /* Чертёж прижат к левому краю и обрезан по колонке заголовка (в макете
       Bg_graphics 251×289 — видна только левая часть, под текст не заходит) */
    .advantages__graphics { left: 0; bottom: -34px; width: 500px; clip-path: inset(0 60% 0 0); }
    .newsgrid--3 { grid-template-columns: 1fr 1fr; }
    .certs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .page-hero { height: 420px; }
    .page-hero__title { font-size: 28px; line-height: 34px; }
    /* Заголовки страниц инжиниринга: тексты у них длинные («Наша компания
       проводит комплексный аудит вашего инструментального хозяйства»), и
       общими 32/40 занимали по шесть строк — заказчик попросил мельче.
       24/30 и по левому краю, как на десктопе: центровка из .section-title
       рвала длинную фразу на рваные строки. */
    .section-title.engtitle { font-size: 24px; line-height: 30px; text-align: left; margin-bottom: 20px; }
    .page-hero__bottom { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 40px; }
    .page-title { font-size: 30px; line-height: 38px; }
    /* .history из списка ушла: она больше не сетка, а карусель, и на мобиле
       целиком скрыта в пользу .histslider (см. блок в конце файла) */
    .stats, .newsgrid--3, .newsgrid--2, .certs, .info-cards { grid-template-columns: 1fr; }
    .banner-card__inner { flex-direction: column; align-items: flex-start; }
    .vacancy__head { grid-template-columns: 1fr; gap: 8px; }
    .vacancy.is-open .vacancy__body { grid-template-columns: 1fr; }
    /* Мобайл (Figma 1780:139454): карточка 361×494, одна колонка,
       паддинг 14/20, отбивка заголовок → буллиты 34px */
    .advantages { grid-template-columns: 1fr; padding: 14px 20px; gap: 34px; }

    /* --- «Остались вопросы» — спек мобайла Figma 1780:92163 ---
       Секция 20/40, карточка формы #A3AFD5 r24 паддинг 24/16,
       заголовок 20/24, подпись 16/20, поля h40 r12, кнопка h40. */
    .contact-sec { padding: 20px 0 40px; }
    .contact-sec__grid { gap: 40px; }
    /* Фон тот же, что на десктопе: в мобильном (1780:253829) и планшетном
       (1780:250864) макетах у Section / Partner тоже #A3AFD5 с opacity .10,
       а не сплошная заливка. Меняются только внутренние отступы. */
    .contact-sec__card { padding: 24px 16px; }
    .contact-sec__title { font-size: 20px; line-height: 24px; }
    .contact-sec__sub { margin-bottom: 0; }
    .contact-sec .form { gap: 8px; margin-top: 12px; }
    .contact-sec .form__input { height: 40px; padding: 10px 12px; border-radius: 12px; }
    .contact-sec .form__textarea { min-height: 50px; height: 50px; padding: 10px 12px; border-radius: 12px; }
    .contact-sec .form__consent { font-size: 12px; line-height: 14px; margin: 0; }
    .contact-sec .form .btn { min-height: 40px; height: 40px; padding: 10px 24px; border-radius: 12px; }
    /* Тёмный чертёж-баннер: 300px под формой (в макете мобайла отдельного визуала нет) */
    .contact-sec__art { min-height: 300px; }
}

/* --- Адаптив: Испытания / Центр покрытий (Figma 1780:336760 и моб.) --- */
@media (max-width: 1279px) {
    .pvdslider { max-width: 720px; margin: 0 auto; }
    /* Колонки .split здесь уже сложены в столбик — фото на всю ширину
       распирало бы блок на пол-экрана, поэтому тот же лимит, что у слайдера */
    .engintro__photo { max-width: 720px; margin: 0 auto; }
    .catfiles { grid-template-columns: 1fr; }
    /* Специнструмент: на планшете и мобильном обе колонки в столбик —
       заголовок, текст, кнопка, затем карточки (Figma 2207:206183) */
    .specintro__grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
    .speccards { margin-top: 20px; }
    /* На планшете поля трека уже, чтобы карточке оставалось больше места */
    .mrtcards { padding: 0 32px; }
    /* Материалы обработки: на планшете 2 колонки (в макете 1944:43373 —
       348 + 24 + 348 при контейнере 720, ряды через 38).
       minmax(0,1fr) обязателен: с обычным 1fr колонка не сжимается ниже
       min-content карточки (~254px), и на 768 три колонки давали +118px
       горизонтальной прокрутки. */
    .matcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 24px; }
}
@media (max-width: 900px) {
    .pvdcards, .pvdcards--3 { grid-template-columns: 1fr; }
    .pvdcard, .pvdcards--3 .pvdcard { min-height: 0; }
    /* Карусель карточек-проблем: на узком экране карточка занимает всю ширину.
       Стрелки раньше прятались, но тогда по статичному экрану не понять, что
       карточек больше одной, — заказчик попросил индикацию. Оставляем их
       поверх карточки у самых краёв вьюпорта, как в карусели каталога на
       /mrt/: карточка шире кадра, вынести стрелки наружу некуда.
       Цвет чёрный (базовый #111011), при нажатии оранжевый. */
    .pvdcards-slider .slider-arrow--prev { left: -15px; }
    .pvdcards-slider .slider-arrow--next { right: -15px; }
    .pvdcards-slider__track--3 .pvdcard,
    .pvdcards-slider__track--2 .pvdcard { width: 100%; min-height: 0; }
}
@media (max-width: 640px) {
    .pvdintro__text p { max-width: none; }
    .pvdslider__frame { border-radius: 18px; }
    .engintro__photo { border-radius: 18px; }
    .engintro__photo--contain img { padding: 8px; }
    .flagship { padding: 24px 20px; }
    .strategy { grid-template-columns: 1fr; padding: 24px 20px; }
    .strategy__list { padding-left: 0; margin-top: 20px; }
    .mrttech { grid-template-columns: 1fr; }
    /* Карусель карточек: слайд по ширине контейнера */
    .grad-card { flex: 0 0 100%; width: 100%; height: auto; min-height: 260px; }
    .grad-card__title { font-size: 24px; line-height: 30px; margin-bottom: 16px; }
    .matcards { grid-template-columns: 1fr; }
    .ccards { grid-template-columns: 1fr; }
    .cfsec__grid { grid-template-columns: 1fr; }
    .catfile__title { font-size: 24px; line-height: 30px; }
}

/* ==========================================================================
   О КОМПАНИИ — планшет 768 (Figma 1780:132695) и мобайл 393 (1780:138933)
   ========================================================================== */
@media (max-width: 1279px) {
    /* Текст на всю ширину колонки: ограничение 460px нужно только десктопу,
       где рядом стоит видеокарточка */
    .about-sec .lead-text { max-width: none; margin-top: 40px; }
    /* История: колонки не влезают в ряд — переносим сеткой, стик убираем
       внутрь (отрицательный left уводил бы его за край экрана) */
    .history__item { padding-left: 25px; }
    .history__item::before { left: 0; }
    /* Новости: кнопка «Все новости» уходит под карточки (в макете планшета
       она на y=370, т.е. после карточек). Верхнюю в шапке скрываем, иначе
       она дублируется, а заголовок перестаёт быть по центру. */
    .newssec .section__head .btn { display: none; }
    .newssec__more { display: block; text-align: center; margin-top: 40px; }
}
@media (max-width: 767px) {
    /* Заголовок блока 32/40, текст 16/20 по формату (замер мобильного макета) */
    .about-sec .lead-text { margin-top: 24px; }
    /* Преимущества: одна колонка, заголовок 26/32, пункты 16/22 + текст 16/20 */
    .advantages { padding: 14px 20px; gap: 34px; }
    .advantages__title { font-size: 26px; line-height: 32px; max-width: none; }
    .advantages__list { padding: 0; gap: 16px; }
    .advantages__item-title { font-size: 16px; line-height: 22px; }
    .advantages__item-text { font-size: 16px; line-height: 20px; }
    /* В мобильном макете (1780:139454) чертежа внутри карточки нет —
       буллиты занимают её целиком */
    .advantages__graphics { display: none; }
    /* Новости: карточка на всю ширину, заголовок 20/21, текст 16/20 */
    .newscard__name { font-size: 20px; line-height: 21px; }
    /* Кнопка «Все новости» — на всю ширину (в макете мобайла 361×44) */
    .newssec__more .btn { display: flex; width: 100%; }
}

/* ==========================================================================
   ИСТОРИЯ КОМПАНИИ — мобильный слайдер (Figma 1780:139444 «Year Slider / Mobile»)
   Десктоп/планшет показывают сетку .history, мобайл — этот слайдер.
   ========================================================================== */
.histslider { display: none; }
@media (max-width: 767px) {
    /* Отбивки секции 40/40 и заголовок→слайдер 50px (замер макета:
       секция 341 = 40 + Container 261 + 40; слайдер начинается на y=130).
       Селектор через :has, чтобы не задеть другие .section--dark. */
    .section--dark:has(.histslider) { padding: 40px 0; }
    /* Сетку колонок скрываем, вместо неё слайдер по одному году */
    .history { display: none; }
    .histslider { position: relative; display: block; margin-top: 50px; }

    /* Стрелки 40×40 по краям, контурный шеврон #B2B2B2 1.5px без подложки */
    .histslider__arrow { position: absolute; top: 0; width: 40px; height: 40px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        background: none; border: 0; color: #B2B2B2; cursor: pointer; z-index: 2;
        transition: color .2s; }
    .histslider__arrow svg { width: 24px; height: 24px; display: block; }
    .histslider__arrow:hover { color: var(--c-accent); }
    .histslider__arrow--prev { left: 0; }
    .histslider__arrow--next { right: 0; }

    /* Трек: слайды наложены друг на друга, высота — по самому высокому,
       поэтому линия-стик и точки не «прыгают» при переключении. */
    .histslider__track { position: relative; display: grid; }
    .histslider__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
        transition: opacity .35s ease, visibility 0s .35s; }
    .histslider__slide.is-active { opacity: 1; visibility: visible;
        transition: opacity .35s ease, visibility 0s 0s; }
    /* Год 32/40 акцентом по центру между стрелками */
    .histslider__year { height: 40px; font-size: 32px; line-height: 40px;
        color: var(--c-accent); text-align: center; }
    /* Линия-стик идёт СРАЗУ ПОД ГОДОМ, до описания (в макете Year_stick
       на y=46, а Description только на y=64). Полоса с треугольной выемкой
       по центру — рисуем polyline, точка 10px акцентом слева. */
    .histslider__stick { position: relative; height: 14px; margin-top: 6px; padding-left: 8px; }
    .histslider__stickline { display: block; width: 100%; height: 14px; }
    /* Точка на уровне линии (линия идёт по y=2 из 14 => центр точки там же) */
    .histslider__stick::after { content: ""; position: absolute; left: 0; top: -3px;
        width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }

    /* Описание — под линией (отбивка 8px: макет 64 − 56) */
    .histslider__text { margin-top: 8px; font-size: 18px; line-height: 23px; color: #DDDDDD; }

    /* Точки-индикаторы: 8px, gap 8, активная — акцентная */
    .histslider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
    .histslider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
        background: #666666; cursor: pointer; transition: background .2s; }
    .histslider__dot.is-active { background: var(--c-accent); }
}

/* ==========================================================================
   ПРОИЗВОДСТВО В ДЕТАЛЯХ — свёрстано по макету:
   десктоп 1780:192190 (1440), планшет 1780:178733 (768), мобайл 1780:181656 (393).
   Контент целиком из инфоблока (правится в админке): NAME → подпись на визуале,
     PREVIEW_PICTURE → фото, LABEL → метка, VIDEO → ролик кнопки плея,
     PREVIEW_TEXT → подзаголовок, DETAIL_TEXT → описание.
   Инфоблок у каждой страницы СВОЙ (видео разные) — см. partials/proddet.php.
   ========================================================================== */
.proddet { background: #DDDDDD; padding: 40px 0 80px; }
/* Отбивка заголовок → карточки 50px (Container gap=50) */
.proddet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }

/* Карточка 410×520, r18: визуал 225 + белый текстовый блок 295 */
.pdcard { border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }

/* Визуал: серая подложка #EEEEEE — правая часть карточки в макете
   (фото оборудования поверх неё убрано по правке заказчика, подложка
   и завиток остаются). */
.pdcard__visual { position: relative; flex: none; height: 225px; background: #EEEEEE; overflow: hidden; }

/* Завиток-подложка 252×244 @192,-16, #DDDDDD при opacity .6 — на сером
   #EEEEEE даёт замеренный в макете оттенок (229,229,229). */
.pdcard__deco { position: absolute; left: 192px; top: -16px; width: 252px; height: 244px;
    z-index: 0; color: #DDDDDD; opacity: .6; pointer-events: none; }

/* Синий градиент — левая часть визуала (213px из 410 = 51.95%).
   Вертикальный: замер рендера макета показал, что цвет меняется только по Y
   (#4276FF сверху → #05399C на 50% → #001246 снизу). */
.pdcard__grad { position: absolute; left: 0; top: 0; width: 51.95%; height: 100%; z-index: 1;
    background: linear-gradient(180deg, #4276FF 0%, #05399C 50%, #001246 100%); }

/* Лого 67×30 @14,24 */
.pdcard__logo { position: absolute; left: 14px; top: 24px; z-index: 3; width: 67px; height: 30px; }

/* Название 16/22 UPPER белым @14,110 */
.pdcard__name { position: absolute; left: 14px; top: 110px; z-index: 3; max-width: 150px;
    font-size: 16px; line-height: 22px; color: #fff; text-transform: uppercase; transition: color .2s; }
.pdcard__name:hover { color: var(--c-accent); }

/* Метка 12/14 белым @14,187, иконка-солнышко 13×13 акцентом */
.pdcard__label { position: absolute; left: 14px; top: 187px; z-index: 3;
    display: flex; align-items: center; gap: 2px; font-size: 12px; line-height: 14px; color: #fff; }
.pdcard__label svg { width: 13px; height: 13px; flex: none; color: var(--c-accent); }

/* Плей: круг 49×49 @185,95 (45.12% от ширины), треугольник 16×19 внутри
   со сдвигом +2.5px вправо — оптическая центровка (замер макета) */
.pdcard__play { position: absolute; left: 45.12%; top: 95px; z-index: 4;
    width: 49px; height: 49px; padding: 0; border: 0; border-radius: 50%;
    background: #FF6A00; color: #fff; cursor: pointer;
    transition: background .2s ease, transform .2s ease; }
.pdcard__play svg { position: absolute; left: 19px; top: 15px; width: 16px; height: 19px; display: block; }
.pdcard__play:hover { background: var(--c-accent-600); transform: scale(1.07); }

/* Текстовый блок: паддинг 20, внутренний гэп 14 (Container gap=14) */
.pdcard__body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pdcard__lead { font-size: 16px; line-height: 22px; color: #111011; text-transform: uppercase; }
.pdcard__text { font-size: 16px; line-height: 20px; color: #686666; }

/* --- Планшет 768 (1780:178733): 2 колонки, визуал 192 --- */
@media (max-width: 1279px) {
    .proddet { padding: 40px 0; }
    .proddet__grid { grid-template-columns: repeat(2, 1fr); }
    .pdcard__visual { height: 192px; }
    .pdcard__grad  { width: 54%; }        /* 189 из 350 */
    .pdcard__name  { top: 93px; }
    .pdcard__label { top: 154px; }
    .pdcard__play  { left: 42.29%; top: 72px; }
}

/* --- Мобайл 393 (1780:181656): одна колонка, карточка = только визуал 220.
       Белого текстового блока в мобильном макете нет. --- */
@media (max-width: 767px) {
    .proddet__grid { grid-template-columns: 1fr; }
    .pdcard__visual { height: 220px; }
    .pdcard__grad  { width: 49.03%; }     /* 177 из 361 */
    .pdcard__name  { top: 107px; max-width: 130px; }
    .pdcard__label { top: 182px; }
    .pdcard__play  { left: 42.66%; top: 86px; }
    .pdcard__body  { display: none; }
}

/* ==========================================================================
   Страница MRT — мобильная вёрстка строго по макету 1944:43443 (393)
   Блок в конце файла намеренно: правила для .page-hero, .pill, .tabpane и
   .strategy заданы выше (и частично в home.css, который подключается
   позже) — здесь они гарантированно перебиваются.
   Все размеры — из макета: боковое поле секций 14px (у 06 и 07 — 16px),
   контент 365/361px.
   ========================================================================== */
@media (max-width: 767px) {

/* --- 01 Hero (393×670): лого 159×72 по центру на y=227, заголовок 32/40
       внизу, кнопка на всю ширину, нижнее поле 80 --- */
.page-hero.mrthero { height: 670px; }
.mrthero__logo { top: 227px; width: 159px; }
.mrthero .crumbs--light { font-size: 16px; line-height: 20px; padding-top: 20px; }
.mrthero .page-hero__bottom { flex-direction: column; align-items: stretch; gap: 30px;
    padding-bottom: 80px; }
.mrthero .page-hero__title { font-size: 32px; line-height: 40px; margin: 0; }
.mrthero .page-hero__bottom .btn { width: 100%; min-height: 40px; padding: 10px 24px;
    border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* --- 02 About Brand (393×1359): поле 14, заголовок 32/40, текст 16/20
       по формату на всю ширину, визуал квадратный снизу через 24 --- */
.mrtintro-sec { padding: 40px 0; }
.mrtintro-sec .container { padding-left: 14px; padding-right: 14px; }
.mrtintro-sec .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.section-title.mrtintro__title { font-size: 32px; line-height: 40px; margin-bottom: 30px; }
.mrtintro__text { max-width: none; }
.mrtintro__text p { margin: 0 0 20px; }
.mrtintro__text p:last-child { margin-bottom: 0; }
.mrtintro-sec .split__visual { aspect-ratio: 1 / 1; border-radius: 24px; }

/* --- 03 Catalog Slider (393×400): поле 14, слайд 365×320, стрелки 24×24
       по краям вьюпорта (в макете x=1 и x=368) --- */
.section.mrtcards-sec { padding: 40px 0; }
.mrtcards-sec .container { padding-left: 14px; padding-right: 14px; }
.mrtcards { padding: 0; }
.grad-card { flex: 0 0 100%; width: 100%; height: 320px; min-height: 0; padding: 24px; }
.grad-card__title { font-size: 32px; line-height: 40px; margin-bottom: 24px; }
.grad-card__text { font-size: 16px; line-height: 20px; }
.mrtcards .slider-arrow--prev.mrtcards__arrow--l { left: -13px; }
.mrtcards .slider-arrow--next.mrtcards__arrow--r { right: -13px; }
/* На мобильном у горизонтальной ленты преимуществ по макету есть стрелки.
   Общее правило для планшета скрывает все .slider-arrow, поэтому возвращаем
   только навигацию этой секции и оставляем свайп/drag как раньше. */
.mrtcards[data-hs-mobile-arrows] .mrtcards__arrow { display: flex; top: 50%; transform: translateY(-50%); }

/* --- 04 Ассортимент (393×1058): поле 14, заголовок 32/40 по центру,
       табы 14/16 (серый текст у неактивных), панель в одну колонку:
       заголовок 24/28 → текст 14/16 → фото 361×240 --- */
.asrt-sec { padding: 40px 0; }
.asrt-sec .container { padding-left: 14px; padding-right: 14px; }
.section-title.asrt__title { font-size: 32px; line-height: 40px; margin-bottom: 38px; }
.pills { gap: 8px; margin-bottom: 40px; }
.pill { font-size: 14px; line-height: 16px; color: #696767; }
.pill.is-active { color: #fff; }
.tabpane.is-active { grid-template-columns: 1fr; gap: 20px; }
.tabpane__title { font-size: 24px; line-height: 28px; margin-bottom: 12px; }
.tabpane__text { font-size: 14px; line-height: 16px; text-align: justify; }
.tabpane__text p { margin: 0 0 12px; }
/* Иначе отбивка последнего абзаца добавляется к gap 20 до фото */
.tabpane__text p:last-child { margin-bottom: 0; }
.tabpane__img { aspect-ratio: 361 / 240; border-radius: 24px; }

/* --- 05 Флагманы (393×987): поле 14, заголовок 32/40 по центру,
       баннер 361 высотой 735 с фото сверху и контентом снизу,
       название 16/22, кнопка на всю ширину --- */
.section.flagsec { padding: 40px 0; }
.flagsec .container { padding-left: 14px; padding-right: 14px; }
.flagsec .section-title { font-size: 32px; line-height: 40px; margin-bottom: 30px; }
/* Фото сверху на 300px, ниже тёмная плашка с контентом.
   Высота карточки НЕ фиксируется (min-height 735 как в макете, дальше растёт):
   у нашего товара 10 строк характеристик против 6 у дизайнера, и при жёстких
   735px контент заезжал на фото. Контент прижат ниже фото через margin-top,
   поэтому наложения не будет при любом числе строк. */
.flagship { min-height: 735px; height: auto; padding: 24px 16px; justify-content: flex-start; }
.flagship__bg { left: 0; right: 0; top: 0; bottom: auto; height: 300px; }
.flagship::before { clip-path: none; top: 250px; bottom: 0;
    background: linear-gradient(180deg, rgba(5,7,63,0) 0, #05073F 50px, #05073F 100%); }
/* 24 (паддинг) + 331 = 355 — та же вертикаль, что у плашки серии в макете */
.flagship__head { margin-top: 331px; }
.flagship__head { gap: 15px; margin-bottom: 20px; }
.flagship__name { font-size: 16px; line-height: 22px; max-width: none; margin-bottom: 20px; }
.flagship__specs { max-width: none; gap: 6px; }
.flagship__btn { align-self: stretch; justify-content: center; margin-top: 20px;
    min-height: 44px; }
/* Стрелки 24×24 по краям вьюпорта (в макете правая на x=369 из 393) */
.flagsec .slider-arrow--prev { left: -14px; }
.flagsec .slider-arrow--next { right: -14px; }
/* Точки под баннером: gap 12 до них, диаметр 10 */
.flagsec .idea__dots { margin-top: 12px; gap: 8px; }
.flagsec__track { min-height: 0; height: auto !important; transition: none; }
.flagsec__track .flagship { min-height: 735px; }

/* --- 06 Стратегии (393×734): поле 16/32, заголовок секции 32/40 по центру,
       баннер pad 16, его заголовок 20/24, буллиты колонкой --- */
.section.mrtstrat-sec { padding: 32px 0; }
.mrtstrat-sec .container { padding-left: 16px; padding-right: 16px; }
.mrtstrat-sec .section-title { font-size: 32px; line-height: 40px; margin-bottom: 24px; }
.strategy { grid-template-columns: 1fr; gap: 20px; padding: 16px; min-height: 0; }
.strategy__title { font-size: 20px; line-height: 24px; max-width: none; }
.strategy__list { padding-left: 0; margin-top: 0; gap: 12px; }
/* Чертёж-подложку на мобиле скрываем: в макете (1944:43933) её не видно,
   а при одноколоночной раскладке она просвечивала сквозь текст буллитов. */
.strategy__graphics { display: none; }

/* --- 07 Материалы (393×1553): поле 16, заголовок 32/40 + описание 16/20
       по центру, карточки 361×200 в колонку через 16, pad 14/16 --- */
.mrtmats-sec { padding: 40px 0; }
.mrtmats-sec .container { padding-left: 16px; padding-right: 16px; }
.matshead .section-title { font-size: 32px; line-height: 40px; }
.matshead p { font-size: 16px; line-height: 20px; margin: 21px auto 0; }
.matcards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
/* Иконка и текст выровнены по ВЕРХУ (в макете Logo_icon и Bottom_Row
   начинаются на одной вертикали y=249, т.е. у верхней кромки контента) */
.matcard { min-height: 200px; padding: 14px 16px; gap: 12px; align-items: flex-start; }
.matcard__icon { margin-top: 0; }
.matcard__row { gap: 12px; margin-bottom: 12px; }
.matcard__title { font-size: 20px; line-height: 24px; }
.matcard__text { font-size: 16px; line-height: 20px; }
}

/* ==========================================================================
   Каталог — адаптив (Figma 768: 1783:8474, 393: 1783:8561)
   Планшет: одна колонка, карточка 720×200, чертёж 527×331 на left 239/top -73,
            название 26/32, заголовок страницы 32/40.
   Мобайл:  карточка 361×200, чертёж МЕНЬШЕ — 308×193 на left 90/top 7,
            название 20/24; в архивном списке стрелка уезжает к правому краю.
   Блок в конце файла: правила .catfiles/.catfile__title заданы выше в
   @media 1279 и 640, здесь они гарантированно перебиваются.
   ========================================================================== */
@media (max-width: 1279px) {
    .catpage { padding: 20px 0 40px; }
    /* Отбивка от крошек 20 (в макете крошки y=158, заголовок y=194) */
    .section-title.catpage__title, .page-title.catpage__title { font-size: 32px; line-height: 40px; margin: 20px 0 20px; }
    .catpage__logo { height: 42px; vertical-align: -12px; margin-left: 8px; }
    /* <br> НЕ скрываем: display:none убирает саму возможность переноса и
       слова склеиваются («МЕТАЛЛОРЕЖУЩЕГОИНСТРУМЕНТА»). В макетах 768 и 393
       разбивка на строки такая же, как на десктопе. */
    .catfiles { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .catfile { height: 200px; }
    .catfile__ill { left: 239px; top: -73px; width: 527px; height: 331px; }
    /* Карточка ниже (200 вместо 320), у чертежей свой кадр — числа из макета
       768 (1783:8474): карточка там 720, у нас 712 (768 − 2×28), расхождение
       в 8px на глаз не читается. Оба чертежа частично уходят за правый край,
       так и в макете: у ProLine видна вершина пластины, у фрезы — режущая
       часть, а хвостовик уходит в обрез. */
    .catfile--proline .catfile__ill { left: 397px; top: -68px; width: 353px; height: 303px; }
    .catfile--axial .catfile__ill { left: 355px; top: 62px; width: 580px; height: 87px; }
    /* В макете заголовок занимает всю ширину контента карточки (672 на 768),
       длинные названия заходят на чертёж — так и задумано. */
    .catfile__title { font-size: 26px; line-height: 32px; max-width: none; }
    .catarch { padding: 40px 0; }
    .section-title.catarch__title { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
    .catarch__card { padding: 20px 30px; }
}
@media (max-width: 767px) {
    .catfiles { gap: 16px; }
    .catfile { height: 200px; padding: 24px; }
    /* Чертёж на мобиле меньше: 308×193 (в макете именно так, не масштаб 527) */
    .catfile__ill { left: 90px; top: 7px; width: 308px; height: 193px; }
    /* Числа из макета 393 (1783:8561), карточка там 361 — как у нас
       (393 − 2×16). Фреза 393×59 шире карточки и специально вылезает за оба
       края: в кадре остаётся режущая часть, хвостовик уходит в обрез. */
    .catfile--proline .catfile__ill { left: 174px; top: 5px; width: 214px; height: 184px; }
    .catfile--axial .catfile__ill { left: 166px; top: 76px; width: 393px; height: 59px; }
    .catfile__title { font-size: 20px; line-height: 24px; max-width: none; }
    .catarch__card { padding: 20px; }
    /* Стрелка к правому краю, текст в 2 строки (в макете Arrow на x=341 из 361) */
    .catarch__link { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .catarch__arrow { margin-top: 3px; }
}


/* Динамические поля из «Сервисы → Веб-формы». Сетка сохраняет сортировку
   вопросов из админки; textarea, группы вариантов и широкие поля занимают
   всю строку. */
.form__dynamic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form__dynamic-grid > .form__field--wide,
.form__dynamic-grid > .form__choice { grid-column: 1 / -1; }
.form--dealer .form__dynamic-grid > [data-field-sid="COMPANY"],
.form--dealer .form__dynamic-grid > [data-field-sid="INN"],
.form--dealer .form__dynamic-grid > [data-field-sid="CITY"],
.form--dealer .form__dynamic-grid > [data-field-container="COMPANY"],
.form--dealer .form__dynamic-grid > [data-field-container="INN"],
.form--dealer .form__dynamic-grid > [data-field-container="CITY"] { grid-column: 1 / -1; }
.form__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form__choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: #111011; }
.form__choice b { width: 100%; font-size: 14px; line-height: 16px; font-weight: 400; color: #696767; }
.form__choice label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.form__asterisk { color: var(--c-accent); }
.form__file-control { position: relative; min-height: 40px; padding: 10px 12px; border: 1px dashed #A3AFD5;
    border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: #696767; cursor: pointer; overflow: hidden; }
.form__file-control svg { width: 19px; height: 19px; flex: none; }
.form__file-control input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.form__input.is-invalid, .form__textarea.is-invalid, .form__file-control:has(input.is-invalid),
.respond__file:has(input.is-invalid) { border-color: #E03A3A !important; }

.respond__dynamic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.respond__dynamic-grid > .form__field--wide,
.respond__dynamic-grid > .form__choice { grid-column: 1 / -1; }
.respond__dynamic-grid .respond__msg { width: 100%; }

.tform__dynamic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 26px; }
.tform__dynamic-grid > .tform__group-title { grid-column: 1 / -1; margin: 12px 0 0; }
.tform__dynamic-grid > .tform__group-title:first-child { margin-top: 0; }
.tform__dynamic-grid > .form__field--wide { grid-column: 1 / -1; }
.tform__dynamic-grid > .tform__radio--wide { grid-column: span 2; }
.tform__dynamic-grid .tform__radio { padding-top: 20px; }
.tform__dynamic-grid .tform__filein { align-self: end; }

@media (max-width: 767px) {
    .form__dynamic-grid, .respond__dynamic-grid, .tform__dynamic-grid { grid-template-columns: minmax(0, 1fr); }
    .tform__dynamic-grid > .tform__group-title,
    .tform__dynamic-grid > .form__field--wide,
    .tform__dynamic-grid > .tform__radio--wide { grid-column: auto; }
}

/* End */
/* /local/templates/mrt/css/home.css?178662135351464 */
/* /local/templates/mrt/css/pages.css?1789539072200127 */