/* Prevent iOS Dynamic Type / text auto-resizing from breaking the layout */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

html, body {
  min-height: 100%;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Lenis required styles */
html.lenis, html.lenis body {
  height: auto;
}

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

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

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

body {
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol,
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

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

button,
input,
select,
textarea {
  background: none;
  border: none;
}

table {
  border-collapse: collapse;
}

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}




html,
body {
  background: #191816;
}

/* Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-track-piece {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(180, 140, 110, 0.75);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 140, 110, 1);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-button {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 140, 110, 0.75) transparent;
}





/* MAIN */


        @font-face {
            font-family: 'Apercu Regular Pro';
            src: url('fonts/apercu_regular_pro.otf') format('opetype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Acta Headline Book';
            src: url('fonts/ACTA-HEADLINE-BOOK.OTF') format('opentype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Acta Display Book';
            src: url('fonts/ACTA\ DISPLAY\ BOOK.TTF') format('truetype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }


        @font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-THIN.OTF') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-THINITALIC.OTF') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-ULTRALIGHTITALIC.OTF') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-LIGHT.OTF') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-LIGHTITALIC.OTF') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-REGULAR.OTF') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-REGULARITALIC.OTF') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-MEDIUM.OTF') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-MEDIUMITALIC.OTF') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-SEMIBOLD.OTF') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-SEMIBOLDITALIC.OTF') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-BOLD.OTF') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-BOLDITALIC.OTF') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-EXTRABOLD.OTF') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-EXTRABOLDITALIC.OTF') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-HEAVY.OTF') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-HEAVYITALIC.OTF') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-BLACK.OTF') format('opentype');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('./fonts/GILROY-BLACKITALIC.OTF') format('opentype');
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}



/* Обёртка контента виллы — прозрачный блок, поток секций не меняет */
.villa {
  display: block;
}

/* Loader */

.loader{
  background: #191816;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 1000;
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
  /* Тап по тёмному фону не должен давать чёрную вспышку нативной подсветки */
  -webkit-tap-highlight-color: transparent;
}

/* Финальный уезд лоадера вверх — открывает hero под ним */
.loader.is-exiting {
  transform: translateY(-100%);
}

/* При уезде фото гаснет, линия и тексты исчезают */
.loader.is-exiting .loader__villa--left::before,
.loader.is-exiting .loader__line,
.loader.is-exiting .loader__villas {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Лого + «Golden Mile» остаются на экране, пока крутится счётчик.
     Растворяются только когда загрузка дошла до 100% (класс .is-ready). */
  transition: opacity 0.722s ease-out;
}

/* Лого и текст растворяются в момент старта линии (после 100%) */
.loader.is-ready .preview {
  opacity: 0;
}

.loader__logo {
  width: min(520px, 78vw);
  aspect-ratio: 1602 / 141;
  background:
    linear-gradient(
      100deg,
      #5f3628 0%,
      #a65a34 30%,
      #e48d53 58%,
      #f0aa70 78%,
      #8c4b2f 100%
    );
  /* Слой 1 — мягкая световая волна (проявляет лого плавно слева направо),
     Слой 2 — форма логотипа */
  -webkit-mask:
    linear-gradient(90deg,
      #000 0%, #000 25%,
      rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%) 0% / 250% 100% no-repeat,
    url("images/logos/Main black.svg") center / contain no-repeat;
  mask:
    linear-gradient(90deg,
      #000 0%, #000 25%,
      rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%) 0% / 250% 100% no-repeat,
    url("images/logos/Main black.svg") center / contain no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* Стартовое состояние — лого скрыто (волна за левым краем) */
  -webkit-mask-position: 100% center, center;
  mask-position: 100% center, center;
}

/* Reveal запускается из JS (класс .is-loading) одновременно со счётчиком —
   так лого и счётчик всегда синхронны, независимо от кеша/задержки скрипта. */
.loader.is-loading .loader__logo {
  animation: loader-logo-reveal 1.4s ease-out 0.2s forwards;
}

.loader p{
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  color: #B08E73;
  font-size: 18px;
  margin-top: 1rem;
}

/* Текст выезжает снизу из-под линии после появления лого */
.loader__sub {
  overflow: hidden;
}

.loader__sub span {
  display: inline-block;
  transform: translateY(110%); /* стартовое состояние — спрятан под линией */
}

/* Выезжает следом за лого; запуск из JS (.is-loading), синхронно со счётчиком */
.loader.is-loading .loader__sub span {
  animation: loader-sub-rise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}

@keyframes loader-sub-rise {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

/* Счётчик загрузки 0→100% — снизу по центру, над линией */
.loader__progress {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: 'Acta Display Book', serif;
  font-weight: 400;
  color: #B58D70;
  font-size: clamp(34px, 7vw, 54px);
  line-height: 1;
  letter-spacing: 0.02em;
  /* Стартово скрыт; проявляется по .is-loading (синхронно с лого/счётчиком),
     исчезает при 100% (класс .is-ready) */
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.loader.is-loading .loader__progress {
  animation: loader-progress-in 0.6s ease-out 0.5s forwards;
}

.loader__progress-pct {
  font-size: 0.5em;
  margin-left: 0.06em;
  vertical-align: baseline;
}

@keyframes loader-progress-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Дошли до 100% — счётчик плавно исчезает (вверх).
   animation:none снимает loader-progress-in c forwards, который иначе держал бы
   opacity:1 и перебивал это правило (анимация важнее обычных свойств). */
.loader.is-ready .loader__progress {
  animation: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Вертикальная линия по центру экрана, прорастает снизу вверх.
   Запускается только после 100% загрузки (класс .is-ready), а не по таймеру. */
.loader__line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: #272727;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
}

.loader.is-ready .loader__line {
  animation: loader-line-grow 1.031s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}

/* Грязный URL (?category=): деление на секции пропускаем — ни линии, ни вилл,
   лоадер просто уезжает вверх после исчезновения счётчика. */
.loader.is-skip .loader__line,
.loader.is-skip .loader__villas {
  animation: none !important;
  opacity: 0 !important;
}

@keyframes loader-line-grow {
  from {
    transform: translateX(-50%) scaleY(0);
  }
  to {
    transform: translateX(-50%) scaleY(1);
  }
}

/* Mobile: горизонтальная линия растёт снизу вверх (по ширине) */
@keyframes loader-line-grow-h {
  from {
    transform: translateY(50%) scaleX(0);
  }
  to {
    transform: translateY(50%) scaleX(1);
  }
}

/* Mobile: фото villa1 проявляется из блюра само (без ховера) */
@keyframes loader-villa-photo-reveal {
  from {
    opacity: 0;
    filter: blur(24px);
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* Mobile: затемнение-градиент над фото проявляется по opacity */
@keyframes loader-villa-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Две колонки вилл — появляются после того, как линия дорастёт доверху */
.loader__villas {
  position: absolute;
  inset: 0;
  display: flex;
}

.loader__villa {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  overflow: hidden;
}

/* Фон-фото половины — проявляется из блюра при наведении */
.loader__villa--left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/webp/vertical2/3_1.webp") center / cover no-repeat;
  opacity: 0;
  filter: blur(24px);
  transform: scale(1.08);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
  z-index: 0;
  pointer-events: none;
}

.loader__villa--left:hover::before {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.loader__villa-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 5rem;
}

/* Размытая тёмная плашка за текстом (Figma: #000 30%, radius 366, blur 148.7).
   Видна только при наведении на левую половину — вместе с фото */
.loader__villa-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 366px;
  filter: blur(117.7px);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.loader__villa--left:hover .loader__villa-card::before {
  opacity: 1;
}

.loader__villa--left {
  transform: translateX(-40px);
}

.loader__villa--right {
  transform: translateX(40px);
}

/* Виллы выезжают после того, как дорастёт линия (запуск по .is-ready) */
.loader.is-ready .loader__villa--left {
  animation: loader-villa-left 0.928s cubic-bezier(0.22, 0.61, 0.36, 1) 1.38s forwards;
}

.loader.is-ready .loader__villa--right {
  animation: loader-villa-right 0.928s cubic-bezier(0.22, 0.61, 0.36, 1) 1.38s forwards;
}

.loader__villa-title {
  font-family: 'Acta Display Book', serif;
  font-weight: 400;
  color: #B58D70;
  font-size: clamp(24px, 3vw, 34px);
  margin: 0;
  transition: color 0.5s ease;
}

.loader__villa-link {
  margin-top: 1rem;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #B08E73;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  cursor: pointer;
  transition: color 0.5s ease;
}

/* Roll-эффект текста кнопки: уходит вверх, заново выезжает снизу.
   Окно высотой в одну строку, вторая копия спрятана под ним */
.loader__villa-link-roll {
  display: block;
  position: relative;
  overflow: hidden;
  height: 1.2em;
}

.loader__villa-link-text {
  display: block;
  line-height: 1.2em;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.2, 1);
}

/* Вторая копия стоит ровно под окном */
.loader__villa-link-text + .loader__villa-link-text {
  position: absolute;
  top: 100%;
  left: 0;
}

/* Ролл срабатывает только при наведении на саму кнопку */
.loader__villa-link:hover .loader__villa-link-text {
  transform: translateY(-100%);
}

/* При наведении на половину заголовок и кнопка становятся белыми */
.loader__villa--left:hover .loader__villa-title,
.loader__villa--left:hover .loader__villa-link {
  color: #ffffff;
}

.loader__villa-link--soon {
  color: #6f6f6f;
  border-bottom: none;
}

@keyframes loader-villa-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes loader-villa-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Лого-градиент плавно проявляется световой волной слева направо */
@keyframes loader-logo-reveal {
  0% {
    -webkit-mask-position: 100% center, center;
    mask-position: 100% center, center;
  }
  100% {
    -webkit-mask-position: 0% center, center;
    mask-position: 0% center, center;
  }
}


/* ─── HERO ────────────────────────────────────────────────── */

.hero {
  --hero-side-gradient-x: 42%;
  --hero-side-gradient-y: 65%;
  --hero-side-gradient-opacity: 0.75;
  --hero-center-gradient-start: 65%;
  --hero-center-gradient-opacity: 0.5;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1a1208;
}

/* NAV */
.hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 36px;
}

/* Sticky header (копия nav, появляется при скролле вверх) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

.site-header.visible {
  transform: translateY(0);
}

.site-header__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
}

/* Перекраска текста и лого в sticky-хедере в #B58D70 */
.site-header__nav .hero__menu-btn,
.site-header__nav .hero__menu-label,
.site-header__nav .hero__phone {
  color: #B58D70;
}

/* Бургер-SVG и лого в sticky — белый SVG перекрашиваем в #B58D70 через filter */
.site-header__nav .hero__menu-svg,
.site-header__nav .hero__logo img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(13%) saturate(857%) hue-rotate(347deg) brightness(91%) contrast(86%);
}


