/* ============================================================
   ProVeter — витрина. Дизайн-система из макета Figma
   «ProVeter Site (Copy)», canvas Site.

   Макет свёрстан в трёх ширинах: 1400 (контент 1100), 2000 (контент 1700)
   и мобильные 400 (контент 360) — поля секции всегда одинаковые, меняется
   колонка контента. Отсюда резиновый .container с полем 150 на десктопе.

   Фон страницы #F6F8FA, карточки белые со скруглением 20, кнопки-пилюли
   (r90) высотой 52, заголовки — Alethia Pro UPPERCASE с кернингом 7 %
   синим #1A4572, основной текст Inter 16/500 цвета #4B4B4B.
   ============================================================ */

/* Заголовочная гарнитура брендбука — Alethia Pro, файлы лицензированы
   клиентом. Текст макета набран Inter (SIL OFL). Оба шрифта лежат в теме и
   раздаются с нашего домена: сторонний CDN шрифтов доступен не во всех
   регионах, и без него текст уезжал в системную гарнитуру. */
@font-face {
    font-family: 'Alethia Pro';
    src: url('../fonts/alethia-pro-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alethia Pro';
    src: url('../fonts/alethia-pro-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Inter — вариативный: один файл на все начертания макета (400/500/600).
   Разрезан по алфавитам (файлы и диапазоны — сборка Fontsource
   `inter-*-variable-wghtOnly`), поэтому браузер тянет только нужное:
   кириллицу и латиницу с цифрами и пунктуацией — всегда, latin-ext — на
   страницах с ценами, потому что знак рубля лежит именно там. Греческий,
   вьетнамский и расширенная кириллица витрине не нужны и не подключены. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-cyrillic-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-ext-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    /* цвета из макета */
    --pv-blue: #1a4572;        /* заголовки, фирменный синий */
    --pv-link: #2d5e92;        /* ссылки, кнопки, иконки-стрелки */
    --pv-link-soft: #366eaa;   /* второстепенные ссылки футера */
    /* Наведение: в макете все ссылки, подписи карточек и вопросы FAQ
       подсвечиваются одним светло-голубым (компоненты link arrow, link icon,
       card hover=yes, benefits item Hover). */
    --pv-hover: #72b6ff;
    --pv-sand: #cec2ae;        /* песочный баннер, старая цена */
    --pv-ink: #4b4b4b;         /* основной текст */
    --pv-muted: #b9b9b9;       /* сноски, юридический текст */
    --pv-icon: #b0becc;        /* иконки преимуществ */
    --pv-icon-bg: #f7fbff;     /* круглая плашка под иконкой */
    --pv-warm: #f6f3f0;        /* тёплая плашка: решения, подвал карточки формы */
    --pv-field: #f4f6f9;       /* поля ввода */
    --pv-placeholder: #959eac;
    --pv-bg: #f6f8fa;          /* фон страницы */
    --pv-line: rgba(0, 0, 0, 0.1);
    --pv-line-light: rgba(255, 255, 255, 0.1);

    /* геометрия */
    --pv-radius: 20px;
    --pv-radius-lg: 30px;      /* карточка формы в приложении */
    --pv-radius-md: 24px;      /* плашка-примечание */
    --pv-radius-sm: 12px;      /* поля ввода */
    --pv-gutter: 20px;         /* поле секции, растёт по брейкпоинтам до 150 */
    --pv-max: 2000px;          /* ширина макета: дальше растут только поля */
    --pv-section: 60px;        /* вертикальный отступ секции */
    --pv-stack: 40px;          /* отступ между заголовком секции и телом */
    --pv-header-h: 65px;

    /* Гарнитуры: заголовочная (в макете Alethia Pro) и текстовая. */
    --pv-font-display: 'Alethia Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --pv-font-text: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 768px) {
    :root { --pv-gutter: 40px; --pv-section: 80px; --pv-stack: 60px; }
}
@media (min-width: 1100px) {
    :root { --pv-gutter: 80px; --pv-section: 100px; }
}
@media (min-width: 1360px) {
    /* ширина макета: поле секции 150, колонка контента 1100 при 1400 */
    :root { --pv-gutter: 150px; --pv-section: 120px; --pv-stack: 80px; }
}

*, *::before, *::after { box-sizing: border-box; }

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

/* Под открытым окном согласия страница не прокручивается. */
body.is-locked { overflow: hidden; }

body {
    margin: 0;
    background: var(--pv-bg);
    color: var(--pv-ink);
    font-family: var(--pv-font-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pv-link); text-decoration: none; }
button { font: inherit; }
/* Скрытое остаётся скрытым: у блоков со своим display атрибут иначе не работает. */
[hidden] { display: none !important; }

/* Заголовки: UPPERCASE, кернинг 7 %, интерлиньяж 130 % (брендбук). */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--pv-font-display);
    color: var(--pv-blue);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.3;
    /* Длинные слова («бескомпромиссный») на узком экране иначе распирают
       страницу и включают горизонтальную прокрутку. */
    overflow-wrap: break-word;
}

/* Мобильный кегль заголовков — 28/36.4 (макет от 04.08.2026; было 30/39). */
h1, .h1 { font-size: 28px; }
h2, .h2 { font-size: 28px; }
/* Заголовки карточек (борт, баннер) на мобильном не мельчают — в макете это
   те же 24, что и на десктопе. */
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 20px; }

@media (min-width: 768px) {
    h1, .h1, h2, .h2 { font-size: 32px; }
    h3, .h3 { font-size: 24px; }
}

/* Монитор шире макета: колонка контента растянулась, а кегли из фрейма 1400
   остались — текст читался мелким. Поднимаем шрифт вместе с шириной. */
@media (min-width: 1600px) {
    body { font-size: 17px; }
    h1, .h1, h2, .h2 { font-size: 40px; }
    h3, .h3 { font-size: 28px; }
    h4, .h4 { font-size: 22px; }
    .lead { font-size: 18px; }
    .note { font-size: 15px; }
    /* Названия этапов набраны крупнее — колонке под них нужно больше места. */
    .plan__item { grid-template-columns: 320px 1fr; }
}

p { margin: 0; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--pv-blue); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ---------- каркас ---------- */
/* Поля фиксированные (150 на десктопе), колонка контента тянется: при 1400
   получается 1100, при 2000 — 1700, ровно как во фреймах макета. */
.container {
    width: 100%;
    max-width: var(--pv-max);
    margin: 0 auto;
    padding: 0 var(--pv-gutter);
}

