/**
 * Главная TT Travel.
 *
 * Палитра снята с живого сайта: тёмно-зелёный #092e2e (шапка, футер, карточки),
 * песочный #FEE0AE (круги и кнопки), кремовый #FFF7EB, фон #F7F9FB.
 * Шрифт Source Sans Pro, он же в родительской теме.
 *
 * Фирменные цвета и тексты не меняются. Здесь только оформление: единая шкала
 * отступов, тени с зелёным подтоном вместо серых, состояния наведения и фокуса.
 */

/* Токены живут на :root, а не на .tt-home, потому что ими красится ещё и шапка,
   а она лежит выше по дереву. Файл грузится только на главной, так что за её
   пределы это не выходит. */
:root {
	--tt-green: #092e2e;
	--tt-green-2: #0f4a4a;
	--tt-sand: #fee0ae;
	--tt-sand-2: #fbd291;
	--tt-cream: #fff7eb;
	--tt-bg: #f7f9fb;
	--tt-text: #363636;
	--tt-mute: #4a5a5a;

	/* Служебный серый был #6b7a7a: 4.24:1 на фоне, ниже порога AA для мелкого
	   текста. Затемнён до 5.2:1. Это не фирменный цвет, а подпись. */
	--tt-lbl: #5d6c6c;

	--tt-line: #dfe5e5;
	--tt-line-soft: rgba(9, 46, 46, 0.08);

	--tt-radius: 24px;
	--tt-radius-sm: 12px;

	/* Тени с зелёным подтоном: серые на кремовом фоне выглядят грязными. */
	--tt-shadow-sm: 0 1px 2px rgba(9, 46, 46, 0.05), 0 2px 8px rgba(9, 46, 46, 0.05);
	--tt-shadow-md: 0 2px 4px rgba(9, 46, 46, 0.05), 0 12px 28px rgba(9, 46, 46, 0.09);
	--tt-shadow-lg: 0 4px 10px rgba(9, 46, 46, 0.08), 0 28px 64px rgba(9, 46, 46, 0.18);

	/* Один вертикальный ритм на все секции. */
	--tt-sec: 56px;
	--tt-gap: 16px;

	/* Высота шапки. Ею же считается верхний отступ героя, поэтому заголовок
	   физически не может уехать под меню: значение одно на оба места. */
	--tt-header: 64px;

	/* Ширина колонки контента, включая боковые поля .tt-wrap. Одна ручка на всю
	   страницу: по ней считаются и `.content .container`, и внутренний блок
	   обложки героя, и боковые поля шапки. Тема держала 1156px. */
	/* Колонка контента. Секции тянутся во всю ширину окна и красят фон от края
	   до края, а текст и формы внутри не шире этого значения. 1156px — родная
	   ширина `.container` темы, поэтому шапка и внутренние страницы совпадают
	   с главной без отдельных правок. */
	--tt-max: 1156px;

	/* Красный только для ошибок: в палитре сайта своего нет. */
	--tt-error: #b3261e;

	--tt-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

@media (min-width: 900px) {
	:root { --tt-header: 84px; }
}

.tt-home {
	background: var(--tt-bg);
	color: var(--tt-text);
	font-family: "Source Sans Pro", "Source Sans 3", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
	:root {
		--tt-sec: 96px;
		--tt-gap: 24px;
	}
}

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

.tt-home img { max-width: 100%; }

.tt-wrap {
	/* Своих полей нет: ширину держит сам контейнер, поэтому фон секции идёт от
	   края до края, а контент стоит ровно в колонке. На узком экране 20px с
	   каждой стороны берутся из той же формулы, отдельного паддинга не нужно. */
	width: min(100% - 40px, var(--tt-max));
	margin-inline: auto;
	padding-inline: 0;
}

/* Общее кольцо фокуса: без него по табу не видно, где находишься. */
.tt-home a:focus-visible,
.tt-home button:focus-visible,
.tt-home summary:focus-visible,
.tt-home input:focus-visible,
.tt-home select:focus-visible,
.tt-home textarea:focus-visible {
	outline: 2px solid var(--tt-green);
	outline-offset: 3px;
	border-radius: 4px;
}

.tt-contact a:focus-visible,
.tt-card a:focus-visible,
.tt-step--dark a:focus-visible { outline-color: var(--tt-sand); }

/* Список наведений перечислен поимённо: правило вида *:hover { transform: none }
   сбивало бы и центрирующий translateX(-50%) у картинки в карточке. */
@media (prefers-reduced-motion: reduce) {
	.tt-home *,
	.tt-home *::before,
	.tt-home *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.tt-home .tt-link:hover,
	.tt-home .tt-btn--accent:hover,
	.tt-home .tt-card:hover,
	.tt-home .tt-card__link:hover,
	.tt-home .tt-dest__row:hover .tt-dest__arrow,
	.tt-home .gform_footer input[type="submit"]:hover,
	.tt-home .gform_footer .gform_button:hover { transform: none !important; }
}

/* ---------- типографика ---------- */

.tt-h1 {
	margin: 0;
	color: var(--tt-green);
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tt-h2 {
	margin: 0;
	color: var(--tt-green);
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.tt-h2--light { color: #fff; }

.tt-lead {
	margin: 12px 0 0;
	color: var(--tt-mute);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.6;
	max-width: 58ch;
}

.tt-lbl {
	display: block;
	color: var(--tt-lbl);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tt-lbl--light { color: rgba(255, 255, 255, 0.62); }

/* Ссылка-«всё остальное» в шапке секции: стрелка едет вправо при наведении.
   Своего align-self нет намеренно: в шапке секции её ровняет по низу
   родительский align-items: flex-end. */
.tt-link {
	display: inline-flex;
	align-items: center;
	color: var(--tt-green);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s var(--tt-ease), color 0.18s var(--tt-ease);
}

.tt-link:hover {
	color: var(--tt-green-2);
	transform: translateX(3px);
}

.tt-pill {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--tt-green);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--tt-radius-sm);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s var(--tt-ease), transform 0.18s var(--tt-ease),
		box-shadow 0.18s var(--tt-ease);
}

.tt-btn--accent {
	background: var(--tt-sand);
	color: var(--tt-green);
	box-shadow: var(--tt-shadow-sm);
}

.tt-btn--accent:hover {
	background: var(--tt-sand-2);
	transform: translateY(-2px);
	box-shadow: var(--tt-shadow-md);
}

.tt-btn--accent:active { transform: translateY(0); }

/* круглый вырез: песочный круг под фигурой */
.tt-circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--tt-sand);
}

/* ---------- шапка ---------- */

/* Родительская тема собирает шапку на главной в две строки: сверху полоса
   контактов `.navbar`, под ней логотип с меню. Плюс `.home .header` там
   прозрачная. Поверх фотографии это читалось как мешанина, а сама шапка
   выглядела пропавшей. Здесь она собирается в одну строку и получает фон.
   Файл грузится только на главной, остальных страниц правки не касаются. */

.home .header {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--tt-header);
	/* Логотип встаёт на ту же вертикаль, что и контент секций ниже. */
	padding-inline: calc((100% - min(100%, var(--tt-max))) / 2);
	/* Полупрозрачное стекло: фотография героя и секции ниже слегка просвечивают.
	   0.72 — предел, при котором белый текст держит 6:1 даже когда под шапкой
	   проезжает светлая секция.
	   На мобильном стекла не будет: тема заливает шапку наглухо правилом
	   `.has-navbar.menu-header-right.menu-header-left-mobile .header
	    { background: var(--font-color-dark) !important }`, а оно и специфичнее,
	   и с !important. Не воюем: на узком экране сплошной фон читается лучше. */
	background: rgba(9, 46, 46, 0.72);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 900px) {
	.home .header { padding-inline: calc((100% - min(100%, var(--tt-max))) / 2); }
}

