@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
@import url('/assets/css/color.css');
:root {
    --site-font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
    --type-xs: 12px;
    --type-sm: 13px;
    --type-nav: 14px;
    --type-body: 16px;
    --type-lead: clamp(16px, 1.2vw, 18px);
    --type-card-title: clamp(18px, 1.35vw, 20px);
    --type-section-title: clamp(24px, 2.2vw, 32px);
    --type-page-title: clamp(32px, 3vw, 40px);
    --type-display-title: clamp(42px, 4.4vw, 56px);
    --line-body: 1.64;
}

body {
     font-family: var(--site-font-family);
    margin: 0;
    padding: 0;
   
    font-size: clamp(14px, 2vw, 15px); /* Адаптивный шрифт для основного текста */
    transition: margin-top 0.5s ease-in-out; /* Плавное изменение отступа */

}
html, body {
    overflow-x: hidden; /* Отключаем горизонтальный скролл */
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box; /* Учет отступов и бордеров */
}
/* Шапка и навигация */
header {


    white-space: nowrap; /* Запрещаем перенос строк */
    width: 100%;
    padding: 0;
    border-bottom: 1px solid transparent;
    z-index: 1000; /* Высокий z-index, чтобы шапка была поверх других элементов */
    display: flex; /* Используем Flexbox */
    align-items: center; /* Выравнивание элементов по вертикали */
    justify-content: space-between; /* Распределение элементов по краям */
}

.Rex {
    height: 0px; /* ДОБАВЛЕНО: уменьшено с 180px */
    position: relative;
}



header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto; /* Центрируем контейнер */
    width: 100%;
      height: 100px;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: auto; /* Логотип слева */
    flex-shrink: 0; /* Логотип не сжимается */
    padding-left: 20px; /* Добавьте отступ, если необходимо отодвинуть от левого края */
}

.logo-icon {
    width: 100px; /* Размер значка */
    height: 63px;
    margin-right: 10px; /* Отступ между значком и текстом */
}


.nav-list {
    list-style: none;
    padding: 0;
    display: flex; /* Убедитесь, что элементы отображаются в строку */
    justify-content: flex-start; /* Выравнивание элементов по левому краю */
    margin: 0;
    z-index: 10;
    white-space: nowrap; /* Запрещает перенос текста */
    flex-wrap: nowrap; /* Запрещает перенос элементов */

}
.navbar {
   
}
.nav-list li {
    margin: 0 15px; /* Отступы между элементами */
    flex: 1 1 auto;
    list-style: none;
}

.nav-list li a {
    position: relative; /* Для правильного позиционирования */
  
    text-decoration: none;
    font-size: clamp(16px, 2vw, 20px) !important; /* Увеличенный базовый размер шрифта */
    transition:
        background-color 0.3s,
        color 0.3s; /* Плавный переход цвета */

    display: block;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 15px 0px;
}

/* Псевдоэлемент для белой полоски прямо под текстом основного меню */
.nav-list > li > a::after {
    content: ""; /* Пустое содержимое */
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Центрируем относительно текста */
    bottom: 12px; /* Расположено ближе к тексту */
    height: 2px; /* Толщина полоски */
 
    transition: transform 0.3s ease; /* Плавный переход для анимации */
    transform: translateX(-50%) scaleX(0); /* Центрирование и уменьшение ширины до 0 */
}

.nav-list > li > a:hover::after {
    transform: translateX(-50%) scaleX(1); /* Полоска расширяется до ширины текста */
}

/* Эффект при наведении */
.nav-list li a:hover::after {
    width: 100%; /* Полоска занимает 60% ширины текста при наведении */
background-color: var(--color-accent-soft); /* Светло-голубой фон */
    color: var(--color-text); /* Тёмно-синий текст */
    border-radius: 5px; /* Скругление углов */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-item {
    position: relative; /* Добавляем относительное позиционирование к элементу навигации */
}

.nav-item > a.active {
    text-decoration: underline; /* Подчеркивание */
    text-decoration-thickness:2px; /* Толщина подчеркивания уменьшена до 1px */
    text-underline-offset: 5px; /* Отступ подчеркивания снизу увеличен до 6px */
text-decoration-color: rgba(168, 216, 248, 0.59); /* Цвет подчеркивания (светло-голубой) */


}

.nav-item > a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px; /* Толщина подчеркивания уменьшена до 1px */
   
    left: 0;
    bottom: -6px; /* Позиционирование ниже текста */
    transition: width 0.3s; /* Плавный переход */
}

/* Подменю */
.sub-menu {
    z-index: 10000;
    display: none; /* Подменю скрыто по умолчанию */
    position: absolute;
    top: 100%;
    left: 0; /* Привязка к левому краю */
    min-width: 150px;
    white-space: nowrap;
    text-align: left; /* Выровняем текст по левому краю */
    background-color: #2a3f54; /* Фон подменю */
    border: 1px solid #c1c1c1; /* Рамка для выделения */
    border-radius: 5px; /* Скругленные углы для подменю */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}
.sub-menu.active {
    display: block; /* Делаем подменю видимым */
}

/* Убираем любые линии в подменю */
.sub-menu li {
    margin: 0; /* Убираем отступы */
    padding: 8px 10px; /* Отступы для элементов подменю */
    text-align: left; /* Выровняем текст по левому краю */
}

/* Стиль для ссылок в подменю */
.sub-menu li a {
    display: block; /* Используем блоковое отображение для ссылки */
    padding: 8px 0px; /* Отступы для удобства */
    color: #ffffff; /* Цвет текста подменю */
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
    position: relative; /* Для позиционирования псевдоэлемента */
    transition: color 0.3s ease; /* Плавный переход цвета при наведении */ 
    text-align: left; /* Выровняем текст по левому краю */
}

/* Псевдоэлемент для подчеркивания при наведении */
.sub-menu li a::after {
    content: ""; /* Пустое содержимое для псевдоэлемента */
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px; /* Толщина линии */
    width: 0;
    background-color:var(--color-accent-soft) ; /* Цвет подчеркивания */
    transition: width 0.3s ease; /* Плавный переход ширины */
}

/* Псевдоэлемент для подчеркивания текста по левому краю */
.sub-menu li a::before {
    content: ""; /* Пустое содержимое */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Привязка к левому краю */
    bottom: 5px; /* Позиционирование линии ближе к тексту */
    width: 0; /* Изначальная ширина */
    height: 2px; /* Толщина линии */

    transition: width 1.1s ease; /* Плавный переход */
}
.sub-menu ul {
    padding: 0;
}
/* Основной контент и секции */


.heading {
    margin-left: 20px; /* Устанавливает отступ снаружи элемента */
    padding-left: 10px; /* Дополнительный отступ внутри элемента, если нужно */
  
}

#info-table {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.info-row {
    display: flex;
    gap: 20px;
    text-align: center;
}

.info-item {
   
    padding: 15px;
    border-radius: 5px;
    flex: 1;
    min-width: 150px;
}

/* Стилевые блоки, подкатегории и элементы */
.directions-table {
    display: flex;
    flex-wrap: wrap; /* Позволяет элементам переноситься на следующую строку */
    gap: 20px;
    padding: 20px;
}

.direction-item {
    flex: 1 1 calc(33.333% - 20px); /* Задает ширину в одну треть строки */
    max-width: calc(33.333% - 20px); /* Ограничивает максимальную ширину до одной трети */

    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Упорядочивает содержимое по вертикали */
    align-items: center; /* Центрирует содержимое */
    box-sizing: border-box; /* Включает padding в расчет ширины */
}

.direction-header {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;

    transition: background-color 0.3s;
    width: 100%; /* Заполняет ширину контейнера */
}

.direction-header img {
    width: 150px; /* Настройка размера изображения */
    height: 150px;
    margin-right: 15px;
}



.subcategories {
    max-height: 0; /* Начальное состояние скрытое */
    overflow: hidden; /* Скрытие содержимого */
    transition:
        max-height 0.3s ease-out,
        padding 0.3s ease-out; /* Плавный переход */
    padding: 0; /* Убираем padding при закрытии */
}

.subcategories.active {
    max-height: 500px; /* Достаточно большая высота для раскрытия контента */
    padding: 10px; /* Восстанавливаем padding при открытии */
    
}

.subcategory-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.subcategory-item img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}



