/*
 * Новый дизайн сайта (Figma «Best Western Hotel»): главная, номера, страница номера.
 * Все классы с префиксом hp-, чтобы не пересекаться со старыми стилями темы.
 *
 * Шрифт Gotham лежит в fonts/gotham: Book (400) для текста, Medium (500) для заголовков. Bold не используется.
 * В Gotham нет знака тенге ₸ — его рисует Montserrat (подгружается только этот символ).
 *
 * Размеры шрифта — только из шкалы ниже (--fs-*), других размеров не добавлять.
 */

@font-face {
	font-family: "Gotham";
	src: url("../fonts/gotham/gotham_book.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-009F, U+00A1-FFFF; /* без неразрывного пробела: в Gotham он огромной ширины, его рисует запасной шрифт */
}

@font-face {
	font-family: "Gotham";
	src: url("../fonts/gotham/gotham_medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-009F, U+00A1-FFFF; /* без неразрывного пробела: в Gotham он огромной ширины, его рисует запасной шрифт */
}

@font-face {
	font-family: "Gotham";
	src: url("../fonts/gotham/gotham_medium.otf") format("opentype"); /* жирного на сайте нет: 600–700 рисуются как Medium */
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-009F, U+00A1-FFFF; /* без неразрывного пробела: в Gotham он огромной ширины, его рисует запасной шрифт */
}

:root {
	/* Все переменные сайта в одном месте (раньше были разбросаны по шести блокам :root, побеждал последний) */
	--hp-font: "Gotham", "Montserrat", sans-serif;
	--fs-xl: 52px;
	--fs-l: 34px;
	--fs-m: 22px;
	--fs-base: 18px;
	--fs-s: 15px;
	--fs-xs: 13px;
	--hp-accent: #7C122E;
	--hp-accent-dark: #7c122e;
	--hp-text: #4d484c;
	--hp-soft: #f2ece3;
	--hp-white: #fff;
	--hp-header-h: 85px;
	--hp-radius: 24px;
	--hp-radius-sm: 20px;
	--hp-arch: 999px 999px 0 0;
	--hp-space: clamp(88px, 11vw, 200px);
	--hp-gutter: 38px;
	--hp-line: rgba(28, 23, 25, .14);
	--hp-font-display: "HP Display", "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--hp-ink: #1c1719;
	--hp-bg: #faf7f2;
	--hp-dark: #171315;
	--hp-gold: #b9a37a;
}

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

body.hp {
	font-family: var(--hp-font);
	color: var(--hp-text);
	background: var(--hp-white);
	-webkit-font-smoothing: antialiased;
}

.hp *:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 3px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--hp-header-h);
}

.hp-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--hp-gutter);
}

/* Линий между блоками нет: блоки разделены только отступами */

.hp-center {
	display: flex;
	justify-content: center;
}

/* ---------- Заголовки ---------- */

.hp-title {
	margin: 0 0 40px;
	font-size: var(--fs-l);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--hp-text);
}

.hp-title--xl {
	font-size: var(--fs-xl);
	margin-bottom: 56px;
}

.hp-subtitle {
	margin: 0 0 6px;
	font-size: var(--fs-l);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--hp-text);
}

/* ---------- Кнопки ---------- */

.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 69px;
	padding: 0 48px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--hp-font);
	font-size: var(--fs-m);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	color: var(--hp-white);
	transition: background-color .2s, color .2s, border-color .2s;
}

.hp-btn--lg {
	min-width: 335px;
	min-height: 73px;
	font-size: var(--fs-m);
}

.hp-btn--primary {
	background: var(--hp-accent);
}

.hp-btn--primary:hover {
	background: var(--hp-accent-dark);
}

.hp-btn--glass {
	background: rgba(255, 255, 255, .3);
	border-color: var(--hp-white);
	backdrop-filter: blur(4px);
}

.hp-btn--glass:hover {
	background: rgba(255, 255, 255, .45);
}

.hp-btn--outline-light {
	min-width: 316px;
	border-color: var(--hp-white);
}

.hp-btn--outline-light:hover {
	background: var(--hp-white);
	color: var(--hp-accent);
}

/* ---------- Шапка ---------- */

.hp-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--hp-white);
	transition: box-shadow .2s;
}

/* Когда вы вошли в админку, сверху чёрная панель WordPress — шапку сдвигаем под неё, чтобы не обрезался логотип */
.admin-bar .hp-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .hp-header { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar .hp-header { top: 0; }
}

.hp-header--scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

.hp-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1440px;
	height: var(--hp-header-h);
	margin: 0 auto;
	padding: 0 40px;
}

.hp-header__logo img {
	display: block;
	height: 51px;
	width: auto;
}

.hp-header__nav {
	flex: 1;
}

.hp-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-menu li {
	display: flex;
	align-items: center;
	list-style: none;
}

.hp-menu li + li::before {
	content: "/";
	margin: 0 30px;
	font-size: var(--fs-base);
	color: var(--hp-accent);
}

.hp-menu a {
	font-size: var(--fs-base);
	line-height: 1.2;
	color: var(--hp-accent);
	white-space: nowrap;
}

.hp-menu .current-menu-item > a,
.hp-menu a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hp-lang {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-lang li {
	list-style: none;
}

.hp-lang__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--hp-text);
	border-radius: var(--hp-radius-sm);
	font-size: var(--fs-base);
	color: var(--hp-text);
	transition: background-color .2s, color .2s, border-color .2s;
}

.hp-lang__link:hover,
.hp-lang__link--active {
	background: var(--hp-accent);
	border-color: var(--hp-accent);
	color: var(--hp-white);
}

.hp-header__lang--mobile,
.hp-header__burger {
	display: none;
}

/* Хлебные крошки вместо меню на внутренних страницах (на телефоне — бургер с полным меню) */
.hp-header__breadcrumbs {
	flex: 1;
}

.hp-header__breadcrumbs .hp-menu {
	justify-content: flex-start;
	padding-left: 24px;
}

.hp-header__nav--mobile-only {
	display: none;
}

/* ---------- 1. Первый экран ---------- */

.hp-hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	max-height: 1024px;
	background: #000;
	overflow: hidden;
}

.hp-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.hp-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .59);
}

.hp-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--hp-gutter) 40px;
}

.hp-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: 933px;
	margin-bottom: -30px;
}

.hp-hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-s);
	color: var(--hp-white);
}

.hp-hero__scroll svg {
	animation: hp-bounce 2s infinite;
}

@keyframes hp-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* Обёртки первого экрана (нужны для эффекта; в обычном режиме просто растянуты) */
.hp-hero__stage {
	position: relative;
	height: 100%;
}

.hp-hero__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #000;
}

.hp-hero__mask,
.hp-hero__hint {
	display: none;
}

/* ---------- Эффект «видео в буквах» ----------
 * Секция высокая (прокрутка), внутри «липкая» сцена на весь экран.
 * Бордовый фон с прозрачными буквами, сквозь которые видно видео
 * (два слоя с режимами смешивания — см. .hp-hero__mask--screen и --tint).
 * js/home.js по прокрутке увеличивает слой (буквы «пролетают» сквозь экран),
 * показывает кнопки и в конце сжимает видео в скруглённую карточку.
 */
.hp-hero--reveal {
	height: 330vh;
	min-height: 0;
	max-height: none;
	background: var(--hp-accent);
	overflow: visible;
}

.hp-hero--reveal .hp-hero__stage {
	position: sticky;
	top: 0;
	z-index: 5; /* летящее видео — поверх текста «Об отеле», который в этот момент выплывает */
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.hp-hero--reveal .hp-hero__frame {
	clip-path: inset(var(--hp-inset-y, 0px) var(--hp-inset-x, 0px) round var(--hp-round, 0px));
	will-change: clip-path;
}

.hp-hero--reveal .hp-hero__media {
	animation: none;
	transform: scale(var(--hp-media-scale, 1.15));
}

.hp-hero--reveal .hp-hero__overlay {
	opacity: var(--hp-ui, 0);
}

.hp-hero--reveal .hp-hero__mask {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 0; /* шапки над буквами нет */
	font-size: clamp(56px, 13vw, 260px);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;
	transform: scale(var(--hp-mask-scale, 1));
	transform-origin: var(--hp-origin-x, 50%) var(--hp-origin-y, 50%);
	opacity: var(--hp-mask-opacity, 1);
	pointer-events: none;
	/* без will-change: иначе Chrome кэширует увеличенные в 80 раз буквы и при обратной прокрутке не рисует их заново */
}

/* Буквы полностью «пролетели» — прячем слои совсем (и браузеру легче, и при возврате они рисуются заново) */
.hp-hero--mask-gone .hp-hero__mask {
	visibility: hidden;
}

/* Слой 1: белый фон, чёрные буквы, screen → вне букв белое, в буквах видео */
.hp-hero--reveal .hp-hero__mask--screen {
	background: var(--hp-white);
	color: #000;
	mix-blend-mode: screen;
}

/* Слой 2: бордовый фон, белые буквы, multiply → белое становится бордовым, видео в буквах не меняется */
.hp-hero--reveal .hp-hero__mask--tint {
	z-index: 3;
	background: var(--hp-accent);
	color: #fff;
	mix-blend-mode: multiply;
}

/* Строка букв; внутри — текст, который въезжает снизу после прелоадера */
.hp-hero__mask > span {
	display: block;
	overflow: hidden;
	padding: .04em .05em;
}

.hp-hero__mask > span > span {
	display: inline-block;
	transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.hp-hero__mask > span:nth-child(2) > span { transition-delay: .12s; }
.hp-hero__mask > span:nth-child(3) > span { transition-delay: .24s; }

.hp-loading .hp-hero__mask > span > span {
	transform: translateY(110%);
}

/* Пока идёт прелоадер, страницу не прокручиваем */
html.hp-loading,
html.hp-loading body {
	overflow: hidden;
}

.hp-hero--reveal .hp-hero__content {
	z-index: 3;
	opacity: var(--hp-ui, 0);
	transform: translateY(calc((1 - var(--hp-ui, 0)) * 40px));
	pointer-events: none;
}

.hp-hero--reveal.hp-hero--ui .hp-hero__content {
	pointer-events: auto;
}

/* Кнопки при загрузке не анимируем — их показывает прокрутка */
.hp-hero--reveal .hp-hero__buttons > *,
.hp-hero--reveal .hp-hero__scroll {
	animation: none;
}

.hp-hero--reveal .hp-hero__hint {
	position: absolute;
	left: 50%;
	bottom: 28px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	color: var(--hp-white);
	transform: translateX(-50%);
	opacity: var(--hp-hint, 1);
	pointer-events: none;
}

.hp-hero--reveal .hp-hero__hint svg {
	animation: hp-bounce 2s infinite;
}

@media (max-width: 768px) {
	.hp-hero--reveal { height: 260vh; }
	.hp-hero--reveal .hp-hero__mask { font-size: 16vw; }
}

/* ---------- Финальный кадр первого экрана ----------
 * Видео на весь экран плавно сменяется фото (например, лобби), затем по очереди
 * появляются заголовок, текст и кнопки. Класс hp-hero--final ставит js/home.js.
 */
.hp-hero__final {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.4s ease, transform 9s cubic-bezier(.22, .61, .36, 1);
}

.hp-hero--final .hp-hero__final {
	opacity: 1;
	transform: scale(1);
}

.hp-hero__title {
	max-width: 1240px;
	margin: 0 0 18px;
	font-family: var(--hp-font-display);
	font-size: clamp(40px, 5.2vw, 80px);
	font-weight: 500;
	line-height: 1.05;
	text-align: center;
	color: var(--hp-white);
}

.hp-hero__subtitle {
	max-width: 680px;
	margin: 0 0 40px;
	font-size: var(--fs-base);
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .88);
}

/* Есть заголовок — кнопки рядом по центру, а не по краям */
.hp-hero__title ~ .hp-hero__buttons,
.hp-hero__subtitle ~ .hp-hero__buttons {
	justify-content: center;
	margin-bottom: 0;
}

/* С финальным кадром: всё содержимое по центру экрана, стрелка внизу */
.hp-hero--has-final .hp-hero__content {
	top: 0;
	justify-content: center;
	padding-bottom: 0;
}

.hp-hero--has-final .hp-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
}

/* Пока финального кадра нет — заголовок, текст и кнопки спрятаны; потом выплывают по очереди */
.hp-hero--reveal.hp-hero--has-final .hp-hero__content > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}

.hp-hero--reveal.hp-hero--has-final.hp-hero--final .hp-hero__content > * {
	opacity: 1;
	transform: none;
}

.hp-hero--final .hp-hero__content > :nth-child(1) { transition-delay: .7s; }
.hp-hero--final .hp-hero__content > :nth-child(2) { transition-delay: .9s; }
.hp-hero--final .hp-hero__content > :nth-child(3) { transition-delay: 1.1s; }
.hp-hero--final .hp-hero__content > :nth-child(4) { transition-delay: 1.3s; }

.hp-hero--has-final .hp-hero__scroll {
	transform: translateX(-50%) translateY(28px);
}

.hp-hero--has-final.hp-hero--final .hp-hero__scroll {
	transform: translateX(-50%);
}

@media (max-width: 768px) {
	.hp-hero__subtitle { margin-bottom: 28px; }
}

/* Шапка спрятана, пока на экране буквы; выезжает, когда видео раскрылось */
.hp-header {
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .2s;
}

.hp-header--hidden {
	transform: translateY(-100%);
	box-shadow: none;
}

/* Видео «летит» из первого экрана на место в блоке «Об отеле» (координаты ставит js/home.js) */
.hp-hero--reveal .hp-hero__frame.hp-hero__frame--flying {
	position: fixed;
	inset: auto;
	z-index: 50;
	clip-path: none;
	overflow: hidden;
	will-change: left, top, width, height;
}

.hp-hero__frame--docked {
	visibility: hidden;
}

/* Место посадки: своё видео/фото появляется в момент, когда прилетевшее «садится» */
.hp-about__video--dock > video,
.hp-about__video--dock > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: opacity .25s ease;
}

/* Нет ни видео, ни фото — текст «Об отеле» на всю ширину */
.hp-about__inner--text-only {
	grid-template-columns: 1fr;
}

/* Пока видео не прилетело — место пустое, без серой заглушки (класс ставит js/home.js; без скрипта видео просто видно) */
.hp-about__video--waiting {
	background: transparent;
}

.hp-about__video--waiting > video,
.hp-about__video--waiting > img {
	opacity: 0;
}

.hp-about__video--waiting.hp-about__video--docked > video,
.hp-about__video--waiting.hp-about__video--docked > img {
	opacity: 1;
}

/* ---------- Прелоадер (только главная, один раз за визит) ---------- */
.hp-preloader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hp-accent);
	color: var(--hp-white);
	transition: transform .9s cubic-bezier(.76, 0, .24, 1);
}

.hp-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	transition: opacity .35s ease, transform .5s ease;
}

.hp-preloader__logo {
	width: 120px;
	height: auto;
	filter: brightness(0) invert(1); /* логотип белым силуэтом */
	animation: hp-preloader-pulse 1.8s ease-in-out infinite;
}

@keyframes hp-preloader-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .7; transform: scale(.96); }
}

.hp-preloader__bar {
	width: 180px;
	height: 2px;
	background: rgba(255, 255, 255, .25);
	overflow: hidden;
}

.hp-preloader__bar span {
	display: block;
	height: 100%;
	background: var(--hp-white);
	transform: scaleX(0);
	transform-origin: left;
}

.hp-preloader__count {
	position: absolute;
	right: 40px;
	bottom: 24px;
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: opacity .35s ease;
}

.hp-preloader__count::after {
	content: "%";
	margin-left: 4px;
	font-size: .45em;
	font-weight: 500;
	vertical-align: top;
}

.hp-preloader--done {
	transform: translateY(-100%);
	transition-delay: .25s;
}

.hp-preloader--done .hp-preloader__inner {
	opacity: 0;
	transform: translateY(-20px);
}

.hp-preloader--done .hp-preloader__count {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hp-preloader,
	.hp-preloader__inner {
		transition: opacity .3s ease;
	}
	.hp-preloader--done {
		transform: none;
		opacity: 0;
	}
	.hp-preloader__logo {
		animation: none;
	}
}

/* ---------- 2. Цифры ---------- */

.hp-stats__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0;
	padding: 87px 0;
	list-style: none;
}

.hp-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 16px;
	text-align: center;
	color: var(--hp-accent);
	list-style: none;
}

.hp-stats__item + .hp-stats__item {
	border-left: 1px solid var(--hp-accent);
}

.hp-stats__value {
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.2;
}

.hp-stats__label {
	max-width: 180px;
	font-size: var(--fs-m);
	line-height: 1.2;
}

/* ---------- 3. Об отеле ---------- */

.hp-about__inner {
	display: grid;
	grid-template-columns: 1fr 570px;
	align-items: center;
	gap: 58px;
	padding-top: 46px;
	padding-bottom: 46px;
}

.hp-about__text {
	padding-left: 29px;
	font-size: var(--fs-base);
	line-height: 1.22;
	text-align: justify;
}

.hp-about__text p {
	margin: 0 0 1em;
}

.hp-about__text p:last-child {
	margin-bottom: 0;
}

.hp-about__text strong {
	font-weight: 700;
}

.hp-about__video {
	position: relative;
	aspect-ratio: 570 / 291;
	border-radius: var(--hp-radius);
	overflow: hidden; /* без фона: пока видео нет, место просто пустое */
}

.hp-about__video video,
.hp-about__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* ---------- Карточки (номера, ресторан) ---------- */

.hp-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.hp-card {
	position: relative;
	display: block;
	border-radius: var(--hp-radius);
	background: var(--hp-accent);
	overflow: hidden;
	color: var(--hp-white);
}

.hp-card--room {
	aspect-ratio: 437 / 329;
}

.hp-card--resto {
	aspect-ratio: 442 / 434;
	border-radius: var(--hp-radius);
}

