/* ============================================================
   site.css — единый CSS сайта (объединены roboto.css + core.css
   + home.css + pages.css + directions-engineering.css)
   ============================================================ */

@font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Диапазон весов: от тонкого до чёрного */
    font-style: normal;
    font-display: swap; /* Оптимизация отображения при загрузке */
}

@font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Диапазон весов: от тонкого до чёрного */
    font-style: italic;
    font-display: swap; /* Оптимизация отображения при загрузке */
}

/* Применение шрифта на всём сайте */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Базовый вес по умолчанию */
}
/* ============================================================
   core.css — ядро centring.ru (замена MaterializeCSS)
   Дизайн-база: 1920px. Шире — не растягивается (центрируется).
   Уже — плавно складывается. Мобильная версия — нижняя граница.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root {
    /* цвета (как в утверждённом дизайне) */
    --main-color: #8A46A7;
    --color2: #5B2282;
    --text-color: #414141;
    --light-grey: #929292;
    --black: #000;
    --white: #fff;

    /* макет */
    --page-max: 1920px;          /* дизайн-ширина, шире не растёт */
    --gutter: clamp(16px, 4vw, 100px);  /* боковые поля контейнера */
    --nav-h: clamp(120px, 10.4vw, 199px); /* высота шапки (fluid) */
    --nav-h-scroll: clamp(72px, 6.7vw, 129px);

    /* типографика — единый плавный масштаб (нижний → 1920px) */
    --fs-eyebrow: clamp(0.625rem, 0.53rem + 0.39vw, 1rem);      /* 10→16 мелкие капс-метки */
    --fs-body:    clamp(0.875rem, 0.82rem + 0.26vw, 1rem);      /* 14→16 основной текст */
    --fs-lead:    clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem);       /* 20→40 лид/крупный */
    --fs-h3:      clamp(1.25rem, 0.95rem + 1.2vw, 2rem);        /* 20→32 */
    --fs-title:   clamp(2rem, 1.1rem + 3.5vw, 4rem);            /* 32→64 заголовок секции */

    --lh-tight: 1.05;
    --lh-normal: 1.5;

    /* переходы */
    --t: .3s ease;
}

/* ---------- 2. БАЗА / СБРОС ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: #fff;
    color-scheme: only light;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color2); text-decoration: none; transition: color var(--t); }

h1, h2, h3, h4, p { margin: 0; }

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

:focus-visible { outline: 2px solid var(--main-color); outline-offset: 2px; }

/* ---------- 3. КОНТЕЙНЕР (центр, cap 1920) ---------- */
.container {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- 4. СЕТКА (CSS Grid, замена col s.. l..) ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(16px, 2vw, 40px);
}
/* колонки: .col-N (десктоп), .col-m-N (≤992) */
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
.start-2{grid-column-start:2}.start-3{grid-column-start:3}

/* типовой макет секций сайта: пустая колонка | лейбл | контент */
.section-grid {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    align-items: start;
}

@media (max-width: 992px) {
    .col-m-12{grid-column:span 12}.col-m-6{grid-column:span 6}
    .section-grid { grid-template-columns: 1fr; }
    .start-2, .start-3 { grid-column-start: auto; }
}

/* ---------- 5. ВИДИМОСТЬ (замена hide-on-*) ---------- */
@media (max-width: 992px)  { .hide-md-down { display: none !important; } }
@media (min-width: 993px)  { .hide-lg-up  { display: none !important; } }

/* ---------- 6. ТИПОГРАФИКА СЕКЦИЙ ---------- */
.eyebrow {                 /* «// метка» — капс, разрядка */
    text-transform: uppercase;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .6em;
    color: var(--color2);
    line-height: 1.5;
    /* nowrap ломал .section-grid: длинная метка раздувала 3fr-трек
       шире его честной доли и уводила колонку контента вправо —
       разные секции с разной длиной метки съезжали по-разному.
       Короткие метки (боевые «// история» и т.п.) не переносятся
       и без nowrap, длинные — переносятся на 2 строки. */
}
.section-title {
    text-transform: uppercase;
    font-size: var(--fs-title);
    font-weight: 300;
    line-height: var(--lh-tight);
    color: var(--black);
}
.lead {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.2;
}
.text { font-size: var(--fs-body); max-width: 44em; }
.text p + p { margin-top: 1em; }
.text ul { margin-top: .6em; padding-left: 1.4em; list-style: disc; }
.text ol { margin-top: .6em; padding-left: 1.4em; list-style: decimal; }
.text li { margin-bottom: .3em; }
.text a { color: var(--main-color); text-decoration: underline; }
.text a:hover { color: var(--color2); }

/* ---------- 7. СЕКЦИЯ ---------- */
.section { padding-block: clamp(40px, 4.7vw, 90px); }

/* ============================================================
   8. ШАПКА / НАВИГАЦИЯ
   ============================================================ */