/* На десктопе высота шапки ровно `--tt-header`. Ниже 768px тема сбрасывает её
   правилом `@media (max-width:768px) { .header { min-height: auto !important } }`,
   и шапка ужимается по содержимому — примерно до 59px при заявленных 64px.
   Ломать это ещё одним !important незачем: важно только, чтобы реальная шапка
   была не выше зарезервированного отступа героя, а она ниже. */
.home.sticky-header .header { min-height: var(--tt-header); }

/* У темы поверх шапки лежит ещё и затемняющий слой. Фон теперь свой. */
.home .header::before { display: none; }

/* Логотип и меню лежат в .container, контакты — в .navbar. Меняем им порядок,
   чтобы получилось «логотип — меню — контакты» в одну линию. */
.home .header > .container {
	order: 1;
	flex: 1 1 auto;
	max-width: none;
	min-height: 0;
	padding: 0;
	align-items: center;
}

/* У полосы контактов от прежней двухрядной вёрстки остался
   `align-self: flex-start`, из-за него она липла к верхнему краю. */
.home .header > .navbar {
	order: 2;
	flex: none;
	align-self: center;
	width: auto;
	min-height: 0;
	padding: 0;
	background: transparent;
}

.home .header > .navbar .container,
.home .header > .navbar .sidebar {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Контакты на узком экране не помещаются в строку. Они никуда не пропадают:
   те же адрес и телефон есть в секции контактов и в подвале. */
@media (max-width: 899px) {
	.home .header > .navbar { display: none; }
}

.home .header .site-branding {
	flex: none;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
}

.home .header .custom-logo-link {
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
}

.home .header .custom-logo-link img {
	width: auto;
	height: calc(var(--tt-header) - 26px);
	max-height: none;
}

.home .header .menu-container {
	width: auto;
	margin-left: auto;
	background: transparent;
}

.home .header .menu-container > .container {
	max-width: none;
	padding: 0;
}

.home .header .main-menu-content,
.home .header .main-menu-content > ul {
	min-height: 0;
}

.home .header .main-menu-content a,
.home .header .sidebar-navbar a {
	color: #fff;
	text-decoration: none;
}

.home .header .main-menu-content a:hover,
.home .header .sidebar-navbar a:hover { color: var(--tt-sand); }

/* «Our Services» — единственный пункт с подменю, и тема вешает рядом с ним
   `<span class="menu-caret">` со стрелкой вниз. Из-за стрелки пункт читался как
   выпадающий список. Оформляем кнопкой, стрелку убираем.
   Подменю от этого не пропадает: на десктопе оно по-прежнему раскрывается
   наведением, а сама ссылка ведёт на страницу услуг. */
.home .header .main-menu-content > ul > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	padding: 9px 20px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	transition: background 0.18s var(--tt-ease), border-color 0.18s var(--tt-ease),
		color 0.18s var(--tt-ease);
}

.home .header .main-menu-content > ul > li.menu-item-has-children > a:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.home .header .main-menu-content > ul > li.menu-item-has-children > .menu-caret {
	display: none;
}

.home .header .sidebar-navbar {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
}

.home .header .sidebar-navbar p { margin: 0; }

/* Пустые боковые области сетки в одну строку не нужны. */
.home .header .sidebar-wrapper.empty { display: none; }

/* ---------- ширина колонки ---------- */

/* Родной `.container` темы шириной 1156px зажимал и сами секции, поэтому их
   фоны не доходили до краёв окна. Снимаем с него ограничение целиком: ширину
   контента держит `.tt-wrap` внутри, а секция красит фон от края до края. */
