/* Start:/bitrix/templates/adaptive/css/tokens.css?17926557437594*/
/* Токены оформления. Значения из переменных Figma; имена - по роли, не по краске.
Тёмная тема - второй набор ниже, через [data-theme="dark"]. Блок с классом pf-light
остаётся светлым и в тёмной теме: плашки на фото, форма брони - так в тёмном макете. */
:root,
[data-theme="dark"] .pf-light {
    --pf-font-base: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;

    --pf-color-bg: #FFFFFF;                    /* Белый */
    --pf-color-surface: #F4F4F4;               /* Серая плашка */
    --pf-color-surface-accent: #F6F9FF;        /* Голубая плашка */
    --pf-color-surface-accent-hover: #DEE6FF;  /* Голуб пл hover */
    --pf-color-raised: #FFFFFF;                /* белая плашка на фоне: счётчики, тарифы */
    --pf-color-raised-2: #FFFFFF;              /* белая плашка внутри плашки: «О нас», поле рассылки */

    --pf-color-text: #171725;                  /* Текст */
    --pf-color-text-muted: #5B5B5B;            /* Текст второстепенный */
    --pf-color-text-accent: #6992BE;           /* Текст фиолетовый - по факту синий */
    --pf-color-fill-accent: #6992BE;           /* тот же синий - заливки: в тёмной теме не меняется */
    --pf-color-on-accent: #FFFFFF;             /* текст на синем, оранжевом и на фото */
    --pf-color-raised-in: #FFFFFF;             /* белая карточка внутри плашки: «Преимущества», координаты */
    --pf-color-fill-active: #6992BE;           /* выбранный таб, страница, кнопка по наведению */
    --pf-color-on-active: #FFFFFF;
    --pf-color-surface-brand: #6992BE;         /* большой синий блок: рассылка, шапка раздела услуг */
    --pf-color-link: #6992BE;                  /* ссылка в тексте статьи */
    --pf-color-overlay: rgba(23, 23, 37, 0.37); /* подложка под попапом */
    --pf-color-photo-shade: rgba(10, 14, 38, 0.73); /* «Затемнение» - градиент на фото */
    --pf-color-header-border: transparent;
    --pf-color-cta: #FA8741;                   /* кнопка брони - оранжевая */
    --pf-color-on-cta: #FFFFFF;

    --pf-color-surface-tab: #ECF2FF;           /* Фон табов */
    --pf-color-surface-club: #E5EBFF;          /* Плашка клубного тарифа */

    --pf-color-accent: #FA8741;                /* Оранжевый */
    --pf-color-success: #72BF01;               /* Зеленый */

    /* Ошибки формы: в переменных макета их нет, сняты с состояния «Ошибка» */
    --pf-color-surface-error: #FFF2F2;
    --pf-color-text-error: #FF5C5C;

    --pf-color-border-field: #E2E2E2;          /* Обводка полей формы */
    --pf-color-input: #B3B3BA;                 /* Input - плейсхолдер */

    --pf-h1-size: 56px;
    --pf-h1-lh: 69px;
    --pf-h1-weight: 700;

    /* На мобильном H1 и H2 в макете сведены к одному кеглю */
    --pf-h-mobile-size: 28px;
    --pf-h3-mobile-size: 22px;
    --pf-h2-size: 46px;
    --pf-h2-lh: 1;
    --pf-h2-weight: 700;

    --pf-h3-size: 26px;
    --pf-h3-lh: 1;
    --pf-h3-weight: 700;

    --pf-text-lg: 18px;
    --pf-text-md: 16px;
    --pf-text-sm: 14px;
    --pf-text-xs: 12px;
    --pf-text-lh: 1;                           /* как в макете, сверить с дизайнером в E1 */
    --pf-text-weight: 400;

    --pf-btn-size: 18px;
    --pf-btn-weight: 600;
    --pf-menu-mobile-size: 20px;
    --pf-menu-mobile-weight: 500;

    --pf-radius-pill: 100px;
    --pf-radius-btn: 30px;
    --pf-shadow-header: 0 4px 7.5px rgba(0, 0, 0, 0.08);
    --pf-shadow-pill: 0 4px 14px rgba(0, 0, 0, 0.13);

    --pf-gap-lg: 40px;

    --pf-container: 1520px;                    /* контент 1520 при поле 200 на 1920 */
    --pf-gutter: 20px;
}

/* Тёмная тема: переменные «Тем. тема …» из тёмного макета. Акценты - синий и
   оранжевый - общие. data-theme ставит скрипт в <head>, см. header.php */
:root[data-theme="dark"] {
    color-scheme: dark;

    --pf-color-bg: #151515;                    /* Тем. тема фон */
    --pf-color-surface: #353535;               /* Тем. тема Плашка */
    --pf-color-surface-accent: #353535;        /* Тем. тема Плашка */
    --pf-color-surface-accent-hover: #4F4F4F;  /* Тем. тема плашка hover */
    --pf-color-raised: #353535;                /* Тем. тема Плашка */
    --pf-color-raised-2: #272727;              /* Тем. тема плашка 2 уровень */

    --pf-color-text: #FFFFFF;                  /* Белый */
    --pf-color-text-muted: #B8B8B8;            /* Тем. тема текст второстепенный */
    --pf-color-text-accent: #FFFFFF;           /* синий текст и ссылки в тёмном макете белые */

    --pf-color-surface-tab: #353535;
    --pf-color-surface-club: #4F4F4F;

    --pf-color-surface-error: #3A2626;

    --pf-color-border-field: #4F4F4F;          /* Тем. тема обводка форм */
    --pf-color-input: #A8A8A8;                 /* Тем. тема input */

    /* Роли, которых в светлой теме не видно: там они совпадают с соседними */
    --pf-color-raised-in: #4F4F4F;             /* Тем. тема плашка hover - карточка внутри плашки */
    --pf-color-fill-active: #FFFFFF;           /* цветные кнопки и выбранное - белые */
    --pf-color-on-active: #151515;
    --pf-color-surface-brand: #353535;         /* синие блоки - плашкой */
    --pf-color-link: #5099E7;                  /* Тем. тема синий - ссылки в тексте статей */
    --pf-color-overlay: rgba(0, 0, 0, 0.7);
    --pf-color-photo-shade: rgba(33, 33, 33, 0.73);
    --pf-color-header-border: #3D3D3D;         /* в переменных макета нет */
    --pf-color-cta: #FFFFFF;                   /* цветные кнопки в тёмном макете белые */
    --pf-color-on-cta: #151515;
}

/* Островок светлой темы (форма брони, плашки на фото и на карточках аэропортов).
   Фон и текст светлые, а синий и оранжевый в тёмном макете на них - почти чёрные,
   голубые плашки - серые. Цвет текста наследуется от body - возвращаем светлый */
[data-theme="dark"] .pf-light {
    color-scheme: light;
    color: var(--pf-color-text);

    --pf-color-text: #151515;
    --pf-color-text-accent: #151515;
    --pf-color-fill-accent: #151515;
    --pf-color-fill-active: #FFFFFF;
    --pf-color-on-active: #151515;
    --pf-color-cta: #151515;
    --pf-color-on-cta: #FFFFFF;
    --pf-color-accent: #151515;
    --pf-color-surface-accent: #F4F4F4;
    --pf-color-surface-accent-hover: #E2E2E2;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/fonts.css?17926557431706*/
/* Inter с Google Fonts:
   https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap
   Взяты наборы latin, latin-ext и cyrillic, блоки ниже - оттуда без правок,
   кроме пути к файлу. Браузер качает файл, только если символы из его
   unicode-range есть на странице: latin-ext нужен ради знака ₽.
   Символы вне наборов рисует запасной шрифт из --pf-font-base.
   Пути latin и cyrillic совпадают с preload в header.php - меняются вместе. */

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/bitrix/templates/adaptive/css/../fonts/inter/cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/bitrix/templates/adaptive/css/../fonts/inter/latin-ext.woff2') format('woff2');
    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;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/bitrix/templates/adaptive/css/../fonts/inter/latin.woff2') format('woff2');
    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;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/vendor/modern-normalize.css?17926557433338*/
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/reset.css?17926557431117*/
/*
Наш сброс, идёт после vendor/modern-normalize.css и не дублирует его:
normalize выравнивает браузеры, здесь - решения проекта.
*/

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

/* Переходы по якорям на странице («Забронировать» → #bron) - плавной прокруткой.
   Кто просил систему убрать анимацию, получает обычный прыжок */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
}

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

/* End */


/* Start:/bitrix/templates/adaptive/css/base.css?17926557434952*/
/* Типографика, каркас, сетка, утилиты.
   Слои: tokens → fonts → vendor/modern-normalize → reset → base, порядок задан
   в header.php. template_styles.css и styles.css не заводим: ядро цепляет их само
   и всегда в конец набора (Asset::addTemplateCss), в этот порядок не встроить.
   Соглашения: БЭМ с префиксом pf-, цвета и размеры только через var(--pf-*),
   медиазапросы только min-width, селекторы плоские (без вложенности и :has() -
   держим Safari 15 / Chrome 100), без !important и id, без *.min.css. */

/* Типографика */

.pf-body {
    background-color: var(--pf-color-bg);
    color: var(--pf-color-text);
    font-family: var(--pf-font-base);
    font-optical-sizing: none;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-text-weight);
    line-height: var(--pf-text-lh);
}

h1,
.pf-h1 {
    font-size: var(--pf-h1-size);
    font-weight: var(--pf-h1-weight);
    line-height: var(--pf-h1-lh);
}

h2,
.pf-h2 {
    font-size: var(--pf-h2-size);
    font-weight: var(--pf-h2-weight);
    line-height: var(--pf-h2-lh);
}

h3,
.pf-h3 {
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: var(--pf-h3-lh);
}

.pf-text-lg {
    font-size: var(--pf-text-lg);
}

.pf-text-sm {
    font-size: var(--pf-text-sm);
}

.pf-text-xs {
    font-size: var(--pf-text-xs);
}

.pf-text-muted {
    color: var(--pf-color-text-muted);
}

.pf-text-accent {
    color: var(--pf-color-text-accent);
}

/* Каркас страницы */

.pf-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.pf-main {
    flex: 1 1 auto;
}

.pf-container {
    width: 100%;
    max-width: calc(var(--pf-container) + var(--pf-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pf-gutter);
    padding-right: var(--pf-gutter);
}

.pf-container--flush {
    max-width: var(--pf-container);
    padding-left: 0;
    padding-right: 0;
}

/* Сетка. Колонки задаются модификатором или --pf-grid-cols на блоке */

.pf-grid {
    display: grid;
    grid-template-columns: repeat(var(--pf-grid-cols, 1), minmax(0, 1fr));
    gap: var(--pf-grid-gap, var(--pf-gutter));
}

.pf-grid--gap-lg {
    --pf-grid-gap: var(--pf-gap-lg);
}

/* Утилиты */

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

.pf-hidden {
    display: none;
}

.pf-surface {
    background-color: var(--pf-color-surface);
}

.pf-surface-accent {
    background-color: var(--pf-color-surface-accent);
}

/* Брейкпоинты: 1200 - десктопное меню, ниже бургер */

/* Мобильный макет нарисован на 440: на 360-375 поля 20 съедают лишнее */
@media (max-width: 439px) {
    :root {
        --pf-gutter: 6px;
        /* поля карточек: в макете 20-30, на узком экране одинаковые и меньше */
        --pf-card-pad: 16px;
        /* промежуток между карточками в списках */
        --pf-card-gap: 12px;
    }
}

@media (min-width: 768px) {
    :root {
        --pf-gutter: 32px;
    }

    .pf-grid--2 {
        --pf-grid-cols: 2;
    }
}

@media (min-width: 1024px) {
    :root {
        --pf-gutter: 40px;
    }

    .pf-grid--3 {
        --pf-grid-cols: 3;
    }
}

@media (min-width: 1200px) {
    .pf-grid--4 {
        --pf-grid-cols: 4;
    }
}

@media (min-width: 1920px) {
    :root {
        --pf-gutter: 200px;
    }
}

/* Значок соцсети (include/social_icon.php): круг - акцентом, знак - цветом фона,
   в тёмной теме они меняются местами */
.pf-social-icon__circle {
    fill: var(--pf-color-text-accent);
}

.pf-social-icon__glyph {
    fill: var(--pf-color-bg);
}

/* Тёмная тема: иллюстрации в карточках в тёмном макете серые - обесцвечиваем
   те же картинки, отдельных тёмных файлов нет. Фото и картинки новостей - цветные */
[data-theme="dark"] :is(.pf-feature__icon, .pf-park-feature__icon, .pf-work__pic, .pf-services__pic) {
    filter: grayscale(1);
}

/* у карточки под курсором картинка в тёмном макете снова цветная */
[data-theme="dark"] :is(.pf-feature:hover .pf-feature__icon, .pf-park-feature:hover .pf-park-feature__icon, .pf-work__card:hover .pf-work__pic) {
    filter: none;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/controls.css?17926557434269*/
/* Базовые элементы управления: кнопка, поле, чекбокс.
   Подключается до блоков, которые их используют. */

/* Кнопка */

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--pf-radius-btn);
    font-size: var(--pf-btn-size);
    font-weight: var(--pf-btn-weight);
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
}