.sidebar {
    
    width: 100%;
      margin: 60px 0;
    padding: 20px;
    box-sizing: border-box;
    display: none; /* Скрываем по умолчанию */
    position: relative; /* Относительное позиционирование */
    z-index: 1000; 
   background-color: #2a3f54; /* Фон sidebar */
    color: #ffffff; /* Цвет текста */
    overflow-y: auto; /* Вертикальная прокрутка для длинного содержимого */
    transition: all 0.3s ease-in-out; /* Плавное открытие/закрытие */
   
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

/* Элементы списка в sidebar */
.sidebar-nav {
    list-style: none;
    padding: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-nav .nav-item {
    margin: 10px 0;
}

.sidebar-nav .nav-item a {
    color: #ffffff; /* Основной цвет ссылок */
    text-decoration: none;
    font-size: 18px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between; /* Выравнивание текста и стрелки */
    align-items: center;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.sidebar-nav .nav-item a:hover {
    background-color: var(--color-accent-hover); /* Цвет фона при наведении */
}


.close-btn {
    background: none;
    border: none;
  
    cursor: pointer;
}

.production-image {
    display: block; /* Блочное отображение */
    margin: 0 auto 30px; /* Центрируем изображение и добавляем отступ снизу */
    max-width: 50%; /* Изображение не выходит за пределы контейнера */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень для выделения */
}
.directions-section {
    padding: 40px 20px;
   
    text-align: center;
}

.section-title {
   
    margin-bottom: 30px;
}

.directions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto; /* Центрируем контейнер на странице */
    gap: 40px; /* Расстояние между карточками */
    max-width: 1300px; /* Максимальная ширина контейнера */
}

.direction-card {
   
    border-radius: 8px;
    padding: 20px;
    max-width: 300px;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}

.direction-card:hover {
    transform: translateY(-10px);
}

.search-button:hover {
   
}

.search-icon {
    width: 20px; /* Размер иконки */
    height: 20px;
}

/* Медиазапросы */
@media (max-width: 600px) {
    .direction-item {
        flex: 1 1 100%; /* Задает ширину на всю строку */
    }
}
.menu-toggle {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
   
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000; /* Над шапкой */
}
.nav-container.menu-collapsed .nav-list {
    display: none; /* Скрываем пункты меню */
}

.nav-container.menu-collapsed .menu-toggle {
    display: block; /* Показываем кнопку при сворачивании */
}

/* Отображение кнопки на маленьких экранах */
.menu-toggle.active {
    display: inline-block;
}
/* Основной стиль для элемента company-name2 */
.company-name2 {
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Сдвигаем в центр по горизонтали */
    transform: translateX(-50%); /* Центрируем относительно центра экрана */
    font-size: 1.8rem;
    font-weight: 700;
  
    margin: 0;
    text-align: center;
}
/* Верхняя шапка с логотипом и контактной информацией */
.top-header {
    width: 100%;
    height: 100px; /* Устанавливаем фиксированную высоту */
   
    justify-content: space-between; /* Размещаем элементы по краям */
  
   
    position: absolute; /* Фиксированное позиционирование для шапки */
    top: 0;
    left: 0;
}




/* Стиль для информации, которая будет скрываться на маленьких экранах */
.header-right {

    margin-right: 20px; /* Устанавливаем отступ справа */
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем лишний текст */
    justify-content: center;
    align-items: flex-end;
    max-width: 400px; /* Ограничиваем ширину блока */
    text-align: right; /* Выравниваем текст по правому краю */
    transition:
        max-height 0.3s ease,
        opacity 0.3s ease; /* Анимация для скрытия */
}
.header-left .logo-icon {
    max-height: 50px; /* Размер логотипа */
    margin-right: 15px; /* Отступ от текста */
}

#main-menu.fixed {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999; /* чтобы было поверх слайдера */
}


.nav-container {
     position: relative;
    top: 0;
    width: 100%;
    max-width: none;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    max-height: 104px;
    overflow: visible;
    background-color: white; /* ДОБАВЛЕНО: чтобы меню не было прозрачным */
    z-index: 999;
}
    
.nav-container.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.fixed-menu {
    position: fixed;
    top: -100px;
    width: 100%;
    z-index: 1000;
     max-height: 50px; /* Ограничьте высоту, если нужно */
}

.nav-list {
    padding: 0;
    margin: 0;
    list-style: none; /* Убираем маркеры списка */
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    justify-content: space-around; /* Равномерно распределить элементы */
    align-items: center; /* Выровнять по вертикали */
}
.image-container {
    width: 300px; /* Ширина контейнера */
    height: 400px; /* Высота контейнера */
    overflow: hidden; /* Чтобы изображение не выходило за рамки контейнера */
}

.image-container img {
    width: 100%; /* Растягиваем по ширине контейнера */
    height: 100%; /* Растягиваем по высоте контейнера */
    object-fit: contain; /* Изображение будет масштабироваться с сохранением пропорций */
}

/* Для скрытия контактной информации */
.hidden-info {
    display: none; /* Контактная информация скрыта */
}

/* Футер */
.footer {
    padding: 40px 20px;
    font-size: 14px; /* Базовый размер шрифта для футера */
    overflow: hidden; /* Устраняет возможные переполнения */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    flex-wrap: wrap; /* Позволяет колонкам переноситься при нехватке места */
}

.footer-column {
    flex: 1;
    margin: 20px; /* Добавляем отступы вокруг колонок */
    min-width: 250px; /* Минимальная ширина колонок */
    text-align: center; /* Центрируем текст по горизонтали */
}


.footer-column a {
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

.company-logos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Логотипы переносятся при необходимости */
    justify-content: center; /* Центрируем логотипы */
}

.company-logos a img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
}

.company-logos a img:hover {
    transform: scale(1.1);
}

.language-switcher {
    position: relative;
}



.language-switcher .language-options {
    display: none; /* Скрыто по умолчанию */
    position: absolute;
    top: 100%; /* Расположено под элементом */
    left: 0;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    z-index: 10;
    padding: 5px 0;
    width: 120px;
}

.language-switcher:hover .language-options {
    display: block; /* Показывается при наведении */
}

.language-options ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.language-options li {
    padding: 5px 10px;
}

.language-options li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.language-options li a:hover {
    background-color: #e0e0e0;
}

.flag-icon {
    width: 24px; /* Ширина флага */
    height: auto; /* Высота автоматически */
    display: inline-block; /* Для корректного отображения */
    margin-right: 8px; /* Отступ между флагом и текстом */
    border-radius: 3px; /* Легкое скругление краев */
}
.nav-list li {
    position: relative; /* Нужно для псевдоэлементов */
    margin: 0 15px; /* Отступы между элементами */
    list-style: none;
}

/* Стиль для основного меню с линиями между элементами */
.main-nav > li:not(:last-child)::after {
    content: ""; /* Пустой псевдоэлемент для вертикальной линии */
    position: absolute;
    top: 50%; /* Центрируем по вертикали */
    right: -15px; /* Расположено в правой части элемента */
    transform: translateY(-50%); /* Центрирование по вертикали */
    height: 70%; /* Высота линии относительно высоты текста */
    width: 2px; /* Начальная толщина линии */
    background: linear-gradient(
        to top,
        transparent, /* Прозрачный градиент для сужения */
        #c1c1c1 50%, /* Основной цвет линии в центре */
        transparent /* Прозрачный градиент для сужения */
    );
    transition: background 0.3s ease; /* Плавный переход */
}

/* Удаляем псевдоэлемент для подменю */
.sub-menu li::after {
    content: none; /* Убирает псевдоэлемент для элементов подменю */
}
/* Стиль для стрелки */
.nav-item .arrow {
    font-size: 12px; /* Фиксированный размер стрелки */
    vertical-align: middle; /* Вертикальное выравнивание */
    margin-left: 4px; /* Отступ слева от текста */
    display: inline-block; /* Обеспечивает возможность анимации */
    transition: transform 0.3s ease; /* Плавная анимация поворота */
}

/* Поворот стрелки при добавлении класса 'rotate' */
.nav-item .arrow.rotate {
    transform: rotate(180deg); /* Поворот стрелки на 180 градусов */
}



/* Секция "О компании" */
.company-overview {
    padding: 50px 20px;
    background: #F8F9FA; /* Лёгкий серый фон */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.company-overview h2 {
    font-size: clamp(22px, 4vw, 32px);
    margin-bottom: 20px;
    font-weight: 700;
}

.company-overview p {
    font-size: clamp(14px, 2vw, 16px);
    margin: 0 auto 20px;
    max-width: 800px;
}

.company-overview .btn-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-text); /* Тёмно-синий фон кнопки */
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.company-overview .btn-more:hover {
    background-color: var(--color-accent-hover); /* Более яркий оттенок синего */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Основные направления деятельности */
.directions-section {
    padding: 60px 20px;
    background: #ffffff; /* Белый фон */
    text-align: center;
}

.directions-section h2 {
    font-size: clamp(22px, 4vw, 32px);
    margin-bottom: 40px;
    color: var(--color-text);
    font-weight: 700;
}

.directions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.direction-card {
    background-color: #F8F9FA; /* Лёгкий серый фон */
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    padding: 20px;
    width: 100%;
    max-width: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень карточек */
}

.direction-card:hover {
    transform: translateY(-10px); /* Эффект подъёма */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.direction-card h3 {
    font-size: clamp(18px, 2vw, 22px);
    margin-bottom: 15px;
    color: var(--color-text);
    font-weight: 700;
}

.direction-card .image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Единая шапка, меню и футер для всех страниц */
body {
    transition: none;
}

header {
    display: block;
    position: relative;
    white-space: normal;
    width: 100%;
    z-index: 20000;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    box-sizing: border-box;
}

header .menu-row {
    height: auto;
    min-height: 50px;
    background-color: var(--header-background, rgb(46, 61, 73));
}

body > main.container {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    background: transparent;
}

.top-header {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100px;
}

.nav-container {
    position: relative;
    top: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 50px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: visible;
    background-color: var(--header-background, rgb(46, 61, 73));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 20000;
}

#main-menu.fixed,
.nav-container.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--header-background, rgb(46, 61, 73));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    z-index: 20000;
}

.nav-item.has-submenu {
    z-index: 20001;
}

.nav-item.has-submenu .sub-menu {
    z-index: 20002;
}

.nav-list {
    min-height: 50px;
    width: 100%;
    align-items: center;
    background-color: var(--header-background, rgb(46, 61, 73));
}

#menu-spacer {
    display: none !important;
    height: 0 !important;
}

.nav-placeholder {
    display: none;
    height: 0;
    width: 100%;
}