.home .content .container {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

/* ---------- герой ---------- */

/* Обложка блока идёт во всю ширину сама, своими отрицательными полями.
   Поэтому у секции полей нет: иначе сверху и снизу фотографии остаются
   кремовые полосы, которых никто не задумывал. */
.tt-hero {
	background: var(--tt-cream);
	padding: 0;
}

/* ---------- герой: родной блок cwc-tabs, только оформление ---------- */
/* Разметку блока и форм не трогаем. Здесь только цвет, отступы и типографика. */

/* Верхний отступ обложки — это зазор под шапку, и промахнуться тут легко.
   Шапка `position: fixed`, а `.content` её не компенсирует: там `padding-top: 0`.
   Раньше высоту шапки задавала тема, и подходящий отступ приходилось угадывать.
   Теперь высота наша, `--tt-header`, и отступ считается из неё же — значение
   одно на оба места, разъехаться они физически не могут. */
.tt-home .tt-hero .wp-block-cover.block-one {
	display: flex;
	align-items: center;
	min-height: min(78vh, 700px);
	padding-top: calc(var(--tt-header) + clamp(32px, 6vh, 72px));
	padding-bottom: clamp(40px, 6vh, 88px);
	/* Боковые поля переносим на внутренний блок, чтобы вся горизонтальная
	   раскладка героя считалась в одном месте. На десктопе у обложки их и так
	   нет, а на мобильном 16px, и из-за них герой был у́же секций. */
	padding-inline: 0;
	/* Блоку обложки WordPress ставит overflow: hidden. Календарь и списки в
	   форме открываются вниз и упирались в нижний край. Прятать тут нечего:
	   фон это background, за рамку он не выходит. */
	overflow: visible;
}

/* Затемнение обложки было нейтрально-чёрным. Меняем на фирменный зелёный
   градиент: сверху плотнее, чтобы заголовок читался на любом кадре. */
.tt-home .tt-hero .wp-block-cover.block-one::before {
	background: linear-gradient(
		180deg,
		rgba(9, 46, 46, 0.78) 0%,
		rgba(9, 46, 46, 0.6) 42%,
		rgba(9, 46, 46, 0.72) 100%
	);
	opacity: 1;
}

/* Контент героя выравниваем по той же сетке, что и остальные секции.
   Считать приходится в два слагаемых. Секции лежат внутри `.content .container`,
   а у него боковые поля в половину `--gutter` (36px, то есть по 18px). Обложка
   идёт во всю ширину и в контейнер не попадает, поэтому её собственные поля
   должны включить и половину gutter, и отступ самого `.tt-wrap`. Иначе форма
   в герое на 18px шире контента ниже. */
.tt-home .tt-hero .wp-block-cover.block-one .wp-block-cover__inner-container {
	width: min(100% - 40px, var(--tt-max));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Внутри у блока вкладок свой лимит в 1156px, и форма выходила у́же колонки.
   Ширину задаёт обложка выше, тут ограничивать больше нечем. */
.tt-home .tt-hero .cwc-tabs .wp-block-group__inner-container { max-width: none; }

@media (min-width: 900px) {
	.tt-home .tt-hero .wp-block-cover.block-one .wp-block-cover__inner-container {
		padding-inline: calc(40px + var(--gutter, 36px) / 2);
	}
}

/* Заголовок был тёмно-зелёным поверх затемнённой фотографии: 1.4:1.
   Белый по зелёному градиенту даёт больше 12:1. */
.tt-hero .cwc-tabs h1,
.tt-hero h1 {
	color: #fff;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	text-wrap: balance;
	max-width: 19ch;
	margin: 0 auto clamp(28px, 4vh, 44px);
	text-shadow: 0 1px 2px rgba(9, 46, 46, 0.4);
}

/* Полоса вкладок */
.tt-hero .cwc-tabs .wp-block-columns:first-of-type,
.tt-hero .cwc-tabs .tabs-nav {
	gap: 8px;
}

.tt-hero .cwc-tabs .tab {
	margin: 0;
}

.tt-hero .cwc-tabs .tab a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--tt-radius-sm);
	background: #f2f5f5;
	color: var(--tt-lbl);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s var(--tt-ease), color 0.15s var(--tt-ease);
}

.tt-hero .cwc-tabs .tab a:hover {
	background: #e8eded;
	color: var(--tt-green);
}

.tt-hero .cwc-tabs .tab.active a,
.tt-hero .cwc-tabs .tab a.active {
	background: var(--tt-green);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}

/* Белая подложка только под полями.
   Сама обложка-панель остаётся прозрачной — родительская тема и так гасит её
   через `.widget-airport-2.has-white-background-color { background-color:
   transparent !important }`, и это теперь то, что нужно: белым красится
   `.gform_body`, то есть ровно рамка с полями. Кнопка отправки лежит в
   `.gform_footer` следом и оказывается снаружи белого, прямо на фотографии. */
.tt-hero .cwc-tabs .wp-block-cover.widget-airport-2,
.tt-hero .cwc-tabs .has-white-background-color {
	/* У панели класс `.is-padding`, а инлайновые стили WordPress задают ему
	   `padding: 1.2em !important`. Из-за этих 19px белая рамка и кнопка были
	   у́же колонки контента. Отступы теперь у `.gform_body`, здесь их нет. */
	padding: 0 !important;
	border-radius: 0;
	box-shadow: none;
}

.tt-home .tt-hero .gform_wrapper .gform_body {
	padding: 16px;
	border-radius: var(--tt-radius);
	background: #fff;
	box-shadow: var(--tt-shadow-lg);
}

.tt-hero .cwc-tabs .wp-block-cover.widget-airport-2::before,
.tt-hero .cwc-tabs .has-white-background-color::before {
	display: none;
}

/* Панель обложки — flex-контейнер с центрированием, её внутренний блок
   сжимается по содержимому. Полям Gravity ширина задана в процентах, поэтому
   «по содержимому» выходило у́же самой панели, и на узком экране форма
   съезжала в середину узкой колонкой. Фиксируем на всю ширину. */
.tt-home .tt-hero .cwc-tabs .widget-airport-2 > .wp-block-cover__inner-container,
.tt-home .tt-hero .cwc-tabs .widget-airport-2 .wp-block-group,
.tt-home .tt-hero .cwc-tabs .widget-airport-2 .wp-block-group__inner-container,
.tt-home .tt-hero .gform_wrapper,
.tt-home .tt-hero .gform_wrapper form { width: 100%; }

/* И свои отступы у него тоже есть — 32px поверх отступов самой панели. На
   узком экране форме оставалось 209px из 311. Поля панели задаём мы, здесь
   лишнее убираем. */
.tt-home .tt-hero .cwc-tabs .widget-airport-2 > .wp-block-cover__inner-container {
	padding: 0;
}

/* ---------- контролы Gravity Forms ---------- */
/* Раскладку полей задаёт сам Gravity Forms, её не трогаем. Здесь только вид
   контролов. Селекторы длинные намеренно: у темы свои правила на те же поля,
   и без запаса по специфичности они перебивают эти. */

.tt-home .tt-hero .gform_wrapper { margin: 0; }

