/* ==================== ШРИФТЫ ==================== */

/* Baskervville — только Bold, для крупных заголовков */
@font-face {
    font-family: 'Baskervville';
    src: url('../fonts/baskervville-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Geist — 4 начертания */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Курсив. Без этих файлов браузер наклонял бы обычное начертание сам,
   и буквы выглядели бы искажёнными — это разные вещи. */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Все размеры элементов рассчитываются вместе с padding и border */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Базовые стили страницы */
body {
    margin: 0;
    font-family: 'Geist', sans-serif;   /* был Arial */
    font-weight: 400;                    /* Geist Regular по умолчанию */
    color: #4B5563;                      /* цвет текста по умолчанию */
    background-color: #ffffff;
}

/* ==================== ЗАГОЛОВКИ ==================== */
/* h1–h3 — Baskervville Bold, h4–h6 — Geist Bold, все цвета #0B1826 */

h1, h2, h3, h4, h5, h6 {
    color: #0B1826;
    font-weight: 700;
}

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

h1 {
    font-family: 'Baskervville', serif;
    font-size: clamp(38px, calc(-17.89px + 5.458vw), 100px);
    line-height: 1.05;
}
h2 {
    font-family: 'Baskervville', serif;
    font-size: clamp(32px, calc(-11.27px + 4.225vw),  80px);
    line-height: 1.13;
}
/* Класс-дубликат позволяет сохранить семантический h1 на служебной странице,
   но взять визуальные параметры из единственного правила H3. */
h3,
.h3-style {
    font-family: 'Baskervville', serif;
    font-size: clamp(22px, calc( -6.00px + 2.36111vw),  45px);
    line-height: 1.3;
}
h4 {
    font-family: 'Geist', sans-serif;
    font-size: clamp(24px, calc(  0.00px + 1.667vw),  36px);
    line-height: 1.33;
}
h5 {
    font-family: 'Geist', sans-serif;
    font-size: clamp(16px, calc(  0.00px + 1.111vw),  24px);
    line-height: 1.4;
}
h6 {
    font-family: 'Geist', sans-serif;
    font-size: clamp(14px, calc(  6.00px + 0.556vw),  18px);
    line-height: 1.33;
}

/* ==================== ТЕКСТ ==================== */
/* всё Geist Regular (наследуется от body) */

p {
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);
    line-height: 1.56;
}
.article-lead {
    font-size: clamp(16px, calc(0.00px + 1.111vw), 24px);
    line-height: 1.4;
}
.secondary-text {
    font-size: clamp(12px, calc(4.00px + 0.556vw), 16px);
    line-height: 1.5;
}
.caption {
    font-size: clamp(10px, calc(2.00px + 0.556vw), 14px);
    line-height: 1.75;
}

/* Акцентный цвет текста */
.accent-text {
    color: #D4AC4C;
}

/* ==================== КЛАССЫ-ДВОЙНИКИ ТИПОГРАФИКИ ==================== */
.h2-style {
    font-family: 'Baskervville', serif;
    font-size: clamp(32px, calc(-11.27px + 4.225vw), 80px);
    line-height: 1.13;
    font-weight: 700;
    color: #0B1826;
}
.h4-style {
    font-family: 'Geist', sans-serif;
    font-size: clamp(24px, calc(  0.00px + 1.667vw), 36px);
    line-height: 1.33;
    font-weight: 700;
    color: #0B1826;
}
.h5-style {
    font-family: 'Geist', sans-serif;
    font-size: clamp(16px, calc(  0.00px + 1.111vw), 24px);
    line-height: 1.4;
    font-weight: 700;
    color: #0B1826;
}

/* ==================== ШАПКА ==================== */

/* Высота шапки в одном месте: ею же компенсируется её уход из потока
   и ею же считается отступ для якорей */
:root {
    /* Вертикальный отступ шапки: 32px на 2560, к 1920 тает до 20px
       и ниже уже не меняется */
    --header-pad-y: clamp(20px, calc(-16px + 1.875vw), 32px);

    /* Высота шапки едет вместе с отступом: 124px на 2560 → 104px на 1920.
       Содержимое (лого 60px) при этом не меняется: 60 + 32*2 = 124, 60 + 20*2 = 100 */
    --header-h: clamp(104px, calc(44px + 3.125vw), 124px);
}

/* Шапка вне потока — возвращаем её высоту отступом сверху */
body {
    padding-top: var(--header-h);
}

section[id] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);          /* минимум между блоками */
    min-height: var(--header-h);
    max-width: 2280px;
    /* 328px как нижняя граница компоновки, но не шире самого экрана:
       на 320px жёсткие 328px давали вынос за край, который overflow-x: clip
       обрезал вместе с содержимым. */
    min-width: min(328px, 100%);
    margin: 0 auto;            /* центрируем контент на экранах шире 2280 */
    padding: var(--header-pad-y) 60px;   /* верх/низ тают к FHD, бока минимум 60 */
}

/* Лого и кнопка — равные боковые блоки (это держит меню по центру) */
.header__logo,
.header__cta {
    flex: 1 1 0;               /* делят свободное место поровну → равная ширина */
    display: flex;
    align-items: center;
}
.header__logo { justify-content: flex-start; }  /* лого прижат влево */
.header__cta  { justify-content: flex-end;   }  /* кнопка прижата вправо */

/* Один источник размеров для двух одинаковых логотипов.
   Группировка селекторов гарантирует, что шапка и подвал будут меняться
   синхронно на desktop, а не разъедутся из-за двух разных формул. */
.header__logo img,
.footer__logo img {
    width: clamp(180px, calc(150.34px + 2.06vw), 238px);  /* 180 → 238 */
    height: auto;                                          /* пропорция сама */
}

/* Меню по центру */
.header__nav { flex: 0 1 auto; }

.header__menu {
    display: flex;
    align-items: center;
    gap: clamp(24px, calc(-8.42px + 3.17vw), 60px);  /* 24 → 60 между пунктами */
    margin: 0;
    padding: 0;
    list-style: none;
}
.header__menu a {
    font-size: clamp(14px, calc(12.87px + 0.22vw), 18px);  /* как p */
    color: #0B1826;                                        /* исключение по ТЗ */
    text-decoration: none;
    white-space: nowrap;      /* «Insights & Blog» не переносится */
}

/* Кнопка */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 24px;
    padding-right: 24px;
    --btn-bw: 1px;
    font-weight: 500;
    color: #0B1826;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid #0B1826;
    background: transparent;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Бургер — по умолчанию скрыт */
.header__burger {
    display: none;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.header__burger img { display: block; width: 32px; height: 32px; }

/* ---------- Планшет и мобильные: ≤ 1024px ---------- */
@media (max-width: 1280px) {
    .header__inner {
        justify-content: space-between;  /* лого слева, бургер справа */
        gap: 0;
        min-height: 64px;
        padding: 16px;
    }
    .header__nav,
    .header__cta { display: none; }      /* прячем меню и кнопку */

    .header__logo { flex: 0 0 auto; }    /* больше не растягиваем */
    /* На планшете и телефоне оба логотипа также получают один размер. */
    .header__logo img,
    .footer__logo img {
        height: 32px;
        width: auto;                     /* ширина пропорционально высоте */
    }
    .header__burger { display: block; }  /* показываем бургер */

    /* Мобильная шапка ниже — компенсация и якоря пересчитаются сами */
    :root {
        --header-h: 64px;
    }
}

.header__menu a:hover {
    color: #D4AC4C;
}

.button:hover {
    background-color: #D4AC4C;    /* золотая заливка */
    border-color: #D4AC4C;        /* контур сливается с фоном → визуально исчезает */
}

/* Родительский пункт — точка отсчёта для подменю */
.has-submenu {
    position: relative;
}

/* Services остаётся золотым, пока наведено на весь пункт (включая подменю)
   или пока фокус находится внутри — иначе при обходе с клавиатуры
   открытое подменю выглядело бы «ничьим» */
.has-submenu:hover > a,
.has-submenu:focus-within > a {
    color: #D4AC4C;
}

/* ---------- Контейнер подменю ---------- */
.submenu {
    position: absolute;
    top: 100%;              /* по-прежнему вплотную — мостик для курсора цел */
    left: -18px;
    z-index: 100;
    display: none;
    padding-top: 10px;      /* прозрачный зазор — опускает подменю, но ловит курсор */
    /* фон/границу/тень отсюда убираем — переносим внутрь */
}

/* Показываем подменю при наведении на Services и при заходе в него фокусом:
   с одним :hover пять ссылок услуг были недостижимы с клавиатуры — display:
   none исключал их из Tab-порядка, и фокус прыгал с Services сразу на About */
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    display: block;
}

/* Новый внутренний слой — вся видимая часть подменю */
.submenu__inner {
    padding: 4px;
    background-color: #ffffff;
    border-top: 2px solid #D4AC4C;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

/* Сброс списка */
.submenu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Пункты подменю ---------- */
.submenu__list a {
    display: block;
    width: 272px;                    /* ширина текстового блока */
    padding: 10px 14px 9px;          /* верх 10, бока 14, низ 9 */
    font-size: clamp(14px, calc(12.87px + 0.22vw), 18px);  /* как p */
    line-height: 1.56;
    color: #4B5563;                  /* цвет обычного текста */
    text-decoration: none;
    white-space: nowrap;
}

/* Ховер пункта подменю */
.submenu__list a:hover {
    background-color: #F4F2EC;  /* лёгкая золотистая подложка */
    color: #0B1826;
}

/* ==================== МОБИЛЬНОЕ МЕНЮ ==================== */

.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;                  /* под меню (у меню 1000), над страницей */
    background-color: rgba(0, 0, 0, 0.70);  /* 30% прозрачности */
    opacity: 0;                    /* невидимо по умолчанию */
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;                    /* теперь всегда flex, не переключаем */
    flex-direction: column;
    background-color: #ffffff;

    transform: translateX(100%);      /* по умолчанию — уехало вправо за экран */

    /* Без visibility закрытое меню остаётся в Tab-порядке: ссылки не видно,
       но фокус по ним ходит — и на десктопе тоже, где меню вообще не
       показывается. Скрытие снимается сразу, а возвращается по окончании
       выезда, поэтому анимация закрытия видна целиком. */
    visibility: hidden;

    /* visibility переключаем мгновенно, а не плавно: 0s + задержка на время
       выезда. Открытие — сразу (иначе focus() в этот момент браузер
       игнорирует, элемент для него ещё скрыт), скрытие — когда панель уже
       уехала, чтобы анимация закрытия была видна целиком. */
    transition: transform 0.45s ease, visibility 0s linear 0.45s;
}

/* Открытое состояние — меню на месте */
.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.45s ease, visibility 0s linear 0s;
}

/* Верхняя полоса — как мобильная шапка */
.mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* лого влево, крестик вправо */
    min-height: 64px;
    padding: 16px;
}
.mobile-menu__logo img {
    height: 32px;
    width: auto;
}
.mobile-menu__close {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu__close img {
    display: block;
    width: 32px;
    height: 32px;
}

/* Блок с меню */
.mobile-menu__nav {
    flex: 1 1 auto;           /* занимает всё место между верхом и кнопкой */
    overflow-y: auto;         /* если пунктов больше, чем экран — прокрутка */
    padding: 32px 16px;          /* сверху/снизу 32, бока 16 */
}

.mobile-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;                /* между строками меню 24 */
}

/* Пункты меню — Geist Bold 20/24 (фиксированные, исключение) */
.mobile-menu__list > li > a {
    display: block;
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #0B1826;
    text-decoration: none;
}

/* Подменю */
.mobile-submenu {
    margin: 24px 0 0;         /* отступ 24 от «Services» до первого подпункта */
    padding: 0;
    padding-left: 24px;       /* небольшой сдвиг вправо (как в макете) */
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;                /* между строками подменю 16 */
}
.mobile-submenu a {
    display: block;
    font-size: clamp(14px, calc(12.87px + 0.22vw), 18px);  /* как p */
    line-height: 1.56;
    color: #4B5563;
    text-decoration: none;
}

/* Кнопка внизу */
.mobile-menu__expert {
    /* Компонент располагается прямо над CTA в нижней части меню.
       Его ширина совпадает с CTA: на узком экране остаются поля 16 px,
       на широком — блок не растягивается больше 420 px. Левый край общий
       с CTA-кнопкой, поэтому они выглядят одной группой. */
    width: min(calc(100% - 32px), 420px);
    margin: 0 16px 24px;
}
.mobile-menu__cta {
    padding: 16px;
}
.mobile-menu__cta .button {
    display: flex;            /* block-level flex → margin auto центрирует */
    width: 100%;             /* во всю ширину блока... */
    max-width: 420px;        /* такой же предел, как у Ask an expert */
    margin: 0;               /* общий левый край с Ask an expert */
}


/* ---------- ПЕРВЫЙ БЛОК ---------- */
/* первый блок */
.hero {
    display: flex;
    align-items: flex-start;    /* колонки выровнены по верхней границе */
    gap: 80px;
    max-width: 2280px;
    min-width: min(328px, 100%);   /* см. комментарий у .header__inner */
    margin: 0 auto;
    padding: 100px 60px; 
}