.hp-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s;
}

a.hp-card:hover .hp-card__img {
	transform: scale(1.04);
}

.hp-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .75) 100%);
	pointer-events: none;
}

.hp-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 0 28px 28px;
	line-height: 1.2;
}

.hp-card__title {
	font-size: var(--fs-m);
	font-weight: 500;
}

.hp-card__subtitle {
	font-size: var(--fs-m);
}

.hp-card--resto .hp-card__caption {
	align-items: center;
	padding-bottom: 48px;
	text-align: center;
}

.hp-card--resto .hp-card__title {
	font-size: var(--fs-l);
	font-weight: 500;
	text-transform: uppercase;
}

.hp-card--resto .hp-card__subtitle {
	margin-top: 4px;
	font-size: var(--fs-m);
}

/* ---------- 4. Номера ---------- */

/* Горизонтальная лента: первая карточка — по краю контента, лента уходит за правый край экрана */
.hp-rooms {
	--rooms-edge: max(var(--hp-gutter), calc((100vw - 1440px) / 2 + var(--hp-gutter)));
	padding: 108px 0;
	overflow: hidden;
}

.hp-rooms__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.hp-rooms .hp-title {
	margin: 0;
	text-align: left;
}

.hp-rooms__nav {
	display: flex;
	gap: 12px;
}

.hp-rooms__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--hp-accent);
	border-radius: 50%;
	background: transparent;
	color: var(--hp-accent);
	cursor: pointer;
	transition: background-color .2s, color .2s, opacity .2s;
}

.hp-rooms__arrow:hover:not(:disabled) {
	background: var(--hp-accent);
	color: var(--hp-white);
}

.hp-rooms__arrow:disabled {
	opacity: .3;
	cursor: default;
}

.hp-rooms__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(280px, 30vw, 430px);
	gap: 24px;
	padding: 0 var(--rooms-edge) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--rooms-edge);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hp-rooms__track::-webkit-scrollbar {
	display: none;
}

.hp-room-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--hp-radius);
	background: #2e2e2e;
	overflow: hidden;
	scroll-snap-align: start;
	color: var(--hp-white);
}

.hp-room-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.hp-room-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7) 100%);
}

.hp-room-card:hover .hp-room-card__img {
	transform: scale(1.05);
}

.hp-room-card__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
}

.hp-room-card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0; /* иначе длинное название не переносится и выталкивает стрелку за край */
}

.hp-room-card__title {
	font-family: var(--hp-font-display);
	font-size: calc(var(--fs-m) * 1.35);
	font-weight: 600;
	line-height: 1.1;
}

.hp-room-card__price {
	font-size: var(--fs-s);
	color: rgba(255, 255, 255, .85);
}

/* Круглая стрелка: при наведении заливается белым */
.hp-room-card__go {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	transition: background-color .25s, color .25s, transform .25s;
}

.hp-room-card:hover .hp-room-card__go {
	background: var(--hp-white);
	color: var(--hp-accent);
	transform: rotate(45deg);
}

.hp-rooms__more {
	margin-top: 48px;
}

@media (max-width: 768px) {
	.hp-rooms__head { margin-bottom: 24px; }
	.hp-rooms__nav { display: none; } /* на телефоне — свайп */
	.hp-rooms__track { grid-auto-columns: 78vw; gap: 14px; }
	.hp-room-card__info { padding: 18px; }
}

/* ---------- 5. Конференц-залы ---------- */

.hp-conf {
	padding: 43px 0 82px;
}

.hp-conf__grid {
	display: grid;
	grid-template-columns: 681fr 665fr;
	gap: 14px;
}

.hp-conf__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 56px 58px 50px;
	border-radius: var(--hp-radius);
	background: var(--hp-accent);
	color: var(--hp-white);
}

.hp-conf__card-title {
	max-width: 557px;
	margin: 0 0 18px;
	font-size: var(--fs-m);
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
}

.hp-conf__card-text {
	max-width: 557px;
	margin: 0 0 36px;
	font-size: var(--fs-base);
	line-height: 1.2;
}

.hp-conf__card .hp-btn {
	margin-top: auto;
}

.hp-conf__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	list-style: none;
	overflow: hidden;
}

.hp-conf__fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 36px 24px;
	text-align: center;
	list-style: none;
}

.hp-conf__fact:nth-child(odd) {
	border-right: 1px solid var(--hp-line);
}

.hp-conf__fact:nth-child(-n + 2) {
	border-bottom: 1px solid var(--hp-line);
}

.hp-conf__fact-value {
	font-size: var(--fs-l);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--hp-accent);
}

.hp-conf__fact-label {
	max-width: 260px;
	font-size: var(--fs-m);
	line-height: 1.2;
}

/* ---------- 6. Ресторан и бары ---------- */

.hp-resto {
	padding: 43px 0 70px;
}

.hp-resto .hp-title {
	margin-bottom: 63px;
}

.hp-cards--resto {
	gap: 20px;
}

/* ---------- 7. Галерея ---------- */

.hp-gallery {
	padding: 43px 0 65px;
}

.hp-gallery__grid {
	display: grid;
	grid-template-columns: 291fr 355fr 355fr 355fr;
	grid-auto-rows: 237px;
	gap: 10px;
	margin: 0 -12px;
}

.hp-gallery__item {
	display: block;
	border-radius: var(--hp-radius);
	overflow: hidden;
}

.hp-gallery__item:first-child {
	grid-row: span 2;
}

.hp-gallery__item--hidden {
	display: none;
}

.hp-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s;
}

.hp-gallery__item:hover img {
	transform: scale(1.04);
}

.hp-gallery .hp-center {
	margin-top: 56px;
}

.hp-admin-hint {
	margin: 0;
	padding: 24px;
	border: 2px dashed var(--hp-accent);
	border-radius: var(--hp-radius-sm);
	font-size: var(--fs-base);
	text-align: center;
}

.hp-admin-hint a {
	color: var(--hp-accent);
	text-decoration: underline;
}

/* ---------- 8. Услуги ---------- */

.hp-services {
	padding: 24px 0 43px;
}

.hp-services__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
	padding: 64px 12px;
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	list-style: none;
}

.hp-services__list li {
	display: flex;
	list-style: none;
}

.hp-services__list li + li {
	border-left: 1px solid var(--hp-accent);
}

.hp-services__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 0 12px;
	text-align: center;
	font-size: var(--fs-base);
	line-height: 1.2;
	color: var(--hp-text);
}

.hp-services__icon {
	width: auto;
	max-width: 92px;
	height: 60px;
	object-fit: contain;
}

a.hp-services__item:hover .hp-services__label {
	color: var(--hp-accent);
}

/* ---------- 9. Контакты ---------- */

.hp-contacts {
	padding: 43px 0 75px;
}

.hp-contacts .hp-title--xl {
	margin-bottom: 89px;
}

.hp-contacts__grid {
	display: grid;
	grid-template-columns: 1fr 639px;
	gap: 40px;
	padding-left: 66px;
}

.hp-contacts__heading {
	margin: 0 0 28px;
	font-size: var(--fs-l);
	font-weight: 500;
	line-height: 1.2;
}

.hp-contacts__list {
	margin: 0 0 44px;
	padding-left: 22px;
	font-size: var(--fs-base);
	line-height: 1.22;
}

.hp-contacts__list li {
	list-style: disc;
}

.hp-contacts__list a {
	color: inherit;
}

.hp-contacts__list a:hover {
	color: var(--hp-accent);
}

.hp-contacts__map {
	position: relative;
	aspect-ratio: 639 / 523;
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	overflow: hidden;
}

.hp-contacts__map-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	object-fit: cover;
}

.hp-contacts__map-link {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--hp-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	font-size: var(--fs-s);
	color: var(--hp-accent);
}

/* ---------- Подвал ----------
 * Бордовый, на всех страницах одинаковый. На главной сверху ещё блок с контактами и картой (.hp-footer--map).
 */

.hp-footer {
	margin-top: 96px;
	padding: 72px 0 32px;
	background: var(--hp-accent);
	color: rgba(255, 255, 255, .78);
}

.hp-footer a {
	color: inherit;
	transition: color .2s, opacity .2s;
}

.hp-footer a:hover {
	color: var(--hp-white);
}

/* Главная: контакты + карта */
.hp-footer__top {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	align-items: center;
	gap: 64px;
	padding-bottom: 64px;
	margin-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.hp-footer__eyebrow {
	margin: 0 0 14px;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.hp-footer__title {
	margin: 0 0 32px;
	font-family: var(--hp-font-display);
	font-size: calc(var(--fs-xl) * 1.2);
	font-weight: 500;
	line-height: 1.05;
	color: var(--hp-white);
}

.hp-footer__map {
	aspect-ratio: 16 / 11;
	border-radius: var(--hp-radius);
}

.hp-footer .hp-contacts__map-link,
.hp-footer .hp-contacts__map-link:hover {
	color: var(--hp-accent);
}

/* Колонки */
.hp-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 48px;
}

.hp-footer--map .hp-footer__grid {
	grid-template-columns: 1.3fr 1fr 1fr;
}

.hp-footer__logo {
	display: block;
	width: auto;
	height: 56px;
	filter: brightness(0) invert(1); /* белый логотип на бордовом */
}

.hp-footer__text {
	max-width: 340px;
	margin: 20px 0 24px;
	font-size: var(--fs-s);
	line-height: 1.6;
}

.hp-footer__heading {
	margin: 0 0 20px;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hp-white);
}

.hp-footer__menu,
.hp-footer__contacts,
.hp-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-footer__menu li + li {
	margin-top: 12px;
}

.hp-footer__menu a {
	font-size: var(--fs-s);
}

.hp-footer__menu li::before {
	display: none;
}

.hp-footer__contacts li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--fs-s);
	line-height: 1.45;
}

.hp-footer__contacts li + li {
	margin-top: 14px;
}

.hp-footer__contacts .hp-icon {
	margin-top: 1px;
	color: var(--hp-white);
	opacity: .85;
}

.hp-footer__contacts--lg li {
	font-size: var(--fs-base);
}

.hp-footer__contacts--lg li + li {
	margin-top: 18px;
}

.hp-footer__contacts--lg .hp-icon {
	width: 22px;
	height: 22px;
}

/* Кнопка WhatsApp — белая на бордовом */
.hp-btn.hp-footer__whatsapp {
	gap: 10px;
	min-height: 52px;
	margin-top: 28px;
	padding: 0 26px;
	background: var(--hp-white);
	font-size: var(--fs-s);
	font-weight: 500;
	white-space: nowrap;
	color: var(--hp-accent);
}

.hp-btn.hp-footer__whatsapp:hover {
	color: var(--hp-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.hp-footer__whatsapp .hp-icon {
	color: #0fa40f;
}

/* Соцсети — круглые кнопки с иконками */
.hp-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hp-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	color: var(--hp-white);
	transition: background-color .2s, color .2s, border-color .2s;
}

.hp-footer__social a:hover {
	border-color: var(--hp-white);
	background: var(--hp-white);
	color: var(--hp-accent);
}

.hp-footer__copyright {
	margin: 56px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: var(--fs-xs);
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .6);
}
/* ---------- Просмотр фото ---------- */

.hp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
}

.hp-lightbox[hidden] {
	display: none;
}

.hp-lightbox__img {
	max-width: 90vw;
	max-height: 88vh;
	border-radius: var(--hp-radius-sm);
	object-fit: contain;
}

.hp-lightbox button {
	position: absolute;
	padding: 0 16px;
	border: 0;
	background: none;
	font-size: var(--fs-xl);
	line-height: 1;
	color: var(--hp-white);
	cursor: pointer;
}

.hp-lightbox__close { top: 16px; right: 16px; }
.hp-lightbox__prev { left: 8px; }
.hp-lightbox__next { right: 8px; }

/* =========================================================
   Внутренние страницы: страница «Номера» (/rooms/)
   ========================================================= */

.hp-main--inner {
	padding-top: var(--hp-header-h);
}

/* Первый экран с фото */
.hp-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 428px;
	background: #2e2e2e;
	overflow: hidden;
}

.hp-page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	animation: hp-hero-zoom 18s ease-out both;
}

.hp-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.hp-page-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 32px;
	padding-bottom: 56px;
	text-align: center;
}

.hp-page-hero__subtitle {
	margin-bottom: 72px;
	color: rgba(255, 255, 255, .75);
}

.hp-page-hero__title {
	margin-bottom: 24px;
	font-size: var(--fs-xl);
	color: var(--hp-white);
}

/* Кнопки-«таблетки» с номерами */
.hp-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-pills li {
	list-style: none;
}

.hp-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 170px;
	min-height: 44px;
	padding: 4px 16px;
	border-radius: 999px;
	background: var(--hp-white);
	font-size: var(--fs-s);
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	color: var(--hp-text);
	transition: background-color .2s, color .2s, transform .2s;
}

.hp-pill:hover {
	background: var(--hp-accent);
	color: var(--hp-white);
	transform: translateY(-2px);
}

/* Сетка номеров */
.hp-room-list {
	padding: 74px 0 120px;
}

.hp-cards--room-list {
	gap: 10px;
}

.hp-card--room-item {
	aspect-ratio: 427 / 321;
	scroll-margin-top: calc(var(--hp-header-h) + 24px);
}

.hp-card__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hp-card__caption--row {
	z-index: 3;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 0 18px 22px;
	pointer-events: none;
}

.hp-card__caption--row a {
	pointer-events: auto;
}

.hp-card__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hp-card--room-item .hp-card__title {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.25;
}

.hp-card__link {
	color: inherit;
}

.hp-card--room-item .hp-card__subtitle {
	font-size: var(--fs-base);
	opacity: .9;
}

.hp-card__note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: var(--fs-xs);
	opacity: .7;
}

.hp-btn--sm {
	flex-shrink: 0;
	min-width: 166px;
	min-height: 43px;
	margin-bottom: 18px;
	padding: 0 20px;
	font-size: var(--fs-xs);
	font-weight: 500;
}

/* Подсветка карточки после нажатия на «таблетку» */
.hp-card--flash {
	animation: hp-flash 1.6s ease;
}

@keyframes hp-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(124, 18, 46, 0); }
	30% { box-shadow: 0 0 0 6px rgba(124, 18, 46, .55); }
}

/* Best Western Rewards */
.hp-rewards {
	padding: 40px 0 120px;
}

.hp-rewards__inner {
	display: grid;
	grid-template-columns: 280px 1fr;
	align-items: center;
	gap: 44px;
	max-width: 1240px;
	margin: 0 auto 80px;
}

.hp-rewards__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.hp-rewards__logo-text {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-l);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	color: #b08d3c;
}

.hp-rewards__logo-text small {
	font-size: var(--fs-base);
	letter-spacing: 0;
	color: #1d4e9a;
}

.hp-rewards__text {
	margin: 0;
	font-size: var(--fs-m);
	line-height: 1.25;
	text-align: justify;
}

/* =========================================================
   Страница номера
   ========================================================= */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.hp-room-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 594px;
	background: #2e2e2e;
	overflow: hidden;
}

.hp-room-hero__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .55) 100%);
}

.hp-room-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	max-width: 1140px;
	padding-bottom: 66px;
	color: var(--hp-white);
}

.hp-room-hero__content .hp-btn {
	margin-bottom: 52px;
	cursor: pointer;
}

.hp-room-hero__title {
	margin: 0;
	font-size: var(--fs-l);
	font-weight: 500;
	line-height: 1.2;
}

.hp-room-hero__price {
	margin: 2px 0 0;
	font-size: var(--fs-l);
	line-height: 1.2;
	opacity: .9;
}

.hp-room-hero__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	font-size: var(--fs-base);
	opacity: .7;
}

/* Основная часть: слева описание, справа форма */
.hp-room-body {
	padding: 64px 0 80px;
}

.hp-room-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 458px;
	align-items: start;
	gap: 66px;
	max-width: 1360px;
}

.hp-room-photos {
	display: grid;
	grid-template-columns: 2.25fr 1fr 1fr;
	height: 256px;
	margin-bottom: 48px;
}

.hp-room-photos__item {
	position: relative;
	display: block;
	overflow: hidden;
}

.hp-room-photos__item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s;
}

.hp-room-photos__item:hover img {
	transform: scale(1.05);
}

.hp-room-photos__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: var(--hp-white);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.hp-room-desc {
	font-size: var(--fs-base);
	line-height: 1.3;
	text-align: justify;
}

.hp-room-desc p {
	margin: 0 0 1.1em;
}

.hp-room-amenities__title {
	margin: 56px 0 24px;
	font-size: var(--fs-base);
	font-weight: 500;
}

.hp-room-amenities {
	columns: 2;
	column-gap: 40px;
	margin: 0 0 40px;
	padding: 0;
	font-size: var(--fs-s);
	line-height: 1.4;
	list-style: none;
}

.hp-room-amenities li {
	position: relative;
	margin-bottom: 4px;
	padding-left: 18px;
	break-inside: avoid;
	list-style: none;
}

.hp-room-amenities li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .4em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hp-accent);
}

.hp-room-rewards {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 64px;
	padding: 10px 14px;
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
}

.hp-room-rewards img {
	width: 116px;
	height: auto;
}

.hp-room-rewards p {
	margin: 0;
	font-size: var(--fs-s);
	line-height: 1.4;
}

.hp-room-rewards__logo-text {
	flex-shrink: 0;
	font-size: var(--fs-base);
}

.hp-room-rewards__logo-text small {
	font-size: var(--fs-xs);
}

.hp-room-rules summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: var(--fs-base);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.hp-room-rules summary::-webkit-details-marker {
	display: none;
}

.hp-room-rules summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}

.hp-room-rules:not([open]) summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.hp-room-rules__content {
	max-width: 520px;
	font-size: var(--fs-s);
	line-height: 1.5;
}

.hp-room-rules__content p {
	margin: 0 0 1.4em;
}

