/*
 * FLEX — главная страница, стили.
 * Макет свёрстан на ширину 1366px; страница масштабируется под окно через CSS zoom (js/scale.js),
 * поэтому все координаты — «макетные» px из Figma.
 */

/* ==========================================================================
   cursor
   ========================================================================== */

/* Свой курсор: системный скрыт на всей странице */
html.has-dot-cursor,
html.has-dot-cursor * {
  cursor: none !important;
}

.dot-cursor {
  position: fixed;
  left: -4.5px;
  top: -4.5px;
  z-index: 1000;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--golden-hour-500);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  will-change: transform;
}

/* ==========================================================================
   fonts
   ========================================================================== */

@font-face {
  font-family: 'Steinbeck';
  src: url('../assets/fonts/Steinbeck-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/Onest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'TT Hoves';
  src: url('../assets/fonts/TTHoves-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

/* ==========================================================================
   tokens
   ========================================================================== */

/* Цвета из переменных Figma */
:root {
  /* Размеры закреплённого экрана; реальные значения выставляет scale.js */
  --scene-h: 768px;
  --scene-dy: 0px;
  --scene-k: 1;
  --scene-cover-h: 800px;

  --rich-beige-100: #f6efe8;

  --deep-brown-100: #e7e5e5;
  --deep-brown-200: #c6c2c2;
  --deep-brown-300: #9d9797;
  --deep-brown-400: #6c6363;
  --deep-brown-500: #332626;
  --deep-brown-600: #2d2121;
  --deep-brown-700: #251b1b;
  --deep-brown-800: #1c1515;
  --deep-brown-900: #130e0e;

  --warm-brown-100: #f1eae7;
  --warm-brown-200: #dfcfc7;
  --warm-brown-300: #c8ad9f;
  --warm-brown-400: #ac8470;
  --warm-brown-600: #7b4a31;
  --warm-brown-700: #653c28;
  --warm-brown-800: #4d2e1f;
  --warm-brown-900: #352015;

  --rich-brown-100: #ebe5e3;
  --rich-brown-400: #876357;
  --rich-brown-600: #4e2213;
  --rich-brown-700: #401c10;

  --golden-hour-300: #ffdeaf;
  --golden-hour-500: #ffba59;
  --luminous-pink-500: #ff8cb4;
  --luminous-blue-500: #8cb4ff;
  --luminous-green-600: #39a772;

  --offers-bg: #31150c;
  --hairline: rgba(27, 27, 27, 0.22);

  /* Коэффициент размытия: inner shadow в Figma затухает быстрее, чем box-shadow в браузере */
  --glow-k: 0.85;

  /* Свечения (inset-тени из Figma) */
  --glow-btn: inset 0 0 calc(5.57px * var(--glow-k)) 0 var(--golden-hour-500), inset 0 0 calc(11.139px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(17.823px * var(--glow-k)) 0 var(--golden-hour-500);
  --glow-gold-square: inset 0 0 calc(10px * var(--glow-k)) 0 var(--golden-hour-500), inset 0 0 calc(20px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(30px * var(--glow-k)) 0 var(--golden-hour-500);
}

/* ==========================================================================
   base
   ========================================================================== */

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

html,
body {
  background: var(--rich-beige-100);
}

body {
  font-family: 'Steinbeck', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: none;
}

ul {
  list-style: none;
}

/* Страница — фрейм HOMEPAGE 1366 × 12901, clip content */
.page {
  position: relative;
  width: 1366px;
  margin: 0 auto;
  /* clip, а не hidden: не создаёт контейнер прокрутки, иначе не работает position: sticky */
  overflow: clip;
  background: var(--rich-beige-100);
}

/* Заголовки h1–h3 — без браузерного жирного: у Steinbeck одно начертание, иначе браузер дорисовывает жирный */
h1,
h2,
h3 {
  font-weight: 400;
}

/* Секции идут в потоке, элементы внутри — по координатам Figma */
.section {
  position: relative;
  width: 1366px;
}

.abs {
  position: absolute;
}

/* Общая типографика */
.t-caps {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.t-12 {
  font-size: 12px;
  line-height: 16px;
}

.t-10 {
  font-size: 10px;
  line-height: 16px;
}

.t-32 {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -2px;
}

.t-96 {
  font-size: 96px;
  line-height: 86px;
  letter-spacing: -5px;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

/* Изображение, заполняющее контейнер */
.img-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Hairline + eyebrow */
.hairline {
  width: 40px;
  height: 1px;
  background: var(--hairline);
}

/* Светящийся слой: чёрная заливка + plus-lighter + внутренние тени */
.glow-layer {
  mix-blend-mode: plus-lighter;
  background: #000;
  pointer-events: none;
}

/* Вертикальная линия (VLine) */
.vline {
  position: relative;
  align-self: stretch;
  width: 0;
  flex-shrink: 0;
}

.vline__img {
  position: absolute;
  left: -224px;
  top: 50%;
  margin-top: -0.5px;
  width: 447px;
  height: 1px;
  transform: rotate(90deg);
}

/*
 * Figma не учитывает letter-spacing после последнего символа строки, браузер — учитывает.
 * Компенсируем отрицательным/положительным margin-right: для текста по левому краю это
 * ни на что не влияет, для центрированного и выровненного вправо — убирает сдвиг.
 */
.t-caps {
  margin-right: -2px;
}

.t-32 {
  margin-right: 2px;
}

.t-96 {
  margin-right: 5px;
}

/* Символ, которого нет в Steinbeck: в Figma место под него есть, но глиф не рисуется */
.missing-glyph {
  display: inline-block;
  width: 13px;
  visibility: hidden;
}

/*
 * Маски строк для появления текста (animations/reveal.js).
 * Обрезка через clip-path вместо overflow: раскладка не меняется, а отрицательные отступы
 * оставляют место под выносные элементы букв (й, р, у, д).
 */
[class*='reveal-line--'][class$='-mask'],
.reveal-line-mask {
  overflow: visible !important;
  clip-path: inset(-0.26em -0.6em -0.32em -0.6em);
}

.reveal-line {
  will-change: transform;
}

/*
 * Переход «предыдущий экран уходит вверх — следующий уже лежит под ним» (по образцу springs.house).
 * Обёртка заезжает под предыдущий блок на высоту экрана; секция внутри «прилипает» к верху окна
 * на время, пока предыдущий блок уезжает, а затем листается как обычно.
 */
.under-previous {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--scene-h));
  /* тёмная подложка: секция проявляется из неё, а не из светлого фона страницы */
  background: var(--deep-brown-700);
}

/* Запас высоты, в пределах которого секция остаётся «прилипшей» */
.under-previous::after {
  content: '';
  display: block;
  height: var(--scene-h);
}

.under-previous > .section {
  position: sticky;
  top: 0;
}

/*
 * Пошаговая сцена ещё не доиграна — страница не прокручивается (animations/stepScene.js).
 * overflow ставим только на body: оно передаётся окну, и окно остаётся прокручиваемым контейнером.
 * Если поставить его и на html, body само станет контейнером прокрутки и position: sticky у сцены отключится.
 */
html.is-scene-locked body {
  overflow: hidden;
}

/* ==========================================================================
   Preloader
   ========================================================================== */

/* Прелоадер: кадры preloader/01–06, сцена 1366 × 768 по центру окна */
html.is-preloading,
html.is-preloading body {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--deep-brown-700);
}

/* Свечение по краям экрана (Rectangle 15: inner shadow 80 / 50 / 20, plus-lighter) */
.preloader__glow {
  position: absolute;
  inset: 0;
  mix-blend-mode: plus-lighter;
  background: #000;
  pointer-events: none;
  box-shadow: inset 0 0 calc(20px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(50px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(80px * var(--glow-k)) 0 var(--golden-hour-500);
}

.preloader__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1366px;
  height: 768px;
  margin: -384px 0 0 -683px;
}

/* В сцене 1366 × 768: x = -1, y = 204 */
.preloader__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1367px;
  height: 360px;
  margin: -180px 0 0 -684px;
}

.preloader__lead,
.preloader__word {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: pre;
}

.preloader__lead {
  position: absolute;
  left: 398px;
  top: 376px;
  color: var(--golden-hour-500);
}

.preloader__list {
  position: absolute;
  left: 720px;
  top: 376px;
  width: 136px;
}

.preloader__track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
}

.preloader__word {
  color: var(--deep-brown-100);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Шапка (362:1572), 1366 × 107 */
.header {
  left: 0;
  top: 0;
  width: 1366px;
  height: 107px;
  overflow: hidden;
  color: #fff;
}

.header__logo {
  left: 634px;
  top: 27px;
  width: 99px;
  height: 26px;
}

.header__logo img {
  display: block;
  width: 99px;
  height: 26px;
}

.header__address {
  left: 20px;
  top: 25px;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}

.header__phone {
  right: 224px;
  margin-right: -2px;
  top: 33px;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
  white-space: nowrap;
}

.header__nav p {
  margin-right: -2px;
}

.header__nav {
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  align-items: center;
  color: var(--deep-brown-100);
  text-align: center;
  white-space: nowrap;
}

.header__book {
  left: 1162px;
  top: 20px;
  height: 40px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--deep-brown-700);
  white-space: nowrap;
}

.header__lang {
  left: 938px;
  top: 33px;
  font-size: 10px;
  line-height: 14px;
  white-space: pre;
}

.header__lang-off {
  color: rgba(255, 255, 255, 0.4);
}

.header__lang-on {
  color: #fff;
}

/* Пункты меню и логотип — ссылки, выглядят как в макете */
.header a {
  color: inherit;
  text-decoration: none;
}

/* Логотип для тёмной шапки: тот же SVG как маска, цвет — текущий цвет текста */
.header__logo-ink {
  display: none;
  position: absolute;
  inset: 0;
  background: currentColor;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

/* Тёмная шапка (светлый первый экран) */
.header--ink {
  color: var(--deep-brown-700);
}

.header--ink .header__logo img {
  visibility: hidden;
}

.header--ink .header__logo-ink {
  display: block;
}

.header--ink .header__nav {
  color: var(--deep-brown-700);
}

.header--ink .header__lang-off {
  color: rgba(37, 27, 27, 0.4);
}

.header--ink .header__lang-on {
  color: var(--deep-brown-700);
}

.header--ink .header__book {
  background: var(--deep-brown-800);
  color: var(--rich-brown-100);
}

/* ==========================================================================
   BookingForm
   ========================================================================== */

/* Форма бронирования (компонент с главной) — общая для страниц */
.booking {
  display: flex;
  gap: 2px;
}
.booking__field {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  height: 68px;
  padding: 14px 24px 10px;
  background: var(--deep-brown-500);
}

.booking__field-label {
  color: var(--deep-brown-300);
  white-space: nowrap;
}

.booking__field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.booking__field-value {
  color: var(--deep-brown-100);
  white-space: nowrap;
}

.booking__field-icon {
  width: 24px;
  height: 24px;
}

.booking__field--accent {
  background: var(--golden-hour-300);
}

.booking__field--accent .booking__field-label {
  color: var(--rich-brown-700);
}

.booking__field--accent .booking__field-value {
  color: var(--rich-brown-700);
  opacity: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  height: var(--scene-h);
  background: var(--deep-brown-700);
}

.hero__ui {
  left: 0;
  top: 0;
  width: 1366px;
  height: 100%;
}

/* Золотое свечение по краям кадра */
.hero__edge-glow {
  left: 0;
  top: 0;
  width: 1366px;
  height: 100%;
  box-shadow: inset 0 0 calc(20px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(50px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(80px * var(--glow-k)) 0 var(--golden-hour-500);
}

/*
 * Фото в шестиугольной маске.
 * Контейнер — вся сцена 1366 × 800; шестиугольник (Polygon 3: 373.842 × 323.514 @ 496.079, 221.743)
 * задан через clip-path, чтобы при скролле маска расширялась без потери чёткости.
 * Фото 637.87 × 356 — тот же кроп, что давал object-fit: cover в блоке 608 × 356.
 */
.hero__hex {
  left: 0;
  top: 0;
  width: 1366px;
  height: var(--scene-cover-h);
  /* Вертикально шестиугольник стоит по центру экрана: + --scene-dy */
  clip-path: polygon(
    589.75px calc(221.986px + var(--scene-dy)),
    776.671px calc(221.743px + var(--scene-dy)),
    869.921px calc(383.257px + var(--scene-dy)),
    776.25px calc(545.014px + var(--scene-dy)),
    589.329px calc(545.257px + var(--scene-dy)),
    496.079px calc(383.743px + var(--scene-dy))
  );
  pointer-events: none;
}

.hero__hex-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 683px calc(400px + var(--scene-dy));
}

.hero__hex-img {
  position: absolute;
  left: 364.065px;
  top: calc(222px + var(--scene-dy));
  width: 637.87px;
  height: 356px;
  /* для видео (16:9): тот же кадр, что у фото */
  object-fit: cover;
}

.hero__hex-shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

.hero__title-left,
.hero__title-right {
  font-size: 128px;
  line-height: 94px;
  letter-spacing: -5px;
  color: #fff;
}

/*
 * Маска строки: обрезка через clip-path, чтобы не менять раскладку.
 * Отрицательные отступы оставляют место под выносные элементы (й, р, у, б).
 */
.hero__line-mask {
  clip-path: inset(-32px -60px -38px -60px);
}

.hero__line {
  display: block;
  will-change: transform;
}

.hero__title-left {
  left: 20px;
  top: calc(273px + var(--scene-dy));
}

.hero__title-right {
  right: 20px;
  margin-right: 5px;
  top: calc(374px + var(--scene-dy));
  text-align: right;
}

/* Маска строки дескриптора (запас сверху под «й») */
.hero__subline-mask {
  clip-path: inset(-5px -10px -2px -10px);
}

.hero__subline {
  display: block;
}

.hero__subtitle {
  right: 20px;
  top: calc(508px + var(--scene-dy));
  width: 424px;
  font-size: 16px;
  line-height: 16px;
  color: #fff;
  text-align: right;
}

.hero__booking {
  left: 280px;
  /* форма привязана к низу экрана */
  top: calc(617px + 2 * var(--scene-dy));
}

/* ==========================================================================
   Btn
   ========================================================================== */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  white-space: nowrap;
  --btn-color: var(--deep-brown-700);
  --btn-bg: transparent;
  color: var(--btn-color);
}

.btn__label {
  position: relative;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* Обводка 0.5px из макета: рамка 1px с половинной насыщенностью цвета. Тень-обводка 0.5px при масштабе
   страницы (zoom) рисуется неровно — одна сторона толще; рамку браузер выравнивает по пикселям одинаково */
.btn--outline {
  height: 45px;
  border: 1px solid color-mix(in srgb, var(--btn-color) 55%, transparent);
}

.btn--solid .btn__label,
.btn--glow .btn__label {
  margin-right: -2px;
}

.btn--solid {
  height: 44px;
  background: var(--btn-bg);
}

.btn--glow {
  height: 45px;
  mix-blend-mode: plus-lighter;
  --btn-color: var(--rich-brown-100);
  --btn-bg: #000;
  background: var(--btn-bg);
}

.btn--glow::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: var(--glow-btn);
  pointer-events: none;
}

.btn--glow {
  position: relative;
}

/* ==========================================================================
   Attraction
   ========================================================================== */

.attraction {
  height: var(--scene-cover-h);
}

.attraction__bg {
  left: 0;
  top: 0;
  width: 1366px;
  height: 100%;
}

.attraction__shade {
  /* В макете главной 0.4; по раскадровке скролла затемнение 60% */
  background: rgba(0, 0, 0, 0.6);
}

.attraction__text {
  left: 741px;
  top: calc(212px + var(--scene-dy));
  width: 437px;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
}

.attraction__title {
  left: 187px;
  top: calc(187px + var(--scene-dy));
  width: 881px;
  white-space: pre-wrap;
  color: var(--deep-brown-100);
}

.attraction__btn {
  left: 540px;
  top: calc(557px + var(--scene-dy));
  width: 287px;
}

/* ==========================================================================
   Event
   ========================================================================== */

.event {
  height: var(--scene-h);
  overflow: hidden;
}

/* Половины экрана: координаты детей правой панели = координаты макета − 683 */
.event__panel {
  position: absolute;
  top: 0;
  width: 683px;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}

.event__panel--left {
  left: 0;
}

.event__panel--right {
  left: 683px;
  background: var(--deep-brown-700);
}

.event__photo-img {
  position: absolute;
  /* Кроп из макета (683 × 768), пропорционально увеличенный под высоту экрана */
  left: calc(-62.02px * var(--scene-k));
  top: 0;
  width: calc(1490.78px * var(--scene-k));
  height: 100%;
  /* центр панели в координатах изображения */
  transform-origin: calc(341.5px + 62.02px * var(--scene-k)) 50%;
}

.event__glow-square {
  left: 180px;
  top: calc(222px + var(--scene-dy));
  width: 324px;
  height: 324px;
  box-shadow: var(--glow-gold-square);
}

.event__arch {
  left: -102px;
  top: calc(222px + var(--scene-dy));
  width: 648px;
  height: 364px;
  overflow: hidden;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 280px 0;
  -webkit-mask-position: 280px 0;
  mask-size: 324px 324px;
  -webkit-mask-size: 324px 324px;
}

.event__arch-img {
  position: absolute;
  /* центр видимой арки: для уменьшения фото при появлении */
  transform-origin: 471.3px 162px;
  left: -4.52%;
  top: 0;
  width: 109.04%;
  height: 100%;
}

.event__desc {
  left: 18px;
  top: calc(635px + 2 * var(--scene-dy));
  width: 591px;
  color: var(--rich-brown-100);
}

.event__lead {
  left: 18px;
  /* 20px в Figma; +1px — разница округления базовой линии у текста 24/28 */
  top: 21px;
  width: 643px;
  font-size: 24px;
  line-height: 28px;
  color: var(--rich-brown-100);
}

.event__btn {
  left: 18px;
  top: calc(703px + 2 * var(--scene-dy));
  --btn-color: var(--rich-brown-100);
}

/* Маски строк (SplitText): запас сверху под «й» */
.event__lead-line-mask,
.event__desc-line-mask {
  padding-top: 5px;
  margin-top: -5px;
}

/* ==========================================================================
   IntroScene
   ========================================================================== */

/* Сцена — один экран 1366 × 768: «Место притяжения», поверх hero, поверх «Мероприятие» */
/* Дорожка прокрутки: пока она листается, сцена стоит на месте (sticky) */
.intro-track {
  position: relative;
  /* выше следующей секции: она открывается из-под сцены */
  z-index: 2;
  width: 1366px;
}

.intro-scene {
  position: sticky;
  top: 0;
  width: 1366px;
  height: var(--scene-h);
  overflow: hidden;
}

.intro-scene .event {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
}

/* Затемнение предыдущего экрана под половинами «Мероприятия» */
.intro-scene__dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--deep-brown-700);
  opacity: 0;
  pointer-events: none;
}

.intro-scene .hero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.attraction__line,
.attraction__text-line {
  will-change: transform;
}

/* Маска строки дескриптора: запас сверху, чтобы не обрезать «й» */
.attraction__text-line-mask {
  padding-top: 4px;
  margin-top: -4px;
}

/* Пока сцена не собрана (ждём шрифты), «Мероприятие» не должно перекрывать первый экран */
.intro-scene:not(.is-ready) .event {
  visibility: hidden;
}

/*
 * Вариант с видео: фон «Места притяжения» — само видео из hero, развернувшееся на весь экран.
 * Собственный фон секции скрыт, а её тексты подняты над слоем hero.
 */
/*
 * Поднимаем не секцию целиком, а её элементы: z-index на самой секции создал бы изолированную
 * группу, и наложение (plus-lighter) у светящейся кнопки перестало бы видеть видео под ней.
 */
.intro-scene--video .attraction {
  pointer-events: none;
}

.intro-scene--video .attraction__text,
.intro-scene--video .attraction__title,
.intro-scene--video .attraction__btn {
  z-index: 3;
}

.intro-scene--video .attraction__bg {
  display: none;
}

.intro-scene--video:not(.is-ready) .attraction {
  visibility: hidden;
}

.intro-scene--video .intro-scene__dim {
  z-index: 4;
}

.intro-scene--video .event {
  z-index: 5;
}

/* ==========================================================================
   GlowOrb
   ========================================================================== */

.glow-orb {
  position: absolute;
  width: 90px;
  height: 90px;
}

.glow-orb__circle {
  position: absolute;
  inset: 0;
  width: 90px;
  height: 90px;
  mix-blend-mode: plus-lighter;
}

.glow-orb__arrow {
  position: absolute;
  left: 38px;
  top: 38px;
  width: 14.5px;
  height: 14px;
}

.glow-orb__arrow--both {
  left: 31px;
  width: 27.75px;
}

/* ==========================================================================
   SliderCursor
   ========================================================================== */

/* Область ленты: свой курсор вместо системного, текст и картинки не выделяются при перетаскивании */
.slider-track {
  cursor: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.slider-track img {
  -webkit-user-drag: none;
  user-drag: none;
}

.slider-row {
  will-change: transform;
}

/*
 * Курсор стоит в левом верхнем углу области и двигается через transform.
 * Режим наложения задан на самом курсоре: у элемента с transform своя группа слоёв,
 * и наложение на вложенном круге перестало бы видеть фон.
 */
.slider-cursor {
  position: absolute;
  left: -45px;
  top: -45px;
  z-index: 20;
  width: 90px;
  height: 90px;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}

.slider-cursor .glow-orb {
  left: 0;
  top: 0;
}

.slider-cursor .glow-orb__circle {
  mix-blend-mode: normal;
}

/* Светлый фон: без наложения, заливка цветом фона + золотое свечение внутрь (как Ellipse 2: 30 / 20 / 10) */
.slider-cursor--light {
  mix-blend-mode: normal;
}

.slider-cursor__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rich-beige-100);
  box-shadow: inset 0 0 calc(10px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(20px * var(--glow-k)) 0 var(--golden-hour-500),
    inset 0 0 calc(30px * var(--glow-k)) 0 var(--golden-hour-500);
}

.slider-cursor__arrows {
  position: absolute;
  left: 31px;
  top: 38px;
  width: 27.75px;
  height: 14px;
  background: var(--deep-brown-700);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* ==========================================================================
   WhyFlex
   ========================================================================== */

.why {
  height: 954px;
}

/* Фон фрейма смещён на -2px и шире на 2px, как в макете */
.why__bg {
  left: -2px;
  top: 0;
  width: 1368px;
  height: 954px;
  background: var(--warm-brown-600);
}

.why__title {
  /* 683 − 2.5: компенсация хвостового letter-spacing (−5px) при центрировании через translate */
  left: 680.5px;
  top: 160px;
  transform: translateX(-50%);
  color: var(--warm-brown-100);
  text-align: center;
}

.why__track {
  left: 0;
  top: 326px;
  width: 1366px;
  height: 448px;
}

.why__row {
  position: absolute;
  /* по центру: (1366 − 3750.384) / 2 + 0.19 */
  left: -1192px;
  top: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.why__triangle {
  width: 515px;
  height: 446px;
  flex-shrink: 0;
}

.why__feature {
  display: flex;
  gap: 18px;
  align-items: center;
  width: 324px;
  flex-shrink: 0;
}

.why__feature-body {
  flex: 1 0 0;
  min-width: 1px;
  height: 447px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.why__feature-title {
  color: var(--warm-brown-100);
}

.why__feature-text {
  width: 250px;
  color: var(--warm-brown-200);
  white-space: pre-wrap;
}

.why__square {
  position: relative;
  width: 448px;
  height: 448px;
  flex-shrink: 0;
}

.why__arch {
  position: relative;
  width: 448px;
  height: 448px;
  flex-shrink: 0;
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
}

.why__arch--plain {
  overflow: hidden;
}

.why__arch-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
}

.why__arch-img {
  position: absolute;
  left: -22.25%;
  top: 0;
  width: 156.28%;
  height: 100%;
}

.why__arch-glow {
  position: absolute;
  inset: 0;
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
  box-shadow: inset 0 0 calc(20px * var(--glow-k)) 0 var(--luminous-pink-500), inset 0 0 calc(30px * var(--glow-k)) 0 var(--luminous-pink-500),
    inset 0 0 calc(40px * var(--glow-k)) 0 var(--luminous-pink-500);
}

/* Mask group 515.384 × 446; изображение 535×447 сдвинуто на -10px */
.why__hex-wrap {
  display: grid;
  width: 515.384px;
  flex-shrink: 0;
}

.why__hex {
  position: relative;
  width: 535px;
  height: 447px;
  margin-left: -10px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 10px 0;
  -webkit-mask-position: 10px 0;
  mask-size: 515.384px 446px;
  -webkit-mask-size: 515.384px 446px;
}

/* ==========================================================================
   RoomCard
   ========================================================================== */

.room-card {
  position: absolute;
  width: 658px;
}

.room-card--short {
  height: 501px;
}

.room-card--tall {
  height: 777px;
}

.room-card__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 658px;
  overflow: hidden;
}

.room-card--short .room-card__image {
  height: 447px;
}

.room-card--tall .room-card__image {
  height: 723px;
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
}

.room-card__btn {
  position: absolute;
  left: 458px;
  width: 200px;
  --btn-bg: var(--rich-beige-100);
}

.room-card--short .room-card__btn {
  top: 403px;
}

.room-card--tall .room-card__btn {
  top: 679px;
}

.room-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px;
  white-space: nowrap;
}

.room-card--short .room-card__caption {
  top: 465px;
  height: 36px;
}

.room-card--tall .room-card__caption {
  top: 741px;
  height: 36px;
}

.room-card__title {
  color: var(--warm-brown-800);
}

.room-card__meta {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  color: var(--warm-brown-400);
}

.room-card__orb {
  left: 284px;
}

/* Наведение: дневное фото плавно сменяется ночным */
.room-card__night {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.room-card:hover .room-card__night {
  opacity: 1;
}

/* Нет ночного фото: при наведении дневное плавно затемняется (временная замена ночной версии) */
.room-card--dim .room-card__image .img-cover {
  transition: filter 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.room-card--dim:hover .room-card__image .img-cover {
  filter: brightness(0.55) saturate(0.9);
}

.room-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Короткая карточка с аркой (Полулюкс в «Других категориях») */
.room-card--arch .room-card__image {
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
}

/* Подпись-описание: заголовок и описание выровнены по верху, описание справа (warm-brown/400) */
.room-card--described .room-card__caption {
  align-items: flex-start;
  height: auto;
  white-space: normal;
}

.room-card__title {
  white-space: nowrap;
}

.room-card__desc {
  text-align: right;
  color: var(--warm-brown-400);
}

/* Светлая подпись на тёмном фоне (warm-brown/100 и /300) */
.room-card--light .room-card__title {
  color: var(--warm-brown-100);
}

.room-card--light .room-card__meta,
.room-card--light .room-card__desc {
  color: var(--warm-brown-300);
}

/* ==========================================================================
   Rooms
   ========================================================================== */

.rooms {
  height: 2560px;
  background: var(--rich-beige-100);
}

.rooms__lux {
  left: 688px;
  top: 1867px;
}

.rooms__semilux {
  left: 20px;
  top: 1495px;
}

.rooms__comfort {
  left: 20px;
  top: 894px;
}

.rooms__standard {
  left: 688px;
  top: 990px;
}

.rooms__hero {
  left: 0;
  top: 0;
  width: 1366px;
  height: 637px;
  overflow: hidden;
}

.rooms__hero-bg {
  inset: 0;
}

.rooms__hero-shade {
  background: rgba(0, 0, 0, 0.4);
}

.rooms__heading {
  left: 20px;
  top: 450px;
  width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rooms__eyebrow {
  color: var(--warm-brown-200);
}

.rooms__hairline {
  padding-top: 16px;
}

.rooms__title {
  padding-top: 28px;
  color: var(--warm-brown-100);
}

.rooms__all {
  left: 1173px;
  top: 788px;
  --btn-color: var(--deep-brown-600);
}

.rooms__all .btn__label {
  color: var(--deep-brown-700);
}

.rooms__intro {
  left: 20px;
  /* 667px в Figma; +1px — разница округления базовой линии у текста 24/28 */
  top: 668px;
  width: 658px;
  font-size: 24px;
  line-height: 28px;
  color: var(--warm-brown-900);
}

.rooms__book {
  left: 583px;
  top: 2416px;
  --btn-bg: var(--golden-hour-500);
}

/* Курсор из макета (лежит под карточкой «Стандарт») */
.rooms__cursor {
  left: 1155px;
  top: 1541px;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.rooms__cursor img {
  position: absolute;
  left: calc(50% + 0.56px - 7.198px - 1.175px);
  top: calc(50% + 0.04px - 7.6545px - 0.375px);
  width: 16.7461px;
  height: 17.8588px;
}

/* ==========================================================================
   Gastronomy
   ========================================================================== */

.gastro {
  height: 1155px;
}

.gastro__hero {
  left: 0;
  top: 0;
  width: 1366px;
  height: 637px;
  overflow: hidden;
}

.gastro__bg {
  inset: 0;
  overflow: hidden;
}

.gastro__bg-img {
  position: absolute;
  left: 0;
  top: -89.25%;
  width: 100%;
  height: 298.83%;
}

.gastro__shade {
  background: rgba(0, 0, 0, 0.5);
}

.gastro__heading {
  left: 363px;
  top: 95px;
  width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gastro__eyebrow,
.gastro__title,
.gastro__sub {
  align-self: center;
}

.gastro__eyebrow,
.gastro__sub {
  color: var(--warm-brown-200);
}

.gastro__hairline {
  padding-top: 16px;
}

.gastro__title {
  padding-top: 28px;
  color: var(--warm-brown-100);
}

.gastro__sub {
  padding: 20px 0;
}

.gastro__dark {
  left: 0;
  top: 637px;
  width: 1366px;
  height: 518px;
  background: var(--deep-brown-700);
}

/* Карточка ресторана */
.restaurant {
  width: 658px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.restaurant__media {
  position: relative;
  width: 658px;
  height: 447px;
}

.restaurant__media--arch {
  height: 600px;
}

.restaurant__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.restaurant__media--arch .restaurant__photo {
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
}

.restaurant__btn {
  position: absolute;
  left: 399px;
  top: 403px;
  --btn-bg: var(--rich-beige-100);
}

.restaurant__media--arch .restaurant__btn {
  top: 556px;
}

.restaurant__orb {
  left: 284px;
  top: 179px;
}

.restaurant__media--arch .restaurant__orb {
  top: 255px;
}

.restaurant__caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 20px;
}

.restaurant__title {
  color: var(--warm-brown-100);
}

.restaurant__text {
  width: 310px;
  color: var(--warm-brown-300);
  text-align: right;
}

/* Область ленты: от верха центральной карточки до низа секции */
.gastro__track {
  left: 0;
  top: 319px;
  width: 1366px;
  height: 836px;
}

.gastro__row {
  position: absolute;
  left: 0;
  top: 0;
  width: 1366px;
}

.gastro__center {
  left: 354px;
  top: 0;
}

.gastro__right {
  left: 1120px;
  top: 71px;
}

.gastro__left {
  left: -392px;
  top: 71px;
}

/* ==========================================================================
   Amphitheatre
   ========================================================================== */

.amph {
  height: 1005px;
  overflow: hidden;
  background: var(--amph-bg, transparent);
}

.amph__heading {
  left: 36px;
  top: 100px;
  width: 1294px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.amph__eyebrow {
  text-align: center;
  white-space: nowrap;
  color: var(--warm-brown-600);
}

.amph__hairline {
  padding-top: 16px;
}

.amph__title {
  padding-top: 28px;
  text-align: center;
  color: var(--warm-brown-700);
}

.amph__intro {
  left: 36px;
  top: 241px;
  width: 459px;
  padding: 46px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.amph__text {
  padding: 20px 0;
  color: var(--rich-brown-400);
}

.amph__btn {
  --btn-color: var(--deep-brown-600);
}

.amph__btn .btn__label {
  color: var(--deep-brown-700);
}

.amph__canopy {
  top: 0;
  width: 775px;
  height: 293px;
  overflow: hidden;
}

.amph__canopy--left {
  left: -264px;
}

.amph__canopy--right {
  left: 963px;
  transform: scaleX(-1);
}

.amph__canopy-img {
  position: absolute;
  left: 0;
  top: -0.09%;
  width: 229.94%;
  height: 339.43%;
}

.amph__glow-square {
  left: 502px;
  top: var(--amph-square-top, 319px);
  width: 362px;
  height: 362px;
  background: var(--amph-bg, var(--rich-beige-100));
  box-shadow: var(--glow-gold-square);
  pointer-events: none;
}

.amph__garden {
  left: -292.5px;
  top: 150.5px;
  width: 1782px;
  height: 863px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: -371.5px -34.5px;
  -webkit-mask-position: -371.5px -34.5px;
  mask-size: 2184px 1018.5px;
  -webkit-mask-size: 2184px 1018.5px;
}

.amph__garden-img {
  object-position: bottom;
}

/* ==========================================================================
   MapView
   ========================================================================== */

.map {
  position: absolute;
  width: 1366px;
  height: 704px;
  overflow: hidden;
  background: var(--map-bg, var(--rich-beige-100));
}

.map__layer,
.map__vector,
.map__label {
  position: absolute;
}

.map__vector-inner {
  position: absolute;
}

.map__label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map__label p {
  flex: none;
  font-size: 10.395px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--deep-brown-500);
}

.map__fade {
  position: absolute;
  left: 0;
  width: 1370px;
}

.map__fade--top {
  top: 0;
  height: 136px;
  background: linear-gradient(to bottom, var(--map-bg, #f6efe8), transparent);
}

.map__fade--bottom {
  bottom: 0;
  height: 112px;
  background: linear-gradient(to top, var(--map-bg, #f6efe8), transparent);
}

/* Метка на карте: обводка 0.65px inside, многослойная тень */
.map__pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.198px;
  height: 41.58px;
  padding: 5.1975px 15.5926px 5.1975px 5.1975px;
  border-radius: 129.939px;
  background: #fff;
  box-shadow: inset 0 0 0 0.65px var(--deep-brown-200);
  filter: drop-shadow(0 129.939px 51.975px rgba(0, 0, 0, 0.07)) drop-shadow(0 54.285px 21.714px rgba(0, 0, 0, 0.05))
    drop-shadow(0 29.024px 11.609px rgba(0, 0, 0, 0.04)) drop-shadow(0 16.27px 6.508px rgba(0, 0, 0, 0.04))
    drop-shadow(0 8.641px 3.456px rgba(0, 0, 0, 0.03)) drop-shadow(0 3.596px 1.438px rgba(0, 0, 0, 0.02));
}

.map__pin--dark {
  background: var(--deep-brown-800);
}

.map__pin-photo {
  position: relative;
  flex-shrink: 0;
  width: 29.886px;
  height: 29.886px;
  border-radius: 1299.387px;
  overflow: hidden;
}

.map__pin-photo--dark {
  border-radius: 100px;
}

.map__pin-crop {
  position: absolute;
}

.map__pin-text {
  flex-shrink: 0;
  font-size: 7.796px;
  line-height: 10.395px;
  letter-spacing: 2.5988px;
  text-transform: uppercase;
  white-space: pre;
  color: #251b1b;
}

.map__pin--dark .map__pin-text {
  font-size: 12px;
  color: var(--deep-brown-100);
}

/* Подписи улиц (text on path) */
.map__street {
  position: absolute;
  overflow: visible;
}

.map__street text {
  font-family: 'Steinbeck', sans-serif;
  font-size: 10.3951px;
  text-transform: uppercase;
  white-space: pre;
  fill: var(--deep-brown-500);
}

/* ==========================================================================
   Location
   ========================================================================== */

.location {
  height: 1953px;
}

.location__map {
  left: 0;
  top: 340px;
}

.location__terrace {
  left: 80px;
  top: 1144px;
  width: 574px;
  height: 574px;
  overflow: hidden;
}

.location__sakura {
  left: 418px;
  top: 1519px;
  width: 334px;
  height: 334px;
  border-radius: 1000px;
  overflow: hidden;
}

.location__sakura-img {
  position: absolute;
  left: -47.12%;
  top: 0;
  width: 194.24%;
  height: 100%;
}

.location__heading {
  left: 317px;
  top: 100px;
  width: 732px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.location__eyebrow {
  text-align: center;
  white-space: nowrap;
  color: var(--warm-brown-600);
}

.location__hairline {
  padding-top: 16px;
}

.location__title-block {
  width: 100%;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.location__title {
  color: var(--warm-brown-700);
}

.location__desc {
  width: 560px;
  margin: 20px 0;
  text-align: center;
  white-space: pre-wrap;
  color: var(--rich-brown-400);
}

.location__stat {
  left: 769px;
  width: 448px;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.location__stat--airport {
  top: 1206px;
}

.location__stat--station {
  top: 1396px;
}

.location__stat-value {
  color: var(--golden-hour-500);
}

.location__stat-label {
  padding: 20px 0;
  color: var(--rich-brown-400);
}

.location__btn {
  top: 1580px;
  --btn-color: var(--deep-brown-600);
}

.location__btn .btn__label {
  color: var(--deep-brown-700);
}

.location__btn--route {
  left: 769px;
}

.location__btn--transfer {
  left: 1016px;
}

/* ==========================================================================
   Services
   ========================================================================== */

.services {
  height: 1204px;
}

.services__bg {
  left: 0;
  top: 0;
  width: 1366px;
  height: 637px;
  overflow: hidden;
}

.services__shade {
  background: rgba(0, 0, 0, 0.4);
}

.services__title {
  left: 20px;
  top: 420px;
  width: 1011px;
  color: var(--warm-brown-100);
}

.services__all {
  left: 1174px;
  top: 534px;
  --btn-color: var(--rich-brown-100);
}

.services__list {
  left: 20px;
  top: 657px;
  width: 1326px;
  height: 447px;
}

.services__row {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.service {
  display: flex;
  gap: 18px;
  align-items: center;
  width: 491px;
  flex-shrink: 0;
}

.service__body {
  flex: 1 0 0;
  min-width: 1px;
  height: 447px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.service__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.service__title {
  color: var(--warm-brown-700);
}

.service__list {
  width: 100%;
  color: var(--warm-brown-400);
}

.service__list li {
  margin-inline-start: 18px;
}

.service__list--dark {
  color: var(--deep-brown-700);
}

.service__photo {
  position: relative;
  width: 187px;
  height: 187px;
}

.service__photo--arch,
.service__photo--arch .img-cover,
.service__photo--arch .service__photo-glow {
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
}

.service__photo--circle,
.service__photo--circle .img-cover,
.service__photo--circle .service__photo-glow {
  border-radius: 1000px;
}

.service__photo-glow {
  position: absolute;
  inset: 0;
}

.service__photo-glow--pink {
  box-shadow: inset 0 0 calc(20px * var(--glow-k)) 0 var(--luminous-pink-500), inset 0 0 calc(30px * var(--glow-k)) 0 var(--luminous-pink-500),
    inset 0 0 calc(40px * var(--glow-k)) 0 var(--luminous-pink-500);
}

.service__photo-glow--blue {
  box-shadow: inset 0 0 calc(20px * var(--glow-k)) 0 var(--luminous-blue-500), inset 0 0 calc(30px * var(--glow-k)) 0 var(--luminous-blue-500),
    inset 0 0 calc(40px * var(--glow-k)) 0 var(--luminous-blue-500);
}

.service__photo-glow--green {
  box-shadow: inset 0 0 calc(20px * var(--glow-k)) 0 var(--luminous-green-600), inset 0 0 calc(30px * var(--glow-k)) 0 var(--luminous-green-600),
    inset 0 0 calc(40px * var(--glow-k)) 0 var(--luminous-green-600);
}

.service__hex {
  position: relative;
  width: 162px;
  height: 187px;
}

.service__hex-glow {
  mix-blend-mode: plus-lighter;
}

/* Маркер списка — глиф «•» шрифта Steinbeck, как в Figma */
.service__list {
  list-style: none;
}

.service__list li {
  position: relative;
}

.service__list li::before {
  content: '•';
  position: absolute;
  left: -11px;
  top: 0;
}

/* ==========================================================================
   Offers
   ========================================================================== */

.offers {
  /* в макете 1165: иконка пролистывания под карточками убрана (её заменил курсор ленты),
     отступ снизу равен верхнему — 140px */
  height: 1063px;
  overflow: hidden;
}

.offers__bg {
  left: 0;
  top: 0;
  width: 1366px;
  height: 1313px;
  background: var(--offers-bg);
}

.offers__heading {
  left: 265px;
  top: 140px;
  width: 836px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.offers__title {
  text-align: center;
  color: var(--warm-brown-100);
}

.offers__cards {
  left: 20px;
  top: 433px;
  width: 1326px;
  height: 490px;
}

.offers__row {
  position: absolute;
  /* по центру: (1326 − 1490) / 2 */
  left: -82px;
  top: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.offer {
  position: relative;
  width: 490px;
  height: 490px;
  flex-shrink: 0;
  background: var(--rich-brown-600);
}

.offer--arch {
  overflow: hidden;
}

.offer__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 491px;
  height: 491px;
}

.offer__shade {
  background: rgba(0, 0, 0, 0.6);
}

.offer__content {
  position: absolute;
  left: 0;
  top: 346px;
  width: 491px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.offer__content--center {
  left: 9px;
  width: 473px;
  padding: 0;
  text-align: center;
}

.offer__title {
  width: 100%;
  color: var(--deep-brown-100);
}

.offer__text {
  width: 100%;
  white-space: pre-wrap;
  color: var(--warm-brown-100);
}

/* В карточках с фото текст выровнен влево — компенсация хвостового трекинга не нужна */
.offer--photo .offer__title,
.offer--photo .offer__text {
  margin-right: 0;
}

.offer__text--narrow {
  width: 441px;
  white-space: normal;
}

.offer__eyebrow {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 451px;
  white-space: pre-wrap;
  color: var(--warm-brown-100);
}

.offer__eyebrow--center {
  left: 9px;
  width: 473px;
  text-align: center;
  white-space: normal;
}

.offer__arch-glow {
  position: absolute;
  left: 1.179px;
  top: 155px;
  width: 487.642px;
  height: 335px;
  border-top-left-radius: 253.98px;
  border-top-right-radius: 253.98px;
  box-shadow: inset 0 0 calc(12.699px * var(--glow-k)) 0 var(--luminous-pink-500), inset 0 0 calc(25.398px * var(--glow-k)) 0 var(--luminous-pink-500),
    inset 0 0 calc(40.637px * var(--glow-k)) 0 var(--luminous-pink-500);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  height: 569px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  padding: 40px 20px;
  background: var(--deep-brown-700);
}

.footer__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__logo {
  width: 99px;
  height: 26px;
}

.footer__book {
  --btn-bg: var(--deep-brown-900);
  --btn-color: var(--deep-brown-100);
}

.footer__divider {
  position: relative;
  width: 100%;
  height: 0;
}

.footer__divider img {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
}

.footer__cols {
  width: 100%;
  display: flex;
  gap: 178px;
  align-items: flex-start;
}

.footer__col {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__col--address {
  gap: 12px;
}

.footer__col--contacts {
  gap: 30px;
}

.footer__col--nav {
  gap: 14px;
}

.footer__col--nav p {
  width: 100%;
}

.footer__label {
  color: var(--deep-brown-400);
}

.footer__label,
.footer__link {
  white-space: nowrap;
}

.footer__link {
  color: var(--deep-brown-100);
}

.footer__address {
  width: 305px;
  color: var(--deep-brown-100);
}

.footer__route {
  --btn-color: var(--deep-brown-300);
}

.footer__contacts {
  width: 191px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__write {
  width: 191px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__socials {
  display: flex;
  gap: 19px;
  align-items: center;
}

.footer__icon {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.footer__tg {
  position: absolute;
  inset: 8.33%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: -2px -2px;
  -webkit-mask-position: -2px -2px;
  mask-size: 24px 24px;
  -webkit-mask-size: 24px 24px;
}

.footer__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__legal-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.footer__legal {
  font-family: 'Onest', sans-serif;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  color: var(--deep-brown-300);
}

.footer__dev {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
}

.footer__dev img {
  grid-area: 1 / 1;
  width: 120.489px;
  height: 13.999px;
}

.footer__dev p {
  grid-area: 1 / 1;
  margin: 14px 0 0 39.1px;
  font-family: 'TT Hoves', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: -0.2px;
  text-align: right;
  white-space: nowrap;
  color: #828d9e;
}