.section { padding: var(--pv-section) 0; }
.section--pt-0 { padding-top: 0; }
.section--pb-0 { padding-bottom: 0; }
.section--white { background: #fff; }

/* Половинный верхний отступ — секция флота на главной идёт сразу за каруселью. */
.section--pt-half { padding-top: calc(var(--pv-section) / 2); }
/* Секции под фото-героем начинаются на 100, а не на 120 (фреймы Tours/Home). */
.section--pt-100 { padding-top: 100px; }

@media (max-width: 767px) {
    .section--pt-100 { padding-top: var(--pv-section); }
}

.divider { height: 1px; background: var(--pv-line); border: 0; margin: 0; }
.divider--light { background: var(--pv-line-light); }

.lead { color: var(--pv-ink); font-size: 16px; line-height: 1.5; }

.note {
    color: var(--pv-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Заголовок секции: H2, под ним — вводный текст или ссылка со стрелкой,
   справа от H2 — стрелки карусели. */
.section-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: var(--pv-stack); }
.section-head__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.section-head--flush { margin-bottom: 0; }
/* Отступы под заголовком у блоков-карточек меньше секционного: 40 и 65 в макете. */
.section-head--sm { margin-bottom: 40px; }
.section-head--md { margin-bottom: 65px; }
.section-head--after-divider { margin-top: 60px; }

/* Кнопка под лентой маршрутов — только на мобильном (в макете 1400 её нет). */
.tours-cta { display: none; padding-top: 24px; }
.section-head__text { color: var(--pv-ink); }
.stack { display: flex; flex-direction: column; gap: var(--pv-stack); }

@media (max-width: 767px) {
    .section-head { gap: 8px; }
}

/* ---------- кнопки ---------- */
.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 16px 40px;
    border: 1px solid transparent;
    border-radius: 90px;
    background: #fff;
    color: var(--pv-link);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    /* Подпись кнопки в макете всегда в одну строку — перенос ломает пилюлю. */
    white-space: nowrap;
    cursor: pointer;
    /* Наведение в макете (компонент button) — только перекраска за 150 мс:
       кнопка не приподнимается и не меняет размер. */
    transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.pv-btn__icon { flex: 0 0 auto; width: 12px; height: 12px; }

.pv-btn--primary { background: var(--pv-link); color: #fff; border-color: var(--pv-link); }
.pv-btn--primary:hover { background: var(--pv-blue); border-color: var(--pv-blue); color: #fff; }

/* Белая кнопка при наведении становится синей — состояние Hover из макета.
   Песочный там означает «недоступно», а не наведение. */
.pv-btn--light:hover { background: var(--pv-link); border-color: var(--pv-link); color: #fff; }

/* Прозрачная кнопка на фото-герое и внутри цветных карточек. Наведение в
   макете удваивает обводку (1 → 2), фон остаётся прозрачным; толщину добавляем
   внутренней тенью, чтобы кнопка не меняла размер. */
.pv-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.9); }
.pv-btn--ghost:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }

/* Синяя с обводкой: та же удвоенная рамка плюс потемневшая подпись (макет). */
.pv-btn--outline { background: transparent; color: var(--pv-link); border-color: var(--pv-link); }
.pv-btn--outline:hover { background: transparent; border-color: var(--pv-link); color: var(--pv-blue); box-shadow: inset 0 0 0 1px var(--pv-link); }

.pv-btn--wide { width: 100%; }
.pv-btn--muted { background: var(--pv-bg); color: var(--pv-link); }
.pv-btn--muted:hover { background: var(--pv-link); color: #fff; }

/* Ссылка со стрелкой (под заголовками секций). */
.pv-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pv-link);
    font-size: 16px;
    font-weight: 500;
    transition: color 0.15s linear;
}
.pv-link svg { width: 10px; height: 10px; }
/* Наведение красит подпись вместе со стрелкой (макет, компонент link arrow). */
.pv-link:hover { color: var(--pv-hover); }

/* ---------- шапка ---------- */
/* Плашка шапки из макета: чёрный 10 % и сильное размытие подложки (в Figma —
   background blur 50). Слабое размытие теряло белый логотип и меню, когда под
   ними оказывалась светлая часть кадра. */
.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 50;
    background: rgba(0, 0, 0, 0.1);
    /* Префикс обязателен: Safari, в том числе на iPhone, знает только
       -webkit-backdrop-filter, и без него кадр не размывается вовсе. */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* Браузер без размытия подложки: одной десятой черноты мало, чтобы белые
   логотип и пункты меню читались поверх светлого кадра. Раскрытому меню нужен
   и вовсе плотный фон — сквозь полупрозрачный читался заголовок героя. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: rgba(0, 0, 0, 0.55); }
    .site-header.is-nav-open { background: rgba(26, 69, 114, 0.97); }
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: var(--pv-header-h);
    /* Панель тянется во всю ширину, а её содержимое стоит в колонке контента:
       на широком мониторе логотип иначе уезжал к самому краю экрана, а текст
       страницы начинался много правее. */
    max-width: var(--pv-max);
    margin: 0 auto;
    padding: 0 var(--pv-gutter);
}
.site-header__left { display: flex; align-items: center; gap: 39px; min-width: 0; }
/* Логотип не сжимается: во флексе с меню и кнопкой ему иначе достаётся нулевая
   ширина, и на узком десктопе он просто исчезает. */
.site-brand { flex: 0 0 auto; }
.site-brand__logo { height: 38px; width: auto; flex: 0 0 auto; }
.site-brand__logo--color { display: none; }

.site-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 48px;
    margin: 0;
    padding: 0;
}
.site-nav__list a {
    color: #fff;
    font-family: var(--pv-font-display);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.site-nav__list a:hover { opacity: 0.75; }
/* Кнопка заявки живёт в подвале раскрытого меню — это только мобильный фрейм. */
.site-nav__cta { display: none; }
/* Текущий раздел подсвечен песочным — как в макете. */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-page-ancestor > a { color: var(--pv-sand); }

.site-header__contacts { display: flex; align-items: center; gap: 25px; }
/* Вопрос менеджеру — действие, а не ссылка, но выглядит как пункт шапки.
   В макете кнопки в шапке нет, она добавлена по просьбе заказчика; на узком
   десктопе (меньше 1300) она наезжала на пункты меню, поэтому там её нет —
   но в подвале и в раскрытом мобильном меню кнопка есть всегда. */
.site-header__question {
    display: none;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    background: transparent;
    color: #fff;
    font-family: var(--pv-font-display);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.site-header__question:hover { background: #fff; color: var(--pv-blue); }
@media (min-width: 1300px) {
    .site-header__question { display: inline-flex; }
}
/* На узком десктопе кнопка появляется за счёт воздуха вокруг: макетных
   отступов меню и контактов вместе с ней на колонку контента не хватает.
   Теснее всего в 1360–1440, где поле секции скачком вырастает до 150 и
   колонка, наоборот, сужается, — поэтому здесь же чуть мельче пункты меню. */
@media (min-width: 1300px) and (max-width: 1599px) {
    .site-header__inner { gap: 24px; }
    .site-header__left { gap: 24px; }
    .site-nav__list { gap: 30px; }
    .site-nav__list a { font-size: 13px; }
    .site-header__contacts { gap: 18px; }
    .site-header__question { padding: 8px 14px; font-size: 12px; }
}
.site-header__contacts a { display: inline-flex; color: #fff; }
.site-header__contacts a:hover { opacity: 0.75; }
.site-header__contacts svg { width: 18px; height: 18px; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px; height: 32px;
    background: none; border: 0; padding: 0;
    cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: #fff; transition: 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Тёмная шапка на страницах без фото-героя. */
.site-header--solid { position: relative; background: var(--pv-blue); }

/* ---------- герой ---------- */
/* Высота тянется за экраном: на мониторе 2К кадр фиксированной высоты
   превращался в полосу поверх огромного пустого поля. Нижняя граница — высота
   из макета, поэтому на ноутбуке ничего не меняется. */
.hero {
    position: relative;
    min-height: max(580px, 62vh);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #000;
    color: #fff;
}
.hero--page { min-height: max(490px, 54vh); }
.hero--tour { min-height: max(432px, 48vh); }
/* Шаги внутри заявки (оплата, возврат, анкета): кадр здесь — фон, а не витрина,
   и закрывать им экран перед формой оплаты незачем. */
.hero--funnel { min-height: 320px; }
.hero--page .hero__content,
.hero--tour .hero__content,
.hero--funnel .hero__content { max-width: 500px; }

.hero__slides { position: absolute; inset: 0; }
/* Смена кадра — как в прототипе макета: 300 мс, ease-out. */
.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.hero__slide.is-active { opacity: 1; }
/* Точку кадра задаёт слайд (`focus`), см. template-parts/hero.php. */
.hero__slide img,
.hero__slide video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pv-hero-focus, center); }
/* Кадр услуги в макете стоит на чёрной подложке с прозрачностью 80 % — он
   заметно темнее остальных героев (в мобильном фрейме затемнения нет). */
.hero--dim .hero__slide img { opacity: 0.8; }
/* Кадр в герое медленно наезжает, пока он показан: статичное фото на широком
   экране выглядит заставкой. Длительность чуть больше паузы между слайдами
   (7 с), чтобы движение не замирало перед сменой. Слайду с роликом наезд не
   нужен — он и так движется, поэтому правило только для фото. */
.hero__slide.is-active img { animation: hero-zoom 9s ease-out both; }
@keyframes hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}
/* Затемнение под текстом: в макете это чёрная плашка с линейным градиентом до
   прозрачного. Ширина плашки у героев разная — 882 на главной, 1049 в каталоге
   и на услуге, 963 на экскурсии (из 1400), отсюда три значения. */
.hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) var(--pv-hero-fade, 63%));
}
.hero--page { --pv-hero-fade: 75%; }
.hero--tour { --pv-hero-fade: 69%; }
/* У услуги затемнение под текстом короче: в макете плашка гаснет к 67 %. */
.hero--dim { --pv-hero-fade: 67%; }
/* Кадрирование берём из макета: там фото сдвинуто вниз относительно центра,
   чтобы в широкую полосу героя попал сюжет, а не небо. Сам файл при этом
   остаётся неподрезанным — на мобильном из него виден другой кусок. */