.top-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    transition: height var(--t), background var(--t);
}
.top-nav.scroll {
    height: var(--nav-h-scroll);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.nav-inner {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
}

.brand-logo { flex-shrink: 0; }
.brand-logo img { height: clamp(40px, 2.7vw, 52px); width: auto; }

.top-menu {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(16px, 2vw, 32px);
}
.top-menu a {
    color: var(--white);
    white-space: nowrap;
    font-size: var(--fs-body);
}
.top-menu a:hover, .top-menu a.active { color: var(--main-color); }

.tm-contacts {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
    flex-shrink: 0;
}
.tm-contacts::before {           /* фиолетовая косая черта-разделитель */
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 17px; height: 46px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg width='17' height='56' viewBox='0 0 17 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9648 0.263184L0.964844 55.2632' stroke='%238A46A7' stroke-width='2' stroke-miterlimit='22.93'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tm-contacts a { color: var(--main-color); font-weight: 700; white-space: nowrap; }

.lang-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: clamp(44px, 3.4vw, 55px);
    aspect-ratio: 206 / 55;              /* родные пропорции плашки — скос не режется */
    padding-left: clamp(30px, 2.6vw, 42px);
    margin-right: calc(var(--gutter) * -1); /* уходит к правому краю (до границы 1920) */
    background: url('/assets/img/lang_bg.svg') no-repeat right center / contain;
    color: rgba(255,255,255,.5);
}
.lang-container .active { color: var(--white); font-weight: 700; }

/* бургер */
.mobile-menu { display: none; margin-left: auto; }
.mobile-menu a { color: #D9D9D9; font-size: 26px; line-height: 1; }

@media (max-width: 992px) {
    .top-menu, .tm-contacts { display: none; }
    .mobile-menu { display: block; }
    .nav-inner { gap: 16px; }
    /* компактная плашка РУ/EN справа (оба языка видны) */
    .lang-container {
        height: 40px;                 /* аспект 206/55 сохраняется → ~150px ширина */
        padding-left: 24px;
        gap: 8px;
        font-size: 14px;
    }
}

/* ---------- 8.1 МЕНЮ-2 (подменю секций) ---------- */
.menu2 { position: absolute; z-index: 101; left: 0; width: 100%; }
.menu2.fixed { position: fixed; top: var(--nav-h-scroll); }
.toc {
    display: flex;
    gap: clamp(24px, 3vw, 56px);
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    overflow: hidden;
}
.toc a {
    color: var(--white);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    white-space: nowrap;
}
.toc a.active { color: var(--color2); }

/* ---------- 8.2 SIDENAV (моб. меню, ванильный) ---------- */
.sidenav {
    position: fixed;
    top: 0; left: 0;
    width: 300px; max-width: 85vw; height: 100%;
    background: #1a0d24;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .3s ease;
    padding: 80px 0 20px;
    overflow-y: auto;
}
.sidenav.open { transform: translateX(0); }
.sidenav a { display: block; color: var(--white); padding: 14px 28px; font-size: 16px; }
.sidenav a:hover { background: rgba(255,255,255,.06); color: var(--main-color); }
.sidenav hr { border: none; border-top: 1px solid rgba(255,255,255,.15); margin: 12px 28px; }
.sidenav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 150; opacity: 0; visibility: hidden; transition: opacity .3s;
}
.sidenav-overlay.open { opacity: 1; visibility: visible; }

/* ============================================================
   9. ПОДВАЛ
   ============================================================ */
.page-footer {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: url('/assets/img/footer_bg.webp') center / cover,
                linear-gradient(180deg, #5B2282, #140714);
    padding-block: clamp(40px, 4.7vw, 90px);
}
.footer-eyebrow {
    font-weight: 700;
    font-size: var(--fs-body);
    letter-spacing: .3em;
    text-transform: uppercase;
}
/* строка над footer-grid: та же сетка колонок, что и у самого footer-grid,
   чтобы метка «// контакты» вставала строго над блоком телефона/адреса,
   а не съезжала к краю контейнера */
.footer-eyebrow-row {
    display: grid;
    grid-template-columns: 1fr 4fr 2fr 2fr;
    gap: clamp(20px, 2vw, 40px);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 4fr 2fr 2fr;
    gap: clamp(20px, 2vw, 40px);
    margin-top: clamp(24px, 3vw, 54px);
}
.footer-phone { font-size: var(--fs-lead); font-weight: 300; line-height: 1.1; margin-bottom: 1em; }
.footer-address-title { opacity: .5; margin-bottom: 4px; }
.footer-address { margin-bottom: 16px; }
.footer-menu a { display: block; color: var(--white); font-weight: 300; font-size: clamp(15px,1.1vw,20px); line-height: 1.9; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: clamp(24px, 3vw, 54px);
    font-size: var(--fs-body);
    color: rgba(255,255,255,.4);
}
.footer-bottom a { color: rgba(255,255,255,.4); }
.footer-bottom nav { display: flex; gap: 30px; }

@media (max-width: 992px) {
    .page-footer {
        background: url('/assets/img/footer_mob_bg.webp') center / cover,
                    linear-gradient(180deg, #5B2282, #140714);
    }
    .footer-eyebrow-row { grid-template-columns: 1fr; gap: 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-bottom { flex-direction: column; gap: 10px; }
}

/* пустые изображения (незаполненные поля в админке) не показываем */
img[src=""], img:not([src]) { display: none !important; }

/* ---------- страница 404 ---------- */
.err-page {
    text-align: center;
    /* у страницы нет баннера, поэтому отступ сверху считаем от реальной
       высоты фиксированной шапки — иначе цифра 404 уезжает под неё */
    padding-top: calc(var(--nav-h) + clamp(30px, 4vw, 70px));
}
.err-code {
    font-size: clamp(5rem, 18vw, 12rem);
    font-weight: 300;
    line-height: 1;
    color: var(--main-color);
    letter-spacing: -.04em;
}
.err-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color2);
    margin: clamp(8px, 1.4vw, 16px) 0 clamp(12px, 1.8vw, 20px);
}
.err-text {
    font-size: var(--fs-body);
    color: var(--text-color);
    max-width: 46em;
    margin: 0 auto clamp(24px, 3vw, 40px);
}
.btn-primary {
    display: inline-block;
    border: none;
    cursor: pointer;
    background: var(--main-color);
    color: var(--white);
    font-size: var(--fs-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .9em 2.4em;
    transition: background var(--t);
}
.btn-primary:hover { background: var(--color2); color: var(--white); }

/* ---------- cookie-уведомление ---------- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: #140714;
    color: var(--white);
    padding: clamp(16px, 2vw, 24px) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    transform: translateY(100%);
    transition: transform var(--t);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner-text {
    font-size: var(--fs-body);
    max-width: 60em;
    color: rgba(255, 255, 255, .8);
}
.cookie-banner-text a { color: var(--white); text-decoration: underline; }
.cookie-banner-text a:hover { color: var(--main-color); }
.cookie-banner-accept {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    background: var(--main-color);
    color: var(--white);
    font-size: var(--fs-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .9em 2em;
    transition: background var(--t);
}
.cookie-banner-accept:hover { background: var(--color2); }

/* ============================================================
   home.css — секции главной (на ядре core.css)
   Анимации слайдеров сохранены 1:1 из оригинала.
   Фрагильные фикс-размеры переведены на fluid, композиция
   привязана к контейнеру 1920 (шире не расползается).
   ============================================================ */

/* ========================= БАННЕР ========================= */
.banner {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 640px;
    max-height: 1080px;
    overflow: hidden;
    background: #000;
}

.banner-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center;
    background-size: cover;
    opacity: .5;
}
.banner-image::before {           /* левое затемнение под текст */
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 70%; height: 100%;
    background: linear-gradient(90deg, #000, rgba(0,0,0,0) 100%);
}
.banner-image::after {            /* нижнее затемнение */
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 50%;
    background: linear-gradient(0deg, #000, rgba(0,0,0,0) 100%);
}

/* водяной знак «ЦИ» — привязан к правому краю контейнера 1920, не к вьюпорту */
.banner-ci {
    position: absolute;
    z-index: 3;
    top: 34%;
    left: 50%;
    transform: translateX(calc(var(--page-max) / 2 - 528px));
    width: 1262px; height: 583px;
    pointer-events: none;
}
.banner-ci svg { width: 100%; height: 100%; }

/* контентная область баннера */
.banner .container { position: relative; z-index: 4; height: 100%; }
.banner-data {
    position: relative;
    z-index: 4;
    max-width: 62%;
    margin-top: clamp(160px, 15vw, 290px);
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 60px);
    color: #fff;
}
.banner-data .title {
    font-weight: 100;
    line-height: 1.2;
    font-size: clamp(1.75rem, 0.9rem + 2.7vw, 3.9rem);
    padding-right: clamp(0px, 8vw, 200px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.banner-data .text {
    padding-right: clamp(0px, 4vw, 110px);
    max-width: 46em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- анимация шторки (сохранена 1:1) --- */
.shutter {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 60px);
    padding-left: 150px;
    margin-left: -150px;
    min-height: 350px;

    --shutter-line-left-start: -130px;
    --shutter-line-left-end: 920px;
    --shutter-line-height-start: 70px;
    --shutter-line-height-end: 370px;
    --shutter-mask-start: -54px;
    --shutter-mask-end: 995px;

    mask-image: url("data:image/svg+xml,%3Csvg width='2437' height='585' viewBox='0 0 2437 585' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 585L160.5 0H2436.5V585H0Z' fill='black'/%3E%3C/svg%3E");
    mask-position: -100px 0;
    mask-repeat: no-repeat;
}
.shutter-line {
    display: block;
    position: absolute;
    left: var(--shutter-line-left-start);
    width: 100px;
    height: var(--shutter-line-height-start);
    border-right: 2px solid var(--main-color);
    transform: skew(-15deg);
    transform-origin: left top;
}
.banner.active .shutter { animation: 3s linear 0s 1 forwards shutter; }
.banner.active .shutter-line { animation: 3s linear 0s 1 forwards shutter-line; }
.banner.active .banner-image { animation: 3s linear 0s 1 forwards banner-image; }

@keyframes shutter {
    0%,10% { mask-position: var(--shutter-mask-start) 0; }
    50%    { mask-position: var(--shutter-mask-end) 0; }
    90%,100% { mask-position: var(--shutter-mask-start) 0; }
}
@keyframes shutter-line {
    0%   { left: var(--shutter-line-left-start); height: var(--shutter-line-height-start); }
    10%  { left: var(--shutter-line-left-start); height: var(--shutter-line-height-end); }
    50%  { left: var(--shutter-line-left-end);   height: var(--shutter-line-height-end); }
    90%  { left: var(--shutter-line-left-start); height: var(--shutter-line-height-end); }
    100% { left: var(--shutter-line-left-start); height: var(--shutter-line-height-start); }
}
@keyframes banner-image {
    0% { opacity: .5; } 50% { opacity: 0; } 100% { opacity: .5; }
}

/* --- кнопка «Подробнее» (фирменная форма) --- */
.btn-firm {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 148px; height: 39px; color: #fff;
}
.btn-firm svg { position: absolute; z-index: -1; }
.btn-firm path { fill: #5B2282; transition: fill .4s ease; }
.btn-firm:hover path { fill: #8A46A7; }
.btn-firm .shadow { left: 12px; top: 20px; width: 148px; height: 39px; filter: blur(8px); opacity: .5; transition: all .4s ease; }

/* --- навигация слайдера --- */
.banner-nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 20px); }
.banner-btn-prev, .banner-btn-next {
    width: clamp(28px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='white'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.banner-btn-prev { transform: scale(-1, -1); }
.banner-indicators { display: inline-flex; gap: 16px; margin-top: 2px; }
.banner-indicators li {
    width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box;
    cursor: pointer;
}
.banner-indicators li.active { background: #fff; }

@media (max-width: 992px) {
    .banner { height: 597px; min-height: 597px; }
    .banner-ci { width: 526px; height: 243px; top: 48%; transform: translateX(calc(50vw - 388px)); }
    .banner-data { max-width: 100%; margin-top: 150px; gap: 18px; }
    .banner-data .title { font-size: 1.75rem; font-weight: 300; -webkit-line-clamp: 5; padding-right: 0; }
    .banner-data .text { font-size: 14px; font-weight: 300; -webkit-line-clamp: 5; padding-right: 20px; }
    .shutter { min-height: auto; height: auto; gap: 14px;
        --shutter-line-left-end: 520px; --shutter-line-height-start: 40px; --shutter-mask-end: 595px; }
    .btn-firm { align-self: flex-start; color: var(--main-color); text-decoration: underline; width: auto; font-size: 13px; }
    .btn-firm svg { display: none; }
}

/* ========================= НАПРАВЛЕНИЯ (аккордеон) ========================= */
.directions .directions-content {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(24px, 3.6vw, 70px);
    align-items: start;
}
.directions .image { width: 100%; max-width: 513px; margin-top: 23px; }

.collapsible { max-width: 800px; margin-top: clamp(16px, 2.4vw, 32px); }
.collapsible li { list-style: none; }
.collapsible .collapsible-header {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 60px;
    padding: 5px 0;
    font-weight: 700;
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
    line-height: 1.2;
    text-transform: uppercase;
    border-bottom: 1px solid var(--light-grey);
    cursor: pointer;
    transition: color var(--t);
}
.collapsible .collapsible-header:hover { color: var(--color2); }
.collapsible .ch-title { width: 100%; max-width: 870px; }

.collapsible .collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    font-size: var(--fs-body);
    line-height: 1.3;
}
.collapsible li.active .collapsible-body { padding: 5px 0 10px; }
.collapsible .collapsible-body ul { display: inline-block; padding-left: 20px; max-width: 564px; list-style: disc; }
.collapsible .collapsible-body li { list-style: disc; line-height: 1.2; margin-bottom: 5px; }
.collapsible .collapsible-body a {
    position: relative; display: inline-block; padding-right: 25px;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94), padding .4s cubic-bezier(.25,.46,.45,.94);
}
.collapsible .collapsible-body a::after {
    content: "➤"; position: absolute; right: 0; top: 50%;
    transform: translateY(-50%) translateX(-6px); opacity: 0; font-size: .8em;
    transition: all .4s cubic-bezier(.25,.46,.45,.94);
}
.collapsible .collapsible-body a:hover { transform: translateX(4px); padding-right: 35px; }
.collapsible .collapsible-body a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* плюс-минус */
.collapsible .plus-minus {
    position: relative; flex-shrink: 0; margin-top: 10px;
    width: 16px; height: 16px; border-top: 1px solid var(--color2);
}
.collapsible .plus-minus::before {
    content: ""; position: absolute; top: 0; width: 16px; height: 0;
    border-top: 1px solid var(--color2);
    transform: rotate(90deg); transform-origin: 8px 0;
    transition: transform .3s ease;
}
.collapsible li.active .collapsible-header { border-bottom: none; color: var(--color2); }
.collapsible li.active .plus-minus::before { transform: rotate(180deg); }
.collapsible li:not(:has(.collapsible-body ul)) .plus-minus { display: none; }

@media (max-width: 992px) {
    .directions .directions-content { grid-template-columns: 1fr; margin-top: 20px; }
    .directions .image { display: none; }
    .collapsible .collapsible-header { gap: 20px; }
    .collapsible .collapsible-body { font-size: 14px; line-height: 1.3; }
    .collapsible .collapsible-body a { color: var(--color2); }
}

/* ========================= V-SHUTTER (общая анимация появления) ========================= */
.v-shutter {
    mask-image: linear-gradient(#000, #000);
    mask-repeat: no-repeat;
    mask-position: 0 -1000px;
    mask-size: 100% 100%;
}
.show-v-shutter .v-shutter, .show-v-shutter.v-shutter { animation: 1s linear 0s 1 forwards show-v-shutter; }
.hide-v-shutter .v-shutter, .hide-v-shutter.v-shutter { animation: 1s linear 0s 1 forwards hide-v-shutter; }
@keyframes show-v-shutter {
    0%      { mask-position: 0 var(--height, 100%); }
    95%,100%{ mask-position: 0 0; }
}
@keyframes hide-v-shutter {
    0%   { mask-position: 0 var(--height2, -100%); }
    100% { mask-position: 0 -1000px; }
}

/* ========================= ПРОЕКТЫ ========================= */
.projects { background: #ddd; }
.projects .text { max-width: 490px; }

.projects-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(24px, 3vw, 60px);
}
.projects-container { position: relative; height: clamp(420px, 34vw, 544px); }
.projects-container .project { position: absolute; inset: 0; width: 100%; }

.project-title {
    font-size: clamp(1.125rem, 0.9rem + 1vw, 2rem);
    font-weight: 700; line-height: 1; color: var(--color2);
    margin-bottom: clamp(20px, 2.5vw, 40px);
}
.project-image {
    position: relative;
    width: 100%;
    height: clamp(282px, 33vw, 525px);
    background: center / cover no-repeat;
}
.project-image::after {                   /* фиолетовый градиент справа */
    content: ""; position: absolute; right: 0; top: 0;
    width: 70%; height: 100%;
    background: linear-gradient(-90deg, #11011d, #5B2282 33%, rgba(91,34,130,0) 100%);
}

/* колонка данных (десктоп) */

/* боковая колонка данных проекта: карточки наложены (как в слайдере), а не в потоке */
.pdata-container { position: relative; }
.pdata-container .project { position: absolute; inset: 0; }
.pdata-container .project-title { margin-bottom: 18px; }
.pdata-container .project-data { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-body); }
.pdata-container .project-data-labels {
    white-space: nowrap; font-weight: 700; color: var(--light-grey);
    text-transform: uppercase; letter-spacing: .35em; line-height: 1.3;
}
.pdata-container .project-data-fields { line-height: 1.3; padding-bottom: 14px; }

/* данные под фото (мобильный) */
.project-image + .project-data { margin-top: 20px; }
.project-data-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.project-data-label {
    flex: 0 0 90px; font-size: 10px; font-weight: 700; letter-spacing: .3em;
    line-height: 1.4; color: var(--light-grey); text-transform: uppercase;
}
.project-data-field { font-size: 12px; line-height: 1.2; color: var(--text-color); }

.projects-nav {
    position: absolute;
    right: clamp(20px, 5vw, 100px);
    bottom: clamp(20px, 4vw, 60px);
    display: flex; align-items: center; gap: clamp(12px, 1.4vw, 16px);
}
.projects-btn-prev, .projects-btn-next {
    width: clamp(28px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='white'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.projects-btn-prev { transform: scale(-1, -1); }
.projects-indicators { display: inline-flex; gap: 16px; }
.projects-indicators li { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; cursor: pointer; }
.projects-indicators li.active { background: #fff; }

@media (max-width: 992px) {
    .projects-layout { grid-template-columns: 1fr; margin-top: 20px; }
    .pdata-container { display: none; }
    .projects-container { height: 480px; }
    .projects .text { max-width: 100%; }
    /* Затемнение нужно только под стрелками и точками навигации — они
       занимают нижние ~50px фото. Раньше градиент был плотным до 35% высоты
       и не сходил на нет до самого верха, из-за чего фотографии проектов
       выглядели сплошь фиолетовыми. Теперь верхняя половина фото чистая. */
    .project-image::after {
        width: 100%;
        background: linear-gradient(-8.58deg, #11011d 0%, rgba(91,34,130,.72) 18%, rgba(91,34,130,0) 48%);
    }
    .projects-nav { left: 20px; right: auto; top: auto; bottom: 180px; gap: 12px; }
    .projects-indicators li { width: 11px; height: 11px; }
}

/* ========================= ЦИФРЫ ========================= */
.numbers {
    position: relative;
    color: #fff;
    background: url('/assets/files/numbers/bg.webp') center / cover no-repeat;
    padding-block: clamp(40px, 4.7vw, 90px);
}
.numbers .eyebrow { color: #fff; }
.numbers .section-title { color: var(--main-color); }

.numbers-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(24px, 3vw, 60px);
    align-items: center;
}

/* логотипы предприятий */
.numbers-images { position: relative; height: clamp(68px, 16vw, 319px); }
.n-image {
    position: absolute; top: 50%; margin-top: -31px;
    width: 100%; height: 62px;
    background: left center / contain no-repeat;
}

/* блок с числами + шторка */
.numbers-numbers {
    overflow: hidden;
    position: relative;
    height: clamp(104px, 16.6vw, 319px);
    margin-left: -177px;
    padding-left: 177px;

    --shutter-line-left-start: 50px;
    --shutter-line-left-end: var(--width);
    --shutter-mask-start: -10px;
    --shutter-mask-end: calc(var(--width) - 60px);

    mask-image: url("data:image/svg+xml,%3Csvg width='2437' height='585' viewBox='0 0 2437 585' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 585L160.5 0H2436.5V585H0Z' fill='black'/%3E%3C/svg%3E");
    mask-position: -100px 0;
    mask-repeat: no-repeat;
}
.numbers-shutter-line {
    display: block; position: absolute;
    left: var(--shutter-line-left-start); top: 30px;
    width: 100px; height: 270px;
    border-right: 1px solid var(--main-color);
    transform: skew(-15deg); transform-origin: left top;
}
.n-number {
    display: none; position: absolute;
    height: 100%; align-items: center;
    width: calc(100% - 177px);
    gap: clamp(12px, 3.4vw, 66px);
}
.n-number.active { display: flex; }
.n-item { display: flex; flex-direction: column; align-items: center; }
.n-n {
    background: linear-gradient(-180deg, var(--main-color) 37%, #fff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.625rem, 0.06rem + 8.3vw, 10rem);
    font-weight: 100;
    line-height: 1.05;
}
.n-t { text-align: center; font-weight: 900; text-transform: uppercase; line-height: 1; }

/* текстовый блок + встречная шторка */
.numbers-texts-container { display: flex; margin-top: clamp(16px, 2vw, 40px); }
.numbers-texts {
    width: 50%;
    overflow: hidden; position: relative;
    margin-right: -100px; padding-right: 100px;

    --numbers-text-shutter-line-right-start: 50px;
    --numbers-text-shutter-line-right-end: var(--width);
    --numbers-text-shutter-mask-start: calc(-2437px + var(--width) - 49px);
    --numbers-text-shutter-mask-end: -2437px;

    mask-image: url("data:image/svg+xml,%3Csvg width='2437' height='585' viewBox='0 0 2437 585' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 585L0 0H2437L2277 585H0Z' fill='black'/%3E%3C/svg%3E");
    mask-position: var(--numbers-text-shutter-mask-start) 0;
    mask-repeat: no-repeat;
}
.numbers-text-shutter-line {
    display: block; position: absolute;
    right: var(--numbers-text-shutter-line-right-start); top: 0;
    width: 100px; height: 100%;
    border-right: 1px solid var(--main-color);
    transform: skew(-15deg); transform-origin: left top;
}
.n-text { display: none; height: 190px; overflow: hidden; }
.n-text.active { display: flex; }

.numbers-nav { padding-left: 100px; display: flex; align-items: center; gap: 16px; }
.numbers-btn-prev, .numbers-btn-next {
    width: clamp(28px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='white'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.numbers-btn-prev { transform: scale(-1, -1); }
.numbers-indicators { display: inline-flex; gap: 16px; }
.numbers-indicators li { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; cursor: pointer; }
.numbers-indicators li.active { background: #fff; }

/* анимации (перенесены 1:1) */
.numbers.active .numbers-numbers { animation: 2s linear 0s 1 forwards numbers-shutter; }
.numbers.active .numbers-shutter-line { animation: 2s linear 0s 1 forwards numbers-shutter-line; }
.numbers.active .numbers-texts { animation: 2s linear 0s 1 forwards numbers-text-shutter; }
.numbers.active .numbers-text-shutter-line { animation: 2s linear 0s 1 forwards numbers-text-shutter-line; }

@keyframes numbers-shutter {
    0%   { mask-position: var(--shutter-mask-start) 0; }
    50%  { mask-position: var(--shutter-mask-end) 0; }
    100% { mask-position: var(--shutter-mask-start) 0; }
}
@keyframes numbers-shutter-line {
    0%   { left: var(--shutter-line-left-start); }
    50%  { left: var(--shutter-line-left-end); }
    100% { left: var(--shutter-line-left-start); }
}
@keyframes numbers-text-shutter {
    0%   { mask-position: var(--numbers-text-shutter-mask-start) 0; }
    50%  { mask-position: var(--numbers-text-shutter-mask-end) 0; }
    100% { mask-position: var(--numbers-text-shutter-mask-start) 0; }
}
@keyframes numbers-text-shutter-line {
    0%   { right: var(--numbers-text-shutter-line-right-start); }
    50%  { right: var(--numbers-text-shutter-line-right-end); }
    100% { right: var(--numbers-text-shutter-line-right-start); }
}

@media (max-width: 992px) {
    .numbers {
        background-image: url('/assets/files/numbers/bg_mob.webp');
        padding-bottom: 70px;
    }
    .numbers-layout { grid-template-columns: 1fr; gap: 12px; }
    .numbers-images { height: 68px; }
    .n-image { height: 38px; margin-top: -19px; }
    .numbers-numbers {
        margin-left: -199px; padding-left: 199px;
        --shutter-line-left-start: 70px; --shutter-mask-start: 6px;
    }
    .numbers-shutter-line { top: 0; }
    .n-number { width: calc(100% - 199px); gap: 12px; justify-content: space-between; }
    .n-n { font-size: 42px; line-height: 1.4; }
    .n-t { font-size: 10px; font-weight: 300; }
    .numbers-texts-container { flex-direction: column; }
    .numbers-texts {
        width: 100%; font-size: 12px;
        padding-right: 40px; margin-right: -40px;
        --numbers-text-shutter-line-right-start: 0px;
        --numbers-text-shutter-mask-start: calc(-2437px + var(--width) + 1px);
    }
    .n-text { height: auto; min-height: 130px; }
    .numbers-nav { padding-left: 0; gap: 12px; margin-top: 16px; }
    .numbers-indicators { gap: 8px; }
    .numbers-indicators li { width: 11px; height: 11px; }
}

/* ========================= НОВОСТИ ========================= */
.news { overflow: hidden; background: #ddd; }
.news-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 9fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(20px, 2.5vw, 50px);
}
.news_year {
    display: block;
    border-bottom: 1px solid var(--light-grey);
    color: var(--light-grey);
    line-height: 44px;
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: .5em;
    cursor: pointer;
}
.news_year.active { color: var(--color2); }

.news-items-container {
    position: relative;
    overflow: hidden;
    height: clamp(490px, 40vw, 553px);
}
.news-items {
    position: absolute;
    left: 0; top: 0;
    display: none;
    gap: clamp(25px, 9vw, 176px);
    width: max-content;
    transition: left 1s ease-out;
}
.news-items.active { display: flex; }

.news-item {
    position: relative;
    width: clamp(279px, 21vw, 400px);
    color: var(--text-color);
    font-size: var(--fs-body);
}
.news-item::after {                    /* косая фиолетовая черта-разделитель */
    content: "";
    position: absolute;
    right: calc(clamp(25px, 9vw, 176px) / -2 - 8px);
    top: 228px;
    width: 17px; height: 61px;
    background: url("data:image/svg+xml,%3Csvg width='17' height='61' viewBox='0 0 17 61' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4831 0.128906L0.483093 60.1289' stroke='%238A46A7' stroke-miterlimit='22.93'/%3E%3C/svg%3E") no-repeat;
}
.news-item .modal-trigger { display: flex; flex-direction: column; gap: 15px; cursor: pointer; }
.news-image {
    position: relative;
    width: 100%;
    height: clamp(207px, 12.4vw, 238px);
    background: center / cover no-repeat;
}
.news-image::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(0deg, #5B2282 0%, rgba(91,34,130,0) 93%);
    transition: opacity .5s ease-out;
}
.news-item:hover .news-image::after { opacity: 0; }
.news-date { color: var(--light-grey); padding-top: 5px; }
.news-title {
    font-weight: 700; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-intro {
    font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-href { margin-top: 20px; font-size: 14px; color: var(--color2); font-weight: 700; text-decoration: underline; }

.news-nav { display: flex; align-items: center; gap: clamp(13px, 1.4vw, 16px); margin-top: clamp(20px, 2.5vw, 50px); }
.news-btn-prev, .news-btn-next {
    flex-shrink: 0;
    width: clamp(36px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='white'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.news-btn-prev { transform: scale(-1, -1); }
.news-indicators { display: inline-flex; gap: clamp(9px, 1vw, 16px); }
.news-indicators li { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; cursor: pointer; }
.news-indicators li.active { background: #fff; }

/* модалка новости */
.modal {
    position: fixed; inset: 0; z-index: 300;
    display: none; flex-direction: column; align-items: center;
    background: rgba(0,0,0,.5);
    padding: 5vh 16px;
    overflow-y: auto;
}
.modal.open { display: flex; }
.modal-content {
    background: #fff; max-width: 713px; width: 100%;
    padding: 0 0 20px;
    flex-shrink: 0;
}
.modal_news img { width: 100%; height: clamp(220px, 26vw, 374px); object-fit: cover; }
.modal_news .date { font-size: 16px; line-height: 3; color: var(--main-color); padding: 0 24px; }
.modal_news .title { font-size: 16px; line-height: 1.2; padding: 10px 24px; font-weight: 700; }
.modal_news .text { font-size: 14px; padding: 0 24px; }
.modal_news .text p + p { margin-top: 1em; }
.modal-footer {
    display: flex; justify-content: center;
    width: 100%; max-width: 713px;
    padding: 20px 0 40px;
    flex-shrink: 0;
    background: none;
}
.modal-close {
    display: block; width: 26px; height: 26px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.40381 17.5962L17.5962 8.4038' stroke='%23D9D9D9' stroke-width='2'/%3E%3Cpath d='M17.5967 17.5962L8.40429 8.4038' stroke='%23D9D9D9' stroke-width='2'/%3E%3Ccircle cx='13' cy='13' r='12' transform='matrix(-1 0 0 1 26 0)' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
}

@media (max-width: 992px) {
    .news-layout { grid-template-columns: 1fr; gap: 12px; }
    .news-items-container { margin-top: 10px; }
    .news-item::after { display: none; }
    .news-nav { margin-top: 20px; }
    .news-indicators li { width: 11px; height: 11px; }
}

/* ========================= КОМАНДА ========================= */
.team { position: relative; overflow: hidden; }
.team .eyebrow { color: var(--light-grey); }
.team .section-title { color: var(--color2); }

/* декоративные фоновые фигуры */
.team::before {
    content: "";
    position: absolute; left: 0; top: 70px; z-index: -1;
    width: clamp(111px, 26vw, 504px);
    aspect-ratio: 504 / 525;
    background: url("data:image/svg+xml,%3Csvg width='504' height='525' viewBox='0 0 504 525' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M406.393 0L504 98.6089L399.246 492.995L-94.4054 493L-192 394.391L-87.2583 0.00466517L406.393 0Z' fill='%23EAEAEA'/%3E%3Cg id='line'%3E%3Cline stroke='%23929292' x1='.87' y1='179.13' x2='-89.91' y2='525'/%3E%3C/g%3E%3Cuse xlink:href='%23line' transform='translate(10)'/%3E%3Cuse xlink:href='%23line' transform='translate(20)'/%3E%3Cuse xlink:href='%23line' transform='translate(30)'/%3E%3Cuse xlink:href='%23line' transform='translate(40)'/%3E%3Cuse xlink:href='%23line' transform='translate(50)'/%3E%3Cuse xlink:href='%23line' transform='translate(60)'/%3E%3Cuse xlink:href='%23line' transform='translate(70)'/%3E%3Cuse xlink:href='%23line' transform='translate(80)'/%3E%3Cuse xlink:href='%23line' transform='translate(90)'/%3E%3Cuse xlink:href='%23line' transform='translate(100)'/%3E%3Cuse xlink:href='%23line' transform='translate(110)'/%3E%3Cuse xlink:href='%23line' transform='translate(120)'/%3E%3Cuse xlink:href='%23line' transform='translate(130)'/%3E%3Cuse xlink:href='%23line' transform='translate(140)'/%3E%3Cuse xlink:href='%23line' transform='translate(150)'/%3E%3Cuse xlink:href='%23line' transform='translate(160)'/%3E%3Cuse xlink:href='%23line' transform='translate(170)'/%3E%3Cuse xlink:href='%23line' transform='translate(180)'/%3E%3Cuse xlink:href='%23line' transform='translate(190)'/%3E%3Cuse xlink:href='%23line' transform='translate(200)'/%3E%3Cuse xlink:href='%23line' transform='translate(210)'/%3E%3Cuse xlink:href='%23line' transform='translate(220)'/%3E%3Cuse xlink:href='%23line' transform='translate(230)'/%3E%3Cuse xlink:href='%23line' transform='translate(240)'/%3E%3Cuse xlink:href='%23line' transform='translate(250)'/%3E%3Cuse xlink:href='%23line' transform='translate(260)'/%3E%3Cuse xlink:href='%23line' transform='translate(270)'/%3E%3Cuse xlink:href='%23line' transform='translate(280)'/%3E%3Cuse xlink:href='%23line' transform='translate(290)'/%3E%3Cuse xlink:href='%23line' transform='translate(300)'/%3E%3Cuse xlink:href='%23line' transform='translate(310)'/%3E%3Cuse xlink:href='%23line' transform='translate(320)'/%3E%3Cuse xlink:href='%23line' transform='translate(330)'/%3E%3Cuse xlink:href='%23line' transform='translate(340)'/%3E%3Cuse xlink:href='%23line' transform='translate(350)'/%3E%3Cuse xlink:href='%23line' transform='translate(360)'/%3E%3Cuse xlink:href='%23line' transform='translate(370)'/%3E%3Cuse xlink:href='%23line' transform='translate(380)'/%3E%3Cuse xlink:href='%23line' transform='translate(390)'/%3E%3C/svg%3E") no-repeat left top / contain;
}
.team::after {
    content: "";
    position: absolute; right: 0; bottom: 0; z-index: -1;
    width: clamp(120px, 17vw, 322px);
    aspect-ratio: 322 / 346;
    background: url("data:image/svg+xml,%3Csvg width='322' height='346' viewBox='0 0 322 346' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M432.643 0L546 114.41L424.342 571.994L113.343 572L0 457.59L121.643 0.00566477L432.643 0Z' fill='%23EAEAEA'/%3E%3C/svg%3E") no-repeat right bottom / contain;
}

.team-layout {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(16px, 2vw, 40px);
}
.team-container {
    position: relative;
    /* высота следует за пропорцией фото — без пустот на средних ширинах */
    aspect-ratio: 2.12 / 1;
    min-height: 430px;
    max-height: 560px;
    margin-top: 20px;
}
.team-item {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 45% 55%;
    gap: clamp(16px, 2.2vw, 35px);
    align-items: end;              /* фото и текст на одной горизонтали */
}

/* левая колонка: фигурная подложка + фото */
.team .section-grid { position: relative; z-index: 2; }
.team-item-image-container { position: relative; height: 100%; overflow: visible; align-self: stretch; }
.team-item-image-container::before {        /* фиолетовая трапеция-подложка */
    content: "";
    position: absolute; left: -20%; bottom: 0;
    width: 120%; height: auto; max-height: 100%;
    aspect-ratio: 644 / 490;
    background: url("data:image/svg+xml,%3Csvg width='644' height='490' viewBox='0 0 644 490' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M594 38L473.569 489.999L0 490L120.431 38.0006L594 38Z' fill='url(%23g)'/%3E%3Cpath d='M525.009 444.499H59.6504L177.99 0.5H643.349L525.009 444.499Z' stroke='%238A46A7'/%3E%3Cdefs%3E%3ClinearGradient id='g' x1='607.298' y1='38' x2='607.298' y2='490' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235B2282'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat left bottom / contain;
}
.team-item-image {
    position: absolute; left: -16%; bottom: 0; z-index: 1;
    width: 112%; height: auto; max-height: 100%;
    aspect-ratio: 626 / 576;
    background: center bottom / contain no-repeat;
}

/* правая колонка: данные */
.team-item-data {
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(12px, 1.4vw, 20px);
    font-size: var(--fs-body);
    padding-bottom: 60px;          /* место под стрелки */
}
.team-item-name {
    font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
    line-height: 1.15;
    font-weight: 100;
}
.team-item-position { font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem); font-weight: 500; }
.team-item-content a { color: var(--color2); }

.team-nav {
    position: absolute;
    left: calc(45% + clamp(16px, 2.2vw, 35px));
    bottom: 0;
    display: flex; align-items: center; gap: clamp(12px, 1.4vw, 16px);
}
.team-btn-prev, .team-btn-next {
    width: clamp(28px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='%23929292'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='%23929292' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.team-btn-prev { transform: scale(-1, -1); }
.team-indicators { display: inline-flex; gap: clamp(8px, 1vw, 16px); }
.team-indicators li {
    width: 13px; height: 13px; box-sizing: border-box;
    border: 2px solid var(--light-grey); border-radius: 50%; cursor: pointer;
}
.team-indicators li.active { background: var(--light-grey); }

@media (max-width: 992px) {
    .team-layout { grid-template-columns: 1fr; }
    .team-container { aspect-ratio: auto; height: auto; min-height: 620px; max-height: none; }
    .team-item { grid-template-columns: 1fr; gap: 12px; align-items: start; }
    .team-item-image-container {
        height: 290px; align-self: start;
        max-width: 380px; width: 100%;
        margin-inline: auto;                 /* фото по центру экрана */
    }
    .team-item-data { align-items: center; text-align: center; }
    /* подложка и фото совмещены по одной геометрии */
    .team-item-image-container::before { left: -12%; width: 118%; }
    .team-item-image { left: -12%; width: 118%; }
    .team-item-data { justify-content: flex-start; margin-top: 0; padding-bottom: 50px; }
    .team-nav { left: 50%; transform: translateX(-50%); bottom: 0; }
    .team-indicators li { width: 11px; height: 11px; }
}


/* ========================= ОТЗЫВЫ (по макету) ========================= */
.feedbacks { overflow: hidden; }
.feedbacks .eyebrow { color: var(--light-grey); }
.feedbacks .section-grid { position: relative; z-index: 2; }

/* сетка: [отступ 4][фото 3][текст 5] / [отступ 4][навигация 3][логотипы 5] */
.feedbacks-layout {
    display: grid;
    grid-template-columns: 4fr 3fr 5fr;
    gap: clamp(16px, 2vw, 40px) clamp(16px, 2.5vw, 48px);
    margin-top: clamp(24px, 4vw, 70px);
    align-items: start;
}
.feedbacks-spacer { grid-column: 1; }
.feedbacks-spacer:nth-of-type(2) { grid-row: 2; }

/* фото автора в скошенной рамке */
.feedbacks-images { position: relative; grid-column: 2; height: clamp(150px, 14vw, 220px); }
.feedbacks-images::before {
    content: "";
    position: absolute; left: -6%; bottom: 0; z-index: 0;
    width: 112%; height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='411' height='283' viewBox='0 0 411 283' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M411 0L335.582 283L0 283L75.4179 0.000433116L411 0Z' fill='url(%23paint0_linear_294_1837)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_294_1837' x1='251.5' y1='0' x2='251.5' y2='283' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235B2282'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat left bottom / contain;
}
.feedback-image { position: absolute; inset: 0; z-index: 1; }
.feedback-image .logo { display: none; }
.feedback-image .foto {
    position: absolute; right: 4%; bottom: 0;
    max-height: 100%; width: auto;
}

/* текст отзыва в «кавычках» */
.feedbacks-texts { position: relative; grid-column: 3; min-height: clamp(150px, 14vw, 220px); }
.feedback-text { position: absolute; inset: 0; }
.f-content {
    position: relative;
    padding: 0 clamp(20px, 2.4vw, 34px);
    font-size: clamp(0.75rem, 0.7rem + 0.28vw, 0.875rem);
    line-height: 1.35;
    margin-bottom: clamp(10px, 1.4vw, 20px);
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.f-content::before { content: url("data:image/svg+xml,%3Csvg width='21' height='81' viewBox='0 0 21 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4832 0.128906L0.483154 60.1289' stroke='%238A46A7' stroke-miterlimit='22.93'/%3E%3Cpath d='M20.4832 20.1289L4.48315 80.1289' stroke='%238A46A7' stroke-miterlimit='22.93'/%3E%3C/svg%3E%0A"); position: absolute; left: 0; top: 0; }
.f-content::after  { content: url("data:image/svg+xml,%0A%3Csvg width='12' height='43' viewBox='0 0 12 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.48413 0.124512L0.484131 35.1245' stroke='%238A46A7' stroke-miterlimit='22.93'/%3E%3Cpath d='M11.4841 12.1245L3.48413 42.1245' stroke='%238A46A7' stroke-miterlimit='22.93'/%3E%3C/svg%3E%0A"); position: absolute; right: 0; bottom: 0; }
.f-content p { margin: 6px 0; }
.f-fio { font-weight: 700; padding-left: clamp(20px, 2.4vw, 34px); font-size: clamp(0.8125rem, 0.76rem + 0.26vw, 1rem); line-height: 1.8; }
.f-position { padding-left: clamp(20px, 2.4vw, 34px); font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.875rem); line-height: 1.2; color: var(--text-color); }

/* нижняя строка: навигация слева, лента логотипов справа */
.feedbacks-nav {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px);
    margin-top: clamp(20px, 3vw, 50px);
}
.feedbacks-btn-next {
    width: clamp(28px, 2.6vw, 36px); aspect-ratio: 1; cursor: pointer; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='%23929292'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='%23929292' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.feedbacks-indicators { display: inline-flex; gap: clamp(8px, 1vw, 14px); }
.feedbacks-indicators li {
    width: 11px; height: 11px; box-sizing: border-box;
    border: 2px solid var(--light-grey); border-radius: 50%; cursor: pointer;
}
.feedbacks-indicators li.active { background: var(--light-grey); }

.feedbacks-logos-container {
    grid-column: 3; grid-row: 2;
    position: relative; overflow: hidden;
    height: clamp(50px, 6vw, 90px);
    margin-top: clamp(20px, 3vw, 50px);
}
.feedbacks-logos {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; flex-wrap: nowrap;
    gap: clamp(24px, 4vw, 70px);
    transition: left 1s ease-out;
}
.feedback-logo { position: relative; flex-shrink: 0; }
.feedback-logo img { transition: opacity .5s ease-out; max-height: clamp(40px, 4.6vw, 70px); width: auto; }
.feedback-logo .grey-img { filter: brightness(.7); }
.feedback-logo .color-img { position: absolute; left: 0; top: 0; opacity: 0; }
.feedback-logo.active .color-img { opacity: 1; }
.feedback-logo.active .grey-img { opacity: 0; }

@media (max-width: 992px) {
    .feedbacks .section-title { color: var(--color2); }
    .feedbacks-layout { grid-template-columns: 1fr; gap: 16px; }
    .feedbacks-spacer { display: none; }
    /* по макету: плашка во всю ширину экрана, лого слева, фото справа целиком */
    .feedbacks-images {
        grid-column: 1;
        height: clamp(150px, 44vw, 190px);
        width: 100vw;
        margin-left: calc(var(--gutter) * -1);
    }
    .feedbacks-images::before {
        left: 0; width: 100%; height: 100%;
        background-size: cover;
        background-position: left center;
    }
    .feedback-image .logo {
        display: block; position: absolute;
        left: 12%; top: 50%; transform: translateY(-50%);
        width: clamp(100px, 30vw, 150px);
    }
    .feedback-image .foto {
        right: 8%; bottom: 0;
        height: 100%; width: auto; max-height: 100%;
    }
    .feedbacks-texts { grid-column: 1; position: static; min-height: 0; }
    .feedback-text { position: static; }
    .f-content { -webkit-line-clamp: 14; }
    .feedbacks-nav { grid-column: 1; grid-row: auto; margin-top: 16px; }
    .feedbacks-logos-container { display: none; }
}

/* ============================================================
   pages.css — внутренние страницы (на ядре core.css)
   title-block, подменю секций, направления с аккордеоном
   ============================================================ */

/* ========== ШАПКА-ЗАГОЛОВОК ВНУТРЕННЕЙ СТРАНИЦЫ ========== */
.banner.title-block {
    height: auto;
    min-height: clamp(320px, 31vw, 593px);
    max-height: none;
}
.banner.title-block .banner-data {
    margin-top: clamp(150px, 14vw, 263px);
    padding-bottom: clamp(30px, 4vw, 70px);
    max-width: 100%;
}
.banner.title-block .shutter {
    --shutter-line-height-start: 140px;
    min-height: auto;
}
.banner.title-block .title {
    font-size: clamp(2rem, 0.55rem + 6.2vw, 8rem);
    font-weight: 100;
    line-height: 1.05;
    color: #fff;
    white-space: nowrap;
    padding-right: 0;
    display: block;
    overflow: visible;
}
.banner.title-block .mob_text {
    padding-top: 20px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 300;
    letter-spacing: -.3px;
    color: #fff;
}

@media (max-width: 992px) {
    .banner.title-block { min-height: 320px; }
    .banner.title-block .banner-data { margin-top: 150px; }
    .banner.title-block .shutter {
        --shutter-line-height-start: 50px;
        --shutter-line-left-start: -100px;
    }
    .banner.title-block .title { white-space: normal; font-size: clamp(1.75rem, 6vw, 2.5rem); }
}

/* ========== ПОДМЕНЮ СЕКЦИЙ (menu2) ==========
   прозрачное, лежит поверх баннера под заголовком (как на боевом) */
.menu2 {
    position: sticky;                          /* прилипает к шапке при скролле */
    top: calc(var(--nav-h-scroll) - 4px);
    /* выше шапки (z-index:100), как на боевом (101 vs 100): у шапки при
       скролле backdrop-filter blur — если меню окажется ниже в стеке
       слоёв, этот блюр размывает его собственный текст */
    z-index: 101;
    width: 100%;
    margin-top: clamp(-96px, -6.5vw, -56px);   /* ложится поверх низа баннера */
    background: transparent;
    pointer-events: none;
    transition: background var(--t);
    padding-block: 10px;
}
/* Шапка и меню секций — один блок с общим градиентом, как на боевом:
   там .top-nav.with-menu2 растёт до 201px и меню ложится внутрь него.
   Свой фон и размытие у меню давали видимую полосу на стыке. */
@media (min-width: 993px) {
    .top-nav.with-menu2,
    .top-nav.with-menu2.scroll {
        height: 201px;
        align-items: flex-start;   /* содержимое — в верхнюю часть блока */
    }
    /* Логотип и ссылки занимают ту же высоту, что и в обычной шапке, а нижняя
       часть блока остаётся липкому меню секций. Без этого содержимое
       центрировалось по всей высоте 201px и оказывалось ровно там, где
       прилипает меню, — текст меню ложился поверх логотипа и пунктов. */
    .top-nav.with-menu2 .nav-inner { height: var(--nav-h); }
    .top-nav.with-menu2.scroll .nav-inner { height: var(--nav-h-scroll); }
}
.menu2.stuck {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.menu2.stuck .toc a { color: #fff; }
.menu2.stuck .toc a:hover { color: var(--main-color); }
.menu2.stuck .toc a.active { color: var(--color2); }
.menu2 .toc {
    display: flex;
    gap: clamp(24px, 3vw, 56px);
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    overflow: hidden;
    pointer-events: auto;
}
.menu2 .toc a {
    color: #fff;
    font-size: clamp(0.75rem, 0.7rem + 0.28vw, 1rem);
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--t);
}
.menu2 .toc a:hover { color: var(--main-color); }
.menu2 .toc a.active { color: var(--color2); }

/* баннер-заголовок служит контейнером для меню.
   menu2 тянет следующий за баннером блок вверх отрицательным
   margin-top (чтобы подменю легло поверх низа баннера) — из-за
   этого следующая секция геометрически заходит под баннер на ~50px.
   Без z-index она (как более поздний элемент потока) перекрывает
   своим фоном хвост баннера: на белых секциях цвета совпадают и шва
   не видно, а на секциях с grey_bg (Услуги) виден серый шов вместо
   тёмного фона баннера. */
.banner.title-block { position: relative; z-index: 1; }

/* ========== НАПРАВЛЕНИЯ НА СТРАНИЦЕ УСЛУГ ========== */
.directions-engineering {
    position: relative;
    --bgcolor: #fff;
}
.directions-engineering .container { position: relative; z-index: 2; }
.directions-engineering.grey_bg { background: #ddd; --bgcolor: #ddd; }

.directions-engineering .section-title { margin-bottom: clamp(20px, 2.6vw, 40px); }
.directions-engineering .image { margin-top: 0; }
.directions-engineering .text {
    max-width: 897px;
    margin-bottom: clamp(24px, 3.2vw, 60px);
}

/* размытая подложка-фото на мобильном */
.directions-engineering .image-blur { display: none; }

@media (max-width: 992px) {
    .directions-engineering .image-blur {
        display: block;
        position: absolute;
        left: 0; top: 65px;
        width: 100%;
        z-index: 1;
    }
    .directions-engineering .image-blur img {
        width: 100%;
        height: clamp(300px, 62vw, 479px);
        object-fit: cover;
    }
    /* Мягкий переход фото в фон секции.
       Раньше тут были backdrop-filter + mask-image: в iOS Safari эта пара не
       отрабатывает — подложка пропадала, и заголовок с текстом оказывались
       прямо на фотографии. Оставлен только градиент: выглядит так же, но
       одинаково рисуется во всех браузерах. */
    .directions-engineering .image-blur::before {
        content: "";
        position: absolute;
        left: 0; bottom: -10px;
        width: 100%; height: 147px;
        background: linear-gradient(0deg, var(--bgcolor) 0%, var(--bgcolor) 22%, rgba(234,234,234,0) 88%);
    }
    /* фирменный уголок у нижнего левого края фото — перенесён из старого
       directions-engineering.css, который целиком удалён как дублирующий */
    .directions-engineering .image-blur::after {
        content: "";
        position: absolute;
        left: 0; bottom: -10px;
        width: 42px; height: 79px;
        background: url("data:image/svg+xml,%3Csvg width='42' height='79' viewBox='0 0 42 79' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-42 79L-20.7828 0H42L20.7828 79H-42Z' fill='url(%23paint0_linear_555_1893)' fill-opacity='0.9'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_555_1893' x1='-28.7542' y1='79' x2='-28.7542' y2='-0.000107881' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235B2282'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat;
    }
    .directions-engineering .section-title {
        margin-top: clamp(280px, 68vw, 452px);
        font-size: clamp(1.75rem, 7vw, 2.1rem);
        letter-spacing: -.5px;
    }
    .directions-engineering .text { margin: 10px 0 30px; }
}

/* ========== ПРОДУКЦИЯ ========== */
.products { position: relative; }

/* липкое меню продуктов — на sticky вместо JS-фиксации */
.products-menu-container {
    position: sticky;
    top: calc(var(--nav-h-scroll) + 80px);
    height: 0;                       /* не занимает место в потоке */
    z-index: 4;
    pointer-events: none;
}
.products-menu-inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
}
.products-menu { grid-column: 2; }
.products-menu li {
    font-size: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
    font-weight: 700;
    padding: clamp(6px, 0.8vw, 10px) 0;
    color: var(--text-color);
}
.products-menu li::after {
    content: "";
    display: block;
    position: relative;
    top: 10px;
    width: clamp(100px, 11vw, 165px);
    border-bottom: 1px solid var(--light-grey);
}
.products-menu li.active { color: var(--color2); }
.products-menu li a { color: inherit; display: block; transition: color var(--t); }
.products-menu li a:hover { color: var(--color2); }

.products .text { max-width: 897px; margin-top: clamp(20px, 2.6vw, 40px); }

/* карточка продукта */
.product-container { position: relative; overflow: hidden; }
.product-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    align-items: stretch;
}
.product {
    grid-column: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: clamp(24px, 3vw, 56px);
    z-index: 2;
}
.p-title {
    display: block;
    font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
    font-weight: 700;
    color: var(--color2);
    position: relative;
    z-index: 4;
    max-width: 40%;
    transition: color var(--t);
}
.p-title:hover { color: var(--main-color); }
.p-title::after {
    content: "";
    display: inline-block;
    position: relative;
    top: 5px; left: 37px;
    width: 11px; height: 33px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 10.9258 32.5415' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10.925781' height='32.541504' fill='none' customFrame='%23000000'%3E%3Cpath id='Слеш фиолетовый' d='M9.96289 0.270752L0.962891 32.2708' stroke='rgb(138,70,167)' stroke-width='2.000000' /%3E%3C/svg%3E%0A") no-repeat center / contain;
}
.p-data-container {
    display: flex; flex-direction: column; gap: 10px;
    max-width: 46%;
    position: relative;
    z-index: 3;
    margin-top: clamp(280px, 38vw, 690px);  /* всегда ниже изображения */
}
.p-data { display: flex; gap: clamp(10px, 1.4vw, 20px); font-size: var(--fs-body); }
.p-data-label {
    flex-shrink: 0;
    width: clamp(110px, 11vw, 194px);
    font-weight: 700;
    color: var(--light-grey);
    text-transform: uppercase;
    letter-spacing: .35em;
    line-height: 1.4;
}
.p-data-field { color: var(--text-color); line-height: 1.3; }

/* изображение продукта с фиолетовой подложкой */
.p-image-container {
    position: absolute;
    z-index: 1;
    right: 0; top: clamp(80px, 7vw, 130px);   /* ниже заголовка продукта */
    width: min(62%, calc(50% + var(--page-max) / 2 - 30%));
    height: clamp(280px, 36vw, 620px);        /* фиксированная зона под картинку */
    pointer-events: none;
}
.p-image-container::before {          /* фиолетовый градиент-подложка */
    content: "";
    position: absolute;
    left: 0; top: 12%;
    width: 100%; height: 76%;
    background: linear-gradient(-10.73deg, #11011d 1%, #5B2282 61%, #5B2282 93%);
}
.p-image-container::after {           /* контурная рамка */
    content: "";
    position: absolute;
    right: 0; top: 15%;
    width: 100%; max-width: 863px; height: 70%;
    background: url("data:image/svg+xml,%3Csvg width='863' height='469' viewBox='0 0 863 469' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1143.13 0L1236 93.8085L1136.33 468.995L92.8587 469L0 375.192L99.659 0.00465414L1143.13 0Z' fill='%2311011D' fill-opacity='0.5'/%3E%3C/svg%3E%0A") no-repeat right center / contain;
}
.p-image {
    position: absolute;
    z-index: 3;
    right: 0; top: 6%;
    width: 100%; height: 88%;      /* только верхняя часть карточки — не спускается на данные */
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .8s ease, transform .8s ease;
}
.p-image.active { opacity: 1; transform: translateX(0); }
.p-image img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }

.product-underline { margin-top: clamp(16px, 2vw, 30px); }
.product-underline .underline { border-bottom: 1px solid var(--light-grey); }

@media (max-width: 992px) {
    .products-menu-container { display: none; }

    /* порядок на мобильном: изображение → заголовок → данные */
    .product-container { display: flex; flex-direction: column; }
    .product-container > .container { order: 2; }
    .product-layout { grid-template-columns: 1fr; }
    .product {
        grid-column: 1;
        padding-block: 16px 0;
    }
    .p-title, .p-data-container { max-width: 100%; }
    .p-title::after { left: 16px; }

    .p-image-container {
        order: 1;
        position: relative;
        top: auto; right: auto;
        width: 100%;
        height: clamp(200px, 54vw, 320px);
        margin-block: 14px;
    }
    .p-image-container::before { top: 6%; height: 88%; }
    .p-image-container::after { display: none; }
    .p-image { top: 4%; height: 92%; opacity: 1; transform: none; }
    .p-image img { object-position: center; }

    /* данные идут после изображения — сбрасываем десктопный отступ */
    .p-data-container {
        margin-top: 0;
        max-width: 100%;
    }
    .p-data { flex-direction: column; gap: 2px; }
    .p-data-label { letter-spacing: .2em; font-size: 10px; width: auto; }
    .product-underline { order: 3; }
}

/* ========================= КОНТАКТЫ ========================= */
.contacts { padding-bottom: clamp(40px, 5vw, 95px); }

.contact {
    position: relative;
    padding-block: clamp(40px, 6vw, 118px) clamp(28px, 3vw, 52px);
}
.contact:first-child { padding-top: clamp(30px, 4.7vw, 90px); }

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 4fr 7fr;
    gap: clamp(16px, 2vw, 40px);
    align-items: start;
}
.c-map { grid-column: 2; }
.c-map iframe, .c-map img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    display: block;
}
.c-body { grid-column: 3; }

.c-title {
    text-transform: uppercase;
    font-size: clamp(1.5rem, 0.95rem + 2.33vw, 3.75rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--black);
}

.c-data-container { padding-top: clamp(16px, 2vw, 25px); }
.c-data {
    display: flex;
    padding-block: clamp(8px, 1vw, 12px);
    font-size: var(--fs-body);
}
.c-data-label {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    color: var(--light-grey);
    text-transform: uppercase;
    letter-spacing: .25em;
    width: clamp(96px, 9vw, 130px);
    margin-right: clamp(12px, 1.4vw, 20px);
}
.c-data-field { color: var(--text-color); line-height: 1.5; }
.c-data-field .cdf-title { color: var(--light-grey); }
.cdf-item { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cdf-icon img { width: 18px; height: 18px; }

/* ссылка на карточку предприятия */
.c-data-field a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.25rem);
    font-weight: 700;
    color: var(--color2);
    line-height: 1.5;
}
.c-data-field a::before {
    content: "";
    flex-shrink: 0;
    width: 33px; height: 30px;
    background: url("data:image/svg+xml,%0A%3Csvg width='33' height='30' viewBox='0 0 33 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='33' height='30' fill='%235B2282'/%3E%3Cpath d='M16.6464 22.8536C16.8417 23.0488 17.1583 23.0488 17.3536 22.8536L20.5355 19.6716C20.7308 19.4763 20.7308 19.1597 20.5355 18.9645C20.3403 18.7692 20.0237 18.7692 19.8284 18.9645L17 21.7929L14.1716 18.9645C13.9763 18.7692 13.6597 18.7692 13.4645 18.9645C13.2692 19.1597 13.2692 19.4763 13.4645 19.6716L16.6464 22.8536ZM17 5.5H16.5V22.5H17H17.5V5.5H17Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.contact-underline {
    border-bottom: 1px solid var(--light-grey);
    max-width: var(--page-max);
    margin-inline: auto;
    margin-right: 0;
    width: calc(100% - var(--gutter));
}

@media (max-width: 992px) {
    .contact-layout { grid-template-columns: 1fr; }
    .c-map, .c-body { grid-column: 1; }
    .c-map { order: 2; margin-top: 16px; }
    .c-body { order: 1; }
    .c-data { flex-direction: column; gap: 4px; }
    .c-data-label { width: auto; font-size: 10px; letter-spacing: .2em; }
    .c-data-field a { gap: 12px; }
    .c-data-field a::before { width: 28px; height: 26px; }
    .contact-underline { width: 100%; }
}

/* ========== КОНТАКТЫ ========== */
.contacts { padding-bottom: clamp(40px, 5vw, 95px); }
.contact {
    position: relative;
    padding-block: clamp(40px, 6.2vw, 118px) clamp(28px, 2.8vw, 52px);
}
.contact:first-child { padding-top: clamp(30px, 4.7vw, 90px); }

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 4fr 7fr;
    gap: clamp(16px, 2vw, 40px);
    align-items: start;
}
.c-image { grid-column: 2; }
.c-image iframe, .c-image img {
    width: 100%;
    height: clamp(200px, 20vw, 340px);
    border: 0;
    display: block;
}
.c-body { grid-column: 3; }

.c-title {
    text-transform: uppercase;
    font-size: clamp(1.5rem, 0.95rem + 2.33vw, 3.75rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--black);
}

.c-data-container { padding-top: clamp(16px, 1.7vw, 25px); }
.c-data {
    display: flex;
    padding-block: clamp(8px, 0.8vw, 12px);
    font-size: var(--fs-body);
}
.c-data-label {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    color: var(--light-grey);
    text-transform: uppercase;
    letter-spacing: .25em;
    width: clamp(90px, 9vw, 130px);
    margin-right: clamp(12px, 1.4vw, 20px);
}
.c-data-field { color: var(--text-color); line-height: 1.5; }
.cdf-title { color: var(--light-grey); }

.cdf-item { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cdf-icon img { width: 20px; height: 20px; }

.c-data-field a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.25rem);
    font-weight: 700;
    color: var(--color2);
    line-height: 1.5;
}
.c-data-field a::before {
    content: "";
    flex-shrink: 0;
    width: 33px; height: 30px;
    background: url("data:image/svg+xml,%0A%3Csvg width='33' height='30' viewBox='0 0 33 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='33' height='30' fill='%235B2282'/%3E%3Cpath d='M16.6464 22.8536C16.8417 23.0488 17.1583 23.0488 17.3536 22.8536L20.5355 19.6716C20.7308 19.4763 20.7308 19.1597 20.5355 18.9645C20.3403 18.7692 20.0237 18.7692 19.8284 18.9645L17 21.7929L14.1716 18.9645C13.9763 18.7692 13.6597 18.7692 13.4645 18.9645C13.2692 19.1597 13.2692 19.4763 13.4645 19.6716L16.6464 22.8536ZM17 5.5H16.5V22.5H17H17.5V5.5H17Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.contact-underline {
    margin-top: clamp(24px, 3vw, 52px);
    border-bottom: 1px solid var(--light-grey);
}

@media (max-width: 992px) {
    .contact-layout { grid-template-columns: 1fr; }
    .c-image, .c-body { grid-column: 1; }
    .c-image { margin-block: 16px; }
    .c-data { flex-direction: column; gap: 4px; }
    .c-data-label { width: auto; font-size: 10px; letter-spacing: .2em; }
    .c-data-field a { font-size: 14px; gap: 10px; }
    .c-data-field a::before { width: 26px; height: 24px; }
}

/* ========== ОБУЧЕНИЕ ========== */
.education-info, .education-team, .education-files { position: relative; overflow: hidden; }
.education-info .container,
.education-team .container,
.education-files .container { position: relative; z-index: 2; }
.grey_bg { background: #ddd; }

/* декоративная диагональная штриховка слева — перенесена с боевого
   (direction-education-team.css), только на десктопе: на узких экранах
   заслоняла бы контент */
.education-team::before {
    content: "";
    display: none;
    position: absolute;
    left: 0; top: 70px;
    width: 504px; height: 525px;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='504' height='525' viewBox='0 0 504 525' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M406.393 0L504 98.6089L399.246 492.995L-94.4054 493L-192 394.391L-87.2583 0.00466517L406.393 0Z' fill='%23EAEAEA'/%3E%3Cg id='line'%3E%3Cline stroke='%23929292' x1='.87' y1='179.13' x2='-89.91' y2='525'/%3E%3C/g%3E%3Cuse xlink:href='%23line' transform='translate(10)'/%3E%3Cuse xlink:href='%23line' transform='translate(20)'/%3E%3Cuse xlink:href='%23line' transform='translate(30)'/%3E%3Cuse xlink:href='%23line' transform='translate(40)'/%3E%3Cuse xlink:href='%23line' transform='translate(50)'/%3E%3Cuse xlink:href='%23line' transform='translate(60)'/%3E%3Cuse xlink:href='%23line' transform='translate(70)'/%3E%3Cuse xlink:href='%23line' transform='translate(80)'/%3E%3Cuse xlink:href='%23line' transform='translate(90)'/%3E%3Cuse xlink:href='%23line' transform='translate(100)'/%3E%3Cuse xlink:href='%23line' transform='translate(110)'/%3E%3Cuse xlink:href='%23line' transform='translate(120)'/%3E%3Cuse xlink:href='%23line' transform='translate(130)'/%3E%3Cuse xlink:href='%23line' transform='translate(140)'/%3E%3Cuse xlink:href='%23line' transform='translate(150)'/%3E%3Cuse xlink:href='%23line' transform='translate(160)'/%3E%3Cuse xlink:href='%23line' transform='translate(170)'/%3E%3Cuse xlink:href='%23line' transform='translate(180)'/%3E%3Cuse xlink:href='%23line' transform='translate(190)'/%3E%3Cuse xlink:href='%23line' transform='translate(200)'/%3E%3Cuse xlink:href='%23line' transform='translate(210)'/%3E%3Cuse xlink:href='%23line' transform='translate(220)'/%3E%3Cuse xlink:href='%23line' transform='translate(230)'/%3E%3Cuse xlink:href='%23line' transform='translate(240)'/%3E%3Cuse xlink:href='%23line' transform='translate(250)'/%3E%3Cuse xlink:href='%23line' transform='translate(260)'/%3E%3Cuse xlink:href='%23line' transform='translate(270)'/%3E%3Cuse xlink:href='%23line' transform='translate(280)'/%3E%3Cuse xlink:href='%23line' transform='translate(290)'/%3E%3Cuse xlink:href='%23line' transform='translate(300)'/%3E%3Cuse xlink:href='%23line' transform='translate(310)'/%3E%3Cuse xlink:href='%23line' transform='translate(320)'/%3E%3Cuse xlink:href='%23line' transform='translate(330)'/%3E%3Cuse xlink:href='%23line' transform='translate(340)'/%3E%3Cuse xlink:href='%23line' transform='translate(350)'/%3E%3Cuse xlink:href='%23line' transform='translate(360)'/%3E%3Cuse xlink:href='%23line' transform='translate(370)'/%3E%3Cuse xlink:href='%23line' transform='translate(380)'/%3E%3Cuse xlink:href='%23line' transform='translate(390)'/%3E%3C/svg%3E");
}
@media (min-width: 993px) { .education-team::before { display: block; } }

/* тот же ритм колонок 1fr 3fr 8fr, что и в .section-grid — раньше тут
   было своё "4fr 8fr", и хотя доля выглядела той же (4/12), при разном
   числе треков css grid по-другому учитывает gap, и колонка с текстом
   у .edu-layout и .section-grid не совпадали по x на ~17px */
.edu-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(20px, 2.6vw, 40px);
    align-items: start;
}
/* min-width:0 обязателен: без него grid-item с крупной картинкой
   (в "Основных сведениях" тут документ 1026×1280) не сжимался до
   ширины трека, а raздутая до overflow:visible картинка вылезала
   поверх шапки страницы */
.edu-layout > :first-child { grid-column: 1 / 3; min-width: 0; overflow: hidden; }
.edu-layout .image { width: 100%; max-width: 513px; }

/* плашка-флажок под подзаголовок — как на боевом (h3_bg.svg), во всю
   ширину колонки контента, вылет влево по clamp, чтобы не ломался
   на узких контейнерах */
.edu-subtitle {
    position: relative;
    display: block;
    width: 100%;
    font-size: clamp(1rem, 0.86rem + 0.6vw, 1.375rem);
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, var(--color2), var(--main-color));
    padding: .85em 1.6em .85em clamp(2.4em, 8vw, 4.2em);
    margin: clamp(20px, 2.4vw, 36px) 0 clamp(16px, 2vw, 28px) clamp(-40px, -6vw, -70px);
    /* вырез в фиксированных px, а не в % — теперь плашка на всю ширину
       колонки, и тот же вырез в процентах растягивался вместе с ней,
       превращаясь из аккуратного среза (как на боевом) в стрелку */
    clip-path: polygon(12px 0, 0 80%, 11px 100%, 100% 100%, 100% 0);
}

/* карточка руководителя */
.ruk-wrap {
    display: grid;
    grid-template-columns: clamp(140px, 16vw, 240px) 1fr;
    gap: clamp(16px, 2vw, 32px);
    align-items: start;
    margin-bottom: clamp(20px, 2.4vw, 36px);
}
.ruk__image img { width: 100%; height: auto; display: block; }
.ruk__content p { margin-bottom: .7em; }

/* список документов */
.files-files { margin-top: clamp(20px, 2.6vw, 40px); max-width: 800px; }
.files-files a {
    display: block;
    position: relative;
    width: 100%;
    color: var(--text-color);
    font-size: clamp(0.8125rem, 0.76rem + 0.26vw, 1rem);
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid var(--light-grey);
    margin-bottom: 7.5px;
    padding: 7px 40px 7px 0;
    transition: color var(--t);
}
.files-files a:hover { color: var(--color2); }
.files-files a::after {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 26px;
    background: url("data:image/svg+xml,%3Csvg width='33' height='30' viewBox='0 0 33 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='33' height='30' fill='%23929292'/%3E%3Cpath d='M16.6464 22.8536C16.8417 23.0488 17.1583 23.0488 17.3536 22.8536L20.5355 19.6716C20.7308 19.4763 20.7308 19.1597 20.5355 18.9645C20.3403 18.7692 20.0237 18.7692 19.8284 18.9645L17 21.7929L14.1716 18.9645C13.9763 18.7692 13.6597 18.7692 13.4645 18.9645C13.2692 19.1597 13.2692 19.4763 13.4645 19.6716L16.6464 22.8536ZM17 5.5H16.5V22.5H17H17.5V5.5H17Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

/* декоративный фон секции документов — .edu-bg рассчитан на позиционирование
   от секции-обёртки (direction-education-files), которая должна быть
   position:relative, иначе left:0/top:0 уезжают к началу всей страницы */
.direction-education-files { position: relative; overflow: hidden; }
.edu-bg {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}
.edu-bg::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: clamp(120px, 30vw, 560px);
    height: 100%;
    background: url(/assets/files/smk/smk-bg-4-1.webp) no-repeat right bottom / cover;
    opacity: .5;
}

@media (max-width: 992px) {
    .edu-layout { grid-template-columns: 1fr; }
    .edu-layout .image { display: none; }
    .ruk-wrap { grid-template-columns: 1fr; gap: 14px; }
    .ruk__image img { max-width: 220px; }
    .files-files a { padding-right: 34px; }
    .edu-bg { display: none; }
}

/* ========== О ХОЛДИНГЕ ========== */
.about .lead { margin-bottom: clamp(16px, 2vw, 30px); }

/* --- миссия --- */
.mission-bg {
    position: relative;
    background: url("data:image/svg+xml,%3Csvg width='1743' height='402' viewBox='0 0 1743 402' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1743 0L1633.95 401.999L-284 402L-174.948 0.000610352L1743 0Z' fill='url(%23paint0_linear_352_688)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_352_688' x1='674.955' y1='-7.29759e-06' x2='674.955' y2='402' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235B2282'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center / cover;
    padding-block: clamp(40px, 5vw, 90px);
    min-height: clamp(300px, 26vw, 402px);
    display: flex;
    align-items: center;
}
.mission .eyebrow { color: #ccc; }
.mission-text {
    position: relative;
    color: #fff;
    font-size: clamp(1.125rem, 0.8rem + 1.4vw, 2rem);
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: clamp(20px, 3vw, 49px);
    max-width: 623px;
}
.mission-fio { color: var(--light-grey); font-size: var(--fs-body); font-weight: 700; }
.mission-position { color: var(--light-grey); font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.875rem); }

/* --- этапы развития ---
   Механика боевого: сжимаются только пройденные карточки (.left),
   активная и будущие остаются полноразмерными, поэтому год следующего
   этапа крупно выглядывает за правым краем колонки.
   Геометрия считается от колонки сетки (карточка = 8 из 12), а не от
   фиксированных 829px боевого, — так пропорция держится на любой ширине.
   Пропорции сняты с боевого: свёрнутая 133/829, год 200/829 и 36/133.
   Сдвиг ленты задаёт app.js через --stages-card-min. */
.stages {
    position: relative;
    overflow: hidden;
    background: url('/assets/files/stages/stages_bg.webp') center / cover no-repeat;
    padding-block: clamp(40px, 6vw, 110px);
    margin-top: clamp(30px, 5vw, 64px);   /* отступ от «Миссии» */

    --stages-gap: clamp(16px, 2vw, 40px);
    --stages-inner: calc(min(100vw, var(--page-max)) - 2 * var(--gutter));
    --stages-col: calc((var(--stages-inner) - var(--stages-gap)) / 12);
    --stages-card: calc(var(--stages-col) * 8);
    --stages-card-min: calc(var(--stages-card) * 0.1604);
}
.stages .eyebrow, .stages .section-title { color: #fff; }

/* minmax(0,…) обязателен: лента шире экрана, и при минимуме auto она
   раздувает правый трек, а левый схлопывается — свёрнутые карточки
   уезжают за край экрана */
.stages-layout {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--stages-gap);
    margin-top: clamp(30px, 5vw, 90px);
}
.stages-container,
.stages-viewport,
.years-viewport { min-width: 0; }

.stages-container {
    position: relative;
    margin-top: clamp(150px, 21.9vw, 280px);
}
.stages-container::after {              /* горизонтальная линия-базис */
    content: "";
    position: absolute;
    left: -1000px;
    top: clamp(120px, 17.2vw, 220px);
    width: 5000px;
    height: 1px;
    background: var(--color2);
}

/* режет секция, а не viewport, иначе год над карточкой обрезается */
.stages-viewport { overflow: visible; }
.stages-line {
    display: flex;
    align-items: flex-end;
    width: max-content;
    transition: transform 1s ease-out;
}

.stage {
    position: relative;
    flex-shrink: 0;
    width: var(--stages-card);
    height: calc(var(--stages-card) * 0.2654);
    border-left: 1px solid var(--color2);
    border-bottom: 1px solid var(--color2);
    padding: 0 clamp(14px, 2vw, 26px);
    transition: all 1s ease-out;
    cursor: pointer;
}
.stage-year {
    position: absolute;
    left: 13px;
    bottom: calc(100% + clamp(8px, 2vw, 26px));
    font-size: calc(var(--stages-card) * 0.2413);
    line-height: 1;
    font-weight: 100;
    color: var(--main-color);
    transition: all 1s ease-out;
}
.stage-year:hover { color: #fff; }
.stage-title {
    font-size: clamp(0.875rem, 1.56vw, 1.25rem);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 1s ease-out;
}
.stage-text {
    font-size: clamp(0.8125rem, 1.25vw, 1rem);
    line-height: 1.3;
    font-weight: 200;
    color: #fff;
    margin-top: clamp(10px, 1.6vw, 20px);
    max-width: 625px;
    transition: all 1s ease-out;
}

/* пройденные — свёрнутые */
.stage.left {
    width: var(--stages-card-min);
    height: calc(var(--stages-card) * 0.0989);
}
.stage.left .stage-year {
    font-size: calc(var(--stages-card-min) * 0.2707);
    color: var(--color2);
    top: -12px;
    bottom: auto;
    left: 10px;
}
.stage.left .stage-title,
.stage.left .stage-text { display: none; }

/* строка годов — только на мобильных */
.years-viewport { display: none; }
.years-line { display: flex; transition: transform 1s ease-out; }
.stage-trigger {
    flex-shrink: 0;
    font-weight: 100;
    color: var(--color2);
    cursor: pointer;
    transition: color var(--t);
}
.stage-trigger.active, .stage-trigger:hover { color: #fff; }

/* стрелки — слева, по центру ленты */
.stages-nav {
    position: absolute;
    left: 0;
    bottom: 50%;
    z-index: 3;
    padding-left: clamp(16px, 7.8vw, 100px);
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 992px) {
    .stages { background-image: url('/assets/files/stages/stages_mob_bg.webp'); }
    .stages-container { margin-top: 56px; }
    .stages-container::after { top: 339px; }

    /* строка годов в потоке: абсолютной она накладывалась на стрелки,
       потому что .years-viewport схлопывался в нулевую высоту */
    .years-viewport { display: block; margin-top: 14px; overflow: hidden; }
    .years-line { position: static; gap: 42px; }
    .stage-trigger { font-size: 24px; }

    .stages-viewport { height: 340px; overflow: hidden; }
    .stage { width: 290px; height: 340px; cursor: default; }
    .stage-year { top: 0; bottom: auto; left: 13px; font-size: 96px; line-height: 75px; }
    .stage-title { padding-top: 90px; font-size: 14px; line-height: 14px; }
    .stage-text { font-size: 13px; line-height: 15px; margin-top: 10px; }

    .stage.left, .stage.right { width: 290px; height: 82px; }
    .stage.left .stage-year,
    .stage.right .stage-year {
        font-size: 48px;
        left: -5px;
        top: -75px;
        bottom: auto;
        color: var(--color2);
    }
    .stage.left .stage-title, .stage.left .stage-text,
    .stage.right .stage-title, .stage.right .stage-text { display: none; }

    .stages-nav { position: static; padding-left: 0; margin-top: 24px; }
}

.stages-btn-prev, .stages-btn-next {
    width: clamp(28px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='white'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.stages-btn-prev { transform: scale(-1, -1); }

/* --- структура --- */
.structure { position: relative; overflow: hidden; }
.structure .eyebrow { color: #ccc; }
.structure .text {
    color: var(--color2);
    font-size: clamp(1.125rem, 0.85rem + 1.2vw, 2.5rem);
    line-height: 1.2;
    font-weight: 400;
    max-width: 942px;
}
.structure-layout {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(24px, 3vw, 49px);
}
.structure-container { position: relative; min-height: clamp(320px, 30vw, 420px); }
.structure_elements { position: relative; }
.structure-element { position: absolute; inset: 0; }
.struct-title {
    font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.75rem);
    font-weight: 700;
    color: var(--color2);
    margin-bottom: 10px;
}
.struct-intro { font-size: var(--fs-body); margin-bottom: clamp(12px, 1.6vw, 20px); }
.struct-content { font-size: var(--fs-body); line-height: 1.5; }
.struct-content-title {
    font-size: 11px; font-weight: 700; letter-spacing: .3em;
    text-transform: uppercase; color: var(--light-grey); margin-bottom: 6px;
}
/* в потоке сразу под карточкой, как на боевом: прибитые к низу
   высокого контейнера стрелки уезжали далеко от контента */
.structure-nav { position: relative; top: 20px; display: flex; align-items: center; gap: 34px; }
.structure-btn-next {
    width: clamp(28px, 3vw, 40px); aspect-ratio: 1; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.7071 20.7071C31.0976 20.3166 31.0976 19.6834 30.7071 19.2929L24.3431 12.9289C23.9526 12.5384 23.3195 12.5384 22.9289 12.9289C22.5384 13.3195 22.5384 13.9526 22.9289 14.3431L28.5858 20L22.9289 25.6569C22.5384 26.0474 22.5384 26.6805 22.9289 27.0711C23.3195 27.4616 23.9526 27.4616 24.3431 27.0711L30.7071 20.7071ZM10 20V21H30V20V19H10V20Z' fill='%23929292'/%3E%3Ccircle cx='20' cy='20' r='19' stroke='%23929292' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.structure-indicators { display: inline-flex; gap: 14px; }
.structure-indicators li {
    width: 11px; height: 11px; box-sizing: border-box;
    border: 2px solid var(--light-grey); border-radius: 50%; cursor: pointer;
}
.structure-indicators li.active { background: var(--light-grey); }

/* --- СМК ---
   Порт боевого smk.css: тёмно-фиолетовая секция с градиентом сверху,
   белый текст, заголовок фирменным цветом, ссылки на сертификаты с
   фиолетовой иконкой скачивания и декоративные фото по краям. */
.smk {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color2) linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 756px);
}
.smk .container { position: relative; z-index: 2; }
.smk .eyebrow { color: #fff; }
.smk .section-title { color: var(--main-color); }

.smk-content {
    position: relative;
    color: #fff;
    font-weight: 300;
    margin-bottom: clamp(30px, 4.7vw, 60px);
    max-width: 800px;
}
.smk-content h3 {
    color: #fff;
    font-size: clamp(1rem, 1.56vw, 1.25rem);
    font-weight: 900;
    text-align: left;
}
.smk-content p + p { margin-top: 1em; }
.smk-content h3 { margin-top: 1.4em; margin-bottom: .5em; }
.smk-content ul { margin-top: 10px; padding-left: 16px; list-style: disc; }
.smk-content ul > li { margin-bottom: 5px; }

.smk-list {
    color: #fff;
    font-size: clamp(1rem, 1.56vw, 1.25rem);
    line-height: 1.4;
    font-weight: 900;
}
.smk-list ul {
    max-width: 564px;
    margin-top: 13px;
    padding-left: 24px;
    list-style: disc;
    font-size: var(--fs-body);
    font-weight: 300;
}
.smk-list ul > li { line-height: 1.2; margin-bottom: 5px; }

.smk-files { margin-top: clamp(24px, 3vw, 40px); max-width: 712px; }
.smk-files a {
    display: block;
    position: relative;
    color: #fff;
    font-size: var(--fs-body);
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 1px solid var(--main-color);
    margin-bottom: 7.5px;
    padding: 7px 44px 7px 0;
    transition: color var(--t);
}
.smk-files a:hover { color: var(--main-color); }
.smk-files a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 7px;
    width: 33px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg width='33' height='30' viewBox='0 0 33 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='33' height='30' fill='%238A46A7'/%3E%3Cpath d='M16.6464 22.8536C16.8417 23.0488 17.1583 23.0488 17.3536 22.8536L20.5355 19.6716C20.7308 19.4763 20.7308 19.1597 20.5355 18.9645C20.3403 18.7692 20.0237 18.7692 19.8284 18.9645L17 21.7929L14.1716 18.9645C13.9763 18.7692 13.6597 18.7692 13.4645 18.9645C13.2692 19.1597 13.2692 19.4763 13.4645 19.6716L16.6464 22.8536ZM17 5.5H16.5V22.5H17H17.5V5.5H17Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

/* декоративные фото по краям секции */
.smk-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}
.smk-bg::before,
.smk-bg::after {
    content: "";
    position: absolute;
    height: 100%;
    z-index: 1;
}
.smk-bg::before {
    left: 0;
    bottom: 0;
    width: 30vw;
    background: url("/assets/files/smk/smk-bg-4-1.webp") no-repeat right 200px / cover;
}
.smk-bg::after {
    right: 0;
    width: 20vw;
    background: url("/assets/files/smk/smk_bg_3.webp") no-repeat left 200px / cover;
}

@media (max-width: 1540px) {
    .smk-bg::before { width: 35vw; }
    .smk-bg::after { width: 15vw; }
}
@media (max-width: 1360px) {
    .smk-bg::after { width: 10vw; }
}
@media (max-width: 1240px) {
    .smk-bg::after { display: none; }
}

@media (max-width: 992px) {
    .smk { background: linear-gradient(180deg, #140716 0%, var(--color2) 100%); }
    .smk-content {
        font-size: 13px;
        line-height: 1.4;
        margin-top: 10px;
        margin-bottom: 29px;
        max-width: 285px;
    }
    .smk-list { font-size: 14px; line-height: 1.2; }
    .smk-list ul { opacity: .8; font-size: 13px; }
    .smk-files a {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 900;
        padding: 1px 40px 1px 0;
    }
    .smk-files a::after { width: 28px; height: 25px; bottom: 2px; }
    .smk-bg::before { display: none; }
    .smk-bg::after {
        display: block;
        right: 0;
        top: 5px;
        width: 201px;
        height: 234px;
        background: url("/assets/files/smk/smk_mob_bg.webp") no-repeat center / contain;
    }
}

.education .edu-intro {
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
    font-weight: 300;
    margin-bottom: clamp(14px, 1.8vw, 24px);
}
.edu-about-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(20px, 2.6vw, 40px);
}
.edu-files a {
    display: block;
    color: var(--color2);
    font-weight: 700;
    font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.875rem);
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 12px;
    text-decoration: underline;
}

@media (max-width: 992px) {
    .stages-layout, .structure-layout { grid-template-columns: 1fr; }
    .edu-about-layout { grid-template-columns: 1fr; }
    .structure-container { min-height: 380px; }
    .structure-nav { position: relative; margin-top: 20px; }
}

/* ============================================================
   О ХОЛДИНГЕ — фоны секций (перенос со старой вёрстки)
   Пропорции сняты с боевого centring.ru при 1280px
   ============================================================ */

/* --- «Обучение» на странице «О холдинге» ---
   Общее правило .edu-bg выше подключает фон от СМК и нужно секции
   документов на странице «Обучение», поэтому переопределяем только
   внутри section.education.
   Пустую ячейку-отступ в сетке убираем: с ней колонка текста начинается
   слишком правее и на любой ширине уезжает под фото. Фото прижато к
   правому краю и подрезано им — как на боевом, где 880x762 уходит за
   границу экрана. Высота секции считается от фото, иначе оно обрезается
   сверху и человек остаётся без головы. */
.education {
    position: relative;
    overflow: hidden;
    min-height: clamp(520px, 75vw, 824px);
}
.education .container { position: relative; z-index: 2; }

/* сетку не трогаем — текст должен стоять под заголовком.
   Ограничение ширины не нужно: у картинки пустая левая часть,
   поэтому окно фото спокойно заходит на колонку текста, как на боевом. */
.education .edu-intro,
.education .edu-content { max-width: 609px; }

.education .edu-bg {
    position: absolute;
    left: 60%;
    right: auto;
    top: auto;
    bottom: 0;
    width: 880px;
    height: 762px;
    z-index: 1;
    /* картинка 1026x1280 в натуральную величину; боевой показывает её
       верхние 880x762, поэтому привязка именно к левому ВЕРХНЕМУ углу —
       иначе окно показывает низ и человек остаётся без головы */
    background: url(/assets/files/education/education_bg2.webp) no-repeat left top;
    pointer-events: none;
}
.education .edu-bg::before { content: none; }

@media (max-width: 1640px) { .education .edu-bg { left: 68%; } }

/* секция документов идёт на сером — как на боевом */
.files { background: #ddd; }

@media (max-width: 992px) {
    .education { min-height: 0; }
    .education .edu-about-layout { grid-template-columns: 1fr; }
    .education .edu-intro,
    .education .edu-content { max-width: none; }
    .education .edu-files.hide-lg-up { margin-top: clamp(16px, 4vw, 24px); }
    .education .edu-bg {
        display: block;
        left: auto;
        right: 0;
        top: -32px;
        bottom: auto;
        width: min(375px, 60%);
        height: 229px;
        aspect-ratio: auto;
        background: url(/assets/files/education/education_bg_mob.webp) no-repeat right top / contain;
    }
}

/* --- «Структура»: фон с логотипом (structure_bg.png) ---
   Контент лежит поверх нижней части картинки, поэтому
   контейнеру нужен большой отступ сверху, а текст — белый. */
.structure-container {
    min-height: min(836px, 65vw);
    padding-top: min(347px, 27vw);
}
.structure_elements { min-height: clamp(280px, 28vw, 360px); }
.structure .struct-intro,
.structure .struct-content,
.structure .struct-content-title { color: #fff; }
.structure-bg {
    position: absolute;
    left: clamp(-230px, -18vw, -80px);
    top: 0;
    width: min(1485px, 116vw);
    height: min(836px, 65vw);
    z-index: -1;
    background: url(/assets/files/structure/structure_bg.webp) no-repeat left top / contain;
    pointer-events: none;
}
.structure-mob-bg, .structure-bottom-bg { display: none; }

@media (max-width: 992px) {
    .structure .container { position: relative; z-index: 2; }
    .structure-container { min-height: 0; padding-top: 0; }
    .structure .struct-intro,
    .structure .struct-content,
    .structure .struct-content-title { color: #fff; }
    .structure-bg { display: none; }
    .structure-mob-bg {
        display: block;
        position: absolute;
        left: 0; top: 250px;
        width: 100%; height: 706px;
        z-index: 0;
        background: url(/assets/files/structure/bg-nologo.webp) no-repeat left top;
        pointer-events: none;
    }
}

@media (max-width: 530px) {
    .structure-mob-bg {
        top: 280px;
        background: url(/assets/files/structure/structure_mob_bg.webp) no-repeat top center / contain;
    }
}

/* --- «Миссия»: фото руководителя и кавычки ---
   Фото выступает над фиолетовой полосой: его низ совпадает с низом
   полосы (bottom: 0), поэтому вынос вверх пересчитывается сам при
   любой ширине — на боевом это 402px полосы против 587px фото. */
.mission { position: relative; }
.mission .mission-bg > .container { position: relative; }
.mission .foto {
    position: absolute;
    right: 0;
    /* низ фото совпадает с низом полосы: компенсируем padding полосы */
    bottom: calc(-1 * clamp(40px, 5vw, 90px));
    width: clamp(320px, 55vw, 710px);
    height: auto;
    pointer-events: none;
}
.mission-text::before,
.mission-text::after {
    content: "";
    position: absolute;
    display: block;
    width: clamp(53px, 8vw, 107px);
    aspect-ratio: 107 / 64;
    background: url("data:image/svg+xml,%3Csvg width='107' height='64' viewBox='0 0 107 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37.6224 63.7199L18.0827 63.7209L0 45.4843L12.1022 0.00012207H54.5787L37.6224 63.7199Z' fill='%23EAEAEA' fill-opacity='0.2'/%3E%3Cpath d='M89.4798 63.7198L69.9401 63.7208L51.8574 45.4842L63.9596 0H106.436L89.4798 63.7198Z' fill='%23EAEAEA' fill-opacity='0.2'/%3E%3C/svg%3E%0A") no-repeat center / contain;
    pointer-events: none;
}
.mission-text::before { left: clamp(-69px, -5.4vw, -37px); top: clamp(-26px, -2vw, -2px); }
.mission-text::after  { right: clamp(-9px, 3vw, 40px); bottom: clamp(-25px, -2vw, -7px); }

@media (max-width: 992px) {
    .mission { overflow: hidden; }
    /* полоса становится фоном 190px сверху, текст выходит на белое ниже */
    .mission-bg {
        display: block;
        min-height: 190px;
        padding-block: 0;
        background-size: 100% 190px;
        background-position: left top;
        background-repeat: no-repeat;
    }
    /* подпись уже выведена мобильной обёрткой выше — второй не нужно */
    .mission-bg .section-grid .eyebrow { display: none; }
    .mission .eyebrow { color: var(--color2); }
    .mission-text {
        font-size: 14px;
        font-weight: 200;
        line-height: 1.3;
        max-width: 174px;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .mission-fio, .mission-position { color: var(--text-color); font-size: 12px; }
    .mission .foto {
        width: 312px;
        right: -113px;
        bottom: auto;
        top: -60px;
    }
}

/* ============================================================
   ОДИНОЧНАЯ УСЛУГА (новая вёрстка) — компоненты svc-*
   Переиспользуют токены и типографику core.css (.eyebrow,
   .section-title, .text, .section-grid), новых переменных нет.
   ============================================================ */

/* --- hero --- */
.svc-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(340px, 32vw, 620px);
    display: flex;
    align-items: flex-end;
    background-color: #0d0014;
    background-size: cover;
    background-position: center;
    /* верхний отступ привязан к реальной высоте фикс-шапки (--nav-h),
       а не к независимому clamp — иначе на части ширин экрана шапка
       перекрывает крошки и клик по ним не проходит */
    padding-block: calc(var(--nav-h) + clamp(24px, 3vw, 40px)) clamp(40px, 4vw, 64px);
}
/* без чипов-фактов (страницы-документы вроде карты сайта, cookie-policy)
   620px-баннер рассчитанный на карточки с фактами выглядит как пустая
   плашка на пол-экрана — здесь высота только под сам заголовок */
.svc-hero:not(:has(.svc-facts)) { min-height: clamp(220px, 18vw, 340px); }
.svc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 0, 20, .1) 0%, rgba(13, 0, 20, .93) 100%);
}
.svc-hero .container { position: relative; z-index: 2; }
.svc-hero-inner {
    position: relative;
    padding-left: clamp(20px, 2.6vw, 40px);
}
/* статичная косая линия слева — как на остальных внутренних баннерах,
   но без анимации: там её включает JS (.banner.active), здесь эффект
   на одну секцию не оправдан.
   Линия привязана к заголовку (.svc-title), а не ко всему hero-inner:
   так она всегда на всю высоту заголовка (включая переносы), а крошки
   above остаются вне полосы, а не «внутри» неё. */
.svc-title { position: relative; }
.svc-title::before {
    content: "";
    position: absolute;
    /* при коротких заголовках в одну строку правый край полосы (left+width)
       был всего в ~50px от начала текста, и на скошенной верхней кромке
       линия наезжала на первую букву — увеличен отступ, чтобы гарантировать
       зазор от текста при любой длине заголовка */
    left: clamp(-140px, -9vw, -100px);
    top: 0;
    height: 100%;
    width: 100px;
    border-right: 2px solid var(--main-color);
    transform: skew(-15deg);
    transform-origin: left top;
    pointer-events: none;
}
.svc-breadcrumb {
    display: flex;
    gap: 10px;
    text-transform: uppercase;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .3em;
    color: rgba(255, 255, 255, .55);
    margin-bottom: clamp(16px, 2.2vw, 28px);
}
.svc-breadcrumb a { color: rgba(255, 255, 255, .55); }
.svc-breadcrumb a:hover { color: #fff; }
.svc-breadcrumb span { color: var(--main-color); }
.svc-title {
    text-transform: uppercase;
    /* заголовки услуг длиннее обычных заголовков сайта (до 110+ символов),
       поэтому кегль меньше стандартного .section-title и есть верхняя
       граница по ширине в px, а не в ch — на очень длинных названиях
       ch-ограничение резало текст на 4 строки без необходимости */
    font-size: clamp(1.625rem, 1.15rem + 2vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    color: #fff;
    max-width: min(78%, 1000px);
    margin: 0;
}
.svc-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.6vw, 32px); }
.svc-fact {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}

/* --- таблица --- */
.svc-table-wrap { overflow-x: auto; margin-top: clamp(16px, 2.2vw, 28px); }
.svc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.svc-table th {
    text-align: left;
    padding: 12px 16px;
    background: var(--color2);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .05em;
    white-space: nowrap;
}
.svc-table td { padding: 14px 16px; border-bottom: 1px solid #e5e0ea; vertical-align: top; line-height: 1.5; }
.svc-table td:first-child { font-weight: 700; color: var(--color2); }
.svc-table tr:nth-child(even) td { background: #faf8fb; }

/* --- текст + изображение рядом --- */
.svc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
    margin-top: clamp(20px, 2.6vw, 32px);
}
.svc-split img { width: 100%; max-height: 320px; object-fit: contain; background: #faf8fb; border-radius: 4px; }
.svc-caption { font-size: .8rem; color: var(--light-grey); margin-top: 8px; text-align: center; }

/* одиночное изображение той же ширины, что .svc-split img, без пустой колонки */
.svc-figure { max-width: 420px; margin-top: clamp(20px, 2.6vw, 32px); }
.svc-figure img { width: 100%; border-radius: 4px; }

/* --- галерея фото (2 колонки) --- */
.svc-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(20px, 2.6vw, 32px); }
.svc-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 4px; }
.svc-gallery .svc-caption { text-align: left; }

/* --- плашка-примечание/гарантия --- */
.svc-note {
    background: #f4f1f6;
    border-left: 3px solid var(--color2);
    padding: 20px 24px;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-color);
    margin-top: clamp(20px, 2.6vw, 32px);
}
.svc-note strong { color: var(--color2); }

/* --- ссылка назад --- */
.svc-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color2);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: gap var(--t), color var(--t);
}
.svc-back::before { content: "←"; }
.svc-back:hover { gap: 16px; color: var(--main-color); }

@media (max-width: 992px) {
    .svc-split, .svc-gallery { grid-template-columns: 1fr; }
    .svc-figure { max-width: none; }
    .svc-title { max-width: none; }
}

/* ============================================================
   ТОВАР (новая вёрстка) — переиспользует svc-hero/svc-breadcrumb/
   svc-title/text/svc-table/svc-split/svc-back из блока «услуга»,
   добавляет только специфичные для товара компоненты.
   ============================================================ */

/* --- заголовок товара над списком характеристик: h1 в hero уже даёт
   крупный заголовок, здесь повтор названия нужен только как подпись
   к списку, поэтому кегль как у .text h3, а не гигантский .section-title --- */
.svc-specs-title {
    /* .svc-spec-value ниже тоже был на --fs-h3 (32px) — с тем же кеглем
       заголовок терялся среди строк характеристик, а не выделялся;
       уменьшен и разведён по размеру со значениями строк */
    font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
    font-weight: 700;
    color: var(--color2);
    text-transform: uppercase;
    margin: 0;
}

/* --- краткие характеристики: список label/value, а не таблица --- */
.svc-specs {
    display: flex;
    flex-direction: column;
    margin-top: clamp(24px, 3vw, 48px);
    border-top: 1px solid var(--light-grey);
}
.svc-spec-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 20px 0;
    border-bottom: 1px solid var(--light-grey);
}
.svc-spec-label {
    flex-shrink: 0;
    width: 220px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--light-grey);
    padding-top: 2px;
}
.svc-spec-value { font-size: clamp(1rem, 0.92rem + .35vw, 1.25rem); color: var(--text-color); line-height: 1.4; }

@media (max-width: 992px) {
    .svc-spec-row { flex-direction: column; gap: 6px; padding: 14px 0; }
    .svc-spec-value { font-size: 1rem; }
}

/* --- главное фото товара на фирменном градиенте --- */
.svc-product-photo {
    position: relative;
    overflow: hidden;
    background: #11011d;
}
.svc-product-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-10.73deg, rgba(17,1,29,1) 1%, rgba(91,34,130,1) 60%, rgba(91,34,130,1) 93%);
}
.svc-product-photo img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    object-position: center bottom;
    margin: 0 auto;
}

/* h3-подзаголовки внутри .text (используются в «подробнее» товара
   и одинаково пригодятся в услугах) */
/* h2 и h3 внутри .text выглядят одинаково: на страницах товаров подзаголовки
   переведены в h2 по требованию аудита (иерархия H1 -> H2), внешний вид
   при этом не меняется */
.text h2, .text h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color2);
    margin: clamp(24px, 3vw, 40px) 0 clamp(10px, 1.4vw, 16px);
}
.text h2:first-child, .text h3:first-child { margin-top: 0; }


.service-links {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.service-links li {
    margin: 0;
}

.service-links a {
    display: block;
    position: relative;
    padding: 14px 44px 14px 0;
    border-bottom: 1px solid var(--light-grey, #929292);
    color: var(--text-color, #414141);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s, padding-left .25s;
}

/* иконка-стрелка справа — квадрат в стиле списка документов */
.service-links a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 28px;
    height: 26px;
    margin-top: -13px;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='26' viewBox='0 0 28 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='28' height='25.4545' fill='%23929292'/%3E%3Cpath d='M8 13H19M15 9L19 13L15 17' stroke='white' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image .25s;
}

.service-links a:hover {
    color: var(--main-color, #8A46A7);
    padding-left: 12px;
}

.service-links a:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='26' viewBox='0 0 28 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='28' height='25.4545' fill='%238A46A7'/%3E%3Cpath d='M8 13H19M15 9L19 13L15 17' stroke='white' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media screen and (max-width: 600px) {
    .service-links a {
        font-size: 14px;
        padding-right: 38px;
    }
}