/* Левая колонка — заголовок. Занимает больше места */
.hero__title {
    flex: 1 1 60%;      /* стартует с 60% ширины */
}

/* Правая колонка — текст */
.hero__text {
    flex: 1 1 40%;      /* стартует с 40%, тоже готов ужиматься */
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: clamp(0px, calc(-10.4px + 0.9vw), 8px) 0px; /* вертикальный отступ hero-текста, тает к мобилке */
}

/* ---------- Планшет и мобильные: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .hero {
        flex-direction: column;
        align-items: center;      /* центрируем весь блок hero на широких планшетах */
        gap: 24px;
        padding: 48px 16px;
    }

    /* Внутренняя обёртка-ограничитель шириной 700 */
    .hero__title,
    .hero__text {
        width: 100%;
        max-width: 700px;         /* оба не шире 700 */   
    }

    .hero__title {
        margin-right: auto;       /* прижимает заголовок ВЛЕВО */
    }

    .hero__text {
        margin-left: auto;        /* прижимает текст ВПРАВО */
    }


}

/* ==================== SHOWCASE (блок с картинкой) ==================== */
.showcase {
    position: relative;
    height: clamp(600px, calc(403.28px + 52.46vw), 1160px);
    overflow: hidden;          /* обрезаем выступающую картинку */
}

/* --- Фоновый слой --- */
.showcase__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.showcase__img {
    width: 100%;
    height: 1400px;            /* выше секции (1160) — запас для параллакса */
    object-fit: cover;         /* заполняет, обрезая лишнее, без искажений */
    object-position: center top;
    will-change: transform;    /* подсказка браузеру: будем двигать */
    display: block;
}

/* --- Статистика --- */
.showcase__stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 130px;                          /* между группами 130 */
    max-width: 2280px;
    margin: 0 auto;
    padding: 100px 60px 0;               /* верхний отступ подгони по макету */
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 24px;                           /* цифра ↔ подпись */
}
.stat__number {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: clamp(38px, calc(29.18px + 2.353vw), 80px);   /* 38 → 80 */
    line-height: 1.12;
    color: #ffffff;
    font-variant-numeric: tabular-nums;   /* цифры равной ширины — «+» не прыгает */
}
.stat__caption {
    font-family: 'Geist', sans-serif;
    font-weight: 500;                    /* medium */
    font-size: clamp(16px, calc(14.32px + 0.448vw), 24px);   /* 16 → 24 */
    line-height: 1.4;
    color: #ffffff;
}

/* --- Стеклянный блок --- */
.showcase__glass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.2);   /* белый 20% */
    -webkit-backdrop-filter: blur(32px);          /* Safari */
    backdrop-filter: blur(32px);                  /* эффект стекла */
}
.showcase__glass-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;    /* текст влево, кнопки вправо */
    gap: 60px;
    max-width: 2280px;
    margin: 0 auto;
    padding: 48px 60px;
}
.showcase__tagline {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, calc(11.90px + 0.560vw), 24px);   /* 14 → 24 */
    line-height: 1.4;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

/* Не запрещаем перенос всей длинной строки — на узком экране он нужен.
   Объединяем только смысловую пару "Since 2015", чтобы год не оставался
   один на следующей строке. Класс добавлен к отдельному span в index.html. */
.showcase__nowrap {
    white-space: nowrap;
}
.showcase__buttons {
    display: flex;
    gap: 24px;
    flex-shrink: 0;            /* кнопки не сжимаются */
}

/* --- Кнопки --- */
.btn-gold,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 300px;              /* фикс, чтобы обе были одинаковые */
    font-family: 'Geist', sans-serif;

    padding-left: 24px;
    padding-right: 24px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s, background-color 0.2s;
}
.btn-gold {
    position: relative;              /* система координат для слоя */
    overflow: hidden;                /* слой не вылезет за края кнопки */
    z-index: 0;                      /* создаём свой контекст наложения */
    font-weight: 600;
    color: #0B1826;
    background: linear-gradient(to right, #D9B858, #D4AC4C);  /* градиент — постоянный */
    border: none;
}

/* Верхний слой — проявляющийся цвет */
.btn-gold::before {
    content: '';                     /* обязательная строка — без неё псевдоэлемент не создаётся */
    position: absolute;
    inset: 0;                        /* растянут на всю кнопку */
    z-index: -1;                     /* ПОД текстом, но НАД градиентом */
    background-color: #DDC05D;      /* цвет ховера */
    opacity: 0;                      /* невидим по умолчанию */
    transition: opacity 0.25s ease;  /* плавное проявление */
}

/* При ховере проявляем слой */
.btn-gold:hover::before {
    opacity: 1;
}
.btn-outline {
    font-weight: 500;          /* medium */
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
    --btn-bw: 1px;             /* толщина рамки — вычитается из паддингов */
}

.btn-outline:hover {
    background-color: #ffffff;        /* полностью белая */
    color: #0B1826;                   /* тёмный текст */
    font-weight: 600;                 /* semibold */
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {

    .showcase__img {
        height: 100%;                     /* без запаса — параллакс выключен */
        transform: none !important;       /* сброс сдвига от JS */
        object-position: center top;      /* башня по центру, верх к верху */
    }

    .showcase__stats {
        flex-direction: column;           /* цифры в столбик */
        gap: 20px;                        /* между группами 20 */
        padding: 24px 16px 0;
    }
    .stat {
        gap: 0;                           /* отступ цифра↔подпись убирается */
    }
    .stat__number {
        font-size: 38px;
        line-height: 42px;
    }
    .stat__caption {
        font-size: 16px;
        line-height: 24px;
    }

    .showcase__glass-inner {
        flex-direction: column;           /* текст сверху, кнопки снизу */
        align-items: flex-start;
        gap: 16px;
        padding: 16px;                    /* все отступы стекла по 16 */
    }
    .showcase__tagline {
        font-size: 14px;
        line-height: 24px;
    }

    .showcase__buttons {
        width: 100%;
        gap: 16px;
    }
    .btn-gold,
    .btn-outline {
        width: auto;                      /* фикс 300 снимаем */
        padding-left: 16px;               /* боковые ужимаем, вертикальные задаются клампами выше */
        padding-right: 16px;                 
    }
    .btn-gold {
        min-width: 136px;                 /* жёлтая держит минимум */
    }
    .btn-outline {
        flex: 1 1 auto;                   /* контурная занимает остаток */
        min-width: 0;
        max-width: 300px;                 /* ← не шире 300 даже на планшете */
    }
}

/* ==================== ТРИ ЛИЦЕНЗИИ ==================== */
.licences {
    padding: 150px 60px 160px;
}
.licences__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}

/* Левая колонка — предзаголовок */
.licences__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.licences__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}

/* Правая колонка */
.licences__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;              /* ← отключает схлопывание */
    flex-direction: column;
}

/* Сетка из трёх карточек */
.licences__grid {
    display: flex;
    gap: 80px;
    margin-top: 90px;         
}
.licence {
    flex: 1 1 0;               /* три равные колонки */
    min-width: 0;
}

/* Внутри карточки */
.licence__abbr {
    color: #D4AC4C;
    margin-bottom: 32px;
}
.licence__title {
    margin-bottom: 16px;
}
.licence__text {
    margin: 0;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .licences {
        padding: 80px 16px 60px;
    }
    .licences__inner {
        flex-direction: column;    /* предзаголовок над контентом */
        gap: 12px;                  /* между предзаголовком и заголовком */
    }
    .licences__label,
    .licences__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .licences__content {
        gap: 0px;              
    }
    .licences__label {
        padding-top: 0;
        
    }

    .licences__grid {
        flex-direction: column;    /* карточки в одну колонку */
        gap: 40px;                 /* между карточками */
        margin-bottom: 16px;
        margin-top: 48px;       /* ← расстояние заголовок → CSP на мобилке */
    }

    .licence__abbr  { margin-bottom: 16px; }
    .licence__title { margin-bottom: 8px; }
}

/* ==================== РАЗДЕЛИТЕЛЬ ==================== */
.divider {
    padding: 0 60px;              /* минимальные боковые поля */
}
.divider__line {
    max-width: 2160px;
    margin: 0 auto;               /* центрируем на широких экранах */
    height: 2px;
    background-color: #DDE0E4;
}

@media (max-width: 1280px) {
    .divider {
        padding: 0 16px;          /* мобильные поля */
    }
}

/* ==================== ABOUT + HISTORY ==================== */
.about {
    padding: 150px 60px 160px;
}
.about__row {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}

.about__content h2 {
    max-width: 1400px;
}

.about__row + .about__row {
    margin-top: 120px;          /* расстояние между About и History */
}

.about__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.about__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}

.about__label2 {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);   
    padding-top: 4px 
}
.about__label2 .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}

.about__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Три колонки текста */
.about__columns {
    display: flex;
    gap: clamp(40px, calc(-1.28px + 3.175vw), 80px);
    margin-top: 80px;
}
.about__columns p {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

/* Фото */
.about__photo {
    display: block;
    width: 100%;
    /*
     * The width/height attributes in HTML reserve space before the file loads
     * (this prevents layout shift). When CSS makes the image responsive,
     * height:auto recalculates its visible height from the original ratio
     * instead of stretching it to the numeric height attribute.
     */
    height: auto;
    margin-top: 80px;
}

/* ==================== ТАЙМЛАЙН ==================== */
.timeline {
    display: flex;               /* 4 колонки без отступов */
}
.timeline__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.timeline__year {
    margin-bottom: 48px;         /* от цифр до кружка */
}

/* Ряд: кружок + линия до конца колонки */
.timeline__marker {
    display: flex;
    align-items: center;
    margin-bottom: 48px;         /* от кружка до заголовка */
}
.timeline__dot {
    flex-shrink: 0;              /* кружок не сжимается */
    width: 32px;
    height: 32px;
    border: 2px solid #0B1826;
    border-radius: 50%;          /* квадрат → круг */
    background-color: #ffffff;
    box-sizing: border-box;      /* контур внутри 32px (как center в Figma) */
}
.timeline__line {
    flex: 1 1 auto;              /* линия тянется до конца колонки */
    height: 2px;
    background-color: #0B1826;
}

.timeline__title {
    margin-bottom: 16px;
    padding-right: 80px;         /* текст не налезает на соседа */
}
.timeline__text {
    margin: 0;
    padding-right: 48px;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .about {
        padding: 80px 16px 60px;
    }
    .about__row {
        flex-direction: column;
        gap: 12px;    /* между предзаголовком и заголовком */
    }
    .about__row + .about__row {
        margin-top: 60px;
    }
    .about__label,
    .about__label2,
    .about__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .about__label {
        padding-top: 0;
    }
    .about__label2 {
        padding-top: 0;
        margin-bottom: 24px;
    }

    .about__columns {
        flex-direction: column;     /* колонки текста в столбик */
        gap: 24px;
        margin-top: 48px;
    }
    .about__photo {
        margin-top: 48px;
    }

    .timeline__year {
    margin-bottom: 28px;         /* от цифр до кружка */
    }

    .timeline__marker {
    margin-bottom: 28px;         /* от кружка до заголовка */
    }

    /* --- Таймлайн: горизонтальный скролл --- */
    .timeline {
        overflow-x: auto;                    /* скролл пальцем */
        -webkit-overflow-scrolling: touch;   /* плавная инерция на iOS */
        margin-right: -16px;                 /* линия уходит под край экрана */
        padding-bottom: 8px;                 /* место для полосы прокрутки */
    }
    .timeline__item {
        flex: 0 0 280px;                     /* фиксированная ширина колонок */
    }
    .timeline__title,
    .timeline__text {
        padding-right: 40px;                 /* отступ между колонками поменьше */
    }
}

/* ==================== УСЛУГИ ==================== */
.services {
    padding: 150px 60px 160px;
    background-color: #F4F2EC;
}

.services__content h2 {
    max-width: 1300px;
}

/* Контейнер — просто рамка 2280, БЕЗ flex */
.services__inner {
    max-width: 2160px;
    margin: 0 auto;
}

/* Ряд 1: двухколонка предзаголовок + заголовок */
.services__head {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
}
.services__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.services__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.services__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Ряд 2: сетка карточек на всю ширину контейнера */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* ровно 3 в ряд: 3 + 2 */
    gap: clamp(24px, calc(8.57px + 1.0714vw), 36px);    /* 36 на 2560 → 24 на 1440 */
    margin-top: 120px;
}

/* Карточка */
.service-card {
    display: flex;
    flex-direction: column;

    /* К 1440 отступы уходят ближе к мобильным: 48 → 28 и 36 → 24 */
    gap:     clamp(24px, calc( 8.57px + 1.0714vw), 36px);
    padding: clamp(28px, calc( 2.29px + 1.7857vw), 48px);
    background-color: #ffffff;
}

.service-card__media,
.post-card__media {
    display: block;
    line-height: 0;
}