/* Ссылка на страницу правил под текстом */
.hp-room-rules__link {
	display: inline-block;
	font-size: var(--fs-s);
	font-weight: 500;
	color: var(--hp-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hp-room-rules__link:hover {
	text-decoration: none;
}

/* Форма брони */
.hp-room-body__aside {
	position: sticky;
	top: calc(var(--hp-header-h) + 20px);
	scroll-margin-top: calc(var(--hp-header-h) + 20px);
}

.hp-booking {
	padding: 36px 52px 24px;
	border: 1px solid var(--hp-accent);
	border-radius: var(--hp-radius);
	background: var(--hp-white);
}

.hp-booking__title {
	margin: 0 0 22px;
	font-size: var(--fs-base);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: var(--hp-accent);
}

.hp-booking__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.hp-booking__row--guests {
	margin: 4px 0 14px;
}

.hp-booking__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
}

.hp-booking__field > span {
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
}

.hp-booking__row:first-of-type .hp-booking__field > span {
	text-align: center;
}

.hp-booking__field em {
	font-size: var(--fs-xs);
	font-weight: 400;
}

.hp-booking__field input {
	width: 100%;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--hp-text);
	border-radius: var(--hp-radius-sm);
	font: 14px var(--hp-font);
	color: var(--hp-text);
	background: var(--hp-white);
}

.hp-booking__row:first-of-type input {
	height: 42px;
	border-radius: var(--hp-radius-sm);
}

/* «Пожелания» — высокое поле на несколько строк, можно растянуть ещё */
.hp-booking__field textarea {
	width: 100%;
	min-height: 110px;
	padding: 10px 14px;
	border: 1px solid var(--hp-text);
	border-radius: var(--hp-radius-sm);
	font: 14px/1.4 var(--hp-font);
	color: var(--hp-text);
	background: var(--hp-white);
	resize: vertical;
}

.hp-booking__field textarea:focus,
.hp-booking__field input:focus {
	border-color: var(--hp-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(124, 18, 46, .15);
}

.hp-booking__field--inline {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.hp-booking__field--inline input {
	width: 52px;
	height: 28px;
	padding: 0 6px;
	text-align: center;
}

.hp-booking__field--invalid input,
.hp-booking__consent.hp-booking__field--invalid {
	border-color: #d32f2f;
	color: #d32f2f;
}

.hp-booking__trap {
	position: absolute;
	left: -9999px;
}

.hp-booking__channels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin: 18px 0 16px;
	padding: 0;
	border: 0;
}

.hp-booking__channels legend {
	grid-column: 1 / -1;
	width: 100%;
	margin-bottom: 14px;
	font-size: var(--fs-xs);
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

.hp-booking__channel input {
	position: absolute;
	opacity: 0;
}

.hp-booking__channel > span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	border: 2px solid transparent;
	border-radius: var(--hp-radius-sm);
	color: var(--hp-white);
	cursor: pointer;
	opacity: .4;
	filter: grayscale(.6);
	transition: opacity .2s, filter .2s, box-shadow .2s, transform .2s;
}

.hp-booking__channel:hover > span {
	opacity: .7;
}

.hp-booking__channel--whatsapp > span { background: #0fa40f; }
.hp-booking__channel--email > span { background: #a8d4ea; }

/* Выбранный способ связи: бордовая обводка и галочка, невыбранный — бледный */
.hp-booking__channel input:checked + span {
	opacity: 1;
	filter: none;
	box-shadow: 0 0 0 2px var(--hp-white), 0 0 0 5px var(--hp-accent);
	transform: scale(1.03);
}

.hp-booking__channel input:checked + span::after {
	content: "";
	position: absolute;
	top: -9px;
	right: -9px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
	box-shadow: 0 0 0 2px var(--hp-white);
}

.hp-booking__channel input:focus-visible + span {
	outline: 2px solid var(--hp-accent);
	outline-offset: 3px;
}

.hp-booking__total {
	margin-bottom: 14px;
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.hp-booking__total p {
	margin: 0;
}

.hp-booking__total strong {
	text-transform: uppercase;
}

.hp-booking__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 18px;
	font-size: var(--fs-xs);
	line-height: 1.4;
	cursor: pointer;
}

.hp-booking__consent input {
	flex-shrink: 0;
	margin: 1px 0 0;
	accent-color: var(--hp-accent);
}

.hp-booking__consent a {
	color: inherit;
	text-decoration: underline;
}

.hp-booking__submit {
	display: flex;
	min-width: 244px;
	min-height: 62px;
	margin: 0 auto 14px;
	font-size: var(--fs-base);
	font-weight: 500;
	cursor: pointer;
}

.hp-booking__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.hp-booking__status {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--hp-radius-sm);
	background: #e8f5e9;
	font-size: var(--fs-s);
	text-align: center;
	color: #1b5e20;
}

.hp-booking__status--error {
	background: #fdecea;
	color: #b71c1c;
}

.hp-booking__disclaimer {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.4;
	text-align: center;
}

.hp-btn--whatsapp {
	gap: 12px;
	width: 100%;
	min-height: 59px;
	margin-top: 14px;
	border-radius: 999px;
	background: #0fa40f;
	font-size: var(--fs-base);
	font-weight: 500;
}

.hp-btn--whatsapp:hover {
	background: #0b8a0b;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 164, 15, .3);
}

.hp-room-similar {
	padding: 40px 0 80px;
}

/* =========================================================
   Страница ресторана / бара
   ========================================================= */

.hp-venue-hero {
	min-height: 600px;
}

.hp-venue-hero .hp-page-hero__content {
	padding-top: 0;
	padding-bottom: 0;
}

/* Крупное название — «витринный» размер, как буквы на главной (вне шкалы текста) */
.hp-venue-hero__title {
	margin: 0;
	font-size: clamp(56px, 8.5vw, 124px);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--hp-white);
}

.hp-venue-hero__subtitle {
	margin: 24px 0 0;
	font-size: var(--fs-m);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--hp-white);
}

.hp-venue-title {
	margin: 0 0 24px;
	font-size: var(--fs-l);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--hp-text);
}

.hp-venue-text {
	font-size: var(--fs-base);
	line-height: 1.4;
}

.hp-venue-text p {
	margin: 0 0 1em;
}

.hp-venue-hours {
	margin: 8px 0 0;
	font-size: var(--fs-base);
}

/* Описание + два фото */
.hp-venue-intro {
	padding: 56px 0;
}

.hp-venue-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 80px;
	max-width: 1280px;
}

.hp-venue-intro__grid--text-only {
	grid-template-columns: 1fr;
}

.hp-venue-intro__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.hp-venue-intro__photo,
.hp-venue-block__photo {
	display: block;
	border-radius: var(--hp-radius);
	overflow: hidden;
}

.hp-venue-intro__photo {
	aspect-ratio: 2 / 3;
}

.hp-venue-intro__photo img,
.hp-venue-block__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s;
}

.hp-venue-intro__photo:hover img,
.hp-venue-block__photo:hover img {
	transform: scale(1.04);
}

/* Блок «фото + текст» */
.hp-venue-block {
	padding: 40px 0;
}

.hp-venue-block__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 80px;
	max-width: 1280px;
}

.hp-venue-block__photo {
	aspect-ratio: 16 / 9;
}

.hp-venue-block__grid.hp-venue-intro__grid--text-only {
	grid-template-columns: 1fr;
}

/* Меню: карточки */
.hp-venue-menu {
	padding: 64px 0;
}

.hp-venue-menu__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.hp-venue-menu__list--4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.hp-venue-menu__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 24px 36px;
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	text-align: center;
	list-style: none;
}

.hp-venue-menu__icon {
	margin-bottom: 8px;
	color: var(--hp-text);
}

.hp-venue-menu__title {
	margin: 0 0 24px;
	font-size: var(--fs-m);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.hp-venue-menu__list--4 .hp-venue-menu__title {
	font-size: var(--fs-base);
}

.hp-venue-menu__item {
	margin: 0 0 14px;
	font-size: var(--fs-s);
	line-height: 1.35;
}

/* Галерея-карусель на всю ширину: активное фото в центре крупно, соседние по бокам меньше и затемнены.
   Позицию каждого фото (--d: −2…2 относительно активного) ставит js/home.js. */
.hp-venue-gallery {
	padding: 40px 0;
}

.hp-venue-gallery--slider {
	--slide-w: 50vw;      /* ширина фото */
	--slide-h: 480px;     /* высота активного фото */
	--side-scale: .8;     /* боковые — меньше */
	--side-step: 45vw;    /* сдвиг соседнего фото от центра */
	position: relative;
	margin: 24px 0 40px;
	padding: 0;
	overflow: hidden;
	touch-action: pan-y;
}

.hp-venue-slider__stage {
	position: relative;
	height: var(--slide-h);
}

.hp-venue-slider__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--slide-w);
	height: 100%;
	overflow: hidden;
	transform: translateX(calc(-50% + var(--d, 0) * var(--side-step))) scale(var(--s, 1));
	opacity: var(--o, 0);
	z-index: var(--z, 0);
	transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
	pointer-events: var(--pe, none);
	cursor: pointer;
}

.hp-venue-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* Затемнение боковых фото */
.hp-venue-slider__shade {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--shade, 0);
	transition: opacity .7s ease;
	pointer-events: none;
}

.hp-venue-slider__slide.is-active {
	cursor: zoom-in;
}

.hp-venue-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	padding: 12px;
	border: 0;
	background: none;
	color: var(--hp-white);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform .2s;
}

.hp-venue-slider__arrow:hover {
	transform: translateY(-50%) scale(1.1);
}

.hp-venue-slider__arrow--prev { left: calc(50vw - var(--slide-w) / 2 + 12px); }
.hp-venue-slider__arrow--next { right: calc(50vw - var(--slide-w) / 2 + 12px); }

/* Галерея: коллаж в скруглённой рамке (размеры плиток повторяются по кругу) */
.hp-venue-collage {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 240px;
	border-radius: var(--hp-radius);
	overflow: hidden;
	max-width: 1360px;
	margin: 0 auto;
}

.hp-venue-collage__item {
	display: block;
	grid-column: span 3;
	overflow: hidden;
}

.hp-venue-collage__item:nth-child(5n + 1) { grid-column: span 6; }
.hp-venue-collage__item:nth-child(5n + 4) { grid-column: span 4; grid-row: span 2; }
.hp-venue-collage__item:nth-child(5n + 5) { grid-column: span 8; grid-row: span 2; }

.hp-venue-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s;
}

.hp-venue-collage__item:hover img {
	transform: scale(1.04);
}

/* Кнопки связи */
.hp-venue-cta {
	padding: 40px 0 80px;
}

.hp-venue-cta__box {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 32px;
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	text-align: center;
}

.hp-venue-cta__title {
	max-width: 780px;
	margin: 0 auto 36px;
	font-size: var(--fs-l);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--hp-accent);
}

.hp-venue-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.hp-venue-cta__buttons .hp-btn {
	gap: 16px;
	min-width: 270px;
	min-height: 72px;
	border-radius: 999px;
	font-size: var(--fs-base);
	text-transform: uppercase;
}

.hp-btn--outline-accent {
	border-color: var(--hp-accent);
	background: var(--hp-white);
	color: var(--hp-accent);
}

.hp-btn--outline-accent:hover {
	background: var(--hp-accent);
	color: var(--hp-white);
}

.hp-venue-cta__whatsapp {
	width: auto;
	margin-top: 0;
}

/* =========================================================
   Страница «О нас»
   ========================================================= */

.hp-about-hero {
	min-height: 520px;
}

.hp-about-hero .hp-page-hero__content {
	padding-top: 0;
	padding-bottom: 0;
}

.hp-about-hero__title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 400;
	line-height: 1.15;
	color: var(--hp-white);
}

.hp-about-intro .hp-venue-intro__grid {
	grid-template-columns: 1fr 1fr;
	gap: 90px;
}

.hp-about-text {
	text-align: justify;
}

.hp-about__video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Полоса преимуществ */
.hp-about-facts {
	padding: 48px 0 72px;
}

.hp-about-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-about-facts__list li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 0 20px;
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	list-style: none;
}

.hp-about-facts__list li + li {
	border-left: 1px solid var(--hp-accent);
}

/* Расположение: текст слева, карта до правого края экрана */
.hp-about-location {
	padding: 24px 0 72px;
}

.hp-about-location__grid {
	display: grid;
	grid-template-columns: 1fr 639px;
	align-items: center;
	gap: 60px;
}

.hp-about-location__text {
	max-width: 620px;
}

/* Карта — как на главной (.hp-contacts__map): скруглённая, с кнопкой «Открыть в 2ГИС» */
/* Часть большой семьи */
.hp-about-family {
	padding: 40px 0 96px;
	text-align: center;
}

.hp-about-family__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hp-about-family__text {
	max-width: 1000px;
	margin: 0 0 32px;
	font-size: var(--fs-base);
	line-height: 1.4;
}

.hp-about-family__logo {
	width: 270px;
	height: auto;
	margin-bottom: 48px;
}

.hp-about-family__list-title {
	margin: 0 0 18px;
	font-size: var(--fs-base);
	font-weight: 500;
	text-transform: uppercase;
}

.hp-about-family__list {
	margin: 0 0 56px;
	padding-left: 20px;
	font-size: var(--fs-base);
	line-height: 1.4;
	text-align: left;
}

.hp-about-family__list li {
	list-style: disc;
}

.hp-about-family__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}

/* =========================================================
   Страница «Контакты»
   ========================================================= */

.hp-contacts-page {
	padding: 64px 0 80px;
}

.hp-contacts-page .hp-title--xl {
	margin-bottom: 56px;
}

.hp-contacts-page__grid {
	display: grid;
	grid-template-columns: 1fr 540px;
	align-items: center;
	gap: 60px;
	max-width: 1280px;
	margin: 0 auto;
}

.hp-contacts-page__info {
	padding-left: 64px;
}

.hp-contacts-page__heading {
	margin: 0 0 28px;
	font-size: var(--fs-l);
	font-weight: 500;
	line-height: 1.2;
}

.hp-contacts-page__text {
	margin: 0 0 64px;
	font-size: var(--fs-m);
	line-height: 1.3;
}

.hp-contacts-page__list {
	margin: 0;
	padding: 0;
	font-size: var(--fs-m);
	line-height: 1.3;
	list-style: none;
}

.hp-contacts-page__list li {
	list-style: none;
}

.hp-contacts-page__list a {
	color: inherit;
}

.hp-contacts-page__list a:hover {
	color: var(--hp-accent);
}

.hp-contacts-page__map {
	position: relative;
	aspect-ratio: 540 / 440;
	background: var(--hp-soft);
	overflow: hidden;
}

.hp-contacts-page__map img,
.hp-contacts-page__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	object-fit: cover;
}

/* Форма «Напишите нам» */
.hp-contact-form-section {
	padding: 40px 0 96px;
}

.hp-contact-form {
	max-width: 956px;
	margin: 0 auto;
	padding: 48px 32px 36px;
	border: 1px solid var(--hp-text);
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	text-align: center;
}

.hp-contact-form__title {
	margin: 0 0 16px;
	font-size: var(--fs-l);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--hp-accent);
}

.hp-contact-form__subtitle {
	max-width: 560px;
	margin: 0 auto 28px;
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.hp-contact-form__fields {
	max-width: 526px;
	margin: 0 auto 28px;
	text-align: left;
}

.hp-contact-form .hp-booking__field > span {
	font-size: var(--fs-s);
}

.hp-contact-form .hp-booking__field input,
.hp-contact-form .hp-booking__field textarea {
	width: 100%;
	height: 34px;
	padding: 6px 16px;
	border: 1px solid var(--hp-text);
	border-radius: var(--hp-radius-sm);
	background: var(--hp-white);
	font: var(--fs-base) var(--hp-font);
	color: var(--hp-text);
	resize: vertical;
}

/* Поле сообщения — высокое, на 5–6 строк; можно растянуть ещё */
.hp-contact-form .hp-booking__field textarea {
	min-height: 150px;
	height: 150px;
	padding: 12px 16px;
	border-radius: var(--hp-radius-sm);
	line-height: 1.4;
}

.hp-contact-form .hp-booking__field input:focus,
.hp-contact-form .hp-booking__field textarea:focus {
	border-color: var(--hp-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(124, 18, 46, .15);
}

.hp-contact-form__channels {
	grid-template-columns: 110px 110px;
	justify-content: start;
	gap: 8px;
	margin-top: 8px;
}

.hp-contact-form__channels legend {
	text-align: left;
}

.hp-contact-form__channels .hp-booking__channel > span {
	height: 30px;
	border-radius: var(--hp-radius-sm);
}

/* =========================================================
   Страница «Правила проживания и бронирования»
   ========================================================= */

.hp-rules-hero {
	min-height: 380px;
}

.hp-rules-hero .hp-page-hero__content {
	padding-top: 0;
	padding-bottom: 0;
}

.hp-rules-hero__title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--hp-white);
}

.hp-rules {
	padding: 64px 0 96px;
}

.hp-rules__inner {
	max-width: 1000px;
}

.hp-rules__title {
	margin: 0 0 32px;
	font-size: var(--fs-m);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.hp-rules__content {
	font-size: var(--fs-s);
	line-height: 1.5;
	text-align: justify;
}

.hp-rules__content p {
	margin: 0 0 1em;
}

.hp-rules__content h3,
.hp-rules__content h4 {
	margin: 1.6em 0 .8em;
	font-size: var(--fs-base);
	font-weight: 700;
}

.hp-rules__content ol,
.hp-rules__content ul {
	margin: 0 0 1em;
	padding-left: 1.6em;
}

.hp-rules__content ol li {
	list-style: decimal;
	margin-bottom: .4em;
}

.hp-rules__content ul li {
	list-style: disc;
	margin-bottom: .3em;
}

/* =========================================================
   Страница «Галерея»: заголовок, вкладки, мозаика на всю ширину без отступов
   ========================================================= */

.hp-gallery-page {
	padding: 56px 0 0;
}

.hp-gallery-page__title {
	margin-bottom: 32px;
}

.hp-gallery-page__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 56px;
}