.footer {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive menu fixes */
.nav-container.menu-collapsed {
    align-items: center;
    background-color: var(--header-background, rgb(46, 61, 73));
    box-sizing: border-box;
    justify-content: center;
    min-height: 64px;
    padding: 10px 72px 10px 24px;
}

.nav-container.menu-collapsed .company-name2 {
    background: transparent;
    color: var(--white);
    display: block;
    font-size: clamp(18px, 4.4vw, 28px);
    font-weight: 700;
    left: auto;
    line-height: 1.15;
    margin: 0;
    max-width: 100%;
    position: static;
    text-align: center;
    transform: none;
    width: 100%;
}

.nav-container.menu-collapsed .company-name2 h1 {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.nav-container.menu-collapsed .menu-toggle {
    align-items: center;
    color: var(--white);
    display: flex;
    height: 44px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
}

.nav-container.menu-collapsed .sidebar {
    background-color: var(--header-background, rgb(46, 61, 73));
    box-sizing: border-box;
    left: 0;
    margin: 0;
    padding: 28px clamp(24px, 10vw, 64px);
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
}

.nav-container.menu-collapsed .sidebar-nav {
    gap: 10px;
    padding: 0;
}

.nav-container.menu-collapsed .sidebar-nav .nav-item {
    margin: 0;
}

.nav-container.menu-collapsed .sidebar-nav .nav-item a {
    font-size: clamp(18px, 4vw, 22px);
    padding: 14px 0;
}

@media (max-width: 760px) {
    .top-header,
    .top-header .container {
        height: auto;
        min-height: 112px;
    }

    .top-header .container {
        align-items: center;
        box-sizing: border-box;
        padding: 12px 16px;
    }

    .header-right {
        display: none;
    }

    .logo {
        min-width: 0;
        padding-left: 0;
    }

    .logo-icon {
        flex: 0 0 auto;
        height: auto;
        width: 78px;
    }

    .company-name {
        min-width: 0;
    }

    .header-left .company-name h1,
    .header-left .company-name h2 {
        line-height: 1.15;
        white-space: normal;
    }

    .header-left .company-name h1 {
        font-size: clamp(24px, 5.6vw, 32px);
    }

    .header-left .company-name h2 {
        font-size: clamp(18px, 4.8vw, 28px);
    }
}

@media (max-width: 420px) {
    .nav-container.menu-collapsed {
        padding-left: 14px;
        padding-right: 62px;
    }

    .nav-container.menu-collapsed .company-name2 {
        font-size: clamp(16px, 5vw, 22px);
    }
}

html {
    background: #eef3f7;
}

body {
    background:
        linear-gradient(180deg, rgba(246, 250, 253, 0.94), rgba(246, 250, 253, 0.9)),
        url("/assets/images/index/slide2.png") center top / cover fixed;
    background-color: #eef3f7;
}

main {
    position: relative;
}

.page-trail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(100% - 40px, 1240px);
    margin: 0 auto 18px;
    padding: 10px 14px;
    color: #4f6f8e;
    font-family: var(--site-font-family);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d9e5ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 59, 112, 0.08);
}

.page-trail a {
    color: var(--color-text);
    text-decoration: none;
}

.page-trail a:hover {
    color: var(--color-accent-hover);
}

.page-trail strong {
    color: var(--color-text);
}

.products-hero,
.reviews-hero,
.social-hero,
.vacancies-hero {
    display: none !important;
}

.contacts-section > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.has-page-trail main > h1:first-child,
.has-page-trail main > section > h1:first-child,
.has-page-trail main > article > h1:first-child,
.has-page-trail .product-detail > h1,
.has-page-trail .social-detail > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 700 28px/1 Arial, sans-serif;
    background: var(--color-text);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(0, 59, 112, 0.28);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.back-to-top:hover {
    background: var(--color-accent-hover);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 680px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        font-size: 25px;
    }

    .page-trail {
        max-width: min(100% - 28px, 760px);
        margin-bottom: 14px;
        font-size: 14px;
    }
}

/* Professional visual layer */
* {
    box-sizing: border-box;
}

html {
    background: #f3f7f8;
    scroll-behavior: smooth;
}