.hero__menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #fff;
}

.hero__menu-svg {
  width: 28px;
  height: auto;
  display: block;
}

.hero__menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero__menu-icon span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #fff;
}

.hero__menu-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: #fff;
}

.hero__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hero__logo img {
  height: 19.8px; /* +10% от 18px */
  width: auto;
}

.hero__nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero__phone,
.hero__cta {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: #fff;
}

.hero__phone {
  font-size: 14px;
}

.hero__cta {
  font-size: 12px;
  letter-spacing: 0.15em;
  background: #936f56;
  color: #fff;
  padding: 12px 26px;
  border-radius: 999px;
  transition: background 0.3s ease;
}

/* В sticky-хедере кнопка светлее и текст тёмный */
.site-header__nav .hero__cta {
  background: #B58D70;
  color: #191816;
}

.hero__cta:hover {
  background: #c79e80;
}

/* LAYERS */
.hero__layers {
  position: relative;
  width: 100%;
}

/* Background photo — defines hero height via natural proportions */
.hero__bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Cutout villa — anchored to bottom, full width, proportional height */
.hero__cutout {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  z-index: 3;
}

/* Title — sits just above the top edge of cutout (cutout top = bottom: 77.2%) */
.hero__title-wrap {
  position: absolute;
  bottom: 59%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding-bottom: 2%;
  margin-left: 11%;
}

.hero__title {
  font-family: 'Acta Display Book', serif;
  font-size: clamp(48px, 10vw, 180px);
  font-weight: 400;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
}

/* Round CTA in hero — mobile only (hidden on desktop) */
.hero__cta-round {
  display: none;
}

/* Location copy under title — mobile only (hidden on desktop) */
.hero__location--mobile {
  display: none;
}

/* Bottom location label */
.hero__location {
  position: absolute;
  bottom: 95px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 16px;
  opacity: 0.85;
  letter-spacing: 0.1em;
  color: #fff;
  white-space: nowrap;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) -210%, rgba(0, 0, 0, 0) 100%);
  z-index: 10;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse var(--hero-side-gradient-x) var(--hero-side-gradient-y) at left bottom,
      rgba(25, 24, 22, var(--hero-side-gradient-opacity)) 0%,
      rgba(25, 24, 22, 0.25) 50%,
      rgba(25, 24, 22, 0) 75%
    ),
    radial-gradient(
      ellipse var(--hero-side-gradient-x) var(--hero-side-gradient-y) at right bottom,
      rgba(25, 24, 22, var(--hero-side-gradient-opacity)) 0%,
      rgba(25, 24, 22, 0.25) 50%,
      rgba(25, 24, 22, 0) 75%
    ),
    linear-gradient(
      to bottom,
      rgba(25, 24, 22, 0) var(--hero-center-gradient-start),
      rgba(25, 24, 22, var(--hero-center-gradient-opacity)) 84%,
      rgba(25, 24, 22, 1) 100%
    );
}


/* ─── INTRO TEXT ──────────────────────────────────────────── */

.intro_text {
  background: #191816;
  color: #B58D70;
  padding: 100px 60px 120px;
}

.intro_text__tagline-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro_text__tagline {
  font-family: 'Acta Headline Book', serif;
  font-size: 75px;
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
  letter-spacing: 0.02em;
}

.intro_text__villa-header {
  padding-left: calc(50% + 25px);
  margin-bottom: 180px;
}

.intro_text__body {
  display: flex;
  align-items: flex-start;
  padding-bottom: 180px;
}

.intro_text__left {
  flex: 0 0 50%;
  display: flex;
  justify-content: flex-end;
}

.intro_text__left-inner {
  width: 40%;
  min-width: max-content;
  padding-right: 25px;
}

.intro_text__right {
  flex: 0 0 50%;
  display: flex;
  justify-content: flex-start;
}

.intro_text__right-inner {
  width: 40%;
  min-width: max-content;
  padding-left: 25px;
}

