/* Start:/local/templates/mrt/css/fonts.css?1783608462883*/
/* ==========================================================================
   TT Hoves Pro — фирменный шрифт (TypeType).
   ВНИМАНИЕ: заказчиком передан только Regular (400). Начертания 500/600/700
   браузер синтезирует из Regular (faux-bold). Для точного соответствия макету
   нужны файлы Medium/DemiBold/Bold — см. design/MOCKS.md.
   ========================================================================== */
@font-face {
    font-family: "TT Hoves Pro";
    src: url("/local/templates/mrt/css/../fonts/TTHovesPro-Regular.woff2") format("woff2"),
         url("/local/templates/mrt/css/../fonts/TTHovesPro-Regular.woff") format("woff");
    font-weight: 400 700;   /* один файл на весь диапазон; bold синтезируется */
    font-style: normal;
    font-display: swap;
}

/* End */


/* Start:/local/templates/mrt/css/variables.css?17852463662879*/
/* ==========================================================================
   Дизайн-система MRT — токены (извлечены из макета по пикселям).
   ========================================================================== */
:root {
    /* --- Цвета: фоны --- */
    --c-navy-900: #05073F;   /* основной тёмно-синий фон (из Figma) */
    --c-navy-800: #0F184A;   /* карточки на тёмном */
    --c-navy-700: #131D55;   /* секции / вторичный синий */
    --c-navy-600: #1B2A6B;   /* ховеры на тёмном */
    --c-light:    #DDDDDD;   /* светло-серые секции (Figma) */
    --c-white:    #FFFFFF;

    /* --- Цвета: акценты --- */
    --c-accent:      #FF6A00;   /* оранжевый — кнопки, маркеры */
    --c-accent-600:  #E85F00;   /* оранжевый ховер */
    --c-blue:        #1245B0;   /* яркий синий — акценты/градиент */
    --c-blue-500:    #2253CF;
    --c-blue-700:    #033194;

    /* --- Цвета: текст --- */
    --c-text:        #05073B;   /* тёмный текст на светлом */
    --c-text-light:  #FFFFFF;   /* текст на тёмном */
    --c-text-muted:  #67708B;   /* приглушённый */
    --c-text-muted2: #9AA1A6;
    --c-border:      #D5D7E0;   /* границы на светлом */
    --c-border-dark: rgba(255,255,255,.15); /* границы на тёмном */

    /* --- Градиент баннеров --- */
    --grad-blue: linear-gradient(135deg, #033194 0%, #1245B0 55%, #2253CF 100%);

    /* --- Типографика --- */
    --font-base: "TT Hoves Pro", "Golos Text", "Manrope", -apple-system,
                 "Segoe UI", Roboto, Arial, sans-serif;

    /* --- Раскладка --- */
    --container: 1320px;      /* контент 1280 при боковых полях 20 (Figma: 80→1360 на кадре 1440) */
    --gutter: 20px;           /* боковые поля контейнера */
    --radius: 16px;           /* скругление карточек */
    /* 12px — во всех макетах: кнопки Primary/Button r=12, поля формы обратной
       связи r=12, поле подписки в подвале r=12. Было 10 — углы выглядели
       заметно острее, чем в дизайне. */
    --radius-sm: 12px;        /* скругление кнопок/полей */
    --header-h: 132px;        /* высота шапки (десктоп) */

    /* --- Тени --- */
    --shadow-card: 0 10px 40px rgba(5, 7, 59, .08);
}

/* Брейкпоинты (справочно, используются в media-запросах):
   desktop  >= 1280px
   tablet   768–1279px
   mobile   <= 767px
*/

/* End */


/* Start:/local/templates/mrt/css/base.css?17894720069360*/
/* ==========================================================================
   База: сброс, типографика, контейнер, кнопки
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-white);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Ссылки в тексте согласия под формами («политикой» → /policy/,
   «обработки персональных данных» → /personal-data/). Внешне неотличимы от
   остального текста: цвет наследуется, подчёркивания нет — выделяются только
   при наведении. Правило лежит в base.css, потому что текст согласия есть и в
   подвале, который выводится на всех страницах, включая главную без pages.css. */
.consent__link { color: inherit; text-decoration: none; transition: color .2s; }
.consent__link:hover { color: var(--c-accent); }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }

/* --- Контейнер --- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Заголовки секций --- */
.section-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 40px;
}

/* --- Кнопки --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
    white-space: nowrap;
}
.btn--accent { background: var(--c-accent); color: var(--c-white); }
.btn--accent:hover { background: var(--c-accent-600); }
.btn--ghost {
    background: transparent;
    color: var(--c-white);
    border: 1px solid var(--c-border-dark);
}
.btn--ghost:hover { background: rgba(255,255,255,.08); }

/* --- Утилиты --- */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Уведомления форм ---
   Элемент создаёт script.js прямо в body, поэтому он работает и на обычных
   страницах с footer, и в отдельном просмотрщике PDF без общего шаблона. */