.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input[type="text"],
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input[type="email"],
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"],
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input[type="number"],
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input[type="date"],
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield select,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield textarea {
	box-sizing: border-box;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--tt-line);
	/* Тема скругляет поля формы 10 поимённо, собирая их в один слитный блок:
	   `#input_10_1 { border-radius: 12px 12px 0 0 }`, середина `0`,
	   `#input_10_9 { border-radius: 0 0 12px 12px }`. Раскладка давно другая,
	   поля стоят порознь, и от той схемы оставались рваные углы: у одних 12px,
	   у других 0, у Notes вообще `0 0 12px`. Идентификатор перебивается только
	   через !important. */
	border-radius: var(--tt-radius-sm) !important;
	/* Именно background-color, а не сокращение background: тема гасит у списков
	   системную стрелку через appearance:none и рисует свою картинкой в фоне.
	   Сокращение затирало её, и списки оставались без всякого признака списка. */
	background-color: #fff;
	color: var(--tt-green);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color 0.15s var(--tt-ease), box-shadow 0.15s var(--tt-ease);
}

.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input:hover,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield select:hover,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield textarea:hover {
	border-color: #c3cfcf;
}

/* Своя стрелка у списков не ставится намеренно: тема прибивает полям
   `padding: 14px 20px !important`, и текст длинных пунктов уезжал бы под иконку.
   Оставляем системную. Отступы полей по той же причине задаёт тема. */

/* Высоту textarea не меняем: она задаёт высоту всей строки полей. */
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield textarea {
	font-weight: 400;
}

.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input::placeholder,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield textarea::placeholder {
	color: #8a9a9a;
	font-weight: 400;
}

.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield input:focus-visible,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield select:focus-visible,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield textarea:focus-visible {
	outline: 2px solid var(--tt-green);
	outline-offset: 1px;
	border-color: var(--tt-green);
}

.tt-home .tt-hero .gform_wrapper .gfield_label { color: var(--tt-lbl); font-family: inherit; }
.tt-home .tt-hero .gform_wrapper .gfield_required { color: #a02020; }

/* Подвал формы вынесен из белой рамки: своего фона у него нет, кнопка стоит
   на фотографии сама по себе. */
.tt-home .tt-hero .gform_wrapper .gform_footer {
	display: flex;
	justify-content: center;
	padding: 24px 0 0;
	margin: 0;
	background: transparent;
}

/* Кнопке формы 10 тема задаёт вид по идентификатору:
   `#gform_submit_button_10, #gform_submit_button_13 { background: transparent; border: 1px solid #fff }`.
   Идентификатор перебивает любые классы, поэтому кнопка единственной видимой
   формы была прозрачной с белой рамкой. Остальные три формы получали песочную.
   Здесь выравниваем все четыре, и тоже через !important. */
.tt-home .tt-hero .gform_wrapper .gform_footer input[type="submit"],
.tt-home .tt-hero .gform_wrapper .gform_footer .gform_button {
	box-sizing: border-box;
	/* Во всю ширину формы: кнопка вынесена из белой рамки и на фотографии
	   работает как отдельная полоса действия. На узком экране тема сжимает её
	   до 90%, поэтому ширина идёт с тем же !important, что и цвета ниже. */
	width: 100% !important;
	max-width: none !important;
	min-height: 56px;
	padding: 0 36px;
	border: 0 !important;
	/* Тот же радиус, что у белой рамки с полями: они одной ширины и стоят друг
	   под другом, разные скругления читались бы как две чужие детали.
	   !important — потому что тема задаёт кнопке 12px по идентификатору. */
	border-radius: var(--tt-radius) !important;
	background: var(--tt-sand) !important;
	color: var(--tt-green) !important;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: var(--tt-shadow-sm);
	transition: background 0.18s var(--tt-ease), transform 0.18s var(--tt-ease),
		box-shadow 0.18s var(--tt-ease);
}

.tt-home .tt-hero .gform_wrapper .gform_footer input[type="submit"]:hover,
.tt-home .tt-hero .gform_wrapper .gform_footer .gform_button:hover {
	/* !important нужен, потому что он стоит на обычном состоянии выше. */
	background: var(--tt-sand-2) !important;
	transform: translateY(-2px);
	box-shadow: var(--tt-shadow-md);
}

.tt-home .tt-hero .gform_wrapper .gform_footer input[type="submit"]:active,
.tt-home .tt-hero .gform_wrapper .gform_footer .gform_button:active { transform: translateY(0); }

/* На узком экране кнопка во всю ширину: так по ней проще попасть пальцем. */
.tt-home .tt-hero .gform_wrapper .validation_error {
	border-radius: var(--tt-radius-sm);
	color: #a02020;
	font-family: inherit;
}

.tt-home .tt-hero .gform_wrapper .gfield_description.validation_message {
	color: #a02020;
	font-family: inherit;
	font-size: 14px;
}

/* ---------- собранные контролы блока бронирования ---------- */
/* Разметку рисует assets/js/tt-booking.js поверх родных полей Gravity. Родные
   поля остаются в форме и получают значения, здесь их только убирают со сцены.
   Без скрипта ни один из этих классов не появится, и форма выглядит как прежде. */

.tt-home .tt-fld-hidden { display: none !important; }

.tt-home .tt-sel,
.tt-home .tt-dt,
.tt-home .tt-pax,
.tt-home .tt-two { position: relative; }

/* Кнопка-поле. Повторяет контролы Gravity вплоть до отступов 14px/20px,
   которые тема прибивает через !important, иначе строка полей разъезжается. */
.tt-home .tt-sel__btn,
.tt-home .tt-dt__btn,
.tt-home .tt-pax__btn,
.tt-home .tt-two__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 14px 20px;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-radius-sm);
	background: #fff;
	box-shadow: none;
	color: var(--tt-green);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s var(--tt-ease);
}