.service-card__title {
    margin: 0;
}
.service-card__img {
    display: block;
    width: 100%;
    /* Keep the source image ratio when the card width changes on responsive layouts. */
    height: auto;
    aspect-ratio: 603 / 340;
    object-fit: cover;
}
.service-card__text {
    margin: 0;
}
.service-card__btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    padding-left: 24px;
    padding-right: 24px;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    --btn-bw: 2px;             /* рамка 2px — вычитается из паддингов */
    text-transform: uppercase;
    text-decoration: none;
    color: #0B1826;
    border: 2px solid #0B1826;
    background: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.service-card__btn:hover {
    background-color: #DDC05D;
    border-color: #DDC05D;
}

.service-card__title a,
.post-card__title a {
    color: inherit;
    text-decoration: none;
}
.service-card__title a:hover,
.post-card__title a:hover {
    color: #D4AC4C;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .services {
        padding: 80px 16px 84px;
    }
    .services__head {
        flex-direction: column;
        gap: 12px;  /* между предзаголовком и заголовком */
    }
    .services__label,
    .services__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .services__label {
        padding-top: 0;
    }
   
    .services__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 328px), 1fr));
        gap: 16px;
        margin-top: 54px;
    }
    .service-card {
        gap: 20px;
        padding: 20px;
    }
    .service-card__btn {
        padding: 17px 16px 15px;
        max-width: none;
    }
}
/* ==================== OUR CLIENTS ==================== */
.clients {
    padding: 150px 60px 160px;
}
.clients__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}
.clients__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.clients__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.clients__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.clients__intro {
    margin-top: 80px;            /* отступ после заголовка */
}

/* Две колонки */
.clients__columns {
    display: flex;
    gap: 80px;                   /* отступ между колонками */
    margin-top: 80px;
}
.client-type {
    flex: 1 1 0;
    min-width: 0;
}
.client-type__num {
    margin-bottom: 32px;
}
.client-type__title {
    margin-bottom: 16px;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .clients {
        padding: 80px 16px 76px;
    }
    .clients__inner {
        flex-direction: column;
        gap: 12px;
    }
    .clients__label,
    .clients__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .clients__label {
        padding-top: 0;
    }

    .clients__intro {
        margin-top: 48px;        /* заголовок → текст */
    }

    .clients__columns {
        flex-direction: column;
        gap: 48px;               /* текст → 01, и 01-блок → 02 */
        margin-top: 48px;
    }
    .client-type__num {
        margin-bottom: 16px;
    }
    .client-type__title {
        margin-bottom: 16px;
    }
}
/* ==================== ADVANTAGES ==================== */
.advantages {
    padding: 150px 60px 170px;
    background-color: #0B1826;
}
.advantages__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}
.advantages__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.advantages__label .h5-style {
    text-transform: uppercase;
    color: #BCC2CA;
}
.advantages__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.advantages__content h2 {
    color: #ffffff;
}

/* Список преимуществ */
.advantages__list {
    display: flex;
    flex-direction: column;
    gap: 24px;                  /* между контейнерами */
    margin-top: 80px;
}

/* Контейнер преимущества */
.advantage {
    display: flex;
    align-items: flex-start;    /* выравнивание по верхнему краю */
    gap: 80px;                  /* между цифрой и текстом */
    padding: 48px;
    border: 1px solid #D4AC4C;
}
.advantage__num {
    flex: 0 0 110px;            /* фиксированная ширина цифры */
    color: #D4AC4C;
}
.advantage__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1194px;          /* ширина текстового блока */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.advantage__title {
    color: #ffffff;
}
.advantage__text {
    color: #BCC2CA;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .advantages {
        padding: 80px 16px 86px;
    }
    .advantages__inner {
        flex-direction: column;
        gap: 12px;
    }
    .advantages__label,
    .advantages__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .advantages__label {
        padding-top: 0;
    }

    .advantages__list {
        gap: 16px;
        margin-top: 56px;
    }
    .advantage {
        flex-direction: column;   /* цифра над текстом */
        gap: 24px;
        padding: 24px;
    }
    .advantage__num {
        flex: 0 0 auto;
    }
    .advantage__body {
        max-width: none;
    }
}

/* ==================== PARTNER PROGRAMME ==================== */
.partner {
    padding: 150px 60px 170px;
}
.partner__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}
.partner__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.partner__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.partner__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.partner__columns {
    display: flex;
    gap: 80px;
    margin-top: 80px;
    align-items: flex-start;
}

/* --- Колонка 1 --- */
.partner__main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.partner__note {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: #F9F7F1;
    border-left: 2px solid #D4AC4C;
}
.partner__note-link {
    color: #4B5563;
}
.partner__note-link a {
    color: #D4AC4C;
    text-decoration: none;
    transition: color 0.15s ease;
}
.partner__note-link a:hover,
.partner__note-link a:focus-visible {
    color: #A87F1F;
    text-decoration: underline;
}

/* --- Колонка 2 --- */
.partner__perks {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.perk {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px;
    background-color: #ffffff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

/* --- Кнопка «золотая заливка» --- */
.btn-gold-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding-left: 24px;
    padding-right: 24px;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #0B1826;
    background: linear-gradient(to right, #D9B858, #D4AC4C);
    border: none;
    cursor: pointer;
}
.btn-gold-solid:hover {
    background: #DDC05D;
}

/* ==================== МОДАЛКА ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background-color: rgba(11, 24, 38, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1600;
    width: 660px;
    max-width: calc(100% - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 48px;
    background-color: #ffffff;
    opacity: 0;
    visibility: hidden;
    /* Тот же приём, что у мобильного меню: показываем сразу, прячем после
       того, как окно погасло. Нужно, чтобы фокус уходил внутрь окна. */
    transition: opacity 0.25s, visibility 0s linear 0.25s;
}
.modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s, visibility 0s linear 0s;
}
.modal__close {
    position: absolute;
    /* Видимый крестик остаётся на прежнем месте, но прозрачная область
       кнопки становится 44×44 px — по ней удобнее попадать мышью и пальцем. */
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #7A8696;                 /* исходный цвет крестика */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.modal__close img {
    display: none;
}

/* SVG используется как маска, то есть задаёт только форму крестика.
   Цвет берём из currentColor кнопки — теперь его можно точно менять в CSS,
   хотя SVG подключён отдельным файлом. -webkit-версия нужна для Safari. */
.modal__close::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url('../img/close_modal.svg') center / contain no-repeat;
    mask: url('../img/close_modal.svg') center / contain no-repeat;
    transition: transform 0.2s ease;
}

/* Фон показывает область действия, а цвет крестика становится фирменным navy.
   Вращаем только псевдоэлемент, поэтому сама кнопка не "прыгает". */
.modal__close:hover {
    background-color: rgba(212, 172, 76, 0.14);
    color: #0B1826;
}
.modal__close:hover::before {
    transform: rotate(90deg);
}
.modal__title {
    margin-bottom: 32px;
    padding-right: 16px;           /* место под крестик */
}

/* --- Форма --- */
.modal__form {
    display: flex;
    flex-direction: column;
    /* Теперь форма семантически содержит и consent с кнопкой. Не ставим общий
       gap: иначе он сложится с их собственными margin-top и изменит макет. */
    gap: 0;
}
/* 24 px нужны только между соседними полями — это прежний ритм модалки. */
.modal__form > .field + .field {
    margin-top: 24px;
}
.field {
    /* Точка отсчёта для всплывающей подсказки. Благодаря position: absolute
       внутри .field ошибка не влияет на высоту формы и не сдвигает соседей. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field__label {
    font-size: clamp(10px, calc(9.16px + 0.224vw), 14px);
    line-height: 1.7;
    text-transform: uppercase;
    color: #7A8696;
}
/* Звёздочка — только визуальная подсказка. Настоящая обязательность задаётся
   атрибутом required на самом input, чтобы её понимал и браузер, и скринридер. */
.field__required {
    margin-left: 4px;
    color: #E6281A;
}
.field__error {
    /* Сообщение создаёт main.js только для невалидного поля. Абсолютное
       позиционирование превращает его в tooltip, а не в новую строку формы. */
    display: none;
    position: absolute;
    z-index: 3;
    /* Ошибки текстовых полей показываем снизу: стрелка выше указывает
       непосредственно на input, который нужно исправить. */
    top: calc(100% + 10px);
    left: 0;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 9px 12px;
    font-size: clamp(12px, calc(11.58px + 0.112vw), 14px);
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #0B1826;
    box-shadow: 0 4px 12px rgba(11, 24, 38, 0.18);
    pointer-events: none;
}
/* Стрелка показывает, к какому полю относится подсказка. */
.field__error::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #0B1826;
    border-left: 6px solid transparent;
}

/* Инпут — покой */
.field__input {
    width: 100%;
    padding: 16px 15px 14px;          /* единый паддинг для всех состояний */
    font-family: 'Geist', sans-serif;
    font-size: clamp(14px, calc(13.16px + 0.224vw), 18px);
    line-height: 1.56;
    color: #0B1826;
    background: transparent;
    border: 2px solid #7A8696;        /* всегда 2px, в покое серый */
    transition: border-color 0.2s, background-color 0.2s;
}
.field__input::placeholder {
    color: #BCC2CA;
}

/* Ховер — контур толще, цвет тот же */
.field__input:hover {
    border-color: #4B5563;
}

/* Фокус (ввод) — золотой контур 2px + кремовый фон */
.field__input:focus {
    outline: none;
    border-color: #D4AC4C;
    background-color: #FDFBF4;
}

/* Заполнено, но не в фокусе — тёмный контур */
.field__input:not(:placeholder-shown):not(:focus) {
    border-color: #0B1826;
}

/* Ошибка */
.field--error .field__label {
    color: #E6281A;
}
.field--error .field__input {
    border-color: #E6281A;
}
.field--error .field__error {
    display: block;
}

/* --- Чекбокс --- */
.checkbox {
    /* Контейнер для tooltip ошибки согласия. Как и у .field, подсказка
       абсолютная, поэтому её появление не меняет высоту формы. */
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    cursor: pointer;
}
.checkbox__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.checkbox__box {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #4B5563;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s, border-color 0.2s;
}
.checkbox:hover .checkbox__box {
    border-color: #0B1826;
}

/* Настоящий input визуально скрыт, поэтому свою рамку фокуса он не рисует —
   и до этого у клавиатуры не было ни одного признака, что она стоит на
   чекбоксе. Обводку переносим на нарисованный квадрат.
   :focus-visible, а не :focus — после клика мышью рамка не нужна. */
.checkbox__input:focus-visible + .checkbox__box {
    outline: 2px solid #D4AC4C;
    outline-offset: 2px;
    border-color: #0B1826;
}
.checkbox__input:checked + .checkbox__box {
    background-color: #D4AC4C;
    border-color: #D4AC4C;
    background-image: url('../img/checkbox.svg');
}
.checkbox:hover .checkbox__input:checked + .checkbox__box {
    background-color: #DDC05D;
    border-color: #DDC05D;
}
.checkbox__text {
    font-size: 16px;
    line-height: 24px;
    color: #4B5563;
}
.checkbox__text a {
    color: inherit;
}
.modal__submit {
    margin-top: 32px;
    max-width: none;
}

.form__error {
    /* main.js переносит это сообщение внутрь .checkbox. Там оно становится
       всплывающей подсказкой, привязанной к самому чекбоксу. */
    display: none;
    position: absolute;
    z-index: 3;
    /* Tooltip consent показываем над чекбоксом: снизу рядом уже находится
       кнопка отправки, и подсказка не должна её перекрывать. */
    bottom: calc(100% + 10px);
    left: 0;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #0B1826;
    box-shadow: 0 4px 12px rgba(11, 24, 38, 0.18);
    pointer-events: none;
}
.form__error.is-visible {
    display: block;
}
/* Стрелка внизу tooltip указывает вниз, на чекбокс без согласия. */
.form__error::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 6px;
    border-right: 6px solid transparent;
    border-top: 6px solid #0B1826;
    border-left: 6px solid transparent;
}

/* Чекбокс в состоянии ошибки */
.checkbox--error .checkbox__box {
    border-color: #E6281A;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .partner {
        padding: 80px 16px 86px;
    }
    .partner__inner {
        flex-direction: column;
        gap: 12px;
    }
    .partner__label,
    .partner__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .partner__label { padding-top: 0; }

    .partner__columns {
        flex-direction: column;
        gap: 80px;
        margin-top: 48px;
    }
    .partner__main { gap: 24px; }
    
    .perk { gap: 16px; }

    .modal { padding: 20px; }
    .modal__title {
        margin-bottom: 24px;
        padding-right: 44px;       /* паддинг модалки меньше — резерв под крестик больше */
    }
    .checkbox {
        margin-top: 24px;
        gap: 16px;
    }
    .checkbox__text {
        font-size: 14px;
        line-height: 24px;
    }
    .modal__submit { margin-top: 24px; }
}

/* ==================== EMIRALD LEGAL (сестринская компания) ==================== */

.legal {
    padding-top: 150px;
}