.site-toast {
    position: fixed; z-index: 1100; right: 24px; bottom: 24px;
    width: min(420px, calc(100vw - 48px)); min-height: 56px;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px 14px 18px; border-radius: var(--radius-sm);
    color: var(--c-white); background: var(--c-navy-900);
    border-left: 4px solid var(--c-accent); box-shadow: 0 10px 30px rgba(5, 7, 59, .28);
    font-size: 16px; line-height: 20px;
}
.site-toast[hidden] { display: none; }
.site-toast--success { background: var(--c-accent); }
.site-toast--error { border-left-color: #E03A3A; }
.site-toast__text { flex: 1 1 auto; }
.site-toast__close {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0;
    border-radius: 50%; background: transparent; color: var(--c-white);
    font-size: 26px; line-height: 24px;
}
.site-toast__close:hover { background: rgba(255, 255, 255, .14); }
.site-toast__close:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .site-toast { animation: site-toast-in .2s ease-out; }
}
@keyframes site-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1279px) {
    :root {
        --gutter: 28px;
        --qlinks-safe: env(safe-area-inset-bottom, 0px);
        --qlinks-height: calc(70px + var(--qlinks-safe));
    }
    .section-title { font-size: 32px; line-height: 40px; margin-bottom: 36px; }
    /* На планшете и телефоне низ экрана занимает .qlinks. Соседним
       селектором тост не отличить: панель лежит внутри .page-wrapper,
       а тост скрипт создаёт прямо в body. Поднимаем всегда, а на странице
       просмотра каталога, где панели нет, отступ возвращает pdfview.css. */
    .site-toast { bottom: calc(var(--qlinks-height) + 16px); }
}
/* Мобайл — спек Figma 1780:90070: гаттер 16, заголовок секции 32/40,
   базовый кегль текста 16/20, кнопка h40 (паддинг 12/24, r12) */