.tt-home .tt-sel__btn:hover,
.tt-home .tt-dt__btn:hover,
.tt-home .tt-pax__btn:hover,
.tt-home .tt-two__btn:hover { border-color: #c3cfcf; background: #fff; }

.tt-home .is-open .tt-sel__btn,
.tt-home .is-open .tt-dt__btn,
.tt-home .is-open .tt-pax__btn,
.tt-home .is-open .tt-two__btn { border-color: var(--tt-green); }

/* Пустое поле выглядит как placeholder у соседних полей Gravity. */
.tt-home .tt-sel__btn.is-empty,
.tt-home .tt-dt__btn.is-empty,
.tt-home .tt-pax__btn.is-empty,
.tt-home .tt-two__btn.is-empty { color: #8a9a9a; font-weight: 400; }

.tt-home .tt-sel__val,
.tt-home .tt-dt__val,
.tt-home .tt-pax__val,
.tt-home .tt-two__val {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tt-home .tt-sel__btn::after,
.tt-home .tt-dt__btn::after,
.tt-home .tt-pax__btn::after,
.tt-home .tt-two__btn::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-right: 2px solid var(--tt-green);
	border-bottom: 2px solid var(--tt-green);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s var(--tt-ease);
}

.tt-home .is-open .tt-sel__btn::after,
.tt-home .is-open .tt-dt__btn::after,
.tt-home .is-open .tt-pax__btn::after,
.tt-home .is-open .tt-two__btn::after { transform: translateY(2px) rotate(-135deg); }

/* Общая всплывающая панель */
.tt-home .tt-sel__list,
.tt-home .tt-dt__pop,
.tt-home .tt-pax__pop,
.tt-home .tt-two__pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	display: none;
	margin: 0;
	border: 1px solid var(--tt-line);
	border-radius: var(--tt-radius-sm);
	background: #fff;
	box-shadow: var(--tt-shadow-lg);
	/* Сдвиг ставит скрипт, когда панель не помещается ни слева, ни справа. */
	transform: translateX(var(--tt-pop-shift, 0));
}

.tt-home .is-open > .tt-sel__list,
.tt-home .is-open > .tt-pax__pop,
.tt-home .is-open > .tt-two__pop { display: block; }
.tt-home .is-open > .tt-dt__pop { display: flex; }

/* Разворот у края экрана, класс вешает скрипт по реальным размерам. */
.tt-home .is-flipped-x { left: auto; right: 0; }
.tt-home .is-flipped-y { top: auto; bottom: calc(100% + 8px); }

/* --- выпадающий список --- */

.tt-home .tt-sel__list {
	min-width: 100%;
	max-height: 268px;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
}

.tt-home .tt-sel__list:focus-visible { outline: none; }

.tt-home .tt-sel__opt {
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--tt-green);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
}

.tt-home .tt-sel__opt--empty { color: var(--tt-lbl); font-weight: 400; }
.tt-home .tt-sel__opt:hover,
.tt-home .tt-sel__opt.is-active { background: rgba(9, 46, 46, 0.07); }

.tt-home .tt-sel__opt.is-selected {
	background: var(--tt-green);
	color: #fff;
	font-weight: 700;
}

/* --- дата и время --- */

.tt-home .tt-dt__pop {
	width: max-content;
	max-width: calc(100vw - 24px);
	padding: 0;
	overflow: hidden;
}

.tt-home .tt-cal { padding: 14px; }

.tt-home .tt-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.tt-home .tt-cal__title {
	color: var(--tt-green);
	font-size: 15px;
	font-weight: 700;
}

.tt-home .tt-cal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.tt-home .tt-cal__nav:hover { background: rgba(9, 46, 46, 0.07); }

.tt-home .tt-cal__chev {
	width: 8px;
	height: 8px;
	border-left: 2px solid var(--tt-green);
	border-bottom: 2px solid var(--tt-green);
}

.tt-home .tt-cal__chev--prev { margin-left: 3px; transform: rotate(45deg); }
.tt-home .tt-cal__chev--next { margin-right: 3px; transform: rotate(-135deg); }

.tt-home .tt-cal__dows,
.tt-home .tt-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 34px);
	gap: 2px;
}

.tt-home .tt-cal__dows span {
	padding-bottom: 6px;
	color: var(--tt-lbl);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.tt-home .tt-cal__day {
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--tt-green);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.tt-home .tt-cal__day:hover:not(:disabled) { background: rgba(9, 46, 46, 0.07); }
.tt-home .tt-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--tt-line); }

.tt-home .tt-cal__day.is-selected {
	background: var(--tt-green);
	color: #fff;
	font-weight: 700;
}