.pf-btn--primary {
    background-color: var(--pf-color-cta);
    color: var(--pf-color-on-cta);
}

/* Зелёная: в макете «Подписаться» */
.pf-btn--success {
    background-color: var(--pf-color-success);
    color: var(--pf-color-on-accent);
}

/* В тёмном макете и зелёная кнопка белая, как оранжевая */
[data-theme="dark"] .pf-btn--success {
    background-color: var(--pf-color-cta);
    color: var(--pf-color-on-cta);
}

.pf-btn--secondary {
    background-color: var(--pf-color-surface);
    color: var(--pf-color-text);
}

/* Контурная: в макете «Посмотреть маршрут» */
.pf-btn--outline {
    background-color: transparent;
    border: 2px solid var(--pf-color-accent);
    color: var(--pf-color-accent);
}

/* Крупная кнопка во всю ширину - в формах */
.pf-btn--block {
    width: 100%;
    height: 62px;
    border-radius: 15px;
}

/* Поле ввода и селект */

.pf-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.pf-field__control {
    width: 100%;
    height: 47px;
    padding: 0 13px;
    background-color: transparent;
    border: 1px solid var(--pf-color-border-field);
    border-radius: 15px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text);
    appearance: none;
}

.pf-field__control::placeholder {
    color: var(--pf-color-input);
}

/* Пустой select красим как placeholder: у него самого его нет */
.pf-field__control:invalid,
.pf-field__control:placeholder-shown {
    color: var(--pf-color-input);
}

/* Место под иконку освобождаем только там, где она есть */
.pf-field--icon .pf-field__control {
    padding-right: 40px;
}

.pf-field__icon {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Поле, на которое указала проверка формы */

.pf-field--error .pf-field__control {
    border-color: var(--pf-color-text-error);
}

.pf-check--error .pf-check__frame {
    stroke: var(--pf-color-text-error);
}

/* Чекбокс: системный прячем, показываем свою галочку */

/* галочка по центру текста в любую высоту; прозрачный input встаёт туда же,
   статичная позиция абсолютного ребёнка во flex тоже центруется */
.pf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* прозрачный input лежит поверх рамки: без своего курсора он вернёт стрелку */
.pf-check__input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pf-check__box {
    flex-shrink: 0;
}

.pf-check__frame {
    stroke: var(--pf-color-border-field);
}

.pf-check__tick {
    stroke: var(--pf-color-text);
}

/* Снят - остаётся пустая рамка */
.pf-check__input:not(:checked) + .pf-check__box .pf-check__tick {
    display: none;
}

.pf-check__input:focus-visible + .pf-check__box {
    outline: 2px solid var(--pf-color-text-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Десктопные размеры полей и кнопки: на мобильном макет мельче */
@media (min-width: 1200px) {
    .pf-field__control {
        height: 49px;
        font-size: var(--pf-text-md);
        line-height: 19px;
    }

    .pf-btn--block {
        height: 70px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/select.css?17926557433115*/
/* Свой список вместо системного: option в браузерах не стилизуется.
   Строится в js/select.js поверх обычного select. */

.pf-select__native {
    display: none;
}

.pf-select__button {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.pf-select__button--empty {
    color: var(--pf-color-input);
}

/* Открытый список - продолжение поля: общая рамка, без линии между ними */

.pf-select--open .pf-select__button {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pf-select--open .pf-field__icon--chevron {
    transform: translateY(-50%) rotate(180deg);
}

.pf-select__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 30;
    /* пять строк, дальше прокрутка: времени в списке 48 */
    max-height: 245px;
    overflow-y: auto;
    /* минус пиксель накрывает прозрачную рамку поля: в макете панель 4 ряда по 49 */
    margin: -1px 0 0;
    padding: 0;
    list-style: none;
    background-color: var(--pf-color-bg);
    border: 1px solid var(--pf-color-border-field);
    border-top: 0;
    border-radius: 0 0 15px 15px;
}

/* Поле с ошибкой: панель приклеена к нему, рамка должна быть одного цвета */

.pf-field--error .pf-select__list {
    border-color: var(--pf-color-text-error);
}

.pf-select__option {
    display: flex;
    align-items: center;
    height: 49px;
    padding: 0 13px;
    font-size: var(--pf-text-md);
    line-height: 19px;
    color: var(--pf-color-text-muted);
    cursor: pointer;
}

/* Наведение и выбранный пункт макет не показывает - берём плашки календаря */

.pf-select__option:hover,
.pf-select__option--active {
    background-color: var(--pf-color-surface-accent);
}

.pf-select__option--current {
    background-color: var(--pf-color-surface-accent-hover);
    color: var(--pf-color-text);
}

/* На телефоне - окно по центру экрана поверх затемнения, как у календаря */

.pf-select--modal.pf-select--open .pf-select__button {
    border-bottom-color: var(--pf-color-border-field);
    border-radius: 15px;
}

.pf-select__list--modal {
    position: fixed;
    top: 50%;
    right: auto;
    left: 50%;
    z-index: 100;
    width: min(320px, calc(100% - 32px));
    max-height: min(343px, calc(100% - 32px));
    margin: 0;
    border: 0;
    border-radius: 14px;
    transform: translate(-50%, -50%);
}

.pf-select__overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
}

.pf-select__overlay--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/header.css?179265574311730*/
/* Шапка. База - мобильная, десктоп от 1200 в медиазапросе внизу файла. */

/* Каркас. Шапка прилипает к верху окна и на мобильном, и на десктопе */

/* Якоря (#bron и др.) не уходят под прилипшую шапку: отступ = её высота, 88 = 20 + ряд 48 + 20 */
html {
    scroll-padding-top: 88px;
}

.pf-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--pf-color-bg);
    box-shadow: 0 4px 6.4px rgba(0, 0, 0, 0.1);
}

/* Поля страницы ниже 440 ужаты (base.css), шапке и меню под бургером - прежние 20 */
@media (max-width: 439px) {
    .pf-header,
    .pf-menu {
        --pf-gutter: 20px;
    }
}

.pf-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    height: 48px;
}

/* Логотип */

.pf-logo {
    display: flex;
    flex-direction: column;
    color: var(--pf-color-text-accent);
}

.pf-logo__tagline {
    font-size: 12px;
    line-height: 14px;
}

.pf-logo__name {
    font-size: 21px;
    font-weight: 800;
    line-height: 25px;
    text-transform: uppercase;
}

/* Счётчики: на мобильном две строки, на десктопе две плашки.
   Мобильные стоят по центру между логотипом и плашкой (space-between строки) */

.pf-header__counters-mobile {
    color: var(--pf-color-text-accent);
    font-size: var(--pf-text-sm);
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

.pf-header__counters-mobile b {
    font-weight: 800;
}

.pf-header__counters {
    display: none;
    align-items: center;
    gap: 20px;
}

.pf-counter {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    background-color: var(--pf-color-raised);
    box-shadow: var(--pf-shadow-pill);
    border-radius: var(--pf-radius-pill);
    color: var(--pf-color-text-accent);
    line-height: 24px;
    white-space: nowrap;
}

.pf-counter__value {
    font-size: 20px;
    font-weight: 700;
}

/* Пробел из макета: во флекс-элементе он схлопнется без pre */
.pf-counter__space {
    font-size: 18px;
    white-space: pre;
}

.pf-counter__label {
    font-size: var(--pf-text-sm);
}

/* Плашка с иконками входа и меню - только мобильная */

.pf-header__pill {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 48px;
    padding: 0 20px;
    background-color: var(--pf-color-surface);
    border-radius: var(--pf-radius-pill);
}

/* Ниже 420 композиция макета не влезает: счётчики - УТП, клиентка просит их везде.
   Счётчики и плашка с иконками своего размера не меняют, уступает логотип: шрифт
   тянется за шириной экрана - 21 к 390, около 15 на 360. */
@media (max-width: 419px) {
    .pf-header__top {
        gap: 10px;
    }

    .pf-header__counters-mobile,
    .pf-header__pill {
        flex-shrink: 0;
    }

    .pf-header__counters-mobile {
        font-size: 12px;
        line-height: 15px;
    }

    .pf-logo__tagline {
        font-size: clamp(10px, (100vw - 280px) * 0.11, 12px);
        line-height: 1.2;
    }

    .pf-logo__name {
        font-size: clamp(14px, (100vw - 280px) * 0.19, 21px);
        line-height: 1.2;
    }
}

.pf-header__icon {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
}

/* Вошедшему значок кабинета - акцентный. Цвет в SVG зашит, поэтому перекрашиваем маской:
   сам img прячем (место он держит), маска рисует тот же значок акцентным цветом */
.pf-header__icon--auth {
    position: relative;
}

.pf-header__icon--auth img {
    visibility: hidden;
}

.pf-header__icon--auth::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--pf-color-accent);
    -webkit-mask: url("/bitrix/templates/adaptive/css/blocks/../../images/icon-login.svg") no-repeat center / contain;
    mask: url("/bitrix/templates/adaptive/css/blocks/../../images/icon-login.svg") no-repeat center / contain;
}

/* Панель меню под бургером - только мобильная */

/* Оверлей со своей прокруткой: в потоке низ панели был бы недосягаем */
.pf-menu {
    position: fixed;
    top: 88px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    overflow-y: auto;
    /* снизу - высота нижнего бара (tabbar.css): он выше меню и накрывал бы конец списка.
       Поднятая кнопка брони выступает над баром на 20px, в запас 40px она помещается */
    padding: 20px var(--pf-gutter) calc(40px + 69px + env(safe-area-inset-bottom, 0px));
    background-color: var(--pf-color-bg);
}

.pf-menu__theme {
    position: absolute;
    top: 20px;
    right: var(--pf-gutter);
}

.pf-menu__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-menu__link {
    display: block;
    font-size: var(--pf-text-lg);
    line-height: 22px;
}

/* логотип, 30 и строки контактов - ~317 px: на 320 телефон и почта уходят под логотип */
.pf-menu__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 30px;
    margin-top: 25px;
}

.pf-menu__lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--pf-color-text-accent);
    font-size: var(--pf-menu-mobile-size);
    font-weight: var(--pf-menu-mobile-weight);
    line-height: 24px;
}

.pf-menu__social {
    display: flex;
    gap: 18px;
    margin-top: 32px;
}

.pf-menu__note {
    margin-top: 44px;
    font-size: var(--pf-text-xs);
    font-weight: 600;
    line-height: 15px;
}

/* Бургер превращается в крестик при открытом меню */

.pf-burger__close,
.pf-header--menu-open .pf-burger__open {
    display: none;
}

.pf-header--menu-open .pf-burger__close {
    display: block;
}

/* Страница под открытым меню не прокручивается */

.pf-body--locked {
    overflow: hidden;
}

/* Тема, телефон, вход - только десктоп. Прячем контейнер: пустой флекс съедал бы gap */

.pf-header__actions {
    display: none;
    align-items: center;
    gap: 20px;
}