@media (max-width: 767px) {
    :root { --gutter: 16px; }
    body { font-size: 16px; }
    .site-toast { right: 16px; width: calc(100vw - 32px); }
    .section-title { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
    /* Кнопка 40px: 10 + 20 (line-height) + 10. Без фиксированной height —
       иначе ломаются кнопки с переносом текста и варианты h44 («Подробнее»). */
    .btn { padding: 10px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; min-height: 40px; }
}

/* --- Зафиксированные кнопки на всех страницах (Figma 1471:91545) --- */
.fabs { position: fixed; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.fabs--left  { left: 0; }
.fabs--right { right: 0; }
.fabs__btn img { width: 55px; height: 55px; display: block; }
.fabs__btn { display: block; cursor: default; transition: opacity .2s; }

/* Выезжающая кнопка (Figma ix60rZFbGiwzv1CujV7uy0 173:22812/22985/23037):
   в покое — квадрат 55×55 с иконкой, приклеен к левому краю (левый угол прямой);
   при ховере расширяется вправо и показывает подпись. */
.fab { position: relative; display: flex; align-items: center; height: 55px; width: 55px;
    padding: 8px 10px; gap: 8px; overflow: hidden; white-space: nowrap;
    background: #FF6A00; border-radius: 0 8px 8px 0; color: #fff;
    transition: width .28s cubic-bezier(.22,.61,.36,1); }
.fab__ic { flex: 0 0 auto; width: 35px; display: flex; align-items: center; justify-content: center; }
.fab__ic img { width: auto; height: auto; max-width: 35px; max-height: 40px; display: block; }
.fab__label { flex: 0 0 auto; font-size: 14px; line-height: 16.8px; font-weight: 400; color: #fff;
    opacity: 0; transition: opacity .22s ease .04s; }
/* Развёрнутая ширина у каждой кнопки своя — под длину подписи (замер макета) */
.fabs--left .fab:nth-child(1):hover, .fabs--left .fab:nth-child(1):focus-visible { width: 218px; }
.fabs--left .fab:nth-child(2):hover, .fabs--left .fab:nth-child(2):focus-visible { width: 206px; }
.fabs--left .fab:nth-child(3):hover, .fabs--left .fab:nth-child(3):focus-visible { width: 184px; }
.fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; }

/* --- Fixed_Bottom_Bar: замена левой колонки на планшете/мобиле (Figma 1502:46123) --- */
.qlinks { display: none; }
@media (max-width: 1279px) {
    .fabs--left { display: none; }
    .qlinks {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: flex; align-items: center; justify-content: center; gap: 154px;
        height: var(--qlinks-height); padding: 10px 16px calc(10px + var(--qlinks-safe));
        border-radius: 12px 12px 0 0;
        background: linear-gradient(90deg, #05073F 0%, #062675 100%);
    }
    .qlinks a { display: flex; align-items: center; gap: 8px; color: #919DC1; font-size: 12px; line-height: 14px; }
    .qlinks a:hover { color: var(--c-accent); }
    .qlinks img { width: 32px; height: 32px; flex: none; }
    /* Резерв под закреплённую полосу (70px), чтобы она не перекрывала низ
       футера при прокрутке до упора. Селектор из двух классов обязателен:
       в footer.css ниже по загрузке стоит `.footer__bottom { padding: 0 }`
       и одиночный класс он перебивал — отступ не работал вовсе. */
    .footer .footer__bottom { padding-bottom: calc(60px + var(--qlinks-safe)); }
}
@media (max-width: 767px) {
    .qlinks { justify-content: space-between; gap: 8px; }
}

/* End */


/* Start:/local/templates/mrt/css/header.css?178531979215665*/
/* ==========================================================================
   Шапка — точный спек Figma (кадр 1440, контент 80→1360, header h=138)
   ========================================================================== */
.header { position: sticky; top: 0; z-index: 100; background: var(--c-navy-900); color: var(--c-text-light); }

/* --- Верхняя строка: 84px + линия-разделитель под ней (Figma 1780:80360) --- */
.header__top { position: relative; display: flex; align-items: center; gap: 16px; height: 84px;
    border-bottom: 1px solid rgba(255,255,255,.2); }
.header__logo { flex: 0 0 auto; display: block; }
.header__logo img { height: 51px; width: auto; display: block; }

/* Центральный бренд MRT (по центру контейнера) */
.header__brand { position: absolute; left: 50%; top: 0; height: 84px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.header__brand img { height: 30px; width: auto; display: block; }
.header__brand-sub { font-size: 16px; line-height: 20px; color: var(--c-white); margin-top: 1px; }

/* Контакты (редактируемая область) */
.header__contacts { margin-left: auto; display: flex; flex-direction: column; gap: 2px; }
.header__phone, .header__email { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 20px; color: var(--c-white); }
.header__phone img, .header__email img { width: 14px; height: 14px; display: block; }
.header__phone:hover, .header__email:hover { color: var(--c-accent); }

/* Соцсети — 24×24 (оранжевый квадрат встроен в SVG) */
.header__socials { display: flex; gap: 6px; }
.header__socials img { width: 24px; height: 24px; display: block; }
.header__socials a:hover { opacity: .85; }

/* Кнопка «Кабинет Дилера» — белая, r=12 */
/* Кнопка-плашка без перехода (страница «Кабинет дилера» пока не подключена) */
.header__cabinet { flex: 0 0 auto; height: 40px; padding: 0 24px; display: inline-flex; align-items: center;
    background: #F3F3F3; color: #111011; border-radius: 12px; font-size: 16px; font-weight: 400; cursor: default; }

/* --- Навигация: 54px --- */
.header__navrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 54px; }
.header__nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: 38px; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 400; color: #D9D9D9; transition: color .2s; }
.nav__link:hover, .nav__item--active > .nav__link { color: var(--c-accent); }
.nav__caret { opacity: .8; transition: transform .2s; }

/* --- Выпадающее подменю --- */
.nav__item { position: relative; }
.nav__item--parent > .nav__link { padding-bottom: 18px; margin-bottom: -18px; }
.nav__sub {
    position: absolute; top: calc(100% + 16px); left: -20px; z-index: 120;
    min-width: 240px; padding: 10px 0;
    background: var(--c-navy-800); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(2, 3, 30, .45);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__item--parent:hover > .nav__sub,
.nav__item--parent:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__item--parent:hover > .nav__link .nav__caret,
.nav__item--parent:focus-within > .nav__link .nav__caret { transform: rotate(180deg); }
.nav__sub-item a {
    display: block; padding: 10px 20px;
    font-size: 15px; line-height: 20px; color: #D9D9D9;
    transition: color .15s, background-color .15s;
}
.nav__sub-item a:hover, .nav__sub-item.is-active a { color: var(--c-accent); background: rgba(255,255,255,.04); }

/* Поиск — без рамки: «Поиск» слева + лупа справа */
/* Поиск — с линией-подчёркиванием (Figma 1780:80360) */
/* 344 вместо макетных 422: пункт меню «MRT» переименован в «Инструмент MRT»,
   меню стало шире на ~78px и зазор до строки поиска съёжился с ~145 до 67.
   Сузили поиск ровно на прирост меню — расстояние от «Контактов» до поля
   вернулось к прежнему. */
.header__search { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: 344px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.35); }
.header__search input { flex: 1 1 auto; min-width: 0; background: none; border: none; outline: none; color: var(--c-white); font-size: 16px; font-family: inherit; }
.header__search input::placeholder { color: #D9D9D9; }
.header__search button { background: none; border: none; padding: 0; display: flex; align-items: center; }
.header__search button img { width: 24px; height: 24px; display: block; }

/* --- Бургер (только мобайл) --- */
.header__burger { display: none; background: none; border: none; color: var(--c-white); width: 44px; height: 44px; align-items: center; justify-content: center; }
.header__menu-extra { display: none; }
.header__burger span, .header__burger span::before, .header__burger span::after { content: ""; display: block; position: relative; width: 24px; height: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.header__burger span::before { position: absolute; top: -7px; }
.header__burger span::after  { position: absolute; top: 7px; }

/* Десктоп: у «Каталога» нет выпадашки (подпункты только в мобильном меню, Figma 1780:94589) */
@media (min-width: 1280px) {
    .nav__item--parent:has(> .nav__link[href="/products/"]) .nav__sub,
    .nav__item--parent:has(> .nav__link[href="/products/"]) .nav__caret { display: none; }
}

/* ==========================================================================
   Планшет + мобайл: бургер, бренд MRT в центре, строка поиска (Figma 1780:303380)
   ========================================================================== */
@media (max-width: 1279px) {
    .header__top { gap: 14px; position: relative; z-index: 95; }
    .header__contacts, .header__socials { display: none; }
    /* Бургер — крайний справа (Figma 1780:85720); кнопка кабинета, если включена, — слева от него */
    .header__burger { display: flex; margin-left: auto; }
    .header__cabinet { margin-left: auto; }
    .header__cabinet + .header__burger { margin-left: 0; }

    /* Меню — полноэкранная панель (Figma 1780:94589).
       Ширина строго по вьюпорту, а уезжает панель через transform: с
       `width:100%; right:-100%` у fixed-элемента проценты считаются от
       initial containing block, который сам растёт от этого сдвига —
       страница получала горизонтальный скролл (documentElement 509px). */
    .header__navrow { display: block; height: auto; }
    /* Панель всегда на месте (left/right: 0) — за край экрана не уезжает,
       поэтому горизонтального скролла не создаёт. В покое скрыта через
       visibility + сдвиг внутрь себя, а не отрицательным right. */
    /* Панель начинается ПОД строкой логотипа (84px + линия), а не от top: 0.
       Раньше она лежала под всей шапкой: строка с логотипом и брендом MRT
       выше по z-индексу (95 против 90), но фон у неё прозрачный, и при
       прокрутке меню пункты проезжали прямо сквозь логотип. Гасить это
       подложкой не стали — проще не пускать панель под строку вообще. */
    .header__nav { position: fixed; top: 84px; left: 0; right: 0; width: auto; max-width: none;
        height: calc(100vh - 84px);
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        padding: 46px 16px 32px; background: var(--c-navy-900);
        visibility: hidden; opacity: 0; transform: translateX(24px);
        transition: opacity .28s ease, transform .28s ease, visibility 0s .28s;
        overflow-y: auto; overflow-x: hidden; z-index: 90;
        /* Страховка от «фантомных» кликов: даже если какой-то потомок
           перебьёт унаследованный visibility, хит-тест сюда не дойдёт. */
        pointer-events: none; }
    .header.is-menu-open .header__nav { visibility: visible; opacity: 1; transform: translateX(0);
        transition: opacity .28s ease, transform .28s ease, visibility 0s 0s;
        pointer-events: auto; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__item { border-bottom: 1px solid rgba(255,255,255,.14); padding: 6px 0 12px; }
    .nav__item:first-child { padding-top: 0; }
    .nav__link { display: flex; padding: 6px 0; border: none; justify-content: space-between; color: #fff; }
    .nav__item--parent > .nav__link { padding-bottom: 6px; margin-bottom: 0; }
    .nav__caret { display: none; }
    /* Подменю раскрыто в потоке. visibility НЕ ставим в visible безусловно:
       это единственное наследуемое свойство, которое потомок может перебить,
       и пункты подменю оставались в хит-тесте у закрытой панели — по ним
       можно было случайно кликнуть на прозрачном фоне. Показываем только
       вместе с открытым меню, в покое наследуем hidden от .header__nav. */
    .nav__sub { position: static; opacity: 1; transform: none;
        min-width: 0; padding: 0 0 0 20px; background: none; box-shadow: none; border-radius: 0; }
    .header.is-menu-open .nav__sub { visibility: visible; }
    .nav__sub::before { display: none; }
    .nav__sub-item a { padding: 2px 0; border: none; color: #919DC1; }
    .nav__sub-item a:hover, .nav__sub-item.is-active a { background: none; }
    .header.is-menu-open .header__burger span { background: transparent; }
    .header.is-menu-open .header__burger span::before { transform: rotate(45deg) translate(5px, 5px); }
    .header.is-menu-open .header__burger span::after  { transform: rotate(-45deg) translate(5px, -5px); }

    /* Низ меню: кабинет, контакты, соцсети, консультация */
    .header__menu-extra { display: block; margin-top: 24px; }
    .header__menu-cabinet { display: inline-flex; align-items: center; height: 40px; padding: 0 24px; background: #F3F3F3; color: #111011; border-radius: 12px; font-size: 16px; }
    .header__menu-contacts { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 24px 0; }
    .header__menu-links { display: flex; flex-direction: column; gap: 10px; }
    .header__menu-links a { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; }
    .header__menu-links svg { width: 16px; height: 16px; color: var(--c-accent); flex: none; }
    .header__menu-socials { display: flex; gap: 6px; }
    .header__menu-socials img { width: 24px; height: 24px; display: block; }
    .header__menu-consult { width: 100%; justify-content: center; display: flex; }

    /* Поиск — отдельная строка под шапкой, с линией-подчёркиванием (Figma 1780:85720) */
    .header__search { width: 100%; height: 46px; padding-bottom: 0;
        border-top: none; border-bottom: 1px solid rgba(255,255,255,.35); }
}

/* ==========================================================================
   Мобайл — точный спек Figma 1780:90070 (кадр 393):
   header 138 = верхняя строка 68 (+8 сверху) + строка навигации 54 (пад. 15/15)
   ========================================================================== */
@media (max-width: 767px) {
    /* Отбивку 8px даём паддингом самой шапки, а не margin-top у строки:
       margin сдвигал вниз всю sticky-шапку и над ней светилась белая
       подложка страницы. Внутренний паддинг остаётся тёмным.
       Итого высота 138 = 8 + 68 (верхняя строка) + 54 (поиск) + 8. */
    .header { padding-top: 8px; padding-bottom: 8px; }
    /* Верхняя строка: 68px, линия-разделитель #919DC1 */
    .header__top { height: 68px; margin-top: 0; gap: 12px;
        border-bottom-color: #919DC1; }
    /* Логотип НПФ — 72.9×21.7 (замер макета) */
    .header__logo img { height: 22px; }
    .header__cabinet { display: none; }
    /* Бренд MRT по центру: лого 58.8×26.5 + подпись 14.4/17.1 */
    .header__brand { height: 68px; }
    .header__brand img { height: 26px; }
    .header__brand-sub { font-size: 14px; line-height: 17px; white-space: nowrap; }
    /* Бургер 34×34, прижат к правому краю контента (x=343 при гаттере 16).
       Селектор с соседним комбинатором обязателен: планшетное правило
       `.header__cabinet + .header__burger { margin-left: 0 }` специфичнее
       одиночного класса и матчится даже при display:none у кабинета —
       из-за него бургер стоял вплотную к логотипу. */
    .header__cabinet + .header__burger,
    .header__burger { margin-left: auto; width: 34px; height: 34px; flex: 0 0 auto; }
    .header__burger span, .header__burger span::before, .header__burger span::after { width: 22px; }

    /* Строка поиска: паддинги 15/15 внутри строки 54px, линия #A3AFD5 —
       отбивка от видео ниже, подчёркивание не «прилипает» (Figma 1780:90072) */
    .header__navrow { padding: 15px 0; }
    .header__search { height: 24px; padding-bottom: 0; gap: 8px;
        border-bottom-color: #A3AFD5; }
    .header__search input { font-size: 16px; line-height: 20px; }
    .header__search button img { width: 24px; height: 24px; }
    /* Меню открывается сразу под верхней строкой шапки (8 + 68 = 76px).
       Панель стоит ниже строки, а не под ней — иначе при прокрутке меню
       пункты видны сквозь логотип (см. комментарий в блоке 1279). */
    .header__nav { top: 76px; height: calc(100vh - 76px); padding-top: 16px; }
}

/* End */


/* Start:/local/templates/mrt/css/footer.css?179076848410030*/
/* ==========================================================================
   Подвал (pixel-perfect по макету)
   ========================================================================== */
/* Футер 416: padTop 30 + контент 305 + отбивка 31 + низ 20 + padBot 30 (Figma 1471:96101) */
.footer { background: var(--c-navy-900); color: var(--c-text-light); padding: 30px 0; }
.footer__main { display: grid; grid-template-columns: 1.35fr 2fr 1.25fr; gap: 48px; padding-bottom: 31px; }

.ext-arrow { display: inline-block; vertical-align: middle; color: var(--c-accent); }

/* Бренд / Company Info (Figma 1471:96101: телефон, почта, адрес — все 16/20 белые,
   иконки 14×14, зазоры 24/14/14, соцсети 24×24 r4 через 6px) */
/* Логотип тот же, что в шапке: 164×51 в собственных пропорциях. Подпись
   «научно-производственная фирма» входит в SVG, отдельной строки под ним
   больше нет — отбивку до контактов (было 24) держим здесь. */
.footer__logo { display: block; margin-bottom: 24px; }
.footer__logo img { width: 164px; height: 51px; }
.footer__contacts { display: flex; flex-direction: column; gap: 14px; }
.footer__phone, .footer__email, .footer__addr { display: flex; align-items: flex-start; gap: 7px;
    font-size: 16px; line-height: 20px; font-weight: 400; color: #fff; }
.footer__phone svg, .footer__email svg, .footer__addr svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--c-accent); margin-top: 3px; }
.footer__phone:hover, .footer__email:hover { color: var(--c-accent); }
.footer__socials-title { font-size: 16px; line-height: 20px; color: #fff; margin: 24px 0 10px; }
.footer__socials { display: flex; gap: 6px; }
.footer__socials a { width: 24px; height: 24px; display: block; border-radius: 4px; overflow: hidden; transition: opacity .2s; }
.footer__socials a:hover { opacity: .85; }
.footer__socials img { width: 24px; height: 24px; display: block; }

/* Кнопка «наверх»: 55×55 у правого края, оранжевая (Figma 1471:96101) */
.footer { position: relative; }
.footer__totop { position: absolute; right: 0; bottom: 46px; z-index: 5; margin-right: 0;
    width: 55px; height: 55px; padding: 0; border: none; cursor: pointer;
    background: var(--c-accent); display: flex; align-items: center; justify-content: center;
    transition: background-color .2s; }
.footer__totop:hover { background: var(--c-accent-600); }
.footer__totop img { width: 8px; height: 35px; max-width: none; display: block; }

/* На десктопе кнопка закреплена в правом нижнем углу окна и едет вместе
   со скроллом всей страницы; клик по-прежнему плавно ведёт наверх
   (data-totop в script.js). У флаша правого края, под кнопкой
   «Получить консультацию» в hero главной — они не пересекаются:
   у hero-кнопки низ заметно выше. Ниже 1280px кнопка остаётся в подвале. */
@media (min-width: 1280px) {
    .footer__totop { position: fixed; right: 0; bottom: 0; }
}

/* Колонки меню: 6 колонок в ряд (Figma 1780:84925) */
.footer__nav { display: flex; gap: 20px; justify-content: space-between; }
.footer__col { display: flex; flex-direction: column; }
.footer__col-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: block; white-space: nowrap; }
.footer__col-title:hover { color: var(--c-accent); }
.footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.footer__col ul a { font-size: 14px; color: var(--c-text-muted2); transition: color .2s; }
.footer__col ul a:hover { color: var(--c-accent); }

/* Подписка */
.footer__subscribe-title { font-size: 15px; font-weight: 600; text-transform: uppercase; line-height: 1.4; margin-bottom: 18px; }
.footer__form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.footer__form input { width: 100%; padding: 14px 16px; background: rgba(255,255,255,.06); border: 1px solid var(--c-border-dark); border-radius: var(--radius-sm); color: var(--c-white); font-size: 14px; }
.footer__form input::placeholder { color: var(--c-text-muted2); }
.footer__form input:focus { outline: none; border-color: var(--c-accent); }
.footer__form .btn { align-self: flex-start; }
.footer__consent { font-size: 12px; color: var(--c-text-muted2); line-height: 1.45; margin-bottom: 18px; }
.footer__maps { font-size: 14px; color: var(--c-text-light); }
.footer__maps:hover { color: var(--c-accent); }

/* Нижняя строка */
/* Нижняя строка: 20px, 16/20, без разделителя и доп. отступов (Figma 1471:96101) */
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 0; font-size: 16px; line-height: 20px; color: #919DC1; }
.footer__policy { display: flex; gap: 40px; }
.footer__policy a:hover { color: var(--c-white); }

/* --- Планшет и мобильный: короткий подвал (Figma 375:7067) ---
   На узких экранах в макете подвал сокращён до необходимого: остаются
   контакты, шесть названий разделов и нижняя строка. Подпункты разделов
   и блок подписки скрыты — из-за них подвал занимал 1004px на планшете
   и 1370px на мобиле вместо 437 и 516 по макету, то есть до полутора
   экранов прокрутки. Подписка на узких экранах доступна не будет: в
   макете её нет ни на планшете, ни на мобиле. */
@media (max-width: 1279px) {
    .footer__col ul,
    .footer__policy-ads,
    .footer__subscribe { display: none; }
    /* Ссылка на Яндекс Карты живёт в блоке подписки, но в макете узких
       экранов её тоже нет — прячется вместе с ним. */

    .footer { padding: 40px 0; }
    .footer__main { grid-template-columns: 245px auto; gap: 100px;
        justify-content: start; padding-bottom: 20px;
        border-bottom: 1px solid rgba(163,175,213,.4); }
    /* Логотип на узких экранах мельче — 137×42 против 164×51 (Figma
       475:13615), пропорции те же. */
    .footer__logo { margin-bottom: 24px; }
    .footer__logo img { width: 137px; height: 42px; }
    .footer__contacts { gap: 16px; }
    /* Названия разделов — столбцом справа от контактов, шаг 32px:
       в макете это одна колонка, а не сетка (Figma 475:13615). */
    .footer__nav { flex-direction: column; gap: 32px; justify-content: flex-start; }
    .footer__col-title { margin-bottom: 0; font-size: 16px; font-weight: 400;
        line-height: 20px; color: var(--c-text-muted2); }
    .footer__col--company .footer__col-title { color: #fff; }
    .footer__bottom { flex-direction: column; align-items: center; gap: 13px;
        padding-top: 12px; text-align: center; }
    .footer__policy { gap: 33px; }
    /* Кнопка «наверх» поднята на высоту закреплённой полосы (70px), иначе
       при прокрутке до упора она наполовину уходила под неё. */
    .footer__totop { bottom: 116px; }
}
/* Мобильный (Figma 375:7066): всё в столбец, названия разделов — сетка
   3×2, нижняя строка по центру */
@media (max-width: 767px) {
    .footer { padding: 30px 0; }
    .footer__main { display: flex; flex-direction: column; gap: 28px;
        padding-bottom: 18px; border-bottom: 0; }
    .footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%; min-width: 0; gap: 13px 12px; }
    /* Порядок колонок по макету:
       ряд 1 — О компании / Каталог / Инжиниринг,
       ряд 2 — MRT / Центр покрытий / Контакты.
       В разметке MRT и Центр покрытий идут раньше Инжиниринга, поэтому
       переставляем через order, не меняя HTML (он верен для десктопа). */
    .footer__col--company  { order: 1; }
    .footer__col--catalog  { order: 2; }
    .footer__col--eng      { order: 3; }
    .footer__col--mrt      { order: 4; }
    .footer__col--pvd      { order: 5; }
    .footer__col--contacts { order: 6; }
    /* Нулевой минимум колонок не даёт длинным названиям расширять сетку
       за пределы контейнера; текст переносится внутри своей трети. */
    .footer__col { min-width: 0; }
    .footer__col-title { min-width: 0; max-width: 100%; white-space: normal;
        overflow-wrap: anywhere; }
    /* На мобиле «О компании» такое же приглушённое, как остальные
       (в отличие от планшета, где оно белое). */
    .footer__col--company .footer__col-title { color: var(--c-text-muted2); }
    .footer__policy { flex-direction: column; gap: 10px; align-items: center; }
    /* 14px от последнего раздела до копирайта (Figma 375:7066): разделителя
       на мобиле нет, и без отбивки строки слипались. */
    .footer__bottom { padding-top: 14px; gap: 10px; }
}

/* End */


/* Start:/local/templates/mrt/css/modal.css?178893843713146*/
/* ==========================================================================
   Модальное окно «Получить консультацию»
   ========================================================================== */
.modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 59, .55);
}
.modal.is-open { display: flex; }

/* Диалог 628×432, r24, паддинги 40/80 — замер макета
   (Modal / Sent Contact: 628x432 r24 pad 40/80, контейнер внутри 468px) */
.modal__dialog {
    position: relative;
    width: 100%; max-width: 628px;
    background: var(--c-white); color: var(--c-text);
    border-radius: 24px;
    padding: 40px 80px;
    box-shadow: var(--shadow-card);
}
/* Крестик 14×14 #9B9B9B в правом верхнем углу (@591,24 при ширине 628) */
.modal__close {
    position: absolute; top: 24px; right: 23px;
    width: 14px; height: 14px;
    background: none; border: none; padding: 0; color: #9B9B9B;
    display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { color: var(--c-text); }
.modal__close svg { width: 14px; height: 14px; }

/* Заголовок 20/24 UPPER #111011, подпись 16/20 тем же цветом,
   отбивка заголовок→подпись 0, подпись→поля 12px (замер макета 1024:48865) */
.modal__title { font-size: 20px; line-height: 24px; font-weight: 400; text-transform: uppercase;
    color: #111011; margin-bottom: 0; }
.modal__subtitle { font-size: 16px; line-height: 20px; color: #111011; margin-bottom: 12px; }

/* Поля h40, r12, обводка #A3AFD5, плейсхолдер #686666, паддинг 10/12.
   Между собой поля идут через 10 (Input_forms), а группа полей, согласия
   и кнопка — через 8 (Input gap): отсюда две вложенные обёртки. */
.modal .form { gap: 8px; }
.modal .form__fields { display: flex; flex-direction: column; gap: 10px; }
.modal .form__input {
    height: 40px; padding: 10px 12px;
    background: var(--c-white);
    border: 1px solid #A3AFD5; border-radius: 12px;
    color: var(--c-text); font-size: 16px; line-height: 20px;
}
.modal .form__input::placeholder { color: #686666; }
.modal .form__input:focus { border-color: var(--c-accent); }

/* Чекбоксы согласий: 16×16 r4 обводка #A3AFD5, подпись 12/14 #111011,
   строки через 8 (Figma 1024:48865).
   Дубль правил из pages.css: модалки рисует подвал на всех страницах,
   а pages.css грузят не все (например, просмотр каталога). */
.modal .consents { display: flex; flex-direction: column; gap: 8px; }
.modal .consent { display: flex; align-items: flex-start; gap: 8px; }
.modal .consent__label { font-size: 12px; line-height: 14px; color: #111011; cursor: pointer; }
.modal .consent__label .consent__link { text-decoration: underline; }
.modal .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;
}
.modal .consent__box:checked { background: var(--c-accent); border-color: var(--c-accent); }
.modal .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);
}
.modal .consent__box.is-invalid { border-color: #E03A3A; }
/* Кнопка h40 r12 на всю ширину */
.modal .btn--accent { width: 100%; min-height: 40px; height: 40px; padding: 10px 24px; border-radius: 12px;
    font-size: 16px; line-height: 20px; }

/* --- Модалка баннера «Как стать нашим дилером?» (Figma 1535:141229) ---
   Диалог той же ширины 628, но выше (549) и с паддингом 48 сверху/снизу:
   полей шесть плюс три согласия. Шаг полей 12 (в короткой модалке 10),
   парные поля раскладывает .form__row из pages.css. */
.modal--dealer .modal__dialog { padding: 48px 80px; }
/* Заголовок → подпись 7 (в короткой модалке 0), подпись → поля 18 (там 12) */
.modal--dealer .modal__title { margin-bottom: 7px; }
.modal--dealer .modal__subtitle { margin-bottom: 18px; }
.modal--dealer .form { gap: 12px; }
/* Кнопка здесь по содержимому 124×40 и прижата влево — как в форме
   «Готовы стать партнёром?» внизу страницы /dealer/, а не на всю ширину */
.modal--dealer .btn--accent { align-self: flex-start; width: auto; }
/* Две колонки по 228 с зазором 12: «Имя/Телефон» и «Email/Регион» */
.modal--dealer .form__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.modal--dealer .form__col { display: flex; flex-direction: column; gap: 12px; }
/* Вид чекбоксов общий (см. .modal .consent* выше), здесь шире шаг строк */
.modal--dealer .consents { gap: 12px; }

/* --- Модалка «Получить консультацию» на страницах инжиниринга (Figma 1921:140622) ---
   Ширина та же 628, высота 584: полей шесть (последнее — текстовая область)
   плюс три согласия. Подписи под заголовком в макете нет, поэтому отбивку
   Container gap=12 берёт на себя сам заголовок. */
.modal--eng .modal__title { margin-bottom: 12px; }
/* Текстовая область: h50 (две строки), тянется только по вертикали.
   Общее правило .modal .form__input задаёт height:40px — перебиваем. */
.modal--eng .form__textarea { height: 50px; min-height: 50px; resize: vertical; font-family: inherit; }

/* Планшет (Figma 1780:220233): та же ширина 628, но паддинги 40/48 */
@media (max-width: 1279px) {
    .modal__dialog { padding: 40px 48px; }
    /* Планшетный вариант формы инжиниринга шире — 720×560 (Figma 1921:140636) */
    .modal--eng .modal__dialog { max-width: 720px; }
    /* Планшетный вариант дилерской модалки шире (720×533, паддинги 40/48),
       кнопка растянута на всю ширину — Figma 1538:37662 */
    .modal--dealer .modal__dialog { max-width: 720px; padding: 40px 48px; }
    .modal--dealer .btn--accent { align-self: stretch; width: 100%;
        display: flex; align-items: center; justify-content: center; }
}
/* Мобайл (Figma 1780:220243): 361 в ширину, паддинги 24/16.
   Кегли не меняем — в макете те же 20/24 и 16/20. */
@media (max-width: 767px) {
    /* Поле подложки 16, как гаттер страницы: при 20 карточка на 393 выходила
       353 вместо макетных 361 (макеты модалок 1780:285490 и др.). */
    .modal { padding: 16px; }
    .modal__dialog { max-width: 361px; padding: 24px 16px; border-radius: 24px; }
    .modal__close { top: 16px; right: 16px; }
    /* Дилерская модалка на мобильном (Figma 1538:37693): 361×625, паддинги
       24/16, поля в один столбик Имя → Телефон → Email → Регион.
       Колонки распрямляем в общий поток — grid из одной колонки со своим
       зазором сохранил бы 12 между полями и добавил лишние 12 между парами. */
    .modal--dealer .modal__dialog { max-width: 361px; padding: 24px 16px; }
    .modal--dealer .form__cols { display: contents; }
    .modal--dealer .form__col { display: contents; }
}

/* ==========================================================================
   Просмотр фотографии во весь экран (мобильная версия)
   ========================================================================== */
/* Курсор-лупа только там, где тап реально открывает просмотр, — на мобиле */
@media (max-width: 767px) {
    .is-zoomable { cursor: zoom-in; }
}
.modal--photo { background: rgba(5, 7, 63, .92); padding: 0; }
/* Общие правила .modal__dialog (белый фон, паддинги, ширина 361 на мобиле)
   тут не нужны: диалог — это сама фотография.
   Диалог по размеру снимка, а не во весь экран: тогда тёмное поле вокруг —
   это подложка .modal, и тап по нему закрывает просмотр (общий обработчик
   в script.js закрывает по клику мимо диалога). */
.modal--photo .modal__dialog--photo {
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    background: none; box-shadow: none; border-radius: 0;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.modal--photo img[data-photo-img] {
    display: block;
    max-width: 100%; max-height: 100vh;
    /* contain, а не cover: фотографию смотрят целиком, обрезать нельзя */
    object-fit: contain;
    /* разрешаем «щипок» для увеличения поверх полноэкранного просмотра */
    touch-action: pinch-zoom;
}
/* Крестик поверх снимка: белый, с подложкой — иначе теряется на светлом фото.
   Привязан к экрану, а не к диалогу: диалог теперь по размеру фотографии. */
.modal--photo .modal__close {
    position: fixed;
    top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(5, 7, 63, .55); color: #fff;
    z-index: 1;
}
.modal--photo .modal__close svg { width: 18px; height: 18px; }


/* Поля, которые renderer строит из активной веб-формы Битрикса. */
.modal .form__dynamic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.modal .form__dynamic-grid > .form__field--wide,
.modal .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; }
.modal .form__textarea { width: 100%; padding: 10px 12px; background: var(--c-white);
    border: 1px solid #A3AFD5; border-radius: 12px; color: var(--c-text);
    font: inherit; font-size: 16px; line-height: 20px; }
.modal .form__choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: #111011; }
.modal .form__choice b { width: 100%; font-size: 14px; font-weight: 400; color: #696767; }
.modal .form__choice label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.modal .form__file-control { position: relative; min-height: 40px; padding: 10px 12px;
    border: 1px dashed #A3AFD5; border-radius: 12px; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; color: #696767; cursor: pointer; overflow: hidden; }
.modal .form__file-control svg { width: 19px; height: 19px; flex: none; }
.modal .form__file-control input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.modal .form__asterisk { color: var(--c-accent); }
.modal .form__required-field { position: relative; min-width: 0; }
.modal .form__required-placeholder { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #696767; font-size: 16px; line-height: 20px; pointer-events: none; }
.modal .form__required-placeholder span { color: var(--c-accent); }
.modal .form__required-field .form__input:focus + .form__required-placeholder,
.modal .form__required-field .form__input:not(:placeholder-shown) + .form__required-placeholder { display: none; }
.modal .form__input.is-invalid, .modal .form__textarea.is-invalid,
.modal .form__file-control:has(input.is-invalid) { border-color: #E03A3A; }
@media (max-width: 767px) {
    .modal .form__dynamic-grid { grid-template-columns: minmax(0, 1fr); }
}

/* End */
/* /local/templates/mrt/css/fonts.css?1783608462883 */
/* /local/templates/mrt/css/variables.css?17852463662879 */
/* /local/templates/mrt/css/base.css?17894720069360 */
/* /local/templates/mrt/css/header.css?178531979215665 */
/* /local/templates/mrt/css/footer.css?179076848410030 */
/* /local/templates/mrt/css/modal.css?178893843713146 */