.tt-home .tt-cal__day.is-past { color: #b7c1c1; cursor: default; }

.tt-home .tt-tm { display: flex; border-left: 1px solid var(--tt-line); }

.tt-home .tt-tm__col { display: flex; flex-direction: column; width: 68px; }
.tt-home .tt-tm__col + .tt-tm__col { border-left: 1px solid var(--tt-line); }

.tt-home .tt-tm__cap {
	padding: 14px 0 8px;
	color: var(--tt-lbl);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.tt-home .tt-tm__list {
	flex: 1;
	max-height: 232px;
	margin: 0;
	padding: 0 6px 6px;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
}

.tt-home .tt-tm__opt {
	padding: 7px 0;
	border-radius: 8px;
	color: var(--tt-green);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	cursor: pointer;
}

.tt-home .tt-tm__opt:hover { background: rgba(9, 46, 46, 0.07); }

.tt-home .tt-tm__opt.is-selected {
	background: var(--tt-green);
	color: #fff;
	font-weight: 700;
}

/* На узком экране календарь и часы встают друг под друга. */
@media (max-width: 599px) {
	.tt-home .tt-dt__pop { flex-direction: column; width: min(340px, calc(100vw - 32px)); }
	.tt-home .tt-cal { padding: 12px; }
	.tt-home .tt-cal__dows,
	.tt-home .tt-cal__grid { grid-template-columns: repeat(7, 1fr); }
	.tt-home .tt-tm { border-left: 0; border-top: 1px solid var(--tt-line); }
	.tt-home .tt-tm__col { flex: 1; width: auto; }
	.tt-home .tt-tm__list { max-height: 150px; }
}

/* --- пассажиры --- */

.tt-home .tt-pax__pop {
	width: max(100%, 304px);
	padding: 6px;
}

.tt-home .tt-pax__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 10px;
}

.tt-home .tt-pax__row + .tt-pax__row { border-top: 1px solid var(--tt-line); }

.tt-home .tt-pax__title {
	display: block;
	color: var(--tt-green);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.tt-home .tt-pax__hint {
	display: block;
	margin-top: 2px;
	color: var(--tt-lbl);
	font-size: 12px;
	line-height: 1.3;
}

.tt-home .tt-pax__ctrl { display: flex; align-items: center; gap: 2px; }

.tt-home .tt-pax__step {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--tt-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s var(--tt-ease), background 0.15s var(--tt-ease);
}

.tt-home .tt-pax__step:hover:not(:disabled) { border-color: var(--tt-green); background: var(--tt-cream); }
.tt-home .tt-pax__step:disabled { opacity: 0.35; cursor: default; }

/* Плюс и минус полосками: шрифтовые знаки прыгают по базовой линии. */
.tt-home .tt-pax__sign {
	width: 12px;
	height: 12px;
	background: linear-gradient(var(--tt-green), var(--tt-green)) center / 100% 2px no-repeat;
}

.tt-home .tt-pax__sign--plus {
	background:
		linear-gradient(var(--tt-green), var(--tt-green)) center / 100% 2px no-repeat,
		linear-gradient(var(--tt-green), var(--tt-green)) center / 2px 100% no-repeat;
}

.tt-home .tt-pax__count {
	min-width: 72px;
	color: var(--tt-green);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* --- аэропорт и номер рейса --- */

.tt-home .tt-two__pop {
	width: max(100%, 320px);
	padding: 14px;
}

.tt-home .tt-two__row + .tt-two__row { margin-top: 14px; }

.tt-home .tt-two__cap {
	display: block;
	margin-bottom: 6px;
	color: var(--tt-lbl);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.tt-home .tt-two__req { margin-left: 3px; color: #a02020; }

/* Поля переехали внутрь панели: оформление им достаётся от общих правил
   контролов Gravity, здесь только ширина. */
.tt-home .tt-two__row input { width: 100%; }

/* Запасной вывод, если родной блок не найден */
.tt-forms--fallback {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: var(--tt-sec) 0;
}

/* ---------- цифры ---------- */

.tt-stats { padding: var(--tt-sec) 0 0; }

.tt-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	border-top: 2px solid var(--tt-green);
}

@media (min-width: 900px) { .tt-stats__grid { grid-template-columns: repeat(4, 1fr); } }

.tt-stats__grid > div { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--tt-line); }

@media (min-width: 900px) {
	.tt-stats__grid > div { border-bottom: 0; padding: 28px 32px 0 0; }
	.tt-stats__grid > div + div { padding-left: 32px; border-left: 1px solid var(--tt-line); }
}

.tt-stats__grid dt {
	color: var(--tt-green);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	/* Цифры одной ширины: иначе колонки «пляшут». */
	font-variant-numeric: tabular-nums;
}

.tt-stats__grid dd { margin: 8px 0 0; }

/* ---------- секции ---------- */

.tt-sec__head { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 900px) {
	.tt-sec__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
}

.tt-services,
.tt-how,
.tt-dest,
.tt-about,
.tt-reviews,
.tt-faq { padding: var(--tt-sec) 0; }

.tt-how { background: var(--tt-cream); }
.tt-about { background: #fff; }
.tt-faq { background: #fff; }

/* ---------- карточки услуг ---------- */

.tt-cards { display: grid; gap: var(--tt-gap); margin-top: 28px; }

@media (min-width: 900px) { .tt-cards { grid-template-columns: repeat(3, 1fr); margin-top: 40px; } }

.tt-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 300px;
	padding: 26px;
	border-radius: var(--tt-radius);
	background: var(--tt-green);
	transition: transform 0.22s var(--tt-ease), box-shadow 0.22s var(--tt-ease);
}

.tt-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tt-shadow-md);
}

@media (min-width: 900px) { .tt-card { min-height: 380px; padding: 32px; gap: 20px; } }

.tt-card__title {
	margin: 0;
	color: #fff;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}

@media (min-width: 900px) { .tt-card__title { font-size: 24px; } }

/* Ширина списка держит текст левее песочного круга: на 62% последние строки
   заезжали на круг и становились нечитаемыми. */
.tt-card__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 54%;
	color: rgba(255, 255, 255, 0.86);
	font-size: 15px;
	line-height: 1.5;
}

@media (min-width: 900px) { .tt-card__list { font-size: 16px; gap: 12px; } }

.tt-card__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	color: var(--tt-sand);
	font-weight: 700;
	text-decoration: none;
	align-self: flex-start;
	transition: transform 0.18s var(--tt-ease), color 0.18s var(--tt-ease);
}

.tt-card__link:hover {
	color: #fff;
	transform: translateX(3px);
}

/* Круг намеренно уходит за угол карточки, а вот фигуру подрезать не надо:
   она стоит на нижней кромке. Отсюда одна переменная на вынос круга и на
   подъём картинки. */
.tt-card__art {
	--tt-art-bleed: 24px;

	position: absolute;
	z-index: 0;
	/* Доли, а не пиксели: при фиксированных 210px на узком десктопе карточка
	   сжималась, круг оставался прежним и наезжал на список. */
	right: -12%;
	bottom: calc(var(--tt-art-bleed) * -1);
	width: 56%;
	aspect-ratio: 1;
}

@media (min-width: 900px) {
	.tt-card__art { --tt-art-bleed: 34px; }
}

/* Картинки разной пропорции: 189×195, 179×264, 217×200. Без потолка по высоте
   средняя вылезала к самому заголовку. Ограничиваем по обеим сторонам. */
.tt-card__art img {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: var(--tt-art-bleed);
	transform: translateX(-50%);
	width: auto;
	height: auto;
	max-width: 90%;
	max-height: 78%;
	display: block;
}

/* ---------- шаги ---------- */

.tt-steps {
	display: grid;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 900px) { .tt-steps { grid-template-columns: repeat(4, 1fr); gap: var(--tt-gap); margin-top: 44px; } }

.tt-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--tt-line-soft);
	border-radius: var(--tt-radius);
	background: #fff;
}

@media (min-width: 900px) { .tt-step { padding: 28px; gap: 14px; } }