.hero--page { --pv-hero-focus: center 54%; }

.hero__content {
    position: relative;
    z-index: 2;
    padding: 145px 0 63px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 660px;
}
.hero--tour .hero__content { gap: 60px; }
/* Кадр героя экскурсии в макете смещён вверх — горизонт выше середины. */
.hero--tour { --pv-hero-focus: center 47%; }
/* На широком экране колонка героя тоже растёт — иначе текст сжимается в
   узкий столбец у самого края огромного кадра. */
@media (min-width: 1600px) {
    .hero__content { max-width: 820px; }
    .hero__lead { max-width: 520px; }
    .hero--page .hero__content,
    .hero--tour .hero__content { max-width: 620px; }
}
.hero__head { display: flex; flex-direction: column; gap: 19px; }
.hero__title { color: #fff; }
.hero__title-narrow { display: none; }
.hero__lead { color: #fff; max-width: 400px; }
/* Кнопки героя — одного размера: ряд собран сеткой с равными колонками, и
   ширину всем задаёт самая длинная подпись (у экскурсии — «Забронировать
   полет»). Ряд от этого выходит за колонку текста — в макете пара кнопок
   экскурсии так и стоит (533 против 500). */
.hero__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    gap: 16px;
}
.hero__kicker {
    color: #fff;
    font-family: var(--pv-font-display);
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.hero__dots {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
}
.hero__dot {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background: #fff; opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s;
}
.hero__dot.is-active { opacity: 1; }

/* ---------- карусель карточек ---------- */
/* Лента уходит за правый край экрана, слева — по колонке контента: поле секции
   плюс то, что контейнер отдаёт по краям на экране шире макета. Без второго
   слагаемого лента на широком мониторе начиналась левее заголовка секции. */
.carousel {
    position: relative;
    --pv-shell: calc(max(0px, (100% - var(--pv-max)) / 2) + var(--pv-gutter));
}
.carousel__track {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--pv-shell);
    /* иначе scroll-snap «съедает» левый отступ и лента липнет к краю экрана */
    scroll-padding-left: var(--pv-shell);
}
.carousel__track::-webkit-scrollbar { display: none; }
/* Притягивание к карточкам — для пальца: там лента листается бросками. Мышью
   её тянут плавно, и магнит только возвращал бы ленту назад. */
@media (pointer: coarse) {
    .carousel__track { scroll-snap-type: x mandatory; }
    .carousel__track > * { scroll-snap-align: start; }
}

/* Ленту можно тянуть мышью. Пока тянут, притягивание к карточкам выключено —
   иначе прокрутка дёргается, — и текст не выделяется. */
@media (hover: hover) {
    .carousel__track, .gallery__track { cursor: grab; }
}
.carousel__track.is-dragging, .gallery__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* Стрелки лежат на самой ленте у её краёв и проявляются при наведении: над
   заголовком секции их не замечали. */
.scroll-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 100px;
    background: #fff;
    color: var(--pv-link);
    box-shadow: 0 8px 24px rgba(26, 69, 114, 0.18);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}
.scroll-arrow--prev { left: calc(var(--pv-shell) + 16px); }
.scroll-arrow--next { right: calc(var(--pv-shell) + 16px); }
.carousel:hover .scroll-arrow,
.scroll-arrow:focus-visible { opacity: 1; }
/* Наведение красит стрелку синим, как в макете (состояние Hover). */
.scroll-arrow:hover { background: var(--pv-link); color: #fff; }
.scroll-arrow svg { width: 14px; height: 14px; }
.scroll-arrow[disabled] { opacity: 0 !important; cursor: default; }
.scroll-arrow--prev svg { transform: rotate(180deg); }

/* ---------- карточка маршрута/услуги ---------- */
/* Медиа 400 высотой с кнопкой-ценой поверх, под ним — подпись. */
.tour-card { display: flex; flex-direction: column; gap: 40px; flex: 0 0 auto; width: 390px; }
.tour-card--wide { width: 690px; }
.tour-card__media {
    position: relative;
    height: 400px;
    border-radius: var(--pv-radius);
    overflow: hidden;
    background: #dfe3e8;
}
/* Наведение на карточку (макет, вариант hover=yes): кадр наезжает на 4 %
   за 300 мс, подпись под ним светлеет. */
.tour-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-out; }
.tour-card:hover .tour-card__media img { transform: scale(1.04); }
/* Затемнение снизу, чтобы белая кнопка-цена читалась на светлом фото. */
.tour-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 175px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}
.tour-card__actions {
    position: absolute;
    left: 30px; bottom: 28px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Длительность рядом с ценой — не кнопка, а подпись поверх кадра. */
.tour-card__duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.tour-card__duration svg { width: 16px; height: 16px; color: #fff; }
.tour-card__title {
    color: var(--pv-link);
    font-family: var(--pv-font-display);
    font-size: 20px;
    line-height: 1.3;
    /* подпись не тянется на всю карточку — правый отступ, как во фреймах макета */
    padding-right: 100px;
    transition: color 0.3s ease-out;
}
.tour-card__title a { color: inherit; }
.tour-card:hover .tour-card__title { color: var(--pv-hover); }
.tour-card--wide .tour-card__title { padding-right: 250px; }
.service-grid .tour-card__title { padding-right: 50px; }
.tour-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--pv-ink); font-size: 14px; font-weight: 400; }
.tour-card__meta svg { width: 17px; height: 17px; color: var(--pv-link); }