/* --- Ряд 1: та же схема, что hero, но выравнивание по НИЖНЕЙ границе --- */
.legal__head {
    display: flex;
    align-items: flex-start;         /* ← отличие от hero (там flex-start) */
    gap: 80px;
    max-width: 2280px;
    min-width: min(328px, 100%);   /* см. комментарий у .header__inner */
    margin: 0 auto 100px;          /* 100 — отступ до картинки */
    padding: 0 60px;
}
.legal__title {
    flex: 1 1 60%;
}
.legal__text {
    flex: 1 1 40%;
    padding: clamp(4px, calc(-77px + 5.357vw), 60px) 0;  /* оптическая компенсация, как в hero */
}

/* --- Ряд 2: «окно» с картинкой --- */
.legal__media {
    position: relative;

    /* Воздух до карточек: 164 на 2560 → 84 на 1440.
       Высота считается с запасом, потому что к 1440 сжимаются и сами карточки
       (776 → 680): чтобы отступ упал на 80, высоту надо срезать на 256, а не на 160 */
    height: clamp(848px, calc(518.86px + 22.8571vw), 1104px);
    overflow: hidden;              /* обрезаем выступающую картинку и карточки */
}

/* Фоновый слой */
.legal__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.legal__img {
    width: 100%;
    height: 1400px;                /* выше секции (1104) — запас для параллакса */
    object-fit: cover;
    object-position: right center; /* статуя Фемиды всегда остаётся в кадре */
    will-change: transform;
}

/* Слой поверх картинки: держит сетку карточек по центру */
.legal__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 60px;
}
.legal__wrap {
    width: 100%;
    max-width: 2160px;             /* контентная сетка, как у остальных секций */
    margin: 0 auto;
}

/* Сетка карточек: 2 колонки × 3 ряда.
   Ширина ужимается вместе с экраном: 1464 на 2560 → ~1180 на 1920 → ~950 на 1400.
   Прижата влево внутри контейнера. */
.legal__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto; 
    gap: 2px;
    /* 1464 на 2560 → 860 на 1440: на ноутбуках карточки занимали слишком
       большую долю ширины и закрывали статую */
    width: clamp(774px, calc(83.43px + 53.9286vw), 1464px);
    max-width: 100%;               /* не шире доступного места */
}

/* Карточка-«стекло» */
.legal-card {
    padding: 48px;
    background-color: rgba(255, 255, 255, 0.6);   /* белый 60% */
    -webkit-backdrop-filter: blur(25px);          /* Safari */
    backdrop-filter: blur(25px);
}
.legal-card__title {
    margin-bottom: 24px;           /* заголовок ↔ текст */
}
.legal-card__text {
    margin: 0;
}

/* Последняя карточка: текст сверху, кнопка прижата к низу */
.legal-card--cta {
    display: flex;
    flex-direction: column;
    gap: 24px;                     /* минимальный отступ текст ↔ кнопка */
}
.legal-card__lead a {
    color: #D4AC4C;
    text-decoration: none;
    transition: color 0.15s ease;
}
.legal-card__lead a:hover,
.legal-card__lead a:focus-visible {
    color: #A87F1F;
    text-decoration: underline;
}
.legal-card__btn {
    width: 300px;
    max-width: 100%;               /* на узких экранах не шире карточки */
    margin-top: auto;              /* кнопка уезжает вниз карточки */
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 600;
}

/* ---------- Планшет и мобильные: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .legal {
        padding-top: 74px;         /* над заголовком 80 */
    }

    .legal__head {
        flex-direction: column;
        align-items: center;
        gap: 24px;                 /* заголовок ↔ текст */
        margin-bottom: 48px;       /* под текстом до картинки 48 */
        padding: 0 16px;
    }
    .legal__title,
    .legal__text {
        width: 100%;
        max-width: 700px;
    }
    .legal__title { margin-right: auto; }   /* заголовок влево */
    .legal__text  { margin-left: auto; padding: 0; }  /* текст вправо */

    /* Окно с фото: пропорции 360×336 из макета, сохраняются на любой ширине.
       Обычный блок в потоке — на соседей не влияет, эффект живёт внутри окна */
    .legal__media {
        height: auto;
        aspect-ratio: 360 / 336;
    }

    /* Параллакс фона выключен — картинка просто заполняет блок */
    .legal__img {
        height: 100%;
        object-position: right center;   /* статуя остаётся в кадре при любом кропе */
        transform: none !important;      /* сброс сдвига от JS */
    }

    .legal__overlay {
        align-items: flex-start;   /* карточки едут от нижнего края — двигает JS */
        padding: 0 16px;           /* отступы внутри фото */
    }
    .legal__wrap {
        max-width: none;
    }

    /* Планшет: карточки по 2 в ряд */
    .legal__cards {
        grid-auto-rows: auto;      /* высота — по контенту */
        width: auto;               /* снимаем десктопную ширину */
        max-width: none;
        will-change: transform;    /* подсказка браузеру: будем двигать */
    }

    .legal-card {
        padding: 24px;             /* внутри карточки 24 */
        min-width: 0;              /* колонка может сжаться уже кнопки в CTA-карточке */
    }
    .legal-card__title {
        margin-bottom: 16px;       /* заголовок ↔ текст 16 */
    }
    .legal-card--cta {
        gap: 16px;
    }
}

/* ---------- Телефон: карточки в одну колонку ---------- */
@media (max-width: 720px) {
    .legal__cards {
        grid-template-columns: 1fr;
    }
}

/* ==================== INSIGHTS & BLOG ==================== */

.insights {
    padding: 150px 60px 160px;
    background-color: #F4F2EC;
}

.insights__inner {
    max-width: 2160px;
    margin: 0 auto;
}

/* Ряд 1: предзаголовок + заголовок + круглая кнопка.
   Заголовок и кнопка выровнены по центру относительно друг друга */
.insights__head {
    display: flex;
    align-items: center;
    gap: clamp(40px, 3.125vw, 80px);
}
.insights__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    align-self: flex-start;        /* предзаголовок остаётся у верхней границы */
    padding-top: clamp(8px, calc(99.43px - 4.271vw), 38px);
}
.insights__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.insights__content {
    flex: 1 1 0;
    min-width: 0;
}
.insights__content h2 {
    max-width: 1200px;
    margin: 0;
}

/* Круглая кнопка «All Articles» */
.insights__circle {
    position: relative;            /* система координат для слоя ховера */
    overflow: hidden;
    z-index: 0;
    flex: 0 0 180px;               /* фиксированная, не сжимается */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(to right, #D9B858, #D4AC4C);
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #0B1826;
}
/* Ховер — тем же приёмом, что у .btn-gold */
.insights__circle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #DDC05D;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.insights__circle:hover::before {
    opacity: 1;
}

/* Ряд 2: сетка карточек — размеры как у карточек услуг */
.insights__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* ровно 3 в ряд на десктопе и ноутбуках */
    gap: 36px;
    margin-top: 120px;
}

/* Карточка статьи */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 36px;                     /* фото ↔ текстовый блок */
    padding: 48px;
    background-color: #ffffff;
}
.post-card__img {
    display: block;
    width: 100%;
    height: auto;                  /* иначе атрибут height="340" перебьёт aspect-ratio */
    aspect-ratio: 603 / 340;
    object-fit: cover;
}

/* Текстовый блок */
.post-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;                     /* между всеми текстами */
}
.post-card__topic {
    margin: 0;
    font-weight: 600;              /* semibold */
    letter-spacing: 0.04em;        /* разрядка 4% */
    text-transform: uppercase;
    color: #D4AC4C;
}
.post-card__title {
    margin: 0;
}
.post-card__text {
    margin: 0;
}
.post-card__meta {
    margin: 0;
    font-weight: 700;              /* bold */
    color: #4B5563;
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}
.post-card__title a:hover {
    color: #D4AC4C;
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .insights {
        padding: 80px 16px 84px;
    }
    .insights__head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;                 /* между предзаголовком и заголовком */
    }
    .insights__label,
    .insights__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .insights__label {
        padding-top: 0;
    }

    /* Круглая кнопка на мобилке меньше и прижата к правому краю */
    .insights__circle {
        flex: 0 0 110px;
        width: 110px;
        height: 110px;
        align-self: flex-end;      /* по правому краю */
        margin-top: 12px;          /* 12 + gap 12 = 24 от заголовка */
        padding: 0 20px 6px;           /* текст переносится в две строки */
        font-size: 14px;
        line-height: 20px;
    }

    .insights__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 328px), 1fr));
        gap: 16px;
        margin-top: 24px;
    }
    .post-card {
        gap: 20px;
        padding: 20px;
    }
    .post-card__body {
        gap: 12px;
    }
}

/* ==================== FAQ ==================== */

.faq {
    padding: 150px 60px 160px;

    /* Переменные блока: зазор до иконки и её размер.
       Ответ отступает справа ровно на эту сумму, чтобы не заезжать под иконку */
    --faq-gap: clamp(20px, calc(-60px + 6.25vw), 100px);   /* 100 на 2560 → 20 на 1280 */
    --faq-icon: 32px;
}

.faq__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}

/* Левая колонка — предзаголовок */
.faq__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.faq__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}

/* Правая колонка */
.faq__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Список вопросов */
.faq__list {
    margin-top: 88px;              /* под заголовком 80 */
}

/* Один вопрос */
.faq__item {
    border-top: 1px solid #DDE0E4;
}
.faq__item:last-child {
    border-bottom: 1px solid #DDE0E4;
}

/* Строка вопроса: текст слева, иконка справа */
.faq__head {
    display: flex;
    align-items: flex-start;
    gap: var(--faq-gap);
    padding: 32px 0;               /* внешние отступы вопроса */
    cursor: pointer;
    list-style: none;              /* убираем стандартный треугольник */
}
.faq__head::-webkit-details-marker {
    display: none;                 /* то же самое для Safari */
}
.faq__q {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Иконка: контурный круг + плюс по центру */
.faq__icon {
    flex: 0 0 var(--faq-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--faq-icon);
    height: var(--faq-icon);
    border: 2px solid #0B1826;
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.faq__head:hover .faq__icon {
    background-color: #D4AC4C;     /* ховер — и у закрытого, и у открытого */
    border-color: #D4AC4C;         /* контур сливается с заливкой */
}
.faq__icon img {
    display: block;
    transition: transform 0.25s ease;
}
/* Открытый вопрос — плюс превращается в крестик */
.faq__item[open] .faq__icon img {
    transform: rotate(45deg);
}

/* Плавное раскрытие: сетка едет от 0fr к 1fr, внутренний div обрезает содержимое */
.faq__body {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
}
/* Отрицательный отступ только у открытого вопроса и анимируется вместе с
   раскрытием. Раньше он стоял на .faq__body постоянно, но <details>
   рендерит содержимое лишь при open — поэтому −8px то появлялись, то
   исчезали мгновенно: рывок в кадре открытия и второй в момент, когда
   после анимации закрытия open становился false. */
.faq__item.is-open .faq__body {
    grid-template-rows: 1fr;
    margin-top: -8px;              /* 24 (padding вопроса) - 8 = 16 до ответа */
}
.faq__body > div {
    overflow: hidden;
    min-height: 0;
}

/* Ответ: живёт в левой зоне, под иконку не заезжает */
.faq__a {
    margin: 0;
    padding-bottom: 24px;          /* внешний отступ снизу */
    padding-right: calc(var(--faq-icon) + var(--faq-gap));
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .faq {
        padding: 80px 16px 80px;
        --faq-gap: 20px;
        --faq-icon: 24px;
    }
    .faq__inner {
        flex-direction: column;
        gap: 12px;
    }
    .faq__label,
    .faq__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .faq__label {
        padding-top: 0;
    }

    .faq__list {
        margin-top: 48px;
    }
    .faq__head {
        padding: 16px 0;           /* внешние отступы вопроса на мобилке */
    }
    .faq__item.is-open .faq__body {
        margin-top: 0;             /* 16 padding вопроса = ровно 16 до ответа */
    }
    .faq__a {
        padding-bottom: 16px;
    }
}

/* ==================== OUR TEAM ==================== */

.team {
    display: flex;
    flex-direction: column;        /* нужно, чтобы на мобилке стрелки уехали под карусель */
    padding: 150px 60px 160px;
}

/* Ряд 1: предзаголовок + заголовок */
.team__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    width: 100%;
    max-width: 2160px;
    margin: 0 auto;
}
.team__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.team__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.team__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.team__text {
    margin-top: 80px;              /* заголовок → текст */
}

/* Ряд 2: стрелки, прижаты вправо по сетке */
.team__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 48px;
    width: 100%;
    max-width: 2160px;
    margin: 80px auto 0;
}
.team__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #EFEFEF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.team__arrow:hover {
    background-color: #D4AC4C;
}
.team__arrow img {
    display: block;
    width: 34px;
    height: 28px;
}

/* Ряд 3: карусель.
   Левый край выровнен по сетке, правый уходит за край экрана */