.tt-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tt-sand);
	color: var(--tt-green);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tt-step h3 {
	margin: 0;
	color: var(--tt-green);
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tt-step p { margin: 0; color: var(--tt-mute); font-size: 15px; line-height: 1.6; }

.tt-step--dark { border-color: transparent; background: var(--tt-green); }
.tt-step--dark h3 { color: #fff; }
.tt-step--dark p { color: rgba(255, 255, 255, 0.82); }

/* ---------- города ---------- */

.tt-dest__grid { display: grid; margin-top: 28px; }

@media (min-width: 900px) {
	.tt-dest__grid { grid-template-columns: repeat(2, 1fr); column-gap: 48px; margin-top: 36px; }
}

.tt-dest__row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 22px;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--tt-line);
	color: inherit;
	text-decoration: none;
}

/* Подсветка строки уходит за текст псевдоэлементом, чтобы не двигать линейки. */
.tt-dest__row::before {
	content: "";
	position: absolute;
	inset: 1px -12px 0;
	border-radius: var(--tt-radius-sm);
	background: rgba(9, 46, 46, 0.04);
	opacity: 0;
	transition: opacity 0.18s var(--tt-ease);
}

.tt-dest__row:hover::before { opacity: 1; }

.tt-dest__row > * { position: relative; z-index: 1; }

.tt-dest__row:first-child { border-top: 2px solid var(--tt-green); }
.tt-dest__row:last-child { border-bottom: 1px solid var(--tt-line); }

@media (min-width: 900px) {
	/* две колонки заполняются построчно: шапка у первых двух, низ у последних двух */
	.tt-dest__row:nth-child(2) { border-top: 2px solid var(--tt-green); }
	.tt-dest__row:nth-last-child(2) { border-bottom: 1px solid var(--tt-line); }
}

.tt-dest__city {
	color: var(--tt-green);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: color 0.18s var(--tt-ease);
}

@media (min-width: 900px) { .tt-dest__city { font-size: 21px; } }

.tt-dest__arrow {
	color: var(--tt-green);
	font-size: 18px;
	font-weight: 700;
	text-align: right;
	transition: transform 0.18s var(--tt-ease);
}

.tt-dest__row:hover .tt-dest__city { color: var(--tt-green-2); }
.tt-dest__row:hover .tt-dest__arrow { transform: translateX(4px); }

/* ---------- о компании ---------- */

.tt-about__grid { display: grid; gap: 24px; }

@media (min-width: 900px) {
	.tt-about__grid { grid-template-columns: 280px 1fr; gap: 72px; align-items: start; }
}

.tt-about__cols { display: grid; gap: 20px; }

@media (min-width: 900px) { .tt-about__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; } }

.tt-about__cols p { margin: 0; color: var(--tt-mute); font-size: 17px; line-height: 1.7; }

.tt-facts { margin: 36px 0 0; }

.tt-facts > div {
	display: grid;
	gap: 6px;
	padding: 18px 0;
	border-top: 1px solid var(--tt-line);
}

@media (min-width: 900px) { .tt-facts > div { grid-template-columns: 280px 1fr; gap: 40px; padding: 22px 0; } }

.tt-facts > div:last-child { border-bottom: 1px solid var(--tt-line); }

.tt-facts dt {
	color: var(--tt-green);
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
}

.tt-facts dd { margin: 0; color: var(--tt-mute); font-size: 16px; line-height: 1.6; }

/* ---------- отзывы ---------- */

.tt-reviews__grid { display: grid; gap: var(--tt-gap); margin: 28px 0; }

@media (min-width: 900px) { .tt-reviews__grid { grid-template-columns: repeat(2, 1fr); margin: 36px 0 28px; } }

.tt-quote {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 26px;
	border-radius: var(--tt-radius);
	background: #fff;
	box-shadow: var(--tt-shadow-sm);
}

/* Крупная кавычка песочным: держит угол карточки и подсказывает, что это цитата.
   Приглушена, потому что текст цитаты проходит поверх неё. */
.tt-quote::before {
	content: "\201C";
	position: absolute;
	top: -30px;
	right: 16px;
	color: var(--tt-sand);
	opacity: 0.5;
	font-size: 120px;
	line-height: 1;
	pointer-events: none;
}

@media (min-width: 900px) { .tt-quote { padding: 34px; gap: 22px; } }

.tt-quote blockquote {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--tt-green);
	font-size: 18px;
	line-height: 1.55;
}

@media (min-width: 900px) { .tt-quote blockquote { font-size: 20px; } }

.tt-quote figcaption {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--tt-line);
}

.tt-quote figcaption strong { display: block; color: var(--tt-green); font-size: 16px; }

.tt-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--tt-sand);
	color: var(--tt-green);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---------- FAQ ---------- */

.tt-faq__grid { display: grid; gap: 24px; }

@media (min-width: 900px) { .tt-faq__grid { grid-template-columns: 320px 1fr; gap: 72px; align-items: start; } }

.tt-faq .tt-link { margin-top: 20px; }

.tt-acc { display: flex; flex-direction: column; }

.tt-acc__item { border-top: 1px solid var(--tt-line); padding: 20px 0; }
.tt-acc__item:first-child { border-top: 2px solid var(--tt-green); }
.tt-acc__item:last-child { border-bottom: 1px solid var(--tt-line); }

.tt-acc__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: var(--tt-green);
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: color 0.18s var(--tt-ease);
}

.tt-acc__item summary:hover { color: var(--tt-green-2); }
.tt-acc__item summary::-webkit-details-marker { display: none; }

/* Плюс собран из двух полосок: так он поворачивается в минус, а не подпрыгивает,
   как это делал текстовый знак. */
.tt-acc__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(var(--tt-green), var(--tt-green)) center / 100% 2px no-repeat,
		linear-gradient(var(--tt-green), var(--tt-green)) center / 2px 100% no-repeat;
	transition: transform 0.22s var(--tt-ease);
}

.tt-acc__item[open] summary::after { transform: rotate(135deg); }

.tt-acc__item p { margin: 14px 0 0; color: var(--tt-mute); font-size: 16px; line-height: 1.7; max-width: 74ch; }

/* ---------- контакт ---------- */

.tt-contact { background: var(--tt-green); padding: var(--tt-sec) 0; }

/* Контакты — это полоса, а не полноценная секция: заголовок в общем размере
   занимал три строки и перевешивал всё остальное. */
.tt-contact .tt-h2 {
	font-size: clamp(24px, 2.2vw, 30px);
	line-height: 1.2;
}