.intro_text__section-title {
  font-family: 'Acta Headline Book', serif;
  font-size: 45px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.intro_text__paragraph {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin-bottom: 40px;
  opacity: 0.5;
  color: #CBBBA6;
  white-space: pre-line;
}

.intro_text__villa-img img {
  width: 100%;
  max-width: 340px;
  opacity: 0.85;
  margin-left: -20px;
}

.intro_text__villa-name {
  font-family: 'Acta Headline Book', serif;
  font-size: clamp(72px, 8.2vw, 140px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.intro_text__villa-by {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 1px;
  color: #B58D70;
  margin-top: 12px;
  margin-bottom: 48px;
  margin-left: 20px;
}

.intro_text__specs {
  width: 100%;
  margin-bottom: 48px;
}

.intro_text__specs-list {
  width: 100%;
  border-top: 1px solid rgba(196, 168, 130, 0.3);
}

.intro_text__specs-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(196, 168, 130, 0.3);
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #CBBBA6;
}

.intro_text__spec-label {
  opacity: 0.7;
}

.intro_text__spec-value {
  font-weight: 400;
  opacity: 0.4;
}

.intro_text__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 130, 0.5);
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #B58D70;
  text-align: center;
  align-self: center;
  margin-top: 60px;
  overflow: hidden;
  transition: border-color 0.3s, color 0.3s;
}

/* Заливка, вырастающая из центра */
.intro_text__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(181, 141, 112, 0.4);
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.intro_text__cta:hover {
  border-color: #B58D70;
  color: #fff;
}

.intro_text__cta:hover::before {
  transform: scale(1);
}


/* ─── GALLERY ─────────────────────────────────────────────── */

.gallery {
  background: #191816;
  padding-top: 160px;
  padding-bottom: 120px;
  position: relative;
}

/* Photos — full viewport width */
.gallery__photos {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 520px;
  overflow: hidden;
}

.gallery__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  contain: strict;
}

.gallery__photo.active {
  pointer-events: auto;
}

.gallery__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
}

.gallery__label {
  position: absolute;
  bottom: 40px;
  left: 48px;
  font-family: 'Acta Headline Book', serif;
  font-size: 72px;
  font-weight: 400;
  color: #fff;
  opacity: 0.7;
  letter-spacing: 0.04em;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

/* Cards — sit below photo, right-aligned, overlap photo bottom */
.gallery__cards {
  position: absolute;
  bottom: 80px;
  right: 40px;
  width: 400px;
  z-index: 10;
}

.gallery__card {
  display: none;
  background: #473D37;
  padding: 48px 48px 52px;
}

.gallery__card.active {
  display: block;
}

.gallery__card-tag {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #D0CCCC;
  display: block;
  margin-bottom: 16px;
}

.gallery__card-title {
  font-family: 'Acta Headline Book', serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 32px;
}

.gallery__card-nav {
  display: flex;
  gap: 16px;
}

.gallery__btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.gallery__btn:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Счётчик, кнопка «+», крестик карточки, моб. стрелки, моб. заголовок — только мобильный (скрыты на десктопе) */
.gallery__counter,
.gallery__expand,
.gallery__card-close,
.gallery__nav-mobile,
.gallery__label-mobile,
.gallery__card-counter,
.gallery__overlay-close {
  display: none;
}


/* ─── LOCATION ────────────────────────────────────────────── */

.location {
  background: #2F2824;
}

.location__header {
  background: linear-gradient(to bottom, #191816 0%, #4B3E37 230%, transparent 100%);
  padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 6vw, 80px);
}

.location__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60px;
}

.location__title-line {
  font-family: 'Acta Headline Book', serif;
  font-size: clamp(72px, 9vw, 140px);
  font-weight: 400;
  color: #B58D70;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.location__title-line:nth-child(1) {
  padding-left: 4%;
}

.location__title-line:nth-child(2) {
  padding-left: 12%;
}

.location__title-line:nth-child(3) {
  padding-left: 0;
  align-self: flex-start;
}

.location__title-line:nth-child(3) {
  padding-left: 0;
}

.location__description {
  display: none;
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  color: #CBBBA6;
  opacity: 0.7;
  padding: 30px 22px;
}

.location__divider {
  display: none;
  width: 90%;
  height: 1px;
  margin: 0 auto;
  background: #B58D70;
  opacity: 0.3;
}

.location__map-wrap {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.location__map {
  width: 100%;
  height: auto;
  display: block;
}

/* Десктоп-карта видна по умолчанию, мобильная скрыта */
.location__map--mobile {
  display: none !important;
}

.map-dot {
  opacity: 0.15;
}

/* 3 stat blocks — sit at bottom-right, extend beyond the map */
.location__stats {
  position: absolute;
  bottom: -60px;
  right: 40px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.location__stat {
  width: 290px;
  height: 290px;
  background: #252422;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: background 0.4s ease, transform 0.3s ease;
}

.location__stat:hover {
  transform: scale(1.05);
}

.location__stat .location__stat-marker {
  align-self: flex-start;
  flex-shrink: 0;
}

.location__stat.active {
  background: #473D37;
}

.location__stat:not(.active) .location__stat-num,
.location__stat:not(.active) .location__stat-label {
  opacity: 0.45;
}

.location__stat-marker {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,0.4);
}

.location__stat.active .location__stat-marker {
  background: #fff;
  border-color: #fff;
}

/* Группа цифра+подпись — по центру карточки, текст внутри слева */
.location__stat-info {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.location__stat-num {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 90px;
  color: #fff;
  line-height: 1;
}

.location__stat-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  margin-top: 6px;
}

.location__bottom {
  height: 120px;
  background: #191816;
}





/* ─── ARCHITECTORS ────────────────────────────────────────────── */

.architectors {
  background: #191816;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.architectors__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* На десктопе wrapper прозрачен для layout — дети ведут себя как раньше */
.architectors__screen {
  display: contents;
}

/* Маска-окно: растёт по ширине из центра, обрезает видео как штора */
.architectors__video-mask {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 0%; /* старт: окно закрыто; раскрывается до 100% в JS */
  overflow: hidden;
  z-index: 0;
}

/* Видео всегда во весь экран и по центру — видна его центральная часть */
.architectors__video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  object-fit: cover;
}

/* 12% затемнение поверх видео */
.architectors__video-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.17;
  pointer-events: none;
}

/* Затемнение ВИДЕО до фона (под карточками) — карточки остаются яркими сверху */
.architectors__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #191816;
  opacity: 0;
  pointer-events: none;
}

/* Группа надпись + логотип — масштабируется как единое целое,
   поэтому расстояние между ними сжимается пропорционально */
.architectors__heading {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.architectors__subtitle {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 0;
}

.architectors__logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  transform: translateY(10%);
}

.architectors__stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width: 90vw;
  padding: 0 50px;
  margin-top: 5%;
}

.architectors__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.architectors__stat-num {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 90px;
  line-height: 1;
  color: #B58D70;
}

.architectors__stat-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
}

/* Сетка карточек — поверх видео, выезжает снизу вверх по скроллу (JS) */
.architectors__cards {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 78vw;            /* две колонки карточек с зазором */
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  pointer-events: none;
  will-change: transform;
}

.architectors__card {
  position: relative;
  width: 100%;
  aspect-ratio: 15 / 14;
  height: auto;
  border-radius: 0px;
  overflow: hidden;
  will-change: transform, opacity;
  pointer-events: auto;   /* ловит наведение мыши для зума картинки */
}

.architectors__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  will-change: transform;
}

/* Зум картинки при наведении — контейнер с overflow:hidden обрезает края */
.architectors__card:hover .architectors__card-img {
  transform: scale(1.08);
}

.architectors__card-name {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 21px;
  letter-spacing: 0.15em;
  color: white;
  opacity: 0.85;
  text-shadow: 2px 2px 14px #000000;
}

.architectors__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 100px;
  padding-bottom: 280px;
  width: 100%;
}

.architectors__cta-btn {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 130, 0.5);
  background: transparent;
  cursor: pointer;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #B58D70;
  transition: border-color 0.3s, color 0.3s;
}

.architectors__cta-btn:hover {
  border-color: #B58D70;
  color: #fff;
}


/* ─── INTERIOR GALLERY ────────────────────────────────────────────── */