body {
    background:
        linear-gradient(180deg, #f4f8f8 0%, #edf3f5 54%, #f7faf9 100%);
    color: var(--text-primary);
    font-family: var(--site-font-family);
    letter-spacing: 0;
}

body::before {
    background:
        linear-gradient(90deg, rgba(13, 42, 66, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(13, 42, 66, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

.is-animated {
    filter: saturate(0.94);
    opacity: 0.78;
    transform: translate3d(0, 14px, 0) scale(0.992);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease;
    transition-delay: var(--effect-delay, 0ms);
    will-change: opacity, transform, filter;
}

.is-animated.is-visible {
    filter: saturate(1);
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.site-glow-surface {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transition:
        border-color 0.32s ease,
        box-shadow 0.32s ease,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-glow-surface::after {
    background:
        radial-gradient(
            240px circle at var(--pointer-x, 50%) var(--pointer-y, 0),
            rgba(53, 209, 154, 0.16),
            rgba(15, 111, 159, 0.08) 34%,
            transparent 68%
        );
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.32s ease;
    z-index: 0;
}

.site-glow-surface:hover,
.site-glow-surface:focus-within {
    box-shadow: 0 22px 52px rgba(21, 49, 69, 0.13);
    transform: translateY(-3px);
}

.site-glow-surface:hover::after,
.site-glow-surface:focus-within::after {
    opacity: 1;
}

.site-glow-surface > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .is-animated {
        filter: none;
        opacity: 1;
        transform: none;
    }
}

a {
    text-underline-offset: 3px;
}

header {
    background: #ffffff;
    border-bottom: 1px solid #dce7ed;
    box-shadow: 0 12px 30px rgba(21, 49, 69, 0.08);
}

header .container,
.top-header,
.top-header .container {
    background: #ffffff;
}

.top-header {
    border-bottom: 1px solid #dce7ed;
}

header .container {
    height: auto;
}

.top-header .container {
    min-height: 96px;
    padding: 14px clamp(18px, 4vw, 58px);
}

.logo {
    min-width: 0;
    padding-left: 0;
}

.logo-icon {
    filter: none;
    height: auto;
    margin-right: 14px;
    width: clamp(78px, 7vw, 104px);
}

.company-name h1,
.company-name h2 {
    color: var(--color-text);
    margin: 0;
    white-space: normal;
}

.company-name h1 {
    font-size: clamp(25px, 2.7vw, 38px);
    font-weight: 800;
    line-height: 1.02;
}

.company-name h2 {
    color: var(--color-muted);
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 700;
    line-height: 1.24;
    margin-top: 5px;
}

.header-right {
    align-items: center;
    color: var(--color-muted);
    display: flex;
    flex: 0 1 auto;
    gap: clamp(14px, 2vw, 24px);
    margin-right: 0;
    max-width: min(52vw, 620px);
    overflow: visible;
    white-space: normal;
}

.contact-info {
    border-right: 1px solid #dce7ed;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: clamp(14px, 2vw, 24px);
    text-align: right;
}

.contact-info p {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 6px;
}

.contact-info p:last-child {
    margin-bottom: 0;
}

.contact-info a {
    color: var(--color-text);
    font-weight: 800;
    text-decoration: none;
}

.contact-info a:hover {
    color: var(--color-accent-hover);
}

.header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.header-action {
    align-items: center;
    border: 1px solid #cddde5;
    border-radius: 8px;
    color: var(--color-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.header-action:hover,
.header-action:focus-visible {
    transform: translateY(-1px);
}

.header-action-catalog {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #ffffff;
}

.header-action-catalog:hover,
.header-action-catalog:focus-visible {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #ffffff;
}

.header-action-request {
    background: #ffffff;
}

.header-action-request:hover,
.header-action-request:focus-visible {
    background: #edf7f4;
    border-color: #9fc9ba;
    color: var(--color-accent-hover);
}

header .menu-row {
    background: var(--color-header);
    min-height: 56px;
}

.nav-container {
    background: var(--color-header);
    min-height: 56px;
}

.nav-list {
    background: var(--color-header);
    justify-content: center;
    min-height: 56px;
    padding: 0 clamp(10px, 3vw, 38px);
}

.nav-list li {
    flex: 0 1 auto;
    margin: 0;
}

.nav-list li a {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(13px, 1vw, 15px) !important;
    font-weight: 800;
    line-height: 1.2;
    padding: 18px 12px;
    text-overflow: clip;
}

.main-nav > li:not(:last-child)::after {
    content: none;
}

.nav-list li a:hover,
.nav-list li a:focus-visible,
.nav-list li a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.nav-list > li > a::after,
.nav-item > a::after {
    background: var(--color-accent-warm);
    bottom: 7px;
    height: 3px;
}

.nav-list > li > a:hover::after,
.nav-list > li > a.active::after {
    width: calc(100% - 24px);
}

.nav-item .arrow {
    color: var(--color-accent-warm);
    font-size: 10px;
}

.sub-menu {
    background: #ffffff;
    border: 1px solid #d3e1e8;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(21, 49, 69, 0.17);
    min-width: 260px;
    padding: 8px;
}

.sub-menu li {
    padding: 0;
}

.sub-menu li a {
    border-radius: 6px;
    color: var(--color-text);
    font-size: 14px !important;
    font-weight: 800;
    padding: 10px 12px;
    text-align: left;
}

.sub-menu li a:hover,
.sub-menu li a:focus-visible,
.sub-menu li a.active {
    background: #edf7f4;
    color: var(--color-accent-hover);
}

.sub-menu li a::before,
.sub-menu li a::after {
    content: none;
}

.language-switcher .sub-menu {
    min-width: 120px;
}

#main-menu.fixed,
.nav-container.fixed {
    background: var(--color-header);
    box-shadow: 0 12px 30px rgba(21, 49, 69, 0.16);
}

.nav-container.menu-collapsed {
    background: var(--color-header);
    min-height: 64px;
}

.nav-container.menu-collapsed .company-name2 {
    color: #ffffff;
}

.nav-container.menu-collapsed .sidebar {
    background: var(--color-header);
    box-shadow: 0 18px 42px rgba(21, 49, 69, 0.25);
}

.nav-container.menu-collapsed .sidebar-nav .nav-item a {
    color: #ffffff;
}

.nav-container.menu-collapsed .sidebar-nav .sub-menu a {
    color: var(--color-text);
}

.menu-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 25px;
}

main {
    min-height: 54vh;
}

.page-trail {
    border-color: #d4e2e8;
    box-shadow: 0 14px 32px rgba(21, 49, 69, 0.08);
}

.company-content,
.contact-card,
.contacts-map,
.product-card,
.direction-item,
.equipment-map-group,
.reviews-pages figure,
.news-card,
.social-card,
.vacancy-card,
.partners-card {
    border: 1px solid #d7e6ed;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(21, 49, 69, 0.09);
}

.company-content h1,
.contacts-section h1,
.products-hero h1,
.product-detail h1 {
    color: var(--color-text);
}

.back-to-top {
    background: var(--color-accent-hover);
    box-shadow: 0 14px 30px rgba(11, 122, 83, 0.24);
}

.back-to-top:hover {
    background: var(--color-text);
}

.footer {
    background:
        linear-gradient(180deg, var(--color-header) 0%, #081d2d 100%);
    color: rgba(255, 255, 255, 0.8);
}

.footer h4 {
    color: #ffffff;
    font-size: 18px;
    margin: 0 0 14px;
}

.footer p,
.footer li,
.footer a {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}

.footer a:hover {
    color: var(--color-accent-warm);
}

.footer-column {
    text-align: left;
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
    .top-header .container {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .header-right {
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
    }

    .contact-info {
        text-align: left;
    }
}

@media (max-width: 760px) {
    .top-header,
    .top-header .container {
        min-height: 0;
    }

    .top-header .container {
        padding: 14px 16px;
    }

    .header-right {
        display: none;
    }

    .company-name h1 {
        font-size: clamp(24px, 7vw, 32px);
    }

    .company-name h2 {
        font-size: clamp(14px, 4vw, 18px);
    }
}

@media (max-width: 480px) {
    .logo {
        align-items: center;
    }

    .logo-icon {
        width: 70px;
    }
}

/* SPBSEZ-inspired executive visual system */
:root {
    --ez-ink: var(--color-header, #0d1822);
    --ez-ink-2: var(--color-header-2, #17293a);
    --ez-line: rgba(255, 255, 255, 0.24);
    --ez-line-dark: var(--color-line, rgba(17, 34, 52, 0.14));
    --ez-text: var(--color-text, #112234);
    --ez-muted: var(--color-muted, #586f82);
    --ez-accent: var(--color-accent, #d97825);
    --ez-teal: var(--color-steel, #287a9f);
    --ez-gold: var(--color-accent-warm, #f2b168);
    --ez-surface: var(--color-bg, #f4f8fb);
}

html {
    background: var(--ez-surface);
}

body {
    background:
        linear-gradient(180deg, #f7f8fc 0%, #eef2f7 58%, #f8f9fc 100%);
    color: var(--ez-text);
    font-family: var(--site-font-family);
    font-feature-settings: "kern" 1;
}

body::before {
    background:
        linear-gradient(90deg, rgba(16, 17, 38, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 17, 38, 0.035) 1px, transparent 1px);
    background-size: 108px 108px;
    opacity: 0.72;
}

body:has(#hero) header {
    position: absolute;
}

body:not(:has(#hero)) header {
    background: var(--color-header);
}

body:not(:has(#hero)) .top-header,
body:not(:has(#hero)) header .menu-row,
body:not(:has(#hero)) .nav-container,
body:not(:has(#hero)) .nav-list,
body:not(:has(#hero)) #main-menu.fixed,
body:not(:has(#hero)) .nav-container.fixed {
    background: var(--color-header);
}

header {
    background: rgba(12, 13, 31, 0.88);
    border-bottom: 1px solid var(--ez-line);
    box-shadow: none;
    color: #ffffff;
    left: 0;
    position: sticky;
    right: 0;
    top: 0;
    z-index: 30000;
}

@supports (backdrop-filter: blur(18px)) {
    header {
        backdrop-filter: blur(18px);
        background: rgba(12, 13, 31, 0.58);
    }
}

header .container,
.top-header,
.top-header .container,
header .menu-row,
.nav-container,
.nav-list,
#main-menu.fixed,
.nav-container.fixed {
    background: transparent;
}

header .container,
.top-header .container {
    box-sizing: border-box;
}

.top-header {
    border-bottom: 1px solid var(--ez-line);
}

.top-header .container {
    min-height: 62px;
    padding: 8px clamp(20px, 4vw, 72px);
}

.logo-icon {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
    width: 58px;
}

.company-name h1,
.company-name h2,
.contact-info p,
.contact-info a {
    color: #ffffff;
}

.company-name h1 {
    font-family: var(--site-font-family);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.company-name h2 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.header-right {
    color: rgba(255, 255, 255, 0.72);
    gap: 18px;
    max-width: min(54vw, 640px);
}

.contact-info {
    border-right: 1px solid var(--ez-line);
    padding-right: 18px;
}

.contact-info p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 3px;
}

.contact-info a {
    font-weight: 700;
}

.contact-info a:hover {
    color: #ffffff;
}

.header-actions {
    gap: 0;
}

.header-action {
    background: transparent;
    border: 1px solid var(--ez-line);
    border-radius: 0;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    min-height: 36px;
    padding: 0 16px;
}

.header-action + .header-action {
    border-left: 0;
}

.header-action-catalog,
.header-action-request {
    background: transparent;
    border-color: var(--ez-line);
    color: #ffffff;
}

.header-action:hover,
.header-action:focus-visible,
.header-action-catalog:hover,
.header-action-catalog:focus-visible,
.header-action-request:hover,
.header-action-request:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.46);
    color: #ffffff;
    transform: none;
}

header .menu-row {
    border-bottom: 1px solid var(--ez-line);
    min-height: 48px;
}

.nav-container {
    box-shadow: none;
    min-height: 48px;
}

.nav-list {
    justify-content: center;
    min-height: 48px;
    padding: 0 clamp(16px, 4vw, 72px);
}

.nav-list li {
    border-left: 1px solid var(--ez-line);
}

.nav-list li:last-child {
    border-right: 1px solid var(--ez-line);
}

.nav-list li a {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.94rem !important;
    font-weight: 700;
    letter-spacing: 0;
    min-height: 48px;
    padding: 15px 14px;
}

.nav-list li a:hover,
.nav-list li a:focus-visible,
.nav-list li a.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-list > li > a::after,
.nav-item > a::after {
    background: var(--ez-accent);
    bottom: 0;
    height: 2px;
}

.nav-list > li > a:hover::after,
.nav-list > li > a.active::after {
    width: 100%;
}

.nav-item .arrow {
    color: var(--ez-teal);
}

.flag-icon {
    filter: none;
}

.sub-menu {
    background: rgba(14, 16, 40, 0.94);
    border: 1px solid var(--ez-line);
    border-radius: 0;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28);
    min-width: 280px;
    padding: 8px;
}

@supports (backdrop-filter: blur(18px)) {
    .sub-menu {
        backdrop-filter: blur(18px);
        background: rgba(14, 16, 40, 0.8);
    }
}

.sub-menu li {
    border: 0;
}

.sub-menu li a {
    border-radius: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem !important;
    font-weight: 600;
}

.sub-menu li a:hover,
.sub-menu li a:focus-visible,
.sub-menu li a.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-container.menu-collapsed {
    background: rgba(12, 13, 31, 0.86);
    border-bottom: 1px solid var(--ez-line);
}

.nav-container.menu-collapsed .company-name2 {
    color: #ffffff;
    font-family: var(--site-font-family);
    font-weight: 700;
}

.menu-toggle {
    border: 1px solid var(--ez-line);
    border-radius: 0;
}

.nav-container.menu-collapsed .sidebar {
    background: rgba(12, 13, 31, 0.96);
    border-top: 1px solid var(--ez-line);
}

.nav-container.menu-collapsed .sidebar-nav .nav-item a {
    border-bottom: 1px solid var(--ez-line);
    color: #ffffff;
}

.nav-container.menu-collapsed .sidebar-nav .sub-menu a {
    color: rgba(255, 255, 255, 0.82);
}

.page-trail {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--ez-line-dark);
    border-radius: 0;
    box-shadow: none;
    color: var(--ez-muted);
}

.company-content,
.contact-card,
.contacts-map,
.product-card,
.direction-item,
.equipment-map-group,
.reviews-pages figure,
.news-card,
.social-card,
.vacancy-card,
.partners-card,
.engineering-list article,
.faq-list details {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--ez-line-dark);
    border-radius: 0;
    box-shadow: none;
}

.site-glow-surface:hover,
.site-glow-surface:focus-within {
    border-color: rgba(134, 119, 255, 0.36);
    box-shadow: 0 26px 70px rgba(16, 17, 38, 0.14);
}

.back-to-top {
    background: var(--ez-ink);
    border: 1px solid var(--ez-line);
    border-radius: 0;
}

.footer {
    background:
        linear-gradient(180deg, rgba(16, 17, 38, 0.98), rgba(7, 8, 20, 1));
    border-top: 1px solid var(--ez-line);
}

@media (max-width: 1080px) {
    .top-header .container {
        min-height: 62px;
    }

    .header-right {
        max-width: none;
    }
}

@media (max-width: 760px) {
    body:has(#hero) header {
        position: absolute;
    }

    .top-header .container {
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 12px 18px;
    }

    .logo {
        min-width: 0;
        width: 100%;
    }

    .logo-icon {
        width: 58px;
    }

    .company-name {
        max-width: calc(100vw - 112px);
        min-width: 0;
    }

    .company-name h1,
    .company-name h2,
    .header-left .company-name h1,
    .header-left .company-name h2 {
        max-width: 100%;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .company-name h1,
    .header-left .company-name h1 {
        font-size: clamp(22px, 6.3vw, 26px);
    }

    .company-name h2,
    .header-left .company-name h2 {
        font-size: clamp(12px, 3.2vw, 14px);
    }

    .nav-container.menu-collapsed {
        min-height: 60px;
    }
}

/* Current business theme: all legacy names are mapped to the central palette. */
:root {
    --brand-carbon: var(--color-header, #0d1822);
    --brand-carbon-2: var(--color-header-2, #17293a);
    --brand-carbon-3: var(--color-header-3, #24394b);
    --brand-blue: var(--color-accent, #d97825);
    --brand-blue-strong: var(--color-accent-hover, #b95f19);
    --brand-blue-soft: var(--color-accent-soft, #fff0e2);
    --brand-copper: var(--color-accent, #d97825);
    --brand-copper-strong: var(--color-accent-hover, #b95f19);
    --brand-copper-soft: var(--color-accent-soft, #fff0e2);
    --brand-paper: var(--color-surface, #ffffff);
    --brand-surface: var(--color-bg, #f4f8fb);
    --brand-surface-2: var(--color-bg-2, #e8f1f6);
    --brand-line: var(--color-line, rgba(17, 34, 52, 0.14));
    --brand-line-strong: var(--color-line-strong, rgba(17, 34, 52, 0.22));
    --brand-text: var(--color-text, #112234);
    --brand-muted: var(--color-muted, #586f82);
    --brand-shadow: var(--shadow-soft, 0 12px 34px rgba(17, 34, 52, 0.09));
    --brand-shadow-strong: var(--shadow-strong, 0 22px 56px rgba(17, 34, 52, 0.15));

    --ez-ink: var(--brand-carbon);
    --ez-ink-2: var(--brand-carbon-2);
    --ez-text: var(--brand-text);
    --ez-muted: var(--brand-muted);
    --ez-accent: var(--brand-blue);
    --ez-teal: var(--brand-copper);
    --ez-gold: var(--brand-copper);
    --ez-surface: var(--brand-surface);
    --ez-line-dark: var(--brand-line);

    --site-ink: var(--brand-text);
    --site-ink-soft: var(--brand-carbon-3);
    --site-muted: var(--brand-muted);
    --site-line: var(--brand-line);
    --site-surface: var(--brand-surface);
    --site-card: var(--color-card, rgba(255, 255, 255, 0.96));
    --site-accent: var(--brand-blue);
    --site-accent-strong: var(--brand-blue-strong);
    --site-green: var(--color-steel, #287a9f);
    --site-header-glass: rgba(13, 24, 34, 0.94);
    --site-header-fixed: rgba(13, 24, 34, 0.96);
}

html {
    background: var(--site-surface);
}

body {
    background: linear-gradient(180deg, #f8fafb 0%, var(--brand-surface) 52%, #eef3f5 100%);
    color: var(--site-ink);
    font-family: var(--site-font-family);
    font-size: 15px;
    line-height: 1.58;
}

body::before {
    background:
        linear-gradient(90deg, rgba(16, 24, 32, 0.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 24, 32, 0.024) 1px, transparent 1px);
    background-size: 104px 104px;
    opacity: 0.54;
}

header,
body:not(:has(#hero)) header,
body:has(#hero) header,
#main-menu.fixed,
.nav-container.fixed,
.nav-container.menu-collapsed,
.nav-container.menu-collapsed .sidebar {
    background: var(--site-header-glass);
    background-color: var(--site-header-glass);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

header {
    box-shadow: none;
    position: relative;
}

body:has(#hero) header {
    position: absolute;
}

body:not(:has(#hero)) header {
    position: relative;
}

@supports (backdrop-filter: blur(18px)) {
    header,
    #main-menu.fixed,
    .nav-container.fixed,
    .top-header,
    .nav-container {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
}

body:not(:has(#hero)) .top-header,
body:not(:has(#hero)) header .menu-row,
body:not(:has(#hero)) .nav-container,
body:not(:has(#hero)) .nav-list,
header .container,
.top-header,
.top-header .container,
header .menu-row,
.nav-container,
.nav-list {
    background: transparent;
    background-color: transparent;
}

#main-menu.fixed,
.nav-container.fixed,
.nav-container.menu-collapsed {
    background: var(--site-header-fixed);
    background-color: var(--site-header-fixed);
    box-shadow: 0 14px 36px rgba(16, 24, 32, 0.26);
}

.top-header .container {
    min-height: 58px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.logo-icon {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.24));
    width: 56px;
}

.company-name h1,
.company-name h2,
.header-left,
.header-right,
.contact-info p,
.contact-info a {
    color: #ffffff;
}

.company-name h1 {
    font-family: var(--site-font-family);
    font-size: clamp(20px, 1.9vw, 27px);
    font-weight: 600;
}

.company-name h2,
.contact-info p {
    color: rgba(255, 255, 255, 0.72);
}

.company-name h2 {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;
}

.contact-info {
    border-right-color: rgba(255, 255, 255, 0.18);
}

.contact-info p {
    font-size: 12px;
    line-height: 1.32;
}

.header-action,
.header-action-catalog,
.header-action-request {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    min-height: 34px;
    padding: 0 14px;
}

.header-action-catalog {
    background: var(--brand-copper);
    border-color: var(--brand-copper);
    color: #ffffff;
}

.header-action:hover,
.header-action:focus-visible,
.header-action-catalog:hover,
.header-action-catalog:focus-visible,
.header-action-request:hover,
.header-action-request:focus-visible {
    background: var(--brand-copper-strong);
    border-color: var(--brand-copper-strong);
    color: #ffffff;
}

header .menu-row,
.nav-container,
.nav-list {
    min-height: 44px;
}

.nav-list {
    padding-left: clamp(14px, 3vw, 56px);
    padding-right: clamp(14px, 3vw, 56px);
}

.nav-list li {
    border-color: rgba(255, 255, 255, 0.14);
}

.nav-list li a,
.nav-container.menu-collapsed .sidebar-nav .nav-item a {
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--site-font-family);
    font-size: clamp(12px, 0.84vw, 14px) !important;
    font-weight: 600;
    min-height: 44px;
    padding: 13px 12px;
}

.nav-list li a:hover,
.nav-list li a:focus-visible,
.nav-list li a.active,
.sidebar-nav .nav-item a:hover,
.sidebar-nav .nav-item a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-list > li > a::after,
.nav-item > a::after {
    background: linear-gradient(90deg, var(--brand-copper), var(--brand-blue));
    height: 2px;
}

.nav-item .arrow {
    color: rgba(255, 255, 255, 0.72);
}

.sub-menu {
    background: rgba(16, 24, 32, 0.95);
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
}

.sub-menu li a,
.nav-container.menu-collapsed .sidebar-nav .sub-menu a {
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px !important;
    font-weight: 500;
}

.sub-menu li a:hover,
.sub-menu li a:focus-visible,
.sub-menu li a.active {
    background: rgba(199, 116, 45, 0.18);
    color: #ffffff;
}

.page-trail {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--site-line);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(16, 24, 32, 0.06);
    color: var(--site-muted);
    font-size: 13px;
}

.page-trail a,
.text-link,
.product-more,
.product-back,
.product-link,
.resource-download-card span,
.contact-card a,
.product-resource-page .product-lead a,
#company-directions .direction-card strong {
    color: var(--brand-blue);
}

.text-link:hover,
.product-more:hover,
.product-back:hover,
.product-link:hover,
.contact-card a:hover,
.product-resource-page .product-lead a:hover,
#company-directions .direction-card strong:hover {
    color: var(--brand-copper-strong);
}

.section-kicker,
.social-kicker,
.reviews-kicker,
.vacancies-kicker,
.product-kicker,
.object-card span,
.home-news-card span,
.direction-card-copy span,
.engineering-list span,
.seo-grid article::before {
    color: var(--brand-copper);
}

.company-content,
.contact-card,
.contacts-map,
.product-card,
.product-list article,
.product-buying-guide,
.resource-download-card,
.reference-table-wrap,
.reference-figure,
.equipment-map-group,
.equipment-map-hero-media,
.direction-card,
.directions-section .direction-item,
.news-card,
.social-card,
.vacancy-card,
.partners-card,
.reviews-pages figure,
.engineering-list article,
.faq-list details,
.home-news-card,
.object-card,
.quick-access,
.product-view-switcher {
    background: var(--site-card);
    border-color: var(--brand-line);
    border-radius: 8px;
    box-shadow: var(--brand-shadow);
}

.company-content img,
.production-image,
.product-card-media,
.reference-figure img,
#company-directions .direction-card .image-container {
    background: #f7fafb;
    border-color: var(--brand-line);
    border-radius: 8px;
    box-shadow: none;
}

.product-card::before,
.resource-download-card::before,
#company-directions .direction-card::before {
    background: linear-gradient(90deg, var(--brand-copper), var(--brand-blue));
}

.product-card:hover,
.product-list article:hover,
.resource-download-card:hover,
.reference-figure:hover,
.equipment-map-group:hover,
.direction-card:hover,
.news-card:hover,
.social-card:hover,
.vacancy-card:hover,
.partners-card:hover,
.object-card:hover,
.home-news-card:hover,
.site-glow-surface:hover,
.site-glow-surface:focus-within {
    border-color: rgba(199, 116, 45, 0.42);
    box-shadow: var(--brand-shadow-strong);
}

.hero-button,
.product-hero-request,
.contacts-map-header a,
.product-view-switcher a.is-active,
.admin-button-primary,
.back-to-top {
    background: var(--brand-copper);
    border-color: var(--brand-copper);
    color: #ffffff;
}

.hero-button:hover,
.hero-button:focus-visible,
.product-hero-request:hover,
.product-hero-request:focus-visible,
.contacts-map-header a:hover,
.contacts-map-header a:focus-visible,
.back-to-top:hover {
    background: var(--brand-copper-strong);
    border-color: var(--brand-copper-strong);
    color: #ffffff;
}

.product-view-switcher a {
    color: var(--brand-text);
}

.product-view-switcher a:hover,
.product-view-switcher a:focus-visible,
.product-view-switcher a.is-active {
    background: var(--brand-blue);
    color: #ffffff;
}

.reference-table thead th,
.reference-table tfoot th,
.reference-table tfoot td,
.spec-table th,
.official-product-content th {
    background: var(--brand-blue-soft);
    color: var(--brand-text);
}

.reference-table th,
.reference-table td,
.spec-table th,
.spec-table td,
.official-product-content th,
.official-product-content td,
.contacts-map-header,
.seo-grid,
.seo-grid article,
.faq-list p {
    border-color: var(--brand-line);
}

.product-buying-guide li {
    background: var(--brand-blue-soft);
    border-left-color: var(--brand-copper);
}

.back-to-top {
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(169, 92, 26, 0.2);
}

.footer {
    background: linear-gradient(180deg, rgba(16, 24, 32, 0.98), #090d12 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer h4 {
    color: #ffffff;
}

.footer p,
.footer li,
.footer a {
    color: rgba(255, 255, 255, 0.76);
}

.footer a:hover {
    color: var(--color-accent-warm);
}

@media (max-width: 760px) {
    body:has(#hero) header {
        position: absolute;
    }

    .top-header .container {
        min-height: 0;
        padding: 10px 16px;
    }

    .logo-icon {
        width: 54px;
    }

    .company-name h1,
    .header-left .company-name h1 {
        font-size: clamp(20px, 5.5vw, 24px);
    }

    .company-name h2,
    .header-left .company-name h2 {
        font-size: clamp(11px, 3vw, 13px);
    }

    .nav-container.menu-collapsed .company-name2 {
        font-size: clamp(16px, 4.8vw, 21px);
    }
}

/* Reliable sticky menu behavior */
@supports (backdrop-filter: blur(18px)) {
    header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .top-header,
    .nav-container,
    #main-menu.fixed,
    .nav-container.fixed {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
}

#main-menu.fixed,
.nav-container.fixed {
    background: var(--site-header-fixed);
    background-color: var(--site-header-fixed);
    box-shadow: 0 12px 30px rgba(16, 24, 32, 0.12);
    left: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    transform: translate3d(0, 0, 0);
    width: 100% !important;
    z-index: 40000 !important;
}

#main-menu.fixed .nav-list,
.nav-container.fixed .nav-list {
    background: transparent;
    background-color: transparent;
}

/* Menu color lock for inner pages: normal, fixed and collapsed states stay graphite. */
:root {
    --site-header-glass: var(--color-header, #0d1822);
    --site-header-fixed: var(--color-header, #0d1822);
}

header,
body:has(#hero) header,
body:not(:has(#hero)) header,
.top-header,
header .menu-row,
.nav-container,
.nav-list,
#main-menu.fixed,
.nav-container.fixed,
.nav-container.menu-collapsed,
.nav-container.menu-collapsed .sidebar {
    background: var(--color-header) !important;
    background-color: var(--color-header) !important;
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

#main-menu.fixed,
.nav-container.fixed {
    box-shadow: 0 12px 30px rgba(16, 24, 32, 0.24);
}

.nav-list li {
    border-color: rgba(255, 255, 255, 0.14);
}

.nav-list li a,
.nav-container.menu-collapsed .sidebar-nav .nav-item a {
    color: rgba(255, 255, 255, 0.88);
}

.nav-list li a:hover,
.nav-list li a:focus-visible,
.nav-list li a.active,
.sidebar-nav .nav-item a:hover,
.sidebar-nav .nav-item a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Transparent hero header: keep the homepage menu over the slide, with crisp white text. */
body:has(#hero) header,
body:has(#hero) .top-header,
body:has(#hero) header .menu-row,
body:has(#hero) .nav-container,
body:has(#hero) .nav-list {
    background: rgba(16, 24, 32, 0.14) !important;
    background-color: rgba(16, 24, 32, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

body:has(#hero) .top-header {
    background: linear-gradient(90deg, rgba(16, 24, 32, 0.2), rgba(16, 24, 32, 0.1)) !important;
}

body:has(#hero) .nav-container,
body:has(#hero) .nav-list {
    background: rgba(16, 24, 32, 0.16) !important;
    background-color: rgba(16, 24, 32, 0.16) !important;
}

@supports (backdrop-filter: blur(18px)) {
    body:has(#hero) .top-header,
    body:has(#hero) .nav-container,
    body:has(#hero) .nav-list {
        -webkit-backdrop-filter: blur(16px) saturate(1.15);
        backdrop-filter: blur(16px) saturate(1.15);
    }
}

body:has(#hero) .company-name h1,
body:has(#hero) .company-name h2,
body:has(#hero) .header-left,
body:has(#hero) .header-right,
body:has(#hero) .contact-info p,
body:has(#hero) .contact-info a,
body:has(#hero) .nav-list li a,
body:has(#hero) .nav-item .arrow,
body:has(#hero) .language-switcher,
body:has(#hero) .language-switcher a {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.46);
}

body:has(#hero) .company-name h1,
body:has(#hero) .nav-list li a,
body:has(#hero) .contact-info a,
body:has(#hero) .header-action {
    font-weight: 700;
}

body:has(#hero) .company-name h2,
body:has(#hero) .contact-info p {
    color: rgba(255, 255, 255, 0.84) !important;
}

body:has(#hero) .nav-list li {
    border-color: rgba(255, 255, 255, 0.18);
}

body:has(#hero) .nav-list li a:hover,
body:has(#hero) .nav-list li a:focus-visible,
body:has(#hero) .nav-list li a.active {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff !important;
}

body:has(#hero) .header-action,
body:has(#hero) .header-action-catalog,
body:has(#hero) .header-action-request {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

body:has(#hero) .header-action:hover,
body:has(#hero) .header-action:focus-visible,
body:has(#hero) .header-action-catalog:hover,
body:has(#hero) .header-action-catalog:focus-visible,
body:has(#hero) .header-action-request:hover,
body:has(#hero) .header-action-request:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.58);
}

body:has(#hero) #header {
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 50000;
}

body:has(#hero) #header header {
    position: relative !important;
}

body:has(#hero) #main-menu.fixed,
body:has(#hero) .nav-container.fixed {
    background: rgba(16, 24, 32, 0.7) !important;
    background-color: rgba(16, 24, 32, 0.7) !important;
    box-shadow: 0 12px 30px rgba(16, 24, 32, 0.18);
}

/* Final homepage header reset: serious graphite header, slider below the menu. */
body:has(#hero) #header {
    height: auto !important;
    left: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
}

body:has(#hero) #header header,
body:has(#hero) header,
body:has(#hero) .top-header,
body:has(#hero) header .menu-row,
body:has(#hero) .nav-container,
body:has(#hero) .nav-list,
body:has(#hero) #main-menu.fixed,
body:has(#hero) .nav-container.fixed {
    background: var(--color-header) !important;
    background-color: var(--color-header) !important;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    color: #ffffff;
    position: relative;
}

body:has(#hero) #main-menu.fixed,
body:has(#hero) .nav-container.fixed {
    box-shadow: 0 12px 30px rgba(16, 24, 32, 0.24);
    position: fixed !important;
}

body:has(#hero) .company-name h1,
body:has(#hero) .company-name h2,
body:has(#hero) .header-left,
body:has(#hero) .header-right,
body:has(#hero) .contact-info p,
body:has(#hero) .contact-info a,
body:has(#hero) .nav-list li a,
body:has(#hero) .nav-item .arrow,
body:has(#hero) .language-switcher,
body:has(#hero) .language-switcher a {
    color: #ffffff !important;
    text-shadow: none;
}

body:has(#hero) .company-name h2,
body:has(#hero) .contact-info p {
    color: rgba(255, 255, 255, 0.74) !important;
}

body:has(#hero) .header-action,
body:has(#hero) .header-action-catalog,
body:has(#hero) .header-action-request {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    text-shadow: none;
}

body:has(#hero) .header-action-catalog {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Brand polish: graphite base, restrained copper accents. */
body:has(#hero) .top-header,
body:has(#hero) header .menu-row,
body:has(#hero) .nav-container,
body:has(#hero) .nav-list {
    border-color: rgba(255, 255, 255, 0.14);
}

body:has(#hero) .nav-list li a.active,
body:has(#hero) .nav-list li a:hover,
body:has(#hero) .nav-list li a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

body:has(#hero) .nav-list > li > a::after,
body:has(#hero) .nav-item > a::after {
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-warm));
}

body:has(#hero) .header-action-catalog:hover,
body:has(#hero) .header-action-catalog:focus-visible {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Final visual rhythm pass: keep the industrial contrast, but reduce hard cuts. */
:root {
    --brand-carbon: var(--color-header, #0d1822);
    --brand-carbon-2: var(--color-header-2, #17293a);
    --brand-carbon-3: var(--color-header-3, #24394b);
    --brand-blue: var(--color-accent, #d97825);
    --brand-blue-strong: var(--color-accent-hover, #b95f19);
    --brand-blue-soft: var(--color-accent-soft, #fff0e2);
    --brand-copper: var(--color-accent, #d97825);
    --brand-copper-strong: var(--color-accent-hover, #b95f19);
    --brand-copper-soft: var(--color-accent-soft, #fff0e2);
    --brand-paper: var(--color-surface, #ffffff);
    --brand-surface: var(--color-bg, #f4f8fb);
    --brand-surface-2: var(--color-bg-2, #e8f1f6);
    --brand-line: var(--color-line, rgba(17, 34, 52, 0.14));
    --brand-line-strong: var(--color-line-strong, rgba(17, 34, 52, 0.22));
    --brand-text: var(--color-text, #112234);
    --brand-muted: var(--color-muted, #586f82);
    --brand-shadow: var(--shadow-soft, 0 12px 34px rgba(17, 34, 52, 0.09));
    --brand-shadow-strong: var(--shadow-strong, 0 22px 56px rgba(17, 34, 52, 0.15));
    --site-ink: var(--brand-text);
    --site-muted: var(--brand-muted);
    --site-line: var(--brand-line);
    --site-surface: var(--brand-surface);
    --site-card: var(--color-card, rgba(255, 255, 255, 0.96));
    --site-accent: var(--brand-copper);
    --site-accent-strong: var(--brand-copper-strong);
    --site-green: var(--color-steel, #287a9f);
}

html {
    background: var(--brand-surface);
}

body {
    background:
        linear-gradient(180deg, #f6f8fa 0%, #ffffff 36%, #eef3f6 100%);
    color: var(--brand-text);
    transition: none;
}

body::before {
    opacity: 0.26;
}

header .container,
.top-header .container,
header .menu-row {
    box-sizing: border-box;
    height: auto !important;
}

header,
.top-header,
header .menu-row,
.nav-container,
.nav-list,
#main-menu.fixed,
.nav-container.fixed,
.nav-container.menu-collapsed,
.nav-container.menu-collapsed .sidebar,
body:has(#hero) #header header,
body:has(#hero) header,
body:has(#hero) .top-header,
body:has(#hero) header .menu-row,
body:has(#hero) .nav-container,
body:has(#hero) .nav-list,
body:has(#hero) #main-menu.fixed,
body:has(#hero) .nav-container.fixed {
    background: var(--brand-carbon) !important;
    background-color: var(--brand-carbon) !important;
    border-color: rgba(255, 255, 255, 0.12);
}

.top-header .container {
    min-height: 78px;
    padding: 10px clamp(20px, 4vw, 56px);
}

.logo {
    gap: 14px;
    padding-left: 0 !important;
}

.logo-icon {
    filter: none !important;
    height: auto;
    margin-right: 0;
    width: 52px;
}

.company-name h1,
.header-left .company-name h1 {
    color: #ffffff;
    font-size: clamp(24px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.05;
}

.company-name h2,
.header-left .company-name h2,
.contact-info p {
    color: rgba(255, 255, 255, 0.68) !important;
    font-weight: 500;
}

.header-right {
    align-items: center;
    gap: 18px;
}

.contact-info {
    border-right-color: rgba(255, 255, 255, 0.14);
    padding-right: 18px;
}

.contact-info a {
    color: #ffffff;
    font-weight: 700;
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-action,
.header-action-catalog,
.header-action-request,
body:has(#hero) .header-action,
body:has(#hero) .header-action-catalog,
body:has(#hero) .header-action-request {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    min-height: 34px;
    padding: 0 15px;
}

.header-action-catalog,
body:has(#hero) .header-action-catalog {
    background: var(--brand-copper);
    border-color: var(--brand-copper);
}

.header-action-request,
body:has(#hero) .header-action-request {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.24);
}

.header-action:hover,
.header-action:focus-visible,
.header-action-catalog:hover,
.header-action-catalog:focus-visible,
.header-action-request:hover,
.header-action-request:focus-visible {
    background: var(--brand-copper-strong);
    border-color: var(--brand-copper-strong);
}

header .menu-row,
.nav-container,
.nav-list {
    min-height: 44px;
}

.nav-list {
    justify-content: center;
    padding-left: clamp(14px, 3vw, 48px);
    padding-right: clamp(14px, 3vw, 48px);
}

.nav-list li {
    flex: 0 0 auto;
    margin: 0;
}

.nav-list li a,
.nav-container.menu-collapsed .sidebar-nav .nav-item a,
body:has(#hero) .nav-list li a {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 600;
    min-height: 44px;
    padding: 13px 12px;
    text-shadow: none !important;
}

.nav-list li a:hover,
.nav-list li a:focus-visible,
.nav-list li a.active,
body:has(#hero) .nav-list li a:hover,
body:has(#hero) .nav-list li a:focus-visible,
body:has(#hero) .nav-list li a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

.nav-list li a.active {
    box-shadow: inset 0 -2px 0 var(--brand-copper);
}

#main-menu.fixed,
.nav-container.fixed,
body:has(#hero) #main-menu.fixed,
body:has(#hero) .nav-container.fixed {
    box-shadow: 0 10px 26px rgba(16, 24, 32, 0.22);
    top: 0 !important;
}

.nav-placeholder {
    background: transparent;
}

.page-trail,
.company-content,
.contact-card,
.contacts-map,
.product-card,
.product-list article,
.product-buying-guide,
.resource-download-card,
.reference-table-wrap,
.reference-figure,
.equipment-map-group,
.equipment-map-hero-media,
.direction-card,
.directions-section .direction-item,
.news-card,
.social-card,
.vacancy-card,
.partners-card,
.reviews-pages figure,
.engineering-list article,
.faq-list details,
.home-news-card,
.object-card,
.quick-access,
.product-view-switcher {
    border-color: var(--brand-line);
    border-radius: 8px;
    box-shadow: var(--brand-shadow);
}

.product-card:hover,
.product-list article:hover,
.resource-download-card:hover,
.reference-figure:hover,
.equipment-map-group:hover,
.direction-card:hover,
.news-card:hover,
.social-card:hover,
.vacancy-card:hover,
.partners-card:hover,
.object-card:hover,
.home-news-card:hover,
.site-glow-surface:hover,
.site-glow-surface:focus-within {
    border-color: rgba(199, 116, 45, 0.34);
    box-shadow: var(--brand-shadow-strong);
}

.section-kicker,
.social-kicker,
.reviews-kicker,
.vacancies-kicker,
.product-kicker,
.object-card span,
.home-news-card span,
.direction-card-copy span,
.engineering-list span,
.seo-grid article::before {
    color: var(--brand-copper);
}

.text-link,
.product-more,
.product-back,
.product-link,
.resource-download-card span,
.contact-card a,
.product-resource-page .product-lead a,
#company-directions .direction-card strong {
    color: var(--brand-copper);
}

.text-link:hover,
.product-more:hover,
.product-back:hover,
.product-link:hover,
.contact-card a:hover,
.product-resource-page .product-lead a:hover,
#company-directions .direction-card strong:hover {
    color: var(--brand-copper-strong);
}

main a:not(.document-link) {
    color: var(--brand-copper);
}

main a:not(.document-link):hover {
    color: var(--brand-copper-strong);
}

main a:not(.document-link) * {
    color: inherit !important;
}

.document-link {
    align-items: center;
    background: rgba(169, 92, 26, 0.1);
    border: 1px solid rgba(169, 92, 26, 0.24);
    border-radius: 6px;
    color: var(--brand-copper) !important;
    display: inline-flex;
    font-family: var(--site-font-family) !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    padding: 9px 12px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.document-link:hover,
.document-link:focus-visible {
    background: rgba(169, 92, 26, 0.16);
    border-color: rgba(169, 92, 26, 0.42);
    color: var(--brand-copper-strong) !important;
}

.document-link * {
    color: inherit !important;
}

.document-link-row {
    margin: 18px 0 0;
    text-align: right;
}

@media (max-width: 760px) {
    .top-header .container {
        min-height: 68px;
        padding: 10px 16px;
    }

    .logo-icon {
        width: 48px;
    }

    .company-name h1,
    .header-left .company-name h1 {
        font-size: clamp(21px, 5.4vw, 24px);
    }

    .company-name h2,
    .header-left .company-name h2 {
        font-size: 12px;
    }
}

.site-particles {
    left: 0;
    mix-blend-mode: multiply;
    opacity: 0.88;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1;
}

header,
#header,
.back-to-top {
    position: relative;
    z-index: 200;
}

#header:empty {
    background: var(--brand-carbon, var(--color-header));
    min-height: 122px;
}

@media (max-width: 760px) {
    #header:empty {
        min-height: 112px;
    }
}

.sub-menu {
    left: 0;
    overflow: visible;
    position: absolute !important;
    top: 100%;
    z-index: 10000;
}

.submenu-item {
    position: relative;
}

.submenu-item > a {
    align-items: center;
    display: flex !important;
    gap: 18px;
    justify-content: space-between;
}

.submenu-caret {
    color: var(--brand-copper, var(--color-accent));
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.main-nav .menu-link-products + .sub-menu {
    max-width: min(360px, calc(100vw - 48px));
    min-width: 330px;
}

.main-nav .menu-link-products + .sub-menu > ul {
    display: grid;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
}

.main-nav .menu-link-products + .sub-menu .submenu-item {
    position: relative;
}

.main-nav .menu-link-products + .sub-menu > ul > li {
    padding: 3px 6px;
}

.main-nav .menu-link-products + .sub-menu > ul > li > a {
    font-size: 13px !important;
    line-height: 1.2;
    min-height: 32px;
    padding: 5px 8px;
}

.submenu-flyout {
    background: rgba(16, 24, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
    display: none;
    left: calc(100% + 22px);
    min-width: 360px;
    padding: 14px;
    position: absolute;
    top: -1px;
    white-space: normal;
    z-index: 10001;
}

body.menu-download-closing .main-nav > .nav-item.has-submenu > .sub-menu,
body.menu-download-closing .main-nav .submenu-item.has-flyout > .submenu-flyout {
    display: none !important;
}

body.menu-download-closing .main-nav > .nav-item.has-submenu > a .arrow {
    transform: none !important;
}

.main-nav .menu-link-products + .sub-menu .submenu-flyout {
    left: calc(100% + 18px);
    top: -1px;
}

.main-nav .menu-link-products + .sub-menu > ul > li:nth-last-child(-n+3) > .submenu-flyout {
    bottom: -1px;
    top: auto;
}

.submenu-flyout--wide {
    max-width: min(620px, calc(100vw - 48px));
    min-width: 500px;
    padding: 10px;
}

.submenu-flyout::before {
    content: "";
    inset: 0 auto 0 -23px;
    position: absolute;
    width: 23px;
}

.submenu-flyout p {
    color: var(--brand-copper, var(--color-accent));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0 0 8px;
    padding: 0 10px;
    text-transform: uppercase;
}

.submenu-survey-link {
    align-items: center;
    background: var(--brand-copper, var(--color-accent));
    border: 1px solid var(--brand-copper, var(--color-accent));
    border-radius: 5px;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    line-height: 1.2;
    margin: 0 10px 12px;
    min-height: 32px;
    padding: 7px 10px !important;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.submenu-survey-link::before,
.sub-menu li a.mobile-product-survey::before {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 3px;
    content: "PDF";
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
    height: 16px;
    justify-content: center;
    line-height: 1;
    width: 24px;
}

.submenu-survey-link:hover,
.submenu-survey-link:focus-visible {
    background: var(--brand-copper-strong, var(--color-accent-hover));
    border-color: var(--brand-copper-strong, var(--color-accent-hover));
    color: #ffffff !important;
    transform: translateY(-1px);
}

.submenu-survey-link--section {
    font-size: 11px !important;
    margin: 6px 0 8px;
    min-height: 28px;
    padding: 5px 8px !important;
}

.submenu-survey-link--inline {
    background: rgba(199, 116, 45, 0.12);
    border-color: rgba(199, 116, 45, 0.38);
    color: var(--color-accent-warm) !important;
    font-size: 11px !important;
    justify-content: flex-start;
    margin: -2px 0 5px;
    min-height: 27px;
    padding: 5px 8px !important;
    white-space: normal;
    width: 100%;
}

.submenu-survey-link--inline:hover,
.submenu-survey-link--inline:focus-visible {
    background: rgba(199, 116, 45, 0.24);
    border-color: rgba(240, 179, 109, 0.55);
}

.submenu-flyout ul {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-menu .submenu-flyout li {
    margin: 0;
    padding: 0;
}

.sub-menu .submenu-flyout li a {
    line-height: 1.35;
    padding: 9px 10px;
    white-space: normal;
}

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

.submenu-section {
    border-left: 1px solid rgba(199, 116, 45, 0.35);
    min-width: 0;
    padding-left: 8px;
}

.submenu-section--full {
    grid-column: 1 / -1;
}

.submenu-overview-link,
.submenu-section-title {
    border-radius: 4px;
    color: #ffffff;
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    padding: 6px 9px;
    text-decoration: none;
}

.submenu-overview-link {
    color: var(--brand-copper, var(--color-accent));
    text-transform: uppercase;
}

.submenu-section-title {
    background: rgba(255, 255, 255, 0.04);
}

.submenu-overview-link:hover,
.submenu-overview-link:focus-visible,
.submenu-section-title:hover,
.submenu-section-title:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.submenu-section ul {
    display: grid;
    gap: 1px;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}

.sub-menu .submenu-section li a {
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    padding: 5px 8px 5px 12px;
}

.mobile-product-survey {
    align-items: center;
    color: var(--color-accent-warm) !important;
    display: flex !important;
    gap: 8px;
    font-size: 12px !important;
    min-height: 34px !important;
    padding-left: 20px !important;
}

.sidebar-nav .nav-item a.mobile-menu-heading,
.nav-container.menu-collapsed .sidebar-nav .nav-item a.mobile-menu-heading {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72) !important;
    cursor: default;
    font-weight: 800;
}

.sidebar-nav .nav-item a.mobile-menu-heading:hover,
.sidebar-nav .nav-item a.mobile-menu-heading:focus-visible,
.nav-container.menu-collapsed .sidebar-nav .nav-item a.mobile-menu-heading:hover,
.nav-container.menu-collapsed .sidebar-nav .nav-item a.mobile-menu-heading:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72) !important;
}

.submenu-item.has-flyout:hover > a,
.sub-menu .submenu-flyout li a:hover,
.sub-menu .submenu-flyout li a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    color: #ffffff;
}

.submenu-item.has-flyout > a:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    outline: 1px solid rgba(240, 179, 109, 0.45);
    outline-offset: -1px;
}

.submenu-item.has-flyout:has(.submenu-flyout a.active) > a,
.submenu-item.has-flyout.is-current > a,
.sub-menu .submenu-flyout li a.active,
.submenu-overview-link.active,
.submenu-section-title.active {
    background: rgba(199, 116, 45, 0.24);
    border-bottom: 2px solid var(--brand-copper, var(--color-accent));
    box-shadow: inset 3px 0 0 var(--brand-copper, var(--color-accent));
    color: #ffffff;
}

.submenu-item.has-flyout:hover > a .submenu-caret,
.submenu-item.has-flyout.is-current > a .submenu-caret,
.submenu-item.has-flyout:has(.submenu-flyout a.active) > a .submenu-caret {
    color: var(--color-accent-warm);
}

.main-nav > .nav-item > a.menu-link::after {
    content: none !important;
}

.main-nav > .nav-item > a.menu-link:hover:not(.active),
.main-nav > .nav-item > a.menu-link:focus-visible:not(.active) {
    box-shadow: none;
}

.main-nav > .nav-item > a.menu-link.active {
    box-shadow: inset 0 -2px 0 var(--brand-copper, var(--color-accent));
}

body,
body :where(h1, h2, h3, h4, h5, h6, p, a, span, strong, em, ul, ol, li, sub, sup, button, input, textarea, select, label, table, th, td, figcaption) {
    font-family: var(--site-font-family) !important;
}

@media (hover: hover) and (pointer: fine) {
    .main-nav > .nav-item > .sub-menu.active {
        display: none;
    }

    .main-nav > .nav-item.has-submenu:hover > .sub-menu {
        display: block;
    }

    .main-nav > .nav-item.has-submenu:hover > a .arrow {
        transform: rotate(180deg);
    }

    .submenu-item.has-flyout:hover > .submenu-flyout {
        display: block;
    }
}

main,
#footer {
    position: relative;
}

.page-trail,
.object-card,
.object-solutions__intro,
.quick-access,
.home-stat,
#company-directions .direction-card,
.section-heading,
.home-engineering-copy,
.engineering-list article,
.seo-grid,
.seo-grid article,
.faq-list details,
.home-news-card,
.home-news__heading,
.home-cta > *,
.company-content,
.certificates-section,
.certificate-item,
.products-hero,
.product-kicker,
.product-detail > h1,
.product-lead,
.product-section,
.official-product-content,
.product-catalog,
.product-view-switcher,
.product-card,
.product-list article,
.product-buying-guide,
.resource-download-card,
.resource-download-section,
.reference-section,
.reference-table-wrap,
.reference-figure,
.equipment-map-hero,
.equipment-map-board,
.equipment-map-group,
.equipment-map-hero-media,
.contacts-section > h1,
.contacts-panel,
.contact-card,
.contacts-map,
.social-hero,
.social-list-panel,
.social-detail,
.social-project-card,
.social-life-panel,
.news-card,
.news-detail-body,
.vacancies-hero,
.vacancies-layout,
.vacancies-nav,
.vacancy-card,
.reviews-hero,
.reviews-preview,
.reviews-pages figure,
.partners-section > h2,
.partners-section > h3,
.partner,
.service-companies-list li,
.partners-card {
    position: relative;
    z-index: 2;
}

/* Final typography scale */
body {
    font-size: var(--type-body);
    line-height: var(--line-body);
}

body :where(p, li, td, th, figcaption) {
    line-height: var(--line-body);
}

.main-nav > .nav-item > a.menu-link,
.nav-list li a {
    font-size: var(--type-nav) !important;
    font-weight: 700;
    line-height: 1.2;
}

.header-action,
.header-action-catalog,
.header-action-request,
.product-hero-request,
.product-more,
.product-back,
.product-link,
.resource-download-card span,
.catalog-view-switcher a,
.product-view-switcher a {
    font-size: var(--type-nav) !important;
    font-weight: 700;
}

#hero .caption h1,
#hero .caption h2 {
    font-size: var(--type-display-title);
    font-weight: 700;
    line-height: 1.04;
}

#hero .caption p:not(.hero-kicker),
.products-hero p:not(.section-kicker),
.product-lead {
    font-size: var(--type-lead);
    line-height: 1.55;
}

.products-hero h1,
.product-detail h1,
.equipment-map-hero-copy h1,
.company-content h1,
.contacts-section > h1,
.social-hero h1,
.social-detail h1,
.vacancies-hero h1,
.reviews-hero h1 {
    font-size: var(--type-page-title) !important;
    font-weight: 700;
    line-height: 1.12;
}

.section-heading h2,
.company-overview h2,
.directions-section h2,
.product-section h2,
.product-section h3,
.reference-section h2,
.product-buying-guide h2,
.resource-download-card h2,
.resource-download-card h3,
.partners-section > h2,
.partners-section > h3,
.contacts-panel h2,
.social-list-panel h2,
.vacancies-layout h2,
.reviews-preview h2 {
    font-size: var(--type-section-title) !important;
    font-weight: 700;
    line-height: 1.15;
}

.product-card h2,
.direction-card h3,
.home-news-card h3,
.object-card h3,
.news-card h2,
.social-project-card h2,
.vacancy-card h2,
.partners-card h2 {
    font-size: var(--type-card-title) !important;
    font-weight: 700;
    line-height: 1.22;
}

.official-product-content,
.official-product-content p,
.official-product-content li,
.official-product-content td,
.official-product-content th,
.official-product-content span,
.official-product-content div {
    font-size: var(--type-body) !important;
    line-height: var(--line-body) !important;
}

.product-kicker,
.section-kicker,
.catalog-view-switcher span,
.submenu-flyout p {
    font-size: var(--type-xs) !important;
    font-weight: 700;
    letter-spacing: 0;
}

.main-nav .menu-link-products + .sub-menu > ul > li > a,
.sub-menu .submenu-section li a,
.sub-menu .submenu-flyout li a {
    font-size: var(--type-sm) !important;
    font-weight: 700;
}

.main-nav > .nav-item > .sub-menu {
    max-height: none !important;
    overflow: visible !important;
    scrollbar-width: none;
}

.main-nav > .nav-item > .sub-menu::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.main-nav > .nav-item > .sub-menu > ul > li {
    border-left: 0 !important;
    border-right: 0 !important;
}

.main-nav > .nav-item:not(.language-switcher) > .sub-menu > ul > li {
    padding: 3px 6px !important;
}

.main-nav > .nav-item:not(.language-switcher) > .sub-menu > ul > li > a {
    line-height: 1.22 !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
}

.main-nav .menu-link-products + .sub-menu > ul > li > a {
    line-height: 1.2 !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
}

html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    .site-particles {
        display: none;
    }
}