/* Сетка каталога: две карточки в ряд, 60 между рядами. */
/* Каталог: карточка 542 в колонке 1100 даёт 2 в ряд, в колонке 1700 — 3
   (макет Tours 1400 и Tours 2000). Считает сама сетка, а не брейкпоинт. */
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 60px 16px; }
/* Ширину карточки в каталоге задаёт колонка сетки. `max-width` снимаем вместе с
   шириной: на мобильном карточка ограничена 360 (ширина ленты), и в сетке она
   от этого жалась к левому краю — на экранах шире макетных 400 список уезжал
   влево, а справа зияла полоса. */
.tour-grid .tour-card { width: auto; max-width: none; }

/* Три услуги на главной. */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-grid .tour-card { width: auto; }

/* ---------- карточка вертолёта ---------- */
.heli-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: var(--pv-radius);
    overflow: hidden;
}
/* Кнопки героя экскурсии доводят страницу до бортов (якорь `#tour-variants`),
   и `scroll-margin` оставляет над первой карточкой воздух: иначе борт
   упирается в верхний край окна. */
.heli-cards { display: flex; flex-direction: column; gap: 60px; scroll-margin-top: 40px; }
/* Высоту карточки задаёт текстовая половина: иначе на широком экране
   пропорции фото растягивают строку грида (у EC130 кадр почти квадратный). */
.heli-card__media { position: relative; min-height: 420px; overflow: hidden; }
/* Кадр борта наезжает при наведении — вариант Hover компонента helicopter item. */
.heli-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-out; }
.heli-card__media:hover img { transform: scale(1.045); }
.heli-card--reverse .heli-card__media { order: 2; }
.heli-card__body { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 50px; }
.heli-card__head { display: flex; flex-direction: column; gap: 24px; }
.heli-card__specs {
    margin: 0; padding: 0 0 20px; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
}
.heli-card__specs li { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; }
.heli-card__specs b { font-weight: 600; color: inherit; }
/* Карточка-предложение (страница экскурсии): в теле, кроме характеристик, стоит
   цена с кнопками, поэтому воздуха между блоками меньше, а характеристики не
   отбивают снизу — за ними сразу сумма. */
.heli-card--offer .heli-card__body { gap: 24px; padding: 40px; }
.heli-card--offer .heli-card__head { gap: 16px; }
.heli-card--offer .heli-card__specs { padding-bottom: 0; }
/* Кнопки делят строку, а когда в неё не помещаются — каждая занимает свою
   целиком: половина колонки под вторую кнопку выглядела обрубком. Сеткой, а не
   растяжкой флексом: в колонку (узкий экран) флекс тянул бы их по высоте. */
.heli-card--offer .payment__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.heli-card--offer .payment__actions .pv-btn { justify-content: center; }
.heli-card__summary { font-size: 14px; font-weight: 400; line-height: 1.5; }
.heli-card__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- преимущества ---------- */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.benefit {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 40px 30px;
    background: #fff;
    border-radius: var(--pv-radius);
}
/* Иконка в круглой плашке — новинка макета. */
.benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 100px;
    background: var(--pv-icon-bg);
    color: var(--pv-icon);
}
.benefit__icon svg { width: 26px; height: 26px; }
.benefit__body { display: flex; flex-direction: column; gap: 20px; }
.benefit__text { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; }

/* ---------- вопросы и ответы ---------- */
.faq {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px;
    background: #fff;
    border-radius: var(--pv-radius);
}
.faq__item { display: flex; flex-direction: column; }
.faq__item + .faq__item { border-top: 1px solid var(--pv-line); padding-top: 24px; margin-top: 0; }
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pv-blue);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease-out;
}
/* Наведение подсвечивает вопрос и плюс (макет, вариант Hover). */
.faq__question:hover { color: var(--pv-hover); }
.faq__question:hover .faq__icon { color: var(--pv-hover); }
.faq__icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pv-link); transition: transform 0.25s, color 0.3s ease-out; }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.faq__answer > div { overflow: hidden; }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
/* Развёрнутый ответ идёт во всю ширину карточки: в макете (вариант Active)
   текст занимает ту же колонку, что и вопрос, не заезжая под плюс справа. */