.team__carousel {
    margin-top: 80px;
    margin-left: max(0px, calc((100% - 2160px) / 2));
    margin-right: -60px;           /* компенсируем правый padding секции */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;         /* прячем полосу прокрутки (Firefox) */
    cursor: grab;
}
.team__carousel::-webkit-scrollbar {
    display: none;                 /* то же для Chrome и Safari */
}
.team__carousel.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;         /* во время перетаскивания без сглаживания */
}
.team__track {
    display: flex;
    gap: clamp(24px, calc(18px + 0.469vw), 30px);
    width: max-content;            /* лента шире экрана — это и даёт прокрутку */
    padding-right: 60px;           /* воздух после последней карточки */
}

/* Карточка сотрудника */
.member {
    flex: 0 0 auto;
    width: clamp(180px, calc(60px + 9.375vw), 300px);
}
.member__photo {
    display: block;
    width: 100%;
    height: auto;                  /* иначе атрибут height перебьёт aspect-ratio */
    aspect-ratio: 300 / 350;
    object-fit: cover;
    user-select: none;             /* чтобы фото не «хватались» при перетаскивании */
    -webkit-user-drag: none;
}
.member__name {
    margin-top: 24px;              /* фото → имя */
}
.member__role {
    margin-top: 8px;               /* имя → должность */
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .team {
        padding: 80px 16px 76px;
    }
    .team__inner {
        flex-direction: column;
        gap: 12px;
    }
    .team__label,
    .team__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .team__label {
        padding-top: 0;
    }
    .team__text {
        margin-top: 48px;
    }

    /* Стрелки уезжают под карусель и разносятся по краям */
    .team__arrows {
        order: 2;
        justify-content: space-between;
        gap: 0;
        margin-top: 48px;
    }
    .team__arrow {
        width: 56px;
        height: 56px;
    }
    .team__arrow img {
        width: 24px;
        height: 20px;
    }

    .team__carousel {
        order: 1;
        margin-top: 48px;
        margin-left: 0;
        margin-right: -16px;       /* компенсируем мобильный padding секции */
    }
    .team__track {
        gap: 24px;
    }

}

/* ==================== CONTACTS ==================== */

.contacts {
    padding: 150px 60px 160px;
}
.contacts__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}
.contacts__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.contacts__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.contacts__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Две равные колонки */
.contacts__cols {
    display: flex;
    gap: 80px;
    margin-top: 80px;              /* под заголовком */
}
.contacts__col {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- Левая колонка: форма ---------- */
.contacts__form {
    display: flex;
    flex-direction: column;
    gap: 32px;                     /* группа полей ↔ чекбокс ↔ кнопка ↔ подпись */
    max-width: 620px;
}
.contacts__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;                     /* между полями внутри группы */
}
.contacts__textarea {
    min-height: 160px;
    resize: vertical;
}
/* Расстояния между блоками задаёт gap формы — снимаем отступы из стилей модалки */
.contacts__form .checkbox {
    margin-top: 0;
}
.contacts__submit {
    margin-top: 0;
    max-width: none;
}
.contacts__note {
    margin: 0;
    color: #7A8696;
}
/* ---------- Кастомный селект ---------- */
.select {
    position: relative;
}

/* Кнопка-поле: те же размеры и состояния, что у .field__input */
.select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 15px 14px;
    font-family: 'Geist', sans-serif;
    font-size: clamp(14px, calc(13.16px + 0.224vw), 18px);
    line-height: 1.56;
    text-align: left;
    background: transparent;
    border: 2px solid #7A8696;
    cursor: pointer;
    transition: border-color 0.2s;
}
.select__trigger:hover {
    border-color: #4B5563;
}
.select.is-open .select__trigger {
    border-color: #4B5563;
}
/* Выбранное значение */
.select.is-filled .select__trigger {
    border-color: #0B1826;
}

/* Плейсхолдер и значение */
.select__value {
    flex: 1 1 auto;
    min-width: 0;
    color: #BCC2CA;                /* плейсхолдер */
}
.select__trigger:hover .select__value {
    color: #7A8696;                /* плейсхолдер на ховере */
}
.select.is-filled .select__value,
.select.is-filled .select__trigger:hover .select__value {
    color: #4B5563;                /* выбранное значение */
}

.select__arrow {
    flex-shrink: 0;
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.select.is-open .select__arrow {
    transform: rotate(180deg);
}

/* Раскрывающийся список */
.select__menu {
    position: absolute;
    top: calc(100% - 2px);         /* контур поля и списка накладываются, а не дают 4px */
    left: 0;
    z-index: 20;
    width: 100%;
    padding: 4px;
    background-color: #ffffff;
    border: 2px solid #4B5563;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.select__menu[hidden] {
    display: none;
}

/* Пункт списка: отступы задаёт сам пункт, между пунктами зазора нет */
.select__option {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 12px 9px;
    font-family: 'Geist', sans-serif;
    font-size: clamp(14px, calc(13.16px + 0.224vw), 18px);
    line-height: 1.56;
    text-align: left;
    color: #4B5563;
    background: transparent;
    border: none;
    cursor: pointer;
}
.select__text {
    flex: 1 1 auto;                /* текст занимает всё место */
    min-width: 0;
}

/* Галочка справа: показывается на ховере и у выбранного пункта.
   Цвет задаётся через маску, поэтому один и тот же файл красится по-разному */
.select__check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0;
    background-color: #0B1826;
    -webkit-mask: url('../img/select_option.svg') no-repeat center / contain;
    mask: url('../img/select_option.svg') no-repeat center / contain;
}
.select__option:hover {
    background-color: #F4F2EC;
}
.select__option:hover .select__check {
    opacity: 1;
    background-color: #7A8696;
}
.select__option.is-selected {
    background-color: #D4AC4C;
    color: #0B1826;
}
.select__option.is-selected .select__check {
    opacity: 1;
    background-color: #0B1826;
}

/* ---------- Правая колонка: реквизиты ---------- */
.contacts__info {
    margin: 0;
}
.info-row {
    display: flex;
    gap: 24px;
    padding: 24px 0;               /* между линией и текстом */
    border-top: 1px solid #DDE0E4;
}
.info-row:last-child {
    border-bottom: 1px solid #DDE0E4;
}
.info-row__key {
    flex: 0 1 clamp(110px, calc(60px + 3.906vw), 160px);
    padding-top: 4px;              /* оптическое выравнивание со строкой справа */
    text-transform: uppercase;
    color: #7A8696;
}
.info-row__value {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);   /* как p */
    line-height: 1.56;
    color: #4B5563;
}
.info-row__value a {
    color: #D4AC4C;
    text-decoration: none;
    transition: color 0.15s ease;
}
.info-row__value a:hover,
.info-row__value a:focus-visible {
    color: #A87F1F;
    text-decoration: underline;
}

/* Те же каналы связи, что в CTA статьи. Разметка использует общий
   .expert-links, а этот класс отвечает лишь за место в контактах. */
.contacts__expert {
    margin-top: 48px;
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .contacts__expert {
        /* Контактный блок занимает ширину своей колонки. Сама логика строки
           экспертных ссылок описана единообразно ниже, рядом с компонентом. */
        width: 100%;
    }
    .contacts {
        padding: 80px 16px 86px;
    }
    .contacts__inner {
        flex-direction: column;
        gap: 12px;
    }
    .contacts__label,
    .contacts__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .contacts__label {
        padding-top: 0;
    }

    .contacts__cols {
        flex-direction: column;
        gap: 64px;                 /* от формы до реквизитов */
        margin-top: 48px;
    }
    .contacts__form {
        max-width: none;
    }
    .contacts__form .checkbox {
        margin-top: 0;             /* мобильный отступ из модалки тоже снимаем */
    }
    .info-row__key {
        padding-top: 6px;
    }
    .contacts__expert {
        margin-top: 40px;
    }
}

/* ==================== FOOTER ==================== */

.footer {
    padding: 160px 60px 80px;
    background-color: #0B1826;
}

/* --- Верх: логотип + колонки --- */
.footer__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}

/* Колонка с логотипом — ширина как у предзаголовков */
.footer__brand {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
}
.footer__logo {
    display: block;
    line-height: 0;                /* убираем лишний зазор под картинкой */
}
.footer__logo img {
    display: block;
    /* Размер задаётся общим правилом вместе с .header__logo img выше. */
}
.footer__tagline {
    margin: 32px 0 0;
    color: #7A8696;
}

/* Три колонки ссылок */
.footer__cols {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    gap: 80px;
}
.footer__col {
    flex: 1 1 0;
    min-width: 0;
}
.footer__title {
    margin: 0 0 32px;
    color: #ffffff;
}
.footer__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer__list li {
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);   /* как p */
    line-height: 1.56;
    color: #BCC2CA;
}
.footer__list a {
    color: #BCC2CA;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer__list a:hover {
    color: #D4AC4C;
}

/* --- Низ: разделитель, копирайт, правовые ссылки --- */
.footer__bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    max-width: 2160px;
    margin: 80px auto 0;
    padding-top: 80px;
    border-top: 1px solid #2B3644;
}
.footer__copy {
    margin: 0;
    color: #7A8696;
}
.footer__legal {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer__legal li {
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);   /* как p */
    line-height: 1.56;
}
.footer__legal a {
    color: #BCC2CA;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer__legal a:hover {
    color: #D4AC4C;
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .footer {
        padding: 84px 16px 44px;
    }
    .footer__inner {
        flex-direction: column;
        gap: 48px;
    }
    .footer__brand {
        flex: 1 1 auto;
        width: 100%;
    }
    .footer__tagline {
        margin-top: 24px;
    }

    /* Блог и контакты прячем — они уже есть выше на странице */
    .footer__col--blog,
    .footer__col--contacts {
        display: none;
    }
    .footer__title {
        margin-bottom: 16px;
    }

    /* Низ: сначала ссылки сеткой 2×2, под ними копирайт */
    .footer__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-top: 48px;
        padding-top: 48px;
    }
    .footer__legal {
        order: 1;
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        column-gap: 32px;
        row-gap: 24px;
    }
    .footer__copy {
        order: 2;
    }
}

html { scroll-behavior: smooth; }

/* ==================== COOKIE CONSENT ==================== */
/*
   Это отдельный компонент, а не вариант общих .button / .modal:
   в Figma у баннера намеренно компактные кнопки. Поэтому их 16/24 px и
   padding 12×16 px зафиксированы здесь и не меняются вместе с большими CTA.
   Так будущая настройка обычных кнопок сайта не сломает cookie-интерфейс. */

/* Небольшой баннер из первого Figma-фрейма. Фиксируем у края окна, чтобы он
   был доступен с любой страницы и не влиял на высоту основного контента. */