.interior-gallery {
  background: #191816;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.interior-gallery__header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
}

.interior-gallery__title-left,
.interior-gallery__title-right {
  font-family: 'Acta Headline Book', serif;
  font-size: 90px;
  color: #B58D70;
  line-height: 1;
}

.interior-gallery__body {
  position: relative;
  flex: 1;
  min-height: 0;
}

.interior-gallery__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Лёгкое затемнение в левом-нижнем углу для читаемости навигации */
.interior-gallery__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    ellipse 60% 55% at 0% 100%,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 80%
  );
}

.interior-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  opacity: 0;
  filter: blur(0px);
  z-index: 1;
}

/* Активное (видимое) изображение — блюр плавно растворяется */
.interior-gallery__img.active {
  opacity: 1;
  filter: blur(0px);
  transition: filter 0.65s ease;
  z-index: 2;
}

/* Стартовое состояние при появлении: фото заблюрено */
.interior-gallery__img.active.blur-in {
  filter: blur(24px);
  transition: none;
}

.interior-gallery__nav {
  position: absolute;
  bottom: 40px;
  left: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.interior-gallery__nav-item {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Acta Headline Book', serif;
  font-size: 36px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  padding: 0;
  transition: color 0.3s;
  line-height: 1.1;
  text-transform: uppercase;
}

.interior-gallery__nav-item.active {
  color: #fff;
  font-weight: 400;
}

.interior-gallery__nav-item:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* По умолчанию (десктоп) показываем desktop-набор, mobile скрыт */
.interior-gallery__image-wrap--mobile,
.interior-gallery__nav--mobile {
  display: none;
}


/* ─── DOCUMENTS ────────────────────────────────────────────── */

.documents {
  background: #191816;
  padding: 80px 36px 120px;
  padding-bottom: 280px;
  padding-top:280px;
}

.documents__title {
  font-family: 'Acta Headline Book', serif;
  font-size: clamp(40px, 6vw, 80px);
  color: #B58D70;
  font-weight: 400;
  margin-bottom: 40px;
}

.documents__list {
  display: flex;
  gap: 16px;
}

.documents__card {
  width: calc(56vh * 3 / 4);
  height: 56vh;
  background: #372F2A;
  border-radius: 0;
  border: 1px solid #c79e80;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

.documents__card:hover {
  transform: scale(0.98);
  background: #2A2420;
}

.documents__date {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
}

.documents__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.documents__card-name {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
}

.documents__card-btn {
  width: 34px;
  height: 34px;
  background: rgba(25, 24, 22, 0.5);
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B58D70;
  transition: background 0.2s;
}

.documents__card-btn:hover {
  background: #4D4030;
}


/* ─── CONTACT ─────────────────────────────────────────────── */

.contact {
  position: relative;
  min-height: 120vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Фоновое фото — отдельный слой для parallax по скроллу.
   Выше контейнера, чтобы при сдвиге не оголялись края. */
.contact__bg {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  background: url('./images/renders/12v1.jpeg') center center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}

.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.11);
  z-index: 1;
}

.contact__form-wrap {
  position: relative;
  z-index: 2;
  width: 550px;
  height: 87vh;
  min-height: 500px;
  background: #191816;
  padding: 36px 48px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact__tagline {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.6;
}

.contact__middle {
  display: flex;
  flex-direction: column;
}

.contact__title {
  font-family: 'Acta Headline Book', serif;
  font-size: 45px;
  font-weight: 400;
  color: #B58D70;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}

.contact__title-right {
  display: block;
  text-align: right;
  margin-top: 12px;
}

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

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

.contact__label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}

.contact__input {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.3s;
}

.contact__input:focus {
  border-bottom-color: #B58D70;
}

.contact__btn {
  margin-top: 12px;
  align-self: center;
  background: #B58D70;
  border: none;
  color: #fff;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 14px 40px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.3s;
}

.contact__btn:hover {
  background: #9A7560;
}

.contact__privacy {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  line-height: 1.7;
  text-transform: uppercase;
}


/* ─── FOOTER ──────────────────────────────────────────────── */

.footer {
  background: #2A2320;
  padding: 0 40px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
}

/* TOP ROW */
.footer__top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 48px 0 40px;
  flex: 1;
}

.footer__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}


.footer__top-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__year {
  font-size: 36px;
  color: #B58D70;
  line-height: 1;
  letter-spacing: 0.02em;
}

.footer__year-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #B58D70;
  text-transform: uppercase;
}

.footer__logo {
  height: 44px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(62%) sepia(22%) saturate(500%) hue-rotate(345deg) brightness(98%) contrast(90%);
}

.footer__map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(181, 141, 112, 0.5);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 28px;
  transition: border-color 0.3s, color 0.3s;
}

.footer__map-btn:hover {
  border-color: #B58D70;
  color: #fff;
}

/* Мобильная кнопка GOOGLE MAPS (в блоке телефон/почта) — только на мобайле */
.footer__map-btn--mobile {
  display: none;
}

/* Соц-иконки (кружки) — только на мобайле */
.footer__socials {
  display: none;
}

.footer__top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.footer__phone {
  font-size: 28px;
  color: #B58D70;
  letter-spacing: 0.04em;
  line-height: 1;
}

.footer__email {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(181, 141, 112, 0.7);
  text-transform: uppercase;
}

/* MID ROW */
.footer__mid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 28px 0 24px;
}

.footer__mid-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__rights {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

.footer__address {
  font-size: 22px;
  color: #B58D70;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer__mid-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* PROMOTED BY + UNREAL ESTATE прижаты друг к другу под лого */
.footer__promoted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.footer__promoted-by {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}


/* ─── QUOTE (scroll word-by-word reveal) ─────────────────────────────── */
.quote {
  background: #191816;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 8vw 25vh;
  margin-top: -10%;
  position: relative;
  z-index: 30;
}

.quote__inner {
  max-width: 1100px;
}

.quote__text {
  font-family: 'Acta Headline Book', serif;
  font-weight: 400;
  font-size: 45px;
  line-height: 1.45;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}

/* Каждое слово оборачивается в .quote__word из JS */
.quote__text .quote__word {
  color: rgba(181, 141, 112, 0.18);
  transition: color 0.1s linear;
}

.quote__author {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.45);
  margin: 40px 0 0;
}

.footer__promoter {
  display: block;
  width: 195px;
  height: auto;
  opacity: 0.6;
}

/* BOTTOM ROW */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(181, 141, 112, 0.15);
}

.footer__copy,
.footer__links a,
.footer__instagram {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  gap: 32px;
}

.footer__links a:hover,
.footer__instagram:hover {
  color: rgba(255, 255, 255, 0.7);
}





.spacer{
  height: 50vh;
  background: #191816;
}


/* ─── FULLSCREEN MENU OVERLAY ─────────────────────────────────── */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #191816;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Close button (top-left) */
.menu-overlay__close {
  position: absolute;
  top: 22px;
  left: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: #B58D70;
}

.menu-overlay__close-icon {
  position: relative;
  width: 22px;
  height: 22px;
}

.menu-overlay__close-icon span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #B58D70;
}

.menu-overlay__close-icon span:first-child {
  transform: rotate(45deg);
}

.menu-overlay__close-icon span:last-child {
  transform: rotate(-45deg);
}

.menu-overlay__close-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: #B58D70;
}

/* Menu links — Acta Headline */
.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.menu-overlay__link {
  font-family: 'Acta Headline Book', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: 0.02em;
  color: #B58D70;
  line-height: 1.15;
  transition: opacity 0.3s ease;
  /* стартовое состояние для scale-появления */
  opacity: 0;
  transform: scale(0.8);
}

.menu-overlay__link:hover {
  opacity: 0.6;
}