.hp-gallery-page__tab {
	min-width: 190px;
	padding: 14px 28px;
	border: 1px solid var(--hp-accent);
	border-radius: 999px;
	background: transparent;
	font: 500 var(--fs-s) var(--hp-font);
	color: var(--hp-text);
	cursor: pointer;
	transition: background-color .25s, color .25s;
}

.hp-gallery-page__tab:hover {
	color: var(--hp-accent);
}

.hp-gallery-page__tab.is-active {
	background: var(--hp-accent);
	color: var(--hp-white);
}

/* Мозаика: 12 колонок, в ряду фото шириной 5 + 2 + 5 колонок (порядок ширин ставит js/home.js) */
.hp-gallery-page__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: clamp(220px, 27vw, 520px);
	grid-auto-flow: dense;
}

.hp-gallery-page__item {
	position: relative;
	display: block;
	grid-column: span var(--span, 5);
	overflow: hidden;
	background: #2e2e2e;
	animation: hp-gallery-in .6s ease both;
}

/* Без скрипта — тот же рисунок рядов по порядку (со скриптом ширину каждого фото ставит --span) */
.hp-gallery-page__grid:not(.is-ready) .hp-gallery-page__item:nth-child(9n + 2),
.hp-gallery-page__grid:not(.is-ready) .hp-gallery-page__item:nth-child(9n + 4),
.hp-gallery-page__grid:not(.is-ready) .hp-gallery-page__item:nth-child(9n + 8) {
	grid-column: span 2;
}

.hp-gallery-page__item[hidden] {
	display: none;
}

@keyframes hp-gallery-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.hp-gallery-page__item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.hp-gallery-page__item:hover img {
	transform: scale(1.04);
}

/* Название группы — бордовая полоса снизу, появляется при наведении */
.hp-gallery-page__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 16px;
	background: rgba(124, 18, 46, .82);
	font-size: var(--fs-s);
	font-weight: 500;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--hp-white);
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.hp-gallery-page__item:hover .hp-gallery-page__label,
.hp-gallery-page__item:focus-visible .hp-gallery-page__label {
	transform: none;
}

/* На телефоне наведения нет — мозаика проще, подпись видна всегда */
@media (max-width: 768px) {
	.hp-gallery-page { padding-top: 32px; }
	.hp-gallery-page__tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--hp-gutter)) 28px; padding: 0 var(--hp-gutter); scrollbar-width: none; }
	.hp-gallery-page__tab { flex-shrink: 0; min-width: 0; padding: 11px 20px; }
	.hp-gallery-page__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
	.hp-gallery-page__grid .hp-gallery-page__item { grid-column: span 1; }
	.hp-gallery-page__grid .hp-gallery-page__item.is-m-wide { grid-column: span 2; } /* каждое третье — на всю ширину */
	.hp-gallery-page__label { padding: 10px; font-size: var(--fs-xs); transform: none; background: linear-gradient(0deg, rgba(124, 18, 46, .85), rgba(124, 18, 46, 0)); }
}

@media (hover: none) {
	.hp-gallery-page__label { transform: none; }
}

/* Страница «Рестораны и бары»: все заведения карточками */
.hp-venues-list {
	padding: 64px 0 96px;
}

.hp-venues-list__intro {
	max-width: 900px;
	margin: 0 auto 48px;
	font-size: var(--fs-base);
	line-height: 1.5;
	text-align: center;
}

/* =========================================================
   Страница «Конференц-залы»
   ========================================================= */

.hp-conf-hero {
	min-height: 600px;
}

.hp-conf-hero .hp-page-hero__content {
	padding-top: 0;
	padding-bottom: 0;
}

.hp-conf-hero__title {
	max-width: 1000px;
	margin: 0 auto;
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--hp-white);
}

.hp-conf-hero__subtitle {
	max-width: 760px;
	margin: 24px auto 0;
	font-size: var(--fs-m);
	line-height: 1.4;
	color: var(--hp-white);
}

/* Преимущества */
.hp-conf-adv {
	padding: 80px 0 40px;
}

.hp-conf-adv__title {
	text-align: center;
}

.hp-conf-adv__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.hp-conf-adv__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 24px 36px;
	border: 1px solid var(--hp-accent);
	border-radius: var(--hp-radius);
	background: var(--hp-white);
	text-align: center;
	transition: transform .3s, box-shadow .3s;
}

.hp-conf-adv__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(124, 18, 46, .12);
}

.hp-conf-adv__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-bottom: 20px;
	color: var(--hp-text);
}

.hp-conf-adv__icon svg {
	width: auto;
	height: 100%;
}

.hp-conf-adv__name {
	margin: 0 0 12px;
	font-size: var(--fs-base);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--hp-accent);
}

.hp-conf-adv__text {
	margin: 0;
	font-size: var(--fs-s);
	line-height: 1.45;
}

/* Карусель: точки под фото */
.hp-conf-gallery {
	--slide-w: 70vw;
	--slide-h: 560px;
	--side-step: 62vw;
	margin-bottom: 24px;
	padding-bottom: 44px;
}

.hp-venue-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.hp-venue-slider__dots button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 1px solid var(--hp-accent);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .3s, transform .3s;
}

.hp-venue-slider__dots button.is-active {
	background: var(--hp-accent);
	transform: scale(1.15);
}

/* Карточки залов */
.hp-conf-halls {
	padding: 40px 0 64px;
}

.hp-conf-halls__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 32px;
}

/* Карточка зала: фото на всю карточку; название, иконки вместимости и кнопка — поверх фото, снизу */
.hp-conf-halls__grid {
	gap: 20px 12px;
}

.hp-conf-hall {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--hp-radius);
	background: #2e2e2e;
	overflow: hidden;
	color: var(--hp-white);
}

.hp-conf-hall__photo {
	position: absolute;
	inset: 0;
}

.hp-conf-hall__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .85) 100%);
}

.hp-conf-hall__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.hp-conf-hall:hover .hp-conf-hall__photo img {
	transform: scale(1.05);
}

.hp-conf-hall__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 0 22px 16px;
}

.hp-conf-hall__name {
	margin: 0 0 10px;
	font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--hp-white);
}

.hp-conf-hall__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hp-conf-hall__capacity {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-conf-hall__capacity li {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 56px;
	text-align: center;
	color: var(--hp-white);
}

.hp-conf-hall__capacity svg {
	width: 50px;
	height: 50px;
	margin-bottom: 4px;
}

.hp-conf-hall__type {
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.hp-conf-hall__count {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

.hp-btn.hp-conf-hall__btn {
	flex-shrink: 0;
	min-width: 0;
	min-height: 0;
	margin-bottom: 26px;
	padding: 11px 14px;
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: none;
}

/* Заявка: поля в две колонки */
.hp-conf-form-section {
	padding: 24px 0 96px;
	scroll-margin-top: var(--hp-header-h);
}

.hp-conf-form {
	max-width: 1100px;
}

.hp-conf-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 40px;
	margin: 0 0 20px;
	text-align: left;
}

.hp-conf-form__comment {
	grid-row: span 2;
}

.hp-conf-form .hp-booking__field select {
	width: 100%;
	height: 34px;
	padding: 0 16px;
	border: 1px solid var(--hp-text);
	border-radius: var(--hp-radius-sm);
	background: var(--hp-white);
	font: var(--fs-s) var(--hp-font);
	color: var(--hp-text);
}

.hp-conf-form .hp-booking__field select:focus {
	border-color: var(--hp-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(124, 18, 46, .15);
}

.hp-conf-form .hp-booking__field textarea {
	flex: 1;
	min-height: 96px;
	height: auto;
}

.hp-conf-form__channels {
	margin: 0;
	align-self: end;
}

.hp-conf-form__consent {
	justify-content: center;
	text-align: left;
}

.hp-conf-form__footnote {
	max-width: 560px;
	margin: 20px auto 0;
	font-size: var(--fs-xs);
	line-height: 1.45;
}

/* ---------- Анимации ---------- */

/* Огромное бледное слово на фоне блока (PARK в «Об отеле»): уходит за край экрана, при прокрутке медленно ползёт (js/home.js) */
.hp-about {
	position: relative;
}

.hp-about__inner {
	position: relative;
	z-index: 1;
}

.hp-giant-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hp-giant {
	position: absolute;
	white-space: nowrap;
	font: 700 clamp(140px, 24vw, 420px)/.8 var(--hp-font);
	letter-spacing: -.01em;
	text-transform: uppercase;
	user-select: none;
}

/* В «Об отеле» слово прижато к правому краю над блоком, конец уходит за край экрана,
   а низ букв слегка прячется за текстом и видео */
.hp-about:has(> .hp-giant-wrap) {
	padding-top: clamp(80px, 12vw, 220px);
}

.hp-about__giant {
	top: clamp(20px, 2.5vw, 40px);
	right: -2vw;
	font-size: clamp(80px, 13vw, 230px); /* «BW HOTEL» длиннее прежнего слова — меньше, чтобы было видно BW */
	color: rgba(89, 86, 96, .08);
}

/* ---------- Рестораны и бары на главной: бордовый фон, аркада из арок ---------- */
.hp-resto.hp-resto--arcade {
	position: relative;
	padding: clamp(96px, 11vw, 170px) 0;
	background: var(--hp-accent);
	color: var(--hp-white);
}

.hp-resto--arcade .hp-container {
	position: relative;
	z-index: 1;
}

.hp-resto__giant {
	top: 24px;
	left: -2vw;
	color: rgba(255, 255, 255, .07);
}

.hp-resto--arcade .hp-title,
.hp-resto--arcade .hp-section-head__sub,
.hp-resto--arcade .hp-ornament,
.hp-resto--arcade .hp-section-head__link {
	color: var(--hp-white);
}

.hp-resto--arcade .hp-section-head__sub {
	opacity: .75;
}

.hp-arcade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px clamp(20px, 3vw, 48px);
	margin-top: 16px;
}

.hp-arcade__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--hp-white);
}

/* Средняя арка в каждом ряду опущена — как в колоннаде */
.hp-arcade__item:nth-child(3n + 2) {
	margin-top: 56px;
}

.hp-arcade__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4.3;
	border-radius: 999px 999px 0 0;
	background: #7C122E;
	overflow: hidden;
}

.hp-arcade__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

.hp-arcade__item:hover .hp-arcade__img {
	transform: scale(1.05);
}

.hp-arcade__name {
	margin-top: 28px;
	font-size: var(--fs-s);
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.hp-arcade__sub {
	margin-top: 8px;
	font-size: var(--fs-xs);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .7);
}

@media (max-width: 768px) {
	.hp-resto.hp-resto--arcade { padding: 64px 0; }
	.hp-arcade { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 420px; margin-inline: auto; }
	.hp-arcade__item:nth-child(3n + 2) { margin-top: 0; }
}

/* Цена номера («от 65 000 ₸ за ночь») — одной строкой, не разрывается посередине */
.hp-price {
	white-space: nowrap;
}

/* Фото «плывут» внутри рамок: js/home.js двигает --py при прокрутке, запас по краям даёт scale */
.hp-parallax {
	translate: 0 var(--py, 0);
	scale: 1.4; /* запас по краям, чтобы при сдвиге ±16% фото не открывало пустоту */
}
.hp-room-card__img.hp-parallax {
	scale: 1.1; /* номера: почти без увеличения, чтобы фото не обрезалось */
}
/* Цифры не дёргают соседей, пока считают */
.hp-stats__value,
.hp-conf__fact-value {
	font-variant-numeric: tabular-nums;
}

/* Первый экран: медленное приближение фона и появление кнопок */
.hp-hero__media {
	animation: hp-hero-zoom 18s ease-out both;
}

@keyframes hp-hero-zoom {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

.hp-hero__buttons > * {
	animation: hp-fade-up 1s cubic-bezier(.22, .61, .36, 1) both;
}

.hp-hero__buttons > *:nth-child(1) { animation-delay: .3s; }
.hp-hero__buttons > *:nth-child(2) { animation-delay: .5s; }
.hp-hero__scroll { animation: hp-fade-up 1s .8s both; }

@keyframes hp-fade-up {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: none; }
}

/* Наведение на любые карточки и фото — одинаково: фото медленно чуть приближается, больше ничего */
.hp-card__img,
.hp-room-card__img,
.hp-gallery__item img,
.hp-conf-hall__photo img,
.hp-gallery-page__item img {
	transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

a.hp-card:hover .hp-card__img,
.hp-room-card:hover .hp-room-card__img,
.hp-gallery__item:hover img,
.hp-conf-hall:hover .hp-conf-hall__photo img,
.hp-gallery-page__item:hover img {
	transform: scale(1.05);
}
.hp-services__item:hover .hp-services__icon {
	transform: translateY(-4px) scale(1.08);
}

.hp-services__icon {
	transition: transform .35s ease;
}

.hp-btn {
	transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.hp-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(124, 18, 46, .35);
}

/* Если в системе отключены анимации — ничего не двигаем */
@media (prefers-reduced-motion: reduce) {
	.hp-hero__media,
	.hp-page-hero__bg,
	.hp-hero__buttons > *,
	.hp-hero__scroll,
	.hp-hero__scroll svg {
		animation: none;
	}
	.hp-parallax { translate: none; scale: 1; }
}

/* ================= Адаптив ================= */

/* =========================================================
   Обновлённый стиль: заголовки шрифтом с засечками, текст по левому краю
   ========================================================= */


/* Заголовки разделов и страниц: с засечками, обычный регистр (как набрано в админке) */
.hp-title,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-rules__title,
.hp-contacts__heading,
.hp-contacts-page__heading,
.hp-conf__card-title {
	font-family: var(--hp-font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.005em;
	text-transform: none;
}

.hp-title,
.hp-venue-title,
.hp-rules__title {
	color: var(--hp-ink);
}

.hp-title,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-contacts__heading,
.hp-contacts-page__heading {
	font-size: calc(var(--fs-l) * 1.35);
}

.hp-title--xl {
	font-size: calc(var(--fs-xl) * 1.3);
}

.hp-rules__title {
	font-size: calc(var(--fs-m) * 1.4);
}

.hp-conf__card-title {
	font-size: calc(var(--fs-m) * 1.6);
}

/* Надзаголовок над крупным заголовком — маленький, разрядкой, бордовый */
.hp-subtitle {
	margin-bottom: 14px;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .22em;
	color: var(--hp-accent);
}

/* Заголовки на фото первого экрана страниц */
.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title,
.hp-conf-hero__title,
.hp-venue-hero__title,
.hp-room-hero__title {
	font-family: var(--hp-font-display);
	font-weight: 500;
	letter-spacing: -.005em;
	text-transform: none;
}

.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title {
	font-size: calc(var(--fs-xl) * 1.3);
	line-height: 1.05;
}

.hp-room-hero__title {
	font-size: calc(var(--fs-l) * 1.4);
}

.hp-conf-hero__title {
	font-size: clamp(44px, 5.6vw, 84px);
	line-height: 1.05;
}

.hp-venue-hero__title {
	font-size: clamp(60px, 9vw, 132px);
}

/* ---------- Шапка: меню мельче и плотнее, без косых черт; языки — просто текст ---------- */
.hp-header {
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .35s ease, box-shadow .35s ease;
}

.hp-header__nav .hp-menu {
	gap: 8px 34px;
}

.hp-header__nav .hp-menu li + li::before {
	display: none; /* косые черты остаются только в хлебных крошках */
}

.hp-header__nav .hp-menu a,
.hp-header__breadcrumbs .hp-menu a,
.hp-header__breadcrumbs .hp-menu li + li::before {
	font-size: var(--fs-s);
	font-weight: 400;
	letter-spacing: .03em;
}

.hp-header__nav .hp-menu a {
	position: relative;
	padding: 6px 0;
	text-decoration: none;
}

/* Тонкая линия снизу при наведении и у текущей страницы */
.hp-header__nav .hp-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.hp-header__nav .hp-menu a:hover::after,
.hp-header__nav .hp-menu .current-menu-item > a::after {
	transform: scaleX(1);
}

.hp-header__nav .hp-menu a:hover,
.hp-header__nav .hp-menu .current-menu-item > a {
	text-decoration: none;
}

.hp-lang {
	gap: 4px;
}

.hp-lang__link {
	width: auto;
	height: auto;
	padding: 6px 7px;
	border: 0;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--hp-text);
	opacity: .55;
}

.hp-lang__link:hover {
	opacity: 1;
}

.hp-lang__link--active {
	background: none;
	color: var(--hp-accent);
	opacity: 1;
}

/* Прозрачная шапка поверх первого экрана (класс ставит js/home.js); ниже — белая с тенью */
.hp-header--over {
	background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
	box-shadow: none;
}

.hp-header--over .hp-menu a,
.hp-header--over .hp-menu li + li::before,
.hp-header--over .hp-lang__link,
.hp-header--over .hp-lang__link--active {
	color: var(--hp-white);
}

.hp-header--over .hp-header__logo img {
	filter: brightness(0) invert(1);
}

.hp-header--over .hp-header__burger span {
	background: var(--hp-white);
}

/* Страницы с фото первым блоком: фото уходит под прозрачную шапку */
.hp-main--inner:has(> .hp-page-hero:first-child),
.hp-main--inner:has(> .hp-room-hero:first-child) {
	padding-top: 0;
}

.hp-main--inner > .hp-page-hero:first-child,
.hp-main--inner > .hp-room-hero:first-child {
	padding-top: var(--hp-header-h);
}

/* ---------- Шапка раздела: орнамент, заголовок по центру; ссылка «Смотреть все» — внизу раздела ---------- */
.hp-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto 56px;
	text-align: center;
}

/* Орнамент: две тонкие линии и ромб — как карниз над колоннами у входа в отель */
.hp-ornament {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	color: var(--hp-accent);
}