.cookie-banner {
    position: fixed;
    /* Ниже шапки (900), мобильного меню (1000) и модалок (1500/1600):
       баннер — часть страницы, а не элемент поверх всего. При 1700 он
       перекрывал CTA внутри раскрытого меню и ложился поверх собственного
       затемнения при переходе в «Manage preferences».
       Контент страницы выше 100 не поднимается, так что 800 его не задевает. */
    z-index: 800;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(730px, calc(100vw - 48px));
    padding: 24px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.cookie-banner[hidden] {
    display: none;
}
.cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cookie-banner__title {
    margin: 0;
    /* Типографика приходит от общего .h5-style в разметке. Не повторяем
       значения здесь: если H5 изменится в дизайн-системе, cookie-баннер
       автоматически останется синхронным с остальным сайтом. */
    color: #0B1826;
}
.cookie-banner__text {
    margin: 0;
    /* Размер и line-height берём из общего .secondary-text в разметке. */
    color: #4B5563;
}
.cookie-banner__text a {
    color: #D4AC4C;
    text-decoration: none;
    transition: color 0.15s ease;
}
.cookie-banner__text a:hover,
.cookie-banner__text a:focus-visible {
    color: #A87F1F;
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ВАЖНО: это именно уменьшенные кнопки cookie-баннера из Figma, 1:1.
   Не добавляем сюда класс .button: у него общая адаптивная формула сайта. */
.cookie-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #0B1826;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid #0B1826;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cookie-banner__button--manage {
    background-color: #ffffff;
}
.cookie-banner__button--reject {
    background-color: #0B1826;
    color: #ffffff;
}
.cookie-banner__button--accept {
    font-weight: 600;
    background: linear-gradient(to right, #D9B858, #D4AC4C);
    border-color: #D4AC4C;
    /* Повторяем принцип большой .btn-gold-solid: градиент в покое,
       цельный цвет при hover без анимации background-color. Иначе браузер
       пытается интерполировать transparent-слой и даёт белую вспышку. */
    transition: none;
}
.cookie-banner__button:hover,
.cookie-banner__button:focus-visible {
    outline: none;
    background-color: #D4AC4C;
    border-color: #D4AC4C;
    color: #0B1826;
}
/* Тот же hover, что у большой .btn-gold-solid: заменяем весь background,
   а не отдельный background-color. Селектор после общего hover — поэтому
   меняется только Accept all, без влияния на Manage / Reject. */
.cookie-banner__button--accept:hover,
.cookie-banner__button--accept:focus-visible {
    background: #DDC05D;
    border-color: #DDC05D;
}

/* Окно и затемнение получают базовые стили от .modal и .modal-overlay.
   Здесь остаётся только раскладка, которой у обычной формы заявки нет. */
.cookie-preferences {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Визуальный размер заголовка берём от общей H3-системы сайта: на больших
   экранах это 45/56, затем он плавно уменьшается до 22 px, без отдельной формулы. */
.cookie-preferences__title {
    margin: 0;
    padding-right: 36px;
}
.cookie-preferences__groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cookie-preferences__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cookie-preferences__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
}
.cookie-preferences__always-active {
    flex: 0 0 auto;
    color: #D4AC4C;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Настоящий checkbox остаётся в разметке для клавиатуры и screen reader,
   а круглый переключатель рисуется его соседним span. */
.cookie-switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    width: 48px;
    height: 28px;
    cursor: pointer;
}
.cookie-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
.cookie-switch__visual {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background-color: #7A8696;
    transition: background-color 0.2s ease;
}
.cookie-switch__visual::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}
.cookie-switch__input:checked + .cookie-switch__visual {
    background-color: #D4AC4C;
}
.cookie-switch__input:checked + .cookie-switch__visual::after {
    transform: translateX(20px);
}
.cookie-switch__input:focus-visible + .cookie-switch__visual {
    outline: 2px solid #0B1826;
    outline-offset: 3px;
}
.cookie-preferences__actions {
    display: flex;
    gap: 24px;
    width: 100%;
}
.cookie-preferences__button {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}
/* .modal__submit добавляет отступ сверху для одиночной кнопки под формой.
   В этом окне кнопка находится в общем ряду, поэтому сбрасываем только
   этот отступ; размер 60 px и шрифт p остаются из общего класса. */
.cookie-preferences__actions .modal__submit {
    margin-top: 0;
}

/* На узком экране кнопки растягиваются на всю строку, чтобы текст не обрезался. */
@media (max-width: 700px) {
    .cookie-banner {
        bottom: 16px;
        left: 16px;
        width: calc(100vw - 32px);
        /* На телефоне сокращаем только пустое пространство карточки.
           Размеры трёх кнопок Figma остаются исходными. */
        gap: 16px;
        padding: 16px;
    }
    .cookie-banner__content {
        gap: 12px;
    }
    .cookie-banner__actions {
        gap: 12px;
    }
    .cookie-banner__actions,
    .cookie-preferences__actions {
        flex-direction: column;
    }
    .cookie-banner__button,
    .cookie-preferences__button {
        width: 100%;
    }
    .cookie-preferences {
        gap: 24px;
    }
}

/* ==================== 404 ==================== */

/* Страница короткая, поэтому min-height держит основной блок не ниже окна.
   Высота шапки уже компенсирована body, см. --header-h выше. */
.not-found {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--header-h));
    padding: 72px 60px 120px;
    background-color: #FDFBF4;
}
.not-found__inner {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 2160px;
    margin: 0 auto;
    text-align: center;
}
.not-found__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
}

.not-found__number {
    /* Ручная компенсация только для цифр «404». Заголовок, текст и кнопка
       не наследуют эти отступы и остаются в исходном центре контейнера. */
    padding-left: 4px;
    padding-right: 28px;
    /* У Baskervville нижние элементы цифр выходят за высоту строки.
       64px дают реальный визуальный зазор между крупной «404» и H3. */
    margin: 0 0 clamp(56px, calc(30.74px + 6.48vw), 124px);
    font-family: 'Baskervville', serif;
    font-size: clamp(130px, calc(39px + 16.8vw), 430px);
    font-weight: 700;
    line-height: 0.72;
    letter-spacing: -0.06em;
    color: rgba(212, 172, 76, 0.32);
}
.not-found__title {
    /* Размер и line-height приходят от общего .h3-style выше. */
    max-width: 680px;
}
.not-found__text {
    max-width: 560px;
    margin-top: 24px;
}
.not-found__actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.thank-you {
    /* Повторяем только верхний отступ Privacy Policy: 150 px на desktop. */
    padding-top: 150px;
}
.thank-you__logo {
    /* Исходный SVG квадратный. Высоту рассчитывает браузер по пропорции,
       поэтому значок остаётся круглым/квадратным на любом экране. */
    display: block;
    /* Desktop-версия увеличена на 30%; мобильное правило ниже остаётся 72 px. */
    width: clamp(94px, calc(59.75px + 3.344vw), 136px);
    height: auto;
    margin: 0 0 40px;
}
.thank-you__actions {
    /* Контейнер задаёт только ширину. Сама кнопка берёт все размеры из
       общего .btn-gold-solid — ровно как Become a Partner на главной. */
    width: min(100%, 420px);
}
.not-found__home {
    min-width: 240px;
    min-height: 56px;
    color: #ffffff;
    background-color: #0B1826;
    border-color: #0B1826;
}
.not-found__home:hover {
    color: #0B1826;
    background-color: #D4AC4C;
    border-color: #D4AC4C;
}
@media (max-width: 1280px) {
    .not-found {
        align-items: flex-start;
        min-height: calc(100vh - var(--header-h));
        padding: 48px 16px 80px;
    }
    .not-found__number {
        font-size: clamp(120px, 43vw, 180px);
    }
    .not-found__text {
        margin-top: 24px;
    }
    .thank-you {
        /* На мобильном берём тот же верхний отступ, что у Privacy Policy. */
        padding-top: 80px;
    }
    .thank-you__logo {
        /* На мобильном сохраняем заметный знак, но не отнимаем высоту у текста. */
        width: 72px;
        margin-bottom: 32px;
    }
    .not-found__actions {
        margin-top: 32px;
    }
    .not-found__home {
        width: 100%;
    }
}

/* ==================== ПРИЛИПАЮЩАЯ ШАПКА ==================== */
/* Появляется при скролле вверх, прячется при скролле вниз */
/* Шапка зафиксирована всегда. Фон — «стекло»: полупрозрачный белый
   с размытием подложки, поэтому граница читается без тени */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;                  /* над контентом, под мобильным меню и модалками */

    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

/* Браузеры без backdrop-filter получают почти непрозрачный фон,
   иначе текст ляжет на контент и станет нечитаемым */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

/* Компенсация высоты шапки и отступ якорей задаются переменной --header-h
   в секции ШАПКА в начале файла */

/* ==================== PRIVACY POLICY ==================== */

.policy {
    padding: 150px 60px 160px;
}

/* Ряд: слева заголовок раздела, справа текст — та же сетка, что у секций главной */
.policy__row {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 80px auto 0;           /* между текстовыми разделами 80 */
}
.policy__row--head {
    margin-top: 0;
}
.policy__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
}
.policy__label .h5-style {
    margin: 0;
    text-transform: uppercase;
    color: #4B5563;
}

/* Текстовый блок: между абзацами 16 */
.policy__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1000px;
}
.policy__content > * {
    margin: 0;                     /* отступы задаёт gap */
}
.policy__content a {
    color: inherit;
}

/* Маркированный список */
.policy__list {
    padding-left: 20px;
    list-style: disc;
}
.policy__list li {
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);   /* как p */
    line-height: 1.56;
}

/* Нумерованный список на правовых страницах: номер акцентного цвета */
.policy__list--num {
    padding-left: 28px;
    list-style: decimal;
}
.policy__list--num li::marker {
    font-weight: 600;
    color: #D4AC4C;
}

/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .policy {
        padding: 8px 16px 80px;        /* до шапки и подвала 80, боковые 16 */
    }
    .policy__row {
        flex-direction: column;
        gap: 24px;                 /* заголовок раздела ложится над текстом */
        margin-top: 48px;          /* между текстовыми разделами 48 */
    }
    .policy__label,
    .policy__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .policy__label {
        padding-top: 0;
    }
}

/* Подзаголовок внутри текстового блока */
.policy__subtitle {
    margin-top: 16px;              /* 16 от gap + 16 = 32 перед подзаголовком */
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, calc(0.00px + 1.111vw), 24px);   /* как h5 */
    line-height: 1.4;
    color: #4B5563;
}

/* Кнопка «Back to home» */
a.policy__back {
    align-self: flex-start;        /* не растягивается на всю колонку */
    width: 300px;
    max-width: 100%;
    margin-top: 32px;              /* 16 от gap + 32 = 48 над кнопкой */
    color: #0B1826;                /* перебиваем `.policy__content a { color: inherit }` */
}

/* ==================== SERVICE INTRO (страницы услуг) ==================== */

.service-intro {
    padding: 80px 60px 170px;
}

/* Контейнер: предзаголовок слева + контент справа — как в licences/about/services */
.service-intro__inner {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}

/* Левая колонка — предзаголовок */
.service-intro__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.service-intro__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}

/* Правая колонка — весь контент */
.service-intro__content {
    flex: 1 1 0;
    min-width: 0;
}

/* h1 на странице услуги визуально работает как h2 */
.service-intro h1 {
    font-size: clamp(32px, calc(-11.27px + 4.225vw), 80px);
    line-height: 1.13;
}

/* --- Две колонки: 860 / 120 / 500 при контенте 1480 ---
   Доли fr + процентный gap делают пропорцию неизменной на любой ширине:
   120 / 1480 = 8.108%, остаток 1360 делится как 860 : 500 */
.service-intro__row {
    display: grid;
    grid-template-columns: minmax(0, 860fr) minmax(0, 500fr);
    column-gap: 8.108%;
    margin-top: 80px;
}

/* ---------- Колонка 1: фото + текст + кнопка ---------- */
.service-intro__main {
    display: flex;
    flex-direction: column;
    gap: 80px;
    /* align-items убираем — пусть дети растягиваются как обычно */
}

.service-intro__photo {
    display: block;
    width: 100%;
    max-width: 100%;           /* страховка: картинка не распирает колонку */
    height: auto;
}

.service-intro__text {
    display: flex;
    flex-direction: column;
    gap: 32px;                 /* между абзацами */
}

/* Кнопка: базовый .btn-gold фиксирован на 300px — снимаем и ограничиваем 420 */
.service-intro__main .btn-gold {
    align-self: flex-start;   /* не растягиваться — только кнопка */
    width: 100%;
    max-width: 420px;
    padding: 23px 24px 21px;
}

/* ---------- Колонка 2: что входит в услугу ---------- */
.service-intro__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;                 /* между пунктами */
}

.service-intro__item {
    display: flex;
    gap: 12px;                 /* между чёрточкой и текстом */
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);
    line-height: 1.56;
}

/* Чёрточка — декор, поэтому псевдоэлемент, а не <img> */
.service-intro__item::before {
    content: '';
    flex: 0 0 28px;
    height: 28px;              /* совпадает с высотой строки — чёрточка встаёт по первой строке */
    background: url('../img/service_line.svg') no-repeat center;
    background-size: 28px 28px;
}


/* ---------- Мобильная версия: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .service-intro {
        padding: 48px 16px 84px;
    }
    .service-intro__inner {
        flex-direction: column;
        gap: 12px;             /* между предзаголовком и заголовком */
    }
    .service-intro__label,
    .service-intro__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .service-intro__label {
        padding-top: 0;
    }

    /* Одна колонка, список поднимается над фото и текстом.
       minmax(0, 1fr) обязателен: у голого 1fr минимум равен min-content,
       а картинка отдаёт в min-content свою натуральную ширину 860px
       и распирает страницу */
    .service-intro__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
        margin-top: 40px;
    }
    .service-intro__list {
        order: -1;
    }

    .service-intro__main {
        gap: 40px;
    }
    .service-intro__text {
        gap: 16px;
    }

    /* Кнопка подчиняется общему мобильному правилу .btn-gold (auto / 17-16-15) */
    .service-intro__main .btn-gold {
        width: 100%;          /* Растягиваем на всю ширину родительского блока */
        max-width: 420px;     /* Ограничиваем максимальную ширину */
        padding: 17px 16px 15px;
        

    }
}

html {
    overflow-x: clip;

    /* Место под полосу прокрутки резервируем всегда. Без этого в момент
       блокировки прокрутки полоса исчезает, и страница вместе с
       фиксированной шапкой прыгает на её ширину. */
    scrollbar-gutter: stable;
}

/* Блокировка прокрутки под открытым меню и модалками.
   Именно на <html>: overflow-x: clip выше означает, что overflow у html
   не visible, а в этом случае браузер перестаёт брать значение с body —
   и привычное body { overflow: hidden } просто ничего не делает. */
html.is-scroll-locked {
    overflow-y: hidden;
}






/* ==================== BLOG (список публикаций) ==================== */

/* Класс называется blog-index, а не blog: WordPress сам ставит класс blog
   на <body> ленты записей — одинаковое имя привело бы к тому, что эти отступы
   и фон применились ко всей странице. */
.blog-index {
    /* Вертикальные отступы: полные на 2560, к 1440 тают на 30% */
    --blog-pad-y: clamp(112px, calc(50.29px + 4.2857vw), 160px);   /* 160 → 112 */
    --blog-gap:   clamp(84px,  calc(37.71px + 3.2143vw), 120px);   /* 120 → 84  */

    padding: var(--blog-pad-y) 60px;
    background-color: #F4F2EC;
}
.blog__inner {
    max-width: 2160px;
    margin: 0 auto;
}