.tt-contact__grid { display: grid; gap: 24px; }

@media (min-width: 900px) {
	/* Заголовку нужна колонка пошире: в прежней раскладке он ломался на три строки. */
	.tt-contact__grid { grid-template-columns: 1.5fr 1fr 1.2fr auto; gap: 48px; align-items: center; }
}

.tt-contact__item { display: flex; flex-direction: column; gap: 6px; }

.tt-contact__item a {
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.18s var(--tt-ease);
}

.tt-contact__item a:hover { color: var(--tt-sand); }

/* ---------- платежи ---------- */

.tt-pay { background: var(--tt-cream); padding: 20px 0; }

.tt-pay__row { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 900px) {
	.tt-pay__row { flex-direction: row; align-items: center; gap: 40px; }
	.tt-pay__note { margin-left: auto; }
}

.tt-pay__list { color: var(--tt-mute); font-size: 15px; font-weight: 600; }
.tt-pay__note { color: var(--tt-lbl); font-size: 14px; }

/* ---------- выравнивание: одинаковые высоты полей и текст на кнопке ---------- */

/* Подписи полей у формы 10 скрыты классом hidden_label, но обязательные
   оставляли строку в 1px, а у .ginput_container сверху 8px. Из-за этого поля
   с звёздочкой были на 9px выше соседей и строка ехала. Прячем подпись
   доступным способом, без display:none, чтобы её читали скринридеры. */
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* Gravity задаёт `body .gform_wrapper .top_label div.ginput_container
   { margin-top: 8px }`, и эти 8px и делали обязательные поля выше соседей.
   Снимаем их с тем же весом. */
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield > .ginput_container {
	margin-top: 0 !important;
}

/* Все контролы одной высоты, чтобы строка была ровной. */
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield,
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield > .ginput_container {
	min-height: 52px;
}

/* Текст на кнопке стоял не по центру: тема задаёт отступы по идентификатору,
   `#gform_submit_button_10 { padding: 20px 80px }`, а один идентификатор
   сильнее любой цепочки классов. Отсюда !important. */
.tt-home .tt-hero .gform_wrapper .gform_footer input[type="submit"],
.tt-home .tt-hero .gform_wrapper .gform_footer .gform_button {
	padding: 0 36px !important;
	line-height: 1 !important;
	text-align: center;
}

/* У внутреннего контейнера обложки героя свои 58px по бокам, из-за них форма
   была 1040 вместо 1156 и не совпадала с колонкой секций ниже. Отступ задан
   с приоритетом, поэтому снимаем так же. */
.tt-home .tt-hero .wp-block-cover > .wp-block-cover__inner-container {
	padding-inline: 0 !important;
}

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

.tt-home .tt-hero .gform_confirmation_wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.tt-home .tt-hero .gform_confirmation_message,
.tt-home .tt-hero div[id^="gform_confirmation_message_"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 120px;
	margin: 0;
	padding: 32px 28px;
	border: 0;
	border-radius: var(--tt-radius);
	background: #fff;
	color: var(--tt-green) !important;
	font-family: inherit;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	box-shadow: 0 18px 44px -30px rgba(9, 46, 46, 0.45);
}

/* Песочная точка слева от текста: тот же акцент, что у кнопки, и сразу видно,
   что это успешный итог, а не случайная строка на фотографии. */
.tt-home .tt-hero .gform_confirmation_message::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tt-sand);
}

/* ---------- ошибки валидации ---------- */
/* Тема красит текст ошибок кремовым, а он ложится на белую панель формы: и
   баннер, и подписи под полями были нечитаемы. Плюс подпись растягивала поле
   с 52 до 126px и выламывала строку, соседние поля оставались наверху. */

.tt-home .tt-hero .gform_wrapper .validation_error {
	margin: 0 0 16px;
	padding: 16px 20px;
	border: 0;
	border-left: 4px solid var(--tt-error, #b3261e);
	border-radius: var(--tt-radius-sm);
	background: #fff;
	color: var(--tt-error, #b3261e) !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* Подпись выносим из потока: поле остаётся 52px, строка не ломается,
   а текст встаёт в зазор под контролом. */
.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield {
	position: relative;
}

.tt-home .tt-hero .gform_wrapper .gform_body .gform_fields .gfield .validation_message {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 2;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	background: none;
	color: var(--tt-error, #b3261e) !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* Само поле с ошибкой обводим красным: подпись мелкая, а рамка видна сразу. */
.tt-home .tt-hero .gform_wrapper .gfield_error .tt-sel__btn,
.tt-home .tt-hero .gform_wrapper .gfield_error .tt-two__btn,
.tt-home .tt-hero .gform_wrapper .gfield_error .tt-dt__btn,
.tt-home .tt-hero .gform_wrapper .gfield_error .tt-pax__btn,
.tt-home .tt-hero .gform_wrapper .gfield_error input,
.tt-home .tt-hero .gform_wrapper .gfield_error select,
.tt-home .tt-hero .gform_wrapper .gfield_error textarea {
	border-color: var(--tt-error, #b3261e) !important;
}

/* Подсветку строки целиком тема заливает своим фоном, он тут лишний.
   Селектор длиннее, чем хочется: плагин keydesign задаёт
   `.container .gform_wrapper li.gfield.gfield_error { padding: 20px !important }`,
   и без запаса по весу поле оставалось 92px вместо 52, из-за чего строка
   всё равно съезжала. */
.tt-home .tt-hero .gform_wrapper ul li.gfield.gfield_error,
.tt-home .tt-hero .gform_wrapper ul.gform_fields li.gfield.gfield_error {
	background: none !important;
	border: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Подпись об ошибке лежит вне потока, поэтому места под неё в строке нет и она
   поджимает следующий ряд. Добавляем зазор всем полям формы разом, только пока
   форма в состоянии ошибки: если дать его лишь полям с ошибкой, строки снова
   разъедутся. */
.tt-home .tt-hero .gform_validation_error .gform_body .gform_fields .gfield {
	margin-bottom: 24px;
}

/* Нижней строке зазор тоже нужен: её подпись иначе выходит за край панели. */
.tt-home .tt-hero .gform_validation_error .gform_body {
	padding-bottom: 8px;
}