.hp-ornament::before,
.hp-ornament::after {
	content: "";
	width: 56px;
	height: 1px;
	background: currentColor;
	opacity: .6;
}

.hp-ornament i {
	width: 7px;
	height: 7px;
	border: 1px solid currentColor;
	transform: rotate(45deg);
}

.hp-section-head .hp-title,
.hp-rooms .hp-section-head .hp-title,
.hp-resto .hp-section-head .hp-title {
	margin: 0;
	text-align: center;
}

.hp-section-head__sub {
	max-width: 560px;
	margin: 18px 0 0;
	font-size: var(--fs-s);
	line-height: 1.6;
	color: var(--hp-text);
}

/* Низ раздела: «← СМОТРЕТЬ ВСЕ НОМЕРА →» по центру */
.hp-section-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 48px;
}

.hp-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hp-accent);
	white-space: nowrap;
}

.hp-section-head__link span {
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	padding-bottom: 4px;
	transition: background-size .4s ease;
}

.hp-section-head__link:hover span {
	background-size: 100% 1px;
}

.hp-section-head__link svg {
	transition: transform .4s ease;
}

.hp-section-head__link:hover svg {
	transform: translateX(4px);
}

@media (max-width: 768px) {
	.hp-section-head { margin-bottom: 32px; }
	.hp-section-more { margin-top: 28px; gap: 16px; }
	.hp-rooms .hp-section-more .hp-rooms__arrow { display: none; } /* на телефоне лента листается пальцем */
}
/* ---------- Кнопка «Забронировать» внизу экрана — только на телефоне ---------- */
.hp-mobile-bar {
	display: none;
}

@media (max-width: 768px) {
	.hp-mobile-bar {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 90;
		display: flex;
		gap: 10px;
		transform: translateY(0);
		transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s;
	}

	/* Пока на экране первый экран главной или прелоадер — кнопки нет */
	.hp-loading .hp-mobile-bar,
	.hp-mobile-bar--hidden {
		transform: translateY(140%);
		opacity: 0;
		pointer-events: none;
	}

	.hp-btn.hp-mobile-bar__book {
		flex: 1;
		width: auto;
		min-height: 52px;
		font-size: var(--fs-base);
		font-weight: 500;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	}

	.hp-mobile-bar__whatsapp {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: #0fa40f;
		color: var(--hp-white);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	}

	/* Чтобы кнопка не закрывала копирайт в самом низу */
	.hp-footer {
		padding-bottom: 96px;
	}
}

/* ---------- Мягкая прокрутка (Lenis) ---------- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ---------- Тонкие линии вместо плашек и рамок ---------- */
.hp-stats__list {
	border-top: 1px solid var(--hp-line);
	border-bottom: 1px solid var(--hp-line);
}

.hp-stats__item + .hp-stats__item,
.hp-services__list li + li {
	border-left-color: var(--hp-line);
}

.hp-services__list {
	padding: 48px 0;
	border-top: 1px solid var(--hp-line);
	border-bottom: 1px solid var(--hp-line);
	border-radius: 0;
	background: none;
}

.hp-conf__facts {
	border-top: 1px solid var(--hp-line);
	border-bottom: 1px solid var(--hp-line);
	border-radius: 0;
	background: none;
}

.hp-conf-adv__grid {
	gap: 0;
	border-top: 1px solid var(--hp-line);
	border-bottom: 1px solid var(--hp-line);
}

.hp-conf-adv__card {
	border: 0;
	border-radius: 0;
	background: none;
}

.hp-conf-adv__card + .hp-conf-adv__card {
	border-left: 1px solid var(--hp-line);
}

.hp-conf-adv__card:hover {
	transform: none;
	box-shadow: none;
}


/* Названия ресторанов и баров — как набраны в админке (без принудительных заглавных), шрифтом заголовков */
.hp-card--resto .hp-card__title {
	font-family: var(--hp-font-display);
	font-size: calc(var(--fs-l) * 1.2);
	font-weight: 600;
	text-transform: none;
}

/* ---------- Кнопки: аккуратнее и меньше ---------- */
.hp-btn {
	min-height: 52px;
	padding: 0 32px;
	font-size: var(--fs-s);
	font-weight: 500;
	letter-spacing: .02em;
}

.hp-btn--lg {
	min-width: 220px;
	min-height: 56px;
	font-size: var(--fs-s);
}

.hp-venue-cta__buttons .hp-btn {
	min-width: 220px;
	min-height: 56px;
	font-size: var(--fs-s);
	text-transform: none;
}

.hp-btn--whatsapp {
	min-height: 52px;
	font-size: var(--fs-s);
}

/* ---------- Формы: одна аккуратная форма на всех страницах ----------
 * Подписи обычным текстом, все поля одной высоты и с одним шрифтом 16 px, мягкие границы.
 * Выше только поля, где пишут много текста (пожелания, сообщение, комментарий).
 */
.hp {
	--field-h: 48px;
	--field-border: rgba(47, 44, 51, .16);
}

.hp .hp-booking__field {
	gap: 8px;
	margin-bottom: 16px;
}

.hp .hp-booking__field > span,
.hp .hp-booking__row:first-of-type .hp-booking__field > span,
.hp .hp-contact-form .hp-booking__field > span {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	color: var(--hp-ink);
}

.hp .hp-booking__field em {
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	color: #8b8389;
}

.hp .hp-booking__field input,
.hp .hp-booking__row:first-of-type input,
.hp .hp-booking__field select,
.hp .hp-booking__field textarea,
.hp .hp-contact-form .hp-booking__field input,
.hp .hp-contact-form .hp-booking__field textarea,
.hp .hp-conf-form .hp-booking__field select {
	width: 100%;
	height: var(--field-h);
	padding: 0 16px;
	border: 1px solid var(--field-border);
	border-radius: var(--hp-radius-sm);
	background: var(--hp-white);
	font: 400 16px/1.4 var(--hp-font);
	color: var(--hp-ink);
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

.hp .hp-booking__field select {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--hp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4a53' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
	cursor: pointer;
}

/* Поля для длинного текста — выше */
.hp .hp-booking__field textarea,
.hp .hp-contact-form .hp-booking__field textarea,
.hp .hp-conf-form .hp-booking__field textarea {
	height: auto;
	min-height: 132px;
	padding: 12px 16px;
	line-height: 1.5;
	resize: vertical;
}

.hp .hp-booking__field input::placeholder,
.hp .hp-booking__field textarea::placeholder {
	color: #a49ca2;
}

.hp .hp-booking__field input:hover,
.hp .hp-booking__field select:hover,
.hp .hp-booking__field textarea:hover {
	border-color: rgba(47, 44, 51, .32);
}

.hp .hp-booking__field input:focus,
.hp .hp-booking__field select:focus,
.hp .hp-booking__field textarea:focus {
	border-color: var(--hp-accent);
	outline: none;
	box-shadow: 0 0 0 4px rgba(124, 18, 46, .1);
}

/* Взрослые / дети — короткое поле той же высоты рядом с подписью */
.hp .hp-booking__field--inline {
	gap: 12px;
	margin-bottom: 0;
}

.hp .hp-booking__field--inline input {
	width: 72px;
	padding: 0 8px;
	text-align: center;
}

.hp .hp-booking__field--invalid input,
.hp .hp-booking__field--invalid select,
.hp .hp-booking__field--invalid textarea {
	border-color: #c62828;
	box-shadow: 0 0 0 4px rgba(198, 40, 40, .08);
}

.hp .hp-booking__channels legend,
.hp .hp-contact-form__channels legend {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--hp-ink);
}

.hp .hp-booking__consent {
	font-size: 13px;
	color: var(--hp-text);
}

/* Рамки форм — тоже мягкие */
.hp-booking,
.hp-contact-form {
	border: 1px solid var(--hp-line);
	background: var(--hp-white);
	box-shadow: 0 24px 60px rgba(47, 44, 51, .06);
}

.hp-booking__title {
	font-family: var(--hp-font-display);
	font-size: calc(var(--fs-m) * 1.35);
	font-weight: 600;
	text-transform: none;
	color: var(--hp-ink);
}

/* Иконки — единый набор (inc/icons.php): тонкая линия, бордовый цвет */
.hp-icon {
	flex-shrink: 0;
}

.hp-services__icon,
.hp-conf-adv__icon,
.hp-venue-menu__icon {
	color: var(--hp-accent);
}

svg.hp-services__icon {
	width: 56px;
	height: 56px;
}

/* Текст — по левому краю, без «дыр» между словами */
.hp-about__text,
.hp-rewards__text,
.hp-room-desc,
.hp-about-text,
.hp-rules__content {
	text-align: left;
}

.hp-about__text {
	line-height: 1.6;
}

/* «Об отеле» — абзацы с воздухом между ними, первый (с названием отеля) чуть крупнее */
.hp-about__text p {
	margin: 0 0 1.1em;
}

.hp-about__text p:last-child {
	margin-bottom: 0;
}

.hp-about__text p:first-child {
	font-size: calc(var(--fs-base) * 1.1);
	color: var(--hp-ink);
}

.hp-contact-form__subtitle {
	font-size: var(--fs-s);
	font-weight: 400;
	text-transform: none;
}

/* =========================================================
   Заголовки: фирменный Gotham заглавными с разрядкой, по центру — строго, по брендбуку
   ========================================================= */

.hp-title,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-rules__title,
.hp-contacts__heading,
.hp-contacts-page__heading,
.hp-conf__card-title,
.hp-footer__title,
.hp-booking__title {
	font-family: var(--hp-font);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hp-title,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-contacts__heading,
.hp-contacts-page__heading,
.hp-footer__title {
	font-size: calc(var(--fs-l) * .9);
}

.hp-title {
	text-align: center;
}

.hp-title--xl {
	font-size: calc(var(--fs-xl) * .8);
}

.hp-rules__title,
.hp-booking__title,
.hp-conf__card-title {
	font-size: var(--fs-m);
	letter-spacing: .12em;
}

/* Заголовки на фото первого экрана страниц */
.hp-hero__title,
.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title,
.hp-conf-hero__title,
.hp-venue-hero__title,
.hp-room-hero__title {
	font-family: var(--hp-font);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hp-hero__title,
.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title,
.hp-conf-hero__title {
	font-size: clamp(30px, 3.8vw, 56px);
}

.hp-venue-hero__title {
	font-size: clamp(36px, 5vw, 76px);
}

.hp-room-hero__title {
	font-size: var(--fs-l);
}

/* Названия в карточках — Gotham заглавными, спокойно */
.hp-room-card__title,
.hp-card--resto .hp-card__title {
	font-family: var(--hp-font);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hp-card--resto .hp-card__title {
	font-size: var(--fs-m);
}

@media (max-width: 768px) {
	.hp-title,
	.hp-venue-title,
	.hp-contact-form__title,
	.hp-venue-cta__title,
	.hp-contacts__heading,
	.hp-contacts-page__heading,
	.hp-footer__title { font-size: 21px; letter-spacing: .1em; }
	.hp-title--xl { font-size: 24px; }
	.hp-hero__title,
	.hp-page-hero__title,
	.hp-about-hero__title,
	.hp-rules-hero__title,
	.hp-conf-hero__title { font-size: 26px; letter-spacing: .08em; }
	.hp-venue-hero__title { font-size: 32px; }
}
@media (max-width: 1280px) {
	:root { --fs-xl: 44px; --fs-l: 30px; }

	.hp-menu li + li::before { margin: 0 16px; }
	.hp-about__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
	.hp-contacts__grid { grid-template-columns: 1fr 1fr; padding-left: 0; }
	.hp-about-location__grid { grid-template-columns: 1fr 1fr; gap: 40px; }


}

@media (max-width: 1100px) {
	:root { --hp-header-h: 70px; --hp-gutter: 24px; }

	.hp-header__inner { justify-content: space-between; padding: 0 20px; }
	.hp-header__logo img { height: 44px; }
	.hp-header__lang { display: none; }
	.hp-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		padding: 10px;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.hp-header__burger span {
		display: block;
		height: 2px;
		background: var(--hp-accent);
		transition: transform .2s, opacity .2s;
	}
	.hp-header--open .hp-header__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.hp-header--open .hp-header__burger span:nth-child(2) { opacity: 0; }
	.hp-header--open .hp-header__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	.hp-header__nav {
		position: fixed;
		top: var(--hp-header-h);
		left: 0;
		right: 0;
		bottom: 0;
		display: none;
		flex-direction: column;
		gap: 32px;
		padding: 32px 24px;
		background: var(--hp-white);
		overflow-y: auto;
	}
	.hp-header--open .hp-header__nav { display: flex; }
	.hp-header__lang--mobile { display: block; }
	.hp-menu { flex-direction: column; align-items: flex-start; gap: 20px; }
	.hp-menu li + li::before { display: none; }
	.hp-menu a { font-size: var(--fs-m); }

	.hp-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.hp-room-body__grid { grid-template-columns: 1fr; gap: 48px; }
	.hp-venue-intro__grid, .hp-venue-block__grid { gap: 40px; }
	.hp-contacts-page__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.hp-contacts-page__info { padding-left: 0; }
	.hp-venue-menu__list--4 { grid-template-columns: repeat(2, 1fr); }
	.hp-room-body__aside { position: static; max-width: 560px; width: 100%; margin: 0 auto; }
	.hp-conf__grid { grid-template-columns: 1fr; }
	.hp-conf-adv__grid { grid-template-columns: repeat(2, 1fr); }
	.hp-conf-halls__grid { grid-template-columns: repeat(2, 1fr); }
	.hp-footer__top { gap: 40px; }
	.hp-header__nav .hp-menu a { font-size: var(--fs-m); } /* в мобильном меню — крупно */
	.hp-conf-adv__card:nth-child(odd) { border-left: 0; }
	.hp-conf-adv__card:nth-child(n + 3) { border-top: 1px solid var(--hp-line); }
	.hp-footer__grid, .hp-footer--map .hp-footer__grid { grid-template-columns: 1fr 1fr; }
	.hp-gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; margin: 0; }
	.hp-gallery__item:first-child { grid-row: span 2; }
}

@media (max-width: 768px) {
	:root { --fs-xl: 32px; --fs-l: 24px; --fs-m: 19px; --fs-base: 16px; --fs-s: 14px; --fs-xs: 12px; }

	.hp-title { margin-bottom: 28px; }
	.hp-title--xl { margin-bottom: 32px; }


	.hp-btn, .hp-btn--lg { min-width: 0; width: 100%; min-height: 52px; padding: 0 24px; }

	.hp-hero__buttons { flex-direction: column; margin-bottom: 24px; }

	.hp-stats__list { grid-template-columns: repeat(2, 1fr); row-gap: 32px; padding: 48px 0; }
	.hp-stats__item + .hp-stats__item { border-left: 0; }
	.hp-stats__item:nth-child(even) { border-left: 1px solid var(--hp-accent); }
	.hp-stats__item:last-child:nth-child(odd) { grid-column: span 2; }



	.hp-about__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 40px; }
	.hp-about:has(> .hp-giant-wrap) { padding-top: 22vw; }
	.hp-about__giant { top: 16px; font-size: 19vw; }
	.hp-about__text { padding-left: 0; text-align: left; }
	.hp-about__video { border-radius: var(--hp-radius); }
	.hp-about__video:empty { display: none; }

	.hp-cards { grid-template-columns: 1fr; }

	.hp-card--resto { aspect-ratio: 4 / 3; }


	.hp-card--resto .hp-card__caption { padding-bottom: 28px; }

	.hp-rooms { padding: 48px 0; }
	.hp-rooms__more { margin-top: 28px; }
	.hp-conf, .hp-resto, .hp-gallery, .hp-contacts { padding: 40px 0 48px; }
	.hp-resto .hp-title { margin-bottom: 28px; }

	.hp-conf__card { padding: 32px 24px; border-radius: var(--hp-radius); }


	.hp-conf__facts { border-radius: var(--hp-radius); }
	.hp-conf__fact { padding: 24px 12px; }



	.hp-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.hp-gallery__item { border-radius: var(--hp-radius); }
	.hp-gallery__item:first-child { grid-row: span 2; }
	.hp-gallery .hp-center { margin-top: 32px; }

	.hp-services__list { grid-template-columns: repeat(2, 1fr); row-gap: 32px; padding: 32px 8px; border-radius: var(--hp-radius); }
	.hp-services__list li + li { border-left: 0; }
	.hp-services__list li:nth-child(even) { border-left: 1px solid var(--hp-accent); }
	.hp-services__list li:last-child:nth-child(odd) { grid-column: span 2; }

	.hp-services__icon, svg.hp-services__icon { height: 44px; }
	svg.hp-services__icon { width: 44px; }

	.hp-contacts .hp-title--xl { margin-bottom: 32px; }
	.hp-contacts__grid { grid-template-columns: 1fr; }
	.hp-contacts__heading { margin-bottom: 16px; }
	.hp-contacts__list { margin-bottom: 28px; }
	.hp-contacts__map { aspect-ratio: 4 / 3; border-radius: var(--hp-radius); }

	.hp-header__breadcrumbs { display: none; }

	.hp-page-hero { min-height: 0; }
	.hp-page-hero__content { padding-top: 40px; padding-bottom: 40px; }
	.hp-page-hero__subtitle { margin-bottom: 24px; }

	.hp-pill { min-width: 0; min-height: 38px; }

	.hp-room-list { padding: 32px 0 48px; }
	.hp-cards--room-list { gap: 16px; }
	.hp-card__caption--row { flex-direction: column; align-items: stretch; }
	.hp-card--room-item { aspect-ratio: 4 / 3.4; }
	.hp-btn--sm { width: 100%; margin-bottom: 0; }

	.hp-room-hero { min-height: 420px; }
	.hp-room-hero__content { flex-direction: column; align-items: flex-start; padding-bottom: 32px; }
	.hp-room-hero__content .hp-btn { margin-bottom: 0; }



	.hp-room-body { padding: 32px 0 48px; }
	.hp-room-photos { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 120px; height: auto; margin-bottom: 28px; }
	.hp-room-photos__item:first-child { grid-column: span 2; }
	.hp-room-desc { text-align: left; }
	.hp-room-amenities { columns: 1; }
	.hp-room-amenities__title { margin-top: 32px; }
	.hp-room-rewards { margin-bottom: 32px; }
	.hp-room-rules__content { max-width: none; }
	.hp-booking { padding: 28px 20px 20px; border-radius: var(--hp-radius); }
	.hp-booking__row, .hp-booking__channels { gap: 14px; }
	.hp-booking__field input, .hp-booking__field textarea { font-size: 16px; } /* без автозума на iPhone */
	.hp-booking__submit { width: 100%; min-width: 0; }
	.hp-room-similar { padding: 16px 0 48px; }

	.hp-rules-hero { min-height: 260px; }
	.hp-rules { padding: 32px 0 48px; }
	.hp-rules__content { text-align: left; }

	.hp-contacts-page { padding: 32px 0 40px; }
	.hp-contacts-page .hp-title--xl { margin-bottom: 28px; }
	.hp-contacts-page__grid { grid-template-columns: 1fr; gap: 28px; }
	.hp-contacts-page__info { padding-left: 0; }
	.hp-contacts-page__text { margin-bottom: 28px; }
	.hp-contact-form-section { padding: 16px 0 48px; }
	.hp-contact-form { padding: 32px 18px 24px; border-radius: var(--hp-radius); }
	.hp-contact-form .hp-booking__field input, .hp-contact-form .hp-booking__field textarea { font-size: 16px; }

	.hp-about-hero { min-height: 340px; }
	.hp-about-intro .hp-venue-intro__grid { grid-template-columns: 1fr; gap: 28px; }
	.hp-about-text { text-align: left; }
	.hp-about-facts { padding: 24px 0 40px; }
	.hp-about-facts__list { grid-template-columns: 1fr 1fr; row-gap: 24px; }
	.hp-about-facts__list li + li { border-left: 0; }
	.hp-about-facts__list li:nth-child(even) { border-left: 1px solid var(--hp-accent); }
	.hp-about-facts__list li:last-child:nth-child(odd) { grid-column: span 2; }
	.hp-about-location__grid { grid-template-columns: 1fr; gap: 24px; }
	.hp-about-location__text { max-width: none; }
	.hp-about-family { padding: 24px 0 56px; }
	.hp-about-family__logo { width: 200px; margin-bottom: 32px; }
	.hp-about-family__buttons { flex-direction: column; gap: 16px; width: 100%; }

	.hp-conf-hero { min-height: 420px; }
	.hp-conf-adv { padding: 40px 0 16px; }
	.hp-conf-adv__grid { grid-template-columns: 1fr; gap: 0; }
	.hp-conf-adv__card + .hp-conf-adv__card { border-left: 0; border-top: 1px solid var(--hp-line); }
	.hp-conf-adv__card { padding: 28px 20px; border-radius: var(--hp-radius); }
	.hp-conf-gallery.hp-venue-gallery--slider { --slide-h: 280px; }
	.hp-conf-halls { padding: 24px 0 40px; }
	.hp-conf-halls__grid { grid-template-columns: 1fr; gap: 40px; }
	.hp-conf-hall { border-radius: var(--hp-radius); }
	.hp-btn.hp-conf-hall__btn { width: auto; min-height: 0; margin-bottom: 20px; padding: 10px 12px; }
	.hp-conf-hall { aspect-ratio: 4 / 3.5; }
	.hp-conf-hall__info { padding: 0 16px 14px; }
	.hp-conf-hall__capacity { gap: 8px; }
	.hp-conf-hall__capacity li { min-width: 48px; }
	.hp-conf-hall__capacity svg { width: 40px; height: 40px; }
	.hp-conf-form-section { padding: 8px 0 48px; }
	.hp-conf-form__fields { grid-template-columns: 1fr; }
	.hp-conf-form__comment { grid-row: auto; }
	.hp-conf-form .hp-booking__field select { font-size: 16px; }

	.hp-venue-hero { min-height: 420px; }
	.hp-venue-intro, .hp-venue-menu { padding: 32px 0; }
	.hp-venue-intro__grid, .hp-venue-block__grid { grid-template-columns: 1fr; gap: 28px; }
	.hp-venue-text { text-align: left; }
	.hp-venue-menu__list, .hp-venue-menu__list--4 { grid-template-columns: 1fr; gap: 16px; }
	.hp-venue-gallery--slider { --slide-w: 78vw; --slide-h: 300px; --side-step: 72vw; --side-scale: .85; }
	.hp-venue-slider__arrow { display: none; }
	.hp-venue-collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; border-radius: var(--hp-radius); }
	.hp-venue-collage__item, .hp-venue-collage__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.hp-venue-collage__item:nth-child(3n + 1) { grid-column: span 2; }
	.hp-venue-cta__box { padding: 36px 20px; border-radius: var(--hp-radius); }
	.hp-venue-cta__buttons .hp-btn { width: 100%; min-width: 0; min-height: 60px; }

	.hp-rewards { padding: 16px 0 48px; }
	.hp-rewards__inner { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; text-align: center; }
	.hp-rewards__logo { max-width: 220px; margin: 0 auto; }
	.hp-rewards__text { text-align: left; }

	.hp-footer { margin-top: 56px; padding: 48px 0 96px; } /* снизу место под кнопку «Забронировать» */
	.hp-footer__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; margin-bottom: 40px; }
	.hp-footer__map { aspect-ratio: 4 / 3; }
	.hp-footer__grid, .hp-footer--map .hp-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
	.hp-footer__brand { grid-column: 1 / -1; }
	.hp-btn.hp-footer__whatsapp { width: 100%; }
	.hp-footer__copyright { margin-top: 40px; }
}