/* Ряд 1: предзаголовок + заголовок */
.blog__head {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
}
.blog__label {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);
}
.blog__label .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}
.blog__content {
    flex: 1 1 0;
    min-width: 0;
}
/* h1 на странице блога визуально работает как h2 */
.blog__content h1 {
    font-size: clamp(32px, calc(-11.27px + 4.225vw), 80px);
    line-height: 1.13;
}

/* Ряд 2: фильтр по категориям */
.blog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: var(--blog-gap);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px 15px;
    border: 1px solid #7A8696;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;

    font-family: 'Geist', sans-serif;
    font-size: clamp(12px, calc(4.00px + 0.556vw), 16px);   /* secondary-text */
    line-height: 1.5;
    font-weight: 500;              /* medium */
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7A8696;

    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.filter-chip:hover {
    background-color: #FDFBF4;
    border-color: #D4AC4C;
    color: #D4AC4C;
}
/* Активная категория — фирменный градиент */
.filter-chip.is-active {
    border-color: transparent;
    background: linear-gradient(to right, #D9B858, #D4AC4C);
    color: #0B1826;
    cursor: default;
}

/* Ряд 3: сетка карточек — размеры как в Insights на главной */
.blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* ровно 3 в ряд на десктопе и ноутбуках */
    gap: 36px;
    margin-top: 48px;
}
/* Скрытая фильтром карточка (атрибут hidden сам по себе не победит display: flex) */
.post-card[hidden] {
    display: none;
}

/* ---------- Ряд 4: пагинация ---------- */
/* «Показать ещё» слева, переключение страниц прижато вправо,
   между ними не меньше 24 */
.blog__pagination {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: var(--blog-gap);
}

/* Общий вид всех кнопок пагинации */
.blog__more,
.pager__btn,
.pager__page,
.pager__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border: none;
    background-color: #ffffff;
    font-family: 'Geist', sans-serif;
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);   /* как p */
    line-height: 1.56;
    text-transform: uppercase;
    text-decoration: none;
    color: #0B1826;
    transition: background-color 0.2s, color 0.2s;
}

/* Текст кнопок — medium, цифры страниц — regular */
.blog__more,
.pager__btn {
    font-weight: 500;
}
.pager__page,
.pager__dots {
    font-weight: 400;
}

/* Кнопка «показать ещё» */
.blog__more {
    flex: 0 1 300px;
    gap: 16px;                 /* иконка ↔ текст */
    min-width: 0;
    padding: 2px 24px 0;       /* текст на 1px ниже центра */
    cursor: pointer;
}
.blog__more img {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
}

/* Переключение страниц */
.pager {
    display: flex;
    flex-wrap: nowrap;         /* сначала сжимаются кнопки, переносов нет */
    align-items: center;
    gap: 2px;                  /* просвет фона между кнопками */
    min-width: 0;
}
/* Back и Next — те же 300 максимум, сжимаются первыми */
.pager__btn {
    flex: 0 1 auto;
    width: 303px;              /* явная ширина: иначе флекс-базис съедается
                                  тем, что .pager сам сжимается по содержимому */
    min-width: 0;
    padding: 2px 16px 0;       /* текст на 1px ниже центра */
    white-space: nowrap;
}
.pager__page,
.pager__dots {
    flex: 0 0 auto;
    width: clamp(60px, calc(40px + 1.5625vw), 80px);   /* 80 на 2560 → 60 */
    padding: 2px 0 0;          /* текст на 1px ниже центра */
}
.pager__dots {
    color: #7A8696;
    cursor: default;
}

/* Текущая страница — фирменный градиент */
.pager__page.is-current {
    background: linear-gradient(to right, #D9B858, #D4AC4C);
    cursor: default;
}

/* Ховер — кремовая заливка и золотой текст */
.blog__more:hover,
.pager__btn:hover,
.pager__page:not(.is-current):hover {
    background-color: #FDFBF4;
    color: #D4AC4C;
}

/* ---------- Планшет и мобильные: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    .blog-index {
        padding: 80px 16px;
    }
    .blog__head {
        flex-direction: column;
        gap: 12px;             /* между предзаголовком и заголовком */
    }
    .blog__label,
    .blog__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .blog__label {
        padding-top: 0;
    }

    .blog__filters {
        gap: 8px;
        margin-top: 24px;
    }
    .filter-chip {
        padding: 12px 20px;    /* капсула 44px — минимум для попадания пальцем */
    }

    .blog__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 328px), 1fr));
        gap: 16px;
        margin-top: 24px;
    }

    /* «Показать ещё» наверх, обе строки во всю ширину блока */
    .blog__pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-top: 24px;
    }
    .blog__more {
        flex: 0 0 auto;
        width: 100%;
    }
    .pager {
        width: 100%;
    }
    /* Back и Next делят между собой всё свободное место */
    .pager__btn {
        flex: 1 1 0;
    }
    /* Оставляем только Back, три страницы и Next */
    .pager__page--extra,
    .pager__dots {
        display: none;
    }
}


/* ---------- Ноутбуки 1281–1600: три колонки остаются, зазоры поджимаются ---------- */
/* Диапазон закрыт с обеих сторон намеренно: иначе правило перебило бы
   мобильные значения, потому что стоит ниже по файлу */
@media (min-width: 1281px) and (max-width: 1600px) {
    .insights__grid,
    .blog__grid {
        gap: 24px;
    }
    .post-card {
        gap: 24px;
        padding: 32px;
    }
}


/* ==================== РАЗМЕРЫ КНОПОК ====================
   Высота = line-height + верхний паддинг + нижний паддинг + рамка.
   Межстрочный задан в пикселях: при относительном значении высота не сходится
   (24 × 1.4 = 33.6, а нужно ровно 32).

   БОЛЬШАЯ:  24/32 + 23/21 = 76   на 2560
   СРЕДНЯЯ:  18/28 + 17/15 = 60   на 2560
   обе:      16/24 + 17/15 = 56   на 1280 и ниже

   Толщина рамки объявляется у самой кнопки через --btn-bw и вычитается
   из вертикальных паддингов, поэтому контурная и залитая кнопки
   одной высоты. */

/* --- Большие --- */
.btn-gold,
.btn-outline,
.btn-gold-solid,
.service-card__btn {
    font-size:      clamp(16px, calc( 8px + 0.62500vw), 24px);   /* 16 → 24 */
    line-height:    clamp(24px, calc(16px + 0.62500vw), 32px);   /* 24 → 32 */
    padding-top:    calc(clamp(17px, calc(11px + 0.46875vw), 23px) - var(--btn-bw, 0px));
    padding-bottom: calc(clamp(15px, calc( 9px + 0.46875vw), 21px) - var(--btn-bw, 0px));
}

/* --- Средние --- */
.button,
.legal-card__btn,
.contacts__submit,
.modal__submit {
    font-size:      clamp(16px, calc(14px + 0.15625vw), 18px);   /* 16 → 18 */
    line-height:    clamp(24px, calc(20px + 0.31250vw), 28px);   /* 24 → 28 */
    padding-top:    calc(17px - var(--btn-bw, 0px));
    padding-bottom: calc(15px - var(--btn-bw, 0px));
}

/* ==================== POST (содержимое статьи) ==================== */

/* Все вертикальные отступы статьи — резиновые: максимум на 2560,
   минимум на 1280, между ними плавно. Значения собраны в переменные,
   поэтому мобильный медиазапрос переопределяет их одним блоком */
/* post-page, а не post: класс post WordPress выдаёт каждой записи сам. */
.post-page {
    --post-pad-top:   clamp( 84px, calc(28px + 4.3750vw), 140px);   /* 140 → 84 */
    --post-pad-bot:   clamp( 96px, calc(32px + 5.0000vw), 160px);   /* 160 → 96 */
    --post-gap-block: clamp( 72px, calc(24px + 3.7500vw), 120px);   /* 120 → 72 */
    --post-gap-group: clamp( 28px, calc( 8px + 1.5625vw),  48px);   /*  48 → 28 */
    --post-gap-para:  clamp( 20px, calc( 8px + 0.9375vw),  32px);   /*  32 → 20 */
    --post-gap-list:  clamp(  8px, calc( 4px + 0.3125vw),  12px);   /*  12 →  8 */
    --post-note-pad:  clamp( 20px, calc( 8px + 0.9375vw),  32px);   /*  32 → 20 */
    --post-sum-pad-y: clamp( 12px, calc( 8px + 0.3125vw),  16px);   /*  16 → 12 */
    --post-sum-pad-x: clamp( 16px, calc( 8px + 0.6250vw),  24px);   /*  24 → 16 */

    display: block;
    padding: var(--post-pad-top) 60px var(--post-pad-bot);
}

/* Ряд: мета слева, содержимое справа — сетка как у всех секций */
.post__row {
    display: flex;
    gap: clamp(40px, 3.125vw, 80px);
    max-width: 2160px;
    margin: 0 auto;
}

/* Между смысловыми блоками статьи */
.post__row + .post__row {
    margin-top: var(--post-gap-block);
}

/* Левая колонка: категория, автор, дата */
.post__meta {
    flex: 0 1 clamp(280px, calc(26.21px + 22.414vw), 600px);
    padding-top: clamp(0px, calc(-4.71px + 2.0vw), 8px);

    display: flex;
    flex-direction: column;
    gap: 10px;
}
.post__meta .h5-style {
    text-transform: uppercase;
    color: #4B5563;
}

/* Правая колонка */
.post__content {
    flex: 1 1 0;
    min-width: 0;
}

/* Вертикальный ритм между смысловыми группами */
.post__content > * + * {
    margin-top: var(--post-gap-group);
}

/* h1 статьи визуально работает как h2 */
.post__content h1 {
    font-size: clamp(32px, calc(-11.27px + 4.225vw), 80px);
    line-height: 1.13;
    color: #0B1826;
}

/* Заголовок финального блока — крупнее остальных */
.post__content h2 {
    color: #0B1826;
}

/* Тезисы статьи в рамке */
.post__summary {
    padding: var(--post-sum-pad-y) var(--post-sum-pad-x);
    border: 1px solid #4B5563;

    font-family: 'Geist', sans-serif;
    font-size: clamp(16px, calc(0.00px + 1.111vw), 24px);   /* h5-style */
    line-height: 1.4;
    font-weight: 600;
    color: #4B5563;
}

/* Абзацы: размер article-lead, регуляр, приглушённый цвет */
.post__text {
    display: flex;
    flex-direction: column;
    gap: var(--post-gap-para);
}
.post__text p,
.post__note p {
    font-size: clamp(16px, calc(0.00px + 1.111vw), 24px);   /* article-lead */
    line-height: 1.4;
    font-weight: 400;
    color: #4B5563;
}

/* Подзаголовок внутри блока — тот же кегль, но полужирный.
   Два класса в селекторе: иначе правило .post__text p перебьёт по специфичности */
.post__text .post__subtitle {
    font-weight: 600;
    color: #364152;
}

/* Ссылка внутри текста статьи. Браузерный синий выбивается из палитры,
   поэтому берём фирменный золотой. Подчёркивание убрано, но появляется
   при наведении и с клавиатуры: иначе ссылку трудно отличить от текста. */
.post__text a,
.post__note a,
.service-intro__text a {
    color: #D4AC4C;
    text-decoration: none;
    transition: color 0.15s ease;
}
.post__text a:hover,
.post__note a:hover,
.service-intro__text a:hover,
.post__text a:focus-visible,
.post__note a:focus-visible,
.service-intro__text a:focus-visible {
    color: #A87F1F;
    text-decoration: underline;
}

/* ---------- Таблица, цитата и линия внутри текста ---------- */
/* Эти три блока приходят из редактора WordPress. В прототипе их не было,
   поэтому оформляем здесь — в тех же цветах и ритме, что и всё остальное. */

/* Таблица приходит в обёртке <figure>. На узком экране прокручивается
   внутри себя, а не растягивает страницу. */
.post__text figure,
.policy__content figure {
    margin: 0;
    overflow-x: auto;
    /* Без этого колонка текста растянулась бы под ширину таблицы,
       вместо того чтобы дать ей прокручиваться внутри себя. */
    min-width: 0;
}
/* Второй селектор с классом нужен, чтобы перебить редактор блоков:
   при включённой в нём галочке «фиксированная ширина» он раздаёт колонкам
   равные доли экрана, и на телефоне слова ломаются посреди буквы. */
.post__text table,
.post__text table.has-fixed-layout,
.policy__content table,
.policy__content table.has-fixed-layout {
    table-layout: auto;
    /* Ширина по содержимому, но не уже колонки текста. */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);
    line-height: 1.5;
}
/* Все линии задаём сами и одним цветом: иначе часть из них рисует
   редактор блоков цветом текста, и рамка выходит темнее внутренних линий. */
.post__text th,
.post__text td,
.policy__content th,
.policy__content td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #E6E2D8;
    /* Колонку уже этого не сжимаем. На узком экране таблица не корёжится,
       а уезжает за край — и прокручивается пальцем внутри своей области. */
    min-width: 160px;
    word-break: normal;
}
/* Редактор блоков рисует под шапкой собственную толстую линию цветом
   текста. Снимаем её — под шапкой у нас тонкая золотая. */