.pf-theme-toggle {
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

/* Переключатель темы (include/theme_toggle.php): в светлой кружок синий под
   солнцем, в тёмной - тёмный под луной, рамка заливается белым */
.pf-theme-toggle__frame {
    stroke: var(--pf-color-text);
}

.pf-theme-toggle__knob {
    fill: var(--pf-color-fill-accent);
}

.pf-theme-toggle__moon {
    fill: #151515;
}

.pf-theme-toggle__sun {
    fill: #FFFFFF;
}

[data-theme="dark"] .pf-theme-toggle__frame {
    fill: #FFFFFF;
    stroke: #FFFFFF;
}

[data-theme="dark"] .pf-theme-toggle__knob {
    fill: #151515;
    transform: translateX(-35px);
}

[data-theme="dark"] .pf-theme-toggle__moon {
    fill: #FFFFFF;
}

[data-theme="dark"] .pf-theme-toggle__sun {
    fill: #151515;
}

.pf-phone {
    display: flex;
    flex-direction: column;
    width: 224px;
}

.pf-phone__number {
    font-size: 25px;
    font-weight: 800;
    line-height: 27px;
    white-space: nowrap;
}

.pf-phone__note {
    font-size: var(--pf-text-xs);
    line-height: 13px;
}

/* Вошедший в кабинет: имя (из старого шаблона, в макете его нет) и «Выйти».
   Шрифт имени как у "Выйти". Длинное имя обрезаем - иначе на 1200-1400 шапке не хватит ширины */

.pf-user {
    max-width: 160px;
    overflow: hidden;
    font-size: var(--pf-btn-size);
    font-weight: var(--pf-btn-weight);
    line-height: 22px;
    color: var(--pf-color-text-accent);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Выйти» в макете голубая, в отличие от серой «Войти» */
.pf-login--out {
    background-color: var(--pf-color-surface-club);
    color: var(--pf-color-text-accent);
}

/* Кнопка брони появляется только в компактном состоянии */

.pf-book {
    display: none;
}

/* Меню разделов - только десктоп */

.pf-nav {
    display: none;
}

.pf-nav__list {
    display: flex;
    justify-content: space-between;
    max-width: 1508px;
}

.pf-nav__link {
    display: block;
    height: 40px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
}

.pf-nav__item--active .pf-nav__link {
    position: relative;
    font-weight: 700;
}

.pf-nav__item--active .pf-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 25px;
    background-color: var(--pf-color-fill-accent);
}

/* Десктоп: 126 = 15 + ряд 51 + отступ 20 + меню 40 */

@media (min-width: 1200px) {
    html {
        scroll-padding-top: 126px;
    }

    .pf-header {
        padding-top: 15px;
        padding-bottom: 0;
        box-shadow: var(--pf-shadow-header);
    }

    .pf-header__top {
        gap: 0;
        height: 51px;
    }

    .pf-logo__tagline {
        font-size: 15px;
        line-height: 19px;
    }

    .pf-logo__name {
        font-size: 27px;
        line-height: 32px;
    }

    .pf-header__counters-mobile,
    .pf-header__pill,
    .pf-menu {
        display: none;
    }

    .pf-header__actions {
        display: flex;
    }

    .pf-nav {
        display: block;
        margin-top: 20px;
    }

    /* Компактное: только кнопка и цвет подписи. Геометрию не трогаем -
       в макете она другая, но на пороге прокрутки это дёргалось */
    .pf-header--compact .pf-book {
        display: inline-flex;
    }

    .pf-header--compact .pf-phone__note {
        color: var(--pf-color-text-accent);
    }
}

/* Счётчики от 1400: ниже компактной шапке не хватает ширины из-за кнопки брони.
   В обоих состояниях, иначе пропадали бы при прокрутке */

@media (min-width: 1400px) {
    .pf-header__counters {
        display: flex;
    }
}

/* Тёмная тема: логотип в меню и значок «Войти» - белые, как в макете */
[data-theme="dark"] :is(.pf-menu__logo, .pf-login__icon, .pf-header__icon img) {
    filter: brightness(0) invert(1);
}

/* Тёмная тема: вместо тени шапку отделяет полоса (в мобильном макете 1px, в десктопном 2px).
   Тенью, а не рамкой - чтобы не менять высоту шапки */
[data-theme="dark"] .pf-header {
    box-shadow: 0 1px 0 var(--pf-color-header-border);
}

@media (min-width: 1200px) {
    [data-theme="dark"] .pf-header {
        box-shadow: 0 2px 0 var(--pf-color-header-border);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/footer.css?17926557436253*/
/* Подвал. База - мобильная, десктоп от 1200 внизу файла.
   Верхний блок на grid: порядок в разметке и на экране разный. */

.pf-footer {
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
    padding-top: 35px;
    padding-bottom: 30px;
}

.pf-footer .pf-container {
    padding-left: 26px;
    padding-right: 26px;
}

.pf-footer__top {
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
}

/* Размеры по видимой части: в макете у логотипа прозрачные поля по краям.
   Обе стороны явно - иначе max-width из reset сплющивает пропорцию. */
.pf-footer__logo {
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
    width: 110px;
    height: 67px;
    max-width: none;
}

.pf-footer__contacts {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    color: var(--pf-color-text-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
}

/* На мобильном колонки идут одним столбцом - шаг как между пунктами */
.pf-footer__cols {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
}

.pf-footer__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pf-footer__link {
    font-size: var(--pf-menu-mobile-size);
    font-weight: var(--pf-menu-mobile-weight);
    line-height: 25px;
}

.pf-footer__social {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    gap: 20px;
    margin-top: 47px;
}

.pf-footer__social .pf-social-icon {
    width: 47px;
    height: 46px;
}

.pf-footer__bar {
    margin-top: 32px;
    color: var(--pf-color-text-muted);
    font-size: var(--pf-text-xs);
    line-height: 15px;
}

.pf-footer__bar-inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* Ниже 420 логотип и контакты на макетных размерах в строку не помещаются -
   макет нарисован на 440. Оставляем их в строке: поля как у карточек, контакты
   и логотип ужимаются вместе с экраном (на 360 контакты 20 px, на 320 - 18) */
/* поля подвала-плашки сверху и снизу ниже 440 - под стать карточкам */
@media (max-width: 439px) {
    .pf-footer {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (max-width: 419px) {
    .pf-footer .pf-container {
        padding-left: var(--pf-card-pad);
        padding-right: var(--pf-card-pad);
    }

    .pf-footer__top {
        justify-content: space-between;
        column-gap: 12px;
    }

    .pf-footer__logo {
        width: clamp(88px, 30vw, 110px);
        height: auto;
        aspect-ratio: 110 / 67;
    }

    .pf-footer__contacts {
        font-size: clamp(16px, 5.5vw, 22px);
        line-height: 1.3;
    }
}

/* Десктоп: логотип, три колонки, справа контакты, внизу полоса */

@media (min-width: 1200px) {
    .pf-footer {
        border-radius: 0;
        padding-top: 0;
        padding-bottom: 0;
        background-color: var(--pf-color-surface-accent-hover);
    }

    .pf-footer .pf-container {
        padding-left: var(--pf-gutter);
        padding-right: var(--pf-gutter);
    }

    .pf-footer__top {
        grid-template-columns: auto auto 1fr;
        padding-top: 34px;
        padding-bottom: 33px;
    }

    .pf-footer__logo {
        grid-row: 1 / span 2;
        width: 198px;
        height: 120px;
        margin-top: 26px;
        /* добираем прозрачное поле снизу, чтобы полоса легла на 218 */
        margin-bottom: 5px;
    }

    .pf-footer__cols {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: row;
        gap: 24px;
        margin-top: 26px;
        margin-left: 24px;
    }

    .pf-footer__list {
        gap: 25px;
    }

    /* Первая колонка - парковки, они выделены начертанием */
    .pf-footer__list:first-child .pf-footer__link {
        color: var(--pf-color-text);
        font-weight: 600;
    }

    .pf-footer__link {
        font-size: var(--pf-text-lg);
        font-weight: 400;
        line-height: 20px;
        color: var(--pf-color-text-muted);
    }

    .pf-footer__social {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 18px;
    }

    .pf-footer__social .pf-social-icon {
        width: 35px;
        height: 35px;
    }

    .pf-footer__contacts {
        grid-column: 3;
        grid-row: 2;
        gap: 6px;
        margin-top: 23px;
        font-size: 25px;
        font-weight: 500;
        line-height: 34px;
    }

    .pf-footer__bar {
        margin-top: 0;
        padding: 20px 0 22px;
        background-color: var(--pf-color-fill-accent);
        color: var(--pf-color-on-accent);
        font-size: var(--pf-text-lg);
        line-height: 24px;
    }
}

/* Шаг колонок в макете неравный, содержимым не задать. Ниже 1400 не влезает */

@media (min-width: 1400px) {
    .pf-footer__cols {
        gap: 0;
        margin-left: 59px;
    }

    .pf-footer__list:first-child {
        flex: 0 0 360px;
    }

    .pf-footer__list:nth-child(2) {
        flex: 0 0 259px;
    }
}

/* Тёмная тема: подвал - плашкой, нижняя полоса светлее, логотип белый */
[data-theme="dark"] .pf-footer {
    background-color: var(--pf-color-raised);
}

[data-theme="dark"] .pf-footer__logo {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .pf-footer__contacts {
    color: var(--pf-color-text-muted);
}

@media (min-width: 1200px) {
    [data-theme="dark"] .pf-footer__bar {
        background-color: var(--pf-color-surface-accent-hover);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/tabbar.css?17926557433831*/
/* Нижняя навигация. Только до 1200, на десктопе скрыта. */

.pf-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    height: 69px;
    /* на iPhone под баром живёт индикатор жестов */
    padding-bottom: env(safe-area-inset-bottom, 0);
    background-color: var(--pf-color-bg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -5.8px 9.3px rgba(188, 188, 201, 0.2);
}

/* Иконки разной высоты, но выровнены по общей полосе 27px */
.pf-tabbar__item {
    flex: 1 1 0;
    display: grid;
    grid-template-rows: 27px auto;
    align-content: start;
    justify-items: center;
    align-items: center;
    gap: 1px;
    padding-top: 16px;
    color: #1c1c1c;
    font-size: var(--pf-text-xs);
    line-height: 15px;
    text-align: center;
}

.pf-tabbar__item--active {
    color: var(--pf-color-text-accent);
}

/* Кнопка брони поднята над баром: белый ореол, синий круг, знак парковки */

.pf-tabbar__item--book {
    position: relative;
    grid-template-rows: auto;
    align-content: end;
    padding-top: 0;
    padding-bottom: 11px;
}

/* left/right явно: без них Safari ставит абсолютный элемент грида
   к левому краю ячейки, а не по justify-items */
.pf-tabbar__disc {
    position: absolute;
    right: 0;
    bottom: 31px;
    left: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--pf-color-fill-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--pf-color-bg);
}

/* Место под бар, чтобы он не накрывал конец страницы */

@media (max-width: 1199px) {
    .pf-layout {
        padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
    }

    /* Докрутка (scrollIntoView, якоря) не прячет низ под бар: бар 69px
       и кнопка брони, поднятая над ним ещё на 28px */
    html {
        scroll-padding-bottom: calc(69px + 28px + env(safe-area-inset-bottom, 0px));
    }
}

/* Кнопка чата Jivo стоит в правом нижнем углу и накрывает «Контакты» -
   поднимаем её над баром. __jivoMobileButton - единственный нехешированный
   класс кнопки. Свой отступ снизу Jivo ставит правилом из двух хешированных
   классов, поэтому класс повторён для веса и !important */

@media (max-width: 1199px) {
    .__jivoMobileButton.__jivoMobileButton.__jivoMobileButton {
        /* высота бара и 16px зазора */
        margin-bottom: calc(69px + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 1200px) {
    .pf-tabbar {
        display: none;
    }
}

/* Тёмная тема: бар в макете светлее плашки - цветом «Тем. тема плашка hover»,
   без тени; кольцо вокруг центральной кнопки - в цвет бара */
[data-theme="dark"] .pf-tabbar {
    background-color: var(--pf-color-surface-accent-hover);
    box-shadow: none;
}

[data-theme="dark"] .pf-tabbar__item {
    color: var(--pf-color-text);
}

[data-theme="dark"] .pf-tabbar__disc {
    box-shadow: 0 0 0 8px var(--pf-color-surface-accent-hover);
}

/* значки нарисованы синим, в тёмном макете они белые */
[data-theme="dark"] .pf-tabbar__item > img {
    filter: brightness(0) invert(1);
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/booking.css?17926557439673*/
/* Форма брони, дефолтное состояние. Ширина резиновая, в макете 480. */

.pf-booking {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
    background-color: var(--pf-color-bg);
    border-radius: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    /* «Забронировать» ведёт сюда якорем #bron: форма встаёт с зазором от края окна */
    scroll-margin-top: 20px;
}

/* Мобильный макет на 440: на 360-375 поля 25 съедают ширину полей ввода */
@media (max-width: 439px) {
    .pf-booking {
        padding: var(--pf-card-pad);
    }
}

.pf-booking__title {
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: 27px;
    color: var(--pf-color-text);
}

.pf-booking__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-booking__label {
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

.pf-booking__row {
    display: flex;
    gap: 19px;
}

/* Пары полей везде в ряд и поровну, как в макете. До 500 поля ввода компактнее:
   шрифт 13, поля по бокам 10, поля формы 16 - так в одну строку влезают подсказка
   маски телефона "+7 (XXX) XXX-XX-XX" и "Выберите парковку (аэропорт вылета)".
   На 440-499 у формы десктопные поля 25, и половине строки не хватало под маску */
@media (max-width: 499px) {
    .pf-booking {
        padding: var(--pf-card-pad, 16px);
    }

    .pf-booking__row--contacts,
    .pf-booking__row--dates {
        gap: 10px;
    }

    .pf-booking .pf-field__control {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 13px;
    }

    .pf-booking .pf-field--icon .pf-field__control {
        padding-right: 34px;
    }
}

/* Ниже 375 подсказке маски в половине строки не хватает 7 px - имя и телефон мельче */
@media (max-width: 374px) {
    .pf-booking .pf-field--phone .pf-field__control,
    .pf-booking .pf-field:has(+ .pf-field--phone) .pf-field__control {
        font-size: 12px;
    }
}

.pf-booking__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    /* высоту держит min-height: в макете бокс на две строки текста */
    min-height: 53px;
    padding: 0 13px;
    background-color: var(--pf-color-surface);
    border-radius: 8px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
    text-align: center;
}

/* Стоимость: считается по мере заполнения полей */

.pf-booking__price {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 15px;
    color: var(--pf-color-text-accent);
}

.pf-booking__sum {
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: 31px;
}

.pf-booking__sum,
.pf-booking__base {
    white-space: nowrap;
}

.pf-booking__cur {
    font-size: 0.6em;
}

.pf-booking__days {
    padding: 6px 10px;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 100px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    white-space: nowrap;
}

@media (max-width: 439px) {
    .pf-booking__price {
        gap: 8px;
        padding: var(--pf-card-pad, 16px);
    }
}

@media (max-width: 439px), (min-width: 1366px) and (max-width: 1599px) {
    .pf-booking__days {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* Ошибка на месте той же плашки */

.pf-booking__error {
    padding: 10px 20px;
    background-color: var(--pf-color-surface-error);
    border-radius: 8px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-error);
    text-align: center;
}

/* display у блоков задан ниже по каскаду, чем [hidden] в браузере - гасим сами */

.pf-booking[hidden],
.pf-booking__hint[hidden],
.pf-booking__price[hidden] {
    display: none;
}

/* Согласие */

.pf-booking__policy {
    font-size: var(--pf-text-xs);
    line-height: 15px;
    color: var(--pf-color-input);
}

.pf-booking__policy a {
    color: var(--pf-color-text-muted);
}

/* Состояние после брони: занимает место формы */

.pf-booking__done {
    align-items: center;
}

.pf-booking__done-title {
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: 31px;
    color: var(--pf-color-text);
    text-align: center;
}

.pf-booking__number {
    width: 100%;
    padding: 10px 20px;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 10px;
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: 31px;
    color: var(--pf-color-text-accent);
    text-align: center;
}

/* Две цены и калькулятор в правом нижнем углу */

.pf-booking__total {
    /* калькулятор прячется по ширине самой плашки: форма стоит и во всю ширину
       экрана, и в узкой колонке, поэтому ширина окна тут ничего не говорит */
    container: pf-total / inline-size;
    position: relative;
    width: 100%;
    padding: 20px 25px 25px;
    overflow: hidden;
    background-color: var(--pf-color-surface-accent);
    border-radius: 15px;
}

.pf-booking__total-main {
    color: var(--pf-color-text-accent);
}

.pf-booking__total-full {
    margin-top: 15px;
    color: var(--pf-color-input);
}

.pf-booking__total-main b,
.pf-booking__total-full b {
    display: block;
    margin-bottom: 7px;
    font-weight: var(--pf-h3-weight);
    line-height: normal;
}

.pf-booking__total-main b {
    font-size: 38px;
}

.pf-booking__total-full b {
    font-size: var(--pf-h3-size);
}

.pf-booking__total-main > span,
.pf-booking__total-full > span {
    font-size: var(--pf-text-lg);
    line-height: 22px;
}

.pf-booking__calc {
    position: absolute;
    /* рамка из макета: 177x185 от left 289 на плашке 420 - вылезающий край режет плашка */
    right: -46px;
    bottom: 0;
    width: 177px;
    height: 185px;
    pointer-events: none;
}

/* Рамка рассчитана на плашку 420: на плашке уже калькулятор наезжает на суммы.
   Убираем, как в мобильном макете калькулятора на странице парковки.
   Запрос меряет контент без полей: 420 - 25 - 25 = 370 */
@container pf-total (max-width: 369px) {
    .pf-booking__calc {
        display: none;
    }
}

.pf-booking__note {
    width: 100%;
    padding: 10px 25px;
    background-color: var(--pf-color-surface);
    border-radius: 10px;
    font-size: var(--pf-text-lg);
    line-height: 22px;
    color: var(--pf-color-text);
    text-align: center;
}

/* Ниже 440 на макетных кеглях заголовок брони занимал пять строк,
   номер брони и сумма переносились, подсказка - девять строк */
@media (max-width: 439px) {
    .pf-booking__done-title,
    .pf-booking__number {
        font-size: 24px;
        line-height: 29px;
    }

    .pf-booking__total {
        padding: var(--pf-card-pad);
    }

    .pf-booking__total-main b {
        font-size: 30px;
    }

    .pf-booking__note {
        padding: 10px 15px;
        font-size: var(--pf-text-md);
        line-height: 20px;
    }
}

/* Десктопный макет формы крупнее мобильного: свои кегли и поля */

@media (min-width: 1200px) {
    /* шапка тут прилипает к верху, 126px (header.css) - форма встаёт под ней */
    .pf-booking {
        padding: 25px 30px;
        scroll-margin-top: 146px;
    }

    .pf-booking__title {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-booking__label {
        font-size: var(--pf-text-xs);
        line-height: 15px;
    }

    .pf-booking__hint {
        min-height: 35px;
        padding: 0 10px;
        font-size: var(--pf-text-xs);
        line-height: 15px;
    }
}

/* Невысокие экраны ноутбуков (1536x695 - 1920x1080 с масштабом 125% за вычетом
   панелей браузера): форма из макета в 617 не влезает в первый экран под шапкой.
   Ужимаем промежутки и кнопку - так она занимает 537 */

@media (min-width: 1280px) and (max-height: 800px) {
    .pf-booking {
        gap: 12px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .pf-booking .pf-btn--block {
        height: 56px;
    }
}

/* Временный контейнер первого экрана: в E2.1 его заменит баннер с формой */

.pf-firstscreen {
    max-width: 480px;
    margin: 40px 0;
}

/* в тёмном макете калькулятор на плашке с суммой серый */
[data-theme="dark"] .pf-booking__calc {
    filter: grayscale(1);
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/breadcrumbs.css?1792655743572*/
/* Хлебные крошки: строка ссылок акцентного цвета с уголками между ними */

.pf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-accent);
}

.pf-crumbs__link {
    color: inherit;
    text-decoration: none;
}

.pf-crumbs__link:hover {
    text-decoration: underline;
}

/* Уголок из макета, цвет берёт от текста */

.pf-crumbs__sep {
    flex-shrink: 0;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/layout.css?17926557433822*/
/* Раскладка внутренних страниц: контент и форма брони справа от него. */

.pf-side {
    margin: 25px 0 90px;
}

/* крошки вынесены над колонками: свой отступ сверху им уже не нужен */
.pf-side__crumbs {
    margin-top: 25px;
}

/* под крошками колонки начинаются вместе: баннер вровень с формой */
.pf-side--under-crumbs {
    margin-top: 25px;
}

.pf-side__title {
    margin: 12px 0 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

/* В мобильном макете формы на внутренних страницах нет */
.pf-side__aside {
    display: none;
}

@media (min-width: 1200px) {
    .pf-side {
        margin: 56px 0 140px;
    }

    .pf-side__crumbs {
        margin-top: 56px;
    }

    .pf-side--under-crumbs {
        margin-top: 30px;
    }

    /* у страницы услуг нижний отступ до подвала свой */
    .pf-side--services {
        margin-bottom: 120px;
    }

    .pf-side__title {
        margin-top: 14px;
        font-size: var(--pf-h2-size);
        line-height: 56px;
    }
}

/* Форма справа - с 1366, как на странице парковки (parking.css): колонки делят
   ширину в пропорции макета, и уже форма сжимается до 350-400. Ниже формы нет,
   как в мобильном макете: «Забронировать» в шапке ведёт к форме главной */

@media (min-width: 1366px) {
    /* колонка контента из макета - 1000, форма 480, между ними 40 */
    .pf-side {
        display: grid;
        grid-template-columns: 1000fr 480fr;
        column-gap: 40px;
        align-items: start;
    }

    .pf-side__main {
        min-width: 0;
    }

    /* форма перекрывает контент: на странице услуги под неё уходит фото.
       При прокрутке колонка едет вниз под шапкой 126 с зазором 20. Форма выше
       окна прилипает низом, иначе кнопку не увидеть до конца страницы:
       высоту в --pf-sticky-height пишет js/header.js. Так же на странице парковки */
    .pf-side__aside {
        position: sticky;
        top: min(146px, calc(100vh - var(--pf-sticky-height, 0px) - 20px));
        z-index: 1;
        display: block;
        margin-top: -2px;
    }

    /* когда крошки вынесены наверх, поправка на их строку не нужна */
    .pf-side--under-crumbs .pf-side__aside {
        margin-top: 0;
    }
}

/* Невысокие экраны ноутбуков (1536x695), как первый экран главной (hero.css):
   крошки ближе к шапке, а форма страницы услуги поднимается к их строке - тогда
   она стоит, как на главной, на 20 под шапкой и влезает в окно целиком.
   Баннер под крошками дотягивается до её низа (service-page.css) */

@media (min-width: 1280px) and (max-height: 800px) {
    .pf-side__crumbs {
        margin-top: 20px;
    }

    .pf-side--under-crumbs {
        margin-top: 20px;
    }
}

@media (min-width: 1366px) and (max-height: 800px) {
    /* строка крошек 17 и отступ под ней 20 */
    .pf-side--under-crumbs .pf-side__aside {
        margin-top: -37px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/popup.css?17926557437563*/
/* Попапы: промо-новость, клубная карта и выбор схемы проезда. Это <dialog>, открытый через showModal():
   браузер сам ставит его по центру поверх страницы и держит фокус внутри. */

.pf-popup {
    /* поля до края экрана - как у мобильного макета; не --pf-gutter: на десктопе он 200 */
    flex-direction: column;
    gap: 20px;
    width: min(400px, 100% - 40px);
    max-width: none;
    max-height: calc(100% - 40px);
    padding: 25px;
    overflow-y: auto;
    /* белое окно на странице: в тёмной теме - плашка */
    background-color: var(--pf-color-raised);
    border: 0;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    color: var(--pf-color-text);
}

/* фокус браузер ставит на само окно при открытии - рамка вокруг попапа не нужна */
.pf-popup:focus {
    outline: none;
}

/* затемнение - «Текст» с прозрачностью 37%, как в макете */
.pf-popup::backdrop {
    background-color: var(--pf-color-overlay);
}

/* страница под открытым попапом не прокручивается */
.pf-body:has(.pf-popup[open]) {
    overflow: hidden;
}

/* закрытый dialog прячет сам браузер, открытому нужна своя раскладка */
.pf-popup[open] {
    display: flex;
}

.pf-popup__title {
    margin: 0;
    font-weight: var(--pf-h2-weight);
    line-height: normal;
}

.pf-popup p {
    margin: 0;
}

.pf-popup__button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0 30px;
    border: 2px solid var(--pf-color-text-accent);
    border-radius: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    text-align: center;
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

@media (hover: hover) {
    .pf-popup__button:hover {
        background-color: var(--pf-color-fill-active);
        color: var(--pf-color-on-active);
    }
}

.pf-popup__close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pf-color-text-accent);
    cursor: pointer;
}

.pf-popup__close svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Промо: картинка, заголовок, текст и кнопка на статью */

.pf-popup__pic {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 218px;
    object-fit: cover;
    border-radius: 20px;
}

.pf-popup__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-popup__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--pf-text-sm);
    line-height: normal;
}

.pf-popup--promo .pf-popup__title {
    font-size: var(--pf-h-mobile-size);
}

.pf-popup__text a {
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

/* крестик промо - в голубом круге поверх картинки */
.pf-popup--promo .pf-popup__close {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 15px;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 50%;
}

/* Клубная карта: список условий, кнопка на /club/ и карты, срезанные низом попапа */

.pf-popup--club {
    align-items: stretch;
    padding: 30px 30px 0;
}

.pf-popup--club .pf-popup__title,
.pf-popup--schemes .pf-popup__title {
    padding-right: 40px;
    font-size: var(--pf-h3-mobile-size);
}

.pf-popup__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--pf-text-sm);
    line-height: normal;
}

.pf-popup__list li {
    position: relative;
    min-height: 23px;
    padding-left: 33px;
}

.pf-popup__list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 23px;
    height: 23px;
    background: url("/bitrix/templates/adaptive/css/blocks/../../images/club/check.svg") no-repeat center / contain;
}

.pf-popup__note {
    padding: 10px 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 8px;
    font-size: var(--pf-text-sm);
    line-height: normal;
    text-align: center;
    color: var(--pf-color-text-accent);
}

.pf-popup__caption {
    font-size: var(--pf-text-sm);
    line-height: normal;
    text-align: center;
    color: var(--pf-color-text-muted);
}

.pf-popup__cards {
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: 298px;
    max-width: 100%;
    height: auto;
}

.pf-popup--club .pf-popup__close,
.pf-popup--schemes .pf-popup__close {
    top: 25px;
    right: 25px;
    width: 22px;
    height: 22px;
}

/* Выбор схемы проезда (страница парковки): заголовок и крестик как у клубной карты,
   под ними по кнопке на направление */

.pf-popup--schemes {
    align-items: stretch;
    padding: 30px;
}

@media (min-width: 768px) {
    .pf-popup {
        border-radius: 40px;
    }

    .pf-popup--promo {
        width: 657px;
        gap: 30px;
        padding: 30px;
    }

    .pf-popup--promo .pf-popup__pic {
        height: 316px;
    }

    .pf-popup__text {
        gap: 15px;
        font-size: 20px;
    }

    .pf-popup--promo .pf-popup__title {
        font-size: var(--pf-h2-size);
    }

    /* в десктопном макете кнопка промо крупнее и жирнее, чем у клубной карты */
    .pf-popup--promo .pf-popup__button {
        font-size: 20px;
        font-weight: 700;
    }

    .pf-popup--promo .pf-popup__close {
        width: 64px;
        height: 64px;
        padding: 20px;
    }

    .pf-popup--club {
        width: 514px;
    }

    .pf-popup--club .pf-popup__title,
    .pf-popup--schemes .pf-popup__title {
        font-size: var(--pf-h3-size);
    }

    .pf-popup--club :is(.pf-popup__list, .pf-popup__note, .pf-popup__caption) {
        font-size: var(--pf-text-lg);
    }

    .pf-popup--club .pf-popup__button,
    .pf-popup--schemes .pf-popup__button {
        font-size: var(--pf-btn-size);
    }

    .pf-popup__cards {
        width: 394px;
        margin-top: -5px;
    }
}

/* Тёмная тема: голубая плашка в окне - светлее окна, иначе сольётся с ним */
[data-theme="dark"] .pf-popup__note {
    background-color: var(--pf-color-surface-accent-hover);
}

/* галочки нарисованы синим, в тёмном макете они белые */
[data-theme="dark"] .pf-popup__list li::before {
    filter: brightness(0) invert(1);
}

/* поля карточек ниже 440 - одни на весь сайт, --pf-card-pad (base.css) */
@media (max-width: 439px) {
    .pf-popup {
        padding: var(--pf-card-pad);
    }
}

/* "Стоимость парковки без карты: 430 р/сут." в 14 на 360 шире попапа на 6 px -
   ниже 375 мельче, чтобы шла одной строкой */
@media (max-width: 374px) {
    .pf-popup__caption {
        font-size: 13px;
    }
}

/* End */


/* Start:/bitrix/components/niges/cookiesaccept/templates/.default/style.css?17377545583526*/
.nca-cookiesaccept-line {
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
    padding: 10px;
}

.nca-cookiesaccept-line-button {
//	width: 100%;
 //   padding-left: 5%;
 //   padding-right: 0 !important;
}

.nca-cookiesaccept-line-button button
{
    background-color: #00b956;
    height: 52px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    outline: none;
    overflow: hidden;
    padding: 0 32px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color .3s, color .3s;
    transition: background-color .3s, color .3s;
    vertical-align: top;
}



.nca-cookiesaccept-line.style-1 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-3 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-5 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-7 .nca-cookiesaccept-line-text {
    color:#111;
}
.nca-cookiesaccept-line.style-2 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-4 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-6 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-8 .nca-cookiesaccept-line-text {
    color:#eee;
}

.nca-cookiesaccept-line.style-1 {
    /* background-position: center;
    background-repeat: repeat-x;
	background-image: url(/bitrix/components/niges/cookiesaccept/templates/.default/images/style-1-2.svg);
    background-size: contain; */
    background-color: rgb(61, 168, 255); 
}

.nca-cookiesaccept-line.style-2 {
    background-color: rgb(13, 62, 102);
}


.nca-cookiesaccept-line.style-3 {
    background-color: rgb(197, 197, 197);
}

.nca-cookiesaccept-line.style-4 {
    background-color: rgb(71, 71, 71);
}

.nca-cookiesaccept-line.style-5 {
    background-color: rgb(61, 255, 158);
}

.nca-cookiesaccept-line.style-6 {
    background-color: rgb(9, 92, 50);
}

.nca-cookiesaccept-line.style-7 {
    background-color: rgb(84, 255, 61);
}

.nca-cookiesaccept-line.style-8 {
    background-color: rgb(92, 5, 5);
}

.nca-cookiesaccept-line.style-9 {
    background-color: rgb(203, 255, 61);
}

.nca-cookiesaccept-line.style-10 {
    background-color: rgb(70, 94, 4);
}

.nca-cookiesaccept-line.style-11 {
    background-color: rgb(255, 148, 61);
}

.nca-cookiesaccept-line.style-12 {
    background-color: rgb(138, 70, 14);
}

.nca-cookiesaccept-line.style-13 {
    background-color: rgb(255, 61, 61);
}

.nca-cookiesaccept-line.style-14 {
    background-color: rgb(119, 22, 22);
}

.nca-cookiesaccept-line.style-15 {
    background-color: rgb(255, 61, 152);
}

.nca-cookiesaccept-line.style-16 {
    background-color: rgb(85, 10, 45);
}

.nca-cookiesaccept-line.style-17 {
    background-color: rgb(83, 129, 255);
}

.nca-cookiesaccept-line.style-18 {
    background-color: rgb(6, 37, 122);
}

 
.nca-cookiesaccept-line.style-19 {
    background-color: rgb(255, 255, 255);
}

.nca-cookiesaccept-line.style-20 {
    background-color: rgb(0, 0, 0);
}
 

@media screen and (min-width:767.01px) {
	.nca-hidden-pc {display: none !important;}
}
@media screen and (max-width:767px) {
	.nca-hidden-mobile {display: none !important;}
}
/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/hero.css?17926557437565*/
/* Первый экран главной: баннер и форма брони.
   На десктопе форма наезжает на правый край баннера, как в макете. */

.pf-hero {
    display: grid;
    /* minmax нужен: иначе форма шириной 480 растянет колонку и порвёт мобильную */
    grid-template-columns: minmax(0, 1fr);
    /* в макете баннер начинается сразу под шапкой, отступ появляется на десктопе */
    margin: 2px 0 30px;
}

/* Расстояния между баннером, плитками и формой заданы отступами плиток:
   на мобильном они заходят на низ фотографии, как в макете. */

.pf-tiles {
    position: relative;
    margin: -56px 0 50px;
}

/* Баннер */

.pf-banner {
    position: relative;
    overflow: hidden;
    height: 374px;
    border-radius: 30px;
    /* фон - цветом страницы: под сглаженным краем скругления подложка просвечивает,
       и контрастный цвет даёт ободок. Белый текст до загрузки фото держит затемнение */
    background-color: var(--pf-color-bg);
    /* горизонтальный свайп листает кадры (js/banner.js), а не уводит браузер
       жестом "назад"; прокрутка страницы и масштаб остаются */
    touch-action: pan-y pinch-zoom;
}

/* Слайды лежат стопкой, видимый проявляется поверх остальных */

.pf-banner__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.pf-banner__slide--active {
    opacity: 1;
}

/* picture вокруг фото - только выбор файла, место в слайде занимает целиком */
.pf-banner__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pf-banner__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение под текстом: на мобильном сверху, на десктопе снизу */
.pf-banner__shade {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 247px;
    background-image: linear-gradient(to bottom, var(--pf-color-photo-shade) 19.5%, transparent 82.8%);
}

.pf-banner__body {
    position: absolute;
    top: 25px;
    right: 27px;
    left: 27px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* поля 27 из макета на 440 - на 360-375 велики, как у плиток (tiles.css) */
@media (max-width: 439px) {
    .pf-banner__body {
        right: var(--pf-card-pad);
        left: var(--pf-card-pad);
    }
}

.pf-banner__title {
    margin: 0;
    max-width: 330px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h1-weight);
    line-height: normal;
    color: var(--pf-color-on-accent);
}

.pf-banner__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-banner__fact {
    padding: 6px 14px;
    background-color: var(--pf-color-bg);
    border-radius: 30px;
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-accent);
    white-space: nowrap;
}

.pf-banner__fact b {
    font-weight: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .pf-banner__slide {
        transition: none;
    }
}

@media (min-width: 768px) {
    .pf-hero {
        margin-top: 53px;
    }

    .pf-tiles {
        margin: 58px 0 30px;
    }

    /* Пропорция из макета: на 1148 в ширину это ровно 615 в высоту */
    .pf-banner {
        height: auto;
        aspect-ratio: 1148 / 615;
        border-radius: 40px;
    }

    .pf-banner__shade {
        top: auto;
        bottom: 0;
        height: 373px;
        background-image: linear-gradient(to top, var(--pf-color-photo-shade) 19.5%, transparent 82.8%);
    }

    .pf-banner__body {
        top: auto;
        bottom: 56px;
        right: 40px;
        left: 40px;
        gap: 17px;
    }

    /* На десктопе плашки стоят над заголовком, на мобильном - под ним */
    .pf-banner__facts {
        order: -1;
    }

    .pf-banner__title {
        max-width: 905px;
        font-size: 40px;
        line-height: 1.232;
    }

}

/* Крупные плашки из макета встают в один ряд только на широком баннере */

@media (min-width: 1600px) {
    /* Полные размеры из макета: с этой ширины баннер их держит */
    .pf-banner__title {
        font-size: var(--pf-h1-size);
    }

    .pf-banner__facts {
        gap: 20px;
    }

    .pf-banner__fact {
        padding: 8px 18px;
        border-radius: 100px;
        font-size: var(--pf-text-lg);
        /* высота плашки в макете 38: 22 на строку плюс поля */
        line-height: 22px;
        font-weight: 400;
    }

    .pf-banner__fact b {
        font-weight: var(--pf-h1-weight);
    }

    /* плашки второго и третьего слайда в макете набраны целиком полужирным */
    .pf-banner__fact--solid {
        font-weight: var(--pf-btn-weight);
    }
}

/* Форма справа, баннер уходит под неё на 108 пикселей - как в макете */

@media (min-width: 1280px) {
    .pf-hero {
        grid-template-columns: minmax(0, 1fr) 480px;
    }

    /* Текст не должен заезжать под форму: она накрывает правые 108 пикселей.
       На 1920 это даёт под текст ровно 1000 - как в макете. */
    .pf-banner__body {
        right: 148px;
    }

    /* высоту в паре задаёт форма: пропорция оставила бы под баннером пустоту.
       Пропорцию при этом снимаем, иначе она сама посчитает ширину от высоты. */
    .pf-banner {
        grid-area: 1 / 1 / 2 / 3;
        height: 100%;
        aspect-ratio: auto;
        margin-right: 372px;
    }

    /* правая стрелка кадров (slides.css) - левее формы, как и текст */
    .pf-banner .pf-slides__arrow--next {
        right: 128px;
    }

    /* позиционируем: иначе баннер, у которого position, накроет форму */
    .pf-hero__form {
        position: relative;
        grid-area: 1 / 2 / 2 / 3;
    }

    .pf-tiles {
        grid-area: 2 / 1 / 3 / 3;
        margin: 58px 0 0;
    }
}

/* Невысокие экраны ноутбуков (1536x695 - 1920x1080 с масштабом 125% за вычетом
   панелей браузера): форма из макета в 617 не влезает под шапку, и первый экран
   обрезан. Форму ужимает booking.css, здесь - отступ сверху; баннер тянется за ней */

@media (min-width: 1280px) and (max-height: 800px) {
    .pf-hero {
        margin-top: 20px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/slides.css?17926557431759*/
/* Стрелки карусели фото: главная, парковка, услуга. Разметку вставляет
   js/banner.js. Только там, где есть мышь, и только при наведении на фото -
   на сенсорных экранах кадры листают свайпом */

.pf-slides__arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .pf-slides__arrow {
        position: absolute;
        /* над заголовком и подписями кадра, у заголовка услуги z-index 1 */
        z-index: 1;
        top: 50%;
        right: 20px;
        display: block;
        width: 45px;
        height: 45px;
        margin-top: -22px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .pf-slides__arrow--prev {
        right: auto;
        left: 20px;
        transform: rotate(180deg);
    }

    .pf-slides:hover .pf-slides__arrow,
    .pf-slides__arrow:focus-visible {
        opacity: 1;
    }

    .pf-slides:hover .pf-slides__arrow:hover {
        opacity: 0.8;
    }
}

/* круг белый в обеих темах, стрелка - цветом кнопки, как у стрелок преимуществ
   парковки: синяя, в тёмной теме #151515 */
.pf-slides__arrow {
    color: var(--pf-color-fill-accent);
}

.pf-slides__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .pf-slides__arrow {
    color: var(--pf-color-bg);
}

@media (prefers-reduced-motion: reduce) {
    .pf-slides__arrow {
        transition: none;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/tiles.css?179265574312151*/
/* Плитки парковок под баннером. Форма плитки - билет: скруглённый
   прямоугольник с двумя вырезами и пунктиром между ними. */

/* Раскладка на flex, а не на сетке: одинокая плитка в последнем ряду
   встаёт по центру, а не прижимается к левому краю. */

.pf-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.pf-tile {
    flex: 0 1 100%;
}

/* Три колонки включаем только там, где плитка остаётся шире 390: ниже этого
   нижний ряд не помещается в строку и кнопка уезжает вниз. Промежуточной
   раскладки в два столбца нет - до 1440 плитки идут одна под другой. */

@media (min-width: 1440px) {
    .pf-tiles {
        gap: 40px;
    }

    .pf-tile {
        flex-basis: calc((100% - 80px) / 3);
    }
}

.pf-tiles__sprite {
    display: none;
}

.pf-tile {
    position: relative;
    display: flex;
    /* иначе длинное название не даёт плитке сжаться до заданной ширины */
    min-width: 0;
    /* тень общая для обеих половин: box-shadow дал бы шов на стыке */
    filter: drop-shadow(0 0 28px rgba(0, 0, 0, 0.13));
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

/* Плитка склеена из двух половин со своими скруглениями: на стыке края
   сходятся навстречу и получается билетная перемычка - как в макете. */

.pf-tile__main {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    min-height: 132px;
    /* справа оставлено место под кнопку: до перемычки 22, дальше корешок */
    padding: 20px 22px 20px 27px;
    background-color: var(--pf-color-raised);
    border-radius: 20px;
}

.pf-tile__stub {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: 54px;
    background-color: var(--pf-color-raised);
    border-radius: 20px;
}

.pf-tile__perf {
    position: absolute;
    top: 18px;
    bottom: 18px;
    right: 53px;
    width: 2.5px;
    /* цвет переменной: темы и наведение меняют только его, шаг штрихов задаёт ширина */
    --pf-tile-perf: rgba(219, 230, 241, 0.78);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--pf-tile-perf) 0 6.5px,
        transparent 6.5px 13px
    );
}

/* Код аэропорта крупной подложкой */

/* Обе половины показывают одну надпись на одном месте, каждая режет свою
   часть - поэтому за перемычкой код продолжается без разрыва. */

.pf-tile__code {
    position: absolute;
    top: -32px;
    right: 8px;
    font-size: 100px;
    font-weight: 900;
    letter-spacing: -5px;
    line-height: normal;
    color: rgba(105, 149, 190, 0.15);
    opacity: 0.6;
}

.pf-tile__main .pf-tile__code {
    right: -46px;
}

/* Содержимое поднимаем над кодом аэропорта: он позиционирован,
   а позиционированное рисуется поверх обычного потока. */

.pf-tile__label,
.pf-tile__name,
.pf-tile__foot {
    position: relative;
}

.pf-tile__label {
    display: block;
    font-size: var(--pf-text-xs);
    line-height: normal;
}

.pf-tile__name {
    display: block;
    overflow: hidden;
    font-size: 28px;
    font-weight: var(--pf-h1-weight);
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Ниже 440 под многоточие уходили и "Домодедово": шрифт мельче (23 px на 360,
   21 на 320), название Шереметьево В-С до 360 в одну строку; ещё длиннее -
   переносится на вторую строку, плитка растёт */
@media (max-width: 439px) {
    /* поля 27/22 из макета на 440 - на 360-375 ряду с кнопкой не хватало места */
    .pf-tile__main {
        padding: var(--pf-card-pad) 12px var(--pf-card-pad) var(--pf-card-pad);
    }

    .pf-tile__name {
        font-size: clamp(20px, 6.5vw, 28px);
        line-height: 1.15;
        white-space: normal;
    }
}

/* Нижний ряд прижат к низу плитки. Если ширины не хватает, кнопка
   переносится на строку ниже, а плитка растёт - лучше, чем наложение. */

.pf-tile__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.pf-tile__price {
    padding: 7px 12px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 100px;
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-h1-weight);
    line-height: normal;
    white-space: nowrap;
}

.pf-tile__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* рисунок в круге - цветом фона страницы: белый в светлой теме, тёмный в тёмной */
/* рисунок лежит в спрайте, вне плитки: цвет приходит переменной через <use> */
.pf-tile__glyph {
    fill: var(--pf-tile-glyph, var(--pf-color-bg));
}

/* Кнопка стоит ближе к краю и к низу плитки, чем поля основной части */
.pf-tile__go {
    margin: 0 -7px -3px auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    background-color: var(--pf-color-fill-active);
    border-radius: 6px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-on-active);
    white-space: nowrap;
}

.pf-tile__arrow {
    width: 10px;
    height: 7px;
}

/* Ниже 440 нижний ряд плотнее, чтобы кнопка оставалась в одной строке с ценой */
@media (max-width: 439px) {
    .pf-tile__foot {
        gap: 4px;
    }

    .pf-tile__go {
        padding: 0 12px;
    }
}

/* Полные размеры из макета: с этой ширины плитка держит 480 */

@media (min-width: 1600px) {
    .pf-tile {
        filter: none;
    }

    .pf-tile__main {
        min-height: 158px;
        padding: 24px 12px 23px 33px;
        background-color: var(--pf-color-surface-accent-hover);
        border-radius: 18px;
    }

    .pf-tile__stub {
        width: 64px;
        background-color: var(--pf-color-surface-accent-hover);
        border-radius: 18px;
    }

    /* в макете линию обрезает форма плитки: в вырезах на стыке её нет */
    .pf-tile__perf {
        top: 18px;
        bottom: 18px;
        right: 64px;
        width: 3px;
        --pf-tile-perf: var(--pf-color-surface-accent);
        background-image: repeating-linear-gradient(
            to bottom,
            var(--pf-tile-perf) 0 8px,
            transparent 8px 16px
        );
    }

    .pf-tile__code {
        top: -36px;
        right: 7px;
        font-size: 120px;
        letter-spacing: -6px;
        color: var(--pf-color-surface-accent);
    }

    .pf-tile__main .pf-tile__code {
        right: -57px;
    }

    .pf-tile__label {
        font-size: var(--pf-text-md);
        /* в макете строка занимает 18: название начинается на 42 от верха */
        line-height: 18px;
    }

    .pf-tile__name {
        font-size: 35px;
    }

    .pf-tile__foot {
        gap: 6px;
    }

    .pf-tile__price {
        padding: 9px 14px;
        background-color: var(--pf-color-bg);
        font-size: var(--pf-text-md);
        /* высота плашки в макете 37: 19 на строку плюс поля */
        line-height: 19px;
    }

    .pf-tile__icon {
        width: 26px;
        height: 26px;
    }

    .pf-tile__go {
        gap: 7px;
        height: auto;
        padding: 9px 19px;
        background-color: var(--pf-color-bg);
        border-radius: 7px;
        font-size: var(--pf-text-lg);
        color: var(--pf-color-text-accent);
    }

    .pf-tile__arrow {
        width: 12px;
        height: 8px;
    }
}

/* Наведение: плитка заливается акцентом, кнопка становится зелёной. На любой
   ширине; только для устройств с мышью - на тач-экране hover залипает после тапа */

@media (hover: hover) {
    .pf-tile:hover {
        color: var(--pf-color-on-accent);
    }

    .pf-tile:hover .pf-tile__main,
    .pf-tile:hover .pf-tile__stub {
        background-color: var(--pf-color-fill-accent);
    }

    .pf-tile:hover .pf-tile__code {
        color: rgba(255, 255, 255, 0.15);
    }

    .pf-tile:hover .pf-tile__perf {
        --pf-tile-perf: var(--pf-color-surface-accent);
    }

    .pf-tile:hover .pf-tile__price {
        color: var(--pf-color-text-accent);
    }

    /* цвет кружка иконки в макете свой, в палитре его нет */
    .pf-tile:hover .pf-tile__icon {
        color: #4D76F9;
    }

    .pf-tile:hover .pf-tile__go {
        background-color: var(--pf-color-success);
        color: var(--pf-color-on-accent);
    }
}

/* Тёмная тема. Код аэропорта и перфорация на плитке в макете - серые #676767 / #575757,
   в переменных их нет; по наведению плитка синяя, кнопка на ней - белая */
[data-theme="dark"] .pf-tile__code {
    color: rgba(255, 255, 255, 0.15);
}

/* в мобильном тёмном макете перфорации нет, но плитка там та же - оставляем везде */
[data-theme="dark"] .pf-tile__perf {
    --pf-tile-perf: #575757;
}

@media (min-width: 1600px) {
    [data-theme="dark"] .pf-tile__code {
        color: #676767;
    }
}

@media (hover: hover) {
    [data-theme="dark"] .pf-tile:hover .pf-tile__code {
        color: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] .pf-tile:hover .pf-tile__perf {
        --pf-tile-perf: rgba(255, 255, 255, 0.2);
    }

    /* текст на белых плашках - цветом заливки плитки. Переменная считается на самой
       плитке, вне светлого островка, поэтому в плашки приходит синий, а не чёрный */
    [data-theme="dark"] .pf-tile:hover {
        --pf-tile-hover: var(--pf-color-fill-accent);
    }

    [data-theme="dark"] .pf-tile:hover .pf-tile__price {
        color: var(--pf-tile-hover);
    }

    [data-theme="dark"] .pf-tile:hover .pf-tile__go {
        background-color: var(--pf-color-fill-active);
        color: var(--pf-tile-hover);
    }
}

/* значки услуг: в тёмном макете белый круг с тёмным рисунком (это даёт общее правило:
   круг - цветом текста, рисунок - цветом фона), по наведению круг синий - рисунок белый */
@media (hover: hover) {
    [data-theme="dark"] .pf-tile:hover .pf-tile__icon {
        --pf-tile-glyph: #FFFFFF;
    }
}

/* промежутки между карточками ниже 440 - одни на весь сайт, --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-tiles {
        gap: var(--pf-card-gap);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/features.css?17926557434902*/
/* Блок «Почему нас выбирают». На мобильном - список строк с иконкой слева,
   на широком экране - сетка карточек с иконкой сверху и текстом внизу. */

.pf-features {
    margin: 71px 0 100px;
}

.pf-features__title {
    margin: 0 0 20px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-features__grid {
    display: grid;
    gap: 20px;
}

.pf-features__photo {
    width: 100%;
    height: 230px;
    object-fit: cover;
    /* кадр из макета: в широкой полосе автобус стоит ниже середины */
    object-position: center 82%;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
}

.pf-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 99px;
    padding: 10px 32px 10px 12px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
    color: inherit;
    text-decoration: none;
}

/* Наведение: карточка подсвечивается, как в блоке «Работать с нами» */

.pf-feature:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

.pf-feature__icon {
    flex-shrink: 0;
    object-fit: contain;
    width: 66px;
    height: 69px;
}

.pf-feature__title {
    margin: 0;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-feature__text {
    margin: 5px 0 0;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

/* Карточки из макета: иконка сверху справа, текст прижат к низу.
   Включаются сразу после мобильной раскладки, без промежуточных двух колонок.
   Ниже 1024 четыре карточки слишком узкие, там остаётся мобильный список */

@media (min-width: 1024px) {
    .pf-features__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px;
    }

    /* фотография занимает первую клетку второго ряда, остальные карточки
       расставляются автоматически и её клетку обходят */
    .pf-features__photo {
        grid-area: 2 / 1;
        height: 100%;
        object-position: center;
    }

    .pf-feature {
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0;
        min-height: 375px;
        padding: 18px 30px 30px;
    }

    .pf-feature__icon {
        width: 114px;
        height: 119px;
    }

    .pf-feature__body {
        width: 100%;
    }

    .pf-feature__title {
        font-size: var(--pf-h3-size);
        font-weight: var(--pf-h3-weight);
        line-height: 31px;
    }

    .pf-feature__text {
        margin-top: 10px;
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }
}

/* До 1200 четыре карточки узкие: промежутки и поля из макета съедают ширину,
   а длинные слова («Видеонаблюдение», «воспользоваться») не влезают в строку
   даже без них - их переносим по слогам. Короткие слова не трогаем: иначе
   браузер рвёт каждую строку */

@media (min-width: 1024px) and (max-width: 1199px) {
    .pf-features__grid {
        gap: 16px;
    }

    .pf-feature {
        padding: 16px 16px 20px;
    }

    .pf-feature__title,
    .pf-feature__text {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
    }
}

/* Заголовок дорастает до макетного позже сетки: он не зависит от ширины карточек */

@media (min-width: 1200px) {
    /* сверху блок стоит ближе к первому экрану, чем блоки друг к другу */
    .pf-features {
        margin: 86px 0 120px;
    }

    .pf-features__title {
        margin-bottom: 40px;
        font-size: var(--pf-h2-size);
    }
}

/* промежутки между карточками ниже 440 - одни на весь сайт, --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-features__grid {
        gap: var(--pf-card-gap);
    }
}

/* поля карточек ниже 440 - одни на весь сайт, --pf-card-pad (base.css) */
@media (max-width: 439px) {
    .pf-feature {
        padding: 10px var(--pf-card-pad) 10px 12px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/work.css?179265574312466*/
/* Блок «Работать с нами просто и удобно»: карточки с текстом слева
   и иллюстрацией, прижатой к нижнему правому углу. */

.pf-work {
    margin: 100px 0;
}

.pf-work__title {
    margin: 0 0 30px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-work__grid {
    display: grid;
    gap: 20px;
}

.pf-work__card {
    /* --pic: доля ширины карточки под иллюстрацию. От неё считаются и размер
       картинки, и предел текста. Держать их на одной величине обязательно:
       у текста проценты считаются от области внутри полей, у картинки -
       от всей карточки, и на промежуточных ширинах они разъезжаются. */
    --pic: 0.55;

    position: relative;
    overflow: hidden;
    min-height: 169px;
    padding: 20px 25px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
}

.pf-work__card--booking {
    --pic: 0.5425;
}

.pf-work__card--payment {
    --pic: 0.58;
}

.pf-work__card--luggage {
    --pic: 0.395;
}

.pf-work__card--shuttle {
    --pic: 0.5525;
}

/* Наведение: карточка подсвечивается, как в макете */

.pf-work__card:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

/* На мобильном ширины из макета заданы поштучно: заголовок обычно идёт
   во всю карточку, а текст обрывается по-своему у каждой карточки */

.pf-work__name {
    max-width: var(--name, none);
}

.pf-work__text {
    max-width: var(--text, none);
}

.pf-work__card--booking { --text: 160px; }
.pf-work__card--route { --text: 135px; }
.pf-work__card--payment { --text: 180px; }
.pf-work__card--luggage { --name: 242px; --text: 168px; }
.pf-work__card--shuttle { --text: 188px; }

.pf-work__name {
    position: relative;
    margin: 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-work__text {
    position: relative;
    margin: 10px 0 0;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

.pf-work__pic {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--pic) * 100%);
    height: auto;
}

/* единственная картинка, которая в макете не прижата к правому краю */
.pf-work__card--booking .pf-work__pic {
    width: 52.75%;
    right: 1.5%;
}

/* Чемоданы стоят во всю высоту карточки, но шире своей доли не растут:
   иначе на высокой карточке они наезжают на текст. */
.pf-work__card--luggage .pf-work__pic {
    width: auto;
    max-width: calc(var(--pic) * 100%);
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

/* Ниже 440 ширины текста из макета больше места слева от картинки, и она
   закрывает текст. Картинка уходит под текст, в правый нижний угол: picture
   растянута на всю карточку отрицательными полями, доля --pic та же */
@media (max-width: 439px) {
    /* поля 25 из макета на 440 - на 360-375 велики, как у плиток (tiles.css) */
    .pf-work__card {
        padding: var(--pf-card-pad);
    }

    .pf-work__name,
    .pf-work__text {
        max-width: none;
    }

    /* max-width из reset держал бы picture в ширине поля и не дал растянуться.
       Отрицательные поля - те же, что поля карточки */
    .pf-work__card picture {
        display: block;
        max-width: none;
        margin: 10px calc(-1 * var(--pf-card-pad)) calc(-1 * var(--pf-card-pad));
    }

    .pf-work__pic,
    .pf-work__card--luggage .pf-work__pic {
        position: static;
        display: block;
        width: calc(var(--pic) * 100%);
        max-width: none;
        height: auto;
        margin-left: auto;
    }

    .pf-work__card--booking .pf-work__pic {
        width: 52.75%;
        margin-right: 1.5%;
    }
}

/* Заголовок дорастает до макетного позже сетки: он не зависит от ширины карточек */

@media (min-width: 1200px) {
    .pf-work {
        margin: 120px 0;
    }

    .pf-work__title {
        margin-bottom: 40px;
        font-size: var(--pf-h2-size);
    }
}

/* Раскладка из макета: три колонки, «Трансфер» занимает две.
   Включается сразу после мобильной, без промежуточных двух колонок. */

@media (min-width: 768px) {
    .pf-work__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }

    /* --pad-x: боковое поле карточки, от него считаются пределы текста */
    .pf-work__card {
        --pad-x: 30px;

        min-height: 301px;
        padding: 18px var(--pad-x);
    }

    .pf-work__card--booking {
        --pic: 0.55;
    }

    .pf-work__card--route {
        --pic: 0.57;
    }

    .pf-work__card--payment {
        --pic: 0.75;
    }

    .pf-work__card--luggage {
        --pic: 0.477;
    }

    .pf-work__card--shuttle {
        --pic: 0.53;
        grid-column: span 2;
    }

    .pf-work__name,
    .pf-work__text {
        max-width: calc((100% + 2 * var(--pad-x)) * (1 - var(--pic)) - 12px);
    }

    .pf-work__card--luggage .pf-work__name {
        max-width: calc((100% + 2 * var(--pad-x)) * (1 - var(--pic)) - 12px);
    }

    .pf-work__name {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-work__text {
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }

    /* у «Оплаты» иллюстрация начинается ниже строк, текст идёт во всю ширину */
    .pf-work__card--payment .pf-work__text {
        max-width: 100%;
    }

    .pf-work__card--shuttle .pf-work__text {
        max-width: 41%;
    }

    .pf-work__card--booking .pf-work__pic {
        width: calc(var(--pic) * 100%);
        right: 0;
    }
}

/* Страница парковки: блок стоит в колонке 1000, поэтому карточки уже,
   а «Упаковка багажа» и «Трансфер» делят нижний ряд пополам - как в макете.
   Раскладка включается вместе с сеткой главной, сразу после мобильной. */

@media (min-width: 768px) {
    .pf-work--park .pf-work__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 40px;
    }

    /* под заголовком в этом макете воздуха меньше, чем на главной */
    .pf-work--park .pf-work__title {
        margin-bottom: 30px;
    }

    .pf-work--park .pf-work__card {
        grid-column: span 2;
        min-height: 301px;
        padding: 18px 30px;
    }

    .pf-work--park .pf-work__card--luggage,
    .pf-work--park .pf-work__card--shuttle {
        grid-column: span 3;
    }

    .pf-work--park .pf-work__name {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-work--park .pf-work__text {
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }

    /* Доли под иллюстрации и пределы текста здесь свои: карточки уже,
       чем на главной, и формула от одной доли на них не ложится. */

    .pf-work--park .pf-work__card--booking {
        --pic: 0.76;
    }

    .pf-work--park .pf-work__card--route {
        --pic: 0.79;
    }

    .pf-work--park .pf-work__card--payment {
        --pic: 1;
    }

    .pf-work--park .pf-work__card--luggage {
        --pic: 0.48;
    }

    .pf-work--park .pf-work__card--shuttle {
        --pic: 0.79;
    }

    /* в макете телефон стоит по центру карточки, а не у правого края */
    .pf-work--park .pf-work__card--booking .pf-work__pic {
        right: auto;
        left: 50%;
        width: 76%;
        transform: translateX(-50%);
    }

    /* чемоданы в макете ниже карточки, размер задаём по высоте */
    .pf-work--park .pf-work__card--luggage .pf-work__pic {
        height: 85%;
    }

    /* До 1600 формы сбоку нет и колонка шире 1000: доля --pic от широкой карточки
       раздувала иллюстрации, и они наезжали на текст. Растут не больше макета:
       --card - ширина карточки в колонке 1000, два шага сетки из шести или три.
       Чемоданы не трогаем: их размер задан высотой карточки, а она не меняется */
    .pf-work--park .pf-work__card {
        --card: 306.67px;
    }

    .pf-work--park .pf-work__card--luggage,
    .pf-work--park .pf-work__card--shuttle {
        --card: 480px;
    }

    .pf-work--park .pf-work__card:not(.pf-work__card--luggage) .pf-work__pic {
        width: min(calc(var(--pic) * 100%), calc(var(--pic) * var(--card)));
    }

    /* доли текста считаются от области внутри полей карточки, а не от неё самой */

    .pf-work--park .pf-work__name,
    .pf-work--park .pf-work__text {
        max-width: 100%;
    }

    .pf-work--park .pf-work__card--booking .pf-work__text {
        max-width: 91%;
    }

    .pf-work--park .pf-work__card--route .pf-work__text {
        max-width: 99%;
    }

    .pf-work--park .pf-work__card--luggage .pf-work__text {
        max-width: 53%;
    }

}

/* До 1200 промежутки и поля из макета съедают ширину карточек, и текст
   заходит под иллюстрации */
@media (min-width: 768px) and (max-width: 1199px) {
    .pf-work__grid,
    .pf-work--park .pf-work__grid {
        gap: 16px;
    }

    .pf-work__card,
    .pf-work--park .pf-work__card {
        --pad-x: 16px;

        padding: 16px var(--pad-x);
    }

    /* Иллюстрации здесь ниже, чем в макете: они сжимаются вместе с карточкой
       и не доходят до текста. Пределы текста из макета (под иллюстрацию во
       всю высоту) оставляли пустую половину карточки. На парковке пределы
       свои и заданы точнее, их не трогаем. Чемоданы стоят во всю высоту
       карточки - у них предел остаётся */
    .pf-work__card:not(.pf-work__card--luggage) .pf-work__name,
    .pf-work__card:not(.pf-work__card--luggage) .pf-work__text {
        max-width: none;
    }
}

/* Мобильная карточка на ширине до 768 растягивается, а с ней и картинка: доля
   --pic от широкой карточки раздувает иллюстрацию. Растёт не больше, чем
   в мобильном макете шириной 440 */
@media (min-width: 440px) and (max-width: 767px) {
    .pf-work__pic,
    .pf-work__card--luggage .pf-work__pic {
        width: calc(var(--pic) * 440px);
        max-width: none;
        height: auto;
    }

    .pf-work__card--booking .pf-work__pic {
        width: calc(0.5275 * 440px);
    }
}

/* промежутки между карточками ниже 440 - одни на весь сайт, --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-work__grid {
        gap: var(--pf-card-gap);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/card.css?17926557433285*/
/* Карточка списка: картинка, заголовок, текст, ссылка.
   Ширину задаёт сетка страницы, карточка тянется на всю ячейку. */

.pf-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
}

.pf-card:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

/* поля 20 из макета на 440 - на 360-375 велики, как у плиток (tiles.css) */
@media (max-width: 439px) {
    .pf-card {
        padding: var(--pf-card-pad);
    }
}

/* Высота картинки в макете постоянная, ширина резиновая.
   Фон виден, пока изображение грузится, и в карточках без него. */
.pf-card__image {
    width: 100%;
    height: 239px;
    margin-bottom: 20px;
    object-fit: cover;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 10px;
}

/* Межстрочный в макете «auto». Figma и Chrome округляют его по-разному:
   на 18px это 22 против 21, и карточка выходит на 3px ниже макетной.
   Поэтому держим значения из макета числами. */
.pf-card__title {
    margin: 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: 27px;
    color: var(--pf-color-text);
}

/* Текст есть не у каждой карточки, поэтому отступ задаём сверху */
.pf-card__text {
    margin: 10px 0 0;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

/* Ссылку прижимаем к низу: в ряду карточки одной высоты, ссылки выравниваются.
   Отступ даём padding-ом, margin здесь занят прижатием. */
.pf-card__more {
    margin-top: auto;
    padding-top: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: 19px;
    color: var(--pf-color-text-accent);
}

.pf-card:hover .pf-card__more {
    text-decoration: underline;
}

/* Узкая карточка: картинка ниже, заголовок в размер основного текста */

.pf-card--narrow .pf-card__image {
    height: 170px;
}

/* У узкой карточки заголовок в размер основного текста и на обеих ширинах одинаков */
.pf-card--narrow .pf-card__title {
    font-size: var(--pf-text-lg);
    line-height: 22px;
}

/* Крупные размеры включаем только на десктопе: до него карточка
   везде узкая - и в ленте новостей, и в сетке списка */
@media (min-width: 1200px) {
    .pf-card {
        padding: 30px;
    }

    .pf-card__title {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-card__text,
    .pf-card__more {
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/news.css?17926557434604*/
/* Блок «Новости компании»: заголовок со ссылкой на весь список
   и карточки из общего компонента. На мобильном лента листается вбок. */

.pf-news {
    margin: 100px 0;
}

.pf-news__head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px 10px;
    margin-bottom: 30px;
}

.pf-news__title {
    /* на узком экране заголовок переносится, ссылка остаётся на его линии.
       Если рядом со ссылкой не влезает даже самое длинное слово (ниже ~360),
       ссылка уходит под заголовок: строку ломает min-width, а не основа 0 */
    flex: 1 1 0;
    min-width: min-content;
    margin: 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-news__all {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-accent);
    text-decoration: none;
    white-space: nowrap;
}

.pf-news__all:hover {
    text-decoration: underline;
}

/* Обводка стрелки выходит за линию на 1px с каждой стороны,
   поэтому в строке она занимает макетные 22px */
.pf-news__arrow {
    width: 24px;
    height: 15px;
    margin: 0 -1px;
}

/* Лента: карточки шире экрана и листаются пальцем */

.pf-news__grid {
    display: grid;
    grid-auto-flow: column;
    /* в макете на 440 из-за края выглядывает 35 px следующей карточки;
       на экране уже карточка сужается, чтобы край соседней оставался виден */
    grid-auto-columns: min(355px, calc(100vw - var(--pf-gutter) - 65px));
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* поля контейнера, чтобы крайние карточки не липли к краю экрана */
    margin: 0 calc(-1 * var(--pf-gutter));
    padding: 0 var(--pf-gutter);
    /* без этого снап тянет первую карточку за padding, к самому краю экрана */
    scroll-padding-inline: var(--pf-gutter);
    scrollbar-width: none;
}

.pf-news__grid::-webkit-scrollbar {
    display: none;
}

.pf-news__grid .pf-card {
    scroll-snap-align: start;
}

/* картинка сужается вместе с карточкой и держит макетную пропорцию 315 на 239 */
@media (max-width: 439px) {
    .pf-news__grid .pf-card__image {
        height: auto;
        aspect-ratio: 315 / 239;
    }
}

@media (min-width: 1200px) {
    .pf-news {
        margin: 120px 0;
    }

    .pf-news__title {
        font-size: var(--pf-h2-size);
    }

    .pf-news__all {
        font-size: var(--pf-text-lg);
    }

    /* карточка новостей на главной крупнее карточки списка */
    .pf-news .pf-card {
        border-radius: 25px;
    }

    .pf-news .pf-card__image {
        height: 224px;
    }

    .pf-news .pf-card__more {
        padding-top: 21px;
    }

    /* на широком экране лента превращается в обычную сетку */
    .pf-news__grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}

/* Страница парковки: блок стоит в колонке 1000, карточки уже главной -
   картинка ниже и зазор между карточками меньше, как в макете. На мобильном
   макеты главной и парковки совпадают, поэтому модификатор только здесь. */

@media (min-width: 1280px) {
    .pf-news--park .pf-news__grid {
        gap: 30px;
    }

    .pf-news--park .pf-card__image {
        height: 147px;
    }
}

/* промежутки между карточками ниже 440 - одни на весь сайт, --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-news__grid {
        gap: var(--pf-card-gap);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/about.css?17926557437492*/
/* Блок «Park&Fly - удобный сервис для Вас»: голубая плашка с текстом,
   счётчиком клиентов и белой карточкой. */

.pf-about {
    margin: 100px 0;
    padding: 28px 22px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
}

.pf-about__title {
    max-width: 316px;
    margin: 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: 34px;
    color: var(--pf-color-text);
}

/* Линию рисуем отдельным элементом: на мобильном она идёт слева от всего
   блока, на десктопе делит тексты на две колонки */
.pf-about__body {
    position: relative;
    margin-top: 11px;
    padding-left: 34px;
}

/* Линия тянется по всей высоте блока и выходит за него сверху и снизу */
.pf-about__line {
    position: absolute;
    top: -11px;
    bottom: -4px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .7) 0%,
        rgba(44, 94, 255, .7) 50.48%,
        rgba(255, 255, 255, .7) 100%);
    border-radius: 100px;
}

.pf-about__lead {
    max-width: 301px;
    margin: 0 0 20px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

/* Цифры набраны средним начертанием - в токенах такого размера нет,
   он встречается только в этом блоке */
.pf-about__count {
    margin: 0;
    font-size: 58px;
    font-weight: 500;
    line-height: 70px;
    color: var(--pf-color-text-accent);
}

/* Подпись заходит на строку с числом: в макете их боксы перекрыты */
.pf-about__clients {
    margin: -7px 0 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: 500;
    line-height: 27px;
    color: var(--pf-color-text-accent);
}

.pf-about__card {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    padding: 26px 24px 35px;
    background-color: var(--pf-color-raised-2);
    border-radius: 15px;
}

.pf-about__note {
    max-width: 231px;
    margin: 0 0 24px 7px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-accent);
}

/* Своя строка: у числа и подписи общая базовая линия */
.pf-about__years {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 9px 0 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: 500;
    line-height: 27px;
    color: var(--pf-color-text-accent);
}

/* На планшете плашка широкая: тексты и примечания расходятся
   на две колонки, иначе справа остаётся пустое поле */
@media (min-width: 768px) {
    .pf-about {
        padding: 40px;
    }

    .pf-about__title {
        max-width: none;
    }

    .pf-about__body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 57px;
    }

    .pf-about__lead {
        max-width: none;
        margin: 0;
    }

    .pf-about__body .pf-about__count {
        grid-column: 1 / -1;
        margin-top: 20px;
    }

    .pf-about__clients {
        grid-column: 1 / -1;
    }

    .pf-about__card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 57px;
        padding: 26px 24px 32px;
    }

    .pf-about__note {
        max-width: none;
        margin: 0 0 0 7px;
    }

    .pf-about__years {
        grid-column: 1 / -1;
        margin-top: 33px;
    }
}

/* Пока плашка узкая, тексты идут одной колонкой с линией слева,
   а цифры остаются мелкими: 96px в такую колонку не помещается */
@media (min-width: 1200px) {
    /* Карточку кладём поверх плашки: в макете она выше её верхнего поля
       и ниже нижнего, а высоту блока задаёт левая колонка */
    .pf-about {
        position: relative;
        /* карточка вне потока, поэтому высоту под неё держим сами:
           44 сверху + 493 карточки + 45 снизу */
        min-height: 582px;
        margin: 120px 0;
        padding: 60px 677px 51px 60px;
        border-radius: 30px;
    }

    .pf-about__title {
        max-width: 527px;
        font-size: var(--pf-h2-size);
        line-height: 56px;
    }

    .pf-about__body {
        display: block;
        margin-top: 12px;
    }

    .pf-about__line {
        width: 3px;
        border-radius: 13px;
    }

    .pf-about__lead {
        max-width: none;
        margin: 0 0 20px;
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }

    .pf-about__card {
        position: absolute;
        display: flex;
        top: 44px;
        right: 60px;
        width: 491px;
        height: 493px;
        margin-top: 0;
        padding: 55px 45px 32px;
        border-radius: 25px;
    }

    .pf-about__note {
        max-width: 301px;
        margin: 0 0 40px 12px;
        grid-column: auto;
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }

    .pf-about__years {
        margin-top: auto;
        font-size: 35px;
        line-height: 42px;
    }

    .pf-about__years .pf-about__count {
        font-size: 96px;
        line-height: 116px;
    }
}

@media (min-width: 1440px) {
    /* Колонки заданы долями от макетных ширин: на 1520 это ровно 332 и 394,
       на экранах уже они сжимаются вместе с плашкой */
    .pf-about__body {
        display: grid;
        grid-template-columns: 332fr 394fr;
        column-gap: 57px;
        padding-left: 0;
    }

    /* Линия встаёт посреди зазора колонок и идёт вровень с текстом */
    .pf-about__line {
        top: -5px;
        bottom: auto;
        left: calc((100% - 57px) * 332 / 726 + 27px);
        height: 112px;
    }

    .pf-about__lead {
        margin: 0;
    }

    /* Счётчик шире колонки с текстом, поэтому занимает обе */
    .pf-about__body .pf-about__count {
        grid-column: 1 / -1;
        margin-top: 114px;
    }

    .pf-about__count {
        font-size: 96px;
        line-height: 116px;
    }

    .pf-about__clients {
        grid-column: 1 / -1;
        margin-top: -17px;
        font-size: 38px;
        line-height: 46px;
    }
}

/* Тёмная тема: середина линии в макете тёмно-серая вместо синей (в мобильном
   тёмном макете осталась синей - берём десктопный вариант) */
[data-theme="dark"] .pf-about__line {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .7) 0%,
        rgba(57, 57, 57, .7) 50.48%,
        rgba(255, 255, 255, .7) 100%);
}

/* поля карточек ниже 440 - одни на весь сайт, --pf-card-pad (base.css) */
@media (max-width: 439px) {
    .pf-about {
        padding: var(--pf-card-pad);
    }

    .pf-about__card {
        padding: var(--pf-card-pad);
    }
}

/* End */
/* /bitrix/templates/adaptive/css/tokens.css?17926557437594 */
/* /bitrix/templates/adaptive/css/fonts.css?17926557431706 */
/* /bitrix/templates/adaptive/css/vendor/modern-normalize.css?17926557433338 */
/* /bitrix/templates/adaptive/css/reset.css?17926557431117 */
/* /bitrix/templates/adaptive/css/base.css?17926557434952 */
/* /bitrix/templates/adaptive/css/blocks/controls.css?17926557434269 */
/* /bitrix/templates/adaptive/css/blocks/select.css?17926557433115 */
/* /bitrix/templates/adaptive/css/blocks/header.css?179265574311730 */
/* /bitrix/templates/adaptive/css/blocks/footer.css?17926557436253 */
/* /bitrix/templates/adaptive/css/blocks/tabbar.css?17926557433831 */
/* /bitrix/templates/adaptive/css/blocks/booking.css?17926557439673 */
/* /bitrix/templates/adaptive/css/blocks/breadcrumbs.css?1792655743572 */
/* /bitrix/templates/adaptive/css/blocks/layout.css?17926557433822 */
/* /bitrix/templates/adaptive/css/blocks/popup.css?17926557437563 */
/* /bitrix/components/niges/cookiesaccept/templates/.default/style.css?17377545583526 */
/* /bitrix/templates/adaptive/css/blocks/hero.css?17926557437565 */
/* /bitrix/templates/adaptive/css/blocks/slides.css?17926557431759 */
/* /bitrix/templates/adaptive/css/blocks/tiles.css?179265574312151 */
/* /bitrix/templates/adaptive/css/blocks/features.css?17926557434902 */
/* /bitrix/templates/adaptive/css/blocks/work.css?179265574312466 */
/* /bitrix/templates/adaptive/css/blocks/card.css?17926557433285 */
/* /bitrix/templates/adaptive/css/blocks/news.css?17926557434604 */
/* /bitrix/templates/adaptive/css/blocks/about.css?17926557437492 */