/* ---------- Арка — общая форма для фото «мест» (номера, рестораны, залы) ---------- */
.hp-arch {
	border-radius: var(--hp-arch);
	overflow: hidden;
}

/* ---------- Номера на главной: лента на всю ширину экрана, подпись под фото ---------- */
.hp-rooms__track {
	grid-auto-columns: clamp(260px, 24vw, 380px);
	gap: clamp(20px, 2.4vw, 36px);
	padding: 0 var(--hp-gutter) 8px var(--rooms-edge); /* начинается по линии заголовка, справа уходит за край */
	scroll-padding: 0 var(--hp-gutter) 0 var(--rooms-edge);
}

.hp-room-card--arch {
	aspect-ratio: auto;
	border-radius: 0;
	background: none;
	overflow: visible;
	color: var(--hp-text);
	text-align: center;
}

.hp-room-card--arch::after {
	content: none;
}

.hp-room-card__photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--hp-radius);
	background: #e9e5e1;
	overflow: hidden;
}

.hp-room-card--arch .hp-room-card__info {
	position: static;
	justify-content: center;
	padding: 26px 8px 0;
}

.hp-room-card--arch .hp-room-card__text {
	align-items: center;
	gap: 8px;
}

.hp-room-card--arch .hp-room-card__title {
	font-size: var(--fs-s);
	letter-spacing: .2em;
	color: #595660;
}

.hp-room-card--arch .hp-room-card__price {
	font-size: var(--fs-s);
	color: var(--hp-accent);
}

.hp-room-card--arch .hp-room-card__go {
	display: none;
}

.hp-arcade__photo {
	border-radius: var(--hp-arch);
}

@media (max-width: 768px) {
	.hp-rooms__track { grid-auto-columns: 72vw; gap: 16px; }
	.hp-room-card--arch .hp-room-card__info { padding-top: 18px; }
}

/* =========================================================
   Современная главная: воздух, крупная типографика, одна линия левого края
   - Заголовки в обычном регистре, крупные и плотные; рядом мелкий спокойный текст.
   - Никаких ЗАГЛАВНЫХ с разрядкой, орнаментов и линий между разделами.
   - Все заголовки разделов слева, ссылка «Все …» справа на той же линии.
   ========================================================= */

/* ---------- Отступы ---------- */
.hp-about,
.hp-stats,
.hp-rooms,
.hp-conf,
.hp-resto,
.hp-gallery,
.hp-services {
	padding-top: var(--hp-space);
	padding-bottom: var(--hp-space);
}

.hp-ornament {
	display: none;
}

/* ---------- Заголовки: обычный регистр, плотно, крупно ---------- */
.hp-title,
.hp-subtitle,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-rules__title,
.hp-contacts__heading,
.hp-contacts-page__heading,
.hp-conf__card-title,
.hp-footer__title,
.hp-booking__title,
.hp-hero__title,
.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title,
.hp-conf-hero__title,
.hp-venue-hero__title,
.hp-room-hero__title,
.hp-venue-menu__title,
.hp-about-family__list-title,
.hp-card--resto .hp-card__title {
	font-weight: 500;
	letter-spacing: -.02em;
	text-transform: none;
}

/* Шапка раздела: слева заголовок, справа ссылка */
.hp-section-head {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px 48px;
	margin: 0 0 clamp(40px, 5vw, 80px);
	text-align: left;
}

.hp-section-head__main {
	min-width: 0;
}

.hp-section-head .hp-title,
.hp-rooms .hp-section-head .hp-title,
.hp-resto .hp-section-head .hp-title,
.hp-section-head__title.hp-title {
	margin: 0;
	font-size: clamp(40px, 6vw, 96px);
	line-height: 1;
	letter-spacing: -.03em;
	text-align: left;
}

.hp-section-head__sub {
	max-width: 420px;
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

.hp-section-head__aside {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	padding-bottom: 8px;
}

.hp-section-head__link {
	margin-right: 12px;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
}

.hp-section-head__link span {
	background-size: 100% 1px; /* подчёркнута всегда, при наведении линия «перебегает» */
}

.hp-section-head__link:hover span {
	animation: hp-underline .6s ease;
}

@keyframes hp-underline {
	0% { background-position: right bottom; background-size: 100% 1px; }
	50% { background-position: right bottom; background-size: 0 1px; }
	51% { background-position: left bottom; background-size: 0 1px; }
	100% { background-position: left bottom; background-size: 100% 1px; }
}

.hp-rooms .hp-section-head__link svg {
	display: none; /* рядом и так стрелки листания */
}

.hp-section-more {
	display: none; /* ссылки переехали наверх, к заголовку */
}

/* ---------- Первый экран ---------- */
.hp-hero__title {
	font-size: clamp(40px, 6vw, 96px);
	line-height: 1;
	letter-spacing: -.03em;
}

/* ---------- Об отеле: первый абзац — крупный «лид», остальное спокойно ---------- */
.hp-about__inner {
	gap: clamp(32px, 7vw, 120px);
	padding-top: 0;
	padding-bottom: 0;
}

.hp-about__text {
	max-width: 640px;
	padding-left: 0;
	font-size: 17px;
	line-height: 1.7;
	text-align: left;
}

.hp-about__text > p:first-child {
	margin-bottom: 32px;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--hp-ink);
}

/* ---------- Цифры: сплошная серая полоса, цифры белые, по левому краю колонок ---------- */
.hp-stats {
	padding-top: calc(var(--hp-space) * 1.1);
	padding-bottom: calc(var(--hp-space) * 1.1);
	background: #595660;
}

.hp-stats__list {
	padding: 0;
	border: 0;
}

@media (min-width: 769px) {
	/* все цифры в один ряд, сколько бы их ни было в админке */
	.hp-stats__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

.hp-stats__item {
	align-items: flex-start;
	gap: 10px;
	padding: 4px 24px;
	text-align: left;
	color: #fff;
}

.hp-stats__item:first-child {
	padding-left: 0;
}

/* тонкие белые линии между колонками */
.hp-stats__item + .hp-stats__item {
	border-left: 1px solid rgba(255, 255, 255, .9);
}

.hp-stats__value {
	font-size: clamp(44px, 5vw, 80px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
}

.hp-stats__label {
	max-width: 200px;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, .75);
}

/* ---------- Номера: подпись под фото по левому краю ---------- */
.hp-room-card--arch {
	text-align: left;
}

.hp-room-card--arch .hp-room-card__info {
	justify-content: flex-start;
	padding: 22px 0 0;
}

.hp-room-card--arch .hp-room-card__text {
	align-items: flex-start;
	gap: 6px;
}

.hp-room-card--arch .hp-room-card__title,
.hp-room-card__title {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--hp-ink);
}

.hp-room-card__price,
.hp-room-card--arch .hp-room-card__price {
	font-size: 15px;
	color: var(--hp-accent);
}

/* ---------- Рестораны: бордовый блок наезжает на предыдущий, скруглённый верх ---------- */
.hp-resto.hp-resto--arcade {
	position: relative;
	z-index: 2;
	margin: 0;
	padding-top: calc(var(--hp-space) * 1.4);
	padding-bottom: calc(var(--hp-space) * 1.4);
	border-radius: 32px 32px 0 0;
}

.hp-resto .hp-section-head__link {
	color: #fff;
}

.hp-arcade__name {
	margin-top: 24px;
	font-size: 22px;
	letter-spacing: -.01em;
	text-transform: none;
}

.hp-arcade__sub {
	font-size: 15px;
	letter-spacing: 0;
}

/* Галерея наезжает на бордовый блок */
.hp-gallery {
	position: relative;
	z-index: 3;
	margin-top: -32px;
	border-radius: 32px 32px 0 0;
	background: var(--hp-white);
}

/* ---------- Фото: раскрываются «шторкой» снизу вверх (класс ставит js/home.js) ---------- */
.hp-curtain {
	clip-path: inset(100% 0 0 0);
}

/* ---------- Текст проявляется построчно: строки уезжают под «маску» ---------- */
.hp-split-line-mask {
	padding-bottom: .08em; /* хвосты букв не обрезаются */
	margin-bottom: -.08em;
}

/* ---------- Телефон ---------- */
@media (max-width: 768px) {
	.hp-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.hp-section-head__aside {
		padding-bottom: 0;
	}

	.hp-section-head .hp-title,
	.hp-section-head__title.hp-title {
		font-size: 40px;
	}

	.hp-hero__title {
		font-size: 40px;
	}

	.hp-about__text {
		font-size: 16px;
	}

	.hp-stats__list {
		row-gap: 36px;
	}

	.hp-stats__item,
	.hp-stats__item:first-child {
		padding: 0 0 0 20px;
	}

	/* два столбца: линия только перед правым столбцом */
	.hp-stats__item + .hp-stats__item {
		border-left: 0;
	}

	.hp-stats__item:nth-child(odd) {
		padding-left: 0;
	}

	.hp-stats__item:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, .9);
	}

	.hp-stats__item:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.hp-resto.hp-resto--arcade,
	.hp-gallery {
		border-radius: 20px 20px 0 0;
	}

	.hp-gallery {
		margin-top: -20px;
	}
}

/* =========================================================================
   РЕДИЗАЙН · ЭТАП 1 — дизайн-система: цвета, шрифты, отступы, кнопки, шапка
   Блок идёт последним и перекрывает всё выше. Чтобы откатить этап — удалить этот блок целиком.
   Бордо — единый цвет из брендбука: #7C122E.
   ========================================================================= */

/* ---------- Цвета, шрифт заголовков, отступы ---------- */

@media (min-width: 1101px) {
	:root { --hp-header-h: 88px; }
}

body.hp {
	background: var(--hp-bg);
	color: var(--hp-text);
}

.hp ::selection {
	background: var(--hp-accent);
	color: #fff;
}

/* Белые подложки разделов становятся тёплыми */
.hp-gallery {
	background: var(--hp-bg);
}

/* ---------- Заголовки и крупные цифры: serif, лёгкий вес, без заглавных ---------- */
.hp-title,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-rules__title,
.hp-contacts__heading,
.hp-contacts-page__heading,
.hp-conf__card-title,
.hp-footer__title,
.hp-booking__title,
.hp-hero__title,
.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title,
.hp-conf-hero__title,
.hp-venue-hero__title,
.hp-room-hero__title,
.hp-venue-menu__title,
.hp-about-family__list-title,
.hp-card--resto .hp-card__title,
.hp-room-card__title,
.hp-arcade__name,
.hp-stats__value,
.hp-conf__fact-value {
	font-family: var(--hp-font-display);
	font-weight: 400;
	letter-spacing: -.015em;
	text-transform: none;
	font-variant-numeric: lining-nums; /* в Playfair цифры по умолчанию «старинные», с прыгающей высотой */
}

.hp-section-head .hp-title,
.hp-rooms .hp-section-head .hp-title,
.hp-resto .hp-section-head .hp-title,
.hp-section-head__title.hp-title {
	font-size: clamp(40px, 5.4vw, 84px);
	line-height: 1.04;
	letter-spacing: -.02em;
}

.hp-stats__value,
.hp-conf__fact-value {
	letter-spacing: -.02em;
}

/* Мелкая надпись над заголовком — Gotham, капсом, с разрядкой */
.hp-subtitle {
	font-family: var(--hp-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hp-accent);
}

/* Цифры — на тёмном графите вместо серо-фиолетового; тонкие линии цвета шампань */
.hp-stats {
	background: var(--hp-dark);
}

.hp-stats__item + .hp-stats__item {
	border-left-color: rgba(185, 163, 122, .45);
}

.hp-stats__label {
	letter-spacing: .08em;
	color: rgba(250, 247, 242, .62);
}

/* ---------- Кнопки: строгие, прямоугольные, заглавные с разрядкой ---------- */
.hp-btn {
	min-height: 56px;
	padding: 0 36px;
	border-radius: 2px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hp-btn--lg {
	min-width: 280px;
	min-height: 64px;
	font-size: 12.5px;
}

.hp-btn--primary:hover {
	background: var(--hp-accent-dark);
}

.hp-btn--outline-light {
	min-width: 0;
}

/* ---------- Шапка ---------- */
.hp-header {
	background: rgba(250, 247, 242, .92);
}

/* Размытие — на подложке-псевдоэлементе, а не на самой шапке: backdrop-filter у шапки превращает её в «контейнер» для
   position:fixed внутри, и выпадающее мобильное меню переставало занимать весь экран */
.hp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
	backdrop-filter: saturate(1.4) blur(16px);
	pointer-events: none;
}