/* Все пункты появляются одновременно, но с задержкой —
   сначала проявляется фон оверлея (0.5s), потом текст */
.menu-overlay.open .menu-overlay__link {
  animation: menuLinkIn 0.45s ease 0.6s forwards;
}

@keyframes menuLinkIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Contacts (bottom) — Gilroy */
.menu-overlay__contacts {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 80px;
}

.menu-overlay__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.menu-overlay__contact-label {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(181, 141, 112, 0.6);
}

.menu-overlay__contact-value {
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #B58D70;
}


/* ─── REQUEST POPUP ───────────────────────────────────────────── */

.popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Honeypot — уводим за экран (не display:none, чтобы боты его заполняли) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.popup.open {
  opacity: 1;
  visibility: visible;
}

.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.popup__box {
  position: relative;
  z-index: 1;
  width: min(620px, 90vw);
  background: #B58D70 ;
  padding: 48px 48px 44px;
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.popup.open .popup__box {
  transform: translateY(0);
}

.popup__close {
  position: absolute;
  top: 36px;
  right: 40px;
  cursor: pointer;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #191816;
  background: none;
  border: none;
}

.popup__title {
  font-family: 'Acta Headline Book', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #191816;
  max-width: 80%;
  margin-bottom: 48px;
}

.popup__field {
  margin-bottom: 36px;
}

.popup__label {
  display: block;
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #191816;
  margin-bottom: 10px;
}

.popup__input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(25, 24, 22, 0.5);
  padding: 6px 0;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #191816;
  outline: none;
  transition: border-color 0.3s ease;
}

.popup__input:focus {
  border-bottom-color: #191816;
}

.popup__privacy {
  font-family: 'Gilroy', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #191816;
  margin: 24px 0 32px;
}

.popup__privacy a {
  text-decoration: underline;
}

.popup__submit {
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #B58D70;
  background: #191816;
  padding: 16px 34px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.popup__submit:hover {
  opacity: 0.85;
}


/* ─── TABLET (1025px – 1250px) ─────────────────────────────────── */

@media (min-width: 1025px) and (max-width: 1250px) {

  /* VILLA CAPRICHO */
  .intro_text__villa-name {
    font-size: 90px;
  }

  /* GALLERY label */
  .gallery__label {
    font-size: 50px;
  }

  /* Карточка gallery — меньше */
  .gallery__cards {
    width: 320px;
  }

  .gallery__card {
    padding: 36px 36px 40px;
  }

  .gallery__card-title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  /* Кнопка BOOK VIEWING — круглая, меньше */
  .intro_text__cta {
    width: 140px;
    height: 140px;
  }

  /* SPECS — растянуть по ширине как CONCEPT */
  .intro_text__right-inner {
    width: 60%;
    min-width: 0;
  }

  /* LOCATION title: 10vw → 8vw */
  .location__title-line {
    font-size: clamp(72px, 8vw, 140px);
  }

  /* LOCATION карточки 290 → 200, цифра 90 → 60 */
  .location__stat {
    width: 200px;
    height: 200px;
  }

  .location__stat-num {
    font-size: 60px;
  }

  /* Лого archidom — опустить ниже на 10% */
  .architectors__logo {
    transform: translateY(10%);
  }

  /* INTERIOR GALLERY title: 90 → 70 */
  .interior-gallery__title-left,
  .interior-gallery__title-right {
    font-size: 70px;
  }

  /* QUOTE text: 45 → 36 */
  .quote__text {
    font-size: 36px;
  }
}


/* ─── SMALL DESKTOP (1251px – 1440px) ──────────────────────────── */

@media (min-width: 1251px) and (max-width: 1680px) {

  /* SPECS — растянуть по ширине как CONCEPT */
  .intro_text__right-inner {
    width: 50%;
    min-width: 0;
  }
}


/* ─── Pre-MOBILE ADAPTIVE (767px – 1024px) ────────────────────────────── */

@media (min-width: 767px) and (max-width: 1024px) {

  /* Скрыть телефон в hero nav и в sticky header */
  .hero__phone {
    display: none;
  }

  /* INTRO TEXT */
  .intro_text__tagline {
    font-size: 50px;
  }

  .intro_text__villa-name {
    font-size: 7vw;
  }

  .intro_text__right-inner {
    width: 70%;
    min-width: 0;
  }

  /* GALLERY */
  .gallery__label {
    font-size: 50px;
  }

  /* Карточки gallery — уменьшить пропорционально */
  .gallery__cards {
    width: 300px;
  }

  .gallery__card {
    padding: 32px 32px 36px;
  }

  .gallery__card-tag {
    font-size: 10px;
    margin-bottom: 12px;
  }

  .gallery__card-title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .gallery__btn {
    width: 38px;
    height: 38px;
  }

  /* LOCATION */
  .location__title-line {
    font-size: clamp(56px, 7vw, 140px);
  }

  /* Карточки на карте + текст в них — на 30% меньше */
  .location__stat {
    width: 203px;
    height: 203px;
    padding: 11px 14px 14px;
  }

  .location__stat-num {
    font-size: 63px;
  }

  .location__stat-label {
    font-size: 9px;
  }

  /* ARCHITECTORS */
  .architectors__stat-num {
    font-size: 70px;
  }

  .architectors__stat-label {
    font-size: 14px;
    line-height: 1.2;
  }

  .architectors__card {
    aspect-ratio: 15 / 18;
  }

  /* INTERIOR GALLERY */
  .interior-gallery__title-left,
  .interior-gallery__title-right {
    font-size: 60px;
  }

  .interior-gallery__nav-item {
    font-size: 32px;
  }

  /* Усилить затемнение под nav — градиент больше по площади */
  .interior-gallery__image-wrap::after {
    background: radial-gradient(
      ellipse 90% 55% at 0% 100%,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0) 90%
    );
  }

  /* QUOTE */
  .quote__text {
    line-height: 1.2;
  }

  /* CONTACT */
  .contact__form-wrap {
    height: 97vh;
  }
}


/* ─── MOBILE ADAPTIVE (≤766px) ─────────────────────────────────── */