.post__text thead,
.policy__content thead {
    border-bottom: 0;
}
.post__text thead th,
.policy__content thead th {
    font-weight: 600;
    color: #0B1826;
    background-color: #F9F7F1;
    border-bottom-color: #D4AC4C;
}
/* Цитата. Рамку и заливку не берём — они уже заняты врезкой.
   Отличается знаком кавычек слева, наклоном и кеглем.
   Сетка из двух колонок: знак и текст, знак прижат к верху. */
.post__text blockquote,
.policy__content blockquote {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    row-gap: 16px;
    align-items: start;
    margin: 0;
    padding: 0;
}
.post__text blockquote::before,
.policy__content blockquote::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    background: url('../img/quote_icon.svg') no-repeat top left / contain;
}
.post__text blockquote > *,
.policy__content blockquote > * {
    grid-column: 2;
}
/* Размер, цвет и межстрочный интервал — те же, что у обычного абзаца
   статьи. Цитату отличает только наклон. */
.post__text blockquote p,
.policy__content blockquote p {
    font-style: italic;
}
.post__text blockquote cite,
.policy__content blockquote cite {
    display: block;
    font-size: 14px;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
}

/* Таблица и цитата стоят в тексте особняком — добавляем им немного
   воздуха сверху и снизу поверх общего ритма колонки. */
.post__text > figure,
.post__text > blockquote,
.policy__content > figure,
.policy__content > blockquote {
    margin-block: 8px;
}

/* Разделительная линия */
.post__text hr,
.policy__content hr {
    width: 100%;
    height: 1px;
    margin: 8px 0;
    border: 0;
    background-color: #E6E2D8;
}

/* ---------- Те же блоки на правовой странице ---------- */
/* Разметка и цвета общие, отличается кегль: текст правовой страницы
   мельче, чем в статье. Поэтому врезке задаём свои отступы (без этого
   она осталась бы вовсе без полей: переменная --post-note-pad живёт
   только внутри статьи), а знак цитаты уменьшаем под размер текста. */
.policy .post__note {
    --post-note-pad: clamp(16px, calc(8.00px + 0.625vw), 24px);   /*  24 → 16 */
}
.policy .post__note p,
.policy .post__note li {
    font-size: clamp(14px, calc(6.00px + 0.556vw), 18px);   /* как p */
    line-height: 1.56;
}
.policy__content blockquote {
    column-gap: 16px;
}
.policy__content blockquote::before {
    width: 24px;
    height: 24px;
}

/* Маркированный список: живёт внутри .post__text и подчиняется его ритму */
.post__list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;

    display: flex;
    flex-direction: column;
    gap: var(--post-gap-list);
}
.post__list li {
    font-size: clamp(16px, calc(0.00px + 1.111vw), 24px);   /* article-lead */
    line-height: 1.4;
    color: #4B5563;
}
.post__list li::marker {
    font-size: 0.8em;
}

/* Нумерованный список: тот же ритм, что у маркированного.
   Номер не уменьшаем — он часть текста, и делаем его акцентным:
   так список читается как перечень шагов, а не как сноски. */
.post__list--num {
    padding-left: 28px;         /* с запасом под двузначные номера */
    list-style: decimal;
}
.post__list--num li::marker {
    font-size: 1em;
    font-weight: 600;
    color: #D4AC4C;
}

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

/* Врезка — как «Become a partner», но с собственными отступами */
.post__note {
    display: flex;
    flex-direction: column;
    gap: var(--post-note-pad);
    padding: var(--post-note-pad);
    background-color: #F9F7F1;
    border-left: 2px solid #D4AC4C;
}

/* ---------- Планшет и мобильные: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    /* Переопределяем только переменные — правила выше подхватят их сами */
    .post-page {
        --post-pad-top:   56px;
        --post-pad-bot:   84px;
        --post-gap-block: 64px;
        --post-gap-group: 24px;
        --post-gap-para:  16px;
        --post-gap-list:  8px;
        --post-note-pad:  16px;
        --post-sum-pad-y: 12px;
        --post-sum-pad-x: 16px;

        padding: var(--post-pad-top) 16px var(--post-pad-bot);
    }

    .post__row {
        flex-direction: column;
        gap: 12px;
    }
    .post__meta,
    .post__content {
        flex: 1 1 auto;
        width: 100%;
    }
    .post__meta {
        padding-top: 0;
    }

    /* Во врезке боковые отступы больше вертикальных */
    .post__note {
        padding: 20px 24px;
    }
}

/* ==================== POST CTA (подпись и действия под статьёй) ==================== */

.post-cta {
    padding: 120px 60px;
}
.post-cta__inner {
    /* CTA статьи сознательно уже общего контейнера сайта: так текст H4
       читается строками комфортной длины и ряд действий не «разъезжается». */
    max-width: 1240px;
    margin: 0 auto;
}

.post-cta__text {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

/* Второй ряд CTA: блок связи слева, знакомые действия со статьёй справа.
   Отступ 120 px задан именно между двумя смысловыми группами, а не между
   отдельными иконками и кнопками. */
.post-cta__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}
.post-cta__expert,
.expert-links {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 32px;
}
.post-cta__expert-label,
.expert-links__label {
    /* Повторяем параметры больших кнопок, чтобы Ask an expert выглядел
       частью той же системы, но не получал их рамку и размеры кнопки. */
    margin: 0;
    font-family: 'Geist', sans-serif;
    font-size: clamp(16px, calc(8px + 0.625vw), 24px);
    font-weight: 600;
    line-height: clamp(24px, calc(16px + 0.625vw), 32px);
    text-transform: uppercase;
    color: #0B1826;
}
.post-cta__socials,
.expert-links__socials {
    display: flex;
    align-items: center;
    gap: 24px;
}
.post-cta__social-link,
.expert-links__link {
    /* Размер плавно меняется от 76 px на широком экране до 56 px на 1280.
       Рамка всегда занимает место в layout, поэтому hover ничего не сдвигает. */
    position: relative;
    isolation: isolate;
    display: grid;
    width: clamp(56px, calc(36px + 1.5625vw), 76px);
    height: clamp(56px, calc(36px + 1.5625vw), 76px);
    place-items: center;
    overflow: hidden;
    border: 2px solid #0B1826;
    border-radius: 50%;
    color: #0B1826;
    text-decoration: none;
}
.post-cta__social-link::before,
.expert-links__link::before {
    /* Градиент появляется отдельным слоем через opacity. Это тот же приём,
       что для стабильных контурных состояний: border не меняет толщину,
       элемент не прыгает и браузер не интерполирует фон в белую вспышку. */
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: linear-gradient(to right, #D9B858, #D4AC4C);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.post-cta__social-link:hover::before,
.post-cta__social-link:focus-visible::before,
.expert-links__link:hover::before,
.expert-links__link:focus-visible::before {
    opacity: 1;
}
.post-cta__social-link:hover,
.post-cta__social-link:focus-visible,
.expert-links__link:hover,
.expert-links__link:focus-visible {
    /* Как у контурных .button: цвет рамки совпадает с заливкой hover.
       Поэтому тёмный контур не остаётся поверх градиента, но его 2 px
       по-прежнему резервируют место и круг не меняет размер. */
    border-color: #D4AC4C;
}
.post-cta__social-link:focus-visible,
.expert-links__link:focus-visible {
    outline: 2px solid #D4AC4C;
    outline-offset: 3px;
}
.post-cta__social-link img,
.expert-links__link img {
    /* SVG остаётся тёмным поверх золотого hover-слоя. */
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(24px, calc(16px + 0.625vw), 32px);
    height: clamp(24px, calc(16px + 0.625vw), 32px);
}

.post-cta__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 16px;
    margin-left: 120px;
}

/* Кнопки взяты с главной: золотая — .btn-gold-solid из Partner Programme,
   контурная — .service-card__btn из Services */
.post-cta__btn {
    flex: 0 1 auto;
    width: 300px;              /* явная ширина: .post-cta__actions сжат по содержимому,
                                  флекс-базис в такой ситуации не сработает */
    max-width: 300px;
    min-width: 0;
    margin-top: 0;             /* снимаем margin-top: auto у .service-card__btn */
}

/* Иконка внутри контурной */
.post-cta__share {
    gap: 16px;                 /* иконка ↔ текст */
    cursor: pointer;

    /* Компенсацию с самой кнопки снимаем: она сдвигала бы и иконку тоже.
       Паддинг симметричный, высота та же — 76 на 2560, 56 на 1280 и ниже */
    padding-top:    calc(clamp(16px, calc(10px + 0.46875vw), 22px) - var(--btn-bw, 0px));
    padding-bottom: calc(clamp(16px, calc(10px + 0.46875vw), 22px) - var(--btn-bw, 0px));
}

/* Компенсация переезжает на сам текст — иконка остаётся по центру.
   Смещение через top, а не паддинг: паддинг внутри центрированного флекса
   даёт сдвиг вдвое меньше заданного, top сдвигает ровно на указанное */
.post-cta__label {
    position: relative;
    top: 1px;
}

.post-cta__icon {
    flex-shrink: 0;
    display: block;
    width: 28px;
    height: 28px;
}

/* ---------- Планшет и мобильные: ≤ 1280px ---------- */
@media (max-width: 1280px) {
    /* Единая мобильная логика для всех повторений .expert-links:
       CTA статьи, мобильного меню и секции Contacts. Она не зависит от
       места компонента, поэтому Ask an expert не переносится, а три круга
       всегда остаются у правого края одной строки. */
    .expert-links {
        justify-content: space-between;
        gap: 0;
    }
    .expert-links__label {
        white-space: nowrap;
    }
    .expert-links__socials {
        /* 3 × 56 px + 2 × 16 px: компактная группа помещается в mobile. */
        gap: 16px;
        flex-shrink: 0;
    }

    .post-cta {
        padding: 64px 16px;
    }
    .post-cta__text {
        max-width: none;
        /* На mobile длинный H4 читается быстрее от левого края, как остальные
           текстовые блоки сайта. Desktop-версия выше остаётся центрированной. */
        text-align: left;
    }

    /* На телефоне три смысловых части идут вертикально: текст → эксперт →
       кнопки. Между ними ровно 48 px, как в макете. */
    .post-cta__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        margin-top: 48px;
    }
    .post-cta__expert {
        /* Ограничение относится только к mobile-CTA статьи. На desktop и в
           остальных местах компонент сохраняет естественную ширину. */
        width: min(100%, 420px);
    }
    .post-cta__social-link img,
    .expert-links__link img {
        width: 24px;
        height: 24px;
    }

    /* Кнопки друг под другом на всю ширину */
    .post-cta__actions {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }
    .post-cta__btn {
        flex: 0 0 auto;
        width: 100%;
        /* В мобильном CTA кнопки, как и строка Ask an expert, не шире 420 px.
           На более узком экране width: 100% сохраняет ровные поля контейнера. */
        max-width: 420px;
    }
    .post-cta__icon {
        width: 24px;
        height: 24px;
    }
}

/* ==================== ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ (reveal) ====================

   Блок проявляется из прозрачности с лёгким подъёмом снизу.
   Анимируются только opacity и transform — вёрстка не пересчитывается,
   слой уходит на GPU. Transform не влияет на поток, поэтому сдвиг
   не создаёт скачков вёрстки (CLS остаётся нулевым).

   Класс .reveal вешает JS. Без JS элементы просто остаются видимыми —
   спрятать их «навсегда» физически нечем. */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    will-change: opacity, transform;
}

/* Переход объявлен на видимом состоянии, а не на .reveal:
   иначе элемент анимировал бы сам момент скрытия при загрузке */
.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity   2000ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 2000ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

/* Отыграло — снимаем will-change, чтобы браузер не держал
   композиторский слой под каждым блоком до конца жизни страницы */
.reveal.is-revealed {
    will-change: auto;
}

/* ---------- Очень узкие экраны: ≤ 360px ---------- */
/* Строка «Ask an expert» + три круга по 56px с nowrap-подписью требует
   ~333px и на 320px не помещалась. Здесь разрешаем подписи переноситься:
   структура (текст слева, круги справа) сохраняется, круги не сжимаются. */
@media (max-width: 360px) {
    .post-cta__expert-label,
    .expert-links__label {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Раньше настройка отключала только reveal. Остальное — выезд меню,
       появление модалок, аккордеон FAQ, ховеры, плавная прокрутка по
       якорям — продолжало двигаться.

       Именно transition: none, а не нулевая длительность. Сокращать
       длительность нельзя: начальное значение transition-property — all,
       поэтому любая ненулевая длительность включает переход у КАЖДОГО
       элемента, включая унаследованный visibility у потомков меню и
       модалок. В кадре открытия они из-за этого остаются hidden, и фокус
       внутрь панели не уходит. Единственное, что зависело от transitionend
       (закрытие FAQ), обрабатывается в main.js отдельной веткой. */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}