.faq__answer p {
    padding: 20px 30px 0 0;
    color: var(--pv-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* ---------- баннеры ---------- */
.banners { display: flex; flex-direction: column; gap: 60px; }
.banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--pv-radius);
    overflow: hidden;
    background: var(--pv-blue);
    color: #fff;
}
.banner__media { position: relative; min-height: 404px; overflow: hidden; }
/* То же наведение, что у бортов и карточек (вариант Hover компонента banner item). */
.banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-out; }
.banner__media:hover img { transform: scale(1.06); }
.banner--reverse .banner__media { order: -1; }
.banner__body { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 50px; }
.banner__title { color: #fff; }
.banner__text { color: var(--pv-bg); }
.banner__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.banner--sand { background: var(--pv-sand); color: var(--pv-ink); }
.banner--sand .banner__title { color: #000; }
.banner--sand .banner__text { color: var(--pv-ink); }

/* ---------- футер ---------- */
.site-footer { background: #fff; padding: 100px 0; }
.site-footer__top { display: flex; align-items: flex-start; gap: 30px; }
.site-footer__col { display: flex; flex-direction: column; gap: 24px; flex: 1 1 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 30px; }
/* Кнопка карты и отдельная строка адреса — только мобильный фрейм. */
.site-footer__map-btn, .site-footer__mobile-address { display: none; }
/* Кнопка вопроса не тянется на всю колонку — она рядом с контактами. */
.site-footer__question { align-self: flex-start; width: max-content; }

.icon-link { display: inline-flex; align-items: center; gap: 4px; color: var(--pv-link); font-size: 14px; font-weight: 400; letter-spacing: -0.01em; transition: color 0.15s linear; }
.icon-link svg { flex: 0 0 auto; width: 18px; height: 18px; }
/* В подвале все ссылки — экземпляры компонента link icon: наведение красит
   текст вместе с иконкой. */
.icon-link:hover { color: var(--pv-hover); }

.site-footer__divider { margin: 60px 0; }
.site-footer__bottom { display: flex; gap: 30px; }
.site-footer__brand { display: flex; align-items: flex-start; gap: 118px; flex: 1 1 0; }
.site-footer__brand .site-brand__logo--color { display: block; }
.site-footer__legal { display: flex; flex-direction: column; gap: 9px; }
.site-footer__legal a { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; transition: color 0.15s linear; }
.site-footer__legal a:hover { color: var(--pv-hover); }
.site-footer__disclaimer { display: flex; gap: 24px; flex: 1 1 0; }
/* Обе сноски равной ширины (в макете по 255 при колонке 535). */
.site-footer__disclaimer p { flex: 1 1 0; color: var(--pv-muted); font-size: 12px; font-weight: 400; line-height: 1.75; }

/* ---------- страница экскурсии ---------- */
/* Между фотолентой и телом страницы экскурсии — 60, как в макете. */
.tour-body { padding-top: 60px; }

/* Характеристики программы: иконка, подпись, значение. */
.options { display: flex; flex-wrap: wrap; gap: 32px 60px; }
.option { display: flex; flex-direction: column; gap: 12px; }
.option__icon { color: var(--pv-icon); }
.option__icon svg { width: 24px; height: 24px; }
.option__label { color: var(--pv-ink); font-size: 16px; font-weight: 500; }
.option__value {
    color: var(--pv-link);
    font-family: var(--pv-font-display);
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.option__body { display: flex; flex-direction: column; gap: 4px; }

/* Белая карточка с ценой, кнопками и платёжными знаками.
   Ширину держим в разумных пределах и ставим карточку по центру колонки: во всю
   ширину экрана она выглядела пустой полосой. */
.payment {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
    max-width: 760px;
    margin-inline: auto;
    background: #fff;
    border-radius: var(--pv-radius);
}
.payment__title { color: var(--pv-blue); }

/* Покупка внутри карточки борта (страница экскурсии): плашку рисует карточка,
   поэтому здесь остаётся только содержимое. */
.payment--bare {
    padding: 0;
    max-width: none;
    margin-inline: 0;
    background: none;
    border-radius: 0;
    gap: 20px;
}

/* Вместимость и борт — рядом с ценой: от борта она и зависит. */
.payment__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; }
.payment__meta-item { display: flex; flex-direction: column; gap: 4px; }
.payment__meta dt { color: var(--pv-ink); font-size: 14px; font-weight: 400; }
.payment__meta dd {
    margin: 0;
    color: var(--pv-link);
    font-family: var(--pv-font-display);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.payment__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; }
.payment__amount {
    color: var(--pv-blue);
    font-family: var(--pv-font-display);
    font-size: 32px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.payment__amount--old { color: var(--pv-sand); text-decoration: line-through; }
.payment__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.payment__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.payment__logos { display: flex; align-items: center; gap: 30px; }
/* В макете платёжные знаки приглушены до серого, чтобы не спорить с кнопками. */
.payment__logos img { height: 20px; width: auto; filter: grayscale(1); opacity: 0.45; }

/* Программа полёта: этап слева, описание справа. */
.plan { display: flex; flex-direction: column; }
.plan__item {
    display: grid;
    grid-template-columns: 242px 1fr;
    gap: 30px;
    padding-top: 4px;
}
.plan__item + .plan__item { margin-top: 10px; }
.plan__head { display: flex; align-items: flex-start; gap: 18px; padding-top: 4px; }
.plan__icon { position: relative; flex: 0 0 auto; color: var(--pv-link); }
.plan__icon svg { width: 22px; height: 22px; display: block; }
/* Отметки этапов соединяет пунктир — 60 px через 14 от иконки (макет). */
.plan__item:not(:last-child) .plan__icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    width: 1px;
    height: 60px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, #96aec8 0 3px, transparent 3px 7px);
}
.plan__body { display: flex; flex-direction: column; gap: 30px; }
.plan__text { color: var(--pv-ink); }
.plan__item:not(:last-child) .plan__body::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--pv-line);
}

.callout {
    padding: 30px;
    border-radius: var(--pv-radius-md);
    background: var(--pv-bg);
    color: var(--pv-link);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.section--white .callout { background: var(--pv-bg); }

/* Галерея программы — та же лента, что и карусель карточек. */
.gallery__track { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item {
    flex: 0 0 auto;
    width: 390px; height: 400px;
    border-radius: var(--pv-radius);
    overflow: hidden;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- уровень сервиса (каталог) ---------- */
.level {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 80px;
    background: #fff;
    border-radius: var(--pv-radius);
}
.level__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 29px; }
.level__item { display: flex; flex-direction: column; gap: 28px; }
.level__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 200px;
    background: var(--pv-icon-bg);
    color: var(--pv-icon);
}
.level__icon svg { width: 26px; height: 26px; }
.level__body { display: flex; flex-direction: column; gap: 20px; }

/* ---------- решения (услуга) ---------- */
.solutions__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.solution {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 60px;
    background: var(--pv-warm);
    border-radius: var(--pv-radius);
}
/* Нечётную карточку в конце кладём на обе колонки: иначе внизу зияет пустая
   ячейка. Текст при этом держим в колонке макета — строка во всю ширину секции
   не читается. */
.solution:last-child:nth-child(odd) { grid-column: 1 / -1; }
.solution:last-child:nth-child(odd) .solution__body { max-width: 640px; }
/* На тёплой плашке заголовок секции — чёрный, а не фирменный синий. */
.solutions .section-head h2 { color: #000; }
.solution__icon { color: var(--pv-icon); }
.solution__icon svg { width: 40px; height: 40px; }
.solution__body { display: flex; flex-direction: column; gap: 18px; }
.solution__head { display: flex; flex-direction: column; gap: 10px; }
/* Поводы под названием — мелким текстом характеристик. Цвет основной, а не
   приглушённый: на тёплой плашке сноска светло-серым почти не читается. */
.solution__caption { font-size: 14px; line-height: 21px; letter-spacing: -0.14px; color: var(--pv-ink); }

/* ---------- юридические документы ---------- */
/* Оферта, правила и политика: сплошной текст разделами и пунктами, поэтому
   колонка уже страничной, а заголовки мельче H1 документа.
   Тот же текст показывают страница /offer/, /rules/, /privacy/ и окно согласия
   в формах — там он идёт с модификатором `legal--compact`. */
.legal { max-width: 900px; font-size: 14px; line-height: 1.5; }
.legal h2 { font-size: 20px; margin: 1.8em 0 0.8em; }
.legal h3 { font-size: 16px; margin: 1.5em 0 0.6em; }
.legal > :first-child { margin-top: 0; }
.legal strong { font-weight: 600; }
.legal--compact { max-width: none; }
.legal--compact h2 { font-size: 16px; }
.legal--compact h3 { font-size: 14px; }

/* ---------- внутренние страницы (контент из админки) ---------- */
.page-head { padding-top: 80px; }
.entry-list { display: flex; flex-direction: column; gap: 40px; }
.entry-list .entry { padding-bottom: 40px; border-bottom: 1px solid var(--pv-line); }

.prose { color: var(--pv-ink); }
.prose h2 { margin: 1.6em 0 0.6em; }
.prose h3 { margin: 1.4em 0 0.5em; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Воронка: страницы бронирования, покупки сертификата, оплаты и анкеты.

   Геометрия — из окна макета (секция Modal popup): белая карточка 600 со
   скруглением 30, заголовок сверху, тело с полями и бежевый подвал с согласием
   и кнопкой. Окном она больше не открывается — каждый шаг стоит страницей
   витрины, поэтому высота не фиксируется: страница прокручивается целиком.
   ============================================================ */
.funnel { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.funnel__card {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: var(--pv-radius-lg);
    overflow: hidden;
}
.funnel__card--wide { max-width: 760px; }
.funnel__card--narrow { max-width: 500px; }

/* Шаг с выбором программы: форма и сводка рядом. Колонка сводки едет за
   формой, пока та листается, — клиент всё время видит, что покупает и за
   сколько. На узком экране колонки схлопываются, и сводка встаёт НАД формой:
   сначала «что покупаю», потом поля. */
.funnel--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}
.funnel--split .funnel__card { max-width: none; }
.funnel__aside { order: -1; }

@media (min-width: 1100px) {
    .funnel--split { grid-template-columns: minmax(0, 1fr) 380px; }
    .funnel__aside {
        order: 0;
        position: sticky;
        /* Шапка страницы не липкая — достаточно отступа от края экрана. */
        top: 20px;
    }
}

/* Карточка предложения в колонке: кадр программы и её условия. */
.offer-card {
    background: #fff;
    border-radius: var(--pv-radius-lg);
    overflow: hidden;
}
.offer-card__pic {
    position: relative;
    aspect-ratio: 3 / 2;
}
.offer-card__pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.offer-card__body { display: flex; flex-direction: column; gap: 20px; padding: 30px; }
/* Внутри карточки сводка — просто строки: серая плашка дала бы карточку в карточке. */
.offer-card .summary { padding: 0; background: none; border-radius: 0; }
/* Пока компонент шага не ожил, заготовки разметки скрыты. */
[x-cloak] { display: none !important; }
/* Ссылка-действие внутри формы («добавить контакт») — тег button. */
button.pv-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pv-link);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.funnel__head { display: flex; flex-direction: column; gap: 18px; padding: 40px 40px 0; }
.funnel__kicker {
    color: var(--pv-blue);
    font-family: var(--pv-font-display);
    font-size: 20px;
    letter-spacing: 1.4px;
    line-height: 1.3;
    text-transform: uppercase;
}
.funnel__body { display: flex; flex-direction: column; gap: 32px; padding: 32px 40px 40px; }
.funnel__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 40px 40px;
    background: var(--pv-warm);
}
/* Принимаемые документы: отметок несколько, поэтому строки идут плотнее блоков
   подвала, а длинное название переносится вдоль своей галочки. */
.funnel__consents { display: flex; flex-direction: column; gap: 12px; }
.funnel__consents .checkbox { align-items: flex-start; }
.funnel__consents .checkbox span { padding-top: 4px; }

.funnel__hint { color: var(--pv-placeholder); font-size: 12px; font-weight: 400; line-height: 1.75; }

/* Итог шага: крупная отметка, заголовок, пояснение (окно «заявка отправлена»). */
.funnel__result { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.funnel__result-icon { color: var(--pv-icon); }
.funnel__result-icon svg { width: 130px; height: 130px; }
.funnel__result-text { color: var(--pv-ink); font-size: 14px; font-weight: 400; line-height: 1.5; }
.funnel__code {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px;
    border-radius: var(--pv-radius-md);
    background: var(--pv-bg);
}
.funnel__code-label {
    color: var(--pv-placeholder);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.funnel__code-value {
    color: var(--pv-blue);
    font-family: var(--pv-font-display);
    font-size: 24px;
    letter-spacing: 0.12em;
}

/* Пока приложение отвечает: те же блоки, но пустые и приглушённые. */
.funnel__skeleton { display: flex; flex-direction: column; gap: 12px; }
.funnel__skeleton span {
    display: block;
    height: 14px;
    border-radius: 7px;
    background: var(--pv-field);
    animation: pv-pulse 1.4s ease-in-out infinite;
}
.funnel__skeleton span:nth-child(2) { width: 70%; }
.funnel__skeleton span:nth-child(3) { width: 40%; }
@keyframes pv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Форма оплаты живёт во фрейме провайдера: пока он не встал, места не занимает. */
.funnel__widget:not(:empty) { min-height: 320px; }

/* Сводка покупки: что берут и за сколько (в окне макета её нет — на странице
   клиент должен видеть предмет и сумму до оплаты). */
.summary { border-radius: var(--pv-radius-md); background: var(--pv-bg); padding: 20px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.summary__row + .summary__row { margin-top: 8px; }
.summary__label { color: var(--pv-placeholder); }
.summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pv-line);
}
.summary__total-label {
    color: var(--pv-placeholder);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.summary__total-value { color: var(--pv-blue); font-family: var(--pv-font-display); font-size: 20px; }

/* ---------- поля ввода (макет, компонент Input) ---------- */
.field-group { display: flex; flex-direction: column; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Подпись над полем: у даты и списков внутри подсказки не видно. */
.field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--pv-ink);
    font-size: 13px;
    font-weight: 500;
}
.field {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: var(--pv-radius-sm);
    background: var(--pv-field);
    color: var(--pv-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.field::placeholder { color: var(--pv-placeholder); }
.field:focus { outline: none; border-color: var(--pv-link); }
.field:disabled { opacity: 0.6; }
.field--area { min-height: 80px; resize: vertical; }
/* Выпадающий список — с шевроном макета вместо системной стрелки. */
.field--select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4b4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px;
}
.field-set { display: flex; flex-direction: column; gap: 24px; }
/* Поле, которое клиент заполнил неверно: подсвечиваем рамкой к сообщению. */
.field.is-invalid { border-color: #c0392b; }
.field-error { color: #c0392b; font-size: 12px; font-weight: 400; }

/* Поле с кнопкой внутри (макет, Input вида `code`): код сертификата
   применяется, не покидая формы. */
.field--code { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 18px; }
.field--code input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--pv-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.field--code input:focus { outline: none; }
.field--code input::placeholder { color: var(--pv-placeholder); }
.field__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 11px;
    border: 0;
    border-radius: 90px;
    background: none;
    color: #a1a1a1;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}
.field__action svg { width: 12px; height: 12px; }
.field__action[disabled] { cursor: default; opacity: 0.6; }
.field__action--applied { color: #43bc63; }
.field__action--declined { color: #d26a7f; }

/* Применённый сертификат — то же поле, но уже с вердиктом. */
.field--applied { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.field--applied .field__code { color: var(--pv-blue); letter-spacing: 0.07em; }
.field--applied .field__note { color: var(--pv-placeholder); }
.field--applied .field__remove {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pv-placeholder);
    font-size: 12px;
    cursor: pointer;
}
.field--applied .field__remove svg { width: 12px; height: 12px; }
.field__check { flex: 0 0 auto; color: #43bc63; }
.field__check svg { width: 16px; height: 16px; }

.checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox input {
    flex: 0 0 auto;
    appearance: none;
    width: 32px; height: 32px; margin: 0;
    border: 1px solid var(--pv-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}
.checkbox input:checked {
    border-color: var(--pv-link);
    background: var(--pv-link) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.checkbox span { color: var(--pv-ink); font-size: 12px; font-weight: 400; line-height: 1.75; }
.checkbox a { text-decoration: underline; text-underline-offset: 2px; }

.form-error { color: #c0392b; font-size: 13px; font-weight: 400; }
.form-error:empty { display: none; }

/* Плашка условий сертификата (макет, блок `Info`). */
.gift-note {
    border-radius: var(--pv-radius-md);
    background: var(--pv-warm);
    overflow: hidden;
}
.gift-note__text { padding: 20px; color: var(--pv-ink); font-size: 12px; font-weight: 500; line-height: 1.5; }

/* Карточка пассажира в анкете — тот же набор полей, что у остальных шагов. */
.passenger-card { display: flex; flex-direction: column; gap: 24px; }
.passenger-card + .passenger-card { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--pv-line); }
.passenger-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.passenger-card__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pv-placeholder);
    cursor: pointer;
}
.passenger-card__remove svg { width: 18px; height: 18px; }

/* ---------- модальные окна ---------- */
/* Единственное окно витрины — согласие на обработку данных: клиент читает
   политику, не теряя заполненную форму (так это и нарисовано в макете). */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(11, 25, 40, 0.55);
    overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    background: #fff;
    border-radius: var(--pv-radius-lg);
    overflow: hidden;
}
.modal__close {
    position: absolute;
    top: 30px; right: 30px;
    z-index: 2;
    display: inline-flex;
    width: 20px; height: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pv-blue);
    cursor: pointer;
}
.modal__close svg { width: 20px; height: 20px; }
.modal__body { display: flex; flex-direction: column; gap: 32px; padding: 40px; }
.modal__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 40px 40px;
    background: var(--pv-warm);
}
.modal__scroll { max-height: 400px; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; }
.modal__scroll p { margin-bottom: 1em; font-size: 14px; font-weight: 400; line-height: 1.5; }
.modal__scroll:focus-visible { outline: 1px solid var(--pv-link); outline-offset: 6px; }
/* Окно-документ: заголовок 24, а не секционные 32 (макет). */
.modal__dialog--doc h2 { font-size: 24px; }

/* ============================================================
   Адаптив. Мобильный фрейм макета — 400 (контент 360):
   секции идут в одну колонку, ленты карточек скроллятся вбок.
   ============================================================ */

@media (max-width: 1359px) {
    .level { padding: 48px 40px; gap: 40px; }
    .solution { padding: 40px; }
    .tour-card--wide { width: 520px; }
}

@media (max-width: 1099px) {
    /* Втроём кнопки героя в такую ширину уже не встают — ставим их столбцом
       целиком, а не переносим последнюю: разорванный ряд читается как
       случайность. Ширина у столбца общая, по самой длинной подписи. */
    .hero__actions { grid-auto-flow: row; }
    /* У экскурсии бронь идёт первой, под ней подарок (в макете 1400 наоборот,
       поэтому переставляем стилем), а разговор с менеджером слабее обеих и
       остаётся последним. */
    .hero--tour .hero__actions > :nth-child(1) { order: 2; }
    .hero--tour .hero__actions > :nth-child(2) { order: 1; }
    .hero--tour .hero__actions > :nth-child(3) { order: 3; }
    .benefits { grid-template-columns: repeat(2, 1fr); }
    .level__grid { grid-template-columns: 1fr; gap: 32px; }
    .site-footer { padding: 72px 0; }
    .site-footer__brand { gap: 40px; }
    .plan__item { grid-template-columns: 200px 1fr; }
}

@media (max-width: 899px) {
    .heli-card, .banner { grid-template-columns: 1fr; }
    /* В одну колонку кадр всегда идёт первым — и у борта, и у баннера
       (макеты helicopter card и banner card); шахматный порядок остаётся
       десктопным. */
    .heli-card--reverse .heli-card__media { order: 0; }
    .banner__media, .banner--reverse .banner__media { order: -1; }
    .heli-card__media { min-height: 340px; }
    .banner__media { min-height: 265px; }
    .heli-card__body { padding: 40px 30px 30px; }
    /* Кнопка карточки борта растянута на всю колонку (макет, helicopter card). */
    .heli-card__actions .pv-btn { width: 100%; }
    /* Между текстом баннера и кнопкой воздуха больше, чем между заголовком и
       текстом (16 против 40 в макете). */
    .banner__body { padding: 30px; gap: 16px; }
    .banner__actions { margin-top: 24px; }
    .banner__actions .pv-btn { width: 100%; }
    .service-grid, .tour-grid { grid-template-columns: 1fr; }
    .solutions__grid { grid-template-columns: 1fr; }
    /* Этап макета на мобильном: иконка над названием, описание ниже, шаги
       разделены линией (см. `plan item` в `Tour mobile`). */
    .plan__item { grid-template-columns: 1fr; gap: 16px; }
    .plan__item + .plan__item { margin-top: 32px; }
    .plan__head { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 0; }
    .plan__icon svg { width: 34px; height: 34px; }
    .plan__body { gap: 40px; }
    /* В одну колонку соединять нечего — пунктир лёг бы поперёк описания. */
    .plan__item:not(:last-child) .plan__icon::after { display: none; }
    .site-footer__top, .site-footer__bottom { flex-direction: column; }
    .site-footer__brand { flex-direction: column; align-items: center; gap: 30px; }
    .site-footer__disclaimer { flex-direction: column; }
}

@media (max-width: 860px) {
    /* Раскрытое меню (макет, фрейм `menu mobile` — плашка 600 = шапка 65 плюс
       тело 535) — это сама шапка, выехавшая вниз: пункты сверху, кнопка заявки
       у нижнего края, дальше остаётся чистый кадр. Отдельной плашкой её не
       сделать — вложенный backdrop-filter внутри уже размывающей шапки
       браузер не применяет. */
    .site-header {
        height: var(--pv-header-h);
        overflow: hidden;
        transition: height 0.3s ease-out;
    }
    .site-header.is-nav-open { position: fixed; top: 0; left: 0; right: 0; height: min(600px, 100dvh); }
    /* Сплошная шапка стоит в потоке: пока она выехала, страница держит её
       место — иначе контент подпрыгивает. */
    .site-header--solid.is-nav-open + .site-main { padding-top: var(--pv-header-h); }
    /* Пока меню раскрыто, текст героя убираем: сквозь стекло он читался
       вторым слоем под пунктами меню. */
    .site-header.is-nav-open + .site-main .hero__content,
    .site-header.is-nav-open + .site-main .hero__dots { opacity: 0; }
    .hero__content, .hero__dots { transition: opacity 0.25s ease-out; }
    .site-nav {
        position: absolute;
        left: 0; right: 0; top: var(--pv-header-h); bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 30px;
        /* Поле как у шапки и героя (в макете у меню 30, но тогда кнопка
           «Рассчитать трансфер» уже кнопок героя, а пункты не совпадают по
           вертикали с логотипом — сквозь полупрозрачную штору это заметно). */
        padding: 40px var(--pv-gutter) 30px;
        /* На низком экране (ландшафт) пунктам с кнопкой места не хватает. */
        overflow-y: auto;
        /* Содержимое проявляется, когда штора уже почти выехала. */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-out, visibility 0.2s;
    }
    .site-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0.12s; }
    /* Пункты крупнее десктопных (18 против 14) и разделены воздухом, а не линиями. */
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 48px; padding: 0; }
    .site-nav__list a { display: block; font-size: 18px; }
    .site-nav__cta { display: block; }
    /* Мобильная шапка макета крупнее десктопной: иконки 21 в боксе 32 с шагом
       32, бургер — две полоски 24×3. */
    .nav-toggle { display: flex; width: 32px; height: 32px; gap: 5px; }
    .nav-toggle span { width: 24px; height: 3px; }
    /* Средней полоски в макете нет: бургер двухполосный, а из этих же двух
       складывается крестик. */
    .nav-toggle span:nth-child(2) { display: none; }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
    /* Шаг иконок в макете 64, но там их три: с четвёртой (MAX) ряд не влезает
       в колонку 360 и начинает обрезать логотип — поэтому здесь шаг мельче. */
    .site-header__inner { gap: 20px; }
    .site-header__left { flex: 0 0 auto; gap: 20px; }
    .site-header__contacts { gap: 20px; margin-left: auto; }
    /* Видимый глиф в макете 21.5 с шагом 64. Внутри рамки наших иконок есть
       поле (глиф занимает ~62 % её ширины), поэтому рамке нужно 34 — по
       самому рисунку получается ровно макетный размер. */
    .site-header__contacts svg { width: 34px; height: 34px; }
}

@media (max-width: 767px) {
    /* Герой: текст прижат к низу, затемнение — вертикальное. */
    /* На мобильном все герои одной высоты — 700 (макет: hero 1/2/3 mobile). */
    .hero, .hero--page, .hero--tour { min-height: 700px; }
    /* Кроме шагов внутри заявки: там за шапкой сразу форма оплаты. */
    .hero--funnel { min-height: 280px; }
    .hero__slide::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    }
    /* Мобильный фрейм услуги кадр не притушивает — там своё затемнение снизу. */
    .hero--dim .hero__slide img { opacity: 1; }
    .hero .container { display: flex; align-items: flex-end; }
    .hero__content { padding: calc(var(--pv-header-h) + 40px) 0 56px; gap: 24px; }
    .hero__title { font-size: 36px; }
    /* Короткий заголовок вместо полного — так в мобильном фрейме макета. */
    .hero__title-wide { display: none; }
    .hero__title-narrow { display: inline; }
    /* На узком экране кадр режется по горизонтали, и в макете он сдвинут вбок
       по-разному на каждой странице — точку задаёт слайд (`focus_mobile`).
       Дефолт — центр: без него страница без своей точки унаследовала бы
       десктопную, снятую с совсем другой пропорции кадра. */
    .hero__slide img,
    .hero__slide video { object-position: var(--pv-hero-focus-mobile, center); }
    .hero__lead { max-width: none; }
    /* Столбец кнопок здесь во всю ширину колонки — так в мобильном фрейме
       макета; порядок у экскурсии задан выше ({@see max-width: 1099px}). */
    .hero__actions { width: auto; gap: 18px; }
    .hero--tour .hero__content { gap: 40px; }

    /* Маршруты на мобильном — не лента, а список из трёх программ и кнопка
       в каталог (фрейм Home mobile: card carousel идёт вертикально). */
    .carousel__track {
        flex-direction: column;
        gap: 48px;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .carousel__track .tour-card:nth-child(n + 4) { display: none; }
    .scroll-arrow { display: none; }

    /* Галерея остаётся лентой — там пролистывание и задумано. */
    .gallery__track { flex-direction: row; gap: 16px; overflow-x: auto; }

    /* Карточки: во всю ширину колонки контента. В колонке карусели ширину
       задаёт сама колонка — с фиксированными 360 карточки жались к левому краю
       на экранах шире макетных 400. */
    .tour-card, .tour-card--wide { width: calc(100vw - var(--pv-gutter) * 2); max-width: 360px; gap: 24px; }
    .carousel__track .tour-card, .carousel__track .tour-card--wide { width: 100%; max-width: none; }
    /* Цена и скидка на мобильном — друг под другом во всю ширину карточки. */
    .tour-card__actions {
        left: 20px; right: 20px; bottom: 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .tour-card__title, .tour-card--wide .tour-card__title, .service-grid .tour-card__title { padding-right: 0; }
    .gallery__item { width: calc(100vw - var(--pv-gutter) * 2); max-width: 360px; height: 300px; }

    /* Преимущества и услуги на мобильном — ленты, а не сетка. */
    .benefits, .service-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 calc(var(--pv-gutter) * -1);
        padding: 0 var(--pv-gutter);
    }
    .benefits::-webkit-scrollbar, .service-grid::-webkit-scrollbar { display: none; }
    .benefit { flex: 0 0 263px; }
    .service-grid .tour-card { flex: 0 0 310px; width: 310px; }

    .tours-cta { display: block; }
    .section-head--after-divider { margin-top: 40px; }
    .heli-cards { gap: 40px; }
    .banners { gap: 40px; }
    .faq { padding: 40px 20px; }
    .level { padding: 40px 20px; gap: 32px; }
    /* В карточке колонка ýже секции — заголовок берём на ступень мельче. */
    .level h2 { font-size: 24px; }
    .solution { padding: 30px; }
    /* Характеристики на мобильном идут списком, иконка — слева от подписи,
       а не над ней (макет, `options item` в Tour mobile). */
    .options { flex-direction: column; gap: 32px; }
    .option { flex-direction: row; align-items: flex-start; gap: 12px; }
    .payment { padding: 30px 20px; gap: 20px; }
    .payment__row { gap: 20px; }
    .payment__actions { width: 100%; flex-direction: column; }
    .payment__actions .pv-btn { width: 100%; }
    .payment__logos { gap: 20px; }

    /* Футер по макету: всё по центру, отдельная кнопка карты. */
    .site-footer { padding: 60px 0; }
    .site-footer__top { gap: 40px; }
    .site-footer__col { align-items: center; text-align: center; gap: 16px; }
    /* Контакты в мобильном фрейме перестроены: заголовка колонки нет, телефон
       идёт крупной строкой, а мессенджеры и почта — тремя равными столбиками
       с иконкой в круглой плашке. */
    .site-footer__col--contacts > h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .site-footer__links { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px 10px; }
    .site-footer__links .icon-link { flex: 1 1 0; flex-direction: column; gap: 6px; text-align: center; }
    .site-footer__links .icon-link svg {
        width: 24px; height: 24px;
        padding: 10px;
        box-sizing: content-box;
        border-radius: 100px;
        background: var(--pv-bg);
    }
    .site-footer__links .icon-link[href^="tel:"] { flex: 1 0 100%; font-size: 24px; line-height: 1; letter-spacing: 0; }
    /* У телефона плашки нет — в макете это просто крупная строка. */
    .site-footer__links .icon-link[href^="tel:"] svg { display: none; }
    /* Кнопка вопроса встаёт во всю ширину колонки, как и «Открыть карту». */
    .site-footer__question { align-self: stretch; width: auto; }
    .site-footer__map-btn { display: inline-flex; }
    .site-footer__mobile-address { display: block; }
    .site-footer__map-link { display: none; }
    .site-footer__divider { margin: 40px 0; }
    .site-footer__bottom { align-items: center; text-align: center; gap: 30px; }
    .site-footer__legal { align-items: center; }
    .site-footer__disclaimer { text-align: center; gap: 30px; }
    .site-footer__disclaimer p { line-height: 1.5; }


    /* Форма оплаты живёт во фрейме провайдера и своей вёрсткой не управляет:
       на узком экране ей тесно в полях карточки — подписи способов оплаты
       обрезаются. Отдаём ей всю ширину карточки. */
    .funnel__widget:not(:empty) { margin-inline: -20px; }

    /* Воронка: поле 20 с каждой стороны — карточка ровно 360 во фрейме 400. */
    .funnel__head { gap: 14px; padding: 40px 20px 0; }
    .funnel__kicker { font-size: 18px; letter-spacing: 1.26px; }
    .funnel__body { gap: 24px; padding: 24px 20px 30px; }
    .funnel__footer { gap: 20px; padding: 20px; }
    .funnel__result-icon svg { width: 80px; height: 80px; }
    .field-row { grid-template-columns: 1fr; }
    .gift-note__text { padding: 16px; }
    .modal { padding: 20px; }
    .modal__body { padding: 30px 20px; gap: 24px; }
    .modal__footer { padding: 24px 30px 30px; }
    .modal__close { top: 20px; right: 20px; }
    .modal__dialog--doc h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .hero__slide.is-active img { animation: none; }
}