.hp-header--scrolled {
	box-shadow: 0 1px 0 var(--hp-line);
}

/* Поверх первого экрана — прозрачная, с мягким затемнением сверху (перекрывает правила выше) */
.hp-header--over {
	background: linear-gradient(180deg, rgba(14, 8, 10, .55), rgba(14, 8, 10, 0));
	box-shadow: none;
}

.hp-header--over::before {
	display: none;
}

.hp-header__inner {
	gap: 36px;
	padding: 0 48px;
}

.hp-header__logo {
	flex-shrink: 0;
}

.hp-header__logo img {
	height: 54px;
}

/* Кнопка «Забронировать» — всегда на виду справа (на телефоне есть нижняя панель) */
.hp-header__book {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 28px;
	border-radius: 2px;
	background: var(--hp-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	transition: background-color .25s ease;
}

.hp-header__book:hover {
	background: var(--hp-accent-dark);
}

@media (min-width: 1101px) {
	.hp-header__nav .hp-menu {
		flex-wrap: nowrap;
		gap: 8px 28px;
	}

	.hp-header__nav .hp-menu a {
		position: relative;
		padding: 8px 0;
		font-size: 12.5px;
		font-weight: 500;
		letter-spacing: .12em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--hp-ink);
		transition: color .25s ease;
	}

	/* тонкая линия шампань «выезжает» под пунктом */
	.hp-header__nav .hp-menu a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: var(--hp-gold);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .4s cubic-bezier(.22, 1, .36, 1);
	}

	.hp-header__nav .hp-menu a:hover,
	.hp-header__nav .hp-menu .current-menu-item > a {
		color: var(--hp-accent);
		text-decoration: none;
	}

	.hp-header__nav .hp-menu a:hover::after,
	.hp-header__nav .hp-menu .current-menu-item > a::after {
		transform: scaleX(1);
	}

	/* пока шапка прозрачная поверх фото — белая */
	.hp-header--over .hp-header__nav .hp-menu a,
	.hp-header--over .hp-header__nav .hp-menu a:hover {
		color: #fff;
	}

	.hp-lang__link {
		font-size: 12.5px;
		font-weight: 500;
		letter-spacing: .16em;
	}
}

/* Средние экраны: всё в одну строку, чуть плотнее */
@media (min-width: 1101px) and (max-width: 1360px) {
	.hp-header__inner {
		gap: 24px;
		padding: 0 32px;
	}

	.hp-header__nav .hp-menu {
		gap: 8px 20px;
	}

	.hp-header__nav .hp-menu a {
		font-size: 12px;
		letter-spacing: .08em;
	}

	.hp-header__book {
		padding: 0 20px;
		letter-spacing: .12em;
	}
}

@media (max-width: 1100px) {
	.hp-header__book {
		display: none;
	}
}

/* =========================================================================
   РЕДИЗАЙН · ЭТАП 2 — цифры и номера
   Откат этапа: удалить этот блок (до конца файла).
   ========================================================================= */

/* ---------- Цифры: огромные, тонкие, на тёмном графите; подпись мелким капсом ---------- */
.hp-stats__list {
	border-top: 1px solid rgba(185, 163, 122, .3);
	border-bottom: 1px solid rgba(185, 163, 122, .3);
	padding: clamp(40px, 5vw, 72px) 0;
}

.hp-stats__item {
	justify-content: flex-end;
	gap: 18px;
	padding: 4px clamp(20px, 2.6vw, 44px);
	color: var(--hp-bg);
}

.hp-stats__item + .hp-stats__item {
	border-left-color: rgba(185, 163, 122, .3);
}

.hp-stats__value {
	font-size: clamp(48px, 7vw, 124px);
	line-height: .95;
	letter-spacing: -.035em;
	color: var(--hp-bg);
}

.hp-stats__label {
	max-width: 220px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hp-gold);
}

/* ---------- Факты конференц-залов: та же система — крупные цифры бордо, тонкие линии ---------- */
.hp-conf__facts {
	border-top-color: var(--hp-line);
	border-bottom-color: var(--hp-line);
}

.hp-conf__fact {
	align-items: flex-start;
	justify-content: flex-end;
	gap: 14px;
	padding: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px);
	text-align: left;
}

.hp-conf__fact-value {
	font-size: clamp(40px, 4.4vw, 76px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: none;
	color: var(--hp-accent);
}

.hp-conf__fact-label {
	max-width: 240px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hp-text);
}

/* ---------- Номера: крупные фото, под ними линия, номер по порядку, название serif, цена, стрелка ---------- */
.hp-rooms__track {
	counter-reset: hp-room;
	grid-auto-columns: clamp(280px, 30vw, 500px);
	gap: clamp(24px, 3vw, 56px);
}

.hp-room-card--arch {
	counter-increment: hp-room;
}

.hp-room-card__photo {
	aspect-ratio: 4 / 5;
	border-radius: 2px;
	background: var(--hp-soft);
}

/* фото плавно приближается при наведении на всю карточку (уже есть scale в старых стилях — делаем медленнее и мягче) */
.hp-room-card--arch:hover .hp-room-card__img {
	transform: scale(1.04);
}

.hp-room-card--arch .hp-room-card__info {
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-top: 26px;
	padding: 24px 0 0;
	border-top: 1px solid var(--hp-line);
	transition: border-color .4s ease;
}

.hp-room-card--arch:hover .hp-room-card__info {
	border-top-color: var(--hp-gold);
}

/* порядковый номер 01, 02, 03… — тонкая редакционная деталь */
.hp-room-card--arch .hp-room-card__text::before {
	content: counter(hp-room, decimal-leading-zero);
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	color: var(--hp-gold);
}

.hp-room-card--arch .hp-room-card__text {
	gap: 8px;
}

.hp-room-card--arch .hp-room-card__title,
.hp-room-card__title {
	font-family: var(--hp-font-display);
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--hp-ink);
}

.hp-room-card__price,
.hp-room-card--arch .hp-room-card__price {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--hp-accent);
}

/* стрелка возвращается (в прежней версии была скрыта): тонкий круг, при наведении заливается бордо */
.hp-room-card--arch .hp-room-card__go {
	display: flex;
	width: 52px;
	height: 52px;
	border-color: var(--hp-line);
	color: var(--hp-ink);
}

.hp-room-card--arch:hover .hp-room-card__go {
	border-color: var(--hp-accent);
	background: var(--hp-accent);
	color: #fff;
	transform: rotate(45deg);
}

@media (max-width: 768px) {
	.hp-stats__item:nth-child(even) {
		border-left-color: rgba(185, 163, 122, .3);
	}

	.hp-stats__value {
		font-size: clamp(44px, 14vw, 64px);
	}

	.hp-rooms__track {
		grid-auto-columns: 78vw;
	}

	.hp-room-card--arch .hp-room-card__go {
		width: 44px;
		height: 44px;
	}
}

/* ---------- Без наезда блоков: рестораны, галерея и подвал идут ровно один за другим ---------- */
.hp-resto.hp-resto--arcade,
.hp-gallery {
	z-index: auto;
	margin-top: 0;
	border-radius: 0;
}

@media (max-width: 768px) {
	.hp-resto.hp-resto--arcade,
	.hp-gallery {
		margin-top: 0;
		border-radius: 0;
	}
}

/* ---------- Цифры: «24 км» и подобные не переносятся на вторую строку ---------- */
.hp-stats__value {
	font-size: clamp(44px, 4.8vw, 88px);
	white-space: nowrap;
}

.hp-stats__item {
	padding: 4px clamp(14px, 1.8vw, 32px);
}

@media (max-width: 768px) {
	.hp-stats__value {
		font-size: clamp(40px, 12vw, 56px);
	}
}

/* =========================================================================
   РЕДИЗАЙН · ЭТАП 3 — конференц-залы, рестораны, галерея, услуги
   Откат этапа: удалить этот блок (до конца файла).
   ========================================================================= */

/* ---------- Конференц-залы: тёплый второй фон, карточка с фото-подложкой ---------- */
.hp-conf {
	background: var(--hp-soft);
}

.hp-conf__grid {
	gap: clamp(20px, 3vw, 48px);
	align-items: stretch;
}

.hp-conf__card {
	position: relative;
	min-height: clamp(420px, 38vw, 560px);
	padding: clamp(36px, 4.4vw, 72px);
	border-radius: 2px;
	background: var(--hp-accent-dark);
	overflow: hidden;
	isolation: isolate;
}

/* Фото зала (поле в админке) под плотным бордовым градиентом: текст читается, фото «проступает» */
.hp-conf__card--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--hp-conf-bg) center / cover no-repeat;
	transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

.hp-conf__card--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(124, 18, 46, .78) 0%, rgba(124, 18, 46, .9) 55%, rgba(124, 18, 46, .97) 100%);
}

.hp-conf__card--photo:hover::before {
	transform: scale(1.04);
}

.hp-conf__card-title {
	max-width: 520px;
	margin-bottom: 22px;
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1.1;
	color: #fff;
}

.hp-conf__card-text {
	max-width: 480px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .85);
}

.hp-conf__card .hp-btn--outline-light {
	border-color: rgba(255, 255, 255, .7);
}

/* ---------- Рестораны и бары: глубокий бордо, арки с тонким золотистым контуром ---------- */
.hp-resto.hp-resto--arcade {
	background: var(--hp-accent-dark);
}

.hp-arcade__photo {
	background: var(--hp-accent-dark);
	outline: 1px solid rgba(185, 163, 122, .5);
	outline-offset: 12px;
}

.hp-arcade__img {
	filter: saturate(.94) contrast(1.03); /* фото разного происхождения — чуть ближе друг к другу по цвету */
}

.hp-arcade__name {
	margin-top: 44px;
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.1;
	color: #fff;
}

.hp-arcade__sub {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hp-gold);
}

/* ---------- Галерея: как было — первое фото высокое вертикальное слева, остальные в три колонки; оформление без скруглений ---------- */
.hp-gallery__grid {
	grid-template-columns: 291fr 355fr 355fr 355fr;
	grid-auto-rows: clamp(150px, 17vw, 260px);
	gap: clamp(10px, 1.1vw, 16px);
	margin: 0;
}

.hp-gallery__item {
	grid-row: auto;
	grid-column: auto;
	border-radius: 2px;
	background: var(--hp-soft);
}

.hp-gallery__item:first-child {
	grid-row: span 2;
}

.hp-gallery__item img {
	transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.hp-gallery__item:hover img {
	transform: scale(1.04);
}

@media (max-width: 1100px) {
	.hp-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(150px, 26vw, 240px);
	}
}

/* ---------- Услуги: подписи мелким капсом, иконки тонкие, линии шампань ---------- */
.hp-services__list {
	border-top-color: rgba(185, 163, 122, .5);
	border-bottom-color: rgba(185, 163, 122, .5);
}

.hp-services__list li + li {
	border-left-color: rgba(185, 163, 122, .4);
}

.hp-services__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hp-ink);
}

@media (max-width: 768px) {
	.hp-conf__card {
		min-height: 0;
	}

	.hp-arcade__photo {
		outline-offset: 8px;
	}

	.hp-arcade__name {
		margin-top: 36px;
	}
}

/* =========================================================================
   РЕДИЗАЙН · ЭТАП 4 — подвал, контакты, карта
   Откат этапа: удалить этот блок (до конца файла).
   ========================================================================= */

/* ---------- Карта: монохромная, с бордовым оттенком и своим маркером в центре ---------- */
.hp-contacts__map {
	border-radius: 2px;
	background: var(--hp-accent-dark);
	outline: 1px solid rgba(185, 163, 122, .5);
	outline-offset: 10px;
}

.hp-contacts__map iframe.hp-contacts__map-canvas {
	filter: grayscale(1) contrast(1.05) brightness(1.02);
}

/* бордовая «плёнка» поверх чёрно-белой карты */
.hp-contacts__map:has(iframe)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hp-accent);
	mix-blend-mode: multiply;
	opacity: .78;
	pointer-events: none;
}

/* свой маркер: точка с белым ободком и золотистым кольцом (центр карты = координаты отеля) */
.hp-contacts__map:has(iframe)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--hp-accent);
	box-shadow: 0 0 0 10px rgba(185, 163, 122, .35), 0 0 0 22px rgba(185, 163, 122, .15);
	pointer-events: none;
}

.hp-contacts__map-link {
	z-index: 3;
	right: 0;
	bottom: 0;
	padding: 16px 24px;
	border-radius: 0;
	background: var(--hp-bg);
	box-shadow: none;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hp-accent);
	transition: background-color .25s, color .25s;
}

.hp-footer .hp-contacts__map-link:hover {
	background: var(--hp-accent);
	color: #fff;
}

/* ---------- Подвал ---------- */
.hp-footer {
	padding: clamp(80px, 9vw, 140px) 0 36px;
}

.hp-footer__top {
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
	padding-bottom: clamp(56px, 7vw, 104px);
	margin-bottom: clamp(48px, 5vw, 72px);
	border-bottom: 1px solid rgba(185, 163, 122, .35);
}

.hp-footer__eyebrow {
	font-size: 12px;
	letter-spacing: .24em;
	color: var(--hp-gold);
}

.hp-footer__title {
	margin-bottom: 40px;
	font-size: clamp(36px, 4vw, 64px);
	line-height: 1.05;
	letter-spacing: -.02em;
}

.hp-footer__map {
	aspect-ratio: 16 / 11;
	border-radius: 2px;
}

.hp-footer__heading {
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--hp-gold);
}

.hp-footer__menu li + li {
	margin-top: 14px;
}

.hp-footer__social a {
	border-color: rgba(185, 163, 122, .6);
}

.hp-footer__social a:hover {
	border-color: var(--hp-bg);
	background: var(--hp-bg);
}

.hp-footer__copyright {
	border-top-color: rgba(185, 163, 122, .3);
	letter-spacing: .04em;
}

@media (max-width: 768px) {
	.hp-contacts__map {
		outline-offset: 6px;
	}

	.hp-contacts__map-link {
		padding: 13px 18px;
	}
}

/* ---------- Логотип на бордовом фоне: ромб с BW остаётся бордовым, белая только надпись ----------
   Файл img/logo-reversed.png уже подготовлен (ромб в своём цвете, надпись белая), поэтому белый фильтр не нужен. */
.hp-footer__logo,
.hp-preloader__logo {
	filter: none;
}

/* ---------- Логотип в шапке поверх фото: ромб в своём цвете, белая только надпись ---------- */
.hp-header__logo {
	position: relative;
	display: block;
}

.hp-header__logo-over {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.hp-header__logo .hp-header__logo-main {
	transition: opacity .3s ease;
}

.hp-header--over .hp-header__logo img.hp-header__logo-main {
	opacity: 0;
	filter: none;
}

.hp-header--over .hp-header__logo img.hp-header__logo-over {
	opacity: 1;
	filter: none;
}

/* =========================================================================
   Блок услуг перед подвалом: тёмный графит, золотистые тонкие иконки, подписи капсом
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */
.hp-services {
	margin-top: 0;
	padding: clamp(56px, 6vw, 96px) 0;
	background: var(--hp-dark);
}

.hp-services__list {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.hp-services__list li + li {
	border-left: 1px solid rgba(185, 163, 122, .28);
}

.hp-services__item {
	justify-content: center;
	gap: 22px;
	padding: 12px clamp(12px, 2vw, 32px);
	color: var(--hp-bg);
}

.hp-services .hp-services__icon {
	color: var(--hp-gold);
}

svg.hp-services__icon {
	width: 48px;
	height: 48px;
	stroke-width: 1.1;
}

.hp-services__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--hp-bg);
}

a.hp-services__item:hover .hp-services__label {
	color: var(--hp-gold);
}

.hp-services__item:hover .hp-services__icon {
	transform: translateY(-4px);
}

/* Подвал главной вплотную к тёмному блоку услуг, без светлой полосы между ними */
.hp-footer--map {
	margin-top: 0;
}

@media (max-width: 768px) {
	.hp-services__list li:nth-child(even) {
		border-left-color: rgba(185, 163, 122, .28);
	}
}

/* =========================================================================
   АДАПТИВ — телефон и небольшие экраны
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */

/* Страница не «ездит» вбок: всё, что выходит за край экрана, обрезается (clip не ломает sticky и плавную прокрутку) */
html,
body.hp {
	overflow-x: clip;
}

/* Контакты и карта: колонка сетки не шире экрана (раньше длинный текст и карта растягивали её за правый край) */
.hp-footer__top > *,
.hp-footer__grid > * {
	min-width: 0;
}