@media (max-width: 766px) {

  /* ── LOADER (mobile) ──────────────────────────────────────────────
     Виллы друг под другом: villa1 сверху 80%, villa2 снизу 20%.
     Линия горизонтальная на границе 80/20, растёт снизу вверх.
     Фото villa1 проявляется из блюра само (ховера на тач нет). */
  .loader__villas {
    flex-direction: column;
  }

  /* villa1 — верхние 80%, текст и кнопка прижаты книзу блока */
  .loader__villa--left {
    flex: 0 0 80%;
    height: 80%;
    justify-content: flex-end;
    padding-bottom: 18%;
  }

  /* villa2 — нижние 20% */
  .loader__villa--right {
    flex: 0 0 20%;
    height: 20%;
    background: #191816;
  }

  /* Фото villa1 проявляется автоматически (без ховера) — после 100% (.is-ready) */
  .loader.is-ready .loader__villa--left::before {
    animation: loader-villa-photo-reveal 1.031s ease 1.38s forwards;
  }
  /* На тач-устройстве тап эмулирует :hover — фото должно оставаться видимым,
     а не прятаться. Держим финальное (проявленное) состояние, как у анимации. */
  .loader__villa--left:hover::before {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }

  /* Затемнение снизу вверх поверх фото (17%) — читаемость текста */
  .loader__villa--left::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.17) 0%,
      rgba(0, 0, 0, 0) 60%
    );
    opacity: 0;
  }
  .loader.is-ready .loader__villa--left::after {
    animation: loader-villa-overlay-fade 1.031s ease 1.38s forwards;
  }

  /* Плашку-затемнение за текстом на мобиле не показываем (фото видно сразу) */
  .loader__villa-card::before {
    display: none;
  }
  .loader__villa-card {
    padding: 0;
  }

  /* Текст villa1 сразу белый (на фото), villa2 — как был */
  .loader__villa--left .loader__villa-title,
  .loader__villa--left .loader__villa-link {
    color: #ffffff;
  }

  /* Горизонтальная линия-делитель на границе 80/20, растёт снизу вверх */
  .loader__line {
    left: 0;
    right: 0;
    bottom: 20%;
    width: 100%;
    height: 2px;
    transform: translateY(50%) scaleX(0);
    transform-origin: center bottom;
  }
  /* На мобиле — горизонтальная линия (переопределяет десктопную вертикальную) */
  .loader.is-ready .loader__line {
    animation: loader-line-grow-h 1.031s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
  }

  /* Грязный URL на мобиле — гасим линию/виллы и тут (перебивает .is-ready выше) */
  .loader.is-skip .loader__line,
  .loader.is-skip .loader__villas {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Затемнение в левом нижнем углу — мобильные значения */
  .interior-gallery__image-wrap::after {
    background: radial-gradient(
      ellipse 90% 55% at 0% 100%,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0) 90%
    );
  }

  /* ── HERO ── */
  /* Фон cover на всю высоту экрана */
  .hero,
  .hero__layers {
    height: 100vh;
  }

  .hero__bg {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center 60%;
  }

  /* Вырезанная вилла поверх фона — убрать на мобильном */
  .hero__cutout {
    display: none;
  }

  .hero__nav,
  .site-header__nav {
    padding: 18px 18px;
  }

  /* Sticky-хедер на телефоне — фон + линия снизу 95% по центру */
  .site-header {
    background: #1D1C1A;
  }

  .site-header__nav {
    position: relative;
  }

  .site-header__nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 1px;
    background: #B58D70;
  }

  /* Лого — слева в потоке */
  .hero__logo {
    position: static;
    left: auto;
    transform: none;
    order: -1;
  }

  /* Лого меньше */
  .hero__logo img {
    height: 15px;
  }

  /* Бургер — абсолютно прибит к правому краю навбара
     (надёжнее flex: не зависит от ширины соседей) */
  .hero__menu-btn {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    gap: 0;
    z-index: 30;
  }

  .hero__menu-svg {
    width: 32px;
  }

  .hero__menu-label {
    display: none;
  }

  /* Пустой контейнер с телефоном/кнопкой убираем целиком */
  .hero__nav-right {
    display: none;
  }

  /* Телефон и кнопка RESERVE скрыты */
  .hero__phone,
  .hero__cta {
    display: none;
  }

  /* Заголовок NEW VILLA — по центру, в две строки, выше по экрану */
  .hero__title-wrap {
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0;
    padding-bottom: 0;
    bottom: auto;
    top: 17%;
  }

  .hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: clamp(48px, 17vw, 85px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    padding: 0 24px;
    opacity: 0.87;
  }

  /* Слова в столбик со сдвигом от центра */
  .hero__title-word {
    display: block;
  }

  .hero__title-word--1 {
    margin-right: 0.5em;
  }

  .hero__title-word--2 {
    margin-left: 1.9em;
  }

  /* Оригинальный location у низа — скрыть, показываем копию под заголовком */
  .hero__location {
    display: none;
  }

  /* Копия location — по центру сразу под NEW VILLA */
  .hero__location--mobile {
    display: block;
    position: static;
    transform: none;
    text-align: center;
    margin-top: 12px;
    white-space: nowrap;
    font-size: 14px;
  }

  /* Round CTA — по центру внизу hero, залитая + пульсирующая */
  .hero__cta-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -65px; /* центрирование без transform — освобождаем его для GSAP-выезда */
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid #B48F72;
    background: transparent;
    font-family: 'Gilroy', sans-serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #c5a286;
    opacity: 0.9;
    text-align: center;
    z-index: 25;
  }

  /* Пульсирующие кольца вокруг кнопки (волнами) */
  .hero__cta-round::before,
  .hero__cta-round::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #B48F72;
    animation: hero-cta-pulse 3s ease-out infinite;
    pointer-events: none;
  }

  /* Сдвиги по времени создают поток из нескольких линий */
  .hero__cta-round::before {
    animation-delay: 1s;
  }

  .hero__cta-round::after {
    animation-delay: 2s;
  }

  /* ── INTRO TEXT ── */
  .intro_text {
    padding: 0 28px 100px;
  }

  .intro_text__tagline-wrap {
    height: 80vh;
  }

  .intro_text__tagline {
    font-size: min(45px, 9vw);
    line-height: 1.05;
  }

  /* VILLA CAPRICHO — влево, на всю ширину */
  .intro_text__villa-header {
    padding-left: 0;
    margin-bottom: 80px;
  }

  .intro_text__villa-name {
    font-size: clamp(44px, 13vw, 100px);
  }

  .intro_text__villa-by {
    margin-left: 0;
  }

  /* Колонки CONCEPT и SPECS — друг под другом */
  .intro_text__body {
    flex-direction: column;
    padding-bottom: 100px;
    gap: 64px;
  }

  .intro_text__left,
  .intro_text__right {
    flex: 1 1 auto;
    width: 100%;
    justify-content: flex-start;
  }


  .intro_text__left-inner,
  .intro_text__right-inner {
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .intro_text__section-title {
    font-size: 40px;
  }

  .intro_text__specs-list li {
    padding: 8px 0;
    font-size: 14px;
  }

  /* Параграф — снять жёсткие переносы, пусть тянется по ширине */
  .intro_text__paragraph {
    white-space: normal;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.6;
  }

  .intro_text__paragraph br {
    display: none;
  }

  /* CONCEPT image — на всю ширину экрана + рамка */
  .intro_text__villa-img img {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    border: 1px solid #B58D70;
  }

  /* BOOK VIEWING — пилюля как в sticky-хедере (вместо круглой) */
  .intro_text__cta {
    align-self: center;
    width: auto;
    height: auto;
    margin-top: 10px;
    border-radius: 999px;
    border: none;
    background: #B58D70;
    color: #191816;
    padding: 14px 30px;
    font-size: 12px;
    letter-spacing: 0.15em;
    font-weight: 500;
  }

  /* Убрать круговую заливку-ховер от круглой версии */
  .intro_text__cta::before {
    display: none;
  }

  .intro_text__cta:hover {
    color: #191816;
    background: #c79e80;
  }

  /* Отступ между gallery и location — меньше на мобильном */
  .gallery-location-spacer {
    height: 20vh !important;
  }

  /* ── MENU OVERLAY ── */
  /* Кнопка закрытия — вправо */
  .menu-overlay__close {
    left: auto;
    right: 22px;
  }

  .menu-overlay__contacts {
    gap: 24px;
    padding: 0 22px;
    flex-wrap: wrap;
  }

  .menu-overlay__contact {
    align-items: flex-start;
    gap: 2px;
  }

  .menu-overlay__contact-value {
    font-size: clamp(12px, 3.6vw, 14px);
    letter-spacing: 0.05em;
  }

  /* ── GALLERY (mobile redesign) ── */
  .gallery {
    padding: 10px 22px 80px;
    display: flex;
    flex-direction: column;
  }

  /* Оригинальный label (внутри photos) — скрыть на мобильном */
  .gallery__label {
    display: none;
  }

  /* Копия заголовка над фото — видна на мобильном */
  .gallery__label-mobile {
    display: block;
    font-family: 'Acta Headline Book', serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #B58D70;
    margin-bottom: 16px;
  }

  .gallery__photos {
    position: relative;
    height: 70vh;
    min-height: 0;
    width: 100%;
  }

  /* Счётчик — слева внизу на фото */
  .gallery__counter {
    display: block;
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 6;
    font-family: 'Acta Headline Book', serif;
    font-size: 26px;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    pointer-events: none;
  }

  .gallery__counter-current {
    color: #CBBBA6;
  }

  .gallery__counter-total {
    opacity: 0.5;
  }

  /* Кнопка «+» — справа внизу на фото, моргает при нажатии */
  .gallery__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 6;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(25,24,22,0.25);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
  }

  /* Моргание при нажатии (класс добавляет JS) */
  .gallery__expand.blink {
    animation: gallery-expand-blink 0.4s ease;
  }

  /* Карточки: контейнер по умолчанию скрыт; стрелки внутри них тоже */
  .gallery__cards {
    position: static;
    width: auto;
    margin: 0;
    display: none;
  }

  .gallery__card {
    display: none;
  }

  .gallery__card-nav {
    display: none;
  }

  /* Стрелки под фото */
  .gallery__nav-mobile {
    display: flex;
    gap: 12px;
    margin-top: 18px;
  }

  /* Карточка-оверлей по клику «+» — ложится ТОЧНО на область фото.
     show-card вешается на .gallery (см. JS). .gallery position:relative (base).
     top = padding-top(80) + label(44) + margin(16) = 140px; height = 62vh (= фото). */
  .gallery.show-card .gallery__cards {
    display: block;
    position: absolute;
    left: 22px;
    right: 22px;
    top: 140px;
    height: 62vh;
    margin: 0;
    z-index: 8;
    overflow: hidden; /* обрезает выезжающую карточку по границам фото */
  }

  /* Бежевая карточка с текстом СВЕРХУ — фон выезжает снизу вверх */
  .gallery.show-card .gallery__card.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    inset: 0;
    background: #B58D70;
    padding: 28px 26px;
    animation: gallery-card-slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* Контент появляется ПОСЛЕ выезда фона */
  .gallery.show-card .gallery__card.active .gallery__card-tag,
  .gallery.show-card .gallery__card.active .gallery__card-title {
    animation: gallery-card-text-in 0.45s ease both;
    animation-delay: 0.4s;
  }

  /* ── Закрытие: фон уезжает вниз, контент гаснет сразу ── */
  .gallery.closing .gallery__card.active {
    animation: gallery-card-slide-down 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .gallery.closing .gallery__card.active .gallery__card-tag,
  .gallery.closing .gallery__card.active .gallery__card-title,
  .gallery.closing .gallery__card-counter,
  .gallery.closing .gallery__overlay-close {
    animation: gallery-card-text-out 0.2s ease both;
  }

  .gallery.show-card .gallery__card.active .gallery__card-tag {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #191816;
    opacity: 0.7;
    margin-bottom: 14px;
  }

  .gallery.show-card .gallery__card.active .gallery__card-title {
    font-size: 24px;
    line-height: 1.25;
    color: #191816;
    margin-bottom: 0;
  }

  /* При открытой карточке прячем счётчик и плюс, что лежат в photos
     (они уходят под карточку) — вместо них показываем дубли внутри .gallery__cards */
  .gallery.show-card .gallery__counter,
  .gallery.show-card .gallery__expand {
    display: none;
  }

  /* Счётчик внутри карточки — слева внизу, поверх карточки */
  .gallery.show-card .gallery__card-counter {
    display: block;
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 12;
    font-family: 'Acta Headline Book', serif;
    font-size: 26px;
    color: #191816;
    letter-spacing: 0.04em;
    animation: gallery-card-text-in 0.45s ease both;
    animation-delay: 0.45s;
  }

  /* Кнопка закрытия (крестик) — справа внизу, поверх карточки */
  .gallery.show-card .gallery__overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 24px;
    bottom: 22px;
    z-index: 12;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(25,24,22,0.4);
    background: rgba(25,24,22,0.08);
    color: #191816;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transform: rotate(45deg);
    animation: gallery-close-in 0.45s ease both;
    animation-delay: 0.45s;
  }

  /* Плюс меньше */
  .gallery__expand {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  /* Отдельный крестик в карточке не нужен — закрываем через «+» */
  .gallery__card-close {
    display: none;
  }

  .gallery__card-title {
    font-size: 24px;
    margin-bottom: 0;
  }

  /* ── LOCATION ── */
  .location__title {
    padding: 0 22px;
  }

  .location__description {
    display: block;
  }

  .location__divider {
    display: block;
  }

  /* На телефоне показываем мобильную карту вместо десктопной */
  .location__map--desktop {
    display: none !important;
  }

  .location__map--mobile {
    display: block !important;
  }

  .location__title-line {
    font-size: clamp(28px, 8vw, 45px);
  }

  .location__title-line:nth-child(1),
  .location__title-line:nth-child(2) {
    padding-left: 0;
  }

  /* Карта — без 100vw (источник переполнения) */
  .location__map-wrap {
    width: 100%;
    left: auto;
    transform: none;
  }

  /* Карточки статистики — горизонтальный слайдер со снапом (свайп),
     парящий на нижней грани карты, как на десктопе (не в потоке) */
  .location__stats {
    position: absolute;
    bottom: -90px;
    left: 0;
    right: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 0 22px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;           /* только горизонтальный свайп, без верт. болтания */
    touch-action: pan-x;          /* касание двигает слайдер по X, верт. жесты — странице */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
  }

  /* Скрыть скроллбар (WebKit) */
  .location__stats::-webkit-scrollbar {
    display: none;
  }

  .location__stat {
    flex: 0 0 70%;                /* одна карточка на экран */
    width: 70%;
    height: auto;
    min-height: 120px;
    padding: 14px 18px;
    scroll-snap-align: center;
  }

  /* Цифра и подпись в одну строку — места теперь хватает */
  .location__stat-info {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .location__stat-num {
    font-size: 44px;
  }

  .location__stat-label {
    margin-top: 0;
  }

  /* Тёмная полоса под картой — даёт место «парящим» карточкам */
  .location__bottom {
    height: 120px;
  }

  .spacer {
    height: 30vh;
  }

  /* ── ARCHITECTORS ── */
  .architectors__video {
    width: 100%;
    left: 0;
    transform: none;
  }

  /* Контент — обычный поток: первый экран + столбик карточек под ним */
  .architectors__content {
    display: block;
    height: auto;
    overflow: visible;
  }

  /* Первый экран (видео+лого+цифры) — его пиннит JS на время фазы 1 */
  .architectors__screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6vh;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 41vh;        /* лого/цифры опущены ниже (26vh + 15vh) */
  }

  /* Видео-штора и затемнение покрывают только первый экран */
  .architectors__video-mask,
  .architectors__fade {
    height: 100%;
  }

  /* Карточки — обычный статический столбик под первым экраном, фон #191816 */
  .architectors__cards {
    position: static;
    inset: auto;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
    padding: 8vh 0;
    background: #191816;
    pointer-events: auto;
  }

  .architectors__heading {
    gap: 12px;
  }

  /* Подзаголовок — меньше трекинг, чтобы влезал в ширину экрана */
  .architectors__subtitle {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .architectors__logo {
    height: auto;
    width: 85%;
  }

  /* Цифры — в 2 колонки под лого, компактнее */
  .architectors__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 40px 40px;
    padding: 0 22px;
    margin-top: 20px;
    justify-items: center;
  }

  .architectors__stat {
    align-items: center;
    text-align: center;
    gap: 24px 36px;
  }

  .architectors__stat-num {
    font-size: 44px;
  }

  .architectors__stat-label {
    font-size: clamp(11px, 3vw, 14px);
  }

  /* Карточки — статический столбик, не absolute: широкие и высокие */
  .architectors__card {
    position: static;
    top: auto;
    left: auto;
    width: 90vw;
    aspect-ratio: auto;
    height: 60vh;
  }

  /* Затемнение в левом нижнем углу, чтобы название было читаемым */
  .architectors__card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(
      to top right,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0) 70%
    );
    pointer-events: none;
    z-index: 1;
  }

  .architectors__card-name {
    font-size: 14px;
    z-index: 2;
  }

  .architectors__cta {
    padding-bottom: 140px;
  }

  /* ── INTERIOR GALLERY ── */
  /* На телефоне меняем набор: desktop скрыт, mobile показан */
  .interior-gallery__image-wrap--desktop,
  .interior-gallery__nav--desktop {
    display: none;
  }

  .interior-gallery__image-wrap--mobile {
    display: block;
  }

  .interior-gallery__nav--mobile {
    display: flex;
  }

  .interior-gallery__header {
    padding: 16px 10px;
    gap: 0.25em;
  }

  .interior-gallery__title-left,
  .interior-gallery__title-right {
    font-size: clamp(28px, 9vw, 40px);
    white-space: nowrap;
  }

  .interior-gallery__nav {
    left: 22px;
    bottom: 24px;
  }

  .interior-gallery__nav-item {
    font-size: clamp(18px, 5.5vw, 26px);
  }

  /* ── DOCUMENTS ── */
  .documents {
    padding: 120px 22px 140px;
  }

  /* Карточки — горизонтальный скролл вместо вылета за экран */
  .documents__list {
    flex-direction: column;
  }

  .documents__card {
    flex: 0 0 auto;
    width: 100%;
    height: 60vw;
  }

  /* ── QUOTE ── */
  .quote {
    min-height: auto;
    align-items: flex-start;
    padding: 8vh 24px 18vh;
    margin-top: 0;
  }

  .quote__text {
    font-size: clamp(18px, 5.5vw, 26px);
    line-height: 1.3;
  }

  .quote__author {
    font-size: clamp(14px, 4.5vw, 18px);
  }

  /* ── CONTACT ── */
  /* height:auto + вертикальные паддинги вместо жёсткого центрирования по vh,
     чтобы форма не обрезалась, если контента больше высоты экрана */
  .contact {
    min-height: 100vh;
    height: auto;
    align-items: stretch;
    padding: 80px 0;
  }

  .contact__form-wrap {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 75vh;
    padding: 28px 24px;
    margin: 0 16px;
  }

  /* Воздух вокруг верхнего и нижнего текста, чтобы они не липли
     к краям блока / к кнопке на маленьких экранах */
  .contact__tagline {
    margin-top: 12px;
    margin-bottom: 24px;
  }

  .contact__privacy {
    margin-top: 28px;
  }

  .contact__title {
    font-size: 34px;
  }

  /* ── FOOTER (mobile) ── */
  .footer {
    padding: 0 22px;
    min-height: 75vh;
    background: #B58D70;
    text-align: center;
  }

  /* БЛОК 1 — вся информация. Растягивается на всё свободное место,
     три подгруппы (год / телефон+кнопка / unreal+соцсети) разводятся
     через space-between по всей высоте блока */
  .footer__top {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 48px 0;
  }

  /* Порядок подгрупп: год → телефон/почта/кнопка → unreal/соцсети */
  .footer__top-left  { order: 1; }
  .footer__top-right { order: 2; }
  .footer__center    { order: 3; }

  .footer__top-left {
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  /* Подгруппа 2 — телефон, почта, кнопка GOOGLE MAPS.
     margin-top отделяет телефон от блока FINISH CONSTRUCTION */
  .footer__top-right {
    align-items: center;
    gap: 14px;
    margin-top: 40px;
  }

  /* Мобильная кнопка GOOGLE MAPS */
  .footer__map-btn--mobile {
    display: inline-flex;
    margin-top: 8px;
  }

  /* Подгруппа 3 — PROMOTED BY / UNREAL / соцсети */
  .footer__center {
    position: static;
    transform: none;
    align-items: center;
    gap: 24px;
    /* отделяем PROMOTED BY / UNREAL от кнопки GOOGLE MAPS */
    margin-top: 40px;
  }

  /* Десктопная mid-строка (адрес + кнопка) на мобайле не нужна */
  .footer__mid {
    display: none;
  }

  
  /* Скрываем лого Capricho — на мобайле его нет */
  .footer__logo {
    display: none;
  }

  /* Год */
  .footer__year {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  .footer__year-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
  }

  /* Телефон + email */
  .footer__phone {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(24px, 8vw, 34px);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .footer__email {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
  }

  /* Внешний вид кнопки GOOGLE MAPS на мобайле */
  .footer__map-btn {
    background: #242321;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 14px 30px;
    font-size: 11px;
    font-weight: 300;
    border-radius: 100px;
  }

  /* PROMOTED BY + лого UNREAL — белые на светлом фоне футера */
  .footer__promoted-by {
    color: #fff;
  }

  .footer__promoter {
    width: 165px;
    filter: brightness(0) invert(1);
    opacity: 1;
  }

  /* Соц-иконки — пустые кружки */
  .footer__socials {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
  }

  .footer__social {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s;
  }

  .footer__social img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  .footer__social:hover {
    border-color: rgba(255, 255, 255, 0.7);
  }

  /* БЛОК 2 — divider + копирайт/ссылки, прижат к низу футера */
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 28px 0 32px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .footer__copy,
  .footer__links a,
  .footer__instagram {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
  }

  /* «Golden Mile, Marbella» — заметнее остального, 90% */
  .footer__instagram {
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
  }

  .footer__links {
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .footer__links a:hover {
    color: rgba(255, 255, 255, 0.5);
  }

  .footer__instagram:hover {
    color: #fff;
  }

  /* ── POPUP (mobile) ──────────────────────────────────────────
     Скроллируемый и ужатый, чтобы целиком влезал на узких экранах
     и кнопка SEND REQUEST не уходила за пределы экрана */
  .popup {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 0;
  }

  .popup__box {
    width: calc(100vw - 32px);
    max-width: 460px;
    margin: auto;
    padding: 32px 24px 28px;
  }

  .popup__title {
    font-size: clamp(20px, 6vw, 30px);
    max-width: 100%;
    padding-top: 10px;
    padding-right: 12px; /* чтобы текст не заходил под крестик [X] */
    margin-bottom: 28px;
  }

  .popup__close {
    top: 22px;
    right: 22px;
  }

  .popup__field {
    margin-bottom: 24px;
  }

  .popup__input {
    font-size: 16px; /* 16px не вызывает зум-инпута на iOS */
  }

  .popup__privacy {
    margin: 18px 0 24px;
  }
}


/* Анимации пульсирующей CTA-кнопки в hero (mobile) */
@keyframes hero-cta-breathe {
  0%, 100% {
    background: rgba(181, 141, 112, 0.30);
  }
  50% {
    background: rgba(181, 141, 112, 0.45);
  }
}

@keyframes hero-cta-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Моргание кнопки «+» галереи при нажатии */
@keyframes gallery-expand-blink {
  0%, 100% { background: rgba(25,24,22,0.25); color: #fff; }
  50%      { background: #B58D70; color: #191816; }
}

/* Карточка-оверлей выезжает снизу вверх */
@keyframes gallery-card-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Карточка уезжает вниз при закрытии */
@keyframes gallery-card-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* Появление текста/счётчика внутри карточки */
@keyframes gallery-card-text-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Контент гаснет при закрытии */
@keyframes gallery-card-text-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Появление кнопки закрытия (сохраняем поворот 45°) */
@keyframes gallery-close-in {
  from { opacity: 0; transform: rotate(45deg) scale(0.7); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}