@media (max-width: 1100px) {
	.hp-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-footer__map {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	/* Услуги: без лишних вертикальных линий — линия только между колонками */
	.hp-services__list li + li {
		border-left: 0;
	}

	.hp-services__list li:nth-child(even) {
		border-left: 1px solid rgba(185, 163, 122, .28);
	}

	.hp-services__list li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Кнопки на всю ширину колонки, а не шире экрана */
	.hp-footer .hp-btn,
	.hp-footer__whatsapp {
		min-width: 0;
		max-width: 100%;
	}
}

/* Факты конференц-залов: на узком экране — одна колонка, подписи не обрезаются */
@media (max-width: 560px) {
	.hp-conf__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-conf__fact,
	.hp-conf__fact:nth-child(odd),
	.hp-conf__fact:nth-child(-n + 2) {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 22px 4px;
		border-right: 0;
		border-bottom: 1px solid var(--hp-line);
	}

	.hp-conf__fact:last-child {
		border-bottom: 0;
	}

	.hp-conf__fact-value {
		flex-shrink: 0;
		font-size: clamp(34px, 10vw, 46px);
	}

	.hp-conf__fact-label {
		max-width: 60%;
		font-size: 11px;
		text-align: right;
		letter-spacing: .08em;
		overflow-wrap: break-word;
	}
}

@media (max-width: 768px) {
	/* внизу подвала — место под нижнюю кнопку «Забронировать», она закрывала копирайт */
	.hp-footer {
		padding: 64px 0 104px;
	}
}

/* Заголовки красиво переносятся по строкам (не остаётся одно слово на второй строке) */
.hp-hero__title,
.hp-section-head .hp-title,
.hp-conf__card-title,
.hp-footer__title {
	text-wrap: balance;
}

/* Невысокие экраны ноутбуков (MacBook 12–14 дюймов): фото номеров чуть ниже, чтобы карточка с подписью помещалась на экран */
@media (min-width: 769px) and (max-height: 780px) {
	.hp-room-card__photo {
		aspect-ratio: 1 / 1.05;
	}

	.hp-conf__card {
		min-height: 0;
	}

	.hp-arcade__photo {
		aspect-ratio: 3 / 3.7;
	}
}

/* Мобильное меню (бургер): тёплый фон, крупные пункты serif-шрифтом */
@media (max-width: 1100px) {
	.hp-header__nav {
		background: var(--hp-bg);
		padding-top: 40px;
	}

	.hp-header__nav .hp-menu {
		gap: 18px;
	}

	.hp-header__nav .hp-menu a {
		font-family: var(--hp-font-display);
		font-size: 34px;
		line-height: 1.1;
		letter-spacing: -.01em;
		color: var(--hp-ink);
	}

	.hp-header__nav .hp-menu a:hover,
	.hp-header__nav .hp-menu .current-menu-item > a {
		color: var(--hp-accent);
	}
}

/* =========================================================================
   Закрытая страница по паролю (шаблон page-private.php): окно ввода пароля и содержимое
   ========================================================================= */
.hp-private {
	padding: clamp(40px, 6vw, 96px) 0 var(--hp-space);
}

.hp-private__title {
	margin: 0 0 clamp(24px, 3vw, 48px);
	font-family: var(--hp-font-display);
	font-size: clamp(40px, 6vw, 88px);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--hp-ink);
	text-wrap: balance;
}

.hp-private__lock {
	max-width: 560px;
}

.hp-private__content {
	max-width: 900px;
}

/* Окно ввода пароля (стандартная форма WordPress) */
.post-password-form {
	display: grid;
	gap: 14px;
	max-width: 520px;
}

.post-password-form p {
	margin: 0;
	font-size: var(--fs-s);
	line-height: 1.6;
	color: var(--hp-text);
}

.post-password-form label {
	display: grid;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hp-ink);
}

.post-password-form input[type="password"] {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border: 1px solid rgba(28, 23, 25, .24);
	border-radius: 2px;
	background: #fff;
	color: var(--hp-ink);
	font: 400 16px var(--hp-font);
	letter-spacing: normal;
	text-transform: none;
}

.post-password-form input[type="password"]:focus {
	border-color: var(--hp-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(124, 18, 46, .14);
}

.post-password-form input[type="submit"] {
	min-height: 56px;
	padding: 0 40px;
	border: 0;
	border-radius: 2px;
	background: var(--hp-accent);
	color: #fff;
	font: 500 12.5px/1 var(--hp-font);
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease;
}

.post-password-form input[type="submit"]:hover {
	background: var(--hp-accent-dark);
}

/* =========================================================================
   ШРИФТ ЗАГОЛОВКОВ: вместо Playfair (с засечками) — Montserrat тонкого начертания (современный гротеск)
   Шрифты лежат в fonts/montserrat/. Откат: удалить этот блок (до конца файла).
   ========================================================================= */
@font-face {
	font-family: "HP Display";
	src: url("../fonts/montserrat/montserrat-cyrillic-ext.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "HP Display";
	src: url("../fonts/montserrat/montserrat-cyrillic.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "HP Display";
	src: url("../fonts/montserrat/montserrat-latin-ext.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "HP Display";
	src: url("../fonts/montserrat/montserrat-latin.woff2") format("woff2");
	font-weight: 200 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Крупные заголовки и цифры — тонкие (Light), плотный трекинг */
.hp-title,
.hp-venue-title,
.hp-contact-form__title,
.hp-venue-cta__title,
.hp-rules__title,
.hp-contacts__heading,
.hp-contacts-page__heading,
.hp-footer__title,
.hp-booking__title,
.hp-page-hero__title,
.hp-about-hero__title,
.hp-rules-hero__title,
.hp-conf-hero__title,
.hp-venue-hero__title,
.hp-room-hero__title,
.hp-venue-menu__title,
.hp-about-family__list-title,
.hp-stats__value,
.hp-conf__fact-value,
.hp-private__title {
	font-weight: 300;
	letter-spacing: -.035em;
}

/* Montserrat шире Playfair — размеры чуть меньше, чтобы заголовки выглядели так же сдержанно */
.hp-section-head .hp-title,
.hp-rooms .hp-section-head .hp-title,
.hp-resto .hp-section-head .hp-title,
.hp-section-head__title.hp-title {
	font-size: clamp(34px, 4.6vw, 72px);
	line-height: 1.08;
}

.hp-stats__value {
	font-size: clamp(40px, 4.2vw, 76px);
}

.hp-conf__fact-value {
	font-size: clamp(34px, 3.8vw, 64px);
}

.hp-footer__title {
	font-size: clamp(32px, 3.4vw, 54px);
}

/* Заголовки поменьше и поверх фото — чуть плотнее вес, чтобы читались */
.hp-hero__title,
.hp-room-card__title,
.hp-room-card--arch .hp-room-card__title,
.hp-card--resto .hp-card__title,
.hp-arcade__name,
.hp-conf__card-title {
	font-weight: 400;
	letter-spacing: -.02em;
}

.hp-room-card__title,
.hp-room-card--arch .hp-room-card__title {
	font-size: clamp(20px, 1.8vw, 28px);
}

.hp-arcade__name {
	font-size: clamp(22px, 2vw, 30px);
}

.hp-conf__card-title {
	font-size: clamp(26px, 2.6vw, 40px);
}

/* Мобильное меню */
@media (max-width: 1100px) {
	.hp-header__nav .hp-menu a {
		font-weight: 300;
		font-size: 30px;
		letter-spacing: -.02em;
	}
}

@media (max-width: 768px) {
	.hp-section-head .hp-title,
	.hp-section-head__title.hp-title {
		font-size: clamp(32px, 9.5vw, 40px);
	}
}

/* =========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ: читаемый текст на фото в первом экране и единый шрифт заголовков карточек
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */

/* Первый экран внутренней страницы (например, «Номера»): заголовок и надпись над ним белые, чтобы не сливались с фото */
.hp-page-hero .hp-title,
.hp-page-hero .hp-page-hero__title,
.hp-page-hero__title {
	color: #fff;
	text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}

.hp-page-hero .hp-subtitle,
.hp-page-hero__subtitle {
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
}

/* Названия на карточках и подзаголовки — тот же шрифт, что на главной (раньше были Gotham) */
.hp-card__title,
.hp-conf-adv__name,
.hp-conf-hall__name,
.hp-room-amenities__title {
	font-family: var(--hp-font-display);
	font-weight: 400;
	letter-spacing: -.015em;
	text-transform: none;
}

.hp-card__title {
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.15;
}

.hp-conf-adv__name {
	font-size: clamp(20px, 1.7vw, 24px);
	line-height: 1.2;
}

.hp-conf-hall__name {
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.1;
}

.hp-room-amenities__title {
	font-size: clamp(22px, 2vw, 28px);
}

/* Галерея на странице номера: небольшие зазоры между фото и слегка скруглённые углы, как в остальных блоках сайта */
.hp-room-photos {
	gap: 10px;
}

.hp-room-photos__item {
	border-radius: var(--hp-radius);
}

/* Кнопка «Связаться с менеджером» в подвале: помещается в свою колонку и не залезает на соседнюю */
.hp-footer .hp-btn.hp-footer__whatsapp {
	width: 100%;
	max-width: 360px;
	padding: 14px 18px;
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: .1em;
	text-align: center;
	white-space: normal;
}

/* =========================================================================
   Шапка на телефоне и планшете (до 1100px): логотип по левому краю контента, меню-бургер видно сразу
   ========================================================================= */
@media (max-width: 1100px) {
	/* Отступы шапки — как у контента страницы (раньше стояли 48px, как на компьютере) */
	.hp-header__inner {
		gap: 16px;
		padding: 0 var(--hp-gutter);
	}

	.hp-header__logo img {
		height: 44px;
	}

	/* Линии бургера выравниваются по правому краю контента (внутри кнопки отступ 10px) */
	.hp-header__burger {
		flex-shrink: 0;
		margin-right: -10px;
	}

	/* На компьютере шапка прячется, пока идёт заставка с буквами. На телефоне прятать нельзя: гость остался бы без меню */
	.hp-header--hidden {
		transform: none;
	}
}

@media (max-width: 480px) {
	.hp-header__logo img {
		height: 40px;
	}
}

/* Подвал на телефоне: навигацию (пункты меню) не показываем — меню и так открывается кнопкой-бургером.
   Ссылка «Правила проживания и бронирования» остаётся: её в меню шапки нет. */
@media (max-width: 768px) {
	.hp-footer__col--nav .hp-footer__heading,
	.hp-footer__col--nav .hp-footer__menu > li:not(.hp-footer__rules) {
		display: none;
	}
}

/* Для вошедших в админку: на телефоне панель WordPress лежит поверх шапки и закрывает логотип и бургер — на телефоне её скрываем */
@media (max-width: 600px) {
	#wpadminbar {
		display: none !important;
	}

	html.admin-bar,
	html {
		margin-top: 0 !important;
	}
}

/* =========================================================================
   Форма бронирования на телефоне: всё помещается даже на экране 360px и уже
   ========================================================================= */
.hp-room-body__grid > *,
.hp-booking,
.hp-booking__row > *,
.hp-booking__field {
	min-width: 0;
}

.hp-booking input,
.hp-booking textarea,
.hp-booking select {
	max-width: 100%;
}

@media (max-width: 1100px) {
	/* колонка с формой не шире экрана (раньше длинные поля растягивали её за край) */
	.hp-room-body__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-room-body__aside {
		min-width: 0;
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	.hp-booking {
		padding: 24px 16px 20px;
	}

	/* дата заезда и дата выезда — на разных строках, на всю ширину */
	.hp-booking__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.hp-booking__row:first-of-type .hp-booking__field > span {
		text-align: left;
	}

	.hp-booking__field input,
	.hp-booking__row:first-of-type input {
		width: 100%;
	}

	/* взрослые и дети — в одну строку, подписи слева, поля справа, чтобы не было тесно */
	.hp-booking__row--guests {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
		margin: 4px 0 18px;
	}

	.hp-booking__field--inline {
		justify-content: space-between;
		gap: 8px;
	}

	.hp-booking__field--inline input {
		width: 52px;
		flex-shrink: 0;
	}

	/* способы связи (WhatsApp, почта) — рядом, но с небольшим зазором */
	.hp-booking__channels {
		gap: 12px;
	}
}

@media (max-width: 380px) {
	.hp-booking {
		padding: 20px 14px 18px;
	}

	/* на самых узких экранах взрослые и дети — друг под другом */
	.hp-booking__row--guests {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* =========================================================================
   iPhone: подвал, чёткий логотип в шапке, поля дат
   ========================================================================= */

/* Шапка на телефоне: без размытия фона (на iOS из-за него логотип выглядел мутным и бледным) и почти непрозрачная */
@media (max-width: 1100px) {
	.hp-header::before {
		display: none;
	}

	.hp-header {
		background: rgba(250, 247, 242, .98);
	}

	.hp-header--over {
		background: linear-gradient(180deg, rgba(14, 8, 10, .55), rgba(14, 8, 10, 0));
	}

	/* логотип-картинки без плавной смены прозрачности на самом логотипе (iOS на время перехода рисует их в низком качестве) */
	.hp-header__logo .hp-header__logo-main,
	.hp-header__logo-over {
		transition: none;
	}

	.hp-header__logo img {
		image-rendering: auto;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
}

/* Подвал на телефоне: одна колонка. Раньше две узкие колонки — длинные адреса уезжали за правый край */
@media (max-width: 768px) {
	.hp-footer__grid,
	.hp-footer--map .hp-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.hp-footer__col--nav {
		margin-top: -8px;
	}

	.hp-footer__menu a {
		overflow-wrap: anywhere;
	}
}

/* Поля дат (заезд, выезд): на iPhone Safari рисует их по-своему и растягивает до краёв — выравниваем под остальные поля */
.hp-booking input[type="date"] {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: var(--field-h, 48px);
	padding: 0 16px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	line-height: var(--field-h, 48px);
	text-align: left;
}

.hp-booking input[type="date"]::-webkit-date-and-time-value {
	min-height: 1.4em;
	margin: 0;
	text-align: left;
}

.hp-booking input[type="date"]::-webkit-calendar-picker-indicator {
	margin: 0;
}

/* Бургер на iPhone: линии растягиваем на всю ширину кнопки (иначе Safari рисует их нулевой ширины, и меню не видно) */
@media (max-width: 1100px) {
	.hp-header__burger span {
		display: block;
		width: 100%;
		height: 2px;
	}
}

/* =========================================================================
   ПОДВАЛ НА БЕЛОМ ФОНЕ
   Откат: удалить этот блок (до конца файла) и вернуть logo-reversed.png в footer-home.php.
   ========================================================================= */
.hp-footer {
	background: var(--hp-white);
	color: var(--hp-text);
	border-top: 1px solid var(--hp-line);
}

.hp-footer a:hover {
	color: var(--hp-accent);
}

.hp-footer__top {
	border-bottom-color: var(--hp-line);
}

.hp-footer__eyebrow,
.hp-footer__heading {
	color: var(--hp-accent);
}

.hp-footer__title {
	color: var(--hp-accent);
}

.hp-footer__contacts .hp-icon {
	color: var(--hp-accent);
	opacity: 1;
}

.hp-footer__social a {
	border-color: var(--hp-accent);
	color: var(--hp-accent);
}

.hp-footer__social a:hover {
	border-color: var(--hp-accent);
	background: var(--hp-accent);
	color: var(--hp-white);
}

.hp-footer .hp-btn.hp-footer__whatsapp,
.hp-footer .hp-btn.hp-footer__whatsapp:hover {
	background: var(--hp-accent);
	color: var(--hp-white);
}

.hp-footer__whatsapp .hp-icon {
	color: var(--hp-white);
}

.hp-footer__copyright {
	border-top-color: var(--hp-line);
	color: var(--hp-text);
	opacity: .8;
}

/* =========================================================================
   ЦИФРЫ СВЕРХУ — НА БЕЛОМ, БЛОК ПЕРЕД ПОДВАЛОМ — НА #F7F0F2
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */
.hp-stats {
	background: var(--hp-white);
}

.hp-services {
	background: #F7F0F2;
}

.hp-stats__list,
.hp-stats__item + .hp-stats__item,
.hp-stats__item:nth-child(even),
.hp-services__list li + li,
.hp-services__list li:nth-child(even) {
	border-color: rgba(124, 18, 46, .25);
}

.hp-stats__item,
.hp-stats__label,
.hp-services__item,
.hp-services__label {
	color: var(--hp-text);
}

.hp-stats__value,
.hp-services .hp-services__icon {
	color: var(--hp-accent);
}

/* =========================================================================
   СКРУГЛЕНИЯ 20px ВЕЗДЕ (кроме кнопок, круглых иконок и арок ресторанов)
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */
.hp-room-card__photo,
.hp-conf__card,
.hp-conf__facts,
.hp-conf-adv__card,
.hp-gallery__item,
.hp-contacts__map,
.hp-footer__map,
.hp-services__list {
	border-radius: var(--hp-radius);
}

/* Блок с цифрами: без линий сверху и снизу (вертикальные разделители между цифрами остаются) */
.hp-stats__list {
	border-top: 0;
	border-bottom: 0;
}

/* =========================================================================
   РЕСТОРАНЫ И БАРЫ: белый фон, тёмные заголовки как везде, без арок
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */
.hp-resto.hp-resto--arcade {
	background: var(--hp-white);
	color: var(--hp-text);
}

.hp-resto--arcade .hp-title,
.hp-resto--arcade .hp-section-head__sub,
.hp-resto--arcade .hp-ornament,
.hp-resto--arcade .hp-section-head__link,
.hp-resto .hp-section-head__link {
	color: var(--hp-text);
}

.hp-resto__giant {
	color: rgba(89, 86, 96, .08);
}

.hp-arcade__photo {
	border-radius: var(--hp-radius);
	background: var(--hp-soft);
	outline: 0;
}

.hp-arcade__name {
	color: var(--hp-text);
}

.hp-arcade__sub {
	color: var(--hp-text);
	opacity: .75;
}

/* Подвал и блок «Как нас найти»: заголовки тёмные, как везде (не бордовые) */
.hp-footer__title,
.hp-footer__eyebrow,
.hp-footer__heading {
	color: var(--hp-text);
}

/* =========================================================================
   СТРАНИЦА КОНФЕРЕНЦ-ЗАЛОВ, блок преимуществ: каждая карточка на #F7F0F2, без линий
   Откат: удалить этот блок (до конца файла).
   ========================================================================= */
.hp-conf-adv__grid {
	gap: clamp(12px, 1.4vw, 20px);
	border: 0;
}

.hp-conf-adv__card,
.hp-conf-adv__card + .hp-conf-adv__card,
.hp-conf-adv__card:nth-child(odd),
.hp-conf-adv__card:nth-child(n + 3) {
	border: 0;
	border-radius: var(--hp-radius);
	background: #F7F0F2;
}